/* ==========================================================================
   Sigologin — Component layer
   Phu thuoc tokens.css. Khong ma mau truc tiep o day.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

/* Thanh điều hướng dính ở đỉnh, nên cuộn tới một mục phải chừa đúng chiều cao
   của nó — không thì tiêu đề mục nằm khuất bên dưới thanh. */
section[id] { scroll-margin-top: calc(var(--header-h) + var(--s-3)); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--s-3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* Tieu de mang DUNG CAP trong dan y, nhung giu CO CHU cua h4.
   Nhay cap tieu de (h2 -> h4) lam trinh doc man hinh bao co mot muc bi thieu,
   va bo may tim kiem doc dan y trang sai. Nhung ha thang xuong h3 thi chu to
   len mot bac va vo bo cuc. Nen tach: cap la ngu nghia, co chu la giao dien.

   Ngay 25/09/2026 ap cho ca site: trang chu dung `h3.h-nho` cho tieu de trong
   the va trong muc, con trang trong tai khoan (Dashboard, Billing, Members)
   dung `h2.h-nho` cho tieu de the - o do cap tren la h1 cua trang. */
.h-nho { font-size: var(--fs-lg); }
p  { margin: 0 0 var(--s-4); color: var(--text-dim); }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono  { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim   { color: var(--text-dim); }
.xs    { font-size: var(--fs-xs); }
.sm    { font-size: var(--fs-sm); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-5); }
.stack > * + * { margin-top: var(--s-4); }
.row { display: flex; gap: var(--s-3); align-items: center; }
.row.between { justify-content: space-between; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }

.grid { display: grid; gap: var(--s-5); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- Thuong hieu */

.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; letter-spacing: -0.02em; }
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: grid; place-items: center;
  color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 700;
  flex: none;
}
.brand-mark.lg { width: 40px; height: 40px; border-radius: 12px; font-size: var(--fs-lg); }

/* Chu ky ngang trong thanh dieu huong va chan trang.
   HAI ANH, HIEN MOT. Chu "Sigo" trong logo la navy dam (14,24,42) - tren nen
   toi cua site no gan nhu bien mat. Ban "nghich" doi rieng phan chu do sang
   mau sang, dau S giu nguyen.
   Bo dieu kien duoi day PHAI khop ba trang thai theme cua tokens.css: mac dinh
   toi, [data-theme=light], va he dieu hanh sang khi khach chua chon. */
.brand-logo { display: block; height: 30px; width: auto; }
.brand-logo-sang { display: none; }

:root[data-theme="light"] .brand-logo-toi { display: none; }
:root[data-theme="light"] .brand-logo-sang { display: block; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .brand-logo-toi { display: none; }
  :root:not([data-theme="dark"]) .brand-logo-sang { display: block; }
}

/* Dong goi duoc to noi trong bang doi goi.

   MOT VET MAU BEN TRAI cong mot nen rat nhat, khong phai mot khoi mau dam. Bang
   nay co ba dong; to dam mot dong thi hai dong kia trong nhu bi tat, ma chung
   van la lua chon that. */
tr.noi-bat > td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
tr.noi-bat > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ------------------------------------------------------------ Trang tai ve */

.tai-dau-trang { text-align: center; margin: 0 0 var(--s-6, 32px); }
.tai-dau-trang h1 {
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -0.03em;
  margin: 0 0 var(--s-3);
}
.tai-dau-trang .lede { margin: 0 auto; max-width: 56ch; }

/* Hang the nen tang. Tu xuong mot cot o man hinh hep thay vi ep hai the chat
   lai - mot the tai ve bi bop con hai tram pixel thi cai nut khong con la thu
   dap vao mat nua. */
.tai-o {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-5);
  /* BA THE PHAI NAM CUNG MOT HANG, VA PHAI DU RONG DE DOC.

     Truoc day khoi nay nam trong `.van-ban.tai-ve` chot o 64ch, nen be rong
     toi thieu moi the phai ha xuong 175px thi ba the moi du cho mot hang. Ket
     qua la moi the ~255px: ghi chu macOS xuong muoi dong, va the Windows thua
     mot mang trong bang nua chieu cao vi luoi keo moi the cao bang the cao
     nhat.

     Da dua khoi nay ra ngoai cot chu (xem `Download.razor`), nen 260px la du:
     3 x 260 + hai khe 24 = 828px, nam gon trong 1040. */
  max-width: 1040px;
  margin: 0 auto var(--s-7);
}

.tai-the {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
.tai-the h2 { margin: var(--s-3) 0 2px; font-size: var(--fs-xl); }
.tai-the svg { width: 40px; height: 40px; color: var(--accent); }

/* So hieu ban phat hanh, mau nhan: no la thu khach liec vao de biet co ban moi
   hay khong. */
.tai-ban { color: var(--accent); font-weight: 600; margin-bottom: var(--s-4); }

/* CHO NHAN NUT XUONG DONG. `.btn` dat `white-space: nowrap`, hop ly o cho
   khac nhung khong hop o day: ba the phai chia nhau mot khung 606px nen moi
   the chi rong ~191px, trong khi nhan nut dai ngan tuy ngon ngu - "Hoi chung
   toi ban cai" va ban tieng Duc deu dai hon han tieng Anh. Khong cho xuong
   dong thi nut tran han ra ngoai vien the. */
.tai-the .btn.lg {
  padding: 12px 14px; font-size: var(--fs-md, 15px); border-radius: 999px;
  white-space: normal;
}

.tai-ghi-chu { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--muted); }
.tai-ghi-chu > div + div { margin-top: 2px; }

/* Nen tang chua co ban: nhat di, nhung KHONG an. Khach dung Mac can biet no
   dang tren duong toi chu khong phai khong bao gio co. */
.tai-chua-co { opacity: 0.75; }
.tai-chua-co .btn { pointer-events: none; }

/* The cua nen tang dang co ban. */
.tai-the.noi-bat { border-color: var(--accent); box-shadow: var(--glow); }

/* Khoi doi chieu ma bam duoi nut tai.

   GAP LAI MAC DINH: chuoi 64 ky tu mo ra san se dai hon ca cai the chua no, va
   no chi can thiet voi mot so it nguoi. Ai can thi bam mot cai. */
.tai-bam { margin-top: 10px; text-align: left; }
.tai-bam summary { cursor: pointer; text-align: center; }
.tai-bam code {
  display: block;
  margin: 6px 0;
  padding: 6px 8px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* Ma bam khong co dau cach nao, nen phai cho phep ngat giua chung - khong
     thi no day rong cai the ra va lam vo bo cuc ca hang the tai ve. */
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------- O tick quyen */

/* Ô tick kèm câu giải thích, dùng ở trang Đội.

   Ô tick nằm NGANG HÀNG với dòng nhãn chứ không canh giữa cả khối: khối có hai
   dòng, và canh giữa thì ô tick trôi xuống giữa nhãn và câu giải thích, trông
   như nó thuộc về câu giải thích. */
.o-quyen {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: 6px 0;
  cursor: pointer;
}
.o-quyen input { margin: 2px 0 0; flex: none; }
.o-quyen > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.o-quyen-nhan { font-size: var(--fs-sm); }
.o-quyen .hint { margin: 0; }

/* Quyền xoá. Nó là quyền duy nhất làm mất dữ liệu không lấy lại được, nên nó
   phải nhìn khác chứ không chỉ khác ở câu chữ - chủ lướt qua bốn ô giống hệt
   nhau thì tick nhầm là chuyện sẽ xảy ra. */
.o-quyen.canh .o-quyen-nhan { color: var(--warn, #f59e0b); }

/* Ô nhóm trong bảng: hẹp, nằm gọn dưới bốn ô tick. */
.o-nhom { width: 100%; max-width: 22ch; margin-top: var(--s-2); font-size: var(--fs-xs); }

/* ------------------------------------------------------------------- Nut bam */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  color: var(--text);
  font: inherit; font-size: var(--fs-sm); font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: var(--accent-ink); font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--err); color: var(--err); }
.btn.lg { padding: 13px 24px; font-size: var(--fs-base); border-radius: var(--r-lg); }
.btn.sm { padding: 5px 10px; font-size: var(--fs-xs); }
.btn.block { width: 100%; }

/* --------------------------------------------------------------------- Nhan */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: var(--fs-xs); font-weight: 500;
  white-space: nowrap;
}
.badge.ok   { border-color: var(--ok);   color: var(--ok);   background: var(--ok-bg); }
.badge.warn { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.badge.err  { border-color: var(--err);  color: var(--err);  background: var(--err-bg); }
.badge.info { border-color: var(--accent); color: var(--accent); background: var(--info-bg); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ----------------------------------------------------------------------- The */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.card.tight { padding: var(--s-4); }
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.card-head h2, .card-head h3, .card-head h4 { margin: 0; }

/* --------------------------------------------------------------- O so lieu */

.stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-4) var(--s-5); }
.stat .label { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat .value { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; margin: 2px 0; }
.stat .delta { font-size: var(--fs-xs); }
.stat .delta.up { color: var(--ok); }
.stat .delta.down { color: var(--err); }

/* --------------------------------------------------------------------- Bang */

table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; font-weight: 500; font-size: var(--fs-xs);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  position: sticky; top: 0; z-index: 1;
}
td { padding: 12px var(--s-4); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:hover td { background: var(--hover-tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; }

/* A table of two rows and five short values does not want the whole container.
   Left to fill it, the columns spread until "3" and "50" sit a hand's width
   apart and the eye cannot carry a row from its label to its number. `gon` caps
   it at about the width the content needs and centres it.

   Only on the short tables. The pricing page's own comparison runs to dozens of
   rows, and there the full width is earned.

   IT WRAPS THE TABLE AND WHATEVER READS WITH IT - the footnote under it, the
   "see pricing" link - not the table alone. Capping only the table centres it
   and leaves its caption behind at the container's left edge, half a screen
   away, looking like it belongs to something else. */
.gon { max-width: 880px; margin-inline: auto; }

/* ----------------------------------------------------------------- O nhap */

label.field { display: block; margin-bottom: var(--s-4); }
label.field > span { display: block; font-size: var(--fs-sm); margin-bottom: 6px; color: var(--text-dim); }
/* LIET KE TUNG `type` LA MOT CAI BAY - xem chu thich cung cho o trang quan tri.
   `<input>` khong khai `type` thi bo chon `input[type="text"]` khong khop, va o
   nhap do an vien mac dinh cua he dieu hanh giua mot bieu mau da duoc thiet ke.
   O nhap ma giam gia o trang dat mua chinh la mot o nhu vay. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit; font-size: var(--fs-sm);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Blazor đặt tiêu điểm vào <h1> sau mỗi lần điều hướng để trình đọc màn hình
   đọc lại tiêu đề trang — `FocusOnNavigate` trong Routes.razor. Nó gắn
   tabindex="-1" vào tiêu đề rồi gọi focus().

   Bấm F5 là một thao tác BÀN PHÍM, nên Chrome coi cú focus tiếp theo là do bàn
   phím và vẽ khung focus quanh tiêu đề: một hình chữ nhật đen bao cả khối chữ,
   ở lại cho tới khi khách chạm chuột. Nhìn như trang bị lỗi.

   Chỉ tắt cho phần tử `tabindex="-1"`, tức là những chỗ chỉ nhận tiêu điểm
   bằng mã và không bấm được. Nút và liên kết thật vẫn giữ nguyên khung focus,
   vì người dùng bàn phím cần thấy mình đang đứng ở đâu. */
[tabindex="-1"]:focus { outline: none; }

::placeholder { color: var(--muted); }
.hint { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }

/* ------------------------------------------------------------------- Canh bao */

.notice {
  display: flex; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--fs-sm);
}
.notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.notice.err  { border-color: var(--err);  background: var(--err-bg); }
.notice.info { border-color: var(--accent); background: var(--info-bg); }
.notice .ico { flex: none; font-size: var(--fs-lg); line-height: 1.2; }

/* ------------------------------------------------------------- Bo cuc app */

.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
.sidebar {
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  padding: var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav .section { font-size: var(--fs-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; padding: var(--s-3) var(--s-3) 5px; }
.nav a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px var(--s-3);
  border-radius: var(--r-sm);
  color: var(--text-dim); font-size: var(--fs-sm);
}
.nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--panel); color: var(--accent); font-weight: 500; }
.nav a .ico { width: 17px; text-align: center; flex: none; }
.nav a .count { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }

