/* ══════════════════════════════════════════════════════════════════════
   Assets Collection · 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)}
@media(max-width:600px){
  .shot__panel{height:clamp(460px,76vh,600px)}
}

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

.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)}}

@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)}}
.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)}}