/* ═══════════════════════════════════════════════════════════════════════
   VINAPET — STYLESHEET
   Thứ tự: Base → Utilities → Components → Sections → Overlays → Responsive
   Mọi giá trị màu/khoảng cách/bo góc tham chiếu tokens.css
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── 1. BASE ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--announce-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-relax);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--fw-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p  { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Bắt buộc: các lớp overlay bên dưới có display: flex/grid nên sẽ ĐÈ lên
   `[hidden]` mặc định của trình duyệt → modal/drawer/toast tự bung khi tải
   trang. Khai báo này giữ cho thuộc tính hidden luôn thắng. */
[hidden] { display: none !important; }

table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

::selection { background: var(--vp-teal-100); color: var(--vp-navy-900); }

/* ── BỘ ICON ──────────────────────────────────────────────────────
   Toàn bộ icon là SVG nét mảnh vẽ tay, KHÔNG dùng emoji: emoji render
   khác nhau trên iOS/Android/Windows, không đổi được màu theo brand và
   làm trang mất cảm giác cao cấp.
   Mặc định: nét, bo tròn đầu nét, ăn màu theo currentColor.
   ────────────────────────────────────────────────────────────────── */
.ico, svg:not(.fab--mess svg) {
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ico { width: 20px; height: 20px; }
.ico--xs { width: 16px; height: 16px; }

/* Vài icon dạng khối đặc — dấu chân, tim, nút play */
#i-paw *, #i-paw2 *, #i-heart, #i-play, #i-bolt { fill: currentColor; stroke: none; }
.fab--mess svg { fill: #fff; stroke: none; }

/* Kích thước icon theo từng ngữ cảnh */
.pain__ico svg, .hb__ico svg, .why__ico svg { width: 24px; height: 24px; }
.header__phone svg, .cart-btn svg { width: 20px; height: 20px; }
.trustrow svg { width: 18px; height: 18px; color: var(--vp-teal-700); flex: none; }
.fcard__ico svg { width: 20px; height: 20px; color: var(--vp-teal-700); }
.chip svg { width: 17px; height: 17px; }
.upsell__title svg, .sum__gift svg, .pay__warn svg, .combo__note svg { width: 17px; height: 17px; flex: none; vertical-align: -3px; }
.pcard__wish svg { width: 17px; height: 17px; }
.uvid__play svg { width: 18px; height: 18px; margin-left: 2px; }
.cart-empty__ico svg { width: 46px; height: 46px; stroke-width: 1.3; color: var(--vp-navy-200); }
.lead__ok-ico svg { width: 52px; height: 52px; stroke-width: 1.6; color: var(--vp-success); }

/* ───────────────────────── 2. UTILITIES ──────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.center { text-align: center; margin-top: var(--s-7); }

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

.skip-link {
  position: absolute; top: -60px; left: var(--s-4);
  z-index: 999; padding: var(--s-3) var(--s-5);
  background: var(--vp-navy); color: #fff;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

/* ─────────────────── 3. HIỆU ỨNG XUẤT HIỆN KHI CUỘN ──────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ───────────────────────── 4. NÚT BẤM ────────────────────────────── */
.btn {
  --btn-py: .78rem;
  --btn-px: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
  /* Trên tablet/desktop nút nằm cạnh nhau nên chữ không được rớt dòng.
     Dưới 560px nút chiếm trọn chiều ngang, cho phép xuống dòng — nếu ép
     nowrap ở đây thì nút sẽ rộng hơn màn hình và làm tràn trang. */
  white-space: nowrap;
  border: 2px solid transparent;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }

/* CTA chính — CAM, dùng duy nhất cho hành động mua */
.btn--primary {
  background: var(--grad-cta);
  color: #fff;
  box-shadow: var(--sh-cta);
}
.btn--primary:hover { box-shadow: var(--sh-cta-hover); transform: translateY(-2px); }

.btn--outline {
  background: var(--surface);
  color: var(--vp-navy);
  border-color: var(--line-strong);
  box-shadow: var(--sh-xs);
}
.btn--outline:hover { border-color: var(--vp-navy); background: var(--vp-navy-50); transform: translateY(-2px); }

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

.btn--ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost-light:hover { background: rgba(255,255,255,.22); }

.btn--lg  { --btn-py: 1rem; --btn-px: 1.9rem; font-size: 1.0625rem; }
.btn--sm  { --btn-py: .5rem; --btn-px: 1rem; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

.icon-btn {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-pill); font-size: 1.5rem; line-height: 1;
  color: var(--ink-muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--bg-soft); color: var(--ink); }

/* ──────────────── 5. BADGE · PILL · CHIP · SAO ───────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .4rem .85rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: -.005em;
}
.badge--urgent { background: var(--vp-cta-50); color: var(--vp-cta-800); border: 1px solid var(--vp-cta-100); }
.badge--hot    { background: rgba(255,255,255,.16); color: #fff; }

.pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--vp-cta); flex: none;
  box-shadow: 0 0 0 0 rgba(255,107,44,.6);
  animation: pulse 2s infinite;
}
.badge--hot .pulse { background: #FFD9C4; box-shadow: 0 0 0 0 rgba(255,255,255,.6); }
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(255,107,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,107,44,0); }
}

.pill {
  display: inline-block; padding: .3rem .7rem;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.pill--ok { background: var(--vp-success-50); color: var(--vp-success); }

.stars { color: var(--vp-gold); letter-spacing: 1px; line-height: 1; }

/* ──────────────────── 6. THANH ƯU ĐÃI (marquee) ──────────────────── */
.announce {
  height: var(--announce-h);
  background: var(--grad-navy);
  color: #fff;
  display: flex; align-items: center;
  overflow: hidden;
  font-size: var(--fs-xs);
  position: relative; z-index: var(--z-sticky);
}
.announce__track {
  display: flex; align-items: center; gap: var(--s-5);
  white-space: nowrap;
  animation: marquee 34s linear infinite;
  padding-left: var(--s-5);
}
.announce__track span { display: inline-flex; align-items: center; gap: .35rem; }
.announce__track b { color: var(--vp-teal-400); font-weight: var(--fw-bold); }
.announce__track i {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.4); flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.announce:hover .announce__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .announce__track { animation: none; } }

/* ─────────────────────────── 7. HEADER ───────────────────────────── */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.header.is-scrolled { box-shadow: var(--sh-sm); border-bottom-color: var(--line); }

.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
}

.brand { display: flex; align-items: center; gap: .6rem; flex: none; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-size: 1.28rem; font-weight: var(--fw-black);
  color: var(--vp-navy); letter-spacing: -.04em;
}
.brand__tag {
  font-size: 9.5px; font-weight: var(--fw-semibold);
  color: var(--vp-teal-700); letter-spacing: .04em; text-transform: uppercase;
}

.nav { display: none; margin-left: auto; gap: var(--s-5); }
.nav a {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-soft); padding: .4rem 0;
  position: relative; transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--vp-cta);
  transition: width var(--dur) var(--ease-out);
}
.nav a:hover { color: var(--vp-navy); }
.nav a:hover::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }

.header__phone {
  display: none; align-items: center; gap: .45rem;
  padding: .5rem .9rem; border-radius: var(--r-pill);
  background: var(--vp-teal-50); color: var(--vp-teal-800);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  transition: background var(--dur) var(--ease);
}
.header__phone:hover { background: var(--vp-teal-100); }

.cart-btn {
  position: relative; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-pill); color: var(--vp-navy);
  background: var(--vp-navy-50);
  transition: background var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.cart-btn:hover { background: var(--vp-navy-100); }
.cart-btn.is-bump { animation: bump .45s var(--ease-spring); }
@keyframes bump { 50% { transform: scale(1.22); } }

.cart-btn__count {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--vp-cta); color: #fff;
  font-size: 11px; font-weight: var(--fw-bold);
  border-radius: var(--r-pill);
  border: 2px solid var(--surface);
}

.burger { width: 42px; height: 42px; display: grid; place-items: center; gap: 4px; }
.burger span {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--vp-navy);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.scroll-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--grad-cta);
  transition: width .1s linear;
}

/* Menu di động */
.mmenu {
  position: fixed; inset: calc(var(--header-h) + var(--announce-h)) 0 0;
  z-index: var(--z-mmenu);
  background: var(--surface);
  padding: var(--s-5) var(--gutter) var(--s-9);
  overflow-y: auto;
  animation: mmenuIn var(--dur) var(--ease-out);
}
@keyframes mmenuIn { from { opacity: 0; transform: translateY(-10px); } }
.mmenu nav { display: flex; flex-direction: column; }
.mmenu nav a {
  padding: var(--s-4) 0;
  font-size: 1.0625rem; font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--line);
}
.mmenu__cta { display: grid; gap: var(--s-3); margin-top: var(--s-6); }

/* ──────────────────────────── 8. HERO ────────────────────────────── */
.hero {
  position: relative;
  padding: var(--s-8) 0 var(--s-7);
  background: var(--grad-hero);
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Ảnh nền hero.
   Nếu bg-hero.jpg chưa được tạo, lớp này đơn giản là không hiện gì —
   gradient bên dưới vẫn đẹp, trang không vỡ. */
.hero__photo {
  position: absolute; inset: 0;
  background-image: var(--vnp-bg-hero, none);   /* WP: đặt inline từ trang cấu hình */
  background-size: cover;
  background-position: 78% 30%;
  opacity: .18;
  /* Mờ dần về bên trái để chữ luôn tương phản đủ (đạt WCAG AA) */
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 38%, #000 78%);
          mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.35) 38%, #000 78%);
  animation: heroZoom 24s var(--ease) infinite alternate;
}
@keyframes heroZoom { to { transform: scale(1.08); } }

.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.blob--1 { width: 380px; height: 380px; background: var(--vp-teal-100); top: -110px; right: -90px; animation: blobDrift 16s var(--ease) infinite alternate; }
.blob--2 { width: 320px; height: 320px; background: var(--vp-cta-100); bottom: -120px; left: -110px; opacity: .4; animation: blobDrift 20s var(--ease) infinite alternate-reverse; }
@keyframes blobDrift { to { transform: translate(28px, 22px) scale(1.12); } }


@media (prefers-reduced-motion: reduce) {
  .hero__photo, .blob { animation: none; }
}

.hero__grid { position: relative; display: grid; gap: var(--s-7); }

.hero__title { font-size: var(--fs-display); margin: var(--s-4) 0 var(--s-4); }
.hero__title .hl {
  background: linear-gradient(102deg, var(--vp-teal-700) 0%, var(--vp-teal) 55%, var(--vp-navy-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 30rem;
}
.hero__sub b { color: var(--ink); font-weight: var(--fw-bold); }

.hero__benefits { display: grid; gap: var(--s-3); margin: var(--s-6) 0; }
.hero__benefits li {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hero__benefits li:hover { transform: translateX(4px); box-shadow: var(--sh-sm); }
.hb__ico {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--vp-teal-50); color: var(--vp-teal-700);
}
.hero__benefits span span, .hero__benefits li > span:last-child { display: flex; flex-direction: column; }
.hero__benefits b { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.35; }
.hero__benefits small { font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.4; }

.hero__cta { display: grid; gap: var(--s-3); }
.hero__micro {
  margin-top: var(--s-4);
  font-size: var(--fs-sm); color: var(--ink-muted);
  line-height: 1.6;
}
.hero__micro svg {
  display: inline-block; vertical-align: -3px;
  margin-right: .35rem;
  color: var(--vp-success);
}
.hero__micro b { color: var(--ink-soft); }

.hero__stage {
  position: relative;
  display: grid; place-items: center;
  /* hero-main.png là ảnh nền TRẮNG (chưa tách alpha). Thay vì cố xoá nền,
     ta biến khu vực này thành một thẻ trắng bo góc — nền trắng của ảnh hoà
     liền vào thẻ, trông chủ đích và cao cấp (kiểu thẻ sản phẩm của Apple).
     Nếu sau này có bản PNG tách nền thật thì xoá 4 dòng background/shadow
     dưới đây là hero trở lại dạng ảnh nổi trên nền. */
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px rgba(16,40,66,.13), 0 4px 14px rgba(16,40,66,.06);
  padding: var(--s-5);
}
.hero__img {
  width: 100%; max-width: 460px;
  animation: floaty 6s ease-in-out infinite;

  max-width: 100%;
}
@keyframes floaty { 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .hero__img { animation: none; } }

.fcard {
  position: absolute;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  font-size: var(--fs-xs);
}
.fcard b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--ink); line-height: 1.25; }
.fcard small { display: block; color: var(--ink-muted); font-size: 11.5px; line-height: 1.3; }
.fcard__ico {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: var(--vp-teal-50);
}
.fcard--rating { top: 4%; left: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
.fcard--sold   { bottom: 16%; right: 0; }
.fcard--made   { bottom: -2%; left: 0; }

/* Màn hình nhỏ: khung ảnh hero hẹp, thẻ nổi phải nằm gọn bên trong,
   nếu để lệch âm sẽ bị section cắt mất một nửa */
@media (max-width: 767px) {
  .fcard { padding: var(--s-2) var(--s-3); }
  .fcard--rating { top: 2%; left: 2%; }
  .fcard--sold   { bottom: 20%; right: 2%; }
  .fcard--made   { bottom: 2%; left: 2%; }
}

.trustrow {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.trustrow li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-soft);
}

/* ──────────────────────────── 9. STATS ───────────────────────────── */
.stats {
  position: relative;
  background: var(--grad-navy);
  color: #fff;
  padding: var(--s-8) 0;
  overflow: hidden;
}
/* Vệt sáng teal rất nhạt để dải navy không bị "chết" phẳng */
.stats::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 130% at 50% 0%, rgba(15,185,177,.22), transparent 70%);
  pointer-events: none;
}
.stats .container { position: relative; }

.stats__eyebrow {
  text-align: center;
  margin-bottom: var(--s-6);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: rgba(255,255,255,.55);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}

.stats__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) 0;
}

.stat { text-align: center; padding: 0 var(--s-3); }

/* Vạch ngăn mảnh giữa các chỉ số — thay vì để 4 khối trôi nổi rời rạc */
.stat + .stat { box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
@media (max-width: 559px) {
  .stat:nth-child(odd) + .stat { box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
  .stat:nth-child(3) { box-shadow: none; }
}

/* Con số + đơn vị nằm cùng một hàng, căn theo đường chân chữ.
   LƯU Ý: phải dùng `.stat > em` cho nhãn, KHÔNG dùng `.stat span` —
   thẻ <span data-counter> chứa con số cũng nằm trong .stat, selector
   rộng sẽ thu nhỏ luôn con số và làm đơn vị to hơn số (lỗi đã gặp). */
.stat b {
  display: flex; align-items: baseline; justify-content: center; gap: .12em;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.1rem);
  font-weight: var(--fw-black);
  color: #fff;
  letter-spacing: -.035em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat b i {
  font-style: normal;
  font-size: .42em; font-weight: var(--fw-bold);
  color: var(--vp-teal-400);
  letter-spacing: 0;
}
.stat > em {
  display: block;
  margin-top: var(--s-2);
  font-style: normal;
  font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: rgba(255,255,255,.72);
  line-height: 1.4;
}

/* ────────────────────── 10. SECTION & TIÊU ĐỀ ────────────────────── */
.section { padding: var(--section-y) 0; position: relative; }

/* Nền xen kẽ trắng ↔ xám mềm giữa các section, giữ trang sạch và
   nhiều khoảng thở — không dùng hoa văn trang trí. */
.section--soft { background-color: var(--bg-soft); }
.section--soft > .container { position: relative; }

/* Section navy (quiz): ảnh nhà máy làm nền, phủ lớp navy đậm lên trên
   để chữ trắng vẫn đọc rõ */
.section--navy {
  background-color: var(--vp-navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.section--navy::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--vnp-bg-quiz, none);   /* WP: đặt inline từ trang cấu hình */
  background-size: cover; background-position: center;
  opacity: .3;
}
.section--navy::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(15,185,177,.28), transparent 65%),
    linear-gradient(160deg, rgba(18,69,126,.93) 0%, rgba(10,43,79,.97) 100%);
}

.shead { max-width: 46rem; margin: 0 auto var(--s-8); text-align: center; }
.shead h2 { margin-bottom: var(--s-3); }
.shead__sub { color: var(--ink-soft); font-size: var(--fs-lead); }
.shead--light h2 { color: #fff; }
.shead--light .shead__sub { color: var(--ink-invert-soft); }

.eyebrow {
  display: inline-block;
  margin-bottom: var(--s-3);
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: var(--vp-teal-50); color: var(--vp-teal-800);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.eyebrow--light { background: rgba(255,255,255,.14); color: var(--vp-teal-400); }

/* ────────────────────────── 11. NỖI ĐAU ──────────────────────────── */
.pain__grid { display: grid; gap: var(--s-4); }
.pain {
  padding: var(--s-6) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pain:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--vp-cta-100); }
.pain__ico {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--vp-cta-50); color: var(--vp-cta-700);
  margin-bottom: var(--s-4);
}
.pain__ico svg { width: 25px; height: 25px; }
.pain h3 { font-size: 1.0625rem; font-weight: var(--fw-bold); margin-bottom: var(--s-2); }
.pain p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.62; }

.bridge {
  margin-top: var(--s-8);
  padding: var(--s-6);
  background: var(--surface);
  border: 2px dashed var(--vp-cta-100);
  border-radius: var(--r-lg);
  text-align: center;
}
.bridge p {
  font-size: var(--fs-lead); font-weight: var(--fw-semibold);
  color: var(--ink); margin-bottom: var(--s-5);
  max-width: 40rem; margin-inline: auto;
}

/* ────────────────────────── 12. GIẢI PHÁP ────────────────────────── */
.sol__grid { display: grid; gap: var(--s-6); }
.sol {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.sol:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.sol__media { position: relative; aspect-ratio: 16 / 11; background: var(--bg-soft); }
.sol__media img { width: 100%; height: 100%; object-fit: cover; }
.sol__tag {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: .32rem .75rem; border-radius: var(--r-pill);
  background: rgba(18,69,126,.92); color: #fff;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  backdrop-filter: blur(6px);
}
.sol__body { padding: var(--s-5); }
.sol__body h3 { margin-bottom: var(--s-4); font-size: 1.15rem; }

.fbed { display: grid; gap: var(--s-3); }
.fbed > div {
  display: grid; grid-template-columns: 92px 1fr; gap: var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px dashed var(--line);
}
.fbed > div:last-child { border-bottom: 0; padding-bottom: 0; }
.fbed dt {
  font-size: 11.5px; font-weight: var(--fw-black);
  color: var(--vp-teal-700); text-transform: uppercase;
  letter-spacing: .04em; padding-top: 3px;
}
.fbed dd { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }
.fbed dd b { color: var(--ink); font-weight: var(--fw-bold); }

/* ──────────────────────────── 13. QUIZ ───────────────────────────── */
.quiz {
  max-width: 900px; margin-inline: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-5) var(--s-7);
  backdrop-filter: blur(10px);
}
.quiz__bar {
  height: 5px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); overflow: hidden;
}
.quiz__bar span {
  display: block; height: 100%; width: 33.33%;
  border-radius: var(--r-pill);
  background: var(--grad-teal);
  transition: width var(--dur-slow) var(--ease-out);
}
.quiz__step {
  text-align: center;
  margin: var(--s-4) 0 var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  color: var(--vp-teal-400); letter-spacing: var(--ls-wide); text-transform: uppercase;
}
.quiz__q { font-size: var(--fs-h3); color: #fff; margin-bottom: .35rem; text-align: center; }
.quiz__hint { font-size: var(--fs-sm); color: var(--ink-invert-soft); margin-bottom: var(--s-6); text-align: center; }

.quiz__opts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}

