/* ══════════════════════════════════════════════════════════════════════
   MoLib · hệ style chung cho trang bán
   Token lấy nguyên từ design-system-kit của Task Controller (mono-ledger).

   MỘT thay đổi có chủ đích so với kit: CTA đổi từ trắng ngà #EDEEF0 sang
   XANH #2D8CEB — đúng màu keyframe mà chính panel dùng cho icon thư mục
   (app/src/styles.css → .card__folder). Đây là phá luật §1.0 của kit
   ("không màu brand trong UI"); chủ dự án chốt.

   Giữ nguyên phần còn lại: mực 4 bậc · hairline chia khối · bóng không màu
   · weight 400/510/590 · sàn chữ 12,5px · KHÔNG có pixel Mint nào (luật kit:
   landing không dùng màu tiền).
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --font-sans:"InterVariable",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-features:"cv01","ss03","tnum","lnum";
  --w-regular:400; --w-medium:510; --w-semibold:590;

  --ink-1:#f4f5f6; --ink-2:#c9cdd4; --ink-3:#8a9099; --ink-4:#62666d;
  --paper-deep:#010102; --paper-0:#08090a; --paper-1:#0f1011; --paper-2:#141516; --paper-3:#191a1b;
  --line-1:rgba(255,255,255,.055); --line-2:rgba(255,255,255,.09); --line-3:#26272b;
  --line-edge:rgba(255,255,255,.06);

  --cta-fill:#2d8ceb; --cta-ink:#f2f8ff; --cta-fill-hover:#4c9df0;
  --brand:#2d8ceb;
  --alert:#fb7185;
  --stage-glow:rgba(255,255,255,.055);
  --focus:#f4f5f6;

  --text-2xs:12.5px; --text-xs:13px; --text-sm:14px; --text-base:15px; --text-md:17px;
  --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px;
  --text-display:clamp(2.1rem,1.2rem + 3.4vw,3.75rem);

  --lh-display:1.12; --lh-title:1.28; --lh-body:1.6; --lh-flat:1.2; --lh-caps:1.5;
  --track-display:-.022em; --track-title:-.015em; --track-body:-.011em; --track-caps:.06em;

  --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px; --space-md:24px;
  --space-lg:32px; --space-xl:48px; --space-2xl:64px; --space-3xl:96px; --space-4xl:128px;

  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-ctl:10px;
  --radius-lg:12px; --radius-xl:16px; --radius-pill:9999px;
  --rule-hairline:1px;

  --page-home:1240px; --page-pad:24px; --tap-min:44px; --header-h:64px;

  --dur-quick:.1s; --dur-hover-out:.15s;
  --ease-out:cubic-bezier(.25,.46,.45,.94);
  --shadow-high:0 7px 32px rgba(0,0,0,.35);
  --z-nav:300;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper-deep); color:var(--ink-2);
  font-family:var(--font-sans); font-size:var(--text-base);
  line-height:var(--lh-body); letter-spacing:var(--track-body);
  font-feature-settings:var(--font-features);
  -webkit-font-smoothing:antialiased;
  /* `clip` chứ không `hidden`: hidden biến body thành scroll container và
     giết position:sticky của header. */
  overflow-x:clip;
}
h1,h2,h3,h4{margin:0; color:var(--ink-1); font-weight:var(--w-medium);
  letter-spacing:var(--track-title); line-height:var(--lh-title); text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit; text-decoration:none}
code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:.92em}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius-xs)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

.wrap{max-width:var(--page-home); margin:0 auto; padding-inline:var(--page-pad)}
section{padding-block:var(--space-4xl); border-top:var(--rule-hairline) solid var(--line-1)}
@media(max-width:760px){section{padding-block:var(--space-2xl)}}

.caps{font-size:var(--text-2xs); letter-spacing:var(--track-caps); line-height:var(--lh-caps);
  text-transform:uppercase; color:var(--ink-3); margin:0}
.lede{color:var(--ink-2); font-size:var(--text-md); max-width:62ch; margin-top:var(--space-sm)}
.note{color:var(--ink-3); font-size:var(--text-sm)}

/* ── header ─────────────────────────────────────────────────── */
header{position:sticky; top:0; z-index:var(--z-nav); height:var(--header-h);
  background:rgba(1,1,2,.86); backdrop-filter:blur(24px);
  border-bottom:var(--rule-hairline) solid var(--line-1)}
