/* Ưu đãi tháng 11 · LS2 × Tài Đạt
   Style: Refero "Apple iPhone Duo" — nền trắng, dải #f5f5f7, card bo 28px, không bóng, không gradient.
   Viết cho điện thoại trước, rồi mở rộng lên màn lớn.
   Quy ước: mọi trạng thái "ẩn chờ hiệu ứng" chỉ áp dụng dưới html.js, nên hỏng JS thì nội dung vẫn hiện đủ. */

:root {
  --white: #fff;
  --mist: #f5f5f7;
  --hairline: #d6d6d6;
  --control: #e6e6e8;
  --ink: #1d1d1f;
  --slate: #707070;
  --link: #0066cc;
  --blue: #0071e3;
  --orange: #b64400;

  --r-card: 28px;
  --r-tile: 20px;
  --gutter: 20px;
  --nav-h: 52px;

  --font-text: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  /* Clash Display thiếu dấu tiếng Việt: chỉ gắn cho .num (chữ số, dấu chấm, %, đ) */
  --font-num: "Clash Display", var(--font-text);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scroll-padding-bottom: 84px; /* không để nội dung chui dưới thanh liên hệ dính đáy */
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 17px/1.47 var(--font-text);
  letter-spacing: -0.022em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* chừa sẵn chỗ cho thanh liên hệ dính đáy trên điện thoại, nên không giật bố cục khi thanh hiện ra */
  padding-bottom: calc(68px + env(safe-area-inset-bottom));
}

img { display: block; max-width: 100%; height: auto; }
/* ảnh gốc có nền xám rất nhạt (250/255): nâng sáng 3% cho nền thành trắng, tiệp với card */
.lift { filter: brightness(1.03); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-decoration: none; }
s { text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 9999px; background: var(--ink); color: var(--white);
}
.skip:focus { top: 12px; }

/* lề hai bên: lấy số lớn nhất giữa lề thường và vùng an toàn, để iPhone xoay ngang không bị tai thỏ che chữ */
.wrap { width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 1120px); margin-inline: auto; }
.section { padding-block: 64px; }
.section--tight { padding-top: 48px; }
.band { background: var(--mist); }

