/* TimKiemAI — he thong thi giac.
 *
 * Chu: Bricolage Grotesque (display) + Be Vietnam Pro (body/UI). Be Vietnam Pro
 * do xuong chu Viet ve — dau chong (e-mu-nang, u-mo-nga) la net VE THAT chu khong
 * phai ghep may, nen o 16px dau khong dinh vao than chu. Day la lua chon quan
 * trong nhat cua ca file: san pham chinh cua trang la mot buc tuong chu tieng Viet.
 *
 * CANH BAO — app.js `setStatus()` gan `el.className = "note" + kind`, tuc XOA SACH
 * moi class tren phan tu trang thai. Vi vay #tstat / #sfixstat / #anastat / #sstat
 * / #serr phai duoc style THEO ID, khong bao gio theo class layout.
 */

/* TOKEN DA CHUYEN SANG `tokens.css` (Phase 1, 2026-08-24).
 *
 * File nay KHONG con khai bao `:root`. Moi bien `--*` duoi day den tu
 * `/assets/tokens.css`, phai duoc nap bang mot the <link> RIENG dat TRUOC the
 * nap file nay. Xem dau `tokens.css` de biet vi sao khong dung @import.
 *
 * Thieu the do thi trang mat sach mau — hong to, thay ngay, dung y do. */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Mobile-first: chan tran mach cua moi khoi con, tranh scroll ngang o 375px. */
  overflow-x: hidden;
}

h1, h2 { font-family: var(--font-display); line-height: 1.14; margin: 0 0 var(--sp-3); }
h1 { font-size: 30px; font-weight: 700; letter-spacing: -.012em; }
h2 { font-size: 23px; font-weight: 600; line-height: 1.22; margin-top: var(--sp-7); }
/* h3 va tieu de buoc dung BODY face — chung la UI, khong phai noi dung bien tap. */
h3, .shd { font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.32; }

a { color: var(--cta); text-underline-offset: 2px; }
a:hover { color: var(--cta-hover); }

.wrap {
  /* 780px chu khong phai 940px: gio chi con MOT cot tuyen tinh, khong con hai tab
     canh nhau. Rieng viec thu hep nay da lam phan lon viec cai thien do doc. */
  max-width: 780px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-8);
}

/* --- man dang nhap ---
   Cua duy nhat vao site. Cot doc can giua, khong trang tri: khong co gi de doc o
   day ngoai mot o nhap, nen moi thu khac chi lam cham lai. */
.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
}
.gate__box { width: 100%; max-width: 380px; }
.gate__box h1 { font-size: 24px; line-height: 1.3; margin: 0 0 var(--sp-5); }
.gate__row { display: flex; gap: var(--sp-2); }
.gate__row input {
  flex: 1;
  min-width: 0;
  /* 16px tro len: duoi nguong do Safari tren iOS tu phong to trang khi o nhap
     nhan focus, va khong tu thu lai. */
  font: inherit;
  font-size: 16px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.gate__row input:focus-visible { outline: 2px solid var(--cta); outline-offset: 1px; }
.gate #gmsg { margin: var(--sp-3) 0 0; min-height: 1.5em; }

/* --- thanh tien ich ---
 *
 * Ban truoc neo hai nut nay `position:absolute; top:0; right:0` vao trong `.top`,
 * nen tieu de khi xuong dong chui thang xuong duoi chung. Neo tuyet doi la muon cho
 * cua tieu de. Gio chung co HANG RIENG, va bai toan chong nhau bien mat thay vi
 * phai vá bang media query.
 *
 * Duong ke toc duoi la thu duy nhat ngan thanh nay voi khoi tieu de — khong khung,
 * khong nen. No la chrome, khong phai noi dung. */
.rail {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.rail__brand {
  /* Chu HOA chi dung cho nhan Latin thuan — chu hoa + dau tieng Viet gan nhu khong
     doc duoc. "TimKiemAI" khong dau nen an toan. */
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 700;
  color: var(--cta);
}

/* Nut chuyen sang ban moi. CO VIEN va CO NEN vi day gio la ban MAC DINH — mot
   nguoi vao `/` la dang o cho khong mac dinh, ho can thay duong ve ngay. Doi lai,
   `.rail__out` ben duoi chi la chu. Hai viec khac han nhau ve tan suat va hau qua
   thi khong duoc mang cung mot hinh dang. */
.swap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-3);
  border: 1px solid rgba(212, 69, 31, .28);
  border-radius: var(--r-pill);
  background: var(--cta-tint);
  color: var(--cta);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.swap:hover {
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-cta);
}
/* Mui ten nhich sang phai khi ro chuot — mot goi y huong di, dung mot lan, o dung
   cho no co nghia. Day la chuyen dong duy nhat cua thanh nay. */
