/* =========================================================
   UI FIXES - mobile top navigation / profile / auth / cards
   ========================================================= */

/* Smooth navigation transition on browsers that support it */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: shopPageOut .16s ease both;
}

::view-transition-new(root) {
    animation: shopPageIn .22s ease both;
}

@keyframes shopPageOut {
    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

@keyframes shopPageIn {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
}

/* ================= CATEGORY CTA IMAGE ================= */
html body .category-card {
    min-width: 0;
    overflow: hidden !important;
}

html body .category-card .category-body {
    width: 100%;
    min-width: 0;
}

html body .category-card .category-cta-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: auto !important;
    padding: 8px 8px 4px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

html body .category-card .category-cta-img {
    display: block !important;
    width: 100% !important;
    max-width: 240px !important;
    height: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 auto !important;
    border: 0 !important;
    border-radius: 8px !important;
}

/* ================= AUTH ================= */
html body .auth-page {
    width: 100%;
    min-height: calc(100vh - 64px);
    padding: 44px 16px 64px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
}

html body .auth-card {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    padding: 32px !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 35px rgba(15, 23, 42, .08) !important;
    box-sizing: border-box !important;
}

html body .auth-header {
    margin-bottom: 26px !important;
    text-align: center !important;
}

html body .auth-title {
    margin: 0 0 8px !important;
    color: #dc2626 !important;
    font-size: 1.75rem !important;
    font-weight: 800 !important;
}

html body .auth-subtitle {
    margin: 0 !important;
    color: #64748b !important;
    font-size: .9rem !important;
}

html body .auth-card form,
html body .auth-card .form-group {
    width: 100% !important;
}

html body .auth-card .form-group {
    margin: 0 0 18px !important;
}

html body .auth-card .form-label {
    display: block !important;
    margin: 0 0 7px !important;
    color: #111827 !important;
    font-size: .86rem !important;
    font-weight: 700 !important;
}

html body .auth-card .form-input {
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    padding: 0 13px !important;
    color: #111827 !important;
    font-family: inherit !important;
    font-size: .9rem !important;
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 9px !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

html body .auth-card .form-input:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}

html body .auth-btn {
    display: flex !important;
    width: 100% !important;
    min-height: 44px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: .92rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    border: 1px solid #dc2626 !important;
    border-radius: 9px !important;
}

html body .auth-links {
    margin-top: 20px !important;
    color: #64748b !important;
    font-size: .86rem !important;
    text-align: center !important;
}

html body .auth-links a {
    color: #dc2626 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* ================= DESKTOP HEADER ================= */
html body .navbar {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10000 !important;
    background: rgba(255, 255, 255, .97) !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 8px rgba(15, 23, 42, .05) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

html body .navbar>.nav-container {
    position: relative !important;
    width: 100% !important;
    max-width: 1360px !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    box-sizing: border-box !important;
}

html body .navbar .nav-brand {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body .navbar .nav-brand img {
    width: auto !important;
    height: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
}

html body .navbar .nav-links {
    position: static !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    overflow: visible !important;
    list-style: none !important;
}

html body .navbar .nav-links>li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
}

html body .navbar .nav-links .nav-link-item {
    width: auto !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    font-size: .82rem !important;
}

html body .navbar .nav-user {
    position: static !important;
    display: flex !important;
    height: 64px !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

html body .navbar .nav-offcanvas-header,
html body .navbar .mobile-auth-banner,
html body .navbar .nav-toggle {
    display: none !important;
}

html body main {
    padding-top: 64px !important;
}

/* ================= PROFILE DROPDOWN ================= */
html body #avatarWrapper,
html body .nav-avatar-wrapper {
    position: relative !important;
}

html body #avatarDropdown,
html body .avatar-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    width: 340px !important;
    max-width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    box-shadow: 0 22px 55px rgba(15, 23, 42, .18) !important;
    overflow: visible !important;
    z-index: 12050 !important;
}

html body #avatarDropdown .dropdown-user-card {
    padding: 17px !important;
    background: radial-gradient(circle at 92% 8%, var(--menu-accent-glow), transparent 35%), linear-gradient(145deg, #fff, #fff8f8) !important;
    border-radius: 18px 18px 0 0 !important;
}

html body #avatarDropdown .dropdown-user-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

html body #avatarDropdown .dropdown-user-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)) !important;
    border: 3px solid #fff !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 20px var(--menu-accent-glow) !important;
}

html body #avatarDropdown .dropdown-name {
    color: #111827 !important;
    font-size: .96rem !important;
    font-weight: 850 !important;
}

html body #avatarDropdown .dropdown-email {
    margin-top: 4px !important;
    color: #8b96a7 !important;
    font-size: .76rem !important;
}