/* Đáp án dạng THẺ DỌC: icon lớn trong vòng tròn ở trên, nhãn căn giữa
   bên dưới. So với kiểu thanh ngang thì thẻ dọc bắt mắt hơn, dễ bấm hơn
   trên mobile và không để lại khoảng trống chết bên phải. */
.quiz__opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-3);
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.14);
  border-radius: var(--r-lg);
  color: #fff; text-align: center;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  line-height: 1.4;
  overflow: hidden;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
/* Vệt sáng chạy qua khi rê chuột */
.quiz__opt::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(15,185,177,.22), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.quiz__opt > * { position: relative; }

.quiz__opt em {
  flex: none; font-style: normal;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(15,185,177,.16);
  border: 1.5px solid rgba(15,185,177,.4);
  color: var(--vp-teal-400);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease);
}
.quiz__opt em svg { width: 27px; height: 27px; }
.quiz__opt > span { display: block; }

/* Dấu tích góc trên phải — chỉ hiện khi được chọn */
.quiz__pick {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--vp-teal);
  display: grid; place-items: center;
  opacity: 0; transform: scale(.4);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
}
.quiz__pick::after {
  content: '✓'; color: #fff;
  font-size: 12px; font-weight: var(--fw-black); line-height: 1;
}

.quiz__opt:hover {
  border-color: rgba(15,185,177,.7);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}
.quiz__opt:hover::before { opacity: 1; }
.quiz__opt:hover em { background: var(--vp-teal); color: #fff; border-color: var(--vp-teal); transform: scale(1.08); }

.quiz__opt.is-sel {
  background: rgba(15,185,177,.2);
  border-color: var(--vp-teal);
  box-shadow: 0 0 0 3px rgba(15,185,177,.2);
}
.quiz__opt.is-sel em { background: var(--vp-teal); color: #fff; border-color: var(--vp-teal); }
.quiz__opt.is-sel .quiz__pick { opacity: 1; transform: scale(1); }

.quiz__back {
  display: block; margin-inline: auto;
  margin-top: var(--s-6);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-invert-soft);
}
.quiz__back:hover { color: #fff; }

/* Kết quả quiz */
.qres { animation: fadeUp var(--dur-slow) var(--ease-out); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
.qres__head { text-align: center; margin-bottom: var(--s-5); }
.qres__head .eyebrow { background: var(--vp-teal); color: #fff; }
.qres__head h3 { color: #fff; margin: var(--s-2) 0; }
.qres__head p { color: var(--ink-invert-soft); font-size: var(--fs-sm); }

.qres__card {
  display: grid; gap: var(--s-4);
  padding: var(--s-4);
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.qres__img {
  aspect-ratio: 1; border-radius: var(--r-md);
  background: var(--bg-soft); overflow: hidden;
}
.qres__img img { width: 100%; height: 100%; object-fit: contain; }
.qres__body h4 { margin-bottom: var(--s-2); }
.qres__items { display: grid; gap: .35rem; margin-bottom: var(--s-4); }
.qres__items li {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.qres__items li::before { content: '✓'; color: var(--vp-success); font-weight: var(--fw-black); }
.qres__price { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); }
.qres__price b { font-size: 1.55rem; font-weight: var(--fw-black); color: var(--vp-cta-700); letter-spacing: -.03em; }
.qres__price s { color: var(--ink-muted); font-size: var(--fs-sm); }
.qres__cta { display: grid; gap: var(--s-2); }

/* ───────────────────── 14. TAB LỌC & SẢN PHẨM ────────────────────── */
.tabs {
  display: flex; gap: var(--s-2);
  justify-content: flex-start;     /* mobile: bắt đầu từ trái để cuộn được */
  margin-bottom: var(--s-6);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* Từ tablet trở lên các tab vừa đủ một hàng → căn giữa cho cân với
   tiêu đề section (vốn cũng căn giữa) */
@media (min-width: 700px) {
  .tabs { justify-content: center; }
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  padding: .58rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-soft); white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.tab:hover { border-color: var(--vp-navy-200); color: var(--vp-navy); }
.tab.is-active { background: var(--vp-navy); border-color: var(--vp-navy); color: #fff; }

.prod__grid { display: grid; gap: var(--s-4); }

.pcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: transparent; }
.pcard.is-hidden { display: none; }

.pcard__media {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  padding: var(--s-4);
  display: grid; place-items: center;
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform var(--dur-slow) var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.07); }

.pcard__badge {
  position: absolute; top: var(--s-3); left: var(--s-3);
  padding: .3rem .68rem; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: var(--fw-black);
  color: #fff; z-index: 2; letter-spacing: -.01em;
}
.pcard__badge[data-tone="hot"]     { background: var(--vp-cta); }
.pcard__badge[data-tone="save"]    { background: var(--vp-success); }
.pcard__badge[data-tone="teal"]    { background: var(--vp-teal-700); }
.pcard__badge[data-tone="premium"] { background: var(--vp-navy); }

.pcard__off {
  position: absolute; top: var(--s-3); right: var(--s-3);
  padding: .28rem .55rem; border-radius: var(--r-xs);
  background: var(--vp-danger); color: #fff;
  font-size: 11.5px; font-weight: var(--fw-black); z-index: 2;
}

.pcard__wish {
  position: absolute; bottom: var(--s-3); right: var(--s-3);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.94);
  box-shadow: var(--sh-sm);
  font-size: 1rem; color: var(--ink-muted); z-index: 2;
  transition: color var(--dur) var(--ease), transform var(--dur-fast) var(--ease-spring);
}
.pcard__wish:hover { transform: scale(1.14); color: var(--vp-cta); }
.pcard__wish.is-on { color: var(--vp-danger); }

.pcard__body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; gap: var(--s-2); }
.pcard__line { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--vp-teal-700); letter-spacing: .04em; text-transform: uppercase; }
.pcard__name { font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.32; }
.pcard__rate { display: flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--ink-muted); }
.pcard__rate .stars { font-size: var(--fs-xs); }
.pcard__benefit { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }
.pcard__spec { font-size: var(--fs-xs); color: var(--ink-muted); }
.pcard__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.pcard__tags span {
  padding: .18rem .5rem; border-radius: var(--r-xs);
  background: var(--vp-navy-50); color: var(--vp-navy);
  font-size: 11px; font-weight: var(--fw-semibold);
}

.pcard__price { display: flex; align-items: baseline; gap: var(--s-2); margin-top: auto; padding-top: var(--s-2); }
.pcard__price b { font-size: 1.22rem; font-weight: var(--fw-black); color: var(--vp-cta-700); letter-spacing: -.025em; }
.pcard__price s { font-size: var(--fs-sm); color: var(--ink-muted); }

.pcard__acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-3); }
.pcard__acts .btn { --btn-py: .62rem; --btn-px: .6rem; font-size: var(--fs-sm); }

/* ─────────────────────────── 15. COMBO ───────────────────────────── */
.combo__grid { display: grid; gap: var(--s-5); }

.ccard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ccard:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }

/* Combo được neo làm lựa chọn mặc định — decoy effect */
.ccard--featured {
  border-color: var(--vp-cta);
  box-shadow: var(--sh-cta);
}
.ccard--featured::before {
  content: 'ĐƯỢC CHỌN NHIỀU NHẤT';
  display: block; padding: .5rem;
  background: var(--grad-cta); color: #fff;
  font-size: 11.5px; font-weight: var(--fw-black);
  letter-spacing: .07em; text-align: center;
}

.ccard__media {
  aspect-ratio: 4 / 3;
  background: #fff;
  padding: var(--s-4);
  display: grid; place-items: center;
}
.ccard__media img { width: 100%; height: 100%; object-fit: contain; }

.ccard__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.ccard__badge {
  align-self: flex-start;
  padding: .28rem .68rem; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: var(--fw-black); color: #fff;
  margin-bottom: var(--s-3);
}
.ccard__badge[data-tone="hot"]     { background: var(--vp-cta); }
.ccard__badge[data-tone="save"]    { background: var(--vp-success); }
.ccard__badge[data-tone="teal"]    { background: var(--vp-teal-700); }
.ccard__badge[data-tone="premium"] { background: var(--vp-navy); }

.ccard h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.ccard__for { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: var(--s-4); font-style: italic; }
.ccard__items { display: grid; gap: .4rem; margin-bottom: var(--s-4); }
.ccard__items li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }
.ccard__items li::before { content: '✓'; color: var(--vp-success); font-weight: var(--fw-black); flex: none; }

.ccard__price { margin-top: auto; padding-top: var(--s-3); border-top: 1px dashed var(--line); }
.ccard__row { display: flex; align-items: baseline; gap: var(--s-3); }
.ccard__row b { font-size: 1.55rem; font-weight: var(--fw-black); color: var(--vp-cta-700); letter-spacing: -.03em; }
.ccard__row s { font-size: var(--fs-sm); color: var(--ink-muted); }

/* Số tiền tiết kiệm tuyệt đối — chuyển đổi tốt hơn phần trăm */
.ccard__save {
  display: inline-block; margin-top: var(--s-2);
  padding: .25rem .6rem; border-radius: var(--r-xs);
  background: var(--vp-success-50); color: var(--vp-success);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.ccard__tag { font-size: var(--fs-xs); color: var(--vp-teal-700); font-weight: var(--fw-semibold); margin-top: var(--s-2); }
.ccard__acts { display: grid; gap: var(--s-2); margin-top: var(--s-4); }

.combo__note svg { color: var(--vp-gold); }
.combo__note {
  margin-top: var(--s-7); text-align: center;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.combo__note a { color: var(--vp-teal-800); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }

/* ─────────────── 15B. DẢI ẢNH FULL-WIDTH (parallax) ──────────────── */
.band {
  position: relative;
  padding: clamp(4rem, 3rem + 5vw, 7rem) 0;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  /* Nền dự phòng khi banner-lifestyle.jpg chưa có — vẫn ra một dải
     navy–teal đẹp, không bao giờ để lộ khoảng trắng vỡ */
  background: linear-gradient(120deg, #0A2B4F 0%, #12457E 45%, #0A8A85 100%);
}
.band__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--vnp-bg-band, none);   /* WP: đặt inline từ trang cấu hình */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;   /* hiệu ứng parallax khi cuộn */
}
.band::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,43,79,.88) 0%, rgba(10,43,79,.62) 55%, rgba(10,138,133,.5) 100%);
}
.band__inner { text-align: center; }
.band__quote {
  max-width: 40rem; margin: 0 auto var(--s-8);
  font-size: clamp(1.35rem, 1rem + 1.9vw, 2.2rem);
  font-weight: var(--fw-bold);
  line-height: 1.34;
  letter-spacing: var(--ls-snug);
}
.band__quote span { color: var(--vp-teal-400); }
.band__stats {
  display: grid; grid-template-columns: 1fr; gap: var(--s-5);
  max-width: 46rem; margin-inline: auto;
}
.band__stats > div {
  padding: var(--s-4);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md);
  backdrop-filter: blur(6px);
}
.band__stats b {
  display: block;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  font-weight: var(--fw-black);
  letter-spacing: -.03em;
}
.band__stats span { font-size: var(--fs-sm); color: rgba(255,255,255,.76); }

/* background-attachment: fixed gây giật và tốn pin trên iOS/Android →
   chuyển về nền tĩnh trên thiết bị cảm ứng */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .band__bg { background-attachment: scroll; }
}

/* ──────────────────────── 16. VÌ SAO VINAPET ─────────────────────── */
.why__layout { display: grid; gap: var(--s-7); }

.why__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.wg { margin: 0; position: relative; border-radius: var(--r-md); overflow: hidden; background: var(--bg-soft); }
.wg--big { grid-column: 1 / -1; aspect-ratio: 16 / 11; }
.wg:not(.wg--big) { aspect-ratio: 4 / 3; }
.wg img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.wg:hover img { transform: scale(1.06); }
.wg figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-5) var(--s-3) var(--s-3);
  background: linear-gradient(transparent, rgba(10,43,79,.86));
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}

.why__list { display: grid; gap: var(--s-4); }
.why { display: flex; gap: var(--s-4); align-items: flex-start; }
.why__ico {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--vp-teal-50);
  color: var(--vp-teal-700);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.why:hover .why__ico { background: var(--vp-teal); color: #fff; }
.why b { display: block; font-size: var(--fs-body); font-weight: var(--fw-bold); margin-bottom: .2rem; }
.why p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }

.legal {
  display: grid; gap: var(--s-4);
  margin-top: var(--s-8); padding: var(--s-6);
  background: var(--vp-navy-50);
  border-radius: var(--r-lg);
  border: 1px solid var(--vp-navy-100);
}
.legal > div { display: flex; flex-direction: column; gap: .15rem; }
.legal span { font-size: 11.5px; font-weight: var(--fw-bold); color: var(--vp-navy-500); text-transform: uppercase; letter-spacing: .05em; }
.legal b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--vp-navy-900); line-height: 1.45; }

/* ───────────────────── 17. BA DÒNG SẢN PHẨM ──────────────────────── */
.lines { display: grid; gap: var(--s-5); }
.line {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.line:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
/* Ảnh 3 dòng sản phẩm là infographic DỌC (682×1447) — dùng khung dọc và
   `contain` để hiện trọn vẹn, không cắt mất mascot và bảng thành phần.
   Nếu sau này thay bằng ảnh đời thường ngang thì đổi lại 4/3 + cover. */
.line__media {
  aspect-ratio: 2 / 3;
  background: var(--bg-soft);
  overflow: hidden;
  display: grid; place-items: center;
}
.line__media img { width: 100%; height: 100%; object-fit: contain; }
.line__body { padding: var(--s-5); display: flex; flex-direction: column; flex: 1; }
.line__body h3 { font-size: 1.32rem; }
.line__slogan { font-weight: var(--fw-bold); font-size: var(--fs-sm); margin: .2rem 0 var(--s-3); }
.line--cd .line__slogan { color: var(--line-cungdinh); }
.line--cc .line__slogan { color: var(--line-catchy); }
.line--ch .line__slogan { color: var(--line-catholic); }
.line__body > p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.6; }

.ticks { display: grid; gap: .3rem; margin: var(--s-4) 0; }
.ticks li { display: flex; gap: .5rem; font-size: var(--fs-xs); color: var(--ink-muted); }
.ticks li::before { content: '•'; color: var(--vp-teal); font-weight: var(--fw-black); }

.line__cta { margin-top: auto; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--vp-navy); }
.line__cta:hover { color: var(--vp-cta-700); }

/* ────────────────────── 18. REVIEW · UGC ─────────────────────────── */
.ugc { position: relative; margin-bottom: var(--s-8); }
.ugc__track {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--s-3);
  scrollbar-width: none; -ms-overflow-style: none;
}
.ugc__track::-webkit-scrollbar { display: none; }

.uvid {
  flex: none; width: 205px;
  scroll-snap-align: start;
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--vp-navy-900);
  box-shadow: var(--sh-md);
  transition: transform var(--dur) var(--ease-out);
}
.uvid:hover { transform: translateY(-6px) scale(1.02); }
.uvid img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.uvid__play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--vp-navy); font-size: 1.1rem;
  box-shadow: var(--sh-md);
  transition: transform var(--dur) var(--ease-spring);
}
.uvid:hover .uvid__play { transform: scale(1.14); }
.uvid__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--s-6) var(--s-3) var(--s-3);
  background: linear-gradient(transparent, rgba(10,43,79,.92));
  color: #fff;
}
.uvid__meta b { display: block; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.35; margin-bottom: .2rem; }
.uvid__meta small { font-size: 11px; opacity: .78; }
.uvid__dur {
  position: absolute; top: var(--s-2); right: var(--s-2);
  padding: .12rem .4rem; border-radius: var(--r-xs);
  background: rgba(10,43,79,.72); color: #fff; font-size: 10.5px; font-weight: var(--fw-semibold);
}

.cnav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; z-index: 3;
  display: none; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-md);
  font-size: 1.4rem; color: var(--vp-navy);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cnav:hover { background: var(--vp-navy); color: #fff; transform: translateY(-50%) scale(1.08); }
.cnav--prev { left: -18px; }
.cnav--next { right: -18px; }

.reviews__grid { display: grid; gap: var(--s-4); }
.rcard {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease);
}
.rcard:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.rcard__top { display: flex; align-items: center; gap: var(--s-3); }
.rcard__top img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--bg-soft); }
.rcard__who b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.rcard__who small { font-size: var(--fs-xs); color: var(--ink-muted); }
.rcard__verified {
  display: inline-flex; align-items: center; gap: .22rem;
  font-size: 11px; font-weight: var(--fw-bold); color: var(--vp-success);
}
.rcard p { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.65; }
.rcard__photo { aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; background: var(--bg-soft); }
.rcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.rcard__prod {
  font-size: var(--fs-xs); color: var(--ink-muted);
  padding-top: var(--s-3); border-top: 1px dashed var(--line);
}
.rcard__prod b { color: var(--vp-navy); }

.ba { margin-top: var(--s-8); padding: var(--s-6); background: var(--bg-soft); border-radius: var(--r-lg); }
.ba h3 { text-align: center; margin-bottom: var(--s-5); font-size: 1.15rem; }
.ba__grid { display: grid; gap: var(--s-4); }
.ba figure { margin: 0; }
.ba figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); background: var(--surface); }
.ba figcaption { margin-top: var(--s-2); text-align: center; font-size: var(--fs-xs); color: var(--ink-muted); font-weight: var(--fw-semibold); }
.ba__note { margin-top: var(--s-4); text-align: center; font-size: 11.5px; color: var(--ink-muted); font-style: italic; }

/* ────────────────────── 19. BẢNG SO SÁNH ─────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--sh-sm);
  -webkit-overflow-scrolling: touch;
}
.cmp { min-width: 660px; font-size: var(--fs-sm); }
.cmp th, .cmp td { padding: var(--s-4) var(--s-3); text-align: left; vertical-align: top; }
.cmp thead th {
  background: var(--vp-navy-50);
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  color: var(--vp-navy); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--vp-navy-100);
}
.cmp tbody th {
  font-weight: var(--fw-bold); color: var(--ink);
  background: var(--surface-2); width: 26%;
}
.cmp tbody tr { border-bottom: 1px solid var(--line); }
.cmp tbody tr:last-child { border-bottom: 0; }
.cmp td { color: var(--ink-soft); }

.cmp .best { background: var(--vp-cta-50); color: var(--ink); font-weight: var(--fw-semibold); }
.cmp thead .best { background: var(--vp-cta); color: #fff; border-bottom-color: var(--vp-cta-700); }
.cmp__brand { display: inline-flex; align-items: center; gap: .4rem; }
.cmp__brand img { border-radius: 50%; }
.cmp__hl td, .cmp__hl th { background: var(--vp-gold-50); }
.cmp__hl .best { background: var(--vp-cta-100); }

.cmp i { display: inline-block; width: 16px; margin-right: .35rem; font-style: normal; font-weight: var(--fw-black); }
.cmp i.ok::before  { content: '✓'; color: var(--vp-success); }
.cmp i.mid::before { content: '~'; color: var(--vp-gold); }
.cmp i.no::before  { content: '✕'; color: var(--vp-danger); }

/* ──────────────────────────── 20. FAQ ────────────────────────────── */
.faq { display: grid; gap: var(--s-3); }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq__item.is-open { border-color: var(--vp-teal); box-shadow: var(--sh-sm); }

