/* ============================================================
   Web khach — CSS thuan, khong framework.
   Dung lai bo token mau cua dashboard (dashboard/styles.css) de hai man hinh
   trong nhu mot he, nhung bo cuc thi DIEN THOAI TRUOC: khach mo bang dien thoai
   trong nhom Zalo, gan nhu khong ai mo bang may tinh.
   ============================================================ */

/* PHAI dung dau tep va PHAI co !important.
   `[hidden] { display: none }` chi nam trong stylesheet mac dinh cua trinh duyet, ma CSS
   cua trang thi LUON thang stylesheet do. Nen bat cu quy tac display nao cua minh
   (.auth-screen { display: grid }, .view { display: block }...) cung de bep thuoc tinh
   hidden — phan tu da an van hien nguyen, che kin thu dang chay ben duoi. */
[hidden] { display: none !important; }

:root {
  --paper: #EFF2F6;
  --surface: #FFFFFF;
  --surface-alt: #E7ECF3;
  --ink: #141B26;
  --ink-soft: #4E5A6E;
  --ink-faint: #7A879B;
  --line: #CBD3DF;
  --line-soft: #DFE4EC;
  --accent: #2A46C8;
  --accent-ink: #FFFFFF;
  --accent-soft: #E5E9FB;

  --ok-ink: #0F5C3B;
  --ok-bg: #DDF0E6;
  --warn-ink: #7A5200;
  --warn-bg: #F8EDD7;
  --danger-ink: #96261C;
  --danger-bg: #F9E2DF;

  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 27, 38, 0.06), 0 4px 14px rgba(20, 27, 38, 0.05);
  /* Chieu cao thanh tab duoi + vung an toan cua iPhone. Dung lam padding day trang de
     noi dung cuoi cung khong bi thanh tab che mat. */
  --tabbar: 62px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0C1118;
    --surface: #141B25;
    --surface-alt: #1C2532;
    --ink: #E7ECF4;
    --ink-soft: #A9B5C7;
    --ink-faint: #7C8AA0;
    --line: #2A3545;
    --line-soft: #212B39;
    --accent: #93A8FF;
    --accent-ink: #0C1118;
    --accent-soft: #1B2440;

    --ok-ink: #6FCFA1;
    --ok-bg: #16311F;
    --warn-ink: #E8C170;
    --warn-bg: #33280F;
    --danger-ink: #F09A90;
    --danger-bg: #3A1C18;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;          /* 16px chan iOS Safari tu phong to trang khi khach cham o nhap */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { margin: 0; font-weight: 650; }
p { margin: 0; }

/* ---------- nut & o nhap ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* min-height 44px: nguong vung cham toi thieu — nut nho hon thi ngon cai bam truot. */
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost { background: transparent; }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.field input,
.field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.field input:focus,
.field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.hint { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-faint); }

.form-error {
  margin-bottom: 12px;
  padding: 9px 11px;
  border-radius: var(--radius);
  background: var(--danger-bg);
  color: var(--danger-ink);
  font-size: 14px;
}

/* ---------- man hinh dang nhap ---------- */

.auth-screen {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 24px 16px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 24px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* ---------- nhan hieu ---------- */

/* Khoi logo: hinh va chu di voi nhau nhu MOT cum, khong phai hai thu canh nhau.
   Truoc day la mot <span> emoji roi mot dau cach roi chu — dau cach thi rong hep tuy font,
   con emoji thi khong bao gio nam dung duong chan cua chu, nen cum nay luon lech nhe.
   flex + align-items:center dat hai thu theo dung tam, gap cho khoang cach co dinh. */
.brand-big,
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  /* Chu Viet nhieu dau, siet chu qua thi dau cham vao nhau — -.02em la vua. */
  letter-spacing: -.02em;
}
.brand-big { font-size: 27px; }

/* flex:0 0 auto — khong co no thi tren man hinh hep flex bop det qua dao de nhuong cho chu. */
.brand-mark { flex: 0 0 auto; }
.brand-big .brand-mark { width: 31px; height: 31px; }
.brand .brand-mark { width: 23px; height: 23px; }

/* Kho hinh o dau <body>: chi de <use> tro toi, khong bao gio hien.
   Giau bang kich thuoc 0 chu KHONG dung display:none — vai engine bo qua luon phan <defs>
   trong mot cay da bi display:none, va luc do qua dao mat mau nen (fill='url(#daoThit)'
   khong tim thay gradient) thanh ra mot mang den. Cach nay an toan o moi trinh duyet. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.auth-sub { margin: 7px 0 20px; color: var(--ink-faint); font-size: 13px; }

/* Khung giai thich viec dang lam (hien khi khach den tu ve lien ket cua bot). Dung mau
   accent chu khong phai mau canh bao: day la viec binh thuong, khong phai loi. */
