/* ═══════════════════════════════════════════════════════════════════════
   site.css — trang chu, dang nhap, dang ky.

   He mau lay tu ban mau: nen navy rat sau, luoi mo, hai quang sang mo
   phia sau mao dau. Tieu de mau xanh periwinkle nhat chu KHONG phai
   trang — do la net nhan dang cua ban mau, trang thi thanh mot trang toi
   bat ky. Nut goi hanh dong lay dai cyan cua chu Dent trong logo.

   Chu: Be Vietnam Pro. Mot grotesque hinh hoc rat gan ban mau, va — quan
   trong hon — no duoc thiet ke cho tieng Viet nen dau thanh khong bi
   cham vao chu hoa o co chu lon. Nhieu font grotesque dep khac dat dau
   nga cham vao dau mu, va loi do chi lo ra o tieng Viet.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#070A1C;
  --bg2:#0B1030;
  --panel:rgba(22,29,68,.55);
  --panel2:rgba(16,22,54,.72);
  --line:rgba(128,150,235,.16);
  --line2:rgba(128,150,235,.30);

  --ink:#E8ECFB;
  --ink2:#A4AFD6;
  --ink3:#6F7AA6;
  --head:#A9C6F5;           /* mau tieu de — net nhan dang */

  --dent-cyan:#00F0F8;
  --dent-teal:#00B8D8;
  --dent-blue:#0877C8;
  --indigo:#5B5BE8;
  --violet:#8B5CF6;
  --jade:#4ADE9B;
  --amber:#F0B24A;
  --coral:#F26A7E;

  --ui:"Be Vietnam Pro", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --num:"IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --pad:24px;
  --max:1180px;
  --r:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ui); font-size:15.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* nen: luoi mo + hai quang sang. Ca hai deu la lop trang tri nen dung
   pointer-events va nam duoi moi thu. */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(128,150,235,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,150,235,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 100% 65% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 100% 65% at 50% 0%, #000 40%, transparent 100%);
}
body::after{
  content:""; position:fixed; left:50%; top:-380px; width:1100px; height:760px;
  transform:translateX(-50%); z-index:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(closest-side, rgba(91,91,232,.40), transparent 70%),
    radial-gradient(closest-side, rgba(180,65,176,.22), transparent 70%) 60% 40%/70% 70% no-repeat;
  filter:blur(30px);
}
main, header, footer{position:relative; z-index:1}

