/* STC Modern Header v1 - scoped to .stc-header */
.stc-header {
    --stc-blue: #1677ff;
    --stc-blue-dark: #0f67e8;
    --stc-text: #111827;
    --stc-muted: #65758b;
    --stc-border: #e4eaf2;
    --stc-soft: #f6f8fb;
    --stc-soft-blue: #eef6ff;
    background: rgba(255,255,255,.97) !important;
    border-bottom: 1px solid #edf1f6;
    box-shadow: none !important;
}

.stc-header.sticky {
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(17,24,39,.06) !important;
}

.stc-header .stc-navbar {
    min-height: 68px;
    padding: 0;
    gap: 18px;
}

.stc-header .stc-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.stc-header .stc-header-logo {
    width: auto;
    height: 36px;
    max-width: 174px;
    object-fit: contain;
}

.stc-header .stc-nav-list {
    align-items: center;
    gap: 2px;
}

.stc-header .stc-nav-list .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    padding: 9px 10px !important;
    border: 0 !important;
    border-radius: 10px;
    color: #4b5565 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.1;
    letter-spacing: -.1px;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.stc-header .stc-nav-list .nav-link:hover,
.stc-header .stc-nav-list .nav-item.show > .nav-link,
.stc-header .stc-nav-list .nav-link[aria-expanded="true"] {
    color: var(--stc-text) !important;
    background: var(--stc-soft);
}

.stc-header .dropdown-toggle::after {
    display: none !important;
}

.stc-header .stc-chevron,
.stc-header .stc-user-chevron {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #8390a3;
    transition: transform .2s ease, color .2s ease;
}

.stc-header .stc-dropdown-trigger[aria-expanded="true"] .stc-chevron,
.stc-header .dropdown:hover > .stc-dropdown-trigger .stc-chevron {
    transform: rotate(180deg);
    color: var(--stc-blue);
}

.stc-header .stc-dropdown-menu,
.stc-header .stc-profile-menu {
    min-width: 220px;
    padding: 7px !important;
    margin-top: 8px !important;
    border: 1px solid var(--stc-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(17,24,39,.12) !important;
    overflow: hidden;
}

.stc-header .stc-dropdown-menu .dropdown-item,
.stc-header .stc-profile-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 10px !important;
    border-radius: 9px;
    color: #3f4b5e !important;
    font-size: 13px !important;
    font-weight: 500;
    line-height: 1.25;
    transition: background-color .18s ease, color .18s ease;
}

.stc-header .stc-dropdown-menu .dropdown-item i,
.stc-header .stc-profile-menu .dropdown-item i {
    width: 16px;
    color: #8492a6;
    text-align: center;
    font-size: 13px;
}

.stc-header .stc-dropdown-menu .dropdown-item:hover,
.stc-header .stc-profile-menu .dropdown-item:hover {
    color: var(--stc-blue) !important;
    background: var(--stc-soft-blue) !important;
}

.stc-header .stc-dropdown-menu .dropdown-item:hover i,
.stc-header .stc-profile-menu .dropdown-item:hover i {
    color: var(--stc-blue);
}

.stc-header .stc-header-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.stc-header .stc-header-search {
    position: relative;
    align-items: center;
    width: 190px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: #f4f6f9;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.stc-header .stc-header-search:focus-within {
    background: #fff;
    border-color: #b8d6ff;
    box-shadow: 0 0 0 3px rgba(22,119,255,.08);
}

.stc-header .stc-header-search svg {
    position: absolute;
    left: 11px;
    width: 16px;
    height: 16px;
    color: #8794a8;
    pointer-events: none;
}

.stc-header .stc-header-search:focus-within svg { color: var(--stc-blue); }

.stc-header .stc-header-search input {
    width: 100%;
    height: 100%;
    padding: 0 10px 0 34px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--stc-text);
    font-size: 13px;
    font-weight: 400;
}

.stc-header .stc-header-search input::placeholder { color: #9aa5b5; }

.stc-header .stc-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    color: #59677a;
    background: transparent;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.stc-header .stc-icon-btn:hover {
    color: var(--stc-blue);
    background: var(--stc-soft-blue);
}

.stc-header .stc-icon-btn svg { width: 19px; height: 19px; }

.stc-header .stc-action-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ff6b00;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.stc-header .stc-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 4px 8px 4px 4px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: var(--stc-text);
    transition: background-color .18s ease, border-color .18s ease;
}

.stc-header .stc-user-btn:hover,
.stc-header .stc-user-btn[aria-expanded="true"] {
    background: var(--stc-soft);
    border-color: #edf1f6;
}

.stc-header .stc-user-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    object-fit: cover;
    background: #f3f4f6;
}

.stc-header .stc-user-meta {
    min-width: 0;
    max-width: 108px;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.15;
}

.stc-header .stc-user-meta strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1f2937;
    font-size: 12px;
    font-weight: 700;
}

.stc-header .stc-user-meta small {
    color: #ef4444;
    font-size: 10px;
    font-weight: 600;
}

.stc-header .stc-profile-menu { min-width: 232px; }
.stc-header .stc-profile-menu .dropdown-divider { margin: 5px 3px; border-color: #edf1f5; }
.stc-header .stc-profile-menu .stc-logout-link:hover { color: #dc2626 !important; background: #fff1f2 !important; }
.stc-header .stc-profile-menu .stc-logout-link:hover i { color: #dc2626; }

.stc-header .stc-profile-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 1px 2px 6px;
    padding: 9px 10px;
    border-radius: 10px;
    background: var(--stc-soft);
}
.stc-header .stc-profile-head strong { font-size: 13px; color: var(--stc-text); }
.stc-header .stc-profile-head span { font-size: 11px; font-weight: 600; color: #ef4444; }

.stc-header .stc-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--stc-blue);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: none;
}
.stc-header .stc-login-btn:hover { background: var(--stc-blue-dark); }

.stc-header .stc-menu-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 10px;
    background: transparent;
}
.stc-header .stc-menu-toggle:hover { background: var(--stc-soft); }

.stc-header .stc-mobile-head,
.stc-header .stc-mobile-search { display: none; }

@media (min-width: 1400px) {
    .stc-header .navbar .dropdown-menu {
        display: block;
        top: calc(100% + 2px);
        left: 0;
        right: auto;
        visibility: hidden;
        opacity: 0;
        transform: translateY(6px) scale(.98);
        transform-origin: top left;
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }
    .stc-header .navbar .dropdown:hover > .dropdown-menu,
    .stc-header .navbar .dropdown-menu.show {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    .stc-header .stc-user-dropdown .dropdown-menu {
        left: auto;
        right: 0;
        transform-origin: top right;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .stc-header .stc-navbar { gap: 10px; }
    .stc-header .stc-header-logo { height: 33px; max-width: 152px; }
    .stc-header .stc-nav-list .nav-link { padding-left: 7px !important; padding-right: 7px !important; font-size: 13px !important; }
    .stc-header .stc-user-meta { display: none !important; }
    .stc-header .stc-user-btn { padding-right: 4px; }
    .stc-header .stc-user-chevron { display: none !important; }
}

@media (max-width: 1399.98px) {
    .stc-header .stc-navbar {
        min-height: 64px;
        padding: 0;
        gap: 8px;
    }
    .stc-header .stc-header-logo { height: 32px; max-width: 155px; }
    .stc-header .stc-header-actions { gap: 5px; }
    .stc-header .stc-user-btn {
        min-height: 38px;
        padding: 2px;
        border: 0;
        background: transparent !important;
    }
    .stc-header .stc-user-avatar { width: 34px; height: 34px; }
    .stc-header .stc-mobile-drawer {
        position: fixed;
        top: 0;
        left: 0;
        width: min(330px, 88vw);
        max-width: 330px;
        height: 100dvh;
        max-height: 100dvh;
        padding: 18px 16px 24px;
        border-right: 1px solid var(--stc-border);
        background: #fff;
        box-shadow: 20px 0 50px rgba(17,24,39,.12);
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform .24s ease;
        z-index: 10050;
    }
    .stc-header .stc-mobile-drawer.show { transform: translateX(0); }
    .stc-header .stc-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
    }
    .stc-header .stc-mobile-head .stc-header-logo { height: 31px; }
    .stc-header .stc-mobile-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--stc-border);
        border-radius: 10px;
        background: #fff;
        color: #566276;
    }
    .stc-header .stc-mobile-close svg { width: 18px; height: 18px; }
    .stc-header .stc-mobile-search {
        position: relative;
        display: flex;
        align-items: center;
        height: 42px;
        margin-bottom: 15px;
        border: 1px solid var(--stc-border);
        border-radius: 11px;
        background: var(--stc-soft);
    }
    .stc-header .stc-mobile-search svg {
        position: absolute;
        left: 12px;
        width: 17px;
        height: 17px;
        color: #8390a3;
    }
    .stc-header .stc-mobile-search input {
        width: 100%;
        height: 100%;
        padding: 0 12px 0 38px;
        border: 0;
        outline: 0;
        background: transparent;
        color: var(--stc-text);
        font-size: 13px;
    }
    .stc-header .stc-nav-list {
        align-items: stretch;
        gap: 4px;
    }
    .stc-header .stc-nav-list .nav-link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-height: 42px;
        padding: 11px 12px !important;
        border: 1px solid transparent !important;
        border-radius: 10px;
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }
    .stc-header .stc-nav-list .nav-link:hover,
    .stc-header .stc-nav-list .nav-link[aria-expanded="true"] {
        border-color: #dce9fb !important;
        background: var(--stc-soft-blue);
        color: var(--stc-blue) !important;
    }
    .stc-header .stc-dropdown-menu {
        position: static !important;
        min-width: 0;
        margin: 2px 0 5px !important;
        padding: 5px !important;
        border-radius: 10px !important;
        box-shadow: none !important;
        background: #f8fafc !important;
    }
    .stc-header .stc-dropdown-menu .dropdown-item {
        min-height: 36px;
        padding: 7px 9px !important;
        font-size: 12.5px !important;
    }
    .stc-header .stc-profile-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 220px;
        transform: none !important;
    }
}