header .wrap{height:100%; display:flex; align-items:center; gap:var(--space-sm)}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink-1);
  font-size:var(--text-sm); font-weight:var(--w-semibold);
  letter-spacing:var(--track-title); line-height:var(--lh-flat)}
.brand svg{width:20px; height:20px; flex:none; fill:var(--brand)}
nav{margin-inline-start:auto; display:flex; align-items:center; gap:var(--space-md);
  font-size:var(--text-sm); color:var(--ink-3)}
nav a{transition:color var(--dur-hover-out) var(--ease-out)}
@media(any-hover:hover){nav a:hover{color:var(--ink-1)}}
@media(max-width:760px){
  .hide-sm{display:none}
  /* Nút mua trên header là hành động chính, không phải nhãn phụ — trên cảm ứng
     phải đủ 44px dù `.btn--sm` của hệ là 36px. */
  header .btn--sm{min-height:44px; padding-inline:var(--space-sm); font-size:var(--text-sm)}
}

/* ── nút ────────────────────────────────────────────────────── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:var(--tap-min); padding-inline:var(--space-sm); border:0;
  border-radius:var(--radius-ctl); font-family:inherit; font-size:var(--text-sm);
  font-weight:var(--w-medium); letter-spacing:var(--track-body); line-height:var(--lh-flat);
  cursor:pointer; white-space:nowrap;
  transition:background var(--dur-hover-out) var(--ease-out),
             color var(--dur-hover-out) var(--ease-out),
             box-shadow var(--dur-hover-out) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--cta-fill); color:var(--cta-ink); font-weight:var(--w-semibold)}
.btn--ghost{background:transparent; color:var(--ink-1); box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--sm{min-height:36px; padding-inline:var(--space-xs); font-size:var(--text-2xs)}
@media(any-hover:hover){
  .btn--primary:hover{background:var(--cta-fill-hover)}
  .btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--line-3); background:var(--paper-2)}
}

/* ── hero ───────────────────────────────────────────────────── */
.hero{padding-block:var(--space-3xl) var(--space-2xl)}
h1{font-size:var(--text-display); letter-spacing:var(--track-display);
  line-height:var(--lh-display); max-width:17ch}
.hero .lede{margin-top:var(--space-md)}
.hero-cta{display:flex; flex-wrap:wrap; gap:var(--space-2xs); margin-top:var(--space-lg)}
.hero-meta{margin-top:var(--space-sm); display:flex; flex-wrap:wrap; gap:var(--space-xs);
  font-size:var(--text-2xs); color:var(--ink-4)}
.hero-meta span{display:inline-flex; align-items:center; gap:var(--space-xs)}
.hero-meta span+span::before{content:""; width:3px; height:3px; border-radius:50%;
  background:var(--line-3); flex:none}

/* ── sân khấu sản phẩm: vũng sáng, không màu ───────────────── */
.stage{margin-top:var(--space-2xl); position:relative}
.stage::before{content:""; position:absolute; inset:-14% 0 40%; pointer-events:none;
  background:radial-gradient(ellipse 70% 100% at 50% 0%,var(--stage-glow),transparent 72%)}
figure{margin:0}
.shot{position:relative; border:var(--rule-hairline) solid var(--line-2);
  border-radius:var(--radius-xl); overflow:hidden; background:var(--paper-0);
  box-shadow:var(--shadow-high)}
.shot::after{content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; box-shadow:inset 0 1px 0 var(--line-edge)}
.shot video,.shot img{display:block; width:100%; height:auto}
/* Bốn tab phải cùng một khung. Ảnh chụp panel ra 1071×730 còn webm ra
   1075×759 — chênh 14px là đủ để mắt thấy lệch khi cuộn qua. Ép cùng tỉ lệ,
   cover cắt vài pixel mép, không kéo méo. */
.tab__fig .shot > img,.tab__fig .shot > video{aspect-ratio:1075/759; object-fit:cover}
.shot__bar{display:flex; align-items:center; gap:var(--space-2xs);
  padding:9px var(--space-xs); border-bottom:var(--rule-hairline) solid var(--line-1);
  background:var(--paper-1)}
