/* S&LIFE Sneaker — giao diện. Màu lấy từ logo (xem images/brand/README.md). */
/* Hai font (mốc 9): Barlow Condensed cho tiêu đề, IBM Plex Sans cho chữ đọc. Cả hai có tiếng Việt, miễn phí (Google Fonts).
   Font dự phòng cho tiêu đề khi Barlow Condensed chưa tải xong / không tải được: font hẹp có sẵn trên máy. */
@font-face {
  font-family: "Display Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Roboto Condensed Bold"), local("RobotoCondensed-Bold"),
       local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Narrow Bold"), local("DejaVu Sans Condensed Bold");
  font-weight: 600 900;
  size-adjust: 92%;
}
:root {
  --c-cobalt: #004AAD;
  --c-indigo: #3E32AD;
  --c-violet: #771CAE;
  --c-berry: #AD2571;
  --c-red: #DB3137;
  --grad-brand: linear-gradient(135deg, #004AAD 0%, #771CAE 50%, #DB3137 100%);
  --grad-soft: linear-gradient(135deg, #EEF2FB 0%, #F3ECFA 50%, #FBEDEF 100%);
  --ink: #15112B;
  --ink-2: #4A4560;
  --muted: #6E6980;        /* chữ phụ (đủ tương phản trên nền trắng) */
  --muted-2: #8C879C;      /* chỉ dùng cho viền, biểu tượng */
  --line: #E7E4F0;
  --mist: #F4F2FA;
  --paper: #FFFFFF;
  --ok: #1B7F52; --ok-bg: #E6F5EC;
  --order: #771CAE; --order-bg: #F2E9FA;
  --out: #6E6980; --out-bg: #EFEEF3;
  --warn-bg: #FFF7E6; --warn-line: #F2DFB0;
  --r-s: 8px; --r: 12px; --r-l: 20px;
  --shadow-1: 0 1px 2px rgba(22, 18, 43, .05), 0 4px 16px rgba(22, 18, 43, .06);
  --shadow-2: 0 18px 40px rgba(22, 18, 43, .16);
  /* Hai font: chữ đọc IBM Plex Sans, tiêu đề Barlow Condensed (xem khối "Mốc 9" cuối file) */
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Display Fallback", "Arial Narrow", sans-serif;
  --max: 1320px;
  --gut: 16px;
  --hd-h: 116px;           /* chiều cao header dính (điện thoại: 2 hàng) */
  --float-bottom: 18px;    /* nút chat nổi: đẩy lên khi có thanh mua dính đáy */
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* tên biến cũ để các trang phụ không vỡ */
  --soft: var(--mist); --bg: var(--paper); --cart: var(--c-indigo); --buy-2: var(--c-berry);
}
@media (min-width: 768px) { :root { --gut: 24px; } }
@media (min-width: 1180px) { :root { --gut: 32px; --hd-h: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd-h) + 12px); }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
p { margin: 0 0 1em; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
.icon { width: 22px; height: 22px; flex: none; }
:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 2px; border-radius: 4px; }
::selection { background: #E4D6F5; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-s); }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Chữ condensed in hoa kiểu tạp chí sneaker */
.display { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: .95; }
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Nút ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 1.5px solid var(--ink); border-radius: var(--r-s);
  background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .2s, background-color .2s, border-color .2s, color .2s;
}
.btn:hover { background: #2A2440; border-color: #2A2440; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; }
.btn--grad { border: 0; background: var(--ink); color: #fff; }
.btn--grad:hover { background: var(--c-cobalt); }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--mist); border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: rgba(255, 255, 255, .88); border-color: transparent; }
.btn--line-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.btn--line-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.btn--zalo { background: #0068FF; border-color: #0068FF; color: #fff; }
.btn--zalo:hover { background: #0057D6; border-color: #0057D6; }
.btn--buy, .btn--cart { background: var(--ink); border: 0; color: #fff; }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.link { color: var(--c-violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; border: 0; background: none; padding: 0; }
.link:hover { color: var(--c-cobalt); }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: none; transition: background-color .2s; }
.icon-btn:hover { background: var(--mist); }
.badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--c-red); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1;
}
.badge.is-pop { animation: pop .35s var(--ease); }
@keyframes pop { 40% { transform: scale(1.35); } }

/* Nhãn trạng thái */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--mist); color: var(--ink-2); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .9; }
.pill--plain::before { display: none; }
.pill--ok { background: var(--ok-bg); color: var(--ok); }
.pill--order { background: var(--order-bg); color: var(--order); }
.pill--out, .pill.is-out { background: var(--out-bg); color: var(--out); }
.pill--info { background: #FFF1E0; color: #9A4A00; }
.pill--g { background: #FBE9F0; color: #A3245A; }
.pill--new { background: #E6EEFA; color: #004AAD; }
.pill--sm { height: 22px; padding: 0 8px; font-size: 11.5px; }

/* ---------- Thanh thông báo ---------- */
.announce { background: var(--ink); color: rgba(255, 255, 255, .88); font-size: 13px; font-weight: 500; }
.announce__in { position: relative; display: flex; align-items: center; justify-content: center; min-height: 36px; padding-right: 44px; padding-left: 44px; }
.announce__msgs { position: relative; height: 20px; width: 100%; overflow: hidden; text-align: center; }
.announce__msgs span { position: absolute; inset: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s var(--ease); }
.announce__msgs span.is-on { opacity: 1; transform: none; }
.announce__x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; color: #fff; border-radius: 999px; display: flex; align-items: center; justify-content: center; opacity: .85; }
.announce__x:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.announce__x svg { width: 16px; height: 16px; }

/* ---------- Header ---------- */
.hd { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.hd.is-scrolled { box-shadow: 0 6px 20px rgba(22, 18, 43, .07); }
.hd__row { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "menu logo icons" "search search search"; align-items: center; column-gap: 8px; padding-top: 6px; padding-bottom: 10px; }
.hd__menu { grid-area: menu; justify-self: start; margin-left: -10px; }
.logo { grid-area: logo; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
/* Logo gốc của shop (ô vuông gradient, đủ "S&LIFE Since 2021"), không cắt, không tách chữ */
.logo__img { display: block; width: 52px; height: 52px; }
.hd__icons { grid-area: icons; justify-self: end; display: flex; align-items: center; margin-right: -8px; }
.hd__icons .icon-btn svg { width: 23px; height: 23px; }
.nav { display: none; }

/* Ô tìm kiếm lớn + gợi ý tức thì */
.search { grid-area: search; position: relative; display: flex; align-items: center; margin-top: 4px; }
.search__icon { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 46px; padding: 0 92px 0 44px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--mist);
  outline: none; font-size: 15px; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--c-violet); background: #fff; box-shadow: 0 0 0 4px rgba(119, 28, 174, .1); }
.search input::-webkit-search-cancel-button { display: none; }
.search__go { position: absolute; right: 5px; height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 600; font-size: 14px; }
.search__go:hover { background: var(--c-cobalt); }
.search__pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-2); overflow: hidden; max-height: min(70vh, 560px); overflow-y: auto;
}
.sug { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.sug:last-of-type { border-bottom: 0; }
.sug.is-active, .sug:hover { background: var(--mist); }
.sug__img { position: relative; width: 52px; height: 52px; border-radius: var(--r-s); overflow: hidden; background: var(--mist); }
.sug__name { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sug__name mark { background: none; color: var(--c-violet); font-weight: 700; }
.sug__code { font-size: 12.5px; color: var(--muted); }
.sug__price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.sug-all { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--mist); font-weight: 600; font-size: 14px; color: var(--c-violet); }
.sug-all:hover, .sug-all.is-active { background: #EEE8F8; }
.sug-empty { padding: 16px 14px; font-size: 14px; color: var(--ink-2); }
.sug-empty a { color: var(--c-violet); font-weight: 600; }
.sug-head { padding: 10px 14px 4px; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.sug-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 14px; }
.sug-chips a { padding: 5px 12px; border-radius: 999px; background: var(--mist); font-size: 13.5px; }
.sug-chips a:hover { background: #EEE8F8; color: var(--c-violet); }

@media (min-width: 1180px) {
  .hd__row { grid-template-columns: auto minmax(220px, 420px) 1fr auto; grid-template-areas: "logo search nav icons"; column-gap: 24px; height: 76px; padding: 0 var(--gut); }
  .hd__menu { display: none; }
  .logo__img { width: 62px; height: 62px; }
  .search { margin: 0; }
  .search input { height: 44px; }
  .nav { grid-area: nav; display: flex; justify-content: flex-end; align-items: stretch; height: 100%; gap: 2px; }
  .nav__item { position: static; display: flex; }
  .nav__link { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; border: 0; background: none; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); white-space: nowrap; position: relative; }
  .nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 18px; height: 2px; border-radius: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .nav__link:hover::after, .nav__item:hover > .nav__link::after, .nav__item.is-open > .nav__link::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
  .nav__link svg { width: 14px; height: 14px; transition: transform .2s; }
  .nav__item:hover > .nav__link svg, .nav__item.is-open > .nav__link svg { transform: rotate(180deg); }
  .mega {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 24px 40px rgba(22, 18, 43, .12);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s;
  }
  .nav__item:hover > .mega, .nav__item.is-open > .mega, .nav__item:focus-within > .mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .mega__in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 24px; padding-top: 28px; padding-bottom: 32px; }
  .mega__col h4 { margin: 0 0 8px; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
  .mega__col h4 a:hover { color: var(--c-violet); }
  .mega__col h4 small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; text-transform: none; letter-spacing: 0; }
  .mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .mega__col li a { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 16px; color: var(--ink-2); }
  .mega__col li a:hover { color: var(--c-violet); }
  .mega__col li small { color: var(--muted); }
  .mega__in--needs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; }
  .need { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s, background-color .2s; }
  .need b { font-size: 15px; }
  .need span { font-size: 13px; color: var(--muted); }
  .need:hover { border-color: transparent; background: var(--grad-soft); }
  .need:hover b { color: var(--c-violet); }
}

/* ---------- Ngăn kéo menu (điện thoại) ---------- */
.drawer { position: fixed; inset: 0; z-index: 70; pointer-events: none; visibility: hidden; transition: visibility 0s .3s; }
.drawer.is-open { pointer-events: auto; visibility: visible; transition: none; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(22, 18, 43, .5); opacity: 0; transition: opacity .25s; }
.drawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(400px, 100%); background: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .3s var(--ease); }
.drawer--right .drawer__panel { left: auto; right: 0; transform: translateX(100%); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line); }
.drawer__head b { font-family: var(--font-display); font-stretch: 75%; font-size: 22px; font-weight: 800; text-transform: uppercase; }
.drawer__body { overflow-y: auto; flex: 1; padding: 6px 0 28px; overscroll-behavior: contain; }
.drawer__title { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 18px 20px 6px; }
.m-item { border-bottom: 1px solid var(--line); }
.m-row { display: flex; align-items: center; }
.m-row > a { flex: 1; padding: 14px 20px; font-weight: 600; display: flex; justify-content: space-between; gap: 8px; }
.m-row > a small { color: var(--muted); font-weight: 500; }
.m-toggle { width: 52px; align-self: stretch; border: 0; border-left: 1px solid var(--line); background: none; display: flex; align-items: center; justify-content: center; }
.m-toggle svg { width: 18px; height: 18px; transition: transform .2s; }
.m-item.is-open .m-toggle svg { transform: rotate(90deg); }
.m-sub { display: none; background: var(--mist); padding: 4px 0 8px; }
.m-item.is-open .m-sub { display: block; }
.m-sub a { display: flex; justify-content: space-between; padding: 10px 20px 10px 34px; font-size: 14.5px; color: var(--ink-2); }
.m-sub a small { color: var(--muted); }
.m-links a { display: block; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.m-contact { margin: 18px 20px 0; padding: 16px; border-radius: var(--r); background: var(--grad-soft); font-size: 14px; color: var(--ink-2); }
.m-contact b { color: var(--ink); }

/* ---------- Tiêu đề trang, breadcrumb ---------- */
.page-head { text-align: center; padding: 34px 0 10px; }
.page-head h1 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 5vw, 52px); line-height: 1; margin-bottom: 10px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0 14px; }
.breadcrumb { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
.breadcrumb a:hover { color: var(--c-violet); }
.breadcrumb span { margin: 0 8px; opacity: .6; }
.breadcrumb > :last-child { color: var(--ink-2); }
.bar__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.select {
  height: 40px; padding: 0 34px 0 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%2316122B' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; cursor: pointer;
}
.select:hover { border-color: var(--muted-2); }
.count-line { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ---------- Tiêu đề khu vực ---------- */
.sec { padding: 44px 0 8px; }
.sec__head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; text-align: center; }
.sec__title { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4.4vw, 46px); line-height: 1; letter-spacing: .005em; margin: 0; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em; }
.sec__sub { margin: 0; font-size: 14.5px; color: var(--muted); max-width: 60ch; }
.sec__foot { display: flex; justify-content: center; margin-top: 22px; }
.sec__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--ink); border-bottom: 1.5px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.sec__link:hover { color: var(--c-violet); }
.sec__link svg { width: 16px; height: 16px; }
.sec__head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; text-align: left; }
.sec__head--row .sec__title { font-size: clamp(26px, 3.4vw, 38px); }

/* ---------- Ảnh sản phẩm: ảnh thật hoặc ô trung tính ---------- */
.media { position: absolute; inset: 0; background: var(--mist); container-type: size; }
.media__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 10px; }
.media__ph img { width: 30%; max-width: 110px; height: auto; opacity: .16; }
.media__ph span { font-size: 12px; color: var(--muted); line-height: 1.3; }
@container (max-width: 130px) { .media__ph span { display: none; } .media__ph img { width: 44%; } }
.media__img, .media__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .35s, transform .5s var(--ease); background: #fff; }
.media__img.ok { opacity: 1; }
.media.has-photo .media__ph { visibility: hidden; }

