/*
 * IASO storefront. Static asset, no build step — this project ships no Vite or
 * npm pipeline for the client side.
 *
 * Two rules hold this file together:
 *  - `--client-accent` is written into the document by the layout from the
 *    theme setting, so the shop's colour is admin-owned, not hard-coded here.
 *  - Nothing below sets `transform`, `filter` or `perspective` on an ancestor
 *    of the editor chrome. Each creates a containing block and would anchor the
 *    admin bar's `position: fixed` to the page instead of the viewport.
 */

/* Self-hosted so body copy does not change with the visitor's operating system
   (Segoe UI on Windows, San Francisco on macOS, etc.).  The Vietnamese and
   Latin subsets are split to keep each download small while fully covering the
   storefront's Vietnamese content. */
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-400.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-500.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-500.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-600.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-600.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-700.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-800.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-800.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-900.woff2") format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: "Be Vietnam Pro";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/be-vietnam-pro/be-vietnam-pro-latin-900.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --client-ink: #1b1b1f;
    --client-muted: #6b6b76;
    --client-line: #e7e4e0;
    --client-soft: #faf8f6;
    --client-surface: #fff;
    --client-accent: #b3195c;
    --client-accent-soft: #FEB3B4;
    --client-accent-ink: #7d0f3f;
    --client-btn-bg: #FEB3B4;
    --client-shell: 1200px;
    --client-radius: 14px;
    --client-shadow: 0 14px 40px rgba(27, 27, 31, .08);
    --client-shadow-sm: 0 4px 14px rgba(27, 27, 31, .06);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--client-ink);
    background: var(--client-surface);
    font: 16px/1.65 "Be Vietnam Pro", sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--client-accent); }
h1, h2, h3, h4 { line-height: 1.2; }

/* Phudu gives site headings a consistent display voice; body copy stays on
   the system sans stack for long-form reading. `!important` deliberately
   caps older local title rules that had escalated to 700/800. */
.client-title-font { font-family: 'Phudu', 'Segoe UI', sans-serif; font-weight: 600 !important; }
h1, h2, h3, h4,
.client-section__title,
.client-page-head__title,
.client-masthead h1 { font-family: 'Phudu', 'Segoe UI', sans-serif; font-weight: 600 !important; }

/* Product, post and category cards need the compact neutral reading face, not
   the display face reserved for page hierarchy. */
.client-card__title { font-family: inherit !important; font-weight: 600 !important; }
.client-catcard__title { font-family: inherit !important; font-weight: 600 !important; }

/* Visible focus everywhere: the storefront is fully keyboard navigable. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--client-accent);
    outline-offset: 2px;
}

/*
 * `hidden` wins, whatever a class says.
 *
 * The attribute is display:none in the UA stylesheet, which any class with a
 * `display` of its own outranks — so `.client-account__body { display: grid }`
 * kept the profile form on screen for a signed-out visitor while the "not
 * signed in" panel showed above it. Every JS-toggled region on this storefront
 * is switched with `el.hidden`, so the guard belongs here once rather than as
 * a `[hidden]` variant beside each of them.
 */
[hidden] { display: none !important; }

/*
 * The page gutter. Anything that also carries .client-shell must set its
 * vertical spacing with `padding-block` and never with the `padding`
 * shorthand: the shorthand resets padding-left/right to 0 and takes this
 * gutter with it, which is what put every page body 20px to the left of the
 * header above it.
 */
.client-shell {
    max-width: var(--client-shell);
    margin: 0 auto;
    padding: 0 20px;
}

#client-main {
    background-color: #f7f7f7;
    min-height: 50vh;
}

.client-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.client-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--client-surface);
    padding: 10px 16px;
    border-radius: 0 0 10px 0;
}

.client-skip:focus { left: 0; }

/* Buttons ----------------------------------------------------------------- */

.client-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--client-btn-bg, #FEB3B4);
    color: var(--client-accent-ink);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.client-btn:hover { background: var(--client-accent); color: #fff; }
.client-btn[disabled],
.client-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.client-btn--ghost {
    background: transparent;
    border-color: var(--client-line);
    color: var(--client-ink);
}

.client-btn--ghost:hover {
    background: var(--client-accent-soft);
    border-color: var(--client-accent);
    color: var(--client-accent-ink);
}

.client-btn--soft {
    background: var(--client-btn-bg, #FEB3B4);
    color: var(--client-accent-ink);
}

.client-btn--soft:hover { background: var(--client-accent); color: #fff; }
.client-btn--block { width: 100%; margin: 1rem; }
.client-btn--sm { padding: 5px 16px; font-size: 14px; }
.client-btn--block.client-btn--block {margin:0;}
/* Top utility bar --------------------------------------------------------- */

.client-topbar {
    background: var(--client-ink);
    color: #fff;
    font-size: 13px;
}

.client-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
    flex-wrap: wrap;
}

.client-topbar a { color: #fff; text-decoration: none; opacity: .88; }
.client-topbar a:hover { opacity: 1; text-decoration: underline; }

.client-topbar__group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.client-topbar__socials { display: flex; gap: 10px; align-items: center; }
.client-topbar__socials a { display: inline-flex; }

/* Header ------------------------------------------------------------------ */

.client-header {
    background: var(--client-surface);
    position: sticky;
    top: 0;
    z-index: 40;
}

.client-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 76px;
}

.client-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .01em;
    text-decoration: none;
    color: var(--client-ink);
    white-space: nowrap;
}

.client-brand img { max-height: 46px; width: auto; }

/* Two logos read as two brands, so a hairline between them; and they share
   the height, which is what makes a pair look deliberate rather than pasted.
   Every rule below is scoped to a header that actually has the second logo,
   so the one-logo header stays exactly as it was. */
.client-brand__secondary { padding-left: 14px; border-left: 1px solid var(--client-line, #e5e5ea); }
.client-brand:has(.client-brand__secondary) { gap: 14px; }
/* A touch shorter than a lone logo: the pair is twice as wide, and at 46px it
   cut the search placeholder off after "chống nắ" even on a 1440 screen. */
.client-brand:has(.client-brand__secondary) img { max-height: 40px; }

@media (max-width: 1280px) {
    /* The pair is ~300px wide at full height; below this the search box is
       what pays for it, down to a placeholder cut after two words. */
    .client-brand:has(.client-brand__secondary) img { max-height: 36px; }
}

@media (max-width: 1180px) {
    /* The hotline also sits in the topbar and on the floating call button. */
    .client-header__inner:has(.client-brand__secondary) .client-header__hotline { display: none; }
}

@media (max-width: 520px) {
    /* One row with the three round buttons: the pair shrinks to the room
       left rather than pushing the buttons onto a row of their own. */
    .client-header__inner .client-brand:has(.client-brand__secondary) { flex: 1 1 0; min-width: 0; gap: 8px; }
    .client-brand:has(.client-brand__secondary) img {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        height: auto;
        max-height: 30px;
        object-fit: contain;
    }
    .client-brand:has(.client-brand__secondary) .client-brand__secondary { padding-left: 8px; }
}


.client-search {
    display: flex;
    flex: 1 1 320px;
    max-width: 460px;
    border: 1px solid var(--client-line);
    border-radius: 999px;
    overflow: hidden;
    background: var(--client-soft);
}

.client-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 11px 18px;
    font: inherit;
    color: inherit;
    min-width: 0;
}

.client-search input:focus-visible { outline-offset: -3px; }

.client-search button {
    border: 0;
    background: transparent;
    padding: 0 16px;
    cursor: pointer;
    color: var(--client-accent);
    display: inline-flex;
    align-items: center;
}

.client-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.client-header__hotline {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.25;
    text-decoration: none;
    color: var(--client-ink);
    font-size: 13px;
}

.client-header__hotline strong { font-size: 16px; color: var(--client-accent); }

.client-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--client-line);
    border-radius: 50%;
    background: var(--client-surface);
    color: var(--client-ink);
    text-decoration: none;
    cursor: pointer;
}

.client-iconbtn:hover { border-color: var(--client-accent); color: var(--client-accent); }

.client-iconbtn__count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--client-btn-bg, #FEB3B4);
    color: var(--client-accent-ink);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.client-navtoggle { display: none; }