.swap .i { transition: transform .16s cubic-bezier(.22, .7, .28, 1); }
.swap:hover .i { transform: translateX(2px); }

.rail__out {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: var(--sp-2) 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .14s ease;
}
.rail__out:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 400px) {
  /* Rat hep: bo nhan thuong hieu chu khong bo nut. Ten trang da nam o thanh tieu
     de trinh duyet va o chinh tieu de trang; hai nut thi khong co cho nao khac. */
  .rail { gap: var(--sp-2); }
  .rail__brand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .swap .i { transition: none; }
  .swap:hover .i { transform: none; }
}

/* --- header --- */
.top { margin-bottom: var(--sp-6); }
.kicker {
  /* Chu HOA chi dung cho nhan Latin thuan — chu hoa + dau tieng Viet gan nhu
     khong doc duoc, nen moi nhan tieng Viet khac deu viet thuong. */
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 700;
  color: var(--cta);
  margin: 0 0 var(--sp-2);
}
.top .sub { color: var(--muted); margin: 0; max-width: 60ch; font-size: 17px; line-height: 1.68; }

/* --- thanh buoc --- */
.steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0 0 var(--sp-5);
}
.step {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.step:hover:not([disabled]) { border-color: var(--line-strong); color: var(--ink); }
.step__n {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--tint);
  color: var(--muted);
  font-size: 12px;
}
.step__ck { display: none; color: var(--ok); }
.step[data-done="true"] .step__ck { display: block; }
.step[data-done="true"] .step__n { display: none; }
.step[aria-current="step"] {
  background: var(--cta-tint);
  border-color: var(--cta);
  color: var(--ink);
}
.step[aria-current="step"] .step__n { background: var(--cta); color: var(--on-cta); }
.step[disabled] { opacity: .5; cursor: not-allowed; }
.step__bar { flex: 1 1 auto; height: 1px; background: var(--line); min-width: 8px; }

