/* ==========================================================================
   SONG NGOC SCENTRA - Stylesheet chinh
   Bang mau:  Avocado        #558C03  (chu dao)
              Lincoln Green  #265902  (tieu de, thanh tren cung)
              Smoky Black    #092601  (muc dang chon)
              Limerick       #98BF0A  (diem sang tren nen toi)
              Light Concrete  #D3D3D3  (nen, vien)
              Earth Brown     #A67C52  (nhan - dung it hon hai mau tren)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BIEN MAU & NEN TANG
   -------------------------------------------------------------------------- */
:root {
    /* Mau thuong hieu */
    --sage-pale:       #eef4da;    /* nen nhat nhat - suy ra tu Limerick */
    --sage-light:      #98bf0a;    /* Limerick   - diem sang, chu tren nen toi */
    --sage:            #558c03;    /* Avocado    - MAU CHU DAO */
    --sage-dark:       #3f7302;    /* giua Avocado va Lincoln - nut khi ro chuot */
    --sage-darker:     #265902;    /* Lincoln Green - tieu de, gia tien */
    --sage-deepest:    #092601;    /* Smoky Black   - muc dang chon, o tick */
    --brand-text:      #707d6c;    /* dung mau chu cua logo thuong hieu */

    --concrete:        #d3d3d3;
    --concrete-light:  #ececec;
    --concrete-pale:   #f4f3f8;    /* nen nhat nhat trong bang mau ban chon */

    /* Nau dat - mau nhan cua thuong hieu, dung it hon xanh va xam trang */
    --earth-light:     #f4ece1;    /* nen rat nhat */
    --earth:           #e3d2bd;    /* nen dai, khoi lon */
    --earth-dark:      #a67c52;    /* nhan, icon, chu tren nen sang */
    --earth-deep:      #6f5138;    /* nau dam - chu tren nen nhat */

    /* Mau chu */
    --ink:             #2f3a33;
    --ink-soft:        #5d6b62;
    --ink-muted:       #8a958e;
    --white:           #ffffff;

    /* Giao dien */
    --radius-sm:       10px;
    --radius:          16px;
    --radius-lg:       24px;
    --shadow-sm:       0 2px 10px rgba(47, 58, 51, .06);
    --shadow:          0 8px 28px rgba(47, 58, 51, .09);
    --shadow-lg:       0 18px 48px rgba(47, 58, 51, .13);
    --transition:      .28s cubic-bezier(.4, 0, .2, 1);

    /*
     | Font - var(--font-be-vietnam)/var(--font-cormorant) la 2 bien do
     | next/font/google gan vao <html> (xem app/(khach)/layout.tsx va
     | lib/fonts.ts). Font tu host tu luc build, khong con phu thuoc
     | fonts.googleapis.com nua nen khong the bi mang/thiet bi chan.
     */
    --font-body:       var(--font-be-vietnam), system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display:    var(--font-cormorant), Georgia, serif;
}

* { box-sizing: border-box; }

/* CHI CHO CUON DOC - moi tran ngang deu bi cat bo.
   Dung 'clip' chu khong dung 'hidden': 'hidden' se lam hong
   position:sticky cua thanh header. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.7;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

/* Chan cac phan tu con lam tran ngang (anh, bang, code...) */
img, svg, video, canvas { max-width: 100%; }
.container, .container-fluid { overflow-x: clip; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--ink); }

a { color: var(--sage-darker); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--sage-dark); }

img { max-width: 100%; height: auto; }

::selection { background: var(--sage-light); color: var(--ink); }

/* --- Thanh cuon (dung chung cho moi trang, ke ca khu quan tri) ---
   Khai bao khong co selector dung truoc nen ap dung cho ca trang lan
   moi khoi co thanh cuon rieng ben trong. */

/* Firefox: chi nhan mau dac, khong ve duoc gradient -> lay sage lam dai dien */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--sage) var(--concrete-pale);
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track {
    background: var(--concrete-pale);
    border-radius: 999px;
}

/* Doc: nau dat o tren chuyen dan xuong xanh la o duoi */
::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg,
        var(--earth-dark) 0%,
        var(--sage) 55%,
        var(--sage-dark) 100%);
}

/* Ngang: xoay gradient 90deg cho dung huong keo */
::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(90deg,
        var(--earth-dark) 0%,
        var(--sage) 55%,
        var(--sage-dark) 100%);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        var(--earth) 0%,
        var(--sage-dark) 100%);
}
::-webkit-scrollbar-thumb:horizontal:hover {
    background: linear-gradient(90deg,
        var(--earth) 0%,
        var(--sage-dark) 100%);
}

/* O vuong giao giua thanh doc va thanh ngang */
::-webkit-scrollbar-corner { background: var(--concrete-pale); }


/* --------------------------------------------------------------------------
   2. NUT BAM
   -------------------------------------------------------------------------- */
.btn {
    font-weight: 500;
    border-radius: 999px;
    padding: .6rem 1.5rem;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-lg { padding: .85rem 2rem; font-size: 1rem; }
.btn-sm { padding: .4rem 1rem; font-size: .875rem; }

.btn-sage {
    background: var(--sage);
    border: 1.5px solid var(--sage);
    color: #fff;
}
.btn-sage:hover, .btn-sage:focus {
    background: var(--sage-dark);
    border-color: var(--sage-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(85, 140, 3, .38);
}

.btn-outline-sage {
    background: transparent;
    border: 1.5px solid var(--sage);
    color: var(--sage-darker);
}
.btn-outline-sage:hover {
    background: var(--sage);
    color: #fff;
    transform: translateY(-2px);
}

.btn-dark-sage {
    background: var(--sage-darker);
    border: 1.5px solid var(--sage-darker);
    color: #fff;
}
.btn-dark-sage:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    transform: translateY(-2px);
}

.btn-earth {
    background: var(--earth);
    border: 1.5px solid var(--earth);
    color: var(--ink);
}
.btn-earth:hover { background: var(--earth-dark); color: #fff; }



/* --------------------------------------------------------------------------
   3. FORM
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border: 1.5px solid var(--concrete);
    border-radius: var(--radius-sm);
    padding: .65rem 1rem;
    font-size: .95rem;
    transition: all var(--transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 .2rem rgba(85, 140, 3, .2);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: #d9534f; }
.form-label { font-weight: 500; font-size: .9rem; margin-bottom: .35rem; color: var(--ink-soft); }

/*
 | Radio/checkbox Bootstrap (vd chon hinh thuc thanh toan) - mac dinh Bootstrap
 | TU VE lai nen + vien + cham trang (background-color/border-color/background-image)
 | luc :checked bang mau xanh duong rieng cua no (#0d6efd), lac tong voi ca
 | trang toan mau sage. accent-color (chi la mau goi y cho trinh duyet ve native)
 | KHONG du de doi, vi Bootstrap da tu ve de khong can accent-color nua - phai
 | ghi de THANG .form-check-input:checked cung do dac ta nhu Bootstrap.
 */
.form-check-input { accent-color: var(--sage); }
.form-check-input:checked {
    background-color: var(--sage);
    border-color: var(--sage);
}
.form-check-input:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 .2rem rgba(85, 140, 3, .2);
}


/* --------------------------------------------------------------------------
   4. THANH THONG TIN TREN CUNG
   -------------------------------------------------------------------------- */
.topbar {
    background: var(--sage-darker);
    color: rgba(255, 255, 255, .92);
    font-size: .82rem;
    padding: .5rem 0;
    letter-spacing: .01em;
    overflow: hidden;
}
.topbar a { color: rgba(255, 255, 255, .92); }
.topbar a:hover { color: var(--earth); }

.topbar-inner {
    display: flex;
    align-items: center;
    padding-inline: clamp(1rem, 2.5vw, 2.25rem);
}

/* --- Chu chay lien tuc --- */
.marquee {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    /* Mo dan hai dau cho chu troi vao / troi ra muot */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    width: max-content;

    /* Bao truoc cho trinh duyet la se doi transform -> day viec ve len card do hoa,
       nho vay chu chay muot, khong bi rung tung nac. */
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);

    /* Toc do vua phai (~40px/giay) de kip doc. Tang so giay = chay cham hon. */
    animation: marquee-run 38s linear infinite;
}

/* Ro chuot vao thi dung lai cho nguoi dung doc / bam so dien thoai */
.topbar:hover .marquee-track { animation-play-state: paused; }

.marquee-item {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}
.marquee-item i { font-size: .95rem; color: var(--sage-light); }
.marquee-item b { font-weight: 600; color: #fff; }
.marquee-item a {
    font-weight: 700;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.marquee-item a:hover { color: var(--earth); }

.marquee-sep {
    color: rgba(255, 255, 255, .35);
    font-size: .5rem;
    padding-inline: 1.75rem;
}

/* Dung translate3d thay translateX de chay bang card do hoa (muot hon).
   Dich 50% vi noi dung duoc lap 2 lan -> vong lai dung diem xuat phat. */
@keyframes marquee-run {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Nguoi dung tat hieu ung chuyen dong trong he dieu hanh -> khong chay nua */
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}


/* --------------------------------------------------------------------------
   5. HEADER
   -------------------------------------------------------------------------- */
/* Thanh dieu huong dang vien thuoc, NOI TREN anh banner.
   Ban than header trong suot; chi khoi .container ben trong co nen mo. */
.site-header {
    background: transparent;
    z-index: 1030;
}
.site-header .navbar { padding: .9rem 0; }

.site-header .navbar > .container {
    /* Nen trang rat nhat -> nhin xuyen thay anh banner phia sau,
       do "mo mo" den tu backdrop-filter chu khong tu mau nen. */
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    padding: .45rem .55rem .45rem 1.1rem;
    box-shadow: 0 6px 26px rgba(47, 58, 51, .07);
    transition: background var(--transition), box-shadow var(--transition);
}
/* Cuon xuong thi dam hon chut cho de doc */
.site-header.scrolled .navbar > .container {
    background: rgba(255, 255, 255, .55);
    box-shadow: 0 8px 30px rgba(47, 58, 51, .1);
}

/* --- Logo chu thuong hieu --- */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: .75rem;
}
.brand-logo {
    height: 30px;
    width: auto;
    display: block;
}

/* --- Menu --- */
.navbar-nav { gap: 10px; }                     /* khoang cach giua cac muc */
.navbar-nav .nav-link {
    position: relative;
    font-weight: 500;
    font-size: .87rem;
    color: var(--brand-text);                  /* trung mau chu logo thuong hieu */
    padding: .4rem .8rem .5rem !important;
    white-space: nowrap;
    transition: color .3s cubic-bezier(.4, 0, .2, 1);
}

/* Gach chan mau xanh la, mo dan tu GIUA ra hai ben.
   Dung ::before vi Bootstrap da dung ::after de ve mui ten cua muc "San pham". */
.navbar-nav .nav-link::before {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    /* Nang gach chan len sat chu bang cach doi `bottom`, KHONG cat bot
       padding-bottom .5rem - phan padding do la vung bam chuot cua muc menu,
       cat di thi thanh dieu huong thap xuong va kho bam hon. */
    bottom: .6rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;                  /* gach chan luon cung mau voi chu */
    opacity: 0;
    transition: left .35s cubic-bezier(.4, 0, .2, 1),
                right .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease;
}
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before {
    left: .8rem;
    right: .8rem;
    opacity: 1;
}

/* Ro chuot vao / dang o trang do -> xanh la dam nhat, khong dung mau den */
.navbar-nav .nav-link:hover { color: var(--sage-deepest); }
.navbar-nav .nav-link.active { color: var(--sage-deepest); font-weight: 600; }

/* Khi ro chuot sang muc KHAC, muc dang active tam tat gach chan
   -> chi mot muc duoc sang tai mot thoi diem, khong bi sang hai cho. */
.navbar-nav:hover .nav-link.active:not(:hover) {
    color: var(--brand-text);
    font-weight: 500;
}
.navbar-nav:hover .nav-link.active:not(:hover)::before {
    left: 50%;
    right: 50%;
    opacity: 0;
}
/* Mui ten cua muc "San pham": ep ve dung dang tam giac nho,
   khong cho bat ky quy tac gach chan nao bien no thanh thanh ngang. */
.navbar-nav .dropdown-toggle::after {
    position: static;
    width: 0;
    height: 0;
    margin-left: .35rem;
    background: none;
    border-radius: 0;
    border-top-color: currentColor;
    opacity: .6;
}

/* Bo vien focus mac dinh (xanh duong) khi mo menu bang chuot.
   Nguoi dung ban phim van co vien rieng mau sage o duoi. */
.navbar-nav .nav-link:focus { outline: none; box-shadow: none; }
.navbar-nav .nav-link:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
    border-radius: 8px;
}

.navbar-toggler { border: none; font-size: 1.35rem; color: var(--ink); padding: .1rem .4rem; }
.navbar-toggler:focus { box-shadow: none; }

/* --- Tim kiem: mac dinh CHI la nut kinh lup, bam moi mo bang tim kiem ---
   Truoc day o go chu hien san trong thanh (voi ca mot doan CSS rieng de
   keo dai no ma khong xe dich menu can giua). Doi lai theo yeu cau: gon nhu
   nut tai khoan/gio hang ben canh, khong chiem cho khi chua dung toi. */
.header-search { position: static; }

.search-toggle {
    position: relative;                         /* diem tua cho tooltip rieng, xem [data-tooltip] */
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--brand-text);
    display: inline-grid;
    place-items: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all var(--transition);
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .6); color: var(--sage-deepest); }

/* Phu mo toan trang phia sau khi thanh tim kiem mo - don het chu y vao mot
   cho. z-index 1040 thap hon .search-drawer (1050) nen thanh van noi ro len
   tren, con banner/noi dung deu bi mo di theo. */
.search-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(12, 18, 14, .5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1040;
    animation: search-backdrop-in .18s ease;
}
@keyframes search-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*
 | Thanh tim kiem "trai xuong": rong het man hinh, neo tren cung, thay the
 | vi tri thanh dieu huong that (de len tren no nho z-index cao hon). Da
 | portal ra <body> (xem Header.tsx) nen khong bi cac to tien cua header
 | (backdrop-filter, overflow-x: clip...) lam vuong - xem chu thich dai o do.
 */
