/* ══════════════════════════════════════════════════════════════════════
   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{
  /* Báo cho trình duyệt đây là giao diện tối → MỌI widget của hệ (thanh cuộn,
     ô nhập, menu ngữ cảnh, cả trong iframe) tự đổi sang bản tối. Thiếu dòng
     này là thanh cuộn TRẮNG của Windows lòi ra trong card popup. */
  color-scheme:dark;

  --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);

  /* Nền nút chính đậm hơn màu nhấn một nấc để chữ TRẮNG đạt AA.
     Đo 20/08/2026: #1a70cb + #ffffff = 4,97:1 (đạt) · hover #2077d2 = 4,53:1
     (đạt) · màu cũ #2d8ceb + trắng chỉ 3,46:1 (rớt). Xem BRAND.md §5.2. */
  --cta-fill:#1a70cb; --cta-ink:#ffffff; --cta-fill-hover:#2077d2;
  /* --brand chỉ làm CHỮ/điểm nhấn trên nền tối (5,68:1 trên --paper-0),
     KHÔNG làm nền nút. Nền nút luôn dùng --cta-fill. */
  --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)}
/* NHỊP MỤC ĐỀU NHAU (chủ dự án 20/08). Một con số duy nhất cho mọi mục, hai
   bên bằng nhau nên vạch ngăn luôn nằm chính giữa hai khối nội dung. Đổi mục
   nào cũng phải đổi ở ĐÂY, đừng thêm margin riêng cho từng mục. */