/* ---------- Chữ ---------- */
.num { font-family: var(--font-num); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: lining-nums; }
.tel { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* nhãn nhỏ màu cam: chữ trần, không nền, không viền (đúng style) */
.kicker { font-size: 12px; line-height: 1.33; font-weight: 600; letter-spacing: -0.01em; color: var(--orange); }

/* line-height 1.08 thay vì 1.05 của Apple: dấu tiếng Việt chồng tầng (ặ, ả) cần thêm chỗ */
.h1 {
  font-size: clamp(30px, 9.7vw, 80px); line-height: 1.08; font-weight: 600;
  letter-spacing: -0.015em; text-wrap: balance;
}
.h1--sm { font-size: clamp(30px, 8.6vw, 64px); }
.h1__big { font-size: 1.3em; line-height: .9; white-space: nowrap; } /* "50%" nhỉnh hơn chữ quanh nó, vẫn cùng một dòng */
.h2 {
  font-size: clamp(28px, 7.4vw, 40px); line-height: 1.1; font-weight: 600;
  letter-spacing: -0.012em; text-wrap: balance;
}
.h2 > span { display: block; color: var(--slate); } /* câu thứ hai màu xám, luôn xuống dòng riêng */
.h2 > span .num { color: var(--ink); }               /* con số ưu đãi thì không được xám */
.h2--flip { color: var(--slate); }                   /* đảo tông: vế ưu đãi là vế đậm */
.h2--flip > span { color: var(--ink); }
/* khoảnh khắc "con số lớn" của mục quà tặng: 3.490.000đ rộng khoảng 5,8em nên chia bề rộng cho 6,6 là vừa một dòng */
.h2--gift > .num { margin-top: 6px; color: var(--ink); font-size: clamp(40px, calc((100vw - 40px) / 6.6), 112px); line-height: .9; letter-spacing: -0.03em; }
.h3 { font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: -0.01em; }
.lead { font-size: 17px; line-height: 1.47; color: var(--slate); text-wrap: pretty; }
.note { margin-top: 8px; font-size: 14px; line-height: 1.36; color: var(--slate); text-wrap: pretty; }
.note--after { margin-top: 16px; }
/* chữ nhỏ không bị ép khít như chữ 17px (letter-spacing của body tính theo cỡ 17px rồi mới kế thừa) */
.thumbs li, .foot { letter-spacing: -0.01em; }
small, .note, .deal__desc, .price s, .countdown__label, .countdown__note, .nav__links, .sheet__ctx, .ended { letter-spacing: -0.016em; }

.head { display: grid; gap: 10px; max-width: 760px; }
.head--center { margin-inline: auto; text-align: center; justify-items: center; }

/* ---------- Nút ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 9999px;
  font: 400 17px/1 var(--font-text); letter-spacing: -0.022em; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: background-color .2s, box-shadow .2s, transform .2s;
}
.pill:active { transform: scale(.97); }
.pill--blue { background: var(--blue); color: var(--white); }
.pill--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--slate); }
.pill--sm { position: relative; min-height: 36px; padding: 0 16px; font-size: 14px; }
.pill--sm::after { content: ""; position: absolute; inset: -4px 0; } /* vùng chạm đủ 44px */

/* link chữ có mũi tên vẽ bằng CSS (Inter bản web không có ký tự mũi tên); cao 44px cho dễ chạm */
.more { display: inline-flex; align-items: center; min-height: 44px; padding-right: 3px; font-size: 17px; white-space: nowrap; }
.more::after {
  content: ""; width: .42em; height: .42em; margin-left: .38em;
  border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.more--b { font-weight: 600; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; margin-top: auto; padding-top: 8px; }
.links .more { font-size: 14px; }
.links--after { margin-top: 16px; }

@media (hover: hover) {
  .pill--blue:hover { background: #0068d1; } /* đậm hơn màu gốc để chữ trắng vẫn đạt tương phản 4.5:1 */
  .pill--outline:hover { box-shadow: inset 0 0 0 1px var(--ink); }
  .more:hover { text-decoration: underline; }
  .more:hover::after { transform: translateX(3px) rotate(45deg); }
}

/* ---------- Logo 2 thương hiệu ---------- */
.lockup { display: inline-flex; flex: none; align-items: center; gap: 8px; color: var(--slate); }
.lockup__x { font-size: 14px; }
.chip { display: inline-flex; align-items: center; height: 26px; border-radius: 7px; overflow: hidden; flex: none; }
.chip img { height: 100%; width: auto; }
.chip--td { background: var(--ink); padding: 4px 8px 4px 5px; }

/* ---------- Thanh trên cùng ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent; transition: border-color .3s;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.nav.is-stuck { border-bottom-color: var(--control); }
.nav__in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.nav__cta { display: flex; flex: none; gap: 8px; }
.nav__call { display: none; }

/* báo hết chương trình (chỉ hiện sau 30/11/2026): nằm trong thanh trên cùng nên luôn dính theo khi cuộn */
.ended { display: none; padding: 8px var(--gutter); background: var(--ink); color: var(--white); font-size: 14px; line-height: 1.36; text-align: center; }
.is-ended .ended { display: block; }

/* điều hướng theo nhóm ưu đãi; mục đang xem được tô đậm */
.nav__links {
  position: relative; display: none; flex: 1; min-width: 0; gap: 20px;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-size: 14px;
}
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--slate); }
.nav__links a[aria-current] { color: var(--ink); font-weight: 600; }

/* điện thoại: khi đã cuộn qua phần mở đầu, thanh trên cùng đổi nút Zalo (đã có ở thanh đáy) lấy hàng điều hướng */
@media (max-width: 767px) {
  .nav.is-compact .nav__cta, .nav.is-compact .lockup__x { display: none; }
  .nav.is-compact .nav__links { display: flex; padding-right: 16px; }
  .nav.is-compact .lockup { gap: 5px; }
  .nav.is-compact .chip { height: 22px; }
  .nav.is-compact .chip--td { padding: 3px 6px 3px 4px; }
  html:has(dialog[open]) { overflow: hidden; } /* bảng chọn đang mở thì trang phía sau không cuộn theo ngón tay */
}

/* ---------- Mở đầu ---------- */
.hero { padding-top: 28px; text-align: center; overflow: hidden; }
.hero__copy { display: grid; gap: 14px; justify-items: center; max-width: 820px; }
.hero__copy .lead { max-width: 31em; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 22px; margin-top: 6px; }
/* điện thoại: bỏ vế mở đầu trùng với nhãn cam và logo, để ảnh nón lên gần màn hình đầu hơn */
@media (max-width: 599px) {
  .lead__pre { display: none; }
  .hero .lead { text-wrap: balance; }
}

.stage { position: relative; width: min(100%, 980px); margin: 14px auto 0; aspect-ratio: 1 / 1.08; overflow: hidden; }
.stage__hero { position: absolute; left: 50%; top: 50%; width: 84%; max-width: 520px; transform: translate(-50%, -50%); }

/* viên nang nổi cạnh sản phẩm ("floating pricing callout") */
.callout {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px;
  max-width: 68%; padding: 7px 16px 7px 7px; border-radius: 28px;
  background: var(--white); box-shadow: 0 0 0 1px var(--control);
  color: var(--ink); text-align: left;
}
.callout img { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.callout small { display: block; font-size: 12px; line-height: 1.33; color: var(--slate); letter-spacing: -0.01em; }
.callout b { display: block; font-size: 17px; line-height: 1.24; font-weight: 600; }
.callout s { font-size: 12px; font-weight: 400; color: var(--slate); }
.callout--a { left: var(--gutter); top: 3%; }
.callout--b { right: var(--gutter); bottom: 4%; }
@media (max-width: 359px) { .callout--b { bottom: 0; } }

/* cổng 2 cánh: LS2 | Tài Đạt tách ra để lộ sản phẩm (chỉ khi có JS).
   Ảnh nón không bị làm mờ lúc chờ (chỉ thu nhỏ nhẹ) để không làm chậm thời điểm ảnh lớn nhất hiện ra. */
.portal { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; }
.portal__half {
  flex: 1; display: flex; align-items: center; background: var(--mist);
  transition: transform 1.1s cubic-bezier(.76, 0, .24, 1);
}
.portal__half b { font-size: clamp(34px, 10.5vw, 104px); line-height: 1; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.portal__half--l { justify-content: flex-end; padding-right: .22em; border-right: 1px solid var(--hairline); }
.portal__half--r { justify-content: flex-start; padding-left: .22em; }

.js .portal { display: flex; }
.js .stage__hero { transform: translate(-50%, -50%) scale(.9); transition: transform 1.3s var(--ease) .2s; }
.js .callout { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .is-open .portal__half--l { transform: translateX(-101%); }
.js .is-open .portal__half--r { transform: translateX(101%); }
.js .is-open .stage__hero { transform: translate(-50%, -50%); }
.js .is-open .callout { opacity: 1; transform: none; }
.js .is-open .callout--a { transition-delay: .85s; }
.js .is-open .callout--b { transition-delay: 1.05s; }

/* ---------- Đếm ngược (nhãn và ô số chỉ hiện khi có JS; không JS thì còn dòng "Áp dụng đến hết ngày…") ---------- */
.countdown { padding: 26px 0 48px; }
.countdown__label { display: none; font-size: 14px; line-height: 1.29; font-weight: 600; margin-bottom: 12px; }
.countdown__grid { display: none; justify-content: center; gap: 8px; }
.js .countdown__label { display: block; }
.js .countdown__grid { display: flex; }
.cd { flex: 1 1 0; max-width: 74px; padding: 14px 4px 12px; border-radius: var(--r-tile); background: var(--mist); } /* co lại được trên máy 320px */
.cd__n { display: block; font-size: 34px; line-height: 1; }
.cd__u { display: block; margin-top: 6px; font-size: 12px; line-height: 1.33; color: var(--slate); letter-spacing: -0.01em; }
.countdown__note { margin-top: 12px; font-size: 14px; line-height: 1.29; color: var(--slate); }
.countdown.countdown--flat { padding: 0; }
.js .countdown.countdown--flat { padding: 24px 0 26px; }

/* ---------- Dải chữ chạy (theo MagicUI Marquee, viết lại bằng CSS thuần) ---------- */
.marquee { --gap: 12px; display: grid; gap: var(--gap); overflow: hidden; }
.marquee__row { display: flex; gap: var(--gap); overflow-x: auto; scrollbar-width: none; }
.marquee__row::-webkit-scrollbar { display: none; }
.marquee__group { display: flex; flex: none; gap: var(--gap); }
.mq {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  padding: 6px 20px 6px 6px; border-radius: 9999px; background: var(--mist);
  font-size: 15px; line-height: 1.2; white-space: nowrap;
}
.mq img { width: 44px; height: 44px; border-radius: 50%; mix-blend-mode: multiply; }
.mq b { font-weight: 600; }
.mq .num { font-size: 16px; }

.js .marquee.is-live .marquee__row { overflow: hidden; }
.js .marquee.is-live .marquee__group { animation: marquee var(--duration, 60s) linear infinite; }
.js .marquee.is-live .marquee__row--rev .marquee__group { animation-direction: reverse; --duration: 70s; }
/* dừng khi: người dùng bấm nút dừng (is-paused), dải nằm ngoài màn hình (is-off), hoặc rê chuột (chỉ máy có chuột, vì chạm trên điện thoại làm hover bị dính) */
.marquee.is-paused .marquee__group, .marquee.is-off .marquee__group { animation-play-state: paused; }
@media (hover: hover) { .marquee__row:hover .marquee__group { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

/* nút dừng/chạy (theo "Carousel Playback Control" của style): chỉ hiện khi dải đang chạy. Hai màu rgba dưới đây lấy đúng từ style gốc. */
.marquee__ctl { display: none; justify-content: flex-end; margin-top: 6px; }
.js .marquee.is-live + .marquee__ctl { display: flex; }
.mbtn {
  position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(210, 210, 215, .64); box-shadow: inset 0 0 0 4px var(--white); /* vòng trắng 4px: nhìn 36px, chạm 44px */
}
.mbtn::before, .mbtn::after { content: ""; position: absolute; top: 16px; width: 3px; height: 12px; border-radius: 1px; background: rgba(0, 0, 0, .56); }
.mbtn::before { left: 17px; }
.mbtn::after { right: 17px; }
.mbtn[aria-pressed="true"]::after { display: none; }
.mbtn[aria-pressed="true"]::before {
  left: 18px; top: 15px; width: 0; height: 0; background: none; border-radius: 0;
  border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent rgba(0, 0, 0, .56);
}

/* ---------- Bạn định mua gì ---------- */
.finder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 214px; padding: 16px; border-radius: var(--r-card); background: var(--mist);
  color: var(--ink); overflow: hidden;
}
.tile img { position: absolute; top: 6px; left: 50%; width: 76%; max-width: 190px; transform: translateX(-50%); mix-blend-mode: multiply; transition: transform .6s var(--ease); }
.tile__txt { position: relative; display: grid; gap: 2px; }
.tile small { font-size: 14px; line-height: 1.29; color: var(--slate); text-wrap: balance; }
.tile b { font-size: 19px; line-height: 1.21; font-weight: 600; letter-spacing: -0.01em; }
.tile--wide { grid-column: 1 / -1; min-height: 168px; justify-content: center; padding: 20px 44% 20px 20px; }
.tile--wide img { top: 50%; left: auto; right: 2%; width: 44%; max-width: 230px; transform: translateY(-50%); }
.tile--wide b { font-size: 24px; line-height: 1.17; }
/* ô nhỏ trên điện thoại: thu chữ vừa một dòng, không để rớt một từ mồ côi */
@media (max-width: 599px) {
  .tile:not(.tile--wide) { padding: 14px; }
  .tile:not(.tile--wide) b { font-size: clamp(15px, 4.6vw, 19px); }
  .tile small { font-size: 13px; }
}
@media (max-width: 359px) { .tile--wide b { font-size: 21px; } }
@media (hover: hover) {
  .tile:hover img { transform: translateX(-50%) scale(1.05); }
  .tile--wide:hover img { transform: translateY(-50%) scale(1.05); }
}

/* ---------- Giảm giá ---------- */
/* con số lớn nhất trang: "50%" */
.mega { display: grid; gap: 8px; }
.mega__h { display: grid; gap: 2px; }
.mega__t { font-size: clamp(24px, 6.6vw, 40px); line-height: 1.12; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.mega__n { font-size: clamp(100px, 36vw, 300px); line-height: .86; letter-spacing: -0.03em; margin-left: -0.04em; }

.deals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.deal { display: flex; flex-direction: column; padding: 14px 14px 6px; border-radius: var(--r-card); background: var(--white); }
.deal__img { display: block; margin: -4px -4px 8px; }
.deal__img img { width: 100%; transition: transform .6s var(--ease); }
.deal__name { margin-top: 4px; font-size: 17px; line-height: 1.24; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.deal__desc { margin-top: 4px; font-size: 14px; line-height: 1.29; color: var(--slate); }
/* giá và link cùng dính đáy card, nên giá mới luôn thẳng hàng giữa các card dù tên dài ngắn khác nhau */
.deal .price { margin-top: auto; padding-top: 10px; }
.deal .links { margin-top: 0; }
@media (max-width: 599px) { .deal .links { justify-content: space-between; gap: 0 4px; } }
@media (hover: hover) { .deal:hover .deal__img img { transform: scale(1.04); } }

/* giá cũ gạch → giá mới */
.price { display: grid; margin-top: 10px; }
.price s { justify-self: start; font-size: 14px; line-height: 1.29; color: var(--slate); }
.price strong { font-size: clamp(18px, 5.9vw, 22px); line-height: 1.15; } /* co nhẹ ở máy 320px để giá không tràn card */
.price--row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 0; }
.price--row strong { font-size: 30px; }

.feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 12px; padding: 24px 24px 12px; border-radius: var(--r-card); background: var(--white); }
.feature__txt { display: grid; gap: 8px; align-content: center; container-type: inline-size; }
/* "1.000.000đ" rộng khoảng 5,8em: cỡ chữ bám theo bề rộng cột (cqi) để luôn vừa một dòng; dòng vw là dự phòng cho trình duyệt cũ */
.feature__off { display: grid; gap: 2px; line-height: 1; letter-spacing: -0.02em; }
.feature__off .num { font-size: clamp(30px, 10vw, 72px); font-size: clamp(30px, 16.5cqi, 88px); }
.feature__k { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; }
.feature__name { font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.feature__img { width: 100%; max-width: 420px; margin-inline: auto; }

/* ---------- Quà tặng: cặp "mua + tặng" ---------- */
.pairs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 12px; }
.head + .pairs { margin-top: 28px; }

.pair { display: flex; flex-direction: column; padding: 24px 24px 12px; border-radius: var(--r-card); background: var(--mist); }
.pair__title { margin-top: 6px; font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: -0.012em; text-wrap: balance; }
.pair__value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin-top: 10px; }
.pair__k { flex-basis: 100%; font-size: 14px; line-height: 1.36; color: var(--slate); letter-spacing: -0.016em; } /* nhãn "Quà trị giá" đứng riêng một dòng trên con số */
.pair__value s { font-size: 24px; color: var(--slate); }
.pair__value strong { font-size: 60px; line-height: 1; letter-spacing: -0.02em; }
.pair__imgs { display: flex; align-items: center; justify-content: center; margin: 12px -10px 4px; }
.pair__imgs img { width: 50%; min-width: 0; mix-blend-mode: multiply; }
.pair__plus {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; margin: 0 -17px; border-radius: 50%;
  background: var(--white); box-shadow: 0 0 0 1px var(--control);
  font-size: 20px; line-height: 1; color: var(--slate);
}

/* card quà cỡ vừa (FF327, MX701, HH590, OF610): điện thoại mỗi card một hàng để ảnh nón và ảnh quà đủ lớn */
.pair--sm { padding: 20px 20px 10px; }
.pair--sm .pair__imgs { margin: 0 -6px 8px; }
.pair--sm .pair__title { margin-top: 4px; font-size: 19px; line-height: 1.21; letter-spacing: -0.01em; }
.pair--sm .pair__value { gap: 0 10px; margin-top: 8px; }
.pair--sm .pair__value s { font-size: 17px; }
.pair--sm .pair__value strong { font-size: 40px; }
.pair--sm .note { margin-top: 6px; }

/* hai lựa chọn luôn hiện sẵn: quà hoặc giảm 5% */
.choice { display: grid; gap: 8px; margin-top: 16px; }
.choice__opt { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-tile); background: var(--white); }
.choice__opt img { width: 92px; }
.choice__opt b { display: block; font-size: 17px; line-height: 1.24; font-weight: 600; text-wrap: balance; }
.choice__opt small { display: block; margin-top: 3px; font-size: 14px; line-height: 1.36; color: var(--slate); }
.choice__big { font-size: 44px; line-height: 1; text-align: center; letter-spacing: -0.02em; }
.choice__or { justify-self: center; font-size: 14px; color: var(--slate); }

/* ---------- Tai nghe ---------- */
.stats { display: grid; gap: 12px; margin-top: 28px; }
.stat { padding: 24px; border-radius: var(--r-card); background: var(--white); container-type: inline-size; }
/* ưu đãi mua kèm: số nhỏ hơn "0đ" và "1.000.000đ" để giữ thứ bậc 50% > quà > mua kèm. Cỡ bám theo bề rộng card (cqi), dòng vw là dự phòng. */
.stat__n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .18em; font-size: clamp(40px, 13vw, 64px); font-size: clamp(40px, 17cqi, 64px); line-height: .95; letter-spacing: -0.03em; }
.stat__k { font-size: .44em; font-weight: 600; letter-spacing: -0.015em; }
.stat__name { margin-top: 10px; font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: -0.01em; }
.thumbs { display: flex; gap: 6px; margin: 14px -6px 0; }
.thumbs li { flex: 1 1 0; max-width: 132px; min-width: 0; text-align: center; font-size: 12px; line-height: 1.33; color: var(--slate); }
.thumbs img { width: 100%; }

/* ---------- Điều kiện ---------- */
.terms { max-width: 820px; }
.terms__list { display: grid; gap: 12px; margin-top: 18px; }
.terms__list li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--slate); }
.terms__list li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--slate); }

