/* TimKiemAI — ban giao dien chat `/chat/`.
 *
 * KHONG khai bao `:root` o day. Moi bien den tu `/assets/tokens.css`, nap bang
 * mot the <link> RIENG dat truoc file nay. Phase 6 co buoc kiem:
 *   grep -rn '\-\-cta:' public/   -> chi duoc ra dung mot ket qua (tokens.css)
 *
 * Quan he voi `style.css`: KHONG dung chung. `style.css` la cua ban wizard `/`,
 * xay quanh mot cot 780px doc theo trang. Ban nay la mot khung ung dung cao bang
 * man hinh, co vung cuon rieng. Dung chung se thanh mot file danh cho hai bo cuc
 * doi lap — dat hon la viet rieng. Cai dung chung la TOKEN, khong phai layout.
 *
 * Hai chi tiet thi giac muon tu ban `/`, co y:
 *   - Vach CTA 3px ben trai khoi ket qua (giong `.tpanel`). O day no CHAY khi
 *     dang stream — mo rong tu nhien cua mot quy uoc da co, khong phai phat minh
 *     mot tin hieu moi.
 *   - Trong o soan, chi mui ten gui duoc to mau --cta. Cac o chon la THIET LAP chu
 *     khong phai hanh dong; to mau chung len se co hai thu tranh nhau lam "buoc
 *     tiep theo" va nguoi dung phai tu doan cai nao moi la nut bam.
 */

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

html, body { height: 100%; }

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;
  overflow: hidden;              /* vung cuon nam ben trong, khong phai o trang */
  overscroll-behavior: none;
}

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.grow   { flex: 1 1 auto; }
.hidden { display: none !important; }
.vh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ============================================================ nut dung chung */

.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); }
.btn:focus-visible { outline-offset: 3px; box-shadow: var(--focus-ring); }

.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.sm { min-height: 38px; font-size: 14px; padding: 0 var(--sp-3); }

.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* ============================================================= man dang nhap */

/* Khong logo to, khong khau hieu. Day la cua sau cua mot cong cu ca nhan —
   trang tri o day chi lam cham viec duy nhat can lam. */
.gate {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: var(--sp-5);
}
.gate__box {
  position: relative;
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.gate__mark {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--cta-tint);
  color: var(--cta);
  border: 1px solid rgba(212, 69, 31, .22);
}
.gate__mark .i { width: 22px; height: 22px; }
.gate h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: 1.16;
  margin: 0 0 var(--sp-2);
}
.gate__sub { color: var(--muted); font-size: 15px; margin: 0 0 var(--sp-6); }
.gate__row { display: flex; gap: var(--sp-2); }
.gate input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;                /* 16px BAT BUOC: duoi nguong nay iOS phong to trang */
  line-height: 1.5;
  color: inherit;
  padding: 12px var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
}
.gate input:hover { border-color: var(--muted); }
.gate__msg { min-height: 1.5em; margin: var(--sp-3) 0 0; font-size: 14px; color: var(--err); font-weight: 600; }

/* =============================================================== khung ung dung */

/* `grid-template-rows` la BAT BUOC, khong phai thua.
 *
 * Thieu no thi hang la ngam dinh `auto` — cao bang NOI DUNG cua `.main`, khong
 * phai bang khung. `.app` phinh qua 100dvh, `body { overflow: hidden }` cat phan
 * thua, va khong cho nao cuon duoc: o dinh day va chan sidebar bien mat luon.
 *
 * `min-height: 0` tren `.side` / `.main` di kem: mac dinh mot o luoi khong co thu
 * nho hon noi dung cua no. Thieu dong do thi `minmax(0, 1fr)` o tren van bi noi
 * dung day phinh ra. Hai thu phai co ca doi. */
.app {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
}

/* ---------------------------------------------------------------- sidebar */

.side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;      /* cho phep co lai duoi chieu cao noi dung — xem ghi chu o .app */
  background: var(--tint);
  border-right: 1px solid var(--line);
}
.side__top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
}
.side__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding-left: var(--sp-2);
}
.side__brand .i { color: var(--cta); }