.main { min-width: 0; }
.topbar {
  height: var(--header-h);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 0 var(--s-5);
  position: sticky; top: 0; background: var(--bg); z-index: 10;
}
.content { padding: var(--s-5); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
.page-head h2 { margin: 0 0 4px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
}

/* --------------------------------------------------------------- Trang web */

.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
}
.site-header .container { display: flex; align-items: center; gap: var(--s-5); height: var(--header-h); }
/* `align-items: center` KHONG duoc bo. Mac dinh cua flex la `stretch`, va tu khi
   co vien thuoc Download - cao hon chu thuong vi no co padding - cac lien ket
   chu bi keo cao bang no roi chu nam sat mep tren, lech han so voi vien thuoc. */
.site-nav { display: flex; align-items: center; gap: var(--s-5); margin-left: var(--s-6); }
.site-nav a { color: var(--text-dim); font-size: var(--fs-sm); }
.site-nav a:hover { color: var(--text); text-decoration: none; }

/* Download is the only nav item that is an action rather than a destination, so
   it reads as a pill instead of plain text. Tinted, not filled: a solid button
   here would compete with "Start free" on the right, and two equally loud
   buttons in one header means neither is the obvious next step. */
.site-nav a.nav-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}
.site-nav a.nav-cta:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent);
}
/* ---------------------------------------------------------- Menu xo trong nav

   Grouped dropdowns, built on <details> exactly like the language picker: they
   open with Enter and Space, announce their own expanded state, and need no
   JavaScript. site.js only adds closing on an outside click and on Escape. */

/* Both stretch to the full height of the header so that `top: 100%` on the
   panel below means the bottom of the HEADER, not the bottom of the few pixels
   of text in the summary. Anchoring to the text put the panel's first 4px
   behind the header's own bottom border, and moved it again whenever the type
   got smaller at a narrower breakpoint. The links inside stay centred, because
   each of these keeps its own `align-items: center`. */
.site-nav { align-self: stretch; }
.nav-group { position: relative; align-self: stretch; display: flex; align-items: center; }
.nav-group > summary {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--text-dim); font-size: var(--fs-sm);
  cursor: pointer; user-select: none; white-space: nowrap;
  list-style: none;                 /* Firefox */
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:hover,
.nav-group[open] > summary { color: var(--text); }
.nav-group .mui-ten { width: 11px; height: 11px; flex: none; opacity: .6; }
.nav-group[open] .mui-ten { transform: rotate(180deg); }

.nav-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 232px; padding: 5px;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.nav-menu > a,
.nav-menu > .not-yet {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text-dim); font-size: var(--fs-sm); white-space: nowrap;
}
.nav-menu > a:hover { background: var(--panel-2); color: var(--text); text-decoration: none; }
/* A row with no page behind it is not hoverable and not clickable, so it must
   not offer a pointer either. */
.nav-menu > .not-yet { cursor: default; }

/* The bar now holds four items instead of six, so it no longer has to scroll
   sideways between 780px and 1250px - and it must not, because an `overflow-x`
   on the nav would trap every dropdown panel inside a 60px-tall scroller.

   `min-width: 0` stays. A flex item refuses by default to shrink below its own
   content, so without it the nav pushes Sign in and Start free off the right
   edge and the whole page gains a horizontal scrollbar. */
@media (max-width: 1250px) {
  .site-nav { gap: var(--s-4); margin-left: var(--s-4); min-width: 0; }
  .site-nav a,
  .nav-group > summary { font-size: var(--fs-xs); flex: none; white-space: nowrap; }
}
@media (max-width: 780px) { .site-nav { display: none; } }

/* ------------------------------------------------------- Menu cho dien thoai

   Below 780px the bar above is hidden. Until 28/09/2026 nothing replaced it:
   the phone header held the logo and two buttons, and every page but the home
   page was unreachable from it. This is that menu - one <details> holding the
   same tree as the bar, laid out as a full-width sheet because a panel hanging
   under its own button is unusable at 390px.

   `position: absolute` against `.site-header`, which is `position: sticky` and
   therefore already a containing block. Not `fixed`: the header also carries
   `backdrop-filter`, and a filter on an ancestor makes IT the containing block
   for fixed children, so `fixed` and `absolute` would land in the same place
   while reading as though they would not. */
.nav-phone { display: none; position: static; }
.nav-phone > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel); color: var(--text-dim);
  cursor: pointer; user-select: none; list-style: none;
}
.nav-phone > summary::-webkit-details-marker { display: none; }
.nav-phone > summary svg { width: 17px; height: 17px; }
.nav-phone > summary .dau-x { display: none; }
.nav-phone[open] > summary { color: var(--text); border-color: var(--line-soft); }
.nav-phone[open] > summary .thanh { display: none; }
.nav-phone[open] > summary .dau-x { display: block; }

.nav-phone-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-4);
  background: var(--panel); border-top: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.nav-phone-group { display: flex; flex-direction: column; }