html body #avatarDropdown .dropdown-balance-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px 12px !important;
    margin-top: 14px !important;
    padding: 12px 13px !important;
    background: #fff !important;
    border: 1px solid var(--menu-accent-border) !important;
    border-radius: 13px !important;
}

html body #avatarDropdown .dropdown-balance-label {
    grid-column: 1 / -1 !important;
    color: #64748b !important;
    font-size: .69rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

html body #avatarDropdown .dropdown-balance-val {
    color: var(--menu-accent) !important;
    font-size: 1.22rem !important;
    font-weight: 900 !important;
}

html body #avatarDropdown .dropdown-btn-deposit {
    display: inline-flex !important;
    min-height: 36px !important;
    padding: 0 13px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    color: #fff !important;
    font-size: .77rem !important;
    font-weight: 850 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, var(--primary-light), var(--primary)) !important;
    border-radius: 9px !important;
}

/* Language selector moved into profile by app.js */
html body #avatarDropdown .profile-language-section {
    padding: 10px 12px 12px !important;
    background: #fff !important;
}

html body #avatarDropdown .profile-language-label {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 7px !important;
    color: #64748b !important;
    font-size: .69rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

html body #avatarDropdown .profile-language-section .ant-header-lang-dropdown {
    position: relative !important;
    width: 100% !important;
}

html body #avatarDropdown .profile-language-section .ant-header-lang-trigger {
    display: flex !important;
    width: 100% !important;
    height: 40px !important;
    padding: 0 11px !important;
    align-items: center !important;
    gap: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
}

html body #avatarDropdown .profile-language-section .lang-arrow {
    margin-left: auto !important;
}

html body #avatarDropdown .profile-language-section .ant-dropdown-menu {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transition: max-height .22s ease, opacity .18s ease, margin .22s ease, padding .22s ease !important;
}

html body #avatarDropdown .profile-language-section .ant-header-lang-dropdown.active .ant-dropdown-menu,
html body #avatarDropdown .profile-language-section .ant-header-lang-dropdown:hover .ant-dropdown-menu {
    max-height: 260px !important;
    margin-top: 7px !important;
    padding: 5px !important;
    opacity: 1 !important;
    visibility: visible !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
}

/* ================= DESKTOP DEPOSIT ================= */
@media (min-width: 1200px) {
    html body .nav-links .nav-dropdown {
        position: relative !important;
        padding-bottom: 6px !important;
        margin-bottom: -6px !important;
    }

    html body .nav-links .nav-dropdown::after {
        content: "";
        position: absolute !important;
        top: calc(100% - 8px) !important;
        left: -18px !important;
        width: calc(100% + 36px) !important;
        height: 24px !important;
        z-index: 1095 !important;
    }

    html body .nav-links .nav-dropdown>.modern-dropdown-menu {
        top: calc(100% - 1px) !important;
        left: -10px !important;
        width: 330px !important;
        min-width: 330px !important;
        margin: 0 !important;
        padding: 10px !important;
        border-radius: 14px !important;
        box-shadow: 0 16px 40px rgba(15, 23, 42, .16) !important;
    }

    html body .nav-links .nav-dropdown .dropdown-link-card {
        min-height: 66px !important;
        padding: 12px 14px !important;
        gap: 13px !important;
        border-radius: 11px !important;
    }
}