/* bảng tóm tắt 14 ưu đãi, đúng thứ tự file chương trình */
.sum { margin-top: 28px; border-radius: var(--r-card); background: var(--mist); }
.sum summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 24px; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; }
.sum summary::-webkit-details-marker { display: none; }
.sum summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border: solid var(--slate); border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease); }
.sum[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.sum__list { counter-reset: n; padding: 0 24px 12px; }
.sum__list li { counter-increment: n; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 6px; padding: 10px 0; border-top: 1px solid var(--hairline); font-size: 14px; line-height: 1.43; }
.sum__list li::before { content: counter(n); grid-row: span 2; padding-top: 4px; color: var(--slate); font-variant-numeric: tabular-nums; }
.sum__list a { display: block; padding: 4px 0; font-size: 17px; line-height: 1.24; font-weight: 600; color: var(--ink); }
.sum__list span { grid-column: 2; color: var(--slate); }

/* ---------- Cửa hàng ---------- */
.stores { display: grid; gap: 12px; margin-top: 28px; }
.store { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-card); background: var(--white); }
.store__brand { font-size: 12px; line-height: 1.33; font-weight: 600; color: var(--slate); letter-spacing: -0.01em; }
.store__name { margin-top: 2px; font-size: 21px; line-height: 1.19; font-weight: 600; letter-spacing: -0.01em; }
.store__addr { margin-top: 8px; font-size: 17px; line-height: 1.35; }
.store__addr span { color: var(--slate); }
.store__act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: auto; padding-top: 16px; }
.store__act .pill { padding: 0 16px; } /* gọn lại để nút gọi và link chỉ đường nằm cùng một hàng */
.store--chat { padding-bottom: 8px; }
.store__rows { margin-top: 14px; }

