/* ═══════════════════════════════════════════════════════════════════════════
   NEO RETRO CLEAN v3 — correction pass 2 (v9.72, 2026-07-12)
   Thêm: app shell FRAME nhìn thấy được · hero split · artifact SVG · 3 tầng card ·
   nén card dưới · typography contrast. Font: Plus Jakarta Sans (Satoshi không có
   Việt ngữ — quyết định Tony v9.70, KHÔNG đưa lại). Rollback = gỡ 1 dòng <link>.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────────────────── */
:root{
  --canvas:#F8F5EF; --surface:#FFFDFC; --surface-muted:#F1EDE6;
  --ink2:#111214; --ink-soft:#494A4F; --ink-muted:#77787E;
  --line:#D9D2C9; --line-soft:#EDE7DD; --line-strong:#2A2B2E;
  --frame:rgba(17,18,20,.68);
  --coral:#FF7A68; --coral-d:#E05A48;
  --lavender:#DCCEFF; --lavender-soft:#F0EBFF;
  --butter:#F6D56F; --butter-d:#7A5C00;
  --sage:#CFE2BF; --sage-d:#3E6B2E;
  --sky:#CEDDF5; --sky-d:#2E4A7A;

  --font-sans:"Plus Jakarta Sans","Inter",sans-serif;
  --font:var(--font-sans);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --r-ctl:10px; --r-card:16px; --r-sel:18px; --r-lg:20px; --r-frame:24px;

  /* alias token v1/v2 (design.html + markup cũ) */
  --n-canvas:var(--canvas); --n-surface:var(--surface); --n-surface2:var(--surface-muted);
  --n-ink:var(--ink2); --n-text2:var(--ink-soft); --n-text3:var(--ink-muted);
  --n-line:var(--line); --n-line-strong:var(--line-strong);
  --a-coral:var(--coral); --a-coral-d:var(--coral-d); --a-lav:var(--lavender); --a-lav-d:#5B4B8A;
  --a-butter:var(--butter); --a-butter-d:var(--butter-d); --a-sage:var(--sage); --a-sage-d:var(--sage-d);
  --a-sky:var(--sky); --a-sky-d:var(--sky-d);
  --sh-1:none; --sh-2:0 16px 40px rgba(17,18,20,.10);

  /* remap biến cũ */
  --primary:var(--ink2); --accent:var(--ink2); --accent-l:var(--surface-muted); --accent-d:var(--ink-soft);
  --danger:#C93A2B; --warning:var(--butter-d);
  --border:var(--line); --bg:var(--canvas); --card:var(--surface);
  --muted:var(--ink-muted); --text:var(--ink2);
  --ink:var(--ink2); --cream:var(--surface); --cream2:var(--surface-muted);
  --yellow:var(--butter); --teal:var(--sage-d); --orange:var(--coral); --peri:var(--lavender);
  --sh:none; --sh2:none;

  /* ── Phase 1 UI refresh: bổ sung cho đủ bộ chuẩn. Chỉ thêm, không sửa token cũ. ── */
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  /* Cố ý KHÔNG kèm phông đơn cách của da cũ — cổng [6/6] chặn đúng, và cổng đếm chuỗi
     thuần nên nhắc tên nó ngay trong chú thích cũng bị tính. Chuỗi trên đã phủ macOS,
     Windows và Linux; máy nào lạ thì rơi về `monospace`. */

  /* Chuyển động. Ba mức, dùng đúng chỗ: nhanh cho di chuột và bấm, vừa cho ngăn kéo,
     chậm cho hộp thoại. Người bật "giảm chuyển động" thì tất cả về 0 ở cuối file. */
  --motion-fast:120ms; --motion-base:180ms; --motion-slow:240ms;
  --ease-out:cubic-bezier(.2,.8,.3,1); --ease-inout:cubic-bezier(.4,0,.2,1);

  /* Vòng lấy nét. Một giá trị duy nhất cho toàn hệ: trước đây mỗi chỗ tự vẽ một kiểu,
     có chỗ còn tắt hẳn outline nên đi bằng bàn phím không biết mình đang ở đâu. */
  --focus-ring:2px solid var(--line-strong);
  --focus-offset:2px;
  --focus-halo:0 0 0 3px rgba(220,206,255,.55);

  /* Vùng bấm tối thiểu. 44px là ngưỡng cho ngón tay; 36px cho chuột trên màn rộng. */
  --tap-min:44px; --ctl-min:36px;
}

/* ── 2. TYPOGRAPHY ────────────────────────────────────────────────────────── */
body, body.is-admin, body.page-client{
  background:var(--canvas); font-family:var(--font-sans); color:var(--ink2);
  font-size:14px; line-height:21px; -webkit-font-smoothing:antialiased;
}
b, strong{ font-weight:600; }
.page-title{ font-size:40px; line-height:44px; font-weight:600; letter-spacing:-0.035em; color:var(--ink2); }
.page-sub{ font-size:14px; line-height:21px; color:var(--ink-muted); margin-top:6px; font-weight:400; }
.page-header{ margin-bottom:30px; align-items:flex-end; min-height:96px; }
.card-title{ font-size:18px; line-height:24px; font-weight:600; letter-spacing:-0.015em; }
.tnum, .num, td[data-num]{ font-variant-numeric:tabular-nums; }
h1,h2,h3,h4{ font-weight:600; }