.dot{width:9px; height:9px; border-radius:50%; background:var(--line-3); flex:none}
.shot__name{margin-inline-start:var(--space-2xs); font-size:var(--text-2xs); color:var(--ink-4)}
/* Ô chờ ảnh — hiện rõ là chỗ trống, không giả vờ là ảnh thật. */
.shot--trong{aspect-ratio:1075/759; display:grid; place-items:center; box-shadow:none;
  border-style:dashed; border-color:var(--line-3); background:var(--paper-1)}
.shot--trong::before{content:attr(data-cho); font-size:var(--text-2xs); color:var(--ink-4);
  letter-spacing:var(--track-caps); line-height:var(--lh-caps); text-transform:uppercase}
.shot--trong::after{display:none}

/* ── cảnh hai lớp: giao diện host làm nền, panel nổi phía trước ──
   Nền là ảnh AE/Premiere đã làm tối, KHÔNG phải trang trí: nó nói cho người
   xem biết panel sống ở đâu. Vì vậy nó mờ hẳn xuống để không tranh chỗ với
   lớp trước — độ sâu vẫn đến từ hairline và bóng không màu, đúng luật hệ. */
.scene{position:relative; border-radius:var(--radius-xl); overflow:hidden;
  background:var(--paper-0); border:var(--rule-hairline) solid var(--line-1);
  padding:clamp(var(--space-sm),3.4vw,var(--space-2xl))}
.scene__nen{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:top center; opacity:.62;
  /* Feather: blur nhẹ để nền lùi ra sau tiêu điểm, cộng mask tan dần bốn mép
     nên ảnh không có đường cắt thẳng. Blur là hiệu ứng vẽ, không phải layout,
     nên không ảnh hưởng kích thước. */
  filter:blur(2.5px) saturate(.85);
  -webkit-mask-image:radial-gradient(ellipse 86% 84% at 50% 34%,#000 42%,transparent 100%);
  mask-image:radial-gradient(ellipse 86% 84% at 50% 34%,#000 42%,transparent 100%);
  transform:scale(1.04);   /* bù mép mờ do blur ăn vào biên */
  pointer-events:none; user-select:none}
/* Vệt tối rất nhẹ, chỉ để tách mép trên/dưới. Đậm hơn là nền biến mất — đó là
   lỗi lượt trước: nền vẽ đúng nhưng bị dìm tới mức không nhìn thấy. */
.scene::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(1,1,2,.28) 0%,rgba(1,1,2,0) 32%,rgba(1,1,2,0) 70%,rgba(1,1,2,.6) 100%)}
.scene__truoc{position:relative; z-index:1; margin-inline:auto; max-width:92%}
@media(max-width:600px){.scene{padding:var(--space-2xs)} .scene__truoc{max-width:100%}}
/* Không có ảnh nền thì cảnh tự thu về đúng khung panel, không để lỗ hổng. */
.scene:not(:has(.scene__nen)){padding:0; border:0; background:transparent}
.scene:not(:has(.scene__nen))::after{display:none}
.scene:not(:has(.scene__nen)) .scene__truoc{max-width:100%}

/* ── Hero: panel THẬT nhúng iframe (bản xem thử) ────────────────
   Giữ nguyên khung .shot (viền + thanh tiêu đề như một cửa sổ app); phần
   thân là panel sống thay cho video. Bỏ ảnh nền AE nên .scene tự về khung
   sạch qua nhánh :not(:has(.scene__nen)) ở trên. */
.stage--live{margin-top:var(--space-xl)}
.shot--panel{background:var(--paper-1)}
/* iframe là app, không phải ảnh: cao cố định theo màn, không aspect-ratio. */
.shot__panel{display:block; width:100%; height:clamp(520px,68vh,720px);
  border:0; background:var(--paper-0)}
/* Video hero bản mobile — mặc định ẩn (desktop dùng iframe panel thật). */
.shot__panel-vid{display:none}
/* Thiết bị chạm / màn hẹp: panel demo mất hover → hiện video tĩnh trong cùng
   khung cửa sổ, ẩn iframe. Video theo tỉ lệ ảnh, không kéo cao như iframe. */
