/* Landing Remembite, hướng F "Price Gun" (NUT-33). Chỉ index.html nạp file này; styles.css dùng chung cho các trang khác. */

@font-face {
  font-family: "Bowlby One";
  src: url("fonts/BowlbyOne-Regular.woff2?v=nut199") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DotGothic16";
  src: url("fonts/DotGothic16-Regular.woff2?v=nut199") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2?v=nut199") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium-Latin1.woff2?v=nut199") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

/* Tương phản đo trên nền giấy #f6f3ec: mực 15.7, chữ phụ 6.8, accent chữ 5.0; mực trên nhãn cam 7.4; xanh trên máy tính tiền 12.2. */
:root {
  /* NUT-149: Bowlby One chỉ có 400, Plex Mono chỉ 400 và 500: tắt đậm giả, vẫn cho nghiêng giả (không có file italic). */
  font-synthesis: style;
  --paper: #f6f3ec;
  --paper-2: #ebe6d8;
  --card: #fffdf6;
  --ink: #1a1a1a;
  --muted: #5a5448;
  --label: #ff8a3d;
  /* NUT-149: một cam thương hiệu (#ff8a3d, --label) cho mảng màu; --accent-text là mực cam cho chữ và nét mảnh. Cam đỏ cũ đã bỏ. */
  --accent-text: #b8400f;
  --star: #ffd23f;
  --till-fg: #7cf08a;
  --rule: #cfc8b8;
  /* Nhãn nguồn, cùng giá trị với apps/pwa/tokens.css (NUT-105). */
  --src-checked: #2f7d4a;
  --src-ai: #5a5448;
  --src-confirmed: #b8400f;
  --src-legacy: #6b6457;
  --display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --dot: "DotGothic16", ui-monospace, monospace;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --maxw: 1120px;
}

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

/* Lưới an toàn: không cho trang kéo ngang trên iOS Safari dù có phần tử nào đó tràn mép (NUT-33). clip không tạo scroll container nên header sticky vẫn chạy; Safari cũ không có clip thì dùng hidden trên body. */
html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body {
    overflow-x: hidden;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
    animation: none !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--star);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -4rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 100;
}

.skip:focus {
  top: 8px;
}

.fine {
  font-size: 0.8rem;
  color: var(--muted);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.brand svg {
  width: 30px;
  height: 30px;
}

.logo-bg {
  fill: var(--ink);
}
.logo-plate {
  fill: var(--label);
}
.logo-stroke {
  fill: none;
  stroke: var(--till-fg);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px 20px;
}

.nav-links a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.88rem;
}

.nav-links a:not(.btn):hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav-links .menu {
  display: none;
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "\25BE";
  margin-left: 4px;
}

.nav-menu ul {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.nav-menu ul a {
  display: block;
  padding: 12px 10px;
}

/* Cùng breakpoint với seo.css và styles.css: dưới 800px 4 link gộp vào menu <details>, nút Get started free không xuống dòng. */
@media (max-width: 800px) {
  .nav-links .opt {
    display: none;
  }
  .nav-links .menu {
    display: list-item;
  }
  .nav .btn.small {
    white-space: nowrap;
  }
}

/* Dưới 480px không đủ chỗ cho chữ Remembite, menu và nút Get started free trên một hàng: chỉ giữ logo (link vẫn có aria-label). */
@media (max-width: 480px) {
  .nav .brand {
    gap: 0;
    font-size: 0;
  }
}

.progress {
  display: none;
}

.js .progress {
  display: block;
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 60;
  pointer-events: none;
}

.progress span {
  display: block;
  height: 100%;
  background: var(--label);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 46px;
  padding: 0 20px;
  letter-spacing: 0;
  font-synthesis: none;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: var(--label);
  color: var(--ink);
  font: 500 0.95rem/1 var(--mono);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.12s, box-shadow 0.12s;
}

.btn:hover {
  color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.btn.small {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.85rem;
  box-shadow: 3px 3px 0 var(--ink);
}

.btn.ghost {
  background: var(--card);
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* Nút ở hàng CTA hero không được co/ngắt dòng (tránh cắt chữ); nút nhỏ ở header vẫn co được để vừa 320px. */
.cta-row .btn {
  flex: none;
  white-space: nowrap;
}

/* Dưới 480px hai nút hero xếp chồng cùng bề rộng (uma NUT-111 P2). */
@media (max-width: 479px) {
  .cta-row {
    display: grid;
    width: 100%;
  }
  .cta-row .btn {
    width: 100%;
  }
}

.nav .btn.small {
  padding: 0 10px;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
}

.js .magnetic {
  will-change: transform;
}

/* ---------- Pre-hide cho animation (chỉ khi JS + không giảm chuyển động) ---------- */

.js [data-hero]:not(.lede) {
  opacity: 0;
}

.js #hero-title {
  visibility: hidden;
}

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}

/* NUT-149: lưới an toàn khi GSAP hay landing.js không chạy (tải lỗi, chặn script): sau 3 s nội dung tự hiện.
   landing.js gắn .gsap-on ngay khi GSAP sẵn sàng, từ đó GSAP điều khiển và quy tắc này không còn khớp.
   Người chọn giảm chuyển động không bao giờ có lớp .js (boot.js), nên không bị ẩn gì. */
.js:not(.gsap-on) [data-reveal],
.js:not(.gsap-on) [data-hero]:not(.lede) {
  animation: reveal-fallback 300ms ease-out 3s forwards;
}

.js:not(.gsap-on) #hero-title {
  animation: reveal-fallback-title 0s linear 3s forwards;
}

