/* ==========================================================================
   ELITE SPORT — HE THONG GIAO DIEN
   Nap SAU fonts.css va tokens.css, va SAU bootstrap.min.css.

   Muc luc:
     [1] Nen tang va typography
     [2] Cau noi Bootstrap
     [3] Nut
     [4] Icon
     [5] The Pitch — the san pham
     [6] Chip, trang thai, panel, empty
     [7] Bang du lieu
     [8] Header
     [9] Footer
    [10] Layout dung chung
    [11] Widget tro ly (chuyen tu style.css)
    [12] Chuyen dong
    [13] Responsive
   ========================================================================== */


/* ==========================================================================
   [1] NEN TANG VA TYPOGRAPHY
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

body {
    /* Footer luon sat day man hinh ke ca khi noi dung ngan (gio hang trong,
       trang loi...) thay vi lo lung o giua. */
    display: flex;
    flex-direction: column;
    /* dvh chu khong phai vh: tren Safari iOS thanh dia chi co gian lam layout
       nhay neu dung vh. */
    min-height: 100dvh;
    font-family: var(--es-font-body);
    font-size: var(--es-text-md);
    line-height: var(--es-leading-body);
    color: var(--es-ink);
    /* To nen tuong minh, khong de trong suot */
    background-color: var(--es-canvas);
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--es-t-slow) var(--es-ease),
                color var(--es-t-slow) var(--es-ease);
}

/* Anh nen the thao la tai nguyen noi bo; chi lop trang tri dich chuyen cham.
   Noi dung va chu nam tren be mat dac, khong bi anh nen lam giam do tuong phan. */
body.es-storefront { isolation: isolate; }
body.es-storefront::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../img/sports-atmosphere.webp") center / cover no-repeat;
    opacity: var(--es-scene-opacity);
    transform: scale(1.08) translate3d(-1%, 0, 0);
    transition: opacity var(--es-t-slow) var(--es-ease);
}

@keyframes es-scene-drift {
    50% { transform: scale(1.13) translate3d(1%, -1%, 0); }
}

@media (prefers-reduced-motion: no-preference) {
    body.es-storefront::before { animation: es-scene-drift 42s ease-in-out infinite; }
}


body > main {
    flex: 1 0 auto;
    /* BAT BUOC. `main` la flex item cua `body`, ma flex item mac dinh co
       `min-width: auto` nghia la KHONG co lai duoi kich thuoc noi dung. Mot cai
       bang rong (gio hang, /admin/products) se day `main` phinh ra va lam CA
       TRANG cuon ngang, du bang da nam trong `.es-tablewrap` co overflow-x.
       Do duoc 416px tran ngang o /admin/products truoc khi them dong nay. */
    min-width: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--es-font-display);
    font-weight: 700;
    color: var(--es-ink);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

a {
    color: var(--es-ink);
    text-underline-offset: 3px;
}

a:hover {
    color: var(--es-ink-2);
}

/* Focus mac dinh theo nen trang; brand/campaign ghi de theo be mat thuc,
   khong theo theme cua trang cha. Quang mo khong thay the vong vien. */
:focus-visible {
    outline: 2px solid var(--es-focus);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--es-focus-glow);
    border-radius: 2px;
}

/* --- Thang chu ----------------------------------------------------------- */

.es-display {
    font-family: var(--es-font-display);
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: .98;
    text-wrap: balance;
    margin: 0;
}

.es-h1 {
    font-family: var(--es-font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.1;
    margin: 0;
}

.es-h2 {
    font-family: var(--es-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.18;
    margin: 0;
}

.es-h3 {
    font-family: var(--es-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.32;
    margin: 0;
}

.es-body  { font-size: var(--es-text-md); line-height: var(--es-leading-body); max-width: 65ch; }
.es-small { font-size: var(--es-text-sm); line-height: 1.55; }

.es-muted   { color: var(--es-ink-2); }
.es-muted-3 { color: var(--es-ink-3); }

/* Meta: thuong hieu, mon the thao, ma SKU, nhan cot. */
.es-meta {
    font-family: var(--es-font-mono);
    font-size: var(--es-text-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--es-ink-3);
}

/* Moi con so trong he thong deu mono + tabular, de cac cot gia trong bang
   thang hang tuyet doi bat ke chu so nao. */
.es-num,
.es-price,
.es-price-lg,
.es-price-old {
    font-family: var(--es-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.es-price    { font-size: var(--es-text-md); font-weight: 600; letter-spacing: -.01em; color: var(--es-ink); }
.es-price-lg { font-size: var(--es-text-xl); font-weight: 600; letter-spacing: -.01em; color: var(--es-ink); }
.es-price-old {
    font-size: var(--es-text-sm);
    font-weight: 400;
    color: var(--es-ink-3);
    text-decoration: line-through;
}


/* ==========================================================================
   [2] CAU NOI BOOTSTRAP

   Bootstrap 5.3 ban CDN NUONG CUNG ma hex vao bien cap component
   (`.btn-primary { --bs-btn-bg: #0d6efd }`) va KHONG tham chieu nguoc lai
   `--bs-primary`. Doi `--bs-primary` o `:root` se KHONG lan toa vao nut,
   pagination hay vong focus. Phai ghi de tung property cap component, va gom
   het vao mot cho de biet chinh xac dang danh nhau voi framework o dau.
   ========================================================================== */

:root {
    --bs-body-font-family: var(--es-font-body);
    --bs-body-color: var(--es-ink);
    --bs-body-bg: var(--es-canvas);
    --bs-border-color: var(--es-line);
    --bs-secondary-color: var(--es-ink-2);
    --bs-tertiary-color: var(--es-ink-3);
    --bs-emphasis-color: var(--es-ink);
    --bs-link-color: var(--es-ink);
    --bs-link-hover-color: var(--es-ink-2);
    --bs-focus-ring-color: var(--es-focus-glow);
}

/* --- O nhap -------------------------------------------------------------- */

.form-control,
.form-select {
    background-color: var(--es-surface);
    /* --line-strong chu khong phai --line: o nhap la thu nguoi dung thao tac
       duoc nen duong bao phai dat 3:1 (WCAG 1.4.11). Nen o nhap chi cach nen
       trang 1.08:1, neu vien cung mo not thi o nhap khong con hinh dang. */
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: 1rem;
    min-height: var(--es-control-height);
    padding: 11px 14px;
    transition: border-color var(--es-t-base) var(--es-ease),
                box-shadow var(--es-t-base) var(--es-ease);
}

.form-control::placeholder {
    color: var(--es-ink-3);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--es-surface);
    border-color: var(--es-ink);
    color: var(--es-ink);
    box-shadow: 0 0 0 2px var(--es-focus), 0 0 0 5px var(--es-focus-glow);
    outline: none;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--es-pitch);
    color: var(--es-ink-3);
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--es-danger);
    background-image: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--es-danger);
    box-shadow: 0 0 0 2px var(--es-danger), 0 0 0 5px var(--es-focus-glow);
}

.invalid-feedback {
    color: var(--es-danger);
    font-size: .875rem;
}

.form-label {
    font-family: var(--es-font-body);
    font-size: var(--es-text-sm);
    font-weight: 500;
    color: var(--es-ink-2);
    margin-bottom: var(--es-2);
}

.form-text {
    color: var(--es-ink-3);
    font-size: .875rem;
}

.form-check-input {
    border-color: var(--es-line-strong);
    background-color: var(--es-surface);
    /* Vung cham: o tich mac dinh 16px la qua nho tren dien thoai */
    width: 1.15em;
    height: 1.15em;
    margin-top: .18em;
}

.form-check-input:checked {
    background-color: var(--es-ink);
    border-color: var(--es-ink);
}

.form-check-input:focus {
    border-color: var(--es-ink);
    box-shadow: 0 0 0 2px var(--es-focus), 0 0 0 5px var(--es-focus-glow);
}

.form-check-label {
    color: var(--es-ink);
    font-size: var(--es-text-sm);
    /* O tich cua Bootstrap chi cao 18px. Nhan chu moi la vung nguoi dung bam
       trung, nen no phai du cao — 40px, dung nguong 44px vi rail loc co toi 11
       mon the thao, cao them nua thi phai cuon qua nhieu. */
    display: inline-flex;
    align-items: center;
    min-height: 40px;
}

/* --- Flash message ------------------------------------------------------- */

.alert {
    border-radius: var(--es-r-md);
    border: 1px solid var(--es-line);
    background-color: var(--es-surface);
    color: var(--es-ink);
    padding: var(--es-3) var(--es-4);
    font-size: var(--es-text-sm);
}

/* Dai mau ben trai thay cho nen mau ruc: giu duoc bang mau mot accent, va
   van phan biet duoc loai thong bao. */
.alert-success,
.alert-info,
.alert-warning,
.alert-danger {
    border-left-width: 3px;
}

.alert-success { border-color: var(--es-success); background-color: var(--es-success-soft); }
.alert-info    { border-color: var(--es-info); background-color: var(--es-info-soft); }
.alert-warning { border-color: var(--es-warning); background-color: var(--es-warning-soft); }
.alert-danger  { border-color: var(--es-danger); background-color: var(--es-danger-soft); }

.alert-success { color: var(--es-success); }
.alert-info    { color: var(--es-info); }
.alert-warning { color: var(--es-warning); }
.alert-danger  { color: var(--es-danger); }

/* --- Breadcrumb ---------------------------------------------------------- */

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--es-ink-3);
    --bs-breadcrumb-item-active-color: var(--es-ink-3);
    font-size: var(--es-text-sm);
    margin-bottom: var(--es-5);
}

.breadcrumb a {
    color: var(--es-ink-2);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--es-ink);
    text-decoration: underline;
}

/* --- Phan trang ---------------------------------------------------------- */

.pagination {
    --bs-pagination-color: var(--es-ink);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--es-line);
    --bs-pagination-hover-color: var(--es-ink);
    --bs-pagination-hover-bg: var(--es-pitch);
    --bs-pagination-hover-border-color: var(--es-line);
    --bs-pagination-focus-color: var(--es-ink);
    --bs-pagination-focus-bg: var(--es-pitch);
    --bs-pagination-focus-box-shadow: 0 0 0 2px var(--es-focus), 0 0 0 5px var(--es-focus-glow);
    /* Trang hien tai la mot trang thai "dang chon" nen duoc dung volt */
    --bs-pagination-active-color: var(--es-on-volt);
    --bs-pagination-active-bg: var(--es-volt);
    --bs-pagination-active-border-color: var(--es-volt);
    --bs-pagination-disabled-color: var(--es-ink-3);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--es-line);
    --bs-pagination-border-radius: var(--es-r-sm);
    --bs-pagination-padding-x: 14px;
    --bs-pagination-padding-y: 9px;
    gap: var(--es-2);
}

.page-link {
    font-family: var(--es-font-mono);
    font-size: var(--es-text-sm);
    font-weight: 500;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Dropdown va offcanvas ----------------------------------------------- */

.dropdown-menu {
    --bs-dropdown-bg: var(--es-surface);
    --bs-dropdown-border-color: var(--es-line);
    --bs-dropdown-link-color: var(--es-ink);
    --bs-dropdown-link-hover-color: var(--es-ink);
    --bs-dropdown-link-hover-bg: var(--es-pitch);
    --bs-dropdown-link-active-color: var(--es-on-volt);
    --bs-dropdown-link-active-bg: var(--es-volt);
    --bs-dropdown-border-radius: var(--es-r-md);
    --bs-dropdown-padding-y: var(--es-2);
    --bs-dropdown-item-padding-y: 10px;
    --bs-dropdown-item-padding-x: var(--es-4);
    box-shadow: var(--es-shadow-2);
    font-size: var(--es-text-sm);
    min-width: 13rem;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    min-height: var(--es-control-height);
}

.dropdown-divider {
    border-top-color: var(--es-line);
}

.offcanvas {
    background-color: var(--es-brand-bg);
    color: var(--es-brand-fg);
    --bs-offcanvas-border-color: var(--es-brand-line);
}

.offcanvas .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
    /* Mac dinh Bootstrap la 32px, duoi nguong cham 44px */
    width: 44px;
    height: 44px;
    background-size: 16px;
    opacity: .8;
}

.offcanvas .btn-close:hover { opacity: 1; }


/* ==========================================================================
   [3] NUT — 3 cap + 1 danger

   LUAT: mau volt danh RIENG cho hanh dong day khach di tiep trong phieu mua
   hang (them gio, checkout, dat hang, thanh toan). Toi da MOT nut volt trong
   mot vung nhin. Moi hanh dong khac dung mau muc hoac vien.
   ========================================================================== */

.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--es-2);
    padding: 11px 20px;
    /* Vung cham toi thieu 44px */
    min-height: 44px;
    border: 1.5px solid transparent;
    border-radius: var(--es-r-md);
    background-color: transparent;
    font-family: var(--es-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    /* Nhan nut khong bao gio duoc xuong 2 dong o desktop. Nhan toi da 3 tu. */
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease),
                color var(--es-t-base) var(--es-ease),
                transform var(--es-t-fast) var(--es-ease),
                box-shadow var(--es-t-base) var(--es-ease);
}

.es-btn:hover  { transform: translateY(-1px); }
.es-btn:active { transform: translateY(0) scale(.98); }

.es-btn:disabled,
.es-btn.is-disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.es-btn--lg { padding: 14px 28px; min-height: 52px; font-size: var(--es-text-md); }

/* --sm chi dung o ngu canh day dac tren DESKTOP (nut trong mot hang bang,
   nut trong rail loc). Khong dung cho hanh dong chinh tren mobile: 40px nam
   duoi nguong cham 44px. */
.es-btn--sm { padding: 8px 14px; min-height: 40px; font-size: .875rem; border-radius: var(--es-r-sm); }

.es-btn--block { width: 100%; }

/* Cap 1 */
.es-btn--primary {
    background-color: var(--es-volt);
    border-color: var(--es-volt);
    color: var(--es-on-volt);
}
.es-btn--primary:hover  { color: var(--es-on-volt); box-shadow: var(--es-shadow-2); }
.es-btn--primary:active { background-color: var(--es-volt-press); border-color: var(--es-volt-press); }
/* Tren nen volt, ca vong volt lan quang volt deu vo hinh */
.es-btn--primary:focus-visible { outline-color: var(--es-ink); box-shadow: none; }

/* Cap 2 */
.es-btn--secondary {
    background-color: var(--es-action);
    border-color: var(--es-action);
    color: var(--es-on-action);
}
.es-btn--secondary:hover,
.es-btn--secondary:active {
    background-color: var(--es-action-hover);
    border-color: var(--es-action-hover);
    color: var(--es-on-action);
    box-shadow: var(--es-shadow-2);
}

/* Cap 3 */
.es-btn--ghost {
    /* Nut ghost khong co nen rieng: vien la thu DUY NHAT bao no la mot nut */
    border-color: var(--es-line-strong);
    color: var(--es-ink);
}
.es-btn--ghost:hover {
    border-color: var(--es-ink);
    background-color: var(--es-surface);
    color: var(--es-ink);
}

/* Danger: khong bao gio nen do dac */
.es-btn--danger {
    border-color: var(--es-alert);
    color: var(--es-alert);
}
.es-btn--danger:hover {
    background-color: var(--es-surface);
    border-color: var(--es-alert);
    color: var(--es-alert);
}

/* Link chu, thay cho cap "quiet" da bo */
.es-link {
    color: var(--es-ink-2);
    font-size: var(--es-text-sm);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color var(--es-t-base) var(--es-ease);
}
.es-link:hover { color: var(--es-ink); }


/* ==========================================================================
   [4] ICON
   Dung sprite SVG noi bo nhung trong base.html (khong goi CDN — xem ghi chu
   ve may demo khong co mang trong scripts/fetch_fonts.py).
   ========================================================================== */

.es-icon {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    /* fill: currentColor de icon tu doi mau theo chu bao quanh */
    fill: currentColor;
    vertical-align: -.18em;
    flex-shrink: 0;
}

.es-icon--lg { width: 1.4em; height: 1.4em; }


/* ==========================================================================
   [5] THE PITCH — the san pham

   Anh san pham cua du an co nen TRONG SUOT (da do: 67-89% pixel trong suot
   hoan toan, bong do mau den alpha thap). Nho vay san pham ghep duoc len bat
   ky nen nao va tran ra ngoai khung ma khong lo vien trang. Do la chat lieu
   rieng cua du an nay, va la cho cá tinh nam.
   ========================================================================== */

.es-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.es-product:hover { color: inherit; }

.es-product__pitch {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--es-r-lg);
    background-color: var(--es-card-sky);
    border: 1px solid var(--es-line);
    /* KHONG vien, KHONG bong o trang thai nghi: o san da tu tach khoi canvas
       nho chenh mau. Them vien nua la quay ve card Bootstrap mac dinh. */
    margin-bottom: var(--es-3);
    overflow: hidden;
    transition: background-color var(--es-t-base) var(--es-ease);
}