@media(hover:none),(max-width:760px){
  .shot__panel{display:none}
  .shot__panel-vid{display:block; width:100%; height:auto; aspect-ratio:1075/759;
    object-fit:cover; background:var(--paper-0)}
}

/* ── bốn tab ────────────────────────────────────────────────── */
.tabs{margin-top:var(--space-xl); border-top:var(--rule-hairline) solid var(--line-1)}
/* Đặt bằng grid-column, KHÔNG bằng `order`: dùng order thì hàng chẵn đẩy chữ
   sang cột 1fr và đẩy hình về cột 360px, nên hình to nhỏ khác nhau giữa các
   tab. Cách này giữ hình LUÔN ở cột rộng, chỉ đổi bên.
   Phải ghim grid-row:1 cho cả hai: hàng chẵn đặt .tab__txt vào cột 2 dù nó
   đứng TRƯỚC trong DOM, nên grid-auto-flow (không quay lui) đẩy .tab__fig
   xuống row 2 — khung tụt xuống dưới khối chữ, lệch ~200px với tiêu đề. */
/* Chữ căn ĐỈNH ngang với hình (không center dọc): tab nào mô tả ngắn thì
   center đẩy tiêu đề xuống giữa, lệch nhau giữa các tab. Căn start giữ mọi
   tiêu đề thẳng một hàng với mép trên khung panel — lấy Motion làm chuẩn. */
.tab{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:var(--space-2xl);
  align-items:start; padding-block:var(--space-2xl);
  border-bottom:var(--rule-hairline) solid var(--line-1)}
.tab__txt{grid-column:1; grid-row:1} .tab__fig{grid-column:2; grid-row:1}
.tab:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,360px)}
.tab:nth-child(even) .tab__txt{grid-column:2}
.tab:nth-child(even) .tab__fig{grid-column:1}
@media(max-width:900px){
  .tab,.tab:nth-child(even){grid-template-columns:minmax(0,1fr); gap:var(--space-md);
    padding-block:var(--space-xl)}
  .tab__txt,.tab:nth-child(even) .tab__txt{grid-column:1; grid-row:1}
  .tab__fig,.tab:nth-child(even) .tab__fig{grid-column:1; grid-row:2}
}
.tab h3{font-size:var(--text-xl)}
.tab p{margin-top:var(--space-2xs); font-size:var(--text-sm); color:var(--ink-3); max-width:46ch}
.chips{display:flex; flex-wrap:wrap; gap:var(--space-3xs); margin-top:var(--space-sm)}
/* `inline-block` chứ không `inline-flex`: chip có cả chữ trần lẫn <b>, mà
   flex/grid biến chữ trần thành ô ẩn danh riêng — cùng lỗi đã làm vỡ .steps li. */
.chip{display:inline-block; padding:3px var(--space-2xs);
  border-radius:var(--radius-xs); border:var(--rule-hairline) solid var(--line-2);
  color:var(--ink-3); font-size:var(--text-2xs); line-height:var(--lh-caps); white-space:nowrap}
.chip b{margin-inline-start:6px; font-weight:var(--w-medium); color:var(--ink-4)}
.chips--hero{margin-top:var(--space-md); max-width:70ch}
.chips--hero .chip{padding:5px 10px; font-size:var(--text-xs); color:var(--ink-2)}

/* ── bảng giá ───────────────────────────────────────────────── */
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-2xs); margin-top:var(--space-xl); align-items:stretch}
@media(max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{display:flex; flex-direction:column; gap:var(--space-sm);
  padding:var(--space-md); border-radius:var(--radius-lg); background:var(--paper-1);
  border:var(--rule-hairline) solid var(--line-1)}
.plan--best{background:var(--paper-2); border-color:var(--line-2)}
.plan__price{margin-top:var(--space-2xs); font-size:var(--text-2xl); font-weight:var(--w-semibold);
  color:var(--ink-1); letter-spacing:var(--track-display); line-height:var(--lh-flat)}
.plan__price small{display:block; margin-top:var(--space-3xs); font-size:var(--text-2xs);
  font-weight:var(--w-regular); color:var(--ink-3); letter-spacing:var(--track-body);
  line-height:var(--lh-body)}
.plan ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2xs);
  font-size:var(--text-sm); color:var(--ink-2)}