/* ================= TABLET + MOBILE: ONLY TOP HEADER ================= */
@media (max-width: 1199px) {

    /* Kill the old footer bottom menu that caused the vertical bar in the screenshot */
    html body .mobile-bottom-nav,
    html body nav.mobile-bottom-nav,
    html body .mobile-bottom-nav-container {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    html body .navbar {
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        bottom: auto !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        z-index: 12000 !important;
    }

    html body .navbar>.nav-container {
        display: flex !important;
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 12px !important;
        align-items: center !important;
        gap: 7px !important;
    }

    html body .navbar .nav-brand {
        margin-right: auto !important;
        flex: 0 1 auto !important;
    }

    html body .navbar .nav-brand img {
        height: 34px !important;
        max-width: 135px !important;
    }

    html body .navbar .nav-user {
        height: 56px !important;
        margin-left: auto !important;
        gap: 6px !important;
    }

    html body .navbar .nav-user-profile .nav-user-info {
        display: none !important;
    }

    html body .navbar .nav-avatar {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    html body .navbar .theme-toggle {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
    }

    html body .navbar .nav-guest-actions {
        display: none !important;
    }

    html body .navbar .nav-toggle {
        position: static !important;
        display: flex !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        margin: 0 !important;
        padding: 7px !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 9px !important;
        background: #fff !important;
        cursor: pointer !important;
    }

    html body .navbar .nav-toggle span {
        width: 18px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #374151 !important;
    }

    /* Top dropdown panel, not a right drawer and not a bottom bar */
    html body .navbar .nav-links {
        display: flex !important;
        position: fixed !important;
        top: 56px !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100vh - 56px) !important;
        margin: 0 !important;
        padding: 8px 10px 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background: rgba(255, 255, 255, .985) !important;
        border-bottom: 1px solid #e5e7eb !important;
        border-radius: 0 0 16px 16px !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .16) !important;
        z-index: 11990 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-12px) scaleY(.985) !important;
        transform-origin: top center !important;
        transition: opacity .2s ease, transform .24s cubic-bezier(.2, .8, .2, 1), visibility .2s ease !important;
    }

    html body .navbar .nav-links.show {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scaleY(1) !important;
    }

    html body .navbar .nav-links>li {
        width: 100% !important;
        border: 0 !important;
    }

    html body .navbar .nav-links .nav-link-item {
        width: 100% !important;
        min-height: 44px !important;
        padding: 11px 12px !important;
        justify-content: flex-start !important;
        border-radius: 10px !important;
        font-size: .86rem !important;
    }

    html body .navbar .nav-links .nav-link-item .nav-arrow {
        margin-left: auto !important;
    }

    /* Duplicate offcanvas title isn't needed because the real header stays visible */
    html body .navbar .nav-offcanvas-header {
        display: none !important;
    }

    html body .navbar .mobile-auth-banner {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 8px !important;
    }

    html body .navbar .modern-dropdown-menu,
    html body .navbar .mega-menu {
        display: none !important;
        position: static !important;
        width: 100% !important;
        min-width: 100% !important;
        margin: 3px 0 6px !important;
        padding: 6px !important;
        transform: none !important;
        border: 1px solid #eef2f7 !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        background: #f8fafc !important;
    }

    html body .navbar .nav-dropdown.open>.modern-dropdown-menu,
    html body .navbar .nav-mega-dropdown.open>.mega-menu {
        display: block !important;
    }

    html body .navbar .mega-menu-container {
        padding: 0 !important;
    }

    html body .navbar .mega-menu-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    html body .navbar .mega-menu-column {
        padding: 8px !important;
        border-radius: 9px !important;
    }

    html body .navbar .mega-menu-list {
        display: flex !important;
        flex-direction: column !important;
        max-height: 220px !important;
    }

    html body .nav-overlay {
        position: fixed !important;
        top: 56px !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        background: rgba(15, 23, 42, .38) !important;
        backdrop-filter: blur(2px) !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease !important;
        z-index: 11980 !important;
    }

    html body .nav-overlay.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    html body main {
        padding-top: 56px !important;
    }

    /* Language should not remain beside the logo after JS moves it into profile */
    html body .nav-user>.ant-header-lang-dropdown {
        max-width: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body #avatarDropdown .profile-language-section .ant-header-lang-dropdown {
        max-width: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 520px) {
    html body .auth-card {
        padding: 24px 18px !important;
    }

    html body #avatarDropdown {
        right: -46px !important;
        width: min(340px, calc(100vw - 16px)) !important;
    }

    html body .navbar>.nav-container {
        padding: 0 9px !important;
    }
}

/* ================= DARK ================= */
[data-theme="dark"] body .navbar {
    background: rgba(23, 23, 23, .98) !important;
    border-color: #2a2a2a !important;
}

[data-theme="dark"] body .navbar .nav-links {
    background: rgba(23, 23, 23, .99) !important;
    border-color: #303030 !important;
}

[data-theme="dark"] body .navbar .nav-toggle {
    background: #222 !important;
    border-color: #333 !important;
}

[data-theme="dark"] body .navbar .nav-toggle span {
    background: #e5e7eb !important;
}

[data-theme="dark"] body #avatarDropdown {
    background: #181818 !important;
    border-color: #303030 !important;
}

[data-theme="dark"] body #avatarDropdown .dropdown-user-card {
    background: linear-gradient(145deg, #1b1b1b, #24191a) !important;
}

[data-theme="dark"] body #avatarDropdown .dropdown-name {
    color: #f8fafc !important;
}

[data-theme="dark"] body #avatarDropdown .dropdown-balance-box {
    background: #202020 !important;
    border-color: #3c292b !important;
}