.search-drawer {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #fff;
    box-shadow: 0 12px 40px rgba(47, 58, 51, .18);
    padding: 1.1rem 0;
    z-index: 1050;
    animation: search-drawer-in .3s cubic-bezier(.22, .61, .36, 1);
}
@keyframes search-drawer-in {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/*
 | Luoi (grid) chu khong phai flex: can ".search-suggest" (hang duoi) nam
 | DUNG cot voi o go chu (hang tren) de khoi tu khoa can giua dung bang be
 | rong input - flex khong lam duoc vi khong co "cot" dung chung giua hai
 | hang khac nhau, grid-template-areas thi co.
 */
.search-drawer-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "logo form actions"
        ".    suggest .";
    column-gap: 1.5rem;
    row-gap: .9rem;
    align-items: center;
}
.search-drawer-logo { grid-area: logo; display: flex; align-items: center; }
.search-drawer-logo img { height: 30px; width: auto; display: block; }
.search-drawer-actions { grid-area: actions; display: flex; align-items: center; gap: .35rem; align-self: center; }
.search-drawer-grid > .search-panel-form { grid-area: form; }

/* Khoi tu khoa nam dung cot voi o go chu (xem grid-template-areas o tren) -
   can giua CA tieu de lan hang gach de dung tam voi input phia tren. */
.search-drawer-grid > .search-suggest {
    grid-area: suggest;
    margin-top: 0;
    text-align: center;
}
.search-drawer-grid > .search-suggest .search-suggest-list { justify-content: center; }

/* Man hep: 3 cot qua chat, o go chu bi bop con vai chuc px khong doc noi
   chu. Doi con 2 cot (logo | icon), o go chu va khoi tu khoa xuong hang
   rieng, moi thu deu day du be rong man hinh. */
@media (max-width: 767.98px) {
    .search-drawer-grid {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo    actions"
            "form    form"
            "suggest suggest";
    }
    .search-drawer-actions { justify-self: end; }
}

.search-panel-form { position: relative; display: flex; align-items: center; gap: .75rem; }
.search-panel-form > i {
    position: absolute;
    left: 1rem;
    color: var(--ink-muted);
    font-size: .95rem;
    pointer-events: none;
}
.search-panel-form input {
    flex: 1;
    min-width: 0;
    height: 46px;
    border: 1px solid var(--concrete);
    border-radius: 999px;
    background: var(--concrete-pale);
    padding: 0 1rem 0 2.6rem;
    font-size: .9rem;
    color: var(--ink);
    outline: none;
    transition: all var(--transition);
}
.search-panel-form input::placeholder { color: var(--ink-muted); }
.search-panel-form input:focus {
    background: #fff;
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(85, 140, 3, .15);
}
.search-panel-form button[type='submit'] {
    flex-shrink: 0;
    height: 46px;
    padding: 0 1.25rem;
    border: none;
    border-radius: 999px;
    background: var(--sage-deepest);
    color: #fff;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    transition: background var(--transition);
}
.search-panel-form button[type='submit']:hover { background: var(--sage-darker); }

.search-suggest { margin-top: 1.1rem; }
.search-suggest-title {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink-muted);
    margin: 0 0 .6rem;
}
.search-suggest-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.search-keyword {
    padding: .4rem .85rem;
    border: 1px solid var(--concrete);
    border-radius: 999px;
    background: #fff;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink);
    transition: all var(--transition);
}
.search-keyword:hover { border-color: var(--sage); background: var(--sage-pale); color: var(--sage-darker); }

.action-btn {
    position: relative;                         /* diem tua cho tooltip rieng, xem [data-tooltip] */
    width: 40px; height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--brand-text);                  /* trung mau chu logo thuong hieu */
    display: inline-grid;
    place-items: center;
    font-size: 1.05rem;
    transition: all var(--transition);
}
.action-btn:hover { background: rgba(255, 255, 255, .6); color: var(--sage-deepest); }

/*
 | Tooltip rieng theo phong cach Song Ngoc, thay cho thuoc tinh "title" mac
 | dinh cua trinh duyet - "title" KHONG the doi mau/kieu bang CSS (tooltip
 | do he dieu hanh ve, khong phai trang), nen phai tu ve bang ::after doc
 | tu data-tooltip. Dung [data-tooltip] lam diem neo, khong can class rieng.
 */
.action-btn[data-tooltip]::after,
.search-toggle[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + .55rem);
    left: 50%;
    transform: translate(-50%, 4px);
    background: var(--sage-deepest);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: .4rem .7rem;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(47, 58, 51, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
    z-index: 30;
}
/* Mui nho tro len, dinh vao canh duoi nut */
.action-btn[data-tooltip]::before,
.search-toggle[data-tooltip]::before {
    content: '';
    position: absolute;
    top: calc(100% + .3rem);
    left: 50%;
    transform: translate(-50%, 4px);
    border: 5px solid transparent;
    border-bottom-color: var(--sage-deepest);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
    z-index: 30;
}
.action-btn[data-tooltip]:hover::after,
.action-btn[data-tooltip]:hover::before,
.action-btn[data-tooltip]:focus-visible::after,
.action-btn[data-tooltip]:focus-visible::before,
.search-toggle[data-tooltip]:hover::after,
.search-toggle[data-tooltip]:hover::before,
.search-toggle[data-tooltip]:focus-visible::after,
.search-toggle[data-tooltip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity var(--transition), transform var(--transition);
}

/* Loi chao canh icon dang nhap: "Xin chao" mo nhat, ten (hoac "Quy khach")
   dam ro ben duoi - cung mau xanh sam voi cac chu nhan hieu khac. */
.header-greeting {
    flex-direction: column;
    line-height: 1.25;
    font-size: .72rem;
    max-width: 8rem;
    margin-right: .25rem;
}
.header-greeting span { color: var(--brand-text); opacity: .8; }
.header-greeting strong {
    font-weight: 700;
    color: var(--sage-deepest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-badge {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 19px; height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sage-deepest);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
}

/* --- Dropdown chung --- */
.dropdown-menu {
    border: 1px solid var(--concrete-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: .5rem;
    font-size: .92rem;
}
.dropdown-item { border-radius: var(--radius-sm); padding: .5rem .8rem; }
.dropdown-item:hover { background: var(--sage-pale); color: var(--sage-darker); }
.dropdown-header { font-size: .82rem; color: var(--ink-muted); }

/* --- Mega menu san pham: tha noi ngay duoi vien thuoc --- */
.mega-menu {
    width: 100%;
    left: 0; right: 0;
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid var(--concrete-light);
    /* Nen duc han - khong cho anh banner phia sau xuyen qua */
    background: linear-gradient(180deg, #ffffff 0%, #fafcfa 100%);
    box-shadow: 0 12px 40px rgba(47, 58, 51, .12);
    padding: 1.6rem 0 1.2rem;
    margin-top: .6rem;
}

/* Xo xuong MUOT: bang menu luon duoc dung san, chi an bang opacity.
   Khong the chuyen dong tren display:none/block - trinh duyet khong noi suy
   giua hai gia tri do, nen bang menu se "bat" ra mot cai. Bang nam o lop
   absolute nen dung san cung khong lam thanh dieu huong cao them. */
.navbar-nav .mega-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    /* Truot len mot chut va hoi thu lai, nhu vua duoc keo xuong tu thanh menu */
    transform: translateY(-.55rem) scaleY(.985);
    transform-origin: top center;
    /* visibility doi CHAM lai bang dung thoi gian truot, de luc dong van con
       thay bang menu mo dan chu khong bien mat ngay lap tuc */
    transition:
        opacity .16s ease,
        transform .22s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear .22s;
    pointer-events: none;
}
.navbar-nav .mega-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1);
    transition:
        opacity .18s ease,
        transform .24s cubic-bezier(.22, .61, .36, 1),
        visibility 0s;
    pointer-events: auto;
}

/* Ba cot chu troi len theo sau bang menu, moi cot cham hon cot truoc mot nhip */
.navbar-nav .mega-menu .col-lg-3,
.navbar-nav .mega-menu .col-md-6,
.navbar-nav .mega-menu .mega-footer {
    opacity: 0;
    transform: translateY(.35rem);
    transition: opacity .2s ease, transform .2s ease;
}
.navbar-nav .mega-menu.show .col-lg-3,
.navbar-nav .mega-menu.show .col-md-6,
.navbar-nav .mega-menu.show .mega-footer { opacity: 1; transform: none; }

.navbar-nav .mega-menu.show .row > *:nth-child(1) { transition-delay: .04s; }
.navbar-nav .mega-menu.show .row > *:nth-child(2) { transition-delay: .08s; }
.navbar-nav .mega-menu.show .row > *:nth-child(3) { transition-delay: .12s; }
.navbar-nav .mega-menu.show .row > *:nth-child(4) { transition-delay: .16s; }
.navbar-nav .mega-menu.show .mega-footer          { transition-delay: .18s; }

/*
 | DIEN THOAI & MAY TINH BANG: bang "San pham" phai an HAN khi chua mo.
 |
 | Chu thich o tren noi bang nam o lop absolute nen dung san khong lam thanh
 | dieu huong cao them. Dieu do chi dung tren man rong. Duoi 992px thanh menu xo
 | doc, bang tro thanh mot khoi tinh trong dong chay - dung san la CHIEM CHO
 | that, du dang opacity: 0 va visibility: hidden.
 |
 | Do duoc tren may 360x780: bang cao 658px, keo menu len 978px trong khi man
 | hinh chi cao 780px. Khach bam nut menu ra mot cot trang menh mong, chi thay
 | "Trang chu" va "San pham" roi khong con gi nua.
 |
 | display: none thi khong con noi suy duoc opacity, tuc mat hieu ung xo muot -
 | doi lai menu dung. Tren dien thoai deu la cham roi mo ngay, khong ai kip
 | thay .16s do.
 */
@media (max-width: 991.98px) {
    .navbar-nav .mega-menu { display: none; }
    .navbar-nav .mega-menu.show { display: block; }

    /*
     | Menu phai NOI ra ngoai dong chay cua thanh dieu huong.
     |
     | Truoc day menu nam trong .navbar nen mo ra la ca thanh dieu huong cao
     | theo - co luc len toi 800px. sticky-top khong giu duoc mot khoi cao hon
     | man hinh: no cuon di, keo logo va nut dong ra khoi khung nhin. Khach mo
     | menu xong khong con thay nut de dong lai.
     |
     | absolute theo .navbar (top: 100% = ngay duoi thanh) thay vi fixed theo
     | man hinh: khong phai phu thuoc vao --nav-h va --topbar-h, hai bien do
     | main.js do luc chay nen truoc do van con la 0.
     */
    .site-header .navbar { position: relative; }

    /*
     | Mo khoa cat cho rieng vien thuoc cua thanh dieu huong.
     |
     | style.css co luat chung '.container { overflow-x: clip }' de chan phan tu
     | con lam tran ngang. Menu bay gio la absolute va tho han ra ngoai vien
     | thuoc, nen chinh luat do xen cut no: do duoc menu cao 323px nhung vien
     | thuoc chi cao 76px, phan con lai bi cat sach - bam nut ra menu trang tron.
     | Phai viet kem .navbar cho du nang de thang luat chung.
     */
    .site-header .navbar > .container { overflow: visible; }

    .navbar-collapse {
        position: absolute;
        top: calc(100% - .35rem);
        left: 12px;
        right: 12px;
        z-index: 5;
    }

    .navbar-collapse.show {
        max-height: calc(100vh - var(--nav-h) - var(--topbar-h) - 2rem);
        overflow-y: auto;
        /* Cuon het menu thi dung lai, khong lan sang cuon trang phia sau */
        overscroll-behavior: contain;
        padding: .35rem 1.1rem 1.1rem;
        border-radius: var(--radius-lg);
        /* Nen duc: menu nam de len anh banner, trong suot la khong doc duoc chu */
        background: #fff;
        box-shadow: 0 18px 48px rgba(47, 58, 51, .18);
    }
}

/* Ai dat may bot chuyen dong thi bo het, chi con hien va an */
@media (prefers-reduced-motion: reduce) {
    .navbar-nav .mega-menu,
    .navbar-nav .mega-menu.show,
    .navbar-nav .mega-menu .col-lg-3,
    .navbar-nav .mega-menu .col-md-6,
    .navbar-nav .mega-menu .mega-footer {
        transition: none;
        transform: none;
    }
}

/* Cau noi vo hinh lap khoang ho giua muc menu va bang xo xuong,
   de chuot di tu chu xuong bang khong bi "rot" ra ngoai lam dong menu. */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -.7rem;
    left: 0;
    right: 0;
    height: .7rem;
}
.mega-parent {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 600;
    font-size: .95rem;
    color: var(--ink);
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--concrete-light);
    margin-bottom: .6rem;
}
.mega-parent i {
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--sage-pale);
    color: var(--sage-darker);
    display: grid; place-items: center;
    font-size: .95rem;
    flex-shrink: 0;
}
.mega-parent:hover { color: var(--sage-darker); }
.mega-parent:hover i { background: var(--sage); color: #fff; }

.mega-children { list-style: none; padding: 0; margin: 0; }
.mega-children a {
    position: relative;
    display: inline-block;
    padding: .3rem 0 .38rem;
    font-size: .885rem;
    color: var(--ink-soft);
    transition: color .3s cubic-bezier(.4, 0, .2, 1);
}
/* Cung kieu gach chan chay tu giua ra nhu menu chinh */
.mega-children a::after {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    /* Da vuot QUA padding-bottom (.38rem) - dieu nay khong sao, lop absolute
       khong bi padding chan. Gach chan gio nam ngay day vung duoi chu (g, y),
       tang them nua la no cat ngang duoi cua "Huong chong say". */
    bottom: .5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--sage);
    opacity: 0;
    transition: left .35s cubic-bezier(.4, 0, .2, 1),
                right .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease;
}
.mega-children a:hover { color: var(--sage-darker); }
.mega-children a:hover::after { left: 0; right: 0; opacity: 1; }