/* ---------- Thẻ sản phẩm ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 16px; } }
@media (min-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; } }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.card__img { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r); overflow: hidden; background: var(--mist); isolation: isolate; }
.card__imglink { position: absolute; inset: 0; }
.card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; pointer-events: none; }
.wish {
  position: absolute; top: 6px; right: 6px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center; color: var(--ink); transition: transform .2s var(--ease), color .2s, background-color .2s; box-shadow: 0 1px 3px rgba(22, 18, 43, .08);
}
.wish svg { width: 20px; height: 20px; }
.wish:hover { transform: scale(1.08); }
.wish[aria-pressed="true"] { color: var(--c-berry); }
.wish[aria-pressed="true"] svg path { fill: currentColor; }
.card__quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; height: 42px; border: 0; border-radius: var(--r-s); background: rgba(22, 18, 43, .92); color: #fff;
  font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .2s, transform .25s var(--ease), background-color .2s;
}
.card__quick svg { width: 18px; height: 18px; }
.card__quick:hover { background: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .card__quick { opacity: 0; transform: translateY(8px); }
  .card:hover .card__quick, .card:focus-within .card__quick { opacity: 1; transform: none; }
  .card:hover .media__img.ok { transform: scale(1.04); }
  .card:hover .media__alt.ok { opacity: 1; }
}
@media (hover: none), (pointer: coarse) {
  .card__quick { left: auto; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 999px; padding: 0; background: rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 1px 3px rgba(22, 18, 43, .12); }
  .card__quick span { display: none; }
}
.card__body { position: relative; padding: 12px 2px 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card__name { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.card__name a::after { content: ""; position: absolute; inset: 0; }
.card__name a:hover { color: var(--c-violet); }
.card__code { font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.card__sizes { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__price { margin-top: 4px; font-weight: 700; font-size: 16px; }
.card__price small { font-weight: 500; font-size: 12.5px; color: var(--muted); margin-right: 3px; }
.card__price.is-out { color: var(--muted); font-weight: 600; font-size: 14px; }
.card.is-out .media { filter: grayscale(.6); opacity: .8; }
@media (max-width: 480px) { .card__name { font-size: 13.5px; } .card__price { font-size: 15px; } .card__badges { top: 8px; left: 8px; } }

/* Khung chờ */
.skel { border-radius: var(--r); background: linear-gradient(90deg, var(--mist) 25%, #EEEBF5 50%, var(--mist) 75%); background-size: 200% 100%; animation: skel 1.2s infinite linear; }
@keyframes skel { to { background-position: -200% 0; } }

.empty { text-align: center; padding: 48px 20px; border-radius: var(--r-l); background: var(--mist); grid-column: 1 / -1; }
.empty h2, .empty h3 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; }
.empty p { max-width: 52ch; margin-left: auto; margin-right: auto; }
.empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }

/* ---------- Băng sản phẩm cuộn ngang ---------- */
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 6px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 640px) { .rail { grid-auto-columns: calc((100% - 2 * var(--gut) - 2 * 16px) / 3.2); gap: 16px; } }
@media (min-width: 1180px) { .rail { grid-auto-columns: calc((100% - 2 * var(--gut) - 4 * 20px) / 5); gap: 20px; } }
.rail-nav { display: none; }
@media (min-width: 1180px) {
  .rail-nav { display: flex; position: absolute; top: calc(50% - 60px); z-index: 4; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow-1); align-items: center; justify-content: center; transition: opacity .2s, transform .2s; }
  .rail-nav svg { width: 20px; height: 20px; }
  .rail-nav:hover { transform: scale(1.06); }
  .rail-nav--prev { left: -22px; }
  .rail-nav--next { right: -22px; }
  .rail-nav[disabled] { opacity: 0; pointer-events: none; }
}

/* Pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: 40px 0 8px; }
.pager button, .pager span { min-width: 42px; height: 42px; padding: 0 12px; border: 1.5px solid var(--line); background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ink-2); border-radius: 999px; }
.pager span { border-color: transparent; }
.pager button:hover { border-color: var(--ink); color: var(--ink); }
.pager button.is-current { border: 0; background: var(--ink); color: #fff; }

/* Đoạn giới thiệu cuối trang danh mục */
.about { max-width: 860px; margin: 48px auto 0; padding: 28px; border-radius: var(--r-l); background: var(--mist); }
.about h2 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 26px; line-height: 1.05; }
.about__body { font-size: 14.5px; color: var(--ink-2); max-height: 5em; overflow: hidden; position: relative; }
.about__body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6em; background: linear-gradient(rgba(246, 244, 251, 0), var(--mist)); }
.about.is-open .about__body { max-height: none; }
.about.is-open .about__body::after { display: none; }
.about button { margin-top: 10px; }

/* ---------- Danh mục + bộ lọc ---------- */
.coll { padding-top: 6px; }
.coll__head { display: grid; gap: 6px; padding: 10px 0 18px; }
.coll__title { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 6vw, 60px); line-height: .95; margin: 0; }
.coll__title .grad-text { display: inline; }
.coll-banner { margin: 4px 0 18px; overflow: hidden; border-radius: var(--r-l); }
.coll-banner img { width: 100%; max-height: 420px; object-fit: cover; }
.chiprow { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)) 18px; padding: 2px var(--gut) 4px; }
.chiprow::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s;
}
.chip small { font-weight: 500; color: var(--muted); }
.chip:hover { border-color: var(--ink); }
.chip.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip.is-active small { color: rgba(255, 255, 255, .8); }

.toolbar { position: sticky; top: var(--hd-h); z-index: 20; display: flex; align-items: center; gap: 10px; padding: 10px 0; margin-bottom: 8px; background: rgba(255, 255, 255, .96); }
.toolbar .count-line { margin-right: auto; }
.tool-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; }
.tool-btn svg { width: 18px; height: 18px; }
.tool-btn b { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--c-violet); color: #fff; font-size: 12px; align-items: center; justify-content: center; }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.chips button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--order-bg); color: var(--c-violet); font-size: 13.5px; font-weight: 600; }
.chips button svg { width: 14px; height: 14px; }
.chips button:hover { background: #E8D9F6; }
.chips .chips__clear { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.shop { padding-bottom: 10px; }
/* Bộ lọc: bảng trượt từ dưới lên trên điện thoại, cột trái trên máy tính */
.filters { position: fixed; inset: 0; z-index: 75; pointer-events: none; visibility: hidden; transition: visibility 0s .3s; }
.filters.is-open { pointer-events: auto; visibility: visible; transition: none; }
.filters__backdrop { position: absolute; inset: 0; background: rgba(22, 18, 43, .5); opacity: 0; transition: opacity .25s; }
.filters__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; background: #fff; border-radius: var(--r-l) var(--r-l) 0 0; display: flex; flex-direction: column; transform: translateY(100%); transition: transform .32s var(--ease); }
.filters.is-open .filters__backdrop { opacity: 1; }
.filters.is-open .filters__panel { transform: none; }
.filters__panel::before { content: ""; width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 8px auto 0; flex: none; }
.filters__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 12px 8px 20px; border-bottom: 1px solid var(--line); }
.filters__head b { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 24px; text-transform: uppercase; }
.filters__body { flex: 1; overflow-y: auto; padding: 0 20px; overscroll-behavior: contain; }
.filters__foot { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.filter { border-bottom: 1px solid var(--line); }
.filter:last-child { border-bottom: 0; }
.filter > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 700; font-size: 15px; cursor: pointer; }
.filter > summary::-webkit-details-marker { display: none; }
.filter > summary svg { width: 18px; height: 18px; transition: transform .2s; }
.filter[open] > summary svg { transform: rotate(180deg); }
.filter__body { padding: 0 0 18px; }
.filter__note { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--c-violet); flex: none; }
.check small, .color small { color: var(--muted); margin-left: auto; }
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.size-btn { height: 42px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: #fff; font-size: 14px; font-weight: 500; transition: border-color .15s, background-color .15s, color .15s; }
.size-btn:hover { border-color: var(--ink); }
.size-btn.is-active, .size-btn[aria-pressed="true"] { border-color: var(--c-violet); background: var(--c-violet); color: #fff; font-weight: 700; }
.colors { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
.color { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: 14px; cursor: pointer; }
.color input { position: absolute; opacity: 0; pointer-events: none; }
.color i { width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(22, 18, 43, .18); flex: none; box-shadow: inset 0 0 0 2px #fff; }
.color input:checked + i { outline: 2px solid var(--c-violet); outline-offset: 2px; }
.color input:focus-visible + i { outline: 2px solid var(--c-violet); outline-offset: 2px; }
/* Thanh trượt khoảng giá */
.range { position: relative; height: 34px; margin: 4px 8px 6px; }
.range__track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 4px; background: var(--line); }
.range__fill { position: absolute; top: 15px; height: 4px; border-radius: 4px; background: var(--c-violet); }
.range input[type="range"] { position: absolute; left: -8px; right: -8px; width: calc(100% + 16px); top: 6px; height: 22px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 999px; background: #fff; border: 2px solid var(--c-violet); box-shadow: 0 1px 4px rgba(22, 18, 43, .2); pointer-events: auto; cursor: grab; }
.range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 999px; background: #fff; border: 2px solid var(--c-violet); pointer-events: auto; cursor: grab; }
.range input[type="range"]::-moz-range-track { background: none; }
.range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(119, 28, 174, .25); }
.price-inputs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.price-inputs label { position: relative; display: block; }
.price-inputs input { width: 100%; height: 42px; padding: 0 30px 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-s); font-size: 14px; outline: none; }
.price-inputs input:focus { border-color: var(--c-violet); }
.price-inputs label span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12.5px; color: var(--muted); pointer-events: none; }
.price-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.price-quick button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 13px; }
.price-quick button:hover { border-color: var(--ink); }

@media (min-width: 1180px) {
  .shop { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
  .filters { position: sticky; top: calc(var(--hd-h) + 16px); inset: auto; z-index: 1; pointer-events: auto; visibility: visible; max-height: calc(100vh - var(--hd-h) - 32px); overflow-y: auto; scrollbar-width: thin; transition: none; padding-right: 6px; }
  .filters__backdrop, .filters__foot, .filters__head, .filters__panel::before { display: none; }
  .filters__panel { position: static; transform: none; transition: none; max-height: none; border-radius: 0; }
  .filters__body { padding: 0; overflow: visible; }
  .filter:first-child > summary { padding-top: 4px; }
  [data-filters-open] { display: none; }
  .toolbar { position: static; padding-top: 0; }
}

/* ---------- Trang chủ ---------- */
/* Hero trượt */
.hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.hero__track { display: flex; transition: transform .7s var(--ease); }
.hero__slide { position: relative; flex: 0 0 100%; min-height: clamp(520px, 78vh, 700px); display: flex; overflow: hidden; }
.hero__slide--grad { background: var(--grad-brand); }
.hero__slide--ink { background: radial-gradient(120% 90% at 85% 20%, #3E32AD 0%, #16122B 60%); }
.hero__slide--img { background: #111; }
.hero__slide--img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 18, 43, .72), rgba(22, 18, 43, .1)); }
.hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; align-content: center; gap: 28px; width: 100%; padding-top: 40px; padding-bottom: 64px; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; opacity: .92; margin-bottom: 14px; }
.hero__kicker img { width: 22px; height: auto; }
.hero__title { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 13vw, 132px); line-height: .86; letter-spacing: -.005em; margin: 0 0 18px; }
.hero__title span { display: block; }
.hero__title .is-outline { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .9); }
.hero__lead { font-size: clamp(15px, 1.6vw, 18px); max-width: 44ch; opacity: .92; margin-bottom: 24px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 240px; }
.hero__word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(120px, 30vw, 360px); line-height: .8; color: rgba(255, 255, 255, .08); letter-spacing: -.02em; white-space: nowrap; }
.hero__shoe { position: relative; width: min(100%, 460px); aspect-ratio: 1 / 1; border-radius: 28px; background: #fff; box-shadow: 0 30px 60px rgba(10, 6, 30, .35); overflow: hidden; transform: rotate(-3deg); }
.hero__shoe .media { background: #fff; }
.hero__tag { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r); background: rgba(22, 18, 43, .88); color: #fff; font-size: 13px; }
.hero__tag b { font-size: 14.5px; }
.hero__stack { position: relative; width: min(100%, 500px); height: 360px; }
.hero__stack a { position: absolute; width: 58%; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 24px 48px rgba(10, 6, 30, .35); transition: transform .4s var(--ease); }
.hero__stack a:nth-child(1) { left: 0; top: 16%; transform: rotate(-6deg); }
.hero__stack a:nth-child(2) { right: 0; top: 0; transform: rotate(5deg); z-index: 1; }
.hero__stack a:nth-child(3) { left: 24%; bottom: -6%; width: 50%; transform: rotate(-1deg); z-index: 2; }
.hero__stack a:hover { transform: rotate(0) scale(1.03); z-index: 3; }
.hero__mark { width: min(64%, 340px); height: auto; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .25)); }
.hero__ctrl { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 5; }
.hero__ctrl .container { display: flex; align-items: center; gap: 12px; }
.hero__dots { display: flex; gap: 8px; }
.hero__dots button { width: 34px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .35); position: relative; overflow: hidden; }
.hero__dots button::before { content: ""; position: absolute; inset: -12px 0; }
.hero__dots button.is-active { background: rgba(255, 255, 255, .95); }
.hero__btn { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(22, 18, 43, .2); color: #fff; display: flex; align-items: center; justify-content: center; }
.hero__btn:hover { background: rgba(255, 255, 255, .15); }
.hero__btn svg { width: 16px; height: 16px; }
.hero__btn--next svg { transform: scaleX(-1); }
.hero__nav { margin-left: auto; display: flex; gap: 8px; }
@media (min-width: 900px) {
  .hero__in { grid-template-columns: 1.05fr .95fr; gap: 40px; padding-top: 56px; padding-bottom: 80px; }
  .hero__art { min-height: 440px; }
  .hero__stack { height: 460px; }
}
@media (max-width: 899px) {
  .hero__slide { min-height: 0; }
  .hero__art { order: -1; min-height: 0; }
  .hero__shoe { width: min(76%, 300px); }
  .hero__stack { width: min(100%, 340px); height: 250px; }
  .hero__mark { width: 42%; }
  .hero__word { font-size: 40vw; }
}

/* Cam kết */
.perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding: 34px 0 6px; }
.perk { display: grid; justify-items: center; text-align: center; gap: 6px; }
.perk__ic { width: 58px; height: 58px; border-radius: 999px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; box-shadow: 0 10px 24px rgba(119, 28, 174, .22); }
.perk__ic svg { width: 26px; height: 26px; }
.perk b { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 21px; text-transform: uppercase; line-height: 1; }
.perk span { font-size: 13.5px; color: var(--muted); max-width: 26ch; line-height: 1.45; }
@media (min-width: 900px) { .perks { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 48px; } }

