/* ============================================================
   Huapont — Navbar (Phase 2 — light theme, desktop only)
   ------------------------------------------------------------
   Layout full-width (không padding co vào trong), 3 vùng:
     [Logo: sát trái]  [Menu: chính giữa tuyệt đối]  [Actions: sát phải]
   Actions phải: Search icon (click mở form) · User (hover menu)
   - Nền trắng, chữ tối
   - Logo KHÔNG có tagline
   - User avatar KHÔNG có khung viền tròn
   ============================================================ */

/* ===== Main navbar (nền trắng) ===== */
.navbar {
    background: var(--color-white);
    color: var(--color-text);
    height: var(--navbar-height);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 0, 0.04);
}
/* Inner: không có max-width hay padding giới hạn — full edge-to-edge */
.navbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

/* ===== Vùng TRÁI — Brand (sát mép trái, padding riêng) ===== */
.navbar-left {
    flex-shrink: 0;
    padding: 0 var(--space-6);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}
/* Logo image (khi admin upload logo) */
.brand-logo {
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}
/* Fallback — brand mark + text (khi chưa có logo) */
.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-ink-900) 0%, var(--color-ink-700) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.brand-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--color-gold-500);
    border-radius: var(--radius-sm);
    opacity: 0.7;
}
.brand-mark span {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 22px;
    color: var(--color-gold-400);
    line-height: 1;
}
.brand-text {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-xl);
    letter-spacing: var(--ls-wider);
    color: var(--color-ink-900);
}

/* ===== Vùng GIỮA — Menu (căn giữa tuyệt đối, không bị 2 bên đẩy) ===== */
.navbar-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-item {
    position: relative;
    height: var(--navbar-height);
    display: flex;
    align-items: center;
}
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    padding: var(--space-2) 0;
    position: relative;
    transition: color var(--duration-fast) var(--ease-out);
    letter-spacing: 0.01em;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--color-gold-500);
    transform: translateX(-50%);
    transition: width var(--duration-base) var(--ease-out);
}
.nav-link:hover,
.nav-link.is-active {
    color: var(--color-gold-700);
}
.nav-link:hover::after,
.nav-link.is-active::after {
    width: 100%;
}
.nav-link .caret {
    width: 12px;
    height: 12px;
    margin-left: 2px;
    transition: transform var(--duration-base) var(--ease-out);
}
.nav-item.has-dropdown:hover .nav-link .caret { transform: rotate(180deg); }

/* ===== Vùng PHẢI — Actions (sát mép phải) ===== */
.navbar-right {
    flex-shrink: 0;
    padding: 0 var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;     /* đẩy sát phải khi còn dư */
}

/* ===== Search: mặc định chỉ icon, click mới mở form input ===== */
.nav-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
}
.nav-search-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-ink-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    padding: 0;
    overflow: hidden;
}
.nav-search-toggle:hover,
.nav-search-toggle.is-active {
    background: var(--color-gold-050);
    border-color: var(--color-gold-500);
    color: var(--color-gold-700);
}
.nav-search-toggle .icon {
    width: 18px;
    height: 18px;
}
.nav-search-form {
    position: absolute;
    top: 50%;
    right: 100%;            /* mở rộng về phía trái của icon */
    transform: translateY(-50%) translateX(8px);
    display: flex;
    align-items: center;
    background: var(--color-white);
    border: 1px solid var(--color-gold-500);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-4);
    height: 40px;
    width: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: width var(--duration-base) var(--ease-out),
                opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}
.nav-search-form.is-open {
    width: 280px;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
}
.nav-search-form .icon {
    width: 16px;
    height: 16px;
    color: var(--color-gold-700);
    flex-shrink: 0;
}
.nav-search-form input {
    border: none;
    background: transparent;
    outline: none;
    padding: 0 var(--space-2);
    font-size: var(--fs-sm);
    color: var(--color-ink-900);
    font-family: var(--font-sans);
    width: 100%;
}
.nav-search-form input::placeholder {
    color: var(--color-ink-400);
}

/* ===== Icon buttons (giữ lại cho tương lai) ===== */
.icon-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-ink-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    text-decoration: none;
    overflow: hidden;
}
.icon-btn:hover {
    background: var(--color-gold-050);
    border-color: var(--color-gold-500);
    color: var(--color-gold-700);
}
.icon-btn .icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}
.icon-btn .badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-gold-500);
    color: var(--color-ink-900);
    border: 1.5px solid var(--color-white);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ===== Dropdown Mega Menu (4 cột: 3 danh mục + 1 "Xem tất cả") ===== */