.es-product:hover .es-product__pitch {
    background-color: var(--es-card-mint);
    border-color: var(--es-line-strong);
}

.es-product__img {
    /* CONTAIN chu khong phai COVER: cover cat cut giay va vot. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 8% chu khong phai 12%: san pham to len ro ret, quan trong tren mobile
       2 cot noi anh chi con khoang 150px. */
    padding: 8%;
    transition: transform var(--es-t-slow) var(--es-ease);
}

.es-product:hover .es-product__img { transform: translateY(-6px) scale(1.04); }

/* Nen MUC chu khong phai volt: volt danh rieng cho thu bam duoc. */
.es-product__flag {
    position: absolute;
    top: var(--es-3);
    left: var(--es-3);
    z-index: var(--es-z-base);
    padding: 3px 8px;
    /* Nho hon vat chua mot bac: luat dong tam */
    border-radius: var(--es-r-sm);
    background-color: var(--es-ink);
    color: var(--es-canvas);
    font-family: var(--es-font-mono);
    font-size: var(--es-text-xs);
    font-weight: 500;
}

/* Chu nam NGOAI o mau, chi anh nam trong. Trinh bay kieu gallery, thoang hon
   han khoi card vien xam. */
.es-product__meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.es-product__name {
    font-family: var(--es-font-display);
    font-size: var(--es-text-md);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.35;
    color: var(--es-ink);
    /* Khoa 2 dong: gia cua moi the trong cung mot hang luon thang hang bat ke
       ten dai ngan. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    transition: color var(--es-t-base) var(--es-ease);
}

.es-product:hover .es-product__name { color: var(--es-ink-2); }

.es-product__pricerow {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--es-2);
    margin-top: auto;
    padding-top: var(--es-1);
}

/* O san dung mot minh (trang chi tiet, hero) */
.es-pitch {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--es-r-lg);
    background-color: var(--es-pitch);
    overflow: hidden;
}

.es-pitch__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
}


/* ==========================================================================
   [6] CHIP, TRANG THAI, PANEL, EMPTY
   ========================================================================== */

/* --- Chip: loc dang bat, mon the thao ------------------------------------ */

.es-chiprail {
    display: flex;
    gap: var(--es-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--es-3);
    scrollbar-width: thin;
    scrollbar-color: var(--es-line) transparent;
}

.es-chiprail::-webkit-scrollbar { height: 4px; }
.es-chiprail::-webkit-scrollbar-thumb { background: var(--es-line); border-radius: var(--es-r-pill); }

.es-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: var(--es-2);
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-pill);
    background-color: var(--es-surface);
    color: var(--es-ink-2);
    font-size: var(--es-text-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--es-t-base) var(--es-ease),
                color var(--es-t-base) var(--es-ease),
                background-color var(--es-t-base) var(--es-ease),
                transform var(--es-t-fast) var(--es-ease);
}

.es-chip:hover  { border-color: var(--es-ink); color: var(--es-ink); transform: translateY(-1px); }
.es-chip:active { transform: translateY(0) scale(.98); }

/* "Dang duoc chon" la mot trong hai truong hop duoc dung volt */
.es-chip--active {
    background-color: var(--es-volt);
    border-color: var(--es-volt);
    color: var(--es-on-volt);
    font-weight: 600;
}
.es-chip--active:hover { border-color: var(--es-volt-press); color: var(--es-on-volt); }
.es-chip--active:focus-visible { outline-color: var(--es-ink); box-shadow: none; }

/* --- Trang thai kho ------------------------------------------------------ */

.es-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--es-font-mono);
    font-size: var(--es-text-xs);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Cham mau CHI dung khi mang nghia that (con hang / sap het / het hang),
   khong bao gio lam trang tri truoc muc nav hay badge. */
.es-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--es-r-pill);
    background-color: currentColor;
    flex-shrink: 0;
}

.es-status--ok  { color: var(--es-ink-2); }
.es-status--low { color: var(--es-ink); }
.es-status--off { color: var(--es-alert); }

/* --- Nhan tinh (vai tro, trang thai don hang...) -------------------------- */

.es-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background-color: var(--es-surface);
    font-family: var(--es-font-mono);
    font-size: var(--es-text-xs);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--es-ink-2);
    white-space: nowrap;
}

.es-tag--strong { background-color: var(--es-ink); border-color: var(--es-ink); color: var(--es-canvas); }
.es-tag--success { border-color: var(--es-success); background-color: var(--es-success-soft); color: var(--es-success); }
.es-tag--warning { border-color: var(--es-warning); background-color: var(--es-warning-soft); color: var(--es-warning); }
.es-tag--info    { border-color: var(--es-info); background-color: var(--es-info-soft); color: var(--es-info); }
.es-tag--alert   { border-color: var(--es-danger); background-color: var(--es-danger-soft); color: var(--es-danger); }
/* Nhan size di kem ten san pham o gio hang / don hang. `text-transform` cua .es-tag giu nguyen:
   size viet hoa het ("XL", "L3") van dung, con '12.75"' thi khong co chu de hoa. */
.es-tag--size { margin-left: var(--es-2); }

/* --- Panel --------------------------------------------------------------- */

.es-panel {
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    padding: var(--es-card-padding);
}

.es-panel--raised { box-shadow: var(--es-shadow-1); }
.es-panel--tint { background-color: var(--es-action-soft); }

/* Card noi dung dung chung cho cac module sau. Bien the interactive chi them
   affordance; the <a>/<button> bao ngoai van quyet dinh semantics. */
.es-card {
    min-width: 0;
    padding: var(--es-card-padding);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    background-color: var(--es-surface);
    box-shadow: var(--es-shadow-1);
}

.es-card--interactive {
    transition: transform var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease),
                box-shadow var(--es-t-base) var(--es-ease);
}

.es-card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--es-line-strong);
    box-shadow: var(--es-shadow-2);
}

/* Panel form can gioi han be ngang de dong chu khong qua dai */
/* `margin-inline: auto` BAT BUOC. Thieu no thi the 544px nay dinh vao le trai
   cua vat chua 1265px va bo lai 689px trong khong — do duoc o /account/profile,
   /auth/login, /auth/register, /account/change-password va /payments. */
.es-formpanel {
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    padding: clamp(20px, 4vw, 40px);
    max-width: 34rem;
    margin-inline: auto;
}

/* Cac trang tac vu dung chung cung mot panel, nhung vach mau phai noi ro ngu
   canh: hoi vien, commerce hay loi. Vach nam trong token semantic/campaign,
   khong them mot palette rieng cho tung route. */
.es-taskpanel {
    border-top-width: 4px;
    box-shadow: var(--es-shadow-2);
}

.es-taskpanel--member { border-top-color: var(--es-campaign-teal); }
.es-taskpanel--commerce { border-top-color: var(--es-action); }
.es-taskpanel--error { border-top-color: var(--es-danger); }

.es-taskpanel > .es-eyebrow { display: block; margin-bottom: var(--es-2); }

/* Cac trang giao dich dung chung mot nhip dieu va dau moc, nhung van giu
   form, nut va aria semantics cua tung luong. */
.es-commerce-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--es-2);
    max-width: 44rem;
    margin: 0 0 var(--es-6);
    padding: 0;
    list-style: none;
}

.es-commerce-step {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    padding-block: var(--es-3);
    border-bottom: 2px solid var(--es-line);
    color: var(--es-ink-3);
    font-size: var(--es-text-sm);
    font-weight: 700;
}

.es-commerce-step__num {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-pill);
    font-family: var(--es-font-mono);
}

.es-commerce-step.is-current,
.es-commerce-step.is-done {
    border-color: var(--es-ink);
    color: var(--es-ink);
}

.es-commerce-step.is-current .es-commerce-step__num {
    background-color: var(--es-ink);
    color: var(--es-canvas);
}

.es-commerce-summary {
    align-self: start;
    position: sticky;
    top: var(--es-4);
}

.es-formsection { min-width: 0; }

.es-authlayout {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(18rem, 1fr);
    gap: clamp(var(--es-5), 6vw, var(--es-9));
    align-items: stretch;
    max-width: 64rem;
    margin-inline: auto;
}

.es-authlayout .es-formpanel {
    width: 100%;
    max-width: none;
    margin: 0;
}

.es-memberbenefits {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--es-3);
    padding: clamp(var(--es-5), 5vw, var(--es-8));
    border-radius: var(--es-r-lg);
    background-color: var(--es-pitch);
}

.es-checklist {
    display: grid;
    gap: var(--es-3);
    margin: var(--es-2) 0 0;
    padding: 0;
    list-style: none;
}

.es-checklist li { display: flex; gap: var(--es-3); align-items: flex-start; }
.es-checklist .es-icon { flex: 0 0 auto; margin-top: .2em; }

.es-accountnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-2);
    margin-bottom: var(--es-6);
    padding-bottom: var(--es-3);
    border-bottom: 1px solid var(--es-line);
}

.es-accountnav a {
    padding: var(--es-2) var(--es-3);
    border: 1px solid transparent;
    border-radius: var(--es-r-pill);
    color: var(--es-ink-2);
    font-weight: 700;
    text-decoration: none;
}

.es-accountnav a:hover,
.es-accountnav a[aria-current="page"] {
    border-color: var(--es-line-strong);
    color: var(--es-ink);
    background-color: var(--es-surface);
}

/* --- Trang thai rong ----------------------------------------------------- */

.es-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--es-3);
    padding: clamp(36px, 6vw, 64px) var(--es-card-padding);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
}

.es-empty__title {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.es-empty__icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--es-r-md);
    background-color: var(--es-pitch);
    color: var(--es-ink-2);
    font-size: var(--es-text-lg);
}

/* Loading dung duoc cho noi dung server-rendered lan fetch bo sung (assistant,
   filter). Skeleton chi la bo sung thi giac; van can aria-live/status o DOM. */
.es-loading {
    display: inline-flex;
    align-items: center;
    gap: var(--es-3);
    color: var(--es-ink-2);
    font-size: var(--es-text-sm);
}

.es-loading::before {
    content: "";
    width: 1em;
    height: 1em;
    border: 2px solid var(--es-line-strong);
    border-top-color: var(--es-ink);
    border-radius: var(--es-r-pill);
    animation: es-spin 700ms linear infinite;
}

.es-skeleton {
    min-height: 1em;
    border-radius: var(--es-r-sm);
    background: linear-gradient(
        90deg,
        var(--es-skeleton-base) 0%,
        var(--es-skeleton-highlight) 50%,
        var(--es-skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: es-skeleton 1.4s var(--es-ease) infinite;
}

@keyframes es-spin { to { transform: rotate(1turn); } }
@keyframes es-skeleton { to { background-position-x: -200%; } }


/* ==========================================================================
   [7] BANG DU LIEU
   Nhom bang hairline va khoang trang, KHONG dong hop tung dong thanh card:
   o day do cao khong mang y nghia thu bac nao.
   ========================================================================== */

.es-tablewrap {
    overflow-x: auto;
    /* Cuon ngang phai nam TRONG khoi nay, khong duoc day ca trang tran ngang */
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    /* BAT BUOC. `.visually-hidden` cua Bootstrap la `position: absolute`. Neu
       khoi cuon nay KHONG phai containing block thi cai span an trong <th>
       cuoi bang lay khoi dau tien co position lam moc — tuc la ca tai lieu —
       nen no THOAT khoi vung cuon va keo gian scrollWidth cua <html>.
       Do duoc: bang rong 775px trong khung 343px van lam ca trang cuon ngang
       416px o /admin/products, dung bang be rong cua span do (791px). */
    position: relative;
}

.es-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--es-text-sm);
}

.es-table th {
    font-family: var(--es-font-mono);
    font-size: var(--es-text-xs);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--es-ink-3);
    text-align: left;
    padding: 0 var(--es-4) var(--es-3) 0;
    border-bottom: 1px solid var(--es-line);
    white-space: nowrap;
}

.es-table td {
    padding: var(--es-4) var(--es-4) var(--es-4) 0;
    /* Chi ke GIUA cac dong. Khong ke ca tren lan duoi moi dong. */
    border-bottom: 1px solid var(--es-line);
    vertical-align: middle;
    color: var(--es-ink);
}

.es-table tbody tr:last-child td { border-bottom: 0; }

.es-table th:last-child,
.es-table td:last-child { padding-right: 0; text-align: right; }

.es-table__num { font-family: var(--es-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

.es-table__name { font-weight: 500; color: var(--es-ink); text-decoration: none; }
.es-table__name:hover { color: var(--es-ink-2); text-decoration: underline; }

/* Danh sach cap nhan/gia tri (thong so san pham, thong tin giao hang) */
.es-deflist { margin: 0; }

.es-deflist__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-4);
    padding: 10px 0;
}

/* Ke thua theo NHOM chu khong ke moi dong */
.es-deflist__row + .es-deflist__row { border-top: 1px solid var(--es-line); }

.es-deflist__key { color: var(--es-ink-3); font-size: var(--es-text-sm); }
.es-deflist__val { color: var(--es-ink); font-weight: 500; text-align: right; }

/* Hang tong tien */
.es-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-4);
    padding-top: var(--es-3);
}

.es-total--grand {
    border-top: 1.5px solid var(--es-ink);
    margin-top: var(--es-2);
    padding-top: var(--es-3);
}

.es-ordertotals {
    margin-top: var(--es-5);
    margin-left: auto;
    max-width: 22rem;
}

/* Khoi tom tat gio hang */
.es-cartsum__ship {
    margin-top: var(--es-5);
    padding-top: var(--es-4);
    border-top: 1px solid var(--es-line);
}

.es-payment-options {
    display: grid;
    gap: var(--es-2);
}

.es-payment-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--es-3);
    min-height: 44px;
    margin: 0;
    cursor: pointer;
}

.es-payment-option .form-check-input {
    margin: var(--es-3) 0 0 var(--es-3);
}

.es-payment-option__body {
    display: grid;
    gap: var(--es-1);
    padding: var(--es-2) var(--es-3);
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-md);
    background-color: var(--es-surface);
}

.es-payment-option .form-check-input:checked + .es-payment-option__body {
    border-color: var(--es-focus);
    box-shadow: 0 0 0 2px var(--es-focus-glow);
}

.es-payment-option__label {
    color: var(--es-ink);
    font-weight: 700;
}

.es-payment-option__hint {
    color: var(--es-ink-3);
    font-size: var(--es-text-sm);
    line-height: 1.45;
}

/* Hang so luong + nut Cap nhat trong bang gio hang */
.es-cartqty {
    display: flex;
    align-items: center;
    gap: var(--es-2);
}

.es-cartproduct {
    display: flex;
    align-items: center;
    gap: var(--es-3);
    min-width: 0;
}

.es-cartproduct__image {
    display: grid;
    place-items: center;
    flex: 0 0 5rem;
    width: 5rem;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--es-r-md);
    background: var(--es-pitch);
    color: var(--es-ink-3);
}

.es-cartproduct__image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.es-cartproduct__info { min-width: 0; }
.es-cartproduct__info .es-tag { margin-top: var(--es-2); }

/* Ba bang giao dich cua khach giu dang bang tren desktop, nhung chuyen thanh
   card o dien thoai (muc [15]). `data-label` tren tung o giu ten truong khi
   hang tieu de khong con hien. */
.es-order-number { overflow-wrap: anywhere; }

.es-order-detail .es-deflist__val {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Nhieu nut trong mot o bang */
.es-rowactions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--es-2);
}

/* --- Admin: chi nhan token, khong doi bo cuc ----------------------------- */

.es-adminhead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--es-4);
    flex-wrap: wrap;
}

.es-searchinput { max-width: 22rem; }

.es-adminfilters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-3);
    padding: var(--es-4);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-md);
    background-color: var(--es-surface);
}

.es-adminfilters .form-control,
.es-adminfilters .form-select,
.es-adminfilters > div {
    min-width: min(100%, 13rem);
    flex: 1 1 13rem;
}

.es-adminfilters > .form-control,
.es-adminfilters > .form-select { width: auto; max-width: 24rem; }

.es-admin-table__primary { font-weight: 700; }
.es-admin-table__comment { max-width: 34rem; overflow-wrap: anywhere; }

.es-adminform__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--es-4);
    margin-bottom: var(--es-4);
}

.es-adminform__sectiontitle {
    margin: 0 0 var(--es-4);
    padding-top: var(--es-5);
    border-top: 1px solid var(--es-line);
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: var(--es-text-lg);
}

.es-adminform > .es-adminform__sectiontitle:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.es-admin-detailpanel { align-self: start; }

