/* Frontstore - Mặt tiền (clone từ gamehost resources/css/app.css + layout) */
/* Tailwind được load qua CDN trong layout; file này cho custom bổ sung */

@theme {
    --font-sans: 'Reddit Sans', ui-sans-serif, system-ui, sans-serif;
    --color-primary-900: #283658;
    --color-primary-700: #3A4A70;
    --color-primary-500: #5C6FA3;
    --color-gray-50: #F8F9FB;
    --color-gray-100: #EEF1F5;
    --color-gray-300: #CBD2DC;
    --color-gray-600: #4A5568;
    --color-gray-900: #0F172A;
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-error: #DC2626;
}

/* Logo header — cỡ nền h-14 / md:h-16, nhân với --logo-scale từ cấu hình admin */
.site-header-logo {
    height: calc(3.5rem * var(--logo-scale, 1));
    width: auto;
    object-fit: contain;
}
@media (min-width: 768px) {
    .site-header-logo {
        height: calc(4rem * var(--logo-scale, 1));
    }
}

@media (max-width: 767.98px) {
    .www-main-header-row {
        align-items: center;
    }
    .www-main-header-brand {
        min-width: 0;
    }
    .www-main-header-brand > a {
        min-width: 0;
    }
    .site-header-logo {
        height: calc(2.625rem * var(--logo-scale, 1));
        max-width: min(52vw, 11.25rem);
        width: auto;
        object-fit: contain;
        object-position: left center;
        display: block;
    }
}

.animate-marquee {
    display: inline-flex;
    animation: marquee 25s linear infinite;
}
.animate-marquee:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Header: các <nav> xếp chồng (padding ngang: px-4 trong site-render.js) */
#site-header-wrap {
    display: flex;
    flex-direction: column;
}
#site-header-wrap > nav + nav {
    margin-top: 0;
}

/* Header một hàng: logo | catalog | CTA (.www-simple-header trong site-render.js) */
#site-header-wrap .www-simple-catalog-inner .nav-sub-trigger {
    font-size: 0.875rem;
    padding: 0.35rem 0.55rem;
}
@media (min-width: 768px) {
    #site-header-wrap .www-simple-catalog-inner .nav-sub-trigger {
        font-size: 0.9375rem;
        padding: 0.4rem 0.7rem;
    }
}

#site-header-wrap .www-simple-header-cta-icon {
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0.95;
}
@media (min-width: 640px) {
    #site-header-wrap .www-simple-header-cta-icon {
        font-size: 1.125rem;
    }
}

/* Nav bar phụ — nhóm sản phẩm (dropdown) */
.nav-sub {
    background: #f8f9fb;
    border-bottom: 1px solid #eef1f5;
    position: relative;
    overflow: visible;
}
.nav-sub-inner {
    padding: 0.5rem 0;
    position: relative;
    min-height: 0;
    display: flex;
    align-items: center;
    overflow: visible;
    line-height: 1.25;
}
.nav-sub-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #283658;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.15s;
    line-height: 1.25;
    overflow: visible;
    min-height: 0;
}
.nav-sub-trigger .nav-sub-flag { width: 24px; height: 17px; min-height: 17px; flex-shrink: 0; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; line-height: 0; overflow: visible; }
.nav-sub-trigger .nav-sub-flag.nav-sub-flag-emoji { font-size: 1.125rem; line-height: 1; width: auto; height: auto; min-height: 0; }
/* flag-icons (.fi) — tránh emoji hỏng trong font hệ thống */
.nav-sub-flag.nav-sub-flag--fi {
    display: inline-block;
    background-size: cover;
    background-position: 50% 50%;
    line-height: 0;
    flex-shrink: 0;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.07);
}
.nav-sub-trigger .nav-sub-flag.nav-sub-flag--fi {
    width: 22px;
    height: 16px;
}
.nav-sub-dd-name .nav-sub-flag.nav-sub-flag--fi {
    width: 1.125em;
    height: 0.84em;
    vertical-align: -0.06em;
}
.www-mob-sub-flag.nav-sub-flag--fi {
    width: 1.125rem;
    height: 0.84rem;
    flex-shrink: 0;
    margin-right: 0.05rem;
}
.nav-sub-trigger:hover { background: rgba(40,54,88,.08); }
.nav-sub-trigger i.fa-chevron-down { font-size: 0.8125rem; }
/*
 * Mega menu navbar (brand navy) — đồng bộ STYLE.md:
 *   primary: #1a326b ; primary-dark: #152a54 ; primary-tint: #e8ecf4
 * Layout subcategory: card grid 2-3 cột, mỗi card gồm icon-box + body
 *   (title + desc 2-line + footer optional: meter "Tốc độ" / chips ✓).
 */