/* --- the buoc --- */
.stepcard {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-5);
}
.shd { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.shd:focus { outline: none; }   /* dich focus cua gotoStep — khong ve vien o day */
.lede { color: var(--muted); font-size: 15px; margin: 0 0 var(--sp-5); max-width: 60ch; }

.stepfoot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.grow { flex: 1 1 auto; }
.foothint { margin: 0; font-size: 14px; color: var(--muted); max-width: 34ch; }

/* The buoc vao man hinh. Chi mot lan, ngan, va co dich chuyen that nho — day la
   dau hieu "da sang buoc khac", khong phai mot man trinh dien. */
.stepcard.in { animation: card-in .40s cubic-bezier(.22, .7, .28, 1) both; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- truong nhap --- */
.fld { display: block; margin-bottom: var(--sp-4); }
.fld > span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .012em;
  margin-bottom: var(--sp-2);
}
input[type="url"], input[type="text"], textarea, select {
  width: 100%;
  font-family: var(--font-body);
  /* 16px la BAT BUOC: duoi nguong nay iOS Safari tu phong to trang khi focus. */
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  padding: 12px var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
}
input::placeholder, textarea::placeholder { color: #9d9992; }
input:hover, textarea:hover { border-color: var(--muted); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible, .step:focus-visible, .pill:focus-visible {
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

/* --- nut --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, transform .06s ease;
}
.btn:hover { background: var(--tint); border-color: var(--line-strong); }
.btn:active { transform: translateY(1px); }

/* PRIMARY — to hon, co mau, co bong. TOI DA MOT nut moi buoc: mau --cta chi
   duoc xuat hien dung mot lan tren man hinh tai mot thoi diem. Vi vay app.js
   HA CAP nut da dung xong (setPrimary) thay vi de hai nut cam canh nhau. */
.btn.primary {
  font-size: 16px;
  min-height: 48px;
  padding: 0 var(--sp-5);
  background: var(--cta);
  border-color: var(--cta);
  color: var(--on-cta);
  box-shadow: var(--sh-cta);
}
.btn.primary:hover  { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn.primary:active { background: var(--cta-press); border-color: var(--cta-press); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover { background: var(--tint); border-color: transparent; color: var(--ink); }


.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;   /* tat luon hover nhap nhay tren nut da khoa */
}

/* Dang chay — nut CHI mo di, KHONG co spinner rieng.
   Moi nut chay lau deu co mot dong trang thai ngay ben duoi (#tstat / #sfixstat /
   #anastat / #sstat) da mang .spin va cau chu mo ta viec dang lam. Ve them spinner
   tren nut = hai vong xoay canh nhau noi cung mot dieu, gay nhieu mat. `aria-busy`
   van duoc dat trong app.js — no la tin hieu cho trinh doc man hinh, khong can hinh. */
/* Nut dang chay phai TRONG NHU da khoa: app.js co dat `disabled` that, nhung
   quy tac nay dung SAU `.btn[disabled]` va cung do dac hieu nen no quyet dinh do
   mo. De .82 thi nut van trong nhu bam duoc — nguoi dung bam lai nhieu lan roi
   tuong trang treo. */
.btn[aria-busy="true"] { opacity: .45; cursor: progress; }
.btn.primary[aria-busy="true"] { box-shadow: none; }

.btnrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
  margin-top: var(--sp-4);
}

/* --- pill tuy chon ---
   `.pillrow[data-group]` va `.pill[aria-pressed]` la HOP DONG voi app.js:222-232.
   Mau chon la --ink chu KHONG phai --cta: pill la thiet lap, khong phai hanh dong,
   khong duoc tranh mau voi nut chinh. */
.olbl { font-size: 13px; font-weight: 600; letter-spacing: .012em; margin: var(--sp-5) 0 var(--sp-2); }
.pillrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.pill {
  min-height: 38px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.pill:hover { border-color: var(--line-strong); background: var(--tint); }
.pill[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
  font-weight: 600;
}

/* Nut phu trong bang transcript: thap hon nut chinh mot bac de khong tranh cho,
   nhung van la nut DAC (co vien, co nen) — khong phai chu tran. */
.btn.sm { min-height: 38px; font-size: 14px; padding: 0 var(--sp-3); }

/* ACCENT — "Chuẩn hoá lời thoại". Truoc day la .ghost mo nhat canh mot nut da
   khoa, nhin y het nut bi vo hieu hoa. Nen nhat mau CTA + chu mau CTA lam no ro
   rang la bam duoc, ma van khong to tieng bang nut cam cua buoc. */
.btn.accent {
  background: var(--cta-tint);
  border-color: rgba(212, 69, 31, .32);
  color: var(--cta);
}
.btn.accent:hover { background: #fbe5dd; border-color: rgba(212, 69, 31, .5); }
.btn.accent .i { color: var(--cta); }

/* --- ket qua & van ban dai --- */

/* --- bang transcript ---
   Vien dam hon + thanh tieu de co nen + vach mau CTA ben trai. Ba thu nay tach no
   khoi nen trang cua the buoc; truoc day khung ket qua dung dung mot duong vien
   --line nhat nhu moi khoi khac nen no chim mat. */
.tpanel {
  position: relative;
  margin-top: var(--sp-5);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--cta);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.tpanel__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
}
.tpanel__ttl { font-weight: 700; color: var(--ink); letter-spacing: .012em; }
.tpanel__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.tpanel__meta b { color: var(--ink); font-weight: 600; }

.tpanel__body { position: relative; }
/* Trong bang thi khung chu khong con la mot the rieng nua — bo vien va bo bo goc
   cua .out di, khong thi thanh hai lop hop long nhau. */
.tpanel .out {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
}
.tpanel .out.clamp::after { left: 0; right: 0; bottom: 0; border-radius: 0; }

/* Nut "Xem toàn bộ" dat DE LEN dai mo, dinh vao mep duoi cua chinh khoi chu —
   day la ca van de #2: truoc kia no nam duoi mot hang nut khac, cach noi dung
   ma no mo ra ca mot khoang, nen doc nhu mot hanh dong khong lien quan. */
.tpanel__more {
  position: absolute;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 36px;
  padding: 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
.tpanel__more:hover { background: var(--tint); border-color: var(--muted); }

.tpanel__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.tpanel #sfixstat { margin: 0; padding: 0 var(--sp-4) var(--sp-3); }

/* --- hop toan man hinh --- */
.fs {
  /* `inset:0` + `margin:0`: mac dinh <dialog> co margin:auto va max-height chua
     den man hinh, nen thieu hai dong nay hop se noi lo lung giua trang. */
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.fs:not([open]) { display: none; }
.fs::backdrop { background: rgba(25, 24, 23, .55); }
.fs__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  /* Le ngang bang voi .fs__body de tieu de thang hang voi mep chu ben duoi. */
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--muted);
  min-width: 0;
}
.fs__ttl { font-weight: 700; color: var(--ink); font-size: 15px; }
.fs__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* PHAI viet `.fs .fs__body` chu khong phai `.fs__body`: rule `.out` va `.out > p`
   nam SAU trong file va cung do dac hieu (0,1,0) / (0,1,1), nen ban mot class se
   thua — border cua .out quay lai dinh vao hai canh man hinh va cot chu bi ghim
   sang trai. Them mot class to nua la du de thang, khong can !important. */
.fs .fs__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
  /* Can giua CA COT bang padding ngang, khong phai can tung phan tu bang margin
     auto. Chi <p> co margin auto thi tieu de va danh sach van trai het be ngang,
     ra dung canh tuong trong anh: chu thi o giua ma tieu de thi dinh mep trai.
     `max()` giu le toi thieu 24px khi man hinh hep hon --measure. */
  padding: var(--sp-6) max(var(--sp-5), calc((100% - var(--measure)) / 2)) var(--sp-8);
  font-size: 17px;
}
/* Trong cot da dung be rong roi — bo tran --measure cua `.out > p` di, khong thi
   dong chu bi hep thanh hai lan. */
.fs .fs__body > p { max-width: none; margin: 0 0 .95em; }
.fs .fs__body > ul { max-width: none; }
.fs .fs__body > :last-child { margin-bottom: 0; }

/* --- khung xuong ca luc doi chunk dau tien --- */
.skel { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
/* Trong bang thi xuong ca phai thut vao bang le cua chu, khong thi luc chu that
   hien ra no nhay sang mot cot khac. */
.tpanel .skel { margin: var(--sp-4) var(--sp-5); }
.skel span {
  height: 12px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--tint) 20%, #e7e5df 38%, var(--tint) 56%);
  background-size: 220% 100%;
  animation: skel-sweep 1.25s linear infinite;
}
.skel span:nth-child(1) { width: 42%; }
.skel span:nth-child(2) { width: 100%; }
.skel span:nth-child(3) { width: 94%; }
.skel span:nth-child(4) { width: 62%; }
@keyframes skel-sweep { to { background-position: -220% 0; } }

.out {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-size: 16px;
  /* 1.72 chu khong phai 1.55: dau chong tieng Viet can khoang tho theo chieu doc,
     neu khong dau cua dong duoi cham vao chan chu dong tren. */
  line-height: 1.72;
  white-space: pre-wrap;

  /* Truoc day la `overflow-wrap: anywhere` — no cat tu tieng Viet GIUA am tiet va
     pha nat mep phai. Tu tieng Viet <= 7 ky tu nen `break-word` khong bao gio kich
     hoat tren van xuoi; no chi xu ly dung ca that la mot URL tran trong phu de. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  text-wrap: pretty;
}
.out:empty { display: none; }
.out > p { max-width: var(--measure); margin: 0 0 .85em; }
.out > p:last-child { margin-bottom: 0; }
/* Khi da co <p> block thi phai TAT pre-wrap, khong thi leading bi nhan doi. */
.out.doc { white-space: normal; }

/* Transcript: KEP roi mo, KHONG cuon.
   Vung cuon long trong cuon trang la mau te nhat tren mobile — scroll-chaining,
   mat vi tri, khong boi den qua bien duoc. Transcript la thu nguoi dung DOC va
   CHON, nen no phai nam trong dong chay cuon cua trang. */
.out.clamp { max-height: 20em; overflow: hidden; }
.out.clamp::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 5em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--surface) 82%);
  border-radius: 0 0 var(--r-md) var(--r-md);
  pointer-events: none;
}

/* Dau ra AI: GIU hop cuon. Chung stream vao va nguoi dung nhin phan duoi; bo gioi
   han thi trang nhay moi chunk. */
#anaout, #scrout {
  /* Nam trong .tpanel nen khong con vien rieng; chi giu le va hop cuon. Padding
     duoi nho hon transcript vi o day khong co nut noi de len mep duoi. */
  padding: var(--sp-4) var(--sp-5);
  max-height: min(64vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* khong keo theo trang khi cuon het */
  /* Thu thuat background-attachment:local — bong chi hien khi THAT SU con noi dung
     ngoai khung theo huong do. Khong JS, khong listener, khong reflow. */
  background:
    linear-gradient(var(--surface) 30%, rgba(255, 255, 255, 0)) top / 100% 28px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0), var(--surface) 70%) bottom / 100% 28px no-repeat,
    radial-gradient(farthest-side at 50% 0,    rgba(25, 24, 23, .10), rgba(0, 0, 0, 0)) top / 100% 12px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(25, 24, 23, .10), rgba(0, 0, 0, 0)) bottom / 100% 12px no-repeat;
  background-attachment: local, local, scroll, scroll;
}