/* Navigation and mega menu ------------------------------------------------ */

.client-nav {
    border-top: 1px solid var(--client-line);
    background: var(--client-surface);
}

.client-nav__inner { display: flex; }

.client-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}

.client-nav-item { position: relative; }

.client-nav-item > a,
.client-nav-item > span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 14px;
    color: var(--client-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}

.client-nav-item > a:hover,
.client-nav-item:focus-within > a {
    color: var(--client-accent);
}

/* An item with no resolvable target is text, not a link. */
.client-nav-item > span { color: var(--client-muted); cursor: default; }

.client-nav-item--has-children > a::after,
.client-nav-item--has-children > span::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    rotate: 45deg;
    margin-top: -3px;
    opacity: .6;
}

/* Level 1 submenus: a panel. Deeper levels stack inside it. */
.client-nav-list .client-nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    flex-direction: column;
    gap: 0;
    padding: 10px;
    background: var(--client-surface);
    border: 1px solid var(--client-line);
    border-radius: 12px;
    box-shadow: var(--client-shadow);
    z-index: 50;
}

.client-nav-item:hover > .client-nav-list,
.client-nav-item:focus-within > .client-nav-list { display: flex; }

/* Triangle arrow pointing up to parent navbar item */
.client-nav-list.client-nav-level-1::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 48px;
    width: 11px;
    height: 11px;
    background: var(--client-surface);
    border-left: 1px solid var(--client-line);
    border-top: 1px solid var(--client-line);
    transform: rotate(45deg);
    z-index: 2;
    pointer-events: none;
}

.client-nav-item:has(> a[href*="kenh-phan-phoi"]) > .client-nav-level-1::before {
    left: 68px;
}

.client-nav-item:has(> a[href*="tu-van"]) > .client-nav-level-1::before {
    left: 38px;
}

.client-nav-list .client-nav-list .client-nav-item > a,
.client-nav-list .client-nav-list .client-nav-item > span {
    padding: 9px 12px;
    border-bottom: 0;
    border-radius: 8px;
    font-weight: 500;
}

.client-nav-list .client-nav-list .client-nav-item > a:hover {
    background: var(--client-accent-soft);
    color: var(--client-accent-ink);
}

/* Regular dropdowns (non-product items): 14px font, nowrap, auto-fit width */
.client-nav-item:not(.client-nav-item--mega) > .client-nav-list {
    width: max-content;
    max-width: min(440px, calc(100vw - 40px));
}

.client-nav-item:not(.client-nav-item--mega) > .client-nav-list .client-nav-item > a,
.client-nav-item:not(.client-nav-item--mega) > .client-nav-list .client-nav-item > span {
    padding: 9px 14px;
    font-size: 14px;
    white-space: nowrap;
}

/* A level-1 item that itself has children becomes a mega column: the panel
   goes wide and lays its groups out side by side instead of nesting popups
   three deep, which is unusable on a touch screen. */
.client-nav-item--mega > .client-nav-list {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 28px;
    width: min(920px, calc(100vw - 40px));
    max-width: min(920px, calc(100vw - 40px));
    padding: 20px 24px;
}

.client-nav-item--mega:hover > .client-nav-list,
.client-nav-item--mega:focus-within > .client-nav-list { display: flex; }

.client-nav-item--mega > .client-nav-list > .client-nav-item {
    flex: 1 1 180px;
    min-width: 160px;
}

.client-nav-item--mega > .client-nav-list > .client-nav-item > a,
.client-nav-item--mega > .client-nav-list > .client-nav-item > span {
    font-weight: 700;
    color: var(--client-accent-ink);
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--client-line);
    border-radius: 0;
    margin-bottom: 6px;
    white-space: normal;
}

.client-nav-item--mega > .client-nav-list > .client-nav-item > a:hover { background: transparent; }

.client-nav-item--mega .client-nav-list .client-nav-list {
    display: flex;
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    width: auto;
    max-width: none;
}

.client-nav-item--mega .client-nav-list .client-nav-list .client-nav-item > a {
    font-size: 14px;
    color: var(--client-muted);
    padding: 5px 0;
    white-space: normal;
}

.client-nav-item--mega .client-nav-list .client-nav-list .client-nav-item > a:hover {
    background: transparent;
    color: var(--client-accent);
}

/* Hero / banners ---------------------------------------------------------- */

.client-hero { background: var(--client-soft); }

.client-hero__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.client-hero__track::-webkit-scrollbar { display: none; }

.client-hero__slide {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    display: block;
    line-height: 0;
}

.client-hero__slide img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.client-hero__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-block: 14px;
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

.client-hero__dot {
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    max-width: 10px;
    max-height: 10px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: #cfc9c4;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    caret-color: transparent !important;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.client-hero__dot:focus,
.client-hero__dot:focus-visible {
    outline: none;
    caret-color: transparent !important;
}

.client-hero__dot[aria-current="true"] {
    background: var(--client-btn-bg, #FEB3B4);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* Sections ---------------------------------------------------------------- */

.client-section { padding: 56px 0; }
.client-section--soft { background: var(--client-soft); }

.client-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.client-section__title { font-size: 28px; margin: 0; }
.client-section__lead { color: var(--client-muted); margin: 8px 0 0; max-width: 640px; }

/* Home promotional banners ------------------------------------------------ */

.client-home-promotions { padding-top: 30px; padding-bottom: 30px; }

.client-home-promotions__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.client-home-promo {
    position: relative;
    display: block;
    min-height: 300px;
    overflow: hidden;
    border-radius: 18px;
    background: #f5eee9;
    color: #1b1b1f;
    isolation: isolate;
    text-decoration: none;
}

.client-home-promo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.client-home-promo:hover img { transform: scale(1.035); }

.client-home-promo__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(255, 250, 247, .88) 0%, rgba(255, 250, 247, .4) 54%, rgba(255, 250, 247, 0) 100%);
}

.client-home-promo--reverse .client-home-promo__shade {
    background: linear-gradient(90deg, rgba(255, 253, 248, .9) 0%, rgba(255, 253, 248, .42) 56%, rgba(255, 253, 248, 0) 100%);
}

.client-home-promo__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: min(72%, 310px);
    min-height: 300px;
    padding: 32px;
}

.client-home-promo__eyebrow,
.client-home-favourites__eyebrow {
    margin-bottom: 9px;
    color: #9f2e5f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
}

.client-home-promo__content strong {
    max-width: 250px;
    font-size: clamp(21px, 2.1vw, 30px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.client-home-promo__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    color: #7d0f3f;
    font-size: 13px;
    font-weight: 800;
}

/* Home product shelves -------------------------------------------------- */

.client-home-featured__grid,
.client-home-favourites__layout {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.client-home-featured-banner,
.client-home-favourites__feature {
    position: relative;
    display: block;
    grid-column: span 2;
    min-height: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #ebe1d4;
    color: #1b1b1f;
    text-decoration: none;
}

/* The favourite collection's banner is a true two-row visual anchor: three
   products sit alongside it on each row. */
.client-home-favourites__feature { grid-row: span 2; }

.client-home-featured-banner img,
.client-home-favourites__feature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    transition: transform .45s ease;
}

.client-home-featured-banner:hover img,
.client-home-favourites__feature:hover img { transform: scale(1.03); }

.client-home-featured-banner__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 251, 248, .92), rgba(255, 251, 248, .16) 76%);
}

.client-home-featured-banner__copy,
.client-home-favourites__feature-copy {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    padding: 22px;
    background: linear-gradient(90deg, rgba(255, 252, 246, .88), rgba(255, 252, 246, 0) 75%);
}

.client-home-featured-banner__copy > span,
.client-home-favourites__feature-copy > span {
    color: #9f2e5f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.client-home-featured-banner__copy strong,
.client-home-favourites__feature-copy strong {
    max-width: 210px;
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.14;
    letter-spacing: -.035em;
}

.client-home-featured-banner__copy em,
.client-home-favourites__feature-copy em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #7d0f3f;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
}

.client-home-favourites { padding-top: 34px; }
.client-home-favourites__eyebrow { margin: 0 0 6px; }