[data-theme="dark"] body #avatarDropdown .profile-language-section {
    background: #181818 !important;
}

[data-theme="dark"] body #avatarDropdown .profile-language-section .ant-header-lang-trigger {
    background: #222 !important;
    border-color: #333 !important;
}

[data-theme="dark"] body .auth-page {
    background: #0f0f0f !important;
}

[data-theme="dark"] body .auth-card {
    background: #171717 !important;
    border-color: #2f2f2f !important;
}

/* ================= DESKTOP NAP TIEN - LONGER + SMOOTHER ================= */
@media (min-width: 1200px) {

    /* Make the hover bridge generous so moving from the trigger into the menu is forgiving. */
    html body .navbar .nav-links .nav-dropdown::after {
        top: calc(100% - 10px) !important;
        left: -24px !important;
        width: calc(100% + 48px) !important;
        height: 34px !important;
    }

    /* Keep the element mounted: opacity/transform can animate smoothly, unlike display:none/block. */
    html body .navbar .nav-links .nav-dropdown>.modern-dropdown-menu {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -7px, 0) scale(.985) !important;
        transform-origin: top left !important;
        will-change: transform, opacity !important;
        backface-visibility: hidden !important;
        transition:
            opacity .18s ease .25s,
            transform .22s cubic-bezier(.2, .8, .2, 1) .25s,
            visibility 0s linear .47s !important;
    }

    html body .navbar .nav-links .nav-dropdown:hover>.modern-dropdown-menu,
    html body .navbar .nav-links .nav-dropdown.deposit-hover-open>.modern-dropdown-menu,
    html body .navbar .nav-links .nav-dropdown.deposit-click-open>.modern-dropdown-menu,
    html body .navbar .nav-links .nav-dropdown>.modern-dropdown-menu:hover {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) scale(1) !important;
        transition:
            opacity .15s ease 0s,
            transform .2s cubic-bezier(.16, 1, .3, 1) 0s,
            visibility 0s linear 0s !important;
    }

    html body .navbar .nav-links .nav-dropdown>.nav-link-item .nav-arrow {
        transition: transform .24s cubic-bezier(.2, .8, .2, 1), color .18s ease !important;
    }

    html body .navbar .nav-links .nav-dropdown .dropdown-link-card {
        transform: translateZ(0) !important;
        transition: background-color .16s ease, box-shadow .16s ease, transform .18s cubic-bezier(.2, .8, .2, 1) !important;
    }

    html body .navbar .nav-links .nav-dropdown .dropdown-link-card:hover {
        transform: translate3d(2px, 0, 0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(root),
    ::view-transition-new(root),
    html body .navbar .modern-dropdown-menu,
    html body .navbar .nav-arrow,
    html body .navbar .dropdown-link-card {
        animation: none !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
}

/* === OVERRIDES & UI FIXES EXTENSION === */

/* Logo brand sizing on desktop (large & crisp for wide logos like 500x110) */
@media (min-width: 1200px) {
    html body nav.navbar > .nav-container > a.nav-brand,
    html body .navbar .nav-brand {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    html body nav.navbar > .nav-container > a.nav-brand img,
    html body .navbar .nav-brand img {
        width: auto !important;
        height: 40px !important;
        max-height: 40px !important;
        object-fit: contain !important;
    }
}

/* =========================================================
   DESKTOP NAP TIEN — DUNG CUNG CO CHE VOI DANH MUC
   - Chi nut that su la vung kich hoat.
   - Menu tu tao cau noi 6px de re chuot xuong de dang.
   - Khong :has(), khong vung hover ao hai ben.
   - Cac class JS cu khong duoc giu menu khi chuot da roi khoi.
   ========================================================= */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown {
        position: relative !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Vo hieu vung bat chuot ao cu do app.js tao. */
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    /* Nut Nap Tien dung dung hover visual cua cac muc navbar/Danh Muc. */
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown:hover > .nav-link-item {
        color: var(--menu-accent) !important;
        background: var(--menu-accent-bg) !important;
    }

    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown:hover > .nav-link-item .nav-item-icon,
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown:hover > .nav-link-item .nav-arrow {
        color: var(--menu-accent) !important;
    }

    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown:hover > .nav-link-item .nav-arrow {
        transform: rotate(180deg) !important;
    }

    /* Menu nam cach nut 6px nhu dropdown chuan. */
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown > .modern-dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        top: calc(100% + 6px) !important;
        left: 0 !important;
        margin: 0 !important;
        transform-origin: top left !important;
    }

    /* Cau noi nam TRONG menu, khong lam rong vung hover cua nut. */
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown > .modern-dropdown-menu::before {
        content: "" !important;
        position: absolute !important;
        top: -7px !important;
        left: 0 !important;
        right: 0 !important;
        height: 7px !important;
        display: block !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    /* Mo/dong y het kieu parent:hover cua Danh Muc. */
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown:hover > .modern-dropdown-menu {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        animation: depositDropdownCategoryIn .18s cubic-bezier(.16, 1, .3, 1) both !important;
    }

    /* Class JS cu khong duoc lam menu dinh lai sau khi da roi chuot. */
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown.deposit-hover-open:not(:hover) > .modern-dropdown-menu,
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown.deposit-click-open:not(:hover) > .modern-dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        animation: none !important;
    }

    /* Card ben trong cung co cam giac hover ro, de bam. */
    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown .dropdown-link-card {
        transition: background .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

    html body nav.navbar > .nav-container .nav-links > li.nav-dropdown .dropdown-link-card:hover {
        background: #f8fafc !important;
        box-shadow: inset 0 0 0 1px var(--menu-accent-border) !important;
        transform: translateX(2px) !important;
    }
}

@keyframes depositDropdownCategoryIn {
    from { opacity: 0; transform: translateY(-5px) scale(.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

[data-theme="dark"] body nav.navbar > .nav-container .nav-links > li.nav-dropdown:hover > .nav-link-item {
    background: var(--menu-accent-bg) !important;
}

[data-theme="dark"] body nav.navbar > .nav-container .nav-links > li.nav-dropdown .dropdown-link-card:hover {
    background: #252525 !important;
    box-shadow: inset 0 0 0 1px var(--menu-accent-border) !important;
}

/* =========================================================
   ACCOUNT DROPDOWN
   ========================================================= */
html body #avatarDropdown .dropdown-divider {
    width: 100% !important;
    height: 1px !important;
    margin: 6px 0 !important;
    background: #eef2f7 !important;
    border: 0 !important;
}

html body #avatarDropdown .dropdown-menu-links {
    display: flex !important;
    width: 100% !important;
    padding: 4px 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    box-sizing: border-box !important;
}

html body #avatarDropdown .dropdown-menu-links > .dropdown-item,
html body #avatarDropdown .dropdown-logout {
    display: flex !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    color: #374151 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9px !important;
    font-family: inherit !important;
    font-size: .82rem !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

html body #avatarDropdown .dropdown-item .dropdown-item-icon {
    display: inline-flex !important;
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 1rem !important;
}

html body #avatarDropdown .dropdown-menu-links > .dropdown-item:hover,
html body #avatarDropdown .dropdown-logout:hover {
    color: var(--menu-accent) !important;
    background: var(--menu-accent-bg) !important;
}

html body #avatarDropdown .dropdown-menu-links > .dropdown-item:hover .dropdown-item-icon,
html body #avatarDropdown .dropdown-logout:hover .dropdown-item-icon {
    color: var(--menu-accent) !important;
}

html body #avatarDropdown form {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* =========================================================
   AVATAR ACCOUNT — trả hiệu ứng hover về kiểu cũ
   Nút tròn đỏ + vòng sáng đỏ khi rê chuột.
   ========================================================= */
html body nav.navbar #avatarWrapper {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    height: 64px !important;
    z-index: 12040 !important;
}

