/* Khoai Portal — theo hệ thiết kế "Khoai Portal" (claude.ai artifact). Mọi màu là token. */
:root {
  --bg:#FBF6E9; --surface:#FFFDF7; --cream:#F5ECD0; --line:#E2D6B4; --ink:#1E2F4A; --ink-muted:#5E6677;
  --brand-red:#E8473F; --action:#C23A32; --action-ink:#FFFFFF; --forest:#152A20;
  --mod-ca:#E8C97A; --mod-ca-ink:#1E2F4A; --mod-lich:#2F6B4F; --mod-lich-ink:#FFFFFF;
  --mod-live:#C23A32; --mod-live-ink:#FFFFFF; --mod-baocao:#1E2F4A; --mod-baocao-ink:#FFFFFF;
  --ok:#2F6B4F; --warn:#8A5A00; --danger:#C23A32;
  --r-sm:6px; --r-md:12px; --r-lg:20px; --pill:999px;
  --shadow:0 1px 0 #E2D6B4, 0 6px 18px rgba(30,47,74,.08);
  --f-sans:"Be Vietnam Pro", system-ui, sans-serif; --f-display:Anton, "Be Vietnam Pro", Impact, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --bg:#12192A; --surface:#1A2438; --cream:#243149; --line:#2F3D57; --ink:#F5ECD0; --ink-muted:#B3AE9C;
  --brand-red:#F0625A; --action:#F0625A; --action-ink:#12192A; --forest:#0C1712;
  --mod-ca:#E8C97A; --mod-ca-ink:#12192A; --mod-lich:#7FB89A; --mod-lich-ink:#12192A;
  --mod-live:#F0625A; --mod-live-ink:#12192A; --mod-baocao:#9DB4DA; --mod-baocao-ink:#12192A;
  --ok:#7FB89A; --warn:#E8C97A; --danger:#F0625A; --shadow:0 1px 0 #2F3D57, 0 6px 18px rgba(0,0,0,.35);
}}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 15px/22px var(--f-sans); }
a { color:inherit; }
h1 { font-size:24px; line-height:32px; font-weight:800; margin:0; }
h2 { font-size:18px; line-height:26px; font-weight:700; margin:0 0 12px; }
.muted { color:var(--ink-muted); }
.small { font-size:13px; line-height:18px; }
.display { font-family:var(--f-display); font-weight:400; letter-spacing:.02em; text-transform:uppercase; }

/* ---------- khung ---------- */
.app { display:grid; grid-template-columns:232px 1fr; min-height:100vh; }
.sb { background:var(--forest); color:#F5ECD0; padding:24px 14px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; overflow:auto; }
.sb .logo { display:flex; align-items:center; gap:10px; margin:0 8px 24px; text-decoration:none; }
.sb .logo i { width:28px; height:28px; border-radius:var(--pill); background:var(--brand-red); }
.sb .logo b { font-size:26px; line-height:1; }
.sb a.nav { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-md); font-size:14px; font-weight:600; text-decoration:none; color:#F5ECD0; min-height:44px; }
.sb a.nav:hover, .sb a.nav.on { background:rgba(245,236,208,.12); }
.sb .nhom { margin:18px 12px 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,236,208,.6); }
.dot { width:10px; height:10px; border-radius:var(--pill); flex:none; box-shadow:0 0 0 1px rgba(245,236,208,.5); }
.dot.ca{background:var(--mod-ca)} .dot.lich{background:var(--mod-lich)} .dot.live{background:var(--mod-live)} .dot.baocao{background:var(--mod-baocao)} .dot.he{background:transparent}
.main { padding:24px 32px 48px; min-width:0; }
.hd { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.hd h1 { flex:1; min-width:200px; }
.tabbar { display:none; }
.wrap { max-width:1100px; }

@media (max-width: 860px) {
  .app { display:block; }
  .sb { display:none; }
  .main { padding:16px 16px 96px; }
  .tabbar { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; position:fixed; left:0; right:0; bottom:0; z-index:5;
            background:var(--surface); border-top:1px solid var(--line); padding:8px 4px calc(10px + env(safe-area-inset-bottom)); }
  .tabbar a { display:grid; justify-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--ink-muted); text-decoration:none; min-height:44px; }
  .tabbar a i { width:28px; height:6px; border-radius:var(--pill); background:var(--line); }
  .tabbar a.on { color:var(--ink); } .tabbar a.on i { background:var(--ink); }
  .tabbar a i.ca{background:var(--mod-ca)} .tabbar a i.lich{background:var(--mod-lich)} .tabbar a i.live{background:var(--mod-live)} .tabbar a i.baocao{background:var(--mod-baocao)}
  .an-mobile { display:none !important; }
}
@media (min-width: 861px) { .an-desktop { display:none !important; } }