section{padding-block:var(--space-3xl); border-top:var(--rule-hairline) solid var(--line-1)}
@media(max-width:760px){section{padding-block:var(--space-2xl)}
  .hero{padding-block:var(--space-md) 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){
  /* Độ đặc hiệu KÉP là bắt buộc: `.btn{display:inline-flex}` khai sau trong
     file nên `.hide-sm{display:none}` một lớp bị đè, và nút "Tra mã" vẫn hiện
     ở màn hẹp - chính nó làm header tràn ngang 129px @390px (đo 20/08).
     Cùng loại bẫy với `[hidden]` bị display của tác giả đè. */
  .hide-sm.hide-sm{display:none}
  /* Khoảng cách nav thu lại, KHÔNG đụng chiều cao hay bo góc của nút. */
  nav{gap:var(--space-2xs)}
  /* 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)}
}
/* Dưới ~440px chỉ còn chỗ cho MỘT hành động trên header. Nút tải và nút tra mã
   vẫn đủ ở hero ngay bên dưới nên không mất lối nào. */
@media(max-width:440px){
  .hide-xs.hide-xs{display:none}
}

/* ── 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)}
}

/* ══════════════════════════════════════════════════════════════════════════
   BA SẢN PHẨM của MoExtension (chủ dự án 20/08)
   MoLib đang bán · MoTools và MoSound đang hoàn thiện. Tab chưa mở để mực mờ
   một nấc chứ không xám hẳn - chúng vẫn là sản phẩm thật, chỉ chưa tới lượt.
   ══════════════════════════════════════════════════════════════════════════ */
.sanpham{display:flex; flex-wrap:wrap; gap:var(--space-lg)}
/* Tab kiểu GẠCH CHÂN (chủ dự án 20/08): chữ trần, tab đang chọn sáng lên và
   có một vạch dưới ngắn đúng bề ngang chữ. Không khối nền, không viền. */
.sanpham__t{position:relative; padding:0 0 10px; border:0; background:none;
  cursor:pointer; font-family:inherit; font-size:var(--text-md);
  font-weight:var(--w-semibold); line-height:var(--lh-flat);
  letter-spacing:var(--track-title); color:var(--ink-4);
  transition:color var(--dur-hover-out) var(--ease-out)}
.sanpham__t::after{content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; border-radius:2px; background:transparent;
  transition:background var(--dur-hover-out) var(--ease-out)}
.sanpham__t[aria-selected="true"]{color:var(--ink-1)}
.sanpham__t[aria-selected="true"]::after{background:var(--ink-1)}
@media(any-hover:hover){
  .sanpham__t[aria-selected="false"]:hover{color:var(--ink-2)}
}
.sanpham__t:focus-visible{outline:2px solid var(--focus); outline-offset:3px}
/* Nhãn "Coming soon" cho hai sản phẩm chưa mở bán. Đặt NỔI TRÊN ĐẦU tên sản
   phẩm (chủ dự án 21/08) chứ không nằm cùng dòng: cùng dòng thì tên MoTools và
   MoSound bị đẩy lệch khỏi MoLib, hàng tab hết thẳng.
   12,5px là SÀN chữ phụ trong kit, không xuống thấp hơn. Chữ IN HOA đầu câu
   chứ không viết hoa toàn bộ - IN HOA CÓ DẤU cần leading 1.5, ở cỡ này là chật. */
.sanpham{padding-top:22px}
.sanpham__sap{position:absolute; top:-21px; left:0;
  padding:0 5px; border-radius:var(--radius-xs);
  background:var(--paper-3); box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--ink-3); font-size:12px; font-weight:var(--w-regular);
  line-height:16px; letter-spacing:0; white-space:nowrap}

/* Hàng nút chính lùi xuống một nhịp cho tách khỏi hàng sản phẩm. */
.sanpham+.hero-cta{margin-top:var(--space-lg)}

/* ── hero ───────────────────────────────────────────────────── */
/* Hero mở thẳng bằng hàng tab sản phẩm, KHÔNG có tiêu đề - để nguyên 96px
   trên là một mảng đen trống nhìn như mục rỗng chen vào (chủ dự án 20/08). */
.hero{padding-block:var(--space-xl) var(--space-3xl)}
/* PHẢI có `.hero` phía trước. Bản trước là bộ chọn TRẦN nằm lọt trong khối
   hero, nên nó đè lên MỌI h1 của trang web: contact, terms, privacy,
   recover-key, bao-loi đều nhận leading 1,12 thay vì 1,28 của luật, và ăn
   luôn `max-width:17ch`. Đo 21/08/2026, cả năm trang cùng sai. */
.hero 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; align-items:center; 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}
/* Thanh tiêu đề panel: CHỈ tên sản phẩm, chữ TRẮNG, bỏ 3 chấm kiểu mac
   (chủ dự án 20/08). Không còn chấm nên không cần lùi đầu dòng. */
.shot__name{font-size:var(--text-2xs); color:var(--ink-1)}
/* Ô 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.
   Panel tự lo phần đáp ứng bên trong (nó có sẵn ngưỡng 460px giấu sidebar),
   nên ở đây chỉ cần cho nó một khung cao đủ thấy ba hàng ô. */
.shot__panel{display:block; width:100%; height:clamp(460px,64vh,660px);
  border:0; background:var(--paper-0)}
/* Màn hẹp: panel bên trong đã tự rút gọn, chỉ cần hạ chiều cao cho vừa. */
@media(max-width:760px){.shot__panel{height:clamp(400px,68vh,560px)}}

/* ── bốn tab ────────────────────────────────────────────────── */
/* Mục này không còn tiêu đề (chủ dự án 20/08) nên .tabs là phần tử đầu -
   margin-top ở đây sẽ cộng thêm vào padding của mục, thành khoảng hở lệch
   nhịp so với các mục khác. */
.tabs{border-top:0}
.tabs .tab:first-child{padding-block-start:0}
/* Đặ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. */
/* NHỊP BÊN TRONG mục này phải BẰNG nhịp giữa các mục (chủ dự án 20/08). Trước
   đó tab cách nhau 128px (64+64) còn mục cách nhau 192px (96+96), nên cuộn dọc
   trang thấy lúc rộng lúc hẹp. Dùng chung `--space-3xl` với `section`.
   Tab ĐẦU bỏ đệm trên và tab CUỐI bỏ đệm dưới: mục này không có tiêu đề, nên
   mép trong của nó phải bằng mép trong mục khác (96px) chứ không cộng dồn. */