/* --- Cot phai: ba the anh dan toi ba nhom hang lon --- */
.mega-promo-head {
    /* Duong ke duoi tieu de nay phai thang hang voi duong ke cua ba cot chu ben
       trai. Bootstrap dat box-sizing: border-box nen min-height tinh CA padding
       va vien - de 30px suong thi hut mat 10.6px, phai cong lai. */
    display: flex;
    align-items: center;
    min-height: calc(30px + .6rem + 1px);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 600;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--concrete-light);
    margin: 0 0 .6rem;
}
.mega-promo { display: grid; gap: .5rem; }

.mega-promo-card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease;
}
.mega-promo-card img {
    width: 84px;
    height: 63px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-sm);
    /* Anh cat tu banner zone nen sang hon nen menu - vien mo keo no lai gan
       voi cac cot chu ben trai, khong bi noi bat qua muc */
    box-shadow: 0 1px 4px rgba(47, 58, 51, .14);
}
.mega-promo-card span { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.mega-promo-card strong {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
    transition: color .25s ease;
}
.mega-promo-card em {
    font-style: normal;
    font-size: .76rem;
    color: var(--ink-muted);
}
.mega-promo-card:hover { background: var(--sage-pale); border-color: var(--sage-light); }

.mega-footer {
    margin-top: 1.25rem;
    padding-top: .9rem;
    border-top: 1px solid var(--concrete-light);
    text-align: center;
}
.mega-footer a { font-weight: 600; font-size: .9rem; color: var(--sage-darker); }

@media (max-width: 991.98px) {
    .mega-menu { border-radius: var(--radius); padding: 1rem; }
    .mega-menu .container { padding: 0; }
    .header-actions { flex-wrap: wrap; }
}


/* --------------------------------------------------------------------------
   6. BANNER TRANG CHU (HERO)
   -------------------------------------------------------------------------- */
/*
 | Cao dung bang MOT MAN HINH (tru thanh thong tin tren cung neu co).
 |
 | --nav-h la CHIEU CAO THAT cua .site-header, do bang Playwright chu khong
 | do dong bang JS (ban Laravel cu dung main.js do luc chay, ban Next nay
 | khong con no) - GHI CHET theo dung breakpoint navbar-expand-lg (992px):
 | header cao 85px o desktop (menu ngang day du) nhung chi 75px duoi 992px
 | (menu rut gon ve hamburger). Truoc day chi co MOT gia tri 76px cho moi
 | man hinh, dung o duoi 992px nhung LECH 9px o desktop - .hero va .vct-hero
 | (trang Ve chung toi) deu keo len bang -var(--nav-h) de nam sau header, lech
 | 9px do lo ra thanh mot dai mau nen ho phia tren banner, chi ro tren man
 | rong. Header doi chieu cao (vd sua padding navbar) thi phai do lai va sua
 | hai gia tri nay.
 */
:root { --topbar-h: 0px; --nav-h: 76px; }
@media (min-width: 992px) {
    :root { --nav-h: 86px; }
}

.hero {
    position: relative;
    height: calc(100vh - var(--topbar-h));
    min-height: 34rem;
    padding-top: var(--nav-h);
    background: #fdfefe;                       /* trung mau nen cua anh banner */
    overflow: hidden;
}
/* Keo len nam duoi thanh dieu huong (chi khi banner la khoi dau tien) */
.site-main > .hero:first-child { margin-top: calc(-1 * var(--nav-h)); }

/*
 | Chuyen mo dan (gradient fade / fade transition) sang mau nen cua khoi ke
 | tiep - truoc day anh banner cat cup dut khoat ngay canh duoi, doi mau dot
 | ngot nhin kho khoc. z-index: 2 de nam TREN anh (z-index 1) nhung DUOI
 | chu/cum dieu khien (hero-watermark 3, hero-container 4) - pointer-events:
 | none de khong chan bam vao anh nho.
 |
 | SUA: dich sang --sage-pale (khong phai --concrete-pale nhu ban dau). Ly do
 | goc "mo dan sang .section-featured (--concrete-pale)" da SAI tu khi trang
 | chu them khoi CategoryCarousel (.cat-carousel, nen --sage-pale) chen vao
 | ngay sau Hero - gradient van fade dung nhung fade toi mot mau XAM khong
 | khop voi mau XANH that su cua khoi ke tiep, nen van lo duong ráp cung.
 */
.hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 10rem;
    max-height: 40%;
    background: linear-gradient(180deg, transparent 0%, var(--sage-pale) 100%);
    z-index: 2;
    pointer-events: none;
}

/* --- Anh banner phu kin man hinh ---
   Cac anh xep chong len nhau, moi luc chi hien mot anh.
   Chua 25px o canh tren de anh nam thap xuong mot chut. */
.hero-visual {
    position: absolute;
    inset: 25px 0 0 0;
    z-index: 1;
    pointer-events: none;
}
.hero-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity .8s cubic-bezier(.4, 0, .2, 1),
                transform 1.2s cubic-bezier(.4, 0, .2, 1);
}
.hero-banner.is-active { opacity: 1; transform: scale(1); }

/* --- Chu mo chim phia sau ---
   Canh giua man hinh va co chu rong hon be ngang trang,
   nho vay chu bi cat ca hai dau -> lo dau chu ben trai lan ben phai. */
.hero-watermark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: clamp(10rem, 33vw, 33rem);
    font-weight: 700;
    letter-spacing: .01em;
    line-height: .8;
    color: rgba(85, 140, 3, .12);
    user-select: none;
    pointer-events: none;
    z-index: 3;

    /* Mac dinh an - chi hien khi bam vao mot trong ba o anh nho */
    opacity: 0;
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1);
}
.hero-watermark.is-active { opacity: 1; }

/* --- Khung noi dung (container cua Bootstrap) --- */
.hero-container {
    position: relative;
    z-index: 4;
    height: 100%;
    display: flex;
    align-items: flex-start;
    padding-top: .5rem;
}

/* --- Cot thong tin ben trai ---
   Cac khoi chu xep chong len nhau, chi hien khoi cua san pham dang chon.
   O banner chinh thi khong khoi nao hien. */
.hero-infos {
    position: relative;
    width: 100%;
    max-width: 25rem;
    min-height: 11rem;
}
.hero-info {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.4, 0, .2, 1),
                transform .5s cubic-bezier(.4, 0, .2, 1);
}
.hero-info.is-active { opacity: 1; transform: none; pointer-events: auto; }

.hero-note {
    font-size: .8rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin: 0;
}

.hero-rating {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .35rem;
}
.hero-rating .stars { color: #f0a92e; font-size: .8rem; letter-spacing: .06em; }
.hero-rating .rating-text { font-size: .74rem; font-weight: 600; color: var(--ink); }
.hero-rating small { font-weight: 400; color: var(--ink-muted); }

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.2vw, 2.05rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--sage-darker);
    margin-bottom: .35rem;
}
/* Cho xuong dong rieng -> tieu de khong bi day chu "nhien" rot xuong hang duoi */
.hero-title-note {
    display: block;
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 400;
    color: var(--ink-muted);
    margin-top: .2rem;
}

.hero-scent {
    font-size: .78rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .7rem;
}

/* ==================================================================
   CUM DIEU KHIEN GOC PHAI: anh nho chon banner + the san pham
   ================================================================== */
.hero-side {
    position: absolute;
    right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    bottom: 2.5rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .85rem;
    max-width: calc(100vw - 3rem);
}

/* --- Ba o anh nho: vua xem truoc banner, vua la nut chuyen --- */
.hero-thumbs { display: flex; gap: .6rem; }

.hero-thumb {
    position: relative;
    width: 84px;
    height: 62px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 14px;
    overflow: hidden;
    background: var(--concrete-pale);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(47, 58, 51, .12);
    transition: all var(--transition);
}
.hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.hero-thumb:hover { transform: translateY(-3px); }
.hero-thumb:hover img { transform: scale(1.08); }

/* O dang duoc chon */
.hero-thumb.is-active {
    border-color: var(--sage-deepest);
    box-shadow: 0 8px 22px rgba(9, 38, 1, .3);
}
/* Vach xanh chay o day o dang chon */
.hero-thumb::after {
    content: '';
    position: absolute;
    left: 50%; right: 50%;
    bottom: 0;
    height: 3px;
    background: var(--sage-deepest);
    transition: left .4s cubic-bezier(.4, 0, .2, 1),
                right .4s cubic-bezier(.4, 0, .2, 1);
}
.hero-thumb.is-active::after { left: 0; right: 0; }

/* Ten banner hien khi ro chuot vao */
.thumb-label {
    position: absolute;
    inset: auto 0 0 0;
    padding: .5rem .4rem .3rem;
    font-size: .62rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, transparent, rgba(9, 38, 1, .85));
    opacity: 0;
    transform: translateY(6px);
    transition: all var(--transition);
}
.hero-thumb:hover .thumb-label,
.hero-thumb.is-active .thumb-label { opacity: 1; transform: none; }

/* --- The san pham, doi theo banner dang hien --- */
.hero-cards {
    width: 23rem;
    max-width: 100%;

    /* Kinh trong suot */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, .52) 0%,
        rgba(246, 249, 246, .30) 55%,
        rgba(234, 243, 234, .34) 100%
    );
    backdrop-filter: blur(26px) saturate(145%);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    border: 1px solid rgba(255, 255, 255, .58);
    border-radius: var(--radius-lg);
    padding: .45rem;
    box-shadow:
        0 14px 44px rgba(47, 58, 51, .13),
        inset 0 1px 0 rgba(255, 255, 255, .75);
}

/* Khung co dinh - cac the xep chong len nhau */
.cards-viewport { position: relative; height: 4.15rem; }

.hero-card {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .4rem .55rem;
    border-radius: calc(var(--radius-lg) - .45rem);
    color: var(--ink);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .45s var(--transition), transform .45s var(--transition), background var(--transition);
}
.hero-card.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero-card:hover { background: rgba(255, 255, 255, .45); color: var(--ink); }

.card-thumb {
    width: 52px; height: 52px;
    border-radius: 12px;
    object-fit: cover;
    background: var(--concrete-pale);
    flex-shrink: 0;
}