/* KHÔNG dùng grid/flex trên <li>: mọi phần tử con (<b>, <span>) sẽ thành ô
   riêng và câu chữ bị xé làm đôi rồi chồng lên nhau. Marker dùng ::before
   định vị tuyệt đối, li giữ nguyên dòng chảy chữ. */
.plan li{position:relative; padding-inline-start:16px}
.plan li::before{content:""; position:absolute; inset-inline-start:0; top:9px;
  width:5px; height:5px; border-radius:1px; background:var(--ink-4)}
.plan--best li::before{background:var(--brand)}
.plan .btn{margin-top:auto}

/* ── bảng so sánh ───────────────────────────────────────────── */
.tbl{overflow-x:auto; margin-top:var(--space-xl);
  border:var(--rule-hairline) solid var(--line-1); border-radius:var(--radius-lg)}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:var(--text-sm)}
th,td{text-align:start; padding:var(--space-xs) var(--space-sm);
  border-bottom:var(--rule-hairline) solid var(--line-1); vertical-align:top}
thead th{background:var(--paper-1); color:var(--ink-4); font-weight:var(--w-semibold);
  font-size:var(--text-2xs); letter-spacing:var(--track-caps); line-height:var(--lh-caps);
  text-transform:uppercase}
tbody th{color:var(--ink-2); font-weight:var(--w-regular)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.a{color:var(--ink-1)} td.b{color:var(--ink-4)}

/* ── cuối trang: email + nền tảng ───────────────────────────── */
.end{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,320px); gap:var(--space-2xl);
  align-items:start}
@media(max-width:900px){.end{grid-template-columns:minmax(0,1fr); gap:var(--space-xl)}}
.mailform{margin-top:var(--space-lg)}
.mailform__row{display:flex; flex-wrap:wrap; gap:var(--space-2xs)}
.mailform input{flex:1 1 260px; min-height:var(--tap-min); padding-inline:var(--space-xs);
  background:var(--paper-3); color:var(--ink-1); font-family:inherit; font-size:var(--text-sm);
  border:var(--rule-hairline) solid var(--line-3); border-radius:var(--radius-ctl);
  transition:border-color var(--dur-hover-out) var(--ease-out)}
.mailform input::placeholder{color:var(--ink-4)}
.mailform input:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.mailform input[aria-invalid="true"]{border-color:var(--alert)}
.mailform__err{margin-top:var(--space-2xs); font-size:var(--text-xs); color:var(--alert)}
.mailform__ok{margin-top:var(--space-2xs); font-size:var(--text-xs); color:var(--ink-2)}
.mailform__tai{margin-top:var(--space-xs); display:inline-flex; align-items:center; align-self:flex-start; text-decoration:none}

.ho-tro .rows{margin-top:var(--space-sm); border-top:var(--rule-hairline) solid var(--line-1)}
.rows{border-top:var(--rule-hairline) solid var(--line-1)}
.row{display:flex; align-items:baseline; gap:var(--space-sm);
  padding-block:var(--space-xs); border-bottom:var(--rule-hairline) solid var(--line-1)}
.row__k{color:var(--ink-1); font-size:var(--text-sm)}
.row__n{margin-inline-start:auto; font-size:var(--text-sm); color:var(--ink-3);
  font-variant-numeric:tabular-nums; white-space:nowrap}

footer{padding-block:var(--space-xl); border-top:var(--rule-hairline) solid var(--line-1);
  color:var(--ink-4); font-size:var(--text-xs)}
footer .wrap{display:flex; flex-wrap:wrap; gap:var(--space-sm); justify-content:space-between}
@media(any-hover:hover){footer a:hover{color:var(--ink-2)}}
/* Link footer chỉ cao 16px — nới vùng chạm trên mobile mà không xô layout. */
@media(max-width:760px){footer a{display:inline-block; padding-block:8px}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
  .btn:active,.copy:active,.seg button:active{transform:none}
}

/* ══════════════════════════════════════════════════════════════
   TRANG THANH TOÁN
   ══════════════════════════════════════════════════════════════ */
.pay-page{padding-block:var(--space-2xl) var(--space-4xl)}
.back{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--ink-3)}
@media(any-hover:hover){.back:hover{color:var(--ink-1)}}

