/* ======================================================================
   MenuBar — Thanh loc/danh muc ngang dung chung (sticky, cuon ngang)
   ----------------------------------------------------------------------
   Theme bang BIEN CSS: moi trang chi doi bien la ra kieu rieng.
     .menubar-wrap--dark   : nen toi (thu vien / tap chi)
     .menubar-wrap--light  : nen trang (trang chu)
   Bien chinh:
     --mb-bg, --mb-color, --mb-color-hover, --mb-active, --mb-active-color,
     --mb-h (chieu cao), --mb-top (sticky top), --mb-below-bg (nen duoi)
   Dung chung: nap file nay + goi MenuBar.tao(items, opts) (MenuBar.js).
   ====================================================================== */

.menubar-wrap {
    position: sticky;
    top: var(--mb-top, 70px);
    z-index: 30;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--mb-bg, #3c434c);
    display: flex;
    align-items: stretch;
}

.menubar {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.menubar::-webkit-scrollbar { display: none; }

.menubar__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 0 var(--mb-pad, 20px);
    min-height: var(--mb-h, 52px);
    color: var(--mb-color, rgba(255,255,255,.68));
    font-size: var(--mb-fs, 12.5px);
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.menubar__item:hover { color: var(--mb-color-hover, #fff); }
.menubar__item.is-active { color: var(--mb-active-color, #fff); border-bottom-color: var(--mb-active, #8fc45c); }

.menubar__nav {
    flex: 0 0 46px;
    border: 0;
    background: var(--mb-nav-bg, rgba(0,0,0,.16));
    color: var(--mb-color-hover, #fff);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.menubar__nav:hover { background: var(--mb-nav-bg-hover, rgba(0,0,0,.34)); }

/* Nen khu noi dung ben duoi (dat class .menubar-below cho vung do) */
.menubar-below { background: var(--mb-below-bg, transparent); }

/* ---- Theme SANG (trang chu) ---- */
.menubar-wrap--light {
    --mb-bg: #ffffff;
    --mb-color: #5c6b7a;
    --mb-color-hover: #12385b;
    --mb-active: #2e7d32;
    --mb-active-color: #12385b;
    --mb-nav-bg: rgba(0,0,0,.05);
    --mb-nav-bg-hover: rgba(0,0,0,.10);
    --mb-h: 44px;
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* ---- Theme TOI (thu vien / tap chi) — mac dinh ---- */
.menubar-wrap--dark {
    --mb-bg: #3c434c;
    --mb-color: rgba(255,255,255,.68);
    --mb-color-hover: #ffffff;
    --mb-active: #8fc45c;
    --mb-active-color: #ffffff;
    --mb-nav-bg: rgba(0,0,0,.16);
    --mb-nav-bg-hover: rgba(0,0,0,.34);
}

/* ---- Mobile: dinh sat duoi header mobile (57px), thap gon lai ---- */
@media (max-width: 767px) {
    .menubar-wrap { top: var(--mb-top-mobile, 57px); }
    .menubar__item { min-height: 44px; font-size: 11px; padding: 0 14px; }
    .menubar__nav { flex: 0 0 38px; }
}