/* ============================================================
 * header.css — Redesign HEADER (phong cách "Tím brand hiện đại").
 * File độc lập, KHÔNG qua build; nạp SAU styles.min.css nên override toàn bộ.
 * Markup: resources/views/users/layout/header.blade.php
 * Giữ nguyên tên class -> không vỡ JS (dropdown, dark-mode, search, menu mobile).
 * ============================================================ */

:root {
    --hd-h: 56px;                       /* chiều cao header bar (sticky đo động nên đổi được) */
    --hd-g1: #6d28d9;                   /* tím đậm */
    --hd-g2: #7c3aed;                   /* tím */
    --hd-g3: #9333ea;                   /* tím sáng */
    --hd-accent: #c084fc;               /* nhấn */
    --hd-nav-bg: #ffffff;
    --hd-nav-text: #2a2f3a;
    --hd-nav-active: #7c3aed;
    --hd-radius: 22px;
    --hd-shadow: 0 6px 18px rgba(91, 33, 182, 0.18);
    --hd-focus: 0 0 0 3px rgba(255, 255, 255, 0.85);
}

/* ============================================================
 * 1) HEADER BAR
 * ============================================================ */
.header {
    /* Giữ ảnh nền gốc (pháo hoa) + gradient tím phía sau lấp phần rìa */
    background: url(/assets/images/bg.jpg) top center repeat-x,
        linear-gradient(120deg, var(--hd-g1) 0%, var(--hd-g2) 52%, var(--hd-g3) 100%);
    background-size: auto 100%, cover;    /* ảnh pháo hoa cao bằng header */
    width: 100%;
    height: var(--hd-h);
    box-shadow: 0 2px 14px rgba(76, 29, 149, 0.3);
    transition: top 0.3s ease-in-out;
    will-change: top;
    z-index: 1001;
    position: relative;
}
/* Nền theo mùa: giữ ảnh gốc + gradient phía sau */
.header-new-year-red {
    background: url(../images/bg_header_new_red.jpg) top center repeat-x,
        linear-gradient(120deg, var(--hd-g1), var(--hd-g2), var(--hd-g3));
}
.header-new-year-text {
    background: url(../images/bg_header_new_text.jpg) top center repeat-x,
        linear-gradient(120deg, var(--hd-g1), var(--hd-g2), var(--hd-g3));
}
.header-noel {
    background: url(../images/bg_header_noel.png) top center repeat-x,
        linear-gradient(120deg, var(--hd-g1), var(--hd-g2), var(--hd-g3));
}
.header.nav-up { top: calc(var(--hd-h) * -1); }
.header .navbar {
    z-index: 1001;
    min-height: var(--hd-h);
    margin: 0;
    border: 0;
    background: transparent;
}
.header .navbar-header { position: relative; height: var(--hd-h); }

/* ---- Logo ---- */
.header .navbar-brand {
    padding: 0;
    height: var(--hd-h);
    display: flex;
    align-items: center;
    transition: transform 0.25s ease;
}
.header .navbar-brand:hover { transform: translateY(-1px); }
.header .navbar-brand .logo {
    margin: 0;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: normal;
}
.header .navbar-brand .logo img {
    height: 30px;                 /* = kích thước gốc 150x30 -> không phóng to, ảnh nét */
    width: auto;
    max-width: 100%;
    display: block;
}

/* ============================================================
 * 2) SEARCH (desktop)
 * ============================================================ */