/* ── Trang chữ: điều khoản · bảo mật · liên hệ · tra mã ─────────────
   h2,p toàn cục đặt margin:0 (để landing/thanh-toán tự quản khoảng cách),
   nên prose các trang này dính liền thành khối chữ. .doc trả lại nhịp đọc —
   thấy rõ nhất khi đọc dọc trên điện thoại. */
.doc :is(h2,p,ul){margin-top:var(--space-sm)}
.doc h2{margin-top:var(--space-lg); font-size:var(--text-lg)}
.doc li+li{margin-top:6px}
.pay{margin-top:var(--space-lg); display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,360px); gap:var(--space-2xl); align-items:start}
@media(max-width:900px){.pay{grid-template-columns:minmax(0,1fr); gap:var(--space-xl)}}

.qr-card{padding:var(--space-md); border-radius:var(--radius-xl); background:var(--paper-1);
  border:var(--rule-hairline) solid var(--line-2)}
.qr{width:100%; max-width:280px; margin-inline:auto; aspect-ratio:1; background:#fff;
  border-radius:var(--radius-lg); display:grid; place-items:center; overflow:hidden}
.qr img{width:100%; height:100%; object-fit:contain; display:block}
.qr__empty{padding:var(--space-md); text-align:center; color:#41474f; font-size:var(--text-2xs);
  line-height:var(--lh-body)}
.qr__empty b{display:block; color:#16181d; font-size:var(--text-sm); margin-bottom:var(--space-3xs)}

.field{display:grid; gap:var(--space-3xs); margin-bottom:var(--space-xs)}
.field__l{font-size:var(--text-2xs); letter-spacing:var(--track-caps); line-height:var(--lh-caps);
  text-transform:uppercase; color:var(--ink-4)}
.field__v{display:flex; align-items:center; gap:var(--space-2xs); min-height:42px;
  padding:8px var(--space-xs); border-radius:var(--radius-ctl); background:var(--paper-3);
  border:var(--rule-hairline) solid var(--line-3); font-size:var(--text-sm); color:var(--ink-1)}
.field__v span{font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.field--code .field__v span{font-size:var(--text-md); font-weight:var(--w-semibold); letter-spacing:.05em}
.field--amt .field__v span{font-size:var(--text-lg); font-weight:var(--w-medium)}
.todo{color:var(--ink-4)}
.copy{margin-inline-start:auto; flex:none; background:transparent; color:var(--ink-3);
  border:0; box-shadow:inset 0 0 0 1px var(--line-2); border-radius:var(--radius-sm);
  padding:5px var(--space-2xs); font-family:inherit; font-size:var(--text-2xs); cursor:pointer;
  transition:color var(--dur-hover-out) var(--ease-out), box-shadow var(--dur-hover-out) var(--ease-out)}
.copy:active{transform:scale(.97)}
@media(any-hover:hover){.copy:hover{color:var(--ink-1); box-shadow:inset 0 0 0 1px var(--line-3)}}

.steps{list-style:none; margin:var(--space-md) 0 0; padding:0; counter-reset:s;
  display:grid; gap:var(--space-2xs)}
/* Cùng lý do như .plan li — grid trên <li> xé <b id="stepCode"> ra khỏi câu. */
.steps li{position:relative; padding-inline-start:26px;
  font-size:var(--text-sm); color:var(--ink-2); counter-increment:s}
.steps li::before{content:counter(s) "."; position:absolute; inset-inline-start:0; top:0;
  color:var(--ink-4); font-size:var(--text-2xs); font-variant-numeric:tabular-nums;
  line-height:calc(var(--lh-body) * var(--text-sm) / var(--text-2xs))}
.warn{margin-top:var(--space-md); padding:var(--space-xs) var(--space-sm);
  border-radius:var(--radius-lg); border:var(--rule-hairline) solid var(--line-2);
  background:var(--paper-2); font-size:var(--text-xs); color:var(--ink-2)}
.warn b{color:var(--ink-1); font-weight:var(--w-semibold)}

.tomtat{padding:var(--space-md); border-radius:var(--radius-xl); background:var(--paper-1);
  border:var(--rule-hairline) solid var(--line-1)}
.tomtat .row:last-child{border-bottom:0}
.tomtat__tong{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--space-sm); margin-top:var(--space-sm); padding-top:var(--space-sm);
  border-top:var(--rule-hairline) solid var(--line-2)}
.tomtat__tong b{font-size:var(--text-xl); color:var(--ink-1); font-weight:var(--w-semibold);
  font-variant-numeric:tabular-nums; letter-spacing:var(--track-display)}
.doi-goi{margin-top:var(--space-sm); display:flex; flex-wrap:wrap; gap:var(--space-3xs)}
.doi-goi a{padding:6px var(--space-2xs); border-radius:var(--radius-sm); font-size:var(--text-2xs);
  color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-2);
  transition:color var(--dur-hover-out) var(--ease-out), box-shadow var(--dur-hover-out) var(--ease-out)}