/* hàng bấm được: dùng trong bảng chọn và trong card nhắn tin */
.row {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 0;
  border-top: 1px solid var(--control); color: var(--ink);
}
.row__txt { flex: 1; min-width: 0; }
.row b { display: block; font-size: 17px; line-height: 1.24; font-weight: 600; text-wrap: balance; }
.row small { display: block; font-size: 14px; line-height: 1.29; color: var(--slate); }
.row .tel { flex: none; font-size: 17px; color: var(--link); }
.row .chip { height: 30px; }
.row::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
  border: solid var(--slate); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg);
}

/* ---------- Chốt ---------- */
.closing { text-align: center; }
.closing .wrap { display: grid; justify-items: center; gap: 10px; }
.closing .countdown { justify-self: stretch; } /* thiếu dòng này lưới đếm ngược co theo chữ số và giật bề rộng mỗi giây */
.closing .hero__cta { gap: 12px; }
.closing .hero__cta .pill { min-width: 216px; }

.foot { padding: 28px 0 32px; font-size: 12px; line-height: 1.5; color: var(--slate); text-align: center; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; } /* link chữ nhỏ vẫn đủ vùng chạm */

/* ---------- Thanh liên hệ dính đáy (điện thoại) ---------- */
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 60; display: flex; gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--control);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .dock { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.dock .pill { flex: 1 1 0; padding: 0 8px; }
.dock .pill--blue { flex-grow: 1.5; }
/* lúc chưa hiện thì ẩn hẳn (visibility) để bàn phím không tab vào 3 nút vô hình: trượt xuống xong mới ẩn, hiện thì bật ngay rồi trượt lên */
.js .dock { transform: translateY(110%); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
.js .dock.is-on { transform: none; visibility: visible; transition-delay: 0s; }

/* ---------- Bảng chọn (dialog gốc của trình duyệt) ---------- */
dialog:not([open]) { display: none; } /* trình duyệt chưa có <dialog> (iOS dưới 15.4): không in 2 bảng chọn ra cuối trang */
.sheet {
  width: 100%; max-width: 100%; max-height: 86vh; max-height: 86svh; margin: auto 0 0; padding: 0; border: 0;
  border-radius: var(--r-card) var(--r-card) 0 0; background: var(--white); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(0, 0, 0, .44); }
.sheet[open] { animation: sheet-in .4s var(--ease); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
.sheet__in { position: relative; padding: 26px var(--gutter) calc(10px + env(safe-area-inset-bottom)); }
.sheet__sub { margin: 4px 0 14px; font-size: 14px; color: var(--slate); }
.sheet__ctx { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--mist); font-size: 14px; line-height: 1.43; color: var(--slate); }
.sheet__ctx b { color: var(--ink); font-weight: 600; }
.copy { display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: none; color: var(--link); font: 600 14px/1 var(--font-text); letter-spacing: -0.016em; cursor: pointer; }
.copy[hidden] { display: none; } /* thiếu dòng này thì display: inline-flex ở trên thắng thuộc tính hidden */
.sheet__x {
  position: absolute; top: 18px; right: 16px; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: var(--mist); color: var(--slate); cursor: pointer;
}
.sheet__x::after { content: ""; position: absolute; inset: -6px; } /* vùng chạm 44px */
.sheet .h3 { padding-right: 44px; text-wrap: balance; }
/* trong bảng chọn, ô logo có bề rộng cố định nên tên 4 kênh thẳng một cột */
.sheet .row .chip { width: 90px; }
.sheet .row .chip--ls2 { border-radius: 0; }
.sheet .row .chip--ls2 img { border-radius: 7px; }
@media (max-width: 359px) {
  .sheet .row { gap: 10px; }
  .sheet .row b { font-size: 16px; }
  .sheet .row .tel { font-size: 15px; }
  .sheet .row .chip { width: 72px; height: 24px; }
}

/* ---------- Ưu đãi được link quảng cáo trỏ thẳng tới (#ff901, #dakota...) ---------- */
.deal, .pair, .feature { position: relative; }
.deal:target, .pair:target, .feature:target { box-shadow: 0 0 0 2px var(--ink); }
/* thêm 2 vòng viền lan ra rồi tắt, chỉ chạy khi card đã hiện (is-in) */
.js .deal.is-in:target::after, .js .pair.is-in:target::after, .js .feature.is-in:target::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--ink); opacity: 0; animation: target-ring 1.1s ease-out .5s 2;
}
@keyframes target-ring { from { opacity: .5; transform: none; } to { opacity: 0; transform: scale(1.03); } }