.notice {
  margin-bottom: 18px;
  padding: 12px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-size: 14px;
}
/* CHI dong tieu de moi xuong dong rieng. Truoc day la `.notice strong` tran, nen mot chu
   in dam GIUA cau cung bi tach thanh dong rieng, cau van vo lam ba khuc. */
.notice > strong:first-child { display: block; margin-bottom: 4px; }
.notice p { color: var(--ink-soft); }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.seg-btn {
  padding: 9px 8px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.seg-btn.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- khung ung dung ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.brand { font-size: 18px; }  /* con lai lay chung o khoi .brand-big/.brand tren kia */

.main {
  max-width: 560px;
  margin: 0 auto;
  /* Chua chieu cao thanh tab + vung an toan iPhone, khong thi dong cuoi cung bi che. */
  padding: 18px 16px calc(var(--tabbar) + env(safe-area-inset-bottom) + 20px);
}

.view-title { font-size: 20px; margin-bottom: 6px; }
.view-note { margin-bottom: 16px; color: var(--ink-soft); font-size: 14px; }

/* ---------- tab Tao link ---------- */

.tao-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.tao-head .view-title { margin-bottom: 2px; }
.tao-head .view-note { margin-bottom: 0; }
/* Kich thuoc co dinh + flex-shrink: 0 — khong co no thi qua dao bi bop det tren man hinh
   hep, vi flex uu tien cho khoi chu ben canh. */
.logo-dao { width: 44px; height: 44px; flex: 0 0 44px; }

.card-tao {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.field-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* O dan link + nut dan clipboard nam canh nhau. align-items: stretch de nut cao bang o
   nhap, khong lo lung o giua. */
.input-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.input-row textarea {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: vertical;
}
.input-row textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* Cao co dinh 46px, KHONG de flex keo cao bang o nhap: o nhap la textarea 3 dong nen nut
   se thanh mot thanh doc cao ngoang. */
.btn-dan {
  flex: 0 0 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.btn-dan:active { background: var(--accent-soft); }

.btn-cta { font-size: 16px; min-height: 46px; }

/* ---------- huong dan ---------- */

.guide { margin-top: 20px; }
.guide-title { margin-bottom: 10px; font-size: 16px; }

.steps {
  margin: 0 0 14px;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}
.steps li { margin-bottom: 6px; }
.steps strong { color: var(--ink); }

.notes {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.55;
}
.notes-title { margin-bottom: 5px; font-weight: 700; }
.notes-lead { margin-bottom: 8px; }
.notes ul { margin: 0; padding-left: 18px; }
.notes li { margin-bottom: 5px; }
.notes li:last-child { margin-bottom: 0; }

/* Hai khoi noi hai chuyen khac han nhau nen phai nhin ra ngay la khac: mot cai tran an
   (don ve dung ten roi), mot cai canh bao (may viec lam mat tien). Cung mau thi khach
   doc luot se tuong la mot cuc chu dai. */
.notes-info { background: var(--accent-soft); color: var(--ink); }
/* Danh so cua <ol> nam NGOAI le chu, nen trong khung phai chua le trai cho no, khong thi
   so bi khung cat mat mot nua. */
.notes .steps { margin-bottom: 0; padding-left: 22px; color: inherit; }
.notes-ok { background: var(--ok-bg); color: var(--ok-ink); }
.notes-warn { background: var(--warn-bg); color: var(--warn-ink); }
.notes-ok strong, .notes-warn strong { color: inherit; }

/* ---------- ket qua tao link ---------- */

.result {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.result-label { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.result-url {
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 14px;
  /* Link khong co dau cach nen se tran ngang man hinh dien thoai neu khong cho ngat giua chu. */
  overflow-wrap: anywhere;
}
.row-btn { display: flex; gap: 8px; }
.row-btn .btn { flex: 1; }

/* ---------- don hang ---------- */

/* ---------- dau man Don hang ---------- */

.don-head { margin-bottom: 16px; }
.don-head-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.don-head-top .view-title { margin-bottom: 0; }

/* So don: mot con so nho canh tieu de, khong tron vao cau chu. */
.dem-chip {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Dai cong thuc: Hoa hong san -> tru thue -> con lai cua ban.
   Ba o dat NGANG NHAU va dung thu tu voi ba dong tien trong tung the don ben duoi, de
   khach nhin mot lan la hieu bang so o duoi tu dau ma ra. */
.cong-thuc {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  list-style: none;
  overflow: hidden;
}
.cong-thuc li {
  position: relative;
  padding: 10px 12px;
  text-align: center;
}
.cong-thuc li + li { border-left: 1px solid var(--line-soft); }
/* Mui ten giua cac o, ve bang hai canh cua mot o vuong xoay 45 do — khong dung ky tu '→'
   vi no doi hinh theo font tung may, co may ra o vuong rong. Dat de len duong ke doc nen
   khong ton them chieu ngang. */
.cong-thuc li + li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--line);
  border-right: 1.5px solid var(--line);
  background: var(--surface);
  transform: translateY(-50%) rotate(45deg);
}

/* KHONG viet hoa toan bo. Tieng Viet co dau nam TREN dinh chu, viet hoa het thi dau
   dung sat mep dong — hoac bi cat, hoac phai noi line-height ra cho no chen vao, va
   ca cum nhin chat cung. Chu thuong co than chu cao thap khac nhau nen mat nhan dang
   tu nhanh hon. Doi lai bang co chu nho + mau nhat de van thay ro day la nhan phu. */
.ct-nhan {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-faint);
  font-size: 12.5px;
}
.ct-so {
  display: block;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.ct-so.is-tru { color: var(--danger-ink); }
/* O cuoi la phan cua khach — mau accent tren nen nhat, giong het dong "Ban duoc hoan"
   trong tung the don. Hai cho cung mot y thi phai cung mot mau. */
.cong-thuc .is-cuoi { background: var(--accent-soft); }
.cong-thuc .is-cuoi .ct-so { color: var(--accent); }

/* Man hinh hep: ba o canh nhau thi chu bi bop nat. Xep doc, bo mui ten. */
@media (max-width: 380px) {
  .cong-thuc { grid-template-columns: 1fr; }
  .cong-thuc li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    text-align: left;
  }
  .cong-thuc li + li { border-left: 0; border-top: 1px solid var(--line-soft); }
  .cong-thuc li + li::before { display: none; }
  .ct-nhan { margin-bottom: 0; }
}

/* ---------- the don hang ----------
   Bo cuc mot the: dau (ma don + trang thai) / mon da mua / tien / chan.
   Cac khoi ngan nhau bang mot duong ke mo chu khong bang khoang trang: ba khoi nay la ba
   loai thong tin khac han nhau, de troi thi doc thanh mot cuc chu lien tuc. */
.order {
  margin-bottom: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px 11px;
}
/* Ma don o font mono: day ky tu nay khach phai doc chinh xac tung ky tu de doi chieu voi
   don ben Shopee, ma font thuong thi '0'/'O' va '1'/'l' nhin gan nhu nhau. */
.order-code {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.01em;
  word-break: break-all;
}
.order-date { margin-top: 3px; font-size: 12.5px; color: var(--ink-faint); }
.order-head .chip { flex: none; margin-top: 2px; }
.muted { color: var(--ink-soft); }

/* Mon da mua.
   TRUOC DAY khoi nay to nen mau --paper (mau nen trang). Mau do gan het voi nen phia sau
   the, nen nhin ra nhu the co mot khe ho cat doi the — mot the bi xe lam hai. Bo mau di,
   ca the con dung MOT mat phang trang, cac khoi ngan nhau bang duong ke manh. */
.order-items {
  padding: 11px 15px;
  border-top: 1px solid var(--line-soft);
  list-style: none;
  font-size: 14px;
}
.order-items li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}
.order-items li + li { margin-top: 2px; }
.item-name { line-height: 1.4; }
/* So luong: khong bao gio bi co lai du ten mon dai bao nhieu (flex:none), va bam sat le
   phai de mat luot doc doc mot cot so thang hang. */
.item-qty {
  flex: none;
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--surface-alt);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.order-items.is-empty { color: var(--ink-faint); font-size: 13px; }

.chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-alt);
  color: var(--ink-soft);
}
/* Hoa chu dau. Backend giu chu thuong vi bot Telegram in no GIUA cau ("Trang thai don:
   da hoan thanh"), con o day no dung mot minh nhu mot cai nhan nen phai hoa.
   ::first-letter chu KHONG phai text-transform:capitalize — cai kia hoa moi tu, ra
   "Đã Hoàn Thành". */
