/* Phố Ninh Khánh 2 — giao diện sáng, nền trắng. Layout: thanh điều hướng xanh lúa bên trái (máy tính) / ngăn kéo + thanh dưới (điện thoại); nội dung dạng bảng điều hành */
:root{
  --bg:#f5f2f2; --surface:#ffffff; --surface-2:#f4efef; --line:#e4dcdc;
  --fg:#231d1d; --muted:#6b5f5f;
  --brand:#9b1c21; --brand-ink:#ffffff; --brand-soft:#fbeaea;
  --straw:#b8862b; --straw-soft:#f7ecd4;
  --ok:#2f7d4f; --ok-soft:#e1f2e7; --warn:#a76a0c; --warn-soft:#fbefd9; --bad:#b23b2e; --bad-soft:#f9e3e0; --info:#2c5f8a; --info-soft:#e2edf6;
  --side:#6e2226; --side-fg:#f0dcdc; --side-active:#8d2d32;
  --shadow:0 1px 2px rgba(20,40,28,.06),0 4px 16px rgba(20,40,28,.06);
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"Lora",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14px;line-height:1.5}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:248px 1fr;min-height:100%}
/* Sidebar */
.side{background:var(--side);color:var(--side-fg);padding:18px 12px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow:auto}
.logo{display:flex;gap:10px;align-items:center;padding:4px 8px 16px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.logo .seal{width:38px;height:38px;border-radius:50%;background:var(--straw);display:grid;place-items:center;flex:none}
.logo b{font-family:var(--f-display);font-size:15px;color:#fff;display:block;line-height:1.2}
.logo small{font-size:11px;opacity:.75;letter-spacing:.04em;text-transform:uppercase}
.nav-sec{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.55;padding:12px 10px 4px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:inherit;text-decoration:none;cursor:pointer;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a.on{background:var(--side-active);color:#fff}
.nav a .cnt{margin-left:auto;background:var(--straw);color:#1c1405;font-size:11px;font-weight:700;border-radius:10px;padding:0 7px}
.nav svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.side .who{margin-top:auto;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.08);font-size:12px}
.side .who select{width:100%;margin-top:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;border-radius:6px;padding:6px}
.side .who option{color:#000}
/* Main */
.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px 24px}
.top h1{font-family:var(--f-display);font-size:20px;margin:0;text-wrap:balance}
.top .crumb{font-size:12px;color:var(--muted)}
.top .sp{flex:1}
.iconbtn{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.iconbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.iconbtn .dot{position:absolute;top:-4px;right:-4px;background:var(--bad);color:#fff;font-size:10px;font-weight:700;border-radius:9px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 4px}
.menu-btn{display:none}
.content{padding:24px;display:flex;flex-direction:column;gap:20px;max-width:1280px;width:100%}
.demo-tag{font-size:11px;background:var(--straw-soft);color:var(--warn);border-radius:6px;padding:3px 8px;font-weight:600}
/* Elements */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-h h3{margin:0;font-size:15px}
.card-h .sp{flex:1}
.card-b{padding:16px 18px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{padding:16px 18px}
.kpi .l{font-size:12px;color:var(--muted);font-weight:500}
.kpi .v{font-size:28px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:4px}
.kpi .s{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.hl{background:var(--brand);color:var(--brand-ink);border-color:transparent}
.kpi.hl .l,.kpi.hl .s{color:inherit;opacity:.8}
.grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.grid2>*{min-width:0}
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;font-size:13.5px;white-space:nowrap}
.btn:hover{background:var(--surface-2)}
.btn.pri{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{border-color:transparent;background:transparent}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.btn:focus-visible,.iconbtn:focus-visible,.nav a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--straw);outline-offset:2px}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-soft);color:var(--ok)} .p-warn{background:var(--warn-soft);color:var(--warn)} .p-bad{background:var(--bad-soft);color:var(--bad)} .p-info{background:var(--info-soft);color:var(--info)} .p-mute{background:var(--surface-2);color:var(--muted)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.name{font-weight:600}
.sub{font-size:12px;color:var(--muted)}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar input,.toolbar select,.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px;min-width:0}
.toolbar input[type=search]{width:240px;max-width:100%}
.pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.bars{display:flex;flex-direction:column;gap:9px}
.bar{display:grid;grid-template-columns:110px 1fr 56px;gap:10px;align-items:center;font-size:13px}
.bar .tr{height:12px;background:var(--surface-2);border-radius:6px;overflow:hidden;display:flex}
.bar .f1{background:var(--brand)} .bar .f2{background:var(--straw)}
.bar .n{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.feed{display:flex;flex-direction:column}
.feed .it{display:flex;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.feed .it:last-child{border-bottom:none}
.ic svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.feed .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.feed .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;font-weight:700;font-size:13px}
.progress{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.progress>i{display:block;height:100%;background:var(--brand)}
.empty{padding:36px;text-align:center;color:var(--muted)}
/* Modal */
.ov{position:fixed;inset:0;background:rgba(10,20,14,.55);display:grid;place-items:center;z-index:100;padding:16px;animation:fade .15s}
.modal{background:var(--surface);border-radius:14px;width:min(640px,100%);max-height:calc(100% - 20px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:pop .18s}
.modal.sm{width:min(440px,100%)}
.modal.lg{width:min(860px,100%)}
.modal-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:1}
.modal-h h3{margin:0;font-size:17px;font-family:var(--f-display)}
.modal-b{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.modal-f{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line);flex-wrap:wrap;position:sticky;bottom:0;background:var(--surface)}
.confirm-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto;font-size:26px;font-weight:700}
@keyframes fade{from{opacity:0}} @keyframes pop{from{transform:scale(.96);opacity:0}}
@media (prefers-reduced-motion:reduce){.ov,.modal{animation:none}}
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 14px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-size:12.5px;font-weight:600;color:var(--muted)}
.field label em{color:var(--bad);font-style:normal}
.field.full{grid-column:1/-1}
.field .auto{background:var(--ok-soft)}
.tabs{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:10px;flex-wrap:wrap}
.tabs button{flex:1;border:none;background:transparent;padding:8px 10px;border-radius:7px;cursor:pointer;font-weight:600;color:var(--muted);white-space:nowrap}
.tabs button.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow)}
.scan{border:2px dashed var(--line);border-radius:12px;padding:18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.scan .frame{width:150px;height:150px;border-radius:12px;background:#0d1a12;position:relative;flex:none;overflow:hidden}
.scan .frame::before{content:"";position:absolute;inset:28px;border:3px solid var(--straw);border-radius:8px}
.scan .frame::after{content:"";position:absolute;left:28px;right:28px;height:2px;background:#ffd36b;top:30px;animation:scanl 1.6s ease-in-out infinite alternate;box-shadow:0 0 8px #ffd36b}
@keyframes scanl{to{top:118px}}
.scan .txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
.ups{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.up{border:1.5px dashed var(--line);border-radius:10px;aspect-ratio:1.58;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:12.5px;cursor:pointer;overflow:hidden;position:relative;max-width:100%;background:var(--surface-2)}
.up img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.up input{display:none}
.up svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}
.note{font-size:12.5px;padding:10px 12px;border-radius:8px;background:var(--info-soft);color:var(--info)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.dd{position:absolute;right:0;top:46px;width:min(380px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:50;max-height:440px;overflow:auto}
.dd .it{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;cursor:pointer}
.dd .it.unread{background:var(--brand-soft)}
.dd .it:hover{background:var(--surface-2)}
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:11px 18px;border-radius:10px;font-weight:600;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:calc(100vw - 32px);text-align:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 12px;cursor:pointer;font-size:12.5px;font-weight:600;background:var(--surface)}
.chip.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.doc{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);cursor:pointer}
.doc:hover{background:var(--surface-2)}
.doc .ic{width:42px;height:52px;border-radius:6px;background:var(--straw-soft);color:var(--warn);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.doc h4{margin:0 0 3px;font-size:14.5px}
.kv{display:grid;grid-template-columns:150px 1fr;gap:8px 12px;font-size:13.5px}
.kv dt{color:var(--muted)} .kv dd{margin:0;font-weight:500}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:var(--brand-soft);color:var(--brand);flex:none}
.cell-p{display:flex;gap:10px;align-items:center}
.paper{background:#fff;color:#111;border:1px solid var(--line);border-radius:6px;padding:20px;font-family:"Times New Roman",serif;font-size:13px;overflow-x:auto}
.paper table{font-size:12.5px;min-width:560px}
.paper th{background:#e8efe3;color:#111;text-transform:none;letter-spacing:0;font-size:12.5px;border:1px solid #9aa;text-align:center;white-space:normal}
.paper td{border:1px solid #9aa;padding:5px 8px}
.paper .hd{display:flex;justify-content:space-between;text-align:center;font-size:12px;gap:16px;margin-bottom:14px}
.paper .hd b{display:block}
.paper h4{text-align:center;margin:8px 0 12px;font-size:15px}
.paper tbody tr:hover td{background:#f1f6ee;color:#111}
.paper tr.tot td{font-weight:700;background:#f6f8f4}
.c-name{min-width:150px}
.c-name b{white-space:nowrap}
.logo img{width:44px;height:44px;flex:none;display:block}
.selbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;background:var(--brand);color:var(--brand-ink);border-radius:0 0 12px 12px}
.selbar .btn{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff}
.selbar .btn.w{background:#fff;color:var(--brand);border-color:#fff}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);cursor:pointer}
tr.sel td{background:var(--brand-soft)!important}
.ol{margin:0;padding-left:22px;text-align:left;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding-block:8px;background:var(--surface-2)}
.ol li{padding:2px 4px;font-variant-numeric:tabular-nums}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.ph{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface-2);border:1px solid var(--line);max-width:100%}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph .sz{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:10.5px;padding:2px 5px;text-align:center}
.ph button{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.6);color:#fff;cursor:pointer;line-height:1}
.capbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.capbtn{border:1.5px dashed var(--brand);border-radius:10px;padding:16px 10px;text-align:center;cursor:pointer;color:var(--brand);font-weight:600;background:var(--brand-soft);display:flex;flex-direction:column;align-items:center;gap:6px}
.capbtn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}
.capbtn input{display:none}
.rep{display:flex;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);cursor:pointer;align-items:flex-start}
.rep:hover{background:var(--surface-2)}
.rep .thumbs{display:flex;gap:4px;flex:none}
.rep .thumbs .ph{width:58px}
.steps{display:flex;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted)}
.steps span{display:flex;align-items:center;gap:6px}
.steps i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-style:normal}
.steps .on{color:var(--brand)} .steps .on i{background:var(--brand);color:#fff}
.rq-day{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:-10px}
.rq{display:grid;grid-template-columns:150px minmax(0,1fr) 190px auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.rq:last-child{border-bottom:none}
.rq:hover{background:var(--surface-2)}
.rq-t{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rq-m{min-width:0;display:flex;flex-direction:column;gap:2px}
.rq-a{display:flex;gap:8px;justify-content:flex-end}
/* Trang đăng nhập */
.login{position:fixed;inset:0;z-index:300;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--surface);overflow:auto}
.lg-brand{position:relative;background:var(--side);color:#fff;padding:48px 56px;display:flex;flex-direction:column;gap:28px;overflow:hidden}
.lg-brand::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-30%;height:65%;background:repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 28px,transparent 28px 64px);transform:perspective(500px) rotateX(55deg);transform-origin:bottom;pointer-events:none}
.lg-brand img{width:96px;height:96px}
.lg-brand h2{font-family:var(--f-display);font-size:34px;line-height:1.2;margin:0;text-wrap:balance;max-width:16ch}
.lg-brand p{margin:0;opacity:.82;max-width:44ch;font-size:15px}
.lg-feat{display:flex;flex-direction:column;gap:12px;position:relative;z-index:1}
.lg-feat div{display:flex;gap:12px;align-items:center;font-size:14px}
.lg-feat i{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;font-style:normal;color:var(--straw);font-weight:700;flex:none}
.lg-foot{margin-top:auto;font-size:12px;opacity:.6;position:relative;z-index:1}
.lg-form{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.lg-box{width:min(380px,100%);display:flex;flex-direction:column;gap:16px}
.lg-box h1{font-family:var(--f-display);font-size:26px;margin:0}
.lg-box .field input{padding:12px 14px;font-size:15px;border-radius:10px}
.lg-box .btn.pri{justify-content:center;padding:12px;font-size:15px;border-radius:10px}
.pw{position:relative}.pw input{width:100%;padding-right:64px!important}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--brand);font-weight:600;cursor:pointer;padding:6px 8px}
.lg-err{background:var(--bad-soft);color:var(--bad);padding:10px 12px;border-radius:8px;font-size:13px}
.lg-demo{border:1px dashed var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:12.5px}
.lg-demo button{text-align:left;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:8px 10px;cursor:pointer}
.lg-demo button:hover{border-color:var(--brand)}
.otp{display:flex;gap:8px;justify-content:space-between}
.otp input{width:100%;max-width:52px;aspect-ratio:1/1.15;text-align:center;font-size:22px;font-weight:700;border:1px solid var(--line);border-radius:10px;padding:0;background:var(--surface)}
.otp input:focus{border-color:var(--brand);outline:2px solid var(--brand-soft)}
.rules{font-size:12.5px;display:flex;flex-direction:column;gap:3px}
.rules .ok{color:var(--ok)} .rules .no{color:var(--muted)}
@media (max-width:820px){
  .login{grid-template-columns:1fr;align-content:start}
  .lg-brand{padding:calc(24px + env(safe-area-inset-top,0px)) 20px 24px;gap:12px;flex-direction:row;align-items:center;flex-wrap:wrap}
  .lg-brand img{width:60px;height:60px}
  .lg-brand h2{font-size:20px}
  .lg-brand p,.lg-feat,.lg-foot{display:none}
  .lg-form{padding:24px 16px 40px;align-items:flex-start}
}
.grid-add{grid-template-columns:1.5fr 1fr}
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.way{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;box-shadow:var(--shadow);font:inherit;color:inherit}
.way:hover{border-color:var(--brand);background:var(--brand-soft)}
.way svg{width:28px;height:28px;stroke:var(--brand);fill:none;stroke-width:1.8}
.way b{font-size:14.5px}.way span{font-size:12.5px;color:var(--muted)}
.way .vne{font-size:11px;font-weight:800;color:#fff;background:#c8102e;border-radius:6px;padding:5px 7px;letter-spacing:.02em}
.cam{position:relative;aspect-ratio:3/4;max-height:60vh;width:100%;background:#0d1a12;border-radius:12px;overflow:hidden;margin:0 auto;max-width:420px}
.cam video{width:100%;height:100%;object-fit:cover;display:block}
.cam-box{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid var(--straw);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.cam-line{position:absolute;left:22%;right:22%;height:2px;top:32%;background:#ffd36b;box-shadow:0 0 8px #ffd36b;animation:camline 1.6s ease-in-out infinite alternate}
@keyframes camline{to{top:66%}}
.up .ph{position:absolute;inset:auto 0 0 0;aspect-ratio:auto;border:none;background:none}
.bnav{display:none}
@media (max-width:1100px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:150;transform:translateX(-100%);transition:transform .2s;height:100%;padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
  .menu-btn{display:grid}
  .top{padding:10px 16px}
  .top h1{font-size:17px}
  .content{padding:16px 16px 92px;gap:16px}
  .fgrid{grid-template-columns:1fr}
  .toolbar input[type=search]{width:100%}
  .toolbar>*{flex:1 1 140px}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd{margin-bottom:8px}
  table.resp thead{display:none}
  table.resp tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  table.resp td{border:none;padding:0}
  table.resp td.hide-m{display:none}
  table.resp td.span{grid-column:1/-1}
  .bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--muted);text-decoration:none;cursor:pointer;padding:4px 0;position:relative}
  .bnav a.on{color:var(--brand)}
  .bnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
  .bnav .cnt{position:absolute;top:0;left:calc(50% + 6px);background:var(--bad);color:#fff;border-radius:8px;font-size:9.5px;padding:0 5px}
  .bar{grid-template-columns:90px 1fr 46px}
  .demo-tag{display:none}
  .grid-add{grid-template-columns:1fr}
  .rep{flex-wrap:wrap;padding:14px}
  .rep>div:last-child{flex:1 1 100%!important}
  .rep .thumbs .ph{width:64px}
  .ways{gap:10px}.way{padding:12px}
  .rq{grid-template-columns:1fr;gap:8px;padding:14px}
  .rq-t{flex-direction:row;align-items:center}
  .rq-a{justify-content:stretch}.rq-a .btn{flex:1;justify-content:center}
  .kpis{gap:10px}
  .kpi{padding:12px 14px;min-width:0}
  .kpi .v{font-size:20px;overflow-wrap:anywhere}
  .toolbar .chips{flex:1 1 100%}
  table.resp.fee tr{grid-template-columns:28px 1fr auto;align-items:center}
  table.resp.fee td.span{grid-column:2/-1}
  .selbar{bottom:calc(66px + env(safe-area-inset-bottom,0px));border-radius:12px}
  .capbtn{padding:14px 6px}
}

/* ===== Bổ sung cho bản thật ===== */
a{color:var(--brand)}
.alert{padding:12px 14px;border-radius:10px;font-size:13.5px}
.alert-ok{background:var(--ok-soft);color:var(--ok)}
.alert-bad{background:var(--bad-soft);color:var(--bad)}
.alert-info{background:var(--info-soft);color:var(--info)}
.err{color:var(--bad);font-size:12px}
.field input.is-bad,.field select.is-bad,.field textarea.is-bad{border-color:var(--bad)}
.pager a,.pager span.pg{display:inline-flex;min-width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;padding:0 8px;text-decoration:none;color:var(--fg);background:var(--surface)}
.pager span.pg.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.pager span.pg.dis{opacity:.45}
.coming{padding:48px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.coming .big{width:64px;height:64px;border-radius:16px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center}
.coming .big svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}
.soon{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.12);border-radius:6px;padding:1px 6px;text-transform:uppercase}
form.inline{display:inline}
.nowrap{white-space:nowrap}
.mt0{margin-top:0}
.w100{width:100%}
.show-m{display:none}
@media (max-width:820px){.show-m{display:inline}}
@media (max-width:820px){table.resp td.span{order:5}}
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.way{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;box-shadow:var(--shadow);font:inherit;color:inherit}
.way:hover{border-color:var(--brand);background:var(--brand-soft)}
.way svg{width:28px;height:28px;stroke:var(--brand);fill:none;stroke-width:1.8}
.way b{font-size:14.5px}.way span{font-size:12.5px;color:var(--muted)}
.way .vne{font-size:11px;font-weight:800;color:#fff;background:#c8102e;border-radius:6px;padding:5px 7px}
.cam{position:relative;aspect-ratio:3/4;max-height:60vh;width:100%;background:#0d1a12;border-radius:12px;overflow:hidden;margin:0 auto;max-width:420px}
.cam video{width:100%;height:100%;object-fit:cover;display:block}
.cam-box{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid var(--straw);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.cam-line{position:absolute;left:22%;right:22%;height:2px;top:32%;background:#ffd36b;box-shadow:0 0 8px #ffd36b;animation:camline 1.6s ease-in-out infinite alternate}
@keyframes camline{to{top:66%}}
.grid-add{grid-template-columns:1.5fr 1fr}
.up svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}
.up .sz{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 6px;text-align:center}
.field .auto{background:var(--ok-soft)}
@media (max-width:1100px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.grid-add{grid-template-columns:1fr}.ways{gap:10px}.way{padding:12px}}
.rq-day{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:-10px}
.rq{display:grid;grid-template-columns:150px minmax(0,1fr) 200px auto;gap:16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.rq:last-child{border-bottom:none}
.rq:hover{background:var(--surface-2)}
.rq-t{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.rq-m{min-width:0;display:flex;flex-direction:column;gap:2px}
.rq-a{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:820px){.rq{grid-template-columns:1fr;gap:8px;padding:14px}.rq-t{flex-direction:row;align-items:center}.rq-a{justify-content:stretch}.rq-a form{flex:1}.rq-a .btn{width:100%;justify-content:center}}
a.btn{text-decoration:none}
.side a.btn{color:#fff}
a.chip{text-decoration:none;color:var(--fg)}
a.chip.on{color:var(--brand-ink)}
@media (max-width:820px){.toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
a.card,a.card *{text-decoration:none;color:inherit}
@media (min-width:821px){table.resp td.span{min-width:190px}}
/* Thanh menu trái: logo đứng yên, khu tài khoản đứng yên ở đáy, thanh cuộn mảnh và chỉ hiện khi rê chuột */
.side{padding-top:0;padding-bottom:0;scrollbar-width:thin;scrollbar-color:transparent transparent}
.side:hover{scrollbar-color:rgba(255,255,255,.22) transparent}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-track{background:transparent}
.side::-webkit-scrollbar-thumb{background:transparent;border-radius:6px}
.side:hover::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22)}
.side::-webkit-scrollbar-button{display:none;height:0}
.side .logo{position:sticky;top:0;z-index:3;background:var(--side);margin:0 -12px 8px;padding:18px 20px 16px}
.side .who{position:sticky;bottom:0;z-index:3;background:var(--side);margin:auto -12px 0;padding:12px 22px 16px}
/* Thanh cuộn trang chính gọn, cùng tông màu */
html{scrollbar-width:thin;scrollbar-color:#c3cdbf transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c3cdbf;border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#9fae9a}
::-webkit-scrollbar-button{display:none;width:0;height:0}
@media (max-width:820px){.side{padding-top:0}.side .logo{padding-top:calc(18px + env(safe-area-inset-top,0px))}}
.soon{white-space:nowrap}
/* Ô tìm kiếm có gợi ý */
.suggest{position:relative;max-width:640px}
.suggest input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:12px 14px;font-size:15px;box-shadow:var(--shadow)}
.suggest input:focus{border-color:var(--brand);outline:2px solid var(--brand-soft)}
.suggest-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.14);overflow:hidden;max-height:420px;overflow-y:auto}
.sg-it{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg)}
.sg-it:last-child{border-bottom:none}
.sg-it:hover,.sg-it.on{background:var(--brand-soft)}
.sg-empty{padding:14px;color:var(--muted)}
.alert-warn{background:var(--warn-soft);color:var(--warn)}
.cf-tb{width:100%;margin-top:10px;border-collapse:collapse;text-align:left;font-size:13.5px}
.cf-tb td{padding:7px 6px;border-top:1px solid var(--line);vertical-align:top}
.cf-tb td:first-child{color:var(--muted);width:38%}
.cf-tb s{text-decoration:line-through}
.tchips{display:flex;flex-wrap:wrap;gap:4px}
@media (min-width:821px){.tchips{min-width:220px;max-width:340px}}
.tchip{display:inline-block;padding:3px 9px;border-radius:12px;font-size:12px;line-height:1.35;background:var(--warn-soft);color:var(--warn)}
.tchip.bad{background:var(--bad-soft);color:var(--bad)}
.ftabs{display:flex;flex-wrap:wrap;gap:6px}
.ftabs a{flex:none;padding:7px 12px;border-radius:99px;border:1px solid var(--line);font-size:13.5px;color:var(--fg);text-decoration:none;background:#fff}
.ftabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.ftabs a b{margin-left:4px}
/* Báo cáo theo chi hội / phố */
table.bc{width:100%;border-collapse:collapse}
table.bc th,table.bc td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:13.5px;vertical-align:middle}
table.bc th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--surface-2)}
table.bc .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.bc a{color:inherit;text-decoration:none;border-bottom:1px dashed var(--line)}
table.bc a:hover{color:var(--brand);border-bottom-color:var(--brand)}
table.bc tr.bc-ch{background:#fff}
table.bc tr.bc-pho td{background:#fbfcfa;font-size:13px}
table.bc tfoot td{background:var(--surface-2)}
.bc-tg{border:none;background:none;padding:0;cursor:pointer;font:inherit;color:var(--fg);display:inline-flex;align-items:center;gap:8px;text-align:left}
.bc-tg .car{display:inline-block;width:14px;transition:transform .15s;color:var(--muted);font-size:16px}
.bc-tg[aria-expanded="true"] .car{transform:rotate(90deg)}
.mini{height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden;margin-bottom:3px}
.mini i{display:block;height:100%;background:var(--brand)}
.mini.pho i{background:var(--straw)}
@media (max-width:820px){table.bc .hide-m{display:none} table.bc th,table.bc td{padding:8px 8px}}
a.bar{color:inherit;text-decoration:none;border-radius:6px}
a.bar:hover .n{color:var(--brand)}
.bar .lb{min-width:0;line-height:1.25}
.bar .lb b{font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .lb small{display:block;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bars.pho .bar{grid-template-columns:170px 1fr 56px}
@media (max-width:820px){.bars.pho .bar{grid-template-columns:120px 1fr 46px}}
.lech{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;font-weight:600;white-space:nowrap}
.lech.ok{background:var(--ok-soft);color:var(--ok)}
.lech.thieu{background:var(--bad-soft);color:var(--bad)}
.lech.du{background:var(--info-soft);color:var(--info)}
.loai-them{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.loai-them .lt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;background:#fff}
.loai-them .lt input{margin-top:3px;width:18px;height:18px;accent-color:var(--brand);flex:none}
.loai-them .lt b{display:block;font-size:14px}
.loai-them .lt small{display:block;color:var(--muted);font-size:12px;line-height:1.35;margin-top:2px}
.loai-them .lt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
@media (max-width:620px){.loai-them{grid-template-columns:1fr}}
/* ===== Form thêm / sửa hội viên ===== */
.hv-form{max-width:980px}
.anh-row{display:flex;align-items:center;gap:14px}
.anh-thumb{width:132px;aspect-ratio:1.58;border:1.5px dashed var(--line);border-radius:10px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;flex:none;color:var(--muted)}
.anh-thumb img{width:100%;height:100%;object-fit:cover}
.anh-thumb svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8}
.anh-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ===== Điện thoại: chữ to, nút to, dễ bấm cho người lớn tuổi ===== */
@media (max-width:820px){
  body{font-size:16px}
  .btn{font-size:15px;padding:11px 16px;border-radius:10px;min-height:46px}
  .btn.sm{font-size:14px;min-height:40px;padding:8px 12px}
  .toolbar input,.toolbar select{font-size:16px;min-height:46px}
  .bnav a{font-size:12px;gap:3px}
  .bnav svg{width:26px;height:26px}
  .top h1,.top .ttl{font-size:19px}

  .steps{display:none}
  .ways{grid-template-columns:1fr 1fr;gap:10px}
  .way{min-height:118px;padding:14px;gap:8px;border-radius:14px;border-width:1.5px}
  .way svg{width:36px;height:36px}
  .way b{font-size:16.5px;line-height:1.25}
  .way span{font-size:13.5px;line-height:1.35}
  .way .vne{font-size:13px;padding:6px 9px}

  .hv-form .card-h{padding:14px 16px}
  .hv-form .card-h .sub{display:none}
  .hv-form .card-b{padding:16px}
  .hv-form .fgrid{gap:16px}
  .hv-form .field label{font-size:15.5px;color:var(--fg)}
  .hv-form .field input,.hv-form .field select,.hv-form .field textarea{font-size:18px;min-height:54px;padding:12px 14px;border-radius:12px;border-width:1.5px}
  .hv-form .field textarea{min-height:90px}
  .hv-form .err{font-size:14.5px}
  .loai-them .lt{padding:14px;border-radius:14px;border-width:1.5px}
  .loai-them .lt input{width:24px;height:24px;margin-top:1px}
  .loai-them .lt b{font-size:17px}
  .loai-them .lt small{font-size:14px}
  .anh-row{flex-direction:column;align-items:stretch}
  .anh-thumb{width:100%;max-width:none}
  .anh-btn{justify-content:center;min-height:54px;font-size:17px}
  .anh-btn svg{width:22px;height:22px}
  .hv-actions{position:sticky !important;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:10px 12px;gap:10px;box-shadow:0 -4px 12px rgba(0,0,0,.06)}
  .hv-actions .btn{min-height:56px;font-size:17px;justify-content:center}
  .hv-actions .btn.pri{flex:1}
  .alert{font-size:15px}
  .modal .btn{min-height:52px;font-size:16.5px;flex:1;justify-content:center}
  .cf-tb{font-size:15px}
}
/* Lý do (popup xóa/báo giảm) dạng nút chọn */
.ly-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ly{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;cursor:pointer;font-weight:600;font-size:14px;text-align:left}
.ly input{width:18px;height:18px;accent-color:var(--bad);flex:none}
.ly:has(input:checked){border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
.modal input[type=date]{border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%}
.modal textarea{width:100%}

/* ===== Điện thoại: CỠ CHỮ TO cho toàn bộ phần mềm (nhiều bác lớn tuổi dùng) ===== */
@media (max-width:820px){
  body{font-size:17px;line-height:1.55}
  .top h1{font-size:21px}
  .top .crumb{font-size:13.5px}
  .sub{font-size:14.5px}
  .name{font-size:18px}
  .card-h h3{font-size:18px}
  .pill{font-size:14px;padding:3px 11px}
  .note,.alert{font-size:15.5px;line-height:1.5}
  .kv{font-size:17px}
  .kv dt{font-size:14.5px}
  .kpi .l{font-size:14.5px}
  .kpi .v{font-size:26px}
  .kpi .s{font-size:14px}
  .nav a{font-size:17px;padding:12px 12px}
  .nav-sec{font-size:13px}
  .feed b{font-size:16.5px}
  .feed .it{gap:12px}
  table.resp tr{padding:14px 16px;gap:4px 10px}
  table.resp td{font-size:16px}
  .ftabs a{font-size:16px;padding:10px 15px}
  .ftabs a b{font-size:16px}
  .pager{font-size:15px}
  .pager a,.pager .pg{min-width:42px;min-height:42px;display:inline-grid;place-items:center}
  .toolbar input,.toolbar select{font-size:17px;min-height:50px;border-radius:10px}
  .field input,.field select,.field textarea{font-size:17px;min-height:50px}
  .modal h3{font-size:21px !important}
  .modal .sub{font-size:16px !important}
  .ly-list{grid-template-columns:1fr}
  .ly{font-size:17px;padding:14px;min-height:54px;border-width:1.5px;border-radius:12px}
  .ly input{width:24px;height:24px}
  .modal input[type=date],.modal textarea{font-size:17px;min-height:52px;padding:12px;border-radius:12px}
  .modal .field label{font-size:16px}
  .toast{font-size:16px}
  .hv-actions2{flex-direction:column-reverse;gap:10px}
  .hv-actions2 .btn,.hv-actions2 form{width:100%}
  .hv-actions2 .btn{justify-content:center;min-height:56px;font-size:17px}
}
@media (max-width:820px){
  .chips .chip{font-size:15.5px;padding:9px 15px}
  .rq{font-size:16px}
  .rq .btn{min-height:50px;font-size:16.5px}
}
/* ===== Hội phí ===== */
table.hp tr.hp-ch td{background:var(--surface-2);padding:10px 14px}
.hp-act{white-space:nowrap}
.hp-act .btn{margin:2px 0}
.hp-dem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 18px}
.hp-dem div{background:var(--surface-2);border-radius:10px;padding:10px;text-align:center}
.hp-dem b{display:block;font-size:22px;font-variant-numeric:tabular-nums}
.hp-dem span{font-size:13px;color:var(--muted)}
.hp-list{display:flex;flex-direction:column}
.hp-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.hp-ten{flex:1;min-width:0}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;flex:none}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:9px 14px;font-weight:600;font-size:14px;border-left:1px solid var(--line);color:var(--muted)}
.seg label:first-child span{border-left:none}
.seg-da input:checked+span{background:var(--ok);color:#fff}
.seg-mien input:checked+span{background:var(--info);color:#fff}
.seg-chua input:checked+span{background:var(--warn-soft);color:var(--warn)}
.hp-ds{margin:4px 0 10px;padding-left:22px;max-height:180px;overflow:auto;font-size:14px}
@media (max-width:820px){
  .hp-dem{grid-template-columns:1fr 1fr}
  .hp-dem b{font-size:24px}
  .hp-dem span{font-size:15px}
  .hp-row{flex-direction:column;align-items:stretch;gap:10px;padding:14px 16px}
  .hp-ten b{font-size:18px}
  .seg{display:grid;grid-template-columns:repeat(3,1fr)}
  .seg span{text-align:center;padding:14px 6px;font-size:16.5px}
  .hp-act{white-space:normal;display:flex;flex-wrap:wrap;gap:8px}
  .hp-act .btn,.hp-act form{flex:1 1 45%}
  .hp-act .btn{justify-content:center;min-height:48px}
  table.hp tr.hp-ch{display:block;padding:12px 16px;background:var(--surface-2)}
  table.hp tr.hp-ch td{display:block;background:none;padding:0}
  .hp-ds{font-size:16px}
}
@media (min-width:821px){.hp-act{display:flex;flex-direction:column;align-items:stretch;gap:4px;width:150px}.hp-act .btn,.hp-act form .btn{width:100%;justify-content:center;margin:0}}
.trung-ds{margin:6px 0 8px;padding-left:20px}
.trung-ds li{margin:4px 0}
.trung-ds .btn{margin-left:6px;vertical-align:middle}
@media (max-width:820px){.trung-ds .btn{display:flex;margin:8px 0 0;justify-content:center;min-height:48px}}
@media (max-width:820px){
  .hp-kpis .kpi .v{font-size:21px}
  .hp-note .hide-m{display:none}
}
.ly.ly-ok input{accent-color:var(--brand)}
.ly.ly-ok:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.hp-cd{width:100%;max-width:640px;text-align:left;margin-top:6px}
.hp-cd .fgrid{grid-template-columns:1fr 1fr}
@media (max-width:820px){.hp-cd .fgrid{grid-template-columns:1fr}.hp-cd .btn{flex:1 1 100%;justify-content:center;min-height:52px}}
.nam-list{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.nam-list{grid-template-columns:1fr 1fr}}
.hp-row{flex-wrap:wrap}
.ly-mien{flex-basis:100%;display:flex;align-items:center;gap:10px}
.ly-mien[hidden]{display:none}
.ly-mien label{font-size:13px;font-weight:600;color:var(--info)}
.ly-mien select{flex:1;max-width:320px;border:1.5px solid var(--info);border-radius:10px;padding:8px 10px;background:var(--info-soft)}
@media (max-width:820px){.ly-mien{flex-direction:column;align-items:stretch;gap:6px}.ly-mien label{font-size:15px}.ly-mien select{max-width:none;font-size:17px;min-height:50px}}
/* ===== Văn bản ===== */
.vb-row{display:flex;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:flex-start}
.vb-row:hover{background:#fafcf9}.vb-row:last-child{border-bottom:0}
.vb-row .m{flex:1;min-width:0}.vb-row .t{font-weight:600;font-size:15px;line-height:1.4}
.vb-row .r{text-align:right;min-width:160px}
.ftype{width:44px;height:50px;border-radius:6px;display:grid;place-items:center;font-weight:800;font-size:10.5px;flex:none;letter-spacing:.02em}
.ft-pdf{background:var(--bad-soft);color:var(--bad)}.ft-doc{background:var(--info-soft);color:var(--info)}.ft-xls{background:var(--ok-soft);color:var(--ok)}.ft-img{background:var(--straw-soft);color:var(--warn)}.ft-other{background:var(--surface-2);color:var(--muted)}
.pin-tag{color:var(--straw);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-right:6px}
.moi{background:var(--bad);color:#fff;border-radius:6px;font-size:11px;padding:1px 6px;font-weight:700;margin-left:6px;vertical-align:2px}
.vb-tieu{font-family:var(--f-display);font-size:22px;line-height:1.35;margin:6px 0 14px}
.vb-nd{font-size:15.5px;line-height:1.75;overflow-wrap:anywhere}
.vb-nd p{margin:0 0 10px}.vb-nd img{max-width:100%;height:auto;border-radius:8px;display:block;margin:10px auto}
.vb-nd ul,.vb-nd ol{margin:0 0 10px;padding-left:26px}.vb-nd table{border-collapse:collapse;margin:10px 0;width:auto;max-width:100%}
.vb-nd td,.vb-nd th{border:1px solid var(--line);padding:6px 8px;text-transform:none;letter-spacing:0;font-size:inherit;background:none;color:inherit;white-space:normal}
.vb-nd h1,.vb-nd h2,.vb-nd h3,.vb-nd h4{font-size:1.15em;margin:12px 0 8px}
.tep{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px}
.tep.seen{border-color:#e4c4c5;background:#fdf6f6}
.tep .ftype{width:46px;height:40px}
.tep .fn{font-weight:600;overflow-wrap:anywhere}
.tep .btn{flex:none}
.vb-chot{border-top:1px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.btn.big{min-height:54px;font-size:16.5px;justify-content:center;border-radius:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opts.o1{grid-template-columns:1fr}.opts.o3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:#fff}
.opt input{margin-top:3px;accent-color:var(--brand);width:18px;height:18px;flex:none}
.opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.opt b{display:block;font-size:14.5px}.opt small{color:var(--muted);font-size:12.5px;display:block}
.opt.dis{opacity:.6;cursor:not-allowed;background:var(--surface-2)}
.chgrid{border:1px solid var(--line);border-radius:10px;padding:10px;max-height:320px;overflow:auto}
.chgrp{margin-bottom:10px}.chgrp>label{font-weight:700;font-size:13.5px;display:flex;gap:6px;align-items:center}
.chgrp div{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0 24px}
.chgrp div label{display:flex;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:5px 9px;font-size:13.5px;cursor:pointer}
.chgrp div label:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
/* Soạn thảo */
.ed-wrap{border:1px solid var(--line);border-radius:10px;background:#fff}
.ed-bar{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:6px;background:var(--surface-2);border-bottom:1px solid var(--line);border-radius:10px 10px 0 0;position:sticky;top:60px;z-index:5}
.ed-bar button,.ed-bar label{border:1px solid transparent;background:none;border-radius:7px;min-width:36px;height:36px;padding:0 8px;cursor:pointer;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:5px;color:var(--fg)}
.ed-bar button:hover,.ed-bar label:hover{background:#fff;border-color:var(--line)}
.ed-bar svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ed-bar select{height:36px;border:1px solid var(--line);border-radius:7px;padding:0 6px;background:#fff;font-weight:600;font-size:13.5px}
.ed-bar .sep{width:1px;height:24px;background:var(--line);margin:0 2px}
.ed-bar .mau{width:24px;min-width:24px;height:24px;border-radius:50%;padding:0;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.ed{min-height:260px;max-height:640px;overflow:auto;padding:14px 16px;outline:none}
.ed:empty:before{content:attr(data-ph);color:var(--muted)}
.ed img{cursor:pointer}.ed img.chon{outline:3px solid var(--brand)}
.tep-moi{display:flex;flex-direction:column;gap:0}
/* Trang xem tệp */
.xem-wrap{background:#e6e9e3;border-radius:0 0 12px 12px;padding:12px;overflow:auto}
.pdf-page{display:block;margin:0 auto 12px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);max-width:none}
.zoom{display:inline-flex;gap:4px;align-items:center}
.word-page{background:#fff;max-width:820px;margin:0 auto;padding:28px 34px;font-family:"Times New Roman",Times,serif;font-size:16px;line-height:1.55;box-shadow:0 2px 8px rgba(0,0,0,.12);overflow-wrap:anywhere}
.word-page p{margin:0 0 6px}.word-page img{max-width:100%;height:auto}
.word-page table.wt{border-collapse:collapse;width:100%;margin:8px 0}.word-page table.wt td{border:1px solid #999;padding:4px 6px;vertical-align:top;font-size:15px;white-space:normal}
.word-page table.wt td.vm{border-top:0}
.xl-wrap{background:#fff;overflow:auto;max-height:70vh}
table.xl{border-collapse:collapse;width:auto;min-width:100%}
table.xl td{border:1px solid #cfd6cc;padding:5px 8px;font-size:13px;white-space:nowrap;vertical-align:top}
table.xl tr:first-child td{background:#e8f1e9;font-weight:700}
table.xl td.n{text-align:right;font-variant-numeric:tabular-nums}
.xl-tabs{display:flex;gap:2px;flex-wrap:wrap}
.xl-tab{border:0;background:#d7ddd4;padding:6px 14px;border-radius:0 0 8px 8px;font-weight:700;font-size:12.5px;cursor:pointer;color:var(--muted)}
.xl-tab.on{background:#fff;color:var(--ok)}
/* ===== Họp và hoạt động ===== */
.hd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hd-card{overflow:hidden;text-decoration:none;color:inherit;display:block}
.hd-card .cover{aspect-ratio:16/10;background:var(--surface-2) center/cover no-repeat;position:relative;display:grid;place-items:center;color:var(--muted)}
.hd-card .cover svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.5}
.hd-card .cover span{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:7px;font-size:12px;padding:2px 8px}
.hd-card .b{padding:12px 14px;display:flex;flex-direction:column;gap:4px}.hd-card .t{font-weight:600;font-size:15px}
.hd-card .pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.hop-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hop-btns .btn{min-height:56px;font-size:16px;justify-content:center;border-radius:12px;white-space:normal;min-width:0;text-align:center}
.hop-btns .btn svg{width:22px;height:22px}
.rh{display:flex;gap:10px;align-items:center;font-weight:700;font-size:15.5px;margin:18px 0 8px}
.rh i{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-size:14px;flex:none}
.rh.big{font-size:17px;padding-top:16px;border-top:1px solid var(--line);margin-top:22px}
.rh.big:first-child{border-top:0;margin-top:0;padding-top:0}
table.bb td{font-size:14.5px;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
table.bb td:first-child{color:var(--muted);width:150px}
.nd-text{white-space:pre-line;font-size:15px;line-height:1.7}
.kn{background:var(--warn-soft);border:1px solid #e8c98f;border-radius:10px;padding:12px 14px;font-size:15px;white-space:pre-line}
.kn-row{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.kn-row:last-child{border-bottom:0}.kn-row:hover{background:#fafcf9}
.cmt{border-left:3px solid var(--brand);background:var(--surface-2);border-radius:0 8px 8px 0;padding:8px 12px;margin-top:8px;white-space:pre-line}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.gal a,.gal div{aspect-ratio:4/3;border-radius:8px;background:var(--surface-2) center/cover no-repeat;display:block;position:relative}
.gal button{position:absolute;top:4px;right:4px;border:0;background:rgba(0,0,0,.65);color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer;font-weight:700;font-size:16px;line-height:1}
.hd-lb{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px}
.hd-lb img{max-width:100%;max-height:calc(100% - 80px);object-fit:contain}
.inl{display:flex;gap:8px;align-items:center}.inl input{flex:1;min-width:0}
.chs-chua{display:flex;flex-wrap:wrap;gap:6px}
.chs-chua span{border:1px solid #e8c98f;background:var(--warn-soft);color:var(--warn);border-radius:99px;padding:3px 11px;font-size:13px}
@media (max-width:820px){
  .vb-row{flex-wrap:wrap;padding:14px 16px}.vb-row .r{text-align:left;min-width:0;width:100%}.vb-row .t{font-size:17px}
  .vb-tieu{font-size:21px}.vb-nd{font-size:17.5px}
  .tep{flex-wrap:wrap}.tep .btn{flex:1 1 100%;justify-content:center;min-height:50px}
  .opts,.opts.o3{grid-template-columns:1fr}.opt b{font-size:16.5px}.opt small{font-size:14px}.opt input{width:22px;height:22px}
  .opt{padding:13px 14px}
  .hd-grid{grid-template-columns:1fr}
  .hop-btns .btn{min-height:64px;font-size:17px}
  .rh.big{font-size:18.5px}
  table.bb td{font-size:16px}table.bb td:first-child{width:110px}
  .nd-text,.kn,.cmt{font-size:17px}
  .gal{grid-template-columns:1fr 1fr}
  .word-page{padding:16px;font-size:16.5px}
  .ed-bar{top:56px}
  .chgrp div label{font-size:15px;padding:8px 10px}
}

/* ===== Giao diện điện thoại gọn (10/2026): thanh chọn dàn ngang, không phải kéo ===== */
.segbar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;background:var(--surface-2);border-radius:14px;padding:4px;margin-bottom:12px}
.segbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 6px;border-radius:11px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14px;line-height:1.25}
.segbar a b{font-size:19px;color:var(--fg)}
.segbar a.on{background:var(--surface);color:var(--brand);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.segbar a.on b{color:var(--brand)}
.chips.g4{flex-wrap:nowrap;margin-bottom:12px}
.chips.g4 .chip{flex:1 1 auto;text-align:center;white-space:nowrap;text-decoration:none;color:var(--fg)}
.chips.g4 .chip.on{color:var(--brand-ink)}
.pho-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pho-tabs a{display:flex;justify-content:space-between;align-items:center;gap:6px;border-radius:12px;padding:10px 12px}
.pho-tabs a b{font-size:17px}
.loc-q{display:block;width:100%;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:16px;margin-bottom:12px;background:var(--surface)}
.tag-cu{display:none;font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px;margin-top:3px}
@media (max-width:820px){
  .chips.g4{gap:6px}
  .chips.g4 .chip{padding:9px 8px;font-size:15px}
  .pho-tabs{grid-template-columns:1fr 1fr}
  .pho-tabs a{font-size:15px;padding:12px}
  .hp-bar{display:grid !important;grid-template-columns:1fr 1fr;gap:8px}
  .hp-bar .toolbar{display:contents}
  .hp-bar .toolbar>*,.hp-bar>.btn{width:100%;min-width:0;justify-content:center}
  .hp-bar #btnNamMoi{grid-column:1/-1;order:9}
  .cb-sel{display:none !important}
  .tag-cu{display:inline-block}
  .loc-q,.suggest #chQ{font-size:16px}
  .hp-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
  .hp-kpis .kpi{min-width:0;overflow-wrap:anywhere}
  .hp-kpis .kpi .v{font-size:clamp(16px,4.8vw,21px) !important}
}

.tim-ch{position:relative;flex:1 1 200px;min-width:0}
.tim-ch input[type=search]{width:100%}
.tim-ch-ds{position:absolute;left:auto;right:0;min-width:100%;width:max(100%,min(300px,88vw));top:calc(100% + 4px);z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:320px;overflow:auto}
.tim-ch-ds a{display:block;padding:11px 14px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none;cursor:pointer;font-size:16px}
.tim-ch-ds a:hover{background:var(--surface-2)}

.th-act{display:flex;flex-direction:column;gap:6px;align-items:stretch;min-width:130px}
.th-act form{margin:0}.th-act .btn{width:100%;justify-content:center;white-space:nowrap}
@media (max-width:820px){.th-act{flex-direction:row;flex-wrap:wrap;min-width:0}.th-act>*{flex:1 1 140px}}

.th-tbl th{white-space:normal}
.th-tbl td,.th-tbl th{padding-left:9px;padding-right:9px}
.th-tbl .tchips{max-width:190px}
.th-tbl .c-name{min-width:120px}
@media (max-width:1500px){.th-tbl .th-stt{display:none}}
.th-tbl .th-act{min-width:0}.th-tbl .th-act .btn{padding-left:10px;padding-right:10px}

.ch-top{display:flex;gap:10px;align-items:stretch;margin-bottom:12px}
.ch-top .suggest{flex:1;min-width:0;margin:0}
.ch-top .btn{flex:none;white-space:nowrap;min-height:46px}
@media (max-width:820px){.ch-top .btn{padding-left:14px;padding-right:14px}}
.ch-top .suggest{max-width:none}
@media (max-width:1400px){.th-tbl .th-act .btn{font-size:13px;padding-left:8px;padding-right:8px}.th-tbl .th-act .btn svg{display:none}}
@media (min-width:821px){.th-tbl td.span{min-width:0}.th-tbl td.span:last-child{min-width:130px}}
@media (min-width:821px){.th-tbl td:nth-child(6){min-width:140px}.th-tbl td:nth-child(6) .sub{white-space:nowrap}}
@media (min-width:821px) and (max-width:1400px){.th-tbl .tchips{max-width:170px}.th-tbl .tchip{font-size:12px}.th-tbl td:nth-child(5){font-size:12.5px}}
@media (min-width:821px){.th-tbl .tchips{min-width:160px}}
@media (max-width:820px){.th-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.th-tabs a{display:flex;flex-direction:column;align-items:flex-start;border-radius:12px;font-size:14px !important;padding:8px 10px !important;line-height:1.3}.th-tabs a b{margin:2px 0 0;font-size:17px !important}.th-tbl .c-name .show-m{display:block}}

.qt-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:820px){.qt-act{width:100%;justify-content:flex-start}}

.cb-tim{display:flex;gap:10px;margin-bottom:12px}.cb-tim .loc-q{margin:0}.cb-tim>.loc-q{flex:1}.cb-tim .tim-ch{flex:0 1 380px}
@media (max-width:820px){.cb-tim{flex-direction:column;gap:8px}.cb-tim .tim-ch{flex:none}.cb-tim .tim-ch-ds{width:100%}}

.ov-cf{z-index:120}
/* Phân quyền */
.modal.lg{width:min(760px,100%)}
.pq-sec{font-weight:700;margin:16px 0 8px;font-size:15px}
.pq-grp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pq-grp button{border:1.5px solid var(--line);border-radius:12px;padding:10px;background:var(--surface);text-align:left;cursor:pointer;font:inherit;color:var(--fg)}
.pq-grp button b{display:block;font-size:14.5px}.pq-grp button span{font-size:12.5px;color:var(--muted)}
.pq-grp button.on{border-color:var(--brand);background:#f0f7f2}
.pq-grp button:disabled{opacity:.45;cursor:not-allowed}
.pq-mx{width:100%;border-collapse:collapse}.pq-mx td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.pq-lv{display:inline-flex;background:var(--surface-2);border-radius:9px;padding:2px;gap:2px}
.pq-lv button{border:0;background:none;padding:7px 11px;border-radius:7px;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.pq-lv button.on{background:var(--surface);color:var(--brand);box-shadow:0 1px 2px rgba(0,0,0,.1)}
.pq-lv button.on.n{color:var(--bad)}
.pq-lv button:disabled{opacity:.35;cursor:not-allowed}
.pq-lv button.on:disabled{opacity:1}
.pq-chg{display:block;font-size:12px;color:var(--warn);font-weight:700}
.note.lock{background:var(--warn-soft);color:#6b3d00}
.pq-cc{margin-top:12px}
.cb-pho{flex:0 1 260px}.cb-pho input[type=search]{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface)}
.pq-tong{overflow-x:auto}.pq-tong table{min-width:640px}
@media (max-width:820px){
  .pq-grp{grid-template-columns:1fr 1fr}
  .pq-mx tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}.pq-mx td{display:block;border:0;padding:3px 0}
  .pq-lv{display:flex}.pq-lv button{flex:1;padding:10px 4px;font-size:14.5px}
  .cb-pho{flex:1 1 100%;order:5}.cb-pho input[type=search]{font-size:16px;min-height:46px;border-radius:10px}
}

.cb-chi-xem .qt-act .btn,.cb-chi-xem .qt-act form,.cb-chi-xem #addQt{display:none}
.ch-chi-xem form[action*='chi-hoi'] .btn.pri{display:none}.ch-chi-xem form[action*='chi-hoi'] :is(input,select,textarea){pointer-events:none;background:var(--surface-2)}
@media (max-width:820px){table.resp td.span.nowrap{white-space:normal;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}table.resp td.span.nowrap form.inline{display:inline}}

.ways{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){.ways{grid-template-columns:1fr 1fr}.ways>.way:last-child{grid-column:1/-1}}

/* ===== Ứng dụng điện thoại: hộp mời cài, màn hình chờ ===== */
.cai-app{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--surface);border-radius:20px 20px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 28px rgba(0,0,0,.18);transform:translateY(105%);transition:transform .25s ease;max-width:520px;margin:0 auto}
.cai-app.on{transform:none}
.cai-r{display:flex;gap:12px;align-items:center}.cai-r img{width:54px;height:54px;border-radius:14px;flex:none}
.cai-r b{display:block;font-size:16px}.cai-r span{font-size:13.5px;color:var(--muted)}
.cai-app ol{margin:10px 0 0;padding-left:20px;font-size:14.5px;line-height:1.5}.cai-app ol li{margin:4px 0}
.cai-sh{display:inline-block;border:1.5px solid #1f6feb;color:#1f6feb;border-radius:6px;padding:0 6px;font-weight:700;font-size:13px}
.cai-b{display:flex;gap:10px;margin-top:14px}.cai-b .btn{flex:1;justify-content:center;min-height:48px;font-size:16px}
#appSplash{position:fixed;inset:0;z-index:500;background:radial-gradient(120% 80% at 30% 20%,#b3262c,#7a1114);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:opacity .35s;overflow:hidden}
#appSplash[hidden]{display:none}#appSplash.an{opacity:0}
#appSplash img{width:120px;height:120px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
#appSplash b{font-size:21px;margin-top:18px;line-height:1.25;letter-spacing:.02em}#appSplash span{font-size:14px;opacity:.9;margin-top:6px;letter-spacing:.08em}
.sp-dots{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom,0px));display:flex;gap:6px}.sp-dots i{width:7px;height:7px;border-radius:2px;background:#fff8;animation:spd 1s infinite}.sp-dots i:nth-child(2){animation-delay:.2s}.sp-dots i:nth-child(3){animation-delay:.4s}
@keyframes spd{50%{background:#fff}}
/* Trang đăng nhập: đầu xanh như app */
@media (max-width:820px){
  .lg-brand{flex-direction:column;justify-content:center;text-align:center;padding:calc(34px + env(safe-area-inset-top,0px)) 20px 64px}
  .lg-brand img{width:88px;height:88px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
  .lg-brand h2{font-size:21px;max-width:none}
  .lg-form{padding:0 14px 40px;margin-top:-44px;position:relative;z-index:2}
  .lg-box{background:var(--surface);border-radius:18px;padding:20px 16px;box-shadow:0 8px 24px rgba(0,0,0,.1)}
  .login{background:var(--bg)}
  .lg-box .field input{font-size:17px;min-height:52px}
  .lg-box .btn.pri{min-height:54px;font-size:17px}
}

/* ===== Tài khoản của tôi, Quản lý cao cấp, Lịch sử thao tác ===== */
.me-card{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;border-radius:12px;padding:6px;margin:-6px}
.me-card:hover{background:rgba(255,255,255,.1)}
.tk-grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.tk-prof{text-align:center;padding:22px 16px}.tk-av{width:72px;height:72px;font-size:28px;margin:0 auto 10px;background:var(--straw);color:#1c1405}
.tk-prof b{display:block;font-size:18px;margin-bottom:6px}
.tk-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;text-align:left;margin:14px 0 0;font-size:14px;background:var(--surface-2);border-radius:10px;padding:12px}.tk-kv dt{color:var(--muted)}.tk-kv dd{margin:0;font-weight:600}
.tk-log>div:not(.field){display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.tk-log em{font-style:normal;color:var(--muted);font-size:13px;white-space:nowrap}
.tk-tabs{display:flex;gap:6px;margin-bottom:12px}.tk-tabs a{padding:9px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:600;text-decoration:none;color:var(--fg)}.tk-tabs a.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.tk-f{margin-bottom:12px}.tk-f input{width:100%}
.tk-meter{height:6px;border-radius:4px;background:var(--surface-2);overflow:hidden;margin-top:6px}.tk-meter i{display:block;height:100%;width:0;transition:.2s}
.tk-act{display:flex;justify-content:flex-end}
.cc-row{display:flex;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}.cc-row:last-child{border-bottom:0}
.cc-av{background:var(--straw);color:#1c1405}
.cc-act{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}.cc-act form{margin:0}
.cc-dg{color:var(--bad);border-color:#f0c6c2}
.cc-pick{display:flex;gap:10px;align-items:center;padding:10px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer}.cc-pick.on{border-color:var(--brand);background:#f0f7f2}.cc-pick input{display:none}
.ls-kp{grid-template-columns:repeat(4,minmax(0,1fr))}
.ls-flt{display:grid;grid-template-columns:2fr 1.3fr 1.3fr 1fr 1fr;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);background:#fbfcfa}
.ls-flt label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:3px}
.ls-flt input,.ls-flt select{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:9px 10px;background:var(--surface)}
.ls-on{background:var(--info-soft,#e3eef8);color:#173f60;border-radius:8px;padding:8px 12px;font-size:13.5px;margin:10px 18px 0}.ls-on a{float:right;font-weight:700}
.ls-day{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 18px 4px;background:#fbfcfa;border-bottom:1px solid var(--line)}
.ls-ev{display:grid;grid-template-columns:56px 200px minmax(0,1fr) auto;gap:4px 12px;padding:10px 18px;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}.ls-ev:hover{background:#f7faf6}
.ls-t{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}.ls-who{font-weight:700}.ls-who a{color:var(--brand)}
.ls-meta{font-size:12.5px;color:var(--muted);text-align:right}
.ls-diff{width:100%;border-collapse:collapse;margin-top:12px;font-size:14px}.ls-diff th{background:var(--surface-2);font-size:12px;text-transform:none;letter-spacing:0}.ls-diff td,.ls-diff th{border:1px solid var(--line);padding:7px 8px;text-align:left}
.ls-diff s{color:var(--bad)}.ls-diff b{color:var(--ok)}
@media (max-width:1000px){.tk-grid{grid-template-columns:1fr}}
@media (max-width:820px){
  .tk-tabs a{flex:1;text-align:center;padding:10px 4px;font-size:14px}
  .tk-act .btn{flex:1;min-height:52px;justify-content:center}
  .tk-f input{font-size:17px;min-height:50px}
  .cc-row{padding:12px 14px}.cc-act{width:100%}
  .ls-kp{grid-template-columns:1fr 1fr}
  .ls-flt{grid-template-columns:1fr 1fr;padding:12px 14px}.ls-q{grid-column:1/-1}
  .ls-flt input,.ls-flt select{font-size:16px;min-height:44px}
  .ls-ev{grid-template-columns:48px minmax(0,1fr);padding:10px 14px}.ls-what,.ls-meta{grid-column:2;text-align:left}
}
@media (max-width:1000px){.tk-grid>div:last-child{order:-1}}

/* ===== Trợ lý AI giọng nói ===== */
.tro-ly{position:fixed;right:18px;bottom:24px;z-index:140;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.28);display:grid;place-items:center;padding:0}
.tro-ly img{width:50px;height:50px;border-radius:50%}
.tro-ly:before{content:"";position:absolute;inset:-4px;border-radius:50%;border:3px solid #b3262c;border-right-color:transparent;border-bottom-color:transparent;animation:tlQuay 2s linear infinite}
.tro-ly.noi:before{border-color:#f0b429;border-right-color:transparent;border-bottom-color:transparent;animation-duration:.8s}
@keyframes tlQuay{to{transform:rotate(360deg)}}
.tl-cham{position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#b3262c;border:2px solid #fff;animation:tlNhay 1.4s infinite}@keyframes tlNhay{50%{transform:scale(1.3)}}
.tl-nhan{position:fixed;right:92px;bottom:34px;z-index:140;background:#1c2a21;color:#fff;font-size:14px;font-weight:600;padding:9px 13px;border-radius:14px 14px 4px 14px;opacity:0;transform:translateX(8px);transition:.35s;pointer-events:none;white-space:nowrap}
.tl-nhan.on{opacity:1;transform:none}.tl-nhan small{display:block;font-weight:400;opacity:.8;font-size:12px}
.tl-chi{outline:4px solid #d62828 !important;outline-offset:3px;border-radius:12px;box-shadow:0 0 0 8px rgba(214,40,40,.18) !important;animation:tlChi 1s ease-in-out infinite}
@keyframes tlChi{50%{outline-color:rgba(214,40,40,.3);box-shadow:0 0 0 2px rgba(214,40,40,.05)}}
.tl-ov{position:fixed;inset:0;z-index:160;background:rgba(8,20,12,.45);display:flex;align-items:flex-end;justify-content:center;transition:background .3s}
.tl-ov.ha{background:transparent;pointer-events:none}.tl-ov.ha .tl-sh{transform:translateY(calc(100% - 64px));pointer-events:auto}
.tl-sh{background:#fff;width:100%;max-width:520px;border-radius:22px 22px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow:auto;animation:tlLen .25s;transition:transform .35s}
@keyframes tlLen{from{transform:translateY(40px);opacity:0}}
.tl-sh-h{display:flex;gap:10px;align-items:center;margin-bottom:10px}.tl-sh-h img{width:42px;height:42px;border-radius:50%}.tl-sh-h b{font-size:17px}.tl-sh-h small{display:block;color:var(--muted);font-size:13.5px}
.tl-song{display:inline-flex;gap:3px;margin-left:auto;align-items:center;height:20px}.tl-song i{width:4px;height:100%;background:#b3262c;border-radius:3px;animation:tlSong .9s infinite}.tl-song i:nth-child(2){animation-delay:.15s}.tl-song i:nth-child(3){animation-delay:.3s}.tl-song.tat i{animation:none;height:30%;background:#bbb}
@keyframes tlSong{50%{transform:scaleY(.3)}}
.tl-q{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--line);border-radius:14px;padding:13px 12px;margin-bottom:8px;background:#fff;cursor:pointer;font-size:16.5px;font-weight:700;color:var(--fg)}
.tl-q i{width:34px;height:34px;border-radius:10px;background:#e4efe7;color:var(--brand);display:grid;place-items:center;font-style:normal;font-weight:800;flex:none}
.tl-q small{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.tl-to{font-size:18px;line-height:1.5;font-weight:600;margin:6px 0 12px}
.tl-ft{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.tl-ft .btn{flex:1 1 auto;justify-content:center;padding:12px 8px}
.tl-mini{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(96px + env(safe-area-inset-bottom,0px));z-index:160;width:min(520px,calc(100% - 20px));background:#1c2a21;color:#fff;border-radius:16px;padding:10px 12px;display:flex;gap:8px;align-items:center;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.tl-mini .sp{flex:1}.tl-mini .btn{color:var(--fg)}.tl-mini .btn.pri{color:#fff}
@media (max-width:820px){.tro-ly{bottom:calc(82px + env(safe-area-inset-bottom,0px));right:14px;width:58px;height:58px}.tro-ly img{width:46px;height:46px}.tl-nhan{right:84px;bottom:calc(92px + env(safe-area-inset-bottom,0px))}}
body:has(.cai-app.on) .tro-ly{display:none}
@media (max-width:820px){body:has(.hv-actions) .tro-ly,body:has(.selbar) .tro-ly{bottom:calc(156px + env(safe-area-inset-bottom,0px))}}

.tl-chon{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.tl-chon form{margin:0}
.tl-opt{width:100%;height:100%;text-align:left;border:1.5px solid var(--line);border-radius:12px;padding:12px;background:var(--surface);cursor:pointer;font:inherit;color:var(--fg)}.tl-opt b{display:block}.tl-opt span{font-size:13px;color:var(--muted)}.tl-opt.on{border-color:var(--brand);background:#f0f7f2;cursor:default}
@media (max-width:820px){.tl-chon{grid-template-columns:1fr}}
.gn-row{display:flex;gap:8px;flex-wrap:wrap}.gn-row input{flex:1 1 260px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:11px 12px}.gn-row select{border:1px solid var(--line);border-radius:10px;padding:10px}
.gn-ds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gn-g{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:10px 12px}.gn-g b{display:block}.gn-g span{font-size:13px;color:var(--muted)}.gn-g audio{width:100%;height:36px}
.gn-t{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.gn-t audio{height:34px;flex:1 1 220px}
#gnCau{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:16px}
@media (max-width:820px){.gn-ds{grid-template-columns:1fr}.gn-row .btn{flex:1}}
.tl-chon{grid-template-columns:repeat(2,minmax(0,1fr))}
.gn-nhom{font-weight:700;margin:4px 0 8px}
.gn-gem{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}.gn-gem summary{cursor:pointer;font-weight:700}

/* Báo cáo danh sách & in */
.bc-loai{font-weight:700;min-width:240px}
.in-dau{padding:14px 18px 6px;text-align:center}.in-dau h2{font-size:18px;margin:4px 0}.in-hoi{font-weight:700;font-size:13px;letter-spacing:.3px;color:var(--muted)}
.ds-tbl{width:100%;border-collapse:collapse}.ds-tbl th,.ds-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;font-size:14.5px}.ds-tbl th{background:var(--s2,#eef2ec);font-size:13px;white-space:nowrap}
.ds-tbl .num{text-align:right;white-space:nowrap}.ds-tbl tfoot td{border-top:2px solid var(--line)}
.ds-nhom td{background:#f5f8f3;font-weight:700;color:var(--brand)}.ds-moi td{border-top:2px solid var(--line)}
.ds-ten{color:inherit;text-decoration:none;font-weight:600}.ds-h{margin:18px 18px 6px;font-size:16px}
.in-ky{display:none}
@media (max-width:700px){.bc-ds .toolbar{flex-wrap:wrap}.bc-loai{min-width:0;width:100%;flex:1 1 100%}.ds-tbl th,.ds-tbl td{padding:7px 6px;font-size:13.5px}}
@media print{
  body{background:#fff!important}
  .side,.sidebar,.top,.crumb,.bnav,.no-print,header,nav,.tro-ly,#troLy,.cai-app,#caiApp{display:none!important}
  .app{display:block!important}.main,.content,main{margin:0!important;padding:0!important;max-width:none!important;width:100%!important}
  @page{size:A4;margin:12mm}
  .card{border:0!important;box-shadow:none!important}
  .tbl-wrap{overflow:visible!important}.hide-m{display:table-cell!important}
  .ds-tbl th,.ds-tbl td{border:1px solid #999;font-size:12px;padding:4px 6px}
  .ds-ten{font-weight:400}.ds-nhom td{background:#eee!important;color:#000}
  .in-ky{display:flex;justify-content:space-around;text-align:center;margin-top:28px;page-break-inside:avoid}
  thead{display:table-header-group}tr{page-break-inside:avoid}
}

.gn-dau{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}.gn-sap{padding:7px 12px;border-radius:99px;border:1px dashed var(--line);font-size:13.5px;color:var(--muted)}

/* Nội dung trợ lý */
.nd-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.nd-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;margin-bottom:12px}
.nd-prog{height:8px;background:var(--s2,#eef2ec);border-radius:9px;overflow:hidden;flex:1 1 160px}.nd-prog i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
.nd-main{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;align-items:start}
.nd-trang{padding:6px;position:sticky;top:10px}.nd-trang button{display:flex;width:100%;gap:8px;align-items:center;text-align:left;border:0;background:none;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:14.5px;color:var(--fg)}
.nd-trang button:hover{background:var(--s2,#eef2ec)}.nd-trang button.on{background:#e4efe7;color:var(--brand);font-weight:700}.nd-trang button span{flex:1}
.nd-dem{min-width:20px;height:20px;border-radius:10px;background:var(--warn);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;padding:0 5px}.nd-dem.ok{background:#d9eadf;color:var(--ok)}
.nd-nh{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;padding:10px 10px 4px}
.nd-nhom{padding:14px 16px 8px}.nd-nhom h3{margin:0 0 2px;font-size:16px}.nd-nhom>.sub{margin-bottom:6px}
.nd-cau{display:grid;grid-template-columns:28px minmax(0,1fr) 220px;gap:10px;align-items:start;padding:10px 0;border-top:1px solid var(--line)}
.nd-so{width:26px;height:26px;border-radius:50%;background:var(--s2,#eef2ec);display:grid;place-items:center;font-size:12.5px;font-weight:700;margin-top:6px}
.nd-cau textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:15px;line-height:1.45;resize:vertical;min-height:44px;background:#fff;margin-bottom:4px}
.nd-cau textarea.hoi{font-weight:700}.nd-cau.sua textarea[data-f=t]{border-color:var(--warn);background:#fffaf1}.nd-cau textarea:disabled{background:#fafbf9;color:var(--fg)}
.nd-ben{display:flex;flex-direction:column;gap:6px}.nd-ben select{width:100%;font-size:13px;padding:6px 8px}.nd-hang{display:flex;gap:6px;align-items:center}
.nd-xoa{color:var(--bad)}.nd-them{margin:6px 0 4px}
.nd-chip{background:#e4efe7;color:var(--brand);font-weight:700;border-radius:6px;padding:1px 6px}
@media (max-width:860px){.nd-main{grid-template-columns:1fr}.nd-trang{position:static;display:flex;overflow-x:auto;gap:4px}.nd-nh{display:none}.nd-trang button{flex:none;width:auto;white-space:nowrap}.nd-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.nd-cau{grid-template-columns:1fr}.nd-so{display:none}}
.nd-bar .pill{white-space:normal}.nd-bar .btn{flex:1 1 auto}

/* ===== Giao diện mới 11/10/2026: xanh lá tươi, tên nhóm menu kiểu 3 (đường kẻ trên + chữ vàng nhạt), menu không biểu tượng ===== */
:root{--brand:#9b1c21;--brand-soft:#fbeaea;--side:#6e2226;--side-2:#8a2a2f;--side-active:rgba(255,255,255,.17)}
.side{background:linear-gradient(180deg,var(--side),var(--side-2))}
.side .logo{background:var(--side)}.side .who{background:var(--side-2)}
.nav-sec{margin-top:10px;padding:14px 12px 6px;border-top:1px solid rgba(255,255,255,.16);opacity:1;color:#f3d48a;font-weight:800;font-size:11.5px;letter-spacing:.7px}
.nav a{padding:9px 14px}.nav a.on{font-weight:700}
@media (max-width:820px){.nav-sec{font-size:13px}}
/* Mục Phong trào & kinh tế */
.dm-excel{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-left:4px solid var(--brand);margin-bottom:14px}
.dm-nhap{margin:0}.dm-nhap label{cursor:pointer}
.dm-tbl{width:100%;border-collapse:collapse}.dm-tbl th,.dm-tbl td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.dm-tbl th{background:var(--surface-2);font-size:12.5px;white-space:nowrap}.dm-tbl .num{text-align:right}.dm-ten{font-weight:700}
.dm-act{white-space:nowrap}.dm-act form{display:inline}.dm-sao{color:#e0a100;letter-spacing:1px}
@media (max-width:820px){.dm-tbl th,.dm-tbl td{padding:8px 8px;font-size:13.5px}}
/* Cài đặt menu */
.mn{padding:12px 16px}.mn-nhom{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
.mn-gh{display:flex;gap:6px;align-items:center;background:var(--brand-soft);padding:8px 10px}.mn-gh .mn-ten{font-weight:800;text-transform:uppercase;letter-spacing:.4px;width:min(320px,100%)}
.mn-muc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 200px auto auto 64px;gap:6px;align-items:center;padding:8px 10px;border-top:1px solid var(--line)}
.mn-muc.an{opacity:.5}.mn-muc.an .mn-mten{text-decoration:line-through}.mn-goc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mn-luon{text-align:center}
@media (max-width:820px){.mn-muc{grid-template-columns:1fr 1fr 1fr}.mn-muc .mn-mten,.mn-muc .mn-sel,.mn-goc{grid-column:1/-1}}
/* Màn hình đăng nhập mới (nền xanh lá, đường sóng, khung trắng giữa) */
.dn{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px 56px;position:relative;overflow:hidden;background:radial-gradient(120% 90% at 85% 95%,#c72d32 0%,#a81d22 35%,#8d1317 70%,#6f0f12 100%)}
.dn-song{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.dn-the{position:relative;background:#fff;border-radius:24px;padding:32px 28px 26px;width:min(390px,100%);box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center}
.dn-the img{width:104px;height:104px}
.dn-the h1{font-family:var(--f-body);font-size:16.5px;font-weight:600;margin:12px 0 0;letter-spacing:.3px;color:var(--fg)}.dn-the h1 b{display:block;font-size:23px;color:#9b1c21;font-weight:800;letter-spacing:.5px}
.dn-phu{font-size:13px;color:var(--muted);margin:4px 0 20px}
.dn-the form{display:flex;flex-direction:column;gap:12px;text-align:left}
.dn-o{display:flex;align-items:center;gap:10px;background:#eef1f4;border-radius:99px;padding:4px 8px 4px 16px;border:1.5px solid transparent}.dn-o:focus-within{border-color:#9b1c21;background:#fff}
.dn-o svg{width:19px;height:19px;flex:none;stroke:#9b1c21;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dn-o input{border:0;background:none;outline:none;flex:1;min-width:0;font-size:16px;padding:10px 0}
.dn-o button{border:0;background:none;color:#9b1c21;font-weight:700;font-size:13px;cursor:pointer;padding:8px}
.dn-dong{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:13px;flex-wrap:wrap}.dn-dong label{display:flex;gap:7px;align-items:center;cursor:pointer}.dn-dong a{font-weight:700;color:#9b1c21}
.dn-nut{border:0;border-radius:99px;padding:14px;background:linear-gradient(90deg,#9b1c21,#c0282d);color:#fff;font-weight:800;font-size:16px;letter-spacing:.5px;cursor:pointer;margin-top:4px}
.dn-chan{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:rgba(255,255,255,.78);font-size:12.5px;padding:0 12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.dn .lg-err{margin-bottom:10px;text-align:left}
/* Trang Trợ lý: tab xóa dữ liệu */
.ftabs a.tab-do.on{background:var(--bad);border-color:var(--bad)}
.xd-canh{background:var(--bad-soft);border:1px solid #efc3bd;color:#7a2219;border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.6;margin-bottom:14px}
.xd-pham{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px 16px}.xd-pham label{display:flex;gap:6px;align-items:center;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer}
.xd-ds{padding:4px 16px 14px}.xd-nh{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800;margin:14px 0 6px}
.xd-muc{display:grid;grid-template-columns:28px minmax(0,1fr) 120px;gap:10px;align-items:center;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:8px;cursor:pointer}
.xd-muc:has(input:checked){border-color:var(--bad);background:#fff7f6}.xd-muc input{width:20px;height:20px;accent-color:var(--bad)}.xd-muc b{display:block}.xd-muc small{color:var(--muted);font-size:13px}
.xd-so{text-align:right;font-weight:800}.xd-so small{display:block;font-weight:400}.xd-muc.khoa{opacity:.55;cursor:not-allowed}
.xd-chan{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 14px 14px}
.xd-ul{text-align:left;font-size:14px;margin:10px 0 6px;padding-left:20px;line-height:1.7}
@media (max-width:820px){.xd-muc{grid-template-columns:28px minmax(0,1fr)}.xd-so{grid-column:2;text-align:left}}
.xd-chan .sp,.dm-excel .sp{flex:1}
/* Ban chấp hành: lưới / theo hàng */
.bch-kieu{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.bch-kieu button{border:0;background:#fff;padding:8px 12px;font-weight:700;cursor:pointer;font-size:13.5px}.bch-kieu button.on{background:var(--brand);color:#fff}
.bch-nh{padding:14px 16px 4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800}
.bch-ds.luoi .bch-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:8px 16px 16px}
.bch-ng{border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;gap:12px;align-items:flex-start;background:#fff}
.bch-ng[data-bch-sua]{cursor:pointer}.bch-ng[data-bch-sua]:hover{border-color:var(--brand)}
.bch-anh{width:76px;height:96px;border-radius:10px;background:#e9efe8;flex:none;display:grid;place-items:center;overflow:hidden;position:relative}
.bch-anh img{width:100%;height:100%;object-fit:cover}.bch-anh svg{width:40px;height:40px;stroke:#9aa89d;fill:none;stroke-width:1.6}.bch-anh img:not([hidden])+svg{display:none}
.bch-tt{min-width:0;display:flex;flex-direction:column;gap:2px}.bch-tt b{font-size:15.5px}.bch-tt .pill{align-self:flex-start}.bch-tt small{color:var(--muted);font-size:13px;line-height:1.45}.bch-tt .bch-nk{color:var(--brand);font-weight:700}
.bch-ds.hang .bch-luoi{display:flex;flex-direction:column;padding:0 16px 10px}
.bch-ds.hang .bch-ng{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 4px;align-items:center}
.bch-ds.hang .bch-anh{width:40px;height:48px;border-radius:8px}.bch-ds.hang .bch-anh svg{width:24px;height:24px}
.bch-ds.hang .bch-tt{display:grid;grid-template-columns:minmax(160px,1.1fr) 150px 80px minmax(0,1.6fr) 150px 110px 70px;gap:10px;align-items:center;flex:1}
.bch-ds.hang .bch-tt small:empty{display:block}
.bch-tai{display:flex;gap:14px;align-items:center;margin-bottom:14px}.bch-anh.lon{width:96px;height:120px;border:2px dashed var(--line);cursor:pointer}
.bch-qt{border:1px solid var(--line);border-radius:12px;overflow:hidden}.bch-qt-r{display:grid;grid-template-columns:1fr 1fr 40px;gap:8px;padding:8px 10px;border-top:1px solid var(--line);align-items:center}
.bch-qt-r.dau{border-top:0;background:var(--brand-soft);font-size:12.5px;font-weight:800}.bchQt .bch-qt-r select{width:100%}
.bch-cd{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cd-ds{padding:6px 16px 14px}.cd-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line)}.cd-r:first-child{border-top:0}
.cd-r>input[name$="[ten]"]{flex:1 1 180px}.cd-so{width:26px;height:26px;border-radius:50%;background:var(--brand-soft);display:grid;place-items:center;font-size:12.5px;font-weight:800;flex:none}
.cd-nut{display:flex;gap:4px}.cd-nam input{width:64px}.cd-ht{display:flex;gap:5px;align-items:center;font-size:13.5px}
@media (max-width:900px){.bch-cd{grid-template-columns:1fr}.bch-ds.hang .bch-tt{grid-template-columns:1fr}.bch-ds.hang .bch-tt small:empty{display:none}}
.bch-tim{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 12px;width:260px;max-width:100%;font:inherit}
.cd-bang{padding:4px 16px 12px;display:grid;gap:6px}
.cd-dong{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:8px}
.cd-dong b{font-size:18px;text-align:right}.cd-dong small{color:var(--muted,#667);grid-column:1/-1}
.cd-dong small:empty{display:none}
.cd-khoa{width:110px!important;flex:none}.bch-in{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;width:100%}
/* BCH mới (12/10/2026) */
.bch-td{text-align:center;padding:16px 16px 6px}.bch-td h2{font-family:var(--serif,Georgia,serif);font-size:19px;line-height:1.35;margin:0;text-wrap:balance}.bch-td .sub{margin-top:4px}
.bch-nks{padding:8px 16px 0;flex-wrap:nowrap;overflow-x:auto}.bch-nks a{flex:none}
.bch-cc{display:grid;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.bch-2nut{display:grid;grid-template-columns:1fr 1fr;gap:10px}.bch-2nut .btn{justify-content:center;width:100%}
.bch-hang2{display:flex;align-items:center;gap:10px}
.bch-cdlink{padding:12px 16px;border-top:1px solid var(--line)}.bch-cdlink .btn{width:100%;justify-content:center}
@media (min-width:901px){.bch-cc{grid-template-columns:auto 1fr;align-items:center}.bch-2nut{grid-template-columns:auto auto}.bch-cdlink{text-align:right}.bch-cdlink .btn{width:auto}}
.bch-hang2 .btn.pri{margin-left:auto}
.bch-ds.hang .bch-tt{grid-template-columns:minmax(170px,1fr) 160px 76px minmax(220px,2fr) 170px}
.bch-ds.hang .bch-tt small:nth-of-type(n+4){display:none}
@media (max-width:900px){
 .bch-ds.hang .bch-luoi{padding:0 12px 6px}
 .bch-ds.hang .bch-tt{display:grid;grid-template-columns:1fr auto;gap:2px 8px}
 .bch-ds.hang .bch-tt b{grid-column:1;font-size:15px}
 .bch-ds.hang .bch-tt .pill{grid-column:2;grid-row:1;font-size:11.5px}
 .bch-ds.hang .bch-tt small{display:none}
 .bch-ds.hang .bch-tt small.bch-dv{display:block;grid-column:1/-1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Thông tin còn thiếu gọn (12/10/2026) */
.th-dan{margin-bottom:12px;font-size:14px}
.th-bar{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px 0}
.th-bar input,.th-bar select{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 10px;font:inherit;min-width:0}
.th-bar input{flex:1 1 220px}.th-bar select{flex:0 1 200px}
.th-nut{display:flex;gap:8px;align-items:center;padding:10px 16px 0;flex-wrap:wrap}.th-nut form{margin:0}
.th-tabs{padding:10px 16px 0;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}.th-tabs a{flex:none}
@media (max-width:820px){
 .th-bar{padding:12px 12px 0}.th-bar input{flex:1 1 55%}.th-bar select{flex:1 1 40%}
 .th-nut{padding:8px 12px 0}.th-tabs{padding:10px 12px 0}
 .th-tbl tbody tr{display:grid!important;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 12px!important;border-bottom:1px solid var(--line)}
 .th-tbl tbody td{display:block!important;padding:0!important;border:0!important}
 .th-tbl tbody td.c-name{grid-column:1}
 .th-tbl tbody td.th-ch{grid-column:1}
 .th-tbl tbody td.span:last-child{grid-column:2;grid-row:1/span 3;align-self:center}
 .th-tbl tbody td .tchips{max-width:none}
 .th-tbl tbody td::before{display:none!important}
 .th-act{flex-direction:column}.th-act>*{flex:none}.th-act .btn{padding:7px 12px}
}
@media (max-width:820px){
 .th-tbl tbody td.hide-m{display:none!important}
 .th-tabs{display:flex!important;gap:8px}
 .th-tabs a{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;padding:8px 12px!important;border-radius:999px!important;white-space:nowrap;font-size:13.5px;min-height:0!important}
 .th-tabs a b{font-size:13.5px!important}
 .th-bar input{flex:1 1 100%}.th-bar select{flex:1 1 calc(50% - 4px)}
 .th-bar:has(select:only-of-type) input{flex:1 1 55%}.th-bar:has(select:only-of-type) select{flex:1 1 40%}
}
@media (max-width:820px){.th-tbl tbody td{background:transparent!important}.th-tabs{padding-bottom:10px!important;border-bottom:1px solid var(--line)}}
/* Trang chi hội (12/10/2026) */
.ch-hv{margin-bottom:14px}
.ch-hv-dau{display:flex;gap:12px;align-items:center;padding:14px 16px 0}.ch-hv-so{font-size:32px;font-weight:800;color:var(--brand);line-height:1.1;font-variant-numeric:tabular-nums}
.ch-hv-pho{margin-left:auto;text-align:right;font-size:13px}
.ch-hv-nut{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 16px 14px}.ch-hv-nut .btn{justify-content:center}.ch-hv-nut .ch-xem{grid-column:1/-1}
@media (min-width:901px){.ch-hv-nut{display:flex}.ch-hv-nut .ch-xem{grid-column:auto}}
.ch-loc{display:grid;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}.ch-loc input{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit}
.ch-ds{border-top:1px solid var(--line);max-height:70vh;overflow-y:auto}
.ch-hv-r{display:flex;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}.ch-hv-r[hidden]{display:none}
.ch-hv-r .tt{flex:1;min-width:0;display:flex;flex-direction:column}.ch-hv-r small{color:var(--muted);font-size:13px}
.ch-ds-cuoi{padding:12px 16px}.ch-ds-cuoi .btn{width:100%;justify-content:center}
.ch-tt summary{cursor:pointer;list-style:none}.ch-tt summary::-webkit-details-marker{display:none}
@media (max-width:820px){
 .grid2 .cell-p{padding:10px 14px!important;gap:10px}
 .qt-act{width:100%;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
 .qt-act .pill{font-size:12px}
}
/* Hội viên gọn (12/10/2026) */
.hv-bql summary{cursor:pointer;list-style:none}.hv-bql summary::-webkit-details-marker{display:none}.hv-bql{margin-bottom:14px}
.hv-2nut{display:flex;gap:10px;padding:0 16px 4px}
@media (max-width:820px){.hv-2nut{display:grid;grid-template-columns:1fr 1fr;padding:0 12px 4px}.hv-2nut .btn{justify-content:center}}
@media (max-width:820px){
 .hv-loc{padding:12px!important;gap:8px}
 .hv-loc .toolbar{display:grid!important;grid-template-columns:1fr 1fr;gap:8px}
 .hv-loc .toolbar input[type=search]{grid-column:1/-1;width:100%}
 .hv-loc .toolbar select{width:100%;min-width:0}
 .hv-loc>.btn.pri{width:100%;justify-content:center}
 .hv-bql summary{flex-wrap:nowrap}
}
/* Văn bản gọn (12/10/2026) */
@media (max-width:820px){
 .vb-loc{display:flex!important;flex-direction:column;align-items:stretch!important;gap:8px}
 .vb-loc>span{display:none}
 .vb-loc input[type=search]{order:-1;width:100%!important;max-width:none!important}
 .vb-tabs{padding:0!important;border:0!important}
}
@media (max-width:820px){.vb-loc>*{flex:none!important}.vb-loc input[type=search]{height:auto}.vb-tabs a{flex:none!important}}
/* Họp gọn (12/10/2026) */
.hop-btns{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.hop-btns .btn{justify-content:center;padding:12px 10px!important;font-size:15px!important;min-height:0!important;flex-direction:row!important;white-space:nowrap}
@media (min-width:821px){.hop-btns{display:flex!important}.hop-btns .btn{padding:9px 16px!important}}
@media (max-width:820px){.hd-dau{flex-direction:column;align-items:stretch!important;gap:8px}.hd-dau .sp{display:none}.hd-tabs{padding:0!important;border:0!important}}
/* Hội viên: nút cùng hàng bộ lọc (12/10/2026) */
.hv-nut{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.hv-chon{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:60vh;overflow:auto}.hv-chon .btn{justify-content:center}
@media (max-width:820px){.hv-nut{display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0}.hv-nut .btn{justify-content:center}.hv-nut .hv-them{grid-column:1/-1;order:-1}}
/* Thông tin còn thiếu PC: cột loại bên trái (12/10/2026) */
.th-loai-h{display:none}
@media (min-width:821px){
 .th-2cot{display:grid;grid-template-columns:240px minmax(0,1fr);border-top:1px solid var(--line);margin-top:12px}
 .th-2cot .th-tabs{display:flex!important;flex-direction:column;gap:4px;flex-wrap:nowrap!important;overflow:visible;padding:10px!important;background:var(--surface-2);border-right:1px solid var(--line);align-self:stretch}
 .th-2cot .th-tabs a{display:flex!important;justify-content:space-between;gap:8px;border:0!important;border-radius:8px!important;background:transparent;padding:9px 10px!important;white-space:normal;font-size:14px}
 .th-2cot .th-tabs a b{color:var(--warn);font-variant-numeric:tabular-nums}
 .th-2cot .th-tabs a.on{background:var(--brand)!important;color:#fff}.th-2cot .th-tabs a.on b{color:#fff}
 .th-2cot .th-tabs a:not(.on):hover{background:#fff}
 .th-loai-h{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:6px 10px 4px}
 .th-phai{min-width:0}
 .th-tbl .tchips{max-width:260px}
}
@media (min-width:821px){
 .th-top{display:flex;align-items:center;gap:8px;padding:14px 16px 0}
 .th-top .th-bar{flex:1;padding:0;flex-wrap:nowrap}.th-top .th-bar input{flex:1 1 200px}.th-top .th-bar select{flex:0 1 190px}
 .th-top .th-nut{padding:0;flex-wrap:nowrap;white-space:nowrap}
 .th-tbl td,.th-tbl th{padding-left:8px;padding-right:8px}
 .th-tbl .tchips{max-width:200px}
 .hv-loc .toolbar{flex-wrap:nowrap}
 .hv-loc .toolbar input[type=search]{width:200px;min-width:0;flex:1 1 160px}
 .hv-loc .toolbar select{max-width:170px;min-width:0}
 .hv-loc .hv-nut{flex-wrap:nowrap}
}
@media (min-width:821px){
 .th-2cot .th-tbl th:nth-child(3),.th-2cot .th-tbl td:nth-child(3){display:none}
 .th-2cot .th-tbl .show-m{display:block!important}
 .th-2cot .th-tbl th.th-stt,.th-2cot .th-tbl td.th-stt{display:none}
 .hv-loc{flex-wrap:nowrap!important}.hv-loc .toolbar{flex:1 1 auto;min-width:0}
}
@media (min-width:821px){.th-2cot .th-act{min-width:0}.th-2cot .th-act .btn{padding:6px 10px;font-size:13px}.th-2cot .th-tbl{min-width:0!important;width:100%}.th-2cot .th-tbl td.th-ch,.th-2cot .th-tbl td:nth-child(5){max-width:170px}}
@media (min-width:821px){.th-2cot{grid-template-columns:205px minmax(0,1fr)}.th-2cot .th-tbl .tchips{max-width:165px}.th-2cot .th-tbl td,.th-2cot .th-tbl th{padding-left:6px;padding-right:6px}.th-2cot .th-tbl td.th-ch,.th-2cot .th-tbl td:nth-child(5){max-width:150px}}
@media (min-width:821px){.th-2cot .th-tbl th:nth-child(5){width:150px}.th-2cot .th-tbl th:nth-child(7){width:165px}.th-2cot .th-tbl th:nth-child(4){width:100px}.th-2cot .th-tbl td{white-space:normal}}
@media (min-width:821px){.th-2cot table.resp td.span{min-width:0}.th-2cot .th-tbl .tchips{min-width:0}}

/* Đăng nhập mobile (13/10): khung không tràn, nằm phía trên, dòng mời cài thay bảng nổi */
.dn{grid-template-columns:minmax(0,1fr)}
.dn-the{min-width:0;max-width:100%}
.dn-the h1,.dn-phu{overflow-wrap:anywhere}
.dn-cai{display:flex;align-items:center;gap:10px;width:100%;margin-top:14px;padding:12px 0 0;border:0;border-top:1px dashed var(--line);background:none;text-align:left;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.dn-cai[hidden]{display:none}
.dn-cai img{width:34px;height:34px;border-radius:9px;flex:none}.dn-cai span{min-width:0}.dn-cai b{display:block;color:var(--fg);font-size:14px}
.dn-cai em{font-style:normal;margin-left:auto;border:1.5px solid #9b1c21;color:#9b1c21;border-radius:99px;padding:6px 14px;font-weight:700;white-space:nowrap}
@media (max-width:600px){
  .dn{align-items:start;align-content:start;padding:calc(14px + env(safe-area-inset-top,0px)) 14px 56px}
  .dn-the{width:100%;padding:20px 16px 18px;border-radius:20px}
  .dn-the img{width:72px;height:72px;transition:width .2s,height .2s}
  .dn-the:focus-within>img{width:48px;height:48px}
  .dn-the h1{font-size:clamp(15px,4.6vw,18px);margin-top:8px}.dn-the h1 b{font-size:clamp(19px,6.2vw,24px)}
  .dn-phu{margin:4px 0 14px}
  .dn-o{min-height:56px}.dn-o input{font-size:17px}
  .dn-nut{min-height:56px;font-size:17px}
  .dn-chan{position:static;margin-top:16px}
}

/* Nhập Excel: khối người đã có ở chi hội khác (15/10) */
.nh-khac{margin:12px 16px 4px;border:1px solid #f0c98a;border-radius:12px;overflow:hidden}
.nh-khac-h{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;padding:10px 12px;background:#fff6e8;border-bottom:1px solid #f0c98a}
.nh-khac-h .sp{flex:1}.nh-khac-h .sub{flex-basis:100%}
.nh-chon{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;flex-wrap:wrap}
.nh-chon button{border:0;background:#fff;padding:7px 10px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.nh-chon button.on{background:var(--brand);color:#fff}.nh-chon button.on.giu{background:#667085}
.nh-khac td{vertical-align:middle}
@media (max-width:700px){.nh-khac{margin:10px 8px}.nh-chon{display:flex;width:100%}.nh-chon button{flex:1;padding:10px 6px}}
@media (max-width:700px){.nh-khac th:nth-child(1),.nh-khac td:nth-child(1),.nh-khac th:nth-child(3),.nh-khac td:nth-child(3),.nh-khac th:nth-child(4),.nh-khac td:nth-child(4){display:none}}
@media (max-width:700px){
  .nh-khac .tbl-wrap{overflow:visible}
  .nh-khac table,.nh-khac tbody,.nh-khac tr,.nh-khac td{display:block;width:100%;min-width:0}
  .nh-khac table{min-width:0!important}
  .nh-khac thead{display:none}
  .nh-khac tr{padding:10px 12px;border-bottom:1px solid var(--line)}
  .nh-khac td{border:0!important;padding:3px 0!important}
  .nh-khac td.nh-o::before{content:"Đang ở: ";color:var(--muted)}
  .nh-khac td .btn.sm{width:100%;justify-content:center}
}