.card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.card-name {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-meta { display: flex; align-items: baseline; gap: .4rem; }
.card-price { font-size: .92rem; font-weight: 700; color: var(--sage-darker); }
.card-meta del { font-size: .75rem; color: var(--ink-muted); }
.card-meta em {
    font-style: normal;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: var(--earth-dark);
    padding: .05rem .35rem;
    border-radius: 5px;
}

.card-go { font-size: .95rem; color: var(--ink-muted); flex-shrink: 0; transition: all var(--transition); }
.hero-card:hover .card-go { color: var(--sage-deepest); transform: translate(2px, -2px); }

/* --- Man hinh nho --- */
@media (max-width: 1399.98px) {
    .hero-cards { width: 21rem; }
    .hero-thumb { width: 76px; height: 56px; }
}

/*
 | Xep doc tu tren xuong: chu truoc, anh sau.
 |
 | Hai dieu kien chu khong phai mot. Truoc day o day chi co max-width: khung
 | nao rong tu 1200px tro len la an bo cuc desktop, ke ca khi no CAO hon RONG.
 | Man hinh doc (1200x1440 chang han) rot vao dung cai bay do: hero cao bang ca
 | man hinh, object-fit: cover phong anh len het co, chai san pham chiem tron
 | khung con dong chu mo 'scentra' de len than chai.
 | orientation: portrait bat het cac khung doc, bat ke rong bao nhieu.
 */
@media (max-width: 1199.98px), (orientation: portrait) {
    .hero {
        height: auto;
        min-height: 0;
        padding: calc(var(--nav-h) + 1.5rem) 0 2.5rem;
    }
    /*
     | relative chu KHONG phai static.
     |
     | .hero-banner ben trong la position: absolute. Khung nay ma static thi anh
     | khong con moc de bam, no nhay ra bam theo .hero - cao gan bang ca man
     | hinh. Anh goc 1600x900 (ty le 1.78) bi ep vao khung 360x599 (ty le 0.60),
     | object-fit: cover phong to roi cat mat hai ben: tren dien thoai dong chu
     | in tren anh banner bi cut ca dau lan cuoi.
     |
     | aspect-ratio thay cho height: 58vw de khung luon dung ty le anh, khong
     | phai canh tay mot con so vw moi lan doi anh banner.
     */
    .hero-visual {
        position: relative;
        aspect-ratio: 16 / 9;
        height: auto;
        margin: 1.75rem 0 1.25rem;

        /* Reset top/right/bottom/left kế thừa từ "inset: 25px 0 0 0" ở bản
           desktop (position: absolute). Đổi sang position: relative mà không
           reset thì "top: 25px" vẫn còn hiệu lực như một độ lệch relative —
           ảnh bị đẩy xuống 25px nhưng luồng bên dưới không hay biết, nên khối
           chữ tính vị trí như thể ảnh chưa bị đẩy, kết quả là chữ đè lên đáy
           ảnh trên điện thoại/tablet. */
        inset: auto;
    }
    /*
     | Chu mo chim phia sau. Tren man rong no co y rong hon trang de bi cat ca
     | hai dau, nhung o khung hep thi phan tho ra lam trang cuon ngang duoc
     | (do duoc 19-21px tren iPhone). max-width + overflow an de no van bi cat
     | dep nhu y do ma khong day be ngang trang.
     */
    .hero-watermark {
        top: 32%;
        font-size: clamp(7rem, 38vw, 20rem);
        max-width: 100vw;
        overflow: hidden;
    }

    .hero-container { display: block; height: auto; padding-top: 0; }

    /*
     | Ban desktop dung position: absolute + min-height doan truoc (9rem) de
     | cac khoi chu chong len nhau lam hieu ung crossfade. Mo ta san pham dai
     | (vd Nuoc lau bep, 3 dong) cao hon 9rem thi absolute khong biet duong
     | nao ma tu gian - chu tran ra ngoai khung va bi hang anh nho (.hero-side)
     | o duoi de len.
     |
     | Tren mobile doi sang hien/an bang display: chi khoi dang chon moi nam
     | trong luong trang, nen .hero-infos tu cao dung bang noi dung that -
     | dai bao nhieu cung khong tran, va khong khoi nao dang chon (banner
     | chinh) thi tu nhien cao bang 0, khong can doan hay dung :has() nua.
     | Doi lai la mat crossfade mo dan tren mobile, chi con doi ngay - chap
     | nhan duoc vi anh banner van fade muot, chi chu la doi cung.
     */
    .hero-infos { max-width: 100%; min-height: 0; }
    .hero-info {
        position: static;
        display: none;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .hero-info.is-active { display: block; }

    .hero-side {
        position: static;
        align-items: center;
        margin: 1.25rem auto 0;
        max-width: 30rem;
    }
    .hero-cards { width: 100%; background: rgba(255, 255, 255, .9); }
}

@media (max-width: 575.98px) {
    .hero-thumb { width: 68px; height: 50px; }
}


/* --------------------------------------------------------------------------
   7. ZONE LON TREN TRANG CHU (nha cua, xe o to...)
   -------------------------------------------------------------------------- */
/* padding-top khong co tac dung o day: moi zone deu la zone-cover, luon bi
   .zone-cover ghi de padding-top: 0 (anh tran vien). Chi con padding-bottom
   la khoang cach that giua zone nay va zone/khoi ke tiep - dong bo voi
   .section-featured (2.5rem desktop, xem ben duoi) de moi khoang cach giua
   cac khoi tren trang giong nhau, khong noi rong noi hep. */
.zone { padding: 2.5rem 0; }

/* Zone chan doi nen cho hai khoi phan biet nhau - gradient sage nhat thay vi
   xam concrete-pale, dung chung cong thuc voi .section-featured/.breadcrumb-bar */
.zone:nth-child(even) { background: linear-gradient(180deg, #fff 0%, var(--sage-pale) 100%); }

.zone-intro { margin-bottom: 3.25rem; }

/* Zone chan: dao anh sang phai */
.zone-flip .zone-media { order: 2; }

/* ==================================================================
   BO CUC ANH TRAN VIEN - anh chiem het be ngang, chu de len anh
   ================================================================== */
.zone-cover { padding-top: 0; }

.zone-band {
    position: relative;
    width: 100%;
    margin-bottom: 3.25rem;
}
.zone-band-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Lop chu phu len anh */
.zone-band-inner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}
.zone-band .zone-body {
    position: relative;
    width: min(46%, 34rem);
    margin-left: auto;                         /* chu nam ben phai */
}
/* Zone chan: chu doi sang trai */
.zone-flip .zone-band .zone-body { margin-left: 0; margin-right: auto; }

/* Mang trang mo phia sau chu - anh sang toi the nao chu van doc duoc */
.zone-band .zone-body::before {
    content: '';
    position: absolute;
    inset: -2rem -2.5rem;
    z-index: -1;
    border-radius: var(--radius-lg);
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, .92) 0%,
        rgba(255, 255, 255, .78) 55%,
        rgba(255, 255, 255, 0) 100%);
}

/* So thu tu o bo cuc tran vien: nam ngay tren chu */
/*
 | So thu tu va nhan chu in hoa nam CUNG mot dong.
 |
 | Hai the deu la inline-block nen chung tu dung canh nhau, nhung truoc day
 | khong co margin-right: chu "HOME FRAGRANCE" dinh sat vao o so, nhin nhu bi
 | de len nhau - ro nhat tren dien thoai vi khoi chu hep lai.
 | vertical-align: middle cho ca hai vi mac dinh chung xep theo duong chan chu,
 | ma o so cao hon nhan nen nhan bi tut xuong lech mot doan.
 */
.zone-band .zone-number {
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-right: .6rem;
    margin-bottom: .75rem;
    background: var(--sage-deepest);
    border: none;
    font-size: 1.5rem;
    padding: .25rem .6rem .3rem;
}

.zone-band .zone-eyebrow {
    vertical-align: middle;
    margin-bottom: .75rem;
}

/* ---------- Zone co ANH NEN TOI: doi chu sang mau sang ---------- */
.zone-dark .zone-band .zone-body::before {
    background: radial-gradient(ellipse at center,
        rgba(12, 18, 14, .82) 0%,
        rgba(12, 18, 14, .62) 55%,
        rgba(12, 18, 14, 0) 100%);
}

.zone-dark .zone-band .zone-eyebrow { color: var(--sage-light); }
.zone-dark .zone-band .zone-title   { color: #fff; }
.zone-dark .zone-band .zone-desc    { color: rgba(255, 255, 255, .82); }

.zone-dark .zone-band .zone-highlights li { color: rgba(255, 255, 255, .9); }
.zone-dark .zone-band .zone-highlights i {
    background: rgba(255, 255, 255, .16);
    color: var(--sage-light);
}

.zone-dark .zone-band .zone-cat {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .3);
    color: #fff;
}
.zone-dark .zone-band .zone-cat i  { color: var(--sage-light); }
.zone-dark .zone-band .zone-cat em { background: rgba(255, 255, 255, .18); color: #fff; }
.zone-dark .zone-band .zone-cat:hover {
    background: var(--sage-light);
    border-color: var(--sage-light);
    color: var(--sage-deepest);
}
.zone-dark .zone-band .zone-cat:hover i,
.zone-dark .zone-band .zone-cat:hover em { color: var(--sage-deepest); }

.zone-dark .zone-band .zone-link { color: var(--sage-light); }
.zone-dark .zone-band .zone-number { background: var(--sage-light); color: var(--sage-deepest); }

/* --- Anh cua zone --- */
.zone-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--concrete-light);
}
.zone-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.4, 0, .2, 1);
}
.zone:hover .zone-image img { transform: scale(1.04); }

/* So thu tu zone */
.zone-number {
    position: absolute;
    top: 1.1rem;
    left: 1.1rem;
    font-family: var(--font-display);
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: rgba(47, 58, 51, .32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 14px;
    padding: .4rem .75rem .5rem;
}

/* --- Noi dung zone --- */
.zone-eyebrow {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: .5rem;
}

.zone-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--sage-darker);
    margin-bottom: .75rem;
}

.zone-desc {
    font-size: .9rem;
    line-height: 1.8;
    color: var(--ink-soft);
    margin-bottom: 1.25rem;
    max-width: 34rem;
}

/* Gach dau dong uu diem */
.zone-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.zone-highlights li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .865rem;
    color: var(--ink);
    padding: .18rem 0;
}
.zone-highlights i {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: .22rem;
    border-radius: 50%;
    background: var(--sage-pale);
    color: var(--sage-darker);
    display: grid; place-items: center;
    font-size: .7rem;
}

/* Danh muc con dang the bam */
.zone-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.6rem;
}
.zone-cat {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .85rem;
    border: 1px solid var(--concrete);
    border-radius: 999px;
    background: #fff;
    font-size: .82rem;
    font-weight: 500;
    color: var(--ink);
    transition: all var(--transition);
}
.zone-cat i { font-size: .9rem; color: var(--sage-dark); transition: color var(--transition); }
.zone-cat em {
    font-style: normal;
    font-size: .7rem;
    color: var(--ink-muted);
    background: var(--concrete-pale);
    border-radius: 999px;
    padding: .02rem .4rem;
    transition: all var(--transition);
}
.zone-cat:hover {
    border-color: var(--sage);
    background: var(--sage-darker);
    color: #fff;
    transform: translateY(-2px);
}
.zone-cat:hover i { color: #fff; }
.zone-cat:hover em { background: rgba(255, 255, 255, .22); color: #fff; }

/* Lien ket "Xem tat ca" - gach chan chay tu giua ra */
.zone-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sage-deepest);
    padding-bottom: .3rem;
}
.zone-link::before {
    content: '';
    position: absolute;
    left: 50%; right: 50%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
    transition: left .35s cubic-bezier(.4, 0, .2, 1),
                right .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease;
}
.zone-link:hover { color: var(--sage-deepest); }
.zone-link:hover::before { left: 0; right: 0; opacity: 1; }
.zone-link i { transition: transform var(--transition); }
.zone-link:hover i { transform: translateX(4px); }

/*
 | Bang chuyen san pham duoi moi zone (components/ZoneProductCarousel.tsx) -
 | thay cho luoi Bootstrap .zone-products cu (4 the vua khit mot hang, khong
 | con gi de xem them). Giu dung nhip so the vua khung ma soTheVuaKhung()
 | trong component tinh (4 the >=992px, 3 the 768-991px, 2 the <768px) -
 | flex-basis o day PHAI khop dung cong thuc do, doi mot ben khong doi ben
 | kia thi the du se khong lo ra ngoai de truot duoc (xem chu thich tuong tu
 | o .cat-track trong globals.css).
 */
.zone-carousel-viewport { overflow: hidden; margin: 0 -.5rem; }
.zone-carousel-track {
    display: flex;
    --zc-gap: 1.5rem;
    gap: var(--zc-gap);
    padding: 0 .5rem .25rem;
    will-change: transform;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.zone-product-card {
    flex: 0 0 calc((100% - 3 * var(--zc-gap)) / 4); /* >=992px: 4 the vua khung */
    min-width: 0;
}

.zone-carousel-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; }

.zone-carousel-dots { display: flex; align-items: center; gap: .4rem; }
.zone-carousel-dot {
    width: 7px; height: 7px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--concrete);
    cursor: pointer;
    transition: all var(--transition);
}
.zone-carousel-dot.is-active { width: 22px; background: var(--sage); }

.zone-carousel-arrows { display: flex; gap: .5rem; }
.zone-carousel-arrow {
    width: 44px; height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1.5px solid var(--sage);
    background: transparent;
    color: var(--sage-darker);
    cursor: pointer;
    transition: all var(--transition);
}
.zone-carousel-arrow:hover:not(:disabled) { background: var(--sage-dark); border-color: var(--sage-dark); color: var(--white); }
.zone-carousel-arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 991.98px) and (min-width: 768px) {
    .zone-product-card { flex-basis: calc((100% - 2 * var(--zc-gap)) / 3); } /* 3 the vua khung */
}
@media (max-width: 767.98px) {
    .zone-carousel-track { --zc-gap: .875rem; }
    .zone-product-card { flex-basis: calc((100% - var(--zc-gap)) / 2); } /* 2 the vua khung */
    .zone-carousel-arrow { width: 40px; height: 40px; }
}

/* --- Man hinh nho --- */
@media (max-width: 991.98px) {
    .zone { padding: 1.75rem 0; }
    .zone-intro { margin-bottom: 2.25rem; }
    .zone-flip .zone-media { order: 0; }       /* dien thoai: anh luon nam tren */
    .zone-image { aspect-ratio: 16 / 10; }
    .zone-desc { max-width: 100%; }

    /*
     | Man hinh hep: chi so/eyebrow/tieu de/mo ta con de len anh - anh goc
     | duoc thiet ke san mot nua trong (phai o zone thuong, trai o zone-flip)
     | danh rieng cho chu. Gach dau dong + danh muc + lien ket (.zone-extra)
     | dai qua kho vua trong nua trong do khi thu hep lai, nen roi xuong duoi
     | anh, tren nen trang binh thuong - xem ban ".zone-extra-mobile" o JSX,
     | render rieng ben ngoai .zone-band cho dung muc dich nay.
     |
     | Ban desktop: anh tu quyet dinh chieu cao .zone-band (theo ty le that
     | cua no), chu de tuyet doi len tren. Tren man hep dao nguoc lai: chu
     | (.zone-band-inner, gio chi con so/eyebrow/tieu de/mo ta) nam trong
     | luong binh thuong de TU QUYET DINH chieu cao khoi - anh chuyen sang
     | tuyet doi, phu kin bang object-fit: cover va nghieng object-position
     | ve phia nua trong cua anh, luon vua khop voi chieu cao do.
     */
    .zone-cover { padding-top: 0; }
    .zone-band { margin-bottom: 0; }

    .zone-band-img {
        position: absolute;
        inset: 0;
        height: 100%;
        z-index: 0;
        object-position: 90% center;               /* nghieng ve nua trong ben phai */
    }
    .zone-flip .zone-band-img { object-position: 10% center; }  /* zone-flip: nua trong o ben trai */

    .zone-band-inner {
        position: relative;
        z-index: 1;
        display: block;
        padding: 1.25rem 0 2.25rem;                /* dem tren giam - chu nam len cao hon */
    }
    .zone-band .zone-body,
    .zone-flip .zone-band .zone-body {
        width: min(56%, 15rem);                    /* hep lai -> chu dat sat ben phai hon, mo ta xuong nhieu dong hon */
        text-align: center;                        /* can giua ca cum so/eyebrow/tieu de/mo ta */
    }

    /* Chu tren anh dang qua to so voi khung anh da thu nho lai - giam bot */
    .zone-band .zone-number  { font-size: 1.1rem; padding: .2rem .5rem .25rem; margin-bottom: .5rem; }
    .zone-band .zone-eyebrow { font-size: .62rem; margin-bottom: .5rem; }
    .zone-band .zone-title   { font-size: 1.15rem; margin-bottom: .5rem; }
    .zone-band .zone-desc    { font-size: .66rem; line-height: 1.55; margin-bottom: 0; }

    /*
     | Mang trang mo (::before) o ban desktop chi phu mot khoang nho quanh
     | khoi chu tren banner rat cao - tren man hep khoi chu chiem gan het
     | .zone-band da thu ngan lai, nen mang mo nay phinh to trum ca anh, nhin
     | nhu anh bi loang mau/loi. Tat han o man hep, khong can nua vi chu da
     | co nen anh nghieng ve vung sang/toi phu hop rieng cho no.
     */
    .zone-band .zone-body::before { display: none; }

    /* Khoi gach dau dong/danh muc/lien ket roi xuong duoi anh */
    .zone-extra-mobile { margin-top: 1.75rem; margin-bottom: 2rem; }
}


/* --------------------------------------------------------------------------
   8. DANH GIA KHACH HANG (bang chuyen)
   -------------------------------------------------------------------------- */