.nav-phone-group + .nav-phone-group { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.nav-phone-group .nhan {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 4px;
}
.nav-phone-group a,
.nav-phone-group .not-yet {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; color: var(--text-dim); font-size: var(--fs-sm);
}
.nav-phone-group a:hover { color: var(--text); text-decoration: none; }
/* Prefixed with `.site-header` only to outrank the rule further down that
   shrinks every button in the header at phone width. This one is the phone
   call to action - it is the button that must NOT shrink. */
.site-header .nav-phone-panel > .btn {
  justify-content: center; padding: 10px 14px; font-size: var(--fs-sm);
}
@media (max-width: 780px) { .nav-phone { display: block; } }

/* The floating support dock is `position: fixed` at the same z-index as the
   sheet and comes later in the document, so it paints on top of it: measured at
   390px it covered a 42px strip over five menu rows and part of the Start free
   button, and a tap there opened Zalo instead of the link under the finger.
   The dock is a general sibling of the header, so it can be taken out of the
   way for exactly as long as the sheet is open. Browsers without `:has()` skip
   this rule and get the overlap, which is what they had before the menu
   existed. */
@media (max-width: 780px) {
  .site-header:has(.nav-phone[open]) ~ .dock { display: none; }
}

/* Phone header. Even with the nav gone, the logo, language, theme and two
   buttons did not fit in 390px - the page had a horizontal scrollbar on every
   phone, and the second button sat off the screen. "Sign in" and "Start free"
   both open /sign-in, so the quieter of the two is the one that goes.

   THE LOUD ONE GOES TOO, from 28/09/2026. "Start free" is 185px wide in French
   ("Commencer gratuitement") and there is no width at which that fits beside a
   logo, a language picker, a theme toggle and a menu button. Shortening the
   label would only move the problem to the next long language. The button is
   not lost: it is the last thing in the phone menu, full width, where it is
   easier to hit than a 6px-tall pill wedged into a 60px bar. */
@media (max-width: 560px) {
  .site-header .container { gap: var(--s-2); padding: 0 var(--s-4); }
  .site-header .btn.ghost,
  .site-header .row .btn.primary { display: none; }
  .site-header .btn { padding: 6px 11px; font-size: var(--fs-xs); }
  .site-header .chon-ngon-ngu > summary { padding: 0 6px; }
  .brand-logo { height: 24px; }
}
@media (max-width: 430px) {
  .site-header .container { gap: 6px; padding: 0 var(--s-3); }
  .site-header .row { gap: var(--s-2); }
  .brand-logo { height: 22px; }
}

.hero { padding: var(--s-9) 0 var(--s-8); text-align: center; position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -40% 20% auto; height: 460px;
  background: radial-gradient(ellipse at center, var(--hero-glow), transparent 68%);
  pointer-events: none;
}
.hero h1 { font-size: var(--fs-4xl); max-width: 17ch; margin: 0 auto var(--s-4); }
.hero .lede { font-size: var(--fs-lg); max-width: 56ch; margin: 0 auto var(--s-6); }
@media (max-width: 640px) { .hero h1 { font-size: var(--fs-3xl); } }

/* Hero hai cot: chu that ben trai, hinh san pham ben phai.
   Nguong 900px giong .orbit-section de ca trang gap o cung mot cho. */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--s-7); align-items: center; text-align: left;
}
.hero-grid h1, .hero-grid .lede { margin-left: 0; margin-right: 0; }
.hero-nut { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Dong cam ket duoi nut. `inline-flex` cho tung muc de icon va chu khong bao
   gio bi ngat dong o giua. */
.hero-cam-ket { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nen-tang { display: inline-flex; align-items: center; gap: 5px; }
.nen-tang svg { width: 13px; height: 13px; flex: none; opacity: .85; }
@media (max-width: 900px) { .hero-cam-ket { justify-content: center; } }

/* Anh la mot ban chup san pham co nen toi san. Bo goc va vien mo de no khong
   dinh cung nen sang cua giao dien sang. */
.hero-anh {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-xl); border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); text-align: center; }
  .hero-grid h1 { margin-left: auto; margin-right: auto; }
  .hero-grid .lede { margin-left: auto; margin-right: auto; }
  .hero-nut { justify-content: center; }
  /* Hinh xuong duoi chu: tren man hep thi loi moi va nut phai len truoc. */
  .hero-anh { order: 2; max-width: 560px; margin: 0 auto; }
}

/* Hero as the whole designed banner (14/09/2026). The art is light with its
   own soft background, so rounded corners and a faint border let it sit as a
   card on the dark theme as well. */
.hero-banner-section { padding: var(--s-6) 0 var(--s-8); }
.hero-banner {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-xl); border: 1px solid var(--line);
}
.hero-banner-section .hero-nut { justify-content: center; margin-top: var(--s-6); }

/* Present for search engines and screen readers, not drawn. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.section { padding: var(--s-8) 0; }
.section-head { max-width: 62ch; margin-bottom: var(--s-6); }
/* A feature page opens with the same block the home page used to open a section
   with, so its h1 takes the size that h2 had there. Level is semantics, size is
   layout - the same split as `.h-nho` above. */
.section-head h1 { font-size: var(--fs-2xl); }
.eyebrow {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-2);
}

.feature { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.feature .ico { font-size: var(--fs-xl); margin-bottom: var(--s-3); display: block; }
/* The icons are inline SVG, drawn by us, so they look the same on every
   operating system - emoji do not. The one exception is the Vietnamese flag on
   the support card, which is a content decision (see Home.razor), so .ico keeps
   its font-size for that branch. */
.feature .ico svg { width: 26px; height: 26px; display: block; color: var(--accent); }
.feature h2, .feature h3, .feature h4 { margin-bottom: var(--s-2); }
.feature p { margin: 0; font-size: var(--fs-sm); }

/* Home page card that leads to a feature page. `.feature` draws the box; this
   turns the whole box into the link, because a card with one small "read on"
   link in the corner is a card most people never click. */
.hub-card { display: flex; flex-direction: column; color: inherit; }
.hub-card:hover { border-color: var(--accent); text-decoration: none; }
.hub-card h3 { color: var(--text); }
.hub-card p { flex: 1; margin-bottom: var(--s-3); }
.hub-card .more { color: var(--accent); font-size: var(--fs-sm); font-weight: 500; }

/* The strip that closes every feature page. Splitting one page into seven only
   pays off if someone who arrives on one of them from search can reach the
   other six without going back to the home page first. */
/* A pillar page alternates plain and tinted bands so two thousand words do not
   arrive as one wall. `--bg-soft` and not a border, because a page with eight
   horizontal rules reads like a form. */
.section.alt { background: var(--bg-soft); }

/* Running prose, as opposed to the card grids the rest of the site is built
   from. The measure is the whole point: a line longer than about 70 characters
   loses the reader at the wrap, and the container is far wider than that. */
/* LAYOUT OF THE PILLAR PAGE.

   The first version put `.prose` on the SAME element as `.container`, so its
   72ch overrode the container's 1400px and `margin: 0 auto` centred the text -
   while the headings above it, sitting in a full-width container, started at the
   container's left edge. Two different left edges on one page, which is exactly
   what reads as unfinished.

   Now one grid governs every band: a text column of a fixed width, and a second
   column for a figure. The second column is sometimes empty, and the text column
   still begins at the same x. That is the whole point - the edge does not move
   when a figure is absent. */
.doc { display: grid; grid-template-columns: minmax(0, 68ch) minmax(0, 1fr);
       gap: var(--s-7); align-items: start; }
.doc > .hinh { margin: 0; }

/* One feature and its picture, as a pair.

   Centred against each other rather than both pinned to the top: the picture is
   a fixed block and the paragraph beside it runs two lines in English and four
   in German, so top-aligned the shorter one leaves a hole under it that moves
   from column to column as the language changes.

   Stacked pairs need the gap that a single `.doc` never did, because the h3 of
   the next feature now starts a new grid rather than continuing one. */
.doc.paired { align-items: center; }
.doc.paired + .doc.paired { margin-top: var(--s-8); }
.doc.paired > .prose > h3:first-child { margin-top: 0; }

.prose { max-width: 68ch; }
.prose h2 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.prose h3 { font-size: var(--fs-lg); margin: var(--s-6) 0 var(--s-3); }
.prose h2 + h3 { margin-top: var(--s-4); }
.prose p { margin-bottom: var(--s-4); }
.prose ul { margin: 0 0 var(--s-4) var(--s-5); }
.prose li { margin-bottom: var(--s-2); }

/* Two columns: what goes wrong, and what we do instead. Side by side on a wide
   screen, stacked on a phone - and stacked is why each column keeps its own
   heading rather than relying on left-versus-right to carry the meaning. */
.doi-chieu { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, 1fr); }
.doi-cot {
  padding: var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--panel);
}
.doi-cot h3 { margin-bottom: var(--s-4); }
.danh-sach { list-style: none; margin: 0; padding: 0; }
.danh-sach li {
  position: relative; padding-left: var(--s-5); margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
}
.danh-sach li::before { position: absolute; left: 0; font-weight: 700; }
/* Marks drawn as text, not emoji: an emoji renders differently on every
   operating system, and these two sit next to each other where that shows. */
.danh-sach.xau li::before { content: "\00d7"; color: var(--err); }
.danh-sach.tot li::before { content: "\2713"; color: var(--ok); }

@media (max-width: 780px) {
  .doi-chieu { grid-template-columns: 1fr; }
}

/* Figures on the pillar page (HinhAntidetect.razor).

   Everything draws with `currentColor` or a token, so dark mode needs no second
   copy of anything. The drawings are decorative in the sense that the prose says
   the same thing: each carries a <title> and <desc>, and a caption that repeats
   the point in words for anyone who cannot see the picture. */
.hinh { margin: var(--s-6) 0; }
.hinh-svg { width: 100%; height: auto; display: block; }
.hinh figcaption {
  margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--muted);
  max-width: 62ch;
}

.hinh-svg .lop rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.hinh-svg .lop.nhan rect { fill: var(--panel-2); stroke: var(--accent); }
.hinh-svg .lop text {
  fill: var(--text); font-size: 15px; text-anchor: middle;
  font-family: inherit;
}
/* The coloured bar on a layer's left edge, and the legend that reads it.

   A legend rather than labels in the margin: a margin is a fixed number of user
   units and a sentence is not, so the first version overflowed the drawing in
   every language, English included. The legend starts at the left edge and has
   the whole width, which no translation can outgrow. */
.hinh-svg .canh { stroke: none; }
.hinh-svg .canh.xau, .hinh-svg .chu-thich rect.xau { fill: var(--err); }
.hinh-svg .canh.tot, .hinh-svg .chu-thich rect.tot { fill: var(--ok); }
.hinh-svg .chu-thich text {
  font-size: 14px; font-weight: 600; font-family: inherit; fill: var(--text);
}

.hinh-svg .truc path { fill: none; stroke: var(--line); stroke-width: 1.5; }
.hinh-svg .truc text { fill: var(--muted); font-size: 13px; font-family: inherit; }
.hinh-svg .duong path { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.hinh-svg .duong circle.tot { fill: var(--ok); }
.hinh-svg .duong circle.xau { fill: var(--err); }
.hinh-svg .moc text {
  fill: var(--muted); font-size: 13px; text-anchor: middle; font-family: inherit;
}
/* Verdict word above each node in figure 3. Smaller than the 15px the old
   two-digit score used: these are words, and in German or Vietnamese they run
   three times as wide, so at 15px the label over one node reaches the next. */
/* ---------------------------------------------------------------------------
   MOCKUPS beside each feature on /profile-management.

   Built from `.mini` - the same card the hero uses - so the two pictures of the
   profile list on this page are pictures of one product. What follows is only
   the pieces `.mini` did not already have: a checkbox, a tag box, a group rail,
   a colour palette, a note field and a numbered badge. */

/* The figure column is the wider half of the grid, and a card stretched to fill
   it dwarfs the paragraph it belongs to. */
.mock-fig { max-width: 520px; margin-inline: auto; }

.mock-cb {
  width: 14px; height: 14px; flex: none; border-radius: 4px;
  border: 1.5px solid var(--muted); display: grid; place-items: center;
}
.mock-cb.on { background: var(--accent); border-color: var(--accent); }
.mock-cb.on::after {
  content: ""; width: 7px; height: 4px; margin-top: -2px;
  border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink);
  transform: rotate(-45deg);
}

