/**
 * Header dùng chung (trang chủ + shop + liên hệ).
 * Biến màu: từ :root / [data-theme] của trang (new-home-index hoặc shop-common).
 */

.site-nav-unified {
    box-sizing: border-box;
}

.site-nav-unified--home {
    padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 4vw, 3rem);
}

.site-nav-unified--inner {
    padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 3rem);
    background: linear-gradient(to bottom, var(--bg), transparent);
    transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo — trang trong: theo theme */
.site-nav-unified--inner .nav-logo-circle {
    border-color: var(--text-main) !important;
}
.site-nav-unified--inner .nav-logo-circle span {
    color: var(--text-main) !important;
}
.site-nav-unified--inner .nav-logo-text {
    color: var(--text-main) !important;
}

/* Liên kết desktop — trang trong */
.site-nav-unified--inner .site-nav-link-quiet {
    color: var(--text-muted);
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.site-nav-unified--inner .site-nav-link-quiet:hover {
    color: var(--text-main);
}

.site-nav-unified--inner .site-nav-link-active {
    color: var(--accent);
}

.site-nav-unified--inner .menu-circle {
    border-color: var(--border-hover);
}

/* Giỏ khi đang ở trang giỏ */
.site-nav-unified .shop-cart-nav-link.shop-cart-nav-link--here {
    color: var(--accent);
}
.site-nav-unified .shop-cart-nav-link.shop-cart-nav-link--here iconify-icon {
    color: inherit;
}

/* Desktop: hàng link có thể cuộn ngang trên tablet hẹp */
.site-nav-desktop-row {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.site-nav-desktop-row::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .site-nav-desktop-row {
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: visible;
    }
}

@media (max-width: 1023px) {
    .site-nav-desktop-row {
        max-width: min(100vw - 12rem, 520px);
        padding-bottom: 2px;
    }
}

/* Overlay: dòng liên kết lớn */
.site-nav-overlay-link {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.2;
    transition: color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-nav-overlay-panel {
    background: var(--menu-bg, var(--bg));
}

/* Pill Website / Mobile App — dùng trên mọi trang */
.site-nav-unified .site-nav-highlight {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0c0c0c !important;
    background: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, 0.5),
        0 6px 22px rgba(0, 0, 0, 0.28);
    transition:
        background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s,
        box-shadow 0.3s;
}

.site-nav-unified .site-nav-highlight:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px var(--accent-hover),
        0 10px 28px rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .site-nav-unified .site-nav-highlight {
    color: #111 !important;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow:
        0 0 0 1px rgba(184, 150, 12, 0.45),
        0 4px 16px rgba(184, 150, 12, 0.22);
}

[data-theme="light"] .site-nav-unified .site-nav-highlight:hover {
    box-shadow:
        0 0 0 1px var(--accent-hover),
        0 8px 22px rgba(184, 150, 12, 0.28);
}

@media (prefers-reduced-motion: reduce) {
    .site-nav-unified .site-nav-highlight:hover {
        transform: none;
    }
}