/* Dau ra co cau truc cua kich ban. Trong luc STREAM, text duoc chen tho (nhanh,
   khong nhap nhay); dinh dang chi ap MOT LAN khi da xong — xem app.js. */
.out .shead { display: block; font-weight: 700; color: var(--ink); margin: 1.2em 0 .25em; }
.out .shead.h2 {
  font-family: var(--font-display);
  font-size: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-2);
}
.out .hint { color: var(--muted); font-style: italic; }
.out b { color: var(--ink); font-weight: 600; }
.out code {
  font-size: .9em;
  background: var(--tint);
  border-radius: 4px;
  padding: 1px 5px;
}

/* Danh sach trong dau ra AI. `padding-left` tinh theo em de dau cham lui vao vua
   du o moi co chu; `--measure` giu dong khong dai qua muc doc duoc. */
.out ul {
  max-width: var(--measure);
  margin: .35em 0 .95em;
  padding-left: 1.15em;
  list-style: none;
}
.out li { position: relative; margin-bottom: .4em; }
.out li::before {
  content: "";
  position: absolute;
  left: -.95em;
  top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cta);
  opacity: .55;
}
.out ul:last-child, .out li:last-child { margin-bottom: 0; }

/* --- tu vua doi sau khi chuan hoa ---
   Danh dau O LAI, khong tat dan: cau hoi "no da sua nhung gi" khong het sau vai
   giay dau — nguoi dung con doc lai, con so sanh. De doc duoc ca trang thi mau
   nen phai NHAT (cta-tint) va chu giu mau muc; chi gach chan moi mang mau CTA.
   `cursor: help` la loi moi: no bao rang re chuot vao se co gi do hien ra. */