html body nav.navbar #avatarWrapper .nav-user-profile {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    z-index: 12042 !important;
}
html body nav.navbar #avatarWrapper #avatarBtn.nav-avatar {
    position: relative !important;
    display: inline-flex !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    background: var(--menu-accent) !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
    z-index: 12043 !important;
}

html body nav.navbar #avatarWrapper #avatarBtn.nav-avatar::before {
    content: "\f007" !important;
    display: block !important;
    color: #fff !important;
    font-family: "Font Awesome 6 Free" !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    transition: inherit !important;
}

/* Hiệu ứng cũ: nhẹ opacity + vòng sáng đỏ. */
html body nav.navbar #avatarWrapper #avatarBtn.nav-avatar:hover,
html body nav.navbar #avatarWrapper #avatarBtn.nav-avatar:focus-visible,
html body nav.navbar #avatarWrapper:hover #avatarBtn.nav-avatar {
    opacity: .9 !important;
    background: var(--menu-accent) !important;
    box-shadow: 0 0 0 3px var(--menu-accent-glow) !important;
}

html body nav.navbar #avatarWrapper #avatarBtn.nav-avatar:hover::before,
html body nav.navbar #avatarWrapper #avatarBtn.nav-avatar:focus-visible::before,
html body nav.navbar #avatarWrapper:hover #avatarBtn.nav-avatar::before {
    color: #fff !important;
}