.es-kpi--success { box-shadow: inset 0 3px 0 var(--es-success), var(--es-shadow-1); }
.es-kpi--info { box-shadow: inset 0 3px 0 var(--es-info), var(--es-shadow-1); }
.es-kpi--warning { box-shadow: inset 0 3px 0 var(--es-warning), var(--es-shadow-1); }
.es-kpi--danger { box-shadow: inset 0 3px 0 var(--es-danger), var(--es-shadow-1); }

/* Nut sang trang ton kho theo size nam cung hang voi o chon bang size: day
   xuong day o de thang hang voi o chon chu khong dinh len canh nhan. */
.es-adminform__sizelink { display: flex; align-items: flex-end; }

/* O nhap ton kho tung size nam trong o bang — 6rem du cho 5 chu so, rong hon
   thi bang bi keo gian vo ich. */
.es-sizestock__input { max-width: 6rem; }


/* --- Admin: bang dieu khien (module 10.1) -------------------------------- */

/* `auto-fit` chu khong phai 4 cot cung: so o KPI do template quyet dinh va con
   doi duoc, ma go cung so cot thi them mot o la thung mot lo (luat da ghi trong
   CLAUDE.md muc "Quy tac giao dien"). Moi o TU co vien nen hang cuoi le chi la
   hang thieu o, khong thanh mot mang mau vien nhu `.es-sportindex` cu. */
.es-kpirow {
    list-style: none;
    margin: 0 0 var(--es-6) 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-3);
}

.es-kpi {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--es-2);
    padding: var(--es-5);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-shadow-1);
}

.es-kpi__top {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--es-3);
}

.es-kpi__label {
    min-width: 0;
    font-family: var(--es-font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--es-ink-3);
}

.es-kpi__icon {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background-color: var(--es-pitch);
    color: var(--es-ink-2);
}

.es-kpi__icon .es-icon { width: 15px; height: 15px; }

/* `clamp` chu khong phai mot co co dinh: o KPI hep nhat la 220px va so tien
   VND day du ("12.345.000 ₫") dai hon nhieu so don — co cung se tran ra ngoai o. */
.es-kpi__value {
    font-family: var(--es-font-display);
    font-size: clamp(1.625rem, 2.8vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--es-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.es-kpi__note { font-size: .8125rem; color: var(--es-ink-2); }

@media (min-width: 576px) {
    .es-kpirow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .es-kpirow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.es-dashpanel { min-width: 0; }
.es-dashpanel__title { margin-bottom: var(--es-4); }

.es-statbars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--es-3); }

/* Ca dong la mot link toi danh sach don da loc san theo trang thai do. */
.es-statbar {
    display: grid;
    gap: 6px;
    padding: var(--es-2);
    margin: calc(var(--es-2) * -1);
    border-radius: var(--es-r-sm);
    text-decoration: none;
    color: inherit;
    transition: background-color var(--es-t-base) var(--es-ease);
}

.es-statbar:hover { background-color: var(--es-pitch); }

.es-statbar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-3);
}

.es-statbar__name { font-weight: 500; color: var(--es-ink); }
.es-statbar__value { font-size: .8125rem; color: var(--es-ink-3); white-space: nowrap; }

.es-statbar__track {
    height: 6px;
    border-radius: var(--es-r-pill);
    background-color: var(--es-pitch);
    overflow: hidden;
}

/* `--es-ink` chu khong phai `--es-volt`: volt chi dat 1,15:1 tren nen sang, ma
   thanh ty le la do hoa MANG NGHIA nen WCAG 1.4.11 doi >= 3:1 (bay da ghi trong
   CLAUDE.md, cung ly do sao danh gia o 9.2 khong dung volt). */
.es-statbar__fill {
    display: block;
    height: 100%;
    border-radius: var(--es-r-pill);
    background-color: var(--es-ink);
}

/* Thanh cua trang thai "da huy" phai doc ra duoc la mot nhom khac — no khong
   phai mot buoc tren duong di cua don hang. */
.es-statbar--off .es-statbar__fill { background-color: var(--es-line-strong); }

.es-dashempty { padding: var(--es-5) 0; }

/* --- Admin Dashboard: analytics + van han (Phase 3.2) ------------------- */

.es-dashboard { min-width: 0; }

.es-dashboard__head {
    display: grid;
    gap: var(--es-3);
}

.es-dashboard__eyebrow,
.es-dashboard-panelhead__eyebrow {
    display: block;
    margin-bottom: var(--es-1);
    color: var(--es-ink-3);
    font-family: var(--es-font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.es-dashboard__intro {
    max-width: 58ch;
    margin: 0;
    color: var(--es-ink-2);
}

.es-dashboard-analytics,
.es-dashboard-operations {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-5);
    margin-bottom: var(--es-6);
    align-items: start;
}

.es-dashboard-side {
    display: grid;
    min-width: 0;
    gap: var(--es-5);
}

@media (min-width: 1200px) {
    .es-dashboard-analytics {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }

    .es-dashboard-operations {
        grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    }
}

.es-dashboard-panelhead {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--es-4);
    margin-bottom: var(--es-4);
}

.es-dashboard-panelhead > div { min-width: 0; }
.es-dashboard-panelhead .es-dashpanel__title { margin-bottom: 0; }

.es-dashboard-count {
    flex: 0 0 auto;
    padding: var(--es-1) var(--es-2);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-pill);
    color: var(--es-ink-2);
    font-family: var(--es-font-mono);
    font-size: .75rem;
    white-space: nowrap;
}

.es-orderchart { overflow: hidden; }

.es-revenuechart { margin-bottom: var(--es-6); }

.es-orderchart__metric {
    display: grid;
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
}

.es-orderchart__metric strong {
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.5rem;
    line-height: 1;
    overflow-wrap: anywhere;
}

.es-orderchart__metric span {
    color: var(--es-ink-3);
    font-size: .75rem;
}

.es-orderchart__summary {
    margin: calc(var(--es-2) * -1) 0 var(--es-4);
    color: var(--es-ink-2);
    font-size: .875rem;
}

.es-orderchart__canvas {
    position: relative;
    min-width: 0;
    padding: var(--es-2) var(--es-2) var(--es-3);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-md);
    background-color: var(--es-canvas);
}

.es-orderchart__svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 0;
}

.es-orderchart__grid line {
    stroke: var(--es-line);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.es-orderchart__axis {
    fill: var(--es-ink-3);
    font-family: var(--es-font-mono);
    font-size: .75rem;
    text-anchor: end;
}

.es-orderchart__area { fill: var(--es-pitch); }

.es-orderchart__line {
    fill: none;
    stroke: var(--es-ink);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
}

.es-orderchart__points circle {
    fill: var(--es-surface);
    stroke: var(--es-ink);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

/* Doanh thu la chuoi rieng voi don hang: mau success giup phan biet hai bieu do,
   con nhan + title van noi ro y nghia de mau khong phai tin hieu duy nhat. */
.es-orderchart__area--revenue { fill: var(--es-success-soft); }

.es-orderchart__line--revenue { stroke: var(--es-success); }

.es-orderchart__points--revenue circle { stroke: var(--es-success); }

.es-orderchart__dates {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-inline: 6.7%;
    color: var(--es-ink-3);
    font-family: var(--es-font-mono);
    font-size: .6875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.es-orderchart__dates span:first-child { text-align: left; }
.es-orderchart__dates span:last-child { text-align: right; }

.es-orderchart__zero {
    position: absolute;
    top: 46%;
    left: 50%;
    width: max-content;
    max-width: calc(100% - var(--es-6));
    margin: 0;
    padding: var(--es-2) var(--es-3);
    transform: translate(-50%, -50%);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-sm);
    background-color: var(--es-surface);
    color: var(--es-ink-2);
    font-size: .8125rem;
    text-align: center;
}

.es-chartdata { margin-top: var(--es-4); }

.es-chartdata > summary {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--es-ink-2);
    font-weight: 700;
    cursor: pointer;
}

.es-chartdata[open] > summary { margin-bottom: var(--es-3); }

/* Wrapper chua `.visually-hidden` cua caption nen can containing block rieng;
   max-height giu bang 30 dong khong day phan van han xuong qua xa. */
.es-chartdata .es-tablewrap {
    position: relative;
    max-height: 18rem;
    overflow: auto;
}

.es-chartdata__table th:last-child,
.es-chartdata__table td:last-child { text-align: right; }

.es-dashboard-status { min-width: 0; }
.es-dashboard-recent { min-width: 0; }

.es-dashboard-empty {
    padding: var(--es-6) var(--es-5);
    background-color: var(--es-canvas);
}

.es-dashboard-actions {
    list-style: none;
    display: grid;
    gap: var(--es-2);
    margin: 0;
    padding: 0;
}

.es-dashboard-actions a {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-3);
    padding: var(--es-2) var(--es-3);
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    color: var(--es-ink);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease);
}

.es-dashboard-actions a:hover {
    border-color: var(--es-ink-3);
    background-color: var(--es-pitch);
}

.es-dashboard-actions .es-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

@media (max-width: 575.98px) {
    .es-dashboard-panelhead { gap: var(--es-3); }
    .es-orderchart__metric strong { font-size: 1.25rem; }
    .es-orderchart__canvas { margin-inline: calc(var(--es-2) * -1); }
    .es-statbar__head { align-items: flex-start; }
    .es-statbar__value { white-space: normal; text-align: right; }
}


/* ==========================================================================
   ADMIN WORKSPACE
   Shell rieng cho /admin: giu token va component cua Design System, nhung
   khong ke thua bo cuc/canvas co anh cua storefront.
   ========================================================================== */

.es-adminbody {
    display: block;
    min-width: 0;
    overflow-x: hidden;
    background-color: var(--es-canvas);
    background-image: none;
}

.es-adminshell {
    --es-admin-sidebar: 16rem;
    display: grid;
    grid-template-columns: var(--es-admin-sidebar) minmax(0, 1fr);
    min-height: 100dvh;
}

.es-adminsidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    min-width: 0;
    flex-direction: column;
    gap: var(--es-6);
    padding: var(--es-5) var(--es-4);
    background-color: var(--es-brand-bg);
    color: var(--es-brand-fg);
    box-shadow: inset -1px 0 0 var(--es-brand-line);
}

.es-adminbrand {
    display: inline-flex;
    align-items: center;
    gap: var(--es-3);
    min-width: 0;
    color: var(--es-brand-fg);
    text-decoration: none;
}

.es-adminbrand:hover { color: var(--es-brand-fg); }

.es-adminbrand > span:last-child {
    display: grid;
    min-width: 0;
}

.es-adminbrand__name {
    overflow: hidden;
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.es-adminbrand__meta,
.es-adminsidebar__eyebrow,
.es-admintopbar__eyebrow {
    font-family: var(--es-font-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1.35;
    text-transform: uppercase;
}

.es-adminbrand__meta { color: var(--es-brand-fg-2); }

.es-adminnav {
    display: grid;
    gap: var(--es-1);
}

.es-adminnav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--es-3);
    min-height: 48px;
    padding: 11px 14px;
    border-radius: var(--es-r-sm);
    color: var(--es-brand-fg-2);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--es-t-base) var(--es-ease),
                color var(--es-t-base) var(--es-ease);
}

.es-adminnav__link:hover {
    background-color: var(--es-brand-hover);
    color: var(--es-brand-fg);
}

.es-adminnav__link.is-active {
    background-color: var(--es-brand-hover);
    color: var(--es-brand-fg);
}

.es-adminnav__link.is-active::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 0;
    width: 3px;
    border-radius: 0 var(--es-r-pill) var(--es-r-pill) 0;
    background-color: var(--es-volt);
}

.es-adminnav__link:focus-visible,
.es-adminbrand:focus-visible,
.es-adminoffcanvas__store:focus-visible {
    outline-color: var(--es-volt);
}

.es-adminsidebar__foot {
    display: grid;
    gap: var(--es-1);
    margin-top: auto;
    padding: var(--es-4) var(--es-3) 0;
    border-top: 1px solid var(--es-brand-line);
    color: var(--es-brand-fg-2);
    font-size: .8125rem;
}

.es-adminsidebar__eyebrow { color: var(--es-brand-fg); }

.es-adminmain {
    display: flex;
    min-width: 0;
    min-height: 100dvh;
    flex-direction: column;
}

.es-admintopbar {
    position: sticky;
    top: 0;
    z-index: var(--es-z-sticky);
    border-bottom: 1px solid var(--es-line);
    background-color: var(--es-surface);
}

.es-admintopbar__inner {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 68px;
    gap: var(--es-3);
    padding: 10px clamp(16px, 3vw, 40px);
}

.es-admintopbar__icon,
.es-admintopbar__store {
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    background-color: var(--es-surface);
    color: var(--es-ink);
    text-decoration: none;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease);
}

.es-admintopbar__icon {
    width: 44px;
    padding: 0;
    cursor: pointer;
}

.es-admintopbar__store {
    gap: var(--es-2);
    padding: 0 13px;
    font-size: .875rem;
    font-weight: 500;
}

.es-admintopbar__store .es-icon { transform: rotate(180deg); }

.es-admintopbar__icon:hover,
.es-admintopbar__store:hover {
    border-color: var(--es-ink-3);
    background-color: var(--es-pitch);
    color: var(--es-ink);
}

.es-admintopbar__context {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.es-admintopbar__eyebrow { color: var(--es-ink-3); }

.es-admintopbar__title {
    overflow: hidden;
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.es-admintopbar__actions {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--es-2);
    margin-left: auto;
}

.es-adminprofile {
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 3px var(--es-2);
    border: 1.5px solid transparent;
    border-radius: var(--es-r-sm);
    background-color: transparent;
    color: var(--es-ink);
    cursor: pointer;
    text-align: left;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease);
}

.es-adminprofile:hover {
    border-color: var(--es-line);
    background-color: var(--es-pitch);
}

.es-adminprofile__avatar {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--es-r-pill);
    background-color: var(--es-ink);
    color: var(--es-canvas);
    font-family: var(--es-font-display);
    font-size: .875rem;
    font-weight: 800;
}

.es-adminprofile__copy {
    display: grid;
    min-width: 0;
    line-height: 1.25;
}

.es-adminprofile__name {
    overflow: hidden;
    max-width: 13rem;
    color: var(--es-ink);
    font-size: .875rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.es-adminprofile__role { color: var(--es-ink-3); font-size: .75rem; }

.es-adminprofile__caret {
    width: 12px;
    height: 12px;
    color: var(--es-ink-3);
}

.es-adminflashes {
    display: grid;
    gap: var(--es-2);
    padding: var(--es-4) clamp(16px, 3vw, 40px) 0;
}

.es-adminflashes .alert { margin-bottom: 0; }

.es-admincontent {
    min-width: 0;
    flex: 1 0 auto;
}

.es-admincontent .es-container {
    max-width: none;
    padding-inline: clamp(16px, 3vw, 40px);
}

.es-admincontent .es-section {
    padding-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(40px, 6vw, 72px);
}

.es-adminoffcanvas {
    width: min(18rem, 88vw);
}

.es-adminoffcanvas .offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: var(--es-5);
}

.es-adminoffcanvas__store {
    display: flex;
    align-items: center;
    gap: var(--es-3);
    min-height: 48px;
    margin-top: auto;
    padding: 11px 14px;
    border-top: 1px solid var(--es-brand-line);
    color: var(--es-brand-fg);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}

.es-adminoffcanvas__store:hover { color: var(--es-brand-fg); }
.es-adminoffcanvas__store .es-icon { transform: rotate(180deg); }

@media (max-width: 1199.98px) {
    .es-adminprofile__copy { display: none; }
}