.search-box { margin: 0; }
.search-box .input-group {
    background: #fff;
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    height: 40px;
    margin-top: 8px;
}
.search-box .searchinput {
    border: none;
    height: 40px;
    border-radius: 0;
    padding: 0 16px;
    font-size: 14px;
    color: #2a2f3a;
    /* background: transparent; */
    box-shadow: none;
    flex: 1 1 auto;
}
.search-box .searchinput::placeholder { color: #9aa0ab; }
.search-box .searchinput:focus { outline: none; box-shadow: none; }
.search-box .input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.6), var(--hd-shadow);
}
.search-box input.loading {
    background: transparent url(/Data/Sites/1/skins/comic/images/loading-small.gif) no-repeat right center;
}
/* Wrapper nút search phải giữ đủ 44px, không bị co xuống 1% rồi bị overflow cắt */
.search-box .input-group-btn { display: flex; width: auto; flex: 0 0 auto; }
/* Nút search: bỏ ảnh PNG, dùng SVG inline (không thêm request) */
.search-box .searchbutton,
.searchbutton {
    width: 48px;
    min-width: 48px;
    height: 40px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    background: linear-gradient(120deg, var(--hd-g2), var(--hd-g3));
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"),
        linear-gradient(120deg, var(--hd-g2), var(--hd-g3));
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.2s ease;
}
.search-box .searchbutton:hover,
.searchbutton:hover { filter: brightness(1.08); }

/* ============================================================
 * 3) ICON BUTTONS (dark toggle, thông báo, search mobile, menu)
 * ============================================================ */
 .notifications {
    padding:0;
    position: relative;
    display: inline-block;
    cursor: pointer;
    float: left;
}

.toggle-dark,
.notifications > a,
.search-button-icon,
.navbar-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 9px 2px 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    float: none;
    vertical-align: middle;
}
.toggle-dark { position: static; font-size: 18px; }
.toggle-dark.on {
    color: #fff23a;
    background: rgba(255, 242, 58, 0.18);
    border-color: rgba(255, 242, 58, 0.4);
}
.notifications { display: inline-block; }
.notifications > a { text-decoration: none; }
.notifications .fa { font-size: 18px; color: #fff; }
.toggle-dark:hover,
.notifications > a:hover,
.search-button-icon:hover,
.navbar-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}
/* Nút toggle/menu mobile: vị trí tuyệt đối như cũ để layout không đổi */
.search-button-icon { position: absolute; right: 45px; top: 0; background: rgba(255,255,255,0.12); }
.search-button-icon .fa { font-size: 18px; color: #fff; }
.navbar-toggle { position: absolute; right: 0; top: 0; }
.navbar-toggle .fa { font-size: 20px; color: #fff; }
.menu-open .navbar-toggle { background: rgba(255, 255, 255, 0.3); }

/* ============================================================
 * 4) ACCOUNT NAV (góc phải)
 * ============================================================ */
 @media (min-width: 768px) {
    .header .navbar{
        box-shadow: 0 2px 10px rgba(20, 20, 50, 0.1);
    }
    .navbar-fixed-bottom,
    .navbar-fixed-top {
        border-radius: 0;
    }
    .navbar > .container .navbar-brand,
    .navbar > .container-fluid .navbar-brand {
        margin-left: 0px;
    }
}
.nav-account { margin: 0; padding: 0; display: flex; align-items: center; height: var(--hd-h); }
.nav-account > li { padding: 0; display: flex; align-items: center; }
.nav-account > li > .user-menu {
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    margin-top: 0px;
    border-radius: 20px;
    font-weight: 600;
    transition: background 0.2s ease;
    /* reset để <button> trông như link cũ */
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: normal;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.nav-account > li > .user-menu:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.16);
}
.nav-account > li > .user-menu.user-menu:hover { text-decoration: none; }
.nav-account .fn-thumb { height: 22px; }
.nav-account .dropdown-menu { margin-top: 4px; }
.nav-account .dropdown-menu > li > a:hover { color: var(--hd-nav-active); background: #f4efff; }

/* ============================================================
 * 5) STICKY STATES
 * ============================================================ */
.header-down { position: fixed; z-index: 1001; }
.nav-down { position: fixed; top: var(--hd-h) !important; }

/* ============================================================
 * 6) MAIN NAV (thanh menu dưới)
 * ============================================================ */
.main-nav {
    position: relative;
    z-index: 1000 !important;
}
.main-nav .inner {
    background: var(--hd-nav-bg);
    box-shadow: 0 2px 10px rgba(20, 20, 50, 0.1);
    border-bottom: 1px solid #efeef4;
    min-height: 46px;
}
.main-nav .main-menu {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-menu > li { border: 0 !important; float: none; flex: 1 1 0; min-width: 0; text-align: center; }
.main-menu a:focus { text-decoration: none; background: transparent; }
.main-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    color: var(--hd-nav-text);
    white-space: nowrap;
    padding: 0 12px;
    font-size: 13.5px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0.2px;
    transition: color 0.2s ease, background 0.2s ease;
}
@media (max-width: 1100px) {
    .main-menu > li > a {
        font-size: 12.5px;
    }
}

.main-menu > li > a .fa { font-size: 15px; opacity: 0.92; transition: transform 0.2s ease; }

@media (max-width: 980px) {
    .main-menu > li > a .fa {
        display: none;
    }
}

.main-menu > li > a:focus,
.main-menu > li > a:active,
.main-menu > li > a:visited { background: transparent; }
.main-menu > li:first-child a { padding: 0 16px; }
.main-menu > li > a .fa-home { font-size: 19px; }
/* Hover / active: chữ tím + nền tím nhạt + icon nảy nhẹ */
.main-menu a:hover { text-decoration: none; }
.main-menu > li.active > a,
.main-menu > li.curr > a,
.main-menu > li.open > a,
.main-menu > li.dropdown:hover > a,
.main-menu > li > a:hover {
    color: var(--hd-nav-active);
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.05), rgba(124, 58, 237, 0.11));
}
.main-menu > li > a:hover .fa,
.main-menu > li.active > a .fa,
.main-menu > li.curr > a .fa { transform: translateY(-1px) scale(1.08); opacity: 1; }
/* Thanh chỉ báo (tab indicator) sát đáy ô, canh giữa cả ô */
.main-menu > li > a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(90deg, var(--hd-g2), var(--hd-accent));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-menu > li > a:hover::after,
.main-menu > li.active > a::after,
.main-menu > li.curr > a::after,
.main-menu > li.open > a::after,
.main-menu > li.dropdown:hover > a::after { transform: scaleX(1); }