.faq__q {
  width: 100%; display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  text-align: left;
  font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink);
  line-height: 1.45;
}
.faq__q:hover { background: var(--surface-2); }
.faq__q span { flex: 1; }
.faq__q i {
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--vp-teal-50); color: var(--vp-teal-800);
  font-style: normal; font-size: 1.15rem; font-weight: var(--fw-bold); line-height: 1;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq__item.is-open .faq__q i { transform: rotate(45deg); background: var(--vp-teal); color: #fff; }

.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faq__a p {
  padding: 0 var(--s-5) var(--s-5);
  font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.7;
}
.faq__more { margin-top: var(--s-6); text-align: center; font-size: var(--fs-sm); color: var(--ink-soft); }
.faq__more a { color: var(--vp-teal-800); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 3px; }

/* ────────────────── 21. ƯU ĐÃI CUỐI + FORM LEAD ──────────────────── */
.offer { padding-bottom: calc(var(--section-y) + 60px); }
.offer__card {
  display: grid; gap: var(--s-7);
  padding: var(--s-6) var(--s-5);
  background: var(--grad-navy);
  border-radius: var(--r-xl);
  color: #fff;
  box-shadow: var(--sh-xl);
  position: relative; overflow: hidden;
}
/* Ảnh nền khối ưu đãi cuối trang, phủ gradient navy để chữ nổi rõ */
.offer__card::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--vnp-bg-offer, none);  /* WP: đặt inline từ trang cấu hình */
  background-size: cover; background-position: center;
  opacity: .22; pointer-events: none;
}
.offer__card::after {
  content: ''; position: absolute;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(15,185,177,.32), transparent 70%);
  top: -140px; right: -120px; pointer-events: none;
}
.offer__left { position: relative; z-index: 1; }
.offer__left h2 { color: #fff; margin: var(--s-5) 0 var(--s-4); }

.countdown { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.countdown > span { font-size: 1.5rem; font-weight: var(--fw-black); color: rgba(255,255,255,.4); }
.cd {
  min-width: 62px; padding: var(--s-3) var(--s-2);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--r-sm);
  text-align: center;
}
.cd b {
  display: block; font-size: 1.55rem; font-weight: var(--fw-black);
  color: #fff; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
.cd small { display: block; margin-top: .2rem; font-size: 10.5px; color: var(--ink-invert-soft); text-transform: uppercase; letter-spacing: .05em; }

.offer__list { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.offer__list li {
  display: flex; gap: var(--s-3); align-items: flex-start;
  font-size: var(--fs-sm); color: var(--ink-invert-soft); line-height: 1.55;
}
.offer__list li::before {
  content: '✓'; flex: none;
  width: 20px; height: 20px; margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--vp-teal); color: #fff;
  font-size: 11px; font-weight: var(--fw-black);
}
.offer__list b { color: #fff; font-weight: var(--fw-bold); }
.offer__cta { display: grid; gap: var(--s-3); }

.offer__right { position: relative; z-index: 1; }
.lead, .lead__ok {
  padding: var(--s-5);
  background: var(--surface);
  border-radius: var(--r-lg);
  color: var(--ink);
  box-shadow: var(--sh-lg);
}
.lead h3 { font-size: 1.15rem; margin-bottom: var(--s-2); }
.lead h3 span { color: var(--vp-cta-700); }
.lead > p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--s-5); line-height: 1.6; }
.lead__note { margin-top: var(--s-3); font-size: 11.5px; color: var(--ink-muted); text-align: center; line-height: 1.5; }

.lead__ok { text-align: center; }
.lead__ok-ico { display: grid; place-items: center; margin-bottom: var(--s-3); }
.lead__ok h3 { margin-bottom: var(--s-2); }
.lead__ok p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--s-5); }

/* ────────────────────── 22. FORM (dùng chung) ────────────────────── */
.field { display: block; margin-bottom: var(--s-4); border: 0; padding: 0; }
.field__label {
  display: block; margin-bottom: .35rem;
  font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink-soft);
}
.field input, .field select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 1rem;  /* 16px — tránh iOS tự zoom khi focus */
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--ink-muted); }
.field input:focus, .field select:focus { outline: none; border-color: var(--vp-teal); box-shadow: 0 0 0 3px var(--vp-teal-50); }
.field.has-error input, .field.has-error select { border-color: var(--vp-danger); background: var(--vp-danger-50); }

.field__err { display: none; margin-top: .3rem; font-size: var(--fs-xs); color: var(--vp-danger); font-weight: var(--fw-semibold); }
.field.has-error .field__err { display: block; }

.form-grid { display: grid; gap: 0; }
.field--full { grid-column: 1 / -1; }

.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: all var(--dur) var(--ease);
}
.chip input:checked + span { border-color: var(--vp-teal); background: var(--vp-teal-50); color: var(--vp-teal-800); }
.chip input:focus-visible + span { box-shadow: var(--ring); }

.voucher { display: flex; gap: var(--s-2); }
.voucher input { flex: 1; text-transform: uppercase; }
.voucher .btn { flex: none; --btn-py: .8rem; --btn-px: 1.1rem; }

.vchips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.vchip {
  padding: .32rem .7rem; border-radius: var(--r-pill);
  border: 1px dashed var(--vp-teal); background: var(--vp-teal-50);
  color: var(--vp-teal-800); font-size: 11.5px; font-weight: var(--fw-bold);
  transition: background var(--dur) var(--ease);
}
.vchip:hover { background: var(--vp-teal-100); }
.vchip.is-used { opacity: .45; pointer-events: none; }

/* ────────────────────────── 23. FOOTER ───────────────────────────── */
.footer {
  position: relative;
  background-color: var(--vp-navy-900);
  color: var(--ink-invert-soft);
  padding-top: var(--s-9);
  overflow: hidden;
}
/* Ảnh nền footer rất mờ (12%) — chỉ để tạo chiều sâu, không tranh
   sự chú ý với nội dung liên hệ */
.footer::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--vnp-bg-footer, none); /* WP: đặt inline từ trang cấu hình */
  background-size: cover; background-position: center;
  opacity: .12;
}
.footer > * { position: relative; }
.footer__grid { display: grid; gap: var(--s-7); padding-bottom: var(--s-8); }
.brand--footer { margin-bottom: var(--s-4); }
.brand--footer .brand__name { color: #fff; }
.footer__brand > p { font-size: var(--fs-sm); line-height: 1.65; max-width: 24rem; }

.socials { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.socials a {
  padding: .42rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--line-invert);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.socials a:hover { background: var(--vp-teal); border-color: var(--vp-teal); color: #fff; }

.footer__col { display: flex; flex-direction: column; gap: .6rem; }
.footer__col h4 { color: #fff; font-size: var(--fs-body); margin-bottom: var(--s-2); }
.footer__col a { font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.footer__col a:hover { color: var(--vp-teal-400); }
.footer__addr { font-size: var(--fs-xs); line-height: 1.6; opacity: .82; }
.footer__addr b { color: #fff; font-weight: var(--fw-semibold); }

.footer__bottom {
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-5) var(--gutter);
  border-top: 1px solid var(--line-invert);
  font-size: var(--fs-xs);
}

/* ───────────────── 24. LỚP CHUYỂN ĐỔI NỔI ────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-stickycta);
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(16,40,66,.1);
  animation: slideUp var(--dur) var(--ease-out);
}
@keyframes slideUp { from { transform: translateY(100%); } }
.sticky-cta__info { flex: 1; min-width: 0; }
.sticky-cta__info b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--vp-cta-700); }
.sticky-cta__info small { display: block; font-size: 11px; color: var(--ink-muted); }
.sticky-cta .btn { flex: none; --btn-py: .72rem; --btn-px: 1.35rem; }

.floating {
  position: fixed; right: var(--s-4); bottom: var(--s-4);
  z-index: var(--z-fab);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.fab {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: var(--sh-lg);
  color: #fff; font-weight: var(--fw-black); font-size: var(--fs-xs);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
}
.fab:hover { transform: scale(1.1); box-shadow: var(--sh-xl); }
.fab--zalo { background: #0068FF; }
.fab--mess { background: linear-gradient(45deg, #0099FF, #A033FF 60%, #FF5280); }
.fab--mess svg { width: 25px; height: 25px; fill: #fff; }
.fab--top { background: var(--vp-navy); font-size: 1.15rem; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.fab--top.is-show { opacity: 1; pointer-events: auto; }

/* Popup "vừa có người đặt hàng" */
.rp {
  position: fixed; left: var(--s-4); bottom: var(--s-4);
  z-index: var(--z-fab);
  display: flex; align-items: center; gap: var(--s-3);
  max-width: 310px; padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  animation: rpIn var(--dur-slow) var(--ease-spring);
}
@keyframes rpIn { from { opacity: 0; transform: translateX(-24px); } }
.rp.is-out { animation: rpOut var(--dur) var(--ease) forwards; }
@keyframes rpOut { to { opacity: 0; transform: translateX(-24px); } }
.rp img { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: contain; background: var(--bg-soft); flex: none; }
.rp__body { min-width: 0; flex: 1; }
.rp__body p { font-size: var(--fs-xs); line-height: 1.35; }
.rp__body b { font-weight: var(--fw-bold); }
.rp__prod { color: var(--vp-navy); font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp__body small { font-size: 10.5px; color: var(--ink-muted); }
.rp__close { position: absolute; top: 2px; right: 6px; font-size: 1.1rem; color: var(--ink-muted); line-height: 1; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 90px;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  background: var(--vp-navy-900); color: #fff;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  box-shadow: var(--sh-xl);
  animation: toastIn var(--dur) var(--ease-spring);
  max-width: calc(100vw - 32px);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 16px); } }

/* ───────────────────────── 25. GIỎ HÀNG ──────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }
.drawer__scrim, .modal__scrim {
  position: absolute; inset: 0;
  background: rgba(10,43,79,.5);
  backdrop-filter: blur(3px);
  animation: fade var(--dur) var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--bg-soft);
  box-shadow: var(--sh-xl);
  animation: drawerIn var(--dur) var(--ease-out);
}
@keyframes drawerIn { from { transform: translateX(100%); } }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex: none;
}
.drawer__head h3 { font-size: 1.1rem; }

.shipbar { padding: var(--s-3) var(--s-5); background: var(--vp-teal-50); flex: none; }
.shipbar p { font-size: var(--fs-xs); color: var(--vp-teal-800); margin-bottom: .4rem; font-weight: var(--fw-semibold); }
.shipbar p b { font-weight: var(--fw-black); }
.shipbar__track { height: 6px; border-radius: var(--r-pill); background: var(--vp-teal-100); overflow: hidden; }
.shipbar__track span {
  display: block; height: 100%; width: 0;
  background: var(--grad-teal); border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease-out);
}

.drawer__body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5); }

.citem {
  display: flex; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--surface);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  margin-bottom: var(--s-3);
}
.citem__img { width: 66px; height: 66px; flex: none; border-radius: var(--r-sm); background: var(--bg-soft); object-fit: contain; padding: 4px; }
.citem__body { flex: 1; min-width: 0; }
.citem__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.35; margin-bottom: .15rem; }
.citem__meta { font-size: 11px; color: var(--ink-muted); margin-bottom: var(--s-2); }
.citem__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.citem__price { font-size: var(--fs-sm); font-weight: var(--fw-black); color: var(--vp-cta-700); }

.qty { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-pill); overflow: hidden; }
.qty button {
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 1rem; font-weight: var(--fw-bold); color: var(--vp-navy);
  transition: background var(--dur) var(--ease);
}
.qty button:hover { background: var(--vp-navy-50); }
.qty span { min-width: 26px; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

.citem__del { align-self: flex-start; font-size: 1.1rem; color: var(--ink-muted); line-height: 1; padding: 2px; }
.citem__del:hover { color: var(--vp-danger); }

.cart-empty { text-align: center; padding: var(--s-9) var(--s-4); }
.cart-empty__ico { display: grid; place-items: center; margin-bottom: var(--s-4); }
.cart-empty p { font-size: var(--fs-sm); color: var(--ink-muted); margin-bottom: var(--s-5); }

.upsell { padding: var(--s-4) var(--s-5); background: var(--vp-gold-50); border-top: 1px solid var(--line); flex: none; }
.upsell__title {
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  color: var(--ink); margin-bottom: var(--s-3);
}
.upsell__title svg { color: var(--vp-gold); }
.upsell__list { display: flex; gap: var(--s-3); overflow-x: auto; scrollbar-width: none; }
.upsell__list::-webkit-scrollbar { display: none; }
.ucard {
  flex: none; width: 128px;
  padding: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  text-align: center;
}
.ucard img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: .3rem; background: var(--bg-soft); border-radius: var(--r-xs); }
.ucard b { display: block; font-size: 11px; font-weight: var(--fw-bold); line-height: 1.3; margin-bottom: .2rem; }
.ucard span { display: block; font-size: 11.5px; font-weight: var(--fw-black); color: var(--vp-cta-700); margin-bottom: .35rem; }
.ucard button {
  width: 100%; padding: .3rem; border-radius: var(--r-pill);
  background: var(--vp-navy-50); color: var(--vp-navy);
  font-size: 11px; font-weight: var(--fw-bold);
  transition: background var(--dur) var(--ease);
}
.ucard button:hover { background: var(--vp-navy); color: #fff; }

.drawer__foot {
  padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line);
  flex: none;
}
.drow { display: flex; justify-content: space-between; align-items: center; padding: .3rem 0; font-size: var(--fs-sm); }
.drow--muted { color: var(--ink-muted); }
.drow--total {
  padding-top: var(--s-3); margin-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-body); font-weight: var(--fw-bold);
}
.drow--total b { font-size: 1.32rem; font-weight: var(--fw-black); color: var(--vp-cta-700); letter-spacing: -.025em; }
.drawer__foot .btn { margin-top: var(--s-4); }
.drawer__zalo {
  display: block; margin-top: var(--s-3); text-align: center;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--vp-teal-800);
}

/* ─────────────────────── 26. CHECKOUT MODAL ──────────────────────── */
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--s-4); }
.modal__panel {
  position: relative;
  width: min(880px, 100%);
  max-height: min(92vh, 900px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  overflow: hidden;
  animation: modalIn var(--dur) var(--ease-out);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.98); } }

.modal__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  flex: none;
}
.modal__body { flex: 1; overflow-y: auto; padding: var(--s-5) var(--s-4) var(--s-6); }

.steps { display: flex; align-items: center; gap: var(--s-2); flex: 1; overflow-x: auto; scrollbar-width: none; }
.steps::-webkit-scrollbar { display: none; }
.step { display: flex; align-items: center; gap: .4rem; flex: none; font-size: var(--fs-xs); color: var(--ink-muted); }
.step b {
  width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--line); color: var(--ink-muted);
  font-size: 11px; font-weight: var(--fw-black);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.step em { font-style: normal; font-weight: var(--fw-semibold); }
.step.is-active { color: var(--vp-navy); }
.step.is-active b { background: var(--vp-cta); color: #fff; }
.step.is-done b { background: var(--vp-success); color: #fff; }
.step.is-done b::before { content: '✓'; }
.step.is-done b { font-size: 0; }
.step.is-done b::before { font-size: 12px; }

.cstep { display: none; }
.cstep.is-active { display: block; animation: fadeUp var(--dur) var(--ease-out); }
.cstep__title { font-size: 1.22rem; margin-bottom: .3rem; }
.cstep__sub { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--s-5); }
.cstep__foot { margin-top: var(--s-5); }
.cstep__foot--split { display: flex; gap: var(--s-3); }
.cstep__foot--split .btn:first-child { flex: none; }
.cstep__foot--split .btn:last-child { flex: 1; }

/* Bảng tóm tắt đơn hàng */
.sum { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.sum__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-4);
  background: var(--vp-navy-50);
  border-bottom: 1px solid var(--vp-navy-100);
}
.sum__head b { font-size: var(--fs-body); color: var(--vp-navy-900); }
.sum__head small { display: block; font-size: var(--fs-xs); color: var(--vp-navy-500); }

.sum__cust { padding: var(--s-4); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.sum__cust div { display: flex; gap: var(--s-3); padding: .22rem 0; font-size: var(--fs-sm); }
.sum__cust span { flex: none; width: 88px; color: var(--ink-muted); font-size: var(--fs-xs); padding-top: 2px; }
.sum__cust b { flex: 1; font-weight: var(--fw-semibold); }

.sum__items { padding: var(--s-2) var(--s-4); }
.sline { display: flex; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px dashed var(--line); }
.sline:last-child { border-bottom: 0; }
.sline img { width: 50px; height: 50px; flex: none; object-fit: contain; background: var(--bg-soft); border-radius: var(--r-xs); padding: 3px; }
.sline__body { flex: 1; min-width: 0; }
.sline__body b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1.35; }
.sline__body small { display: block; font-size: 11px; color: var(--ink-muted); }
.sline__amt { flex: none; text-align: right; font-size: var(--fs-sm); font-weight: var(--fw-bold); }

.sum__totals { padding: var(--s-4); background: var(--surface-2); border-top: 1px solid var(--line); }
.sum__totals .drow { font-size: var(--fs-sm); }
.sum__gift svg { color: var(--vp-gold); }
.sum__gift {
  display: flex; align-items: center; gap: var(--s-2);
  margin: var(--s-3) 0;
  padding: var(--s-3);
  background: var(--vp-gold-50);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: #8A6100;
}
.tone-ok { color: var(--vp-success); }

/* Màn hình QR */
.pay { display: grid; gap: var(--s-5); }
.pay__qr { text-align: center; }
.qr-box {
  display: inline-grid; place-items: center;
  padding: var(--s-3);
  background: var(--surface);
  border: 2px solid var(--vp-teal);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.qr-box img { width: 220px; height: 220px; }
.pay__timer { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-soft); }
.pay__timer b { font-variant-numeric: tabular-nums; color: var(--vp-cta-700); font-weight: var(--fw-black); font-size: var(--fs-body); }
.pay__qr .btn { margin-top: var(--s-3); }

.prow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px dashed var(--line);
  font-size: var(--fs-sm);
}
.prow:last-of-type { border-bottom: 0; }
.prow > span { color: var(--ink-muted); flex: none; }
.prow > b { font-weight: var(--fw-bold); text-align: right; word-break: break-word; }
.prow--amount b { font-size: 1.28rem; font-weight: var(--fw-black); color: var(--vp-cta-700); letter-spacing: -.02em; }