/* Home commitments ------------------------------------------------------- */

.client-home-commitments {
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #faf6f0 55%, #f4eee5 100%);
    padding: 64px 0 80px;
}

.client-home-commitments__head {
    max-width: 620px;
    margin: 0 auto 52px;
    text-align: center;
}

.client-home-commitments__head .client-section__title,
.client-home-commitments__title {
    max-width: 620px;
    margin: 0 auto;
    font-size: clamp(26px, 2.7vw, 36px);
    font-weight: 800;
    line-height: 1.26;
    letter-spacing: -0.03em;
    color: #111827;
}

.client-home-commitments__stage {
    position: relative;
    display: grid;
    grid-template-areas:
        "authentic image advice"
        "shipping  image payment";
    grid-template-columns: minmax(280px, 330px) minmax(360px, 430px) minmax(280px, 330px);
    grid-template-rows: auto auto;
    gap: 40px 0;
    align-items: center;
    justify-content: center;
    max-width: 1140px;
    margin: 0 auto;
}

/* Center Oval / Egg Shape Image */
.client-home-commitments__image {
    grid-area: image;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 410px;
    aspect-ratio: 1 / 1.28;
    overflow: hidden;
    margin: 0 auto;
    border: none;
    border-radius: 50% / 46%;
    background: #ebe3d9;
    box-shadow: 0 20px 48px rgba(45, 30, 20, 0.08);
}

.client-home-commitments__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-home-commitments__stage:hover .client-home-commitments__image img {
    transform: scale(1.035);
}

/* Floating Overlapping Cards */
.client-home-commitment {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 22px;
    border: 1px solid rgba(230, 225, 218, 0.85);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(45, 30, 20, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.client-home-commitment:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(45, 30, 20, 0.12), 0 4px 10px rgba(0, 0, 0, 0.04);
}

/* Positioning & Organic Overlap conforming to the oval */
.client-home-commitment--authentic {
    grid-area: authentic;
    align-self: center;
    margin-right: -75px;
    margin-left: 20px;
    transform: translateY(-28px);
}

.client-home-commitment--advice {
    grid-area: advice;
    align-self: center;
    margin-left: -75px;
    margin-right: 20px;
    transform: translateY(-28px);
}

.client-home-commitment--shipping {
    grid-area: shipping;
    align-self: center;
    margin-right: -48px;
    margin-left: -20px;
    transform: translateY(28px);
}

.client-home-commitment--payment {
    grid-area: payment;
    align-self: center;
    margin-left: -48px;
    margin-right: -20px;
    transform: translateY(28px);
}

.client-home-commitment--authentic:hover,
.client-home-commitment--advice:hover {
    transform: translateY(-32px);
}

.client-home-commitment--shipping:hover,
.client-home-commitment--payment:hover {
    transform: translateY(24px);
}

/* Copper / Terracotta Rounded Square Icon Box */
.client-home-commitment__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1.5px solid #d97757;
    background: #fff8f5;
    color: #c76b4a;
    flex-shrink: 0;
    margin-top: 2px;
}

.client-home-commitment__body {
    flex: 1;
    min-width: 0;
}

.client-home-commitment h3 {
    margin: 0 0 5px;
    color: #111827;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.client-home-commitment p {
    margin: 0;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.5;
}

.client-page-head { padding-block: 40px 4px; }
.client-page-head h1 { font-size: 34px; margin: 0 0 10px; }
.client-page-head p { color: var(--client-muted); margin: 0; max-width: 760px; }

.client-breadcrumbs {
    padding: 16px 0 0;
    font-size: 14px;
    color: var(--client-muted);
}

.client-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.client-breadcrumbs li::after { content: "/"; margin-left: 8px; opacity: .5; }
.client-breadcrumbs li:last-child::after { content: ""; }
.client-breadcrumbs a { color: var(--client-muted); text-decoration: none; }
.client-breadcrumbs a:hover { color: var(--client-accent); }

/* Grids and cards --------------------------------------------------------- */

.client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}

.client-grid--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.client-grid--tight { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }

/* A desktop product shelf has five equal cards. Wide article grids and the
   compact wishlist intentionally keep their own layout. */
@media (min-width: 1100px) {
    .client-grid:not(.client-grid--wide):not(.client-grid--tight) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 20px;
    }
}

.client-card {
    position: relative;
    border-radius: var(--client-radius);
    overflow: hidden;
    background: var(--client-surface);
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.client-card:hover { box-shadow: none; border-color: #dcd6d1; }

.client-card__media {
    aspect-ratio: 1 / 1;
    background: var(--client-soft);
    display: block;
    object-fit: cover;
    width: 100%;
}

/* Post card media: fill full the 16/10 container, 6px radius */
.client-card--post {
    border-radius: 6px !important;
}

.client-card--post .client-card__media-wrap,
.client-card--post > a:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    background: var(--client-soft);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border-radius: 6px;
}

.client-card--post .client-card__media {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-card--post:hover .client-card__media {
    transform: scale(1.04);
}

.client-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.client-card__eyebrow {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--client-accent);
    margin: 0;
    font-weight: 700;
}

.client-card__title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.client-card__title a { color: inherit; text-decoration: none; }
.client-card__title a:hover { color: var(--client-accent); }
.client-card__meta { color: var(--client-muted); font-size: 14px; margin: 0; }
.client-card__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Home Knowledge / Blog Slider ------------------------------------------- */

.client-home-posts {
    overflow: hidden;
    position: relative;
}

.client-home-posts__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.client-home-posts__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.client-slider-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.client-slider-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #dcd6d1;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    padding: 0;
}

.client-slider-btn:hover:not(:disabled) {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
    transform: scale(1.06);
}

.client-slider-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.client-home-posts__slider-wrap {
    position: relative;
    width: 100%;
}

.client-home-posts__track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-snap-type: x mandatory;
    padding: 4px 2px 14px;
    -webkit-overflow-scrolling: touch;
}

.client-home-posts__track::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* 4 cards on 1 row - strictly no wrap! */
.client-home-posts__item {
    flex: 0 0 calc((100% - (3 * 10px)) / 4);
    min-width: calc((100% - (3 * 10px)) / 4);
    max-width: calc((100% - (3 * 10px)) / 4);
    scroll-snap-align: start;
    display: flex;
}

.client-home-posts__item .client-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.client-home-posts__item .client-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 0, 0, 0.12);
}

.client-home-posts__item .client-card__media-wrap,
.client-home-posts__item .client-card--post > a:first-child {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
    background: var(--client-soft);
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border-radius: 6px;
}

.client-home-posts__item .client-card__media {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.client-home-posts__item .client-card__body {
    padding: 16px;
}

.client-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.client-price__now { font-weight: 800; color: var(--client-accent); font-size: 17px; }
.client-price__was { color: var(--client-muted); text-decoration: line-through; font-size: 14px; }

.client-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--client-btn-bg, #FEB3B4);
    color: var(--client-accent-ink);
    font-size: 12px;
    font-weight: 700;
}

.client-badge--muted { background: #f0eeeb; color: var(--client-muted); }
.client-badge--out { background: #f4e4e4; color: #96322f; }

.client-card__ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
}

/* Category tiles */
.client-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid var(--client-line);
    border-radius: var(--client-radius);
    background: var(--client-surface);
    text-decoration: none;
    color: inherit;
}

.client-tile:hover { border-color: var(--client-accent); background: var(--client-accent-soft); }
.client-tile strong { font-size: 16px; }
.client-tile span { color: var(--client-muted); font-size: 13px; }

/* Home Categories Section — IASO Nature Luxury -------------------------- */

.client-section--home-categories {
    position: relative;
    background: #ffffff;
    overflow: hidden;
    padding: 56px 0 46px;
}

.client-home-cat__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 34px;
    flex-wrap: wrap;
}

.client-home-cat__intro {
    max-width: 620px;
}

.client-home-cat__kicker-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.client-home-cat__kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--client-accent);
}

.client-home-cat__kicker-line {
    display: inline-block;
    width: 36px;
    height: 1.5px;
    background: var(--client-accent);
    opacity: 0.35;
}