.reviews {
    padding: 5rem 0 5.5rem;
    background: linear-gradient(180deg, #fff 0%, var(--sage-pale) 100%);
    overflow: hidden;
}

/* Desktop: dem duoi 5rem cua zone truoc do + dem tren 5rem cua .reviews
   cong lai thanh 160px - khoang trong rat lon giua hang the san pham cuoi
   va tieu de "Khach hang noi gi". Giam rieng ca hai dau, chi anh huong den
   zone NAM NGAY TRUOC .reviews (:has selector) de khong dung den khoang
   cach giua cac zone voi nhau. */
@media (min-width: 992px) {
    .zone:has(+ .reviews) { padding-bottom: 2rem; }
    .reviews { padding-top: 2.5rem; }
}

/*
 | --- Dau khoi ---
 | Can giua, khong con flex space-between nhu ban cu - dung theo dung bo cuc
 | mau tham khao (tieu de lon can giua o tren, carousel "hé mép" ba the o
 | duoi, cum diem tin cay/avatar nam DUOI dai the chu khong o tren tieu de).
 */
.reviews-head {
    max-width: 38rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}
/* Nhan tren cung dang VIEN THUOC (pill co nen), khac .section-eyebrow chu
   thuong (khong nen) dung o cac khoi khac - rieng khoi nay theo dung mau */
.reviews-eyebrow {
    display: inline-block;
    padding: .35rem .9rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--shadow);
    margin-bottom: 1rem;
}
.reviews-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--sage-darker);
    margin: 0 0 .75rem;
}
.reviews-desc { color: var(--ink-soft); line-height: 1.7; margin: 0; font-size: .92rem; }

/* Cum "vai khach khac + diem trung binh" - DUOI dai the (xem review-card cho
   phan the), khong con o tren tieu de nhu ban truoc */
.reviews-trust {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: fit-content;
    margin: 2.5rem auto 0;
    padding: .5rem 1.1rem .5rem .5rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: var(--shadow-lg);
}
.reviews-trust-avatars { display: flex; }
.reviews-trust-avatar {
    width: 30px; height: 30px;
    margin-left: -.6rem;
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(135deg, var(--sage), var(--sage-light));
    color: #fff;
    font-family: var(--font-display);
    font-size: .7rem;
    font-weight: 700;
    display: grid;
    place-items: center;
}
.reviews-trust-avatar:first-child { margin-left: 0; }
.reviews-trust .stars { color: #f0a92e; font-size: .85rem; letter-spacing: .08em; }
.reviews-trust p { font-size: .82rem; color: var(--ink-muted); margin: 0; }
.reviews-trust strong { color: var(--ink); }

/* --- Carousel "hé mép": the truoc/sau lo mot phan hai ben, the dang xem noi bat o giua --- */
.reviews-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Danh sach doc rieng cho dien thoai - AN mac dinh (tablet/desktop dung
   carousel o tren), chi hien lai trong @media duoi 768px */
.reviews-list-mobile-boc { display: none; }

/*
 | Khung chua the: dinh vi TUYET DOI ben trong (xem .review-card) thay vi
 | flex + margin am nhu ban truoc. Vi sao doi: flex sap xep lai THU TU nguon
 | (truoc/dang-xem/sau la 3 danh gia KHAC NHAU moi lan bam) nen trinh duyet
 | khong lam muot duoc buoc nhay vi tri - the chi mo/to tai cho roi BAT sang
 | vi tri moi, khong thay duoc dang "truot". Dinh vi tuyet doi + transform
 | (translateX) thi moi doi vai tro (vd tu "sau" thanh "dang-xem") chi la doi
 | GIA TRI transform tren CUNG mot the (React khop theo key=review.id), trinh
 | duyet noi suy muot tu vi tri cu sang moi that.
 */
.reviews-track {
    /* Con cua no dinh vi TUYET DOI nen tu no khong con chieu rong that -
       phai dat rong bang dung the dang xem (khop .review-card), khong thi
       flex sap sap lai thanh 0 va hai nut mui ten dinh sat vao nhau o giua */
    position: relative;
    flex-shrink: 0;
    width: 34rem;
    max-width: 90vw;
    min-height: 21rem;
    margin: .75rem 0;
}

/* Rong hon .container mac dinh (xl:1140/xxl:1320) - carousel "hé mép" can
   nhieu cho hai ben hon de khoang cach voi the mo ro rang, khong bi chat */
@media (min-width: 1200px) {
    .reviews .container { max-width: 78rem; } /* 1248px */
}
@media (min-width: 1400px) {
    .reviews .container { max-width: 88rem; } /* 1408px */
}

/* --- Mot the danh gia ---
   Kieu dang CHUNG (dung o ca carousel "hé mép" desktop/tablet lan danh sach
   doc mobile) chi co nen/bo goc/dem - vi tri (tuyet doi hay nam trong luong
   binh thuong) tuy noi dung */
.review-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.6rem;
}

/* --- Carousel "hé mép" (tablet/desktop): dinh vi tuyet doi de truot muot --- */
.reviews-track .review-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 34rem;
    max-width: 90vw;
    min-height: 21rem;
    padding: 2.2rem;
    /*
     | 1.15s, cung mot duong cong "emphasized" cho CA transform lan opacity
     | (truoc do transform .65s / opacity .55s LECH nhau - opacity xong truoc
     | roi transform con chay tiep, tao cam giac khong dong bo/giat nhe o
     | cuoi). Keo dai them (0.8s -> 1.15s theo yeu cau "cham lai" khi bam nut
     | mui ten) + dong bo hai thuoc tinh thi muot han. Bo han filter (khong
     | con mask-image/filter nao doi nua tu khi bo mask-image).
     */
    transition: transform 1.15s cubic-bezier(.65, 0, .35, 1), opacity 1.15s cubic-bezier(.65, 0, .35, 1);
    /* Bao trinh duyet don rieng lop GPU cho transform/opacity - khong co dong
       nay, the 31rem + bong do lon (.review-card-dang-xem) de bi giat/lag
       khi doi vi tri vi trinh duyet ve lai (repaint) tren CPU moi khung hinh
       thay vi hop thanh (composite) tren GPU. */
    will-change: transform, opacity;
}

.review-card-dang-xem {
    transform: translateX(-50%) scale(1);
    z-index: 3;
    /*
     | KHONG dung var(--shadow-lg) (blur 48px) nua - do la nguyen nhan THAT
     | su gay ra lop "mo mo" ngay giao voi the ben canh bao lau nay (khong
     | phai do opacity/mask minh chinh): bong do 48px lan ca sang the mo ke
     | ben, tao thanh mot mang xam-xam de bi hieu nham la "chua het mo". Rieng
     | the nay dung bong nho hon, gon duoi than the, khong lan ngang.
     */
    box-shadow: 0 10px 24px rgba(47, 58, 51, .16);
}

/*
 | The truoc/sau: goc RO NGUYEN NHAN gay "mo mo" o giao diem may lan truoc
 | KHONG PHAI opacity/mask cua chinh no - la bong do 48px cua the dang xem
 | (var(--shadow-lg)) lan sang, da sua o .review-card-dang-xem ben tren roi.
 | Vi vay o day KHONG con can mask-image/opacity giam nua - de opacity:1,
 | khong mask, RO Y HET the dang xem trong toan bo phan dang thay duoc; CHI
 | phan biet qua kich thuoc nho hon (scale .9) va khong co bong do.
 */
.review-card-truoc,
.review-card-sau {
    z-index: 1;
    opacity: 1;
    box-shadow: none;
    pointer-events: none;
}
.review-card-truoc { transform: translateX(calc(-50% - 23rem)) scale(.9); }
.review-card-sau { transform: translateX(calc(-50% + 23rem)) scale(.9); }

/*
 | Hai "nha ga" ben ngoai truoc/sau - AN han (opacity 0) nhung van co vi tri
 | rieng, xa hon truoc/sau mot doan. Moi danh gia khong lot vao 3 the dang
 | hien deu dung tam o day (xem lopThe() trong Reviews.tsx) thay vi bi go
 | khoi DOM - nho co "cho dau" san nay, khi doi active 1 buoc the nao cung
 | chi nhich sang MOT nac ke ben (xa-sau -> sau -> dang-xem...) chu khong bat/
 | tat dot ngot nua.
 */
.review-card-xa-truoc,
.review-card-xa-sau {
    z-index: 0;
    opacity: 0;
    box-shadow: none;
    pointer-events: none;
}
.review-card-xa-truoc { transform: translateX(calc(-50% - 40rem)) scale(.85); }
.review-card-xa-sau { transform: translateX(calc(-50% + 40rem)) scale(.85); }