/* iPad/tablet: dùng giao diện mobile đến dưới 1400px để tránh menu PC bị chật. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .stc-header .stc-mobile-drawer {
        width: min(390px, 72vw);
        max-width: 390px;
        padding: 20px 18px 28px;
    }
    .stc-header .stc-header-logo {
        height: 33px;
        max-width: 165px;
    }
    .stc-header .stc-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .stc-header .stc-header-shell { padding-left: 12px; padding-right: 12px; }
    .stc-header .stc-navbar { min-height: 62px; }
    .stc-header .stc-header-logo { height: 29px; max-width: 145px; }
    .stc-header .stc-icon-btn { width: 36px; height: 36px; flex-basis: 36px; }
    .stc-header .stc-user-avatar { width: 32px; height: 32px; }
    .stc-header .stc-menu-toggle { width: 38px; height: 38px; flex-basis: 38px; }
    .stc-header .stc-login-btn { min-height: 36px; padding: 0 10px; font-size: 12px; }
}

/* ===== STC Modern Header V1.1 refinements ===== */
/* Top nav hover: only change text color; no pill/box background. */
.stc-header .stc-nav-list .nav-link:hover,
.stc-header .stc-nav-list .nav-item.show > .nav-link,
.stc-header .stc-nav-list .nav-link[aria-expanded="true"] {
    color: var(--stc-blue) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.stc-header .stc-nav-list .nav-link:focus,
.stc-header .stc-nav-list .nav-link:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Search wrapper + live dropdown */
.stc-header .stc-live-search {
    position: relative;
    width: 210px;
    flex: 0 0 210px;
    z-index: 1055;
}

.stc-header .stc-header-search {
    width: 100%;
    height: 38px;
    display: flex;
    position: relative;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 11px;
    background: #f4f6f9;
    transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.stc-header .stc-header-search:focus-within,
.stc-header .stc-live-search.is-open .stc-header-search {
    background: #fff;
    border-color: #1677ff;
    box-shadow: 0 0 0 2px rgba(22,119,255,.06);
}

.stc-header .stc-header-search .stc-search-icon {
    position: absolute;
    left: 11px;
    width: 16px;
    height: 16px;
    color: #7d899a;
    pointer-events: none;
}

.stc-header .stc-header-search:focus-within .stc-search-icon,
.stc-header .stc-live-search.is-open .stc-search-icon { color: var(--stc-blue); }

.stc-header .stc-header-search input {
    width: 100%;
    height: 100%;
    padding: 0 34px 0 34px;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #172033;
    font-size: 13px;
    font-weight: 400;
}

.stc-header .stc-search-clear {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #9aa5b5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.stc-header .stc-search-clear:hover { color: #4b5565; background: #f3f5f8; }
.stc-header .stc-search-clear svg { position: static; width: 15px; height: 15px; pointer-events: none; }

.stc-header .stc-search-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: 300px;
    padding: 8px 0 0;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(17,24,39,.14);
    overflow: hidden;
    z-index: 1085;
}
.stc-header .stc-search-panel[hidden] { display: none !important; }

.stc-header .stc-search-panel-label {
    padding: 2px 13px 7px;
    color: #a0a8b5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .035em;
}

.stc-header .stc-search-results {
    max-height: 330px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.stc-header .stc-search-result {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 12px;
    color: #172033 !important;
    text-decoration: none !important;
    background: transparent;
    transition: background-color .14s ease;
}
.stc-header .stc-search-result:hover { background: #f6f8fb; }

.stc-header .stc-search-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    overflow: hidden;
    border-radius: 9px;
    border: 1px solid #edf1f5;
    background: #f6f8fb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stc-header .stc-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stc-header .stc-search-thumb.is-fallback::after {
    content: "</>";
    color: #8ea0b8;
    font-size: 10px;
    font-weight: 800;
}

.stc-header .stc-search-result-meta {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.stc-header .stc-search-result-meta strong {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #202735;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}
.stc-header .stc-search-result-meta small {
    color: #1677ff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.stc-header .stc-search-empty {
    padding: 18px 14px 22px;
    color: #7b8799;
    text-align: center;
    font-size: 12px;
}

.stc-header .stc-search-more {
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    border: 0;
    border-top: 1px solid #edf1f5;
    background: #fff;
    color: #1677ff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.stc-header .stc-search-more:hover { background: #f8fbff; }

/* Avoid icon/user hover pills feeling boxed-in as well. */
.stc-header .stc-icon-btn:hover {
    color: var(--stc-blue);
    background: transparent;
}
.stc-header .stc-user-btn:hover,
.stc-header .stc-user-btn[aria-expanded="true"] {
    background: transparent;
    border-color: transparent;
}

/* Mobile live search stays inside the drawer and opens downward. */
@media (max-width: 1399.98px) {
    .stc-header .stc-mobile-search-wrap {
        display: block;
        width: auto;
        flex: 0 0 auto;
        margin: 10px 14px 8px;
        z-index: 5;
    }
    .stc-header .stc-mobile-search {
        display: flex !important;
        position: relative;
        align-items: center;
        width: 100%;
        height: 42px;
        margin: 0;
        border: 1px solid #e5eaf1;
        border-radius: 12px;
        background: #f7f9fc;
    }
    .stc-header .stc-mobile-search:focus-within {
        border-color: #1677ff;
        background: #fff;
        box-shadow: 0 0 0 2px rgba(22,119,255,.06);
    }
    .stc-header .stc-mobile-search .stc-search-icon {
        position: absolute;
        left: 12px;
        width: 17px;
        height: 17px;
        color: #8390a3;
    }
    .stc-header .stc-mobile-search input {
        width: 100%;
        height: 100%;
        padding: 0 38px 0 38px;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 13px;
    }
    .stc-header .stc-mobile-search-wrap .stc-search-panel {
        position: absolute;
        top: calc(100% + 7px);
        left: 0;
        right: 0;
        width: 100%;
        max-height: min(420px, 58vh);
    }
}


/* ===== STC Modern Header V1.2: theme + activity notifications ===== */
.stc-header .stc-icon-btn,
.stc-header button.stc-icon-btn {
    border: 0;
    padding: 0;
    cursor: pointer;
    box-shadow: none;
}

.stc-header .stc-theme-toggle { position: relative; }
.stc-header .stc-theme-toggle .stc-theme-sun,
.stc-header .stc-theme-toggle .stc-theme-moon {
    position: absolute;
    width: 19px;
    height: 19px;
    transition: opacity .18s ease, transform .22s ease;
}
.stc-header .stc-theme-toggle .stc-theme-sun { opacity: 1; transform: rotate(0) scale(1); }
.stc-header .stc-theme-toggle .stc-theme-moon { opacity: 0; transform: rotate(80deg) scale(.72); }
html[data-stc-theme="dark"] .stc-header .stc-theme-toggle .stc-theme-sun { opacity: 0; transform: rotate(-80deg) scale(.72); }
html[data-stc-theme="dark"] .stc-header .stc-theme-toggle .stc-theme-moon { opacity: 1; transform: rotate(0) scale(1); }

.stc-header .stc-activity-dropdown { position: relative; }
.stc-header .stc-activity-btn { position: relative; }
.stc-header .stc-notification-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}
.stc-header .stc-activity-menu {
    width: 330px;
    padding: 0 !important;
    margin-top: 9px !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: 0 18px 48px rgba(17,24,39,.14) !important;
    overflow: hidden;
}
.stc-header .stc-activity-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 14px 11px;
    border-bottom: 1px solid #edf1f5;
}
.stc-header .stc-activity-head > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stc-header .stc-activity-head strong { color: #172033; font-size: 13px; font-weight: 800; }
.stc-header .stc-activity-head span { color: #8a96a8; font-size: 10px; font-weight: 500; }
.stc-header .stc-activity-head > a { flex: 0 0 auto; color: #1677ff !important; font-size: 10px; font-weight: 700; text-decoration: none; }
.stc-header .stc-activity-list { max-height: 310px; overflow-y: auto; }
.stc-header .stc-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 13px;
    color: inherit !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f0f3f7;
    background: transparent;
    transition: background-color .15s ease;
}
.stc-header .stc-activity-item:hover { background: #f7f9fc; }
.stc-header .stc-activity-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eef6ff;
    color: #1677ff;
}
.stc-header .stc-activity-icon svg { width: 15px; height: 15px; }
.stc-header .stc-activity-copy { min-width: 0; display: flex; flex: 1 1 auto; flex-direction: column; gap: 3px; }
.stc-header .stc-activity-copy strong {
    display: block;
    overflow: hidden;
    color: #253044;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stc-header .stc-activity-copy small { color: #8a96a8; font-size: 9.5px; font-weight: 500; line-height: 1.35; }
.stc-header .stc-activity-empty { padding: 22px 14px; color: #8a96a8; text-align: center; font-size: 11px; }
.stc-header .stc-activity-footer {
    min-height: 40px;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #1677ff !important;
    background: #fff;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 700;
}
.stc-header .stc-activity-footer:hover { background: #f8fbff; }

/* Search footer is intentionally always visible while a query exists. */
.stc-header .stc-search-more { cursor: pointer; }

/* Dark mode - conservative overrides for the header and the main custom surfaces already used by this site. */
html[data-stc-theme="dark"] body {
    background: #0f131a !important;
    color: #d7dde7;
}
html[data-stc-theme="dark"] .stc-header,
html[data-stc-theme="dark"] .stc-header.sticky {
    background: rgba(16,20,27,.97) !important;
    border-bottom-color: #252c37 !important;
}
html[data-stc-theme="dark"] .stc-header .stc-nav-list .nav-link { color: #b8c0cc !important; }
html[data-stc-theme="dark"] .stc-header .stc-nav-list .nav-link:hover,
html[data-stc-theme="dark"] .stc-header .stc-nav-list .nav-link[aria-expanded="true"] { color: #60a5fa !important; }
html[data-stc-theme="dark"] .stc-header .stc-header-search,
html[data-stc-theme="dark"] .stc-header .stc-mobile-search { background: #181e27 !important; border-color: #252e3b !important; }
html[data-stc-theme="dark"] .stc-header .stc-header-search:focus-within,
html[data-stc-theme="dark"] .stc-header .stc-live-search.is-open .stc-header-search,
html[data-stc-theme="dark"] .stc-header .stc-mobile-search:focus-within { background: #141922 !important; border-color: #3b82f6 !important; }
html[data-stc-theme="dark"] .stc-header .stc-header-search input,
html[data-stc-theme="dark"] .stc-header .stc-mobile-search input { color: #eef2f7 !important; }
html[data-stc-theme="dark"] .stc-header .stc-search-panel,
html[data-stc-theme="dark"] .stc-header .stc-dropdown-menu,
html[data-stc-theme="dark"] .stc-header .stc-profile-menu,
html[data-stc-theme="dark"] .stc-header .stc-activity-menu { background: #151a22 !important; border-color: #2a323e !important; }
html[data-stc-theme="dark"] .stc-header .stc-search-result:hover,
html[data-stc-theme="dark"] .stc-header .stc-activity-item:hover,
html[data-stc-theme="dark"] .stc-header .stc-dropdown-menu .dropdown-item:hover,
html[data-stc-theme="dark"] .stc-header .stc-profile-menu .dropdown-item:hover { background: #1d2530 !important; }
html[data-stc-theme="dark"] .stc-header .stc-search-result-meta strong,
html[data-stc-theme="dark"] .stc-header .stc-activity-copy strong,
html[data-stc-theme="dark"] .stc-header .stc-activity-head strong,
html[data-stc-theme="dark"] .stc-header .stc-dropdown-menu .dropdown-item,
html[data-stc-theme="dark"] .stc-header .stc-profile-menu .dropdown-item { color: #e5eaf1 !important; }
html[data-stc-theme="dark"] .stc-header .stc-activity-head,
html[data-stc-theme="dark"] .stc-header .stc-activity-item,
html[data-stc-theme="dark"] .stc-header .stc-search-more { border-color: #28313d !important; }
html[data-stc-theme="dark"] .stc-header .stc-search-more,
html[data-stc-theme="dark"] .stc-header .stc-activity-footer { background: #151a22 !important; }
html[data-stc-theme="dark"] .stc-header .stc-notification-badge,
html[data-stc-theme="dark"] .stc-header .stc-action-badge { border-color: #11161d; }

/* Existing custom page surfaces: enough coverage for a coherent dark switch without rewriting every legacy stylesheet. */
html[data-stc-theme="dark"] .stc-services-v22,
html[data-stc-theme="dark"] .market13-section,
html[data-stc-theme="dark"] .stc-account-page,
html[data-stc-theme="dark"] .stc-account-section { background: #0f131a !important; color: #d7dde7 !important; }
html[data-stc-theme="dark"] .stc-service-v22-card,
html[data-stc-theme="dark"] .market13-card,
html[data-stc-theme="dark"] .stc-ap-card,
html[data-stc-theme="dark"] .stc-account-nav,
html[data-stc-theme="dark"] .card,
html[data-stc-theme="dark"] .modal-content { background: #151a22 !important; border-color: #2a323e !important; color: #d7dde7 !important; }
html[data-stc-theme="dark"] .market13-heading h2,
html[data-stc-theme="dark"] .market13-title a,
html[data-stc-theme="dark"] .stc-service-v22-body strong,
html[data-stc-theme="dark"] .stc-ap-head h1,
html[data-stc-theme="dark"] .stc-ap-card h1,
html[data-stc-theme="dark"] .stc-ap-card h2,
html[data-stc-theme="dark"] .stc-ap-card h3 { color: #eef2f7 !important; }
html[data-stc-theme="dark"] input,
html[data-stc-theme="dark"] select,
html[data-stc-theme="dark"] textarea,
html[data-stc-theme="dark"] .form-control,
html[data-stc-theme="dark"] .form-select { background-color: #151a22 !important; border-color: #303947 !important; color: #e5eaf1 !important; }

@media (max-width: 1399.98px) {
    html[data-stc-theme="dark"] .stc-header .stc-mobile-drawer { background: #11161d !important; border-color: #29313d !important; }
    html[data-stc-theme="dark"] .stc-header .stc-dropdown-menu { background: #171d26 !important; }
}

@media (max-width: 767.98px) {
    .stc-header .stc-activity-menu { width: min(330px, calc(100vw - 24px)); }
}

/* ===== STC Modern Header V1.3 refinements ===== */
/* Favorite count uses the site's primary blue instead of the old orange. */
.stc-header .stc-action-badge {
    background: #1677ff !important;
}

.stc-header .stc-activity-readall {
    flex: 0 0 auto;
    padding: 2px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1677ff;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: color .16s ease, opacity .16s ease;
}
.stc-header .stc-activity-readall:hover { color: #0f67e8; }
.stc-header .stc-activity-readall.is-read { color: #22a06b; }
html[data-stc-theme="dark"] .stc-header .stc-activity-readall { color: #60a5fa; }
html[data-stc-theme="dark"] .stc-header .stc-activity-readall:hover { color: #93c5fd; }
html[data-stc-theme="dark"] .stc-header .stc-activity-readall.is-read { color: #4ade80; }

/* =========================================================
   STC Modern Header V1.4 fixes
   ========================================================= */

/* Activity dropdown opens toward the LEFT of the bell instead of spilling right. */
@media (min-width: 768px) {
    .stc-header .stc-activity-dropdown .stc-activity-menu.dropdown-menu {
        position: absolute !important;
        top: calc(100% + 9px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        inset: calc(100% + 9px) 0 auto auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* Account balance follows the site primary blue, not the legacy orange/red. */
.stc-header .stc-user-meta small,
.stc-header .stc-profile-head span {
    color: #1677ff !important;
}

/* Keep favorite + activity badges aligned with the modern palette. */
.stc-header .stc-action-badge {
    background: #1677ff !important;
    border-color: #fff !important;
}
.stc-header .stc-notification-badge {
    background: #ef4444 !important;
}

html[data-stc-theme="dark"] .stc-header .stc-user-meta strong,
html[data-stc-theme="dark"] .stc-header .stc-profile-head strong {
    color: #f1f5f9 !important;
}
html[data-stc-theme="dark"] .stc-header .stc-user-meta small,
html[data-stc-theme="dark"] .stc-header .stc-profile-head span {
    color: #60a5fa !important;
}
html[data-stc-theme="dark"] .stc-header .stc-action-badge,
html[data-stc-theme="dark"] .stc-header .stc-notification-badge {
    border-color: #11161d !important;
}


/* ===== V1.6 TABLET / TOUCH NAV FIX =====
 * Bootstrap navbar-expand-xxl vẫn chuyển iPad Pro/Surface thành desktop nếu viewport >= 1400px.
 * Dùng class stc-touch-nav từ navigator.maxTouchPoints để ép thiết bị cảm ứng về drawer.
 */
.stc-header .stc-menu-toggle {
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    color: #26364a !important;
    box-shadow: none !important;
}
.stc-header .stc-menu-toggle:focus,
.stc-header .stc-menu-toggle:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}
.stc-header .stc-menu-icon {
    display: block;
    width: 23px;
    height: 23px;
}

/* Luôn hiện hamburger trên thiết bị cảm ứng, kể cả iPad Pro/Surface ở landscape rộng. */
html.stc-touch-nav .stc-header .stc-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ẩn search desktop khi touch mode và dùng search nằm trong drawer. */
html.stc-touch-nav .stc-header .stc-header-actions > .stc-live-search.d-xxl-block {
    display: none !important;
}
html.stc-touch-nav .stc-header .stc-mobile-head,
html.stc-touch-nav .stc-header .stc-mobile-search-wrap {
    display: flex !important;
}
html.stc-touch-nav .stc-header .stc-mobile-search-wrap {
    display: block !important;
}

/* Ghi đè Bootstrap .navbar-expand-xxl ở >=1400px trên tablet/touch. */
html.stc-touch-nav .stc-header .navbar-expand-xxl .stc-mobile-drawer.collapse:not(.show) {
    display: block !important;
}
html.stc-touch-nav .stc-header .navbar-expand-xxl .stc-mobile-drawer,
html.stc-touch-nav .stc-header .navbar-expand-xxl .navbar-collapse {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: min(390px, 78vw) !important;
    max-width: 390px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: block !important;
    flex-basis: auto !important;
    padding: 20px 18px 28px !important;
    border-right: 1px solid var(--stc-border) !important;
    background: #fff !important;
    box-shadow: 20px 0 50px rgba(17,24,39,.12) !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateX(-105%) !important;
    transition: transform .24s ease, opacity .2s ease, visibility .2s ease !important;
    z-index: 10050 !important;
}
html.stc-touch-nav .stc-header .navbar-expand-xxl .stc-mobile-drawer.show,
html.stc-touch-nav .stc-header .navbar-expand-xxl .navbar-collapse.show {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
}

html.stc-touch-nav .stc-header .stc-nav-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    margin: 0 !important;
}
html.stc-touch-nav .stc-header .stc-nav-list .nav-link {
    display: flex !important;
    width: 100% !important;
    min-height: 42px !important;
    justify-content: space-between !important;
    padding: 11px 12px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}
html.stc-touch-nav .stc-header .stc-dropdown-menu {
    position: static !important;
    transform: none !important;
    min-width: 0 !important;
    margin: 2px 0 5px !important;
    padding: 5px !important;
    box-shadow: none !important;
    background: #f8fafc !important;
}
html.stc-touch-nav .stc-header .stc-user-meta,
html.stc-touch-nav .stc-header .stc-user-chevron {
    display: none !important;
}

/* Ở tablet rộng vừa phải vẫn đảm bảo toggle không bị các utility Bootstrap cũ ẩn. */
@media (max-width: 1599.98px) {
    .stc-header .stc-menu-toggle.d-xxl-none {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}
/* Nhưng PC không cảm ứng từ 1400-1599 vẫn dùng menu desktop, tránh hiện cả menu và hamburger. */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    html:not(.stc-touch-nav) .stc-header .stc-menu-toggle.d-xxl-none {
        display: none !important;
    }
}

/* ===== V1.7 iPad / Surface bottom navigation =====
 * Dựa trên pattern lg:hidden của giao diện tham khảo, nhưng nhận diện thêm touch device
 * để iPad Pro / Surface ở landscape vẫn có điều hướng kiểu mobile.
 * Markup .mobile-bottom-nav đã có sẵn trong footer hiện tại nên không cần sửa footer.
 */
@media (min-width: 768px) and (max-width: 1600px) {
    html.stc-tablet-mobile-ui .mobile-bottom-nav {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10040 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        height: calc(66px + env(safe-area-inset-bottom)) !important;
        min-height: 66px !important;
        padding: 4px max(12px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)) !important;
        border-top: 1px solid #e8edf4 !important;
        background: rgba(255,255,255,.94) !important;
        box-shadow: 0 -7px 24px rgba(17,24,39,.06) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        backdrop-filter: blur(14px) !important;
    }

    html.stc-tablet-mobile-ui .mobile-bottom-nav a {
        position: relative !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 4px 2px !important;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #8a95a6 !important;
        text-decoration: none !important;
        font-size: 10px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;
        transition: color .18s ease, transform .18s ease !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    html.stc-tablet-mobile-ui .mobile-bottom-nav a:active {
        transform: scale(.97) !important;
    }

    html.stc-tablet-mobile-ui .mobile-bottom-nav a i {
        width: 34px !important;
        height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: #8a95a6 !important;
        font-size: 18px !important;
        line-height: 1 !important;
        transition: color .18s ease, background-color .18s ease, transform .18s ease !important;
    }

    html.stc-tablet-mobile-ui .mobile-bottom-nav a.active {
        color: #1677ff !important;
    }

    html.stc-tablet-mobile-ui .mobile-bottom-nav a.active i {
        color: #1677ff !important;
        background: #eef6ff !important;
        transform: scale(1.08) !important;
    }

    /* Chừa đúng phần đáy cho nav cố định, tránh che footer/nút cuối trang. */
    html.stc-tablet-mobile-ui body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
}

/* Fallback CSS-only nếu JS bị cache/chặn: pointer coarse vẫn hiện bottom nav trên tablet. */
@media (pointer: coarse) and (min-width: 768px) and (max-width: 1399.98px) {
    html .mobile-bottom-nav {
        display: grid !important;
    }
}

/* iPad/Surface cũng phải nhìn thấy nút hamburger ở header. */
@media (pointer: coarse) and (max-width: 1399.98px) {
    .stc-header .stc-menu-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* ============================================================
   V2.0 HAMBURGER CLEAN FIX
   Legacy CSS của theme cũ có style/pseudo-element cho .navbar-toggler.
   Header mới đã bỏ class navbar-toggler khỏi button, đồng thời reset
   toàn bộ pseudo-element để chỉ còn đúng SVG 3 gạch.
   ============================================================ */
.stc-header .stc-menu-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    position: relative !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    overflow: visible !important;
}

.stc-header .stc-menu-toggle::before,
.stc-header .stc-menu-toggle::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}

.stc-header .stc-menu-toggle .navbar-toggler-icon,
.stc-header .stc-menu-toggle > span:not(.sr-only) {
    display: none !important;
}

.stc-header .stc-menu-icon {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    overflow: visible !important;
    color: #26364a !important;
    stroke: currentColor !important;
    fill: none !important;
}

.stc-header .stc-menu-icon path {
    display: block !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.stc-header .stc-menu-toggle:hover,
.stc-header .stc-menu-toggle:focus,
.stc-header .stc-menu-toggle:focus-visible,
.stc-header .stc-menu-toggle:active {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* ============================================================
   V2.1 DEVTOOLS / VIEWPORT RESET
   Khi F12 Device Toolbar tắt và viewport quay về desktop, tuyệt đối
   không cho class touch hoặc trạng thái collapse cũ giữ drawer lại.
   ============================================================ */
@media (min-width: 1400px) {
    html.stc-touch-nav .stc-header .stc-menu-toggle,
    html.stc-tablet-mobile-ui .stc-header .stc-menu-toggle,
    html.stc-tablet-layout .stc-header .stc-menu-toggle {
        display: none !important;
    }

    html.stc-touch-nav .stc-header .navbar-expand-xxl .stc-mobile-drawer,
    html.stc-touch-nav .stc-header .navbar-expand-xxl .navbar-collapse,
    html.stc-tablet-mobile-ui .stc-header .navbar-expand-xxl .stc-mobile-drawer,
    html.stc-tablet-mobile-ui .stc-header .navbar-expand-xxl .navbar-collapse,
    html.stc-tablet-layout .stc-header .navbar-expand-xxl .stc-mobile-drawer,
    html.stc-tablet-layout .stc-header .navbar-expand-xxl .navbar-collapse {
        position: static !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        display: flex !important;
        flex-basis: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    html.stc-touch-nav .stc-header .stc-mobile-head,
    html.stc-touch-nav .stc-header .stc-mobile-search-wrap,
    html.stc-tablet-mobile-ui .stc-header .stc-mobile-head,
    html.stc-tablet-mobile-ui .stc-header .stc-mobile-search-wrap,
    html.stc-tablet-layout .stc-header .stc-mobile-head,
    html.stc-tablet-layout .stc-header .stc-mobile-search-wrap {
        display: none !important;
    }

    html .mobile-bottom-nav {
        display: none !important;
    }
}

/* ============================================================
   MOBILE DRAWER V3 — chọn lọc từ mẫu F12, giữ font/màu/route của source
   ============================================================ */
@media (max-width: 1399.98px) {
    html.stc-mobile-drawer-open,
    body.stc-mobile-drawer-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .stc-header .stc-desktop-menu-v3 {
        display: none !important;
    }

    .stc-header .stc-mobile-drawer {
        width: min(330px, 92vw) !important;
        max-width: 330px !important;
        padding: 0 18px 28px !important;
        background: #fff !important;
        border-right: 1px solid #e8edf4 !important;
        box-shadow: 24px 0 60px rgba(15, 23, 42, .15) !important;
        scrollbar-width: none;
    }
    .stc-header .stc-mobile-drawer::-webkit-scrollbar { display: none; }

    .stc-header .stc-mobile-head {
        position: sticky;
        top: 0;
        z-index: 30;
        min-height: 76px;
        margin: 0 -18px 16px;
        padding: 0 18px;
        background: rgba(255,255,255,.96);
        border-bottom: 1px solid #edf1f6;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    .stc-header .stc-mobile-head .stc-header-logo {
        height: 34px !important;
        max-width: 165px !important;
    }
    .stc-header .stc-mobile-close {
        width: 36px;
        height: 36px;
        border-color: #e2e8f0;
        border-radius: 11px;
        background: #fff;
        color: #64748b;
        transition: background-color .18s ease, color .18s ease, transform .18s ease;
    }
    .stc-header .stc-mobile-close:hover {
        background: #f5f7fa;
        color: #111827;
    }
    .stc-header .stc-mobile-close:active { transform: scale(.94); }
    .stc-header .stc-mobile-close svg { width: 17px; height: 17px; stroke-width: 2.2; }

    .stc-header .stc-mobile-search-wrap {
        position: relative;
        z-index: 3;
        margin-bottom: 16px;
    }
    .stc-header .stc-mobile-search {
        height: 44px;
        margin: 0;
        border-color: #e1e7ef;
        border-radius: 12px;
        background: #f7f9fc;
    }
    .stc-header .stc-mobile-search:focus-within {
        border-color: #b8d6ff;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(22,119,255,.07);
    }
    .stc-header .stc-mobile-search input {
        font-family: inherit;
        font-size: 13px;
        font-weight: 400;
    }

    .stc-header .stc-mobile-menu-v3 {
        display: block;
        padding-bottom: 8px;
        font-family: inherit;
        color: #111827;
    }

    .stc-header .stc-mobile-account-card {
        display: grid;
        color: inherit;
        text-decoration: none;
        grid-template-columns: 44px minmax(0,1fr);
        gap: 12px;
        align-items: center;
        margin: 0 0 16px;
        padding: 13px 14px;
        border: 1px solid #e5ebf3;
        border-radius: 14px;
        background: #f8fafc;
    }
    .stc-header .stc-mobile-account-avatar {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        object-fit: cover;
        border: 2px solid #fff;
        box-shadow: 0 1px 4px rgba(15,23,42,.08);
    }
    .stc-header .stc-mobile-account-copy {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        line-height: 1.3;
    }
    .stc-header .stc-mobile-account-copy strong {
        overflow: hidden;
        color: #111827;
        font-size: 13.5px;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .stc-header .stc-mobile-account-copy span {
        overflow: hidden;
        color: #7b8798;
        font-size: 11.5px;
        font-weight: 400;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .stc-header .stc-mobile-account-copy small {
        margin-top: 3px;
        color: #64748b;
        font-size: 11.5px;
        font-weight: 500;
    }
    .stc-header .stc-mobile-account-copy small b {
        color: #1677ff;
        font-weight: 700;
    }

    .stc-header .stc-mobile-login-card {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
        padding: 13px 14px;
        border: 1px solid #dbe8fb;
        border-radius: 14px;
        background: #f4f9ff;
        color: #334155;
        text-decoration: none;
    }
    .stc-header .stc-mobile-login-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
        border-radius: 12px;
        background: #e8f3ff;
        color: #1677ff;
    }
    .stc-header .stc-mobile-login-icon svg { width: 19px; height: 19px; }
    .stc-header .stc-mobile-login-card > span:last-child { display:flex; flex-direction:column; gap:2px; }
    .stc-header .stc-mobile-login-card strong { color:#111827; font-size:13px; font-weight:700; }
    .stc-header .stc-mobile-login-card small { color:#7b8798; font-size:11.5px; font-weight:400; }

    .stc-header .stc-mobile-primary-nav,
    .stc-header .stc-mobile-secondary-nav {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .stc-header .stc-mobile-menu-link {
        position: relative;
        display: grid;
        grid-template-columns: 24px minmax(0,1fr);
        align-items: center;
        gap: 12px;
        min-height: 44px;
        padding: 9px 10px;
        border-radius: 11px;
        color: #526174;
        text-decoration: none !important;
        font-family: inherit;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.2;
        transition: color .18s ease, background-color .18s ease, transform .18s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .stc-header .stc-mobile-menu-link:hover {
        color: #1677ff;
        background: #f5f9ff;
    }
    .stc-header .stc-mobile-menu-link:active { transform: scale(.985); }
    .stc-header .stc-mobile-menu-link.is-active {
        color: #0f67e8;
        background: #eef6ff;
        font-weight: 650;
    }
    .stc-header .stc-mobile-menu-link.is-active::before {
        content: '';
        position: absolute;
        left: -18px;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 0 4px 4px 0;
        background: #1677ff;
    }
    .stc-header .stc-mobile-menu-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        color: #8a97a9;
    }
    .stc-header .stc-mobile-menu-icon svg {
        width: 19px;
        height: 19px;
        stroke-width: 2;
    }
    .stc-header .stc-mobile-menu-link:hover .stc-mobile-menu-icon,
    .stc-header .stc-mobile-menu-link.is-active .stc-mobile-menu-icon {
        color: #1677ff;
    }



    /* Mobile recharge submenu: giữ cùng nhịp với menu chính, không điều hướng ngay khi bấm Nạp tiền. */
    .stc-header .stc-mobile-recharge-menu {
        margin: 0;
        padding: 0;
        border: 0;
    }
    .stc-header .stc-mobile-recharge-menu > summary {
        list-style: none;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    .stc-header .stc-mobile-recharge-menu > summary::-webkit-details-marker { display: none; }
    .stc-header .stc-mobile-recharge-toggle {
        grid-template-columns: 24px minmax(0,1fr) 18px;
    }
    .stc-header .stc-mobile-recharge-chevron {
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #9aa6b6;
        transition: transform .18s ease, color .18s ease;
    }
    .stc-header .stc-mobile-recharge-chevron svg {
        width: 16px;
        height: 16px;
    }
    .stc-header .stc-mobile-recharge-menu[open] .stc-mobile-recharge-chevron {
        transform: rotate(180deg);
        color: #1677ff;
    }
    .stc-header .stc-mobile-recharge-submenu {
        display: grid;
        gap: 6px;
        margin: 3px 0 7px 36px;
        padding: 8px;
        border: 1px solid #e8edf4;
        border-radius: 12px;
        background: #f8fafc;
    }
    .stc-header .stc-mobile-recharge-link {
        min-width: 0;
        display: grid;
        grid-template-columns: 34px minmax(0,1fr);
        gap: 9px;
        align-items: center;
        padding: 8px 9px;
        border-radius: 10px;
        color: #526174;
        text-decoration: none !important;
        transition: background-color .18s ease, color .18s ease;
    }
    .stc-header .stc-mobile-recharge-link:hover,
    .stc-header .stc-mobile-recharge-link.is-active {
        color: #0f67e8;
        background: #eef6ff;
    }
    .stc-header .stc-mobile-recharge-subicon {
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
    }
    .stc-header .stc-mobile-recharge-subicon svg { width: 17px; height: 17px; }
    .stc-header .stc-mobile-recharge-bank { color: #1677ff; background: #eaf3ff; }
    .stc-header .stc-mobile-recharge-card { color: #8b5cf6; background: #f4efff; }
    .stc-header .stc-mobile-recharge-link > span:last-child {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .stc-header .stc-mobile-recharge-link strong {
        color: inherit;
        font-size: 12.5px;
        line-height: 1.2;
        font-weight: 700;
    }
    .stc-header .stc-mobile-recharge-link small {
        color: #8a97a9;
        font-size: 10.5px;
        line-height: 1.2;
        font-weight: 500;
    }

    .stc-header .stc-mobile-menu-section-title {
        margin: 18px 10px 7px;
        color: #9aa6b6;
        font-family: inherit;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .stc-header .stc-mobile-drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 10040;
        display: block !important;
        padding: 0;
        border: 0;
        background: rgba(15,23,42,.28);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .22s ease, visibility .22s ease;
        -webkit-backdrop-filter: blur(1px);
        backdrop-filter: blur(1px);
    }
    .stc-header .stc-mobile-drawer-backdrop.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

@media (max-width: 575.98px) {
    .stc-header .stc-mobile-drawer {
        width: min(320px, 92vw) !important;
        max-width: 320px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .stc-header .stc-mobile-head {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
    .stc-header .stc-mobile-menu-link.is-active::before { left: -16px; }
}

/* Touch tablet override: giữ drawer mới thay vì nav Bootstrap cũ. */
html.stc-touch-nav .stc-header .stc-desktop-menu-v3 { display: none !important; }
html.stc-touch-nav .stc-header .stc-mobile-menu-v3 { display: block !important; }

@media (min-width: 1400px) {
    .stc-header .stc-mobile-menu-v3,
    .stc-header .stc-mobile-drawer-backdrop { display: none !important; }
    .stc-header .stc-desktop-menu-v3 { display: flex !important; }
}


/* ============================================================
   MOBILE DRAWER V3.1 — defensive sizing after escaped-newline fix
   ============================================================ */
@media (max-width: 1399.98px) {
    .stc-header .stc-mobile-menu-v3,
    .stc-header .stc-mobile-menu-v3 * {
        box-sizing: border-box;
    }

    .stc-header .stc-mobile-account-avatar {
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        object-fit: cover !important;
        border-radius: 999px !important;
    }

    .stc-header .stc-mobile-menu-icon,
    .stc-header .stc-mobile-login-icon {
        flex: 0 0 auto !important;
        overflow: hidden;
    }

    .stc-header .stc-mobile-menu-icon svg {
        display: block !important;
        width: 19px !important;
        height: 19px !important;
        min-width: 19px !important;
        max-width: 19px !important;
        min-height: 19px !important;
        max-height: 19px !important;
        flex: 0 0 19px !important;
    }

    .stc-header .stc-mobile-login-icon svg {
        display: block !important;
        width: 19px !important;
        height: 19px !important;
        max-width: 19px !important;
        max-height: 19px !important;
    }

    .stc-header .stc-mobile-close svg {
        display: block !important;
        width: 17px !important;
        height: 17px !important;
        max-width: 17px !important;
        max-height: 17px !important;
    }

    .stc-header .stc-mobile-menu-link {
        display: grid !important;
        grid-template-columns: 24px minmax(0, 1fr) !important;
        align-items: center !important;
        min-height: 44px !important;
    }

    .stc-header .stc-mobile-menu-link > span:last-child {
        min-width: 0;
        font-family: inherit !important;
        font-size: 13.5px !important;
        line-height: 1.25 !important;
    }
}

/* Header profile menu V4 - Lucide icon polish */
.stc-header .stc-profile-menu .dropdown-item .stc-profile-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px;
    flex: 0 0 18px;
    display: block;
    color: #7f8da1;
    stroke: currentColor;
    transition: color .18s ease, transform .18s ease;
}
.stc-header .stc-profile-menu .dropdown-item {
    gap: 11px;
    min-height: 42px;
    padding: 9px 10px !important;
}
.stc-header .stc-profile-menu .dropdown-item:hover .stc-profile-icon {
    color: var(--stc-blue);
    transform: translateX(1px);
}
.stc-header .stc-profile-menu .stc-logout-link .stc-profile-icon {
    color: #9aa5b4;
}
.stc-header .stc-profile-menu .stc-logout-link:hover .stc-profile-icon {
    color: #dc2626;
}
html[data-stc-theme="dark"] .stc-header .stc-profile-menu .dropdown-item .stc-profile-icon {
    color: #94a3b8;
}
html[data-stc-theme="dark"] .stc-header .stc-profile-menu .dropdown-item:hover .stc-profile-icon {
    color: #60a5fa;
}

/* ===== Desktop navigation V5 — refined from the supplied F12 reference ===== */
@media (min-width: 1400px) {
    .stc-header .stc-desktop-menu-v5 {
        height: 68px;
        gap: 19px;
        align-items: stretch;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .stc-header .stc-desktop-menu-v5 > .nav-item {
        position: relative;
        display: flex;
        align-items: center;
        height: 68px;
    }

    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 68px;
        padding: 0 2px !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #5b6677 !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        line-height: 1;
        letter-spacing: 0;
        transition: color .18s ease !important;
    }

    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 2px;
        border-radius: 999px 999px 0 0;
        background: var(--stc-blue);
        transform: translateX(-50%);
        transition: width .2s ease;
    }

    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link:hover,
    .stc-header .stc-desktop-menu-v5 > .nav-item.show > .nav-link,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link[aria-expanded="true"],
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link.active {
        color: #111827 !important;
        background: transparent !important;
    }

    /* Blue underline is interaction-only: active page has no permanent line. */
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link:hover::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item.show > .nav-link::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link[aria-expanded="true"]::before {
        width: 100%;
    }

    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link.active:not(:hover):not([aria-expanded="true"])::before {
        width: 0;
    }

    .stc-header .stc-desktop-menu-v5 .stc-chevron {
        width: 13px;
        height: 13px;
        margin-top: 1px;
        color: #8a95a6;
        stroke-width: 2;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-menu {
        top: calc(100% - 2px) !important;
        min-width: 262px;
        padding: 8px !important;
        margin-top: 0 !important;
        border: 1px solid #e7ebf1 !important;
        border-radius: 14px !important;
        background: rgba(255,255,255,.99) !important;
        box-shadow: 0 18px 48px rgba(17,24,39,.12) !important;
        overflow: hidden;
    }

    .stc-header .stc-desktop-menu-v5 .stc-desktop-products-menu {
        width: 292px;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 11px;
        min-height: 50px;
        padding: 7px 8px !important;
        border-radius: 10px;
        color: #334155 !important;
        white-space: normal;
        transition: background-color .16s ease, color .16s ease, transform .16s ease;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-menu .dropdown-item:hover {
        color: #111827 !important;
        background: #f7f9fc !important;
        transform: translateX(1px);
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
        background: #f4f6f9;
        color: #718096;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-icon svg {
        width: 17px;
        height: 17px;
        display: block;
        stroke: currentColor;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-icon-blue { background: #eef6ff; color: #1677ff; }
    .stc-header .stc-desktop-menu-v5 .stc-dropdown-icon-purple { background: #f6efff; color: #9b51e0; }
    .stc-header .stc-desktop-menu-v5 .stc-dropdown-icon-green { background: #ecfbf5; color: #10b981; }
    .stc-header .stc-desktop-menu-v5 .stc-dropdown-icon-orange { background: #fff7e8; color: #f59e0b; }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-copy {
        min-width: 0;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-copy strong {
        color: #1f2937;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-copy small {
        color: #98a2b3;
        font-size: 10.5px;
        font-weight: 400;
        line-height: 1.25;
    }

    .stc-header .stc-desktop-menu-v5 .stc-dropdown-label {
        padding: 8px 9px 4px;
        color: #a0a8b5;
        font-size: 9.5px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: .055em;
        text-transform: uppercase;
    }
}

/* Slightly tighter layout around the 1400px breakpoint so nav and actions never collide. */
@media (min-width: 1400px) and (max-width: 1535.98px) {
    .stc-header .stc-desktop-menu-v5 { gap: 12px; }
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link { font-size: 13px !important; }
    .stc-header .stc-live-search { width: 185px; flex-basis: 185px; }
}

/* Desktop nav V7 — underline appears only while the whole nav item is hovered. */
@media (min-width: 1400px) {
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link::before {
        width: 0 !important;
    }
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link.active::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item.show > .nav-link::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link[aria-expanded="true"]::before {
        width: 0 !important;
    }
    .stc-header .stc-desktop-menu-v5 > .nav-item:hover > .nav-link::before {
        width: 100% !important;
    }
}


/* ============================================================
   Header navigation V8 — final cleanup
   1) Desktop nav is never rendered inside the mobile drawer.
   2) Remove the blue underline completely (active, hover, open).
   ============================================================ */
@media (max-width: 1399.98px) {
    .stc-header .stc-desktop-menu-v5 {
        display: none !important;
    }
}
html.stc-touch-nav .stc-header .stc-desktop-menu-v5,
html.stc-tablet-mobile-ui .stc-header .stc-desktop-menu-v5,
html.stc-tablet-layout .stc-header .stc-desktop-menu-v5 {
    display: none !important;
}

@media (min-width: 1400px) {
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link:hover,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link.active,
    .stc-header .stc-desktop-menu-v5 > .nav-item.show > .nav-link,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link[aria-expanded="true"] {
        border-bottom: 0 !important;
        box-shadow: none !important;
        text-decoration: none !important;
    }

    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link:hover::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link.active::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item:hover > .nav-link::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item.show > .nav-link::before,
    .stc-header .stc-desktop-menu-v5 > .nav-item > .nav-link[aria-expanded="true"]::before {
        content: none !important;
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }
}

/* ==========================================================
   v46 — giữ logo GIF có tỷ lệ/canvas rộng hiển thị đủ lớn
   Chỉ áp dụng cho GIF để không làm thay đổi kích thước logo PNG/JPG hiện tại.
   ========================================================== */
.stc-header .stc-header-logo.stc-header-logo-gif {
    height: 48px !important;
    max-width: 250px !important;
    transform: scale(1.08);
    transform-origin: left center;
}
@media (min-width: 1400px) {
    .stc-header .stc-navbar { min-height: 74px; }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 42px !important;
        max-width: 220px !important;
        transform: scale(1.05);
    }
}
@media (max-width: 575.98px) {
    /* GIF thường có canvas rộng nên 34px làm phần hình thật nhìn rất bé trên mobile. */
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 42px !important;
        max-width: 215px !important;
        transform: scale(1.04);
        transform-origin: left center;
    }

    .stc-header .stc-mobile-head .stc-header-logo.stc-header-logo-gif {
        height: 42px !important;
        max-width: 215px !important;
    }
}

/* ==========================================================
   v49 — tăng kích thước logo toàn bộ header (PC/tablet/mobile/drawer)
   Không chỉ riêng GIF: mọi logo website dùng cùng một kích thước hiển thị
   lớn hơn để tránh trường hợp URL/định dạng khiến class GIF không được áp dụng.
   ========================================================== */
.stc-header .stc-header-logo,
.stc-header .stc-header-logo.stc-header-logo-gif {
    width: auto !important;
    height: 64px !important;
    max-width: 340px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    transform: none !important;
}

@media (min-width: 1400px) {
    .stc-header .stc-navbar {
        min-height: 88px !important;
    }
}

@media (min-width: 768px) and (max-width: 1399.98px) {
    .stc-header .stc-navbar {
        min-height: 78px !important;
    }
    .stc-header .stc-header-logo,
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 58px !important;
        max-height: 58px !important;
        max-width: 310px !important;
    }
    .stc-header .stc-mobile-head {
        min-height: 88px !important;
    }
    .stc-header .stc-mobile-head .stc-header-logo,
    .stc-header .stc-mobile-head .stc-header-logo.stc-header-logo-gif {
        height: 58px !important;
        max-height: 58px !important;
        max-width: 300px !important;
    }
}

@media (max-width: 767.98px) {
    .stc-header .stc-navbar {
        min-height: 72px !important;
    }
    .stc-header .stc-header-logo,
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 52px !important;
        max-height: 52px !important;
        max-width: min(280px, 64vw) !important;
    }
    .stc-header .stc-mobile-head {
        min-height: 84px !important;
    }
    .stc-header .stc-mobile-head .stc-header-logo,
    .stc-header .stc-mobile-head .stc-header-logo.stc-header-logo-gif {
        height: 54px !important;
        max-height: 54px !important;
        max-width: min(280px, 72vw) !important;
    }
}

@media (max-width: 390px) {
    .stc-header .stc-header-logo,
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 48px !important;
        max-height: 48px !important;
        max-width: 245px !important;
    }
    .stc-header .stc-mobile-head .stc-header-logo,
    .stc-header .stc-mobile-head .stc-header-logo.stc-header-logo-gif {
        height: 50px !important;
        max-height: 50px !important;
        max-width: 250px !important;
    }
}

/* ==========================================================
   v52 — thu gọn lại thanh điều hướng sau khi v49 tăng logo quá mức.
   Giữ logo đủ lớn nhưng không dùng chiều cao logo để kéo navbar cao theo.
   ========================================================== */
@media (min-width: 1400px) {
    .stc-header .stc-navbar {
        min-height: 72px !important;
    }

    .stc-header .stc-header-logo,
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 46px !important;
        max-height: 46px !important;
        max-width: 250px !important;
        object-fit: contain !important;
        transform: scale(1.06) !important;
        transform-origin: left center !important;
    }
}

@media (min-width: 768px) and (max-width: 1399.98px) {
    .stc-header .stc-navbar {
        min-height: 68px !important;
    }

    .stc-header .stc-header-logo,
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 44px !important;
        max-height: 44px !important;
        max-width: 235px !important;
        transform: scale(1.04) !important;
        transform-origin: left center !important;
    }

    .stc-header .stc-mobile-head {
        min-height: 70px !important;
    }

    .stc-header .stc-mobile-head .stc-header-logo,
    .stc-header .stc-mobile-head .stc-header-logo.stc-header-logo-gif {
        height: 46px !important;
        max-height: 46px !important;
        max-width: 245px !important;
        transform: none !important;
    }
}

@media (max-width: 767.98px) {
    .stc-header .stc-navbar {
        min-height: 64px !important;
    }

    .stc-header .stc-header-logo,
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 42px !important;
        max-height: 42px !important;
        max-width: min(225px, 58vw) !important;
        transform: none !important;
    }

    .stc-header .stc-mobile-head {
        min-height: 68px !important;
    }

    .stc-header .stc-mobile-head .stc-header-logo,
    .stc-header .stc-mobile-head .stc-header-logo.stc-header-logo-gif {
        height: 44px !important;
        max-height: 44px !important;
        max-width: min(235px, 68vw) !important;
        transform: none !important;
    }
}

@media (max-width: 390px) {
    .stc-header .stc-header-logo,
    .stc-header .stc-header-logo.stc-header-logo-gif {
        height: 40px !important;
        max-height: 40px !important;
        max-width: 205px !important;
    }
}

/* =========================================================
   V93 — Coupon icon cạnh Favorites.
   Chỉ scope trong .stc-header; không tác động account pages.
   ========================================================= */
.stc-header .stc-coupon-popover{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    visibility:visible!important;
    opacity:1!important;
}
.stc-header .stc-coupon-toggle{
    display:inline-flex!important;
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    color:#59677a!important;
    cursor:pointer!important;
}
.stc-header .stc-coupon-toggle:hover,
.stc-header .stc-coupon-toggle[aria-expanded="true"]{
    color:var(--stc-blue)!important;
    background:var(--stc-soft-blue)!important;
}
.stc-header .stc-coupon-toggle>svg{display:block!important;width:19px!important;height:19px!important;stroke:currentColor!important;fill:none!important}
.stc-header .stc-coupon-count{
    position:absolute!important;top:-3px!important;right:-3px!important;z-index:2!important;
    min-width:18px!important;height:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;
    padding:0 4px!important;border:2px solid #fff!important;border-radius:999px!important;
    background:#1677ff!important;color:#fff!important;font:700 9px/1 Roboto,Arial,sans-serif!important;
}
.stc-header .stc-coupon-panel[hidden]{display:none!important}
.stc-header .stc-coupon-panel{
    position:absolute!important;z-index:1095!important;top:calc(100% + 9px)!important;right:0!important;
    width:min(390px,calc(100vw - 24px))!important;overflow:hidden!important;
    border:1px solid #e4eaf2!important;border-radius:15px!important;background:#fff!important;
    box-shadow:0 18px 48px rgba(17,24,39,.14)!important;
}
.stc-header .stc-coupon-panel-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:12px 13px!important;border-bottom:1px solid #edf1f6!important}
.stc-header .stc-coupon-panel-head>div{display:flex!important;flex-direction:column!important;min-width:0!important}
.stc-header .stc-coupon-panel-head strong{color:#182233!important;font-size:13.5px!important;font-weight:700!important;line-height:1.25!important}
.stc-header .stc-coupon-panel-head span{margin-top:2px!important;color:#8492a6!important;font-size:10px!important;font-weight:500!important}
.stc-header .stc-coupon-panel-head em{font-style:normal!important;padding:4px 7px!important;border-radius:999px!important;background:#eef5ff!important;color:#1677ff!important;font-size:9.5px!important;font-weight:700!important;white-space:nowrap!important}
.stc-header .stc-coupon-panel-list{max-height:min(420px,58vh)!important;overflow:auto!important;padding:7px!important;scrollbar-width:none!important}
.stc-header .stc-coupon-panel-list::-webkit-scrollbar{display:none!important}
.stc-header .stc-coupon-row{display:flex!important;align-items:center!important;gap:9px!important;padding:9px!important;border-radius:11px!important}
.stc-header .stc-coupon-row:hover{background:#f7f9fc!important}
.stc-header .stc-coupon-row-icon{width:34px!important;height:34px!important;flex:0 0 34px!important;display:flex!important;align-items:center!important;justify-content:center!important;border:1px solid #d6e7ff!important;border-radius:9px!important;background:#eef5ff!important;color:#1677ff!important}
.stc-header .stc-coupon-row-icon svg{width:16px!important;height:16px!important}
.stc-header .stc-coupon-row-copy{flex:1 1 auto!important;min-width:0!important}
.stc-header .stc-coupon-row-copy>div{display:flex!important;align-items:center!important;gap:7px!important;min-width:0!important}
.stc-header .stc-coupon-row-copy strong{overflow:hidden!important;color:#182233!important;font-size:12px!important;font-weight:700!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.stc-header .stc-coupon-row-copy b{flex:0 0 auto!important;padding:3px 6px!important;border-radius:7px!important;background:#ecfdf3!important;color:#16a34a!important;font-size:9px!important;font-weight:700!important}
.stc-header .stc-coupon-row-copy small{display:block!important;margin-top:3px!important;overflow:hidden!important;color:#8492a6!important;font-size:9.5px!important;font-weight:500!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.stc-header .stc-coupon-copy-btn{height:31px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;flex:0 0 auto!important;padding:0 8px!important;border:1px solid #dce5f0!important;border-radius:9px!important;background:#fff!important;color:#526174!important;font-size:10px!important;font-weight:600!important;cursor:pointer!important}
.stc-header .stc-coupon-copy-btn svg{width:13px!important;height:13px!important}
.stc-header .stc-coupon-copy-btn:hover{border-color:#b8d6ff!important;background:#f6faff!important;color:#1677ff!important}
.stc-header .stc-coupon-copy-btn.is-copied{border-color:#bbf7d0!important;background:#f0fdf4!important;color:#16a34a!important}
.stc-header .stc-coupon-panel-empty{min-height:145px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;padding:22px!important;text-align:center!important}
.stc-header .stc-coupon-panel-empty svg{width:28px!important;height:28px!important;margin-bottom:9px!important;color:#9aa8ba!important}
.stc-header .stc-coupon-panel-empty strong{color:#26364a!important;font-size:12px!important;font-weight:700!important}
.stc-header .stc-coupon-panel-empty span{margin-top:4px!important;color:#8b98aa!important;font-size:10px!important;font-weight:500!important}
@media(max-width:575.98px){
    .stc-header .stc-coupon-popover{width:36px!important;height:36px!important;flex-basis:36px!important}
    .stc-header .stc-coupon-toggle{width:36px!important;height:36px!important;flex-basis:36px!important}
    .stc-header .stc-coupon-panel{position:fixed!important;top:68px!important;right:12px!important;left:12px!important;width:auto!important}
    .stc-header .stc-coupon-copy-btn{width:31px!important;padding:0!important}
    .stc-header .stc-coupon-copy-btn span{display:none!important}
}

/* ============================================================
   V97 — MOBILE HEADER: bell + quick search visible without drawer
   Chỉ bổ sung mobile, không chạm layout account/dashboard.
   ============================================================ */
@media (max-width: 575.98px) {
    .stc-header .stc-navbar {
        min-height: 62px !important;
    }
    .stc-header .stc-header-shell {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .stc-header .stc-header-logo {
        max-width: 142px !important;
        height: 31px !important;
    }
    .stc-header .stc-header-actions {
        gap: 2px !important;
    }
    .stc-header .stc-icon-btn,
    .stc-header button.stc-icon-btn,
    .stc-header .stc-coupon-page-link {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
        border-radius: 10px !important;
    }
    .stc-header .stc-icon-btn svg,
    .stc-header .stc-coupon-page-link svg {
        width: 18px !important;
        height: 18px !important;
    }
    .stc-header .stc-user-btn {
        min-height: 34px !important;
        padding: 0 !important;
    }
    .stc-header .stc-user-avatar {
        width: 33px !important;
        height: 33px !important;
    }
    .stc-header .stc-menu-toggle {
        width: 34px !important;
        height: 34px !important;
        flex: 0 0 34px !important;
    }

    /* Bell luôn hiện trên điện thoại thay vì bị Bootstrap d-none ẩn. */
    .stc-header .stc-activity-dropdown {
        display: block !important;
        position: relative !important;
        flex: 0 0 34px !important;
    }
    .stc-header .stc-activity-dropdown .stc-activity-menu.dropdown-menu {
        position: fixed !important;
        top: 58px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(510px, calc(100dvh - 78px)) !important;
        margin: 0 !important;
        overflow: auto !important;
        transform: none !important;
        z-index: 12050 !important;
    }

    /* Search nằm ngay dưới hàng icon; không cần mở hamburger. */
    .stc-header .stc-mobile-quick-search {
        position: relative;
        z-index: 10020;
        display: block !important;
        width: 100%;
        padding: 0 12px 10px;
        background: rgba(255,255,255,.97);
    }
    .stc-header .stc-mobile-quick-search .stc-mobile-search {
        display: flex !important;
        position: relative;
        align-items: center;
        width: 100%;
        height: 40px;
        margin: 0 !important;
        border: 1px solid #e2e8f0;
        border-radius: 11px;
        background: #f6f8fb;
        transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
    }
    .stc-header .stc-mobile-quick-search .stc-mobile-search:focus-within {
        border-color: #b8d6ff;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(22,119,255,.07);
    }
    .stc-header .stc-mobile-quick-search .stc-search-icon {
        position: absolute;
        left: 12px;
        width: 16px;
        height: 16px;
        color: #8794a8;
        pointer-events: none;
    }
    .stc-header .stc-mobile-quick-search input[type="search"] {
        width: 100%;
        height: 100%;
        padding: 0 38px 0 37px;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #334155;
        font-family: Roboto, Arial, sans-serif !important;
        font-size: 12.5px !important;
        font-weight: 400 !important;
    }
    .stc-header .stc-mobile-quick-search input::placeholder { color:#94a3b8; }
    .stc-header .stc-mobile-quick-search .stc-search-clear {
        right: 7px;
    }
    .stc-header .stc-mobile-quick-search .stc-search-panel {
        position: absolute !important;
        top: calc(100% - 3px) !important;
        right: 12px !important;
        left: 12px !important;
        width: auto !important;
        max-height: min(430px, 56vh) !important;
        z-index: 12040 !important;
    }
}

@media (min-width: 576px) {
    .stc-header .stc-mobile-quick-search { display: none !important; }
}

/* =========================================================
   V98 — Mobile search on demand
   Chỉ hiện icon kính lúp; bấm mới mở field tìm kiếm.
   ========================================================= */
.stc-header .stc-mobile-search-toggle{display:none!important}
@media (max-width:575px){
    .stc-header .stc-mobile-search-toggle{
        display:inline-flex!important;
        width:36px!important;
        height:36px!important;
        flex:0 0 36px!important;
        align-items:center!important;
        justify-content:center!important;
        border:0!important;
        border-radius:11px!important;
        background:transparent!important;
        color:#526174!important;
        padding:0!important;
    }
    .stc-header .stc-mobile-search-toggle>svg{width:19px!important;height:19px!important;display:block!important}
    .stc-header .stc-mobile-search-toggle:hover,
    .stc-header .stc-mobile-search-toggle.is-active{background:#eef5ff!important;color:#1677ff!important}

    .stc-header .stc-mobile-quick-search[hidden]{display:none!important}
    .stc-header .stc-mobile-quick-search{
        display:block!important;
        padding:0 12px 10px!important;
        background:#fff!important;
        border-top:0!important;
        animation:stcMobileSearchDrop .16s ease-out both;
    }
    .stc-header .stc-mobile-quick-search .stc-mobile-search{
        width:100%!important;
        height:40px!important;
        margin:0!important;
        border:1px solid #dce5f0!important;
        border-radius:12px!important;
        background:#f8fafc!important;
        box-shadow:none!important;
    }
    .stc-header .stc-mobile-quick-search .stc-mobile-search:focus-within{
        border-color:#93c5fd!important;
        background:#fff!important;
        box-shadow:0 0 0 3px rgba(59,130,246,.08)!important;
    }
    @keyframes stcMobileSearchDrop{
        from{opacity:0;transform:translateY(-5px)}
        to{opacity:1;transform:translateY(0)}
    }
}

/* ============================================================
   V105 — Mobile header spacing + unified red badges
   Giữ đủ search / yêu thích / coupon / chuông nhưng không ép sát avatar.
   ============================================================ */
.stc-header .stc-action-badge,
.stc-header .stc-coupon-count{
    background:#ef4444!important;
    color:#fff!important;
}

@media (max-width:575.98px){
    .stc-header .stc-header-shell{
        padding-left:10px!important;
        padding-right:10px!important;
    }
    .stc-header .stc-navbar{
        min-height:60px!important;
        gap:4px!important;
    }
    .stc-header .stc-header-logo{
        height:29px!important;
        max-width:126px!important;
    }
    .stc-header .stc-header-actions{
        gap:3px!important;
        min-width:0!important;
    }
    .stc-header .stc-mobile-search-toggle,
    .stc-header .stc-icon-btn,
    .stc-header button.stc-icon-btn,
    .stc-header .stc-coupon-page-link{
        width:31px!important;
        height:31px!important;
        flex:0 0 31px!important;
        border-radius:9px!important;
    }
    .stc-header .stc-mobile-search-toggle>svg,
    .stc-header .stc-icon-btn svg,
    .stc-header .stc-coupon-page-link svg{
        width:17px!important;
        height:17px!important;
    }
    .stc-header .stc-activity-dropdown{
        flex:0 0 31px!important;
        width:31px!important;
        margin:0!important;
    }
    .stc-header .stc-user-dropdown{
        margin-left:4px!important;
        flex:0 0 32px!important;
    }
    .stc-header .stc-user-btn{
        width:32px!important;
        height:32px!important;
        min-height:32px!important;
        padding:0!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
    }
    .stc-header .stc-user-avatar{
        width:32px!important;
        height:32px!important;
        flex:0 0 32px!important;
    }
    .stc-header .stc-menu-toggle{
        width:32px!important;
        height:32px!important;
        flex:0 0 32px!important;
        margin-left:1px!important;
    }
    .stc-header .stc-action-badge,
    .stc-header .stc-coupon-count,
    .stc-header .stc-notification-badge{
        top:-5px!important;
        right:-5px!important;
        min-width:17px!important;
        height:17px!important;
        padding:0 4px!important;
        font-size:8.5px!important;
        border-width:2px!important;
    }
}

/* ============================================================
   V105 — iPad / Surface bottom bar
   Dịch vụ và Nạp tiền là <button>, nên phải reset giống hệt <a>.
   Không scale/phóng to item active và không dùng font-weight quá đậm.
   ============================================================ */
@media (min-width:768px) and (max-width:1600px){
    html.stc-tablet-mobile-ui .mobile-bottom-nav > a,
    html.stc-tablet-mobile-ui .mobile-bottom-nav > button{
        -webkit-appearance:none!important;
        appearance:none!important;
        position:relative!important;
        min-width:0!important;
        height:100%!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:3px!important;
        margin:0!important;
        padding:4px 2px!important;
        border:0!important;
        border-radius:12px!important;
        outline:0!important;
        background:transparent!important;
        color:#7f8da1!important;
        text-decoration:none!important;
        font-family:Roboto,Arial,sans-serif!important;
        font-size:10.5px!important;
        font-weight:500!important;
        line-height:1.1!important;
        letter-spacing:0!important;
        box-shadow:none!important;
        transform:none!important;
        cursor:pointer!important;
        -webkit-tap-highlight-color:transparent!important;
    }
    html.stc-tablet-mobile-ui .mobile-bottom-nav > a:active,
    html.stc-tablet-mobile-ui .mobile-bottom-nav > button:active{
        transform:none!important;
    }
    html.stc-tablet-mobile-ui .mobile-bottom-nav .mobile-bottom-nav-icon{
        width:30px!important;
        height:28px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        border-radius:9px!important;
        background:transparent!important;
        color:inherit!important;
        transform:none!important;
    }
    html.stc-tablet-mobile-ui .mobile-bottom-nav .mobile-bottom-nav-icon svg{
        width:21px!important;
        height:21px!important;
        display:block!important;
        stroke:currentColor!important;
        transform:none!important;
    }
    html.stc-tablet-mobile-ui .mobile-bottom-nav .mobile-bottom-nav-label{
        display:block!important;
        color:inherit!important;
        font:500 10.5px/1.1 Roboto,Arial,sans-serif!important;
        white-space:nowrap!important;
        transform:none!important;
    }
    html.stc-tablet-mobile-ui .mobile-bottom-nav > a.active,
    html.stc-tablet-mobile-ui .mobile-bottom-nav > button.active{
        color:#1677ff!important;
        font-weight:600!important;
        background:transparent!important;
        transform:none!important;
    }
    html.stc-tablet-mobile-ui .mobile-bottom-nav > a.active .mobile-bottom-nav-icon,
    html.stc-tablet-mobile-ui .mobile-bottom-nav > button.active .mobile-bottom-nav-icon{
        color:#1677ff!important;
        background:#eef6ff!important;
        transform:none!important;
    }
    html.stc-tablet-mobile-ui .mobile-bottom-nav > a.active .mobile-bottom-nav-label,
    html.stc-tablet-mobile-ui .mobile-bottom-nav > button.active .mobile-bottom-nav-label{
        font-weight:600!important;
        transform:none!important;
    }
}


/* ============================================================
   V106 — Mobile action spacing
   Tách search / yêu thích / coupon / thông báo khỏi avatar rõ hơn.
   ============================================================ */
@media (max-width:575.98px){
    .stc-header .stc-header-actions{
        gap:6px!important;
    }
    .stc-header .stc-mobile-search-toggle,
    .stc-header .stc-icon-btn,
    .stc-header button.stc-icon-btn,
    .stc-header .stc-coupon-page-link{
        width:30px!important;
        height:30px!important;
        flex:0 0 30px!important;
    }
    .stc-header .stc-activity-dropdown{
        width:30px!important;
        flex:0 0 30px!important;
    }
    .stc-header .stc-user-dropdown{
        margin-left:7px!important;
    }
    .stc-header .stc-header-logo{
        max-width:118px!important;
    }
}
@media (max-width:390px){
    .stc-header .stc-header-actions{gap:4px!important}
    .stc-header .stc-user-dropdown{margin-left:5px!important}
    .stc-header .stc-header-logo{max-width:105px!important}
}

/* ============================================================
   V119 — Guest mobile header spacing
   Khi chưa đăng nhập: tách login khỏi cụm icon và hamburger rõ hơn.
   Không ảnh hưởng header của tài khoản đã đăng nhập.
   ============================================================ */
@media (max-width:575.98px){
    .stc-header .stc-header-actions .stc-login-btn{
        flex:0 0 auto!important;
        height:32px!important;
        min-height:32px!important;
        margin-left:7px!important;
        margin-right:2px!important;
        padding:0 12px!important;
        border-radius:10px!important;
        font-size:11.5px!important;
        font-weight:700!important;
        line-height:32px!important;
        white-space:nowrap!important;
    }
    .stc-header .stc-header-actions .stc-login-btn + .stc-menu-toggle{
        margin-left:6px!important;
    }
}
@media (max-width:390px){
    .stc-header .stc-header-actions .stc-login-btn{
        margin-left:5px!important;
        margin-right:1px!important;
        padding:0 9px!important;
        font-size:10.5px!important;
    }
    .stc-header .stc-header-actions .stc-login-btn + .stc-menu-toggle{
        margin-left:4px!important;
    }
}