/* ---------- Sau 30/11/2026: gỡ mọi thứ còn mời mua, đánh dấu từng card ---------- */
.is-ended .callout, .is-ended .marquee, .is-ended .marquee.is-live + .marquee__ctl, .is-ended .countdown--flat, .is-ended .countdown__grid { display: none; } /* hết hạn thì 4 ô số chỉ còn dấu "--", ẩn đi */
.is-ended :is(.deal, .feature, .pair) .kicker::before { content: "Đã kết thúc · "; } /* khách vào thẳng #ff901 vẫn thấy */
html.is-ended { scroll-padding-top: calc(var(--nav-h) + 96px); } /* bù cho dải báo nằm trong thanh trên cùng */

/* ---------- Hiệu ứng khi cuộn tới (chỉ khi có JS). Trạng thái cuối luôn là mặc định, nên không bao giờ kẹt ở trạng thái ẩn sai. ---------- */
.js .reveal {
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(28px); }

/* giá cũ: nét gạch tự vẽ từ trái sang (giữ thẻ <s> cho trình đọc màn hình) */
.js .reveal s { position: relative; text-decoration: none; }
.js .reveal s::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 52%; height: 1.5px; background: currentColor;
  transform-origin: left center; transition: transform .5s var(--ease) .5s;
}
.js .reveal:not(.is-in) s::after { transform: scaleX(0); }