.review-head {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin-top: auto;
    padding-top: 1rem;
}
/* Anh dai dien khach hang. Chua co anh that -> hien chu cai dau ten. */
.review-avatar {
    width: 44px; height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sage), var(--sage-light));
    color: #fff;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
}
img.review-avatar {
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(47, 58, 51, .12);
}
.review-who { flex: 1; display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.review-who strong { font-size: .92rem; color: var(--ink); }
.review-who small { font-size: .74rem; color: var(--ink-muted); }

/* Chu dan, dai it ca 4 dong du danh gia dai ngan khac nhau - card van deu nhau */
.review-content {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 1.1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-rating {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.review-rating b { font-size: .8rem; color: var(--ink-muted); font-weight: 600; }
.review-rating .stars { color: #f0a92e; font-size: .82rem; letter-spacing: .05em; }

/* San pham khach da mua - dau tick nho goc the, bam vao xem san pham */
.review-product {
    flex-shrink: 0;
    color: var(--sage);
    font-size: 1.2rem;
    line-height: 1;
    transition: color var(--transition);
}
.review-product:hover { color: var(--sage-deepest); }

/*
 | --- Nut chuyen ---
 | Nho, nen trang, vien manh, tuc DUNG VAO CHO GIAO giua the mo va the dang
 | xem (margin am keo lai gan sat, khong con lo lung rieng ngoai khoang trong
 | nhu ban truoc) - dung mau tham khao.
 */
.reviews-nav {
    position: relative;
    flex-shrink: 0;
    width: 38px; height: 38px;
    border: 1px solid var(--concrete-light);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: .85rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: all var(--transition);
    z-index: 4;
}
/* Day ra xa hon, gan mep ngoai cua the mo hai ben chu khong con tuc sat
   vao chinh giua nua */
.reviews-prev { margin-right: 13rem; }
.reviews-next { margin-left: 13rem; }
.reviews-nav:hover { background: var(--sage-darker); border-color: var(--sage-darker); color: #fff; transform: scale(1.08); }

/* 1024: hé mép it lai cho vua khung hep hon */
@media (max-width: 1199.98px) and (min-width: 768px) {
    .reviews-track .review-card, .reviews-track { width: 26rem; }
    .review-card-truoc { transform: translateX(calc(-50% - 17rem)) scale(.9); }
    .review-card-sau { transform: translateX(calc(-50% + 17rem)) scale(.9); }
    .review-card-xa-truoc { transform: translateX(calc(-50% - 30rem)) scale(.85); }
    .review-card-xa-sau { transform: translateX(calc(-50% + 30rem)) scale(.85); }
    .reviews-prev { margin-right: 10.5rem; }
    .reviews-next { margin-left: 10.5rem; }
}

/*
 | Duoi 768: BO HAN carousel "hé mép" (vuot tay tung cai kho doc het nhieu
 | danh gia tren man hep), thay bang KHUNG CUON DOC rieng, cao co dinh (khoang
 | 3 the, thay cai thu 4 he mep phia duoi de goi y con nua) - keo/cuon de xem
 | tiep, KHONG dung nut "Xem thêm" (ban truoc dung nut mo rong dan chieu cao,
 | nhung het danh gia roi lai khong co duong thu gon - khung cuon cao co dinh
 | giai quyet gon hon: luon cung mot chieu cao, cuon len xuong thoai mai).
 |
 | Lop mo (.reviews-list-mobile-che) do JS (kiemTraCuonMobile trong
 | Reviews.tsx) bat/tat theo vi tri cuon that - CHI hien khi con noi dung ben
 | duoi chua cuon toi, tu bien mat khi da cuon sat day.
 */
@media (max-width: 767.98px) {
    .reviews { padding: 3.25rem 0 3.75rem; }
    .reviews-head { text-align: left; margin: 0 0 2rem; }
    .reviews-carousel { display: none; }

    /* Lop NGOAI khong cuon - chi de neo lop mo dung vao day KHUNG NHIN (xem
       chu thich trong Reviews.tsx vi sao can lop nay rieng) */
    .reviews-list-mobile-boc { display: block; position: relative; }

    .reviews-list-mobile {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* 34rem (~3 the) thay vi 50rem cu - khung cu cao gan bang ca man
           hinh, ngon tay hau nhu luon dat trong khung nen MOI lan vuot deu bi
           khung nuot mat, khong "tran" ra ngoai de cuon tiep trang duoc. */
        max-height: 34rem;
        overflow-y: auto;
        /*
         | contain CHAN HAN viec cuon tran sang trang khi vuot het khung nay -
         | dung y ban dau la tranh hieu ung bat/nay lai (rubber-band) nhung
         | lai gay dung "ket cung, khong lot ra duoc" nhu nguoi dung bao. Doi
         | ve auto (mac dinh): cuon het khung thi TU DONG chuyen sang cuon
         | trang, dung hanh vi thong thuong cua danh sach long ben trong.
         */
        overscroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y proximity;
        padding-bottom: .25rem;
    }
    .reviews-list-mobile .review-card { width: 100%; flex-shrink: 0; scroll-snap-align: start; }

    /* Con cuon duoc nua: phu mot lop mo dan len phia duoi cung, gan khop mau
       nen sage nhat cua chinh khoi .reviews o do - dat tren LOP NGOAI khong
       cuon nen luon dung yen o day khung nhin, khong "troi" theo noi dung */
    .reviews-list-mobile-che::after {
        content: '';
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 5rem;
        background: linear-gradient(180deg, rgba(238, 244, 218, 0) 0%, var(--sage-pale) 90%);
        pointer-events: none;
    }

    /* Man hep: badge tin cay + cum avatar de tran ra ngoai container - thu nho
       avatar/chu va bot khe cho vua, gap chu khong con "tu 9+" bi cat mat */
    .reviews-trust { max-width: 100%; gap: .5rem; padding: .45rem .8rem .45rem .45rem; margin-top: 2rem; }
    .reviews-trust-avatar { width: 24px; height: 24px; font-size: .62rem; }
    .reviews-trust .stars { font-size: .75rem; }
    .reviews-trust p { font-size: .74rem; }
}


/* --------------------------------------------------------------------------
   9. CAM KET (giao hang, doi tra, an toan, gia si)
   -------------------------------------------------------------------------- */
/* Duoi giam tu 5rem xuong 2rem - cung tinh than thu hep khoang trang truoc
   khoi "Nhận ưu đãi" (.newsletter-band) nhu cac trang danh sach san pham */
.promise { padding: 4.5rem 0 2rem; background: #fff; }

.promise-head { text-align: center; margin-bottom: 3rem; }

.promise-item {
    height: 100%;
    text-align: center;
    padding: 2rem 1.25rem;
    border: 1px solid var(--concrete-light);
    border-radius: var(--radius-lg);
    background: #fff;
    transition: all var(--transition);
}
.promise-item:hover {
    border-color: var(--sage-light);
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}

.promise-icon {
    width: 58px; height: 58px;
    margin: 0 auto 1.1rem;
    border-radius: 18px;
    /* Truoc day pha them --earth-light (be vang) nen nhin nghieng xam - doi
       sang gradient thuan sage nhu cac nen khac da sua */
    background: linear-gradient(135deg, var(--sage-pale), #fff);
    color: var(--sage-darker);
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    transition: all var(--transition);
}
.promise-item:hover .promise-icon {
    background: linear-gradient(135deg, var(--sage), var(--sage-light));
    color: #fff;
}

.promise-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: .45rem;
}
.promise-desc {
    font-size: .83rem;
    line-height: 1.7;
    color: var(--ink-muted);
    margin: 0;
}

@media (max-width: 767.98px) {
    .promise { padding: 3rem 0 1.5rem; }
    .promise-head { margin-bottom: 2rem; }
    .promise-item { padding: 1.5rem 1.1rem; }
}


/* --------------------------------------------------------------------------
   10. SECTION CHUNG
   -------------------------------------------------------------------------- */
.section { padding: 4.5rem 0; }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .6rem;
    margin-bottom: 1.5rem;
}
.section-head.text-center { flex-direction: column; align-items: center; }

.section-eyebrow {
    display: block;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sage-dark);
    margin-bottom: .4rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--sage-darker);
    margin: 0;
}
.section-desc { color: var(--ink-muted); max-width: 34rem; margin: .6rem auto 0; }

/* Khoi "San pham noi bat" - gradient sage nhat de tach khoi banner trang phia
   tren, thay cho mau xam concrete-pale nhin xin cu */
.section-featured { background: linear-gradient(180deg, #fff 0%, var(--sage-pale) 100%); }

/* Tablet + desktop: dem tren 4.5rem mac dinh cua .section cong voi banner
   cao het man hinh tao khoang trong 72px truoc tieu de - giam lai, va thu
   nho tieu de cho gon (chu "Top san pham ban chay!" mac dinh kha to).
   Truoc day chi ap dung tu 992px, bo trong khoang 768-991px van dung dem
   4.5rem goc - man tablet nhin thay khoang trong qua lon dung y nguoi dung
   phan anh. */
@media (min-width: 768px) {
    .section-featured { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .section-featured .section-title { font-size: clamp(1.5rem, 2vw, 1.8rem); }
}

/* Desktop: 5 the mot hang thay vi 4 - Bootstrap khong co san luoi 5 cot nen
   ghi de rong cot cua rieng luoi nay (van giu class col-lg-3 trong JSX, chi
   doi CSS). Gutter (padding trai/phai cua tung cot, co che cua Bootstrap)
   giam nua de moi the rong ra ro ret ma khoang cach hai the van gon. */
@media (min-width: 992px) {
    .section-featured .row.g-4 { --bs-gutter-x: .5rem; --bs-gutter-y: 1.5rem; }
    .section-featured .row.g-4 > [class*="col-"] { flex: 0 0 auto; width: 20%; }

    /* The da hep bot vi chia 5 cot - giam bot dem trai/phai ben trong de
       chu ten san pham, gia... co them cho, khong bi bop qua chat. */
    .section-featured .product-body { padding-left: .8rem; padding-right: .8rem; }
}

/* Man hep: banner mobile da tu co dem duoi rieng (.hero co padding-bottom
   2.5rem), cong them 4.5rem mac dinh cua .section thi khoang trong qua lon
   (112px do), rong gan bang mot man hinh dien thoai thap. Giam ca dem tren
   lan dem duoi - zone ke tiep (.zone-cover) da tu co padding-top: 0 nen
   khoang trong sau card san pham la do het o day. */
@media (max-width: 767.98px) {
    .section-featured { padding-top: 1.75rem; padding-bottom: 1.75rem; }

    .section-featured .section-title { font-size: 1.3rem; }
    .section-featured .section-link { font-size: .78rem; }
}

/*
 | Luoi 2 cot san pham tren dien thoai - AP DUNG CHUNG cho moi noi hien luoi
 | san pham (San pham noi bat trang chu, danh muc, trang San pham, tim kiem,
 | yeu thich) - truoc day chi rieng .section-featured duoc chinh (con lai van
 | dung gutter g-4 mac dinh 1.5rem, khien the chat hep tren man 2 cot). Gutter
 | g-4 mac dinh qua rong khi chi co 2 the/hang - giam manh con .5rem de
 | khoang cach hai the ngan lai VA moi the co them chieu rong (gutter nho thi
 | phan tram cot 50% con lai cho the nhieu hon).
 |
 | Zone gioi thieu (.zone-products) KHONG con o day - da doi sang bang chuyen
 | rieng (xem .zone-carousel), khong con la luoi Bootstrap nua.
 */
@media (max-width: 767.98px) {
    .section-featured .row.g-4,
    .luoi-san-pham {
        --bs-gutter-x: .5rem;
        --bs-gutter-y: .875rem;
    }
}

/* Lien ket "Xem tat ca" - cung kieu gach chan chay tu giua ra */
.section-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--sage-deepest);
    padding-bottom: .3rem;
}
.section-link::before {
    content: '';
    position: absolute;
    left: 50%; right: 50%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
    transition: left .35s cubic-bezier(.4, 0, .2, 1),
                right .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease;
}
.section-link:hover { color: var(--sage-deepest); }
.section-link:hover::before { left: 0; right: 0; opacity: 1; }
.section-link i { transition: transform var(--transition); }
.section-link:hover i { transform: translateX(4px); }

@media (max-width: 575.98px) {
    .section-head { flex-direction: column; align-items: flex-start; gap: .75rem; }
}


/* --------------------------------------------------------------------------
   11. THE SAN PHAM
   -------------------------------------------------------------------------- */
.product-card {
    background: #fff;
    border: 1px solid var(--concrete-light);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    border-color: var(--sage-light);
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}

.product-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--concrete-pale);
    overflow: hidden;
}
.product-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}
.product-card:hover .product-thumb img { transform: scale(1.07); }

.product-badges {
    position: absolute;
    top: .6rem; left: .6rem;
    display: flex; flex-direction: column;
    gap: .3rem;
    z-index: 2;
}
.product-badges .badge {
    font-size: .68rem;
    font-weight: 600;
    padding: .32rem .6rem;
    border-radius: 999px;
}
.badge-sale { background: var(--earth-dark); color: #fff; }
.badge-new  { background: var(--sage); color: #fff; }
.badge-out  { background: var(--ink-muted); color: #fff; }

.product-hover {
    position: absolute;
    right: .6rem; bottom: .6rem;
    display: flex; flex-direction: column;
    gap: .4rem;
    opacity: 0;
    transform: translateX(12px);
    transition: all var(--transition);
    z-index: 2;
}
.product-card:hover .product-hover { opacity: 1; transform: translateX(0); }

.hover-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: var(--ink);
    display: grid; place-items: center;
    font-size: .95rem;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    cursor: pointer;
}
.hover-btn:hover { background: var(--sage); color: #fff; }

.product-body { padding: 1rem 1.1rem 1.2rem; flex: 1; display: flex; flex-direction: column; }
.product-cat {
    display: block;
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sage-dark);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-name {
    font-size: .96rem;
    font-weight: 500;
    line-height: 1.45;
    margin: .35rem 0 .3rem;

    /*
     | Ten san pham dai ngan khac nhau lam cac the trong cung mot hang cao
     | khac nhau (.row Bootstrap keo bang chieu cao), gia bi day xuong lech
     | nhau tao khoang trong lon o the co ten ngan. Danh san 2 dong + cat bot
     | dong 3 tro di (line-clamp) de moi the deu chiem cung mot chieu cao,
     | khoang trong truoc gia luon giong nhau du ten dai hay ngan.
     */
    min-height: 2.9em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-name a { color: var(--ink); }
.product-name a:hover { color: var(--sage-darker); }
.product-scent {
    font-size: .78rem;
    color: var(--ink-muted);
    margin-bottom: .6rem;
}
.product-scent i { color: var(--earth-dark); }

.product-price { margin-top: auto; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price-now { font-size: 1.06rem; font-weight: 700; color: var(--sage-darker); }
.price-old { font-size: .84rem; color: var(--ink-muted); text-decoration: line-through; }


/* --------------------------------------------------------------------------
   12. BREADCRUMB
   -------------------------------------------------------------------------- */
.breadcrumb-bar {
    background: linear-gradient(180deg, #fff 0%, var(--sage-pale) 100%);
    padding: .85rem 0;
    border-bottom: 1px solid var(--concrete-light);
}
.breadcrumb { font-size: .85rem; margin: 0; }
.breadcrumb-item a { color: var(--ink-soft); }
.breadcrumb-item a:hover { color: var(--sage-darker); }
.breadcrumb-item.active { color: var(--sage-darker); font-weight: 500; }
.breadcrumb-item + .breadcrumb-item::before { content: '›'; color: var(--ink-muted); }

/*
 | Trang co THANH RIENG tren cung (o day: chi tiet san pham, xem .da-noi-hang
 | trong globals.css) - an banner chay + Header + breadcrumb mac dinh di tren
 | dien thoai, tranh hai lop dieu huong chong nhau. Danh dau bang class
 | .mb-thanh-rieng dat TREN CHINH thanh rieng do (khong quan no nam dau trong
 | cay DOM), :has() o body bat duoc ngay ca khi no nam sau trong noi dung.
 |
 | KHONG an tren may tinh/tablet: cac trang do van dung Header+breadcrumb binh
 | thuong, chi dien thoai moi doi sang thanh rieng gon hon.
 */
@media (max-width: 575.98px) {
    body:has(.mb-thanh-rieng) > .topbar,
    body:has(.mb-thanh-rieng) > .site-header,
    body:has(.mb-thanh-rieng) .breadcrumb-bar {
        display: none;
    }

    /* .py-5 cua Bootstrap dem 3rem tren duoi - bo dem TREN de noi dung bat
       dau sat man hinh, khop voi thanh rieng gio da noi co dinh o do */
    body:has(.mb-thanh-rieng) .container.py-5 {
        padding-top: 0;
    }
}


/* --------------------------------------------------------------------------
   13. TRANG DANH SACH SAN PHAM
   -------------------------------------------------------------------------- */
.filter-panel {
    background: #fff;
    border: 1px solid var(--concrete-light);
    border-radius: var(--radius);
    padding: 1.4rem;
    position: sticky;
    top: 90px;
}
.filter-title {
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: .8rem;
}
/* --- Danh muc dang nhom gap/mo (the <details> cua HTML) --- */

/* Dong "Tat ca san pham" va danh muc khong co con */
.filter-all,
.filter-single,
.filter-group > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.filter-all { margin-bottom: .15rem; }

.filter-all:hover,
.filter-single:hover,
.filter-group > summary:hover { background: var(--sage-pale); color: var(--sage-darker); }

.filter-all.active,
.filter-single.active { background: var(--sage); color: #fff; }

/* An dau tam giac mac dinh cua trinh duyet, dung icon rieng */
.filter-group > summary { list-style: none; }
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::marker { content: ''; }

/* mau ke thua tu .filter-group > summary (chu thuong, hoa dam khi nhom dang
   mo/dang xem - xem .filter-group[open] > summary) thay vi mau lien ket mac
   dinh cua the <a>, vi ten nhom gio la Link (bam vao la sang trang danh muc
   cha, xem FilterPanel.tsx) chu khong con la <span> tinh */
.group-name { flex: 1; line-height: 1.35; color: inherit; }

/* Mui ten - xoay khi mo nhom */
.group-caret {
    font-size: .7rem;
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: transform var(--transition);
}
.filter-group[open] > summary .group-caret { transform: rotate(180deg); }

/* Nhom dang mo, hoac dang xem san pham thuoc nhom do */
.filter-group[open] > summary { color: var(--sage-deepest); font-weight: 600; }
.filter-group > summary.is-open-branch { background: var(--sage-pale); }

/* Danh sach danh muc con */
.filter-sublist { list-style: none; padding: .2rem 0 .5rem .8rem; margin: 0; }
.filter-sublist a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .32rem .65rem;
    border-radius: var(--radius-sm);
    font-size: .845rem;
    color: var(--ink-soft);
    border-left: 2px solid var(--concrete-light);
    transition: all var(--transition);
}
.filter-sublist a:hover { color: var(--sage-darker); border-left-color: var(--sage); }
.filter-sublist a.active {
    color: var(--sage-deepest);
    font-weight: 600;
    border-left-color: var(--sage-deepest);
    background: var(--sage-pale);
}

/* --- O tick dung tich / khoang gia --- */
.filter-checks { list-style: none; padding: 0; margin: 0; }

.filter-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .5rem;
    border-radius: var(--radius-sm);
    font-size: .865rem;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.filter-check:hover { background: var(--sage-pale); }
.filter-check input { position: absolute; opacity: 0; pointer-events: none; }

/* O tron chon khoang gia */
.check-dot {
    width: 17px; height: 17px;
    flex-shrink: 0;
    border: 1.5px solid var(--concrete);
    border-radius: 50%;
    background: #fff;
    position: relative;
    transition: border-color var(--transition);
}
.check-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--sage-deepest);
    transform: scale(0);
    transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.filter-check input:checked ~ .check-dot { border-color: var(--sage-deepest); }
.filter-check input:checked ~ .check-dot::after { transform: scale(1); }

.check-label { flex: 1; }
.filter-check input:checked ~ .check-label { font-weight: 600; color: var(--sage-deepest); }
.filter-check em {
    font-style: normal;
    font-size: .74rem;
    color: var(--ink-muted);
    background: var(--concrete-pale);
    border-radius: 999px;
    padding: .05rem .45rem;
}

/* Vien sang khi di chuyen bang ban phim */
.filter-check input:focus-visible ~ .check-dot {
    box-shadow: 0 0 0 3px rgba(85, 140, 3, .35);
}

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ink-muted);
}
.filter-clear:hover { color: var(--sage-deepest); }

/* --- Offcanvas bo loc tren man hinh hep (FilterOffcanvas.tsx boc FilterPanel.tsx) ---
   Duoi 992px (dung diem dung cua Bootstrap .col-lg-3/.col-lg-9 - tren do cot loc
   da nam san ben trai, duoi do 2 cot xep chong nen phai doi sang offcanvas).
   Nen mo + duong cong truot dung LAI y het ky thuat cua offcanvas ma giam gia
   (.mgg-nen/.mgg-bang trong globals.css) de dong bo cam giac "truot vao" tren
   toan site, chi doi chieu: bo loc truot tu TRAI (giong mot sidebar thu vao/
   thu ra), phieu giam gia truot tu PHAI (giong mot bang tra cuu rieng). */
.filter-mobile-trigger {
    display: none;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .7rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--sage);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--sage-darker);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.filter-mobile-trigger:hover { background: var(--sage-pale); }
.filter-mobile-trigger i { font-size: 1.05rem; }

.filter-nen {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1290;
    background: rgba(15, 20, 14, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility 0s linear .35s;
}
.filter-nen.filter-nen-mo { opacity: 1; visibility: visible; transition: opacity .35s ease; }

.filter-panel-dau { display: none; }

@media (max-width: 991.98px) {
    .filter-mobile-trigger { display: inline-flex; }
    .filter-nen { display: block; }

    .filter-panel-boc {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(21rem, 85vw);
        z-index: 1300;
        background: #fff;
        box-shadow: 1.5rem 0 3rem rgba(15, 20, 14, .18);
        overflow-y: auto;
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .4s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .4s;
    }
    .filter-panel-boc.filter-panel-boc-mo {
        transform: translateX(0);
        visibility: visible;
        transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    }

    /* Ben trong offcanvas: bo sticky/vien/bo goc cua ban desktop - khung ngoai
       (.filter-panel-boc) da lo phan do va bong roi, khong can lam lai */
    .filter-panel-boc .filter-panel {
        position: static;
        top: auto;
        border: 0;
        border-radius: 0;
        padding: 1.25rem;
    }

    .filter-panel-dau {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.1rem 1.25rem;
        border-bottom: 1px solid var(--concrete-light);
        font-weight: 800;
        font-size: 1.05rem;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--ink);
    }
    .filter-panel-dong {
        display: grid;
        place-items: center;
        flex-shrink: 0;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: 0;
        background: none;
        color: var(--ink);
        font-size: 1.1rem;
        cursor: pointer;
        transition: color var(--transition);
    }
    .filter-panel-dong:hover { color: var(--sage-darker); }
}

@media (prefers-reduced-motion: reduce) {
    .filter-nen, .filter-panel-boc { transition: none; }
}

.list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--concrete-light);
}
.list-title { font-family: var(--font-display); font-size: 2rem; margin: 0; }
.list-count { font-size: .85rem; color: var(--ink-muted); }
.sort-form .form-select { min-width: 175px; border-radius: 999px; }

.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    background: linear-gradient(180deg, #fff 0%, var(--sage-pale) 100%);
    border-radius: var(--radius-lg);
}
.empty-state i { font-size: 3rem; color: var(--concrete); display: block; margin-bottom: 1rem; }
.empty-state h5 { margin-bottom: .35rem; }
.empty-state p { color: var(--ink-muted); margin-bottom: 1.25rem; }


/* --------------------------------------------------------------------------
   14. PHAN TRANG
   -------------------------------------------------------------------------- */
.sns-pagination { gap: .35rem; }
.sns-pagination .page-link {
    border: 1px solid var(--concrete-light);
    border-radius: var(--radius-sm) !important;
    color: var(--ink);
    min-width: 40px;
    text-align: center;
    font-size: .9rem;
    padding: .45rem .7rem;
}
.sns-pagination .page-link:hover { background: var(--sage-pale); border-color: var(--sage-light); color: var(--sage-darker); }
.sns-pagination .page-item.active .page-link { background: var(--sage); border-color: var(--sage); color: #fff; }
.sns-pagination .page-item.disabled .page-link { color: var(--concrete); background: #fff; }

/* Nut bam so trang: chi may tinh. Duoi 992px doi sang cuon vo han
   (.luoi-tai-them, xem LuoiSanPham.tsx) - khach dung dien thoai luot lien
   tuc thay vi phai bam trung mot so trang nho tren man hinh cham. */
.phan-trang-nut { display: block; }
.luoi-tai-them { display: none; }

@media (max-width: 991.98px) {
    .phan-trang-nut { display: none; }

    .luoi-tai-them {
        display: flex;
        justify-content: center;
        padding: 2rem 0 1rem;
        min-height: 3rem;
    }
    .luoi-tai-them-chu {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .85rem;
        color: var(--ink-muted);
    }
    /* Xoay tron bao dang tai, giong quy uoc spinner cua Bootstrap Icons */
    .luoi-tai-them-chu i { animation: sns-xoay 1s linear infinite; }
    @keyframes sns-xoay { to { transform: rotate(360deg); } }
}

@media (prefers-reduced-motion: reduce) {
    .luoi-tai-them-chu i { animation: none; }
}


/* --------------------------------------------------------------------------
   15. DANG KY NHAN TIN
   -------------------------------------------------------------------------- */
/* Card lon de chong len dau footer.
   --card-radius dung chung cho ca card va goc tren cua footer -> hai duong bo trung nhau. */
:root { --card-radius: 32px; }

.newsletter-band {
    background: transparent;
    /* Giam tu 3.5rem xuong 1.5rem theo yeu cau - thu hep khoang trang phia
       tren khoi nay o MOI trang (trang chu, danh sach san pham, danh muc, tim
       kiem...) vi khoi nay dung chung qua Newsletter.tsx. */
    padding: 1.5rem 0 0;
    position: relative;
    /* Noi len tren footer. Footer se bi keo len bang margin-top am o muc 13. */
    z-index: 3;
}

/* Dien thoai: thu khoang ho phia tren lai them mot chut nua */
@media (max-width: 991.98px) {
    .newsletter-band { padding-top: .75rem; }
}

/* Le trai/phai trung voi .footer-container de hai khoi thang hang */
.newsletter-container {
    padding-inline: clamp(1rem, 2.5vw, 2.25rem);
}

.newsletter-card {
    background: linear-gradient(120deg, var(--earth) 0%, var(--earth-light) 100%);
    border-radius: var(--card-radius);
    padding: clamp(2rem, 4vw, 3.25rem);
    box-shadow: var(--shadow-lg);
}

.newsletter-title { font-family: var(--font-display); font-size: 1.95rem; margin-bottom: .35rem; }
.newsletter-desc { color: var(--ink-soft); font-size: .95rem; }
.newsletter-form .input-group { background: #fff; border-radius: 999px; padding: .3rem; box-shadow: var(--shadow-sm); }
.newsletter-form .form-control {
    border: none;
    background: transparent;
    padding-left: 1.2rem;
}
.newsletter-form .form-control:focus { box-shadow: none; }
.newsletter-form .btn { border-radius: 999px; white-space: nowrap; }
.newsletter-note { display: block; font-size: .74rem; color: var(--ink-muted); margin-top: .5rem; padding-left: 1.2rem; }


/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
    position: relative;
    /* Xanh sam nhat cua bang mau, khong dung --ink: --ink la xam den (#2f3a33),
       lot duoi mot lop xanh thi ca chan trang ngu sang mau bun. */
    background: var(--sage-deepest);
    color: rgba(255, 255, 255, .7);
    font-size: .9rem;
    overflow: hidden;

    /* Bo goc tren trung ban kinh voi .newsletter-card */
    border-radius: var(--card-radius) var(--card-radius) 0 0;

    /* Keo footer len de nam DUOI phan duoi cua card dang ky nhan tin.
       Con so nay chinh la do chong lan giua card va footer. */
    margin-top: -5rem;
}

/* Le trai/phai sat hon - khong dung .container mac dinh cua Bootstrap
   vi no chua khoang trong kha lon o hai ben tren man hinh rong. */
.footer-container {
    position: relative;
    z-index: 2;
    padding-inline: clamp(1rem, 2.5vw, 2.25rem);
    /* Chua cho phan card chong len (5rem) + khoang tho, de logo khong bi card che */
    padding-top: 4rem;
}

/* Man hinh hep: card cao hon nen giam do chong lan lai cho can doi */
@media (max-width: 767.98px) {
    .site-footer { margin-top: -3rem; }
    .footer-container { padding-top: 2.5rem; }
}

/* ---------- Hoa tiet nen footer: LA ROI ----------
   Phu kin footer va nam DUOI noi dung (z-index 1 so voi 2 cua .footer-container). */
.footer-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.footer-scene {
    /* --sage dang RGB de dung duoc trong rgba() */
    --pat-glow: 85, 140, 3;

    position: relative;
    width: 100%;
    height: 100%;
    min-height: 22rem;
    overflow: hidden;
    /*
     | Xanh la cua thuong hieu, khong phai xanh pha xam.
     |
     | Ba mau cu (#48755b, #3e6549, #365a41) chi bao hoa quanh 24%, trong nhu
     | anh chup da bac mau - trong khi --sage cua shop bao hoa toi 96%. Bo ba
     | moi di tu Avocado xuong Lincoln Green roi gan Smoky Black.
     */
    background:
        radial-gradient(ellipse 70% 90% at 50% 45%, rgba(152, 191, 10, .16) 0%, transparent 72%),
        linear-gradient(180deg, #3d7106 0%, #285c03 55%, #163602 100%);
}

/* Quang sang tho nhe o giua */
.footer-scene .bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28rem;
    height: 28rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--pat-glow), .22) 0%, transparent 62%);
    animation: glowBreathing 6s ease-in-out infinite alternate;
    z-index: 1;
}