.client-home-cat__title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px;
    flex-wrap: wrap;
}

.client-home-cat__title {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.2;
}

.client-home-cat__brand {
    color: var(--client-accent);
    font-weight: 900;
    font-style: italic;
}

.client-home-cat__leaf-icon {
    display: inline-flex;
    align-items: center;
    transform: rotate(5deg);
    flex-shrink: 0;
    color: var(--client-accent);
}

.client-home-cat__lead {
    color: #4b5563;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

.client-home-cat__actions {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.client-home-cat__script {
    height: 52px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.client-home-cat__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 22px;
    border-radius: 999px;
    background: var(--client-btn-bg, #FEB3B4);
    color: var(--client-accent-ink);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(254, 179, 180, 0.4);
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.client-home-cat__btn:hover {
    background: var(--client-accent);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(179, 25, 92, 0.25);
}

.client-home-cat__btn-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--client-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s ease, color .2s ease;
}

.client-home-cat__btn:hover .client-home-cat__btn-arrow {
    color: var(--client-accent);
    transform: translateX(3px);
}

/* Category Cards Grid */
.client-home-cat__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 12px;
}

.client-catcard {
    display: flex;
    flex-direction: column;
    background: var(--cat-bg, #ffffff);
    border-radius: 20px;
    padding: 18px 14px 16px;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
    transition: transform .24s cubic-bezier(.2, 0, 0, 1), box-shadow .24s ease, border-color .24s ease;
    position: relative;
    overflow: hidden;
}

.client-catcard:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.09);
    border-color: rgba(255, 255, 255, 1);
}

.client-catcard__media {
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.client-catcard__media img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    transition: transform .3s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.04));
}

.client-catcard:hover .client-catcard__media img {
    transform: scale(1.08);
}

.client-catcard__body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.client-catcard__title {
    font-size: 14.5px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
    line-height: 1.35;
    min-height: 39px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.client-catcard__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
}

.client-catcard__count {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

.client-catcard__arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--arrow-bg, #e5e7eb);
    color: var(--arrow-color, #111827);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.client-catcard:hover .client-catcard__arrow {
    transform: scale(1.1) translateX(2px);
}

/* Responsive */
@media (max-width: 1180px) {
    .client-home-cat__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .client-section--home-categories {
        padding: 40px 0 32px;
    }

    .client-home-cat__header {
        margin-bottom: 24px;
        gap: 18px;
    }

    .client-home-cat__title {
        font-size: 26px;
    }

    .client-home-cat__actions {
        width: 100%;
        justify-content: space-between;
    }

    .client-home-cat__script {
        height: 44px;
    }

    .client-home-cat__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .client-catcard {
        border-radius: 16px;
        padding: 14px 12px 12px;
    }

    .client-catcard__media {
        height: 96px;
    }
}

/* Layout with sidebar ----------------------------------------------------- */

.client-with-aside {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    /* padding-block: see the note above .client-shell. */
    padding-block: 28px 64px;
}

/* A listing with no section sidebar: same vertical rhythm, one column. */
.client-plain { padding-block: 28px 64px; }

.client-aside {
    border: 1px solid var(--client-line);
    border-radius: var(--client-radius);
    padding: 20px;
    background: var(--client-surface);
}

.client-aside h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.client-aside + .client-aside { margin-top: 20px; }

.client-aside__list { list-style: none; margin: 0; padding: 0; font-size: 15px; }
.client-aside__list li { margin: 0; }
.client-aside__list a { display: block; padding: 7px 0; color: var(--client-ink); text-decoration: none; }
.client-aside__list a:hover { color: var(--client-accent); }
.client-aside__list a[aria-current="page"] { color: var(--client-accent); font-weight: 700; }
.client-aside__list ul { list-style: none; padding: 0 0 0 14px; margin: 0; }
.client-aside__list ul a { font-size: 14px; color: var(--client-muted); padding: 5px 0; }

/* Toolbar above a listing */
.client-listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 20px;
}

.client-listbar__count { color: var(--client-muted); font-size: 14px; margin: 0; }

/* Forms ------------------------------------------------------------------- */

.client-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.client-field > label { font-weight: 600; font-size: 14px; }
.client-field__hint { color: var(--client-muted); font-size: 13px; }

/*
 * Trạng thái cho dòng chú thích dưới ô nhập.
 *
 * Mặc định nó xám và nhỏ, đúng cho một chú thích tĩnh — nhưng sai khi dùng làm
 * phản hồi sau khi bấm nút: khách áp mã giảm giá thành công vẫn tưởng chưa áp
 * được vì chữ nhìn y như phần hướng dẫn. Dùng lại đúng cặp màu của
 * `client-alert--success/--error` để cả trang nói cùng một ngôn ngữ màu.
 */
.client-field__hint.is-ok { color: #1f6b3b; font-weight: 600; }
.client-field__hint.is-error { color: #96322f; font-weight: 600; }

.client-input,
.client-select,
.client-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--client-line);
    border-radius: 10px;
    background: var(--client-surface);
    font: inherit;
    color: inherit;
}

.client-textarea { min-height: 120px; resize: vertical; }
.client-input[aria-invalid="true"],
.client-textarea[aria-invalid="true"] { border-color: #c0392b; }

.client-field__error { color: #c0392b; font-size: 13px; margin: 0; }

.client-alert {
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--client-line);
    background: var(--client-soft);
    margin: 0 0 20px;
}

.client-alert--error { border-color: #eccac6; background: #fdf3f2; color: #96322f; }
.client-alert--success { border-color: #cbe4d1; background: #f2faf4; color: #1f6b3b; }

.client-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 18px;
}

.client-radio-list { display: flex; flex-direction: column; gap: 10px; }

.client-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--client-line);
    border-radius: 10px;
    cursor: pointer;
}

.client-radio:has(input:checked) { border: none; background: var(--client-accent-soft); }
.client-radio input { accent-color: var(--client-accent); }
.client-radio span { font-weight: 600; }

/* Panels ------------------------------------------------------------------ */

.client-panel {
    border-radius: var(--client-radius);
    background: var(--client-surface);
    padding: 24px;
    height: 100%;
}

.client-panel + .client-panel { margin-top: 20px; }
.client-panel__title { font-size: 18px; margin: 0 0 16px; }

.client-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
    padding-block: 24px 64px;
}

/* Product detail ---------------------------------------------------------- */

.client-product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; padding-block: 24px 8px; }

.client-gallery__main {
    border: 1px solid var(--client-line);
    border-radius: var(--client-radius);
    overflow: hidden;
    background: var(--client-soft);
}

.client-gallery__main img { width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover; }

.client-gallery__thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.client-gallery__thumb {
    width: 74px;
    height: 74px;
    padding: 0;
    border: 1px solid var(--client-line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--client-soft);
    cursor: pointer;
}

.client-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.client-gallery__thumb[aria-current="true"] { border-color: var(--client-accent); }

.client-product__title { font-size: 27px; margin: 6px 0 12px; }
.client-product__meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--client-muted); font-size: 14px; margin: 0 0 18px; }

.client-product__price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 20px;
    background: var(--client-accent-soft);
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.client-product__price .client-price__now { font-size: 26px; }

.client-product__excerpt { color: #46464e; }
.client-product__excerpt p { margin: 0 0 10px; }

.client-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0; }

.client-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--client-line);
    border-radius: 999px;
    overflow: hidden;
}

.client-qty button {
    width: 40px;
    height: 44px;
    border: 0;
    background: transparent;
    font-size: 19px;
    cursor: pointer;
    color: var(--client-ink);
}

.client-qty input {
    width: 54px;
    height: 44px;
    border: 0;
    text-align: center;
    font: inherit;
    font-weight: 700;
    -moz-appearance: textfield;
}