h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.025em; text-wrap:balance}
p{margin:0}
a{color:var(--head); text-decoration:none}
a:hover{color:#CBDDFF}
:focus-visible{outline:2px solid var(--head); outline-offset:3px; border-radius:6px}
img{max-width:100%; display:block}
code{font-family:var(--num); font-size:.88em; background:rgba(128,150,235,.12); padding:1px 6px; border-radius:5px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

/* ── thanh dieu huong: vien thuoc o giua, co soi sang o canh tren ─────── */
.topbar{position:sticky; top:0; z-index:50; padding:18px 0}
.topbar .wrap{display:flex; align-items:center; gap:18px}

.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:16px;
  color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.brand .mark{width:26px; height:26px; border-radius:9px; flex:none;
  background:linear-gradient(135deg, var(--dent-cyan), var(--dent-teal) 48%, var(--dent-blue));
  display:grid; place-items:center; color:#fff}
.brand .mark svg{width:16px; height:16px}
.brand small{color:var(--ink3); font-weight:400; font-size:12.5px; letter-spacing:0}

.navpill{
  display:none; position:relative; margin:0 auto; padding:5px;
  background:var(--panel2); border:1px solid var(--line); border-radius:999px;
  backdrop-filter:blur(14px);
}
@media(min-width:1000px){ .navpill{display:flex; align-items:center; gap:2px} }
/* soi sang o canh tren — chi tiet dac trung cua ban mau */
.navpill::before{
  content:""; position:absolute; left:22%; right:22%; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(169,198,245,.85), transparent);
}
.navpill a{
  padding:8px 16px; border-radius:999px; color:var(--ink2); font-size:14.5px;
  border:1px solid transparent; transition:color .15s, border-color .15s, background .15s;
}
.navpill a:hover{color:var(--ink)}
.navpill a.is-on{color:var(--ink); border-color:var(--line2); background:rgba(128,150,235,.10)}

.topactions{margin-left:auto; display:flex; align-items:center; gap:10px}
@media(max-width:720px){
  .topbar{padding:14px 0}
  .topbar .wrap{gap:10px; min-width:0}
  .topbar .logo-bar{height:28px; max-width:170px}
  .topactions{gap:6px; min-width:0}
  .topactions .btn{display:none}
  .topbar .langsw{flex:none}
  .topbar .langsw .flag{padding:5px 7px}
  .topbar .langsw .flag:not(.is-on) i{display:none}
}
@media(max-width:460px){
  .topbar .wrap{padding-left:14px; padding-right:14px}
  .topbar .logo-bar{height:25px; max-width:150px}
}

/* ── nut ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:999px; border:1px solid var(--line2);
  background:var(--panel2); color:var(--ink); font:inherit; font-size:14.5px;
  font-weight:500; cursor:pointer; white-space:nowrap; backdrop-filter:blur(10px);
  transition:border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn:hover{border-color:rgba(169,198,245,.55); color:#fff}
.btn-go{
  border:0; color:#fff; font-weight:600;
  background:linear-gradient(96deg, var(--dent-cyan), var(--dent-teal) 55%, var(--dent-blue));
  box-shadow:0 10px 30px -10px rgba(0,184,216,.72);
  text-shadow:0 1px 1px rgba(3,23,48,.28);
}
.btn-go:hover{color:#fff; transform:translateY(-1px);
  box-shadow:0 14px 36px -10px rgba(0,184,216,.86)}
.btn-lg{padding:14px 30px; font-size:16px}
.btn-sm{padding:8px 16px; font-size:13.5px}
.btn-block{width:100%}

/* ── mao dau ─────────────────────────────────────────────────────────── */
.hero{padding:76px 0 0; text-align:center}
.hero h1{
  font-size:clamp(38px, 6.4vw, 74px); line-height:1.04; font-weight:600;
  color:var(--head); width:100%; max-width:16ch; margin:0 auto; letter-spacing:-.035em;
}
.hero .lede{
  font-size:clamp(16px,1.6vw,18.5px); line-height:1.62; color:var(--ink2);
  max-width:60ch; margin:26px auto 0;
}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:36px}
.hero .fine{margin-top:16px; font-size:13.5px; color:var(--ink3)}

/* ── man hinh san pham: laptop + anh ca that ────────────────────────── */
.hero-visual{position:relative; margin:66px auto 0; max-width:1120px; min-height:610px}
.hero-visual::before{
  content:""; position:absolute; left:50%; top:90px; width:min(940px, 96vw); height:360px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,240,248,.18), transparent 70%);
  filter:blur(18px); pointer-events:none;
}
.laptop{position:relative; z-index:2; max-width:920px; margin:0 auto}
.lap-lid{
  border:1px solid rgba(169,198,245,.26); border-radius:22px 22px 16px 16px;
  padding:10px; background:linear-gradient(180deg, rgba(31,39,82,.92), rgba(9,13,36,.96));
  box-shadow:0 54px 120px -54px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.08);
}
.mock-top{
  height:34px; display:flex; align-items:center; gap:7px; padding:0 13px;
  border-radius:13px 13px 0 0; background:#090D24; color:var(--ink3);
  border:1px solid rgba(128,150,235,.13); border-bottom:0;
  font-family:var(--num); font-size:11px;
}
.mock-top span{width:8px; height:8px; border-radius:50%; background:rgba(128,150,235,.34)}
.mock-top span:nth-child(1){background:var(--coral)}
.mock-top span:nth-child(2){background:var(--amber)}
.mock-top span:nth-child(3){background:var(--jade)}
.mock-top b{margin-left:8px; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-mock{
  display:grid; grid-template-columns:155px minmax(0,1fr) 190px; min-height:430px;
  border:1px solid rgba(128,150,235,.13); border-radius:0 0 13px 13px; overflow:hidden;
  background:#070A1C; text-align:left;
}
.mock-rail,.mock-board{background:rgba(16,22,54,.78); padding:18px; border-color:rgba(128,150,235,.14)}
.mock-rail{border-right:1px solid rgba(128,150,235,.14)}
.mock-board{border-left:1px solid rgba(128,150,235,.14)}
.mock-rail strong,.mock-board small{display:block; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3)}
.mock-rail span{
  display:block; margin-top:12px; color:var(--ink2); font-size:12px; line-height:1.45;
  padding-bottom:12px; border-bottom:1px solid rgba(128,150,235,.12);
}
.mock-rail i{
  display:inline-flex; margin-top:18px; padding:6px 10px; border-radius:999px;
  background:rgba(74,222,155,.12); border:1px solid rgba(74,222,155,.28);
  color:#B8F0D6; font-style:normal; font-size:11.5px;
}
.mock-stage{
  position:relative; min-width:0; display:grid; place-items:center; padding:28px;
  background:
    linear-gradient(rgba(128,150,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,150,235,.06) 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, rgba(24,34,74,.9), #070A1C 70%);
  background-size:42px 42px, 42px 42px, auto;
}
.mock-stage img{
  width:100%; max-height:310px; object-fit:contain;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.62));
}
.measure-line{
  position:absolute; display:block; height:1px; background:linear-gradient(90deg, transparent, var(--dent-cyan), transparent);
  box-shadow:0 0 16px rgba(0,240,248,.45); transform-origin:left center;
}
.measure-line::before,.measure-line::after{
  content:""; position:absolute; top:-4px; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--dent-cyan); background:#07142B;
}
.measure-line::before{left:14%}.measure-line::after{right:14%}
.measure-line b{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  padding:4px 7px; border-radius:6px; color:#CFFBFF; background:rgba(7,10,28,.82);
  border:1px solid rgba(0,240,248,.25); font:11px/1 var(--num); white-space:nowrap;
}
.line-a{left:18%; right:20%; top:44%; transform:rotate(-3deg)}
.line-b{left:26%; right:31%; top:62%; transform:rotate(5deg); background:linear-gradient(90deg, transparent, var(--amber), transparent)}
.line-b::before,.line-b::after{border-color:var(--amber)}
.line-b b{color:#FFE8B9; border-color:rgba(240,178,74,.32)}
.mock-board strong{display:block; margin-top:8px; color:var(--ink); font:600 46px/1 var(--num); letter-spacing:0}
.mock-board strong em{font-size:16px; color:var(--ink3); font-style:normal; font-weight:400}
.mock-board .pass{
  display:inline-flex; margin-top:10px; padding:5px 9px; border-radius:999px;
  color:#B8F0D6; background:rgba(74,222,155,.10); border:1px solid rgba(74,222,155,.32);
  font-size:12px;
}
.mock-board ul{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px}
.mock-board li{display:flex; align-items:center; gap:9px; color:var(--ink2); font-size:12.5px}
.mock-board li b{width:7px; height:7px; border-radius:50%; background:var(--jade); box-shadow:0 0 14px rgba(74,222,155,.75)}
.mock-board li:nth-child(2) b{background:var(--amber); box-shadow:0 0 14px rgba(240,178,74,.65)}
.mock-board li:nth-child(3) b{background:var(--dent-cyan); box-shadow:0 0 14px rgba(0,240,248,.65)}
.lap-base{
  height:26px; width:92%; margin:0 auto; border-radius:0 0 26px 26px;
  background:linear-gradient(180deg, rgba(128,150,235,.25), rgba(21,28,65,.92) 55%, rgba(5,7,18,.96));
  box-shadow:0 28px 50px -34px rgba(0,0,0,.95);
}
.proof-stack{
  position:absolute; z-index:3; inset:0; pointer-events:none;
}
.proof-thumb{
  position:absolute; margin:0; width:188px; overflow:hidden; border-radius:16px;
  background:rgba(16,22,54,.84); border:1px solid rgba(169,198,245,.24);
  box-shadow:0 28px 70px -34px rgba(0,0,0,.95); backdrop-filter:blur(10px);
}
.proof-thumb img{
  width:100%; height:126px; object-fit:contain; padding:12px;
  background:
    linear-gradient(rgba(128,150,235,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,150,235,.08) 1px, transparent 1px),
    #080C22;
  background-size:24px 24px;
}
.proof-thumb figcaption{padding:12px 13px 13px; text-align:left}
.proof-thumb b{display:block; color:var(--ink); font-size:13px; line-height:1.25}
.proof-thumb span{display:block; color:var(--ink3); font-size:11.5px; line-height:1.35; margin-top:4px}
.proof-thumb-1{left:8px; top:52px; transform:rotate(-7deg)}
.proof-thumb-2{right:0; top:92px; width:220px; transform:rotate(6deg)}
.proof-thumb-3{left:74px; bottom:20px; transform:rotate(5deg)}
.deck-cap{text-align:center; margin-top:18px; font-size:13px; color:var(--ink3)}
.hero{padding-bottom:12px}

@media(max-width:1080px){
  .hero-visual{min-height:0; padding-bottom:206px}
  .proof-thumb-1{left:2%; top:auto; bottom:36px}
  .proof-thumb-2{right:2%; top:auto; bottom:72px}
  .proof-thumb-3{left:50%; bottom:0; transform:translateX(-50%) rotate(2deg)}
}
@media(max-width:820px){
  .hero-visual{margin-top:48px; padding-bottom:0}
  .app-mock{grid-template-columns:1fr; min-height:0}
  .mock-rail{display:none}
  .mock-board{border-left:0; border-top:1px solid rgba(128,150,235,.14)}
  .mock-stage{min-height:270px; padding:24px 18px}
  .mock-stage img{max-height:230px}
  .lap-lid{border-radius:18px; padding:8px}
  .lap-base{height:18px}
  .proof-stack{position:relative; inset:auto; display:grid; gap:14px; margin-top:18px; pointer-events:auto}
  .proof-thumb{position:relative; left:auto; right:auto; top:auto; bottom:auto; width:100%; transform:none}
}
@media(max-width:520px){
  .hero{padding-top:52px}
  .hero .cta{max-width:360px; margin-left:auto; margin-right:auto}
  .hero .cta .btn{width:100%}
  .mock-top{font-size:10.5px}
  .mock-board strong{font-size:38px}
  .measure-line{display:none}
}

/* ── muc ─────────────────────────────────────────────────────────────── */
section{padding:96px 0}
.shead{max-width:62ch; margin:0 auto 44px; text-align:center}
.shead h2{font-size:clamp(26px,3.4vw,40px); line-height:1.14; color:var(--ink)}
.shead p{color:var(--ink2); margin-top:14px; font-size:17px}

/* soi sang ngang giua cac muc — thay cho duong ke thuong */
.rule{height:1px; border:0; margin:0;
  background:linear-gradient(90deg, transparent, var(--line2), transparent)}

/* ── luoi tinh nang ──────────────────────────────────────────────────── */
.cards{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{
  position:relative; padding:26px; border-radius:18px;
  background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(10px); overflow:hidden;
}
.card::before{
  content:""; position:absolute; left:24px; right:24px; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(169,198,245,.55), transparent);
  opacity:0; transition:opacity .25s;
}
.card:hover::before{opacity:1}
.card .ic{width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(128,150,235,.12); border:1px solid var(--line2); color:var(--head);
  margin-bottom:16px}
.card .ic svg{width:19px; height:19px}
.card h3{font-size:17px; color:var(--ink)}
.card p{color:var(--ink2); font-size:14.5px; margin-top:9px; line-height:1.58}

/* bon ly do: hai cot, ngan cach bang duong ke chu khong phai the */
.reasons{display:grid; grid-template-columns:1fr; gap:0; max-width:940px; margin:0 auto}
@media(min-width:760px){ .reasons{grid-template-columns:1fr 1fr} }
.reason{padding:28px 0; border-top:1px solid var(--line)}
@media(min-width:760px){
  .reason{padding:30px 34px 30px 0}
  .reason:nth-child(even){padding-left:34px; padding-right:0; border-left:1px solid var(--line)}
}
.reason h3{font-size:17px; color:var(--head)}
.reason p{color:var(--ink2); font-size:14.5px; margin-top:9px}
.reason p b{color:var(--ink); font-weight:600}

/* ── vong lap bon buoc ───────────────────────────────────────────────── */
.flow{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{
  padding:14px 14px 22px; border-radius:18px; background:var(--panel); border:1px solid var(--line);
  overflow:hidden;
}
.step-shot{
  position:relative; height:174px; margin:0 0 18px; border-radius:12px; overflow:hidden;
  display:grid; place-items:center; background:
    linear-gradient(rgba(128,150,235,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,150,235,.08) 1px, transparent 1px),
    rgba(7,10,28,.86);
  background-size:28px 28px; border:1px solid rgba(128,150,235,.14);
}
.step-shot img{
  position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none;
}
.shot-art{
  position:absolute; inset:13px; z-index:1; background-image:var(--shot);
  background-repeat:no-repeat; background-position:center; background-size:contain;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.55));
}
.step-shot-1 .shot-art{transform:scale(1.24)}
.step-shot-2 .shot-art{transform:scale(1.16)}
.step-shot-3 .shot-art{transform:scale(1.38)}
.compare-shot .shot-art{inset:13px 50% 13px 13px; background-image:var(--shot-a); transform:scale(1.34)}
.compare-shot .pane-b{inset:13px 13px 13px 50%; background-image:var(--shot-b); transform:scale(1.2)}
.step-shot::after{
  content:""; position:absolute; z-index:2; left:16px; right:16px; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,240,248,.55), transparent);
}
.step-shot .pin{
  position:absolute; z-index:3; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(242,106,126,.75); box-shadow:0 0 0 8px rgba(242,106,126,.12);
}
.step-shot .pin::after{content:""; position:absolute; inset:10px; border-radius:50%; background:var(--coral)}
.pin-a{left:29%; top:37%}.pin-b{right:27%; top:52%}
.compare-shot{grid-template-columns:1fr 1fr; gap:0}
.compare-shot::before{
  content:""; position:absolute; z-index:2; top:18px; bottom:18px; left:50%; width:1px;
  background:linear-gradient(transparent, rgba(169,198,245,.4), transparent);
}
.step .n{width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  font-family:var(--num); font-size:12px; color:var(--head);
  background:rgba(128,150,235,.12); border:1px solid var(--line2)}