/* ---------- La roi ----------
   Moi chiec la tach lam 2 tang chuyen dong doc lap:
     .leaf         -> cot cao bang 100% container, chi lo viec ROI THANG xuong.
                      Vi cao dung bang container nen translateY(100%) = dung mot
                      chieu cao footer -> khong phu thuoc footer cao bao nhieu.
     .leaf::before -> hinh chiec la, tu DU DUA sang hai ben va xoay tron.
   Tach ra nhu vay de hai chuyen dong co chu ky khac nhau, la roi khong bi deu dan
   nhu may. Ca hai deu chay bang transform nen khong gay reflow. */
.leaf-fall {
    position: absolute;
    inset: 0;
    z-index: 5;
    overflow: hidden;
}

.leaf {
    position: absolute;
    top: 0;
    left: var(--left);
    width: var(--size);
    height: 100%;
    animation: leafFall var(--dur) linear var(--delay) infinite;
}

.leaf::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: var(--size);
    height: var(--size);
    /* Bo tron het co 2 goc doi dien -> ra dung dang chiec la */
    border-radius: 0 100% 0 100%;
    background: linear-gradient(135deg,
        rgba(179, 211, 179, .95) 0%,
        rgba(85, 140, 3, .85) 45%,
        rgba(106, 154, 106, .80) 100%);
    box-shadow: 0 0 6px rgba(var(--pat-glow), .35);
    animation: leafSway calc(var(--dur) / 5) ease-in-out infinite alternate;
}

@keyframes leafFall {
    0%   { transform: translateY(-15%); opacity: 0; }
    8%   { opacity: var(--op, .45); }
    88%  { opacity: var(--op, .45); }
    100% { transform: translateY(100%); opacity: 0; }
}

@keyframes leafSway {
    from { transform: translateX(calc(var(--sway) * -1)) rotate(-20deg); }
    to   { transform: translateX(var(--sway))            rotate(40deg); }
}

@keyframes glowBreathing {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: .7; }
    100% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
}

}

/* Man hinh hep: bot mot nua so la cho do roi mat va do ton pin */
@media (max-width: 600px) {
    .leaf:nth-child(even) { display: none; }
}

/* Nguoi dung tat hieu ung chuyen dong trong he dieu hanh -> dung het,
   giu vai chiec la dung yen lam hoa tiet tinh */
@media (prefers-reduced-motion: reduce) {
    .footer-scene .bg-glow,
    .leaf,
    .leaf::before { animation: none; }
    .leaf { opacity: .3; transform: translateY(28%); }
}
/* Cot thuong hieu: logo, mo ta va mang xa hoi deu can giua */
.footer-brand-col { text-align: center; }
.footer-brand { display: flex; align-items: center; justify-content: center; }
.footer-logo { height: 96px; width: auto; }
.footer-brand-col .footer-social { justify-content: center; }
.footer-desc {
    font-size: .875rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .8);
    max-width: 24rem;
    margin-inline: auto;
}