.tab{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:var(--space-2xl);
  align-items:start; padding-block:var(--space-3xl);
  border-bottom:var(--rule-hairline) solid var(--line-1)}
.tab:last-child{padding-block-end:0; border-bottom:0}
.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){
  /* Máy hẹp: mục dùng --space-2xl (64px) nên tab cũng vậy, giữ một nhịp. */
  .tab,.tab:nth-child(even){grid-template-columns:minmax(0,1fr); gap:var(--space-md);
    padding-block:var(--space-2xl)}
  .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}
/* Tiêu đề cột KHÔNG in hoa toàn bộ (chủ dự án 20/08) - chữ hoa có dấu tiếng
   Việt phải nới leading và vẫn khó đọc hơn chữ thường. */
thead th{background:var(--paper-1); color:var(--ink-3); font-weight:var(--w-semibold);
  font-size:var(--text-sm); line-height:var(--lh-flat)}
/* Cột MoLib: nền xanh chữ trắng, kéo mắt sang cột của mình trước. */
thead th.c-molib{background:var(--cta-fill); color:#fff}
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. */
/* Hàng logo nền tảng: MANG ĐÚNG khung của nút .btn--ghost (cùng chiều cao,
   cùng bo, cùng viền mảnh, icon trắng) và đẩy sát mép PHẢI để đối xứng với hai
   nút bên trái - chủ dự án 18/08. */
.applogos{display:flex; gap:var(--space-2xs); margin-inline-start:auto}
.applogo{display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; border-radius:var(--radius-ctl);
  box-shadow:inset 0 0 0 1px var(--line-2); background:transparent}
.applogo svg{width:100%; height:100%; display:block}
@media(max-width:760px){.applogos{margin-inline-start:0}}


/* ══════════════════════════════════════════════════════════════════════════
   LUẬT NÚT (chủ dự án 18/08 - GIỐNG HỆT PANEL, ĐỪNG PHÁ):
     1. MỌI nút CÙNG CHIỀU CAO: 44px (cỡ nhỏ 38px, cỡ lớn 52px).
     2. Bo tròn THỐNG NHẤT như nút "Mua ngay" (--radius-ctl). KHÔNG 999px.
     3. CHỮ TRONG NÚT LUÔN TRẮNG ở mọi biến thể.
   ══════════════════════════════════════════════════════════════════════════ */
/* MỘT CỠ DUY NHẤT cho MỌI nút - không có nút to nút nhỏ (chủ dự án 18/08).
   .btn--sm/.btn--lg chỉ còn khác chữ và bề ngang, KHÔNG khác chiều cao. */
.btn,.btn--sm,.btn--lg,.tai-noi{height:44px; min-height:44px; border-radius:var(--radius-ctl); color:#fff}
.btn--lg{padding-inline:26px; font-size:var(--text-md)}
.btn--primary,.btn--ghost{color:#fff}
/* Nút tải nổi: theo luật nút (bỏ pill 999). */
.tai-noi{height:44px; padding:0 18px; border-radius:var(--radius-ctl); color:#fff}
@media(max-width:560px){.tai-noi{padding:0 14px}}


/* ══════════════════════════════════════════════════════════════════════════
   CARD THANH TOÁN (chủ dự án 18/08 - viết LẠI MỘT LẦN, đừng chồng thêm lớp)

   Ba luật cứng:
   1. Cột phải bắt đầu ngang Ô NHẬP email, KHÔNG ngang cái nhãn phía trên nó.
      Làm bằng cách đẩy cột phải xuống đúng chiều cao nhãn (`--nhan-h`).
   2. Mọi dòng thông tin bên phải dùng CHUNG khuôn "Thiết bị / Giao hàng":
      nhãn trái · giá trị phải · cùng một dòng, gạch mảnh ngăn giữa.
   3. Card KHÔNG BAO GIỜ có thanh cuộn: nội dung phải vừa khung popup.
   ══════════════════════════════════════════════════════════════════════════ */
:root{ --nhan-h:42px; }              /* cao của .field__l + khoảng thở dưới nó */

/* LUẬT 1 - TOP-align: nhãn email đã bỏ (thành placeholder), nên ô nhập mail
   nằm ngay đỉnh cột trái = đỉnh cột phải, không cần đẩy xuống. */
.pay{align-items:stretch}
.pay aside{padding-top:0}
/* LUẬT 2+3 - hai cột BẰNG chiều cao (bottom-align): cột phải cao hơn (leading
   rộng), cột trái kéo giãn theo; hộp QR nở lấp phần giãn còn QR đặt giữa, NHỎ
   hơn 20% (~282px) theo yêu cầu. */
.pay>div:first-child{display:flex; flex-direction:column; gap:var(--space-sm)}
.pay>div:first-child>*{margin:0}
.pay .qr-card{flex:1; display:flex; align-items:center; justify-content:center; min-height:0}
.pay .qr{width:min(100%, 282px); max-width:100%; aspect-ratio:1; height:auto; margin:auto}

.tomtat{display:flex; flex-direction:column; gap:0}
.tomtat .goisw{margin-bottom:var(--space-xs)}
.tomtat .goisw__chu{margin:0 0 var(--space-sm)}

/* LUẬT 2 - thông tin chuyển khoản dùng ĐÚNG khuôn .row của Thiết bị/Giao hàng */
.ckgrid{display:flex; flex-direction:column}
.ckcell{display:flex; align-items:center; gap:var(--space-sm);
  padding-block:var(--space-xs);
  border-bottom:var(--rule-hairline) solid var(--line-1)}
.ckcell__k{flex:none; color:var(--ink-1); font-size:var(--text-sm)}
.ckcell b{margin-inline-start:auto; min-width:0; font-size:var(--text-sm);
  font-weight:400; color:var(--ink-3); font-variant-numeric:tabular-nums;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ckcell .copy{position:static; flex:none; margin-inline-start:0; height:22px; padding:0 8px; line-height:22px}
.tomtat__tong{margin:0; padding-top:var(--space-sm)}

/* LUẬT 3 - trong popup: thu gọn để vừa khung, không đẻ thanh cuộn */
body.embed .pay{margin-top:0; gap:var(--space-md)}
body.embed .pay>div:first-child{gap:var(--space-xs)}
body.embed .pay .qr{max-width:100%}
body.embed .qr-card{padding:var(--space-sm)}
body.embed .paykey{margin-top:0; padding:var(--space-xs) var(--space-sm)}
body.embed .warn{margin:0; font-size:var(--text-2xs)}
body.embed .ckcell,
body.embed .tomtat .row{padding-block:9px}
body.embed .tomtat__tong{padding-top:var(--space-xs)}
body.embed .pay-page h1{font-size:var(--text-lg); margin:0 0 var(--space-md)}
body.embed .paywait{margin:0; font-size:var(--text-2xs)}

/* ══════════════════════════════════════════════════════════════════════════
   HAI KHUNG ĐỐI CHIẾU + CÂU HỎI THƯỜNG GẶP (chủ dự án 20/08)
   Thay bảng 3 cột bằng hai khung có HÌNH. Minh hoạ dựng bằng CSS thuần, không
   tải ảnh ngoài. Một cỡ tiêu đề (.dc__nhan) + một cỡ phụ (.dc__chu) cho cả
   khối, đúng luật kit.
   ══════════════════════════════════════════════════════════════════════════ */
.doichieu{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-md);
  margin-top:var(--space-xl)}
.dc{display:flex; flex-direction:column; padding:var(--space-md);
  border-radius:var(--radius-xl); background:var(--paper-1);
  border:var(--rule-hairline) solid var(--line-2)}
/* Khung "sau" nhận nền sáng hơn một nấc - hình dạng dẫn mắt, không dùng màu. */
.dc--sau{background:var(--paper-2); border-color:var(--line-3)}
.dc__nhan{font-size:var(--text-sm); font-weight:var(--w-semibold); color:var(--ink-1);
  line-height:var(--lh-flat); margin-bottom:var(--space-sm)}
/* Bảng so sánh nằm ngay dưới hai ảnh - hai khối cùng một mục nên khoảng cách
   giữa chúng hẹp hơn khoảng cách giữa các mục. */
.doichieu+.tbl{margin-top:var(--space-md)}
/* Khung ảnh: hai ảnh có tỉ lệ khác nhau (màn AE ngang hơn panel) nên ép cùng
   một tỉ lệ rồi cover - hai khung bằng nhau, không kéo méo ảnh nào. */
.dc__anh{flex:1; min-height:0; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--paper-0); border:var(--rule-hairline) solid var(--line-1)}
.dc__anh img{display:block; width:100%; height:100%; object-fit:cover;
  object-position:top left; aspect-ratio:16/10}

/* Câu hỏi thường gặp - MỘT HÀNG dọc, bấm mới sổ câu trả lời (chủ dự án
   20/08). <details>/<summary> lo phần đóng mở, CSS chỉ lo hình thức. */
.hoi{display:flex; flex-direction:column; margin-top:var(--space-xl);
  border-radius:var(--radius-xl); overflow:hidden;
  background:var(--paper-1); border:var(--rule-hairline) solid var(--line-2)}
.hoi__m+.hoi__m{border-top:var(--rule-hairline) solid var(--line-1)}
.hoi__h{display:flex; align-items:center; gap:var(--space-sm); cursor:pointer;
  padding:var(--space-md); list-style:none;
  font-size:var(--text-base); font-weight:var(--w-semibold); color:var(--ink-1);
  line-height:var(--lh-title)}
.hoi__h::-webkit-details-marker{display:none}
/* Dấu cộng vẽ bằng hai vạch, xoay thành dấu trừ khi mở. Không dùng emoji, không
   dùng ảnh - hình dạng đọc được cả khi in đen trắng. */
.hoi__h::after{content:""; flex:none; margin-inline-start:auto;
  width:12px; height:12px; position:relative;
  background:
    linear-gradient(var(--ink-3),var(--ink-3)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink-3),var(--ink-3)) center/1.5px 12px no-repeat;
  transition:transform var(--dur-hover-out) var(--ease-out)}
/* Mở = dấu TRỪ: giữ nguyên vạch ngang, bỏ vạch dọc. Xoay 90 độ thì vạch ngang
   thành vạch dọc và ra dấu gạch đứng, không phải dấu trừ. */
.hoi__m[open] .hoi__h::after{
  background:linear-gradient(var(--ink-1),var(--ink-1)) center/12px 1.5px no-repeat}
.hoi__m[open] .hoi__h{color:var(--ink-1)}
@media(any-hover:hover){.hoi__h:hover{background:var(--paper-2)}}
.hoi__h:focus-visible{outline:2px solid var(--focus); outline-offset:-2px}
.hoi__t{margin:0; padding:0 var(--space-md) var(--space-md);
  font-size:var(--text-base); color:var(--ink-3); line-height:var(--lh-body);
  max-width:74ch}

@media(max-width:760px){
  .doichieu{grid-template-columns:1fr}
  .dc__hinh{min-height:150px}
}

/* ══════════════════════════════════════════════════════════════════════════
   CARD TRA MÃ (chủ dự án 20/08)
   Fit chiều ngang GIỐNG card thanh toán: cùng .pay-page > .wrap, ruột kẹp
   trong .trakey với cùng trần bề ngang của cột trái card thanh toán, canh
   giữa. Dòng cảnh báo cuối KHÔNG khung box, chữ đỏ.
   ══════════════════════════════════════════════════════════════════════════ */
.trakey{max-width:560px}
.trakey .field{margin-bottom:0}
/* Ô nhập + hai nút TRÊN CÙNG MỘT HÀNG (chủ dự án 20/08). Nút rộng vừa đúng
   chữ (flex:none), ô nhập ăn hết phần còn lại. */
.trakey__hang{display:flex; flex-wrap:wrap; align-items:stretch;
  gap:var(--space-2xs); margin-top:var(--space-md)}
.trakey__o{flex:1 1 260px; min-width:0; margin:0}
.trakey__hang .btn{flex:none}
@media(max-width:560px){
  /* Máy hẹp: ô nhập chiếm trọn một dòng, hai nút chia đôi dòng dưới. */
  .trakey__o{flex:1 1 100%}
  .trakey__hang .btn{flex:1 1 0; min-width:0}
}
/* Cảnh báo: chữ đỏ, KHÔNG khung, KHÔNG nền (chủ dự án 20/08). */
.trakey__canh{margin-top:var(--space-md); color:var(--alert);
  font-size:var(--text-sm); line-height:var(--lh-body)}
body.embed .trakey{max-width:none}
body.embed .trakey__canh{margin-top:var(--space-sm); font-size:var(--text-2xs)}

/* Ô chờ tiền + khối key + toast (dùng chung cả trang riêng lẫn popup) */
.paywait{display:flex; align-items:center; gap:8px; font-size:var(--text-sm); color:var(--ink-3)}
.paywait__spin{width:12px; height:12px; flex:none; border-radius:50%;
  border:2px solid var(--line-3); border-top-color:var(--cta-fill);
  animation:payspin .8s linear infinite}
@keyframes payspin{to{transform:rotate(360deg)}}

.paykey{padding:var(--space-sm) var(--space-md); border-radius:var(--radius-lg);
  background:var(--paper-1); border:1px solid color-mix(in srgb, var(--cta-fill) 45%, var(--line-2))}
.paykey__t{display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:var(--text-sm); color:var(--ink-1)}
.paykey__ok{width:9px; height:9px; flex:none; border-radius:50%; background:var(--cta-fill)}
/* Gói + hạn ngay dưới dòng "đã nhận thanh toán" (chủ dự án 20/08). Một cỡ
   phụ duy nhất trong khối, không đẻ thêm cấp chữ. */
.paykey__goi{margin:0 0 10px; font-size:var(--text-sm); color:var(--ink-3);
  line-height:var(--lh-body)}
.paykey__goi:empty{display:none}
/* Icon chép nằm TRONG ô mã: đặt tuyệt đối trong khung, chừa chỗ bằng
   padding-right để chuỗi mã không chui ra sau lưng icon. */
.paykey__row{position:relative; display:flex; align-items:center}
.chepnho{position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  border:0; border-radius:var(--radius-md,8px); background:transparent;
  color:var(--ink-3); cursor:pointer;
  transition:background var(--dur-hover-out) var(--ease-out),
             color var(--dur-hover-out) var(--ease-out)}
.chepnho svg{width:17px; height:17px; display:block}
@media(any-hover:hover){.chepnho:hover{background:var(--paper-3); color:var(--ink-1)}}
.chepnho:focus-visible{outline:2px solid var(--focus); outline-offset:1px}
/* Đã chép: đổi sang dấu tick, giữ nguyên khung để không nhảy layout. */
.chepnho.xong{color:var(--cta-fill)}
.paykey__row code{flex:1; min-width:0; padding:11px 50px 11px 12px; border-radius:var(--radius-md,8px);
  background:var(--paper-deep); border:var(--rule-hairline) solid var(--line-2);
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:var(--text-sm);
  letter-spacing:.5px; color:var(--ink-1); overflow-x:auto; white-space:nowrap}

/* Toast - nền paper-3, viền hairline, chữ 12.5px, bóng không màu; nổi
   giữa-ngang gần đáy. Lỗi → viền coral. Chủ dự án 18/08.

   BO GÓC THEO NÚT, KHÔNG PHẢI PILL (LỖI-027, chủ dự án 22/08). Trước đây dùng
   `--radius-pill` vì chép từ `.toast` của panel. Nhưng luật giao diện của dự án
   là mọi khối bo giống nút chính, không dùng pill - và toast là khối duy nhất
   trên web còn sót lại. Nhìn cạnh nút Mua thì nó lạc hẳn ra. `--radius-ctl` là
   đúng cái `.btn` đang dùng. */
.paytoast{position:fixed; left:50%; bottom:32px; transform:translateX(-50%); z-index:80;
  display:inline-flex; align-items:center; gap:var(--space-2xs);
  max-width:calc(100% - var(--space-lg)); padding:6px 12px;
  border-radius:var(--radius-ctl); background:var(--paper-3);
  border:1px solid var(--line-2); color:var(--ink-1);
  font-size:var(--text-2xs); line-height:var(--lh-flat); white-space:nowrap;
  box-shadow:0 6px 20px rgb(0 0 0 / 45%)}
/* HAI TRẠNG THÁI (chủ dự án 20/08): xong = xanh dương, thất bại = đỏ. Màu nằm
   ở viền + một chấm 8px dẫn đầu, không tô cả nền - chữ trắng trên nền tô đặc
   khó đọc, và chấm giữ được nghĩa cả khi in đen trắng. */
.paytoast::before{content:""; width:8px; height:8px; flex:none; border-radius:50%;
  background:var(--ink-3)}
.paytoast.is-ok{border-color:var(--cta-fill)}
.paytoast.is-ok::before{background:var(--cta-fill)}
.paytoast.is-err{border-color:var(--alert)}
.paytoast.is-err::before{background:var(--alert)}
/* Câu báo lỗi dài hơn một dòng thì cho xuống dòng thay vì tràn ngang.

   `text-wrap:balance` chia đều các dòng thay vì đổ đầy dòng trên rồi vứt một
   từ lẻ xuống dòng dưới. Chủ dự án bắt được ảnh toast tra mã ngắt thành
   "…kể cả Thư / rác" - hai chữ dính nhau bị tách đôi, đọc rất xấu (LỖI-027).
   Chuỗi đã được rút gọn ở cả post/ lẫn server/ để phần lớn câu nằm gọn MỘT
   dòng; `balance` lo nốt những câu buộc phải xuống dòng, ví dụ câu có kèm địa
   chỉ email dài không cắt được.

   `overflow-wrap` PHẢI LÀ `break-word`, KHÔNG được là `anywhere`. Toast là
   `position:fixed` + `inline-flex`, tức bề rộng co theo nội dung. `anywhere`
   kéo cả bề rộng TỐI THIỂU của khối xuống một ký tự, nên khối co lại còn 26px
   và mọi câu ngắt dọc từng chữ cái. Đo được ngay lượt đầu khi vừa thêm:
   22/22 câu đều 26px. `break-word` cho phép cắt chuỗi dài không cắt được -
   đúng thứ cần cho địa chỉ email - mà không đụng vào bề rộng tối thiểu. */
.paytoast{white-space:normal; text-align:start; line-height:var(--lh-body);
  text-wrap:balance; overflow-wrap:break-word;
  max-width:min(520px, calc(100% - var(--space-lg)))}
/* `hidden` phải THẮNG `display:inline-flex` - không thì toast hiện vĩnh viễn. */
.paytoast[hidden]{display:none}

/* ── AUTOFILL CỦA TRÌNH DUYỆT (chủ dự án 20/08: "lỗi chồng đè box") ────────
   Chrome vẽ nền tự-điền của riêng nó đè lên ô nhập, và vì `input` chỉ cao 24px
   trong khung 42px nên khối nền đó nằm lửng giữa ô, nhìn đúng như một cái hộp
   thứ hai chồng lên. `background` không đè được nó - phải dùng box-shadow inset
   dày, đó là cách duy nhất trình duyệt cho phép ghi đè lớp nền này. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:inset 0 0 0 1000px var(--paper-3) !important;
  box-shadow:inset 0 0 0 1000px var(--paper-3) !important;
  -webkit-text-fill-color:var(--ink-1) !important;
  caret-color:var(--ink-1);
  transition:background-color 5000s ease-in-out 0s;
}

/* Ô QR: `hidden` phải THẮNG `.qr{display:grid}` (không thì hộp trắng chồng hint). */
.qr[hidden]{display:none}
/* Cả card QR: `hidden` phải THẮNG `.pay .qr-card{display:flex}` - nếu không,
   ẩn QR lúc hiện key vẫn để lại một mảng trống dưới khối key. */
.qr-card[hidden]{display:none}
.paywait[hidden]{display:none}
/* Hint trong ô QR khi CHƯA nhập email - thay cho placeholder dev. */
.qr-hint{margin:auto; padding:var(--space-lg) var(--space-md); text-align:center;
  color:var(--ink-3); font-size:var(--text-sm)}

/* ── 4 logo CÓ TEXT ở mục tải (chủ dự án 18/08) ─────────────────────────────
   Hàng ngang: icon 40px + tên app/OS + phiên bản, lấp chỗ trống dưới nút tải. */
/* DÀN HÀNG NGANG fit page: 4 ô chia đều bề ngang (grid 4 cột). */
.platlogos{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xs); margin-top:var(--space-lg)}
.platlogo{display:inline-flex; align-items:center; gap:11px; min-width:0; padding:10px 14px 10px 10px;
  border-radius:var(--radius-lg); background:var(--paper-1);
  border:var(--rule-hairline) solid var(--line-2)}
/* Icon TRẮNG trong khung mảnh - đồng bộ với logo hero. */
.platlogo svg{width:44px; height:44px; flex:none; border-radius:10px;
  box-shadow:inset 0 0 0 1px var(--line-2)}
.platlogo__t{min-width:0}
.platlogo b{display:block; font-size:var(--text-sm); font-weight:var(--w-medium); color:var(--ink-1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.platlogo i{display:block; font-size:var(--text-2xs); color:var(--ink-4); font-style:normal; margin-top:2px}
@media(max-width:640px){.platlogos{grid-template-columns:repeat(2,1fr)}}

/* Khử NỀN AUTOFILL trắng của trình duyệt (chủ dự án 18/08): email đã lưu bị
   Chrome tô nền trắng đè lên field xám → "2 box trắng-xám" chồng nhau. Ép nền
   autofill = paper-3 (đúng nền field), chữ = mực. */
.pay input:-webkit-autofill,
.pay input:-webkit-autofill:hover,
.pay input:-webkit-autofill:focus,
.pay input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink-1);
  -webkit-box-shadow:0 0 0 40px var(--paper-3) inset;
  caret-color:var(--ink-1);
  transition:background-color 9999s ease-in-out 0s;
}

/* ── THANH CUỘN - luật của design-system-kit (`.mscroll` trong
   globals.reference.css), áp cho MỌI vùng cuộn của trang, kể cả trang nạp
   trong iframe của card popup. Chủ dự án 19/08: "không bao giờ được dùng
   thanh cuộn trắng". Track trong suốt, thumb mực bo tròn, ẩn mũi tên OS. */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-3); border-radius:999px;
  border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-button{display:none; width:0; height:0}
::-webkit-scrollbar-corner{background:transparent}
@media(any-hover:hover){
  ::-webkit-scrollbar-thumb:hover{background:var(--ink-4); background-clip:padding-box}}
html{scrollbar-width:thin; scrollbar-color:var(--line-3) transparent}