@media (max-width: 991.98px) {
    .es-adminshell { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 992px) {
    .es-admin-detailpanel {
        position: sticky;
        top: calc(68px + var(--es-4));
    }
}

/* Cac bang danh sach admin giu mat do cao tren desktop, nhung thanh card
   co nhan truong tren mobile de khong cat SKU, trang thai hay thao tac. */
@media (max-width: 767.98px) {
    .es-adminfilters { align-items: stretch; }

    .es-adminfilters .form-control,
    .es-adminfilters .form-select,
    .es-adminfilters > div,
    .es-adminfilters > .form-control,
    .es-adminfilters > .form-select {
        width: 100%;
        max-width: none;
        flex-basis: 100%;
    }

    .es-tablewrap--admin-list { overflow-x: visible; }

    .es-table--admin-list,
    .es-table--admin-list tbody,
    .es-table--admin-list tr,
    .es-table--admin-list td {
        display: block;
        width: 100%;
    }

    .es-table--admin-list thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .es-table--admin-list tr {
        padding: var(--es-4);
        border: 1px solid var(--es-line);
        border-radius: var(--es-r-md);
        background-color: var(--es-surface);
    }

    .es-table--admin-list tr + tr { margin-top: var(--es-3); }

    .es-table--admin-list td,
    .es-table--admin-list td:last-child {
        display: grid;
        grid-template-columns: minmax(7rem, .65fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--es-3);
        padding: var(--es-2) 0;
        border-bottom: 1px solid var(--es-line);
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .es-table--admin-list td::before {
        content: attr(data-label);
        color: var(--es-ink-3);
        font-family: var(--es-font-mono);
        font-size: var(--es-text-xs);
        font-weight: 600;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    .es-table--admin-list td:last-child { border-bottom: 0; }
    .es-table--admin-list .es-tag { justify-self: end; }

    .es-table--admin-list .es-rowactions {
        width: 100%;
        flex-wrap: wrap;
    }

    .es-table--admin-list .es-rowactions > * { flex: 1 1 auto; }
    .es-table--admin-list .es-rowactions form { display: flex; }
    .es-table--admin-list .es-rowactions .es-btn { flex: 1; }

    .es-table--admin-list td[data-label="Thao tác"] > .es-link,
    .es-table--admin-list td[data-label="Thao tác"] > form .es-btn {
        display: inline-flex;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        justify-self: end;
    }
}

@media (max-width: 575.98px) {
    .es-admintopbar__eyebrow { display: none; }
    .es-admintopbar__inner { gap: var(--es-2); }
    .es-adminprofile { padding-left: 0; }
}


/* ==========================================================================
   [8] KHUNG THUONG HIEU VA QUANG BA NOI BO
   ========================================================================== */

.es-brandframe { margin-top: var(--es-9); }

.es-campaign {
    --es-campaign-bg: var(--es-campaign-blue);
    --es-campaign-fg: var(--es-on-campaign-blue);
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--es-5);
    align-items: end;
    overflow: hidden;
    padding: clamp(28px, 5vw, 56px);
    border-radius: var(--es-r-lg);
    background-color: var(--es-campaign-bg);
    color: var(--es-campaign-fg);
}

/* Hai vach san dau nam trong CSS de banner van co ban sac khi khong co JS
   hoac anh; chung chi dung currentColor, khong tao them mau ngoai token. */
.es-campaign::before,
.es-campaign::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 42%;
    height: 220%;
    border: 1px solid currentColor;
    opacity: .18;
    transform: rotate(18deg);
}

.es-campaign::before { top: -62%; right: 7%; }
.es-campaign::after { top: -55%; right: -13%; }

.es-campaign--coral {
    --es-campaign-bg: var(--es-campaign-coral);
    --es-campaign-fg: var(--es-on-campaign-coral);
}

.es-campaign--teal {
    --es-campaign-bg: var(--es-campaign-teal);
    --es-campaign-fg: var(--es-on-campaign-teal);
}

.es-campaign__copy { max-width: 44rem; }

.es-campaign__kicker,
.es-promotile__kicker {
    display: block;
    margin-bottom: var(--es-2);
    font-family: var(--es-font-mono);
    font-size: var(--es-text-xs);
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.es-campaign__title {
    margin: 0;
    max-width: 16ch;
    color: inherit;
    font-family: var(--es-font-display);
    font-size: clamp(2rem, 5vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: var(--es-leading-tight);
}

.es-campaign__desc {
    max-width: 60ch;
    margin: var(--es-3) 0 0;
    font-size: var(--es-text-md);
}

.es-campaign__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--es-2);
    min-height: var(--es-control-height);
    width: fit-content;
    padding: 0 var(--es-5);
    border-radius: var(--es-r-sm);
    background-color: var(--es-campaign-fg);
    color: var(--es-campaign-bg);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--es-t-base) var(--es-ease),
                color var(--es-t-base) var(--es-ease),
                transform var(--es-t-fast) var(--es-ease),
                box-shadow var(--es-t-base) var(--es-ease);
}

.es-campaign__cta:hover {
    color: var(--es-campaign-bg);
    transform: translateY(-2px);
    box-shadow: var(--es-shadow-2);
}
.es-campaign__cta:active { transform: translateY(0) scale(.98); }
.es-campaign__cta:focus-visible { outline-color: var(--es-campaign-fg); }

.es-promotile {
    --es-promo-bg: var(--es-campaign-teal);
    --es-promo-fg: var(--es-on-campaign-teal);
    display: grid;
    gap: var(--es-2);
    margin-bottom: var(--es-5);
    padding: var(--es-5);
    border-radius: var(--es-r-md);
    background-color: var(--es-promo-bg);
    color: var(--es-promo-fg);
}

.es-promotile--blue {
    --es-promo-bg: var(--es-campaign-blue);
    --es-promo-fg: var(--es-on-campaign-blue);
}

.es-promotile--coral {
    --es-promo-bg: var(--es-campaign-coral);
    --es-promo-fg: var(--es-on-campaign-coral);
}

.es-promotile__kicker { margin-bottom: 0; }
.es-promotile__title { font-family: var(--es-font-display); font-size: var(--es-text-lg); }
.es-promotile__desc { font-size: var(--es-text-sm); line-height: 1.5; }

.es-promotile__link {
    display: inline-flex;
    align-items: center;
    gap: var(--es-2);
    width: fit-content;
    min-height: 40px;
    color: inherit;
    font-weight: 700;
    text-underline-offset: 3px;
    transition: transform var(--es-t-fast) var(--es-ease);
}

.es-promotile__link:hover { color: inherit; transform: translateX(3px); }
.es-promotile__link:active { transform: translateX(1px); }
.es-promotile__link:focus-visible {
    outline-color: var(--es-promo-fg);
    box-shadow: none;
}

.es-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--es-3);
    margin: var(--es-5) 0 0;
    padding: 0;
    list-style: none;
}

.es-benefit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--es-3);
    align-items: start;
    padding: var(--es-4);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-md);
    background-color: var(--es-surface);
}

.es-benefit__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--es-r-sm);
    background-color: var(--es-pitch);
    color: var(--es-ink);
}

.es-benefit strong,
.es-benefit span span { display: block; }
.es-benefit strong { font-size: var(--es-text-sm); }
.es-benefit span span { margin-top: var(--es-1); color: var(--es-ink-2); font-size: var(--es-text-xs); }


/* ==========================================================================
   [8.1] HEADER
   ========================================================================== */

.es-header {
    position: sticky;
    top: 0;
    z-index: var(--es-z-nav);
    background-color: var(--es-brand-bg);
    color: var(--es-brand-fg);
    /* O che do sang khoi thuong hieu tach khoi trang bang chenh mau 16:1 nen
       khong can gi them. O che do toi chenh mau chi con 1.31:1, mot mang toi
       tren mot mang toi — duong toc nay moi la thu bien header thanh mot
       THANH. Dung inset shadow chu khong phai border de khong doi chieu cao
       68px ma test e2e dang chot. */
    box-shadow: inset 0 -1px 0 var(--es-brand-line);
}

.es-header__inner {
    display: flex;
    align-items: center;
    gap: var(--es-4);
    height: 68px;
}

.es-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    /* Wordmark toan trang: volt danh rieng cho thu bam duoc, khong dung lam
       mau trang tri thuong hieu. */
    color: var(--es-brand-fg);
    text-decoration: none;
    white-space: nowrap;
}

.es-brand:hover { color: var(--es-brand-fg); }

.es-brand__copy { display: grid; gap: 2px; }
.es-brand__name { line-height: 1; }

.es-brand__strap {
    font-family: var(--es-font-mono);
    font-size: .625rem;
    font-weight: 500;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--es-brand-fg-2);
}

.es-brand__mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--es-r-sm);
    background-color: var(--es-brand-fg);
    color: var(--es-brand-bg);
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.es-nav {
    display: flex;
    align-items: center;
    gap: var(--es-4);
    flex: none;
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}

.es-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--es-brand-fg-2);
    font-size: .9375rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--es-t-base) var(--es-ease);
}

.es-nav__link:hover,
.es-nav__link.is-active { color: var(--es-brand-fg); }

/* "Dang o trang nay" la trang thai duoc chon -> dung volt */
.es-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    height: 2px;
    background-color: var(--es-volt);
    border-radius: 2px;
}

.es-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 26rem;
    min-width: 0;
}

.es-search--block { max-width: none; margin-bottom: var(--es-4); }

.es-search__icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--es-ink-3);
}

.es-search__input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    background-color: var(--es-surface);
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: .9375rem;
    transition: border-color var(--es-t-base) var(--es-ease);
}

.es-search__input::placeholder { color: var(--es-ink-3); }
.es-search__input:hover { border-color: var(--es-ink-3); }

/* Nut "xoa" mac dinh cua <input type=search> tren WebKit/Blink ve mot dau X mau
   he thong, khong doi theo theme — bo di, phim Esc va boi den van xoa duoc. */
.es-search__input::-webkit-search-cancel-button { display: none; }

/* Ban dat TRONG khoi thuong hieu: phai lay mau tu nhom --es-brand-*, khong lay tu
   bang mau trang (luat da ghi trong CLAUDE.md — `.es-btn--ghost` tung chim hoan toan
   vi lay `--es-ink`, ma o che do sang `--es-ink` chinh la mau nen header).
   Vien dung rgba(242,244,246,.40) chu khong phai `--es-brand-line` (.16): o nhap la
   thu THAO TAC duoc nen vien phai dat >= 3:1 (WCAG 1.4.11). Do lai tren ca hai theme:
   3.51:1 tren #15181E (nen sang) va 3.28:1 tren #242933 (nen toi); ban .16 chi duoc
   1.4:1 va o nhap se khong con hinh dang nao. */
.es-header .es-search__input {
    border-color: rgba(242, 244, 246, .40);
    background-color: rgba(242, 244, 246, .06);
    color: var(--es-brand-fg);
}

.es-header .es-search__input::placeholder { color: var(--es-brand-fg-2); }
.es-header .es-search__input:hover { border-color: var(--es-brand-fg-2); }
.es-header .es-search__icon { color: var(--es-brand-fg-2); }

.es-header__actions {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    /* Truoc module 9.1 viec day nhom nut sang phai do `.es-nav { margin-right: auto }`
       dam nhiem. Gio o tim kiem nam giua nav va nhom nut, nen moc phai nam o chinh
       nhom nut — neu khong, o tim kiem an di (duoi 992px) la nhom nut troi vao giua. */
    margin-left: auto;
}

.es-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1.5px solid var(--es-brand-line);
    border-radius: var(--es-r-sm);
    background-color: transparent;
    color: var(--es-brand-fg);
    cursor: pointer;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease),
                transform var(--es-t-fast) var(--es-ease);
}

.es-iconbtn:hover  { background-color: var(--es-brand-hover); border-color: rgba(242, 244, 246, .34); color: var(--es-brand-fg); }
.es-iconbtn:active { transform: scale(.94); }

.es-iconbtn__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--es-r-pill);
    /* Nen muc chu khong phai volt */
    background-color: var(--es-brand-fg);
    color: var(--es-brand-bg);
    font-family: var(--es-font-mono);
    font-size: .6875rem;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}

/* Nut mo dropdown tai khoan */
.es-account {
    display: inline-flex;
    align-items: center;
    gap: var(--es-2);
    height: 44px;
    max-width: 15rem;
    padding: 0 14px;
    border: 1.5px solid var(--es-brand-line);
    border-radius: var(--es-r-sm);
    background-color: transparent;
    color: var(--es-brand-fg);
    font-family: var(--es-font-body);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease);
}

.es-account:hover { background-color: var(--es-brand-hover); border-color: rgba(242, 244, 246, .34); color: var(--es-brand-fg); }
.es-account::after { display: none; }

.es-account__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nut dat TRONG header phai lay mau tu bang mau thuong hieu, khong lay tu bang
   mau trang. `.es-btn--ghost` mac dinh dung `--es-ink`, ma o light mode
   `--es-ink` chinh la mau nen cua header -> chu chim hoan toan (do duoc ti le
   tuong phan 1.0). */
.es-header .es-btn--ghost {
    border-color: var(--es-brand-line);
    color: var(--es-brand-fg);
}

.es-header .es-btn--ghost:hover {
    background-color: var(--es-brand-hover);
    border-color: rgba(242, 244, 246, .34);
    color: var(--es-brand-fg);
}

/* Trong khoi thuong hieu (nen luon toi o ca hai theme) volt LA lua chon dung */
.es-header :focus-visible { outline-color: var(--es-volt); }
.es-header .es-btn--primary:focus-visible { outline-color: var(--es-brand-fg); }

/* Dropdown nam trong header nhung ve tren surface, khong tren brand-bg. */
.es-header .dropdown-menu :focus-visible {
    outline-color: var(--es-focus);
    box-shadow: none;
}

/* --- Menu offcanvas ------------------------------------------------------ */

.es-offcanvas__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--es-1); }

.es-offcanvas__link {
    display: flex;
    align-items: center;
    gap: var(--es-3);
    padding: 14px 12px;
    border-radius: var(--es-r-sm);
    color: var(--es-brand-fg);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--es-t-base) var(--es-ease);
}

.es-offcanvas__link:hover { background-color: var(--es-brand-hover); color: var(--es-brand-fg); }
.es-offcanvas__link:focus-visible {
    outline-color: var(--es-brand-fg);
    box-shadow: none;
}

.es-offcanvas__sep {
    height: 1px;
    background-color: var(--es-brand-line);
    margin: var(--es-3) 12px;
}


/* ==========================================================================
   [9] FOOTER
   ========================================================================== */

.es-footer {
    background-color: var(--es-brand-bg);
    color: var(--es-brand-fg-2);
    /* Cung ly do voi header: o che do toi footer gan nhu lien mach voi trang */
    box-shadow: inset 0 1px 0 var(--es-brand-line);
    padding-top: var(--es-7);
    /* Chua cho nut chat (fixed goc phai duoi) khoi de len chu trong footer */
    padding-bottom: var(--es-8);
    margin-top: var(--es-8);
}

.es-footer .es-container { max-width: var(--es-footer-container); }

.es-brandframe + .es-footer { margin-top: 0; }

.es-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--es-5);
    padding-bottom: var(--es-5);
}

.es-footer__tagline {
    max-width: 32ch;
    margin-top: var(--es-3);
    margin-bottom: 0;
    font-size: .9375rem;
}

.es-footer__coltitle {
    font-family: var(--es-font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--es-brand-fg);
    margin-bottom: var(--es-2);
}

.es-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }

.es-footer__link {
    /* inline-flex + min-height: vung cham 44px ma van la link chu */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--es-brand-fg-2);
    font-size: .9375rem;
    text-decoration: none;
    transition: color var(--es-t-base) var(--es-ease);
}

.es-footer__link:hover { color: var(--es-brand-fg); text-decoration: underline; text-underline-offset: 4px; }

.es-footer :focus-visible {
    outline-color: var(--es-brand-fg);
    box-shadow: none;
}

.es-footer__bottom {
    border-top: 1px solid var(--es-brand-line);
    padding-top: var(--es-4);
    font-size: .875rem;
}


/* ==========================================================================
   [10] LAYOUT DUNG CHUNG
   ========================================================================== */

.es-container {
    width: 100%;
    max-width: var(--es-container);
    margin-inline: auto;
    padding-inline: var(--es-gutter);
}

.es-section {
    /* Dem duoi day hon dem tren: can quang hoc, khong can toan hoc */
    padding-top: var(--es-section);
    padding-bottom: calc(var(--es-section) * 1.15);
}

.es-section--tight { padding-top: var(--es-6); padding-bottom: var(--es-7); }

/* Vung flash message: thay cho inline style tren base.html */
.es-flashes { padding-top: var(--es-5); }

.es-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--es-z-modal);
    padding: 12px 20px;
    background-color: var(--es-volt);
    color: var(--es-on-volt);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--es-r-md) 0;
}

.es-skip:focus { left: 0; color: var(--es-on-volt); }

/* Tieu de trang: KHONG dat so dem hay chu phu ben phai (mau
   "floating top-right sub-text" bi cam). */
.es-pagehead {
    margin-bottom: var(--es-6);
}

.es-sechead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-4);
    flex-wrap: wrap;
    margin-bottom: var(--es-5);
}

/* Dai merchandising dung chung mot luoi theo be rong vat chua. Mau nen tach nhip giua cac dai
   ma khong boc luoi trong mot hop — hang cuoi le van ket thuc tu nhien. */
.es-productrail--pitch { background-color: var(--es-pitch); }
.es-productrail--coral {
    border-block: 1px solid var(--es-line);
    background-color: var(--es-surface);
}

.es-discoverylinks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-2);
    margin-top: var(--es-5);
}

.es-listing-page { padding-top: var(--es-6); }
.es-discoverylinks--catalog { margin-top: 0; margin-bottom: var(--es-5); }