.footer-title {
    color: #fff;
    font-size: 1rem;
    /* Ghi de font-weight 600 mac dinh cua h1-h6 */
    font-weight: 700;
    /* Chu to va dam hon nen gian chu it lai cho khoi ro rac */
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
/* Dung flex + gap thay margin-bottom: gap chi chen giua cac muc nen khoang cach
   deu tuyet doi, ke ca khi mot muc bi xuong hai dong. */
.footer-links, .footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.footer-links li { margin-bottom: 0; }

/* Gach chan chay tu GIUA ra, cung kieu voi menu tren thanh dieu huong.
   Dung ::before + currentColor de gach chan luon cung mau voi chu. */
.footer-links a,
.footer-contact a {
    position: relative;
    display: inline-block;
    /* Gach chan neo o bottom: 0 cua the <a>. Khoang ho giua chu va gach khong
       chi la padding, ma chu yeu la nua khoang dan (half-leading) do
       line-height 1.7 ke thua tu body sinh ra o duoi chan chu. Muon gach sat
       chu thi phai keo line-height xuong truoc, roi moi tinh den padding. */
    line-height: 1.3;
    padding-bottom: .05rem;
    color: rgba(255, 255, 255, .85);
    font-size: .875rem;
    transition: color .3s cubic-bezier(.4, 0, .2, 1);
}
.footer-links a::before,
.footer-contact a::before {
    content: '';
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0;
    transition: left .35s cubic-bezier(.4, 0, .2, 1),
                right .35s cubic-bezier(.4, 0, .2, 1),
                opacity .25s ease;
}
.footer-links a:hover,
.footer-contact a:hover { color: var(--sage-light); }

.footer-links a:hover::before,
.footer-contact a:hover::before { left: 0; right: 0; opacity: 1; }

/* line-height 1.5: dia chi bi xuong hai dong, de nguyen 1.7 cua body thi hai
   dong cua CUNG mot muc lai gian hon khoang cach giua cac muc -> roi mat. */
.footer-contact li { display: flex; gap: .65rem; margin-bottom: 0; font-size: .875rem; line-height: 1.5; }
.footer-contact i { color: var(--sage-light); margin-top: .15rem; flex-shrink: 0; }

/* ---------- Icon mang xa hoi ----------
   Giu nguyen y tuong cua ban goc: dia tron trang, icon den, hover thi mau
   thuong hieu DANG LEN tu day dia va nhan ten bung ra phia tren.
   Ba diem phai sua so voi ban goc de chay duoc trong footer:
     1. Bo `position: absolute; top/left: 50%` - ban goc canh giua man hinh,
        o day can chay inline trong cot thuong hieu.
     2. Nhan ten: ban goc do cung left/right theo tung px cho tung icon, thay
        doi so luong icon la lech het. Doi sang canh giua tren chinh icon do.
     3. Bo `z-index: -1` cua .icons. Trong footer no se tut xuong duoi lop nen.
        Chi can .icon (position: relative + z-index: 1) tu tao stacking context
        la lop mau ::before (z-index: -1) van nam tren dia trang, duoi svg. */
.footer-social {
    display: flex;
    gap: .9rem;
    /* Chua cho tooltip bung len phia tren (~34px) ma khong de vao doan mo ta */
    margin-top: 3.25rem;
}

.footer-social .icons {
    position: relative;          /* moc cho nhan ten dinh vi tuyet doi */
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 50%;
    text-align: center;
}

.footer-social .iconName {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    margin: 0;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    color: #fff;
    border-radius: 3px;
    transform: translateX(-50%) scale(0);
    transition: transform .3s ease;
}
.footer-social .icons:hover .iconName { transform: translateX(-50%) scale(1); }

.footer-social .icons.tiktokIcon:hover .iconName { background: linear-gradient(30deg, #25f4ee, #fe2c55); }
.footer-social .icons.shopeeIcon:hover .iconName { background: #ee4d2d; }
.footer-social .icons.lazadaIcon:hover .iconName { background: linear-gradient(30deg, #ff8a12, #ff1f9c); }

.footer-social .icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

/* Icon co mau thuong hieu ngay tu dau. SVG dung fill="currentColor" nen
   chi can dat `color` la doi duoc ca hinh. */
.footer-social .icon.tiktok { color: #fe2c55; }
.footer-social .icon.shopee { color: #ee4d2d; }
/* Lazada khong co o day: SVG cua no dung <linearGradient> rieng, khong an currentColor */

/* Luoi 3 cot: o giua giu dong ban quyen CHINH GIUA footer,
   cot phai chua icon thanh toan. Cot trai de trong lam doi trong. */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 1.25rem 0;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    font-size: .8rem;
    color: rgba(255, 255, 255, .68);
}
.footer-copy {
    grid-column: 2;
    text-align: center;
}
/* "Than Web" chi la chu nhan manh, khong phai lien ket - dung <strong> chu
   khong dung <a href="#">, de con tro chuot khong doi thanh ban tay va trinh
   doc man hinh khong doc no thanh mot lien ket bam duoc. */
.footer-copy strong { color: #fff; font-weight: 700; }

.footer-payment {
    grid-column: 3;
    justify-self: end;
    display: flex;
    gap: .8rem;
    font-size: 1.25rem;
    color: rgba(255, 255, 255, .6);
}

/* Man hinh hep: xep chong, tat ca can giua */
@media (max-width: 767.98px) {
    .footer-bottom { grid-template-columns: 1fr; }
    .footer-copy, .footer-payment { grid-column: 1; justify-self: center; }
}

/* Ba cot lien ket xich xuong so voi cot thuong hieu ben trai */
@media (min-width: 992px) {
    .footer-nav-col { padding-top: 2.5rem; }
}


/* --------------------------------------------------------------------------
   17. THONG BAO & KHUNG TAM
   -------------------------------------------------------------------------- */
.alert { border: none; border-radius: var(--radius); font-size: .92rem; }
.alert-success { background: var(--sage-pale); color: var(--sage-darker); }
.alert-info    { background: #e8f1f5; color: #3b6b80; }
.alert-warning { background: var(--earth-light); color: var(--earth-deep); }
.alert-danger  { background: #fbeaea; color: #a13b38; }

.placeholder-box {
    background: var(--concrete-pale);
    border: 1.5px dashed var(--concrete);
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
}
.placeholder-icon {
    width: 72px; height: 72px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: #fff;
    color: var(--sage);
    display: grid; place-items: center;
    font-size: 2rem;
    box-shadow: var(--shadow-sm);
}


/* --------------------------------------------------------------------------
   18. TRANG LOI
   -------------------------------------------------------------------------- */
.error-page {
    padding: 6rem 0;
    background: linear-gradient(160deg, var(--sage-pale), #fff 60%);
}
.error-code {
    font-family: var(--font-display);
    font-size: clamp(5rem, 16vw, 9rem);
    font-weight: 700;
    line-height: 1;
    color: var(--sage-light);
}
.error-title { font-family: var(--font-display); font-size: 2rem; margin: .5rem 0 .75rem; }
.error-desc { color: var(--ink-muted); max-width: 30rem; margin: 0 auto 2rem; }


/* --------------------------------------------------------------------------
   19. NUT LEN DAU TRANG
   -------------------------------------------------------------------------- */
/* Nang cao hon chieu cao dai .footer-bottom (~3.9rem) de khi cuon het trang
   nut khong de len cac icon thanh toan o goc phai duoi. */
.btn-back-to-top {
    position: fixed;
    right: 1.25rem; bottom: 4.75rem;
    width: 48px; height: 48px;
    border-radius: 50%;

    /* Kinh mo: van xuyen thau nhung du sang de mui ten xanh dam noi len
       ca tren section nen trang lan tren footer xanh dam. */
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);

    border: 2px solid var(--sage-darker);
    color: var(--sage-darker);
    font-size: 1.35rem;
    display: grid;
    place-items: center;
    /* Vien sang mo ben ngoai giup tach nut khoi nen dam */
    box-shadow:
        0 6px 20px rgba(47, 58, 51, .22),
        0 0 0 4px rgba(255, 255, 255, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: all var(--transition);
    z-index: 1040;
    cursor: pointer;
}
.btn-back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.btn-back-to-top:hover {
    background: var(--sage-darker);
    border-color: var(--sage-darker);
    color: #fff;
    transform: translateY(-3px);
    box-shadow:
        0 10px 26px rgba(47, 58, 51, .3),
        0 0 0 4px rgba(85, 140, 3, .35);
}


/* --------------------------------------------------------------------------
   20. TRANG DANG NHAP QUAN TRI
   -------------------------------------------------------------------------- */
.admin-login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: linear-gradient(140deg, var(--sage-pale), var(--earth-light));
    padding: 2rem 1rem;
}
.admin-login-card {
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}


/* --------------------------------------------------------------------------
   21. TIEN ICH
   -------------------------------------------------------------------------- */
.site-main { min-height: 45vh; }
.text-sage { color: var(--sage-darker) !important; }
.bg-sage-pale { background: var(--sage-pale) !important; }
.bg-earth-light { background: var(--earth-light) !important; }

/* --------------------------------------------------------------------------
   22. BANNER DOC — cot trai trang danh sach san pham, duoi bo loc gia
   (components/BannerDocSanPham.tsx). CUON LIEN TUC tu tren xuong nhu bang
   tin chay: .bd-hop la "cua so" chieu cao CO DINH + overflow:hidden, .bd-track
   ben trong chua danh sach LAP LAI HAI LAN, truot len bang animation CSS dung
   DUNG mot nua chieu cao cua no (translateY(-50%)) - het mot nua la vua het
   DUNG mot lan danh sach that, noi lai khong ai nhan ra moi noi. Dung chuot
   vao thi dung lai (xem .bd-hop:hover) de doc/bam cho de.
   -------------------------------------------------------------------------- */
/*
 | .bd-hop DINH THEO CUON (position: sticky) - khong con keo dan bang chieu
 | cao luoi san pham nua (cach cu lam banner cao hang nghin px, phai cuon rat
 | lau moi het, muon "vua mot cua so" thay vi vay).
 |
 | top: 90px CUNG CON SO voi .filter-panel (phia tren no) nhung HAI KHOI DINH
 | DOC LAP - da do bang Playwright: .filter-panel thuc ra KHONG dinh duoc (no
 | nam trong .filter-panel-boc, mot div thuong cao DUNG BANG no nen khong co
 | "khoang de chay" cho sticky - FilterOffcanvas.tsx), nen no cuon troi binh
 | thuong. Luc banner cham toi diem dinh (top:90, duoi header), bo loc da cuon
 | qua khoi man hinh tu lau (xem chu thich tai .sp-cot-trai cu, da bo - van de
 | tuong tu nhung o day co flex:1 rieng nen khong gap).
 |
 | Chieu cao dung calc(100vh - ...) de "vua mot cua so" - lap day dung phan
 | con lai cua man hinh TU DUOI HEADER, khong phai mot con so cao co dinh.
 | Dung sticky (khong phai fixed) nen tu dung DUNG LAI khi cham day .sp-cot-trai
 | (noi Bootstrap .row da keo cao bang cot luoi san pham ben phai) - tuc la
 | dung dung truoc footer, khong can JS tinh toan gi them.
 */
.bd-hop {
    /* --bd-cao dung CHUNG cho ca .bd-hop (height) va .bd-the (height, xem
       duoi) - .bd-track nam giua gio KHONG con height nua (xem chu thich o
       do) nen "height:100%" tren .bd-the khong con cho de % bam vao, phai
       dua thang cung mot con so qua bien nay, khong thi 2 noi lech nhau. */
    --bd-cao: calc(100vh - 90px - 2rem);

    position: sticky;
    top: 90px;
    width: 100%;
    height: var(--bd-cao);
    min-height: 280px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-top: 1.5rem;
}

.bd-track {
    /* KHONG dat height - de no TU CAO theo dung noi dung that (6 tam da nhan
       doi, vd ~4748px), vi "translateY(-50%)" tinh theo CHIEU CAO CSS CUA
       CHINH NO (khong phai scrollHeight!) - truoc day lam height:100% (bang
       .bd-hop, vd 778px) nen -50% chi la -389px, CHUA DI HET MOT TAM (cao
       778px) da quay dau lap lai -> nhin y nhu "cuon do mot san pham roi
       quay lai chinh no". Da kiem chung that bang Playwright (do transform
       thuc te) truoc khi sua. .bd-hop van cat gon bang overflow:hidden nhu
       cu, khong lien quan gi den chieu cao cua .bd-track. */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation-name: bd-cuon;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation-duration that dat qua inline style trong component (ti le voi
       so banner, toc do pixel/giay giu nguyen du it hay nhieu banner) */
}
/* CO Y khong dung lai khi ren chuot vao - chay AUTO lien tuc, khach muon xem
   ky mot san pham thi bam thang vao no (ca .bd-the la mot Link) */

/* Dao lai huong lan nua: BAT DAU o vi tri goc, CHAY LEN nua track - noi dung
   troi TU DUOI LEN TREN (nguoc voi ban truoc do troi tu tren xuong) */
@keyframes bd-cuon {
    from { transform: translateY(0); }
    to { transform: translateY(-50%); }
}

.bd-the {
    /* Cao DUNG BANG khung nhin (.bd-hop, qua bien --bd-cao - xem chu thich o
       do) - moi luot cuon chi lo ra DUNG mot san pham, khong con canh them
       1/2 cai ben duoi nhu kieu aspect-ratio cu. KHONG dung height:100% vi
       .bd-track (cha truc tiep) khong con height de % bam vao nua. */
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: var(--bd-cao);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
}

.bd-anh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.bd-the:hover .bd-anh { transform: scale(1.06); }

.bd-phu {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 38, 1, 0) 40%, rgba(9, 38, 1, .78) 100%);
}

.bd-noi-dung {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.25rem 1.35rem;
    color: #fff;
}

.bd-giam {
    display: inline-block;
    background: var(--sage-light);
    color: var(--sage-deepest);
    font-size: .74rem;
    font-weight: 700;
    padding: .2rem .55rem;
    border-radius: 999px;
    margin-bottom: .6rem;
}

.bd-ten {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 .3rem;
    /* Toi da 2 dong, du thi cat bang "..." - khong de ten dai day tran qua gia/nut */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bd-gia {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sage-light);
    margin: 0 0 .9rem;
}

/* Nut "Xem ngay" nam NGAY TRONG tung banner, cuon theo cung banner do - khong con la nut rieng dung ben ngoai */
.bd-nut {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    color: var(--sage-darker);
    font-size: .84rem;
    font-weight: 600;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    transition: all var(--transition);
}
.bd-the:hover .bd-nut { background: var(--sage); color: #fff; gap: .6rem; }

/* An tren dien thoai/may tinh bang - cot loc tro thanh ngan keo rieng (FilterOffcanvas.tsx), khong co cho cho banner */
@media (max-width: 991.98px) {
    .bd-hop { display: none; }
}

/* Nguoi dung bat "giam chuyen dong" (Reduce Motion) - dung cuon, chi con hien tinh */
@media (prefers-reduced-motion: reduce) {
    .bd-track { animation: none; }
}