@keyframes reveal-fallback {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal-fallback-title {
  to {
    visibility: visible;
  }
}

.hl {
  overflow: hidden;
  padding-bottom: 0.08em;
}

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

.hero {
  display: grid;
  gap: 36px;
  padding-top: 36px;
  padding-bottom: 44px;
  align-items: start;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 48px;
    padding-top: 56px;
    padding-bottom: 64px;
  }
}

.hero-copy {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.eyebrow {
  display: inline-block;
  padding: 4px 10px;
  background: var(--star);
  border: 2px solid var(--ink);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

h1 {
  font: 400 clamp(2.25rem, 6.4vw, 3.4rem) / 1 var(--display);
  letter-spacing: -0.01em;
  max-width: 16ch;
}

.lede {
  font-size: 1.02rem;
  max-width: 44ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

/* Sổ ghi hero (NUT-102): một ngày mẫu lấy đúng số của /demo/ (offset 0 và 6 ngày trước), mỗi bữa ghi AI nào đã gửi. */

.record {
  margin: 0;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 20px 16px;
  display: grid;
  gap: 12px;
}

@media (min-width: 520px) {
  .record {
    padding: 24px 24px 20px;
  }
}

.record-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.record-title {
  font: 400 1.5rem/1.05 var(--display);
}

.record-rows {
  border-top: 1px dashed var(--muted);
}

.record-rows > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px dashed var(--rule);
  font-size: 0.86rem;
}

.r-when b {
  font-weight: 600;
  margin-right: 4px;
}

.r-kcal {
  font: 400 1.15rem/1 var(--dot);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Từng món dưới bữa (NUT-107): tên, kcal món bên phải, nhãn nguồn dưới tên như dashboard (NUT-105). */
.r-items {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--paper-2);
  list-style: none;
}

.r-items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px;
  align-items: baseline;
}

.r-ikcal {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Nhãn nguồn: chữ mang nghĩa, hình dấu khác nhau theo hình dạng (NUT-105 "He nhan nguon"). */
.src-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--muted);
}

.src-glyph {
  flex: none;
  width: 8px;
  height: 8px;
}

.src-checked {
  border-radius: 50%;
  background: var(--src-checked);
}

.src-ai {
  border-radius: 50%;
  border: 1.5px solid var(--src-ai);
}

.src-confirmed {
  width: 7px;
  height: 7px;
  margin: 0 0.5px;
  background: var(--src-confirmed);
  transform: rotate(45deg);
}

/* Fine print hero (NUT-102 vòng 1): chữ lớn hơn .fine mặc định một bậc, màu mực vì là dòng trấn an chính (uma NUT-132). */
.hero-copy .fine {
  font-size: 0.86rem;
  color: var(--ink);
}

/* Dòng AI ngay dưới sub (NUT-111): chữ mực cỡ thân bài, tên AI đậm trên nền giấy đậm, để test 10 giây thấy Claude và ChatGPT trước CTA. Không logo (nhãn hiệu của chủ sở hữu). */
.ai-line {
  font-size: 0.95rem;
  line-height: 2;
}

/* Nền vàng như eyebrow, không viền: đọc như chữ được tô, không như nút hay code (v1 nền giấy giống code, v2 viền mực giống nút). */
.ai-name {
  padding: 2px 4px;
  background: var(--star);
  font-weight: 600;
  white-space: nowrap;
}

/* NUT-199: "ChatGPT (beta)" là một link, cả khối là một chip vàng, chữ mực, một gạch chân (không chạy qua khoảng trắng nhờ nbsp + nowrap). */
.ai-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.record-macros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.82rem;
  color: var(--muted);
}

.record-macros b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.week {
  display: grid;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--muted);
}