/* ---------- thành phần ---------- */
.card { background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border:0; border-radius:var(--r-md);
       background:var(--action); color:var(--action-ink); font:700 15px/1 var(--f-sans); cursor:pointer; text-decoration:none; white-space:nowrap; }
.btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.btn.nho { min-height:36px; padding:0 14px; font-size:13px; }
.btn.chu { background:transparent; color:var(--ink); padding:0 8px; text-decoration:underline; }
.btn:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline:3px solid var(--mod-ca); outline-offset:2px; }
.field { display:grid; gap:6px; }
.field label, .lbl { font-size:13px; font-weight:600; }
input[type=text], input[type=tel], input[type=password], input[type=date], input[type=search], select, textarea {
  min-height:44px; padding:0 14px; border:1px solid var(--ink-muted); border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
  font:400 16px var(--f-sans); width:100%; }
input.pin { letter-spacing:.5em; font-size:22px; font-weight:800; text-align:center; }
.check { display:flex; align-items:center; gap:10px; font-size:14px; min-height:44px; }
.check input { width:20px; height:20px; accent-color:var(--ink); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; }
.stack { display:grid; gap:16px; }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.role { display:inline-flex; align-items:center; gap:8px; min-height:28px; padding:0 12px 0 4px; border-radius:var(--pill); background:var(--cream);
        font-size:13px; font-weight:600; white-space:nowrap; }
.role .av { width:22px; height:22px; border-radius:var(--pill); background:var(--ink); color:var(--bg); display:grid; place-items:center; font-size:11px; font-weight:800; }
.tag { display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:var(--pill); background:var(--cream); font-size:12px; font-weight:600; }
.tag.tam { background:transparent; box-shadow:inset 0 0 0 1px var(--warn); color:var(--warn); }
.tag.het { text-decoration:line-through; color:var(--ink-muted); }

.st { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; white-space:nowrap; }
.st::before { content:""; width:8px; height:8px; border-radius:var(--pill); background:currentColor; }
.st.ok{color:var(--ok)} .st.warn{color:var(--warn)} .st.danger{color:var(--danger)}

.bao { padding:12px 16px; border-radius:var(--r-md); margin-bottom:16px; font-weight:600; background:var(--cream); }
.bao.loi { box-shadow:inset 4px 0 0 var(--danger); } .bao.ok { box-shadow:inset 4px 0 0 var(--ok); } .bao.warn { box-shadow:inset 4px 0 0 var(--warn); }

/* Hub */
.today { background:var(--cream); border-radius:var(--r-lg); padding:16px 20px; display:grid; gap:10px; margin-bottom:28px; }
.task { display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface); border-radius:var(--r-md); font-size:14px; flex-wrap:wrap; }
.task .bar { width:4px; align-self:stretch; border-radius:var(--pill); }
.task .grow { flex:1; min-width:160px; }
.task a { font-weight:700; font-size:13px; }
.bar.ca{background:var(--mod-ca)} .bar.lich{background:var(--mod-lich)} .bar.live{background:var(--mod-live)} .bar.baocao{background:var(--mod-baocao)}
.tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:16px; }
.tile { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:150px; padding:22px; border-radius:var(--r-lg);
        text-decoration:none; overflow:hidden; }