.es-cataloghero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, .75fr);
    gap: clamp(var(--es-5), 4vw, var(--es-7));
    align-items: center;
    padding: clamp(var(--es-5), 3vw, var(--es-6));
    margin-bottom: var(--es-5);
    overflow: hidden;
    border-radius: var(--es-r-lg);
    background: linear-gradient(125deg, var(--es-brand-bg), var(--es-campaign-blue));
    color: var(--es-brand-fg);
}

.es-cataloghero__copy { min-width: 0; }
.es-cataloghero__eyebrow {
    display: block;
    margin-bottom: var(--es-4);
    color: var(--es-brand-fg-2);
    font-family: var(--es-font-mono);
    font-size: var(--es-text-xs);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.es-cataloghero__title {
    max-width: 13ch;
    margin-bottom: var(--es-4);
    color: var(--es-brand-fg);
    font-family: var(--es-font-display);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.es-cataloghero__copy p {
    max-width: 39ch;
    margin-bottom: var(--es-5);
    color: var(--es-brand-fg);
}

.es-cataloghero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-4);
}

.es-cataloghero__guide {
    color: var(--es-brand-fg);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.es-cataloghero__guide:hover { color: var(--es-brand-fg); }

.es-cataloghero__product {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
    border-radius: var(--es-r-md);
    background: var(--es-surface);
    color: var(--es-ink);
    text-decoration: none;
    transition: transform var(--es-t-slow) var(--es-ease),
                box-shadow var(--es-t-slow) var(--es-ease);
}

.es-cataloghero__product:hover {
    transform: translateY(-3px);
    box-shadow: var(--es-shadow-2);
    color: var(--es-ink);
}

.es-cataloghero__product img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 13rem;
    object-fit: contain;
    background: var(--es-pitch);
}

.es-cataloghero__caption {
    display: flex;
    justify-content: space-between;
    gap: var(--es-3);
    align-items: baseline;
    padding: var(--es-3) var(--es-4);
    font-size: var(--es-text-sm);
}

.es-cataloghero__caption strong { min-width: 0; }
.es-cataloghero__caption > span { flex: none; font-weight: 700; }
.es-cataloghero :focus-visible { outline-color: var(--es-brand-fg); }

/* Luoi san pham: mobile 2 cot, KHONG phai 1. Anh vuong o 1 cot chiem gan het
   man hinh, phai cuon rat nhieu lan de xem het.

   Tu 576px tro len dung `auto-fill` thay cho breakpoint dem cot: so cot phai
   theo BE RONG VAT CHUA chu khong theo be rong man hinh. Cung mot the luoi nam
   trong hai vat chua khac nhau — trang chu rong 1201px, trang /products chi
   con 893px vi mat 260px cho rail loc — nen breakpoint theo viewport cho ra
   the 285px o trang chu va the 205px o trang ban hang tai CUNG mot co man
   hinh. Voi auto-fill ca hai deu ra ~281px. */
.es-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--es-4);
}

/* Bo cuc 2 cot dung chung (chi tiet san pham, checkout, don hang) */
.es-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--es-6);
    align-items: start;
}

/* Cung ly do voi `main`: o luoi mac dinh co `min-width: auto` nen mot cai bang
   rong ben trong se lam vo ca cot. */
.es-split > * { min-width: 0; }

.es-stack { display: flex; flex-wrap: wrap; gap: var(--es-3); align-items: center; }

/* --- Trang chu: campaign gon va san pham ngay man hinh dau --------------- */

.es-hero {
    padding-block: var(--es-5);
}

/* Campaign dung cap mau da do tuong phan, khong nhuom mau anh san pham. */
.es-hero__copy {
    padding: clamp(var(--es-5), 3vw, var(--es-7));
    border-radius: var(--es-r-lg);
    background-color: var(--es-hero-bg);
    color: var(--es-hero-fg);
}

.es-hero__copy .es-display {
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1.06;
    color: inherit;
}

.es-hero__eyebrow {
    margin-bottom: var(--es-4);
    font-size: var(--es-text-xs);
    font-weight: 600;
    letter-spacing: .04em;
}

.es-hero__note {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    margin-top: var(--es-4);
    font-size: var(--es-text-xs);
}

.es-hero__copy :focus-visible {
    outline-color: var(--es-hero-fg);
    box-shadow: none;
}

.es-hero__sub {
    max-width: 46ch;
    margin-top: var(--es-4);
    margin-bottom: var(--es-5);
    font-size: var(--es-text-md);
    line-height: 1.6;
    color: inherit;
}

/* Luoi theo vat chua, khong cat card hay bat cuon ngang tren dien thoai. */
.es-heroline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: var(--es-3);
}

.es-herocarousel__stage {
    display: grid;
    grid-template-columns: var(--es-control-height) minmax(0, 1fr) var(--es-control-height);
    align-items: center;
    gap: var(--es-2);
    min-width: 0;
}
.es-heroslides { display: grid; min-width: 0; overflow: hidden; }
.es-heroslide {
    grid-area: 1 / 1;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(5%, 0, 0);
    transition: opacity var(--es-t-reveal) var(--es-ease),
                transform var(--es-t-reveal) var(--es-ease),
                visibility 0s linear var(--es-t-reveal);
}
.es-heroslide.is-from-previous { transform: translate3d(-5%, 0, 0); }
.es-heroslide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity var(--es-t-reveal) var(--es-ease),
                transform var(--es-t-reveal) var(--es-ease), visibility 0s;
}
.es-heroctl {
    display: inline-grid;
    place-items: center;
    min-width: var(--es-control-height);
    min-height: var(--es-control-height);
    padding: var(--es-2) var(--es-3);
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    background: var(--es-card-sky);
    color: var(--es-ink);
    cursor: pointer;
}
.es-heroctl:hover:not(:disabled) { background: var(--es-card-mint); }
.es-heroctl:disabled { opacity: .42; cursor: default; }
.es-heroctl[data-es-hero-prev] .es-icon { transform: rotate(180deg); }

.es-heroitem {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.es-heroitem:hover { color: inherit; }
.es-heroitem:focus-visible { border-radius: var(--es-r-sm); }
.es-heroitem__placeholder { width: var(--es-7); height: var(--es-7); color: var(--es-ink-3); }

.es-heroitem__pitch {
    display: grid;
    place-items: center;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--es-r-lg);
    background-color: var(--es-card-sky);
    border: 1px solid var(--es-line);
    overflow: hidden;
    margin-bottom: var(--es-3);
    transition: background-color var(--es-t-base) var(--es-ease);
}

.es-heroitem:hover .es-heroitem__pitch {
    background-color: var(--es-card-mint);
    border-color: var(--es-line-strong);
}

.es-heroitem__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
    transition: transform var(--es-t-slow) var(--es-ease);
}

.es-heroitem:hover .es-heroitem__img { transform: translateY(-6px) scale(1.04); }

.es-heroitem__meta { display: flex; flex-direction: column; gap: var(--es-1); }
.es-heroitem__meta .es-price { font-size: var(--es-text-md); }

.es-heroitem__name {
    font-family: var(--es-font-display);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hero va khoi tu van doc lap; thu tu DOM cung la thu tu doc/ban phim. */
.es-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-5);
    align-items: center;
}

/* Cung ly do voi `main` va `.es-split > *`: item flex mac dinh khong co lai
   duoc duoi kich thuoc noi dung. */
.es-hero__grid > * { min-width: 0; }

.es-heroask {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--es-5);
    align-items: center;
    max-width: 100%;
}

.es-home__campaigns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    gap: var(--es-5);
}

.es-home__campaigns .es-promotile {
    margin: 0;
    padding: var(--es-6);
    min-width: 0;
}

/* Banner gia that gon: diem nhan tinh, de hero phia tren giu vai tro chuyen dong. */
.es-homeoffer {
    position: relative;
    overflow: hidden;
    border-radius: var(--es-r-lg);
    background: var(--es-campaign-coral);
    color: var(--es-on-campaign-coral);
}

.es-homeoffer__link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, .42fr);
    align-items: center;
    gap: var(--es-4);
    min-width: 0;
    padding: var(--es-5);
    color: inherit;
    text-decoration: none;
}

.es-homeoffer__link:hover { color: inherit; }
.es-homeoffer__link:focus-visible { outline-color: var(--es-on-campaign-coral); outline-offset: -5px; }
.es-homeoffer__copy { display: grid; justify-items: start; gap: var(--es-2); min-width: 0; }
.es-homeoffer .es-meta { color: var(--es-on-campaign-coral); }
.es-homeoffer__title {
    font-family: var(--es-font-display);
    font-size: clamp(var(--es-text-lg), 2.3vw, var(--es-text-2xl));
    font-weight: 800;
    line-height: var(--es-leading-tight);
    overflow-wrap: anywhere;
}
.es-homeoffer__price { font-size: var(--es-text-lg); font-weight: 700; }
.es-homeoffer__was { font-size: var(--es-text-sm); text-decoration: line-through; }
.es-homeoffer__cta { display: inline-flex; align-items: center; gap: var(--es-2); font-weight: 700; }
.es-homeoffer__visual {
    display: grid;
    place-items: center;
    min-width: 0;
    width: 100%;
    height: 10rem;
    border-radius: var(--es-r-md);
    background: var(--es-surface);
}
.es-homeoffer__visual img {
    display: block;
    width: auto;
    max-width: 100%;
    height: 10rem;
    object-fit: contain;
}
.es-homeoffer__placeholder { width: var(--es-8); height: var(--es-8); }

.es-home__departments { padding-block: var(--es-5) var(--es-6); }
.es-home__departments .es-deptgrid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}
.es-home__departments .es-deptcard {
    padding: var(--es-4);
    background: var(--es-card-sky);
    border-color: var(--es-line-strong);
}
.es-home__departments li:nth-child(3n+2) .es-deptcard { background: var(--es-card-mint); }
.es-home__departments li:nth-child(3n) .es-deptcard { background: var(--es-card-sand); }
.es-home__departments .es-deptcard__top { flex-direction: column; gap: var(--es-1); }
.es-home__departments .es-deptcard__name { overflow-wrap: anywhere; }
.es-home__departments .es-deptcard__cta { font-size: var(--es-text-xs); }

.es-heroask__label {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    color: var(--es-ink-3);
}

.es-heroask__title {
    font-family: var(--es-font-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: var(--es-3) 0 var(--es-2);
}

/* Gioi han dong chu bang `ch` dat TRUC TIEP len the chu, khong len vat chua:
   vat chua thua font than 16px nen 46ch tren no se ra mot con so khac han. */
.es-heroask__lead { max-width: 46ch; margin-bottom: var(--es-4); }

.es-heroask__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--es-2);
}

/* Nen chip = nen panel, phan biet bang duong vien. Do lai roi moi chon: nen
   `--es-pitch` dat trong panel `--es-surface` chi con 2.67:1 cho
   `--es-line-strong`, duoi nguong 3:1 cua WCAG 1.4.11 cho vien vat thao tac
   duoc; giu nen surface thi ty le la 3.45:1. */
.es-askchip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-3);
    width: 100%;
    min-height: 48px;
    padding: var(--es-3) var(--es-4);
    text-align: left;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--es-ink-2);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-md);
    cursor: pointer;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease),
                color var(--es-t-base) var(--es-ease),
                transform var(--es-t-fast) var(--es-ease);
}

.es-askchip:hover {
    background-color: var(--es-pitch);
    border-color: var(--es-ink);
    color: var(--es-ink);
    transform: translateY(-1px);
}

.es-askchip:active { transform: translateY(0) scale(.98); }

.es-askchip__arrow {
    flex: none;
    opacity: .5;
    transition: opacity var(--es-t-base) var(--es-ease),
                transform var(--es-t-base) var(--es-ease);
}

.es-askchip:hover .es-askchip__arrow { opacity: 1; transform: translateX(3px); }

/* --- Trang chu: chi muc mon the thao ------------------------------------- */

/* `auto-fit` chi chan duoc TRUONG HOP thua cot khi it muc hon so cot; no
   KHONG chan duoc hang cuoi le. Do that voi 11 mon o 1280px: 5 cot x 3 hang =
   4 o trong, va vi khoi nay to nen --es-line roi de gap 1px lam duong ke, 4 o
   trong do hien thanh mot mang mau vien 961x76px nam trong mot cai hop bo goc
   — dung cai "thung mot lo" ma dot redesign tuong da xu ly xong.
   Bo hop chung di: cac o tro thanh the roi co vien rieng, giong het luoi san
   pham. Hang cuoi le luc do la hanh vi binh thuong cua luoi, khong ai doc ra
   la loi. */
.es-sportindex {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
    gap: var(--es-2);
}

.es-sportlink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-3);
    min-height: 76px;
    padding: var(--es-4) var(--es-5);
    height: 100%;
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-md);
    text-decoration: none;
    color: var(--es-ink);
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease),
                color var(--es-t-base) var(--es-ease);
}

.es-sportlink:hover {
    background-color: var(--es-pitch);
    border-color: var(--es-line-strong);
    color: var(--es-ink);
}

.es-sportlink__name {
    font-family: var(--es-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.es-sportlink__arrow {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--es-t-base) var(--es-ease),
                transform var(--es-t-base) var(--es-ease);
}

.es-sportlink:hover .es-sportlink__arrow { opacity: 1; transform: translateX(0); }

/* --- Trang danh sach: rail loc + luoi ------------------------------------ */

.es-shop {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--es-6);
    align-items: start;
}

.es-shop__main { min-width: 0; }

.es-resulthead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-2) var(--es-4);
    padding-bottom: var(--es-4);
    margin-bottom: var(--es-4);
    border-bottom: 1px solid var(--es-line);
}

.es-resulthead__count {
    font-family: var(--es-font-display);
    font-size: 1.125rem;
    font-weight: 700;
}

/* `flex-direction: column` la BAT BUOC, khong phai trang tri. Bootstrap dat
   `.offcanvas-lg .offcanvas-body { display: flex }` tu 992px tro len (no viet
   quy tac do cho navbar ngang), va mac dinh cua flex la `row` — nen moi khoi
   cua rail xep CANH NHAU: "89 san pham" mot cot, cay danh muc mot cot, ca form
   loc bi ep con 180px trong mot rail 260px. Loi nay chi nhin man hinh moi
   thay: khong co canh bao nao, va moi o loc van bam duoc, chi la be ngang cua
   chung bi chia ba. */
.es-rail__body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.es-rail__count {
    padding-bottom: var(--es-3);
    margin-bottom: var(--es-4);
    border-bottom: 1px solid var(--es-line);
}

.es-rail__group {
    border: 0;
    padding: 0;
    margin: 0 0 var(--es-5);
}

.es-rail__legend {
    display: block;
    float: none;
    width: auto;
    font-family: var(--es-font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--es-ink-3);
    margin-bottom: var(--es-2);
    padding: 0;
}

.es-rail__pricerow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--es-2);
}

.es-rail__pricerow .form-label { margin-bottom: 4px; color: var(--es-ink-3); }

/* Rail loc cao 1121px trong mot khung dinh cao 620px, nghia la phai cuon 501px
   BEN TRONG rail moi thay nut "Loc" — hanh dong duy nhat cua ca bang loc nam
   ngoai tam nhin ngay tu dau. Ghim nut xuong day vung cuon. */
/* Bo loc size trong rail. Dung lai o size cua trang san pham (`.es-sizeopt`) de khach
   nhan ra ngay day la cung mot thu; khac o cho no gom nhom theo bang size va nam trong
   mot <details> de khong chiem ca man hinh rail. */
.es-sizefilter__toggle { cursor: pointer; list-style: none; }
.es-sizefilter__toggle::-webkit-details-marker { display: none; }

.es-sizefilter__toggle::after {
    content: "+";
    float: right;
    font-family: var(--es-font-mono);
    font-weight: 400;
    color: var(--es-ink-3);
}

.es-sizefilter[open] > .es-sizefilter__toggle::after { content: "\2212"; }

.es-sizefilter__all { margin-bottom: var(--es-3); }

.es-sizefilter__group {
    border: 0;
    padding: 0;
    margin: 0 0 var(--es-3) 0;
    min-width: 0;
}

.es-sizefilter__grouplabel {
    float: none;
    width: auto;
    padding: 0;
    margin-bottom: var(--es-2);
    font-size: .8125rem;
    color: var(--es-ink-3);
}

.es-sizefilter__grid { display: flex; flex-wrap: wrap; gap: var(--es-2); }

.es-sortbar {
    display: flex;
    align-items: center;
    gap: var(--es-3);
    margin-bottom: var(--es-4);
    /* `.es-chiprail` ben trong cuon ngang duoc, nen nhan "Sap xep" phai bi cam co lai
       — khong co dong nay thi o man hinh hep nhan bi ep xuong con vai ky tu. */
    min-width: 0;
}