.week-label {
  font-size: 0.78rem;
  font-weight: 500;
}

.week-chart {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
}

.week-base {
  stroke: var(--ink);
  stroke-width: 2;
}

.week-bar {
  fill: var(--label);
  stroke: var(--ink);
  stroke-width: 2;
}

.week-bar.today {
  fill: var(--ink);
}

.week-gap {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
}

.week-day {
  fill: var(--muted);
  font: 400 11px/1 var(--mono);
}

.week-day.end {
  text-anchor: end;
}

/* Máy tính tiền */

.till {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--till-fg);
  font: 400 1.15rem/1.3 var(--dot);
  font-variant-numeric: tabular-nums;
}

.till-num {
  flex: 1;
  text-align: right;
  font-size: 2rem;
  line-height: 1;
}

/* ---------- Badges / tags ---------- */

.badge {
  display: inline-block;
  padding: 2px 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font: 500 0.72rem/1.4 var(--mono);
  background: var(--card);
  color: var(--ink);
  white-space: nowrap;
}

.badge.medium {
  background: var(--star);
}
.badge.low {
  background: #ffc9b3;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--paper);
  font: 400 0.8rem/1.4 var(--dot);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.section {
  padding: 56px 0;
  border-top: 0;
}

/* NUT-149: các section tách nhau bằng khoảng trắng và dải nền giấy đậm xen kẽ, không còn vạch đen ngang. */
/* NUT-165: khối giá đã gộp vào #start, nên #start nhận dải nền đậm để tách khỏi FAQ. */
.section.how,
.section#start {
  background: var(--paper-2);
}

.section-head {
  margin-bottom: 28px;
}

h2 {
  font: 400 clamp(1.7rem, 4.6vw, 2.8rem) / 1.05 var(--display);
  max-width: 22ch;
}

h3 {
  font: 400 1.35rem/1.15 var(--display);
}

.feature {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-bottom: 56px;
}

.feature:last-child {
  margin-bottom: 0;
}

/* NUT-165: khối chỉ có chữ (bỏ thẻ minh hoạ): chữ rộng tối đa 34rem, vạch cam bên trái như dòng nhấn trên tờ bill;
   bên cạnh là hàng nhãn ngắn (uma vòng 4) để màn rộng không trống. */
.feature.solo .feature-text {
  max-width: 34rem;
  padding-left: 20px;
  border-left: 6px solid var(--label);
}

@media (min-width: 860px) {
  .feature {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
  }
  .feature.flip .feature-text {
    order: 2;
  }
  .feature.solo {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  }
  .feature.solo .solo-chips {
    justify-content: center;
  }
}

.feature-text {
  display: grid;
  gap: 12px;
  max-width: 46ch;
}

.card {
  position: relative;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 20px 18px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.card h4 {
  font: 400 1.15rem/1.2 var(--display);
}

.kcal {
  font: 400 1.6rem/1.1 var(--dot);
  font-variant-numeric: tabular-nums;
}

.rows {
  display: grid;
  gap: 6px;
}

.rows li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px dashed var(--rule);
  font-size: 0.86rem;
}

.num {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Thẻ kiểm tra số lệch (NUT-102, theo NUT-99): AI gửi số, Remembite hỏi lại, chỉ lưu sau khi người dùng trả lời. */

.check-head,
.memory-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.check-sent,
.check-ask,
.check-fix {
  display: grid;
  gap: 4px;
}

.check-who {
  font: 400 0.8rem/1.4 var(--dot);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.check-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--card);
  border: 2px solid var(--ink);
  font-size: 0.88rem;
}

.check-sent .num {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.check-ask p {
  padding: 12px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.86rem;
}

.check-fix {
  gap: 8px;
}

.check-line.saved {
  background: #c9f2cf;
  font-weight: 500;
}

.check-line.saved .src-tag {
  display: flex;
  margin-top: 4px;
  color: var(--ink);
}

/* Vòng 6: nhãn là chữ thường có chấm cam, không viền, không bóng, để không bị nhầm là nút. */
.solo-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
}

.solo-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 400 1.1rem/1.4 var(--dot);
  color: var(--ink);
}

.solo-chips li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--label);
}

/* Link hành động dạng chữ có mũi tên (NUT-111); NUT-165 bỏ thẻ Account và thẻ demo khỏi trang chủ. */
.go-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
  text-decoration-thickness: 2px;
}

.go-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
}

/* Memory card: cắt phần animation scatter lòi ra ngoài để không làm trang rộng ra. Dùng hidden (mọi Safari đều tôn trọng), landing.js còn giới hạn vị trí bắt đầu trong viewport. */
.memory {
  overflow: hidden;
}