.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                visibility 240ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: var(--z-dropdown);
}
.nav-item.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Mega menu container */
.mega-menu {
    min-width: 800px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(11, 11, 11, 0.08), 0 2px 6px rgba(11, 11, 11, 0.04);
    padding: 26px;
}

/* Grid 4 cột đều nhau */
.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Mỗi cột */
.mega-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Header của cột (chứa title only, no image) */
.mega-col-header {
    display: flex;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #E8E8E8;
}

/* Tiêu đề cột (tên danh mục) */
.mega-col-title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: #333333;
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

.mega-col-title a {
    color: inherit;
    text-decoration: none;
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-col-title a:hover {
    color: var(--color-gold-600);
}

/* Danh sách sản phẩm - bullet points */
.mega-menu-list {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mega-menu-list li {
    margin: 0;
    padding-left: 4px;
}

.mega-menu-list li::marker {
    color: #999999;
    font-size: 12px;
}

.mega-menu-list a {
    display: inline;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 400;
    color: #666666;
    text-decoration: none;
    line-height: 1.5;
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-menu-list a:hover {
    color: var(--color-gold-600);
}

/* Cột CTA "Xem tất cả" */
.mega-col-cta .mega-col-header {
    margin-bottom: 14px;
}

.mega-col-cta .mega-col-title a {
    color: var(--color-gold-600);
    font-weight: 600;
}

.mega-col-cta .mega-col-title a:hover {
    color: var(--color-gold-700);
}

/* Empty state */
.mega-menu-empty {
    padding: 20px;
    text-align: center;
    color: #666666;
}

/* ===== OLD Products Dropdown (unused) ===== */
.products-dropdown {
    min-width: 320px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 3px;
    box-shadow: 0 8px 24px rgba(11, 11, 11, 0.08), 0 2px 6px rgba(11, 11, 11, 0.04);
}

.products-dropdown-inner {
    padding: 12px 0;
}

.product-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 20px;
    text-decoration: none;
    transition: background 200ms cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.product-dropdown-item:hover {
    background: rgba(201, 169, 97, 0.05);
}

.product-item-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: #333333;
    line-height: 1.3;
}

.product-item-desc {
    font-family: var(--font-display);
    font-size: 13px;
    color: #666666;
    line-height: 1.4;
}

/* CTA button "Xem tất cả" */
.product-dropdown-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 8px 16px 0;
    padding: 10px 20px;
    background: var(--color-gold-500);
    color: #0B0B0B;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 3px;
    transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.product-dropdown-cta:hover {
    background: var(--color-gold-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 169, 97, 0.3);
}

.product-dropdown-cta svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

/* ===== User dropdown (hover để mở) ===== */
.nav-user {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.nav-user-avatar {
    /* KHÔNG khung viền, KHÔNG nền — chỉ icon */
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: none;
    color: var(--color-ink-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    font-family: var(--font-sans);
    text-decoration: none;
    overflow: hidden;
}
.nav-user-avatar:hover {
    background: var(--color-gold-050);
    color: var(--color-gold-700);
}
.nav-user-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--duration-base) var(--ease-out);
    z-index: var(--z-dropdown);
    color: var(--color-text);
}
.nav-user:hover .nav-user-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-user-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    transform: rotate(45deg);
}
.nav-user-menu .user-info {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: var(--space-2);
}
.nav-user-menu .user-info .name {
    font-weight: 600;
    color: var(--color-ink-900);
    font-size: var(--fs-sm);
}
.nav-user-menu .user-info .email {
    font-size: var(--fs-xs);
    color: var(--color-ink-400);
    margin-top: 2px;
}
.nav-user-menu a,
.nav-user-menu button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--color-ink-700);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    overflow: hidden;
}
.nav-user-menu a:hover,
.nav-user-menu button:hover {
    background: var(--color-gold-050);
    color: var(--color-ink-900);
}
.nav-user-menu .icon {
    width: 16px;
    height: 16px;
}
.nav-user-menu .divider {
    height: 1px;
    background: var(--color-divider);
    margin: var(--space-2) 0;
}
.nav-user-menu .logout {
    color: var(--color-danger);
}
.nav-user-menu .logout:hover {
    background: #fef2f2;
}
.nav-user-menu .admin-link {
    color: var(--color-gold-700);
    font-weight: 600;
}

/* ============================================================
   Theme toggle button (sun / moon icons)
   ============================================================ */