.es-sortbar__label { flex: none; }
.es-sortbar .es-chiprail { margin-bottom: 0; }

.es-rail__submit {
    position: sticky;
    bottom: 0;
    padding-top: var(--es-4);
    padding-bottom: var(--es-2);
    background-color: var(--es-canvas);
    /* Che noi dung dang truot ben duoi thay vi de chu chay xuyen qua nut */
    box-shadow: 0 -12px 12px -6px var(--es-canvas);
}

/* Ngan keo loc duoi lg dung class `.offcanvas-lg`, KHONG phai `.offcanvas`,
   nen no khong an quy tac `.offcanvas { background: brand-bg }` o muc [2] —
   nen cua no van la canvas, dung bang nen cua khoi ghim nay. Ghim o day con
   can hon o desktop vi ngan keo cuon dai hon. */

/* Chip loc dang bat: dau X nam trong chip */
.es-filterchips { margin-bottom: var(--es-5); }
.es-filterchips .es-icon { width: .85em; height: .85em; opacity: .7; }

/* --- Trang chi tiet san pham --------------------------------------------- */

.es-detailstage {
    align-items: start;
    padding: clamp(20px, 4vw, 48px);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-shadow-1);
}

.es-detailstage .es-detail__media,
.es-detailstage .es-buybox { min-width: 0; }

.es-buybox__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--es-3);
    margin-bottom: var(--es-4);
}

.es-buybox > .es-kicker { margin-bottom: var(--es-2); }

/* Xep DOC chu khong ngang: tu module 8.2 khoi mua hang co them phan chon size nam TREN hang
   "so luong + them vao gio". Hai phan do khong bao gio duoc nam cung mot hang — chon size la mot
   quyet dinh rieng, nhet chung hang voi nut mua se lam nguoi ta bam mua truoc khi chon. */
.es-buybox__form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--es-5);
    padding-block: var(--es-5);
    border-top: 1px solid var(--es-line);
    border-bottom: 1px solid var(--es-line);
    margin-bottom: var(--es-5);
}

.es-buybox__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-3);
}

.es-buybox__desc { margin-bottom: var(--es-5); }
.es-buybox__specs { margin-bottom: 0; }

/* Nut tang/giam so luong. Vung cham 44px cho ca hai nut, thay cho mui ten
   spinner mac dinh cua trinh duyet (chi khoang 10px, gan nhu khong bam trung
   duoc tren dien thoai). */
.es-stepper {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-md);
    background-color: var(--es-surface);
    overflow: hidden;
}

.es-stepper__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--es-ink);
    cursor: pointer;
    transition: background-color var(--es-t-base) var(--es-ease);
}

.es-stepper__btn:hover  { background-color: var(--es-pitch); }
.es-stepper__btn:active { background-color: var(--es-pitch-hover); }

.es-stepper__input {
    width: 3.5rem;
    height: 44px;
    padding: 0;
    border: 0;
    border-inline: 1.5px solid var(--es-line-strong);
    background-color: transparent;
    color: var(--es-ink);
    font-family: var(--es-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    text-align: center;
}

.es-stepper__input:focus { outline: 2px solid var(--es-focus); outline-offset: -2px; }

/* An mui ten spinner: da co hai nut thay the */
.es-stepper__input::-webkit-outer-spin-button,
.es-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.es-stepper__input[type=number] { -moz-appearance: textfield; appearance: textfield; }


/* --- Chon size (module 8.2) ---------------------------------------------- */

.es-sizepick {
    /* <fieldset> mang san border/padding/margin cua trinh duyet, phai go het */
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.es-sizepick__legend {
    padding: 0;
    margin-bottom: var(--es-3);
    font-family: var(--es-font-display);
    font-size: .9375rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--es-ink);
}

.es-sizepick__grid { display: flex; flex-wrap: wrap; gap: var(--es-2); }

.es-sizeopt { position: relative; display: inline-flex; }

/* O radio that VAN nam trong DOM va van phu kin o size, chi la khong ve ra.
   KHONG dung `display: none`: lam vay la go luon phan tu khoi thu tu tab va
   khoi trinh doc man hinh, tuc la ban phim khong con chon duoc size. */
.es-sizeopt__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.es-sizeopt__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px la nguong vung cham toi thieu — cung con so da dung cho stepper. */
    min-width: 52px;
    min-height: 44px;
    padding: 0 var(--es-3);
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-md);
    background-color: var(--es-surface);
    color: var(--es-ink);
    font-family: var(--es-font-mono);
    font-size: .9375rem;
    line-height: 1;
    white-space: nowrap;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease),
                color var(--es-t-base) var(--es-ease);
}

.es-sizeopt:hover .es-sizeopt__label { border-color: var(--es-ink); }

/* "Dang duoc chon" la mot trong hai truong hop duy nhat duoc dung volt. */
.es-sizeopt__input:checked + .es-sizeopt__label {
    background-color: var(--es-volt);
    border-color: var(--es-volt);
    color: var(--es-on-volt);
    font-weight: 600;
}

.es-sizeopt__input:focus-visible + .es-sizeopt__label {
    outline: 2px solid var(--es-focus);
    outline-offset: 2px;
}

/* Size het hang van hien ra — khach can biet cua hang CO size do, chi la dang
   het. Gach ngang chu khong chi lam mo: lam mo tiep thi chu tut xuong duoi
   nguong 4.5:1, tuc la doi mot thong tin lay mot loi tuong phan. */
.es-sizeopt--off .es-sizeopt__label,
.es-sizeopt--off:hover .es-sizeopt__label {
    border-style: dashed;
    border-color: var(--es-line);
    color: var(--es-ink-3);
    text-decoration: line-through;
    cursor: not-allowed;
}

.es-sizeopt--static .es-sizeopt__label { cursor: default; }
.es-sizeopt--static:hover .es-sizeopt__label { border-color: var(--es-line-strong); }


/* --- Bang huong dan chon size -------------------------------------------- */

.es-sizeguide {
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-md);
    background-color: var(--es-surface);
    margin-bottom: var(--es-5);
}

.es-sizeguide__toggle {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    padding: var(--es-3) var(--es-4);
    cursor: pointer;
    font-weight: 500;
    color: var(--es-ink);
    /* Bo tam giac mac dinh cua <summary> (Safari can ca dong -webkit) de tu ve dau + / − */
    list-style: none;
}

.es-sizeguide__toggle::-webkit-details-marker { display: none; }

.es-sizeguide__toggle::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    font-family: var(--es-font-mono);
    line-height: 1;
}

.es-sizeguide[open] .es-sizeguide__toggle::before { content: "\2212"; }

.es-sizeguide__toggle:focus-visible { outline: 2px solid var(--es-focus); outline-offset: -2px; }

.es-sizeguide__body {
    display: grid;
    gap: var(--es-3);
    padding: 0 var(--es-4) var(--es-4);
    /* O luoi mac dinh khong co lai duoc duoi kich thuoc noi dung, ma ben trong co mot cai bang:
       thieu dong nay thi bang rong lam CA TRANG cuon ngang du da nam trong .es-tablewrap. */
    min-width: 0;
}

.es-sizeguide__table { margin-bottom: 0; }


/* ==========================================================================
   [11] WIDGET TRO LY (chuyen tu style.css, giu NGUYEN moi ten class vi
   chat.js sinh ra chung va cac test e2e bam vao chung)
   ========================================================================== */

.es-assistant {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    /* Duoi z-index modal cua Bootstrap de widget khong bao gio de len dialog */
    z-index: var(--es-z-overlay);
    /* O mobile wrapper gian tu trai sang phai de panel lay du chieu rong. Vung trong suot cua no
       khong duoc chan nut/link ben duoi; chi hai control that moi nhan tuong tac. */
    pointer-events: none;
}

.assistant-toggle,
.assistant-window { pointer-events: auto; }

.assistant-toggle {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    margin-left: auto;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--es-r-pill);
    background-color: var(--es-volt);
    color: var(--es-on-volt);
    font-family: var(--es-font-body);
    font-size: .9375rem;
    font-weight: 600;
    box-shadow: var(--es-shadow-2);
    cursor: pointer;
    transition: transform var(--es-t-fast) var(--es-ease);
}

.assistant-toggle:hover  { transform: translateY(-2px); }
.assistant-toggle:active { transform: translateY(0) scale(.97); }
.assistant-toggle:focus-visible { outline-color: var(--es-ink); box-shadow: var(--es-shadow-2); }

/* Khi panel mo, header da co nut dong rieng. Giu toggle ben duoi vua tao hai diem dong trung lap,
   vua chiem them 60px va va vao panel tren man hinh thap. */
.assistant-toggle[aria-expanded="true"] { display: none; }

.assistant-window {
    display: flex;
    flex-direction: column;
    width: 23rem;
    /* Gioi han theo man hinh: dien thoai hep hon thi cua so tu co lai */
    max-width: calc(100vw - 2rem);
    height: 32rem;
    max-height: calc(100vh - 6rem);
    max-height: calc(100dvh - 6rem);
    margin-bottom: 0;
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-shadow-2);
    overflow: hidden;
}

.assistant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-2);
    padding: var(--es-3) var(--es-4);
    background-color: var(--es-brand-bg);
    color: var(--es-brand-fg);
}

.assistant-header strong {
    font-family: var(--es-font-display);
    font-size: .9375rem;
    font-weight: 700;
}

.assistant-identity {
    display: flex;
    flex-direction: column;
    gap: var(--es-1);
    min-width: 0;
}

.assistant-identity > span {
    display: flex;
    align-items: center;
    gap: var(--es-2);
    color: var(--es-brand-fg-2);
    font-size: var(--es-text-xs);
}

.assistant-identity i {
    width: .5rem;
    height: .5rem;
    border-radius: var(--es-r-pill);
    background-color: var(--es-brand-fg);
}

.assistant-header-actions { display: flex; gap: var(--es-2); }

.assistant-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--es-brand-line);
    border-radius: var(--es-r-sm);
    background-color: transparent;
    color: var(--es-brand-fg);
    font-family: var(--es-font-body);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--es-t-base) var(--es-ease);
}

.assistant-header-btn:hover { background-color: var(--es-brand-hover); color: var(--es-brand-fg); }

.assistant-header-btn:disabled {
    opacity: .55;
    cursor: wait;
}

.assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--es-4);
    background-color: var(--es-canvas);
}

.assistant-message {
    display: flex;
    margin-bottom: var(--es-3);
}

.assistant-message-user { justify-content: flex-end; }

.assistant-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: var(--es-r-md);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    font-size: .9375rem;
    line-height: 1.55;
    /* Cau tra loi cua LLM co the co xuong dong; giu nguyen nhung van ngat
       duoc tu dai. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.assistant-message-user .assistant-bubble {
    background-color: var(--es-ink);
    border-color: var(--es-ink);
    color: var(--es-canvas);
}

.assistant-typing .assistant-bubble {
    color: var(--es-ink-3);
    font-style: italic;
}

.assistant-products {
    display: flex;
    flex-direction: column;
    gap: var(--es-2);
    margin-bottom: var(--es-3);
}

.assistant-product {
    display: flex;
    align-items: center;
    gap: var(--es-3);
    padding: var(--es-2);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--es-t-base) var(--es-ease);
}

.assistant-product:hover { border-color: var(--es-ink); color: inherit; }

.assistant-product-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    padding: 3px;
    border-radius: var(--es-r-sm);
    background-color: var(--es-pitch);
    flex-shrink: 0;
}

.assistant-product-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.assistant-product-name {
    font-size: .875rem;
    font-weight: 500;
    color: var(--es-ink);
}

.assistant-product-price {
    font-family: var(--es-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .875rem;
    color: var(--es-ink);
}

.assistant-product-original-price {
    font-family: var(--es-font-mono);
    font-size: .75rem;
    color: var(--es-ink-3);
}

/* Size tren card cua tro ly (module 8.4). Cung co chu voi gia goc, nhung mau
   dam hon vi day la thong tin can doc chu khong phai chu thich. */
.assistant-product-size {
    font-family: var(--es-font-mono);
    font-size: .75rem;
    color: var(--es-ink-2);
}

.assistant-clarification {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-2);
    margin: calc(var(--es-2) * -1) 0 var(--es-3);
}

.assistant-clarification-status {
    flex-basis: 100%;
    color: var(--es-ink-2);
    font-size: .75rem;
    font-weight: 600;
}

.assistant-suggested-reply {
    min-height: 36px;
    padding: var(--es-2) var(--es-3);
    border: 1px solid var(--es-line-strong);
    border-radius: var(--es-r-pill);
    background-color: var(--es-surface);
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: .8125rem;
    line-height: 1.2;
    cursor: pointer;
}

.assistant-suggested-reply:hover,
.assistant-suggested-reply:focus-visible {
    background-color: var(--es-pitch-hover);
}

.assistant-suggested-reply:disabled {
    color: var(--es-ink-3);
    cursor: wait;
}

.assistant-form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-2);
    padding: var(--es-3);
    border-top: 1px solid var(--es-line);
    background-color: var(--es-surface);
}

.assistant-form .form-control { flex: 1 1 12rem; }

.assistant-form__hint {
    flex: 1 0 100%;
    margin: 0;
    color: var(--es-ink-3);
    font-size: var(--es-text-xs);
}


/* --- Hop xac nhan huy don (module 9.4) ---------------------------------- */

/* `<details>` chu khong phai modal cua Bootstrap: mo/dong duoc ma khong can JavaScript,
   cung ky thuat da dung cho bang huong dan chon size. */
.es-cancelbox {
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-md);
    padding: var(--es-3) var(--es-4);
}

.es-cancelbox__toggle {
    cursor: pointer;
    font-family: var(--es-font-display);
    font-size: .9375rem;
    font-weight: 700;
    color: var(--es-alert);
}

.es-cancelbox__body { padding-top: var(--es-3); }
.es-cancelbox__body form { margin-bottom: 0; }


/* ==========================================================================
   [12] YEU THICH (module 9.3)
   ========================================================================== */

.es-wishform { margin: var(--es-3) 0 0 0; }

.es-wishbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--es-2);
    /* 44px la nguong vung cham toi thieu — cung con so da dung cho stepper va o cham sao. */
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--es-4);
    border: 1.5px solid var(--es-line-strong);
    border-radius: var(--es-r-sm);
    background-color: transparent;
    color: var(--es-ink);
    font-family: var(--es-font-body);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--es-t-base) var(--es-ease),
                background-color var(--es-t-base) var(--es-ease);
}

.es-wishbtn--block { width: 100%; }

.es-wishbtn:hover { border-color: var(--es-ink); color: var(--es-ink); }

/* Trai tim DAY = dang duoc bat. Bao trang thai bang HAI dau hieu chu khong chi mot: hinh trai tim
   doi (rong -> day) VA nen doi. Chi doi mau la khong du — WCAG 1.4.1 cam dung mot minh mau sac de
   truyen dat thong tin, va o day thi mot nut bat/tat khong duoc phep chi khac nhau o sac do.
   Khong dung volt: cung ly do da ghi cho ngoi sao o muc [12] — volt chi dat 1.15:1 tren nen sang.
*/
.es-wishbtn.is-on {
    border-color: var(--es-ink);
    background-color: var(--es-pitch);
}

.es-wishbtn.is-on:hover { background-color: var(--es-pitch-hover); }

/* --- The trong trang yeu thich ------------------------------------------- */

.es-wishcard { display: flex; flex-direction: column; }

.es-wishcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-3);
    flex-wrap: wrap;
    margin-top: var(--es-3);
}

.es-wishcard__foot form { margin-bottom: 0; }


/* ==========================================================================
   [13] DANH GIA SAN PHAM (module 9.2)
   ========================================================================== */

/* Sao day dung `--es-ink`, sao rong dung `--es-line-strong`.
   KHONG dung volt du sao "dang duoc chon" nghe rat giong truong hop cua luat
   volt: da do lai va volt truot han tren nen sang. `--es-volt` dat 1.15:1 tren
   canvas, ban press `--es-volt-press` cung chi 1.55:1 — WCAG 1.4.11 doi >= 3:1
   cho do hoa MANG NGHIA, ma ngoi sao day chinh la thong tin. Day dung mot bay
   ma CLAUDE.md da ghi cho vong focus: "tuong phan phai do LAI cho TUNG theme,
   khong suy ra tu theme kia".
   `--es-line-strong` dat 3:1 tren moi be mat sang — sao RONG cung phai doc ra
   duoc, no la mot nua thong tin cua "3 tren 5". Ca hai token deu doi theo theme
   nen cap tuong phan giu nguyen o che do toi. */
.es-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}

.es-stars__on  { color: var(--es-ink); }
.es-stars__off { color: var(--es-line-strong); }