/* A row the bulk action passes over. Faded, not struck through: the row is not
   wrong, it is busy. */
.mini-row.mo { opacity: 0.55; }

.mock-tagbox {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-top: var(--s-3); padding: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
}
.mock-caret { width: 1.5px; height: 14px; background: var(--accent); display: block; }

.mock-split { display: flex; gap: var(--s-3); }
.mock-main { flex: 1; min-width: 0; }
.mock-side {
  flex: none; width: 116px; display: grid; gap: 4px; align-content: start;
  padding-right: var(--s-3); border-right: 1px solid var(--line);
}
.mock-side .it { padding: 4px 6px; border-radius: var(--r-sm); color: var(--muted); }
.mock-side .it.on { background: var(--info-bg); color: var(--accent); }

.mock-pal {
  display: grid; grid-template-columns: repeat(5, 16px); gap: 9px;
  width: max-content; margin-top: var(--s-3); padding: var(--s-3);
  border: 1px solid var(--accent); border-radius: var(--r); background: var(--panel-2);
}
.mock-pal i { width: 16px; height: 16px; border-radius: 50%; display: block; }
/* Two rings with the card colour between them, so the chosen swatch still reads
   as chosen when the swatch itself is the accent. */
.mock-pal i.on { box-shadow: 0 0 0 2px var(--panel-2), 0 0 0 4px var(--accent); }

.mock-note {
  padding: var(--s-3); line-height: 1.6;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-soft);
}
.mock-note mark {
  background: var(--info-bg); color: var(--accent); padding: 0 3px; border-radius: 3px;
}
.mock-srch {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border: 1px solid var(--accent); border-radius: var(--r-full);
  background: var(--bg-soft); color: var(--muted);
}

.num-badge {
  display: inline-grid; place-items: center; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700; line-height: 1;
}

.hinh-svg .moc text.verdict { font-size: 12px; font-weight: 700; }
.hinh-svg .moc text.verdict.tot { fill: var(--ok); }
.hinh-svg .moc text.verdict.xau { fill: var(--err); }

.be-mat { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, 1fr); }
.be-mat-nhom {
  padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.be-mat-nhom h4 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--accent); margin-bottom: var(--s-3);
}
.be-mat-nhom ul { list-style: none; margin: 0; padding: 0; }
.be-mat-nhom li {
  font-family: var(--mono, ui-monospace, monospace); font-size: var(--fs-sm);
  margin-bottom: var(--s-2); word-break: break-word;
}

@media (max-width: 1100px) {
  /* Below this the figure column is too narrow to read, so it goes under the
     text instead of beside it. */
  .doc { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

@media (max-width: 780px) {
  .be-mat { grid-template-columns: repeat(2, 1fr); }
  /* The drawings are laid out for a wide viewBox; below this width they would
     shrink the labels past reading size, so they scroll instead. */
  .hinh-svg { min-width: 620px; }
  .hinh figure, .hinh { overflow-x: auto; }
}

/* A section heading that announces a band, centred and large.

   Centred, unlike the rest of the page, and deliberately: it is the one element
   that belongs to the whole width rather than to the text column, so centring it
   marks the boundary between bands without needing a rule or a background. */
/* Bề ngang hẹp đặt cho TIÊU ĐỀ, không cho cả khối.
 *
 * Trước đây khối ngoài chặn ở 34ch, nên `max-width: 60ch` của đoạn văn bên
 * trong không bao giờ có tác dụng — cha đã hẹp hơn con. Đoạn dẫn vì thế bị bóp
 * xuống bốn dòng ngắn ngủn dưới một tiêu đề hai dòng, nhìn như một cột chữ rơi
 * giữa trang. 34ch vẫn đúng cho tiêu đề: nó giữ tiêu đề ở hai dòng. */
.tieu-de-lon { text-align: center; max-width: 60ch; margin: 0 auto var(--s-7); }
.tieu-de-lon h2 { font-size: var(--fs-2xl); line-height: 1.2;
  max-width: 34ch; margin-left: auto; margin-right: auto; }
.tieu-de-lon p { color: var(--muted); margin-top: var(--s-3); max-width: 60ch;
  margin-left: auto; margin-right: auto; }

/* The two sides of the comparison, each under its own coloured header.

   The header carries the colour, not the list: a whole panel tinted red reads as
   an error message, and this is not one - it is the ordinary state of the other
   kind of tool. */
.doi-cot { padding: 0; overflow: hidden; }
.doi-cot h3 {
  margin: 0; padding: var(--s-4) var(--s-5); font-size: var(--fs-base);
  color: #fff;
}
.doi-cot.xau h3 { background: var(--muted); }
.doi-cot.tot h3 { background: var(--accent); }
.doi-cot .danh-sach { padding: var(--s-5); }
.doi-cot .danh-sach li:last-child { margin-bottom: 0; }

/* Icon badge in front of a subsection heading. A soft square, the accent colour
   at low opacity, so a run of subsections reads as a list at a glance. */
.muc-co-huy-hieu { display: flex; gap: var(--s-4); align-items: flex-start;
  margin: var(--s-7) 0 var(--s-3); }
.muc-co-huy-hieu:first-of-type { margin-top: 0; }
.huy-hieu {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}
.huy-hieu svg { width: 22px; height: 22px; }
.muc-co-huy-hieu h3 { margin: 0; align-self: center; font-size: var(--fs-lg); }
.muc-co-huy-hieu.not-yet .huy-hieu { background: var(--panel-2); color: var(--muted); }

/* Points that are not bullets. Four short statements about what the product does
   NOT do read better as four cards than as a list: a list invites skimming past,
   and these are the paragraphs we most want read. */
.the-luoi { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
.the-luoi li {
  list-style: none; margin: 0; padding: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); font-size: var(--fs-sm);
}
.the-luoi { padding: 0; }

/* A question and its answer as one card, so a run of six reads as six things
   rather than as one long column of alternating weights. */
.hoi-dap { display: grid; gap: var(--s-4); }
.hoi-dap > div {
  padding: var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--panel);
}
.hoi-dap h3 { margin: 0 0 var(--s-3); font-size: var(--fs-base); }
.hoi-dap p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 780px) {
  .the-luoi { grid-template-columns: 1fr; }
  .tieu-de-lon h2 { font-size: var(--fs-xl); }
}

/* HERO OF A PILLAR PAGE.

   Full-bleed colour so the band reads as the top of the page rather than as the
   first paragraph, with the h1 in white and the diagram beside it in a light
   card. The card is what lets a drawing made from page tokens sit on a coloured
   background without needing a second colour scheme for it. */
.hero-tru {
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 45%, #6366f1 100%);
  padding: var(--s-8) 0;
  color: #fff;
}
.hero-tru-luoi { display: grid; gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.hero-tru h1 { font-size: var(--fs-2xl); line-height: 1.18; color: #fff;
  margin-bottom: var(--s-4); }
.hero-tru .eyebrow { color: rgba(255, 255, 255, .78); }
.hero-tru-mo-ta { color: rgba(255, 255, 255, .88); max-width: 54ch;
  margin-bottom: var(--s-5); }
.hero-tru-nut {
  background: #0b0f19; color: #fff; border: 0; border-radius: var(--r-full);
  padding: var(--s-3) var(--s-6); font-weight: 600; display: inline-block;
}
.hero-tru-nut:hover { background: #000; color: #fff; text-decoration: none; }
/* `color-scheme: light` pins the tokens inside the card to their light values,
   so the drawing keeps its contrast even when the visitor is in dark mode. */
/* Reset `color` too, not just `background`.
 *
 * `.hero-tru` paints the whole band white, and that colour reaches this card.
 * Anything inside it without a colour of its own renders white on white, which
 * is invisible rather than merely wrong. /anti-fingerprint never showed it
 * because the card there holds an SVG that carries its own fills. */
.hero-tru-the {
  color-scheme: light; background: #fff; color: var(--text);
  border-radius: var(--r-xl);
  padding: var(--s-5); box-shadow: 0 18px 50px rgba(15, 23, 42, .22);
}
.hero-tru-the .hinh { margin: 0; }
.hero-tru-the figcaption { display: none; }

/* Benefit grid: six things the product does, one line each.

   Six short cards do work that six paragraphs cannot - someone who will not
   read the page still leaves knowing what it is for. */
.loi-ich { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr); }
.loi-ich-the {
  padding: var(--s-6) var(--s-5); border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--panel); text-align: center;
}
.loi-ich-the .huy-hieu { margin: 0 auto var(--s-4); border-radius: var(--r-full);
  width: 52px; height: 52px; }
.loi-ich-the h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.loi-ich-the p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

/* Closing band. A page that answers a question should end by saying what to do
   next; this one ended on a row of links to other pages. */
