/* Trang chờ của Mibi. Nền phẳng, ô trắng, màu chỉ nằm ở biểu tượng; mọi giá trị lấy từ biến bên dưới. */
:root {
  --bg: #eef0f5;
  --surface: #ffffff;
  --ink: #15151b;
  --ink-2: #33363f;
  --muted: #5b5e69;
  --faint: #646775;
  --line: #dcdfe7;
  --line-soft: #e6e8ee;
  --accent: #4b51d1;
  --accent-ink: #373b98;
  --ok: #237a52;
  --err: #c93c45;

  --violet-bg: #ecebff; --violet-fg: #4d4590;
  --green-bg: #e3f4ea; --green-fg: #2f6b4f;
  --yellow-bg: #fff1c2; --yellow-fg: #6a4c00;
  --blue-bg: #e3f1ff; --blue-fg: #245a78;
  --red-bg: #ffe6e1; --red-fg: #7b3328;

  --font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 13px; --fs-s: 14px; --fs-m: 16px; --fs-l: 17px; --fs-xl: 20px;
  --fs-h2: 26px; --fs-h1: 36px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px;
  --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px; --s24: 96px;

  --r-s: 12px; --r-m: 16px; --r-l: 24px; --r-pill: 999px; --r-screen: 36px;
  --shadow-float: 0 1px 2px rgb(30 32 52 / 6%), 0 8px 20px rgb(30 32 52 / 10%), 0 24px 48px rgb(30 32 52 / 12%);
  /* Ảnh chụp màn app: bóng nhạt ngả màu nền, giống màn hình đặt trên bàn chứ không nổi lơ lửng. */
  --shadow-shot: 0 1px 2px rgb(30 32 52 / 5%), 0 18px 36px -14px rgb(30 32 52 / 22%);
  --well: #e3e6ee;
  /* Màu logo: ô vuông và chữ (xanh đen), khối chữ m bên trái (tím) pha nhạt làm nền một mục. */
  --navy: #1f2135;
  --lavender-bg: #f1eefe; --lavender-well: #e2dcfd;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --t-fast: 150ms; --t-mid: 240ms;

  --gutter: 24px;
  --container: 1120px;
}

@media (min-width: 960px) {
  :root { --fs-h2: 34px; --fs-h1: 48px; --gutter: 32px; }
}

*, *::before, *::after { box-sizing: border-box; }
/* Chừa thanh trên cùng (64px) và quãng trượt 24px của hiệu ứng hiện dần, để bấm liên kết tới một phần thì tiêu đề
   không bị thanh che. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 104px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.flow-open { overflow: hidden; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
img { display: block; max-width: 100%; }
a { color: var(--accent-ink); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid rgb(75 81 209 / 55%); outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
[hidden] { display: none !important; }

.visually-hidden {
  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; left: var(--s4); top: -100px; z-index: 60;
  padding: var(--s3) var(--s4); border-radius: var(--r-s);
  background: var(--ink); color: #fff; text-decoration: none;
}
.skip-link:focus { top: var(--s3); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container.narrow > * { max-width: 760px; }
.closing .container > * { margin-left: auto; margin-right: auto; }

/* Thanh trên cùng */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgb(238 240 245 / 92%);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease);
}
.topbar.is-scrolled { border-bottom-color: var(--line-soft); }
.topbar-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; min-height: 44px; }
/* Logo cắt sát (không viền trong suốt): cao 26px trên điện thoại, 28px từ 640px. */
.brand img { height: 26px; width: auto; }
@media (min-width: 640px) { .brand img { height: 28px; } }
.topbar-cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font-size: var(--fs-s); font-weight: 700; text-decoration: none;
}
.topbar-cta:hover { background: #2b2b35; }
.topbar-cta.is-done { background: var(--surface); color: var(--ok); box-shadow: inset 0 0 0 1px var(--line-soft); }
.topbar-cta.is-done:hover { background: var(--surface); }
/* Liên kết tới các phần chính, chỉ trên máy tính, nằm giữa thanh; nút Giữ chỗ luôn ở bên phải (thành "Đã giữ chỗ" khi đã giữ chỗ). */
.topbar-inner { position: relative; }
.topbar-nav { display: none; }
@media (min-width: 960px) {
  .topbar-nav { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: var(--s8); }
  .topbar-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: var(--fs-s); font-weight: 600; text-decoration: none; }
  .topbar-nav a:hover { color: var(--ink); }
}