/* ── 3. APP SHELL FRAME — sản phẩm nằm TRONG một khung được thiết kế ──────── */
#adminView{
  position:fixed !important; inset:14px;
  padding:72px 0 0 224px;
  background:var(--surface);
  border:1px solid var(--frame);
  border-radius:var(--r-frame);
  overflow:auto;
}
.ds-sidebar{
  position:fixed; top:15px; left:15px; bottom:15px; width:224px;
  background:var(--surface); border-right:1px solid var(--line-soft);
  border-radius:23px 0 0 23px; padding:20px 12px; font-family:var(--font-sans); gap:2px;
}
.ds-topbar{
  position:fixed; top:15px; left:239px; right:15px; height:72px;
  background:var(--surface); border-bottom:1px solid var(--line-soft);
  border-radius:0 23px 0 0; padding:0 32px; gap:14px; z-index:80;
}
.admin-content{
  max-width:1320px !important; margin:0 auto !important;
  padding:28px 36px 48px !important; width:100%;
}
.ds-brand{ padding:6px 10px 20px; font-weight:600; font-size:15px; letter-spacing:-0.01em; color:var(--ink2); font-family:var(--font-sans); }
.ds-brand-ic{ width:28px; height:28px; background:var(--ink2); color:var(--surface); border:none; border-radius:9px; }
.ds-navgroup{ color:var(--ink-muted); font-size:11px; line-height:15px; font-weight:500; letter-spacing:.02em; text-transform:none; padding:24px 12px 6px; }
.ds-navitem{ height:40px; padding:0 12px; gap:10px; border:none; border-radius:var(--r-ctl); font-size:14px; font-weight:500; color:var(--ink-soft); box-shadow:none; }
.ds-navitem i{ font-size:20px; width:20px; color:var(--ink-muted); }
.ds-navitem:hover{ background:var(--surface-muted); color:var(--ink2); }
.ds-navitem.active{ background:var(--lavender-soft); color:var(--ink2); border:none; box-shadow:none; font-weight:500; }
.ds-navitem.active i{ color:var(--ink2); }
.ds-sidebar-foot{ border-top:1px solid var(--line-soft); padding-top:10px; }
.ds-search{
  height:42px; max-width:520px; border-radius:12px;
  background:var(--canvas); border:1px solid var(--line);
  color:var(--ink-muted); font-size:14px; box-shadow:none; padding:0 16px;
}
.ds-search:focus-within{ border-color:var(--line-strong); }
.topbar{ background:transparent; color:var(--ink2); height:72px; box-shadow:none; }
.topbar-brand{ font-family:var(--font-sans); font-weight:600; letter-spacing:-0.01em; color:var(--ink2); }
.topbar-badge{ background:var(--butter); color:var(--ink2); border-radius:999px; font-weight:500; }
.logout-btn{ height:36px; background:var(--surface); color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--r-ctl); font-weight:500; }
.logout-btn:hover{ background:var(--surface-muted); color:var(--ink2); }
@media (max-width:860px){
  #adminView{ inset:8px; padding:72px 0 0 72px; border-radius:18px; }
  .ds-sidebar{ top:9px; left:9px; bottom:9px; width:72px; padding:20px 10px; border-radius:17px 0 0 17px; }
  .ds-topbar{ top:9px; left:81px; right:9px; padding:0 14px; border-radius:0 17px 0 0; }
  .admin-content{ padding:20px 16px 40px !important; }
}

/* ── 4. BUTTONS ───────────────────────────────────────────────────────────── */
.btn{ border:1px solid var(--line); border-radius:11px; background:var(--surface); color:var(--ink2);
  box-shadow:none; font-weight:500; font-family:var(--font-sans); font-size:14px; transition:background .12s,border-color .12s; }