/* Top thương hiệu */
.brands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .brands { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
.brand-tile {
  position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--mist);
  border: 1.5px solid transparent; overflow: hidden; isolation: isolate; transition: color .25s, transform .25s var(--ease);
}
.brand-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--grad-brand); opacity: 0; transition: opacity .25s; }
.brand-tile__mono { width: 44px; height: 44px; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 18px; color: var(--c-indigo); letter-spacing: .02em; }
.brand-tile b { display: block; font-size: 15px; line-height: 1.2; }
.brand-tile small { display: block; font-size: 12.5px; color: var(--muted); transition: color .25s; }
.brand-tile svg { width: 18px; height: 18px; opacity: .6; }
.brand-tile:hover { color: #fff; transform: translateY(-2px); }
.brand-tile:hover::before, .brand-tile:focus-visible::before { opacity: 1; }
.brand-tile:hover small { color: rgba(255, 255, 255, .85); }
.brand-tile--all { background: #fff; border-color: var(--line); }

/* Dòng giày nổi bật: ô ảnh lớn */
.lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .lines { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .line-card:first-child { grid-column: span 2; grid-row: span 2; } }
.line-card { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--r-l); overflow: hidden; background: var(--mist); isolation: isolate; }
.line-card .media { background: var(--mist); }
.line-card .media__img { background: transparent; mix-blend-mode: multiply; }
.line-card__txt { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 40px 16px 14px; background: linear-gradient(rgba(22, 18, 43, 0), rgba(22, 18, 43, .72)); color: #fff; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.line-card__txt b { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); line-height: .95; text-transform: uppercase; }
.line-card:first-child .line-card__txt b { font-size: clamp(28px, 4vw, 56px); }
.line-card__txt small { font-size: 12.5px; white-space: nowrap; opacity: .9; }
.line-card .media__img { transition: transform .6s var(--ease), opacity .35s; }
.line-card:hover .media__img.ok { transform: scale(1.05); }
.line-card--text { background: var(--mist); }
.line-card--text .line-card__word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(54px, 9vw, 120px); line-height: .85; text-transform: uppercase; text-align: center; padding: 10px; }
.line-card--text .line-card__word span { color: var(--c-violet); }

/* Khối thương hiệu nền gradient */
.story { position: relative; margin-top: 56px; background: var(--grad-brand); color: #fff; overflow: hidden; }
.story__in { position: relative; display: grid; gap: 28px; padding-top: 52px; padding-bottom: 52px; }
.story__logo { width: 140px; height: auto; }
.story h2 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 7vw, 84px); line-height: .9; margin: 0 0 14px; }
.story p { max-width: 58ch; opacity: .94; }
.story__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 26px; max-width: 560px; }
.story__stats div { border-top: 1px solid rgba(255, 255, 255, .45); padding-top: 10px; }
.story__stats b { display: block; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: clamp(34px, 5vw, 52px); line-height: 1; }
.story__stats span { font-size: 13px; opacity: .9; }
.story__bg { position: absolute; right: -6%; bottom: -18%; width: min(62vw, 620px); opacity: .1; pointer-events: none; }
@media (min-width: 900px) { .story__in { grid-template-columns: 180px 1fr; gap: 48px; align-items: start; padding-top: 72px; padding-bottom: 72px; } .story__logo { width: 180px; } }

/* Tab theo hãng */
.tabs-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; margin: 0 calc(-1 * var(--gut)) 22px; padding: 2px var(--gut) 4px; }
.tabs-row::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .tabs-row { justify-content: center; } }