/* giá mới trồi lên; "0đ" bật ra. Chữ số là chữ thật trong HTML, không đổi nội dung, nên không bao giờ hiện sai giá. */
.js .reveal .rise, .js .reveal .pop { display: inline-block; }
.js .reveal .rise { transition: opacity .5s var(--ease) .75s, transform .5s var(--ease) .75s; }
.js .reveal:not(.is-in) .rise { opacity: 0; transform: translateY(.4em); }
.js .reveal .pop { transform-origin: left bottom; transition: opacity .3s ease-out .85s, transform .6s var(--spring) .85s; }
.js .reveal:not(.is-in) .pop { opacity: 0; transform: scale(.5); }

/* ghép cặp: món mua trượt từ trái, quà trượt từ phải, dấu cộng bật ra ở giữa */
.js .reveal .pair__imgs img { transition: transform .8s var(--ease) .15s, opacity .6s var(--ease) .15s; }
.js .reveal:not(.is-in) .pair__imgs img:first-child { opacity: 0; transform: translateX(-14%); }
.js .reveal:not(.is-in) .pair__imgs img:last-child { opacity: 0; transform: translateX(14%); }
.js .reveal .pair__plus { transition: transform .5s var(--spring) .6s; }
.js .reveal:not(.is-in) .pair__plus { transform: scale(0); }
/* quà (ảnh bên phải) nhún một nhịp đúng lúc "0đ" bật ra, để mắt nối: món này là món 0đ. Dùng thuộc tính scale riêng nên không đụng transform trượt vào. */
.js .reveal.is-in .pair__imgs img:last-child { animation: gift-nod .9s var(--ease) .9s; }
@keyframes gift-nod { 40% { scale: 1.07; } }