.chot {
  border-radius: var(--r-xl); padding: var(--s-8) var(--s-5); text-align: center;
  background: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #4f46e5 100%);
  color: #fff;
}
.chot h2 { font-size: var(--fs-2xl); color: #fff; margin-bottom: var(--s-3); }
.chot p { color: rgba(255, 255, 255, .88); margin-bottom: var(--s-5); }
.chot-nut { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }
.chot-nut a { border-radius: var(--r-full); padding: var(--s-3) var(--s-6);
  font-weight: 600; }
.chot-nut a.chinh { background: #0b0f19; color: #fff; border: 0; }
.chot-nut a.chinh:hover { background: #000; text-decoration: none; }
.chot-nut a.phu { background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .7); }
.chot-nut a.phu:hover { background: rgba(255, 255, 255, .12); text-decoration: none; }

@media (max-width: 1100px) {
  .hero-tru-luoi { grid-template-columns: minmax(0, 1fr); }
  .loi-ich { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .loi-ich { grid-template-columns: 1fr; }
  .hero-tru h1, .chot h2 { font-size: var(--fs-xl); }
}

/* Three steps, numbered, with a line between them on a wide screen.

   The connecting line is drawn with a border on the list rather than as an
   element, so it disappears by itself when the steps stack on a phone and there
   is nothing left to connect. */
.ba-buoc { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, 1fr);
  list-style: none; margin: 0; padding: 0; counter-reset: buoc; }
.ba-buoc li { position: relative; padding: var(--s-6) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.ba-buoc-so {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: var(--r-full); background: var(--accent); color: #fff;
  font-weight: 700; margin-bottom: var(--s-4);
}
.ba-buoc h3 { font-size: var(--fs-base); margin-bottom: var(--s-2); }
.ba-buoc p { margin: 0; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 900px) {
  .ba-buoc { grid-template-columns: 1fr; }
  .cum-doc-them { columns: 1; }
}

/* A cluster of links to the pages that answer a question at length.
   Underlined and stacked, because this is a list to scan, not a row of buttons
   to admire - the strip at the foot of the page already does the buttons. */
.cum-doc-them-khung { max-width: 900px; margin: 0 auto; }
.cum-doc-them { list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: var(--s-7); }
.cum-doc-them li { margin-bottom: var(--s-3); break-inside: avoid; }
.cum-doc-them a { text-decoration: underline; font-size: var(--fs-base); }

/* The five surfaces as cards, two across.

   Borrowed from pages that alternate a block of text with a picture down the
   page, but straightened out: there the icon floats a long way above the heading
   it belongs to and the eye zigzags left and right down the page. Here the badge
   sits against its own heading and the reading order is plain. */
.be-mat-the { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, 1fr); }
.the-be-mat {
  padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.the-be-mat .muc-co-huy-hieu { margin: 0 0 var(--s-4); }
.the-be-mat p { font-size: var(--fs-sm); margin-bottom: var(--s-3); }
.the-be-mat p:last-of-type { margin-bottom: 0; }
.the-be-mat .xem-them { margin: var(--s-4) 0 0; }
/* An odd number of cards leaves a gap; the last one takes the full row so the
   grid ends on a straight edge instead of a step. */
.be-mat-the > .the-be-mat:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .be-mat-the { grid-template-columns: 1fr; }
}

/* The band that sends the question to an assistant. Coloured like the closing
   band because it does the same job - it asks for a decision - and white pill
   buttons so the three read as equal choices rather than as one recommendation
   with two also-rans. */
.hoi-ai {
  border-radius: var(--r-xl); padding: var(--s-7) var(--s-5); text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff;
}
.hoi-ai h2 { font-size: var(--fs-xl); color: #fff; margin-bottom: var(--s-2); }
.hoi-ai p { color: rgba(255, 255, 255, .88); margin-bottom: var(--s-5); }
.hoi-ai-nut { display: flex; gap: var(--s-4); justify-content: center; flex-wrap: wrap; }
.hoi-ai-nut a {
  background: #fff; color: #1e293b; border-radius: var(--r-full);
  padding: var(--s-3) var(--s-5); font-weight: 600;
}
.hoi-ai-nut a:hover { background: #f1f5f9; text-decoration: none; }

.keep-reading { padding: var(--s-6) 0 var(--s-8); border-top: 1px solid var(--line); }
.keep-reading h2 { font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--s-4); }

.price {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  background: var(--panel); padding: var(--s-5);
  display: flex; flex-direction: column;
}
.price.featured { border-color: var(--accent); box-shadow: var(--glow); }
.price .tier { font-size: var(--fs-sm); color: var(--text-dim); }
.price .amount { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; margin: var(--s-2) 0 0; }
.price .per { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; }
.price ul { list-style: none; padding: 0; margin: var(--s-4) 0; font-size: var(--fs-sm); flex: 1; }
.price li { padding: 6px 0 6px 22px; position: relative; color: var(--text-dim); }
.price li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); }
.price li.no { color: var(--muted); }
.price li.no::before { content: "—"; color: var(--muted); }

.site-footer { border-top: 1px solid var(--line); padding: var(--s-6) 0; margin-top: var(--s-8); font-size: var(--fs-sm); }

/* ----------------------------------------------------------- Tien ich khac */

.kbd {
  font-family: var(--mono); font-size: var(--fs-xs);
  padding: 2px 6px; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: var(--r-sm);
  background: var(--bg-soft);
}
.bar { height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600;
  flex: none;
}
.sep { height: 1px; background: var(--line); margin: var(--s-5) 0; }
code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--bg-soft); border: 1px solid var(--line);
  padding: 1px 5px; border-radius: var(--r-sm);
}
pre {
  font-family: var(--mono); font-size: var(--fs-sm);
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s-4);
  overflow-x: auto; margin: 0;
}

/* ==========================================================================
   Nut doi theme
   ========================================================================== */

.theme-toggle {
  display: inline-flex; align-items: center;
  padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel);
}
.theme-toggle button {
  width: 28px; height: 26px;
  display: grid; place-items: center;
  border: none; border-radius: var(--r-full);
  background: transparent; color: var(--muted);
  cursor: pointer; padding: 0;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-pressed="true"] { background: var(--panel-2); color: var(--accent); }
.theme-toggle svg { width: 15px; height: 15px; }

/* ---------------------------------------------------- Chon ngon ngu */

.chon-ngon-ngu { position: relative; }
.chon-ngon-ngu > summary {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 9px 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel); color: var(--text-dim);
  font-size: var(--fs-xs); font-weight: 600;
  cursor: pointer; user-select: none;
  list-style: none;                 /* Firefox */
}
/* Tam giac mac dinh cua <summary> tren WebKit khong tat duoc bang list-style. */
.chon-ngon-ngu > summary::-webkit-details-marker { display: none; }
.chon-ngon-ngu > summary:hover { color: var(--text); }
.chon-ngon-ngu[open] > summary { color: var(--text); border-color: var(--line-soft); }
.chon-ngon-ngu .qua-dat { width: 15px; height: 15px; flex: none; }
.chon-ngon-ngu .mui-ten { width: 11px; height: 11px; flex: none; opacity: .6; }
.chon-ngon-ngu[open] .mui-ten { transform: rotate(180deg); }

.bang-ngon-ngu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 170px; padding: 4px;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.bang-ngon-ngu a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text-dim); font-size: var(--fs-sm); text-decoration: none;
}
.bang-ngon-ngu a:hover { background: var(--panel-2); color: var(--text); }
.bang-ngon-ngu a.dang-chon { color: var(--accent); font-weight: 600; }
.bang-ngon-ngu a svg { width: 13px; height: 13px; flex: none; }

/* First-visit language suggestion, built by site.js. Bottom-left so it never
   sits on the support dock, which is bottom-right on phones. */
.lang-prompt {
  position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 70;
  max-width: 360px; padding: var(--s-4);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
}
.lang-prompt p { margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--text); }
.lang-prompt-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 640px) {
  .lang-prompt { left: 10px; right: 66px; bottom: 14px; max-width: none; }
}

/* Man hep: bang tro ve giua man cho khoi tran ra ngoai vien phai. */
@media (max-width: 420px) {
  .bang-ngon-ngu { right: auto; left: 50%; transform: translateX(-50%); }
}

/* ==========================================================================
   Section truc quan: vong quy dao van tay
   --------------------------------------------------------------------------
   SVG noi dong + nhan tuyet doi. Khong dung anh: nhan phai doi mau theo theme
   va doc duoc boi trinh doc man hinh.
   ========================================================================== */

.orbit-section { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .orbit-section { grid-template-columns: 1fr; gap: var(--s-6); } }

.orbit { position: relative; aspect-ratio: 1; max-width: 460px; margin: 0 auto; width: 100%; }
.orbit svg { width: 100%; height: 100%; display: block; }
.orbit .ring { fill: none; stroke: var(--orbit-ring); stroke-width: 1; }
.orbit .spoke { stroke: var(--orbit-ring); stroke-width: 1; }
.orbit .node { fill: var(--accent); }
.orbit .node.dim { fill: var(--accent); opacity: 0.45; }

/* Vong xoay cham. Tu dung lai neu nguoi dung tat hieu ung chuyen dong. */
.orbit .rotor { transform-origin: 50% 50%; animation: orbit-spin 46s linear infinite; }
.orbit .rotor.rev { animation-duration: 68s; animation-direction: reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

.orbit-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 27%; aspect-ratio: 1; border-radius: 50%;
  background: var(--orbit-core);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg), var(--glow);
  display: grid; place-items: center;
}
.orbit-core svg { width: 46%; height: 46%; color: var(--accent); }

/* Nhan noi quanh quy dao */
.orbit-tag {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line); border-radius: var(--r-full);
  background: var(--panel); box-shadow: var(--shadow);
  font-size: var(--fs-xs); font-weight: 500; white-space: nowrap;
}
.orbit-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.orbit-tag.hot { border-color: var(--accent); color: var(--accent); }
.orbit-tag.hot i { box-shadow: 0 0 0 3px var(--info-bg); }