.chip::first-letter { text-transform: uppercase; }

.chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.danger { background: var(--danger-bg); color: var(--danger-ink); }

.order-money {
  padding: 11px 15px 13px;
  border-top: 1px solid var(--line-soft);
}
.money-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 14px;
  color: var(--ink-soft);
}
/* tabular-nums: cac chu so rong bang nhau, nen cot tien thang hang doc thay vi so le
   nhau tung dong — day la khac biet lon nhat giua mot bang so nhin "sach" va nhin "roi".
   Chu dam hon nhan ben trai mot bac: mat quet doc cot so, nhan chi doc khi can biet do
   la so gi. Hai ben cung mot mau thi phai doc ca hai moi tach duoc chung ra. */
.money-val {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Rieng dong thue de nhat: no la khoan bi tru, khong phai con so khach di tim. */
.money-row.is-minus .money-val { color: var(--ink-soft); }

/* Dong cuoi: so tien khach thuc nhan. Tach han ra bang mot duong ke DAM hon cac duong
   khac, to hon, va lay mau accent — trong ca the nay no la con so duy nhat khach thuc su
   di tim, moi thu ben tren chi la giai thich no o dau ra. */
.money-row.is-total {
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}
.money-row.is-total .money-val { color: var(--accent); font-size: 17px; font-weight: 700; }

.order-cancel {
  padding: 12px 15px;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  color: var(--danger-ink);
}


.empty {
  padding: 28px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-faint);
  text-align: center;
  font-size: 14px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}