.chg {
  border-radius: 3px;
  padding: 0 2px;
  background: var(--cta-tint);
  box-shadow: inset 0 -1px 0 rgba(212, 69, 31, .45);
  cursor: help;
}
.chg:hover { background: #fbe0d6; }

/* --- tooltip chu goc ---
   `position: fixed` + toa do do bang JS: no phai noi len tren moi khung `overflow`
   (bang transcript dang kep, hop cuon cua dau ra AI). Giu `visibility` thay vi
   `display:none` de con do duoc kich thuoc truoc khi dat vi tri. */
.tip {
  position: fixed;
  z-index: 60;
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #f4f2ee;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--sh-2);
  pointer-events: none;   /* khong bao gio chen giua chuot va chu */
  visibility: hidden;
  opacity: 0;
  transition: opacity .12s ease;
}
.tip.on { visibility: visible; opacity: 1; }
.tip i { color: #b9b5ad; font-style: italic; }
/* Mui nhon: mot hinh vuong xoay 45 do, doi canh khi tooltip phai lat xuong duoi. */
.tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: var(--ink);
  transform: rotate(45deg);
}
.tip.below::after { bottom: auto; top: -4px; }

@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; }
}

/* --- trang thai ---
   Style THEO ID, khong theo class: setStatus() xoa sach className moi lan cap nhat. */