.tile .t { font-family:var(--f-display); font-size:28px; line-height:1; letter-spacing:.02em; text-transform:uppercase; }
.tile .d { font-size:13px; line-height:18px; font-weight:500; max-width:24ch; }
.tile .glyph { position:absolute; right:-16px; bottom:-28px; width:96px; height:96px; border-radius:var(--pill); background:currentColor; opacity:.18; }
.tile .soon { position:absolute; top:14px; right:14px; font-size:11px; font-weight:800; padding:4px 10px; border-radius:var(--pill); background:var(--surface); color:var(--ink); }
.m-ca{background:var(--mod-ca);color:var(--mod-ca-ink)} .m-lich{background:var(--mod-lich);color:var(--mod-lich-ink)}
.m-live{background:var(--mod-live);color:var(--mod-live-ink)} .m-baocao{background:var(--mod-baocao);color:var(--mod-baocao-ink)}
.tile.sap { background:var(--surface); color:var(--ink-muted); box-shadow:inset 0 0 0 2px var(--line); }
.tile:hover { transform:translateY(-1px); }

/* Bảng */
.bang { width:100%; border-collapse:collapse; font-size:14px; background:var(--surface); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); }
.bang th { text-align:left; font-size:12px; font-weight:700; color:var(--ink-muted); padding:10px 14px; background:var(--cream); }
.bang td { padding:12px 14px; border-top:1px solid var(--line); vertical-align:middle; }
.bang td b { display:block; }
.bang .gans { display:flex; gap:6px; flex-wrap:wrap; }
.cuon { overflow-x:auto; border-radius:var(--r-lg); }
@media (max-width: 860px) {
  .bang.the thead { display:none; }
  .bang.the, .bang.the tbody, .bang.the tr, .bang.the td { display:block; width:100%; }
  .bang.the tr { border-top:1px solid var(--line); padding:10px 4px; }
  .bang.the td { border:0; padding:4px 12px; }
}
.loc { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.loc > * { flex:1 1 150px; }
.loc input[type=search] { flex:3 1 240px; }
.hangloat { position:sticky; bottom:12px; display:none; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; margin-top:12px;
            background:var(--ink); color:var(--bg); border-radius:var(--r-md); font-weight:600; font-size:14px; }
.hangloat.hien { display:flex; }
.hangloat select, .hangloat input { min-height:36px; width:auto; flex:1 1 140px; }
.hangloat .btn { min-height:36px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto; }
.tabs a { padding:10px 14px; font-size:14px; font-weight:600; color:var(--ink-muted); text-decoration:none; white-space:nowrap; }
.tabs a.on { color:var(--ink); box-shadow:inset 0 -2px 0 var(--ink); }

/* Ma trận vai trò */
.mt td, .mt th { text-align:center; }
.mt td:first-child, .mt th:first-child { text-align:left; }
.mt input { width:20px; height:20px; accent-color:var(--ink); }
.mt .mod { background:var(--cream); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }

/* Đăng nhập */
.tran { min-height:100vh; display:grid; place-items:center; padding:24px 16px; }
.login { width:100%; max-width:380px; display:grid; gap:16px; padding:32px 24px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand i { width:40px; height:40px; border-radius:var(--pill); background:var(--brand-red); }
.brand b { font-size:40px; line-height:1; }
.pin-lon { font-family:var(--f-display); font-size:56px; letter-spacing:.12em; text-align:center; padding:12px; background:var(--cream); border-radius:var(--r-md); }
@media (max-width: 560px) {
  .tiles { grid-template-columns:1fr 1fr; gap:12px; }
  .tile { min-height:124px; padding:16px; gap:12px; }
  .tile .t { font-size:22px; }
  .tile .d { font-size:12px; line-height:16px; }
  .tile .glyph { width:72px; height:72px; right:-14px; bottom:-22px; }
  .tile .soon { top:10px; right:10px; }
  h1 { font-size:21px; line-height:28px; }
}