.side__new {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: calc(100% - var(--sp-5));
  margin: 0 var(--sp-3) var(--sp-4);
  min-height: 42px;
  padding: 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.side__new:hover { border-color: var(--cta); background: var(--cta-tint); color: var(--cta); }

.side__lbl {
  padding: 0 var(--sp-4) var(--sp-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.side__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--sp-2) var(--sp-4);
}

/* Dong "Dang tai…" o cuoi danh sach khi lazy loading chay. Chieu cao co dinh de
   khi no bien mat, danh sach khong giat len mot doan. */
.side__more {
  margin: var(--sp-2) 0 0;
  padding: 0 var(--sp-3);
  height: 2.2em;
  line-height: 2.2em;
  font-size: 13px;
  color: var(--muted);
}

.thr {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  margin-bottom: 2px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
  transition: background-color .12s ease;
}
.thr:hover { background: rgba(255, 255, 255, .72); }
.thr[aria-current="true"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--sh-1);
}
/* Vach CTA chi hien o muc dang mo — dau hieu vi tri, khong phai trang tri. */
.thr[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--cta);
}
/* La mot <button> chu khong phai <span>: bam vao tieu de la mo phien, nen no
   phai la mot dieu khien that — co focus bang ban phim, co Enter/Space. */
.thr__t {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thr__t:focus-visible { outline-offset: 2px; }
.thr__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
.thr:hover .thr__x, .thr__x:focus-visible { opacity: 1; }
.thr__x:hover { background: var(--err-tint); color: var(--err); }
.thr__x .i { width: 15px; height: 15px; }

.side__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--line);
}
.side__foot .btn { flex: 1 1 auto; min-height: 38px; font-size: 14px; padding: 0 var(--sp-2); }

/* ------------------------------------------------------------------- main */

.main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;      /* cho phep co lai duoi chieu cao noi dung — xem ghi chu o .app */
  background: var(--bg);
}

.bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  min-width: 0;
  overflow: hidden;
}
.bar__t {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}
.bar__meta { flex: none; font-size: 13px; color: var(--muted); }
.bar__burger { display: none; }

/* KHONG dat `scroll-behavior: smooth` o day. No tung co, va no lam hong viec bam
   day trong luc stream:
   `el.scrollTop = el.scrollHeight` khi dang smooth chi KHOI DONG mot hoat anh. Khung
   hinh ke tiep, `stick()` doc `scrollTop` GIUA CHUNG hoat anh do — con cach day xa
   hon 64px — nen ket luan "nguoi dung da tu cuon len" va thoi bam theo. Chu chay
   duoc vai dong roi dung han.
   Moi lan cuon bang code o trang nay deu la "nhay ve day", va no phai tuc thi. */
.scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------ man trong + textbox */

.hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100%;
  padding: var(--sp-6) var(--sp-4) var(--sp-8);
}

/* Quang sang sau o nhap. Mua CACH DUNG khong khi cua giao dien AI hien dai,
   khong mua mau cua chung: day la --cta-tint toa ra --bg, khong phai xanh tim. */
.hero::before {
  content: "";
  position: absolute;
  left: 50%; top: 42%;
  width: min(760px, 130%);
  aspect-ratio: 1 / .62;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--cta-tint) 0%, rgba(253, 240, 236, 0) 66%);
  pointer-events: none;
}

.hero__in { position: relative; width: 100%; max-width: 640px; text-align: center; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 5.2vw, 38px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.014em;
  margin: 0 0 var(--sp-3);
}
.hero__sub { color: var(--muted); font-size: 16px; margin: 0 0 var(--sp-6); }

.box {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  transition: border-color .16s ease;
}
.box:focus-within { border-color: var(--cta); }
.box .i-lead { color: var(--muted); flex: none; }
.box input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  padding: 10px 0;
}
.box input::placeholder { color: #9d9992; }
.box__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 0;
  border-radius: 50%;
  background: var(--cta);
  color: var(--on-cta);
  cursor: pointer;
  box-shadow: var(--sh-cta);
  transition: background-color .14s ease;
}
.box__go:hover { background: var(--cta-hover); }
.box__go[disabled] { background: var(--line-strong); box-shadow: none; cursor: not-allowed; }

.hero__hint { margin: var(--sp-3) 0 0; font-size: 14px; color: var(--muted); min-height: 1.5em; }
.hero__hint.bad { color: var(--err); font-weight: 600; }

/* ============================================================ thread + bong bong */

.thread {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
}

.msg { margin-bottom: var(--sp-6); }
.msg:last-child { margin-bottom: 0; }

/* Vao man hinh mot lan, rat ngan. Day la dau hieu "co thu moi", khong phai mot
   man trinh dien — bong bong xuat hien lien tuc nen hieu ung phai gan nhu vo hinh. */
