/* Shared Nafu header and footer, loaded by the master layout on every page. */
body .site-header.nafu-header .brand{width:auto;height:auto;position:static}
body .site-header.nafu-header .brand .nafu-logo-image{display:block;position:static;width:150px;height:auto;max-width:100%;object-fit:contain}
body .nafu-footer .nafu-footer-brand{width:auto;height:auto;position:static}
body .nafu-footer .nafu-footer-brand .nafu-logo-image{display:block;position:static;width:210px;height:auto;max-width:100%;object-fit:contain}
body .site-header.nafu-header{position:relative;inset:auto;transform:none;display:flex;align-items:center;justify-content:space-between;width:100%;height:100px;margin:0;padding:0 max(30px,calc((100vw - 1580px)/2));gap:24px;background:#333f23;color:#fff;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:visible;font-family:Manrope,Arial,sans-serif;box-sizing:border-box}
body .site-header.nafu-header:before,body .site-header.nafu-header .brand:after{display:none}
body .site-header.nafu-header .brand{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none}
body .site-header.nafu-header .nafu-mark{width:48px;height:48px;flex:none;color:#dadbc1}
body .site-header.nafu-header .nafu-wordmark{color:#fff;font:600 38px/1 Manrope,Arial,sans-serif;letter-spacing:-1px}
body .site-header.nafu-header .nafu-wordmark small{display:block;margin-top:5px;font-size:10px;letter-spacing:3px}
body .site-header.nafu-header .nafu-tagline{display:block;margin-right:auto;padding:12px 0 12px 24px;border-left:1px solid #c9cbb47d;color:#fff;font:16px/1.3 Manrope,Arial,sans-serif}
body .site-header.nafu-header nav{display:flex;align-items:center;gap:38px;font:500 14px/1.4 Manrope,Arial,sans-serif}
body .site-header.nafu-header nav>a:not(.talk-button){color:#fff;text-decoration:none;white-space:nowrap}
body .site-header.nafu-header nav>a:not(.talk-button):before{content:"+ ";color:#efddcf}
body .site-header.nafu-header nav>a:not(.talk-button):after{display:none}
body .site-header.nafu-header nav>a.is-active{color:#ded5c4;text-decoration:underline;text-underline-offset:4px}
body .site-header.nafu-header .talk-button{display:inline-flex;align-items:center;justify-content:center;padding:17px 34px;background:#efddcf;color:#222;border:0;border-radius:100px;box-shadow:none;font-weight:400;text-decoration:none;white-space:nowrap}
body .site-header.nafu-header a:focus-visible{outline:3px solid #dadbc1;outline-offset:5px}
body>main{padding-top:0}
body .nafu-footer{border-radius:0;box-shadow:none;font-family:Manrope,Arial,sans-serif}
body .nafu-footer{position:relative;overflow:hidden}
body .nafu-footer .footer-inner{position:relative;padding-bottom:clamp(25PX,17vw,18x)}
body .nafu-footer .footer-inner>.container{position:relative;z-index:2}
body .nafu-footer .bottom-footer{position:absolute;z-index:1;right:0;bottom:-.08em;left:0;display:flex!important;justify-content:center;align-items:flex-end;margin:0!important;overflow:hidden;pointer-events:none;user-select:none}
body .nafu-footer .footer-bottom-text{width:100%;color:#fff;opacity:.055;text-align:center;text-transform:uppercase;line-height:.72!important;font-size:clamp(120px,24vw,430px)!important;white-space:nowrap}
body .nafu-footer .nafu-footer-brand{display:inline-block;margin-bottom:26px;color:#fff;font:600 46px/1 Manrope,Arial,sans-serif;letter-spacing:-2px;text-decoration:none}
body .nafu-footer .nafu-footer-brand span{display:block;margin-top:10px;font-size:12px;letter-spacing:5px}
body .nafu-footer .footer-bottom-text{white-space:nowrap;font-family:Sora,Arial,sans-serif;letter-spacing:-.06em;font-size:clamp(70px,15vw,290px)}
@media(max-width:767px){body .nafu-footer .footer-inner{padding-bottom:110px}body .nafu-footer .footer-bottom-text{font-size:30vw!important;line-height:.8!important}}
@media(max-width:1400px){body .site-header.nafu-header .nafu-tagline{display:none}body .site-header.nafu-header nav{gap:28px}}
@media(max-width:900px){body .site-header.nafu-header{height:88px;padding-inline:24px}body .site-header.nafu-header .nafu-mark{width:40px;height:40px}body .site-header.nafu-header .nafu-wordmark{font-size:29px}body .site-header.nafu-header nav>a:not(.talk-button){display:none}body .site-header.nafu-header .talk-button{padding:14px 22px}}
@media(max-width:480px){body .site-header.nafu-header{padding-inline:18px;gap:12px}body .site-header.nafu-header .talk-button{padding:14px 18px;font-size:11px}body .site-header.nafu-header .brand .nafu-logo-image{width:120px}}

/* Global container override to 1430px for consistency */
.container {
    max-width: 1430px !important;
}
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* =========================================================================
   STANDARDIZED HERO BANNER SYSTEM (DESKTOP & MOBILE RESPONSIVE)
   Applied across /about-us, /our-legacy, /shop, /contact, /faq, /shipping-refunds,
   /privacy-policy, /terms-of-service, etc.
   ========================================================================= */
:root {
    --spice-primary: #E45D3E;
    --spice-secondary: #FFB300;
    --spice-bg: #FDF9F1;
    --spice-text: #28120B;
    --spice-bg-dark: #1F0701;
    --font-heading: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.about-hero-section,
.shop-header,
.legal-hero,
.about-hero {
    position: relative;
    background: #1F0701;
    color: var(--spice-bg);
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid rgba(255, 179, 0, 0.12);
    overflow: hidden;
    padding: 0 1.5rem;
}

@media (min-width: 769px) {
    .about-hero-section,
    .shop-header,
    .legal-hero,
    .about-hero {
        height: 650px !important;
        min-height: 650px !important;
        max-height: 650px !important;
        padding: 0 1.5rem;
    }
}

.about-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px !important;
    width: 100%;
    margin: 0 auto;
}

.about-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 179, 0, 0.25);
    color: var(--spice-secondary);
    padding: 0.35rem 1.15rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 1.5px;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}

.about-hero-badge svg {
    color: var(--spice-secondary);
    flex-shrink: 0;
}

.about-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.16;
    color: #FFFFFF;
    margin-bottom: 1.25rem;
    letter-spacing: -0.6px;
}

.about-hero-title .highlight-gold {
    color: var(--spice-secondary);
    font-weight: 800;
}

.about-hero-desc {
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    line-height: 1.7;
    color: rgba(253, 249, 241, 0.82);
    width: 100%;
    max-width: 60%;
    margin: 0 auto 2.25rem;
    text-align: center;
}

/* 3 Brighter Highlight Clusters */
.hero-stats-clusters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0 auto;
}

.hero-cluster-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1.35rem;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 0 15px rgba(255, 179, 0, 0.12);
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    text-align: left;
}

.hero-cluster-item:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 179, 0, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 22px rgba(255, 179, 0, 0.25);
}

.cluster-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 179, 0, 0.22);
    color: var(--spice-secondary);
    border: 1px solid rgba(255, 179, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cluster-icon-box svg {
    width: 18px;
    height: 18px;
}

.cluster-text strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
}

.cluster-text span {
    display: block;
    font-size: 0.8rem;
    color: rgba(253, 249, 241, 0.88);
    line-height: 1.2;
    margin-top: 2px;
}

/* Hero Mobile Responsive Standardization */
@media (max-width: 768px) {
    .about-hero-section,
    .shop-header,
    .legal-hero,
    .about-hero {
        height: auto !important;
        min-height: 380px !important;
        max-height: none !important;
        padding: 3.25rem 1rem 2.25rem 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .about-hero-badge {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.85rem !important;
        margin-bottom: 0.75rem !important;
        letter-spacing: 1.2px !important;
    }

    .about-hero-badge svg {
        width: 13px !important;
        height: 13px !important;
    }

    .about-hero-title {
        font-size: clamp(1.45rem, 6.2vw, 1.85rem) !important;
        line-height: 1.22 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 0.75rem !important;
    }

    .about-hero-desc {
        font-size: 0.86rem !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
        margin: 0 auto 1.25rem !important;
        color: rgba(253, 249, 241, 0.9) !important;
    }

    /* Hero Stats Clusters: 3 badge nhỏ gọn nằm ngang thanh thoát */
    .hero-stats-clusters {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.45rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .hero-cluster-item {
        flex: 1 1 calc(33.333% - 0.45rem) !important;
        min-width: 95px !important;
        padding: 0.45rem 0.5rem !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 179, 0, 0.22) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.25rem !important;
    }

    .cluster-icon-box {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.8rem !important;
    }

    .cluster-icon-box svg {
        width: 13px !important;
        height: 13px !important;
    }

    .cluster-text {
        text-align: center !important;
    }

    .cluster-text strong {
        font-size: 0.74rem !important;
        font-weight: 700 !important;
        line-height: 1.15 !important;
        display: block !important;
        white-space: nowrap !important;
    }

    .cluster-text span {
        display: none !important; /* Ẩn câu mô tả phụ dài trên mobile */
    }
}