/* Danh sach loi ich ben phai */
.benefit { display: flex; gap: var(--s-4); align-items: flex-start; }
.benefit + .benefit { margin-top: var(--s-5); }
.benefit .ico {
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--info-bg); border: 1px solid var(--line);
  color: var(--accent);
}
.benefit .ico svg { width: 19px; height: 19px; }
.benefit h2, .benefit h3, .benefit h4 { margin: 0 0 4px; font-size: var(--fs-lg); }
.benefit p { margin: 0; font-size: var(--fs-sm); }

/* ==========================================================================
   Blog
   ========================================================================== */

.post {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.post:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.post .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--panel-2), var(--bg-soft));
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 30px; opacity: 0.85;
}
.post .body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.post h3 { margin: var(--s-2) 0; font-size: var(--fs-base); line-height: 1.35; }
.post p { font-size: var(--fs-sm); margin: 0 0 var(--s-3); }
.post .meta { margin-top: auto; font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s-3); }

/* ==========================================================================
   Chat dock ben phai
   --------------------------------------------------------------------------
   Danh sach kenh do JS quyet dinh theo vung: Viet Nam thay Zalo, noi khac
   thay Telegram. Xem assets/site.js.
   ========================================================================== */

.dock {
  position: fixed; right: var(--s-4); top: 50%; transform: translateY(-50%);
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 640px) {
  .dock { right: 10px; bottom: 14px; top: auto; transform: none; }
  .dock .dock-btn { width: 42px; height: 42px; }
}

.dock-btn {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  border: none; cursor: pointer; padding: 0;
  color: #fff; box-shadow: var(--shadow-lg);
  transition: transform 0.15s, filter 0.15s;
  position: relative;
}
.dock-btn:hover { transform: scale(1.07); filter: brightness(1.06); text-decoration: none; }
.dock-btn svg { width: 22px; height: 22px; }
.dock-btn .zalo-text { font-weight: 800; font-size: 13px; letter-spacing: -0.03em; }

/* Mau lay theo nhan dien tung nen tang - co y KHONG dua vao token theme,
   vi logo Telegram phai xanh Telegram du web dang o theme nao. */
.dock-btn.zalo     { background: #0068ff; }
.dock-btn.telegram { background: #29a9eb; }
.dock-btn.messenger{ background: #0084ff; }
.dock-btn.mail     { background: #ea4335; }
.dock-btn.chat     { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.dock-btn.top      { background: var(--muted); }

.dock-btn .tip {
  position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 4px 10px; font-size: var(--fs-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
  box-shadow: var(--shadow);
}
.dock-btn:hover .tip { opacity: 1; }

/* Nut len dau trang chi hien khi da cuon xuong */
.dock-btn.top { opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.15s; }
.dock.scrolled .dock-btn.top { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Showcase — ba tinh nang chinh, hang xen ke
   --------------------------------------------------------------------------
   Hinh minh hoa dung bang CSS/SVG chu khong dung anh chup: doi mau theo theme,
   khong bi mo tren man hinh HiDPI, va sua noi dung chi la sua HTML.
   ========================================================================== */

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.showcase + .showcase { margin-top: var(--s-9); }
.showcase.flip .sc-visual { order: 2; }
@media (max-width: 900px) {
  .showcase { grid-template-columns: 1fr; gap: var(--s-5); }
  .showcase.flip .sc-visual { order: 0; }
  .showcase + .showcase { margin-top: var(--s-7); }
}

.sc-text h2, .sc-text h3 { font-size: var(--fs-xl); margin-bottom: var(--s-3); }
.sc-text > p { font-size: var(--fs-base); }
.sc-points { list-style: none; padding: 0; margin: var(--s-4) 0 0; }
.sc-points li {
  position: relative; padding: 5px 0 5px 26px;
  font-size: var(--fs-sm); color: var(--text-dim);
}
.sc-points li::before {
  content: ""; position: absolute; left: 4px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* Khung "anh chup man hinh" gia lap */
.mini {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel); box-shadow: var(--shadow-lg);
  overflow: hidden; font-size: var(--fs-xs);
}
.mini-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px var(--s-3);
  border-bottom: 1px solid var(--line); background: var(--bg-soft);
}
.mini-bar .dots { display: flex; gap: 4px; }
.mini-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); display: block; }
.mini-bar .title { color: var(--muted); font-size: var(--fs-xs); }
.mini-body { padding: var(--s-3); }

.mini-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 8px 6px; border-radius: var(--r-sm);
}
.mini-row + .mini-row { border-top: 1px solid var(--line-soft); }
.mini-row.sel { background: var(--info-bg); }
.mini-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--bg-soft);
  font-size: var(--fs-xs); white-space: nowrap;
}
.chip i { width: 7px; height: 7px; border-radius: 2px; display: block; flex: none; }
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--info-bg); }

.bulkbar {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  padding: 8px var(--s-3); margin: -1px calc(-1 * var(--s-3)) var(--s-3);
  background: var(--info-bg); border-block: 1px solid var(--accent);
  font-size: var(--fs-xs);
}
.bulkbar .btn { padding: 3px 9px; font-size: var(--fs-xs); }