.pager-at { font-size: 13px; color: var(--ink-soft); }

/* ---------- vi tien ---------- */

/* ---------- vi tien: ba trang thai ----------
   O CHINH to han han hai o kia, khong phai to hon mot chut. Khach mo tab nay len de tra
   loi dung mot cau — "gio minh rut duoc bao nhieu" — nen con so do phai doc duoc tu xa,
   con hai o kia la tra cuu, doc khi can. Sau o bang nhau nhu ban cu thi khong o nao noi
   bat va mat phai quet het moi tim ra cai minh muon. */

.vi-chinh {
  padding: 20px 18px;
  border: 1px solid var(--accent);
  border-radius: 14px;
  background: var(--accent-soft);
}
/* Chu thuong, khong viet hoa toan bo — cung ly do o .ct-nhan. */
.vi-nhan {
  display: block;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}
.vi-so {
  display: block;
  margin: 5px 0 6px;
  color: var(--accent);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.025em;
  /* tabular-nums: con so doi gia tri khi tai lai ma khong lam ca dong nhay sang trai phai. */
  font-variant-numeric: tabular-nums;
}
.vi-phu { display: block; color: var(--ink-faint); font-size: 12.5px; line-height: 1.45; }

.vi-phu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.vi-o {
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
}
.vi-so-nho {
  display: block;
  margin: 4px 0 5px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}

/* Dong nhac ve tien chua rut duoc. Co y KHONG lam thanh o thu tu: no khong phai mot
   trang thai de theo doi, chi la loi giai thich vi sao tong o tab Don hang lon hon. */
.vi-cho {
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}
.vi-cho .link-btn { font-size: inherit; }

/* Man hinh hep: hai o phu xep doc cho du cho dong giai thich. */
@media (max-width: 380px) {
  .vi-phu-grid { grid-template-columns: 1fr; }
}

.panel {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
}
.panel-title { font-size: 16px; margin-bottom: 4px; }
.panel-note { margin-bottom: 14px; font-size: 13px; color: var(--ink-soft); }

/* ---------- thanh tab duoi ---------- */

/* ---------- nhom bao deal ---------- */

.nhom { margin-top: 18px; }
/* Cau nay dai hai ba dong tren dien thoai — de canh giua thi moi dong mot do dai khac nhau,
   doc met. Canh trai nhu phan huong dan o tren. */
.nhom-hoi { margin: 14px 0 8px; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

/* ---------- tab Tai khoan ---------- */

.acc-card {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.acc-name { font-size: 17px; font-weight: 700; }
.acc-sub { margin-top: 2px; color: var(--ink-soft); font-size: 14px; }

/* Nut thoat: mau canh bao chu KHONG phai mau chinh. Day la nut duy nhat tren app lam khach
   mat phien, de no giong nut hanh dong chinh la co nguoi bam nham. */
.btn-thoat {
  margin-top: 4px;
  border-color: var(--danger-bg);
  background: var(--danger-bg);
  color: var(--danger-ink);
}

.tabbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  /* Vung an toan cua iPhone: khong co dong nay thi thanh gach ngang cua he dieu hanh de
     len tab giua, khach bam khong an. */
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--tabbar);
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tab.is-on { color: var(--accent); }
.tab-ico { font-size: 19px; line-height: 1; }

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 14px);
  z-index: 20;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 14px;
  box-shadow: var(--shadow);
}
.toast.err { background: var(--danger-ink); color: #fff; }

/* Nut trong nhu mot duong link — dung cho "Quen mat khau?" va nut lam tiep nam trong
   khung bao loi. Phai la <button> chu khong phai <a>: no khong dan di dau ca, dung <a
   href="#"> thi trinh doc man hinh doc thanh "lien ket" va ban phim Enter nhay trang. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { opacity: .8; }

/* Hang chua "Quen mat khau?" — day sang phai, sat duoi o mat khau. */
.row-quen {
  display: flex;
  justify-content: flex-end;
  margin: -6px 0 12px;
  font-size: 14px;
}

/* Link chim trong khung huong dan (ten admin trong cau "quen mat khau"). .notice p dat
   mau chu nhat cho ca doan, nen khong lay lai mau o day thi cai link tan vao chu thuong
   va khach khong biet la bam duoc. Dam + gach chan de nhin phat ra ngay. */
.notice p a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
}
.notice p a:hover { opacity: .8; }