.doi-goi a[aria-current="true"]{color:var(--ink-1); box-shadow:inset 0 0 0 1px var(--line-3);
  background:var(--paper-2)}
@media(any-hover:hover){.doi-goi a:hover{color:var(--ink-1)}}

/* ── Switch gói NGAY tại ô Gói (14/08) ─────────────────────────────
   Ba nút gói dính thành segmented; bấm là số tiền · mã · QR đổi tại chỗ,
   thay hàng link "Đổi gói" cũ phải tải lại trang. */
.caps--switch{margin-bottom:var(--space-2xs); color:var(--ink-4)}
.goisw{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3xs);
  background:var(--paper-0); border-radius:var(--radius-lg); padding:4px}
.goisw__b{display:grid; gap:2px; padding:var(--space-2xs) 4px; border:0; cursor:pointer;
  background:transparent; border-radius:var(--radius-sm); color:var(--ink-3); text-align:center;
  font:inherit; transition:background var(--dur-hover-out) var(--ease-out),color var(--dur-hover-out) var(--ease-out)}
.goisw__b b{font-size:var(--text-sm); font-weight:var(--w-semibold); line-height:var(--lh-flat)}
.goisw__b span{font-size:var(--text-2xs); color:var(--ink-4); font-variant-numeric:tabular-nums}
.goisw__b[aria-selected="true"]{background:var(--paper-2); color:var(--ink-1);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.goisw__b[aria-selected="true"] span{color:var(--brand)}
@media(any-hover:hover){.goisw__b:not([aria-selected="true"]):hover{color:var(--ink-1)}}
.goisw__chu{margin:var(--space-2xs) 0 0; font-size:var(--text-2xs); color:var(--ink-4); text-align:center}

/* ── Bản NHÚNG trong modal (payment.html?embed=1) ──────────────────
   Bỏ khung trang để chỉ còn ruột thanh toán trong popup. */
body.embed header,body.embed footer,body.embed .back{display:none}
body.embed .pay-page{padding-block:var(--space-sm) var(--space-md)}
body.embed .pay-page .wrap{padding-inline:var(--space-md)}
/* Gọn lại để cả hai cột lọt trong card mà KHÔNG cuộn (14/08). */
body.embed .pay{margin-top:var(--space-sm); gap:var(--space-lg)}
body.embed .qr{max-width:168px}
body.embed .tomtat{padding:var(--space-sm)}
body.embed .goisw__b{padding:6px 4px}
body.embed .field{margin-bottom:5px}
body.embed .field__v{min-height:33px}
body.embed .steps{margin-top:var(--space-sm)}
body.embed .steps li{margin-top:var(--space-3xs)}
body.embed .steps li,body.embed .warn{font-size:var(--text-2xs); line-height:1.4}
body.embed .warn{padding:var(--space-2xs) var(--space-sm); margin-top:var(--space-sm)}
body.embed .field--code .field__v span{font-size:var(--text-sm)}
body.embed .field--amt .field__v span{font-size:var(--text-md)}

/* ── Popup card center (landing, 14/08) ────────────────────────────
   Nút Mua / gói mở thẻ thanh toán ngay giữa màn, không dẫn qua trang khác. */
.pop-mask{position:fixed; inset:0; z-index:400; display:grid; place-items:center;
  padding:var(--space-md); background:rgba(1,1,2,.62); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transition:opacity var(--dur-hover-out) var(--ease-out)}
.pop-mask[data-open="true"]{opacity:1; visibility:visible}
/* MỘT kích thước cố định cho mọi gói — card đủ to để ruột thanh toán lọt hết,
   không phải cuộn bên trong (chủ dự án 14/08). */
.pop-card{width:min(96vw,1000px); height:min(94vh,880px); display:flex; flex-direction:column;
  background:var(--paper-1); border:var(--rule-hairline) solid var(--line-2);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-high); overflow:hidden;
  transform:translateY(10px) scale(.99); transition:transform var(--dur-hover-out) var(--ease-out)}