/* FAQ */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-weight: 600; font-size: 16px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--mist); transition: background-color .2s, transform .25s var(--ease); }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), background-color .2s; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { background: var(--ink); color: #fff; transform: rotate(180deg); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq details[open] summary i::after { transform: rotate(0); }
.faq summary:hover { color: var(--c-violet); }
.faq__a { padding: 0 44px 18px 0; color: var(--ink-2); font-size: 15px; }

/* Theo dõi S&LIFE */
.follow { margin-top: 64px; background: var(--ink); color: #fff; border-radius: 0; overflow: hidden; }
.follow__in { position: relative; display: grid; gap: 24px; padding-top: 48px; padding-bottom: 48px; align-items: center; }
.follow h2 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 5.5vw, 64px); line-height: .92; margin: 0 0 10px; }
.follow p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 48ch; }
.follow__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.follow__links a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: background-color .2s, border-color .2s; }
.follow__links a:hover { background: #fff; color: var(--ink); border-color: #fff; }
.follow__links svg { width: 22px; height: 22px; flex: none; }
.follow__links b { display: block; font-size: 14.5px; }
.follow__links small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.follow__links .zl { font-weight: 800; font-size: 11px; width: 22px; text-align: center; }
@media (min-width: 900px) { .follow__in { grid-template-columns: 1fr 1.1fr; gap: 56px; padding-top: 64px; padding-bottom: 64px; } .follow__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.follow + .ft { margin-top: 0; }

/* Ảnh khách */
.moments { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .moments { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
.polaroid { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--mist); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s var(--ease); }
.polaroid:hover img { transform: scale(1.04); }

/* Các bước đặt hàng (trang phụ còn dùng) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: s; }
.step { border-radius: var(--r); background: var(--mist); padding: 18px; }
.step::before { counter-increment: s; content: counter(s); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; margin-bottom: 10px; }
.step b { display: block; margin-bottom: 2px; }
.step span { font-size: 13.5px; color: var(--muted); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- Trang sản phẩm ---------- */
.pd-top { padding: 12px 0 14px; }
.pd { display: grid; grid-template-columns: 1fr; gap: 22px; padding-bottom: 12px; align-items: start; }
@media (min-width: 960px) { .pd { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; } }
.gallery { position: relative; display: grid; gap: 12px; min-width: 0; }
@media (min-width: 960px) { .gallery { position: sticky; top: calc(var(--hd-h) + 16px); } }
.gallery__main { position: relative; aspect-ratio: 1 / 1; border-radius: var(--r-l); overflow: hidden; background: var(--mist); cursor: zoom-in; touch-action: pan-y; }
.gallery__main .media { background: #fff; }
.gallery__main.is-empty { cursor: default; background: var(--mist); }
.gallery__main.is-empty .media { background: var(--mist); }
.gallery__main.is-zoom .media__img { transition: transform .05s linear, opacity .35s; transform: scale(2.1); }
.gallery__ph-cta { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); z-index: 3; }
.gallery__hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(22, 18, 43, .7); color: #fff; font-size: 12.5px; pointer-events: none; transition: opacity .2s; }
.gallery__hint svg { width: 14px; height: 14px; }
.gallery__main.is-zoom .gallery__hint { opacity: 0; }
.gallery__count { position: absolute; right: 14px; top: 14px; z-index: 3; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.gallery__nav { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: var(--shadow-1); display: flex; align-items: center; justify-content: center; transition: transform .2s; }
.gallery__nav:hover { transform: scale(1.06); }
.gallery__nav svg { width: 20px; height: 20px; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav--next svg { transform: scaleX(-1); }
.thumbs { position: relative; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.thumbs::-webkit-scrollbar { display: none; }
.thumbs:empty { display: none; }
.thumbs button { flex: none; width: 76px; height: 76px; padding: 0; border: 2px solid transparent; border-radius: var(--r-s); background: var(--mist); overflow: hidden; scroll-snap-align: start; transition: border-color .2s, opacity .2s; opacity: .75; }
.thumbs button:hover { opacity: 1; }
.thumbs button.is-active { border-color: var(--c-violet); opacity: 1; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
@media (max-width: 959px) { .gallery__main { border-radius: var(--r); } .thumbs button { width: 60px; height: 60px; } .gallery__hint { display: none; } }

.pd__info { min-width: 0; }
.pd__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; color: var(--muted); margin-bottom: 8px; }
.pd__brand a { color: var(--c-violet); font-weight: 600; }
.pd__code { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--mist); border-radius: 999px; height: 28px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.pd__code:hover { background: #EEE8F8; }
.pd__code svg { width: 14px; height: 14px; }
.pd h1 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 4vw, 46px); line-height: .98; letter-spacing: .005em; margin: 0 0 12px; }
.pd__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.pd__price { font-size: 28px; font-weight: 700; margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.pd__price small { font-size: 13px; font-weight: 500; color: var(--muted); }
.fit { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin: 0 0 18px; font-size: 14px; background: var(--mist); padding: 12px 14px; border-radius: var(--r); color: var(--ink-2); }
.fit svg { width: 22px; height: 22px; color: var(--c-violet); }
.fit b { color: var(--ink); }
.pd__note { margin: 0 0 18px; font-size: 14px; background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 12px 14px; border-radius: var(--r); }
.pd__sizehead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.pd__sizehead b { font-weight: 700; }
.pd__guide { color: var(--c-violet); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; border: 0; background: none; padding: 0; display: inline-flex; align-items: center; gap: 6px; }
.pd__guide svg { width: 18px; height: 18px; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.sizes button { position: relative; height: 48px; padding: 0 6px; border: 1.5px solid var(--line); border-radius: var(--r-s); background: #fff; font-size: 15px; font-weight: 600; line-height: 1.1; transition: border-color .15s, background-color .15s, color .15s, transform .1s; }
.sizes button small { display: block; font-size: 10.5px; font-weight: 600; color: var(--c-berry); margin-top: 2px; }
.sizes button:hover { border-color: var(--ink); }
.sizes button:active { transform: scale(.97); }
.sizes button.is-active { border-color: var(--c-violet); background: var(--c-violet); color: #fff; }
.sizes button.is-active small { color: rgba(255, 255, 255, .9); }
.sizes button.is-off { color: #B4B0C0; background: var(--mist); border-color: transparent; font-weight: 500; }
.sizes button.is-off::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1.5px; background: #C9C5D4; transform: rotate(-18deg); }
.sizes button.is-off:hover { border-color: var(--muted-2); }
.sizes.is-shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.pd__hint { font-size: 13.5px; color: var(--muted); margin: 10px 0 0; min-height: 1.4em; }
.pd__hint.is-warn { color: var(--c-berry); font-weight: 600; }
.pd__buy { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 20px; }
.qty { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--line); border-radius: var(--r-s); }
.qty button { width: 44px; height: 100%; border: 0; background: none; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.qty button:hover { color: var(--c-violet); }
.qty button[disabled] { opacity: .3; }
.qty input { width: 40px; height: 100%; border: 0; text-align: center; font-weight: 700; font-size: 16px; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pd__buy .btn { min-height: 52px; font-size: 16px; }
.pd__buy2 { display: grid; grid-template-columns: 1fr 1fr 52px; gap: 10px; margin-top: 10px; }
.pd__buy2 .btn { min-height: 50px; }
.pd__buy2 .wish { position: static; width: 52px; height: 50px; border-radius: var(--r-s); border: 1.5px solid var(--line); box-shadow: none; background: #fff; }
.pd__buy2 .wish:hover { border-color: var(--ink); transform: none; }
@media (max-width: 420px) { .pd__buy2 { grid-template-columns: 1fr 52px; } .pd__buy2 .btn--ghost { grid-column: 1 / -1; order: 3; } }
.pd__call { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }
.pd__call a { font-weight: 700; color: var(--ink); }
.acc { margin-top: 24px; border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 16px 0; font-weight: 600; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary > svg:first-child { width: 22px; height: 22px; color: var(--c-violet); flex: none; }
.acc summary .chev { margin-left: auto; width: 18px; height: 18px; transition: transform .2s; }
.acc details[open] .chev { transform: rotate(180deg); }
.acc summary:hover { color: var(--c-violet); }
.acc__body { padding: 0 0 16px 34px; font-size: 14.5px; color: var(--ink-2); }
.acc__body ul { margin: 0; padding-left: 18px; }
.acc__body li { margin-bottom: 6px; }
.share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.share span { margin-right: 4px; }
.share a, .share button { height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; transition: border-color .2s; }
.share a:hover, .share button:hover { border-color: var(--ink); }
.share svg { width: 17px; height: 17px; }

.pd-sec { padding: 40px 0 0; }
.pd-desc { display: grid; gap: 28px; }
@media (min-width: 960px) { .pd-desc { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; } }
.pd-desc h2 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; margin-bottom: 14px; }
.pd-desc__text { color: var(--ink-2); font-size: 15px; max-width: 70ch; }
.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14.5px; background: none; }
.spec th { width: 40%; font-weight: 500; color: var(--muted); }
.about-shop { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start; margin-top: 28px; padding: 20px; border-radius: var(--r-l); border: 1px solid var(--line); }
.about-shop img { width: 64px; height: 64px; border-radius: 16px; }
.about-shop b { display: block; margin-bottom: 4px; }
.about-shop p { font-size: 14px; color: var(--ink-2); margin: 0 0 10px; }
.about-shop__links { display: flex; flex-wrap: wrap; gap: 8px; }
.about-shop__links a { width: 36px; height: 36px; border-radius: 999px; background: var(--mist); display: inline-flex; align-items: center; justify-content: center; }
.about-shop__links a:hover { background: var(--ink); color: #fff; }
.about-shop__links svg { width: 18px; height: 18px; }

/* Thanh mua dính đáy (điện thoại) */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(22, 18, 43, .08); transform: translateY(110%); transition: transform .3s var(--ease); }
.buybar.is-show { transform: none; }
.buybar__info { min-width: 0; flex: 1; }
.buybar__info b { display: block; font-size: 16px; line-height: 1.2; }
.buybar__info small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buybar .btn { min-height: 48px; padding: 0 18px; }
body.has-buybar { --float-bottom: 92px; }
@media (min-width: 960px) { .buybar { display: none; } body.has-buybar { --float-bottom: 18px; } }

/* Hộp thoại xem ảnh toàn màn hình */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(12, 9, 26, .96); display: flex; flex-direction: column; color: #fff; }
.lightbox__top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 20px; font-size: 14px; }
.lightbox__stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.lightbox__stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 6px; user-select: none; }
.lightbox .icon-btn { color: #fff; }
.lightbox .icon-btn:hover { background: rgba(255, 255, 255, .12); }
.lightbox .gallery__nav { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.lightbox__thumbs { display: flex; gap: 8px; justify-content: center; padding: 12px; overflow-x: auto; }
.lightbox__thumbs button { flex: none; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #fff; opacity: .6; }
.lightbox__thumbs button.is-active { border-color: #fff; opacity: 1; }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hộp thoại chung ---------- */
.toast { position: fixed; left: 50%; bottom: calc(var(--float-bottom) + 6px); z-index: 95; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s var(--ease); max-width: calc(100vw - 32px); box-shadow: var(--shadow-2); }
.toast.is-show { opacity: 1; transform: translate(-50%, 0); }
.modal { position: fixed; inset: 0; z-index: 85; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(22, 18, 43, .55); animation: fade .2s; }
.modal__box { position: relative; background: #fff; border-radius: var(--r-l); max-width: 520px; width: 100%; padding: 24px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-2); animation: rise .28s var(--ease); }
.modal__box--wide { max-width: 720px; }
.modal__box h3 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1; margin-bottom: 12px; padding-right: 36px; }
.modal__x { position: absolute; top: 10px; right: 10px; }
.modal__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
@media (max-width: 560px) { .modal { align-items: flex-end; padding: 0; } .modal__box { border-radius: var(--r-l) var(--r-l) 0 0; max-height: 92vh; animation: slideup .3s var(--ease); padding-bottom: calc(20px + env(safe-area-inset-bottom)); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes slideup { from { transform: translateY(100%); } }
.order-msg { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--mist); padding: 12px; max-height: 240px; overflow: auto; margin-top: 10px; border-radius: var(--r-s); }
.quick { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-bottom: 16px; }
.quick__img { position: relative; width: 96px; height: 96px; border-radius: var(--r); overflow: hidden; }
.quick b { display: block; font-size: 15px; line-height: 1.35; }
.quick span { font-size: 13px; color: var(--muted); }
.size-table { font-size: 14px; }
.size-table td, .size-table th { padding: 8px 10px; }

/* Giỏ trượt từ phải */
.mini__list { flex: 1; overflow-y: auto; padding: 4px 20px; }
.mini__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.mini__img { position: relative; width: 72px; height: 72px; border-radius: var(--r-s); overflow: hidden; }
.mini__name { font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini__meta { font-size: 12.5px; color: var(--muted); }
.mini__price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.mini__new { background: linear-gradient(90deg, rgba(119, 28, 174, .08), rgba(119, 28, 174, 0)); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
.mini__ok { display: flex; align-items: center; gap: 8px; margin: 12px 20px 0; padding: 10px 14px; border-radius: var(--r); background: var(--ok-bg); color: var(--ok); font-weight: 600; font-size: 14px; }
.mini__ok svg { width: 20px; height: 20px; }
.mini__foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: grid; gap: 10px; }
.mini__sum { display: flex; justify-content: space-between; font-size: 15px; }
.mini__sum b { font-size: 18px; }
.mini__foot .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini__empty { padding: 40px 20px; text-align: center; color: var(--ink-2); }

/* ---------- Nút chat nổi (một nút, bấm mới mở kênh) ---------- */
.chat { position: fixed; right: 16px; bottom: var(--float-bottom); z-index: 50; transition: bottom .3s var(--ease); }
.chat__btn { width: 56px; height: 56px; border: 0; border-radius: 999px; background: var(--grad-brand); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(119, 28, 174, .38); transition: transform .2s var(--ease); }
.chat__btn:hover { transform: scale(1.06); }
.chat__btn svg { width: 26px; height: 26px; }
.chat__btn .i-x { display: none; }
.chat.is-open .chat__btn .i-chat { display: none; }
.chat.is-open .chat__btn .i-x { display: block; }
.chat__panel { position: absolute; right: 0; bottom: 68px; width: min(300px, calc(100vw - 32px)); background: #fff; border-radius: var(--r-l); box-shadow: var(--shadow-2); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: bottom right; transition: opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.chat.is-open .chat__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.chat__head { padding: 16px 18px; background: var(--grad-brand); color: #fff; }
.chat__head b { display: block; font-size: 16px; }
.chat__head small { font-size: 12.5px; opacity: .9; }
.chat__panel a { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14.5px; }
.chat__panel a:last-child { border-bottom: 0; }
.chat__panel a:hover { background: var(--mist); }
.chat__panel a small { display: block; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.chat__ic { width: 38px; height: 38px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; font-size: 11px; font-weight: 800; }
.chat__ic svg { width: 20px; height: 20px; }
.chat__ic--zalo { background: #0068FF; }
.chat__ic--ms { background: linear-gradient(135deg, #0A7CFF, #A033FF); }
.chat__ic--tel { background: var(--ok); }

/* ---------- Trang nội dung ---------- */
.prose { max-width: 820px; margin: 0 auto; padding-bottom: 50px; }
.prose h2 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 28px; line-height: 1.05; margin-top: 36px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.prose a:not(.btn) { color: var(--c-violet); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); margin: 12px 0 20px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--mist); font-weight: 600; font-size: 13px; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
.callout { border-left: 4px solid var(--c-violet); background: var(--mist); padding: 14px 16px; margin: 16px 0; font-size: 14.5px; border-radius: 0 var(--r) var(--r) 0; }
.info-list { list-style: none; padding: 0; margin: 0 0 1em; }
.info-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.info-list b { display: inline-block; min-width: 150px; }

/* ---------- Giỏ hàng ---------- */
.cart { display: grid; grid-template-columns: 1fr 360px; gap: 32px; padding: 4px 0 20px; align-items: start; }
.cart-item { position: relative; display: grid; grid-template-columns: 96px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-item__x { border: 0; background: none; color: var(--muted); padding: 6px; display: flex; border-radius: 999px; }
.cart-item__x:hover { color: var(--c-berry); background: var(--mist); }
.cart-item__x svg { width: 18px; height: 18px; }
.cart-item__img { position: relative; width: 96px; height: 96px; border-radius: var(--r); overflow: hidden; }
.cart-item__name { font-size: 15px; font-weight: 500; }
.cart-item__name:hover { color: var(--c-violet); }
.cart-item__meta { font-size: 13px; color: var(--muted); margin: 2px 0 8px; }
.cart-item__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.cart-item__price { font-weight: 700; }
.cart-item .qty { height: 38px; }
.cart-item .qty button { width: 34px; font-size: 17px; }
.cart-item .qty input { width: 32px; font-size: 14px; }
.cart-item select { height: 38px; padding: 0 30px 0 12px; }
.summary { border: 1px solid var(--line); border-radius: var(--r-l); padding: 22px; position: sticky; top: calc(var(--hd-h) + 16px); }
.summary h2 { font-size: 18px; font-weight: 600; }
.summary__row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14.5px; }
.summary__total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; }
.field input, .field textarea, .field select { height: 48px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: var(--r-s); outline: none; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field textarea { height: 88px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-violet); box-shadow: 0 0 0 4px rgba(119, 28, 174, .1); }
.field .hint { font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) { .cart { grid-template-columns: 1fr; } .summary { position: static; } }
@media (max-width: 480px) { .cart-item { grid-template-columns: 76px 1fr auto; } .cart-item__img { width: 76px; height: 76px; } }

/* ---------- Đặt hàng ---------- */
.co { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; padding: 18px 0 30px; align-items: start; }
.co__steps { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.co__steps span.is-current { color: var(--c-violet); font-weight: 700; }
.co h2 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; margin: 4px 0 16px; }
.co form, .co__pay { display: grid; gap: 14px; }
.co__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co__summary { background: var(--mist); border-radius: var(--r-l); padding: 20px; position: sticky; top: calc(var(--hd-h) + 16px); }
.co-item { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.co-item__img { position: relative; width: 60px; height: 60px; border-radius: var(--r-s); overflow: hidden; background: #fff; }
.pay-opt { border: 1.5px solid var(--line); border-radius: var(--r); background: #fff; transition: border-color .2s; }
.pay-opt:has(input:checked) { border-color: var(--c-violet); }
.pay-opt label { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; font-size: 15px; }
.pay-opt input { width: 18px; height: 18px; accent-color: var(--c-violet); }
.pay-opt__body { display: none; padding: 0 16px 16px 46px; font-size: 14px; color: var(--ink-2); }
.pay-opt:has(input:checked) .pay-opt__body { display: block; }
.co__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.co__nav a, .co__nav .link { color: var(--c-violet); border: 0; background: none; font-size: 14.5px; padding: 0; font-weight: 600; }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); }
.agree input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--c-violet); }
.agree a { text-decoration: underline; }
.done__head { display: flex; gap: 12px; align-items: flex-start; color: var(--ok); }
.done__head svg { width: 36px; height: 36px; flex: none; }
.done__head h2 { color: var(--ink); margin: 2px 0 4px; }
.done__grid { display: grid; grid-template-columns: 1fr 260px; gap: 24px; margin-top: 16px; align-items: start; }
.done__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.done__qr img { width: 220px; height: auto; background: var(--mist); }
@media (max-width: 900px) { .co { grid-template-columns: 1fr; } .co__summary { position: static; order: -1; } .done__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .co__two { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.ft { position: relative; background: var(--ink); color: rgba(255, 255, 255, .78); margin-top: 64px; padding: 0 0 24px; font-size: 14px; }
.ft__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 32px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ft__trust div { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.ft__trust svg { width: 40px; height: 40px; padding: 9px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #fff; }
.ft__trust b { display: block; color: #fff; font-size: 14.5px; }
.ft__trust span { font-size: 12.5px; }
@media (min-width: 900px) { .ft__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ft__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr; gap: 32px; padding-top: 40px; }
.ft h4 { color: #fff; font-family: var(--font-display); font-stretch: 75%; font-size: 20px; font-weight: 800; text-transform: uppercase; margin-bottom: 14px; }
.ft ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ft a:hover { color: #fff; }
.ft__logo { width: 150px; height: auto; }
.ft__info { margin-top: 18px !important; }
.ft__info a { color: #fff; }
.ft__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ft__social a { width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; transition: background-color .2s; }
.ft__social a:hover { background: #fff; color: var(--ink); }
.ft__social svg { width: 19px; height: 19px; }
.ft__pay { display: flex; flex-wrap: wrap; gap: 8px; }
.ft__pay span { border: 1px solid rgba(255, 255, 255, .25); color: #fff; border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.ft__note { margin: 12px 0 0; font-size: 13px; }
.ft__bct { display: inline-block; margin-top: 12px; padding: 6px 10px; background: #fff; color: var(--c-cobalt); border-radius: 6px; font-weight: 700; font-size: 12.5px; }
.ft__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 32px; padding-top: 18px; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.ft__bottom button { border: 0; background: none; color: rgba(255, 255, 255, .8); font-size: 12.5px; padding: 0; text-decoration: underline; }
@media (max-width: 900px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ft__grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Trang quản lý ảnh ---------- */
.img-table td { vertical-align: middle; }
.img-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--mist); padding: 2px 6px; border-radius: 4px; }
.img-table .thumb { position: relative; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; }
.status-ok { color: var(--ok); font-weight: 600; }
.status-miss { color: var(--c-berry); font-weight: 600; }
.drop { display: block; min-width: 130px; padding: 10px; border: 1.5px dashed var(--muted-2); border-radius: var(--r-s); text-align: center; font-size: 13px; color: var(--ink-2); cursor: pointer; line-height: 1.35; }
.drop small { color: var(--muted); }
.drop:hover, .drop.is-over { border-color: var(--c-violet); background: var(--order-bg); color: var(--c-violet); }

/* Hiện dần khi tải */
.reveal { animation: reveal .5s var(--ease) both; }
@keyframes reveal { from { opacity: 0; transform: translateY(10px); } }
.hero__slide .grad-text { -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Tinh chỉnh sau kiểm tra ---------- */
/* Chữ gradient: chừa chỗ cho dấu tiếng Việt (Ấ, Ệ, Ở…) để không bị cắt */
.sec__title, .grad-text, .line-card__word span { padding-top: .14em; padding-bottom: .06em; }
.sec__title { margin-top: -.14em; }
/* Băng sản phẩm: máy tính không tràn ra mép */
@media (min-width: 1180px) { .rail { margin: 0; padding: 0 0 6px; scroll-padding: 0; } }
/* Trang chủ: khối Theo dõi nối liền footer */
body[data-page="home"] .ft { margin-top: 0; }
/* Ô dòng giày dạng chữ: cỡ chữ theo độ rộng ô */
.line-card { container-type: inline-size; }
.line-card--text .line-card__word { font-size: 30cqi; padding-bottom: 22%; }
.line-card--text .line-card__word.is-long { font-size: 19cqi; }
.line-card__txt b { font-size: clamp(20px, 11cqi, 34px); }
.line-card:first-child .line-card__txt b { font-size: clamp(26px, 9cqi, 56px); }
@media (max-width: 899px) {
  .line-card:first-child { grid-column: span 2; aspect-ratio: 16 / 11; }
  .brand-tile { grid-template-columns: 36px 1fr; gap: 10px; padding: 10px 12px; }
  .brand-tile__mono { width: 36px; height: 36px; font-size: 15px; }
  .brand-tile > svg { display: none; }
  .brand-tile b { font-size: 14px; }
  /* Hero điện thoại: ảnh nhỏ gọn, chữ lên sớm */
  .hero__in { gap: 18px; padding-top: 24px; padding-bottom: 76px; }
  .hero__shoe { width: min(58%, 240px); border-radius: 20px; transform: rotate(-3deg); }
  .hero__tag { display: none; }
  .hero__stack { width: min(92%, 320px); height: 210px; }
  .hero__title { font-size: clamp(54px, 17vw, 96px); margin-bottom: 12px; }
  .hero__lead { margin-bottom: 18px; font-size: 15px; }
  .hero__cta .btn { min-height: 46px; padding: 0 18px; }
  .hero__word { font-size: 46vw; }
}
.gallery__hint { white-space: nowrap; }
.tool-btn { white-space: nowrap; flex: none; }
.toolbar .count-line { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; flex: 1; }
.toolbar .select { flex: none; }
.pd__sizehead { flex-wrap: wrap; }
.pd__guide { white-space: nowrap; }
@media (max-width: 480px) { .toolbar { gap: 8px; } .toolbar .select { padding-left: 12px; padding-right: 30px; background-position: right 12px center; } }
.bar__tools { flex-wrap: wrap; min-width: 0; }
.bar__tools input.select { min-width: 0; width: 170px; max-width: 100%; }

/* =========================================================
   Mốc 2 (01/10): Messenger, ít chuyển động, font Bricolage
   ========================================================= */
/* Tiêu đề hẹp: chừa khoảng cho dấu chồng tiếng Việt (Ổ, Ễ, Ồ) */
.hero__title, .sec__title, .coll__title, .pd h1, .page-head h1, .page-title, .story h2, .follow h2, .consult h2, .empty h2, .empty h3, .modal__box h3, .prose h2, .co h2, .pd-desc h2, .about h2, .perk b, .mega__col h4, .ft h4, .drawer__head b, .filters__head b, .line-card__txt b, .line-card--text .line-card__word { line-height: 1.06; }
.hero__title { line-height: 1.02; }
.line-card--text .line-card__word { line-height: .98; }
.page-title { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 5vw, 52px); margin: 6px 0 12px; }

/* Tiêu đề khu vực: chữ mực, gradient chỉ là vạch nhấn nhỏ */
.sec__title { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); padding: 0; margin: 0; }
/* Dấu nhấn dưới tiêu đề: ba vạch màu của logo, tách rời (không phủ gradient) */
.sec__title::after { content: ""; display: block; width: 42px; height: 4px; margin: 14px auto 0; background: linear-gradient(90deg, var(--c-cobalt) 0 30%, transparent 30% 35%, var(--c-violet) 35% 65%, transparent 65% 70%, var(--c-red) 70%); }
.sec__head--row .sec__title::after { margin-left: 0; }
.coll__title .grad-text { background: none; color: var(--c-violet); padding: 0; }

/* Thanh chữ đầu trang: đứng yên */
.announce { font-size: 13.5px; }
.announce__in { gap: 14px; padding: 8px var(--gut); min-height: 36px; text-align: center; flex-wrap: nowrap; }
.announce__in i { font-style: normal; opacity: .6; }
.announce__in span { white-space: nowrap; }
@media (max-width: 899px) { .announce__more, .announce__in i { display: none; } .announce__in span { white-space: normal; } }

/* Nút Messenger */
.btn--fb { background: #0866FF; border-color: #0866FF; color: #fff; }
.btn--fb:hover { background: #0556D6; border-color: #0556D6; }
.btn--fb svg, .btn--grad svg, .btn--ghost svg { width: 20px; height: 20px; flex: none; }
.btn--light.btn--fb, .hero .btn--fb.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--grad.btn--fb { background: #0866FF; border: 0; }
.btn--ghost.btn--fb { background: #fff; color: var(--ink); border-color: var(--ink); }
.hd__fb { color: #0866FF; }
.hd__fb svg { width: 24px !important; height: 24px !important; }

/* Ít chuyển động: bỏ phóng ảnh khi rê chuột, bỏ nhún số giỏ */
@media (hover: hover) and (pointer: fine) { .card:hover .media__img.ok { transform: none; } .line-card:hover .media__img.ok { transform: none; } }
.badge.is-pop { animation: none; }
.brand-tile:hover { transform: none; }
.hero__track { transition: transform .45s var(--ease); }
.chat { display: none !important; }

/* Cam kết: biểu tượng viền, không phủ gradient */
.perk__ic { background: #fff; color: var(--c-violet); border: 1.5px solid var(--line); box-shadow: none; }

/* Theo nhu cầu (trang chủ) */
.needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .needs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.needs .need { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: var(--r); transition: border-color .2s; }
.needs .need b { font-size: 16px; }
.needs .need span { font-size: 13.5px; color: var(--muted); }
.needs .need:hover { border-color: var(--c-violet); }
.needs .need:hover b { color: var(--c-violet); }

/* Khối tư vấn size */
.consult { display: grid; gap: 24px; padding: 28px; border-radius: var(--r-l); background: var(--mist); }
.consult h2 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 5vw, 52px); margin: 0 0 10px; }
.consult p { color: var(--ink-2); max-width: 60ch; }
.consult__steps { list-style: none; counter-reset: c; margin: 18px 0 22px; padding: 0; display: grid; gap: 12px; }
.consult__steps li { counter-increment: c; display: grid; grid-template-columns: 34px 1fr; column-gap: 12px; font-size: 15px; color: var(--ink-2); }
.consult__steps li::before { content: counter(c); grid-row: span 2; width: 34px; height: 34px; border-radius: 999px; background: #fff; border: 1.5px solid var(--line); color: var(--c-violet); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.consult__steps b { color: var(--ink); }
.consult__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.consult__notes { background: #fff; border-radius: var(--r); padding: 20px; }
.consult__notes h3 { font-size: 16px; margin: 0 0 10px; }
.consult__notes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.consult__notes li { display: grid; gap: 2px; font-size: 14.5px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.consult__notes li:last-child { border-bottom: 0; padding-bottom: 0; }
.consult__notes li span { color: var(--ink-2); }
@media (min-width: 900px) { .consult { grid-template-columns: 1.1fr .9fr; gap: 40px; padding: 40px; } }

/* Theo dõi: chỉ nền mực, không gradient */
.follow h2 { margin-bottom: 12px; }
.follow__links a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }

/* Trang sản phẩm: tư vấn form và bảng size trước nút mua */
.fitbox { margin: 16px 0 0; display: grid; gap: 10px; }
.fitbox .fit { margin: 0; }
.chart { border: 1.5px solid var(--line); border-radius: var(--r); }
.chart > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-weight: 600; font-size: 15px; cursor: pointer; }
.chart > summary::-webkit-details-marker { display: none; }
.chart > summary > svg:first-child { width: 20px; height: 20px; color: var(--c-violet); }
.chart > summary .chev { margin-left: auto; width: 18px; height: 18px; transition: transform .2s; }
.chart[open] > summary .chev { transform: rotate(180deg); }
.chart .table-wrap { margin: 0 14px 10px; }
.chart__table table { font-size: 14px; }
.chart__table td, .chart__table th { padding: 8px 10px; text-align: center; }
.chart__table tr.is-own td { background: var(--order-bg); font-weight: 600; }
.chart__tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--c-violet); background: #fff; border-radius: 999px; padding: 1px 6px; margin-left: 4px; }
.chart__note, .chart__none { font-size: 13.5px; color: var(--muted); margin: 0 14px 14px; }
.chart__none { margin-top: 0; }
.modal .chart__note, .modal .chart__none, .modal .chart .table-wrap { margin-left: 0; margin-right: 0; }
.pd__buy { grid-template-columns: 1fr 1fr; }
.pd__buy .btn { font-size: 15.5px; }
.pd__buy2 { grid-template-columns: 1fr 52px; }
.pd__buy2 .btn { gap: 8px; }
@media (max-width: 420px) { .pd__buy { grid-template-columns: 1fr; } .pd__buy2 { grid-template-columns: 1fr 52px; } .pd__buy2 .btn--ghost { grid-column: auto; order: 0; } }
.pd__out { margin: 4px 0 16px; padding: 16px; border-radius: var(--r); background: var(--out-bg); }
.pd__out b { display: block; font-size: 16px; margin-bottom: 4px; }
.pd__out p { margin: 0; color: var(--ink-2); font-size: 15px; }
.pd__call { font-size: 14px; color: var(--muted); }
.steps-mini { margin: 12px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--ink-2); }

/* Giỏ + gửi yêu cầu */
.cart-item { grid-template-columns: 96px 1fr auto; }
.cart-item__warn { font-size: 13.5px; color: #9A4A00; background: #FFF1E0; border-radius: var(--r-s); padding: 6px 10px; margin-top: 6px; }
.co__lead { color: var(--ink-2); max-width: 62ch; margin-bottom: 20px; }
.req-form { display: grid; gap: 14px; }
.req__h { font-family: var(--font); font-stretch: 100%; text-transform: none; font-size: 18px !important; font-weight: 700; margin: 28px 0 8px !important; }
.req__msg { max-height: none; font-size: 14px; line-height: 1.55; }
.req__steps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .req__steps { grid-template-columns: 1.4fr 1fr; } }
.req__steps .btn.is-done { border-color: var(--ok); color: var(--ok); }
.req__status { margin: 12px 0 0; padding: 10px 14px; border-radius: var(--r-s); background: var(--mist); font-size: 14.5px; }
.req__status.is-ok { background: var(--ok-bg); color: var(--ok); }
.req__status.is-warn { background: #FFF1E0; color: #8A4200; }
.req__after { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.req__after p { width: 100%; margin: 0; font-size: 14.5px; }
.co__summary h2 { font-family: var(--font); font-stretch: 100%; text-transform: none; font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.req-done { grid-column: 1 / -1; max-width: 640px; padding: 28px; border-radius: var(--r-l); background: var(--mist); }
.req-done h2 { margin-top: 0; }
.req-view { max-width: 760px; margin: 20px auto 0; }
.req-view h1 { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 5vw, 44px); margin: 12px 0 8px; }
.req-view__note { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--mist); font-size: 14.5px; color: var(--ink-2); }
.req-view__note svg { width: 22px; height: 22px; color: var(--c-violet); }
.req-view__info { display: grid; grid-template-columns: 140px 1fr; gap: 8px 14px; margin: 18px 0; font-size: 15px; }
.req-view__info dt { color: var(--muted); }
.req-view__info dd { margin: 0; }

/* Footer: các bước mua */
.ft__steps { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ft__fb { margin-top: 14px; }
.ft__logo { width: 96px; }

/* Chữ lớn hơn, dễ đọc hơn */
.card__name { font-size: 15px; }
.card__sizes, .card__code { font-size: 13px; }
.muted, .count-line, .breadcrumb { color: var(--muted); }
.sec__sub { font-size: 15px; }
@media (max-width: 480px) { .card__name { font-size: 14px; } }

/* Trang phụ */
.prose { font-size: 16px; }
.prose .lead { font-size: 17.5px; color: var(--ink-2); }
.prose .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.prose .btn--fb, .prose .btn--grad { color: #fff; }
.prose .btn--ghost { color: var(--ink); }
.about-cards { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 800px) { .about-cards { grid-template-columns: 1fr 1fr; } }
.about-cards section { padding: 22px; border-radius: var(--r-l); background: var(--mist); }
.about-cards h2 { margin-top: 0; font-size: 24px; }
.about-cards ul { margin: 0; }
.contact-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px; border-radius: var(--r-l); border: 1.5px solid var(--line); margin: 8px 0 18px; }
.contact-main > div { display: grid; gap: 2px; }
.contact-main__name { font-size: 19px; }
.contact-main span { color: var(--muted); font-size: 14.5px; }
.contact-alt { font-size: 14px; color: var(--muted); margin-top: 18px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.toc a { padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 14px; font-weight: 600; color: var(--ink) !important; text-decoration: none; }
.toc a:hover { border-color: var(--c-violet); }
.prose .chart { margin-bottom: 10px; }
.prose .chart .table-wrap { margin: 0 14px 10px; }
.order-msg { overflow-wrap: anywhere; word-break: break-word; }
.pd__buy2:not(:has(.wish)) { grid-template-columns: 1fr; }
.hero__title { line-height: .94; }
.co > div, .co__summary { min-width: 0; }
/* Tương phản đạt WCAG AA */
.pill--ok { color: #11603D; }
.sizes button.is-off { color: #6E6980; }
.prose a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* Dòng giày nổi bật — ô chưa có ảnh thật: một tên dòng duy nhất (tên hãng nhỏ ở trên) */
.line-card__plain { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 10%; text-align: center; }
.line-card__plain small { font-size: clamp(11px, 6cqi, 14px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.line-card__plain b { max-width: 100%; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; line-height: 1.02; font-size: 24cqi; color: var(--c-violet); overflow-wrap: break-word; }
.line-card__plain b.is-mid { font-size: 17cqi; }
.line-card__plain b.is-long { font-size: 13cqi; }
.line-card:first-child .line-card__plain b { font-size: 15cqi; }
.line-card__plain em { font-style: normal; font-size: clamp(12px, 6cqi, 14px); color: var(--muted); }
/* Tiêu đề lớn: không bao giờ tràn mép, kể cả khi đang dùng font dự phòng */
.hero__title span, .coll__title, .pd h1, .page-title, .sec__title { max-width: 100%; overflow-wrap: break-word; }

/* Mốc 3 (01/10): bảng size nhiều bảng (Nam / Nữ / Trẻ em), nút Facebook trên trang sản phẩm */
.chart__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px 10px; }
.chart__tabs button { min-height: 36px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.chart__tabs button:hover { border-color: var(--ink); color: var(--ink); }
.chart__tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.modal .chart__tabs { margin-left: 0; margin-right: 0; }
.chart__table td:first-child { white-space: nowrap; }
.pd__fbnote { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.fb-steps li { margin-bottom: 10px; } .fb-steps .btn { margin: 6px 0 4px; }

/* =========================================================
   Mốc 4 (01/10): hệ màu có chủ đích — gradient chỉ còn ở logo và "ánh đèn" banner đầu
   Mực #15112B: nút chính, chữ · Tím #771CAE: thứ đang chọn · Cobalt #004AAD: link, rê chuột
   Đỏ #DB3137: chỉ để gây chú ý (số giỏ, "còn 1 size") · Nền trắng / #F4F2FA
   ========================================================= */
/* Banner đầu: sân khấu nền mực, ba vệt đèn màu logo chiếu sau đôi giày */
.hero__slide--grad, .hero__slide--ink, .story {
  background:
    radial-gradient(38% 52% at 74% 30%, rgba(0, 74, 173, .95), rgba(0, 74, 173, 0) 72%),
    radial-gradient(34% 48% at 86% 64%, rgba(119, 28, 174, .9), rgba(119, 28, 174, 0) 72%),
    radial-gradient(30% 42% at 66% 88%, rgba(219, 49, 55, .8), rgba(219, 49, 55, 0) 72%),
    var(--ink);
}
.hero__slide--ink { background:
    radial-gradient(40% 60% at 82% 40%, rgba(119, 28, 174, .55), rgba(119, 28, 174, 0) 72%),
    radial-gradient(30% 40% at 70% 85%, rgba(219, 49, 55, .35), rgba(219, 49, 55, 0) 72%),
    var(--ink); }
.hero__shoe { transform: none; border-radius: 24px; box-shadow: 0 0 0 10px rgba(255, 255, 255, .06), 0 40px 80px rgba(5, 2, 20, .55); }
.hero__tag { background: rgba(21, 17, 43, .92); }
.hero__kicker { color: rgba(255, 255, 255, .78); }
.hero .btn--light:hover { background: var(--c-cobalt); border-color: var(--c-cobalt); color: #fff; }
@media (max-width: 899px) {
  .hero__slide--grad, .story {
    background:
      radial-gradient(70% 34% at 30% 16%, rgba(0, 74, 173, .95), rgba(0, 74, 173, 0) 75%),
      radial-gradient(60% 30% at 74% 26%, rgba(119, 28, 174, .9), rgba(119, 28, 174, 0) 75%),
      radial-gradient(60% 24% at 52% 40%, rgba(219, 49, 55, .6), rgba(219, 49, 55, 0) 75%),
      var(--ink);
  }
  .hero__shoe { transform: none; box-shadow: 0 0 0 8px rgba(255, 255, 255, .06), 0 24px 50px rgba(5, 2, 20, .5); }
}

/* Cam kết: mỗi cam kết một màu của logo */
.perk__ic { background: var(--mist); border: 0; }
.perk:nth-child(1) .perk__ic { color: var(--c-cobalt); }
.perk:nth-child(2) .perk__ic { color: var(--c-violet); }
.perk:nth-child(3) .perk__ic { color: var(--c-berry); }
.perk:nth-child(4) .perk__ic { color: var(--c-red); }

/* Theo thương hiệu: tường logo (logo hãng tô một màu bằng mask, rê chuột đổi sang tím) */
.brands { gap: 12px; }
.brand-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center;
  min-height: 150px; padding: 22px 14px 16px; border-radius: var(--r-l); background: #fff; border: 1.5px solid var(--line); color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.brand-tile::before { content: none; }
.brand-tile__logo { display: block; width: 100%; max-width: 128px; height: 58px; background: var(--ink);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: background-color .2s; }
.brand-tile__word { display: flex; align-items: center; justify-content: center; height: 58px; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 40px; letter-spacing: .04em; line-height: 1; }
.brand-tile__meta b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.brand-tile__meta small { display: block; font-size: 13px; color: var(--muted); }
.brand-tile:hover, .brand-tile:focus-visible { color: var(--ink); border-color: var(--ink); box-shadow: 0 10px 28px rgba(21, 17, 43, .08); }
.brand-tile:hover .brand-tile__logo, .brand-tile:focus-visible .brand-tile__logo { background: var(--c-violet); }
.brand-tile:hover small { color: var(--muted); }
.brand-tile--all { background: var(--ink); border-color: var(--ink); color: #fff; }
.brand-tile--all .brand-tile__word { font-size: 48px; }
.brand-tile--all small { color: rgba(255, 255, 255, .72); }
.brand-tile--all:hover, .brand-tile--all:focus-visible { color: #fff; background: var(--c-cobalt); border-color: var(--c-cobalt); }
.brand-tile--all:hover small { color: rgba(255, 255, 255, .85); }
@media (max-width: 899px) {
  .brand-tile { min-height: 124px; padding: 18px 10px 12px; gap: 10px; }
  .brand-tile__logo { height: 46px; max-width: 108px; }
  .brand-tile__word { height: 46px; font-size: 32px; }
}

/* Trang hãng: logo hãng cạnh tiêu đề, chữ mực */
.coll__brandlogo { display: block; width: 92px; height: 44px; margin-bottom: 10px; background: var(--ink); -webkit-mask: left center / contain no-repeat; mask: left center / contain no-repeat; }
.coll__title .grad-text { color: var(--ink); }

/* =========================================================
   Mốc 5 (01/10): sặc sỡ hơn — màu shop thành từng mảng màu đặc, không phủ gradient lên chữ/nút
   Cobalt #004AAD · Tím #771CAE · Đỏ mận #AD2571 · Đỏ #DB3137 — mỗi khối một màu, nền nhạt cùng tông
   ========================================================= */
:root {
  --cobalt-50: #E9F0FB; --violet-50: #F3EAFB; --berry-50: #FBEAF2; --red-50: #FDECEC;
  --violet-700: #5E1590;
}
/* Thanh chữ đầu trang: cobalt → tím → đỏ thành ba khối liền (đọc rõ, có màu shop ngay từ đầu) */
.announce { background: linear-gradient(90deg, var(--c-cobalt) 0 33.4%, var(--c-violet) 33.4% 66.7%, var(--c-red) 66.7%); color: #fff; }
@media (max-width: 899px) { .announce { background: var(--c-violet); } }

/* Nút chính: tím của shop */
.btn--grad { background: var(--c-violet); }
.btn--grad:hover { background: var(--violet-700); }
.chip.is-active { border-color: var(--c-violet); background: var(--c-violet); }
.pager button.is-current { background: var(--c-violet); }
.card__quick:hover { background: var(--c-violet); }
.nav__link::after { background: var(--c-violet); height: 3px; }
.search__go { background: var(--c-violet); }
.search__go:hover { background: var(--violet-700); }

/* Cam kết: dải nền xanh nhạt, biểu tượng nền đặc mỗi cái một màu */
.perks { position: relative; }
.perks::before { content: ""; position: absolute; z-index: -1; top: 18px; bottom: -14px; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--cobalt-50); }
.perk__ic { color: #fff !important; }
.perk:nth-child(1) .perk__ic { background: var(--c-cobalt); }
.perk:nth-child(2) .perk__ic { background: var(--c-violet); }
.perk:nth-child(3) .perk__ic { background: var(--c-berry); }
.perk:nth-child(4) .perk__ic { background: var(--c-red); }

/* Tường logo hãng: rê chuột nền tím nhạt, logo tím */
.brand-tile:hover, .brand-tile:focus-visible { border-color: var(--c-violet); background: var(--violet-50); }
.brand-tile--all { background: var(--c-cobalt); border-color: var(--c-cobalt); }
.brand-tile--all:hover, .brand-tile--all:focus-visible { background: var(--c-violet); border-color: var(--c-violet); }

/* Theo nhu cầu: mỗi ô một màu đặc */
.needs .need { border: 0; color: #fff; min-height: 96px; justify-content: flex-end; }
.needs .need span { color: rgba(255, 255, 255, .85); }
.needs .need:hover b { color: #fff; }
.needs .need:nth-child(6n+1) { background: var(--c-cobalt); }
.needs .need:nth-child(6n+2) { background: var(--c-violet); }
.needs .need:nth-child(6n+3) { background: var(--c-berry); }
.needs .need:nth-child(6n+4) { background: var(--c-red); }
.needs .need:nth-child(6n+5) { background: var(--c-indigo); }
.needs .need:nth-child(6n) { background: var(--ink); }
.needs .need:hover { filter: brightness(1.08); }

/* Dòng giày nổi bật (ô chưa có ảnh): nền nhạt theo từng màu shop */
.line-card--text:nth-child(4n+2) { background: var(--cobalt-50); }
.line-card--text:nth-child(4n+2) .line-card__word span { color: var(--c-cobalt); }
.line-card--text:nth-child(4n+3) { background: var(--violet-50); }
.line-card--text:nth-child(4n+3) .line-card__word span { color: var(--c-violet); }
.line-card--text:nth-child(4n) { background: var(--berry-50); }
.line-card--text:nth-child(4n) .line-card__word span { color: var(--c-berry); }
.line-card--text:nth-child(4n+1) { background: var(--red-50); }
.line-card--text:nth-child(4n+1) .line-card__word span { color: var(--c-red); }

/* Chưa chắc size: khối tím đặc, chữ trắng */
.consult { background: var(--c-violet); color: #fff; }
.consult h2, .consult__steps b { color: #fff; }
.consult p, .consult__steps li { color: rgba(255, 255, 255, .88); }
.consult__steps li::before { background: #fff; color: var(--c-violet); border: 0; }
.consult__notes { color: var(--ink); }
.consult .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.consult .btn--ghost:hover { background: #fff; color: var(--c-violet); border-color: #fff; }
.consult .btn--fb { background: #fff; color: #0866FF; border-color: #fff; }

/* Theo dõi S&LIFE + footer: nền mực có ánh đèn như banner đầu */
.follow {
  background:
    radial-gradient(40% 80% at 90% 0%, rgba(0, 74, 173, .7), rgba(0, 74, 173, 0) 70%),
    radial-gradient(35% 70% at 100% 100%, rgba(219, 49, 55, .5), rgba(219, 49, 55, 0) 70%),
    radial-gradient(30% 60% at 70% 60%, rgba(119, 28, 174, .55), rgba(119, 28, 174, 0) 70%),
    var(--ink);
}
/* Đủ tương phản: chữ phụ trên nền đỏ dùng trắng đặc; số mẫu ở ô nền nhạt dùng chữ mực */
.needs .need:nth-child(6n+4) span { color: #fff; }
.line-card--text .line-card__plain em, .line-card--text .line-card__plain small { color: var(--ink-2); }

/* =========================================================
   Mốc 6 (01/10): theo góp ý chủ shop
   - bỏ mọi mảng tím đặc (tím chỉ còn trong logo, ánh đèn, dải màu chảy)
   - thanh chữ chạy trên nền màu chảy; banner chùm ảnh giày thật, chuyển slide mở vòng tròn
   - nền trắng có ba đốm màu shop trôi theo khi cuộn, khối nội dung hiện dần; thẻ nổi nhẹ khi rê chuột
   Máy bật "giảm chuyển động": tắt hết chuyển động ở đây.
   ========================================================= */
:root { --c-violet: #004AAD; --violet-700: #003A8C; --violet-50: #E9F0FB; }

/* ---- Thanh chữ đầu trang: màu chảy + chữ chạy ---- */
.announce { position: relative; overflow: hidden; background: var(--c-cobalt); color: #fff; font-size: 13.5px; font-weight: 600; }
.announce::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  background: linear-gradient(90deg, #004AAD, #771CAE, #DB3137, #771CAE, #004AAD, #771CAE, #DB3137, #771CAE, #004AAD);
  animation: annFlow 16s linear infinite;
}
.announce .announce__in { position: relative; z-index: 1; display: block; overflow: hidden; padding: 0; min-height: 36px; max-width: none; }
.announce__track { display: flex; width: max-content; animation: annMarquee 38s linear infinite; }
.announce__set { display: flex; align-items: center; flex: none; min-height: 36px; }
.announce__set span { white-space: nowrap; padding: 0 26px; }
.announce .announce__set i { display: inline; font-style: normal; font-size: 10px; opacity: .85; }
.announce:hover .announce__track { animation-play-state: paused; }
@keyframes annFlow { to { transform: translateX(-50%); } }
@keyframes annMarquee { to { transform: translateX(-50%); } }

/* ---- Bỏ tím đặc: nút, ô chọn, tìm ---- */
.btn--grad { background: var(--ink); }
.btn--grad:hover { background: var(--c-cobalt); }
.search__go { background: var(--ink); }
.search__go:hover { background: var(--c-cobalt); }
.nav__link::after { background: linear-gradient(90deg, #004AAD, #771CAE, #DB3137); }
.sec__title::after { background: linear-gradient(90deg, #004AAD 0 30%, transparent 30% 35%, #771CAE 35% 65%, transparent 65% 70%, #DB3137 70%); }
.perk:nth-child(2) .perk__ic { background: var(--ink); }
.brand-tile:hover, .brand-tile:focus-visible { border-color: var(--c-cobalt); background: var(--cobalt-50); }
.brand-tile--all:hover, .brand-tile--all:focus-visible { background: var(--c-red); border-color: var(--c-red); }
.line-card--text:nth-child(4n+3) { background: #EEECF4; }
.line-card--text:nth-child(4n+3) .line-card__word span { color: var(--ink); }

/* Theo nhu cầu: 3 ô loại giày màu đặc + 5 ô mức giá nền nhạt chữ màu (a.need.need--… để thắng luật nth-child của mốc 5) */
@media (min-width: 900px) { .needs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.needs a.need { color: #fff; }
.needs a.need span { color: #fff; opacity: .9; }
.needs a.need:hover b { color: inherit; }
.needs a.need.need--cobalt { background: var(--c-cobalt); }
.needs a.need.need--berry { background: var(--c-berry); }
.needs a.need.need--red { background: var(--c-red); }
.needs a.need.need--red span { opacity: 1; }
.needs a.need.need--ink { background: var(--ink); }
.needs a.need[class*="need--t-"] { color: var(--ink); }
.needs a.need[class*="need--t-"] span { color: var(--ink-2); opacity: 1; }
.needs a.need.need--t-cobalt { background: var(--cobalt-50); }
.needs a.need.need--t-cobalt b { color: var(--c-cobalt); }
.needs a.need.need--t-red { background: var(--red-50); }
.needs a.need.need--t-red b { color: #B2232A; }
.needs a.need.need--t-berry { background: var(--berry-50); }
.needs a.need.need--t-berry b { color: var(--c-berry); }
.needs a.need.need--t-ink { background: #EEECF4; }
.needs a.need b { font-size: 18px; }

/* Chưa chắc size?: nền mực có ánh đèn màu shop (thay tím đặc) */
.consult {
  background:
    radial-gradient(45% 70% at 100% 0%, rgba(0, 74, 173, .75), rgba(0, 74, 173, 0) 70%),
    radial-gradient(40% 60% at 0% 100%, rgba(219, 49, 55, .55), rgba(219, 49, 55, 0) 70%),
    var(--ink);
}
.consult__steps li::before { color: var(--ink); }
.consult .btn--ghost:hover { color: var(--ink); }

/* ---- Banner: chùm ảnh giày thật ---- */
.hero__fan { position: relative; width: min(100%, 580px); aspect-ratio: 1.3 / 1; }
.hero__card { position: absolute; display: block; aspect-ratio: 1 / 1; border-radius: 22px; overflow: hidden; background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .07), 0 30px 60px rgba(5, 2, 20, .5); transition: transform .45s var(--ease), box-shadow .45s; }
.hero__card .media { background: #fff; }
.hero__card--0 { width: 56%; left: 22%; top: 6%; z-index: 5; }
.hero__card--1 { width: 36%; left: 0; top: 0; z-index: 3; transform: rotate(-9deg); }
.hero__card--2 { width: 36%; right: 0; top: 0; z-index: 3; transform: rotate(8deg); }
.hero__card--3 { width: 31%; left: 5%; bottom: 0; z-index: 4; transform: rotate(-4deg); }
.hero__card--4 { width: 31%; right: 5%; bottom: 0; z-index: 4; transform: rotate(5deg); }
.hero__card:hover, .hero__card:focus-visible { transform: translateY(-10px) rotate(0); z-index: 6; box-shadow: 0 0 0 6px rgba(255, 255, 255, .14), 0 40px 70px rgba(5, 2, 20, .6); }
.hero__card .hero__tag { left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; font-size: 12.5px; }
@media (max-width: 899px) {
  .hero__fan { width: min(94%, 380px); aspect-ratio: 1.45 / 1; }
  .hero__card--0 { width: 52%; left: 24%; top: 4%; }
  .hero__card--1 { width: 38%; top: 10%; }
  .hero__card--2 { width: 38%; top: 10%; }
  .hero__card--3, .hero__card--4 { display: none; }
  .hero__card .hero__tag { display: none; }
}

/* ---- Banner: chuyển slide mở theo vòng tròn từ chỗ bấm, chữ trồi lên ---- */
.hero__track { display: grid; transform: none !important; transition: none; }
.hero__slide { grid-area: 1 / 1; visibility: hidden; z-index: 0; }
.hero__slide.is-prev { visibility: visible; z-index: 1; }
.hero__slide.is-active { visibility: visible; z-index: 2; }
.hero__slide.is-reveal { animation: heroReveal 1s cubic-bezier(.66, 0, .2, 1) both; }
.hero__slide.is-reveal .hero__in > * { animation: heroRise .85s .22s cubic-bezier(.2, .7, .2, 1) both; }
.hero__slide.is-reveal .hero__in > :nth-child(2) { animation-delay: .34s; }
@keyframes heroReveal {
  from { clip-path: circle(0 at var(--ox, 85%) var(--oy, 50%)); }
  to { clip-path: circle(150vmax at var(--ox, 85%) var(--oy, 50%)); }
}
@keyframes heroRise { from { opacity: 0; transform: translateY(30px); } }

/* ---- Thẻ nổi nhẹ khi rê chuột ---- */
.card { transition: transform .3s var(--ease); }
.card__img { transition: box-shadow .3s var(--ease); }
.brand-tile, .needs .need { transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .2s, border-color .2s; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-6px); }
  .card:hover .card__img { box-shadow: 0 18px 36px rgba(21, 17, 43, .14); }
  .brand-tile:hover, .needs .need:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(21, 17, 43, .12); }
  .line-card:hover { transform: translateY(-5px); }
}
.line-card { transition: transform .3s var(--ease); }

/* ---- Khi cuộn: ba đốm màu shop trôi chậm sau nền trắng ---- */
body.has-aura::before, body.has-aura::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(10px); will-change: transform; }
body.has-aura::before {
  width: 62vmax; height: 62vmax; left: -22vmax; top: 6vh;
  background: radial-gradient(closest-side, rgba(0, 74, 173, .13), rgba(0, 74, 173, 0));
  transform: translate3d(calc(var(--sy, 0) * 70vw), calc(var(--sy, 0) * 30vh), 0);
}
body.has-aura::after {
  width: 56vmax; height: 56vmax; right: -20vmax; top: 40vh;
  background: radial-gradient(closest-side, rgba(219, 49, 55, .11), rgba(219, 49, 55, 0)), radial-gradient(closest-side at 30% 70%, rgba(119, 28, 174, .10), rgba(119, 28, 174, 0));
  transform: translate3d(calc(var(--sy, 0) * -60vw), calc(var(--sy, 0) * -40vh), 0);
}

/* ---- Khi cuộn: khối nội dung trồi lên lần lượt, vạch màu dưới tiêu đề kéo dài ra ---- */
.rv { opacity: 0; }
.rv.is-in { opacity: 1; animation: rvIn .8s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
.sec__head.rv.is-in .sec__title::after { animation: barDraw .9s .25s var(--ease) backwards; }
@keyframes rvIn { from { opacity: 0; transform: translateY(32px); } }
@keyframes barDraw { from { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .announce::before, .announce__track, .hero__slide.is-reveal, .hero__slide.is-reveal .hero__in > *, .rv.is-in, .sec__head.rv.is-in .sec__title::after { animation: none !important; }
  .announce__set[aria-hidden] { display: none; }
  .announce__track { width: auto; justify-content: center; }
  .rv { opacity: 1; }
}

/* =========================================================
   Mốc 7 (01/10): chủ shop chọn 4 chuyển động tự chạy (#2 ánh đèn trôi, #3 dải logo hãng chạy,
   #4 banner tự chuyển 6 giây, #5 viền màu chạy quanh nút chính), nút "Tìm" màu chảy,
   logo đầu trang nền trong suốt (liền với nền trắng), banner nhiều hãng + 2 kiểu banner mới.
   Máy bật "giảm chuyển động": tắt hết, banner không tự chuyển.
   ========================================================= */

/* ---- Logo đầu trang: logo gốc đủ "S&LIFE · Since 2021", nền trong suốt nên liền với nền trắng ---- */
.logo__img { width: auto; height: 56px; }
@media (min-width: 1180px) { .logo__img { width: auto; height: 66px; } }

/* ---- Nút "Tìm": dải màu shop chảy liên tục (như thanh chữ đầu trang), lướt sáng khi rê chuột ---- */
.search__go { isolation: isolate; overflow: hidden; padding: 0 20px; background: #771CAE; letter-spacing: .01em;
  box-shadow: 0 8px 18px -10px rgba(119, 28, 174, .9); transition: box-shadow .25s, transform .2s; }
.search__go::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 400%;
  background: linear-gradient(90deg, #004AAD, #771CAE, #DB3137, #771CAE, #004AAD, #771CAE, #DB3137, #771CAE, #004AAD);
  animation: annFlow 7s linear infinite; }
.search__go::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); transform: skewX(-20deg); }
.search__go:hover, .search__go:focus-visible { background: #771CAE; box-shadow: 0 10px 22px -8px rgba(219, 49, 55, .75); }
.search__go:hover::after { animation: goShine .7s ease; }
.search__go:active { transform: scale(.96); }
@keyframes goShine { to { left: 130%; } }
.search input:focus { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #004AAD, #771CAE, #DB3137) border-box;
  box-shadow: 0 0 0 4px rgba(0, 74, 173, .08); }

/* ---- #5 Nút chính trên banner: viền ba màu shop chạy vòng quanh, ánh sáng mờ theo sau ---- */
@property --run { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hero .btn--run { border: 2.5px solid transparent; color: var(--ink);
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--run), #004AAD, #771CAE, #DB3137, #771CAE, #004AAD) border-box;
  animation: runRing 3.2s linear infinite; }
.hero .btn--run::after { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--run), #004AAD, #771CAE, #DB3137, #771CAE, #004AAD); filter: blur(12px); opacity: .75; animation: runRing 3.2s linear infinite; }
.hero .btn--run:hover { color: #fff; border-color: transparent;
  background: linear-gradient(var(--c-cobalt), var(--c-cobalt)) padding-box, conic-gradient(from var(--run), #004AAD, #771CAE, #DB3137, #771CAE, #004AAD) border-box; }
@keyframes runRing { to { --run: 360deg; } }

/* ---- #2 Ánh đèn sân khấu trôi chậm liên tục (lớp ánh sáng riêng, chỉ chạy ở slide đang xem) ---- */
.hero__slide--grad, .hero__slide--ink { background: var(--ink); }
.hero__slide--grad::before, .hero__slide--grad::after, .hero__slide--ink::before, .hero__slide--ink::after {
  content: ""; position: absolute; inset: -14%; z-index: 0; pointer-events: none; will-change: transform; }
.hero__slide--grad::before { background:
    radial-gradient(34% 46% at 70% 32%, rgba(0, 74, 173, .95), rgba(0, 74, 173, 0) 72%),
    radial-gradient(27% 36% at 62% 84%, rgba(219, 49, 55, .8), rgba(219, 49, 55, 0) 72%);
  animation: glowA 13s ease-in-out infinite alternate; }
.hero__slide--grad::after { background: radial-gradient(30% 42% at 82% 60%, rgba(119, 28, 174, .9), rgba(119, 28, 174, 0) 72%);
  animation: glowB 9s ease-in-out infinite alternate; }
.hero__slide--ink::before { background:
    radial-gradient(36% 48% at 76% 32%, rgba(219, 49, 55, .8), rgba(219, 49, 55, 0) 72%),
    radial-gradient(32% 44% at 84% 72%, rgba(173, 37, 113, .75), rgba(173, 37, 113, 0) 72%);
  animation: glowA 12s ease-in-out infinite alternate; }
.hero__slide--ink::after { background: radial-gradient(28% 38% at 60% 86%, rgba(0, 74, 173, .65), rgba(0, 74, 173, 0) 72%);
  animation: glowB 10s ease-in-out infinite alternate; }
.hero__slide--ask::before { background:
    radial-gradient(38% 54% at 78% 36%, rgba(0, 74, 173, .95), rgba(0, 74, 173, 0) 72%),
    radial-gradient(28% 40% at 62% 84%, rgba(0, 74, 173, .55), rgba(0, 74, 173, 0) 72%); }
.hero__slide--ask::after { background: radial-gradient(26% 36% at 88% 84%, rgba(219, 49, 55, .6), rgba(219, 49, 55, 0) 72%); }
.hero__slide:not(.is-active):not(.is-prev)::before, .hero__slide:not(.is-active):not(.is-prev)::after { animation-play-state: paused; }
@keyframes glowA { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-7%, 5%, 0) scale(1.1); } 100% { transform: translate3d(5%, -6%, 0) scale(.95); } }
@keyframes glowB { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-12%, -9%, 0) scale(1.18); } }
@media (max-width: 899px) {
  .hero__slide--grad::before { background:
      radial-gradient(60% 30% at 34% 18%, rgba(0, 74, 173, .95), rgba(0, 74, 173, 0) 75%),
      radial-gradient(55% 22% at 54% 40%, rgba(219, 49, 55, .6), rgba(219, 49, 55, 0) 75%); }
  .hero__slide--grad::after { background: radial-gradient(52% 26% at 72% 26%, rgba(119, 28, 174, .9), rgba(119, 28, 174, 0) 75%); }
}

/* ---- #4 Banner tự chuyển: vạch trên chấm chạy hết 6 giây thì sang slide; nút tạm dừng ---- */
.hero__dots button.is-active { background: rgba(255, 255, 255, .35); }
.hero__dots button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__dots button.is-active::after { transform: scaleX(1); }
.hero[style*="--hero-delay"] .hero__dots button.is-active::after { transform: scaleX(0); animation: dotFill var(--hero-delay) linear forwards; }
.hero.is-paused .hero__dots button.is-active::after { animation-play-state: paused; }
.hero.is-stopped .hero__dots button.is-active::after { animation: none; transform: scaleX(1); }
@keyframes dotFill { to { transform: scaleX(1); } }
.hero__play .hero__ic-play, .hero.is-stopped .hero__play .hero__ic-pause { display: none; }
.hero.is-stopped .hero__play .hero__ic-play { display: block; }
.hero__ctrl { transition: color .3s; }
.hero.is-light .hero__dots button { background: rgba(21, 17, 43, .16); }
.hero.is-light .hero__dots button::after { background: var(--ink); }
.hero.is-light .hero__btn { color: var(--ink); border-color: rgba(21, 17, 43, .3); background: rgba(255, 255, 255, .7); }
.hero.is-light .hero__btn:hover { background: #fff; }

/* ---- Slide 1: chùm mẫu nổi bật nhiều hãng. Mẫu chưa có ảnh: thẻ chữ màu shop (logo hãng, tên dòng, giá) ---- */
.hero__card--type { background: var(--c-cobalt); color: #fff; }
.hero__card--type.hero__card--2 { background: var(--c-red); }
.hero__card--type.hero__card--3 { background: #fff; color: var(--ink); }
.hero__card--type.hero__card--4 { background: var(--c-berry); }
.hero__card--type.hero__card--0 { background: #fff; color: var(--ink); }
.hero__type { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 11%; text-align: left; overflow: hidden; }
.hero__type-logo { flex: none; width: 52%; height: 24%; margin-bottom: auto; background: currentColor;
  -webkit-mask: left center / contain no-repeat; mask: left center / contain no-repeat; }
.hero__type-word { flex: none; margin-bottom: auto; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 28px; letter-spacing: .04em; line-height: 1; }
.hero__type b { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: clamp(28px, 3.2vw, 44px); line-height: .9; }
.hero__type b.is-long { font-size: clamp(22px, 2.3vw, 31px); }
.hero__type small { font-size: 11.5px; line-height: 1.3; opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero__type em { font-style: normal; font-weight: 700; font-size: 13.5px; }
.hero__card--type.hero__card--3 .hero__type em { color: var(--c-cobalt); }
/* Xoè rộng hơn để thẻ chữ hai bên không bị ảnh giữa che; thẻ bên phải canh chữ sang phải */
.hero__card--0 { width: 48%; left: 26%; top: 10%; }
.hero__card--1, .hero__card--2 { width: 34%; }
.hero__card--3, .hero__card--4 { width: 30%; }
.hero__card--3 { left: 3%; }
.hero__card--4 { right: 3%; }
.hero__card--2 .hero__type, .hero__card--4 .hero__type { align-items: flex-end; text-align: right; }
.hero__card--2 .hero__type-logo, .hero__card--4 .hero__type-logo { -webkit-mask-position: right center; mask-position: right center; }
.hero__card:not(.hero__card--0) .hero__type small { display: none; } /* thẻ hai bên bị thẻ giữa che một phần: chỉ giữ logo, tên dòng, giá */
.hero__card--3 .hero__type b, .hero__card--4 .hero__type b { font-size: clamp(24px, 2.6vw, 36px); }
.hero__card--3 .hero__type b.is-long, .hero__card--4 .hero__type b.is-long { font-size: clamp(20px, 2vw, 27px); }
.hero__card .hero__tag b:first-child { font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hero__card .hero__tag b:last-child { flex: none; }
@media (max-width: 899px) {
  .hero__card--0 { width: 46%; left: 27%; top: 4%; }
  .hero__card--1, .hero__card--2 { width: 35%; top: 16%; }
  .hero__type { padding: 10%; gap: 3px; }
  .hero__type b { font-size: 22px; }
  .hero__type b.is-long { font-size: 17px; }
  .hero__type small { display: none; }
  .hero__type em { font-size: 12px; }
}

/* ---- Slide 2: tường logo các hãng (nền sáng, ô màu đặc) ---- */
.hero__slide--bento { background: var(--mist); color: var(--ink); }
.hero__slide--bento::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(21, 17, 43, .13) 1.1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 75%); mask-image: linear-gradient(100deg, transparent 20%, #000 75%); }
.hero__slide--bento .hero__kicker { color: var(--c-cobalt); opacity: 1; }
.hero__slide--bento .hero__title span:last-child { color: var(--c-cobalt); }
.hero__slide--bento .hero__lead { color: var(--ink-2); opacity: 1; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; width: min(100%, 560px); aspect-ratio: 4 / 3; }
.bento__tile { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 18px; overflow: hidden;
  background: #fff; color: var(--ink); box-shadow: 0 1px 0 rgba(21, 17, 43, .05), 0 14px 28px -18px rgba(21, 17, 43, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.bento__tile--0 { grid-column: span 2; grid-row: span 2; background: var(--c-cobalt); color: #fff; }
.bento__tile--1, .bento__tile--7 { background: var(--ink); color: #fff; }
.bento__tile--2 { background: var(--c-red); color: #fff; }
.bento__tile--4 { background: var(--c-berry); color: #fff; }
.bento__tile--6 { background: var(--cobalt-50); color: var(--c-cobalt); }
.bento__tile--8 { background: var(--red-50); color: #B2232A; }
.bento__logo { display: block; width: 64%; height: 40%; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.bento__tile--0 .bento__logo { width: 62%; height: 34%; }
.bento__word { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 26px; letter-spacing: .04em; line-height: 1; }
.bento__tile small { position: absolute; left: 12px; bottom: 9px; font-size: 12px; font-weight: 600; }
.bento__tile--0 small { left: 18px; bottom: 16px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .bento__tile:hover { transform: translateY(-5px); box-shadow: 0 20px 36px -16px rgba(21, 17, 43, .45); } }
@media (max-width: 899px) {
  .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 70px; aspect-ratio: auto; gap: 8px; width: min(100%, 380px); }
  .bento__tile--0 { grid-column: span 1; grid-row: span 1; }
  .bento__tile--0 .bento__logo { width: 64%; height: 40%; }
  .bento__tile:nth-child(n+7) { display: none; }
  .bento__tile { border-radius: 14px; }
  .bento__tile small, .bento__tile--0 small { left: 8px; bottom: 5px; font-size: 10.5px; }
  .bento__word { font-size: 20px; }
  .bento__name { display: none; }
}

/* ---- Slide 3: top dòng giày — mảng cobalt + vòng đỏ, bảng xếp hạng chữ lớn ---- */
.hero__slide--index { background: radial-gradient(circle at 96% 4%, var(--c-red) 0 25vmax, rgba(219, 49, 55, 0) calc(25vmax + 1px)), var(--c-cobalt); }
.hero__slide--index::before { content: ""; position: absolute; left: -9vmax; bottom: -9vmax; width: 26vmax; height: 26vmax; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .25); pointer-events: none; }
.hero__slide--index .hero__kicker { color: #fff; opacity: .9; }
.lineup { list-style: none; margin: 0; padding: 0; width: min(100%, 560px); border-top: 1px solid rgba(255, 255, 255, .4); }
.lineup a { display: grid; grid-template-columns: 50px 90px minmax(0, 1fr) 22px; align-items: center; gap: 14px; padding: 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .4); color: #fff; transition: background-color .2s, padding .25s var(--ease); }
.lineup a:hover, .lineup a:focus-visible { background: rgba(21, 17, 43, .22); padding-left: 16px; }
.lineup__n { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.lineup__logo { display: block; width: 90px; height: 32px; background: #fff; -webkit-mask: left center / contain no-repeat; mask: left center / contain no-repeat; }
.lineup__word { font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 24px; letter-spacing: .04em; line-height: 1; }
.lineup__name b { display: block; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; text-transform: uppercase; font-size: 30px; line-height: 1; }
.lineup__name small { display: block; margin-top: 3px; font-size: 13px; }
.lineup svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.lineup a:hover svg { transform: translateX(4px); }
@media (max-width: 899px) {
  .hero__slide--index { background: radial-gradient(circle at 100% 0, var(--c-red) 0 34vmax, rgba(219, 49, 55, 0) calc(34vmax + 1px)), var(--c-cobalt); }
  .lineup { width: min(100%, 420px); }
  .lineup a { grid-template-columns: 26px 58px minmax(0, 1fr) 16px; gap: 10px; padding: 8px 4px; }
  .lineup__n { font-size: 20px; }
  .lineup__logo { width: 58px; height: 22px; }
  .lineup__word { font-size: 17px; }
  .lineup__name b { font-size: 19px; }
  .lineup__name small { font-size: 11.5px; margin-top: 1px; }
  .lineup svg { width: 16px; height: 16px; }
}

/* ---- #3 Dải logo các hãng chạy liên tục dưới banner ---- */
.logo-run { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--line); }
.logo-run::before, .logo-run::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 70px; pointer-events: none; }
.logo-run::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.logo-run::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.logo-run__track { display: flex; width: max-content; animation: annMarquee 48s linear infinite; }
.logo-run:hover .logo-run__track, .logo-run:focus-within .logo-run__track { animation-play-state: paused; }
.logo-run__set { display: flex; align-items: center; flex: none; }
.logo-run__item { display: flex; align-items: flex-start; gap: 6px; padding: 20px 32px; color: var(--ink); transition: color .2s; }
.logo-run__item:hover, .logo-run__item:focus-visible { color: var(--c-cobalt); }
.logo-run__logo { display: block; width: 100px; height: 34px; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.logo-run__word { display: flex; align-items: center; height: 34px; font-family: var(--font-display); font-stretch: 75%; font-weight: 800; font-size: 30px; letter-spacing: .04em; line-height: 1; }
@media (max-width: 899px) {
  .logo-run__item { padding: 14px 20px; }
  .logo-run__logo { width: 76px; height: 26px; }
  .logo-run__word { height: 26px; font-size: 23px; }
  .logo-run::before, .logo-run::after { width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .search__go::before, .hero .btn--run, .hero .btn--run::after, .hero__slide::before, .hero__slide::after, .logo-run__track { animation: none !important; }
  .search__go:hover::after { animation: none; }
  .logo-run__track { width: auto; flex-wrap: wrap; justify-content: center; }
  .logo-run__set { flex-wrap: wrap; justify-content: center; }
  .logo-run [aria-hidden="true"] { display: none; }
  .logo-run::before, .logo-run::after { display: none; }
}

/* =========================================================
   Mốc 8 (02/10): logo đầu trang nét dày hơn, to hơn, màu bên trong chảy liên tục;
   dải logo hãng bỏ số; thêm logo Puma; "Hàng sẵn, mua ngay" trộn đủ các hãng.
   ========================================================= */
/* Logo: mặt nạ hình logo (images/brand/slife-logo-mask.svg, nét đã làm dày), bên trong là dải ba màu shop trôi chéo */
.logo__img { position: relative; display: block; overflow: hidden; width: 41px; height: 60px; flex: none;
  -webkit-mask: url(../../images/brand/slife-logo-mask.svg) center / contain no-repeat; mask: url(../../images/brand/slife-logo-mask.svg) center / contain no-repeat; }
.logo__img::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 300%;
  background: linear-gradient(180deg, #004AAD, #771CAE, #DB3137, #771CAE, #004AAD, #771CAE, #DB3137, #771CAE, #004AAD);
  animation: logoFlow 6s linear infinite; }
@keyframes logoFlow { to { transform: translateY(-50%); } }
@media (min-width: 1180px) { .logo__img { width: 49px; height: 72px; } }
.logo-run__item { align-items: center; }
@media (prefers-reduced-motion: reduce) {
  .logo__img::before { animation: none; height: 100%; background: linear-gradient(160deg, #004AAD, #771CAE 50%, #DB3137); }
}

/* =========================================================
   Mốc 9 (02/10): 2 font bắt buộc
   - Barlow Condensed (tiêu đề, chữ lớn in hoa): banner, tiêu đề khu vực, tên dòng, tên mẫu ở trang sản phẩm, số thứ hạng
   - IBM Plex Sans (chữ đọc): đoạn văn, menu, nút, ô tìm, tên mẫu trên thẻ, giá, size, mã, giỏ, chính sách
   Barlow Condensed chỉ có một độ rộng: font-stretch cũ (75%) không còn tác dụng, giữ cũng không sao.
   ========================================================= */
/* Giá, size, mã: số đều bề ngang, thẳng hàng giữa các thẻ */
.card__price, .card__sizes, .card__code, .pd__price, .size, .mini__price, .hero__tag, .hero__type em, .lineup__name small { font-variant-numeric: tabular-nums; }
/* Tiêu đề in hoa tiếng Việt: chừa chỗ cho dấu chồng (Ầ, Ẫ, Ộ) để dòng dưới không chạm dòng trên */
.hero__title { line-height: 1.1; letter-spacing: .005em; margin-bottom: 22px; }
.pd h1, .coll__title, .page-title, .sec__title, .consult h2, .lineup__name b { line-height: 1.1; }
.hero__type b { line-height: 1; }
.sec__title, .coll__title, .page-title, .consult h2 { letter-spacing: .01em; }

/* Hộp "Mở Facebook của shop" khi app Facebook chưa mở được trên điện thoại (trang web giữ nguyên) */
.fb-alt { display: grid; gap: 10px; margin-top: 16px; }
.fb-alt .btn { width: 100%; }

/* Tường logo: tối đa 9 hãng (1 ô lớn + 8 ô) cho kín lưới 4×3; dải logo chạy dưới banner vẫn có đủ các hãng */
.bento__tile:nth-child(n+10) { display: none; }

/* =========================================================
   Mốc 10 (07/10): chữ đầu trang chạy liền mạch; banner không giá, chùm mẫu tự đổi chỗ + đổi mẫu;
   bỏ số mẫu của từng hãng
   ========================================================= */
/* Dải chữ: mỗi nửa dải dài hơn màn hình, tốc độ giữ như cũ (~45px/giây) */
/* Chùm mẫu: thẻ trượt sang vị trí mới mềm mại; thẻ đổi mẫu mờ đi rồi hiện lại */
.hero__card { transition: left .9s var(--ease), right .9s var(--ease), top .9s var(--ease), bottom .9s var(--ease), width .9s var(--ease), transform .9s var(--ease), opacity .45s, box-shadow .45s; }
.hero__card.is-swap { opacity: 0; }
.hero__card .hero__tag { display: none; }
/* Ô hãng không còn dòng số mẫu: chữ tên hãng đứng giữa */
.brand-tile__meta b { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .hero__card { transition: none; } }
/* Vị trí 5 thẻ đều tính bằng left/top để thẻ trượt mượt khi đổi chỗ */
.hero__fan .hero__card { right: auto; bottom: auto; }
.hero__fan .hero__card--0 { width: 48%; left: 26%; top: 10%; transform: none; }
.hero__fan .hero__card--1 { width: 34%; left: 0; top: 0; transform: rotate(-9deg); }
.hero__fan .hero__card--2 { width: 34%; left: 66%; top: 0; transform: rotate(8deg); }
.hero__fan .hero__card--3 { width: 30%; left: 3%; top: 61%; transform: rotate(-4deg); }
.hero__fan .hero__card--4 { width: 30%; left: 67%; top: 61%; transform: rotate(5deg); }
@media (max-width: 899px) {
  .hero__fan .hero__card--0 { width: 46%; left: 27%; top: 4%; }
  .hero__fan .hero__card--1 { width: 35%; left: 0; top: 16%; }
  .hero__fan .hero__card--2 { width: 35%; left: 65%; top: 16%; }
}

/* Mốc 11 (07/10): logo đầy đủ ở dòng nhỏ trên "ONLY AUTHENTIC"; tên hãng to hơn + dòng "Hơn … mẫu có sẵn" */
.hero__kicker--logo { gap: 14px; align-items: center; line-height: 1.35; }
.hero__kicker--logo img { width: auto; height: 64px; flex: none; }
@media (max-width: 899px) { .hero__kicker--logo img { height: 52px; } }
.brand-tile__meta b { font-size: 18px; font-weight: 700; margin-top: 4px; }
.brand-tile__meta small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.brand-tile--all .brand-tile__meta small { color: rgba(255, 255, 255, .85); }
@media (max-width: 899px) { .brand-tile__meta b { font-size: 16px; } .brand-tile__meta small { font-size: 12.5px; } }

/* ===== Chế độ app (mở từ biểu tượng trên màn hình chính, 17/10): nút quay lại cạnh nút menu ===== */
.hd__left { grid-area: menu; justify-self: start; display: flex; align-items: center; margin-left: -10px; }
.hd__left .hd__menu { margin-left: 0; }
@media (min-width: 1180px) { .hd__left { display: none; } }

/* "Hàng sẵn, mua ngay": thẻ đổi mẫu mỗi 3 giây (picksMotion) — mờ dần ra rồi hiện lại */
[data-picks] .rail .card { transition: opacity .28s ease, transform .28s ease; }
[data-picks] .rail .card.is-swap { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { [data-picks] .rail .card { transition: none; } }