/* số "50%" lớn dần theo vị trí cuộn (kiểu trang sản phẩm Apple). Chỉ trình duyệt mới có; nơi chưa hỗ trợ thì số đứng yên đủ cỡ. */
@supports (animation-timeline: view()) {
  .mega__n { transform-origin: 0 70%; animation: num-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes num-grow { from { scale: .86; } }
}

/* ============ Màn rộng hơn điện thoại ============ */
@media (min-width: 600px) {
  .finder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stores, .stats, .pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairs--xl { grid-template-columns: minmax(0, 1fr); }
  .stage { aspect-ratio: 16 / 11; }
  .stage__hero { width: 62%; }
  .callout--a { left: 4%; top: 12%; }
  .callout--b { right: 4%; bottom: 12%; }
  .deal { padding: 20px 20px 10px; }
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --nav-h: 56px; }
  html { scroll-padding-bottom: 0; }
  body { padding-bottom: 0; }
  .dock { display: none; }
  .section { padding-block: 90px; }
  .section--tight { padding-top: 64px; }
  .lead { font-size: 21px; line-height: 1.38; }
  .hero { padding-top: 44px; }
  .hero__copy { gap: 18px; }
  .nav__links { display: flex; justify-content: center; gap: 26px; }
  .chip { height: 30px; }
  .countdown { padding: 30px 0 72px; }
  .cd { max-width: 96px; padding: 18px 4px 14px; }
  .cd__n { font-size: 44px; }
  .mq { font-size: 17px; padding: 8px 24px 8px 8px; }
  .mq img { width: 52px; height: 52px; }
  .mq .num { font-size: 19px; }

  /* nhịp desktop: khoảng cách giữa các card 20px */
  .deals, .pairs, .stats, .stores, .finder { gap: 20px; }
  .pairs, .feature { margin-top: 20px; }
  .pair--xl, .stat, .store { padding: 28px; }
  .pair--xl { padding-bottom: 16px; }
  .store--chat { padding-bottom: 12px; }
  .deal__name { font-size: 19px; line-height: 1.21; }
  .price strong { font-size: 28px; }
  .feature { grid-template-columns: 1.1fr .9fr; align-items: center; gap: 20px; padding: 40px 48px; }
  .price--row strong { font-size: 40px; }
  .pair--xl .pair__title { font-size: 32px; line-height: 1.125; }
  .pair--xl .pair__value s { font-size: 28px; }
  .pair--xl .pair__value strong { font-size: 72px; }
  .links .more { font-size: 17px; }
  .links--col .more { font-size: 14px; }
  .terms__list li, .sum__list li { font-size: 17px; line-height: 1.47; }

  .sheet { max-width: 480px; margin: auto; border-radius: var(--r-card); }
  .sheet__in { padding: 30px 28px 14px; }
}