.msg.in { animation: msg-in .26s cubic-bezier(.22, .7, .28, 1) both; }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- bong bong nguoi dung: gon, phai, co nen --- */
.msg--me { display: flex; justify-content: flex-end; }
.msg--me .bub {
  max-width: min(88%, 520px);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg) var(--r-lg) var(--sp-1) var(--r-lg);
  box-shadow: var(--sh-1);
  font-size: 15px;
}
/* `display: block` la BAT BUOC, khong phai trang tri. Phan tu nay la mot <span>
   (xem `addMe` trong chat.js), va `overflow` KHONG ap dung cho phan tu inline
   khong thay the — thieu dong nay thi ba luat ben duoi bi bo qua sach va mot link
   dai (URL Facebook kem `?__cft__[0]=...`) tran han ra ngoai bong bong. */
.msg--me .bub__lbl {
  display: block;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg--me .bub__sub {
  margin: var(--sp-1) 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.msg--me code {
  font-size: .92em;
  background: var(--tint);
  border-radius: 4px;
  padding: 1px 5px;
  overflow-wrap: break-word;
}

/* --- bong bong AI: KHONG khung ---
   Chi chu tren nen. Khung chi danh cho khoi ket qua co nut (.rpanel). Boc moi
   cau tra loi trong mot the co vien la cach nhanh nhat de mot cuoc hoi thoai
   trong nhu mot bang dieu khien. */
.msg--ai { position: relative; padding-left: var(--sp-4); }
.msg--ai .say {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.72;
  max-width: var(--measure);
  overflow-wrap: break-word;
}
.msg--ai .say b { color: var(--ink); font-weight: 600; }
/* Cau bao loi trong bong bong AI. Khong dung khung do to: loi o day thuong di KEM
   mot ket qua mot phan van con dung duoc, nen no la ghi chu chu khong phai bao dong. */
.msg--ai .say.bad { color: var(--err); }
.msg--ai .say + .say { margin-top: var(--sp-3); }

/* Nut "Thử lại" duoi cau bao loi. Khong dung `.rpanel__foot` (vach tren + nen
   cua khoi ket qua) vi o day khong co khoi nao de lam chan. */
.msg--ai .retry { margin-top: var(--sp-3); }

/* Vach trai: tinh khi da xong, CHAY khi dang stream.
   `.tpanel` cua ban `/` da dung vach CTA 3px cho khoi ket qua — day la cung mot
   quy uoc, chi them chuyen dong de bao "con dang viet". Khong spinner: mot vong
   xoay canh mot dong chu dang chay la hai thu noi cung mot dieu. */
.msg--ai::before {
  content: "";
  position: absolute;
  left: 0; top: .34em; bottom: .34em;
  width: 3px;
  border-radius: 2px;
  background: var(--line);
}
.msg--ai.is-live::before {
  background: linear-gradient(
    180deg,
    var(--cta) 0%, var(--cta-hover) 22%, var(--cta-tint) 50%,
    var(--cta-hover) 78%, var(--cta) 100%
  );
  background-size: 100% 280%;
  animation: rail 1.4s linear infinite;
}
@keyframes rail { to { background-position: 0 -280%; } }

/* Con tro nhay — CHI cho `.say` (cac cau trang thai ngan).
 *
 * KHONG dat cho `.rpanel__body`. Con tro la an du cua may danh chu, ma khoi ket qua
 * khong con nha tung ky tu nua: no hien theo cum tu, mem dan vao (xem `.rpanel__body`
 * ben duoi). Hai tin hieu do noi hai chuyen khac nhau — de ca hai thi cai nay phu
 * dinh cai kia. */
.msg--ai.is-live .say::after {
  content: "";
  display: inline-block;
  width: .5em; height: 1.05em;
  margin-left: 2px;
  vertical-align: -.18em;
  background: var(--cta);
  opacity: .8;
  animation: caret .9s steps(2, start) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* Chu MOI HIEN mem dan vao thay vi bat ra.
 *
 * Lam bang mat-na chu khong bang animation tren tung tu: `renderStructured` ghi de
 * `innerHTML` MOI KHUNG HINH, nen moi phan tu ben trong deu bi tao lai — mot
 * animation dat o do se khoi dong lai lien tuc va chop giat. Mat-na nam tren khoi
 * CHA (khong bi ghi de) nen no dung yen, con chu thi troi qua no.
 *
 * Ket qua: chu moi hien ra mo o mep duoi roi dam dan khi bi doan sau day len. Dung
 * cai cam giac cac chatbot hien nay dang lam.
 *
 * `is-live` tat di khi stream xong, nen ban da hoan chinh khong bao gio bi mo mat
 * chu o cuoi — day la ly do mat-na gan vao trang thai chay chu khong gan co dinh. */
.msg--ai.is-live .rpanel__body {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 2.6em), transparent);
}

/* --- dong trang thai nho (dang lay phu de…) --- */
.step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 14px;
  color: var(--muted);
}
.step .dot {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--cta);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.step.done { color: var(--ok); }
.step.done .dot { background: var(--ok); animation: none; }