/* Panel mega menu: chiều ngang bám nội dung — không min-width 640px cố định */
.nav-sub-dropdown {
    position: absolute; left: 0; top: 100%; margin-top: 6px;
    width: max-content;
    min-width: 0;
    max-width: min(960px, calc(100vw - 32px));
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15,25,60,.12);
    opacity: 0; visibility: hidden;
    transition: opacity .15s, visibility .15s;
    z-index: 60; padding: 0.75rem;
    box-sizing: border-box;
}
.nav-sub-dropdown.nav-sub-dropdown--no-icons {
    min-width: 0;
}
/* Variant: split (list trái + preview phải) — cần chiều rộng đủ cho 2 cột */
.nav-sub-dropdown.nav-sub-dropdown--mega {
    width: min(820px, calc(100vw - 24px));
    max-width: min(820px, calc(100vw - 24px));
    padding: 0.6rem;
}
.nav-sub-inner > .nav-sub:hover > .nav-sub-dropdown { opacity: 1; visibility: visible; }
.nav-sub-inner > .nav-sub:last-child > .nav-sub-dropdown { left: auto; right: 0; }

/* Grid: tối đa 3 cột desktop; minmax(0, max-content) — cột không có ô co về 0, khung không giãn ngang thừa */
.nav-sub-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 0.35rem 0.5rem;
    width: max-content;
    max-width: min(960px, calc(100vw - 32px));
    box-sizing: border-box;
}
.nav-sub-dropdown-grid.nav-sub-dropdown-grid--no-icons {
    grid-template-columns: repeat(3, minmax(0, max-content));
}
@media (max-width: 1180px) {
    .nav-sub-dropdown-grid { grid-template-columns: repeat(2, minmax(0, max-content)); }
    .nav-sub-dropdown-grid.nav-sub-dropdown-grid--no-icons { grid-template-columns: repeat(2, minmax(0, max-content)); }
}
@media (max-width: 720px) {
    .nav-sub-dropdown {
        width: auto;
        max-width: calc(100vw - 24px);
        min-width: 0;
    }
    .nav-sub-dropdown-grid,
    .nav-sub-dropdown-grid.nav-sub-dropdown-grid--no-icons {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: none;
    }
}

.nav-sub-dropdown-item { position: relative; }

