:root{
--primary: 79 70 229; --accent: 236 72 153; --good: 16 185 129;
--bad: 239 68 68; --ring: 59 130 246; --warn: 245 158 11;
}
@media (prefers-color-scheme: dark){
:root{ --bg:10 10 16; --fg:236 239 244; --muted:148 163 184; --card:17 24 39; --panel:24 33 49; --border:31 41 55; --primary:129 140 248; --accent:244 114 182; --good:52 211 153; --bad:248 113 113; --ring:96 165 250; --warn:245 158 11; }
}
:root[data-theme="dark"]{ --bg:10 10 16; --fg:236 239 244; --muted:148 163 184; --card:17 24 39; --panel:24 33 49; --border:31 41 55; --primary:129 140 248; --accent:244 114 182; --good:52 211 153; --bad:248 113 113; --ring:96 165 250; --warn:245 158 11; }
:root[data-theme="light"]{ --bg:252 252 255; --fg:17 24 39; --muted:100 116 139; --card:255 255 255; --panel:248 250 252; --border:229 231 235; --primary:79 70 229; --accent:236 72 153; --good:16 185 129; --bad:239 68 68; --ring:59 130 246; --warn:245 158 11; }


*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{height:100%}
body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: rgb(var(--fg)); background: rgb(var(--bg));}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:transparent; border:none; cursor:pointer}
.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}


/* ===== Header ===== */
.header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px); background:linear-gradient(180deg, rgba(127,127,127,.08), transparent); border-bottom:1px solid rgba(var(--border), .6)}
.header .container{max-width:none; width:100%; padding:10px 18px; margin:0 auto}
.bar{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px}
.brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo{width:34px; height:34px; border-radius:12px; overflow:hidden; position:relative; box-shadow:0 6px 22px rgba(0,0,0,.2)}
.logo::before{content:""; position:absolute; inset:0; background: conic-gradient(from 180deg, rgb(var(--primary)), rgb(var(--accent)), rgb(var(--primary))); filter: blur(6px) saturate(1.2)}
.brand span{font-size:18px}
nav{justify-self:center; display:none; gap:6px; background:rgba(127,127,127,.07); padding:4px; border-radius:14px; border:1px solid rgba(var(--border), .7)}
@media (min-width: 900px){ nav{display:inline-flex} }
.tab{position:relative; padding:8px 14px; border-radius:10px; font-weight:700; color:rgb(var(--muted))}
.tab:hover,.tab.active{color:rgb(var(--fg))}
.tab .ink{position:absolute; inset:0; border-radius:10px; background: radial-gradient(120px 60px at var(--x,50%) 110%, rgba(var(--primary), .18), transparent 60%), linear-gradient(180deg, rgba(var(--primary), .18), transparent); opacity:0; transform:translateY(-2px); transition:.2s}
.tab:hover .ink,.tab.active .ink{opacity:1; transform:translateY(0)}
.actions{display:inline-flex; align-items:center; gap:8px}
.theme,.hamburger{border:1px solid rgba(var(--border), .7); background:rgba(127,127,127,.06); padding:8px 12px; border-radius:12px; display:inline-flex; align-items:center; gap:8px}
.hamburger{padding:8px}
@media (min-width: 900px){ .hamburger{display:none} }


/* Mobile sheet */
.sheet-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:1000}
.sheet{position:fixed; inset:0 0 0 auto; width:86%; max-width:360px; background:rgb(var(--card)); transform:translateX(100%); transition:transform .22s ease; z-index:1001; display:flex; flex-direction:column}
.sheet.open{transform:translateX(0)}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(var(--border), .7)}
.sheet-nav{padding:10px; display:grid; gap:6px}
.sheet-nav .link{padding:12px 10px; border-radius:10px; font-weight:700; color:rgb(var(--muted))}
.sheet-nav .link:hover{background:rgba(127,127,127,.08); color:rgb(var(--fg))}


/* Cards/Tables — cơ bản, có thể mở rộng ở mỗi trang */
.card{background: rgb(var(--card)); border:1px solid rgba(var(--border), .8); border-radius:18px; padding:16px; box-shadow: 0 10px 30px rgba(0,0,0,.06)}
.table-container{border:1px solid rgba(var(--border), .8); border-radius:12px; overflow-x:auto}
.table-container table{width:100%; border-collapse:separate; border-spacing:0}
.table-container th,.table-container td{padding:10px 8px; text-align:center; vertical-align:middle; font-size:13px; border-bottom:1px solid rgba(var(--border), .8); white-space:nowrap}
.table-container th{background: rgba(var(--panel), .8); font-weight:700; position:sticky; top:0}


/* Toast — gọn, tuỳ chọn vị trí */
.toast-root{position:fixed; inset:auto 14px 14px auto; display:grid; gap:10px; width:min(92vw, 420px); z-index:9999; pointer-events:none}
.toast-root.bl{inset:auto auto 14px 14px}
.toast{pointer-events:auto; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:12px; background:linear-gradient(180deg, rgba(var(--card),.86), rgba(var(--card),.82)); border:1px solid rgba(var(--border), .7); box-shadow: 0 10px 24px rgba(0,0,0,.16); backdrop-filter: blur(10px) saturate(1.1); transform: translateY(8px) scale(.985); opacity:0; animation: toast-in .18s cubic-bezier(.2,.9,.25,1) forwards; font-size:13px; line-height:1.35}
.toast.success{ border-left:3px solid rgb(var(--good)) }
.toast.error{ border-left:3px solid rgb(var(--bad)) }
.toast .title{ font-weight:500 }
.toast .detail{ font-size:12.5px; color:rgb(var(--muted)); margin-top:2px }
.toast .close{ border:none; background:transparent; cursor:pointer; opacity:.7 }
.toast .close:hover{ opacity:1 }
.toast .bar{ grid-column:1/-1; height:1.5px; background:transparent; overflow:hidden; border-radius:2px; margin-top:4px; position:relative }
.toast .bar::before{ content:""; position:absolute; inset:0; background:rgba(var(--ring), .75); transform:scaleX(1); transform-origin:left; animation: toast-bar 3.6s linear forwards }
@keyframes toast-in{ to{ transform:translateY(0) scale(1); opacity:1 } }
@keyframes toast-out{ to{ transform:translateY(4px) scale(.985); opacity:0 } }
@keyframes toast-bar{ to{ transform:scaleX(0) } }


/* Footer */
.footer{margin-top:24px; border-top:1px solid rgba(var(--border), .6)}
.footer .container{max-width:1160px; margin:0 auto; padding:12px 16px}
.footer .foot{display:flex; align-items:center; justify-content:space-between;