/* Màn đầu */
.hero { padding: var(--s2) 0 var(--s16); }
.hero-grid { display: grid; gap: var(--s12); }
.kicker { font-size: var(--fs-s); font-weight: 600; color: var(--muted); }
.h1-line { display: block; }
.hero h1 {
  margin-top: var(--s2);
  font-size: var(--fs-h1); line-height: 1.06; font-weight: 800; letter-spacing: -.025em;
}
.lead { margin-top: var(--s3); font-size: var(--fs-l); color: var(--muted); max-width: 34ch; }

.signup { margin-top: var(--s5); max-width: 480px; outline: none; }
.field-wrap + .field-wrap { margin-top: var(--s3); }
.field {
  position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(75 81 209 / 22%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.field.is-invalid { border-color: var(--err); }
.field label { position: absolute; top: 9px; left: var(--s4); right: var(--s4); pointer-events: none; font-size: 12.5px; font-weight: 600; color: var(--faint); }
.optional { font-weight: 500; }
.field input { display: block; width: 100%; height: 60px; padding: 24px var(--s4) 6px; border: 0; border-radius: 14px; background: transparent; font-size: var(--fs-l); }
.field input:focus { outline: none; }
.other label { display: block; margin: 0 0 var(--s1) 2px; font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); }
.other input, .flow textarea {
  width: 100%; height: 54px; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
  font-size: var(--fs-l);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder, .other input::placeholder, .flow textarea::placeholder { color: #767987; }
.other input:focus, .flow textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(75 81 209 / 22%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field-msg { min-height: 0; margin: var(--s1) 2px 0; font-size: var(--fs-xs); color: var(--faint); }
.field-msg:empty { display: none; }
.field-msg.is-error { color: var(--err); }

.consent { display: flex; gap: var(--s3); align-items: flex-start; margin-top: var(--s4); }
.consent .link-btn { font-size: inherit; }
.consent input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.consent-text { font-size: var(--fs-s); line-height: 1.45; color: var(--ink-2); }
.consent-text label { cursor: pointer; }
.link-btn {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--accent-ink); font-size: var(--fs-s); text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: var(--accent); }
.turnstile { margin-top: var(--s4); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 56px; padding: 0 var(--s6); border-radius: var(--r-m); border: 0;
  font-size: var(--fs-l); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.btn:active { transform: scale(.99); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { width: 100%; margin-top: var(--s4); background: var(--ink); color: #fff; }
.btn-primary:hover:not([disabled]) { background: #2b2b35; }
.btn-primary.is-loading { opacity: .7; cursor: progress; }
.btn-inline { width: auto; min-width: 240px; }
.btn-ghost { width: 100%; margin-top: var(--s6); background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: #c7cad4; }

.form-msg { margin-top: var(--s3); font-size: var(--fs-s); color: var(--err); }
.form-msg:empty { display: none; }
.form-msg.is-info { color: var(--ink-2); }
.signup-note { margin-top: var(--s4); font-size: var(--fs-s); color: var(--muted); }
.signup-note strong { color: var(--ink); font-weight: 600; }

.already { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s5); border-radius: var(--r-m); background: var(--surface); }
.already-title { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; }
.already-text { margin-top: var(--s1); color: var(--muted); }
.tick {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%; background: var(--green-bg); color: var(--ok);
}
.tick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tick.big { width: 56px; height: 56px; background: var(--surface); }
.tick.big svg { width: 28px; height: 28px; }

/* Ảnh chụp màn app thật (tài khoản demo): không khung máy, không thanh trạng thái. */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; }
/* Ảnh màn đầu là hai điện thoại đã có khung máy, nền trong suốt: không bo góc, không nền, không đổ bóng. Trên điện
   thoại ảnh tràn hết hai lề; trên máy tính ảnh lấn sang lề phải cho to hơn cột, chừa 16px tới mép màn. */
.hero { overflow-x: clip; }
/* Thông báo app gửi khi tự xếp một khoản, đặt đè lên ảnh hai máy; là chữ thật nên đọc rõ ở mọi cỡ màn. */
.hero-shot { position: relative; }
.hero-note {
  position: absolute; left: 3%; bottom: 11%; width: min(80%, 340px);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
  background: rgb(255 255 255 / 96%); box-shadow: 0 1px 2px rgb(30 32 52 / 6%), 0 16px 36px -14px rgb(30 32 52 / 30%);
}
.hero-note img { flex: none; width: 38px; height: 38px; border-radius: 9px; }
.hero-note div { flex: 1; min-width: 0; }
.hero-note p { font-size: 13px; line-height: 1.35; color: var(--ink); }
.hero-note-top { display: flex; justify-content: space-between; gap: 8px; }
.hero-note-top b { font-size: 14px; font-weight: 700; }
.hero-note-top span { font-size: 12px; color: var(--muted); }
.hero-shot { justify-self: center; width: min(560px, calc(100% + 2 * var(--gutter))); margin-inline: calc(-1 * var(--gutter)); }
/* Máy tính bảng: ảnh thẳng mép trái với logo, chữ và form, như các phần bên dưới. */
@media (min-width: 640px) and (max-width: 959px) { .hero-shot { justify-self: start; width: min(560px, 100%); margin-inline: 0; } }

@media (min-width: 960px) {
  .hero { padding: var(--s12) 0 var(--s24); }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: var(--s12); }
  .lead { font-size: var(--fs-xl); }
  .hero-note { left: -7%; bottom: 15%; width: 340px; padding: 14px 16px; }
  .hero-shot {
    justify-self: start; margin-inline: 0;
    width: min(680px, calc(520px + (100vw - min(100vw, var(--container)) + 2 * var(--gutter)) / 2 - 16px));
  }
}

/* Các phần bên dưới: chữ nằm thẳng trên nền, chỉ ảnh app và thông báo có khối riêng. */
.section { padding: var(--s12) 0; }
.section h2 { font-size: var(--fs-h2); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.section-lead { margin-top: var(--s3); font-size: var(--fs-l); color: var(--muted); max-width: 60ch; }
.section-foot { margin-top: var(--s8); font-size: var(--fs-s); color: var(--muted); }

/* Ghi tay được vài hôm là bỏ: một tuần trong ô xám. Hàng ghi tay chỉ có hai ngày đầu, ngày thứ ba mờ dần, các ngày sau là
   vòng nét đứt; hàng Mibi đủ bảy ngày bằng màu xanh của logo, ngày cuối có ngôi sao. */
.week {
  display: grid; gap: var(--s2); max-width: 760px; margin-top: var(--s8); padding: var(--s5) var(--s4);
  border-radius: var(--r-l); background: var(--bg);
}
.week-days, .week-row { display: grid; grid-template-columns: 60px repeat(7, minmax(0, 1fr)); align-items: center; column-gap: var(--s1); }
.week-days span { text-align: center; font-size: var(--fs-xs); font-weight: 600; color: var(--faint); }
.week-label { font-size: var(--fs-s); font-weight: 700; color: var(--ink-2); }
.week-mibi .week-label { color: var(--navy); }
.week .cell {
  position: relative; justify-self: center; display: grid; place-items: center; width: 100%; max-width: 44px;
  aspect-ratio: 1; border-radius: var(--r-s); background: var(--surface);
}
.week .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px dashed #c4c7d1; }
.week .is-on .dot, .week .is-fading .dot { border: 0; background: var(--ink-2); }
.week .is-fading .dot { opacity: .28; }
.week-mibi .is-on .dot { background: #647af8; }
.week-spark { position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; fill: #a9e482; }
@media (min-width: 640px) {
  .week { gap: var(--s3); padding: var(--s6) var(--s8); }
  .week-days, .week-row { grid-template-columns: 84px repeat(7, minmax(0, 1fr)); column-gap: var(--s3); }
  .week .cell { max-width: 56px; border-radius: 14px; }
  .week .dot { width: 18px; height: 18px; }
  .week-label { font-size: var(--fs-m); }
  .week-days span { font-size: var(--fs-s); }
  .week-spark { width: 20px; height: 20px; right: -7px; top: -7px; }
}

/* Nền theo mục, chỉ màu trơn: các mục xen kẽ trắng và xám nhạt; Dùng thế nào nền tím nhạt; bảo mật nền xanh đen. */
.band-light { background: var(--surface); }
.band-lavender { background: var(--lavender-bg); }
.band-lavender .how-stage { background: var(--lavender-well); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy .facts li { border-top-color: rgb(255 255 255 / 14%); }
.band-navy .facts p { color: rgb(255 255 255 / 68%); }

/* Dùng thế nào: ba bước một cột; bên cạnh là thông báo của Mibi, vẽ lại bằng HTML vì ảnh thông báo thật sẽ lộ
   giao diện của hãng điện thoại. */
.how-grid { display: grid; gap: var(--s10); }
.steps { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s6); }
.step { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3); }
.step-no { font-size: var(--fs-l); line-height: 1.5; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.01em; }
.step p { margin-top: var(--s1); color: var(--muted); max-width: 46ch; }
.how-stage {
  position: relative; display: grid; place-items: center; min-height: 300px; padding: var(--s8) var(--s4);
  border-radius: 28px; background: var(--well); overflow: hidden;
}
.notif { position: relative; width: min(100%, 360px); padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow-float); }
.notif-head { display: flex; gap: var(--s3); align-items: center; }
.notif-head img { width: 40px; height: 40px; border-radius: 11px; }
.notif-head > div { flex: 1; }
.notif-app { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--faint); }
.notif-app span + span { font-weight: 500; letter-spacing: 0; }
.notif-title { font-size: 15px; font-weight: 700; }
.notif-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-top: var(--s3); }
.notif-amount { font-size: 24px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.notif-place { padding: 5px 10px; border-radius: var(--r-pill); background: #fff8df; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.notif-time { margin-top: 2px; font-size: 12.5px; color: var(--faint); }
.notif-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); margin-top: var(--s3); }
.notif-cats span {
  padding: 9px 4px; border-radius: var(--r-s); text-align: center; font-size: 11.5px; font-weight: 700;
  transition: background-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.c-food { background: var(--yellow-bg); color: var(--yellow-fg); }
.c-move { background: var(--violet-bg); color: var(--violet-fg); }
.c-shop { background: var(--blue-bg); color: var(--blue-fg); }
.c-other { background: #eff0f4; color: var(--ink-2); }
.notif-cats .is-picked { background: var(--ink); color: #fff; }
/* Ô "Càng dùng càng tự xếp": hai thông báo thật của app, quy tắc vừa tạo rồi khoản sau tự vào Danh mục. */
.gain-notes { align-self: flex-start; display: grid; gap: var(--s2); width: min(330px, 88%); }
.gain-notes .notif { width: 100%; padding: 12px 14px; }
.notif-body { margin-top: var(--s2); font-size: 13.5px; color: var(--ink-2); }

/* Dữ liệu của bạn được giữ thế nào: lời hứa lớn nhất đứng đầu, sáu ý bên dưới chỉ có chữ. */
.promise { margin-top: var(--s4); max-width: 30ch; font-size: 22px; line-height: 1.35; font-weight: 700; letter-spacing: -.015em; }
.facts { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; column-gap: var(--s10); }
.facts li { padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--line); }
.facts h3 { font-size: var(--fs-l); font-weight: 700; letter-spacing: -.01em; }
.facts p { margin-top: var(--s1); color: var(--muted); max-width: 46ch; }

/* Bạn được gì: mỗi điểm là một ô trắng, trên là một phần màn app thật nhô lên từ đáy ô. */
.gains { list-style: none; margin: var(--s8) 0 0; padding: 0; display: grid; gap: var(--s4); }
.gain { display: flex; flex-direction: column; padding: var(--s3) var(--s3) var(--s6); border-radius: var(--r-l); background: var(--surface); }
.gain-shot { display: flex; justify-content: center; height: 250px; padding-top: var(--s6); border-radius: var(--r-m); background: var(--well); overflow: hidden; }
.gain-shot > img { align-self: flex-start; width: min(300px, 82%); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-shot); }
/* Ô "Nhớ ra từng khoản": bản đồ minh họa (map-places.json) phủ kín ô, ba thẻ giờ và số tiền là chữ HTML canh theo
   ghim. Ảnh tĩnh là khung cuối của Lottie, dùng khi không có hiệu ứng; motion.js canh thẻ theo cỡ ô thật. */
.gain-map { position: relative; display: block; margin: 0; padding: 0; }
.gain-map .map-still, .map-anim { position: absolute; inset: 0; width: 100%; height: 100%; }
.gain-map .map-still { object-fit: cover; border-radius: 0; box-shadow: none; }
.map-tags { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.map-tags li { position: absolute; transform: translate(-50%, -100%); }
.map-tags li:nth-child(1) { left: 29.2%; top: 45%; }
.map-tags li:nth-child(2) { left: 50%; top: 21.7%; }
.map-tags li:nth-child(3) { left: 68.8%; top: 53.3%; }
.map-tag {
  position: relative; padding: 6px 10px 7px; border-radius: var(--r-s); background: var(--surface);
  box-shadow: 0 1px 2px rgb(30 32 52 / 8%), 0 6px 16px rgb(30 32 52 / 12%);
  white-space: nowrap; text-align: center; line-height: 1.25; transform-origin: 50% 100%;
}
.map-tag::after {
  content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 2px; background: var(--surface); transform: rotate(45deg);
}
.map-tag strong { display: block; font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.map-tag span { display: block; font-size: 11.5px; color: var(--muted); }
.gain-map.is-pending .map-still, .gain-map.is-pending .map-tags, .gain-map.is-live .map-still { visibility: hidden; }
.gain > h3 { margin: var(--s5) var(--s2) 0; font-size: var(--fs-l); font-weight: 700; letter-spacing: -.01em; }
.gain > p { margin: var(--s1) var(--s2) 0; color: var(--muted); max-width: 46ch; }

.closing .btn-inline { margin-top: var(--s6); }

/* Ưu đãi: tấm vé nền xanh đen như thẻ Tổng chi trong app, hai vòng tròn mờ cũng lấy từ thẻ đó. Đường xé vé là nét đứt
   với hai vết khuyết cùng màu nền mục. Nét gạch giá cũ là một thanh riêng để motion.js cho nó chạy ngang. */
.ticket {
  position: relative; isolation: isolate; overflow: hidden; max-width: 560px; margin: 0 auto;
  border-radius: var(--r-l); background: var(--navy); color: #fff;
}
.ticket::before, .ticket::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.ticket::before { width: 220px; height: 220px; right: -70px; top: -90px; background: rgb(169 228 130 / 16%); }
.ticket::after { width: 260px; height: 260px; left: -90px; bottom: -150px; background: rgb(100 122 248 / 24%); }
.ticket-top { position: relative; padding: var(--s8) var(--s6) var(--s6); }
.ticket h2 { display: grid; gap: var(--s1); font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.ticket-free::first-letter { text-transform: uppercase; }
.ticket-label { font-size: var(--fs-s); line-height: 1.3; font-weight: 600; letter-spacing: 0; color: rgb(255 255 255 / 70%); }
.ticket-star { position: absolute; right: var(--s6); top: var(--s8); width: 26px; height: 26px; fill: #a9e482; }
.ticket-tear { position: relative; height: 0; margin: 0 var(--s4); border-top: 2px dashed rgb(255 255 255 / 22%); }
.ticket-tear::before, .ticket-tear::after {
  content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface);
}
.ticket-tear::before { left: calc(-1 * var(--s4) - 12px); }
.ticket-tear::after { right: calc(-1 * var(--s4) - 12px); }
.ticket-bottom { padding: var(--s6) var(--s6) var(--s8); }
.ticket-then { font-size: var(--fs-s); font-weight: 600; color: rgb(255 255 255 / 70%); }
.ticket-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin-top: 2px; }
.ticket-price strong { font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ticket-old { position: relative; text-decoration: none; font-size: var(--fs-l); font-weight: 600; color: rgb(255 255 255 / 55%); font-variant-numeric: tabular-nums; }
.ticket-old::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; border-radius: 1px; background: #a9e482; transform-origin: 0 50%; transform: scaleX(var(--strike, 1)); }
.ticket-note { margin-top: var(--s2); max-width: 40ch; font-size: var(--fs-s); color: rgb(255 255 255 / 70%); }
.btn-ticket { width: 100%; margin-top: var(--s6); background: #fff; color: var(--ink); }
.btn-ticket:hover { background: #eceef4; }
@media (min-width: 640px) {
  .ticket-top { padding: var(--s10) var(--s10) var(--s8); }
  .ticket-star { right: var(--s10); top: var(--s10); }
  .ticket-bottom { padding: var(--s8) var(--s10) var(--s10); }
  .ticket h2 { font-size: 38px; }
  .btn-ticket { width: auto; min-width: 240px; }
}

.faq { margin-top: var(--s6); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  min-height: 56px; padding: var(--s3) 0; cursor: pointer; list-style: none;
  font-size: var(--fs-l); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--t-mid) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 var(--s5); color: var(--muted); max-width: 64ch; }

.founder { margin: 0; }
.founder blockquote { margin: 0; }
.founder blockquote p { font-size: var(--fs-xl); line-height: 1.55; font-weight: 500; color: var(--ink-2); }
.founder figcaption { display: grid; gap: 2px; margin-top: var(--s5); }
.founder figcaption strong { font-size: var(--fs-m); }
.founder figcaption small { font-size: var(--fs-s); color: var(--faint); }

.closing { text-align: center; padding-bottom: var(--s16); }
.closing-note { margin-top: var(--s3); font-size: var(--fs-s); color: var(--muted); }
/* Logo Mibi tự ráp lại (logo-intro.json) khi cuộn tới cuối trang; không có hiệu ứng thì hiện logo tĩnh. */
.closing-logo { position: relative; width: 240px; height: 107px; margin: 0 auto var(--s2); }
.closing-logo img { position: absolute; left: 50%; top: 50%; width: 168px; height: auto; transform: translate(-50%, -50%); }
.closing-logo-anim { position: absolute; inset: 0; }
.closing-logo.is-pending img { visibility: hidden; }

.footer { border-top: 1px solid var(--line); padding: var(--s8) 0 calc(var(--s8) + env(safe-area-inset-bottom)); }
.footer-inner { display: grid; gap: var(--s2); font-size: var(--fs-s); color: var(--muted); }

@media (min-width: 640px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .gains { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
  .gain-shot { height: 300px; }
}
@media (min-width: 960px) {
  .section { padding: var(--s16) 0; }
  .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); align-items: center; gap: var(--s16); }
  .how-stage { min-height: 380px; }
  .promise { font-size: 28px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .founder blockquote p { font-size: 24px; }
  .footer-inner { grid-template-columns: 1fr auto; }
}

/* Có hiệu ứng (motion-flag.js gắn lớp has-motion khi máy không bật giảm chuyển động): màn đầu ẩn chờ GSAP đưa vào.
   GSAP không tải được thì sau 3 giây chữ vẫn tự hiện. */
.has-motion [data-intro], .has-motion [data-intro-shot] { opacity: 0; animation: intro-fallback 0s 3s forwards; }
@keyframes intro-fallback { to { opacity: 1; } }
.faq details[data-closing] summary::after { transform: rotate(45deg) translateY(-3px); }

/* Màn câu hỏi sau khi giữ chỗ: phủ cả trang, một cột giữa màn hình */
.flow { position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
.flow-top, .flow-body { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 var(--gutter); }
.flow-bar { height: 64px; display: flex; align-items: center; }
.flow-bar img { height: 30px; width: auto; }
.flow-progress { display: flex; gap: 6px; margin: var(--s1) 0 var(--s8); }
.flow-progress i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background-color var(--t-mid) var(--ease); }
.flow-progress i.is-on { background: var(--ink); }
.flow-progress.is-hidden { visibility: hidden; }
.flow-body { padding-bottom: var(--s16); }
.flow-step { display: none; }
.flow-step.is-active { display: block; animation: step-in var(--t-mid) var(--ease) both; }
.flow-step.is-center { text-align: center; padding-top: var(--s6); }
.flow-step.is-center .tick, .flow-step.is-center .thanks-icon { margin: 0 auto var(--s5); }
.thanks-icon { width: 64px; height: 64px; border-radius: 16px; }
/* Bước "Xong rồi": khung Lottie 160px, ô logo bên trong cao khoảng 81px; lề âm để ô logo đứng đúng chỗ dấu tích cũ
   và cách tiêu đề 20px. Dấu tích tĩnh là bản dự phòng khi không chạy được animation. */
.done-anim { position: relative; display: grid; place-items: center; width: 160px; height: 160px; margin: -40px auto -20px; }
.flow-step.is-center .done-anim .tick { margin: 0; }
.done-anim.is-waiting .tick { visibility: hidden; }
.done-anim.is-playing .tick { display: none; }
.done-badge { position: absolute; inset: 0; display: none; }
.done-anim.is-playing .done-badge { display: block; }
/* Pháo giấy nằm ở lớp cố định dưới nội dung của #flow: không làm màn cuộn ngang, hạt rơi phía sau chữ. */
.done-confetti { position: fixed; left: 0; top: 0; width: 400px; height: 600px; z-index: 0; pointer-events: none; }
.flow-top, .flow-body { position: relative; z-index: 1; }
.flow-title { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.015em; outline: none; }
.flow-text { margin-top: var(--s2); color: var(--muted); }
.flow-q { margin-bottom: var(--s5); font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; outline: none; }
.flow-q label { cursor: text; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  min-height: 46px; padding: 0 var(--s4); border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-size: var(--fs-m); font-weight: 600; color: var(--ink-2);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip.big { min-height: 54px; padding: 0 var(--s6); font-size: var(--fs-l); }
.chip:hover { border-color: #c2c5d0; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.other { margin-top: var(--s5); }
.flow textarea { height: auto; min-height: 120px; padding: var(--s3) var(--s4); resize: vertical; line-height: 1.5; }
.skip {
  display: block; min-height: 44px; margin: var(--s3) auto 0; padding: 0 var(--s4);
  border: 0; background: none; cursor: pointer; color: var(--muted); font-size: var(--fs-m);
}
.skip:hover { color: var(--ink); text-decoration: underline; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .flow-body { padding-top: 6vh; }
  .flow-q { font-size: 30px; }
  .flow-title { font-size: 34px; }
}

/* Cách Mibi dùng thông tin đăng ký */
.policy {
  width: min(560px, calc(100% - 2 * var(--s4))); max-height: calc(100dvh - 2 * var(--s8));
  padding: var(--s6); border: 0; border-radius: 20px; background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-float);
}
.policy::backdrop { background: rgb(21 21 27 / 45%); }
.policy-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); }
.policy h2 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; }
.close-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--muted); }
.close-btn:hover { background: var(--bg); color: var(--ink); }
.close-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.policy dl { margin: var(--s4) 0 0; }
.policy dt { margin-top: var(--s4); font-size: var(--fs-s); font-weight: 700; }
.policy dd { margin: var(--s1) 0 0; font-size: 15px; color: var(--muted); }

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