@media (min-width: 900px) {
  .deals { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; }
  .deal .price strong { font-size: clamp(22px, 2.5vw, 28px); } /* 4 cột ở 900px còn hẹp: giá co theo bề rộng */
  .pairs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pairs--xl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 4 card quà một hàng: nhãn cam luôn chừa 2 dòng và link "Hỏi mua" đứng riêng, để tiêu đề và "0đ" thẳng hàng nhau */
  .pair--sm .kicker { min-height: 2.66em; }
  .pair--sm .pair__title { font-size: 17px; line-height: 1.24; }
  .pair--sm .pair__value s { font-size: 14px; }
  .pair--sm .pair__plus { width: 28px; height: 28px; margin: 0 -14px; font-size: 17px; }
  .links--col { gap: 0 14px; }
  .links--col .more--b { flex-basis: 100%; }
  .choice { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; }
  .choice__opt { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: center; text-align: center; padding: 20px; }
  .choice__opt img { width: 150px; }
  .choice__big { font-size: 56px; }
  .choice__or { align-self: center; }
}

@media (min-width: 1024px) {
  .nav__call { display: inline-flex; }
  .stage { aspect-ratio: 16 / 9; }
  .stage__hero { width: 52%; }
  .callout { padding: 9px 22px 9px 9px; }
  .callout img { width: 56px; height: 56px; }
  .callout b { font-size: 21px; }
  .callout small { font-size: 14px; }
  .callout--a { left: 8%; top: 20%; }
  .callout--b { right: 8%; bottom: 18%; }

  .finder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile { min-height: 250px; padding: 20px; }
  .tile--wide { grid-column: span 2; padding: 20px 40% 20px 24px; }
  .tile--wide img { width: 42%; }

  /* cửa hàng: card nhắn tin thành dải ngang 4 kênh, bên dưới là 3 + 2 cửa hàng, không còn khoảng trống chết */
  .stores { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .store { grid-column: span 2; }
  .store:nth-last-child(-n+2) { grid-column: span 3; }
  .store--chat { grid-column: 1 / -1; }
  .store--chat .store__rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; }
  .head + .pairs, .stats, .stores, .finder { margin-top: 40px; }
}
/* 1024 đến 1279px: 6 cột làm ô quá hẹp, chữ rớt dòng; về 4 cột với ô nón nằm riêng một hàng */
@media (min-width: 1024px) and (max-width: 1279px) {
  .finder { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile--wide { grid-column: 1 / -1; min-height: 168px; padding: 20px 44% 20px 24px; }
  .tile--wide img { width: 30%; }
}

/* ============ Người dùng bật "giảm chuyển động": mọi thứ đứng yên ở trạng thái cuối ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .portal { display: none; }
  .js .stage__hero { transform: translate(-50%, -50%); }
  .js .callout { opacity: 1; transform: none; }
}

/* ============ In / lưu PDF (script.js tạm gỡ lớp .js lúc in để mọi khối hiện đủ) ============ */
@media print {
  .dock, .marquee, .marquee__ctl { display: none; }
  body { padding-bottom: 0; }
}