.client-qty input::-webkit-outer-spin-button,
.client-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.client-options { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.client-options__group > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.client-options__values { display: flex; gap: 10px; flex-wrap: wrap; }

.client-chip {
    padding: 9px 16px;
    border: 1px solid var(--client-line);
    border-radius: 999px;
    background: var(--client-surface);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.client-chip[aria-pressed="true"] { border-color: var(--client-accent); background: var(--client-btn-bg, #FEB3B4); color: var(--client-accent-ink); font-weight: 600; }

/* Rich text (product description, post content, CMS page) ----------------- */

.client-rte { overflow-wrap: break-word; }
.client-rte img { border-radius: 10px; height: auto; }
.client-rte h2 { font-size: 22px; margin: 30px 0 12px; }
.client-rte h3 { font-size: 18px; margin: 24px 0 10px; }
.client-rte p { margin: 0 0 14px; }
.client-rte ul, .client-rte ol { padding-left: 22px; margin: 0 0 14px; }
.client-rte table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.client-rte th, .client-rte td { border: 1px solid var(--client-line); padding: 9px 12px; text-align: left; }
.client-rte iframe { max-width: 100%; border: 0; border-radius: 10px; }
.client-rte figure { margin: 0 0 16px; }

.client-mt { margin-top: 12px; }

/* A single column of reading text: a measure wider than this is hard to read. */
.client-prose { max-width: 860px; }
.client-figure { border-radius: 14px; display: block; }

/* Wide content must scroll inside itself, never the page. */
.client-scroll-x { overflow-x: auto; }

/* Cart and order tables --------------------------------------------------- */

.client-table { width: 100%; border-collapse: collapse; }
.client-table th, .client-table td { padding: 14px 12px; border-bottom: 1px solid var(--client-line); text-align: left; vertical-align: middle; }
.client-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--client-muted); }
.client-table td:last-child, .client-table th:last-child { text-align: right; }

.client-lineitem { display: flex; align-items: center; gap: 14px; }
.client-lineitem img { width: 68px; height: 68px; border-radius: 10px; object-fit: cover; background: var(--client-soft); }
.client-lineitem strong { font-weight: 600; font-size: 15px; }
.client-lineitem a { color: inherit; text-decoration: none; }
.client-lineitem a:hover { color: var(--client-accent); }

.client-summary { list-style: none; margin: 0; padding: 0; }
.client-summary li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; }
.client-summary li + li { border-top: 1px solid var(--client-line); }
.client-summary__total { font-size: 19px; font-weight: 800; }
.client-summary__total span:last-child { color: var(--client-accent); }

.client-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--client-muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.client-linkbtn:hover { color: #c0392b; }

/* States ------------------------------------------------------------------ */

.client-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--client-muted);
    border: 1px dashed var(--client-line);
    border-radius: var(--client-radius);
}

.client-empty h2 { color: var(--client-ink); font-size: 20px; margin: 0 0 8px; }

.client-skeleton {
    background: linear-gradient(90deg, #f1eeeb 25%, #f8f6f4 50%, #f1eeeb 75%);
    background-size: 200% 100%;
    animation: client-shimmer 1.3s linear infinite;
    border-radius: 8px;
    min-height: 16px;
}

@keyframes client-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .client-skeleton { animation: none; }
}

/* Editorial scroll reveal -------------------------------------------------
   These rules only activate after the shared runtime has prepared the page.
   A no-JavaScript visit therefore never loses content to an animation state. */
[data-client-reveal-root].client-reveal--prepared .client-reveal {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(0, 24px, 0);
    transition: opacity .58s ease, transform .76s cubic-bezier(.22, .8, .24, 1), filter .68s ease;
    transition-delay: var(--client-reveal-delay, 0ms);
    will-change: opacity, transform, filter;
}

[data-client-reveal-root].client-reveal--prepared .client-reveal.is-visible {
    opacity: 1;
    filter: none;
    transform: translate3d(0, 0, 0);
}

[data-client-reveal-root].client-reveal--prepared .client-reveal--media img {
    filter: saturate(.86) contrast(.96);
    transform: scale(1.045);
    transition: filter .9s ease, transform 1.05s cubic-bezier(.18, .8, .2, 1);
}

[data-client-reveal-root].client-reveal--prepared .client-reveal--media.is-visible img {
    filter: none;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    [data-client-reveal-root] .client-reveal,
    [data-client-reveal-root] .client-reveal--media img {
        opacity: 1;
        filter: none;
        transform: none;
        transition: none;
    }
}

.client-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    translate: -50% 0;
    z-index: 60;
    max-width: min(420px, calc(100vw - 32px));
    padding: 13px 18px;
    border-radius: 12px;
    background: var(--client-ink);
    color: #fff;
    box-shadow: var(--client-shadow);
    font-size: 15px;
}