.pop-mask[data-open="true"] .pop-card{transform:none}
.pop-card__head{display:flex; align-items:center; gap:var(--space-xs);
  padding:var(--space-xs) var(--space-sm); border-bottom:var(--rule-hairline) solid var(--line-1)}
.pop-card__head b{font-size:var(--text-sm); color:var(--ink-1)}
.pop-card__x{margin-inline-start:auto; width:32px; height:32px; flex:none; border:0; cursor:pointer;
  background:var(--paper-2); border-radius:var(--radius-sm); color:var(--ink-2);
  font-size:18px; line-height:1; transition:background var(--dur-hover-out) var(--ease-out)}
@media(any-hover:hover){.pop-card__x:hover{background:var(--paper-3); color:var(--ink-1)}}
.pop-card iframe{flex:1; width:100%; border:0; background:var(--paper-0)}
@media(max-width:600px){
  .pop-mask{padding:var(--space-2xs)}   /* sát mép hơn cho màn nhỏ */
  .pop-card{width:100%; height:96vh}
}

/* ── Tải trực tiếp (điểm 8/9, chủ dự án 18/08) ──────────────────────────────
   Nút lớn ở khối cuối + nút NỔI cố định góc phải suốt trang. Bỏ form nhập mail. */
.btn--lg{padding:13px 26px; font-size:var(--text-md); border-radius:12px}
.taicta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-sm); margin-top:var(--space-md)}
.taicta__note{font-size:var(--text-2xs); color:var(--ink-4)}

.tai-noi{
  position:fixed; right:22px; bottom:22px; z-index:var(--z-nav);
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:999px;
  background:var(--cta-fill); color:var(--cta-ink);
  font-size:var(--text-sm); font-weight:var(--w-semibold);
  box-shadow:0 8px 24px rgba(0,0,0,.45); text-decoration:none;
  transition:transform .15s ease, background .15s ease}
.tai-noi svg{width:18px; height:18px; flex:none}
@media(any-hover:hover){.tai-noi:hover{background:var(--cta-fill-hover); transform:translateY(-2px)}}
@media(max-width:560px){.tai-noi span{display:none} .tai-noi{padding:14px}}

/* ── Logo AE/PR + demo tab (điểm 3, chủ dự án 18/08) ─────────────────────────
   Thay tiêu đề "Thư viện dựng phim" + câu lede bằng hai logo app. */
.applogos{display:flex; gap:var(--space-sm); margin-bottom:var(--space-lg); flex-wrap:wrap}
.applogo{display:inline-flex; align-items:center; gap:10px; padding:7px 15px 7px 7px;
  border-radius:12px; background:var(--paper-1); border:1px solid var(--line-2)}
.applogo b{display:grid; place-items:center; width:38px; height:38px; border-radius:8px;
  font-size:15px; font-weight:700; letter-spacing:.3px}
.applogo span{font-size:var(--text-sm); color:var(--ink-2)}
.applogo--ae b{background:#00005b; color:#99a3ff; box-shadow:inset 0 0 0 1px #4646c8}
.applogo--pr b{background:#2a0a3a; color:#e77bff; box-shadow:inset 0 0 0 1px #7a3a9a}

/* Tab demo tương tác trong khung panel — bấm đổi video từng tab. */
.demotabs{display:flex; gap:2px; padding:6px 10px; background:var(--paper-1);
  border-bottom:1px solid var(--line-1)}
.demotabs button{padding:5px 12px; border:0; border-radius:6px; background:transparent;
  color:var(--ink-3); font:inherit; font-size:var(--text-sm); cursor:pointer;
  transition:background .12s ease, color .12s ease}
@media(any-hover:hover){.demotabs button:hover{color:var(--ink-1); background:var(--paper-2)}}
.demotabs button.is-on{background:var(--cta-fill); color:var(--cta-ink)}