.step h3{font-size:16.5px; margin-top:15px; padding:0 10px}
.step p{color:var(--ink2); font-size:14.5px; margin-top:8px}
.step p,.step .n{margin-left:10px; margin-right:10px}
.note{
  margin:28px auto 0; max-width:74ch; padding:18px 22px; border-radius:14px;
  background:var(--panel); border:1px solid var(--line); color:var(--ink2); font-size:14.5px;
}
.note b{color:var(--ink)}

/* ── app iOS: chiec dien thoai ───────────────────────────────────────────
   Cung mot ngon ngu hinh voi chiec laptop o mao dau: khung kim loai sang o
   vien tren toi dan xuong duoi, man hinh la nen trang chu that, va anh ben
   trong la anh THAT do ung dung dung ra. Mot hinh ve tay o day se la cau noi
   doi dau tien tren trang.

   The thong bao day KHONG phai trang tri: no la cau tra loi cho "mua app de
   lam gi", nen no doc duoc ca khi nguoi ta chi luot qua hinh. */
.appsplit{display:grid; gap:34px; align-items:center; grid-template-columns:1fr}
@media(min-width:980px){ .appsplit{grid-template-columns:minmax(0,1fr) 360px; gap:60px} }

.applist{list-style:none; margin:0; padding:0}
.applist li{display:flex; gap:16px; padding:20px 0; border-top:1px solid var(--line)}
.applist li:first-child{border-top:0; padding-top:0}
.applist .ic{
  flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(128,150,235,.12); border:1px solid var(--line2); color:var(--head);
}
.applist .ic svg{width:19px; height:19px}
.applist h3{font-size:16.5px; color:var(--ink)}
.applist p{color:var(--ink2); font-size:14.5px; margin-top:8px; line-height:1.58}
.appcopy .note{margin-left:0; margin-right:0}