/* Card row: icon-box trái, body phải — không gạch dưới giữa item */
.nav-sub-dd-row {
    display: grid !important;
    grid-template-columns: 64px 1fr;
    align-items: start;
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: #283658;
    transition: background .15s ease, color .15s ease;
    text-decoration: none;
    height: 100%;
}
.nav-sub-dd-row.nav-sub-dd-row--no-icon {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
/* Không có icon: không giữ “cột” ẩn — body trải full, tên không cắt ellipsis một dòng */
.nav-sub-dd-row.nav-sub-dd-row--no-icon .nav-sub-dd-body {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}
.nav-sub-dd-row.nav-sub-dd-row--no-icon .nav-sub-dd-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.nav-sub-dd-row:hover { background: #e8ecf4; color: #152a54; }

.nav-sub-dd-iconbox {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: #e8ecf4; color: #1a326b;
    font-size: 1.35rem; flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.nav-sub-dd-iconbox--img {
    padding: 0;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
}
.nav-sub-dd-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.nav-sub-dd-row:hover .nav-sub-dd-iconbox { background: #1a326b; color: #fff; }
.nav-sub-dd-row:hover .nav-sub-dd-iconbox--img {
    background: transparent;
    border: none;
    box-shadow: none;
    color: inherit;
}

.nav-sub-dd-body { display: flex; flex-direction: column; min-width: 0; gap: 0.22rem; }
.nav-sub-dd-headline {
    display: flex; align-items: center; gap: 0.45rem;
    min-width: 0;
}
.nav-sub-dd-name {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.9375rem; font-weight: 600; color: #0F1B3D;
    line-height: 1.3; flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-sub-dd-flag { flex-shrink: 0; }

/* Badge "highlight" (Tối ưu PageSpeed) — chỉ render khi có item.highlight */
.nav-sub-dd-badge {
    display: inline-flex; align-items: center;
    padding: 0.14rem 0.5rem; border-radius: 999px;
    font-size: 0.65rem; font-weight: 700; line-height: 1.3;
    background: #FFF1EA; color: #C24A1E;
    flex-shrink: 0; white-space: nowrap; letter-spacing: 0.01em;
}

.nav-sub-dd-desc {
    font-size: 0.8125rem; color: #4A5566;
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Footer: meter + chips, ngăn cách dashed line */
.nav-sub-dd-footer {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding-top: 0.4rem; margin-top: 0.15rem;
    border-top: 1px dashed #d6dbe5;
}

/* Meter "Tốc độ: ▓▓▓░░" */
.nav-sub-dd-meter {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.75rem; color: #5A6275;
}
.nav-sub-dd-meter-label { font-weight: 600; flex-shrink: 0; color: #283658; }
.nav-sub-dd-meter-track {
    position: relative;
    flex: 1 1 auto; height: 6px;
    background: #e8ecf4; border-radius: 999px; overflow: hidden;
    max-width: 130px;
}
.nav-sub-dd-meter-fill {
    display: block; height: 100%;
    background: #1a326b;
    border-radius: 999px;
    transition: width .25s ease;
}
.nav-sub-dd-row:hover .nav-sub-dd-meter-fill { background: #152a54; }

/* Feature chips "✓ AMD EPYC | ✓ Vietnix Speed Optimizer" */
.nav-sub-dd-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; color: #1a326b;
}
.nav-sub-dd-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    line-height: 1.3; font-weight: 500;
}
.nav-sub-dd-chip i { font-size: 0.8125rem; color: #1a326b; }
.nav-sub-dd-chip-sep { color: #c9d0de; font-weight: 400; }

/* Nested cấp 3 (hiếm) — fallback simple list */
.nav-sub-dropdown-item-group .nav-sub-dd-row { font-weight: 700; }
.nav-sub-dropdown-nested {
    margin: 0.2rem 0 0.35rem 0.5rem;
    padding-left: 0.65rem;
    border-left: 2px solid #e5e7eb;
}
.nav-sub-dropdown-nested .nav-sub-dd-row {
    grid-template-columns: 40px 1fr;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
}
.nav-sub-dropdown-nested .nav-sub-dd-row.nav-sub-dd-row--no-icon {
    grid-template-columns: minmax(0, 1fr);
}
.nav-sub-dropdown-nested .nav-sub-dd-row.nav-sub-dd-row--no-icon .nav-sub-dd-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.nav-sub-dropdown-nested .nav-sub-dd-iconbox { width: 40px; height: 40px; font-size: 1rem; border-radius: 8px; }
.nav-sub-dropdown-nested .nav-sub-dd-iconbox--img {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
.nav-sub-dropdown-nested .nav-sub-dd-name { font-size: 0.875rem; font-weight: 600; }

.nav-sub-dropdown-desc { font-size: 0.875rem; color: #6B7280; padding: 0.55rem 0.75rem 0; margin-top: 0.35rem; border-top: 1px solid #e5e7eb; line-height: 1.45; }

/* =============================================
   Mega split: nav-sub-mega — list trái + preview pane phải
   ============================================= */
.nav-sub-mega {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* Cột trái — list subcategory */
.nav-sub-mega-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0.25rem 0.25rem 0;
    border-right: 1px solid #EEF1F5;
    min-width: 0;
}
.nav-sub-mega-list-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    color: #283658;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    outline: none;
}
.nav-sub-mega-list-row.is-active,
.nav-sub-mega-list-row:hover,
.nav-sub-mega-list-row:focus-visible {
    background: #e8ecf4;
    color: #152a54;
}
.nav-sub-mega-list-row.is-active .nav-sub-mega-list-chev {
    opacity: 1;
    transform: translateX(2px);
    color: #1a326b;
}
.nav-sub-mega-list-row--nested {
    grid-template-columns: 18px minmax(0, 1fr) auto;
    padding-left: 1.85rem;
    font-size: 0.875rem;
}
.nav-sub-mega-list-row--nested::before {
    content: '';
    width: 8px; height: 1px;
    background: #c9d0de;
    align-self: center;
    justify-self: end;
}

.nav-sub-mega-list-icon {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: #EEF2FA;
    color: #1a326b;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.nav-sub-mega-list-row.is-active .nav-sub-mega-list-icon,
.nav-sub-mega-list-row:hover .nav-sub-mega-list-icon {
    background: #1a326b;
    color: #fff;
}
.nav-sub-mega-list-icon--img {
    background: transparent;
    padding: 4px;
}
.nav-sub-mega-list-row.is-active .nav-sub-mega-list-icon--img,
.nav-sub-mega-list-row:hover .nav-sub-mega-list-icon--img {
    background: transparent;
}
.nav-sub-mega-list-iconimg {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.nav-sub-mega-list-icon--placeholder {
    color: #94a3b8;
    background: #F5F7FB;
}

.nav-sub-mega-list-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.nav-sub-mega-list-title {
    display: inline-flex; align-items: flex-start; gap: 0.35rem;
    font-size: 0.9375rem; font-weight: 600; color: inherit;
    line-height: 1.3;
    min-width: 0;
    width: 100%;
}
.nav-sub-mega-list-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 auto;
}
.nav-sub-mega-list-flag { flex-shrink: 0; margin-top: 0.15rem; }
.nav-sub-mega-list-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
}
.nav-sub-mega-list-sig {
    display: inline-flex; align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.6875rem; font-weight: 600;
    background: #FFF1EA; color: #C24A1E;
    line-height: 1.4;
    flex-shrink: 0;
    white-space: nowrap;
}
.nav-sub-mega-list-chev {
    font-size: 0.7rem;
    color: #94a3b8;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease, color .15s ease;
}
.nav-sub-mega-list-row:hover .nav-sub-mega-list-chev {
    opacity: 1;
}

/* Cột phải — preview pane */
.nav-sub-mega-preview {
    position: relative;
    min-width: 0;
    padding: 0.6rem 0.5rem 0.6rem 0.85rem;
}
.nav-sub-mega-pane {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.45rem;
    min-width: 0;
}
.nav-sub-mega-pane.is-active {
    display: flex;
    animation: navMegaFadeIn .18s ease-out;
}
.nav-sub-mega-pane--link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-radius: 10px;
    padding: 0.5rem 0.6rem;
    margin: -0.5rem -0.6rem;
    transition: background-color .15s ease, box-shadow .15s ease;
}
.nav-sub-mega-pane--link:hover,
.nav-sub-mega-pane--link:focus-visible {
    background: #F5F8FE;
    box-shadow: inset 0 0 0 1px #E0E7F4;
    outline: none;
}
.nav-sub-dropdown a.nav-sub-mega-pane--link {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}
@keyframes navMegaFadeIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-sub-mega-pane-hero {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: linear-gradient(135deg, #EEF2FA 0%, #DCE3F2 100%);
    color: #1a326b;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.nav-sub-mega-pane-hero--img {
    background: transparent;
    padding: 2px;
}
.nav-sub-mega-pane-heroimg {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
}
.nav-sub-mega-pane-hero--placeholder {
    color: #94a3b8;
    background: #F5F7FB;
}
.nav-sub-mega-pane-head {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}
.nav-sub-mega-pane-title {
    font-size: 0.95rem; font-weight: 700; color: #0F1B3D;
    line-height: 1.3;
    margin: 0;
    min-width: 0;
    text-align: left;
    flex: 1 1 auto;
}
.nav-sub-mega-pane-sig {
    display: inline-flex; align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem; font-weight: 600;
    background: #FFF1EA; color: #C24A1E;
    line-height: 1.4;
    white-space: nowrap;
}
.nav-sub-mega-pane-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: #4A5566;
    line-height: 1.5;
    text-align: left;
    width: 100%;
    align-self: stretch;
    box-sizing: border-box;
}

.nav-sub-mega-pane-meter {
    display: flex; flex-direction: column; gap: 0.25rem;
    padding: 0.4rem 0;
    border-radius: 8px;
    background: #F8FAFD;
    border: 1px solid #EEF1F5;
    align-self: stretch;
    min-width: 0;
    box-sizing: border-box;
}
.nav-sub-mega-pane-meter-row {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.8125rem;
    text-align: left;
}
.nav-sub-mega-pane-meter-label {
    font-weight: 600; color: #283658;
    text-align: left;
}
.nav-sub-mega-pane-meter-value {
    font-weight: 700; color: #1a326b; font-variant-numeric: tabular-nums;
    text-align: left;
}
.nav-sub-mega-pane-meter-track {
    position: relative;
    height: 6px;
    background: #E4EAF4;
    border-radius: 999px;
    overflow: hidden;
}
.nav-sub-mega-pane-meter-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #1a326b 0%, #3D5DAA 100%);
    border-radius: 999px;
    transition: width .3s ease;
}

.nav-sub-mega-pane-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 0.25rem;
    align-self: stretch;
    text-align: left;
}
.nav-sub-mega-pane-features li {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem;
    color: #344054;
    line-height: 1.4;
}
.nav-sub-mega-pane-features li i {
    color: #16a34a;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Compact (768-959px): bỏ preview, list full width — vẫn giữ scan ngang */
@media (max-width: 959px) {
    .nav-sub-dropdown.nav-sub-dropdown--mega {
        width: min(440px, calc(100vw - 24px));
        max-width: min(440px, calc(100vw - 24px));
    }
    .nav-sub-mega { grid-template-columns: minmax(0, 1fr); }
    .nav-sub-mega-list { border-right: none; padding-right: 0; }
    .nav-sub-mega-preview { display: none; }
    .nav-sub-mega-list-chev { display: none; }
}

/* Trigger (parent navbar) — icon + label + signature pill */
.nav-sub-trigger-label { display: inline-flex; align-items: center; }
.nav-sub-trigger-icon { font-size: 0.95rem; color: #5C6FA3; flex-shrink: 0; }
.nav-sub-trigger-icon--img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}
.nav-sub-trigger-chevron { font-size: 0.8125rem; }
.nav-sub-trigger-signature {
    display: inline-flex; align-items: center; padding: 0.1rem 0.45rem;
    border-radius: 999px; font-size: 0.6875rem; font-weight: 600;
    background: #EEF2FA; color: #283658; line-height: 1.4;
    flex-shrink: 0;
}
.nav-sub-trigger:hover .nav-sub-trigger-signature { background: #DDE4F2; }

/* Dropdown header (title + desc của parent) */
.nav-sub-dropdown-header {
    padding: 0.5rem 0.6rem 0.65rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid #EEF1F5;
    min-width: 0;
    text-align: left;
}
.nav-sub-dropdown-header-title { font-size: 0.95rem; font-weight: 700; color: #283658; text-align: left; }
.nav-sub-dropdown-header-desc { font-size: 0.8125rem; color: #6B7280; line-height: 1.45; margin-top: 0.2rem; text-align: left; }

/* Mobile drawer — icon + signature pill + desc */
.www-mob-sub-icon { width: 1rem; flex-shrink: 0; color: #5C6FA3; margin-right: 0.4rem; font-size: 0.875rem; }
.www-mob-sub-icon--img {
    width: 1.625rem;
    height: 1.625rem;
    object-fit: contain;
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin-right: 0.4rem;
    flex-shrink: 0;
}
.www-mob-sub-signature {
    display: inline-flex; align-items: center; padding: 0.1rem 0.45rem;
    margin-left: auto; border-radius: 999px; font-size: 0.6875rem;
    font-weight: 600; background: #EEF2FA; color: #283658; line-height: 1.4;
    flex-shrink: 0;
}
.www-mob-sub-desc { display: block; font-size: 0.75rem; color: #6B7280; padding: 0.1rem 0.5rem 0.4rem 1.45rem; line-height: 1.4; }
.www-mob-sub-desc--nested { padding-left: 1.85rem; }
.www-mob-nav-section-desc { font-size: 0.75rem; color: #6B7280; padding: 0 0.6rem 0.45rem; line-height: 1.4; }

/* =============================================
   Mobile hamburger + drawer (đồng bộ webapp/src/www/www-index-inline.css)
   Mặc định: ẩn trên desktop. Hamburger + drawer chỉ xuất hiện ở viewport <= 767.98px.
   ============================================= */

.www-header-hamburger {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1.5px solid #e4eaf4;
    border-radius: 8px;
    cursor: pointer;
    gap: 5px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.www-header-hamburger:hover {
    background: #f4f7fb;
    border-color: #c4cede;
}
.www-header-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #283658;
    border-radius: 2px;
    pointer-events: none;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s;
}
.www-nav-mobile-open .www-header-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.www-nav-mobile-open .www-header-hamburger span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.www-nav-mobile-open .www-header-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.www-header-mobile-drawer {
    display: none;
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #eef1f5;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}
.www-nav-mobile-open .www-header-mobile-drawer {
    display: block;
}
.www-mob-nav-inner {
    max-height: calc(100dvh - 125px - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.5rem 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.www-mob-nav-direct-link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #283658;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.12s;
}
.www-mob-nav-direct-link:hover { background: #f4f7fb; }

.www-mob-nav-section { border-radius: 8px; }
.www-mob-nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #283658;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
.www-mob-nav-btn:hover { background: #f4f7fb; }
.www-mob-nav-btn-icon {
    font-size: 0.6875rem;
    color: #5c6fa3;
    flex-shrink: 0;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.www-mob-nav-section.is-open > .www-mob-nav-btn {
    background: #f4f7fb;
    border-radius: 8px 8px 0 0;
}
.www-mob-nav-section.is-open .www-mob-nav-btn-icon { transform: rotate(180deg); }

.www-mob-nav-panel {
    display: none;
    padding: 0.375rem 0.5rem 0.625rem 0.875rem;
    border-left: 2px solid #e4eaf4;
    margin: 0 0.5rem 0.25rem 1.25rem;
}
.www-mob-nav-section.is-open > .www-mob-nav-panel {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.www-mob-sub-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #4a5566;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}
.www-mob-sub-link:hover { background: #f4f7fb; color: #283658; }
.www-mob-sub-link--nested { padding-left: 1.5rem; font-size: 0.8125rem; }

.www-mob-sub-group { margin-top: 0.25rem; }
.www-mob-sub-group-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #5c6fa3;
    padding: 0.25rem 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}
.www-mob-sub-group-title--link { display: flex; align-items: center; gap: 0.35rem; }
.www-mob-sub-group-title--link:hover { color: #283658; }

@media (max-width: 767.98px) {
    .www-nav-catalog-desktop { display: none !important; }
    .www-header-hamburger { display: flex !important; }
}

/* =============================================
   Footer — Devnode brand navy gradient (dark theme)
   ============================================= */
.www-footer-art {
    position: relative;
    background-color: #1a326b;
    background-image:
        radial-gradient(ellipse 1200px 540px at 12% 100%, rgba(94,130,220,0.32) 0%, transparent 62%),
        radial-gradient(ellipse 1100px 520px at 88% 0%, rgba(70,110,200,0.28) 0%, transparent 58%),
        radial-gradient(ellipse 900px 320px at 50% -8%, rgba(255,255,255,0.08) 0%, transparent 60%),
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(180deg, #1f3a78 0%, #1a326b 45%, #0d1c44 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 64px 64px, 64px 64px, 100% 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
    border-top: 1px solid rgba(255,255,255,0.08);
    color: #ffffff;
    box-shadow:
        inset 0 8px 12px -8px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06);
}
.www-footer-art::before,
.www-footer-art::after,
.www-footer-art > div::before,
.www-footer-art > div::after { display: none !important; }
.www-footer-art h3,
.www-footer-art h4,
.www-footer-art h6 { color: #ffffff !important; }
.www-footer-art p,
.www-footer-art ul,
.www-footer-art li,
.www-footer-art span,
.www-footer-art a { color: rgba(255,255,255,0.84); }
.www-footer-art a:hover { color: #ffffff; }
.www-footer-art [class*="text-[#0F172A]"],
.www-footer-art [class*="text-[#1E2D4D]"] { color: #ffffff !important; }
.www-footer-art [class*="text-[#4A5568]"] { color: rgba(255,255,255,0.78) !important; }
.www-footer-art [class*="text-[#344B7A]"] { color: rgba(255,255,255,0.86) !important; }
.www-footer-art [class*="text-[#3D5DAA]"] { color: rgba(255,255,255,0.7) !important; }
.www-footer-art [class*="text-[#B2BDD0]"] { color: rgba(255,255,255,0.36) !important; }
.www-footer-art [class*="hover:text-[#283658]"]:hover { color: #ffffff !important; }
.www-footer-art [class*="border-[#"] { border-color: rgba(255,255,255,0.12) !important; }
.www-footer-art [class*="hover:border-[#283658]"]:hover { border-color: rgba(255,255,255,0.42) !important; }
.www-footer-art [class*="bg-[#FAFCFF]"],
.www-footer-art [class*="bg-[#FAFBFD]"] { background-color: rgba(255,255,255,0.06) !important; }
.www-footer-art [class*="hover:bg-[#F5F7FA]"]:hover { background-color: rgba(255,255,255,0.92) !important; }

.www-footer-art .www-connect-pill {
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border-color: rgba(255,255,255,0.14);
}
.www-footer-art .www-connect-pill .www-connect-pill-icon,
.www-footer-art .www-connect-pill .www-connect-zalo-mark { color: rgba(255,255,255,0.92); }
.www-footer-art .www-connect-pill:hover,
.www-footer-art .www-connect-pill:focus-visible {
    background: var(--pill-bg);
    border-color: var(--pill-bg);
    color: #ffffff;
}
.www-footer-art .www-connect-pill:hover .www-connect-pill-icon,
.www-footer-art .www-connect-pill:focus-visible .www-connect-pill-icon,
.www-footer-art .www-connect-pill:hover .www-connect-zalo-mark,
.www-footer-art .www-connect-pill:focus-visible .www-connect-zalo-mark { color: #ffffff; }

/* =============================================
   Footer "Kết nối với Devnode" — pill expand on hover
   ============================================= */
.www-connect-pill {
    --pill-bg: #1a326b;
    --pill-fg: #1a326b;
    display: inline-flex;
    align-items: center;
    height: 56px;
    max-width: 56px;
    border-radius: 9999px;
    background: #F1F5F9;
    color: #0F172A;
    text-decoration: none;
    overflow: hidden;
    border: 1px solid #E4EAF4;
    transition: max-width .35s cubic-bezier(.2,.7,.2,1), background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    will-change: max-width, background-color;
}
.www-connect-pill-icon {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: var(--pill-fg);
    line-height: 1;
    transition: color .25s ease;
}
.www-connect-zalo-mark {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--pill-fg);
    line-height: 1;
}
.www-connect-pill-text {
    display: inline-block;
    padding: 0 1.25rem 0 0.4rem;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transition: opacity .2s ease;
    color: inherit;
}
.www-connect-pill:hover,
.www-connect-pill:focus-visible {
    max-width: 360px;
    background: var(--pill-bg);
    color: #fff;
    border-color: var(--pill-bg);
    outline: none;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}
.www-connect-pill:hover .www-connect-pill-icon,
.www-connect-pill:focus-visible .www-connect-pill-icon,
.www-connect-pill:hover .www-connect-zalo-mark,
.www-connect-pill:focus-visible .www-connect-zalo-mark {
    color: #fff;
}
.www-connect-pill:hover .www-connect-pill-text,
.www-connect-pill:focus-visible .www-connect-pill-text {
    opacity: 1;
}
@media (hover: none) {
    .www-connect-pill {
        max-width: 360px;
        background: var(--pill-bg);
        color: #fff;
        border-color: var(--pill-bg);
    }
    .www-connect-pill .www-connect-pill-icon,
    .www-connect-pill .www-connect-zalo-mark {
        color: #fff;
    }
    .www-connect-pill .www-connect-pill-text {
        opacity: 1;
    }
}