/* Menu mặc định ẩn. */
html body nav.navbar #avatarWrapper #avatarDropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Bấm avatar: JS thêm .show. */
html body nav.navbar #avatarWrapper #avatarDropdown.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: avatarDropdownClassicIn .18s cubic-bezier(.16, 1, .3, 1) both !important;
}

@keyframes avatarDropdownClassicIn {
    from { opacity: 0; transform: translateY(-6px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Desktop: rê vào avatar hoặc menu thì mở, có animation như bản cũ. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    /* Kéo menu sát avatar hơn để con trỏ không rơi vào khoảng trống làm menu đóng. */
    html body nav.navbar #avatarWrapper #avatarDropdown {
        top: calc(100% + 2px) !important;
    }

    /* Cầu hover trong suốt nối avatar với dropdown. */
    html body nav.navbar #avatarWrapper #avatarDropdown::before {
        content: "" !important;
        position: absolute !important;
        top: -3px !important;
        left: 0 !important;
        right: 0 !important;
        height: 3px !important;
        display: block !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    html body nav.navbar #avatarWrapper:hover #avatarDropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        animation: avatarDropdownClassicIn .18s cubic-bezier(.16, 1, .3, 1) both !important;
    }
}

@media (max-width: 1199px) {
    html body nav.navbar #avatarWrapper {
        height: 56px !important;
    }

    html body nav.navbar #avatarWrapper #avatarBtn.nav-avatar {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
    }
}

[data-theme="dark"] body #avatarDropdown .dropdown-divider {
    background: #303030 !important;
}

[data-theme="dark"] body #avatarDropdown .dropdown-menu-links > .dropdown-item,
[data-theme="dark"] body #avatarDropdown .dropdown-logout {
    color: #e5e7eb !important;
}

[data-theme="dark"] body #avatarDropdown .dropdown-menu-links > .dropdown-item:hover,
[data-theme="dark"] body #avatarDropdown .dropdown-logout:hover {
    color: var(--menu-accent) !important;
    background: var(--menu-accent-bg) !important;
}

[data-theme="dark"] body nav.navbar #avatarWrapper #avatarBtn.nav-avatar,
[data-theme="dark"] body nav.navbar #avatarWrapper #avatarBtn.nav-avatar:hover,
[data-theme="dark"] body nav.navbar #avatarWrapper:hover #avatarBtn.nav-avatar {
    background: var(--menu-accent) !important;
}

[data-theme="dark"] body nav.navbar #avatarWrapper #avatarBtn.nav-avatar::before {
    color: #fff !important;
}

/* =========================================================
   HOME GAME CATEGORIES — tang kich thuoc vua phai
   Chi ap dung cac nhom game co id categories-*, khong anh huong
   Vong Quay/Dich Vu va giu nguyen mobile nho.
   ========================================================= */
@media (min-width: 768px) {
    html body section[id^="categories-"] > .container {
        max-width: 1360px !important;
    }

    html body section[id^="categories-"] .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 22px !important;
    }

    html body section[id^="categories-"] .category-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    html body section[id^="categories-"] .category-img {
        border-radius: 10px !important;
    }

    html body section[id^="categories-"] .category-body {
        padding: 15px 6px 5px !important;
    }

    html body section[id^="categories-"] .category-name {
        font-size: 1.02rem !important;
        line-height: 1.35 !important;
    }

    html body section[id^="categories-"] .category-count {
        font-size: .84rem !important;
        margin-bottom: 16px !important;
    }

    html body section[id^="categories-"] .category-btn-cta {
        max-width: 142px !important;
        height: 34px !important;
        font-size: .82rem !important;
    }
}

@media (min-width: 1200px) {
    html body section[id^="categories-"] .category-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
    }
}

