/* ═══════════════════════════════════════════════════════════════════════
   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.
 */
#checkoutModal .cogrid:not([data-step="1"]) .qty--xs,
#checkoutModal .cogrid:not([data-step="1"]) .coline__del { display: none; }

#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 ý gọn lại một chút để chừa chỗ cho hàng trong giỏ. */
#cartDrawer .ucard { width: 116px; }
#cartDrawer .ucard img { aspect-ratio: 4 / 3; }

/* 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; }