/* --- khoi ket qua co nut --- */
.rpanel {
  margin-top: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.rpanel__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;
}
.rpanel__ttl { font-weight: 700; color: var(--ink); letter-spacing: .012em; }
.rpanel__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
/* HIEN DAY DU, khong kep, khong nut mo rong.
 *
 * Ban `/` kep transcript o 20em vi no la mot trang doc doc theo chieu dai — khoi
 * chu 8000 tu se day moi thu khac ra khoi tam mat. O day khung chat da co san
 * mot vung cuon rieng, va nguoi dung vao day CHINH LA de doc ket qua. Kep roi bat
 * bam mo la them mot buoc cho dung thu ho can. */
.rpanel__body {
  padding: var(--sp-4) var(--sp-5);
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.72;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}
.rpanel__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);
}

/* Markdown da dinh dang trong khoi ket qua.
 *
 * Ten class den tu `core-*/markdown-render.js` — module dung chung voi ban `/`,
 * nen `.shead` / `.h2` / `<i>` / `<code>` / `.hint` la HOP DONG, khong phai lua
 * chon tu do cua file nay. Doi ten o day ma khong doi trong module la mat style.
 *
 * `white-space: normal` la bat buoc: khoi da co <p>/<ul> that, con `.rpanel__body`
 * mac dinh dat `pre-wrap` — de nguyen thi moi lan xuong dong bi tinh hai lan. */
.doc { white-space: normal; }
.doc .shead { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--ink); margin: 1.05em 0 .3em; }
.doc .shead.h2 { font-size: 17px; margin-top: 1.15em; }
.doc .shead:first-child { margin-top: 0; }
.doc p { margin: 0 0 .85em; max-width: var(--measure); }
.doc ul { margin: .35em 0 .95em; padding-left: 1.15em; list-style: none; max-width: var(--measure); }
.doc li { position: relative; margin-bottom: .4em; }
.doc li::before {
  content: "";
  position: absolute;
  left: -.95em; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cta);
  opacity: .55;
}
.doc i { font-style: italic; color: var(--muted); }
.doc b { color: var(--ink); font-weight: 600; }
/* Cung quy uoc voi `.msg--me code` o tren: khong dat font-family rieng — ca du an
   chua co token chu don cach, va them mot chuoi font moi o day la tao ra mot he
   thu hai chi ton tai o dung mot cho. */
.doc code {
  font-size: .92em;
  background: var(--tint);
  border-radius: 4px;
  padding: 1px 5px;
  overflow-wrap: break-word;
}
/* Goi y hinh anh — mot chi dan quay phim, khong phai loi thoai. Tach ra de nguoi
   doc luot qua duoc khi dang doc kich ban. */
.doc .hint { color: var(--muted); font-style: italic; }

/* ================================================================ o dinh day */

.dock {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
/* `relative` la neo cua `.menu` — menu bung LEN TREN o soan, khong phai xuong duoi
   (khong con cho: o soan da dinh o day man hinh). */
.dock__in { position: relative; max-width: 760px; margin: 0 auto; }

.dock__lock {
  margin: 0 0 var(--sp-2);
  font-size: 13px;
  color: var(--muted);
}

/* --- the giay chua ca o soan. Cung ngon ngu voi `.box` o man hinh trong. --- */
.cmp {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-2);
  transition: border-color .14s ease;
}
.cmp:focus-within { border-color: var(--line-strong); }

/* Hang van ban bo sung. `font-size: 16px` la BAT BUOC — nho hon la Safari iOS tu
   phong to trang khi o nhan focus, va nguoi dung phai tu thu nho lai. */
.cmp__txt { padding: var(--sp-2) var(--sp-3) 0; }
.cmp__txt input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: inherit;
  background: none;
  border: 0;
  padding: var(--sp-1) 0;
}
.cmp__txt input:focus { outline: none; }
.cmp__txt input::placeholder { color: #9d9992; }

.cmp__err {
  margin: var(--sp-2) var(--sp-3) 0;
  font-size: 14px;
  color: var(--err);
}
.cmp__err:empty { margin: 0; }

.cmp__row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Cuon NGANG chu khong xuong dong: hang nay phai giu chieu cao co dinh de mui
     ten gui khong nhay len xuong khi so o chon thay doi. */
  min-width: 0;
}

/* Nut `+`. Vien chim, chi dam len khi ro tay — no la loi moi, khong phai hanh dong
   chinh; mui ten gui moi duoc giu mau. */
.cmp__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, transform .18s ease;
}
.cmp__add .i { width: 1.3em; height: 1.3em; }
.cmp__add:hover { background: var(--tint); border-color: var(--line-strong); }
.cmp__add:focus-visible { outline-offset: 3px; box-shadow: var(--focus-ring); }
.cmp__add[aria-expanded="true"] {
  background: var(--tint);
  border-color: var(--line-strong);
  transform: rotate(45deg);      /* `+` thanh `x`: mot hinh, hai trang thai */
}

/* Tinh nang dang chon. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  height: 40px;
  padding: 0 var(--sp-1) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--cta-tint);
  border: 1px solid rgba(212, 69, 31, .28);
  color: var(--cta);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.chip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: .7;
}
.chip__x .i { width: 1em; height: 1em; }
.chip__x:hover { opacity: 1; background: rgba(212, 69, 31, .12); }
.chip__x:focus-visible { outline-offset: 2px; box-shadow: var(--focus-ring); }

/* --- o chon tu dung --- */
/* KHONG dat `overflow` o day: hop xo xuong bung LEN TREN va se bi cat cut ngay.
   Het cho thi xuong dong. */
.opts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}

.dd { position: relative; flex: none; }

.dd__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 17ch;
  height: 36px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  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;
  line-height: 1;
  cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease;
}
/* Gia tri dai bi cat gon thay vi keo dai hang. Ban day du van doc duoc khi mo hop,
   va `title` do JS gan cho nguoi ro chuot. */
.dd__val {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dd__chev {
  flex: none;
  width: 1.05em; height: 1.05em;
  color: var(--muted);
  transition: transform .16s ease;
}
.dd__btn:hover { background: var(--tint); border-color: var(--line-strong); }
/* Chi dung `outline` toan cuc lam vong focus. Chong them `box-shadow` nua se ra
   hai vong xanh long nhau — day la thu tao nen mang vien day cop o anh chup. */
.dd__btn[aria-expanded="true"] {
  background: var(--tint);
  border-color: var(--line-strong);
}
.dd__btn[aria-expanded="true"] .dd__chev { transform: rotate(180deg); }
.dd[data-locked] .dd__btn { opacity: .45; pointer-events: none; }

.dd__pop {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + var(--sp-2));
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(320px, 78vw);
  padding: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.dd__it {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 38px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.dd__it:hover { background: var(--tint); }
.dd__it:focus-visible { outline-offset: -2px; }
/* Muc dang chon to mau --ink chu khong phai --cta: day la THIET LAP. Mau CTA trong
   o soan danh rieng cho mui ten gui — xem ghi chu dau file. */
.dd__it[aria-selected="true"] { background: var(--tint); font-weight: 700; }
.dd__it[aria-selected="true"]::after {
  content: "";
  margin-left: auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink);
}

/* Mui ten gui. Mau dac duy nhat trong o soan — mot dich den cho mat. */
.cmp__go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px; height: 40px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cta);
  color: var(--on-cta);
  box-shadow: var(--sh-cta);
  cursor: pointer;
  transition: background-color .14s ease, transform .06s ease;
}
.cmp__go .i { width: 1.25em; height: 1.25em; stroke-width: 2.1; }
.cmp__go:hover { background: var(--cta-hover); }
.cmp__go:active { transform: translateY(1px); }
.cmp__go:focus-visible { outline-offset: 3px; box-shadow: var(--focus-ring); }
.cmp__go[disabled] {
  background: var(--line-strong);
  box-shadow: none;
  cursor: not-allowed;
}

/* --- menu tinh nang --- */
.menu {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + var(--sp-2));
  left: 0;
  min-width: 248px;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
}
.menu__it {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 44px;
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.menu__t { flex: 1 1 auto; }
.menu__it .i { color: var(--muted); }
.menu__it:hover { background: var(--tint); }
.menu__it:focus-visible { outline-offset: -2px; box-shadow: var(--focus-ring); }
.menu__it[aria-checked="true"] { color: var(--cta); font-weight: 600; }
.menu__it[aria-checked="true"] .i { color: var(--cta); }
/* Dau tich luon chiem cho, chi an di khi chua chon — nhan chu khong xe dich khi
   nguoi dung chuyen lua chon giua cac dong. */
.menu__ck { visibility: hidden; }
.menu__it[aria-checked="true"] .menu__ck { visibility: visible; }
.menu__it[disabled] { opacity: .42; cursor: not-allowed; }
.menu__it[disabled]:hover { background: none; }

@media (prefers-reduced-motion: reduce) {
  .cmp__add { transition: background-color .14s ease, border-color .14s ease; }
  .cmp__add[aria-expanded="true"] { transform: none; }
}

/* Man hinh hep: o chon xuong mot hang rieng ben duoi, de `+` / chip / mui ten van
   nam tron mot hang bam duoc. */
@media (max-width: 560px) {
  .cmp__row { flex-wrap: wrap; }
  .cmp__row .grow { order: 1; }
  .cmp__go { order: 2; }
  .opts { order: 3; width: 100%; padding-top: var(--sp-2); }
}

/* ================================================================== hop hoi */

.ask {
  border: 0;
  padding: 0;
  width: min(420px, calc(100vw - 32px));
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-2);
}
.ask::backdrop { background: rgba(25, 24, 23, .55); }
.ask__in { padding: var(--sp-5); }
.ask h2 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 var(--sp-2); }
.ask p { margin: 0 0 var(--sp-5); color: var(--muted); font-size: 15px; }
.ask p b { color: var(--ink); font-weight: 600; }
.ask__row { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.danger:hover { background: #9d3327; border-color: #9d3327; }

/* ================================================================ man hinh hep */

.scrim { display: none; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }

  .side {
    position: fixed;
    z-index: 40;
    inset: 0 auto 0 0;
    width: 280px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.22, .7, .28, 1);
    box-shadow: var(--sh-2);
  }
  body[data-nav="open"] .side { transform: none; }

  .scrim {
    display: block;
    position: fixed;
    z-index: 30;
    inset: 0;
    background: rgba(25, 24, 23, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  body[data-nav="open"] .scrim { opacity: 1; pointer-events: auto; }

  .bar__burger { display: inline-grid; }
  .thread { padding: var(--sp-5) var(--sp-3) var(--sp-6); }
  .hero { padding: var(--sp-5) var(--sp-3) var(--sp-7); }
  .dock { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .msg--me .bub { max-width: 92%; }
}

@media (max-width: 420px) {
  /* Menu bam mep trai cua o soan tren may hep — de rong tu chay theo, dung de no
     tran ra ngoai man hinh. */
  .menu { min-width: 0; right: 0; }
  .chip { font-size: 13px; padding-left: var(--sp-2); }
  .dd__btn { max-width: 12ch; }
}

/* =========================================================== giam chuyen dong */

@media (prefers-reduced-motion: reduce) {
  /* `.scroll` khong con dong nao de tat — no da cuon tuc thi cho MOI nguoi. */
  .btn, .thr, .thr__x, .side__new, .box, .side,
  .cmp, .cmp__add, .cmp__go, .dd__btn, .dd__chev { transition: none; }
  .dd__btn[aria-expanded="true"] .dd__chev { transform: none; }
  .msg.in { animation: none; }
  /* Giu MAU cua vach — no van noi "day la khoi dang chay" — chi bo chuyen dong. */
  .msg--ai.is-live::before { animation: none; background: var(--cta); }
  /* Giam chuyen dong: `giamChuyenDong()` trong chat.js da tat han viec nha chu dan,
     nen con tro khong con viec gi — an di thay vi de no dung im. Mat-na cung bo
     luon: khong con chu nao "moi hien" de lam mem. */
  .msg--ai.is-live .say::after { content: none; }
  .msg--ai.is-live .rpanel__body {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .step .dot { animation: none; }
}