.theme-toggle {
    position: relative;
}
.theme-toggle .icon {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}
/* Light mode → hiện MOON (click → dark) */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
/* Dark mode → hiện SUN (click → light) */
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ============================================================
   Theme picker — dropdown panel (light/dark + color scheme)
   ============================================================ */
.theme-picker {
    position: relative;
}
.theme-picker-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 260px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 16px;
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.theme-picker-panel[hidden] { display: none; }
.theme-picker-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.theme-picker-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
}
.theme-picker-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.theme-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    color: var(--color-text);
    text-align: left;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.theme-option:hover {
    background: var(--color-bg-soft);
}
.theme-option.is-active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}
.theme-option svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* Theme swatch — 2 màu preview cho preset */
.theme-swatch {
    width: 28px;
    height: 18px;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}
.theme-swatch > span {
    flex: 1;
    height: 100%;
}
.theme-swatch--black-gold > span:nth-child(1) { background: #0B0B0B; }
.theme-swatch--black-gold > span:nth-child(2) { background: #C9A961; }
.theme-swatch--blue-white > span:nth-child(1) { background: #0F1E47; }
.theme-swatch--blue-white > span:nth-child(2) { background: #60A5FA; }
.theme-swatch--green-brown > span:nth-child(1) { background: #02261A; }
.theme-swatch--green-brown > span:nth-child(2) { background: #92400E; }

/* ============================================================
   Dark theme — Navbar overrides (override token đã set, không hard-code màu)
   ============================================================ */
:root[data-theme="dark"] .navbar {
    /* Giữ nguyên semantic đã override ở theme.css; chỉ điều chỉnh shadow cho tone tối */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 4px 16px rgba(0, 0, 0, 0.45);
}
:root[data-theme="dark"] .nav-link {
    color: var(--color-ink-100);    /* chữ sáng trên nền tối */
}
:root[data-theme="dark"] .nav-link:hover,
:root[data-theme="dark"] .nav-link.is-active {
    color: var(--color-gold-400);
}
:root[data-theme="dark"] .brand-name {
    color: var(--color-white);
}
:root[data-theme="dark"] .brand-mark {
    background: linear-gradient(135deg, var(--color-gold-700) 0%, var(--color-gold-500) 100%);
}
:root[data-theme="dark"] .brand-mark span {
    color: var(--color-ink-900);
}
:root[data-theme="dark"] .nav-search-toggle {
    color: var(--color-ink-200);
}

/* Dark theme — Products dropdown */
:root[data-theme="dark"] .products-dropdown {
    background: var(--color-ink-800);
    border-color: var(--color-ink-700);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .product-dropdown-item:hover {
    background: var(--color-ink-900);
}

:root[data-theme="dark"] .product-item-name {
    color: var(--color-ink-100);
}

:root[data-theme="dark"] .product-item-desc {
    color: var(--color-ink-300);
}

/* Dark theme — Mega menu */
:root[data-theme="dark"] .mega-menu {
    background: var(--color-ink-800);
    border-color: var(--color-ink-700);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

:root[data-theme="dark"] .mega-col-title {
    color: var(--color-ink-100);
    border-bottom-color: var(--color-ink-700);
}

:root[data-theme="dark"] .mega-col-title a:hover {
    color: var(--color-gold-400);
}

:root[data-theme="dark"] .mega-menu-list li::marker {
    color: var(--color-ink-500);
}

:root[data-theme="dark"] .mega-menu-list a {
    color: var(--color-ink-300);
}

:root[data-theme="dark"] .mega-menu-list a:hover {
    color: var(--color-gold-400);
}

:root[data-theme="dark"] .mega-col-cta .mega-col-title a {
    color: var(--color-gold-400);
}

:root[data-theme="dark"] .mega-col-cta .mega-col-title a:hover {
    color: var(--color-gold-300);
}

/* Dark theme — Mega menu (OLD) */
:root[data-theme="dark"] .nav-search-toggle:hover,
:root[data-theme="dark"] .nav-search-toggle.is-active {
    background: var(--color-ink-700);
    border-color: var(--color-gold-500);
    color: var(--color-gold-400);
}
:root[data-theme="dark"] .nav-search-form {
    background: var(--color-ink-800);
    border-color: var(--color-gold-500);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}
:root[data-theme="dark"] .nav-search-form input {
    color: var(--color-ink-100);
}
:root[data-theme="dark"] .nav-search-form .icon {
    color: var(--color-gold-400);
}
:root[data-theme="dark"] .nav-user-avatar {
    color: var(--color-ink-100);
}
:root[data-theme="dark"] .nav-user-avatar:hover {
    background: var(--color-ink-700);
    color: var(--color-gold-400);
}
:root[data-theme="dark"] .nav-user-menu {
    background: var(--color-ink-800);
    border-color: var(--color-ink-700);
}
:root[data-theme="dark"] .nav-user-menu::before {
    background: var(--color-ink-800);
    border-top-color: var(--color-ink-700);
    border-left-color: var(--color-ink-700);
}
:root[data-theme="dark"] .nav-user-menu .user-info {
    border-bottom-color: var(--color-ink-700);
}
:root[data-theme="dark"] .nav-user-menu .user-info .name {
    color: var(--color-white);
}
:root[data-theme="dark"] .nav-user-menu .user-info .email {
    color: var(--color-ink-400);
}
:root[data-theme="dark"] .nav-user-menu a,
:root[data-theme="dark"] .nav-user-menu button {
    color: var(--color-ink-200);
}
:root[data-theme="dark"] .nav-user-menu a:hover,
:root[data-theme="dark"] .nav-user-menu button:hover {
    background: var(--color-ink-700);
    color: var(--color-gold-400);
}
:root[data-theme="dark"] .nav-user-menu .divider {
    background: var(--color-ink-700);
}
:root[data-theme="dark"] .nav-user-menu .admin-link {
    color: var(--color-gold-400);
}
:root[data-theme="dark"] .icon-btn {
    color: var(--color-ink-200);
}
:root[data-theme="dark"] .icon-btn:hover {
    background: var(--color-ink-700);
    border-color: var(--color-gold-500);
    color: var(--color-gold-400);
}
/* ===================================================================
   Search Autocomplete Dropdown
   =================================================================== */
.search-autocomplete {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 1000;
    min-width: 320px;
}

.search-autocomplete-list {
    max-height: 320px;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    transition: background-color 0.15s ease, color 0.15s ease;
    overflow: hidden;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--color-gold-50);
    color: var(--color-gold-700);
}

.search-result-main {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: inherit;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-category {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--color-ink-500);
    line-height: 1.3;
}

.search-result-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--color-ink-400);
    transition: transform 0.15s ease, color 0.15s ease;
}

.search-result-item:hover .search-result-arrow {
    transform: translateX(2px);
    color: var(--color-gold-600);
}

.search-autocomplete-loading,
.search-autocomplete-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    color: var(--color-ink-500);
    font-family: var(--font-display);
    font-size: 14px;
}

.search-autocomplete-loading svg,
.search-autocomplete-empty svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.search-autocomplete-loading .spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Dark theme — Mega menu overrides */
:root[data-theme="dark"] .mega-menu {
    background: #1A1A1A;
    border-color: #2B2B2B;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
}
:root[data-theme="dark"] .mega-col-title {
    color: #D4B978;
}
:root[data-theme="dark"] .mega-menu-list a {
    color: #B8B8B8;
}
:root[data-theme="dark"] .mega-menu-list a:hover {
    color: #D4B978;
}

/* Dark theme — Search autocomplete overrides */
:root[data-theme="dark"] .search-autocomplete {
    background: var(--color-ink-800);
    border-color: var(--color-ink-700);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .search-result-item {
    color: var(--color-ink-200);
    border-bottom-color: var(--color-ink-700);
}

:root[data-theme="dark"] .search-result-item:hover {
    background: var(--color-ink-700);
    color: var(--color-gold-400);
}

:root[data-theme="dark"] .search-result-category {
    color: var(--color-ink-400);
}

:root[data-theme="dark"] .search-result-arrow {
    color: var(--color-ink-500);
}

:root[data-theme="dark"] .search-result-item:hover .search-result-arrow {
    color: var(--color-gold-400);
}

:root[data-theme="dark"] .search-autocomplete-loading,
:root[data-theme="dark"] .search-autocomplete-empty {
    color: var(--color-ink-400);
}

:root[data-theme="dark"] .brand-logo {
    background: transparent;
    border: none;
}

/* ============================================================
   RESPONSIVE — Tablet & Mobile
   ============================================================ */

/* ===== Desktop-only helper class ===== */
.desktop-only {
    display: block;
}

/* ===== Mobile dropdown button (ẩn ở desktop) ===== */
.navbar-mobile-dropdown-toggle {
    display: none; /* Ẩn mặc định ở desktop */
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-ink-700);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    padding: 0;
    position: relative;
}

.navbar-mobile-dropdown-toggle .icon {
    width: 18px;
    height: 18px;
    position: absolute;
    transition: opacity var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.navbar-mobile-dropdown-toggle .icon-menu {
    opacity: 1;
}

.navbar-mobile-dropdown-toggle .icon-close {
    opacity: 0;
}

.navbar-mobile-dropdown-toggle.is-open .icon-menu {
    opacity: 0;
}

.navbar-mobile-dropdown-toggle.is-open .icon-close {
    opacity: 1;
}

.navbar-mobile-dropdown-toggle:hover {
    background: var(--color-gold-050);
    border-color: var(--color-gold-500);
    color: var(--color-gold-700);
}

/* ===== Mobile dropdown menu ===== */
.mobile-dropdown-menu {
    display: none; /* Ẩn mặc định ở desktop */
    position: absolute;
    top: calc(100% + 8px);
    right: var(--space-3);
    width: 320px;
    max-width: calc(100vw - 32px);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    box-sizing: border-box;
}

.mobile-dropdown-inner {
    padding: var(--space-4);
    box-sizing: border-box;
}

.mobile-dropdown-inner * {
    box-sizing: border-box;
}

.mobile-nav-section {
    margin-bottom: var(--space-4);
}

.mobile-nav-section:last-child {
    margin-bottom: 0;
}

.mobile-nav-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-2);
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-nav-list li {
    margin: 0;
}

.mobile-nav-list a,
.mobile-nav-toggle,
.mobile-nav-list button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.mobile-nav-list a:hover,
.mobile-nav-toggle:hover,
.mobile-nav-list button:hover {
    background: var(--color-gold-050);
    color: var(--color-gold-700);
}

.mobile-nav-list a.is-active {
    background: var(--color-gold-050);
    color: var(--color-gold-700);
    font-weight: 600;
}

.mobile-nav-list .icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Mobile submenu accordion */
.mobile-nav-list .has-submenu {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-nav-toggle {
    justify-content: space-between;
}

.mobile-nav-toggle .caret {
    width: 14px;
    height: 14px;
    transition: transform var(--duration-base) var(--ease-out);
}

.has-submenu.is-open .mobile-nav-toggle .caret {
    transform: rotate(180deg);
}

.mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-base) var(--ease-out);
}

.has-submenu.is-open .mobile-submenu {
    max-height: 500px;
}

.mobile-submenu li {
    padding-left: var(--space-4);
}

.mobile-submenu a {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text-muted);
}

.mobile-submenu a:hover {
    color: var(--color-gold-700);
}

/* Mobile dropdown divider */
.mobile-dropdown-divider {
    height: 1px;
    background: var(--color-divider);
    margin: var(--space-4) 0;
}

/* Mobile theme options */
.mobile-theme-options {
    display: flex;
    gap: var(--space-2);
}

.mobile-theme-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.mobile-theme-option svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mobile-theme-option:hover {
    background: var(--color-bg-soft);
}

.mobile-theme-option.is-active {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent-hover);
}

/* Mobile user info */
.mobile-user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-soft);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.mobile-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--color-gold-500);
    color: var(--color-ink-900);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    flex-shrink: 0;
}

