:root{--kpi:#0b5cab}
.kpi-body{margin:0;background:#f3f6fa;font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#1d2733}
.kpi-app{font-size:15px;line-height:1.5;color:#1d2733}
.kpi-app *{box-sizing:border-box}
.kpi-app a{color:var(--kpi)}
.kpi-top{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--kpi);color:#fff;padding:10px 20px;position:sticky;top:0;z-index:20}
.kpi-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.kpi-brand img{height:34px;width:auto;background:#fff;border-radius:6px;padding:2px}
.kpi-user{display:flex;align-items:center;gap:14px}
.kpi-who{text-align:right;line-height:1.25}.kpi-who b{display:block}.kpi-who small{opacity:.85}
.kpi-main{max-width:1280px;margin:0 auto;padding:22px 18px 40px}
.kpi-footer{text-align:center;color:#6b7785;font-size:12px;padding:16px}
.kpi-btn{display:inline-block;border:1px solid var(--kpi);background:#fff;color:var(--kpi)!important;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none!important;line-height:1.3}
.kpi-btn:hover{filter:brightness(.96)}
.kpi-primary{background:var(--kpi);color:#fff!important}
.kpi-ghost{background:#fff}
.kpi-top .kpi-ghost{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.7)}
.kpi-warn{background:#c0392b;border-color:#c0392b;color:#fff!important}
.kpi-sm{padding:4px 10px;font-size:13px}.kpi-wide{width:100%;padding:11px}
.kpi-hello{margin:0 0 4px;font-size:26px}
.kpi-muted{color:#7a8794}
.kpi-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:18px}
.kpi-tile{position:relative;display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid #dce3ec;border-radius:14px;padding:20px;text-decoration:none!important;color:#1d2733!important;box-shadow:0 1px 3px rgba(20,40,70,.05);transition:.15s}
.kpi-tile:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,40,70,.12);border-color:var(--kpi)}
.kpi-ico{width:44px;height:44px;color:var(--kpi)}.kpi-ico svg{width:100%;height:100%}
.kpi-lab{font-weight:700;font-size:16px}.kpi-desc{color:#6b7785;font-size:13px}
.kpi-count{position:absolute;top:14px;right:14px;background:#d9534f;color:#fff;border-radius:99px;min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;padding:0 7px}
.kpi-todo{background:#fff8e6;border:1px solid #f1dc9c;border-radius:12px;padding:12px 18px;margin:14px 0}
.kpi-todo h2{font-size:16px;margin:0 0 6px}.kpi-todo ul{margin:0;padding-left:18px}.kpi-todo li.kpi-t-bad a{color:#b32d2e}
.kpi-pagehead{margin-bottom:12px}.kpi-pagehead h1{margin:4px 0;font-size:24px}.kpi-pagehead p{margin:0;color:#6b7785}
.kpi-back{font-size:14px;text-decoration:none}
.kpi-h1{font-size:22px;margin:6px 0}.kpi-h1 small{font-weight:400;color:#6b7785}
.kpi-toolbar{margin:10px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.kpi-inline{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.kpi-app select,.kpi-app input[type=text],.kpi-app input[type=number],.kpi-app input[type=date],.kpi-app input[type=password],.kpi-app textarea{border:1px solid #c5cfdb;border-radius:7px;padding:7px 9px;font-size:14px;background:#fff;color:#1d2733;max-width:100%;font-family:inherit}
.kpi-app textarea{width:100%;resize:vertical}
.kpi-tabs{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.kpi-tabs a{padding:7px 14px;border-radius:99px;background:#e6edf5;text-decoration:none;color:#33475b;font-weight:600;font-size:14px}
.kpi-tabs a.on{background:var(--kpi);color:#fff}
.kpi-notice{padding:10px 14px;border-radius:9px;margin:10px 0;border:1px solid;font-size:14px}
.kpi-n-ok{background:#e9f7ee;border-color:#a8dbb9}.kpi-n-bad{background:#fdecea;border-color:#f1aeb5}.kpi-n-warn{background:#fff6e0;border-color:#f0d58c}.kpi-n-info{background:#eaf3fc;border-color:#b6d4f0}
.kpi-badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;background:#e6edf5;color:#33475b;white-space:nowrap}
.kpi-b-ok{background:#d9f2e1;color:#1c6b36}.kpi-b-wait{background:#fff0c7;color:#7a5b00}.kpi-b-bad{background:#fbd9d7;color:#9c2a22}.kpi-b-info{background:#dcebfa;color:#12508f}.kpi-b-draft{background:#eceff3;color:#5b6773}
.kpi-statusbar{margin:8px 0}
.kpi-dochead{text-align:center;margin:14px 0 8px}.kpi-dochead h2{font-size:19px;margin:0 0 6px;text-transform:uppercase}.kpi-dochead h2 span{display:block;color:var(--kpi)}
.kpi-dochead p{text-align:left;margin:4px 0}.kpi-dochead .kpi-subtitle{text-align:center;font-style:italic}
.kpi-tablewrap{overflow-x:auto;background:#fff;border:1px solid #dce3ec;border-radius:10px}
table.kpi-table,table.kpi-list{width:100%;border-collapse:collapse;font-size:14px}
.kpi-table th,.kpi-table td,.kpi-list th,.kpi-list td{border:1px solid #dce3ec;padding:7px 9px;vertical-align:top;text-align:left}
.kpi-table th,.kpi-list th{background:#eef3f9;text-align:center;font-weight:700;position:sticky;top:0}
.kpi-b{font-weight:700}.kpi-unreg td{background:#f7f8fa;color:#8a95a1}
.kpi-table td input[type=text],.kpi-table td input[type=date],.kpi-table td select{width:100%}
.kpi-ev{min-width:190px;background:#fbfdff}.kpi-evedit{background:#f0f7ff}
.kpi-ev select{width:100%;margin-bottom:4px}.kpi-ev .kpi-pt{width:100%;margin-bottom:4px}.kpi-nt{min-height:34px}
.kpi-ok{color:#1c6b36;font-weight:700}.kpi-bad{color:#b32d2e;font-weight:700}.kpi-note{font-size:12px;color:#5b6773;font-style:italic}
.kpi-total td,.kpi-comment td{background:#f3f8ff;font-weight:700}.kpi-comment td{font-weight:400}.kpi-live{font-size:18px;color:var(--kpi)}
.kpi-multi summary{cursor:pointer;border:1px solid #c5cfdb;border-radius:7px;padding:7px 9px;background:#fff;font-size:14px}
.kpi-multi-list{padding:6px 4px;max-height:180px;overflow:auto}.kpi-multi-list label{display:block;font-size:14px;padding:2px 0}
.kpi-sign{text-align:right;margin:18px 10px;line-height:1.5}
.kpi-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0;align-items:center}.kpi-actions.kpi-split{justify-content:space-between}
.kpi-returnform input[type=text]{min-width:260px}
.kpi-hint{color:#6b7785;font-size:13px}
.kpi-sec{margin:22px 0 8px;font-size:17px}
.kpi-result{background:#fff;border:1px solid #dce3ec;border-radius:12px;padding:12px 18px;margin:14px 0}.kpi-result h3{margin:0 0 8px}
.kpi-res-grid{display:flex;gap:14px;flex-wrap:wrap}.kpi-res-grid>div{background:#f3f8ff;border-radius:10px;padding:10px 18px;min-width:130px}.kpi-res-grid span{display:block;font-size:12px;color:#5b6773}.kpi-res-grid b{font-size:24px;color:var(--kpi)}
.kpi-final{background:#e9f7ee!important}.kpi-final em{display:block;font-style:normal;font-weight:700;color:#1c6b36}
.kpi-chart{background:#fff;border:1px solid #dce3ec;border-radius:12px;padding:12px}.kpi-svg{width:100%;height:auto}
.kpi-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;margin-bottom:6px}.kpi-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.kpi-matrix td.kpi-heat{text-align:center;min-width:44px}
.kpi-modal{position:fixed;inset:0;background:rgba(10,20,35,.5);display:flex;align-items:center;justify-content:center;z-index:9999}
.kpi-modal-box{background:#fff;border-radius:14px;padding:22px;max-width:440px;width:92%;box-shadow:0 12px 40px rgba(0,0,0,.3)}
.kpi-modal-box p{margin:0 0 18px;font-size:16px}.kpi-modal-btns{display:flex;justify-content:flex-end;gap:10px}
.kpi-loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--kpi),#123c6b) center/cover no-repeat}
.kpi-logincard{background:rgba(255,255,255,.96);border-radius:18px;padding:30px;width:100%;max-width:410px;box-shadow:0 18px 50px rgba(0,0,0,.3);text-align:center}
.kpi-logincard .kpi-logo{max-height:84px;max-width:200px;margin-bottom:8px}
.kpi-school{font-weight:700;color:var(--kpi);letter-spacing:.5px}.kpi-logincard h1{font-size:22px;margin:6px 0}.kpi-sub{color:#5b6773;margin:0 0 14px;font-size:14px}
.kpi-logincard form{text-align:left}.kpi-logincard label{display:block;font-weight:600;font-size:13px;margin:10px 0 4px}
.kpi-logincard input[type=text],.kpi-logincard input[type=password]{width:100%;padding:11px}
.kpi-logincard .kpi-check{font-weight:400;display:flex;gap:6px;align-items:center}.kpi-logincard button{margin-top:14px}
.kpi-forgot{margin:12px 0 0;font-size:13px}.kpi-foot{font-size:12px;color:#6b7785;margin-top:10px}
@media(max-width:700px){.kpi-top{flex-direction:column;align-items:flex-start}.kpi-main{padding:14px 10px}.kpi-who{text-align:left}}
.kpi-nav{display:flex;gap:4px;flex-wrap:wrap;background:#fff;border-bottom:1px solid #dce3ec;padding:0 14px;position:sticky;top:0;z-index:15;overflow-x:auto}
.kpi-nav a{padding:13px 16px;text-decoration:none;color:#33475b;font-weight:700;font-size:13px;border-bottom:3px solid transparent;white-space:nowrap;letter-spacing:.2px}
.kpi-nav a:hover{color:var(--kpi)}.kpi-nav a.on{color:var(--kpi);border-bottom-color:var(--kpi)}
.kpi-nbadge{display:inline-block;background:#d9534f;color:#fff;border-radius:99px;min-width:19px;padding:0 6px;font-size:11px;text-align:center;margin-left:3px}
.kpi-top{position:static}
.kpi-grp td{background:#eaf2fb;font-weight:700;color:#0d4a8a}
.kpi-c{text-align:center}
.kpi-work td{vertical-align:top}
.kpi-total td{font-size:15px;border-top:2px solid var(--kpi)!important}
/* v0.3 – phiếu đánh giá KPI, tổng hợp */
.kpi-evtable .kpi-tt{width:42px}.kpi-evtable .kpi-mx{width:70px}
.kpi-evtable tr.kpi-grp td{background:#eaf2fb;font-weight:700;color:#0d4a8a}
.kpi-evin{display:flex;gap:4px}.kpi-evin select{flex:1 1 auto;min-width:0;padding:5px}.kpi-evin .kpi-pt{width:76px!important;flex:0 0 76px;padding:5px}
.kpi-evtable .kpi-ev{min-width:170px}.kpi-notecol{min-width:160px}.kpi-notecol textarea{min-height:34px}
.kpi-evtable tr.kpi-missing .kpi-evin select{border-color:#e0a100;background:#fffbea}
.kpi-total100 td{background:#eef6ee!important}
.kpi-small{font-size:11px;font-weight:400}
.kpi-flow{margin-top:6px;font-size:13px;color:#33475b}.kpi-flow b.kpi-ok{color:#1c6b36}
.kpi-plandet{background:#fff;border:1px solid #dce3ec;border-radius:10px;margin:10px 0}
.kpi-plandet>summary{cursor:pointer;padding:10px 14px;font-weight:600;color:var(--kpi)}
.kpi-plandet .kpi-tablewrap{border:0;border-top:1px solid #dce3ec;border-radius:0 0 10px 10px}
.kpi-sumtable input[type=text]{width:100%;min-width:110px;padding:5px 7px}
.kpi-sumtable .kpi-money{text-align:right}
.kpi-in{min-width:150px}
@media print{.kpi-top,.kpi-nav,.kpi-footer,.kpi-actions,.kpi-toolbar,.kpi-back,.kpi-tabs{display:none!important}.kpi-main{padding:0}}

.kpi-quick{margin:8px 0;font-size:14px}.kpi-quick .kpi-btn{margin-right:4px}
.kpi-evtable input.kpi-nt{width:100%;margin-top:4px;padding:4px 7px;font-size:13px}
/* ===== v0.4 – ứng dụng (PWA) & điện thoại ===== */
.kpi-ni,.kpi-ns,.kpi-bs{display:none}
.kpi-nav a{display:inline-flex;align-items:center;gap:4px}
.kpi-grp-m{display:none}.kpi-mcode{display:none}
.kpi-applink{color:inherit;text-decoration:underline}
.kpi-install{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #cfe0f3;border-radius:14px;padding:10px 12px;margin:0 0 14px;box-shadow:0 2px 10px rgba(11,92,171,.08);text-align:left}
.kpi-install[hidden]{display:none}
.kpi-install img{width:44px;height:44px;border-radius:10px;flex:0 0 44px}
.kpi-install-t{flex:1;font-size:14px;line-height:1.35}.kpi-install-t b{display:block}
.kpi-install-i{display:none;color:#5b6773}.kpi-install.kpi-ios .kpi-install-i{display:block}.kpi-install.kpi-ios .kpi-install-a{display:none}
.kpi-install-a{color:#5b6773}
.kpi-install-x{background:none;border:0;font-size:24px;line-height:1;color:#7a8794;cursor:pointer;padding:0 4px}
.kpi-logincard .kpi-install{margin:16px 0 0}
.kpi-appgrid{display:grid;grid-template-columns:minmax(260px,340px) 1fr;gap:16px;align-items:start}
.kpi-appcard{background:#fff;border:1px solid #dce3ec;border-radius:14px;padding:16px 18px}.kpi-appcard h3{margin:10px 0 6px;font-size:16px}.kpi-appcard ol{margin:0 0 6px;padding-left:20px;line-height:1.6}
.kpi-appqr{text-align:center}.kpi-qr svg{width:100%;max-width:260px;height:auto}
html.kpi-standalone .kpi-applink,html.kpi-standalone .kpi-install{display:none!important}

@media (max-width:700px){
  .kpi-body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .kpi-app input,.kpi-app select,.kpi-app textarea{font-size:16px!important}
  /* đầu trang gọn */
  .kpi-top{flex-direction:row!important;align-items:center!important;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top))}
  .kpi-brand span{font-size:14px}.kpi-brand img{height:28px}
  .kpi-who small{display:none}.kpi-who b{font-size:13px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kpi-user{gap:8px}.kpi-top .kpi-btn{padding:6px 10px;font-size:12px}
  /* thanh menu dưới kiểu ứng dụng */
  .kpi-nav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;display:flex;justify-content:space-around;gap:0;padding:4px 2px calc(4px + env(safe-area-inset-bottom));border-top:1px solid #dce3ec;border-bottom:0;box-shadow:0 -4px 16px rgba(20,40,70,.08);overflow:visible}
  .kpi-nav a{flex:1 1 0;min-width:0;flex-direction:column;gap:2px;padding:6px 2px;border-bottom:0;font-size:10.5px;font-weight:600;letter-spacing:0;position:relative;text-align:center}
  .kpi-nav a.kpi-nomob{display:none}
  .kpi-nav a.on{color:var(--kpi);border-bottom:0}.kpi-nav a.on .kpi-ni{background:rgba(11,92,171,.1)}
  .kpi-nl{display:none}.kpi-ni{display:flex;width:44px;height:28px;border-radius:14px;align-items:center;justify-content:center}.kpi-ni svg{width:22px;height:22px}
  .kpi-ns{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .kpi-nav .kpi-nbadge{position:absolute;top:2px;left:50%;margin-left:8px;font-size:10px;min-width:16px;padding:0 4px}
  .kpi-main{padding:12px 10px 24px}
  .kpi-hello{font-size:21px}.kpi-pagehead h1,.kpi-h1{font-size:19px}
  .kpi-tiles{grid-template-columns:1fr 1fr;gap:10px}.kpi-tile{padding:14px}.kpi-ico{width:34px;height:34px}.kpi-lab{font-size:13.5px}.kpi-desc{display:none}
  form.kpi-form .kpi-actions{position:sticky;bottom:calc(66px + env(safe-area-inset-bottom));background:rgba(243,246,250,.96);padding:8px 0;margin:10px 0;z-index:5;flex-wrap:nowrap}
  .kpi-actions .kpi-btn{flex:1 1 auto;text-align:center;padding:9px 10px;font-size:13px}
  form.kpi-form .kpi-actions a.kpi-btn{flex:0 0 auto}
  .kpi-cardwrap table{border:0!important}
  .kpi-bl{display:none}.kpi-bs{display:inline!important}
  .kpi-res-grid>div{min-width:calc(50% - 8px);flex:1}
  .kpi-appgrid{grid-template-columns:1fr}
  .kpi-dochead h2{font-size:16px}
  /* bảng → thẻ */
  .kpi-cardwrap{border:0!important;background:transparent!important;overflow:visible!important}
  .kpi-cardwrap table,.kpi-cardwrap tbody,.kpi-cardwrap tfoot,.kpi-cardwrap tr,.kpi-cardwrap td{display:block;width:100%;box-sizing:border-box}
  .kpi-cardwrap thead{display:none}
  .kpi-cardwrap tr{background:#fff;border:1px solid #dce3ec;border-radius:12px;margin:0 0 10px;padding:10px 12px}
  .kpi-cardwrap td{border:0!important;padding:3px 0!important;text-align:left!important;background:transparent!important}
  .kpi-cardwrap td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;font-weight:600;color:#6b7785;margin-top:4px}
  .kpi-cardwrap td.kpi-mhide,.kpi-cardwrap td.kpi-mempty{display:none}
  .kpi-cardwrap td.kpi-mmain{font-weight:600;font-size:15px;line-height:1.4}
  .kpi-cardwrap .kpi-mcode{display:inline;color:var(--kpi)}
  .kpi-cardwrap tr.kpi-grp-m{display:block;background:#eaf2fb;border-color:#cfe0f3;color:#0d4a8a;font-weight:700;margin-top:16px}
  .kpi-cardwrap tr.kpi-grp-m td{padding:0!important}
  .kpi-cardwrap tr.kpi-grp{display:flex;flex-wrap:wrap;gap:4px 16px;background:#eaf2fb;border-color:#cfe0f3;margin-top:16px;color:#0d4a8a}
  .kpi-cardwrap tr.kpi-grp td{width:auto;flex:0 0 auto}
  .kpi-cardwrap tr.kpi-grp td.kpi-gcode{display:none}
  .kpi-cardwrap tr.kpi-grp td.kpi-gname{flex:1 0 100%;font-size:15px}
  .kpi-cardwrap tr.kpi-grp td[data-label]::before{display:inline;margin-right:4px}
  .kpi-cardwrap tr.kpi-item{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
  .kpi-cardwrap tr.kpi-item td.kpi-mmain,.kpi-cardwrap tr.kpi-item td.kpi-evedit,.kpi-cardwrap tr.kpi-item td.kpi-notecol{grid-column:1 / -1}
  .kpi-cardwrap tr.kpi-item td.kpi-sv:has(.kpi-evin){grid-column:1 / -1}
  .kpi-cardwrap tr.kpi-item td.kpi-evedit{background:#f0f7ff!important;border-radius:8px;padding:6px 8px!important}
  .kpi-cardwrap tr.kpi-missing{border-color:#e0a100}
  .kpi-cardwrap .kpi-evin .kpi-pt{flex:0 0 96px;width:96px!important}
  .kpi-cardwrap tfoot tr{background:#f3f8ff}
  .kpi-cardwrap tfoot tr.kpi-total{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px;border:2px solid var(--kpi)}
  .kpi-cardwrap tfoot td.kpi-fhead{grid-column:1 / -1;font-weight:700;font-size:15px;color:var(--kpi)}
  .kpi-cardwrap .kpi-live,.kpi-cardwrap .kpi-live100{font-size:20px}
  .kpi-cardwrap tr.kpi-prow td.kpi-in{margin-top:2px}
  .kpi-cardwrap tr.kpi-unreg{opacity:.7}
  .kpi-cardwrap .kpi-list tr.kpi-grp{display:block}
  .kpi-cardwrap .kpi-list td:first-child{font-weight:600}
  .kpi-sumtable input[type=text]{min-width:0}
  .kpi-returnform input[type=text]{min-width:0;flex:1}
  .kpi-toolbar .kpi-inline{width:100%}
  .kpi-toolbar select{flex:1}
}

/* 0.4.1: cột bổ sung sau khi đăng ký */
.kpi-plantable td.kpi-late{background:#fffbea}
.kpi-plantable td.kpi-late textarea,.kpi-plantable td.kpi-late input{border-color:#e6c65c}

/* 0.4.2: nhiệm vụ "Không thực hiện" */
.kpi-na{display:flex;align-items:center;gap:6px;font-size:13px;color:#5b6773;white-space:nowrap;cursor:pointer;margin:0 0 4px}
.kpi-na input{width:16px;height:16px;margin:0;accent-color:#8a5a00}
.kpi-cna .kpi-evin{opacity:.35}
.kpi-cna{background:#f4f5f7}
.kpi-nabadge{display:inline-block;background:#eef0f3;color:#5b6773;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.kpi-plantable tr.kpi-isna td{background:#f4f5f7;color:#8a94a0}
.kpi-plantable tr.kpi-isna td.kpi-nacell{color:#5b6773}
.kpi-plantable th.kpi-nacol,.kpi-plantable td.kpi-nacell{width:96px}
.kpi-planfoot td{font-weight:600}
.kpi-nahint{margin-top:6px;font-size:12px;font-weight:400;color:#8a5a00;background:#fff7e0;border-radius:6px;padding:5px 7px;line-height:1.4}
@media (max-width:700px){
  .kpi-plantable th.kpi-nacol,.kpi-plantable td.kpi-nacell{width:auto}
  .kpi-cardwrap td.kpi-nacell{text-align:left}
}
@media print{.kpi-na input{display:none}.kpi-nahint{display:none}}
@media (min-width:701px){.kpi-evin select.kpi-st{min-width:112px}}