/* Diem gon tren the san pham */
.es-ratinline {
    display: flex;
    align-items: center;
    gap: var(--es-2);
}

.es-ratinline__num {
    font-family: var(--es-font-mono);
    font-size: .75rem;
    color: var(--es-ink-3);
}

/* Link nhay tu buybox xuong khoi danh gia */
.es-ratlink {
    display: inline-flex;
    align-items: center;
    gap: var(--es-2);
    margin-bottom: var(--es-4);
    text-decoration: none;
    color: inherit;
}

.es-ratlink:hover .es-meta { color: var(--es-ink); }

/* --- Danh sach danh gia -------------------------------------------------- */

.es-reviewlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--es-5); }

.es-review {
    padding-bottom: var(--es-5);
    border-bottom: 1px solid var(--es-line);
}

.es-reviewlist > .es-review:last-child { padding-bottom: 0; border-bottom: 0; }

.es-review__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-3);
    flex-wrap: wrap;
    margin-bottom: var(--es-2);
}

.es-review__author {
    margin-right: var(--es-3);
    font-family: var(--es-font-display);
    font-weight: 700;
    color: var(--es-ink);
}

/* `pre-line`: khach xuong dong trong nhan xet thi giu lai, nhung khong giu
   khoang trang thua — dan mot khoi van ban co thut le khong duoc lam vo cot. */
.es-review__text { margin-bottom: var(--es-3); white-space: pre-line; }
.es-review__actions { margin-bottom: 0; }

/* --- Khoi tom tat -------------------------------------------------------- */

.es-ratingsum {
    display: grid;
    justify-items: start;
    gap: var(--es-2);
    padding-bottom: var(--es-4);
    margin-bottom: var(--es-4);
    border-bottom: 1px solid var(--es-line);
}

.es-ratingsum__score {
    font-family: var(--es-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--es-ink);
}

.es-ratingbars { list-style: none; margin: 0 0 var(--es-5) 0; padding: 0; display: grid; gap: var(--es-2); }

.es-ratingbar {
    /* Nhan va con so co be rong CO DINH, thanh ty le an het phan con lai. De
       cot tu gian thi moi hang mot do dai va bieu do khong con doc theo chieu
       doc duoc nua — do la ca cong dung cua no. */
    display: grid;
    grid-template-columns: 3.5rem 1fr 2rem;
    align-items: center;
    gap: var(--es-2);
    font-size: .8125rem;
    color: var(--es-ink-3);
}

.es-ratingbar__track {
    height: 6px;
    border-radius: var(--es-r-pill);
    background-color: var(--es-pitch);
    overflow: hidden;
}

.es-ratingbar__fill {
    display: block;
    height: 100%;
    border-radius: var(--es-r-pill);
    background-color: var(--es-ink);
}

.es-ratingbar__count { text-align: right; }

/* --- Form cham sao ------------------------------------------------------- */

.es-reviewform__title { margin-bottom: var(--es-3); }
.es-reviewform__field { margin: var(--es-4) 0; }

.es-rating { border: 0; padding: 0; margin: 0; min-width: 0; }

.es-rating__legend {
    padding: 0;
    margin-bottom: var(--es-2);
    font-size: .8125rem;
    color: var(--es-ink-3);
}

/* Sao nam NGUOC trong DOM (5 -> 1) roi lat lai bang `row-reverse`, de quy tac
   `input:checked ~ label` to duoc ca cac sao NHO HON ma khong can JavaScript.
   `justify-content: flex-end` keo cum ve lai ben trai sau khi lat. */
.es-rating__stars {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--es-1);
}

/* O radio VAN nam trong DOM va van nhan duoc focus — chi khong ve ra. Khong
   dung `display: none`: lam vay la go luon khoi thu tu tab, tuc la ban phim
   khong con cham sao duoc (cung ly do da ghi o `.es-sizeopt__input`). */
.es-rating__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.es-rating__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px la nguong vung cham toi thieu, cung con so da dung cho stepper. */
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: var(--es-r-sm);
    color: var(--es-line-strong);
    cursor: pointer;
    transition: color var(--es-t-fast) var(--es-ease);
}

.es-rating__star .es-icon { width: 24px; height: 24px; }

.es-rating__input:checked ~ .es-rating__star { color: var(--es-ink); }

/* Xem truoc khi ro chuot: bo mau da chon di roi to lai theo sao dang tro toi. */
.es-rating__stars:hover .es-rating__input:checked ~ .es-rating__star { color: var(--es-line-strong); }
.es-rating__stars:hover .es-rating__star:hover,
.es-rating__stars:hover .es-rating__star:hover ~ .es-rating__star { color: var(--es-ink); }

.es-rating__input:focus-visible + .es-rating__star {
    outline: 2px solid var(--es-focus);
    outline-offset: 2px;
}


/* ==========================================================================
   [16] CATALOG (module 11.8)
   Menu danh muc 2 tang · breadcrumb · cay danh muc trong rail loc ·
   luoi department o trang chu · thu vien anh o trang chi tiet.

   Khong component nao o day go cung mot gia tri ma tokens.css da co.
   ========================================================================== */

/* --- Menu danh muc 2 tang tren header ------------------------------------
   Nam TRONG khoi thuong hieu (nen toi o ca hai theme) nen nut mo lay mau tu
   nhom `--es-brand-*`; con BANG dropdown la mot be mat noi len tren trang, nen
   no lay mau trang (`.dropdown-menu` da duoc "cau noi Bootstrap" o muc [2] doi
   sang `--es-surface`/`--es-ink`). Lay `--es-ink` cho chu trong bang dat tren
   nen header thi ty le tuong phan la 1.0 — dung cai bay da ghi trong CLAUDE.md
   voi `.es-btn--ghost`. */

.es-nav__dd { display: inline-flex; }

.es-nav__link--dd {
    gap: var(--es-1);
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.es-nav__caret {
    width: 14px;
    height: 14px;
    transition: transform var(--es-t-base) var(--es-ease);
}

.es-nav__link--dd[aria-expanded="true"] { color: var(--es-brand-fg); }
.es-nav__link--dd[aria-expanded="true"] .es-nav__caret { transform: rotate(180deg); }

.es-catmenu {
    /* Rong theo NOI DUNG chu khong theo man hinh: bang chi hien tu 992px tro
       len (`.es-nav` bi an ben duoi nguong do), nen 720px luon vua. `min()`
       la chot chan cho cua so trinh duyet bi keo hep bat thuong. */
    min-width: min(720px, calc(100vw - var(--es-gutter) * 2));
    padding: var(--es-5);
    box-shadow: var(--es-shadow-2);
}

.es-catmenu__grid {
    display: grid;
    /* `auto-fit`: so department do DU LIEU quyet dinh (7 hom nay). Go cung so
       cot thi them mot department nua la bang menu thung mot o. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--es-5) var(--es-4);
}

.es-catmenu__col { min-width: 0; }

.es-catmenu__dept {
    display: block;
    margin-bottom: var(--es-2);
    padding-bottom: var(--es-2);
    border-bottom: 1px solid var(--es-line);
    color: var(--es-ink);
    font-family: var(--es-font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-decoration: none;
}

.es-catmenu__dept:hover { color: var(--es-ink); text-decoration: underline; }

.es-catmenu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.es-catmenu__link {
    display: block;
    padding: 6px 8px;
    margin-left: -8px;
    border-radius: var(--es-r-sm);
    color: var(--es-ink-2);
    font-size: .9375rem;
    text-decoration: none;
    transition: background-color var(--es-t-fast) var(--es-ease),
                color var(--es-t-fast) var(--es-ease);
}

.es-catmenu__link:hover {
    background-color: var(--es-pitch);
    color: var(--es-ink);
}

/* --- Menu danh muc trong offcanvas (ban di dong) -------------------------
   `<details>` thay vi mot thu vien accordion: mo/dong duoc khi khong co
   JavaScript, cung tinh than da ap cho stepper so luong va bang huong dan
   size. */

.es-offcanvas__summary {
    cursor: pointer;
    list-style: none;
    justify-content: space-between;
}

.es-offcanvas__summary::-webkit-details-marker { display: none; }

.es-offcanvas__caret {
    width: 14px;
    height: 14px;
    flex: none;
    transition: transform var(--es-t-base) var(--es-ease);
}

.es-offcanvas__group[open] > .es-offcanvas__summary .es-offcanvas__caret {
    transform: rotate(180deg);
}

.es-offcanvas__sub {
    list-style: none;
    margin: 0 0 var(--es-2) 0;
    padding: 0 0 0 var(--es-4);
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--es-brand-line);
    margin-left: var(--es-3);
}

.es-offcanvas__link--sub {
    padding: 10px 12px;
    font-size: .9375rem;
    color: var(--es-brand-fg-2);
}

.es-offcanvas__link--sub:hover { color: var(--es-brand-fg); }

/* --- Breadcrumb ---------------------------------------------------------- */

.es-crumbs { margin-bottom: var(--es-4); }

.es-crumbs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--es-2);
    font-size: .875rem;
}

.es-crumbs__list > li { display: inline-flex; align-items: center; gap: var(--es-2); }

.es-crumbs__link {
    color: var(--es-ink-3);
    text-decoration: none;
}

.es-crumbs__link:hover { color: var(--es-ink); text-decoration: underline; }

.es-crumbs__here { color: var(--es-ink-2); font-weight: 500; }

.es-crumbs__sep {
    width: 12px;
    height: 12px;
    flex: none;
    color: var(--es-line-strong);
}

.es-pagehead__lead {
    max-width: 60ch;
    margin: var(--es-3) 0 0;
    color: var(--es-ink-2);
}

/* Danh muc va thuong hieu khong can mot hero lon nhu catalog tong, nhung van
   can mot khoi nhan dien de tieu de khong troi tren nen canh. */
.es-listingintro {
    max-width: none;
    margin-bottom: var(--es-5);
    padding: clamp(20px, 3vw, 32px);
    background-color: var(--es-action-soft);
    border: 1px solid var(--es-line);
    border-left: 4px solid var(--es-action);
    border-radius: var(--es-r-lg);
}

.es-listingintro .es-pagehead__lead { max-width: 68ch; }

.es-subcats { margin-bottom: var(--es-5); }

/* Ten thuong hieu o trang chi tiet: la lien ket toi trang thuong hieu nhung
   nam trong mot dong `.es-meta` chu nho — gach chan de no doc ra la link chu
   khong chi doi mau (mau thoi la khong du de phan biet, WCAG 1.4.1). */
.es-metalink {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.es-metalink:hover { color: var(--es-ink); }

/* --- Trung tam kien thuc the thao (module 13.3) -------------------------
   So mon va so muc noi dung den tu taxonomy/file noi dung, nen hai luoi deu
   tu chon cot theo BE RONG VAT CHUA. Moi the tu co vien rieng de hang cuoi
   le khong tao mot mang nen trong. */

.es-sportintro { max-width: 50rem; }

.es-sportintro__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--es-3) var(--es-6);
    margin-top: var(--es-5);
    padding-top: var(--es-4);
    border-top: 1px solid var(--es-line);
    color: var(--es-ink-2);
}

.es-sportintro__meta strong {
    font-family: var(--es-font-mono);
    color: var(--es-ink);
}

.es-sportgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: var(--es-4);
}

.es-sportcard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--es-4);
    min-width: 0;
    padding: var(--es-5);
    color: var(--es-ink);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-shadow-1);
    text-decoration: none;
    transition:
        transform var(--es-t-base) var(--es-ease),
        border-color var(--es-t-base) var(--es-ease),
        box-shadow var(--es-t-base) var(--es-ease);
}

.es-sportcard:nth-child(3n + 1) { border-top-color: var(--es-campaign-blue); }
.es-sportcard:nth-child(3n + 2) { border-top-color: var(--es-campaign-teal); }
.es-sportcard:nth-child(3n) { border-top-color: var(--es-campaign-coral); }

.es-sportproducts { align-items: stretch; }

.es-sportcard:hover {
    color: var(--es-ink);
    border-color: var(--es-line-strong);
    box-shadow: var(--es-shadow-2);
    transform: translateY(calc(var(--es-1) * -1));
}

.es-sportcard__mark,
.es-sportguide__index {
    font-family: var(--es-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--es-ink-3);
}

.es-sportcard__mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    background-color: var(--es-pitch);
    border-radius: var(--es-r-md);
    font-weight: 700;
}

.es-sportcard__body { display: flex; min-width: 0; flex-direction: column; }

.es-sportcard__name {
    font-family: var(--es-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.es-sportcard__intro {
    display: -webkit-box;
    margin-top: var(--es-2);
    overflow: hidden;
    color: var(--es-ink-2);
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.es-sportcard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--es-3);
    margin-top: auto;
    padding-top: var(--es-4);
    color: var(--es-ink-3);
    font-size: .875rem;
    font-weight: 600;
}

.es-sportcard__arrow { width: 1rem; height: 1rem; flex: none; }

.es-sporthero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--es-6);
    align-items: end;
    padding: clamp(32px, 6vw, 72px);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
    box-shadow: var(--es-shadow-1);
}

.es-sporthero__copy { max-width: 48rem; }

.es-sporthero__lead {
    max-width: 60ch;
    margin: var(--es-4) 0 var(--es-5);
    color: var(--es-ink-2);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    line-height: 1.65;
}

.es-sporthero__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--es-5);
    border-top: 1px solid var(--es-line);
}

.es-sporthero__number {
    font-family: var(--es-font-mono);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1;
}

.es-sporthero__label {
    max-width: 14rem;
    margin-top: var(--es-2);
    color: var(--es-ink-3);
    line-height: 1.4;
}

.es-sportguide {
    padding-block: var(--es-7);
    background-color: var(--es-pitch);
}

.es-sportguide__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--es-4);
}

.es-sportguide__card {
    min-width: 0;
    padding: var(--es-5);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-lg);
}

.es-sportguide__card--safety { border-color: var(--es-line-strong); }

.es-sportguide__index { display: block; margin-bottom: var(--es-3); font-size: .875rem; }

.es-sportguide__list {
    margin: var(--es-4) 0 0;
    padding-left: 1.25rem;
    color: var(--es-ink-2);
}

.es-sportguide__list > li + li { margin-top: var(--es-3); }

/* --- Cay danh muc trong rail loc ----------------------------------------
   Moi muc la LIEN KET toi trang danh muc rieng, khong phai o radio: tu 11.8
   bam vao mot danh muc la dieu huong chu khong phai bat mot dieu kien loc. */

.es-cattree__list,
.es-cattree__sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.es-cattree__dept + .es-cattree__dept { margin-top: var(--es-2); }

.es-cattree__link {
    display: block;
    padding: 7px 10px;
    border-left: 2px solid transparent;
    border-radius: 0 var(--es-r-sm) var(--es-r-sm) 0;
    color: var(--es-ink-2);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color var(--es-t-fast) var(--es-ease),
                color var(--es-t-fast) var(--es-ease),
                border-color var(--es-t-fast) var(--es-ease);
}

.es-cattree__link:hover { background-color: var(--es-pitch); color: var(--es-ink); }

.es-cattree__link--sub {
    padding-left: var(--es-5);
    font-weight: 400;
}

/* "Dang o danh muc nay". KHONG to volt: rail nam tren nen trang, ma volt chi
   dat 1.15:1 tren `--es-canvas` (luat volt trong CLAUDE.md). `--es-ink` doi
   theo theme nen cap tuong phan giu nguyen o ca hai che do. */
.es-cattree__link.is-active {
    border-left-color: var(--es-ink);
    background-color: var(--es-pitch);
    color: var(--es-ink);
    font-weight: 700;
}

/* --- Moc khoang gia + so san pham moi trang ------------------------------ */

/* Trong rail hep thi chip phai XUONG DONG chu khong cuon ngang: mot vung cuon
   ngang nam trong mot vung cuon doc (rail sticky co `overflow-y: auto`) la thu
   rat kho dung bang chuot lan bang ngon tay. */
.es-pricebuckets {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-bottom: var(--es-3);
    padding-bottom: 0;
}

.es-chip--sm {
    min-height: 36px;
    padding: 6px 14px;
    font-size: .875rem;
}

/* Hang duoi luoi: thanh phan trang o giua, o chon so san pham moi trang o ben phai.
   `.es-listfoot` la mot luoi 3 cot bang nhau chu khong phai flex `space-between`: co the o giua
   dung GIUA trang thay vi lech sang trai khi o ben phai vang mat (trang chi co mot trang thi
   thanh phan trang khong ve, va nguoc lai). */
.es-listfoot {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--es-3);
}

.es-listfoot > nav { grid-column: 2; }

.es-perpage {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--es-2);
    min-width: 0;
}

.es-perpage .es-chiprail { padding-bottom: 0; overflow-x: visible; }