/* =========================================================
   DESKTOP NAP TIEN — COMPACT OVERRIDE ONLY
   Keeps the no-gap hover behavior, but prevents the full-width panel.
   ========================================================= */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown {
        position: relative !important;
        height: 64px !important;
        min-height: 64px !important;
        align-items: center !important;
    }

    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu {
        position: absolute !important;
        top: calc(100% - 1px) !important;
        right: auto !important;
        left: -12px !important;
        width: 520px !important;
        min-width: 520px !important;
        max-width: calc(100vw - 24px) !important;
        padding: 9px !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: 0 14px 34px rgba(15,23,42,.14) !important;
        transform-origin: top left !important;
        z-index: 1110 !important;
    }

    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu > li {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 5px !important;
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
        border-radius: 9px !important;
    }

    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu > li > a.dropdown-link-card {
        min-height: 58px !important;
        padding: 8px 10px !important;
        gap: 10px !important;
        background: #fff !important;
        border: 1px solid #edf0f4 !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu > li > a.dropdown-link-card:hover {
        color: var(--menu-accent) !important;
        border-color: var(--menu-accent-border) !important;
        box-shadow: 0 5px 14px rgba(15,23,42,.06) !important;
        transform: translateY(-1px) !important;
    }

    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-icon-box {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;
    }

    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-title {
        font-size: .82rem !important;
        line-height: 1.25 !important;
    }

    html body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-desc {
        margin-top: 2px !important;
        font-size: .69rem !important;
        line-height: 1.25 !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu {
        background: #1b1b1b !important;
        border-color: #303030 !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu > li {
        background: #1d1d1d !important;
        border-color: #2d2d2d !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > .nav-links > li.nav-dropdown > ul.modern-dropdown-menu > li > a.dropdown-link-card {
        background: #222 !important;
        border-color: #303030 !important;
    }
}