.btn:hover{ background:var(--surface-muted); }
.btn:active{ transform:translateY(1px); }
.btn-amber, .btn-primary{ background:var(--ink2); color:#fff; border-color:var(--ink2); height:42px; padding:0 18px; }
.btn-amber:hover, .btn-primary:hover{ background:#26272B; border-color:#26272B; color:#fff; }
.btn-sm.btn-amber, .btn-sm.btn-primary{ height:34px; padding:0 14px; font-size:13px; }
.btn-accent{ background:var(--butter); color:var(--ink2); border-color:var(--butter); }
.btn-coral{ background:var(--coral); color:#fff; border-color:var(--line-strong); }
.btn-coral:hover{ background:var(--coral-d); }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-soft); }
.btn-ghost:hover{ background:var(--surface-muted); color:var(--ink2); }
.btn-danger, .btn-del{ background:var(--surface); color:#C93A2B; border-color:#E5B4AC; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn:focus-visible, .ds-navitem:focus-visible{ outline:2px solid var(--lavender); outline-offset:2px; }

/* ── 5. BA TẦNG CARD ──────────────────────────────────────────────────────── */
.card, .win, .stat, .kcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none; }
.card-body{ padding:22px; }
.card-head{ padding:18px 22px 0; border-bottom:none; }
.neo-card-selected{ background:var(--surface); border:1px solid rgba(17,18,20,.72) !important; border-radius:var(--r-sel) !important; box-shadow:none !important; }
.neo-card-feature{ border:1px solid var(--ink2) !important; border-radius:var(--r-lg) !important; box-shadow:0 6px 0 var(--ink2) !important; }
.modal-content, .modal-box, .utpdlg{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); box-shadow:0 16px 40px rgba(17,18,20,.10); }
.utpdlg .t{ font-weight:600; }
.utpdlg button{ border-radius:var(--r-ctl); border:1px solid var(--line); font-family:var(--font-sans); font-weight:500; }
.utpdlg button.ok{ background:var(--ink2); color:#fff; border-color:var(--ink2); }
.utpdlg button.danger{ background:var(--coral); color:#fff; border-color:var(--coral); }
.utpdlg-ov{ background:rgba(17,18,20,.32); }

/* ── 6. FORMS ─────────────────────────────────────────────────────────────── */
.form-control, input[type=text], input[type=password], input[type=number], input[type=date], input[type=email], input[type=url], select, textarea{
  border:1px solid var(--line); border-radius:var(--r-ctl); background:var(--surface); color:var(--ink2); font-family:var(--font-sans); font-weight:400; }
.form-control:focus, input:focus, select:focus, textarea:focus{ border-color:var(--line-strong); box-shadow:0 0 0 3px rgba(220,206,255,.4); outline:none; }
input[type=checkbox], input[type=radio]{ accent-color:var(--ink2); }
label{ color:var(--ink-soft); font-weight:500; font-size:13px; }

/* ── 7. PILLS / TABS / TABLES / STATES (giữ v2) ───────────────────────────── */
.pill, .badge, .tag{ border-radius:999px; border:1px solid var(--line); background:var(--surface-muted); color:var(--ink-soft); font-weight:500; }
/* v9.260 — `.pill` trước đây chỉ có viền bo tròn, KHÔNG display/padding/line-height, nên chữ chạm
   viền và bị cắt ở hai đầu (Tony gặp 09/08/2026 ở chip "Mở folder · gỡ" và "0 khoản chi…").
   `.badge` và `.tag` đã có hộp riêng ở admin.html / huong-dan.html nên KHÔNG đụng, tránh lệch hai chỗ đó. */
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; font-size:12px; line-height:1.6; white-space:nowrap; max-width:100%; }
.pill a{ text-decoration:none; }
.pill a:hover{ text-decoration:underline; }
.badge-warning, .b-pending, .pill-pending{ background:var(--butter); color:var(--butter-d); border-color:transparent; }
.badge-success, .b-done, .pill-done{ background:var(--sage); color:var(--sage-d); border-color:transparent; }
.badge-info, .pill-info, .badge-blue{ background:var(--sky); color:var(--sky-d); border-color:transparent; }
.badge-selected, .pill-selected{ background:var(--lavender); color:var(--ink2); border-color:transparent; }
.badge-danger, .badge-red{ background:#FBEDEA; color:#C93A2B; border-color:transparent; }
.tab-btn, .cost-tab, .mgmt-tab{ border-radius:var(--r-ctl); border:1px solid transparent; background:transparent; color:var(--ink-soft); font-weight:500; font-family:var(--font-sans); box-shadow:none; }
.tab-btn:hover, .cost-tab:hover{ background:var(--surface-muted); }
.tab-btn.active, .cost-tab.active, .mgmt-tab.active{ background:var(--lavender-soft); color:var(--ink2); border-color:transparent; box-shadow:none; }
table{ font-family:var(--font-sans); font-variant-numeric:tabular-nums; }
th{ color:var(--ink-muted); font-size:11px; letter-spacing:.03em; font-weight:500; border-bottom:1px solid var(--line) !important; background:var(--surface) !important; }
td{ border-bottom:1px solid var(--surface-muted) !important; color:var(--ink-soft); font-weight:400; }
td strong, td b{ font-weight:600; color:var(--ink2); }
tbody tr:hover td{ background:var(--canvas) !important; }
#mgmtContent table.mgmt-grid td, #mgmtContent table.mgmt-grid th{ border:none !important; border-bottom:1px solid var(--surface-muted) !important; }
#mgmtContent table.mgmt-grid thead th{ border-bottom:1px solid var(--line) !important; background:var(--surface) !important; }
#mgmtContent table.mgmt-grid tbody tr:hover td{ background:var(--canvas) !important; }
.state-empty{ background:var(--surface-muted); border:1px dashed var(--line); border-radius:var(--r-card); color:var(--ink-muted); }
.state-loading{ color:var(--ink-muted); }
.spinner{ border-color:var(--line); border-top-color:var(--ink2); }
.neo-skeleton{ border-radius:var(--r-ctl); background:linear-gradient(90deg,var(--surface-muted) 25%,#E9E4DB 37%,var(--surface-muted) 63%); background-size:400% 100%; animation:neoShimmer 1.3s ease infinite; }
@keyframes neoShimmer{ 0%{background-position:100% 0} 100%{background-position:0 0} }
.neo-toast{ position:fixed; right:24px; bottom:24px; z-index:99999; background:var(--ink2); color:var(--surface); border-radius:var(--r-card); padding:12px 18px; font-size:13px; font-weight:500; box-shadow:0 10px 30px rgba(17,18,20,.18); }
.neo-tooltip{ background:var(--ink2); color:var(--surface); border-radius:8px; padding:5px 9px; font-size:11.5px; }
.login-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-frame); box-shadow:0 16px 40px rgba(17,18,20,.08); border-top:none; }
.login-logo{ font-family:var(--font-sans); font-weight:600; letter-spacing:-0.02em; color:var(--ink2); }
.login-badge{ background:var(--butter); color:var(--ink2); border:none; border-radius:999px; box-shadow:none; font-weight:500; }
#loginView{ background:var(--canvas); }

/* ── 8. HOME DASHBOARD v2 ─────────────────────────────────────────────────── */
.dash-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:24px; align-items:start; }
.dash-grid + .dash-grid{ margin-top:32px; }
.dc-4{ grid-column:span 4; } .dc-5{ grid-column:span 5; } .dc-7{ grid-column:span 7; } .dc-8{ grid-column:span 8; } .dc-12{ grid-column:span 12; }
@media (max-width:1024px){ .dc-4,.dc-5,.dc-7,.dc-8{ grid-column:span 12; } }
.dash-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; box-shadow:none; }
.eyebrow{ font-size:11px; line-height:15px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); }
.dash-card .eyebrow{ margin-bottom:8px; }
.dash-card h3{ font-size:18px; line-height:24px; font-weight:600; letter-spacing:-0.015em; margin:0 0 10px; color:var(--ink2); }
.metric-primary, .dash-num{ font-size:30px; line-height:34px; font-weight:600; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--ink2); }
.dash-num .tot{ font-size:16px; color:var(--ink-muted); font-weight:500; }
.dash-num-l{ font-size:11px; line-height:15px; color:var(--ink-muted); font-weight:500; margin-top:4px; }
/* overview 2 phần: chữ trái · artifact phải (~35%) */
.dash-ov{ display:flex; gap:20px; align-items:stretch; }
.dash-ov .lft{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dash-ov .art{ flex:0 0 35%; display:flex; align-items:center; justify-content:center; }
.dash-ov .art svg{ width:100%; max-width:190px; height:auto; }
/* hero coral split */
.dash-hero{
  background:var(--coral); border:1px solid var(--ink2); border-radius:var(--r-lg);
  padding:22px 24px; color:#fff; box-shadow:0 6px 0 var(--ink2);
  display:flex; gap:20px; align-items:center; min-height:150px; cursor:pointer;
  transition:transform .12s;
}
.dash-hero:hover{ transform:translateY(-1px); }
.dash-hero .lft{ flex:1; min-width:0; }
.dash-hero h3{ color:#fff; font-size:20px; font-weight:600; letter-spacing:-0.015em; margin:0 0 4px; }
.dash-hero p{ color:rgba(255,255,255,.88); font-size:13.5px; line-height:20px; margin:0 0 10px; font-weight:400; }
.dash-hero .cnt{ font-size:30px; line-height:34px; font-weight:600; font-variant-numeric:tabular-nums; }
.dash-hero .brk{ font-size:12.5px; color:rgba(255,255,255,.85); margin-top:4px; font-variant-numeric:tabular-nums; }
.dash-hero .rgt{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px; }
.dash-hero .go{
  width:52px; height:52px; border-radius:50%; background:#fff; color:var(--ink2);
  border:1px solid var(--ink2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .12s;
}
.dash-hero .go:hover{ transform:scale(1.06); }
.dash-hero .cats{ display:flex; gap:6px; }
.dash-hero .cat{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.24); border:1px solid rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; }
.dash-hero .cat svg{ width:13px; height:13px; stroke:#fff; }
.dash-hero .prog{ width:100%; height:4px; border-radius:2px; background:rgba(17,18,20,.25); overflow:hidden; }
.dash-hero .prog > div{ height:100%; background:#fff; border-radius:2px; }
/* action rows v2 */
.dash-row{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 20px; display:flex; align-items:center; gap:14px; cursor:pointer;
  transition:transform .12s, border-color .12s, background .12s;
}
.dash-row:hover{ transform:translateY(-1px); border-color:rgba(17,18,20,.55); }
.dash-row .ic{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dash-row .ic.lav{ background:var(--lavender); } .dash-row .ic.but{ background:var(--butter); } .dash-row .ic.sky{ background:var(--sky); }
.dash-row .ic svg{ width:16px; height:16px; stroke:var(--ink2); }
.dash-row .tx{ flex:1; min-width:0; }
.dash-row .t{ font-size:14.5px; font-weight:500; color:var(--ink2); }
.dash-row .s{ font-size:12px; color:var(--ink-muted); margin-top:1px; }
.dash-row .go{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dash-row .go svg{ width:14px; height:14px; stroke:var(--ink-soft); }
.dash-stack{ display:flex; flex-direction:column; gap:16px; }
/* tenant modules + deadline rows compact */
.tn-mod{ background:var(--surface-muted); border-radius:12px; padding:12px 14px; }
.tn-mod .hd{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.tn-mod .nm{ font-size:13.5px; font-weight:600; color:var(--ink2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tn-mod .st{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.tn-mod .mt{ font-size:11.5px; color:var(--ink-muted); margin-bottom:8px; font-variant-numeric:tabular-nums; }
.tn-mod .bar{ height:5px; background:#fff; border-radius:3px; overflow:hidden; }
.tn-mod .bar > div{ height:100%; border-radius:3px; }
.dl-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--surface-muted); }
.dl-row:last-child{ border-bottom:none; }
.dl-row .u{ font-size:10px; font-weight:600; letter-spacing:.03em; border-radius:999px; padding:2px 8px; flex-shrink:0; }
.dl-row .u.late{ background:#FBEDEA; color:#C93A2B; }
.dl-row .u.soon{ background:var(--butter); color:var(--butter-d); }
.dl-row .tx{ flex:1; min-width:0; }
.dl-row .t{ font-size:13px; font-weight:500; color:var(--ink2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-row .s{ font-size:11.5px; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-row .d{ font-size:12px; font-weight:500; color:var(--ink-soft); flex-shrink:0; font-variant-numeric:tabular-nums; }
.neo-avatar{ width:24px; height:24px; border-radius:50%; background:var(--lavender-soft); color:#4A3E75; font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dash-scroll{ max-height:300px; overflow-y:auto; }

/* ── 13. TRANG PHỤ (supplier-intake · cost-submit · huong-dan · brief) ────────
   Header retro nâu #3B241A + nút coral cũ → hoà Neo Retro Clean. Các trang này
   dùng class .hero/.submit/.seg riêng; !important để thắng rule màu cứng trong <style>. */
.hero{ background:var(--surface) !important; color:var(--ink2) !important; border:1px solid var(--line) !important; border-top:none !important; border-radius:0 0 20px 20px !important; box-shadow:none !important; }
.hero h1, .hero h2, .hero .t, .hero b, .hero strong{ color:var(--ink2) !important; }
.hero .sub, .hero p, .hero small, .hero div{ color:var(--ink-muted) !important; }
.submit{ background:var(--ink2) !important; color:#fff !important; border:1px solid var(--ink2) !important; box-shadow:none !important; border-radius:11px !important; }
.seg button{ border:1px solid var(--line) !important; border-radius:999px !important; box-shadow:none !important; font-weight:500 !important; color:var(--ink-soft) !important; background:var(--surface) !important; }
.seg button.on{ background:var(--lavender-soft) !important; color:var(--ink2) !important; border-color:transparent !important; }
.file .btn{ border:1px dashed var(--line) !important; color:var(--ink-soft) !important; background:var(--surface-muted) !important; border-radius:var(--r-ctl) !important; }


/* ── 14. PHASE 1 — LỚP NỀN CHUẨN (UI refresh 11/08/2026) ─────────────────────
   Mục này thêm những thứ đặc tả đòi mà file chưa có: thang chữ, vòng lấy nét
   thống nhất, trạng thái lỗi, vùng bấm cho ngón tay, và tôn trọng cài đặt giảm
   chuyển động. Không sửa luật nào ở trên; chỉ thêm.
   ────────────────────────────────────────────────────────────────────────── */

/* 14.1 THANG CHỮ — dùng lớp thay vì rải cỡ chữ khắp nơi.
   Cỡ và độ giãn dòng lấy đúng từ đặc tả. `.t-display` tự thu ở màn hẹp vì 40px
   trên máy 390px chiếm gần hết chiều ngang. */
.t-display{ font-size:40px; line-height:44px; font-weight:600; letter-spacing:-.035em; color:var(--ink2); }
.t-section{ font-size:24px; line-height:30px; font-weight:600; letter-spacing:-.02em; color:var(--ink2); }
.t-card   { font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.015em; color:var(--ink2); }
.t-body   { font-size:14px; line-height:21px; font-weight:400; color:var(--ink2); }
.t-label  { font-size:13px; line-height:18px; font-weight:500; color:var(--ink-soft); }
.t-meta   { font-size:12px; line-height:17px; font-weight:500; color:var(--ink-muted); }
.t-mono   { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .t-display, .page-title{ font-size:30px; line-height:36px; letter-spacing:-.025em; }
  .t-section{ font-size:20px; line-height:26px; }
}

/* 14.2 VÒNG LẤY NÉT — một kiểu cho toàn hệ.
   `:focus-visible` chỉ hiện khi đi bằng bàn phím, nên bấm chuột không thấy viền.
   Rule này KHÔNG đặt `!important`: trang nào cần khác vẫn tự đè được. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible{
  outline:var(--focus-ring); outline-offset:var(--focus-offset); border-radius:inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none; border-color:var(--line-strong); box-shadow:var(--focus-halo);
}
/* Bàn phím nhảy tới đâu thì cuộn hẳn ra, không nấp dưới thanh trên cùng. */
:target, :focus-visible{ scroll-margin-top:88px; }

/* 14.3 VÙNG BẤM CHO NGÓN TAY — dưới 768px mọi nút phải đủ 44px.
   Chỉ áp cho nút và ô nhập thật, KHÔNG áp cho mọi phần tử: áp bừa sẽ phình
   các ô trong bảng và làm vỡ bố cục. */
@media (max-width:767px){
  .btn, .tab-btn, .cost-tab, .mgmt-tab, .ds-navitem, .logout-btn,
  button:not(.btn-xs):not([data-compact]){
    min-height:var(--tap-min);
  }
  input[type=text], input[type=password], input[type=number], input[type=date],
  input[type=email], input[type=url], input[type=tel], select, textarea{
    min-height:var(--tap-min); font-size:16px;   /* 16px chặn Safari tự phóng to khi gõ */
  }
}

/* 14.4 BỐN TRẠNG THÁI CHUẨN — rỗng, đang tải, lỗi, không có quyền.
   Trước đây chỉ có rỗng và đang tải; lỗi và không-có-quyền mỗi trang tự vẽ một kiểu. */
.state{ border-radius:var(--r-card); padding:28px 24px; text-align:center; }
.state .ic{ width:40px; height:40px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; border-radius:50%; font-size:20px; }
.state .t{ font-size:15px; font-weight:600; color:var(--ink2); margin-bottom:4px; }
.state .s{ font-size:13px; line-height:19px; color:var(--ink-muted); max-width:38ch; margin:0 auto; }
.state .act{ margin-top:16px; }
.state-empty{ background:var(--surface-muted); border:1px dashed var(--line); color:var(--ink-muted); }
.state-empty .ic{ background:var(--surface); color:var(--ink-muted); }
.state-error{ background:#FBEDEA; border:1px solid #E5B4AC; }
.state-error .ic{ background:#F6DBD5; color:var(--danger); }
.state-error .t{ color:var(--danger); }
.state-denied{ background:var(--surface-muted); border:1px solid var(--line); }
.state-denied .ic{ background:var(--butter); color:var(--butter-d); }
.state-offline{ background:var(--surface-muted); border:1px solid var(--line); }
.state-offline .ic{ background:var(--sky); color:var(--sky-d); }

/* 14.5 THẺ TRẠNG THÁI — trạng thái KHÔNG được chỉ dựa vào màu.
   Mỗi thẻ có một dấu tròn ở đầu; người không phân biệt được màu vẫn đọc được chữ,
   và dấu tròn cho biết đây là một trạng thái chứ không phải nhãn thường.
   Tên lớp là `nchip` chứ không phải `chip`: `.chip` đã có SẴN ba định nghĩa khác
   nhau ở năm trang, và ở Timeline `.chip` chính là thanh Gantt — đặt trùng tên là
   thêm dấu chấm và bo tròn vào biểu đồ tiến độ. */
.nchip{ display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px;
  font-size:12px; line-height:1.6; font-weight:500; white-space:nowrap; border:1px solid transparent; }
.nchip::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; opacity:.75; }
.nchip-todo   { background:var(--surface-muted); color:var(--ink-soft); border-color:var(--line); }
.nchip-doing  { background:var(--sky);       color:var(--sky-d); }
.nchip-review { background:var(--butter);    color:var(--butter-d); }
.nchip-done   { background:var(--sage);      color:var(--sage-d); }
.nchip-urgent { background:#FBEDEA;          color:var(--danger); }
.nchip-picked { background:var(--lavender);  color:#4A3E75; }

/* 14.6 TÔN TRỌNG CÀI ĐẶT GIẢM CHUYỂN ĐỘNG.
   Người bật cài đặt này thường vì chuyển động làm họ chóng mặt hoặc buồn nôn.
   Tắt hẳn hiệu ứng, nhưng GIỮ nguyên việc đổi trạng thái — chỉ bỏ phần động. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .dash-hero:hover, .dash-row:hover, .dash-hero .go:hover{ transform:none; }
}

/* 14.7 CHỈ ĐỌC MÀN HÌNH — chữ chỉ dành cho phần mềm đọc màn hình, mắt không thấy. */
.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;
}
.sr-only-focusable:focus, .sr-only-focusable:focus-visible{
  position:static; width:auto; height:auto; margin:0; overflow:visible; clip:auto; white-space:normal;
}


/* ── 15. PHASE 2A — KHUNG ADMIN Ở MÀN HẸP ────────────────────────────────────
   Trước: dưới 860px thanh bên co thành dải biểu tượng rộng 58px, CHỮ BỊ ẨN. Người
   dùng phải đoán từng biểu tượng, và phần mềm đọc màn hình không đọc được tên mục
   vì chữ bị `display:none` chứ không phải chỉ ẩn khỏi mắt.
   Nay: dưới 768px thanh bên thành NGĂN KÉO trượt ra, có đủ chữ. Từ 768 đến 860px
   giữ dải biểu tượng như cũ — đó là khổ máy tính bảng, chuột vẫn trỏ chính xác.
   ────────────────────────────────────────────────────────────────────────── */

/* Nút mở ngăn kéo. Ẩn ở màn rộng. */
.ds-menu{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; margin-left:-4px; flex:0 0 auto;
  background:transparent; border:1px solid var(--line); border-radius:var(--r-ctl);
  color:var(--ink2); cursor:pointer; font-size:20px;
}
.ds-menu:hover{ background:var(--surface-muted); }
.ds-backdrop{
  position:fixed; inset:0; z-index:110; background:rgba(17,18,20,.45);
  opacity:0; pointer-events:none; transition:opacity var(--motion-base) var(--ease-out);
}

@media (max-width:767px){
  /* Bỏ khung viền bo góc: ở khổ điện thoại nó chỉ ăn mất chiều ngang. */
  #adminView{ inset:0 !important; padding:56px 0 0 0 !important; border:none !important; border-radius:0 !important; }

  .ds-topbar{
    top:0; left:0; right:0; height:56px; padding:0 12px; gap:8px;
    border-radius:0; border-bottom:1px solid var(--line);
  }
  /* Ô tìm ở đây là chữ trang trí, không phải ô nhập thật — ẩn đi để nút chuông,
     ngôn ngữ và đăng xuất không bị đẩy chồng lên nhau. */
  .ds-search{ display:none; }
  .ds-menu{ display:inline-flex; }
  .topbar-brand{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  .ds-sidebar{
    top:0; left:0; bottom:0; width:min(84vw,300px);
    padding:16px 12px 24px; border-radius:0; border-right:1px solid var(--line);
    z-index:120; overflow-y:auto; overscroll-behavior:contain;
    transform:translateX(-100%);
    transition:transform var(--motion-base) var(--ease-out);
  }
  /* Chữ trong ngăn kéo phải hiện lại — luật ẩn chữ của dải biểu tượng nằm ở
     max-width:860px nên vẫn khớp ở đây, phải đè tường minh. */
  .ds-sidebar .ds-navitem span, .ds-sidebar .ds-brand span, .ds-sidebar .ds-navgroup{ display:revert; }
  .ds-sidebar .ds-navitem{ justify-content:flex-start; padding:0 12px; }

  body.ds-drawer-open{ overflow:hidden; }
  body.ds-drawer-open .ds-sidebar{ transform:none; box-shadow:0 0 40px rgba(17,18,20,.28); }
  body.ds-drawer-open .ds-backdrop{ opacity:1; pointer-events:auto; }

  .admin-content{ padding:16px 16px 40px !important; }
}

/* Người bật giảm chuyển động thì ngăn kéo hiện ngay, không trượt. */
@media (prefers-reduced-motion: reduce){
  .ds-sidebar, .ds-backdrop{ transition:none !important; }
}


/* ── 16. PHASE 2B — ĐẦU TRANG Ở MÀN HẸP ──────────────────────────────────────
   `.page-header` là một hàng ngang gồm khối tiêu đề và khối nút. Ở khổ 390px hai
   khối cộng lại rộng 435px trong khung 358px nên chúng CHỒNG LÊN NHAU — chữ phụ
   nằm dưới nút. Cho xuống dòng và canh trái.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .page-header{
    flex-direction:column; align-items:flex-start !important;
    gap:12px; min-height:0; margin-bottom:20px; flex-wrap:nowrap;
  }
  .page-header > *{ width:100%; min-width:0; }
  /* Hàng nút canh trái theo tiêu đề, không dồn sang phải kiểu màn rộng. */
  .page-header > *:last-child{ justify-content:flex-start; flex-wrap:wrap; gap:8px; }
  .page-sub{ margin-top:4px; }
}


/* ── 17. PHASE 2 — neo.css TỰ MANG HÀNH VI MÀN HẸP ───────────────────────────
   Phép rà 11/08 tìm ra một lớp lỗi hệ thống: `neo.css` nạp SAU khối <style> của
   trang, nên mọi luật ở đây KHÔNG kèm điều kiện màn hình đều đè mất luật màn hẹp
   mà trang đã tự viết. 16 chỗ đang bị như vậy. Hậu quả nhìn thấy được: đầu trang
   Admin đặt `align-items:flex-start` cho khổ điện thoại nhưng `neo.css` ép
   `flex-end` không điều kiện, nên cả cột dồn sang phải, chữ phụ nằm dưới nút.

   Cách chữa đúng là neo.css tự khai hành vi màn hẹp, không phải đi thêm
   `!important` vào từng trang. Cổng `tools/css-override-check.js` canh chỗ này.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .page-title{ font-size:30px; line-height:36px; letter-spacing:-.025em; }
  .page-sub{ font-size:13px; line-height:19px; }
  .card-head{ padding:14px 16px 0; flex-wrap:wrap; gap:8px; }
  .card-body{ padding:16px; }
  .card-title{ font-size:16px; line-height:22px; }
  .topbar{ height:56px; }
  .dash-card{ padding:16px; }
  .dash-grid{ gap:16px; }
  .dash-grid + .dash-grid{ margin-top:24px; }
}
@media (max-width:1024px){
  .dash-card{ padding:20px; }
  .dash-grid{ gap:20px; }
}
/* Khổ máy tính bảng giữ dải biểu tượng: mục điều hướng canh giữa, bỏ đệm ngang.
   Không khai ở đây thì luật `.ds-navitem{padding:0 12px}` không điều kiện của neo.css
   đè mất luật canh giữa mà admin.html đã viết cho khổ này. */
@media (min-width:768px) and (max-width:860px){
  .ds-navitem{ justify-content:center; padding:0; }
  .ds-navitem i{ margin:0; }
}


/* ── 18. PHASE 3 — CỔNG KHÁCH VỀ NEO RETRO CLEAN ─────────────────────────────
   Bản kiểm 10/08 xếp P1: "cổng khách vẫn dùng phông đơn cách và viền nặng".
   Nguyên nhân: `index.html` KHÔNG nạp neo.css, nên nó vẫn sống bằng bộ da nâu-kem
   cũ khai ngay trong trang. Nay trang đã nạp neo.css; phần dưới đây phủ nốt những
   lớp riêng của cổng khách mà neo.css chưa có.

   Mọi luật đặt trong phạm vi `.page-client` — không phải để tăng độ cụ thể, mà để
   không đụng trang khác. `.chip` là ví dụ: ở Timeline nó là thanh Gantt.
   ────────────────────────────────────────────────────────────────────────── */

.page-client{ background:var(--canvas); }
.page-client #loginView{ background:var(--canvas); }

/* Ô nhập lúc đăng nhập — cùng một hình thức với ô nhập trong Portal. */
.page-client .login-input{
  border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--surface); color:var(--ink2); font-family:var(--font-sans);
}
.page-client .login-input:focus{ border-color:var(--line-strong); box-shadow:var(--focus-halo); outline:none; }

/* Nút. Việc chính dùng nền mực đặc; việc phụ dùng nền trắng viền mảnh.
   Bỏ bóng cứng và hiệu ứng dịch chuyển khi bấm — đó là ngôn ngữ của da cũ. */
.page-client .btn{ border:1px solid var(--line); border-radius:11px; box-shadow:none; font-weight:500; }
.page-client .btn:active{ transform:translateY(1px); box-shadow:none; }
.page-client .btn-primary{ background:var(--ink2); color:#fff; border-color:var(--ink2); box-shadow:none; }
.page-client .btn-primary:hover{ background:#26272B; }
.page-client .btn-accent{ background:var(--butter); color:var(--ink2); border-color:var(--butter); }
.page-client .btn-ghost{ background:transparent; border-color:transparent; color:var(--ink-soft); }
.page-client .btn-ghost:hover{ background:var(--surface-muted); color:var(--ink2); }
.page-client .btn-download,
.page-client .btn-share-main{
  background:var(--ink2); color:#fff; border:1px solid var(--ink2);
  border-radius:11px; box-shadow:none; font-weight:500;
}
.page-client .btn-download:hover, .page-client .btn-share-main:hover{ background:#26272B; transform:none; }
.page-client .btn-edit-link{
  background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); border-radius:var(--r-ctl);
}
.page-client .btn-edit-link:hover{ background:var(--surface-muted); color:var(--ink2); border-color:var(--line); }
.page-client .share-topbar-btn{
  background:var(--surface); color:var(--ink2); border:1px solid var(--line); border-radius:var(--r-ctl); font-weight:500;
}
.page-client .share-topbar-btn:hover{ background:var(--surface-muted); transform:none; }

/* Thanh trên và hàng dự án. */
.page-client .topbar{ background:var(--surface); color:var(--ink2); border-bottom:1px solid var(--line-soft); }
.page-client .topbar-brand{ font-family:var(--font-sans); color:var(--ink2); }
.page-client .logout-btn{
  background:var(--surface); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:var(--r-ctl); font-weight:500;
}
.page-client .logout-btn:hover{ background:var(--surface-muted); color:var(--ink2); }
.page-client .project-bar, .page-client .tabs{ background:var(--surface); border-bottom:1px solid var(--line); }

/* Thẻ chọn dự án và thẻ lọc. Đang chọn thì nền tím nhạt — cùng dấu hiệu với Portal. */
.page-client .proj-pill, .page-client .chip{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  font-weight:500; border-radius:999px;
}
.page-client .proj-pill:hover, .page-client .chip:hover{ background:var(--surface-muted); color:var(--ink2); }
.page-client .proj-pill.active, .page-client .chip.active{
  background:var(--lavender-soft); color:var(--ink2); border-color:transparent; font-weight:600;
}
.page-client .tab-btn{ color:var(--ink-soft); font-weight:500; }
.page-client .tab-btn.active{ color:var(--ink2); border-bottom-color:var(--ink2); font-weight:600; }

/* Thẻ nội dung và khối mời vào thư viện. */
.page-client .card, .page-client .library-cta{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:none;
}
.page-client .library-cta-title{ color:var(--ink2); }

/* Bảng. */
.page-client th{
  background:var(--surface); color:var(--ink-muted); border-bottom:1px solid var(--line);
  font-family:var(--font-sans); font-size:11px; letter-spacing:.03em; font-weight:500;
}
.page-client td{ border-bottom:1px solid var(--surface-muted); color:var(--ink-soft); }
.page-client tr:hover td{ background:var(--canvas); }
.page-client table{ background:var(--surface); }

/* Thẻ trạng thái công việc. Dùng đúng bộ màu trạng thái của Portal, và
   `--sage-d`/`--sky-d` cho chữ để đạt chuẩn tương phản trên nền nhạt. */
.page-client .badge-completed  { background:var(--sage);          color:var(--sage-d);   border:1px solid transparent; }
.page-client .badge-in-progress{ background:var(--sky);           color:var(--sky-d);    border:1px solid transparent; }
.page-client .badge-not-started{ background:var(--surface-muted); color:var(--ink-soft); border:1px solid var(--line); }
.page-client .badge-blocked    { background:#FBEDEA;              color:var(--danger);   border:1px solid transparent; }

/* Biểu đồ tiến độ: giữ nguyên nội thất, chỉ làm nhẹ khung và nút. */
.page-client .gantt-wrap{ border:1px solid var(--line); border-radius:var(--r-card); }
.page-client .gantt-update-btn, .page-client .gantt-select{
  border:1px solid var(--line); border-radius:var(--r-ctl);
  background:var(--surface); color:var(--ink2); font-family:var(--font-sans);
}


/* ── 19. PHASE 2B — TỔNG QUAN ADMIN BA CỘT ───────────────────────────────────
   Trước: màn hình đầu là một thẻ số liệu tổng lớn cạnh hộp Chờ duyệt; việc cần
   làm hôm nay và hạn chót nằm dưới, phải cuộn mới thấy. Nay màn hình đầu trả lời
   đúng ba câu: cần xử lý gì · đang chạy cái gì · sắp tới hạn cái gì. Số liệu tổng
   hợp toàn studio và theo khách xuống dưới, vì đó là thứ xem theo tuần chứ không
   phải mở ra là cần.
   ────────────────────────────────────────────────────────────────────────── */
.dash-colhd{
  font-size:11px; line-height:15px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:10px;
}
.dash-col{ display:flex; flex-direction:column; min-height:0; }
.dash-col .dash-scroll{ flex:1; min-height:0; max-height:320px; }
.dash-colnum{ margin-bottom:12px; }
.dash-colfoot{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.dash-none{ padding:14px 0; color:var(--ink-muted); font-size:13px; }

/* Một dự án đang chạy, dạng gọn. Cùng ngôn ngữ với thẻ khách hàng bên dưới. */
.dash-mini{
  background:var(--surface-muted); border-radius:12px; padding:11px 13px;
  margin-bottom:8px; cursor:pointer;
  transition:background var(--motion-fast) var(--ease-out);
}
.dash-mini:last-child{ margin-bottom:0; }
.dash-mini:hover{ background:#E9E4DB; }
.dash-mini .hd{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.dash-mini .nm{ font-size:13.5px; font-weight:600; color:var(--ink2); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-mini .pc{ font-size:11.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums; flex-shrink:0; }
.dash-mini .mt{ font-size:11.5px; color:var(--ink-muted); margin-bottom:8px; }
.dash-mini .mt .lt{ color:var(--danger); font-weight:600; }
.dash-mini .bar{ height:5px; background:var(--surface); border-radius:3px; overflow:hidden; }
.dash-mini .bar > div{ height:100%; border-radius:3px; }

/* Ba cột chỉ đứng cạnh nhau khi đủ rộng. Dưới 1024px chúng xếp dọc — luật `.dc-4`
   sẵn có trong mục 8 lo việc đó. */
@media (min-width:1025px){
  .dc-4.dash-col, .dc-4.dash-stack{ max-height:none; }
}


/* Hộp "Chờ duyệt" khi nằm trong cột hẹp: bỏ hàng biểu tượng trang trí, cho chữ thở.
   Ở cột rộng 355px mà giữ nguyên bố cục của thẻ rộng thì tiêu đề, câu mô tả và con số
   chen nhau, dòng phân tách bị gãy giữa chừng. */
.dc-4 .dash-hero{ min-height:0; padding:18px 20px; gap:14px; align-items:flex-start; }
.dc-4 .dash-hero h3{ font-size:18px; line-height:24px; }
.dc-4 .dash-hero p{ font-size:13px; line-height:19px; margin-bottom:12px; }
.dc-4 .dash-hero .cnt{ font-size:26px; line-height:30px; }
.dc-4 .dash-hero .brk{ font-size:12px; line-height:17px; }
.dc-4 .dash-hero .cats{ display:none; }
.dc-4 .dash-hero .rgt{ padding-top:2px; }


/* ── 20. PHASE 2C — HÀNG TAB CỦA CHI TIẾT DỰ ÁN ──────────────────────────────
   Trước: chín tab, một đường dẫn Storyboard và một nút Chốt SB nằm chung một hàng,
   trông giống hệt nhau. Người dùng đếm ra mười một lối xem trong khi thật ra có chín,
   và bấm nhầm Chốt SB — một hành động GHI dữ liệu — khi đang định chuyển tab.
   Nay tab là tab, thao tác là thao tác, hai hàng riêng.
   Ở khổ điện thoại hàng tab cuộn ngang thay vì xuống dòng thành ba tầng.
   ────────────────────────────────────────────────────────────────────────── */
.pd-tabs{
  display:flex; gap:4px; margin-top:10px; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; scroll-behavior:smooth;
  padding-bottom:2px;
}
.pd-tabs::-webkit-scrollbar{ display:none; }
.pd-tab{
  flex:0 0 auto; height:34px; padding:0 14px; border:1px solid transparent; border-radius:var(--r-ctl);
  background:transparent; color:var(--ink-soft); font-family:var(--font-sans); font-size:13px;
  font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background var(--motion-fast) var(--ease-out), color var(--motion-fast);
}
.pd-tab:hover{ background:var(--surface-muted); color:var(--ink2); }
.pd-tab.active{ background:var(--lavender-soft); color:var(--ink2); font-weight:600; }
.pd-tab:focus-visible{ outline:var(--focus-ring); outline-offset:var(--focus-offset); }

.pd-actions{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.pd-actions:empty{ display:none; }
/* Vạch mảnh tách hai hàng, để mắt thấy ngay đây là hai nhóm khác nhau. */
.pd-actions:not(:empty){ border-top:1px solid var(--line-soft); padding-top:8px; }

@media (max-width:767px){
  .pd-tab{ height:44px; padding:0 16px; font-size:14px; }
  .pd-tabs{ margin-left:-14px; margin-right:-14px; padding-left:14px; padding-right:14px; }
}


/* Vùng nguy hiểm của chi tiết dự án — đóng sẵn.
   Nó nằm cuối trang Tổng quan, ngay dưới những khối người dùng mở ra hàng ngày. Để mở sẵn thì
   một nút xoá không hoàn tác được luôn nằm trong tầm bấm nhầm. Dùng thẻ <details> của trình
   duyệt nên đóng mở được bằng bàn phím và phần mềm đọc màn hình đọc đúng trạng thái. */
.pd-danger{
  background:var(--surface); border:1px solid #E5B4AC; border-radius:var(--r-card);
  margin-top:14px; overflow:hidden;
}
.pd-danger > summary{
  list-style:none; cursor:pointer; padding:14px 20px; display:flex; align-items:center; gap:9px;
  font-size:14px; font-weight:600; color:var(--danger); min-height:44px;
}
.pd-danger > summary::-webkit-details-marker{ display:none; }
.pd-danger > summary::after{
  content:"Mở"; margin-left:auto; font-size:12px; font-weight:500; color:var(--ink-muted);
}
.pd-danger[open] > summary::after{ content:"Đóng"; }
.pd-danger > summary:hover{ background:#FBEDEA; }
.pd-danger > summary:focus-visible{ outline:var(--focus-ring); outline-offset:-2px; }
.pd-danger-bd{ padding:0 20px 18px; border-top:1px solid #F1DED9; padding-top:14px; }
/* Khai tường minh việc ẩn thay vì trông vào mặc định của trình duyệt: đo trên bản chạy
   thấy có trình duyệt vẫn vẽ nội dung khi thẻ đang đóng, tức nút xoá vẫn nằm trong tầm bấm. */
.pd-danger:not([open]) > .pd-danger-bd{ display:none; }


/* ── 21. PHASE 4 — BA CÔNG CỤ GIỮ CÁ TÍNH RIÊNG ──────────────────────────────
   Creative Board, Timeline và Project Hub nay dùng chung lớp nền: cùng thang chữ,
   cùng vòng lấy nét, cùng ngưỡng vùng bấm, cùng bốn trạng thái. Cái KHÔNG dùng
   chung là cá tính: Board giữ phông đơn cách và sắc tím, Timeline giữ biểu đồ
   Gantt. Đưa cả hai về giống hệt Portal là xoá mất thứ làm chúng nhận ra được.
   ────────────────────────────────────────────────────────────────────────── */

/* Creative Board — phông đơn cách là nhận diện của nó, không phải da cũ.
   neo.css nạp sau nên phải khai lại ở đây, nếu không thân trang bị đổi sang phông thường. */
body.page-board{ font-family:var(--font-mono); }
body.page-board .btn,
body.page-board input, body.page-board select, body.page-board textarea{ font-family:var(--font-mono); }
/* Nhưng chữ trong hộp thoại và nhãn thì theo phông thường — đọc đoạn dài bằng phông đơn
   cách rất mỏi mắt, và bản kiểm đã nêu đúng chỗ này. */
body.page-board .utpdlg, body.page-board .state, body.page-board label{ font-family:var(--font-sans); }

/* Timeline — biểu đồ Gantt giữ nguyên nội thất; chỉ khung và nút theo hệ chung. */
body.page-timeline .gantt-wrap{ border:1px solid var(--line); border-radius:var(--r-card); }

/* Project Hub — trang khách xem, theo hệ chung hoàn toàn. */
body.page-hub{ background:var(--canvas); }

/* Cả ba: dưới 768px mọi thứ bấm được phải đủ 44px. Luật ở mục 14.3 đã lo,
   phần này chỉ thêm những phần tử ba trang tự đặt tên. */
@media (max-width:767px){
  body.page-board .b-btn, body.page-board .tool,
  body.page-timeline .gantt-update-btn, body.page-timeline .gantt-select,
  body.page-hub .hbtn{ min-height:44px; }
}


/* Cửa vào Timeline: nút chính và nút phụ theo hệ chung.
   Trước đó nút phụ dùng sắc xanh dương của biến `--brand` — màu đó không nằm trong bảng
   Neo Retro Clean, đứng cạnh sắc tím của nút chính thành hai giọng khác nhau trên cùng thẻ. */
body.page-timeline #gate .go{
  background:var(--ink2); color:#fff; border:1px solid var(--ink2);
  border-radius:11px; font-weight:500; font-family:var(--font-sans);
}
body.page-timeline #gate .go:hover{ background:#26272B; }
body.page-timeline #gate .alt{
  background:var(--surface); color:var(--ink-soft); border:1px solid var(--line);
  border-radius:11px; font-weight:500; font-family:var(--font-sans);
}
body.page-timeline #gate .alt:hover{ background:var(--surface-muted); color:var(--ink2); }
body.page-timeline #empty .go{
  background:var(--ink2); color:#fff; border:1px solid var(--ink2);
  border-radius:11px; font-weight:500; font-family:var(--font-sans);
}


/* ── 22. VÙNG BẤM CỦA Ô TICK VÀ NÚT CHỌN ─────────────────────────────────────
   Quét 11/08 đếm được 68 ô tick cao 16px ở trang nhận hồ sơ đối tác và 5 chỗ ở trang
   Brief. Cách chữa KHÔNG phải phóng to cái ô — ô tick 44px trông như một cái hộp lớn
   vô duyên. Cách đúng là nới VÙNG BAO quanh nó: cả dòng chữ trở thành chỗ bấm được,
   đúng như trình duyệt vốn hiểu về thẻ <label>.
   Không đổi `display` của thẻ bao: các trang tự xếp chữ và nhãn phụ bên trong theo
   nhiều kiểu khác nhau, ép sang hàng ngang là làm vỡ những chỗ đang đúng.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]){
    min-height:44px; align-items:center; padding-top:4px; padding-bottom:4px;
  }
  /* Ô tick to hơn một chút cho ngón tay, nhưng vẫn là ô tick. */
  input[type=checkbox], input[type=radio]{ width:19px; height:19px; }
}


/* Thẻ nhãn dài ở khổ điện thoại được phép xuống dòng.
   `.pill` khai `white-space:nowrap` để nhãn ngắn không gãy giữa chừng — đúng cho nhãn ngắn.
   Nhưng gặp một câu dài thì chữ tràn khỏi hộp và kéo cả trang trượt ngang: trang Hướng dẫn
   có một thẻ như vậy, hộp rộng 354px mà chữ dài 685px, đủ để cả trang tràn ra 704px.
   Ở khổ hẹp cho xuống dòng; ở khổ rộng giữ nguyên vì chỗ đủ. */
@media (max-width:767px){
  .pill, .badge, .tag{ white-space:normal; }
}


/* ── 23. TỔNG QUAN DỰ ÁN HAI CỘT ─────────────────────────────────────────────
   Bản kiểm 10/08 gọi trang này là "kho cài đặt": quyền truy cập, tiền, Telegram,
   Drive, cổng khách và vùng xoá nằm chung một trục đọc, nên không phân biệt được
   cái nào cần xem hàng ngày và cái nào chỉnh một lần rồi thôi.
   Cột trái là thứ THUỘC VỀ dự án (người và tiền). Cột phải là thứ ĐƯA dự án ra
   ngoài (thao tác nhanh và cổng khách). Dưới 1024px xếp dọc như cũ — hai cột trên
   màn hẹp chỉ làm mỗi cột hẹp thêm.
   ────────────────────────────────────────────────────────────────────────── */
.pd-grid{ display:grid; grid-template-columns:1fr; gap:16px; align-items:start; margin-top:14px; }
.pd-col{ min-width:0; }
@media (min-width:1025px){
  .pd-grid{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:18px; }
}
/* Hàng nút thao tác nhanh: tự xuống dòng, mỗi nút đủ tầm ngón tay ở khổ hẹp. */
.pd-quick{ display:flex; flex-wrap:wrap; gap:8px; }
.pd-quick .btn{ flex:1 1 auto; min-width:132px; justify-content:center; }
@media (max-width:767px){
  .pd-quick .btn{ min-height:44px; flex:1 1 calc(50% - 4px); }
}


/* Thẻ dự án của cổng khách nay là thẻ <button> chứ không phải khối div gắn onclick — khối div
   không nhận được con trỏ bàn phím và phần mềm đọc màn hình không đọc ra là bấm được.
   Đổi sang nút thì phải khai lại ba thứ trình duyệt tự áp cho nút: phông riêng, chữ canh giữa,
   và bề ngang co theo nội dung. */
button.dash-card{
  font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
button.dash-card:focus-visible{ outline:var(--focus-ring); outline-offset:var(--focus-offset); }