/* Giao diện quản trị + cổng CTV */
body.panel{background:#f4f7f5;font-size:15px}
.hide{display:none!important}
.login-box{max-width:420px;margin:7vh auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--sh)}
.login-box h1{font-size:1.4rem;color:var(--teal-d);margin-bottom:4px}
.tabs{display:flex;gap:6px;margin:14px 0 4px;background:#eef3f0;border-radius:12px;padding:4px}
.tabs button{flex:1;border:0;background:none;padding:9px;border-radius:9px;font-weight:700;cursor:pointer;color:var(--mut)}
.tabs button.on{background:#fff;color:var(--teal);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:var(--teal-d);color:#d6ece6;padding:16px 10px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.side .brand{font-weight:800;font-size:1.2rem;color:#fff;padding:4px 10px 14px}.side .brand i{color:#9be08c;font-style:normal}
.side nav button{display:flex;gap:10px;align-items:center;width:100%;text-align:left;border:0;background:none;color:inherit;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:.92rem}
.side nav button:hover{background:rgba(255,255,255,.08)}.side nav button.on{background:#fff;color:var(--teal-d);font-weight:700}
.side nav .cnt{margin-left:auto;background:var(--bird);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 7px;font-weight:800}
.side .me{margin-top:auto;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.15);font-size:.84rem}
.side .me button{margin-top:8px;width:100%;border:1px solid rgba(255,255,255,.3);background:none;color:#fff;border-radius:8px;padding:7px;cursor:pointer}
.main{padding:22px clamp(14px,3vw,32px) 60px;min-width:0}
.topbar{display:none}
.main h1{font-size:1.45rem;color:var(--teal-d);margin-bottom:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.main h1 .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.panel-card h2{font-size:1rem;color:var(--teal-d);margin-bottom:10px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.stat small{color:var(--mut);font-size:.78rem;display:block}.stat b{font-size:1.4rem;color:var(--teal-d);display:block;margin-top:2px}.stat em{font-style:normal;font-size:.78rem;color:var(--mut)}
.stat.warn b{color:var(--bird)}
.chart{display:flex;align-items:flex-end;gap:5px;height:140px;padding-top:8px}
.chart div{flex:1;background:linear-gradient(var(--leaf),#7bbf6c);border-radius:5px 5px 0 0;min-height:2px;position:relative}
.chart div:hover::after{content:attr(data-t);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:.72rem;padding:2px 7px;border-radius:6px;white-space:nowrap;z-index:2}
.chart-x{display:flex;gap:5px;font-size:.66rem;color:var(--mut)}.chart-x span{flex:1;text-align:center}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table.tbl{width:100%;border-collapse:collapse;font-size:.88rem}
.tbl th{background:#f0f5f2;text-align:left;padding:9px 12px;font-size:.76rem;color:var(--mut);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.tbl td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:#f8fbf9}
.tbl .num{text-align:right;white-space:nowrap}
.pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.76rem;font-weight:700;background:#eef3f0;color:var(--mut);white-space:nowrap}
.pill.moi{background:#fff3d1;color:#8a6200}.pill.xn{background:#dff1ff;color:#0b5a8a}.pill.giao{background:#ece4ff;color:#5a3bb0}.pill.xong,.pill.hd{background:#e0f5e1;color:#1d6b2a}.pill.huy,.pill.khoa{background:#fdecea;color:#a3271b}.pill.cho{background:#fff3d1;color:#8a6200}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filters input,.filters select{width:auto;min-width:140px;padding:8px 12px}
.sbtn{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer;font-size:.85rem;font-weight:600}
.sbtn.on{background:var(--teal);border-color:var(--teal);color:#fff}
.sbtn .c{opacity:.7;margin-left:4px}
.pbtn{border:0;background:var(--teal);color:#fff;border-radius:10px;padding:9px 16px;font-weight:700;cursor:pointer}
.pbtn.o{background:#fff;color:var(--teal);border:1.5px solid var(--teal)}.pbtn.d{background:#c0392b}.pbtn.s{padding:5px 11px;font-size:.82rem;border-radius:8px}
.pbtn:disabled{opacity:.55;cursor:wait}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 14px}
.help{font-size:.78rem;color:var(--mut);margin-top:3px;font-weight:400}
.chk{display:flex;gap:8px;align-items:center;font-weight:600;margin:10px 0}.chk input{width:auto}
.pm{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;display:flex;justify-content:center;align-items:flex-start;overflow:auto;padding:4vh 12px}
.pm .box{background:#fff;border-radius:18px;width:min(640px,100%);padding:20px;position:relative}
.pm .box.wide{width:min(900px,100%)}
.pm h3{font-size:1.15rem;color:var(--teal-d);margin-bottom:10px;padding-right:30px}
.pm .x{position:absolute;right:14px;top:12px}
.pm .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:130px 1fr;gap:4px 12px;font-size:.9rem;margin:8px 0}.kv dt{color:var(--mut)}.kv dd{word-break:break-word}
.imgs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.imgs .im{width:84px;height:84px;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--line);background:#f0f5f2}
.imgs .im img{width:100%;height:100%;object-fit:cover}
.imgs .im button{position:absolute;top:2px;right:2px;border:0;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;width:20px;height:20px;cursor:pointer;line-height:1}
.imgs .im.main::after{content:'Ảnh chính';position:absolute;left:0;right:0;bottom:0;background:rgba(15,118,110,.85);color:#fff;font-size:.62rem;text-align:center}
.drop{border:2px dashed #b6cdc5;border-radius:12px;padding:14px;text-align:center;color:var(--mut);cursor:pointer;font-size:.86rem}
.drop.busy{opacity:.6;cursor:wait}
.matrix{overflow-x:auto}.matrix table{border-collapse:collapse;font-size:.84rem;min-width:600px}
.matrix th,.matrix td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:center}.matrix td:first-child,.matrix th:first-child{text-align:left}
.pw-show{background:#fff8e1;border:1.5px dashed var(--sun);border-radius:12px;padding:12px;margin:10px 0}
.pw-show code{font-size:1.2rem;font-weight:800;color:var(--teal-d);letter-spacing:.04em}
.slip{display:none}
.linkbox{display:flex;gap:8px}.linkbox input{flex:1}
.hero-ctv{padding:50px 0 34px;background:linear-gradient(135deg,#e7f6ee,#fff3d1);border-bottom:1px solid var(--line)}
.hero-ctv h1{font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.15;color:var(--teal-d);letter-spacing:-.02em;max-width:660px}
.hero-ctv p{margin-top:12px;color:var(--mut);max-width:560px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:6px}
.steps div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.steps b{display:block;color:var(--teal-d);margin:4px 0}.steps span{font-size:1.6rem}
.steps p{font-size:.88rem;color:var(--mut)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.pagenav{display:flex;gap:8px;justify-content:center;margin-top:12px}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:250px;z-index:60;transform:translateX(-100%);transition:transform .2s;height:100%}
  .side.on{transform:none}
  .topbar{display:flex;align-items:center;gap:10px;background:var(--teal-d);color:#fff;padding:10px 14px;position:sticky;top:0;z-index:30}
  .topbar button{border:0;background:none;color:#fff;font-size:1.5rem;cursor:pointer}
  .row2,.row3,.two{grid-template-columns:1fr}
  .kv{grid-template-columns:100px 1fr}
}
@media print{
  body.panel>*:not(.slip){display:none!important}
  .slip{display:block!important;padding:8mm;font-family:system-ui,sans-serif;color:#000;font-size:12pt}
  .slip h2{font-size:15pt;margin-bottom:4px}.slip table{width:100%;border-collapse:collapse;margin:8px 0}.slip td,.slip th{border:1px solid #000;padding:4px 6px;text-align:left}
}
textarea.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88rem}