.mobile-user-details {
    flex: 1;
    min-width: 0;
}

.mobile-user-details .name {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-user-details .email {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile login button */
.mobile-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    background: var(--color-gold-500);
    color: var(--color-ink-900);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--duration-fast) var(--ease-out);
    box-sizing: border-box;
}

.mobile-login-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mobile-login-btn:hover {
    background: var(--color-gold-700);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
    color: var(--color-ink-900);
}

/* Logout button special style */
.mobile-nav-list .logout {
    color: var(--color-danger);
}

.mobile-nav-list .logout:hover {
    background: #fef2f2;
}

.mobile-nav-list .admin-link {
    color: var(--color-gold-700);
    font-weight: 600;
}

/* ===== TABLET (768px - 1023px) ===== */
@media (max-width: 1023px) {
    /* Ẩn desktop elements */
    .desktop-only {
        display: none !important;
    }

    /* Hiện mobile dropdown button */
    .navbar-mobile-dropdown-toggle {
        display: flex; /* Hiện ở tablet/mobile */
    }

    /* Hiện mobile dropdown khi không hidden */
    .mobile-dropdown-menu {
        display: block; /* Cho phép hiển thị khi JS remove hidden */
    }

    .mobile-dropdown-menu[hidden] {
        display: none; /* Ẩn khi có attribute hidden */
    }

    /* Logo nhỏ hơn */
    .brand-logo {
        height: 40px;
        max-width: 160px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
    }

    .brand-mark span {
        font-size: 18px;
    }

    .brand-name {
        font-size: var(--text-lg);
    }

    /* Navbar right — compact */
    .navbar-right {
        gap: var(--space-2);
        padding: 0 var(--space-4);
    }

    /* Search — form nhỏ hơn */
    .nav-search-form.is-open {
        width: 240px;
    }
}