/* =========================================================
   DESKTOP NAP TIEN — MENU-BOUND COMPACT PANEL
   Final ID-scoped override: no full-width panel and no invisible hover bridge.
   ========================================================= */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown {
        position: relative !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown::after,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu {
        position: absolute !important;
        top: calc(100% - 1px) !important;
        right: auto !important;
        left: 0 !important;
        width: 292px !important;
        min-width: 292px !important;
        max-width: calc(100vw - 24px) !important;
        margin: 0 !important;
        padding: 8px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        list-style: none !important;
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 12px !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .14) !important;
        transform-origin: top left !important;
        z-index: 12150 !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu::after {
        content: none !important;
        display: none !important;
        pointer-events: none !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu > li {
        display: block !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        grid-column: auto !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu > li > a.dropdown-link-card {
        position: relative !important;
        display: flex !important;
        width: 100% !important;
        min-height: 58px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 10px 11px !important;
        align-items: center !important;
        gap: 10px !important;
        color: #1f2937 !important;
        background: #fff !important;
        border: 1px solid #edf0f4 !important;
        border-radius: 9px !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transform: none !important;
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu > li > a.dropdown-link-card::after {
        content: none !important;
        display: none !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu > li > a.dropdown-link-card:hover {
        color: var(--menu-accent) !important;
        background: var(--menu-accent-bg) !important;
        border-color: var(--menu-accent-border) !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, .06) !important;
        transform: translateX(2px) !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-icon-box {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 8px !important;
        font-size: .95rem !important;
        box-shadow: none !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-title {
        display: block !important;
        color: #111827 !important;
        font-size: .82rem !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-desc {
        display: block !important;
        margin-top: 2px !important;
        color: #6b7280 !important;
        font-size: .69rem !important;
        font-weight: 500 !important;
        line-height: 1.25 !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu {
        background: #1b1b1b !important;
        border-color: #303030 !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.32) !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu > li > a.dropdown-link-card {
        color: #e5e7eb !important;
        background: #222 !important;
        border-color: #303030 !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-title {
        color: #f3f4f6 !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu .dropdown-link-desc {
        color: #9ca3af !important;
    }
}

/* =========================================================
   HOME LUCKY WHEEL — larger thumbnails/cards only
   The lucky section has links generated as /lucky/wheel/{slug}; :has keeps
   this isolated from normal categories, random accounts and services.
   ========================================================= */
@media (min-width: 768px) {
    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) > .container {
        max-width: 1360px !important;
    }

    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;
    }

    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-card {
        padding: 12px !important;
        border-radius: 14px !important;
    }

    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-img {
        width: 100% !important;
        aspect-ratio: 16 / 9 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-body {
        padding: 15px 6px 5px !important;
    }

    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-name {
        font-size: 1.02rem !important;
        line-height: 1.35 !important;
    }
}

@media (min-width: 1200px) {
    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    html body section.section:has(a.category-card[href*="/lucky/wheel/"]) .category-card:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(15, 23, 42, .06) !important;
    }
}

/* =========================================================
   DESKTOP TOP NAV — POLISHED / COMPACT
   Visual-only override for the main navigation row.
   ========================================================= */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    html body nav.navbar > .nav-container > ul#navLinks {
        gap: 4px !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li {
        display: flex !important;
        height: 64px !important;
        min-height: 64px !important;
        align-items: center !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        color: #30343b !important;
        border: 1px solid transparent !important;
        border-radius: 10px !important;
        font-size: .82rem !important;
        font-weight: 650 !important;
        line-height: 1 !important;
        letter-spacing: -.005em !important;
        box-shadow: none !important;
        transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item .nav-item-icon {
        display: inline-flex !important;
        width: 16px !important;
        min-width: 16px !important;
        height: 16px !important;
        align-items: center !important;
        justify-content: center !important;
        color: #626973 !important;
        font-size: .92rem !important;
        line-height: 1 !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item .nav-arrow {
        margin-left: 0 !important;
        color: #8b9199 !important;
        font-size: .56rem !important;
        opacity: .9 !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item:hover,
    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item.active,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:hover > a.nav-link-item,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-mega-dropdown:hover > a.nav-link-item {
        color: var(--menu-accent) !important;
        background: var(--menu-accent-bg) !important;
        border-color: var(--menu-accent-border) !important;
        box-shadow: 0 3px 10px rgba(15, 23, 42, .035) !important;
        transform: translateY(-1px) !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item:hover .nav-item-icon,
    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item.active .nav-item-icon,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:hover > a.nav-link-item .nav-item-icon,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-mega-dropdown:hover > a.nav-link-item .nav-item-icon {
        color: var(--menu-accent) !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks .nav-badge-hot {
        height: 18px !important;
        min-height: 18px !important;
        margin-left: 1px !important;
        padding: 0 6px !important;
        color: #047857 !important;
        background: #ecfdf5 !important;
        border: 1px solid #d1fae5 !important;
        border-radius: 999px !important;
        font-size: .57rem !important;
        font-weight: 800 !important;
        line-height: 16px !important;
        letter-spacing: 0 !important;
        box-shadow: 0 1px 3px rgba(5, 150, 105, .06) !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item {
        color: #e5e7eb !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item .nav-item-icon {
        color: #a7adb6 !important;
    }

    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item:hover,
    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item.active,
    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:hover > a.nav-link-item,
    [data-theme="dark"] body nav.navbar > .nav-container > ul#navLinks > li.nav-mega-dropdown:hover > a.nav-link-item {
        background: var(--menu-accent-bg) !important;
        border-color: var(--menu-accent-border) !important;
        box-shadow: none !important;
    }
}

@media (min-width: 1200px) and (max-width: 1320px) {
    html body nav.navbar > .nav-container > ul#navLinks {
        gap: 2px !important;
    }

    html body nav.navbar > .nav-container > ul#navLinks > li > a.nav-link-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
        gap: 5px !important;
        font-size: .79rem !important;
    }
}

/* =========================================================
   DESKTOP NAP TIEN — EXACT TRIGGER + MENU HOLD
   - Only the visible Nạp Tiền button can open the dropdown.
   - The hidden bridge exists only after the menu is already open.
   - Hovering the dropdown keeps it open for clicking.
   ========================================================= */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    /* Remove the always-active bridge attached to the button. */
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > a.nav-link-item::after {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        pointer-events: none !important;
    }

    /* Closed state: JS hover classes and parent :hover are not allowed to open it by themselves. */
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown > ul.modern-dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Exact trigger: actual button hover opens it. Once open, menu hover keeps it open. */
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:has(> a.nav-link-item:hover) > ul.modern-dropdown-menu,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:has(> ul.modern-dropdown-menu:hover) > ul.modern-dropdown-menu,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown.deposit-click-open > ul.modern-dropdown-menu {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        animation: depositDropdownCategoryIn .18s cubic-bezier(.16, 1, .3, 1) both !important;
    }

    /* Bridge belongs to the menu, so it cannot trigger a closed menu from empty space. */
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:has(> a.nav-link-item:hover) > ul.modern-dropdown-menu::before,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:has(> ul.modern-dropdown-menu:hover) > ul.modern-dropdown-menu::before,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown.deposit-click-open > ul.modern-dropdown-menu::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: -14px !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 14px !important;
        background: transparent !important;
        pointer-events: auto !important;
    }

    /* Keep the button visually active while the cursor is inside the dropdown. */
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown:has(> ul.modern-dropdown-menu:hover) > a.nav-link-item,
    html body nav.navbar > .nav-container > ul#navLinks > li.nav-dropdown.deposit-click-open > a.nav-link-item {
        color: var(--menu-accent) !important;
        background: var(--menu-accent-bg) !important;
        border-color: var(--menu-accent-border) !important;
    }
}