.copyable { cursor: pointer; position: relative; padding-right: 22px; transition: color var(--dur) var(--ease); }
.copyable::after {
  content: '⧉'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: .9em; color: var(--vp-teal); font-weight: var(--fw-regular);
}
.copyable:hover { color: var(--vp-teal-800); }

.pay__warn svg { color: var(--vp-gold); vertical-align: -4px; }
.pay__warn {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--vp-gold-50);
  border-left: 3px solid var(--vp-gold);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs); color: #7A5500; line-height: 1.55;
}
.pay__status {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--vp-navy-50);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--vp-navy);
  margin-bottom: var(--s-4);
}
.pay__status.is-ok     { background: var(--vp-success-50); color: var(--vp-success); }
.pay__status.is-expired{ background: var(--vp-danger-50);  color: var(--vp-danger); }
.pay__actions { display: grid; gap: var(--s-2); }

.spinner {
  width: 15px; height: 15px; flex: none;
  border: 2px solid var(--vp-navy-200);
  border-top-color: var(--vp-navy);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Màn hình thành công */
.success { text-align: center; padding: var(--s-4) 0; }
.success__ico { width: 76px; height: 76px; margin: 0 auto var(--s-4); }
.success__ico svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sc-c { stroke: var(--vp-success); stroke-width: 2; stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s var(--ease-out) forwards; }
.sc-k { stroke: var(--vp-success); stroke-width: 3.4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s var(--ease-out) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.success h3 { font-size: 1.4rem; margin-bottom: var(--s-2); }
.success > p { font-size: var(--fs-sm); color: var(--ink-soft); margin-bottom: var(--s-5); }
.success__box {
  text-align: left; max-width: 460px; margin: 0 auto var(--s-5);
  padding: var(--s-4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.success__note { font-size: var(--fs-xs); color: var(--ink-muted); margin-bottom: var(--s-5); }
.success__note a { color: var(--vp-teal-800); font-weight: var(--fw-bold); }
.success__cta { display: grid; gap: var(--s-2); max-width: 340px; margin-inline: auto; }

/* Placeholder cho ảnh chưa được tạo — trang không bao giờ vỡ layout.
   Hiện tên file cần tạo để vừa giữ khung, vừa làm checklist trực quan
   cho người sinh ảnh. Xem docs/IMAGE-PROMPTS.md. */
.img-missing {
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--vp-navy-50) 0%, var(--vp-teal-50) 100%) !important;
  border: 1px dashed var(--vp-navy-200);
  border-radius: inherit;
  color: var(--vp-navy-500);
  font-size: 10.5px; font-weight: var(--fw-semibold);
  text-align: center; padding: 6px;
  word-break: break-all; line-height: 1.35;
  filter: none !important;
  animation: none !important;
}
/* Ảnh hero là ảnh lớn nhất — cho placeholder chiều cao tối thiểu tử tế */
.hero__stage .img-missing { min-height: 320px; font-size: var(--fs-xs); }

/* Placeholder trong các ô nhỏ phải giữ đúng kích thước ô, nếu để rộng
   100% sẽ đẩy vỡ bố cục của popup vừa-mua và thẻ review */
.rp .img-missing         { width: 46px !important; height: 46px; flex: none; aspect-ratio: auto !important; font-size: 0; }
.rcard__top .img-missing { width: 44px !important; height: 44px; flex: none; aspect-ratio: auto !important; font-size: 0; border-radius: 50%; }
.ucard .img-missing      { aspect-ratio: 1 !important; font-size: 9px; }
.citem .img-missing      { width: 66px !important; height: 66px; flex: none; aspect-ratio: auto !important; font-size: 0; }
.sline .img-missing      { width: 50px !important; height: 50px; flex: none; aspect-ratio: auto !important; font-size: 0; }

/* ═══════════════════ 27. RESPONSIVE ═══════════════════════════════ */

/* < 560px — nút chiếm trọn chiều ngang, cho phép chữ xuống dòng */
@media (max-width: 559px) {
  .btn { white-space: normal; }
  .btn--lg { --btn-px: 1.3rem; }
}

/* ≥ 560px — lưới 2 cột cho card nhỏ */
@media (min-width: 560px) {
  .band__stats { grid-template-columns: repeat(3, 1fr); }
  .pain__grid    { grid-template-columns: repeat(2, 1fr); }
  .prod__grid    { grid-template-columns: repeat(2, 1fr); }
  .combo__grid   { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .ba__grid      { grid-template-columns: repeat(2, 1fr); }
  .stats__grid   { grid-template-columns: repeat(4, 1fr); }
  .legal         { grid-template-columns: repeat(2, 1fr); }
  .form-grid     { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); }
  .hero__cta     { grid-template-columns: auto auto; justify-content: start; }
  .offer__cta    { grid-template-columns: auto auto; }
  .pcard__acts   { grid-template-columns: 1fr 1fr; }
}

/* ≥ 768px — tablet */
@media (min-width: 768px) {
  .header__phone { display: inline-flex; }
  .burger        { display: none; }
  .mmenu         { display: none !important; }

  .hero          { padding: var(--s-10) 0 var(--s-8); }
  .sol__grid     { grid-template-columns: repeat(2, 1fr); }
  .lines         { grid-template-columns: repeat(3, 1fr); }
  .combo__grid   { grid-template-columns: repeat(3, 1fr); }
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .legal         { grid-template-columns: repeat(4, 1fr); }
  .cnav          { display: grid; }

  .qres__card    { grid-template-columns: 190px 1fr; align-items: center; }
  .qres__cta     { grid-template-columns: 1fr 1fr; }
  .quiz          { padding: var(--s-7) var(--s-7) var(--s-8); }
  .quiz__opts    { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-4); }

  .pay           { grid-template-columns: 300px 1fr; align-items: start; gap: var(--s-6); }
  .modal__body   { padding: var(--s-6); }
  .modal__head   { padding: var(--s-4) var(--s-6); }
  .offer__card   { padding: var(--s-8); }
  .footer__grid  { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer__bottom{ flex-direction: row; justify-content: space-between; }
  .uvid          { width: 224px; }
  .step em       { display: inline; }
}

/* ≥ 1024px — desktop */
@media (min-width: 1024px) {
  .nav { display: flex; }

  .hero__grid    { grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s-8); }
  .hero          { padding: var(--s-11) 0 var(--s-8); }
  .hero__benefits{ max-width: 30rem; }

  .pain__grid    { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .sol__grid     { grid-template-columns: repeat(3, 1fr); }
  .prod__grid    { grid-template-columns: repeat(4, 1fr); }
  .combo__grid   { grid-template-columns: repeat(4, 1fr); }

  .why__layout   { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--s-8); }
  .why__list     { gap: var(--s-5); }

  .offer__card   { grid-template-columns: 1.15fr .85fr; align-items: center; gap: var(--s-9); padding: var(--s-9); }

  .footer__grid  { grid-template-columns: 2fr 1fr 1fr 1.4fr; }

  /* Sticky CTA chỉ cần trên mobile/tablet — desktop đã có header + nút trong trang */
  .sticky-cta    { display: none !important; }
}

/* ≥ 1280px */
@media (min-width: 1280px) {
  .combo__grid { grid-template-columns: repeat(4, 1fr); }
  .fcard--rating { left: -6%; }
  .fcard--sold   { right: -6%; }
}

/* Chừa chỗ cho sticky CTA trên mobile để không che footer */
@media (max-width: 1023px) {
  body { padding-bottom: 0; }
  body.has-sticky-cta { padding-bottom: 72px; }
  .floating { bottom: calc(var(--s-4) + 72px); }
  .rp { bottom: calc(var(--s-4) + 72px); max-width: 280px; }
}

/* Màn hình rất nhỏ (≤360px) — iPhone SE, Android đời cũ.
   Ẩn tagline thương hiệu và thu gọn khoảng cách để dòng header không
   tràn ngang (đã kiểm chứng: 320px tràn 12px nếu giữ nguyên tagline). */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .header__inner { gap: var(--s-2); }
  .header__actions { gap: 0; }
  .brand__tag { display: none; }
  .brand img { width: 34px; height: 34px; }
  .brand__name { font-size: 1.12rem; }
  .cart-btn, .burger { width: 38px; height: 38px; }
  .hero__title { font-size: 1.85rem; }
  .cd { min-width: 54px; }
  .uvid { width: 168px; }
}

/* In ấn */
@media print {
  .announce, .header, .floating, .sticky-cta, .rp, .toast, .drawer, .modal { display: none !important; }
  body { padding: 0; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   WORDPRESS ADDITIONS
   Chỉ thêm những gì bản HTML tĩnh chưa có. Không sửa quy tắc nào ở trên.
   ═══════════════════════════════════════════════════════════════════ */

/* Quà tặng trong giỏ: hiện như một dòng bình thường nhưng không có nút
   +/- và nút xoá, vì hệ thống tự thêm và tự gỡ theo ngưỡng đơn hàng. */
.citem__gift {
  display: inline-flex; align-items: center;
  padding: .25rem .6rem;
  border-radius: var(--r-pill);
  background: var(--vp-success-50);
  color: var(--vp-success);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}

/* ═══════════════════════════════════════════════════════════════════
   CỬA SỔ ĐẶT HÀNG — BỐ CỤC 2 CỘT
   ───────────────────────────────────────────────────────────────────
   User yêu cầu dựng lại phần đặt hàng cho chuyên nghiệp (2026-08-02).
   Bố cục theo chuẩn các sàn lớn: cột trái là việc khách phải làm, cột
   phải là tóm tắt đơn dán cố định — khách luôn thấy mình trả bao nhiêu
   trong lúc điền. Màn hình hẹp thì tóm tắt gập thành một dòng bấm mở ở
   ĐẦU form, không tranh chỗ với nút bấm chính.

   Mọi quy tắc bọc trong #checkoutModal nên phần còn lại của trang vẫn
   giống bản HTML gốc từng pixel.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Khung ngoài ────────────────────────────────────────────────── */
.modal__panel--checkout { width: min(1040px, 100%); }

#checkoutModal .modal__body { padding: 0; }

#checkoutModal .cogrid { display: grid; }

/* ── Thanh tiêu đề: ổ khoá + chữ "Đặt hàng" + 4 bước ────────────── */
#checkoutModal .cohead { gap: var(--s-4); padding: var(--s-3) var(--s-4); }
#checkoutModal .cohead__brand {
  display: none; align-items: center; gap: .45rem; flex: none;
  font-size: var(--fs-sm); color: var(--vp-navy-900);
}
#checkoutModal .cohead__brand b { font-weight: var(--fw-black); letter-spacing: -.01em; }
#checkoutModal .cohead__lock { width: 17px; height: 17px; color: var(--vp-success); }
#checkoutModal .step.is-active b { box-shadow: 0 0 0 4px var(--vp-cta-100); }
#checkoutModal .step.is-done b { box-shadow: 0 0 0 3px var(--vp-success-50); }

/* ── Cột trái ───────────────────────────────────────────────────── */
#checkoutModal .cogrid__main { padding: var(--s-5) var(--s-4) var(--s-4); min-width: 0; }
#checkoutModal .cstep__title { font-size: 1.16rem; }
#checkoutModal .cstep__sub { margin-bottom: var(--s-4); }

/* ── Nhóm trường có tiêu đề ─────────────────────────────────────── */
#checkoutModal .cogroup {
  margin: 0 0 var(--s-4);
  padding: 0 0 var(--s-4);
  border: 0; border-bottom: 1px solid var(--line);
}
#checkoutModal .cogroup--last { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
#checkoutModal .cogroup__t {
  padding: 0 0 var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--vp-navy-500);
}

/* ── Ô nhập ─────────────────────────────────────────────────────── */
#checkoutModal .field { margin-bottom: var(--s-3); }
#checkoutModal .cogroup .field:last-child { margin-bottom: 0; }
#checkoutModal .field__label {
  margin-bottom: .3rem; color: var(--ink-soft); letter-spacing: .01em;
}
#checkoutModal .field input,
#checkoutModal .field select {
  padding: .72rem .9rem .72rem 2.5rem;
  border-color: var(--line);
  border-radius: var(--r-md);
  background-color: var(--surface-2);
  background-repeat: no-repeat;
  background-position: .85rem center;
  background-size: 17px 17px;
}
#checkoutModal .field input:hover,
#checkoutModal .field select:hover { border-color: var(--line-strong); }
#checkoutModal .field input:focus,
#checkoutModal .field select:focus {
  background-color: var(--surface);
  border-color: var(--vp-teal);
  box-shadow: 0 0 0 3px var(--vp-teal-50);
}
#checkoutModal .field.has-error input,
#checkoutModal .field.has-error select { background-color: var(--vp-danger-50); }

/* Icon trong ô — SVG nội tuyến, không thêm request nào. */
#checkoutModal #infoForm input[name="name"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
#checkoutModal #infoForm input[name="phone"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
}
#checkoutModal #provinceSelect {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
#checkoutModal #infoForm input[name="address"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3.5l9 7'/%3E%3Cpath d='M5.5 9.6V20h13V9.6'/%3E%3Cpath d='M9.8 20v-5.4h4.4V20'/%3E%3C/svg%3E");
}
#checkoutModal #infoForm input[name="note"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}
#checkoutModal #voucherInput {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.2V6.5a1.5 1.5 0 0 1 1.5-1.5h15A1.5 1.5 0 0 1 21 6.5v2.7a2.8 2.8 0 0 0 0 5.6v2.7a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 17.5v-2.7a2.8 2.8 0 0 0 0-5.6z'/%3E%3Cpath d='M15 5v14' stroke-dasharray='2.6 2.6'/%3E%3C/svg%3E");
}

/* ── Ô mã giảm giá + nút Áp dụng dính thành một khối ─────────────── */
#checkoutModal .voucher { gap: 0; }
#checkoutModal .voucher input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#checkoutModal .voucher .btn {
  --btn-py: .72rem;
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left-width: 0; align-self: stretch;
}
#checkoutModal .voucher input:focus { position: relative; z-index: 1; }

/* ── Chip mã giảm giá ───────────────────────────────────────────── */
#checkoutModal .vchip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem .3rem .3rem;
  border-style: solid; border-color: var(--vp-teal-100);
  background: var(--surface); box-shadow: var(--sh-xs);
}
#checkoutModal .vchip:hover {
  background: var(--surface); border-color: var(--vp-teal); box-shadow: var(--sh-sm);
}
#checkoutModal .vchip b {
  padding: .16rem .45rem; border-radius: var(--r-xs);
  background: var(--vp-teal); color: #fff;
  font-size: 10.5px; font-weight: var(--fw-black); letter-spacing: .03em;
}
#checkoutModal .vchip span { color: var(--ink-soft); font-weight: var(--fw-semibold); }
#checkoutModal .vchip.is-used b { background: var(--ink-muted); }

/* ── Nút chính ──────────────────────────────────────────────────── */
#checkoutModal .cstep__foot { margin-top: var(--s-4); }

/* ── Cột phải: tóm tắt đơn ──────────────────────────────────────── */
#checkoutModal .cogrid__side { min-width: 0; }

/* Dòng gập/mở — chỉ dùng ở màn hình hẹp. */
#checkoutModal .cosum__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--vp-navy-50);
  border-bottom: 1px solid var(--vp-navy-100);
  font-size: var(--fs-sm); color: var(--vp-navy-900);
  text-align: left;
}
#checkoutModal .cosum__toggle-l { display: inline-flex; align-items: center; gap: .45rem; font-weight: var(--fw-semibold); }
#checkoutModal .cosum__toggle-ico { width: 16px; height: 16px; color: var(--vp-navy-500); }
#checkoutModal .cosum__toggle b { font-weight: var(--fw-black); color: var(--vp-cta-700); }
#checkoutModal .cosum__toggle::after {
  content: '⌄'; margin-left: .1rem; color: var(--vp-navy-500);
  transition: transform var(--dur) var(--ease);
}
#checkoutModal .cosum__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
#checkoutModal .cosum { display: none; padding: var(--s-4); }
#checkoutModal .cosum.is-open { display: block; }
#checkoutModal .cosum__title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  letter-spacing: .06em; text-transform: uppercase; color: var(--vp-navy-500);
}

/* ── Dòng hàng trong tóm tắt ─────────────────────────────────────
   Bố cục chuẩn của sàn: ảnh | (tên + nút xoá) / quy cách / (số lượng +
   thành tiền). Tên và quy cách bị cắt bằng dấu … thay vì xuống 3 dòng,
   nhờ vậy mọi dòng cao bằng nhau và cột tóm tắt không bị vỡ nhịp. */
#checkoutModal .coline {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
#checkoutModal .coline:first-child { padding-top: 0; }
#checkoutModal .coline:last-child { border-bottom: 0; padding-bottom: 0; }

#checkoutModal .coline__img {
  flex: none;
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 4px;
}
#checkoutModal .coline__img img { width: 100%; height: 100%; object-fit: contain; }

#checkoutModal .coline__main { flex: 1; min-width: 0; }

#checkoutModal .coline__top { display: flex; align-items: flex-start; gap: var(--s-2); }
#checkoutModal .coline__name {
  flex: 1; min-width: 0;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
#checkoutModal .coline__meta {
  display: block; margin-top: .1rem;
  font-size: 11px; color: var(--ink-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Nút xoá nằm góc trên phải — chỗ khách quen tìm, và không tranh chỗ với
   cụm số lượng ở hàng dưới. */
#checkoutModal .coline__del {
  flex: none;
  width: 22px; height: 22px; margin: -2px -4px 0 0;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  color: var(--ink-muted); font-size: 15px; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
#checkoutModal .coline__del:hover { background: var(--vp-danger-50); color: var(--vp-danger); }

#checkoutModal .coline__bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  margin-top: var(--s-2);
}
#checkoutModal .coline__amt {
  font-size: var(--fs-sm); font-weight: var(--fw-black);
  color: var(--ink); white-space: nowrap;
}

/* Cụm số lượng dùng lại đúng kiểu viên thuốc liền khối của ngăn kéo giỏ
   hàng, chỉ thu nhỏ lại cho vừa cột hẹp — hai nơi nhìn phải giống nhau. */
#checkoutModal .qty--xs button { width: 24px; height: 24px; font-size: .9rem; }
#checkoutModal .qty--xs .coline__n {
  min-width: 24px; text-align: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* Quà tặng: chỉ dán nhãn, không nút — máy chủ tự thêm và tự gỡ theo ngưỡng. */
#checkoutModal .coline__tag {
  padding: .18rem .5rem;
  border-radius: var(--r-pill);
  background: var(--vp-success-50); color: var(--vp-success);
  font-size: 10.5px; font-weight: var(--fw-bold);
}

/*
 * Từ bước 2 trở đi không cho sửa giỏ nữa: bước 3 đơn đã tạo kèm mã QR có số
 * tiền cố định, đổi giỏ lúc đó sẽ khiến số tiền khách quét khác số trên đơn.
 */
/* Từ bước 2 trở đi là đã chốt số tiền, bước 3 đã sinh mã QR — không cho sửa số
   lượng, xoá dòng hàng hay gỡ mã giảm giá nữa, kẻo tiền trên QR lệch với đơn. */