.memory-name {
  font: 400 1.1rem/1.2 var(--display);
}

.mem-rows {
  display: grid;
  gap: 8px;
}

.mem-chip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--card);
  border: 2px solid var(--ink);
  font-size: 0.88rem;
}

.mem-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--till-fg);
}

.mem-total .kcal {
  font-size: 1.3rem;
}

.mem-total .badge {
  color: var(--ink);
}

.mem-say q {
  font-weight: 500;
}

.mem-saved {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.pill {
  padding: 2px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--star);
  font-size: 0.8rem;
  font-weight: 500;
}

/* ---------- How: tờ bill 3 dòng ---------- */

.receipt-sheet {
  max-width: 640px;
  padding: 24px 22px 28px;
  background: var(--card);
  border: 2px solid var(--ink);
  border-bottom: 6px double var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.receipt-head,
.receipt-foot {
  font: 400 0.95rem/1.3 var(--dot);
  letter-spacing: 0.08em;
  text-align: center;
}

.receipt-head {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--muted);
}

.receipt-foot {
  padding-top: 12px;
  border-top: 1px dashed var(--muted);
}

.steps {
  counter-reset: step;
  display: grid;
  margin: 4px 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 0 16px 48px;
}

.steps li + li {
  border-top: 1px dashed var(--rule);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 16px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--label);
  color: var(--ink);
  border-radius: 3px;
  rotate: -4deg;
  font: 400 1.2rem/1 var(--dot);
}

.steps h3 {
  font-size: 1.1rem;
}

/* NUT-120: buoc 1 liet ke 3 thao tac ket noi nhu cac dong hang tren bill */
.steps .substeps {
  counter-reset: sub;
  display: grid;
  gap: 4px;
  margin: 4px 0;
  padding: 8px 12px;
  background: var(--paper);
  border-left: 3px solid var(--label);
}

.steps .substeps li {
  counter-increment: sub;
  display: block;
  padding: 0 0 0 28px;
  border: 0;
}

.steps .substeps li::before {
  content: counter(step) counter(sub, lower-alpha);
  left: 0;
  top: 0;
  display: inline;
  width: auto;
  height: auto;
  background: none;
  rotate: none;
  font: 400 1rem/1.6 var(--dot);
  color: var(--accent-text);
}

@media (max-width: 599px) {
  .steps .substeps {
    padding: 8px 8px 8px 10px;
  }

  .steps .substeps li {
    padding-left: 24px;
  }
}

.steps .step-note {
  color: var(--muted);
}

.how-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.how-link:hover {
  text-decoration-color: var(--accent-text);
}

/* ---------- How: clip từng bước (NUT-165) ----------
   Dưới 1024 px: clip ngay dưới mỗi bước, khung bên phải ẩn. Từ 1024 px: 2 cột, khung clip dính bên phải đổi theo bước
   đang chọn (how-clips.js); không JS thì khung phải chỉ hiện clip bước 1. */

.how-grid {
  display: grid;
  gap: 24px;
}

.how-stage {
  display: none;
}

.how-clip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0;
}

.how-frame {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.how-poster {
  display: block;
  width: 100%;
  height: auto;
}

/* Video nằm đè lên poster, trong suốt tới khi có khung hình đầu; bị chặn phát thì ẩn để poster hiện. */
.how-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.how-frame.is-poster .how-video {
  visibility: hidden;
}

.how-clip figcaption {
  grid-column: 2;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
}

.how-clip figcaption .tag {
  margin-right: 4px;
}

/* Không JS: nút ẩn, chú thích chiếm cả hàng. */
.how-toggle[hidden] + figcaption {
  grid-column: 1 / -1;
}

.how-toggle,
.how-pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 4px;
  font: 500 0.8rem/1 var(--mono);
  cursor: pointer;
}

.how-toggle[hidden],
.how-pick[hidden] {
  display: none;
}

/* Vùng bấm Pause/Play cao 48 px (>= 44) mà nút vẫn nhỏ (uma vòng 3). */
.how-toggle {
  position: relative;
}

.how-toggle::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

.how-toggle:hover,
.how-pick:hover {
  background: var(--paper-2);
}