.appmock{position:relative; display:grid; place-items:center}
.appmock::before{
  content:""; position:absolute; left:50%; top:16%; width:320px; height:320px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,240,248,.20), transparent 70%);
  filter:blur(18px); pointer-events:none;
}
.phone{
  position:relative; z-index:2; width:min(300px, 84vw); aspect-ratio:300/616;
  border-radius:46px; padding:9px;
  background:linear-gradient(168deg, rgba(169,198,245,.40), rgba(31,39,82,.92) 32%, rgba(9,13,36,.96));
  box-shadow:0 54px 110px -48px rgba(0,0,0,.96), inset 0 1px 0 rgba(255,255,255,.10);
}
.ph-scr{
  display:flex; flex-direction:column; height:100%; overflow:hidden; text-align:left;
  border-radius:38px; background:#070A1C; border:1px solid rgba(128,150,235,.16);
}
.ph-island{
  position:absolute; z-index:3; left:50%; top:20px; transform:translateX(-50%);
  width:84px; height:23px; border-radius:999px; background:#04061A;
  border:1px solid rgba(128,150,235,.13);
}
.ph-status{
  display:flex; align-items:center; justify-content:space-between; padding:15px 22px 0;
  font:500 11.5px/1 var(--num); color:var(--ink2);
}
.ph-status i{
  display:block; width:32px; height:9px; border-radius:2px;
  background:linear-gradient(90deg, rgba(128,150,235,.55) 62%, rgba(128,150,235,.18) 62%);
}
.ph-nav{padding:16px 18px 0}
.ph-nav .ph-back{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--head)}
.ph-nav .ph-back::before{content:"\2039"; font-size:16px; line-height:1}
.ph-nav b{display:block; margin-top:5px; font-size:17px; color:var(--ink); letter-spacing:-.02em}
.ph-nav em{display:block; margin-top:3px; font-style:normal; font-family:var(--num);
  font-size:11px; color:var(--ink3)}
.ph-head{display:flex; align-items:center; gap:13px; padding:15px 18px 0}
.ph-ring{
  --ring:var(--dent-cyan);
  position:relative; flex:none; width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; gap:1px;
  background:conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(128,150,235,.16) 0);
}
.ph-ring.is-bad{--ring:var(--coral)}
.ph-ring::after{content:""; position:absolute; inset:7px; border-radius:50%; background:#080C22}
.ph-ring b,.ph-ring span{position:relative; z-index:1; font-family:var(--num)}
.ph-ring b{font-size:23px; font-weight:600; color:var(--ink); line-height:1}
.ph-ring span{font-size:10px; color:var(--ink3)}
.ph-tags{min-width:0}
.ph-tags small{display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3)}
.ph-tags div{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px}
.ph-tags span{padding:4px 9px; border-radius:999px; font-size:11px; border:1px solid transparent}
.ph-tags .t-bad{color:#FFC9D2; background:rgba(242,106,126,.12); border-color:rgba(242,106,126,.34)}
.ph-tags .t-warn{color:#FFE8B9; background:rgba(240,178,74,.10); border-color:rgba(240,178,74,.32)}
.ph-stage{
  position:relative; flex:1; min-height:0; margin:14px 14px 0; border-radius:14px; overflow:hidden;
  display:grid; place-items:center; border:1px solid rgba(128,150,235,.14);
  background:
    linear-gradient(rgba(128,150,235,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,150,235,.08) 1px, transparent 1px),
    rgba(7,10,28,.86);
  background-size:24px 24px;
}
.ph-stage img{
  width:100%; height:100%; object-fit:contain; padding:10px;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.58));
}
/* Cham do nam o NUA PHAI cua khung anh: nua trai la cho the thong bao day
   de len, va hai thu do chong nhau thi mat ca hai. */
