:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1d2733; --muted:#64748b; --line:#e2e8f0; --line2:#cbd5e1;
  --pri:#0e7490; --pri-d:#0b5c72; --pri-l:#e0f2f7; --ok:#15803d; --ok-l:#dcfce7; --warn:#b45309; --warn-l:#fef3c7;
  --bad:#b91c1c; --bad-l:#fee2e2; --radius:10px; --shadow:0 1px 2px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.05);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.45 "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:var(--pri);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5em;line-height:1.25} h1{font-size:20px} h2{font-size:17px} h3{font-size:15px}
.topbar{background:#0f3d4c;color:#fff;display:flex;align-items:center;gap:16px;padding:10px 20px;position:sticky;top:0;z-index:20}
.topbar .brand{font-weight:700;font-size:16px;white-space:nowrap}
.topbar .sub{opacity:.75;font-size:13px}
.topbar nav{display:flex;gap:4px;margin-left:12px}
.topbar nav a{color:#cfe8ef;padding:6px 12px;border-radius:6px}
.topbar nav a.on,.topbar nav a:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.topbar .sp{flex:1}
.wrap{max-width:1500px;margin:0 auto;padding:18px 20px 60px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:16px}
.card > h2:first-child{display:flex;align-items:center;gap:8px}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.col{display:flex;flex-direction:column;gap:4px}
.grow{flex:1;min-width:0}
.muted{color:var(--muted)} .small{font-size:12px}
.right{margin-left:auto}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);font-weight:600}
input[type=text],input[type=password],input[type=date],input[type=search],select,textarea{
  font:inherit;color:inherit;border:1px solid var(--line2);border-radius:7px;padding:7px 10px;background:#fff;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri-l);border-color:var(--pri)}
textarea{resize:vertical;width:100%}
.btn{font:inherit;border:1px solid var(--line2);background:#fff;color:var(--ink);border-radius:7px;padding:7px 14px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:#f8fafc;text-decoration:none}
.btn.pri{background:var(--pri);border-color:var(--pri);color:#fff} .btn.pri:hover{background:var(--pri-d)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.bad{color:var(--bad);border-color:#fca5a5} .btn.bad:hover{background:var(--bad-l)}
.btn.sm{padding:4px 10px;font-size:12.5px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;background:#eef2f7;color:#334155;white-space:nowrap}
.tag.ok{background:var(--ok-l);color:var(--ok)} .tag.warn{background:var(--warn-l);color:var(--warn)} .tag.bad{background:var(--bad-l);color:var(--bad)} .tag.pri{background:var(--pri-l);color:var(--pri-d)}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
table.t th,table.t td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.t th{background:#f8fafc;font-weight:600;color:#475569;position:sticky;top:0;z-index:2;white-space:nowrap}
table.t tr:hover td{background:#fbfdff}
table.t td.num,table.t th.num{text-align:right;font-variant-numeric:tabular-nums}
.prog{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden;min-width:90px}
.prog > i{display:block;height:100%;background:var(--ok);border-radius:99px}
.prog.mid > i{background:#d97706} .prog.low > i{background:#dc2626}
.stat{display:flex;gap:12px;flex-wrap:wrap}
.stat .box{background:#f8fafc;border:1px solid var(--line);border-radius:9px;padding:10px 14px;min-width:130px}
.stat .box b{display:block;font-size:20px}
.stat .box span{font-size:12px;color:var(--muted)}
.toast{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px}
.toast div{background:#1e293b;color:#fff;padding:10px 14px;border-radius:8px;box-shadow:var(--shadow);max-width:420px}
.toast div.err{background:var(--bad)} .toast div.ok{background:var(--ok)}
.modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:5vh 12px;overflow:auto}
.modal{background:#fff;border-radius:12px;max-width:760px;width:100%;padding:18px 20px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal h2{display:flex;align-items:center}
.modal .x{margin-left:auto;cursor:pointer;border:0;background:none;font-size:22px;color:var(--muted)}
.busy{position:fixed;inset:0;background:rgba(255,255,255,.75);z-index:90;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;font-weight:600}
.spin{width:38px;height:38px;border:4px solid var(--pri-l);border-top-color:var(--pri);border-radius:50%;animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.drop{border:2px dashed var(--line2);border-radius:10px;padding:26px;text-align:center;background:#fafcff;cursor:pointer;transition:.15s}
.drop:hover,.drop.on{border-color:var(--pri);background:var(--pri-l)}
.drop b{color:var(--pri)}
.chk{display:flex;gap:6px;align-items:flex-start;cursor:pointer}
.chk input{margin-top:3px}
.cols-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:8px}

/* ===== Trang khoa ===== */
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start}
.layout > main{min-width:0}
.gt-table td.bs{min-width:150px}
.side{position:sticky;top:62px;max-height:calc(100vh - 80px);overflow:auto}
.side .item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;cursor:pointer;font-size:13px}
.side .item:hover{background:#f1f5f9}
.side .item.on{background:var(--pri-l);color:var(--pri-d);font-weight:600}
.side .item .n{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.side .item.done .n{color:var(--ok)}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.gt-table{overflow:auto;max-height:calc(100vh - 250px);border:1px solid var(--line);border-radius:8px}
.gt-table table.t td{background:#fff}
.gt-table td.cell{max-width:340px;min-width:90px}
.gt-table td.cell .clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.gt-table td.cell .clamp.open{-webkit-line-clamp:unset}
.gt-table td.wide{min-width:280px}
.gt-table th.gt,.gt-table td.gt{position:sticky;right:0;z-index:1;min-width:300px;width:340px;background:#fffbeb;border-left:2px solid #fcd34d}
.gt-table th.gt{z-index:3;background:#fef3c7}
.gt-table td.gt textarea{min-height:54px;font-size:13px;background:#fff}
.gt-table td.gt .meta{font-size:11px;color:var(--muted);margin-top:2px;min-height:14px}
.gt-table td.gt .meta.saving{color:var(--warn)} .gt-table td.gt .meta.saved{color:var(--ok)} .gt-table td.gt .meta.err{color:var(--bad)}
.gt-table tr.done td.gt{background:#f0fdf4}
.gt-table td.sel,.gt-table th.sel{width:30px;text-align:center}
.bulkbar{display:flex;gap:8px;align-items:flex-start;background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:10px;margin-bottom:10px;flex-wrap:wrap}
.bulkbar textarea{flex:1;min-width:260px;min-height:40px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:10px}
.empty{padding:40px;text-align:center;color:var(--muted)}
.login{max-width:380px;margin:12vh auto}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .side{position:static;max-height:none}
  .topbar{flex-wrap:wrap}
}

/* ===== v2: người dùng, lỗi, báo cáo ===== */
.usr{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.usr .role{font-size:11px;padding:2px 8px;border-radius:99px;background:#22d3ee33;color:#a5f3fc;font-weight:600}
.usr .role.khoa{background:#fde68a33;color:#fde68a}
.muted2{opacity:.65}
.btn.ghost{background:transparent;color:#cfe8ef;border-color:#ffffff33}
.btn.ghost:hover{background:#ffffff1a}
.modal.wide{max-width:1100px}
.err-ico{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--bad);color:#fff;align-items:center;justify-content:center;font-weight:800;margin-right:8px;flex:none}
.err-ico.warn{background:#d97706}
.err-msg{font-size:15px;font-weight:600;margin-bottom:8px}
.err-hint{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:9px 12px;margin-bottom:10px;font-size:13px}
.err-box{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;background:#f8fafc;border:1px dashed var(--line2);border-radius:8px;padding:10px 12px;margin:10px 0}
.err-box div{display:flex;flex-direction:column;font-size:12px}
.err-box span{color:var(--muted)}
.err-box b.code{font-family:Consolas,monospace;font-size:14px;color:var(--bad)}
.pre{background:#0f172a;color:#e2e8f0;padding:10px;border-radius:8px;font-size:11.5px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-all}
.toast div.clickable{cursor:pointer}
.warn-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}
.warn-list li{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:6px 9px;border-radius:7px;background:#f8fafc}
.warn-list li.warn{background:#fffbeb}
.warn-list li.err{background:#fef2f2}
.warn-list li code{font-weight:700;color:var(--warn);flex:none}
.map-t select{max-width:230px;font-size:12.5px;padding:4px 6px}
.map-t td{padding:4px 8px}
.sheet-card{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.sheet-card.bad{background:#fef2f2;border-color:#fecaca}
.sheet-card.e111{background:#fffbeb;border-color:#fde68a}
.lockbar{background:#fef3c7;border:1px solid #fcd34d;color:#92400e;border-radius:8px;padding:8px 12px;margin-bottom:10px;font-weight:600}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{background:#eef6f9}
th.sortable .ar{opacity:.35;margin-left:3px}
th.sortable.on .ar{opacity:1;color:var(--pri)}
tr.khoa-row{cursor:pointer}
tr.khoa-row td:first-child::before{content:'▸ ';color:var(--muted)}
tr.khoa-row.open td:first-child::before{content:'▾ '}
tr.bs-row td{background:#fafcff;font-size:12.5px}
tr.bs-row td:first-child{padding-left:28px}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.live i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e33}
.live.off i{background:#94a3b8;box-shadow:none}
.lv{font-size:11px;font-weight:700;padding:1px 7px;border-radius:99px;text-transform:uppercase}
.lv.info{background:#e0f2fe;color:#0369a1}.lv.warn{background:#fef3c7;color:#92400e}.lv.error{background:#fee2e2;color:#b91c1c}.lv.client{background:#ede9fe;color:#6d28d9}
table.t code{white-space:nowrap}
/* cộng tác nhiều người */
.gt-table tr.conflict td.gt{background:#fff7ed}
.conf{margin-top:6px;border:1px solid #fdba74;background:#fff7ed;border-radius:7px;padding:7px;font-size:12px;display:flex;flex-direction:column;gap:5px}
.conf .theirs{background:#fff;border:1px dashed #fdba74;border-radius:6px;padding:5px 7px;white-space:pre-wrap;max-height:120px;overflow:auto}
.gt-table tr.flash td{animation:fl 2.5s ease}
@keyframes fl{0%{background:#dcfce7}100%{}}