/* ===== MOBILE (< 768px) ===== */
@media (max-width: 1023px) {
    /* Navbar height nhỏ hơn */
    .navbar {
        height: 60px;
    }

    .navbar-inner {
        gap: var(--space-3);
    }

    .navbar-left {
        padding: 0 var(--space-3);
    }

    .navbar-right {
        padding: 0 var(--space-3);
        gap: var(--space-1);
    }

    /* Logo nhỏ hơn */
    .brand-logo {
        height: 32px;
        max-width: 120px;
    }

    .brand-mark {
        width: 32px;
        height: 32px;
    }

    .brand-mark span {
        font-size: 16px;
    }

    .brand-name {
        font-size: var(--text-base);
    }

    /* Mobile dropdown button nhỏ hơn */
    .navbar-mobile-dropdown-toggle {
        width: 36px;
        height: 36px;
    }

    .navbar-mobile-dropdown-toggle .icon {
        width: 16px;
        height: 16px;
    }

    /* Mobile dropdown menu */
    .mobile-dropdown-menu {
        width: 280px;
        right: var(--space-2);
    }

    .mobile-dropdown-inner {
        padding: var(--space-3);
    }

    /* Icon buttons nhỏ hơn */
    .icon-btn,
    .nav-search-toggle {
        width: 36px;
        height: 36px;
    }

    .icon-btn .icon,
    .nav-search-toggle .icon {
        width: 16px;
        height: 16px;
    }

    /* Search form nhỏ hơn trên mobile */
    .nav-search-form.is-open {
        width: 200px;
    }
}