/* Biểu tượng: tam giác (Play) hoặc hai vạch (Pause), vẽ bằng viền. */
.how-icon {
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.how-toggle[data-playing] .how-icon {
  width: 8px;
  height: 10px;
  border: 0;
  border-inline: 3px solid currentColor;
}

/* Clip trong bước: lấn sang cột số để rộng bằng tờ bill. */
.how-inline {
  margin: 8px 0 4px -48px;
  max-width: 24rem;
}

/* 640-1023 px: clip 24rem canh giữa tờ bill (tính cả cột số 48 px), không dồn trái (uma vòng 3). */
@media (min-width: 640px) and (max-width: 1023px) {
  .how-inline {
    width: 24rem;
    max-width: calc(100% + 48px);
    margin-left: max(-48px, calc((100% - 24rem) / 2 - 24px));
  }
}

/* Dưới 640 px: nút Pause/Play, nhãn và chú thích xếp chồng (uma, NUT-162). */
@media (max-width: 639px) {
  .how-clip {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .how-toggle {
    justify-self: start;
  }
  .how-clip figcaption,
  .how-toggle[hidden] + figcaption {
    grid-column: 1;
  }
}

@media (min-width: 1024px) {
  .how-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: 56px;
    align-items: start;
  }
  .how-grid .receipt-sheet {
    max-width: none;
  }
  .how-stage {
    display: block;
    position: sticky;
    top: 96px;
  }
  .how-inline {
    display: none;
  }
  .how-staged + .how-staged {
    display: none;
  }
  .how-grid.is-staged .how-staged {
    display: none;
  }
  .how-grid.is-staged .how-staged.is-active {
    display: grid;
  }
  /* Màn laptop thấp (vd 1024x700): khung clip co theo chiều cao để hàng nút + chú thích vẫn trong màn hình khi dính.
     208 px = top 96 + khoảng 112 cho hàng chú thích. */
  .how-staged .how-frame {
    justify-self: start;
    width: min(100%, calc((100vh - 208px) * 0.8));
  }
  /* Nút chọn bước: nhẹ như link (không viền), để tờ bill không thành dãy nút; bước đang chọn thì gạch cam. */
  .how-pick {
    justify-self: start;
    margin-top: 4px;
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--muted);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  .how-pick::before {
    content: "";
    width: 0;
    height: 0;
    border-block: 5px solid transparent;
    border-left: 8px solid currentColor;
  }
  .how-pick:hover {
    background: none;
    color: var(--ink);
  }
  .how-pick[aria-pressed="true"] {
    color: var(--ink);
    text-decoration-color: var(--label);
  }
  /* Bước đang chọn: vạch cam bên trái tờ bill, số bước cam; bước khác số nền giấy. */
  .how-grid.is-staged .steps > li {
    cursor: pointer;
  }
  .how-grid.is-staged .steps > li::before {
    background: var(--paper-2);
    transition: background-color 0.2s;
  }
  .how-grid.is-staged .steps > li.is-active::before {
    background: var(--label);
  }
  .how-grid.is-staged .steps > li.is-active::after {
    content: "";
    position: absolute;
    left: -24px;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--label);
  }
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 760px;
  border-top: 1px solid var(--rule);
}

.faq details {
  border-bottom: 1px solid var(--rule);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--label);
  border: 2px solid var(--ink);
  font: 400 1.1rem/1 var(--dot);
}

.faq details[open] summary::after {
  content: "-";
}

.faq-body {
  overflow: hidden;
}

.faq-body p {
  padding: 0 4px 18px;
  max-width: 62ch;
}

/* ---------- Khối đăng ký cuối trang: phiếu, có nhãn giá FREE dán ở góc (NUT-165 gộp khối Pricing vào đây) ---------- */

.price-stamp {
  position: absolute;
  top: -20px;
  right: 16px;
  padding: 8px 14px 6px;
  background: var(--label);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font: 400 1.6rem/1 var(--dot);
  rotate: 4deg;
}

.price-line {
  padding: 10px 0;
  border-block: 2px dashed var(--ink);
}

.signup {
  position: relative;
  max-width: 640px;
  display: grid;
  gap: 14px;
  padding: 26px 22px 24px;
  background: var(--star);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.signup::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 0;
  border-top: 2px dashed var(--muted);
}

.signup h2 {
  margin-top: 6px;
}

.signup .fine {
  color: var(--ink);
}

.signup a {
  color: var(--ink);
}

/* NUT-137: link chính sách dữ liệu sức khoẻ trong khối đăng ký. Tên dài xuống dòng ở 390px, nên dùng block để mũi tên đi liền sau chữ. */
.signup .go-link {
  display: block;
  padding-block: 10px;
  margin-top: -8px;
}

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

.site-footer {
  padding: 32px 0 44px;
  border-top: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.82rem;
}

.site-footer .wrap {
  display: grid;
  gap: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.site-footer a {
  color: var(--star);
}

.site-footer :focus-visible {
  outline-color: var(--star);
  box-shadow: none;
}

.site-footer p {
  max-width: 70ch;
  color: #d9d3c3;
}