#tstat, #sfixstat, #anastat, #sstat, #serr {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
}
#tstat:empty, #sfixstat:empty, #anastat:empty, #sstat:empty, #serr:empty { display: none; }

/* #serr nam NGOAI the buoc (dung chung cho ca ba buoc) nen neu de chu tran thi
   no trong nhu chu lac. Boc thanh banner de gan no vao luong. */
#serr {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--err-tint);
  border: 1px solid rgba(178, 59, 46, .28);
  border-radius: var(--r-md);
}

.note { color: var(--muted); font-size: 14px; }
/* Nut "Thử lại" nam ngay trong cau bao loi (#tstat). `.note` la mot the <p> nen
   nut phai tu tach ra khoi chu, khong dua vao khoang cach cua flex. */
.note .btn { margin-left: var(--sp-2); vertical-align: middle; }
.err  { color: var(--err); font-weight: 600; }
.warn { color: var(--cta); }
.ok   { color: var(--ok); font-weight: 600; }

.spin {
  display: inline-block;
  width: 14px; height: 14px;
  flex: none;
  margin-top: 4px;
  border: 2px solid var(--line);
  border-top-color: var(--cta);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- icon ---
   Sprite SVG noi tuyen o dau <body>. Khong icon font, khong CDN, khong emoji.
   `1.15em` de icon co giai theo co chu cua phan tu chua no. */
.i {
  width: 1.15em; height: 1.15em;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -.18em;
}
.i-lg { width: 1.4em; height: 1.4em; color: var(--cta); }

/* An khoi mat nhung giu cho trinh doc man hinh. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden { display: none !important; }

footer {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
  color: var(--muted);
  font-size: 14px;
}

/* --- man hinh hep: chip buoc phai vua mot dong --- */
@media (max-width: 440px) {
  .steps { gap: var(--sp-1); }
  .step__bar { display: none; }
  .step { padding: var(--sp-2); font-size: 13px; }
  /* Chi buoc HIEN TAI hien nhan chu; hai buoc kia con lai so/dau tick. */
  .step:not([aria-current="step"]) .step__t { display: none; }
}

@media (min-width: 720px) {
  .wrap { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
  h1 { font-size: 42px; line-height: 1.08; }
  h2 { font-size: 28px; }
  .shd { font-size: 20px; }
  .top .sub { font-size: 18px; }
  .stepcard { padding: var(--sp-6); }
}

@media (max-width: 719px) {
  #anaout, #scrout { max-height: 72vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .step, .pill, .tpanel__more { transition: none; }
  .spin { animation-duration: 3s; }
  .stepcard.in { animation: none; }
  /* Giu mau nen, bo cai quet — van thay "cho o day" ma khong co chuyen dong. */
  .skel span { animation: none; background: var(--tint); }
}