/* ===== Dark theme — Mobile/Tablet overrides ===== */
@media (max-width: 1023px) {
    :root[data-theme="dark"] .navbar-mobile-dropdown-toggle {
        color: var(--color-ink-200);
    }

    :root[data-theme="dark"] .navbar-mobile-dropdown-toggle:hover {
        background: var(--color-ink-700);
        border-color: var(--color-gold-500);
        color: var(--color-gold-400);
    }

    :root[data-theme="dark"] .mobile-dropdown-menu {
        background: var(--color-ink-800);
        border-color: var(--color-ink-700);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    }

    :root[data-theme="dark"] .mobile-nav-list a,
    :root[data-theme="dark"] .mobile-nav-toggle {
        color: var(--color-ink-200);
    }

    :root[data-theme="dark"] .mobile-nav-list a:hover,
    :root[data-theme="dark"] .mobile-nav-toggle:hover {
        background: var(--color-ink-700);
        color: var(--color-gold-400);
    }

    :root[data-theme="dark"] .mobile-nav-list a.is-active {
        background: var(--color-ink-700);
        color: var(--color-gold-400);
    }

    :root[data-theme="dark"] .mobile-submenu a {
        color: var(--color-ink-300);
    }

    :root[data-theme="dark"] .mobile-dropdown-divider {
        background: var(--color-ink-700);
    }

    :root[data-theme="dark"] .mobile-theme-option {
        border-color: var(--color-ink-700);
        color: var(--color-ink-200);
    }

    :root[data-theme="dark"] .mobile-theme-option:hover {
        background: var(--color-ink-700);
    }

    :root[data-theme="dark"] .mobile-theme-option.is-active {
        background: rgba(201, 169, 97, 0.15);
        border-color: var(--color-gold-500);
        color: var(--color-gold-400);
    }

    :root[data-theme="dark"] .mobile-user-info {
        background: var(--color-ink-900);
    }

    :root[data-theme="dark"] .mobile-user-details .name {
        color: var(--color-ink-100);
    }

    :root[data-theme="dark"] .mobile-user-details .email {
        color: var(--color-ink-400);
    }

    :root[data-theme="dark"] .mobile-nav-list .logout:hover {
        background: rgba(176, 0, 32, 0.15);
    }

    :root[data-theme="dark"] .mobile-nav-list .admin-link {
        color: var(--color-gold-400);
    }
}