/* Duoi 576px thi ba khoi khong con vua mot hang: xep doc, o chon ve giua cho can. */
@media (max-width: 575.98px) {
    .es-listfoot {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .es-listfoot > nav { grid-column: 1; }
    .es-perpage { grid-column: 1; justify-content: center; }
}

/* --- Luoi department o trang chu -----------------------------------------
   `auto-fill` + vien RIENG cho tung o: so department do du lieu quyet dinh nen
   hang cuoi se le, va mot khoi nen bao quanh ca luoi se bien phan le do thanh
   mot mang mau (luat CLAUDE.md, phat hien o dot audit 23/08). */

.es-deptgrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: var(--es-3);
}

.es-deptcard {
    display: flex;
    flex-direction: column;
    gap: var(--es-2);
    height: 100%;
    padding: var(--es-5);
    background-color: var(--es-surface);
    border: 1px solid var(--es-line);
    border-radius: var(--es-r-md);
    color: var(--es-ink);
    text-decoration: none;
    transition: background-color var(--es-t-base) var(--es-ease),
                border-color var(--es-t-base) var(--es-ease),
                transform var(--es-t-base) var(--es-ease);
}

.es-deptcard:hover {
    background-color: var(--es-pitch);
    border-color: var(--es-line-strong);
    color: var(--es-ink);
    transform: translateY(-2px);
}

.es-deptcard__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--es-3);
}

.es-deptcard__name {
    font-family: var(--es-font-display);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.02em;
}

.es-deptcard__desc {
    color: var(--es-ink-2);
    font-size: .9375rem;
    /* Mo ta danh muc dai ngan khac nhau; cat con 2 dong de moi the cao bang
       nhau ma khong phai go cung chieu cao. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.es-deptcard__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--es-2);
    margin-top: auto;
    padding-top: var(--es-2);
    font-family: var(--es-font-mono);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--es-ink-3);
}

.es-deptcard__arrow {
    width: 14px;
    height: 14px;
    transition: transform var(--es-t-base) var(--es-ease);
}

.es-deptcard:hover .es-deptcard__arrow { transform: translateX(4px); }
.es-deptcard:hover .es-deptcard__cta { color: var(--es-ink); }

/* --- Thu vien anh o trang chi tiet ---------------------------------------
   Doi anh KHONG can JavaScript: moi anh mot `<input type=radio>` an, thumbnail
   la `<label for>`, va `:checked ~` doi anh dang hien. Radio nam TRUOC hai
   khoi con lai trong DOM vi `~` chi chon duoc anh em DUNG SAU.

   Bon cap quy tac duoi day viet TAY chu khong sinh bang vong lap: gallery bi
   chan o 4 anh ngay trong macro `product_gallery`, va con so do trung voi tran
   that cua `fetch_catalog_images.py` (1 anh dai dien + toi da 3 anh phu). */

.es-gallery { position: relative; }

.es-gallery__radio {
    /* An nhung VAN nhan duoc focus ban phim: `display: none` se lam ca bo
       gallery khong dieu huong duoc bang phim mui ten. */
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.es-gallery__stage { margin-bottom: var(--es-3); }

.es-gallery__img {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8%;
}

.es-gallery__thumbs {
    /* BAT BUOC: khoi cuon ngang co chua `.visually-hidden` (Bootstrap dat no
       `position: absolute`) phai la containing block, neu khong no lay ca tai
       lieu lam moc va keo gian `scrollWidth` cua `<html>` — luat CLAUDE.md. */
    position: relative;
    display: flex;
    gap: var(--es-2);
    overflow-x: auto;
    padding-bottom: var(--es-1);
    scrollbar-width: thin;
    scrollbar-color: var(--es-line) transparent;
}

.es-gallery__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 76px;
    aspect-ratio: 1 / 1;
    margin: 0;
    /* `--es-ink-3` chu KHONG phai `--es-line-strong` nhu cac vien thao tac khac. WCAG 1.4.11 do
       duong vien voi mau HAI BEN no, ma o day hai ben la hai thu khac nhau: ben ngoai la nen
       trang, ben trong la o san (`--es-pitch`) cua chinh thumbnail. `--es-line-strong` dat 3.12
       voi nen trang nhung chi 2.64 voi o san — tuc mot nua duong vien khong dat nguong. Do lai
       tren CA hai be mat chu khong suy tu mot be mat (luat CLAUDE.md), `--es-ink-3` dat 5.49 va
       4.65 o che do sang, 5.63 va 4.55 o che do toi. Van du nhe hon `--es-ink` cua thumbnail
       dang xem (16.12 / 13.64) de hai trang thai phan biet duoc. */
    border: 1.5px solid var(--es-ink-3);
    border-radius: var(--es-r-sm);
    background-color: var(--es-pitch);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--es-t-base) var(--es-ease);
}

.es-gallery__thumb:hover { border-color: var(--es-ink); }

.es-gallery__thumbimg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6%;
}

/* Anh 1 */
.es-gallery__radio:nth-of-type(1):checked ~ .es-gallery__stage > .es-gallery__img:nth-of-type(1),
.es-gallery__radio:nth-of-type(2):checked ~ .es-gallery__stage > .es-gallery__img:nth-of-type(2),
.es-gallery__radio:nth-of-type(3):checked ~ .es-gallery__stage > .es-gallery__img:nth-of-type(3),
.es-gallery__radio:nth-of-type(4):checked ~ .es-gallery__stage > .es-gallery__img:nth-of-type(4) {
    display: block;
}

/* Thumbnail cua anh dang xem. Vien `--es-ink` chu khong phai volt: khoi nay
   nam tren nen trang, ma volt chi dat 1.15:1 tren `--es-canvas` (luat volt). */
.es-gallery__radio:nth-of-type(1):checked ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(1),
.es-gallery__radio:nth-of-type(2):checked ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(2),
.es-gallery__radio:nth-of-type(3):checked ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(3),
.es-gallery__radio:nth-of-type(4):checked ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(4) {
    border-color: var(--es-ink);
    border-width: 2px;
}

/* Vong focus phai ve tren THUMBNAIL vi chinh o radio da bi an di. */
.es-gallery__radio:nth-of-type(1):focus-visible ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(1),
.es-gallery__radio:nth-of-type(2):focus-visible ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(2),
.es-gallery__radio:nth-of-type(3):focus-visible ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(3),
.es-gallery__radio:nth-of-type(4):focus-visible ~ .es-gallery__thumbs > .es-gallery__thumb:nth-of-type(4) {
    outline: 2px solid var(--es-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--es-focus-glow);
}


/* ==========================================================================
   [14] CHUYEN DONG
   MOTION_INTENSITY = 4 (dai "Fluid CSS"). Cho phep transition + reveal khi
   vao viewport. KHONG scroll hijack, KHONG pin, KHONG parallax, KHONG vong
   lap vo han, KHONG GSAP.
   ========================================================================== */

/* Chi animate transform va opacity. Khong bao gio top/left/width/height. */
.es-reveal {
    transition: opacity var(--es-t-reveal) var(--es-ease),
                transform var(--es-t-reveal) var(--es-ease);
    transition-delay: var(--es-reveal-delay, 0ms);
}

/* AN TOAN: trang thai AN chi ton tai khi <html> mang class .es-anim, do
   script trong <head> them vao SAU khi da xac nhan IntersectionObserver co
   that va nguoi dung khong tat hieu ung.

   Vi sao khong lam nguoc lai (an san trong CSS roi nho JS hien ra): neu
   script khong tai duoc, nem loi, hoac IO khong bao gio fire thi CA TRANG
   dung yen o opacity 0. Voi mot trang ban hang day la hong hoan toan. Cach
   nay hong theo huong an toan: khong co JS thi khong co gi bi an. */
.es-anim .es-reveal { opacity: 0; transform: translateY(16px); }
.es-anim .es-reveal.is-in { opacity: 1; transform: translateY(0); }

/* BAT BUOC vi MOTION_INTENSITY > 3 */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .es-reveal { opacity: 1 !important; transform: none !important; }

    .es-btn:hover,
    .es-btn:active,
    .es-chip:hover,
    .es-chip:active,
    .es-iconbtn:active,
    .es-campaign__cta:hover,
    .es-campaign__cta:active,
    .es-promotile__link:hover,
    .es-promotile__link:active,
    .assistant-toggle:hover,
    .assistant-toggle:active,
    .es-heroitem:hover .es-heroitem__img,
    .es-product:hover .es-product__img { transform: none !important; }

}


/* ==========================================================================
   [15] RESPONSIVE
   Moi layout nhieu cot khai bao fallback ngay tai cho, khong pho mac
   "Bootstrap tu lo".
   ========================================================================== */

@media (min-width: 576px) {
    .es-grid {
        gap: var(--es-5);
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    }
    .es-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .es-footer__brandcol { grid-column: 1 / -1; }
}

/* Ngoai le CO LY DO cho dai may tinh bang: duoi 992px rail loc gap thanh
   offcanvas nen `.es-grid` luon chiem tron vat chua o MOI trang — vat chua va
   viewport trung nhau, khoa cot theo viewport o day khong con la nham lan hai
   khai niem. Thieu no thi auto-fill 240px cho ra 2 cot the 333px, qua to va
   qua thua cho man hinh 768px. */
@media (min-width: 700px) and (max-width: 991.98px) {
    .es-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .es-campaign { grid-template-columns: minmax(0, 1fr) auto; }

    .es-footer__grid { grid-template-columns: repeat(3, 1fr); }
    .es-footer__brandcol { grid-column: 1 / -1; }

    .es-adminform__row { grid-template-columns: repeat(3, 1fr); }
    .es-adminform__span2 { grid-column: span 2; }
}

/* Hai vung hero thuoc container toan trang; luoi san pham ben trong van auto-fill. */
@media (min-width: 992px) {
    .es-hero__grid {
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    }
    .es-hero__copy:only-child { grid-column: 1 / -1; }
}

@media (min-width: 992px) {
    .es-footer__grid { grid-template-columns: 2fr repeat(3, 1fr); }
    .es-footer__brandcol { grid-column: auto; }

}

@media (min-width: 992px) {
    .es-split { grid-template-columns: 1fr 1fr; gap: var(--es-7); }
    .es-split--wide-left  { grid-template-columns: 1.15fr 1fr; }
    .es-split--wide-right { grid-template-columns: 1fr 1.15fr; }
    .es-cartlayout { grid-template-columns: minmax(0, 1.9fr) minmax(19rem, .9fr); }

    .es-sporthero { grid-template-columns: minmax(0, 1fr) minmax(12rem, .28fr); }

    .es-sporthero__stat {
        padding: 0 0 0 var(--es-6);
        border-top: 0;
        border-left: 1px solid var(--es-line);
    }

    /* Rail loc 260px + phan con lai. Duoi lg thi `.offcanvas-lg` cua Bootstrap
       tu bien rail thanh ngan keo. */
    .es-shop { grid-template-columns: 260px minmax(0, 1fr); gap: var(--es-7); }

    .es-rail {
        position: sticky;
        /* 68px header + mot chut tho */
        top: calc(68px + var(--es-4));
        max-height: calc(100dvh - 68px - var(--es-6));
        overflow-y: auto;
    }

    /* Tom tat mua hang o lai trong tam nhin khi khach duyet thu vien anh. */
    .es-buybox {
        position: sticky;
        top: calc(68px + var(--es-4));
    }
}

@media (max-width: 767.98px) {
    .es-cataloghero { grid-template-columns: minmax(0, 1fr); }
    .es-cataloghero__title { font-size: clamp(2rem, 9vw, 3rem); }
    .es-cataloghero__product img { max-height: 12rem; }
    .es-cataloghero__caption { flex-wrap: wrap; }
}

/* Duoi lg: gom nav vao offcanvas */
@media (max-width: 991.98px) {
    .es-nav { display: none; }
    /* Chi an ban TRONG header. Ban trong offcanvas (`.es-search--block`) phai o lai —
       no la duong tim kiem duy nhat con lai o dien thoai. */
    .es-header .es-search { display: none; }
    /* An han nut tai khoan thay vi thu nho: wordmark 145px + 4 nut 44px +
       gap vuot qua 375px va lam ca trang cuon ngang. Cac muc tai khoan da co
       san trong offcanvas nen khong mat duong vao. */
    .es-account { display: none; }
    .es-header__inner { gap: var(--es-3); }
    .es-authlayout { grid-template-columns: minmax(0, 34rem); justify-content: center; }
    .es-commerce-summary { position: static; }
}

@media (max-width: 1199.98px) {
    .es-brand__strap { display: none; }
    .es-nav { display: none; }
}

@media (min-width: 1200px) {
    .es-burger { display: none; }
}

/* Man hinh dien thoai: cua so chat dung het be ngang va chieu cao con lai,
   tranh vua nho vua phai cuon hai chieu. */
@media (max-width: 575.98px) {
    body { font-size: 1rem; }

    .es-hero__showcase { display: flex; flex-direction: column; }
    .es-hero__showcase .es-sechead { order: 0; }
    .es-herocarousel__stage { order: 1; }
    .es-homeoffer__link { grid-template-columns: minmax(0, 1fr) 7rem; gap: var(--es-3); }
    .es-homeoffer__title { font-size: var(--es-text-lg); }
    .es-homeoffer__visual { height: 8rem; }
    .es-homeoffer__visual img { height: 8rem; }
    .es-campaign__desc { font-size: 1rem; }
    .es-campaign__cta { width: 100%; }
    .es-commerce-step { flex-direction: column; align-items: flex-start; }

    /* Luoi hai cot la chu dich tren mobile. Ten/gia van >= 15px de doc duoc,
       nhung khong day card cao qua muc lam mat kha nang quet catalog. */
    .es-product__name,
    .es-product .es-price { font-size: var(--es-text-sm); }

    .es-assistant {
        left: max(1rem, env(safe-area-inset-left, 0px));
        right: max(1rem, env(safe-area-inset-right, 0px));
    }

    .assistant-window {
        width: 100%;
        max-width: none;
        height: min(32rem, calc(100vh - 2rem));
        height: min(
            32rem,
            calc(
                100dvh - 2rem - env(safe-area-inset-top, 0px) -
                    env(safe-area-inset-bottom, 0px)
            )
        );
        max-height: none;
    }

    /* Bang 4-5 cot van duoc containment boi `.es-tablewrap`, nhung buoc khach
       cuon ngang de tim so luong, trang thai va thao tac. Chi ba bang giao
       dich customer dung layout card; bang admin va bang du lieu khac giu
       nguyen hanh vi cuon noi bo. */
    .es-tablewrap--transaction { overflow-x: visible; }

    .es-transaction-table,
    .es-transaction-table tbody,
    .es-transaction-table tr,
    .es-transaction-table td {
        display: block;
        width: 100%;
    }

    /* Giau bang thi giac nhung giu header trong accessibility tree de nguoi
       dung screen reader van nghe duoc quan he cot cua bang. */
    .es-transaction-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .es-transaction-table tr {
        padding: var(--es-4);
        background-color: var(--es-surface);
        border: 1px solid var(--es-line);
        border-radius: var(--es-r-md);
    }

    .es-transaction-table tr + tr { margin-top: var(--es-3); }

    .es-transaction-table td,
    .es-transaction-table td:last-child {
        display: grid;
        grid-template-columns: minmax(6.5rem, .7fr) minmax(0, 1fr);
        align-items: start;
        gap: var(--es-3);
        padding: var(--es-2) 0;
        border-bottom: 1px solid var(--es-line);
        text-align: right;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .es-transaction-table td::before {
        content: attr(data-label);
        color: var(--es-ink-3);
        font-family: var(--es-font-mono);
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .04em;
        text-align: left;
        text-transform: uppercase;
    }

    .es-transaction-table td:last-child { border-bottom: 0; }

    .es-transaction-table .es-transaction-cell--lead,
    .es-transaction-table .es-transaction-cell--wide {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .es-transaction-cell--lead .es-table__name {
        display: inline;
        overflow-wrap: anywhere;
    }

    .es-transaction-table .es-tag { justify-self: end; }
    .es-transaction-cell--lead .es-tag { justify-self: start; }

    .es-table--cart .es-cartqty {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .es-transaction-cell--action form { width: 100%; }

    .es-transaction-cell--action .es-btn,
    .es-transaction-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .es-transaction-cell--action .es-btn { width: 100%; }

    .es-transaction-link {
        justify-self: end;
        border: 1.5px solid var(--es-line-strong);
        border-radius: var(--es-r-sm);
        padding-inline: var(--es-3);
        text-decoration: none;
    }

    .es-ordertotals { max-width: none; }

    .es-order-detail .es-deflist__key { flex: 0 0 5.5rem; }
    .es-order-detail .es-deflist__val { flex: 1; }
}