#checkoutModal .cogrid:not([data-step="1"]) .qty--xs,
#checkoutModal .cogrid:not([data-step="1"]) .corow__del,
#checkoutModal .cogrid:not([data-step="1"]) .coline__del { display: none; }

/* Nút ✕ gỡ mã giảm giá, nằm ngay sau tên mã trong dòng tóm tắt. */
#checkoutModal .corow__del {
  margin-left: .35rem; padding: 0; width: 1.15rem; height: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--line); color: var(--ink-muted);
  font-size: .82rem; line-height: 1; vertical-align: middle;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
#checkoutModal .corow__del:hover { background: var(--vp-danger); color: #fff; }
#checkoutModal .corow__del:focus-visible { outline: 2px solid var(--vp-cta-700); outline-offset: 2px; }
#checkoutModal .corow__del[disabled] { opacity: .5; cursor: default; }

#checkoutModal .cosum__totals { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dashed var(--line); }
#checkoutModal .corow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .28rem 0; font-size: var(--fs-sm);
}
#checkoutModal .corow > span { color: var(--ink-muted); }
#checkoutModal .corow > b { font-weight: var(--fw-semibold); }
#checkoutModal .corow--total {
  margin-top: var(--s-2); padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
#checkoutModal .corow--total > span { color: var(--ink); font-weight: var(--fw-semibold); }
#checkoutModal .corow--total > b {
  font-size: 1.24rem; font-weight: var(--fw-black);
  color: var(--vp-cta-700); letter-spacing: -.02em;
}
#checkoutModal .corow .tone-ok { color: var(--vp-success); }

#checkoutModal .cotrust {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px dashed var(--line);
  display: grid; gap: .5rem;
}
#checkoutModal .cotrust li {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); color: var(--ink-soft);
}
#checkoutModal .cotrust svg { width: 15px; height: 15px; flex: none; color: var(--vp-teal); }

/* ── Bước 3: mã QR cạnh thông tin chuyển khoản ──────────────────── */
#checkoutModal .qr-box { border-width: 1.5px; border-radius: var(--r-md); }
#checkoutModal .success__box { border: 1px solid var(--line); border-radius: var(--r-md); }

/* ═════════ Máy tính bảng & máy tính: hai cột thật ═════════ */
@media (min-width: 880px) {
  #checkoutModal .cohead__brand { display: inline-flex; }

  #checkoutModal .cogrid {
    grid-template-columns: minmax(0, 1fr) 364px;
    align-items: start;
  }
  /*
   * Trong HTML, tóm tắt đơn đứng TRƯỚC form để màn hình hẹp nhìn thấy số tiền
   * ngay mà không phải cuộn. Trên máy tính thì đặt lại đúng chỗ: việc-phải-làm
   * bên trái, tóm tắt bên phải.
   */
  #checkoutModal .cogrid__main { grid-column: 1; grid-row: 1; padding: var(--s-6); }

  #checkoutModal .cogrid__side {
    grid-column: 2; grid-row: 1;
    align-self: stretch;              /* nền phủ hết chiều cao khung */
    background: var(--surface-2);
    border-left: 1px solid var(--line);
  }
  #checkoutModal .cosum { position: sticky; top: 0; }

  /* Bước 4 đã đặt hàng xong — không còn gì để tóm tắt, trả cả khung cho
     màn hình chúc mừng. */
  #checkoutModal .cogrid.is-done { grid-template-columns: minmax(0, 1fr); }
  #checkoutModal .cogrid.is-done .cogrid__side { display: none; }
  /* Máy tính không cần dòng gập — tóm tắt luôn mở. */
  #checkoutModal .cosum__toggle { display: none; }
  #checkoutModal .cosum { display: block; padding: var(--s-5); }

  /* Bước 2: cột phải đã hiện danh sách món và tổng tiền rồi, bảng giữa chỉ
     cần giữ phần thông tin người nhận — tránh nói cùng một thứ hai lần. */
  #checkoutModal #orderSummary .sum__items,
  #checkoutModal #orderSummary .sum__totals { display: none; }
  #checkoutModal #orderSummary .sum__cust { border-bottom: 0; }

  /* Bước 3 rộng rồi thì mã QR và thông tin nằm cạnh nhau. */
  #checkoutModal .pay {
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    align-items: start;
    gap: var(--s-5);
  }
  #checkoutModal .pay__qr {
    padding: var(--s-4);
    background: var(--surface-2);
    border-radius: var(--r-md);
  }
  #checkoutModal .qr-box img { width: 190px; height: 190px; }
}

/* ═════════ Điện thoại: nút chính dán đáy, có khoảng hở ═════════
   Form cao hơn màn hình nên nút bị đẩy khuất. Dán xuống đáy khung cuộn
   và chừa đúng chiều cao của nó để ô cuối cùng không bao giờ bị che —
   đây là lỗi của bản trước: thanh nút nằm đè lên ô mã giảm giá. */
@media (max-width: 879px) {
  #checkoutModal .cogrid.is-done .cogrid__side { display: none; }
  #checkoutModal .cstep[data-cstep="1"] { padding-bottom: 76px; }
  #checkoutModal .cstep[data-cstep="1"] .cstep__foot {
    position: sticky; bottom: 0; z-index: 3;
    margin: var(--s-4) calc(var(--s-4) * -1) calc(var(--s-4) * -1);
    padding: var(--s-3) var(--s-4);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 20px rgb(16 32 56 / .07);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   NGĂN KÉO GIỎ HÀNG — KHÔNG ĐỂ KHỐI GỢI Ý ĐÈ DANH SÁCH HÀNG
   ───────────────────────────────────────────────────────────────────
   `.drawer__body` để `flex: 1` kèm `overflow-y: auto`, mà theo chuẩn CSS
   thì overflow làm `min-height: auto` hoá 0 — nghĩa là vùng danh sách
   CÓ THỂ bị ép xuống 0 pixel. Trên màn hình thấp hoặc khi khách phóng
   to chữ, phần cố định (tiêu đề + thanh freeship + khối gợi ý + chân)
   ăn hết chiều cao và danh sách hàng gần như biến mất.

   Cách sửa: gộp danh sách và khối gợi ý vào chung MỘT vùng cuộn. Hàng
   luôn có chỗ; khối gợi ý vẫn tự dán xuống đáy khi còn dư chỗ nhờ
   `margin-top: auto`, nên dáng thiết kế không đổi.
   ═══════════════════════════════════════════════════════════════════ */
#cartDrawer .drawer__scroll {
  flex: 1; min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
#cartDrawer .drawer__body { flex: none; overflow: visible; }
#cartDrawer .upsell { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════════════
   THẺ GỢI Ý "THÊM ĐỂ TIẾT KIỆM HƠN" — KÍCH THƯỚC CUỐI CÙNG.

   Khách phản hồi HAI LẦN rằng khối này quá to (2026-08-15 và 2026-08-19),
   lần sau ghi rõ *"nên nhỏ hơn so với sản phẩm chính ở giỏ hàng"*.

   ⚠️ Lần trước sửa hụt: luật thu nhỏ được viết ở CUỐI file dưới dạng
   `.ucard { width: 104px }`, nhưng luật ngay đây có `#cartDrawer` nên
   trọng số cao hơn và vẫn thắng — khách nhìn thấy y nguyên 116px.
   Nay gộp về MỘT chỗ duy nhất; luật kia đã gỡ.

   Mốc so sánh: ảnh sản phẩm chính trong giỏ là 66×66 (`.citem__img`).
   Ảnh gợi ý phải NHỎ HƠN mốc đó thì thứ bậc mới đúng, nên đặt 48×48.
   ═══════════════════════════════════════════════════════════════════ */
#cartDrawer .ucard { width: 92px; padding: .3rem; }
#cartDrawer .ucard img {
  width: 48px; height: 48px;
  aspect-ratio: auto;
  margin-inline: auto;
}
#cartDrawer .ucard b { font-size: 10.5px; }
#cartDrawer .ucard span { font-size: 11px; }
#cartDrawer .ucard button { font-size: 10.5px; padding: .22rem; }

/* Màn hình rất thấp (điện thoại xoay ngang, hoặc khách phóng to chữ): thu gọn
   chân giỏ để phần danh sách hàng còn chỗ thở. */
@media (max-height: 620px) {
  #cartDrawer .drawer__zalo { display: none; }
  #cartDrawer .drawer__foot {
    padding-top: var(--s-3);
    padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom));
  }
  #cartDrawer .drawer__foot .btn { margin-top: var(--s-3); }
  #cartDrawer .drow { padding: .15rem 0; }
}

/* ── Chọn hình thức thanh toán ───────────────────────────────────
   Hai lựa chọn: thanh toán khi nhận hàng (mặc định) và chuyển khoản
   quét mã QR. Danh sách do WooCommerce cấp nên bật thêm cổng khác là
   tự hiện thêm ô, không phải sửa CSS. */
#checkoutModal .paylist { display: grid; gap: var(--s-2); }
#checkoutModal .payopt { position: relative; cursor: pointer; display: block; }
#checkoutModal .payopt input {
  position: absolute; opacity: 0; width: 0; height: 0;
}
#checkoutModal .payopt__box {
  display: block;
  padding: .7rem .9rem .7rem 2.5rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Vòng tròn chọn vẽ bằng CSS, không cần ảnh. */
#checkoutModal .payopt__box::before {
  content: ''; position: absolute; left: .95rem; top: 1.05rem;
  width: 16px; height: 16px;
  border: 2px solid var(--line-strong); border-radius: 50%;
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#checkoutModal .payopt:hover .payopt__box { border-color: var(--line-strong); }
#checkoutModal .payopt input:checked + .payopt__box {
  border-color: var(--vp-teal); background: var(--vp-teal-50);
}
#checkoutModal .payopt input:checked + .payopt__box::before {
  border-color: var(--vp-teal);
  box-shadow: inset 0 0 0 3px var(--surface), inset 0 0 0 9px var(--vp-teal);
}
#checkoutModal .payopt input:focus-visible + .payopt__box { box-shadow: var(--ring); }
#checkoutModal .payopt__title { display: block; font-size: var(--fs-sm); font-weight: var(--fw-bold); }
#checkoutModal .payopt__desc { display: block; margin-top: .12rem; font-size: 11.5px; color: var(--ink-muted); line-height: 1.45; }

/* ═══════════════════════════════════════════════════════════════════
   CHÂN TRANG — ICON CHO MENU VÀ MẠNG XÃ HỘI
   ═══════════════════════════════════════════════════════════════════ */

/* Bốn dấu hiệu thương hiệu là hình khối đặc, không phải nét viền như
   bộ icon còn lại — phải ghi đè quy tắc chung `fill: none`. */
#i-facebook, #i-tiktok, #i-shopee, #i-zalo,
#i-facebook *, #i-tiktok *, #i-shopee *, #i-zalo * {
  fill: currentColor; stroke: none;
}

/* Bốn nút phải nằm gọn MỘT hàng: thêm icon làm chúng rộng ra và rơi xuống
   dòng, trông như bị lỗi. Bó lại đệm và khoảng cách thay vì cho xuống dòng. */
.socials { gap: .32rem; flex-wrap: wrap; }
.socials a {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .36rem .6rem;
  white-space: nowrap;
}
.socials a svg { width: 14px; height: 14px; flex: none; }

/* ── Cột Liên hệ: mỗi dòng một icon đúng nghĩa ──────────────────── */
.footer__col > a,
.footer__addr {
  display: flex; align-items: flex-start; gap: .5rem;
}
.footer__col > a > svg,
.footer__addr > svg {
  width: 15px; height: 15px; flex: none;
  margin-top: .18rem;
  /* Cùng sắc độ với mũi tên ở hai cột menu: màu chữ, mờ 55%. */
  color: currentColor;
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.footer__col > a:hover > svg { opacity: 1; }
/* Icon điện thoại là khối đặc cho dễ nhận ra ở cỡ nhỏ. */
#i-phone, #i-phone * { fill: currentColor; stroke: none; }

/* Mũi tên nhỏ trước mỗi mục menu.
   Làm bằng CSS chứ không sửa vnp_nav_links(): hàm đó dùng chung với menu
   đầu trang và menu điện thoại, thêm icon trong đó sẽ ảnh hưởng cả ba chỗ.
   Cách này cũng tự áp dụng cho mục mới chủ website thêm sau. */
/* CHỈ hai cột menu (thẻ <nav>), không phải cột Liên hệ — hotline và email
   không phải mục menu nên không đeo mũi tên. */
nav.footer__col a {
  display: flex; align-items: baseline; gap: .45rem;
}
nav.footer__col a::before {
  content: '';
  flex: none;
  width: 12px; height: 12px;
  transform: translateY(1px);
  background-color: currentColor;
  opacity: .55;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* Mũi tên ">" vẽ bằng mask nên tự đổi màu theo chữ, kể cả lúc rê chuột. */
  -webkit-mask: var(--vnp-arrow) center / contain no-repeat;
          mask: var(--vnp-arrow) center / contain no-repeat;
  --vnp-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
}
nav.footer__col a:hover::before { opacity: 1; transform: translateY(1px) translateX(2px); }

nav.footer__col a { line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════
   NÚT BẤM — ICON VÀ HIỆU ỨNG MỜI GỌI
   ───────────────────────────────────────────────────────────────────
   Nút trơn không có gì dẫn mắt nên khách lướt qua. Ba thứ được thêm:
   icon nhận diện hành động, một vệt sáng quét ngang định kỳ trên nút
   chính, và mũi tên nhích tới khi rê chuột.
   Tất cả đều tắt khi máy khách bật "giảm chuyển động".
   ═══════════════════════════════════════════════════════════════════ */

.btn svg { width: 17px; height: 17px; flex: none; }
/* Hai nút hero nằm trong lưới chia đôi nên đã sát khung — bó đệm ngang
   để icon có chỗ mà chữ không bị cắt. */
.hero__cta .btn { --btn-px: 1.15rem; }
.btn--lg svg { width: 19px; height: 19px; }
.btn--sm svg { width: 15px; height: 15px; }

/* Mũi tên cho các nút dẫn tới khối khác trong trang.
   Trừ hai nút ở hero: lưới hero chia đôi chiều ngang nên nút đã sát khung,
   thêm mũi tên là chữ bị cắt. */
.btn[data-track^="cta_"]:not([data-track^="cta_hero"])::after {
  content: '';
  width: 17px; height: 17px; flex: none;
  background-color: currentColor;
  transition: transform var(--dur) var(--ease);
  -webkit-mask: var(--vnp-cta-arrow) center / contain no-repeat;
          mask: var(--vnp-cta-arrow) center / contain no-repeat;
  --vnp-cta-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15'/%3E%3Cpath d='m13.2 5.7 6.3 6.3-6.3 6.3'/%3E%3C/svg%3E");
}
.btn[data-track^="cta_"]:not([data-track^="cta_hero"]):hover::after { transform: translateX(4px); }

/* Vệt sáng quét ngang nút chính — nhắc mắt mà không nhấp nháy khó chịu. */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, transparent 36%, rgb(255 255 255 / .38) 50%, transparent 64%);
  /*
   * Dịch chuyển bằng `transform`, KHÔNG bằng `left`.
   * Đổi `left` khiến phần tử thò ra ngoài và làm `scrollWidth` của nút phình
   * to — mọi phép đo "chữ có bị cắt không" sẽ báo động giả. `transform` không
   * đụng tới bố cục nên đo đạc vẫn sạch.
   */
  transform: translateX(-100%) skewX(-18deg);
  animation: vnpShine 4.5s var(--ease-out) infinite;
}
@keyframes vnpShine {
  0%, 62% { transform: translateX(-100%) skewX(-18deg); }
  92%, 100% { transform: translateX(100%) skewX(-18deg); }
}

.btn--primary:hover { transform: translateY(-2px); }
.btn--outline:hover svg, .btn--primary:hover svg { transform: scale(1.08); }
.btn svg { transition: transform var(--dur) var(--ease); }

/* Nút mua trên thẻ sản phẩm hẹp: chữ ưu tiên hơn icon. */
@media (max-width: 420px) {
  .pcard__acts .btn svg, .ccard .btn svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn--primary::before { animation: none; opacity: 0; }
  .btn--primary:hover { transform: none; }
  .btn[data-track^="cta_"]:not([data-track^="cta_hero"]):hover::after,
  .btn--outline:hover svg, .btn--primary:hover svg { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   KHỐI PHÁP LÝ & ẢNH BA DÒNG SẢN PHẨM
   ═══════════════════════════════════════════════════════════════════ */

/* ── Ảnh 3 dòng sản phẩm ─────────────────────────────────────────
   Khung dọc 2/3 + `contain` của bản gốc là dành cho ảnh infographic DỌC
   (682×1447). Ảnh thật đang dùng là ảnh đời thường NẰM NGANG (1060×795,
   tỉ lệ 4:3) nên bị đóng khung giữa khối, thừa một mảng trắng lớn trên
   và dưới. Đổi sang đúng khung 4/3 + `cover` như chính chú thích trong
   phần CSS gốc đã dự liệu. */
.line__media { aspect-ratio: 4 / 3; }
.line__media img { object-fit: cover; }

/* ── Khối thông tin pháp lý ──────────────────────────────────────
   Trước đây là 4 cụm chữ trần trên nền phẳng, không có gì dẫn mắt.
   Nay mỗi mục là một ô riêng có icon, đường kẻ ngăn và hiệu ứng khi rê
   chuột — vừa dễ đọc vừa ra dáng "thông tin đã kiểm chứng". */
.legal {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--vp-navy-50));
  box-shadow: var(--sh-sm);
}
.legal__item {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-5);
  border-right: 1px solid var(--vp-navy-100);
  transition: background var(--dur) var(--ease);
}
.legal__item:last-child { border-right: 0; }
.legal__item:hover { background: var(--surface); }

.legal__ico {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: var(--vp-teal-50);
  color: var(--vp-teal-800);
}
.legal__ico svg { width: 18px; height: 18px; }

/*
 * Quy tắc gốc `.legal span` viết hoa MỌI span trong khối. Thẻ bọc mới cũng là
 * span nên giá trị bên trong bị viết hoa theo — địa chỉ nhà máy thành
 * "LÔ CN 3.1, KCN PHÚ NGHĨA". Phải viết đủ hai lớp class thì độ ưu tiên mới
 * thắng được `.legal span`; viết mỗi `.legal__text` là thua.
 */
.legal .legal__text {
  display: flex; flex-direction: column; gap: .18rem; min-width: 0;
  text-transform: none;
}
.legal .legal__text > span { text-transform: uppercase; }
.legal__text span { font-size: 10.5px; letter-spacing: .07em; }
.legal__text b { font-size: var(--fs-xs); line-height: 1.5; }

/* Màn hình hẹp: xếp dọc, đổi đường kẻ dọc thành kẻ ngang. */
@media (max-width: 700px) {
  .legal__item { border-right: 0; border-bottom: 1px solid var(--vp-navy-100); padding: var(--s-4); }
  .legal__item:last-child { border-bottom: 0; }
}

/* ── Lớp phủ xem video khách quay ─────────────────────────────────────────
   Trước đây bấm vào thẻ video không có gì xảy ra: JavaScript chỉ xử lý trường
   hợp THIẾU link, còn khi có link thì không mở gì cả — nghĩa là chủ website
   điền link vào cũng vô ích. Nay có trình phát thật, nhận cả link mạng xã hội
   lẫn file tải lên Thư viện.
   ------------------------------------------------------------------------ */