/* Do tai nguyen */
.meter + .meter { margin-top: var(--s-3); }
.meter .lbl { display: flex; justify-content: space-between; font-size: var(--fs-xs); margin-bottom: 5px; }
.meter .track { height: 8px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.meter .track > i { display: block; height: 100%; border-radius: var(--r-full); }
.meter .track > i.good { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.meter .track > i.bad  { background: var(--warn); opacity: 0.75; }

/* Luoi cua so xep gach */
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.tiles i {
  display: block; aspect-ratio: 4 / 3; border-radius: 3px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.tiles i.live { border-color: var(--accent); background: var(--info-bg); }

/* Thanh vien trong nhom */
.member { display: flex; align-items: center; gap: var(--s-3); padding: 7px 6px; }
.member + .member { border-top: 1px solid var(--line-soft); }
.member .who { flex: 1; min-width: 0; }
.member .who b { display: block; font-weight: 500; font-size: var(--fs-xs); }
.member .who span { color: var(--muted); font-size: 11px; }

/* ==========================================================================
   Nen tang & gia lap thiet bi
   ========================================================================== */

/* --- The nen tang chay app --- */
.plat {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--panel);
}
.plat.on { border-color: var(--accent); box-shadow: var(--glow); }
.plat .logo { width: 34px; height: 34px; flex: none; color: var(--text); }
.plat.on .logo { color: var(--accent); }
.plat .info { flex: 1; min-width: 0; }
.plat .info b { display: block; font-size: var(--fs-base); font-weight: 600; }
.plat .info span { font-size: var(--fs-xs); color: var(--muted); }

/* --- Bo chon he dieu hanh cua profile, dang giong trong app --- */
.os-picker { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.os-chip {
  display: inline-flex; align-items: stretch;
  border: 1.5px solid var(--line); border-radius: var(--r);
  background: var(--panel); overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.os-chip .main {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
}
.os-chip .box {
  width: 17px; height: 17px; flex: none;
  border: 1.5px solid var(--muted); border-radius: 4px;
  display: grid; place-items: center; color: transparent;
}
.os-chip .box svg { width: 11px; height: 11px; }
.os-chip .logo { width: 21px; height: 21px; color: var(--text-dim); flex: none; }
.os-chip .caret {
  display: grid; place-items: center;
  padding: 0 9px; border-left: 1px solid var(--line);
  color: var(--muted);
}
.os-chip .caret svg { width: 13px; height: 13px; }

.os-chip.on { border-color: var(--accent); background: var(--info-bg); }
.os-chip.on .box { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.os-chip.on .logo { color: var(--accent); }
.os-chip.on .caret { border-left-color: color-mix(in srgb, var(--accent) 35%, transparent); }

.os-chip.soon { opacity: 0.55; }
.os-chip.soon .main { padding-right: 10px; }

/* ==========================================================================
   Trang dang nhap / dang ky
   --------------------------------------------------------------------------
   Chia doi: form ben trai, ly do nen dang ky ben phai. Cot phai bien mat tren
   man hinh hep - luc do form la thu duy nhat con y nghia.
   ========================================================================== */

.auth { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-aside { display: none; } }

.auth-form {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-7) var(--s-6);
}
.auth-form .inner { width: 100%; max-width: 380px; margin: 0 auto; }

.auth-aside {
  background: var(--bg-soft);
  border-left: 1px solid var(--line);
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.auth-aside::before {
  content: ""; position: absolute; inset: -30% -20% auto;
  height: 420px;
  background: radial-gradient(ellipse at center, var(--hero-glow), transparent 70%);
  pointer-events: none;
}
.auth-aside > * { position: relative; }

.oauth { display: flex; flex-direction: column; gap: var(--s-2); }
.divider {
  display: flex; align-items: center; gap: var(--s-3);
  color: var(--muted); font-size: var(--fs-xs);
  margin: var(--s-4) 0;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.checkline { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--text-dim); }
.checkline input { width: auto; margin-top: 3px; flex: none; }

/* ==========================================================================
   Bang gia day du
   ========================================================================== */

.pricing-table th:first-child { text-align: left; }
.pricing-table th, .pricing-table td { text-align: center; }
.pricing-table td:first-child { text-align: left; font-weight: 500; }
.pricing-table .yes { color: var(--ok); font-weight: 600; }
.pricing-table .no  { color: var(--muted); }
.pricing-table tr.group td {
  background: var(--bg-soft); font-size: var(--fs-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  font-weight: 500;
}
.pricing-table th.hot { color: var(--accent); }

.toggle-period {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-full); background: var(--panel);
}
/* Nhận cả `button` lẫn `a`: trang bảng giá dựng tĩnh nên hai lựa chọn ở đó là
   liên kết, còn trang thanh toán chạy tương tác nên vẫn là nút. Cùng một hình
   dạng, hai thẻ khác nhau. */
.toggle-period button,
.toggle-period a {
  padding: 5px 14px; border: none; border-radius: var(--r-full);
  background: transparent; color: var(--text-dim);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  text-decoration: none; line-height: 1.4;
}
.toggle-period button[aria-pressed="true"],
.toggle-period a[aria-current="true"] { background: var(--panel-2); color: var(--accent); font-weight: 500; }

/* ==========================================================================
   Bang admin: hang co the mo rong, o loc
   ========================================================================== */

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; margin-bottom: var(--s-4); }
.filters input[type="search"] { max-width: 260px; }
.filters select { width: auto; }

.money { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.check-cell { width: 34px; }
.check-cell input { width: auto; }

.pager { display: flex; gap: var(--s-2); align-items: center; justify-content: flex-end; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); }

/* Feature requests page: one request per row. `.fr-text` keeps the customer's
   line breaks, and long words wrap so one pasted link cannot widen the card. */
.fr-list { list-style: none; margin: 0; padding: 0; }
.fr-item { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-soft); }
.fr-item:last-child { border-bottom: 0; }
.fr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); overflow-wrap: anywhere; }
.fr-head .badge { flex: none; }
.fr-text { margin: var(--s-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fr-reply { margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--info-bg); }

/* Logo that la anh trong suot: bo nen gradient va can chinh chu cua the
   <span> cu, neu khong nen se hien qua nhung cho trong cua logo. */
img.brand-mark {
  background: none;
  border-radius: 0;
  object-fit: contain;
}


/* Mã liên kết ứng dụng: to, dễ đọc, chọn được cả cụm bằng một cú bấm.
   `readonly` chứ không phải `disabled` — disabled thì không bôi đen được. */
.ma-to {
  width: 100%;
  text-align: center;
  font-size: var(--fs-lg);
  letter-spacing: 0.14em;
  padding: var(--s-4);
}

/* ============================================== Trang dat mua
   Bo cuc hoa don: nhan ben trai, so ben phai, mot duong ke moi dong. Dung <dl>
   chu khong dung <div>: day dung la danh sach cap ten-gia tri, va trinh doc man
   hinh doc ra dung nhu vay. */
.dong-don {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 0;
}
.dong-don dt,
.dong-don dd {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
/* Nhãn có thể kèm một huy hiệu ("Giảm giá" + mã khuyến mãi). Khoảng cách phải
   do bố cục tạo ra, không dựa vào dấu cách trong markup: Razor cắt bỏ khoảng
   trắng giữa một biểu thức và một thẻ, nên hai thứ dính liền nhau — đúng lỗi
   đã thấy trên trang thanh toán. */
.dong-don dt { color: var(--muted); display: flex; align-items: center; gap: 8px; }
.dong-don dd { text-align: right; font-variant-numeric: tabular-nums; }
.dong-don dd.giam { color: var(--ok); }

/* Gia truoc khi giam. Gach ngang va nhat di, dat NGAY TRUOC gia moi de mat doc
   duoc ca hai trong mot lan liec. */
.gia-cu {
  margin-right: 8px;
  color: var(--muted);
  text-decoration: line-through;
  font-size: var(--fs-sm);
  font-weight: 400;
}

/* Mot dong duy nhat noi ro khach do bao nhieu tien. Hai con so gach ngang va
   khong gach van bat nguoi ta tu tru; cau nay tra loi san. */
.da-tiet-kiem {
  margin-top: var(--s-3);
  padding: 8px 12px;
  border-radius: var(--r);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: center;
}

/* Thanh tien: dong quan trong nhat cua trang, nen no khong nam chung bang voi
   cac dong kia ma tach ra, chu to hon. */
.thanh-tien {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--s-4);
}
.so-tien {
  font-size: var(--fs-xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Chon chu ky: mot cap nut lien nhau, khong phai hai nut roi.
   Lien nhau thi doc ra "chon mot trong hai", roi thi doc ra "hai viec khac
   nhau" - ma day dung la chon mot trong hai. */
.chon-chu-ky {
  display: inline-flex;
  margin: var(--s-5) 0 var(--s-4);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-soft);
}
.chon-chu-ky button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border: none;
  border-radius: var(--r-full);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.chon-chu-ky button.dang-chon {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
  font-weight: 600;
}
.tiet-kiem {
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* O nhap ma giam gia, nam trong cung the voi hoa don vi no doi truc tiep con so
   ngay tren. Tach the rieng thi hai thu lien quan nhau bi mot khoang trong chia
   ra, va khach khong noi duoc chung anh huong nhau. */
.o-ma {
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
}
.hang-ma { display: flex; gap: 8px; margin-top: 6px; }
.hang-ma input { flex: 1; min-width: 0; }
.loi-ma { margin: 8px 0 0; color: var(--err); font-size: var(--fs-sm); }

.don-hang, .don-xong { margin-top: 0; }
.don-xong { margin-top: var(--s-5); }
/* Ma don la thu khach chep tay sang ung dung ngan hang: cho no du to de doc. */
.ma-don { font-size: var(--fs-lg); letter-spacing: 0.06em; }
.canh-bao {
  margin: var(--s-4) 0 0;
  padding: 10px 12px;
  border: 1px solid var(--warn);
  border-radius: var(--r);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

/* Khung ma QR o trang dat mua.
   Nen trang va vien nhe: ma QR can tuong phan cao de camera bat duoc, dat no
   tren mot nen mau la lam kho chinh viec no sinh ra de lam. */
.khung-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-5) 0 var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}
.khung-qr img { max-width: 100%; height: auto; }
.khung-qr p { margin: 0; text-align: center; max-width: 240px; }

/* Ma QR ben trai, bang so ben phai. Xep chong thi ca hai day xuong duoi man
   hinh va khach phai cuon qua lai de doi chieu ma voi so tien. */
.don-xong-luoi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  margin-top: var(--s-4);
}
.don-xong-luoi .don-xong { margin-top: 0; }
@media (max-width: 760px) {
  .don-xong-luoi { grid-template-columns: 1fr; }
}

/* Khung dat mua rong hon mot cot chu, vi no chua hai cot. Van gioi han lai chu
   khong tran ca man hinh: mot hoa don keo dai ca ngang man hinh thi nhan va so
   cach nhau qua xa de doc theo dong. */
.container-dat-mua { max-width: 720px; }

/* Dai cho tien ve. Noi ro trang dang tu cho, khong thi khach chuyen xong ngoi
   nhin mot trang bat dong va tuong he thong hong. */
.dang-cho {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
}
.quay {
  width: 13px;
  height: 13px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: quay 0.9s linear infinite;
  flex: none;
}
@keyframes quay { to { transform: rotate(360deg); } }
/* Ton trong nguoi tat hieu ung chuyen dong trong he dieu hanh. */
@media (prefers-reduced-motion: reduce) { .quay { animation: none; } }

/* Dau tich lon khi tien da ve. */
.dau-xong {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 32px;
  line-height: 64px;
}

/* Gia goi tren trang dang nhap. To va ro: day la thu khach vua chon, va nhin
   thay lai no la cach nhanh nhat de yen tam rang khong co gi bi doi. */
.gia-goi {
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.gia-goi span { font-weight: 400; margin-left: 4px; }

/* ------------------------------------------------------------------ VĂN BẢN
   Trang điều khoản, riêng tư, liên hệ, tải xuống.

   Đo dòng giữ ở 80 ký tự (28/09/2026, trước là 72). Mắt tìm đầu dòng sau khi
   xuống dòng bằng khoảng cách, và dòng càng dài thì càng hay nhảy nhầm dòng —
   đó là lý do sách in không bao giờ dàn chữ hết chiều ngang trang. Đơn vị là
   `ch` nên khi cỡ chữ gốc tăng, cột chữ tự rộng theo. */
.van-ban { max-width: 80ch; margin: 0 auto; }
.van-ban h1 { font-size: var(--fs-2xl); margin: 0 0 var(--s-2); }
.van-ban h2 {
  font-size: var(--fs-xl);
  margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
}
.van-ban h3 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); }
.van-ban p { margin: 0 0 var(--s-4); }
.van-ban .lede { font-size: var(--fs-lg); color: var(--text-dim); }
.van-ban ul, .van-ban ol { margin: 0 0 var(--s-4); padding-left: 1.4em; }
.van-ban li { margin-bottom: var(--s-2); }
.van-ban .table-wrap { margin-bottom: var(--s-4); }

/* Bảng "gửi trường nào, vì sao": cột giữa là ví dụ thật nên cho chữ đơn cách,
   và cột đó không xuống dòng giữa chừng thì đọc mới ra hình dạng dữ liệu. */
.bang-du-lieu { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.bang-du-lieu th, .bang-du-lieu td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.bang-du-lieu th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.bang-du-lieu td.mono { white-space: nowrap; color: var(--text-dim); }
.bang-du-lieu tr:last-child td { border-bottom: 0; }

/* Ô kênh liên hệ. Cả ô là một liên kết, không phải mỗi dòng chữ bên trong —
   đích bấm to hơn thì trên điện thoại đỡ trượt tay. */
.kenh { margin-bottom: var(--s-6); }
.kenh-o { display: flex; flex-direction: column; gap: 4px; text-decoration: none; }
.kenh-o:hover { border-color: var(--accent); }
.kenh-o strong { font-size: var(--fs-lg); }
.kenh-o .mono { color: var(--text-dim); }

/* Thẻ giá của gói khách đang dùng: viền nhấn để nhận ra ngay trong bốn thẻ
   giống nhau. Không tô nền — nền đậm đã dành cho thẻ "phổ biến", và hai thẻ
   cùng nổi bật thì không thẻ nào nổi bật. */
/* HAI THẺ NỔI BẬT, HAI MÀU KHÁC NHAU.
   Gói đang dùng và gói "phổ biến" đứng cạnh nhau, và trước đây cả hai đều viền
   xanh với một cái nút xanh y hệt — nhìn qua không biết cái nào là của mình.
   Xanh lá cho "đang dùng", xanh dương cho "nên mua tiếp": xanh lá đã là màu
   của nhãn "Gói đang dùng" ngay phía trên, nên thẻ và nhãn đọc thành một khối.

   Nền tô rất nhạt chứ không đậm: bốn thẻ vẫn phải trông cùng một họ, chỉ khác
   nhau đủ để mắt tách được. Đậm hơn thì bảng giá thành bốn màu rời rạc. */
.price.dang-dung {
  border-color: var(--ok);
  background: linear-gradient(180deg, var(--ok-bg), var(--panel) 180px);
  box-shadow: 0 0 0 1px var(--ok-bg), 0 8px 28px var(--ok-bg);
}
.price.featured {
  background: linear-gradient(180deg, var(--info-bg), var(--panel) 180px);
}

/* Nút của thẻ đang dùng: xanh lá đặc, cùng màu với viền thẻ và nhãn.
   Cùng độ nổi với nút xanh dương bên cạnh — đây không phải việc phụ, gia hạn
   đúng hạn là việc quan trọng nhất trên trang này với người đã là khách. */
.price.dang-dung .btn.primary {
  background: linear-gradient(135deg, var(--ok), color-mix(in srgb, var(--ok) 72%, #000));
  border-color: transparent;
  color: #fff;
}

/* Nhãn thay cho nút ở gói miễn phí đang dùng: trông như nút nhưng không bấm
   được, vì không có việc gì để làm. */
.dang-dung-nhan {
  text-align: center;
  color: var(--ok);
  border-color: var(--ok);
  background: var(--ok-bg);
  cursor: default;
}

/* Hai nut tai ve o day thanh ben. */
.ben-tai { margin-top: auto; padding: var(--s-4) var(--s-3) var(--s-2); display: grid; gap: 6px; }
.tai-he {
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-start; text-align: left;
}
/* Ban chua co: van hien, van chiem dung cho, nhung khong bam duoc. Giau di thi
   nguoi dung Mac tuong san pham nay chi chay Windows mai mai. */
.tai-sap-co { color: var(--muted); cursor: default; }
.tai-sap-co .badge { margin-left: auto; font-size: var(--fs-xs); }

/* ------------------------------------------------------- Trang tai ve */

/* Hai o he dieu hanh: cung kich thuoc, cung bo cuc, khac nhau o mot nut. Bang
   nhau la co y — mot ben nho hon thi doc thanh "he dieu hanh hang hai". */
.tai-ve { max-width: 64ch; }
/* `auto` ở hai bên, KHÔNG phải `0`.

   Rule này nằm sau rule `.tai-o` ở đầu tệp, nên nó ghi đè `margin: 0 auto` ở
   trên. Với `0` thì khối ba thẻ dính vào mép trái container: rộng 1040 trong
   container 1400, tâm lệch 156px so với tiêu đề và đoạn văn - đủ để nhìn ra
   ngay mà không chỉ được tên. Bản thân ba thẻ vẫn bằng nhau chằn chặn (331px
   mỗi cái); lệch là cả khối, không phải từng thẻ. */
.tai-o { margin: var(--s-5) auto var(--s-7); }
.tai-the { display: flex; flex-direction: column; }
.tai-dau { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); }
.tai-dau strong { display: block; font-size: var(--fs-lg); }
/* Ban chua co: nhat di nhung van chiem dung cho. */
.tai-chua-co .tai-dau { opacity: 0.7; }
.tai-chua-co .btn { color: var(--muted); cursor: default; }
.center { text-align: center; }

/* Con so duoc noi bat giua mot cau. Dung mau nhan chu khong to dam: cau nay da
   nam trong the h2 in dam san, dam them nua thi khong con khac gi. */
.so-noi { color: var(--accent); }

/* Cham mau dung truoc ten profile, dung mau khach dat trong app. Hai ben nhin
   giong nhau thi khach doi chieu duoc bang mat, khong phai doc tung ten. */
.cham {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}


/* ------------------------------------------------------------ Release log */
/* Changelog.razor. A vertical line with one dot per day; the date sits in its
   own column on wide screens and above the items on narrow ones. */
.changelog-days { list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.changelog-day {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--s-5);
  position: relative;
  padding-bottom: var(--s-6);
}
.changelog-day::before {
  content: "";
  position: absolute;
  left: calc(9rem + var(--s-5) / 2);
  top: .45rem;
  bottom: 0;
  width: 2px;
  background: var(--line);
}
.changelog-day:last-child::before { bottom: auto; height: 1rem; }
.changelog-day::after {
  content: "";
  position: absolute;
  left: calc(9rem + var(--s-5) / 2 - 5px);
  top: .3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
}
.changelog-date { font-weight: 600; color: var(--text); white-space: nowrap; }
.changelog-body { padding-left: var(--s-4); min-width: 0; }
.changelog-entry + .changelog-entry { margin-top: var(--s-4); }
.changelog-version { margin-bottom: var(--s-2); }
.changelog .changelog-body ul { list-style: none; margin: 0; padding: 0; }
.changelog .changelog-body li {
  display: flex;
  gap: var(--s-2);
  align-items: baseline;
  margin: 0 0 var(--s-2);
}
.changelog .changelog-body li .badge { flex-shrink: 0; }
@media (max-width: 640px) {
  .changelog-day { grid-template-columns: 1fr; gap: var(--s-2); padding-left: var(--s-5); }
  .changelog-day::before { left: 5px; }
  .changelog-day::after { left: 0; }
  .changelog-body { padding-left: 0; }
}

/* ----------------------------------------------------- Not in this build yet
   A feature we talk about but have not shipped: dimmed, with a "coming" tag.
   Dropping it from the page would lose the product story; leaving it looking
   like everything else promises something the customer cannot use today.
   `opacity` rather than a colour change, so one rule works on a list item, a
   feature card and a table row alike. The tag itself stays at full opacity,
   because a faded "coming" tag is the one thing here that must stay readable. */
.not-yet { opacity: .55; }

/* A CARD CARRYING A "Soon" PILL DIMS WITH COLOUR, NOT OPACITY.

   `opacity` below 1 makes the element and everything inside it a single
   composited group, and a child can never be more opaque than the group it
   belongs to. So the `opacity: 1` that used to sit on `.soon` here could not
   do anything: the pill faded to .55 along with the card, and the one part of
   a dimmed card that has to stay readable - the word telling you it is coming
   - was the part hardest to read.

   Colour does not group, so the card dims and the pill keeps its own strength.
   Scoped with `:has()` to cards that actually carry a pill; the nav rows use
   the plain `.not-yet` above, have no pill, and are better off with it. */
.not-yet:has(.soon) { opacity: 1; color: var(--muted); }
.not-yet:has(.soon) h2,
.not-yet:has(.soon) h3,
.not-yet:has(.soon) .h-nho { color: var(--text-dim); }
.not-yet:has(.soon) .ico { opacity: .5; }
.soon {
  display: inline-flex; align-items: center;
  margin-left: 6px; padding: 1px 7px;
  border: 1px dashed var(--line); border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted);
  white-space: nowrap; vertical-align: middle;
}

/* ------------------------------------------------- Quay ve trang chu
   Trang dang nhap dung bo cuc rieng, khong co thanh dieu huong. Logo o do tro
   ve trang chu, nhung mot cai logo thi khong ai chac la bam duoc, nen them mot
   duong ro rang. Chu nho va mo: day la duong thoat, khong phai viec chinh cua
   trang. Mui ten nhich sang trai khi ro chuot - dung mot dau hieu nho de noi
   "day la duong lui", thay vi to mau cho noi bat. */
.back-home {
  /* `flex` + `width: fit-content` chu khong phai `inline-flex`: logo ngay duoi
     la mot the inline, nen inline-flex lam hai cai nam chung mot hang. */
  display: flex; width: fit-content; align-items: center; gap: 6px;
  margin-bottom: var(--s-5);
  color: var(--muted); font-size: var(--fs-sm);
}
.back-home svg { width: 16px; height: 16px; transition: transform .15s ease; }
.back-home:hover { color: var(--text); text-decoration: none; }
.back-home:hover svg { transform: translateX(-2px); }

/* ------------------------------------------- Cac o quyen o cuoi mot dong nguoi
   Mot thanh vien co the bat hai ba quyen cung luc, nen cho phep xuong dong va
   don ve ben phai. Khong cho xuong dong thi o dien thoai ba cai chip day ten
   nguoi ra khoi o va ten bi cat mat. */
.the-quyen {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: flex-end; flex: none; max-width: 55%;
}

/* ------------------------------------------- Cham mau trong danh sach gia lap
   `.cham` was written for the profile table on /profiles, where it sits in a
   table cell. In the mock list on /profile-management it sits in a flex row
   instead, and a flex item is allowed to shrink below its own width - at phone
   width the dot flattened into a sliver. It is the one thing in that row that
   must keep its size; the name beside it is what gives way. The right margin
   goes because the row already has a gap. */
.mini-row .cham { flex: none; margin-right: 0; }

/* Một cột, dùng khi không có hình đặt cạnh.
 *
 * `.doc` là lưới hai cột: chữ 68ch, rồi một cột cho hình. Dùng nó mà không đặt
 * gì vào cột thứ hai thì trang bỏ trống nửa màn hình bên phải - và trông như
 * một chỗ chừa sẵn chờ ảnh, chứ không như một lỗi. Đã lọt ra production ngày
 * 30/09/2026 trên hai trang. */
.doc.mot-cot { grid-template-columns: minmax(0, 68ch); justify-content: center; }