/* ---- Dropdown / megamenu ---- */
.main-menu > li.open .dropdown-menu { display: block; }
.main-menu > li.open .dropdown-menu:after { clear: both; content: " "; display: block; }
.main-menu > li.dropdown { position: relative; }
.main-menu > li .dropdown-menu {
    border: 0;
    border-radius: 12px;
    padding: 8px 0;
    margin-top: 0px;
    box-shadow: 0 12px 32px rgba(30, 15, 60, 0.18);
    animation: hdDropIn 0.18s ease;
}
@keyframes hdDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.main-menu > li .megamenu { width: 520px; padding: 12px; border-radius: 14px; }
.main-menu > li .megamenu ul li a {
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 30px;
    padding: 0 10px;
    display: block;
    white-space: nowrap;
    background: transparent;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}
.main-menu > li .megamenu ul li a:hover { background: #f4efff; color: var(--hd-nav-active); }
.main-menu > li .megamenu ul li.active a { color: var(--hd-nav-active); }
.main-menu > li .megamenu p.separator { border-top: solid 1px #eee; }
.main-menu > li .megamenu p.tip { text-transform: none; font-size: 13px; padding: 5px 0; }
.main-menu > li a strong { color: #e74c3c; }

/* ---- Dropdown xếp hạng ---- */
.navbar-dropdown {
    width: 320px;
    background: #fff;
    margin: 0;
    padding: 8px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(30, 15, 60, 0.18) !important;
}
.navbar-dropdown a {
    width: calc(50% - 4px);
    float: left;
    margin: 2px;
    color: #333;
    border: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease;
}
.navbar-dropdown a:hover { text-decoration: none; background: #f4efff; color: var(--hd-nav-active); }

/* ============================================================
 * 7) SUGGEST SEARCH
 * ============================================================ */
.suggestsearch {
    position: absolute;
    top: 44px;
    left: 0;
    z-index: 1;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    border: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(30, 15, 60, 0.18);
    transition: all 0.25s ease-out;
}
.suggestsearch ul { margin: 0; padding: 6px; }
.suggestsearch ul li { padding: 6px; list-style: none; display: block; border: 0; border-radius: 10px; }
.suggestsearch ul li:hover,
.suggestsearch ul li.selected { background: #f4efff; }
.suggestsearch ul li a:after { display: table; content: " "; clear: both; }
.suggestsearch ul li a { padding: 0; display: block; }
.suggestsearch ul li a:hover,
.suggestsearch ul li a:focus,
.suggestsearch ul li a:active { text-decoration: none; }
.suggestsearch ul li a img { float: left; margin: 0 8px 0 0; width: 44px; height: 58px; border-radius: 6px; object-fit: cover; }
.suggestsearch ul li a h3,
.suggestsearch ul li a h4 {
    color: #2a2f3a; font-size: 14px; font-weight: 700; margin: 0 5px 0 0;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.suggestsearch ul li a h3 b,
.suggestsearch ul li a h4 b { font-weight: 700; font-size: 110%; color: var(--hd-nav-active); }
.suggestsearch ul li a h4 { font-size: 12px; font-weight: 400; color: #8b8f99; }
.suggestsearch ul li a i { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ============================================================
 * 8) MENU MOBILE (navbar-collapse)
 * ============================================================ */
.navbar-collapse {
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    top: var(--hd-h);
    display: none;
    background: #14121c;
}

/* ============================================================
 * 9) A11Y — focus-visible rõ ràng bằng bàn phím
 * ============================================================ */
.header a:focus-visible,
.toggle-dark:focus-visible,
.notifications > a:focus-visible,
.search-button-icon:focus-visible,
.navbar-toggle:focus-visible,
.searchbutton:focus-visible,
.nav-account > li > .user-menu:focus-visible {
    outline: none;
    box-shadow: var(--hd-focus);
}
.searchinput:focus-visible { outline: none; }
.main-menu > li > a:focus-visible,
.megamenu ul li a:focus-visible,
.navbar-dropdown a:focus-visible {
    outline: 2px solid var(--hd-nav-active);
    outline-offset: -2px;
    border-radius: 6px;
}

/* ============================================================
 * 10) RESPONSIVE
 * ============================================================ */
@media (min-width: 1200px) {
    .container { width: 1250px; }
}
@media (min-width: 1100px) {
    .header .navbar-brand { min-width: 220px; }
    .search-box .input-group { width: 460px; }
    .suggestsearch { width: 460px; }
}
@media (min-width: 850px) and (max-width: 1100px) {
    .search-box .input-group { width: 300px; }
    .suggestsearch { width: 300px; }
}
@media (min-width: 768px) and (max-width: 850px) {
    .search-box .input-group { width: 222px; }
    .suggestsearch { width: 222px; }
}
@media (min-width: 768px) {
    /* Nút mobile (menu ☰ & search) chỉ dành cho <768px -> ẩn hẳn trên desktop,
       tránh đè lên chuông/đèn ở góc phải */
    .navbar-toggle,
    .search-button-icon { display: none !important; }
    .main-menu > li.dropdown:hover .dropdown-menu { display: block; }
    .navbar-nav > li { border-right: 0; }
    .navbar-nav > li > a { padding: 0 12px; line-height: 44px; }
    .nav-account > li.login-link:after { content: ""; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .main-menu > li.dropdown:hover .dropdown-menu { left: -160px; }
}
/* Thiết bị cảm ứng: dropdown menu chỉ mở bằng class .hd-open (do capture-click điều khiển)
   -> miễn nhiễm hover-open của scripts.min.js, chạm 1 lần là mở/đóng đúng. */
@media (hover: none) {
    .navbar-collapse .dropdown > .dropdown-menu,
    .main-nav .dropdown > .dropdown-menu,
    .nav-account .dropdown > .dropdown-menu { display: none !important; }
    .navbar-collapse .dropdown.hd-open > .dropdown-menu,
    .main-nav .dropdown.hd-open > .dropdown-menu,
    .nav-account .dropdown.hd-open > .dropdown-menu { display: block !important; }

    /* Chặn JS (isMobileDevice) đặt visibility:hidden khi cuộn xuống -> header/nav LUÔN hiện (dính) */
    .header,
    #mainNav.main-nav { visibility: visible !important; }
    .header .logo { visibility: visible !important; }
}

/* Sticky theo CHIỀU RỘNG (đổi đúng khi xoay màn): mobile -> header, PC/landscape -> nav menu */
@media (max-width: 767px) {
    .header {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1002;
    }
    .header.nav-up { top: 0 !important; }   /* không cho JS đẩy header ẩn -> luôn dính */
}
@media (min-width: 768px) {
    #mainNav.main-nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    /* Dropdown phía phải (Thể loại / Xếp hạng / Tài khoản) mở về TRÁI -> không tràn/cắt ở mép phải */
    .nav-account > li.dropdown { position: relative; }
    .nav-account .dropdown-menu { left: auto; right: 0; }
    .main-menu > li.dropdown .megamenu,
    .main-menu > li.dropdown .navbar-dropdown { left: auto; right: 0; }
    /* Dropdown quá cao -> cuộn trong dropdown, không bị cắt ở đáy viewport */
    .main-nav .dropdown-menu {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media (max-width: 767px) {
    /* --- Ô tìm kiếm --- */
    .navbar-collapse .search-box { padding: 12px 0px 0px 0px; }
    .navbar-collapse .search-box .input-group { margin: 0; width: 100%; height: 44px; }
    .navbar-collapse .search-box .searchinput { height: 44px; font-size: 15px; }
    .navbar-collapse .search-box .searchbutton { height: 44px; width: 50px; min-width: 50px; }
    .suggestsearch { width: 100%; }

    /* --- Menu chính: mỗi mục là 1 thanh full-width, cách nhau rõ --- */
    .main-menu { padding: 10px 12px 4px; }
    .main-menu > li { border: 0; }
    .main-menu > li + li { margin-top: 8px; }
    .main-menu > li > a {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 10px;
        height: auto;
        line-height: 1;
        padding: 15px 16px;
        color: #e7e3f0;
        text-transform: none;
        font-size: 15.5px;
        font-weight: 600;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.045);
        border: 1px solid rgba(255, 255, 255, 0.07);
        transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .main-menu > li > a .fa { font-size: 16px; opacity: 0.85; }
    /* Override rule gốc .main-menu > li:first-child a (padding: 0 16px) để mục đầu bằng các mục khác */
    .main-menu > li:first-child > a { padding: 15px 16px; }
    .main-menu > li > a::after { display: none; }
    .main-menu a:hover { color: #fff !important; }
    .main-menu > li.active > a,
    .main-menu > li.curr > a,
    .main-menu > li.open > a,
    .main-menu > li.dropdown:hover > a,
    .main-menu > li > a:hover {
        color: #fff !important;
        background: linear-gradient(120deg, var(--hd-g2), var(--hd-g3)) !important;
        border-color: transparent;
        box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
    }
    .main-menu > li.active > a .fa,
    .main-menu > li.curr > a .fa,
    .main-menu > li > a:hover .fa { opacity: 1; }

    /* Megamenu thể loại trên mobile */
    .main-menu > li.open .dropdown-menu {
        display: block;
        background: rgba(0, 0, 0, 0.22);
        border: 0;
        border-radius: 14px;
        box-shadow: none;
        margin: 8px 0 0;
        padding: 8px;
    }
    .main-menu > li .megamenu { width: auto; padding: 2px; }
    .main-menu > li .megamenu ul li { float: left; width: 50%; }
    .main-menu > li .megamenu ul li a { color: #cfc9dc; text-align: left; border-radius: 8px; }
    .main-menu > li .megamenu ul li a:hover { background: rgba(255, 255, 255, 0.08); color: var(--hd-accent); }
    .main-menu > li .megamenu ul li.active a { color: var(--hd-accent); }

    /* --- Tài khoản: thanh full-width, canh giữa --- */
    .nav-account { height: auto; padding: 0; display: block; }
    .nav-account.list-inline { margin: 0; }
    .nav-account > li { display: block; width: 100%; border: 0; }
    .nav-account > li > .user-menu {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 8px;
        line-height: 1;
        height: auto;
        padding: 15px 16px;
        color: #fff;
        font-weight: 700;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .nav-account > li > .user-menu:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.13); }
    .nav-account .dropdown-menu {
        background: rgba(0, 0, 0, 0.22);
        border: 0;
        box-shadow: none;
        text-align: center;
        margin: 8px 0 0;
        padding: 6px;
        float: none;
        position: static;
        width: 100%;
        border-radius: 14px;
    }
    .nav-account .dropdown-menu > li > a {
        display: flex;
        justify-content: center;
        gap: 8px;
        color: #cfc9dc;
        padding: 13px;
        border-radius: 8px;
        border: 1px solid;
        margin-bottom: 8px;
    }
    .nav-account .dropdown-menu > li > a:hover { background: rgba(255, 255, 255, 0.07); color: var(--hd-accent); }
}

/* ============================================================
 * 11) DARK MODE (khi body.dark) — tinh chỉnh cho header
 * ============================================================ */
.dark .header {
    /* background: linear-gradient(120deg, #2a1358 0%, #3b1d75 55%, #4c1d95 100%); */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
.dark .main-nav .inner {
    background: #17161d;
    border-bottom-color: #26242f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.dark .main-menu > li > a { color: #d7d3e0; }
.dark .main-menu > li.active > a,
.dark .main-menu > li.curr > a,
.dark .main-menu > li.open > a,
.dark .main-menu > li.dropdown:hover > a,
.dark .main-menu > li > a:hover { color: #ff9601 !important; }
.dark .search-box .input-group { background: #23212c; }
.dark .search-box .searchinput { color: #ece9f3; }
.dark .search-box .searchinput::placeholder { color: #7d7a89; }
.dark .main-menu > li .dropdown-menu,
.dark .navbar-dropdown,
.dark .suggestsearch { background: #23212c; box-shadow: 0 12px 32px rgba(0,0,0,0.55); }
/* Dùng đường dẫn đầy đủ để thắng rule sáng (.main-menu > li .megamenu ul li a) */
.dark .main-menu > li .megamenu ul li a,
.dark .navbar-dropdown a { color: #d7d3e0; }
.dark .main-menu > li .megamenu ul li a:hover,
.dark .navbar-dropdown a:hover { background: #322f3d; color: var(--hd-accent); }
.dark .main-menu > li .megamenu ul li.active a { color: var(--hd-accent); }
.dark .main-menu > li .megamenu p.separator { border-top-color: #322f3d; }
.dark .suggestsearch ul li:hover,
.dark .suggestsearch ul li.selected { background: #322f3d; }
.dark .suggestsearch ul li a h3 { color: #ece9f3; }

/* ============================================================
 * 12) Tôn trọng prefers-reduced-motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .header, .header .navbar-brand, .main-menu > li > a::after,
    .main-menu > li .dropdown-menu, .toggle-dark, .notifications > a,
    .search-button-icon, .navbar-toggle, .nav-account > li > .user-menu {
        transition: none !important;
        animation: none !important;
    }
}