.vmodal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: var(--s-4); }
.vmodal__backdrop { position: absolute; inset: 0; background: rgba(4, 18, 33, .82); backdrop-filter: blur(2px); }
.vmodal__box { position: relative; width: min(420px, 100%); max-height: 92vh; }
.vmodal__media { position: relative; aspect-ratio: 9 / 16; max-height: 88vh; margin-inline: auto; overflow: hidden; border-radius: var(--r-lg); background: #000; box-shadow: var(--sh-xl); }
.vmodal__media iframe,
.vmodal__media video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.vmodal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; transition: background var(--dur) var(--ease); }
.vmodal__close:hover { background: rgba(255, 255, 255, .3); }
.vmodal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 480px) {
  .vmodal { padding: 0; }
  .vmodal__box { width: 100%; height: 100%; }
  .vmodal__media { height: 100%; max-height: none; border-radius: 0; aspect-ratio: auto; }
  .vmodal__close { top: 12px; right: 12px; background: rgba(4, 18, 33, .55); }
}

/* Thẻ bị thu gọn sau nút "Xem thêm" — vẫn nằm trong HTML để bộ lọc và Google
   đọc được, chỉ không hiện ra cho khách. */
.is-clipped { display: none !important; }

/* Thông báo chớp nhoáng phải nổi trên MỌI lớp phủ.
   `tokens.css` xếp toast ở 500, trong khi ngăn kéo giỏ là 600 và cửa sổ đặt
   hàng là 700 — nên câu "Đã áp dụng mã giảm giá" hiện ra nhưng nằm khuất phía
   sau, khách bấm Áp dụng mà tưởng không có gì xảy ra. Không sửa `tokens.css`
   (bất biến của dự án), chỉ nâng riêng lớp của toast ở đây. */
.toast { z-index: calc(var(--z-modal) + 10); }

/* ─────────────────────────────────────────────────────────────────────
   THU NHỎ HAI KHỐI THEO PHẢN HỒI KHÁCH (2026-08-15)

   Ghi đè ở cuối file thay vì sửa thẳng quy tắc gốc phía trên, để lúc cần
   trả về kích thước cũ chỉ việc xoá khối này.
   ───────────────────────────────────────────────────────────────────── */

/* Dải ảnh cam kết: khách thấy chiếm quá nhiều màn hình. Giảm khoảng đệm dọc
   còn khoảng một nửa, chữ trích dẫn và ô số liệu nhỏ theo cho cân. */
.band { padding: clamp(2.4rem, 1.8rem + 2.6vw, 4rem) 0; }
.band__quote {
  margin-bottom: var(--s-5);
  font-size: clamp(1.15rem, .95rem + 1.1vw, 1.65rem);
}
.band__stats { gap: var(--s-4); }
.band__stats > div { padding: var(--s-3); }

/* Khối "Thêm để tiết kiệm hơn" trong ngăn kéo giỏ: bớt đệm để nhường chỗ cho
   danh sách hàng đã chọn.

   Kích thước THẺ và ẢNH không đặt ở đây — xem khối `#cartDrawer .ucard` phía
   trên. Luật ở trên có `#id` nên luôn thắng luật ở đây dù đây đứng sau; viết
   hai nơi là tự bẫy mình một lần rồi. */
.upsell { padding: var(--s-3) var(--s-4); }
.upsell__title { margin-bottom: var(--s-2); }

/* Dòng giảm giá trong ngăn kéo giỏ — chỉ hiện khi đang áp mã. Dùng màu xanh
   "được lợi" để mắt khách bắt ngay, khác hẳn dòng phí vận chuyển màu xám. */
.drow--save { color: var(--vp-success); }
.drow--save b { color: var(--vp-success); font-weight: var(--fw-bold); }

/* Nút ✕ gỡ mã, nằm sát tên mã trong dòng giảm giá. Cùng dáng với nút gỡ mã ở
   cột tóm tắt của cửa sổ đặt hàng để khách chỉ phải học một lần. */
.drow__del {
  margin-left: .3rem; padding: 0 .18rem;
  font-size: .95rem; line-height: 1;
  color: var(--ink-muted);
  background: none; border: 0; cursor: pointer;
}
.drow__del:hover { color: var(--vp-danger); }

/* ═══════════════════════════════════════════════════════════════════
   KHỐI MÃ GIẢM GIÁ TRONG NGĂN KÉO GIỎ (phản hồi khách 2026-08-19).

   Nằm giữa "Tạm tính" và "Phí vận chuyển" nên chỉ được chiếm rất ít
   chiều cao — chân giỏ vốn đã có 3 dòng tiền, nút đặt hàng và dòng
   Zalo. Vì vậy ô nhập thấp hơn, danh sách mã chữ nhỏ hơn và cuộn
   ngang khi tràn thay vì xuống dòng đẩy nút đặt hàng khỏi màn hình.
   ═══════════════════════════════════════════════════════════════════ */
.cvoucher {
  padding: var(--s-3) 0;
  margin: var(--s-2) 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
/* Dòng tiêu đề bấm được: bấm là xổ danh sách mã. Chiếm đúng một dòng khi
   đóng, nên chân giỏ gọn hẳn và danh sách hàng có chỗ thở. */
.cvoucher__t {
  display: flex; align-items: center; gap: .4rem;
  width: 100%;
  padding: .3rem 0;
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  color: var(--ink);
  text-align: left;
}
.cvoucher__t > span { flex: 1; }
.cvoucher__t svg { width: 15px; height: 15px; flex: none; color: var(--vp-teal); }
.cvoucher__t:hover { color: var(--vp-teal-800); }

/* Mũi tên quay xuống khi mở — dấu hiệu duy nhất cho biết đang đóng hay mở. */
.cvoucher__caret {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  color: var(--ink-muted);
  transition: transform var(--dur) var(--ease);
}
.cvoucher__t[aria-expanded="true"] .cvoucher__caret { transform: rotate(180deg); }

.cvoucher__panel { padding-top: var(--s-2); }
.cvoucher__panel[hidden] { display: none; }

.cvoucher__err {
  display: block; min-height: 1em; margin-top: .25rem;
  font-size: 11.5px; font-weight: var(--fw-semibold);
  color: var(--vp-danger);
}

/*
 * Ô nhập và nút TÁCH RỜI, mỗi cái bo tròn riêng.
 *
 * ⚠️ Bản trước cho hai thứ dính liền: ô nhập bỏ bo góc phải, nút bỏ bo góc
 * trái, kéo nút đè lên 1px cho liền mạch. Nhưng nút giữ nguyên bo tròn thật
 * (`.btn` có `border-radius: var(--r-pill)`), nên viền vuông của ô nhập cắt
 * ngang qua nút — khách chụp lại đúng chỗ đó, thấy trên cả máy tính lẫn điện
 * thoại (phản hồi 2026-08-27).
 *
 * Tách rời thì không còn hai hình dạng chọi nhau, mà nhìn cũng thoáng hơn.
 */
.voucher--sm { gap: var(--s-2); align-items: stretch; }
.voucher--sm input {
  min-height: 42px; padding: .5rem .85rem;
  font-size: var(--fs-sm);
  border-radius: var(--r-pill);
}
.voucher--sm .btn {
  --btn-py: .55rem; --btn-px: 1.1rem;
  font-size: var(--fs-sm);
  flex: none;
  border-radius: var(--r-pill);
}

/* Danh sách mã xếp DỌC, mỗi mã một dòng đủ cả mã lẫn điều kiện.

   Cố ý không dồn thành hàng ngang cho gọn: khách yêu cầu *"hiển thị toàn bộ
   voucher... để khách thấy rõ các phần này"* — giấu mô tả đi thì khách không
   biết mã nào cần đơn bao nhiêu, đúng thứ họ đang phàn nàn. Chiều cao có trần
   và cuộn riêng, nên dù chủ website khai 10 mã thì nút đặt hàng vẫn nằm trong
   màn hình. */
.vchips--sm {
  flex-direction: column; flex-wrap: nowrap;
  gap: .3rem; margin-top: var(--s-2);
  /* Khách yêu cầu "scroll để xem thêm mã" — chừa đúng ba dòng rồi cuộn. */
  max-height: 108px; overflow-y: auto;
  scrollbar-width: thin;
}
.vchips--sm .vchip {
  display: flex; align-items: center; gap: .4rem;
  width: 100%; padding: .25rem .4rem;
  border-radius: var(--r-sm);
  text-align: left;
}
.vchips--sm .vchip b {
  flex: none;
  padding: .1rem .35rem; border-radius: var(--r-xs);
  background: var(--vp-teal); color: #fff;
  font-size: 10px; letter-spacing: .02em;
}
.vchips--sm .vchip span {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11px; font-weight: var(--fw-semibold);
  color: var(--ink-soft);
}
.vchips--sm .vchip.is-used b { background: var(--ink-muted); }

/* Màn hình thấp (điện thoại xoay ngang, hoặc khách phóng to chữ): danh sách mã
   co lại còn hai dòng thay vì biến mất — vẫn phải thấy có mã để dùng. */
@media (max-height: 700px) {
  #cartDrawer .vchips--sm { max-height: 72px; }
  #cartDrawer .cvoucher { padding: var(--s-2) 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   KHOẢNG CÁCH DỌC TRÊN GIAO DIỆN MÁY TÍNH.

   Phản hồi khách 2026-08-15 ghi cụt: *"Căn chỉnh khoảng cách lề trên
   giao diện máy tính"*. Lần đó hiểu là lề trên của khối đầu trang nên
   chỉ sửa `.hero`. Phản hồi 2026-08-19 nói rõ ý thật:

     *"Khoảng cách giữa các Section bị rộng quá (all các section) —
       nhìn rõ trên PC. Còn trên ĐT thì khoảng cách này đang ok."*

   `--section-y` trong tokens.css nở tới 7rem (112px) ở màn rộng, hai
   khối liền nhau thành 224px trống — đúng mảng trắng khách khoanh đỏ.
   Trên điện thoại nó chỉ 56px nên khách thấy vừa mắt.

   Sửa bằng cách ghi đè BIẾN, không sửa từng khối: mọi thứ ăn theo
   `--section-y` (kể cả `.offer`) đều co lại cùng nhịp. tokens.css là
   bản sao nguyên văn của bản HTML gốc nên tuyệt đối không đụng vào.

   Giá trị mới: 48px ở 1024px, nở dần tới 64px ở màn rất rộng — vẫn
   thoáng hơn điện thoại một chút, nhưng chỉ còn hơn nửa cũ.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  :root { --section-y: clamp(3rem, 1.5rem + 2vw, 4rem); }

  /* Thanh thông báo + thanh menu đã chiếm sẵn 111px ở đỉnh màn hình, hero
     chừa thêm nữa là tiêu đề tụt hẳn xuống. Giữ 48px như đợt trước. */
  .hero { padding-top: var(--s-8); }
}

/* Ô mồi chặn đơn rác. Đẩy khỏi màn hình thay vì `display:none` — máy điền form
   biết bỏ qua ô ẩn hẳn, nhưng vẫn điền ô chỉ bị đẩy ra ngoài tầm nhìn. */
.vnp-hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────
   TRA CỨU ĐƠN HÀNG — shortcode [vinapet_tra_cuu_don]
   ───────────────────────────────────────────────────────────────────── */
.tracker { max-width: 40rem; margin-inline: auto; }
.tracker__form { display: grid; gap: var(--s-4); }
.tracker__form .btn { width: 100%; }
.tracker__err { min-height: 1.2em; margin: 0; color: var(--vp-danger); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }

.tracker__result {
  margin-top: var(--s-5); padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.tracker__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-bottom: var(--s-3); margin-bottom: var(--s-3);
  border-bottom: 1px dashed var(--line);
}
.tracker__code { display: block; font-size: 1.1rem; font-weight: var(--fw-black); }
.tracker__head small { color: var(--ink-muted); font-size: var(--fs-xs); }
.tracker__badge {
  padding: .28rem .7rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.tracker__badge.tone-ok      { background: #e7f6ee; color: #1a7f4b; }
.tracker__badge.tone-info    { background: #e8f1fb; color: #14568f; }
.tracker__badge.tone-warn    { background: #fff3e0; color: #a15b00; }
.tracker__badge.tone-danger  { background: #fdeaea; color: #a01c1c; }

.tracker__items { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: grid; gap: .4rem; }
.tracker__items li { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); }
.tracker__items span { color: var(--ink-muted); }
.tracker__row {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-2); font-size: var(--fs-sm);
}
.tracker__row > span { color: var(--ink-muted); }

/* Thẻ nỗi đau có ảnh tình huống (phản hồi khách 2026-08-15). Ảnh tràn hết bề
   ngang thẻ, bo góc theo thẻ; thẻ nào chưa có ảnh vẫn giữ nguyên kiểu icon cũ
   nên hai loại đứng cạnh nhau không bị lệch. */
.pain--photo { padding-top: 0; overflow: hidden; }

/*
 * Ảnh TRÀN HẾT bề ngang thẻ.
 *
 * `.pain` có đệm ngang 24px, nên ảnh trước đây thụt vào 25px mỗi bên và để lộ
 * hai dải nền trắng — khách chụp lại đúng chỗ này: *"Điều chỉnh hình ảnh cho
 * vừa với frame"* (phản hồi 2026-08-27).
 *
 * Kéo ngược ra bằng lề âm đúng bằng đệm của thẻ. Thẻ đã có `overflow: hidden`
 * và bo góc nên ảnh tự bo theo hai góc trên, không cần bo riêng.
 */
.pain__photo {
  margin: 0 calc(var(--s-5) * -1) var(--s-4);
}
.pain__photo img {
  display: block; width: 100%; aspect-ratio: 3 / 2;
  object-fit: cover; background: var(--bg-soft);
}

/* ─────────────────────────────────────────────────────────────────────
   FLASH SALE THEO KHUNG GIỜ (phản hồi khách 2026-08-15)
   Thay chỗ khối số liệu nhà máy đã bỏ, nằm ngay dưới màn hình đầu.
   ───────────────────────────────────────────────────────────────────── */
.flash {
  padding: var(--s-7) 0;
  background: linear-gradient(135deg, #fff4ec 0%, #ffe9dc 100%);
  border-block: 1px solid #ffd9c2;
}
.flash__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5);
}
.flash__eyebrow {
  margin: 0 0 .2rem; font-size: var(--fs-xs); font-weight: var(--fw-black);
  letter-spacing: .08em; text-transform: uppercase; color: var(--vp-cta-700);
}
.flash__head h2 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); }

.flash__cd { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.flash__cd-l { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-muted); }
.flash__cd b {
  display: inline-flex; align-items: center; gap: .18rem;
  padding: .4rem .7rem; border-radius: var(--r-sm);
  background: var(--vp-cta-700); color: #fff;
  font-size: 1.2rem; font-weight: var(--fw-black);
  font-variant-numeric: tabular-nums;   /* số không nhảy ngang khi đổi */
}
.flash__cd b i { font-style: normal; opacity: .55; }
.flash__cd small { width: 100%; font-size: var(--fs-xs); color: var(--ink-muted); }

.flash__grid {
  display: grid; gap: var(--s-4);
  /* 250px chứ không phải 210: hẹp hơn thì nút "Mua ngay" trong thẻ sản phẩm bị
     cắt mất chữ — bộ kiểm qa-buttons bắt được. */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (max-width: 640px) {
  .flash__top { flex-direction: column; align-items: flex-start; }
  .flash__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}

/* ── TÌM KIẾM SẢN PHẨM (phản hồi khách 2026-08-15) ── */
.search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.search-btn:hover { background: var(--bg-soft); }
.search-btn .ico { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.hsearch { background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--sh-sm); }
.hsearch__in { display: flex; align-items: center; gap: var(--s-3); padding-block: .7rem; }
.hsearch__in .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
.hsearch input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  font-size: 1rem; color: var(--ink);
}
.hsearch input:focus { outline: none; }
.hsearch__count { flex: none; font-size: var(--fs-xs); color: var(--ink-muted); white-space: nowrap; }
.hsearch__x {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--line); color: var(--ink-muted);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.hsearch__x:hover { background: var(--vp-danger); color: #fff; }

/* Đang tìm thì bỏ luôn nút lọc danh mục — kết quả tìm mới là thứ khách đang xem. */
.prod__grid.is-searching ~ .center #productMore { display: none; }

/* ── BANNER NGANG KHUYẾN MẠI (phản hồi khách 2026-08-15) ── */
/* Lề TRÊN và DƯỚI bằng nhau. Trước đây viết `var(--s-5) 0 0` nên chỉ có đệm
   phía trên, banner dính sát khối bên dưới — nhìn lệch hẳn. */
.promo { padding: var(--s-6) 0; }
.promo__box {
  display: block; overflow: hidden;
  border-radius: var(--r-md); box-shadow: var(--sh-sm);
}
.promo__box img { display: block; width: 100%; height: auto; }
a.promo__box { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.promo__box:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
@media (prefers-reduced-motion: reduce) { a.promo__box:hover { transform: none; } }

/* Banner khách gửi về có tỉ lệ 16:9 chứ không phải 3:1 như bản thiết kế, để
   nguyên thì cao ~730px và chiếm gần hết màn hình. Cắt bớt bằng khung cố định.

   `object-position: center 72%` chứ không phải `center`: phần trên ảnh là nền
   trống, còn túi hàng và con mèo nằm ở nửa dưới — canh giữa là cắt mất chân túi.

   Chỉ áp cho máy tính. Ảnh điện thoại vốn gần vuông, cắt nữa là mất sản phẩm. */
@media (min-width: 641px) {
  .promo__box img {
    aspect-ratio: 1672 / 700;
    object-fit: cover;
    object-position: center 72%;
  }
}

/* Chặn trần chiều cao. Ở khoảng 641–1100px, tỉ lệ 1672/700 vẫn cho ra khối cao
   400–500px trong khi chữ chỉ chiếm chừng 180px — thành ra một mảng màu trống
   trên dưới chữ, đúng chỗ chủ site kêu "không đẹp". */
@media (min-width: 641px) {
  .promo__box img { max-height: 320px; }
  .promo__text { padding-block: var(--s-4); }
}
@media (min-width: 1200px) {
  .promo__box img { max-height: 400px; }
}

/* Lớp chữ đè lên banner — đặt bên TRÁI vì ảnh cố ý chừa khoảng trống bên đó. */
.promo__box { position: relative; }
.promo__text {
  position: absolute; inset: 0 auto 0 0;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--s-3);
  width: min(46%, 30rem);
  padding: var(--s-5) 0 var(--s-5) clamp(var(--s-5), 4vw, var(--s-9));
}
.promo__title {
  margin: 0; color: var(--vp-navy);
  font-size: clamp(1.1rem, .75rem + 1.8vw, 2.1rem);
  font-weight: var(--fw-black); line-height: 1.18; letter-spacing: var(--ls-snug);
}
.promo__title b { color: var(--vp-cta-700); }
.promo__sub {
  margin: 0; color: var(--ink-muted);
  font-size: clamp(.72rem, .55rem + .5vw, .95rem); line-height: 1.45;
}
.promo__btn { pointer-events: none; }   /* cả banner đã là một liên kết */

@media (max-width: 640px) {
  /* Ảnh điện thoại gần vuông, chữ đè lên là chồng vào sản phẩm — cho chữ xuống
     dưới ảnh thay vì đè lên. */
  .promo__box { display: block; }
  .promo__text {
    position: static; width: auto;
    padding: var(--s-4) var(--s-4) var(--s-5);
    background: var(--surface);
  }
}
.promo__btn .ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ═════════════════════════════════════════════════════════════════════
   GỘP VẤN ĐỀ + GIẢI PHÁP (phản hồi khách 2026-08-19)

   Khách hỏi: *"Có thể chọn các vấn đề (dạng tích chọn) và đáp án lựa
   chọn tương ứng để dẫn ra kết quả cuối cùng phù hợp với từng hoàn cảnh
   riêng của khách. Nếu xử lý được như thế thì bỏ Section 5"* — xử lý
   được, nên bộ chọn 3 câu đã gỡ và phần dưới đây thay chỗ nó.
   ═════════════════════════════════════════════════════════════════════ */

/* Câu hướng dẫn tích chọn, ngay dưới tiêu đề khối Vấn đề. */
.pain__hint {
  max-width: 46rem; margin: 0 auto var(--s-5);
  text-align: center;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-soft);
}

/* Hàng thao tác trong thẻ vấn đề: ô tích chọn bên trái, nút bên phải.
   `margin-top: auto` đẩy hàng này xuống đáy để sáu thẻ có nút thẳng hàng
   dù mô tả dài ngắn khác nhau. */
.pain { display: flex; flex-direction: column; }
.pain__acts {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto; padding-top: var(--s-4);
}
.pain__pick {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--ink-soft);
  cursor: pointer;
  /* Vùng chạm cao 44px theo chuẩn tối thiểu trên điện thoại. */
  min-height: 44px;
}
.pain__pick input {
  width: 19px; height: 19px; flex: none;
  accent-color: var(--vp-cta);
  cursor: pointer;
}
.pain__pick:hover { color: var(--ink); }
/* Cao tối thiểu 40px cho đủ vùng chạm ngón tay. `btn--sm` mặc định chỉ ra
   37px — bộ kiểm qa-buttons bắt được, và trên điện thoại 3px đó là khác biệt
   giữa bấm trúng và bấm hụt. */