.client-toast--error { background: #96322f; }

/* Pagination: Laravel renders Bootstrap 5 markup, styled here so the
   storefront does not have to load Bootstrap. */
.client-pagination {
    padding: 36px 0 0;
    display: flex;
    justify-content: flex-end;
    width: 100%;
}
.client-pagination .pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.client-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--client-line);
    border-radius: 10px;
    color: var(--client-ink);
    text-decoration: none;
    background: var(--client-surface);
}
.client-pagination .page-link:hover { border-color: var(--client-accent); color: var(--client-accent); }
.client-pagination .active .page-link { background: var(--client-btn-bg, #FEB3B4); border-color: var(--client-btn-bg, #FEB3B4); color: var(--client-accent-ink); }
.client-pagination .disabled .page-link { opacity: .45; }
.client-pagination svg { width: 14px; height: 14px; }

/* Reviews ----------------------------------------------------------------- */

.client-review { border-top: 1px solid var(--client-line); padding: 18px 0; }
.client-review:first-child { border-top: 0; }
.client-review__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.client-review__name { font-weight: 700; }
.client-review__date { color: var(--client-muted); font-size: 13px; }
.client-stars { color: #e0a80d; letter-spacing: 2px; }

/* Footer ------------------------------------------------------------------ */

/* Dealer CTA stays in the normal document flow: it is a full-width final
   section rather than an overlapping card that competes with the footer. */
.client-dealer-cta { position: relative; z-index: 1; margin: 0; padding: 34px 0 0; background: linear-gradient(to bottom, #f8f7f7 0 62%, #fff 62% 100%); }
.client-dealer-cta__card { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 17px; align-items: center; width: 100%; max-width: none; margin: 0; padding: 22px 28px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 18px; background: linear-gradient(105deg, #1b1b1f, #39313a); box-shadow: 0 18px 42px rgba(27, 27, 31, .18); color: #fff; }
.client-dealer-cta__mark { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #ffd7df; }
.client-dealer-cta p { margin: 0 0 4px; color: #ffc7d3; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.client-dealer-cta h2 { margin: 0; color: #fff; font-size: 19px; letter-spacing: -.025em; }
.client-dealer-cta h2 + span { display: block; margin-top: 4px; color: rgba(255, 255, 255, .68); font-size: 12px; }
.client-dealer-cta__button { padding: 11px 17px; border-radius: 11px; background: #ffe2e2; color: #921e52; font-size: 13px; }
.client-dealer-cta__button:hover { background: #fff; color: #1b1b1f; }

.client-footer {
    background: #fff;
    /* border-top: 1px solid #e7e4e0; */
    color: #1b1b1f;
    margin-top: 0;
    padding: 42px 0 0;
}

.client-footer__inner {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) minmax(220px, 1.15fr) repeat(3, minmax(132px, .72fr));
    gap: 28px;
    padding-bottom: 46px;
}

.client-footer h2 { margin: 0 0 15px; color: #1b1b1f; font-size: 15px; letter-spacing: -.01em; }
.client-footer p { margin: 0; font-size: 13px; }
.client-footer a { color: #53535d; text-decoration: none; }
.client-footer a:hover { color: #1b1b1f; }

.client-footer__brandmark {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: #1b1b1f !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: -.04em;
}

.client-footer__brandmark img { display: block; max-height: 34px; width: auto; }

.client-footer__description {
    max-width: 330px;
    margin-top: 15px !important;
    color: #666670 !important;
    font-size: 13px !important;
    line-height: 1.65;
}

.client-footer__contact-list { display: grid; gap: 8px; margin-top: 17px; }
.client-footer__contact-list p { display: flex; align-items: flex-start; gap: 8px; color: #53535d; line-height: 1.5; }
.client-footer__contact-list svg { flex: 0 0 auto; margin-top: 2px; color: #1b1b1f; }

.client-footer__locations { display: grid; gap: 8px; margin-top: 16px; }
.client-footer .client-footer__branch { display: grid; gap: 2px; padding-left: 10px; border-left: 1px solid #d9d9df; color: #666670; font-size: 12px; line-height: 1.45; }
.client-footer .client-footer__branch strong { color: #1b1b1f; }

.client-footer__social-label { margin-top: 17px !important; color: #666670; font-size: 12px !important; }

.client-footer .client-aside__list { margin: 0; padding: 0; }
.client-footer .client-aside__list a { color: #53535d; font-size: 13px; padding: 0; }
.client-footer .client-aside__list li + li { margin-top: 10px; }
.client-footer .client-aside__list a:hover { color: #1b1b1f; }

/* Align the three link columns with the CTA's eyebrow on wide layouts. */
.client-footer__column { padding-top: 22px; }

.client-footer__cta {
    align-self: start;
    padding: 22px;
    background: #fafafa;
    border-radius: 14px;
}

.client-footer__cta h2 { margin-bottom: 8px; font-size: 18px; }
.client-footer__cta > p:not(.client-footer__eyebrow) { color: #666670; line-height: 1.55; }
.client-footer__eyebrow { margin-bottom: 9px !important; color: #9f2e5f; font-size: 11px !important; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.client-footer__phone { display: inline-flex; align-items: center; gap: 7px; margin-top: 17px; color: #1b1b1f !important; font-size: 15px; font-weight: 700; }
.client-footer__cta-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 17px; color: #9f2e5f !important; font-size: 13px; font-weight: 700; }
.client-footer__cta-link:hover { color: #1b1b1f !important; }

.client-footer .client-nav {
    background: transparent;
    border: 0;
}

.client-footer .client-nav__inner {
    display: block !important;
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

.client-footer .client-nav-list {
    flex-direction: column;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}

.client-footer .client-nav-item > a,
.client-footer .client-nav-item > span {
    padding: 0;
    font-weight: 400;
    font-size: 13px;
    color: #53535d;
    border-bottom: 0;
    display: block;
}

.client-footer .client-nav-item + .client-nav-item { margin-top: 10px; }
.client-footer .client-nav-item > a:hover {
    color: #1b1b1f;
}

.client-footer .client-nav-list .client-nav-list {
    position: static;
    display: flex;
    border: 0;
    box-shadow: none;
    padding: 10px 0 0 12px;
    min-width: 0;
    width: auto;
}

.client-footer__socials { display: flex; gap: 8px; margin-top: 9px; }

.client-footer__socials a {
    width: 32px;
    height: 32px;
    border: 1px solid #d7d7dc;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.client-footer__socials a:hover { border-color: #9f2e5f; color: #9f2e5f; }

.client-footer__bar-wrap { background: #1b1b1f; }

.client-footer__bar {
    /* padding-block, so the bar keeps the shell's side gutter and lines up
       with the footer columns above it and the header at the top. */
    padding-block: 18px 22px;
    font-size: 12px;
    color: #9b9ba6;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.client-footer__bar strong { color: #d9d9de; }
.client-footer__bar p { color: inherit; }

/* Floating contact -------------------------------------------------------- */

.client-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.client-float a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--client-btn-bg, #FEB3B4);
    color: var(--client-accent-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--client-shadow-sm);
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

.client-float a:hover { background: var(--client-accent); color: #fff; }

/* Brand colours, because a visitor scans for the Zalo blue and the Messenger
   blue, not for a shop-coloured circle. White on #0068FF is 4.75:1, enough
   for the 13px bold "Zalo" word (AA asks 4.5:1 below 18.66px bold); white on
   #0084FF is 3.66:1, enough for an icon (non-text needs 3:1). */
.client-float a.client-float__zalo { background: #0068FF; color: #fff; }
.client-float a.client-float__messenger { background: #0084FF; color: #fff; }
.client-float a.client-float__zalo:hover,
.client-float a.client-float__messenger:hover { color: #fff; filter: brightness(.88); }
.client-float__word { font-size: 13px; font-weight: 700; letter-spacing: .01em; line-height: 1; }

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1140px) {
    .client-home-commitments__stage {
        grid-template-columns: minmax(240px, 290px) minmax(320px, 380px) minmax(240px, 290px);
        gap: 32px 0;
    }
    .client-home-commitments__image {
        max-width: 360px;
    }
    .client-home-commitment {
        padding: 16px 18px;
    }
    .client-home-commitment--authentic {
        margin-right: -55px;
        margin-left: 0;
    }
    .client-home-commitment--advice {
        margin-left: -55px;
        margin-right: 0;
    }
    .client-home-commitment--shipping {
        margin-right: -36px;
        margin-left: 0;
    }
    .client-home-commitment--payment {
        margin-left: -36px;
        margin-right: 0;
    }
}

@media (max-width: 1024px) {
    .client-with-aside { grid-template-columns: 1fr; gap: 24px; }

    /* Once the sidebar stops being a column it becomes a wall: a full category
       tree above the grid pushes the products off the first screen. The list
       still belongs on the page, just after what the visitor came for. */
    .client-with-aside > aside { order: 2; }
    .client-with-aside > :not(aside) { order: 1; }
    .client-columns { grid-template-columns: 1fr; }
    .client-product { grid-template-columns: 1fr; gap: 28px; }
    .client-home-posts__item {
        flex: 0 0 calc((100% - (2 * 10px)) / 3);
        min-width: calc((100% - (2 * 10px)) / 3);
        max-width: calc((100% - (2 * 10px)) / 3);
    }
}

@media (max-width: 860px) {
    .client-dealer-cta { padding-top: 28px; }
    .client-catalog-aside { display: none !important; }
    .client-header__inner { flex-wrap: wrap; gap: 12px; min-height: 0; padding-block: 12px; }
    .client-search { order: 3; flex-basis: 100%; max-width: none; }
    .client-navtoggle { display: inline-flex; }
    .client-nav { border-top: 0; }

    /* The whole menu becomes a disclosure: hover has no meaning on touch. */
    .client-nav__inner { display: none; padding-bottom: 12px; }
    .client-nav--open .client-nav__inner { display: block; }
    .client-nav-list { flex-direction: column; width: 100%; }
    .client-nav-item > a,
    .client-nav-item > span { padding: 11px 0; border-bottom: 1px solid var(--client-line); }
    .client-nav-list .client-nav-list,
    .client-nav-item--mega > .client-nav-list {
        display: flex;
        flex-direction: column;
        position: static;
        width: auto;
        min-width: 0;
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 0 16px;
    }
    .client-nav-list .client-nav-list .client-nav-item > a,
    .client-nav-list .client-nav-list .client-nav-item > span {
        white-space: normal;
    }
    .client-nav-list.client-nav-level-1::before { display: none; }
    .client-nav-item--has-children > a::after,
    .client-nav-item--has-children > span::after { display: none; }
    .client-section { padding: 40px 0; }
    .client-section__title { font-size: 23px; }
    .client-page-head h1 { font-size: 27px; }
    .client-header__hotline { display: none; }
    .client-table thead { display: none; }
    .client-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--client-line); }
    .client-table td { border: 0; padding: 2px 0; }
    .client-table td:first-child { grid-column: 1 / -1; }
    .client-footer__inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
    .client-footer__column { padding-top: 0; }
    .client-home-featured__grid,
    .client-home-favourites__layout { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .client-home-featured-banner,
    .client-home-favourites__feature { grid-column: 1 / -1; grid-row: auto; min-height: 250px; }
    .client-home-commitments { padding: 48px 0 60px; }
    .client-home-commitments__stage {
        grid-template-areas:
            "image image"
            "authentic advice"
            "shipping payment";
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        max-width: 680px;
    }
    .client-home-commitments__image {
        max-width: 320px;
        margin-bottom: 12px;
    }
    .client-home-commitment--authentic,
    .client-home-commitment--advice,
    .client-home-commitment--shipping,
    .client-home-commitment--payment {
        margin: 0 !important;
        transform: none !important;
    }
    .client-home-commitment--authentic:hover,
    .client-home-commitment--advice:hover,
    .client-home-commitment--shipping:hover,
    .client-home-commitment--payment:hover {
        transform: translateY(-4px) !important;
    }
    .client-home-posts__item {
        flex: 0 0 calc((100% - 10px) / 2);
        min-width: calc((100% - 10px) / 2);
        max-width: calc((100% - 10px) / 2);
    }
    .client-home-posts__track { gap: 10px; }
}

@media (max-width: 560px) {
    .client-dealer-cta { padding-top: 22px; }
    .client-dealer-cta__card { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 15px; }
    .client-dealer-cta__mark { width: 40px; height: 40px; border-radius: 12px; }
    .client-dealer-cta h2 { font-size: 16px; }
    .client-dealer-cta h2 + span { font-size: 11px; line-height: 1.45; }
    .client-dealer-cta__button { grid-column: 1 / -1; width: 100%; }
    .client-footer { padding-top: 32px; }
    /* Two product cards a row is what a phone shop looks like; one card a row
       turns a 49-product catalogue into a very long scroll. Post cards keep the
       full width — a headline and a summary need the measure. */
    .client-grid:not(.client-grid--wide) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .client-card__body { padding: 12px; }
    .client-card__title { font-size: 14px; }
    .client-price__now { font-size: 15px; }
    .client-hero__dots { padding-block: 10px; }
    .client-home-promotions { padding-top: 22px; padding-bottom: 22px; }
    .client-home-promotions__grid { grid-template-columns: 1fr; gap: 14px; }
    .client-home-promo,
    .client-home-promo__content { min-height: 250px; }
    .client-home-promo__content { padding: 26px; }
    .client-home-featured__grid,
    .client-home-favourites__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .client-home-featured-banner,
    .client-home-favourites__feature { min-height: 220px; }
    .client-home-featured-banner__copy,
    .client-home-favourites__feature-copy { padding: 20px; }
    .client-home-commitments__head { margin-bottom: 28px; }
    .client-home-commitments__stage {
        grid-template-areas:
            "image"
            "authentic"
            "advice"
            "shipping"
            "payment";
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .client-home-commitments__image {
        max-width: 270px;
        margin-bottom: 12px;
    }
    .client-home-commitment { padding: 15px 16px; }
    .client-home-posts__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .client-home-posts__actions {
        width: 100%;
        justify-content: space-between;
    }
    .client-home-posts__item {
        flex: 0 0 84%;
        min-width: 84%;
        max-width: 84%;
    }
    .client-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Editable regions -------------------------------------------------------- */

/* Rendered only for an admin: a region emptied on purpose still needs a
   handle, or it can never be restored. */
.client-block-empty {
    min-height: 20px;
    min-width: 60px;
    display: inline-block;
}

/* ---------------------------------------------------------------------------
   Inline editor sandbox (local only). Plain layout on purpose: the point is to
   exercise the toolbar against ordinary block, grid and image contexts, not to
   demonstrate a design.
   -------------------------------------------------------------------------- */
.client-sandbox {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 96px;
}

.client-sandbox h2 {
    border-top: 1px solid var(--client-line);
    font-size: 18px;
    margin: 28px 0 0;
    padding-top: 20px;
}

.client-sandbox__note {
    color: var(--client-muted);
    font-size: 14px;
    margin: 0;
}

.client-sandbox__image {
    border: 1px solid var(--client-line);
    border-radius: 8px;
    display: block;
    max-width: 240px;
}

.client-sandbox__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.client-sandbox__card {
    background: #fff;
    border: 1px solid var(--client-line);
    border-radius: 8px;
    padding: 16px;
}

.client-sandbox__section {
    background: #fff;
    border: 1px solid var(--client-line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 14px 16px;
}

.client-sandbox__section h3 {
    font-size: 15px;
    margin: 0 0 6px;
}

.client-sandbox__child {
    background: var(--client-soft, #f6f8fc);
    border: 1px dashed var(--client-line);
    border-radius: 6px;
    margin-top: 8px;
    padding: 10px 12px;
}

/* ---------------------------------------------------------------------------
   Inline editor stress page (local only).
   Each block reproduces a layout that has broken this class of tool: an absolute
   overlay, an auto-fill grid, a tight flex row, a transformed ancestor, a
   clipping parent, and a table. Deliberately unpretty — it exists to fail here
   rather than on a customer site.
   -------------------------------------------------------------------------- */
.stress-hero {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    margin-bottom: 32px;
}

.stress-hero__media {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, rgba(16, 32, 60, .86), rgba(32, 77, 164, .72)),
        repeating-linear-gradient(45deg, #24324a 0 22px, #1d293d 22px 44px);
}

/* Absolute overlay: the toolbar must anchor to the region, not slide under this. */
.stress-hero__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 32px 24px;
    max-width: var(--client-shell);
    margin: 0 auto;
    color: #fff;
}

.stress-hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 12px;
    margin: 0 0 8px;
    opacity: .82;
}

.stress-hero__title { font-size: clamp(22px, 4vw, 34px); margin: 0 0 10px; }
.stress-hero__lead  { margin: 0; max-width: 44rem; opacity: .92; }

.stress-block { padding-bottom: 8px; }
.stress-block h2 {
    border-top: 1px solid var(--client-line);
    font-size: 18px;
    margin: 30px 0 6px;
    padding-top: 20px;
}

.stress-note { color: var(--client-muted); font-size: 14px; margin: 0 0 12px; }
.stress-note code {
    background: #eef1f6;
    border-radius: 4px;
    font-size: 13px;
    padding: 1px 5px;
}

/* A scroll distance long enough that a fixed control positioned with the page
   offset lands off screen. */
.stress-tall { min-height: 70vh; display: flex; align-items: flex-end; }
.stress-tall--end { min-height: 60vh; }

.stress-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.stress-card {
    background: #fff;
    border: 1px solid var(--client-line);
    border-radius: 8px;
    padding: 16px;
}

/* Tight row: a region emptied here must not collapse the line. */
.stress-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stress-pill {
    background: #eef1f6;
    border-radius: 999px;
    display: inline-block;
    padding: 7px 15px;
}

/* transform creates a containing block; position: fixed inside anchors to it. */
.stress-transformed {
    transform: translateZ(0) scale(1);
    background: #fff;
    border: 1px dashed #c3ccda;
    border-radius: 8px;
    padding: 16px;
}

.stress-clipped {
    overflow: hidden;
    max-height: 96px;
    background: #fff;
    border: 1px dashed #c3ccda;
    border-radius: 8px;
    padding: 16px;
}

.stress-section {
    background: #fff;
    border: 1px solid var(--client-line);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 14px 16px;
}
.stress-section h3 { font-size: 15px; margin: 0 0 6px; }

.stress-subsection {
    background: #f6f8fc;
    border: 1px dashed var(--client-line);
    border-radius: 6px;
    margin-top: 8px;
    padding: 10px 12px;
}
.stress-subsection h4 { font-size: 14px; margin: 0 0 4px; }

.stress-leaf {
    background: #fff;
    border-left: 3px solid #c3ccda;
    margin-top: 6px;
    padding: 8px 10px;
}

.stress-table { border-collapse: collapse; width: 100%; }
.stress-table th,
.stress-table td {
    border-bottom: 1px solid var(--client-line);
    padding: 10px 12px;
    text-align: left;
}

/* ==========================================================================
   Section: Featured Video Theater Showcase
   Avoids generic 4-card slider with an immersive Cinema Theater + Playlist
   ========================================================================== */

.client-home-videos {
    background-color: #ffffff;
    padding: 4rem 1rem;
    position: relative;
    overflow: hidden;
}

@media (min-width: 640px) {
    .client-home-videos {
        padding: 4rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .client-home-videos {
        padding: 4rem 2rem;
    }
}

.client-home-videos__grid {
    max-width: 72rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .client-home-videos__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/* Cột trái: Video Showcase (7 cột) */
.client-home-videos__showcase {
    width: 100%;
}

@media (min-width: 1024px) {
    .client-home-videos__showcase {
        grid-column: span 7 / span 7;
    }
}

.client-home-videos__theater {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 1.5rem;
    overflow: hidden;
    background-color: #1c1917;
    width: 100%;
}

.client-home-videos__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
    opacity: 0.9;
}

.client-home-videos__theater:hover .client-home-videos__poster {
    transform: scale(1.05);
}

.client-home-videos__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, rgba(12, 10, 9, 0.7) 0%, transparent 60%);
    pointer-events: none;
}

.client-home-videos__play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4rem;
    height: 4rem;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #e11d48;
    border: none;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
    z-index: 4;
    padding: 0;
}

.client-home-videos__play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 25px 35px -5px rgba(225, 29, 72, 0.35);
}

.client-home-videos__play-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
    transform: translateX(1px);
    display: block;
}

.client-home-videos__badge-wrap {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    color: #ffffff;
    z-index: 3;
    pointer-events: none;
}

.client-home-videos__tag {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background-color: rgba(28, 25, 23, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: #ffffff;
    line-height: 1.4;
}

.client-home-videos__iframe-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background: #000000;
}

.client-home-videos__iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Cột phải: Nội dung Story & Playlist Switcher (5 cột) */
.client-home-videos__story {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .client-home-videos__story {
        grid-column: span 5 / span 5;
    }
}

.client-home-videos__story-header {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.client-home-videos__expert-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #e11d48;
    background-color: #fff1f2;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
}

.client-home-videos__story-quote {
    font-family: inherit;
    font-size: clamp(1.5rem, 2.3vw, 1.875rem);
    font-weight: 700;
    color: #1c1917;
    line-height: 1.35;
    margin: 0;
}

.client-home-videos__story-desc {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: #78716c;
    line-height: 1.625;
}

.client-home-videos__divider {
    border: 0;
    border-top: 1px solid #f5f5f4;
    margin: 0;
    width: 100%;
}

.client-home-videos__nav {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.client-home-videos__nav-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a8a29e;
    margin: 0 0 0.25rem;
}

.client-home-videos__nav-btn {
    width: 100%;
    text-align: left;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background-color: transparent;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 150ms ease;
    font-family: inherit;
}

.client-home-videos__nav-btn:hover {
    background-color: #fafaf9;
    border-color: #e7e5e4;
}

.client-home-videos__nav-btn.is-active {
    background-color: #fafaf9;
    border-color: #e7e5e4;
}

.client-home-videos__nav-btn.is-active:hover,
.client-home-videos__nav-btn:hover {
    border-color: #fda4af;
}

.client-home-videos__nav-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #57534e;
    transition: color 150ms ease;
}

.client-home-videos__nav-btn:hover .client-home-videos__nav-title {
    color: #1c1917;
}

.client-home-videos__nav-btn.is-active .client-home-videos__nav-title {
    font-weight: 600;
    color: #1c1917;
}

.client-home-videos__nav-btn.is-active:hover .client-home-videos__nav-title,
.client-home-videos__nav-btn:hover .client-home-videos__nav-title {
    color: #e11d48;
}

.client-home-videos__nav-duration {
    font-size: 0.75rem;
    color: #a8a29e;
    flex-shrink: 0;
}

/* ==========================================================================
   Section: 3D Depth Stage Awards & Certificates Showcase
   Avoids generic 4-card slider with layered 3D depth cards + editorial stats
   ========================================================================== */

.client-home-awards {
    padding: 80px 0 90px;
    position: relative;
    overflow: hidden;
}

.client-home-awards::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 5%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(212, 163, 89, 0.12) 0%, rgba(179, 25, 92, 0.04) 50%, transparent 70%);
    pointer-events: none;
}

.client-awards__layout {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.client-awards__intro {
    display: flex;
    flex-direction: column;
}

.client-awards__badge-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(179, 25, 92, 0.08);
    color: var(--client-accent);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    align-self: flex-start;
    border: 1px solid rgba(179, 25, 92, 0.15);
}

.client-awards__title {
    font-size: clamp(28px, 3.4vw, 38px);
    font-weight: 800;
    color: var(--client-ink);
    margin: 0 0 16px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.client-awards__lead {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--client-muted);
    margin: 0 0 26px;
}

.client-awards__perks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.client-awards__perk {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #3b3c4a;
}

.client-awards__perk-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(179, 25, 92, 0.12);
    color: var(--client-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.client-awards__controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

.client-awards__counter {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: inherit;
}

.client-awards__counter strong {
    font-size: 32px;
    font-weight: 800;
    color: var(--client-accent);
    line-height: 1;
}

.client-awards__counter span {
    font-size: 15px;
    font-weight: 600;
    color: #9293a3;
}

.client-awards__nav-btns {
    display: flex;
    gap: 10px;
}

.client-awards__nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--client-line);
    color: var(--client-ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(27, 27, 31, 0.06);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.client-awards__nav-btn:hover {
    background: var(--client-accent);
    color: #ffffff;
    border-color: var(--client-accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(179, 25, 92, 0.28);
}

/* 3D Depth Stage */
.client-awards__stage-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    perspective: 1100px;
}

.client-awards__stage {
    position: relative;
    width: 100%;
    height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}

.client-award-card {
    position: absolute;
    width: 290px;
    max-width: 88%;
    height: 405px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease,
                filter 0.5s ease,
                box-shadow 0.5s ease;
    will-change: transform, opacity;
}

.client-award-card__inner {
    height: 100%;
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(27, 27, 31, 0.09);
    border: 1px solid rgba(212, 163, 89, 0.4);
}

.client-award-card__seal-border {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2.5px;
    background: linear-gradient(135deg, rgba(212, 163, 89, 0.7), rgba(179, 25, 92, 0.25), rgba(212, 163, 89, 0.7));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.client-award-card__media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #ffffff 0%, #fbf9f6 100%);
    border-radius: 12px;
    overflow: hidden;
    padding: 6px;
    position: relative;
    border: 1px solid rgba(230, 224, 216, 0.7);
}

.client-award-card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.1));
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* 3D Depth Card State Transitions */
.client-award-card.is-active {
    transform: translateX(0) scale(1) translateZ(0);
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
}

.client-award-card.is-next {
    transform: translateX(120px) scale(0.9) translateZ(-60px) rotateY(-8deg);
    z-index: 5;
    opacity: 0.75;
    filter: blur(0.4px);
    pointer-events: auto;
}

.client-award-card.is-next:hover {
    opacity: 0.9;
    transform: translateX(110px) scale(0.92) translateZ(-40px) rotateY(-6deg);
}

.client-award-card.is-prev {
    transform: translateX(-120px) scale(0.9) translateZ(-60px) rotateY(8deg);
    z-index: 4;
    opacity: 0.58;
    filter: blur(0.8px);
    pointer-events: auto;
}

.client-award-card.is-prev:hover {
    opacity: 0.8;
    transform: translateX(-110px) scale(0.92) translateZ(-40px) rotateY(6deg);
}

.client-award-card.is-hidden {
    transform: translateX(0) scale(0.78) translateZ(-140px);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.client-awards__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.client-awards__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d8d2c9;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.client-awards__dot:hover {
    background: #FEB3B4;
}

.client-awards__dot.is-active {
    width: 32px;
    background: var(--client-accent);
}

@media (max-width: 992px) {
    .client-awards__layout {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .client-awards__intro {
        text-align: center;
        align-items: center;
    }
    .client-awards__badge-tag {
        align-self: center;
    }
    .client-awards__perks {
        align-items: flex-start;
        max-width: 440px;
    }
    .client-awards__stage-wrap {
        width: 100%;
    }
    .client-awards__stage {
        height: 440px;
    }
    .client-award-card.is-next {
        transform: translateX(70px) scale(0.88) rotateY(-6deg);
    }
    .client-award-card.is-prev {
        transform: translateX(-70px) scale(0.88) rotateY(6deg);
    }
}

@media (max-width: 640px) {
    .client-home-awards {
        padding: 56px 0 64px;
    }
    .client-awards__stage {
        height: 400px;
    }
    .client-award-card {
        width: 260px;
        height: 365px;
    }
    .client-award-card.is-next {
        transform: translateX(35px) scale(0.86);
        opacity: 0.65;
    }
    .client-award-card.is-prev {
        transform: translateX(-35px) scale(0.86);
        opacity: 0.45;
    }
}