.ph-stage .pin{
  position:absolute; z-index:2; left:58%; top:62%; width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(242,106,126,.75); box-shadow:0 0 0 7px rgba(242,106,126,.12);
}
.ph-stage .pin::after{content:""; position:absolute; inset:9px; border-radius:50%; background:var(--coral)}
.ph-rows{list-style:none; margin:13px 0 0; padding:0 18px; display:grid; gap:9px}
.ph-rows li{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; color:var(--ink2)}
.ph-rows b{font:500 12.5px/1 var(--num); color:var(--ink); white-space:nowrap}
.ph-rows .ok{color:#B8F0D6}
.ph-rows .bad{color:#FFC9D2}
.ph-rows .warn{color:#FFE8B9}
.ph-cta{
  margin:14px 18px 0; padding:11px; border-radius:11px; text-align:center;
  font-size:12.5px; font-weight:600; color:#fff; text-shadow:0 1px 1px rgba(3,23,48,.28);
  background:linear-gradient(96deg, var(--dent-cyan), var(--dent-teal) 55%, var(--dent-blue));
  box-shadow:0 10px 26px -12px rgba(0,184,216,.8);
}
.ph-tabs{
  display:flex; margin-top:15px; padding:11px 8px 15px; background:rgba(16,22,54,.72);
  border-top:1px solid rgba(128,150,235,.14);
}
.ph-tabs span{flex:1; text-align:center; font-size:10px; color:var(--ink3)}
.ph-tabs .on{color:var(--head)}
.ph-tabs span::before{
  content:""; display:block; width:15px; height:15px; margin:0 auto 5px;
  border:1.5px solid currentColor; border-radius:5px; opacity:.6;
}
/* The thong bao de len GIUA chieu cao may: thap hon thi no che mat nut "xem
   mo hinh 3D" va hang thong so — hai thu dang doc — con cao hon thi no che
   con diem. Cho nay chi de len anh, va anh o duoi no van doc duoc la gi. */
.ph-push{
  position:absolute; z-index:4; left:-14%; top:38%; width:272px; max-width:92%; margin:0;
  display:flex; gap:11px; padding:12px 14px; border-radius:18px; transform:rotate(-4deg);
  background:rgba(22,29,68,.88); border:1px solid rgba(169,198,245,.24);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95); backdrop-filter:blur(12px);
}
.ph-push img{flex:none; width:34px; height:34px; object-fit:contain; border-radius:9px;
  background:rgba(7,10,28,.7); padding:4px}
.ph-push b{display:block; font-size:12px; color:var(--ink)}
.ph-push b i{font-style:normal; font-weight:400; color:var(--ink3); font-size:11px}
.ph-push b i::before{content:" \00B7 "}
.ph-push span{display:block; margin-top:4px; font-size:11.5px; line-height:1.4; color:var(--ink2)}

@media(max-width:979px){
  .appmock{margin-top:8px}
  .ph-push{position:relative; left:auto; top:auto; transform:none;
    width:100%; max-width:380px; margin:20px auto 0}
}

/* ── bang gia ────────────────────────────────────────────────────────── */
.tiers{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.tier{
  position:relative; display:flex; flex-direction:column; padding:28px 26px;
  border-radius:20px; background:var(--panel); border:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.tier.is-pick{border-color:transparent; background:
  linear-gradient(var(--bg2), var(--bg2)) padding-box,
  linear-gradient(150deg, var(--dent-cyan), var(--dent-teal) 45%, var(--dent-blue)) border-box;
  border:1px solid transparent; box-shadow:0 30px 70px -40px rgba(0,184,216,.72)}
.tier h3{font-size:19px}
.tier .tag{color:var(--ink2); font-size:13.5px; margin-top:8px; min-height:40px; line-height:1.45}
.tier .price{font-size:clamp(25px,2.2vw,32px); font-weight:600; letter-spacing:-.035em;
  margin-top:18px; color:var(--ink); font-variant-numeric:tabular-nums;
  white-space:nowrap; display:flex; align-items:baseline; gap:2px}
.tier .price em{font-style:normal; font-size:12.5px; color:var(--ink3); font-weight:400;
  margin-left:3px; white-space:nowrap}
.tier .sub{font-size:12.5px; color:var(--ink3); margin-top:7px; min-height:34px; line-height:1.5;
  font-family:var(--num)}
.tier .inherit{font-size:12.5px; color:var(--ink3); margin-top:20px; padding-bottom:10px;
  border-bottom:1px solid var(--line)}
.tier ul{list-style:none; margin:16px 0 0; padding:0; flex:1; font-size:14px}
.tier li{display:flex; gap:10px; padding:6px 0; color:var(--ink2); line-height:1.5}
.tier li svg{flex:none; margin-top:4px; color:var(--jade)}
.tier li.key{color:var(--ink)}
.tier .go{margin-top:22px}
.tier .guard{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--ink3); line-height:1.55; font-family:var(--num)}

.altpitch{font-size:20px; margin-top:56px; text-align:center}
.altlead{color:var(--ink2); font-size:15px; margin:9px auto 0; max-width:62ch; text-align:center}
.alts{display:grid; gap:16px; margin-top:22px; grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.tier.alt{display:grid; grid-template-columns:1fr; gap:18px; align-items:center}
@media(min-width:560px){ .tier.alt{grid-template-columns:1fr 200px} }
.tier.alt .tag{min-height:0}
.tier.alt .price{margin-top:0}
@media(min-width:560px){ .tier.alt .altbuy{text-align:right} }
.tier.alt .altbuy .btn{margin-top:14px}

/* bang so sanh */
.tablewrap{overflow-x:auto; margin-top:34px; border:1px solid var(--line); border-radius:18px;
  background:var(--panel)}
table.matrix{border-collapse:collapse; width:100%; min-width:640px; font-size:14px}
table.matrix th, table.matrix td{padding:13px 16px; border-bottom:1px solid var(--line); text-align:center}
table.matrix thead th{font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink3); font-weight:500; white-space:nowrap}
table.matrix tbody tr:last-child td{border-bottom:0}
table.matrix th.row, table.matrix td.row{text-align:left; color:var(--ink2); font-weight:400; min-width:260px}
table.matrix tr.hi th.row{color:var(--head); font-weight:600}
.tick{color:var(--jade)} .cross{color:#33406E}

.share{margin-top:34px; padding:28px; border-radius:20px;
  background:var(--panel); border:1px solid var(--line)}
.share h3{font-size:18px; color:var(--head)}
.share p{color:var(--ink2); margin-top:12px; font-size:14.5px; max-width:78ch}
.share p b{color:var(--ink); font-weight:600}

/* ── chan trang ──────────────────────────────────────────────────────── */
footer.site{padding:56px 0 64px; border-top:1px solid var(--line)}
footer.site .cols{display:grid; grid-template-columns:1fr; gap:28px}
@media(min-width:760px){ footer.site .cols{grid-template-columns:1.6fr 1fr 1fr} }
footer.site p, footer.site li{color:var(--ink3); font-size:13.5px; line-height:1.65}
footer.site ul{list-style:none; margin:0; padding:0}
footer.site li{padding:4px 0}
footer.site a{color:var(--ink2)}
footer.site h4{font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink3); margin-bottom:10px; font-weight:500}
.legal{margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--ink3); font-size:12.5px; line-height:1.65; max-width:94ch}

/* ── nut chuyen ngon ngu ─────────────────────────────────────────────── */
.langsw{display:flex; align-items:center; gap:2px; padding:3px;
  background:var(--panel2); border:1px solid var(--line); border-radius:999px}
.langsw .flag{display:flex; align-items:center; gap:5px; padding:5px 9px; cursor:pointer;
  background:transparent; border:0; border-radius:999px; color:var(--ink3);
  font:inherit; font-size:11px; letter-spacing:.04em; line-height:1; opacity:.6;
  transition:opacity .12s, background .12s, color .12s}
.langsw .flag svg{width:19px; height:13px; display:block; border-radius:3px; flex:none}
.langsw .flag i{font-style:normal; font-weight:600}
.langsw .flag:hover{opacity:1; color:var(--ink)}
.langsw .flag.is-on{opacity:1; background:rgba(128,150,235,.14); color:var(--ink)}

/* ═══ dang nhap / dang ky ════════════════════════════════════════════ */
.auth{display:grid; grid-template-columns:1fr; gap:0; padding:40px 0 80px}
@media(min-width:960px){ .auth{grid-template-columns:1fr 1fr; gap:56px; align-items:center} }
.auth-box{width:100%; max-width:420px; margin:0 auto}
.auth-box h1{font-size:34px; color:var(--head); letter-spacing:-.03em}
.auth-box .sub{color:var(--ink2); margin-top:10px; font-size:15px}

.field{margin-top:20px}
.field label{display:block; font-size:13.5px; color:var(--ink2); margin-bottom:7px}
.field input{
  width:100%; background:rgba(9,13,36,.7); border:1px solid var(--line2); border-radius:12px;
  color:var(--ink); font:inherit; font-size:15.5px; padding:12px 14px; transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:var(--ink3)}
.field input:focus{border-color:rgba(169,198,245,.6); outline:none; box-shadow:0 0 0 4px rgba(91,91,232,.18)}
.field .hint{font-size:12.5px; color:var(--ink3); margin-top:6px}
.field.bad input{border-color:var(--coral)}

.msg{padding:14px 16px; border-radius:12px; font-size:14px; line-height:1.55; margin-top:22px;
  border:1px solid}
.msg-bad{background:rgba(242,106,126,.10); border-color:rgba(242,106,126,.45); color:#FFC9D2}
.msg-ok{background:rgba(74,222,155,.09); border-color:rgba(74,222,155,.40); color:#B8F0D6}
.msg-info{background:var(--panel); border-color:var(--line2); color:var(--ink2)}
.msg-warn{background:rgba(240,178,74,.10); border-color:rgba(240,178,74,.42); color:#F8DFB2}
.msg a{color:inherit; text-decoration:underline}

.auth-alt{margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink2)}
.auth-side{display:none}
@media(min-width:960px){ .auth-side{display:block} }
.auth-side .in{max-width:440px; padding:34px; border-radius:22px;
  background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(10px)}
.auth-side h2{font-size:24px; line-height:1.22; color:var(--ink)}
.auth-side .pt{display:flex; gap:12px; margin-top:20px; color:var(--ink2); font-size:14.5px; line-height:1.55}
.auth-side .pt svg{flex:none; margin-top:3px; color:var(--jade)}

/* ── dai thong bao ───────────────────────────────────────────────────── */
.flash, .upsell{font-size:14px; border-bottom:1px solid}
.flash .wrap, .upsell .wrap{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding-top:13px; padding-bottom:13px}
.flash-ok{background:rgba(74,222,155,.09); border-color:rgba(74,222,155,.35); color:#B8F0D6}
.flash-warn, .upsell{background:rgba(240,178,74,.10); border-color:rgba(240,178,74,.38); color:#F8DFB2}
.upsell b{color:#FFE7BE}
.upsell a{margin-left:auto; color:#FFE7BE; border:1px solid rgba(240,178,74,.5);
  border-radius:999px; padding:7px 15px; font-size:13px; white-space:nowrap}
.upsell a:hover{background:rgba(240,178,74,.16); color:#fff}

/* ── logo ────────────────────────────────────────────────────────────── */
.logo{display:block; width:auto; height:auto}
.logo-bar{height:34px; max-width:230px; object-fit:contain}
.logo-full{height:58px; max-width:270px; object-fit:contain}
.brand-foot{margin-bottom:16px}
/* logo la anh chu trang tren nen toi — khong them nen hay vien quanh no */
a.brand:hover .logo{opacity:.88; transition:opacity .15s}

/* ═══════════════════════════════════════════════════════════════════════
   THU VIEN CA — library.php va case.php

   Hai trang nay khac han phan con lai cua site.css: o tren la trang ban
   hang, o day la BAN LAM VIEC. Nen bo hai quang sang va do tuong phan
   cua nen len — mot bang bon muoi hang doc tren nen mo la mot bang khong
   ai doc het. Mau van la mau cu, chi khac lieu luong.

   Thang mau diem PHAI trung voi thuoc do o exocad.php (92 / 84 / 60).
   Hai thang cho cung mot con so la cach chac chan nhat de nguoi dung
   thoi tin ca hai.
   ═══════════════════════════════════════════════════════════════════════ */

.lib{padding:26px 0 72px}
.lib h1{font-size:30px; color:var(--head); letter-spacing:-.03em}
.lib .sub{color:var(--ink2); margin-top:6px; font-size:14.5px}
/* padding:96px cua `section` o tren la nhip cua TRANG BAN HANG — mot man hinh
   mot y. O ban lam viec no bien bay muc thanh mot trang cuon dai gap ba ma
   khong them mot chu nao. Ghi de, dung tang do dac cua bo chon. */
.lib section{margin-top:30px; padding:0}
.lib section > h2{font-size:17px; color:var(--head); margin-bottom:12px;
  display:flex; align-items:center; gap:10px}
.lib .dim{color:var(--ink3)}

.lib-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap}

.crumb{margin-bottom:14px; font-size:13.5px}

/* ── trang thai goi: mot dong, khong phai mot the ─────────────────────── */
.planbar{margin-top:18px; padding:11px 16px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel2); font-size:13.5px; color:var(--ink2);
  display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.planbar b{color:var(--ink); font-weight:600}
.planbar a{white-space:nowrap}

/* ── o so lieu ────────────────────────────────────────────────────────── */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px}
@media(min-width:720px){ .tiles{grid-template-columns:repeat(5,1fr)} }
.tile{padding:13px 15px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.tile b{display:block; font-family:var(--num); font-size:22px; color:var(--ink); line-height:1.2}
.tile span{display:block; margin-top:2px; font-size:12.5px; color:var(--ink3)}

/* ── bo loc ───────────────────────────────────────────────────────────── */
.filters{display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end;
  margin-top:20px; padding:14px 16px; border:1px solid var(--line);
  border-radius:14px; background:var(--panel2)}
.fl{display:flex; flex-direction:column; gap:5px}
.fl label{font-size:12px; color:var(--ink3)}
.fl input, .fl select{
  background:rgba(8,12,32,.7); border:1px solid var(--line2); color:var(--ink);
  border-radius:9px; padding:8px 10px; font-family:var(--ui); font-size:13.5px; min-width:128px}
.fl input:focus, .fl select:focus{border-color:rgba(169,198,245,.6); outline:none;
  box-shadow:0 0 0 3px rgba(91,91,232,.18)}
.fl-q input{min-width:220px}
.fl-go{flex-direction:row; align-items:center; gap:12px}
.fl-go .clr{font-size:12.5px; color:var(--ink3)}
.fl-go .clr:hover{color:var(--head)}

/* ── bang cac lan do ──────────────────────────────────────────────────── */
.tablewrap{margin-top:16px; overflow-x:auto; border:1px solid var(--line); border-radius:14px}
table.runs{width:100%; border-collapse:collapse; font-size:13.8px; min-width:760px}
table.runs th{text-align:left; padding:11px 14px; font-size:12px; font-weight:500;
  color:var(--ink3); background:rgba(8,12,32,.55); border-bottom:1px solid var(--line);
  white-space:nowrap}
table.runs td{padding:11px 14px; border-bottom:1px solid rgba(128,150,235,.09); vertical-align:middle}
table.runs tr:last-child td{border-bottom:none}
table.runs tbody tr:hover{background:rgba(128,150,235,.055)}
table.runs .n{text-align:right; font-family:var(--num)}
table.runs td.case a{font-weight:500; color:var(--ink)}
table.runs td.case a:hover{color:var(--head)}
table.runs td.case small{display:block; color:var(--ink3); font-size:11.5px; margin-top:1px}
table.runs td.act{text-align:right; white-space:nowrap}

.score{font-family:var(--num); font-weight:500}
.gr{font-style:normal; font-family:var(--num); color:var(--ink3); margin-left:6px; font-size:12px}

.s-pass{color:var(--jade)}
.s-ok{color:#9FD6B4}
.s-warn{color:var(--amber)}
.s-bad{color:var(--coral)}
.s-x{color:var(--ink3)}

.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px;
  border:1px solid transparent; white-space:nowrap}
.p-pass{color:var(--jade); border-color:rgba(74,222,155,.35); background:rgba(74,222,155,.10)}
.p-warn{color:var(--amber); border-color:rgba(240,178,74,.35); background:rgba(240,178,74,.10)}
.p-fail{color:var(--coral); border-color:rgba(242,106,126,.38); background:rgba(242,106,126,.12)}
.p-skip{color:var(--ink3); border-color:var(--line2)}

.pager{display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:14px; font-size:13px; flex-wrap:wrap}
.pager .pg{display:flex; gap:8px}

.empty{margin-top:26px; padding:48px 24px; text-align:center;
  border:1px dashed var(--line2); border-radius:18px; background:var(--panel)}
.empty h2{font-size:20px; color:var(--head)}
.empty p{margin:10px auto 18px; max-width:520px; color:var(--ink2); font-size:14.5px}

.keepnote{margin-top:26px; font-size:12.5px; color:var(--ink3); max-width:760px}

/* ── case.php ─────────────────────────────────────────────────────────── */
.bigscore{text-align:right; white-space:nowrap}
.bigscore b{font-family:var(--num); font-size:40px; line-height:1; font-weight:600}
.bigscore small{color:var(--ink3); font-family:var(--num); font-size:14px; margin-left:2px}
.bigscore em{display:block; font-style:normal; font-size:12.5px; color:var(--ink2); margin-top:4px}

.revrow{display:flex; gap:10px; flex-wrap:wrap}
.rev{display:block; min-width:150px; padding:11px 14px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel); color:var(--ink)}
.rev:hover{border-color:var(--line2)}
.rev.is-on{border-color:rgba(169,198,245,.55); background:rgba(91,91,232,.14)}
.rev b{display:block; font-size:12.5px; color:var(--ink2); font-weight:500}
.rev > span{display:block; font-family:var(--num); font-size:22px; line-height:1.25}
.rev small{display:block; font-size:11.5px; color:var(--ink2)}
.rev small.dim{color:var(--ink3)}

/* Duong ke ve bang box-shadow cua TUNG O, khong bang `gap` tren nen mau.
   So o meta khong chia het cho so cot nen hang cuoi luon con cho trong — voi
   cach `gap`, cho trong do an nen mau va thanh mot mang la giua the. Bong thi
   di theo o that, va o vien ngoai cung no bi `overflow:hidden` cat di. */
.meta{display:grid; grid-template-columns:repeat(2,1fr); background:var(--bg2);
  border:1px solid var(--line); border-radius:14px; overflow:hidden}
@media(min-width:680px){ .meta{grid-template-columns:repeat(3,1fr)} }
@media(min-width:980px){ .meta{grid-template-columns:repeat(5,1fr)} }
.meta > div{padding:11px 14px; box-shadow:1px 1px 0 var(--line)}
.meta span{display:block; font-size:11.5px; color:var(--ink3)}
.meta b{display:block; font-size:13.5px; font-weight:500; margin-top:2px}

.acts{display:flex; gap:8px; margin-top:14px; flex-wrap:wrap}
.btn.is-off{opacity:.42; cursor:not-allowed}
.hintline{margin-top:8px; font-size:12.5px; color:var(--ink3); max-width:720px}

.grps{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:720px){ .grps{grid-template-columns:repeat(2,1fr)} }
.grp{padding:13px 15px; border:1px solid var(--line); border-radius:13px; background:var(--panel)}
.gh{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.gh b{font-size:14px; font-weight:500}
.gh .score{font-size:17px}
.bar{height:4px; border-radius:3px; background:rgba(128,150,235,.16); margin:9px 0 4px; overflow:hidden}
.bar i{display:block; height:100%; border-radius:3px; background:currentColor}
.tops{list-style:none; margin:8px 0 0; padding:0; font-size:12.5px}
.tops li{display:flex; gap:8px; align-items:baseline; padding:3px 0; color:var(--ink2)}
.tops li span{flex:1 1 auto}
.tops li em{font-style:normal; color:var(--ink3); font-size:11.5px}
.tops li b{font-family:var(--num); color:var(--coral); font-weight:500}

table.rows{width:100%; border-collapse:collapse; font-size:13.5px;
  border:1px solid var(--line); border-radius:14px; overflow:hidden}
table.rows th{text-align:left; padding:9px 13px; font-size:12px; font-weight:500;
  color:var(--ink3); background:rgba(8,12,32,.55); border-bottom:1px solid var(--line)}
table.rows td{padding:9px 13px; border-bottom:1px solid rgba(128,150,235,.09); vertical-align:top}
table.rows tr:last-child td{border-bottom:none}
table.rows td.k{white-space:nowrap; color:var(--ink)}
table.rows td.st{white-space:nowrap}
table.rows td.why{color:var(--ink2); font-size:12.8px}
table.rows .n{text-align:right; font-family:var(--num); white-space:nowrap}

.stations{display:grid; grid-template-columns:1fr; gap:8px}
@media(min-width:640px){ .stations{grid-template-columns:repeat(2,1fr)} }
@media(min-width:1000px){ .stations{grid-template-columns:repeat(4,1fr)} }
.stn{display:grid; grid-template-columns:auto 1fr auto; gap:3px 10px; align-items:baseline;
  padding:10px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.stn .no{font-family:var(--num); font-size:12px; color:var(--ink3)}
.stn b{font-size:13px; font-weight:500}
.stn .score{font-family:var(--num); font-size:15px}
.stn small{grid-column:2 / -1; font-size:11.5px; color:var(--ink3)}
.stn.st-todo{opacity:.6}

ol.find{margin:0; padding-left:20px; font-size:13.5px; color:var(--ink2)}
ol.find li{padding:3px 0}
ol.find li.bad{color:var(--coral)}
ol.find li.wrn{color:var(--amber)}

.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px}
.shots figure{margin:0; border:1px solid var(--line); border-radius:13px; overflow:hidden;
  background:#05070F}
.shots img{width:100%; height:auto; display:block}
.shots figcaption{padding:8px 11px; font-size:12px; color:var(--ink2);
  border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:8px}

.msg-info{margin-top:18px}

/* ═══════════════════════════════════════════════════════════════════════
   KHU LAM VIEC — thanh tren, bang dieu khien, ho so (lib/App.php)

   Khac thanh tren cua trang ban hang o dung mot y: o do dieu huong la mot
   VIEN THUOC noi bat giua trang, vi no la loi moi doc tiep. O day dieu
   huong la cong cu — no phai co mat, de bam, va khong doi lay su chu y
   cua noi dung. Nen bo vien thuoc, ha tuong phan, va dinh len dau.
   ═══════════════════════════════════════════════════════════════════════ */

body.work{background:var(--bg)}
/* Hai quang sang cua trang ban hang la trang tri cho mot man hinh duy nhat.
   O ban lam viec, trang nao cung cuon dai, va vet sang dinh o dau trang se
   theo nguoi dung suot ca ngay. Tat. */
body.work::after{display:none}

.appbar{position:sticky; top:0; z-index:50; padding:0;
  background:rgba(7,10,28,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.appbar .wrap{display:flex; align-items:center; gap:22px; height:58px}
.appbar .brand{flex:none}

/* flex:0 1 auto + margin-right:auto — nhom dieu huong chi rong bang chinh no
   va day khoi danh tinh sang phai. Voi flex:1 no an het cho trong roi tu cuon
   ngang, va muc cuoi bi cat mat mot nua chu ngay o man hinh 1400px. */
/* flex:0 0 auto — dieu huong KHONG duoc co lai. Cho no co (0 1 auto) thi tren
   man hinh hep, muc cuoi bi cat mat mot ky tu: "Bình luậ". Mot nhan cut duoi
   trong nhu loi font chu khong trong nhu thieu cho, nen nguoi dung khong biet
   la co the cuon. Cho co lai la khoi danh tinh ben phai — ten xuong cat bang
   dau ba cham thi doc van ra y. */
.appnav{display:flex; gap:2px; flex:0 0 auto; margin-right:auto}
.appnav::-webkit-scrollbar{display:none}
.appnav a{padding:7px 12px; border-radius:9px; font-size:14px; color:var(--ink2);
  white-space:nowrap}
.appnav a:hover{color:var(--ink); background:rgba(128,150,235,.10)}
.appnav a.is-on{color:var(--ink); background:rgba(91,91,232,.20);
  box-shadow:inset 0 0 0 1px rgba(128,150,235,.28)}

.appwho{display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0}
.appwho .ws{display:none; line-height:1.25; text-align:right; padding:4px 10px;
  border-radius:9px; border:1px solid var(--line)}
@media(min-width:900px){ .appwho .ws{display:block} }
.appwho .ws{max-width:210px}
.appwho .ws b{display:block; font-size:13px; font-weight:500; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.appwho .ws span{display:block; font-size:11.5px; color:var(--ink3)}
.appwho .ws:hover{border-color:var(--line2)}

.appfoot{margin-top:56px; border-top:1px solid var(--line); padding:18px 0 30px}
.appfoot .wrap{display:flex; align-items:center; gap:18px; font-size:12.5px; color:var(--ink3)}
.appfoot .sp{flex:1 1 auto}
.appfoot a{color:var(--ink3)}
.appfoot a:hover{color:var(--head)}

/* ── bang dieu khien ──────────────────────────────────────────────────── */
.dash .lib-head{align-items:center}
.dash h1{font-size:26px}

/* align-items:start — neu khong, o luoi hai cot the thap bi keo cao bang the
   cao, va "Gói và hạn mức" (bon dong) de lai mot mang trong nua man hinh ngay
   canh danh sach viec phai lam. */
.dgrid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:22px; align-items:start}
@media(min-width:860px){ .dgrid{grid-template-columns:1.35fr 1fr} }
/* `.lib .dcard` chu khong phai `.dcard`.
 *
 * `.lib section{padding:0}` o khoi tren co do dac hieu (0,1,1) — mot lop va
 * mot the — con `.dcard` chi co (0,1,0). The thua, va moi the tren bang dieu
 * khien mat sach padding: chu dinh sat vien, nut Luu treo ra ngoai goc.
 *
 * Day la cai gia cua viec ghi de `section` bang mot bo chon co ten the. Lan
 * sau them the moi trong `.lib`, nho: phai co it nhat hai lop. */
.lib .dcard{padding:16px 18px; border:1px solid var(--line); border-radius:16px;
  background:var(--panel); margin-top:0}
.lib .dcard > h2{font-size:15.5px; color:var(--head); margin-bottom:12px;
  display:flex; align-items:center; gap:9px}

.dlist{list-style:none; margin:0; padding:0}
.dlist li{display:grid; grid-template-columns:1fr auto; gap:2px 12px;
  padding:9px 0; border-bottom:1px solid rgba(128,150,235,.09)}
.dlist li:last-child{border-bottom:none}
.dlist li a{font-size:14px; color:var(--ink); font-weight:500}
.dlist li a:hover{color:var(--head)}
.dlist li .score{font-family:var(--num); font-size:15px; text-align:right}
.dlist li small{grid-column:1 / -1; font-size:11.5px; color:var(--ink3)}

.ok-empty{font-size:13.5px; color:var(--ink2); padding:6px 0 2px}
.more{font-size:12.5px; font-weight:400; margin-left:auto}
section > h2 .more{margin-left:auto}

.planline{font-size:13.5px; color:var(--ink2); line-height:1.6}
.planline b{color:var(--ink); font-weight:600}
.warnline{margin-top:10px; padding:9px 12px; border-radius:10px; font-size:12.8px;
  color:#F8DFB2; background:rgba(240,178,74,.10); border:1px solid rgba(240,178,74,.34)}

.shortcuts{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line)}
.shortcuts a{font-size:12.8px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink2)}
.shortcuts a:hover{border-color:var(--line2); color:var(--ink)}

/* ── ho so ────────────────────────────────────────────────────────────── */
.prof .dcard .field{margin-top:12px}
.pform .field label{display:block; font-size:12.5px; color:var(--ink2); margin-bottom:6px}
.pform .field input, .pform .field select{
  width:100%; background:rgba(8,12,32,.7); border:1px solid var(--line2); color:var(--ink);
  border-radius:10px; padding:9px 12px; font-family:var(--ui); font-size:14px}
.pform .field input:focus, .pform .field select:focus{
  border-color:rgba(169,198,245,.6); outline:none; box-shadow:0 0 0 3px rgba(91,91,232,.18)}
.pform .field small{display:block; margin-top:5px; font-size:11.5px}
.pform button{margin-top:14px}
.pform.wide{max-width:520px; margin-top:16px}

.check{display:flex; gap:10px; align-items:flex-start; margin-top:14px; cursor:pointer}
.check input{margin-top:3px; accent-color:var(--indigo); width:16px; height:16px; flex:none}
.check span{font-size:13.5px; color:var(--ink)}
.check small{display:block; font-size:11.8px; color:var(--ink3); margin-top:2px}