.pain__cta {
  flex: none;
  min-height: 40px;
  display: inline-flex; align-items: center;
}

/* Thẻ đang được tích: viền cam đậm để mắt nối được với thẻ giải pháp
   tương ứng ở khối dưới. */
.pain.is-picked {
  border-color: var(--vp-cta);
  box-shadow: 0 0 0 2px var(--vp-cta-100), var(--sh-sm);
}

/* ── Khối giải pháp `#giai-phap` ── */
.solu__hint {
  max-width: 44rem; margin: 0 auto var(--s-3);
  text-align: center;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.solu__reset-wrap { text-align: center; margin-bottom: var(--s-5); min-height: 1.6rem; }
.solu__reset {
  padding: .3rem .8rem;
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--vp-cta-700);
  text-decoration: underline; text-underline-offset: 3px;
}
.solu__reset:hover { color: var(--vp-cta); }

.solu__grid { display: grid; gap: var(--s-5); }

.solu {
  display: grid; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.solu[hidden] { display: none; }   /* [hidden] thua `display: grid` nếu không ghi rõ */

.solu__pain {
  display: inline-block;
  margin-bottom: var(--s-2); padding: .2rem .6rem;
  border-radius: var(--r-pill);
  background: var(--vp-cta-50); color: var(--vp-cta-700);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.solu__title {
  font-size: 1.18rem; font-weight: var(--fw-black);
  line-height: 1.32; margin-bottom: var(--s-2);
}
.solu__why { font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.62; }

.solu__empty {
  margin-top: var(--s-5); text-align: center;
  font-size: var(--fs-sm); color: var(--ink-soft);
}
.solu__empty a { color: var(--vp-cta-700); font-weight: var(--fw-bold); }

/*
 * BỐ CỤC: chữ ở TRÊN, thẻ combo nằm NGANG ở dưới.
 *
 * Trước đây là hai cột (chữ trái · thẻ combo phải). Thẻ combo dựng dọc nên cao
 * 768px, trong khi cột chữ chỉ 115px — căn giữa xong thì dư **351px trắng mỗi
 * bên**, nhìn như trang bị lỗi. Chủ site phát hiện, bộ kiểm không: nó đếm số
 * thẻ và đo khối, không biết thế nào là "trắng quá nhiều".
 *
 * Xếp dọc rồi trải thẻ combo theo chiều ngang thì chiều cao do chính nội dung
 * quyết định, không còn khoảng trống nào để mà thừa.
 */
@media (min-width: 768px) {
  /*
   * Hai giải pháp nằm cạnh nhau, mỗi thẻ dựng DỌC: chữ trên, thẻ combo dưới.
   *
   * `auto-fit` lo nốt trường hợp khách lọc còn đúng một giải pháp — thẻ đó tự
   * giãn hết bề ngang thay vì nằm nép một bên với nửa hàng bỏ trống.
   */
  .solu__grid { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .solu { gap: var(--s-4); align-content: start; }

  /* Thẻ combo không kéo rộng hết hàng khi chỉ còn một giải pháp — ảnh sẽ to
     lố. Giới hạn bề ngang rồi căn giữa. */
  .solu__card { justify-self: center; width: 100%; max-width: 380px; }
}

/* Thẻ combo bên trong khối giải pháp bỏ hiệu ứng nhấc lên khi rê chuột: cả
   khối đã là một thẻ, hai lớp cùng nhấc trông rung rinh. */
.solu__card .ccard:hover { transform: none; }

/* ═════════════════════════════════════════════════════════════════════
   BĂNG CHUYỀN BANNER ĐẦU TRANG (phản hồi khách 2026-08-19)

   Khách khoanh đỏ cả tiêu đề lớn, ba ô lợi ích và ảnh sản phẩm rồi ghi
   "Bỏ và thay thế thành Banner Ngang". Hai nút và dòng cam kết ở lại,
   nằm ngay dưới băng chuyền.

   Khối này chỉ có tác dụng khi chủ website đã thêm banner — chưa thêm
   thì `.hero` giữ nguyên bố cục cũ và không luật nào dưới đây chạm tới.
   ═════════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════
   BĂNG CHUYỀN TRÀN HẾT BỀ NGANG (chủ site chốt 2026-08-23)

   Banner đứng riêng một mình trên nền trắng, không lề, không ảnh nền,
   không bo góc — hết bề ngang màn hình. Hai nút và dòng cam kết vẫn
   nằm trong container như mọi khối khác.
   ═════════════════════════════════════════════════════════════════════ */
.hero--banner {
  padding-block: 0 var(--s-6);
  /* Bỏ nền hero: ảnh mèo mờ và hai vệt màu phía sau làm banner trông như
     dán đè lên một tấm nền khác. Nền trắng phẳng để ảnh tự đứng. */
  background: var(--surface);
}
/* Ảnh nền + hai vệt màu chỉ dành cho bố cục cũ. */
.hero--banner .hero__bg { display: none; }
.hero--banner .container { position: relative; z-index: 1; }

/* Tràn viền: bỏ bo góc và đổ bóng — ở mép màn hình thì hai thứ đó thành
   một đường viền lửng lơ chứ không còn là "tấm thẻ". */
.hero--banner .hslider__view {
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/*
 * TRẦN CHIỀU CAO khi tràn hết bề ngang.
 *
 * Ảnh tỉ lệ ~1,8:1 mà kéo ngang hết màn 1440px thì cao 810px — nuốt trọn
 * màn hình đầu và đẩy nút "Mua ngay" xuống y=980, khuất hẳn.
 *
 * ⚠️ Cắt ở đây là cắt TRÊN–DƯỚI đối xứng (khung rộng hơn tỉ lệ ảnh), khác
 * hẳn vụ `vnp_wide` hôm trước cắt hai bên và xén mất dòng chữ. Chữ trên cả
 * hai tấm nằm trong khoảng 25–60% chiều cao, còn trần 520px giữ lại vùng
 * 18–82%, nên chữ nguyên vẹn — đã soi lại bằng ảnh chụp cả hai tấm.
 *
 * Ai thay banner mới: giữ chữ trong khoảng giữa ảnh, đừng đặt sát mép trên
 * hay mép dưới.
 */
/*
 * KHUNG TỈ LỆ CỐ ĐỊNH, không phải trần chiều cao cứng.
 *
 * Trần cứng làm mức cắt TĂNG THEO độ rộng màn hình: 28% ở 1280px, 36% ở
 * 1440px, 46% ở 1920px, 60% ở 2560px — màn càng rộng thì túi cát càng biến
 * mất, chỉ còn lại mảng nền trơn. Chủ site bắt được đúng cảnh đó.
 *
 * Khung tỉ lệ cố định thì phần bị cắt luôn là 32%, ở màn nào cũng như nhau —
 * bố cục ảnh giữ nguyên dáng, không "trôi" theo cỡ màn hình.
 *
 * ⚠️ Muốn KHÔNG cắt tí nào thì ảnh phải đúng tỉ lệ ~2,6:1 (ví dụ 1800×700).
 * Ảnh hiện tại là 1,78:1 nên vẫn phải cắt bớt trên–dưới.
 */
@media (min-width: 641px) {
  .hero--banner .hslide__box {
    /*
     * Chiều cao tính THEO BỀ NGANG MÀN HÌNH, không dùng `aspect-ratio`.
     *
     * `aspect-ratio` đi cùng `max-height` khiến trình duyệt bóp luôn chiều
     * RỘNG để giữ tỉ lệ — ở màn 1920px banner chỉ còn rộng 1664px, hết tràn
     * viền. `height` tính bằng vw thì bề ngang luôn là 100%, chỉ chiều cao
     * chạm trần.
     *
     * 38.46vw = 100 / 2,6 — đúng tỉ lệ 2,6:1.
     */
    width: 100%;
    height: min(38.46vw, 640px);
    overflow: hidden;
  }
  .hero--banner .hslide__box img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/*
 * Chữ đè trên banner phải nằm trong KHUNG NỘI DUNG, không dính mép màn hình.
 *
 * Khi banner còn gói trong `.container` thì lề đã có sẵn. Tràn hết bề ngang
 * rồi thì chữ chạy ra tận mép: nút lùi đè lên tiêu đề, và dòng phụ bị cắt cụt
 * thành "…eship đơn từ 299K".
 *
 * `max-width` + `margin-inline: auto` trên phần tử `inset: 0` cho lề trái phải
 * bằng đúng lề của các khối khác, nên chữ thẳng hàng với cả trang.
 */
.hero--banner .hslide__text {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hero--banner .hslide__title,
.hero--banner .hslide__sub { max-width: 32rem; }

.hslider { position: relative; }

/* Khung cắt: track rộng gấp N lần nhưng chỉ lộ một tấm. */
.hslider__view {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  background: var(--bg-soft);
}
.hslider__track {
  display: flex;
  transition: transform .45s var(--ease-out);
  will-change: transform;
}

.hslide { flex: 0 0 100%; min-width: 0; }
.hslide__box { position: relative; display: block; }
.hslide__box img {
  display: block; width: 100%; height: auto;
  /*
   * KHÔNG cắt ảnh.
   *
   * Trước đây đặt `max-height: 300px; object-fit: cover` cho banner khỏi chiếm
   * nửa màn hình. Nhưng banner là ảnh CÓ CHỮ IN SẴN — cover cắt để lấp khung,
   * và tấm banner USP bị cắt mất nguyên dòng "Nhà máy Việt Nam — 600 tấn mỗi
   * tháng", đúng câu đắt nhất trên đó.
   *
   * Nay ảnh hiện trọn vẹn, chiều cao do chính tỉ lệ ảnh quyết định. Đổi lại
   * banner cao hơn, nên phần dưới (chấm tròn, hai nút) bóp lại cho bù.
   */
}

/* Lớp chữ đè lên ảnh, đặt bên trái vì banner thường chừa khoảng trống bên đó. */
.hslide__text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  max-width: 62%;
}

/*
 * Chữ trên banner — chủ site phản hồi bản trước "không nổi bật, đơn điệu,
 * cứng" (2026-08-23). Ba thứ làm nên khác biệt:
 *
 *   · CỠ CHỮ nhảy hẳn một bậc, tới 3rem ở màn rộng thay vì 2rem;
 *   · ĐIỂM NHẤN: phần bọc trong <b> đổi sang màu cam thương hiệu và to hơn
 *     phần còn lại, nên mắt bắt ngay vào con số ("Giảm đến **40%**");
 *   · TÁCH NỀN: viền sáng mảnh quanh chữ để đọc rõ trên cả nền cam lẫn nền
 *     ảnh sản phẩm, không cần đổ một lớp phủ tối làm xỉn cả banner.
 */
.hslide__title {
  font-size: clamp(1.35rem, .9rem + 2.1vw, 3rem);
  font-weight: var(--fw-black);
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--vp-navy);
  margin: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 2px 14px rgba(255,255,255,.4);
}
.hslide__title b {
  color: var(--vp-cta);
  font-size: 1.12em;
  font-weight: var(--fw-black);
}

.hslide__sub {
  display: inline-block;
  font-size: clamp(var(--fs-sm), .72rem + .38vw, 1.06rem);
  font-weight: var(--fw-semibold);
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
  /* Nền kính mờ: dòng phụ nằm đè lên phần ảnh nhiều chi tiết nhất, chữ trơn
     trên đó đọc rất mệt. */
  padding: .4rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Nút lùi/tiến: nổi trên ảnh, đủ tương phản để thấy trên nền sáng lẫn tối. */
.hslider__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--vp-navy);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hslider__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.hslider__nav svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.hslider__nav--prev { left: var(--s-4); }
.hslider__nav--next { right: var(--s-4); }

.hslider__dots {
  display: flex; justify-content: center; gap: .4rem;
  margin-top: var(--s-3);
}
.hslider__dot {
  width: 9px; height: 9px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--vp-navy-200);
  cursor: pointer;
  transition: width var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hslider__dot.is-on { width: 24px; border-radius: var(--r-pill); background: var(--vp-cta); }

/* Hai nút và dòng cam kết dưới băng chuyền — căn giữa, khác bản cũ căn trái. */
.hero__cta--banner {
  justify-content: center;
  margin-top: var(--s-5);
}
.hero__micro--banner { justify-content: center; text-align: center; }

@media (max-width: 640px) {
  /* Trên điện thoại giấu nút lùi/tiến: khách vuốt là chính, hai nút chỉ che ảnh. */
  .hslider__nav { display: none; }

  /*
   * Chữ XUỐNG DƯỚI ảnh, không đè lên.
   *
   * Ảnh banner cho điện thoại gần vuông nên sản phẩm chiếm gần hết khung; đè
   * chữ lên là chữ chồng vào túi cát, đọc không ra. Đúng lỗi này đã sửa một
   * lần ở khối banner cũ (2026-08-19), băng chuyền mới quên mang theo.
   */
  .hslide__box { display: flex; flex-direction: column; background: var(--surface); }
  .hslide__text {
    position: static;
    max-width: 100%;
    padding: var(--s-4) var(--s-4) var(--s-5);
  }

  .hero__cta--banner { flex-direction: column; }
  .hero__cta--banner .btn { width: 100%; }
}

/*
 * Banner cao hơn từ khi bỏ cắt ảnh, nên bóp phần dưới lại để hai nút không bị
 * đẩy khỏi màn hình đầu — đó là thứ đắt nhất trang.
 */
.hslider__dots { margin-top: var(--s-3); }
.hero__cta--banner { margin-top: var(--s-4); }

/* Máy không chạy được hoạt hình mượt: bỏ hiệu ứng trượt, đổi tấm tức thì. */
@media (prefers-reduced-motion: reduce) {
  .hslider__track { transition: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   NÚT CHỌN BIẾN THỂ TRÊN THẺ SẢN PHẨM (phản hồi khách 2026-08-19)

   Khách khoanh dòng "Hương sữa · Trà xanh · Phấn em bé" và ghi:
   *"Mục này cho lên đây, hiển thị button để khách chọn được"*.

   Nút nhỏ và nhạt hơn hai nút mua ở đáy thẻ — đây là bước chọn, không
   phải bước chốt. Nút chốt mà bị nút chọn cạnh tranh thì loãng.
   ═════════════════════════════════════════════════════════════════════ */
.pcard__vars {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin: .35rem 0 var(--s-2);
}
.pcard__var {
  padding: .22rem .55rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 11.5px; font-weight: var(--fw-semibold);
  line-height: 1.5;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pcard__var:hover:not(:disabled) { border-color: var(--vp-cta); color: var(--vp-cta-700); }
.pcard__var.is-on {
  border-color: var(--vp-cta);
  background: var(--vp-cta-50);
  color: var(--vp-cta-700);
  font-weight: var(--fw-bold);
}
/* Hết hàng: gạch ngang chứ không giấu đi — khách cần biết có loại đó,
   chỉ là tạm hết, để còn quay lại hỏi. */
.pcard__var:disabled {
  opacity: .45;
  text-decoration: line-through;
  cursor: not-allowed;
}
.solu__more-wrap { text-align: center; margin-top: var(--s-5); }
/* Mũi tên xuống của nút "Xem tất cả": in thẳng SVG chứ không nhờ `::after` như
   nút khác — quy tắc mũi tên của theme chỉ áp cho thẻ <a>, mà đây là <button>
   (nó chỉ bỏ thuộc tính hidden, không đi đâu cả). qa-buttons bắt được chỗ này. */
#soluMore .ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Màn rất hẹp (iPhone SE 320px): thẻ giải pháp tràn ngang 2px vì lưới con
   không co được — mặc định `min-width: auto` giữ chỗ theo nội dung rộng nhất
   bên trong. Cho phép co, và bớt đệm để còn chỗ thở. */
.solu__copy, .solu__card { min-width: 0; }

@media (max-width: 360px) {
  .solu { padding: var(--s-4) var(--s-3); }
}

/* Khung băng chuyền co theo tấm đang hiện (JavaScript đặt `height`). Không có
   hiệu ứng chuyển thì lúc đổi sang tấm khác tỉ lệ, khung giật một nhịp. */
.hslider__view { transition: height .35s var(--ease-out); }
.hslider__track { align-items: flex-start; }

/* ═════════════════════════════════════════════════════════════════════
   ĐÁNH GIÁ: BĂNG CHUYỀN CUỘN NGANG (phản hồi khách 2026-08-27)

   *"Chỉnh kiểu trình bày từ 6 ô đánh giá thành hình ảnh cuộn (tương tự
   như video)"*. Dùng lại đúng bộ khung của hàng video UGC ngay phía
   trên — hai khối nằm sát nhau, cuộn khác kiểu là thấy ngay sự chắp vá.
   ═════════════════════════════════════════════════════════════════════ */
.reviews { position: relative; }

.reviews__track {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--s-3);
  scrollbar-width: none; -ms-overflow-style: none;
}
.reviews__track::-webkit-scrollbar { display: none; }

/* Thẻ không co lại nữa mà giữ bề ngang cố định — đó là điều làm nên
   dải cuộn. `align-self: stretch` cho mọi thẻ cao bằng nhau dù chữ dài
   ngắn khác nhau, không thì hàng cuộn nhấp nhô. */
.reviews__track .rcard {
  flex: none;
  width: 300px;
  scroll-snap-align: start;
  align-self: stretch;
}

@media (max-width: 640px) {
  /* Trên điện thoại để lộ một phần thẻ sau — dấu hiệu rõ nhất cho biết
     "còn nữa, vuốt tiếp đi". */
  .reviews__track .rcard { width: 82vw; max-width: 300px; }
}

/* Nút lùi/tiến chỉ có nghĩa khi chuột trỏ được; trên điện thoại khách vuốt. */
@media (max-width: 640px) {
  .reviews .cnav { display: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   NÚT "XEM THÊM" TRÊN THẺ SẢN PHẨM (chủ site yêu cầu 2026-08-28)

   Dẫn sang trang giới thiệu ở website khác, mở tab mới. Cố ý nhẹ hơn
   hai nút mua phía trên: đây là đường RA KHỎI trang, không được cạnh
   tranh với nút chốt đơn.
   ═════════════════════════════════════════════════════════════════════ */
.pcard__more {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: var(--s-3);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--vp-navy);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--vp-navy-200);
}
.pcard__more:hover { color: var(--vp-cta-700); text-decoration-color: currentColor; }

/* Biểu tượng "mở tab mới" — dấu hiệu quen thuộc, khách biết trước là sẽ
   sang trang khác chứ không bị bất ngờ. */
.pcard__more .ico {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Ảnh thẻ mờ đi một nhịp khi đổi sang biến thể khác — không có thì ảnh nhảy
   phựt, khách không kịp nhận ra là ảnh vừa đổi theo lựa chọn của mình. */
.pcard__media img { transition: opacity .18s var(--ease); }
.pcard__media img.is-swapping { opacity: .35; }

/* ═════════════════════════════════════════════════════════════════════
   COMBO TUỲ CHỈNH TRONG KHỐI GIẢI PHÁP — brief khách 2026-10-03

   Mọi con số dưới đây lấy thẳng từ brief "Khối giải pháp & combo tuỳ chỉnh"
   (mục "Phân cấp thị giác" và "Khoảng cách khuyến nghị"):
     · nhãn vấn đề → tiêu đề giải pháp ......... 8–12px
     · mô tả giải pháp → tên combo ............. 24–32px
     · tên combo → nhãn lợi ích ................ 20–28px
     · nhãn lợi ích → thẻ ...................... 12–16px
     · thẻ → voucher ........................... 20–28px
     · voucher → nút ........................... 16–24px
     · tên combo 28–34px bold · tiêu đề giải pháp 18–22px · mô tả 13–15px xám
     · khoảng cách giữa 3 cột thẻ 24–36px · đệm khối 28–40px
     · bộ chọn số lượng cao tối thiểu ~36px (điện thoại ≥44px), viền xanh ngọc
   Ghi số cụ thể ở đây để lần sau ai đó "chỉnh cho đẹp" còn biết mình đang
   lệch khỏi brief bao nhiêu.
   ═════════════════════════════════════════════════════════════════════ */

/*
 * Giải pháp có combo tuỳ chỉnh chiếm trọn MỘT HÀNG (brief: nội dung rộng
 * 1180–1280px, ba cột thẻ). Giải pháp chưa khai sản phẩm lẻ vẫn giữ lưới hai
 * cột như cũ — hai kiểu nằm chung một lưới không vỡ nhau.
 */
.solu--combo {
  grid-column: 1 / -1;
  /*
   * gap: 0 — `.solu` gốc là lưới có khoảng hở giữa các con. Để nguyên thì
   * khoảng hở đó CỘNG THÊM vào khoảng brief quy định: mô tả → tên combo đo ra
   * 44px thay vì 24–32px. Ở đây mọi khoảng cách ghi tường minh trên từng phần.
   */
  gap: 0;
  padding: clamp(20px, 3vw, 36px);                       /* đệm khối 28–40px trên máy tính */
  background: var(--surface, #fff);
  border: 1px solid #DCE6F0;                              /* viền xám xanh rất nhạt */
  border-radius: var(--r-lg);
}

/* Block 1 — nhãn vấn đề: tag nhỏ góc trên trái, nền cam nhạt, chữ cam đậm, một dòng. */
.solu--combo .solu__pain {
  /*
   * block + fit-content, KHÔNG inline-block: phần tử inline nằm trên một dòng
   * chữ của khối cha nên bị cộng thêm khoảng đệm của dòng bên dưới — đo ra
   * 18px tới tiêu đề thay vì 8–12px.
   */
  display: block; width: fit-content; max-width: 100%;
  margin-bottom: 10px;                                    /* 8–12px tới tiêu đề */
  padding: .28rem .75rem;
  border-radius: var(--r-pill);
  background: var(--vp-cta-50); color: var(--vp-cta-700);
  font-size: 12px; font-weight: var(--fw-bold);
  letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Block 2 — tiêu đề + mô tả giải pháp: căn trái, mô tả tối đa 2 dòng. */
.solu--combo .solu__title { font-size: clamp(18px, 1.6vw, 21px); font-weight: var(--fw-bold, 700); line-height: 1.35; margin-bottom: 6px; }
.solu--combo .solu__why {
  font-size: 14px; color: var(--ink-soft); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Tab phương án — ngay dưới mô tả giải pháp (brief), dạng chip. */
.solu__plans { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.solu__plans-label { font-size: 13px; font-weight: var(--fw-bold); color: var(--ink-soft); margin-right: 4px; }
.solu__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.solu__tab {
  min-height: 40px; padding: .45rem 1rem;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface, #fff); color: var(--ink);
  font-size: 14px; font-weight: var(--fw-bold); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.solu__tab:hover { border-color: var(--vp-teal); }
.solu__tab.is-on { background: var(--vp-navy); border-color: var(--vp-navy); color: #fff; }
.solu__tab:focus-visible { outline: 2px solid var(--vp-teal); outline-offset: 2px; }
.solu__panel[hidden] { display: none; }

/* ── KHỐI COMBO (block 3 → 8) ── */
.cbx { margin-top: 28px; }                               /* 24–32px từ mô tả tới tên combo */
.cbx.is-busy [data-btotal] { opacity: .45; transition: opacity .15s; }

/* Block 3 — tên combo: chữ to nhất khối, căn giữa, tối đa 2 dòng. */
.cbx__head { text-align: center; margin-bottom: 24px; }  /* 20–28px tới nhãn lợi ích */
.cbx__name {
  font-size: clamp(26px, 2.6vw, 32px); font-weight: var(--fw-black, 800);
  line-height: 1.2; color: var(--vp-navy-900, #0A2B4F);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cbx__for {
  display: inline-block; margin-top: 8px; padding: .2rem .7rem;
  border-radius: var(--r-pill); background: var(--bg-soft, #F3F7FA);
  font-size: 13px; color: var(--ink-soft);
}

/*
 * Block 4 + 5 + 6 — ba cột bằng nhau. Mỗi cột là MỘT MÓN gồm nhãn lợi ích, thẻ
 * sản phẩm, bộ chọn số lượng; gom vào chung một cột để khi trượt ngang trên
 * điện thoại nhãn không bị tách khỏi thẻ của nó (brief mục Mobile).
 */
.cbx__items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cbx__items[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
.cbx__items[data-count="1"] { grid-template-columns: minmax(0, 400px); justify-content: center; }
.cbx__item { display: flex; flex-direction: column; min-width: 0; }

/* Block 4 — nhãn lợi ích: nền xanh đậm chữ trắng, ba nhãn cao bằng nhau, tối đa 2 dòng. */
.cbx__benefit {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; margin: 0 auto 14px;                  /* 12–16px tới thẻ */
  padding: .5rem 1.1rem; width: fit-content; max-width: 100%;
  border-radius: var(--r-pill);
  background: var(--vp-navy); color: #fff;
  font-size: 13.5px; font-weight: var(--fw-bold); line-height: 1.35; text-align: center;
}
.cbx__benefit.is-empty { visibility: hidden; }            /* vẫn giữ chỗ để ba thẻ thẳng hàng */

/* Block 5 — thẻ sản phẩm: cao bằng nhau, tên tối đa 3 dòng, không nhấc khi rê chuột (cả khối đã là thẻ). */
.cbx__item .pcard { flex: 1; height: auto; }
.cbx__item .pcard:hover { transform: none; }
.cbx__item .pcard__name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cbx__item .pcard__benefit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Block 6 — bộ chọn số lượng: cuối mỗi thẻ, thẳng hàng ba cột, viền xanh ngọc. */
.cbx__qty {
  display: inline-flex; align-items: stretch; align-self: center;
  margin-top: 14px; height: 40px;                          /* ≥36px */
  border: 1.5px solid var(--vp-teal); border-radius: var(--r-pill);
  background: var(--surface, #fff); overflow: hidden;
}
.cbx__qty button {
  width: 42px; border: 0; background: transparent; color: var(--vp-navy);
  font-size: 18px; font-weight: var(--fw-bold); cursor: pointer;
}
.cbx__qty button:hover:not(:disabled) { background: var(--vp-teal-50); }
.cbx__qty button:disabled { color: var(--ink-muted); opacity: .45; cursor: not-allowed; }
.cbx__qty input {
  width: 44px; border: 0; background: transparent; text-align: center;
  font-size: 15px; font-weight: var(--fw-bold); color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
.cbx__qty input::-webkit-outer-spin-button,
.cbx__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cbx__qty input:focus-visible { outline: 2px solid var(--vp-teal); outline-offset: -2px; }

/* Block 7 — dải voucher: dưới ba thẻ, trên nút; chữ chính đậm, điều kiện chữ nhỏ. */
.cbx__voucher {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; margin: 24px auto 0;                  /* 20–28px từ thẻ */
  padding: 12px 16px;
  border: 1.5px dashed var(--vp-cta); border-radius: var(--r-md);
  background: var(--vp-cta-50);
}
.cbx__vicon { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--vp-cta); }
.cbx__vicon svg { width: 20px; height: 20px; }
.cbx__vbody { display: grid; gap: 2px; min-width: 0; }
.cbx__vname { font-size: 15px; color: var(--vp-cta-700); }
.cbx__vcond, .cbx__vstate { font-size: 12.5px; color: var(--ink-soft); }
.cbx__vstate:empty { display: none; }
.cbx__voucher.is-ok { border-style: solid; border-color: var(--vp-teal); background: var(--vp-teal-50); }
.cbx__voucher.is-ok .cbx__vicon { color: var(--vp-teal-700); }
.cbx__voucher.is-ok .cbx__vstate { color: var(--vp-teal-800); font-weight: var(--fw-bold); }
.cbx__voucher.is-no .cbx__vstate { color: var(--vp-cta-700); font-weight: var(--fw-bold); }

/* Giá combo ngay trên nút. */
.cbx__total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 10px;
  margin-top: 20px; font-size: 15px;                      /* 16–24px tới nút cùng với khoảng của nút */
}
.cbx__tlabel { color: var(--ink-soft); }
.cbx__total b { font-size: 22px; font-weight: var(--fw-black); color: var(--vp-cta-700); }
.cbx__total s { color: var(--ink-muted); }
.cbx__save { padding: .15rem .6rem; border-radius: var(--r-pill); background: #E7F7EE; color: #138A4B; font-size: 13px; font-weight: var(--fw-bold); }

/*
 * Block 8 — hai nút căn giữa, cách nhau 20–28px. Nút chính nền cam, nút phụ
 * nền trắng viền xanh ngọc; nút chính nổi hơn ~10–20% (rộng hơn + đổ bóng).
 */
.cbx__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 18px; }
.cbx__cta .btn { min-height: 52px; min-width: 210px; }
.cbx__cta .btn--primary { min-width: 240px; }
.cbx__cta .cbx__add { background: #fff; border-color: var(--vp-teal); color: var(--vp-navy); }
.cbx__cta .cbx__add:hover { background: var(--vp-teal-50); }
.cbx__cta .btn:disabled { opacity: .6; cursor: progress; }

/*
 * MÁY TÍNH BẢNG VÀ ĐIỆN THOẠI — brief: "không ép 3 cột trên mobile", ưu tiên
 * trượt ngang một thẻ một lần; nhãn lợi ích đi cùng thẻ; vùng bấm ≥ 44px.
 * Thẻ thứ hai ló ra một mép để khách biết là còn thẻ để vuốt.
 */
@media (max-width: 900px) {
  .cbx__items,
  .cbx__items[data-count="2"] {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: min(86%, 340px); gap: 14px;
    max-width: none; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 2px 2px 10px; margin-inline: -2px;
    -webkit-overflow-scrolling: touch;
  }
  .cbx__items[data-count="1"] { grid-auto-flow: row; grid-template-columns: minmax(0, 400px); overflow: visible; }
  .cbx__item { scroll-snap-align: start; }
  .solu--combo { padding: 18px 14px; }                     /* nhường bề ngang cho thẻ: thẻ hẹp quá thì tên và hương bị bẻ dòng vụn */
  .cbx__qty { height: 46px; }                              /* ≥ 44px */
  .cbx__qty button { width: 48px; }
  .cbx__cta { gap: 12px; }
  .cbx__cta .btn { flex: 1 1 100%; min-height: 50px; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .cbx__items { scroll-behavior: smooth; }
}

/* ═════════════════════════════════════════════════════════════════════
   THẺ COMBO — CHỌN MÙI HƯƠNG (brief khách 2026-10-08,
   doc/Brief_Chi_tiet_Combo_Vinapet_Chon_mui_huong_cap_nhat_ten.docx)

   12 khối theo đúng thứ tự brief; khối 6 "Chọn mùi hương" nằm ngay dưới
   "Dành cho", trước thành phần combo. Chỉ thêm, không sửa luật gốc.
   ═════════════════════════════════════════════════════════════════════ */

/* Khối 1 — chữ dải cam đọc từ admin (data-ribbon), không viết cứng trong CSS. */
.ccard--featured[data-ribbon]::before { content: attr(data-ribbon); text-transform: uppercase; }

/* Khối 4 — tên 20–26px máy tính / 18–22px điện thoại, tối đa 2 dòng. */
.ccard h3 {
  font-size: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  line-height: 1.3;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
/* Khối 5 — tối đa 2 dòng để các thẻ không lệch chiều cao. */
.ccard__for {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}

/* Khối 6 — chip ngang, active cam nhạt, inactive trắng viền xám. */
.ccard__flavor { margin: 0 0 var(--s-4); }
.ccard__flavor-label {
  font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink);
  margin-bottom: var(--s-2);
}
.ccard__flavors { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ccard__flv {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: .35rem .95rem;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-soft);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ccard__flv:hover:not(:disabled) { border-color: var(--vp-cta); color: var(--vp-cta-700); }
.ccard__flv:focus-visible { outline: 2px solid var(--vp-cta); outline-offset: 2px; }
.ccard__flv.is-on {
  border-color: var(--vp-cta); background: var(--vp-cta-50);
  color: var(--vp-cta-700); font-weight: var(--fw-bold);
}
/* Hết hàng: giữ chip, mờ + gạch nhẹ, không bấm được. */
.ccard__flv:disabled { opacity: .5; text-decoration: line-through; cursor: not-allowed; }
.ccard__flv small { font-size: 11px; font-weight: var(--fw-semibold); text-decoration: none; }

.ccard__mixlink {
  margin-top: var(--s-2); padding: .25rem 0; min-height: 32px;
  background: none; border: 0; cursor: pointer;
  color: var(--vp-teal-700); font-size: var(--fs-xs); font-weight: var(--fw-bold);
  text-decoration: underline; text-underline-offset: 3px;
}
.ccard__mixsum {
  margin-top: var(--s-2); padding: .35rem .7rem; border-radius: var(--r-xs);
  background: var(--vp-cta-50); color: var(--vp-cta-700);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.ccard__flavor-err {
  margin-top: var(--s-2);
  color: var(--vp-danger); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
/* Khách bấm mua khi chưa chọn: khối rung nhẹ + viền đỏ để mắt tìm tới ngay. */
.ccard__flavor.is-error .ccard__flv:not(:disabled) { border-color: var(--vp-danger); }
@media (prefers-reduced-motion: no-preference) {
  .ccard__flavor.is-error { animation: vnpShake .36s var(--ease); }
}
@keyframes vnpShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Khối 7 — dòng quà tặng dùng icon quà thay dấu tick. */
.ccard__items li.is-gift::before { content: '🎁'; font-weight: normal; }

/* Khối 11–12 — nút cao tối thiểu 48px. */
.ccard__acts .btn { min-height: 48px; }
/* Khối 8 — giá và giá gạch không bị bẻ dòng chồng lên nhau. */
.ccard__row { flex-wrap: wrap; }
.ccard__row b, .ccard__row s, .ccard__save { white-space: nowrap; }

/* Bố cục: máy tính 3 thẻ/hàng (300–360px); điện thoại và máy tính bảng một
   thẻ một hàng, giữ nguyên thứ tự khối. Thẻ không bị kéo quá rộng trên
   máy tính bảng dọc. */
@media (max-width: 1023px) {
  #comboGrid.combo__grid { grid-template-columns: minmax(0, 560px); justify-content: center; }
}
@media (min-width: 1024px) {
  #comboGrid.combo__grid { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; }
}

/* Khối 2 — ảnh chiếm khoảng 35–42% chiều cao thẻ (brief mục 4). Khung 4:3 cũ
   chỉ được ~28% vì thẻ nay dài thêm khối chọn mùi. */
#comboGrid .ccard__media { aspect-ratio: 8 / 9; padding: var(--s-3); }

/* Cửa sổ "Tùy chọn từng túi" — dùng <dialog> gốc của trình duyệt (tự khoá
   tiêu điểm, Esc để đóng). */
.flvmix {
  width: min(420px, calc(100vw - 32px));
  padding: 0; border: 0; border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); color: var(--ink);
}
.flvmix::backdrop { background: rgba(10, 43, 79, .55); }
.flvmix__in { padding: var(--s-5); }
.flvmix__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.flvmix__head h3 { font-size: 1.1rem; margin: 0; }
.flvmix__x {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--surface-2, #F3F6F9); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.flvmix__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .6rem 0; border-bottom: 1px dashed var(--line);
}
.flvmix__row.is-out { opacity: .5; }
.flvmix__name { font-weight: var(--fw-semibold); }
.flvmix__name small { display: block; color: var(--ink-muted); font-weight: normal; }
.flvmix__qty { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r-pill); }
.flvmix__qty button {
  width: 44px; height: 44px; border: 0; background: none;
  font-size: 1.2rem; cursor: pointer; color: var(--vp-navy);
}
.flvmix__qty button:disabled { opacity: .3; cursor: not-allowed; }
.flvmix__qty span { min-width: 2ch; text-align: center; font-weight: var(--fw-bold); }
.flvmix__count { margin: var(--s-4) 0 var(--s-3); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--vp-cta-700); }
.flvmix__count.is-full { color: var(--vp-success); }
.flvmix__ok { width: 100%; min-height: 48px; }