/* Bộ khung giao diện KD — theo bản tổng hợp đã chốt. Mọi màu là biến; sáng/tối. */
.kk,.kk-nen{--kd-bg:#F6F4F1;--kd-surface:#FFFFFF;--kd-surface-2:#FBF8F4;--kd-line:#E6DFD6;--kd-ink:#231C17;--kd-muted:#6E6259;--kd-lacquer:#9E2B1F;--kd-lacquer-soft:#F7E6E2;--kd-gold:#8A6212;--kd-gold-soft:#F6EBD3;--kd-good:#1F7A4D;--kd-good-soft:#E3F2EA;--kd-bad:#B42318;--kd-bad-soft:#FBE7E5;--kd-warn:#A15C00;--kd-warn-soft:#FDF0DC;--kd-brown:#7A4A21;--kd-brown-soft:#F3E7DA;--kd-info:#28527A;--kd-info-soft:#E4EEF7;--kd-purple:#5B3F8C;--kd-purple-soft:#ECE6F5;--kd-grey:#5E5852;--kd-grey-soft:#EEEAE5;--kd-bezel:#CFC6BB;--kd-on:#FFFFFF;--kd-r:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kk,:root:not([data-theme="light"]) .kk-nen{--kd-bg:#17130F;--kd-surface:#211B16;--kd-surface-2:#2A231D;--kd-line:#3A3129;--kd-ink:#F2ECE6;--kd-muted:#B4A89D;--kd-lacquer:#E0705F;--kd-lacquer-soft:#3D221D;--kd-gold:#D9AE55;--kd-gold-soft:#3A2F1A;--kd-good:#5CC48E;--kd-good-soft:#1B3328;--kd-bad:#F08A7F;--kd-bad-soft:#3E1F1C;--kd-warn:#F0B35C;--kd-warn-soft:#3A2C17;--kd-brown:#D9A877;--kd-brown-soft:#35271B;--kd-info:#8DB8E0;--kd-info-soft:#1C2A38;--kd-purple:#B9A2E3;--kd-purple-soft:#2B2338;--kd-grey:#C9C0B7;--kd-grey-soft:#2C2620;--kd-bezel:#4A4038;--kd-on:#17130F}}
:root[data-theme="dark"] .kk,:root[data-theme="dark"] .kk-nen{--kd-bg:#17130F;--kd-surface:#211B16;--kd-surface-2:#2A231D;--kd-line:#3A3129;--kd-ink:#F2ECE6;--kd-muted:#B4A89D;--kd-lacquer:#E0705F;--kd-lacquer-soft:#3D221D;--kd-gold:#D9AE55;--kd-gold-soft:#3A2F1A;--kd-good:#5CC48E;--kd-good-soft:#1B3328;--kd-bad:#F08A7F;--kd-bad-soft:#3E1F1C;--kd-warn:#F0B35C;--kd-warn-soft:#3A2C17;--kd-brown:#D9A877;--kd-brown-soft:#35271B;--kd-info:#8DB8E0;--kd-info-soft:#1C2A38;--kd-purple:#B9A2E3;--kd-purple-soft:#2B2338;--kd-grey:#C9C0B7;--kd-grey-soft:#2C2620;--kd-bezel:#4A4038;--kd-on:#17130F}

.kk{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.45;color:var(--kd-ink);padding:6px 4px 12px;display:flex;flex-direction:column;gap:8px;min-width:0;max-width:100%;box-sizing:border-box}
:where(.kk,.kk-nen) *,:where(.kk,.kk-nen) *::before,:where(.kk,.kk-nen) *::after{box-sizing:border-box}
:where(.kk,.kk-nen) button,:where(.kk,.kk-nen) select,:where(.kk,.kk-nen) input{font:inherit;color:inherit}
@media (min-width:900px){.kk{padding:14px 20px}}

/* Khối có tiêu đề màu */
.kk-sec{background:var(--kd-surface);border:1px solid var(--kd-line);border-radius:var(--kd-r);overflow:hidden;min-width:0}
.kk-sec>h4{margin:0;padding:7px 10px 14px;padding-bottom:7px;font-size:14px;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--kd-lacquer-soft);color:var(--kd-lacquer)}
.kk-sec>h4 .kk-ph{font-size:12px;font-weight:500;color:var(--kd-muted)}
.kk-h-do>h4{background:var(--kd-lacquer-soft);color:var(--kd-lacquer)}
.kk-h-vang>h4{background:var(--kd-gold-soft);color:var(--kd-gold)}
.kk-h-xanh>h4{background:var(--kd-good-soft);color:var(--kd-good)}
.kk-h-lam>h4{background:var(--kd-info-soft);color:var(--kd-info)}
.kk-h-nau>h4{background:var(--kd-brown-soft);color:var(--kd-brown)}
.kk-h-xam>h4{background:var(--kd-grey-soft);color:var(--kd-grey)}
.kk-h-loi>h4{background:var(--kd-bad-soft);color:var(--kd-bad)}
.kk-h-tim>h4{background:var(--kd-purple-soft);color:var(--kd-purple)}
.kk-h-cam>h4{background:var(--kd-warn-soft);color:var(--kd-warn)}
.kk-sb{padding:8px 10px 10px;display:flex;flex-direction:column;gap:7px;min-width:0}

/* KPI */
.kk-kg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
@media (min-width:700px){.kk-kg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.kk-kg.kk-c4{grid-template-columns:repeat(4,minmax(0,1fr))}.kk-kg.kk-c5{grid-template-columns:repeat(5,minmax(0,1fr))}.kk-kg.kk-c6{grid-template-columns:repeat(6,minmax(0,1fr))}}
.kk-k{border:1px solid var(--kd-line);border-radius:8px;padding:6px 8px;background:var(--kd-surface);min-width:0;display:flex;flex-direction:column;gap:1px}
.kk-k small{font-size:12px;color:var(--kd-muted)}
.kk-k b{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kk-k .kk-s{font-size:12px;color:var(--kd-muted)}
.kk-k.kk-red{border-color:var(--kd-bad);background:var(--kd-bad-soft)}
.kk-up{color:var(--kd-good);font-weight:600}
.kk-k.kk-red .kk-up{color:color-mix(in srgb,var(--kd-good) 82%,var(--kd-ink))}   /* ▲▼ xanh trên ô đỏ nhạt: tăng tương phản ≥ 4,5 */.kk-dn{color:var(--kd-bad);font-weight:600}.kk-eq{color:var(--kd-muted);font-weight:600}
.kk-lk{color:var(--kd-lacquer);font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:0;padding:0;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}

/* Thanh lọc chung */
.kk-lbar{background:var(--kd-surface);border:1px solid var(--kd-line);border-radius:var(--kd-r);padding:6px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kk-lrow{display:flex;gap:6px;align-items:center;min-width:0}
.kk-lbtn,.kk-lky button{border:1px solid var(--kd-line);background:var(--kd-surface);border-radius:8px;padding:4px 9px;font-size:13px;white-space:nowrap;cursor:pointer;min-height:32px}
.kk-lbtn.kk-on{background:var(--kd-lacquer-soft);color:var(--kd-lacquer);border-color:var(--kd-lacquer)}
.kk-lky{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.kk-lky::-webkit-scrollbar{display:none}
.kk-lky button[aria-pressed="true"]{background:var(--kd-lacquer);color:var(--kd-on);border-color:var(--kd-lacquer);font-weight:600}
.kk-ltg{display:flex;flex-wrap:wrap;gap:5px}
.kk-ltg span{background:var(--kd-lacquer-soft);color:var(--kd-lacquer);border-radius:999px;padding:2px 9px;font-size:12px;display:inline-flex;gap:5px;align-items:center}
.kk-ltg button{background:none;border:0;color:inherit;cursor:pointer;padding:0 2px}
.kk-lpan{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.kk-lpan.kk-mo{display:grid}
@media (min-width:900px){.kk-lpan{grid-template-columns:repeat(5,minmax(0,1fr))}}
.kk-lf{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--kd-muted);min-width:0}
.kk-lf select,.kk-lf input{border:1px solid var(--kd-line);border-radius:8px;padding:5px 6px;background:var(--kd-surface);font-size:13px;min-width:0;width:100%}
.kk-lf.kk-on select,.kk-lf.kk-on input{border-color:var(--kd-lacquer);background:var(--kd-lacquer-soft)}

/* Chip, tab, pill */
.kk-chip{border:1px solid var(--kd-line);background:var(--kd-surface);border-radius:999px;padding:3px 10px;font-size:13px;cursor:pointer}
.kk-chip[aria-pressed="true"]{background:var(--kd-lacquer);color:var(--kd-on);border-color:var(--kd-lacquer)}
.kk-tabs{display:flex;gap:2px;border-bottom:2px solid var(--kd-line);overflow-x:auto;scrollbar-width:none}
.kk-tabs button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;padding:7px 10px;color:var(--kd-muted);cursor:pointer;white-space:nowrap;display:inline-flex;gap:5px;align-items:center}
.kk-tabs button[aria-selected="true"]{color:var(--kd-lacquer);font-weight:700;border-bottom-color:var(--kd-lacquer)}
.kk-cn{background:var(--kd-info);color:var(--kd-on);border-radius:999px;min-width:20px;height:20px;padding:0 5px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.kk-pill{display:inline-block;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600;white-space:nowrap}
.kk-p-g{background:var(--kd-good-soft);color:var(--kd-good)}.kk-p-r{background:var(--kd-bad-soft);color:var(--kd-bad)}.kk-p-y{background:var(--kd-warn-soft);color:var(--kd-warn)}.kk-p-b{background:var(--kd-info-soft);color:var(--kd-info)}.kk-p-x{background:var(--kd-grey-soft);color:var(--kd-grey)}.kk-p-p{background:var(--kd-purple-soft);color:var(--kd-purple)}.kk-p-gd{background:var(--kd-gold-soft);color:var(--kd-gold)}

/* Bảng cuộn trong khung */
.kk-tw{overflow:auto;max-width:100%;border:1px solid var(--kd-line);border-radius:8px;max-height:60vh;-webkit-overflow-scrolling:touch}
.kk-mt{width:100%;border-collapse:collapse;font-size:13px}
.kk-mt th{font-size:12px;color:var(--kd-muted);font-weight:600;text-align:left;padding:5px 8px;background:var(--kd-surface-2);position:sticky;top:0;white-space:nowrap}
.kk-mt td{padding:5px 8px;border-top:1px solid var(--kd-line);vertical-align:top;overflow-wrap:anywhere}
.kk-mt td.kk-p{overflow-wrap:normal}
@media (max-width:480px){.kk-mt td,.kk-mt th{padding:5px 5px}}
.kk-mt .kk-p{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kk-mt th.kk-p{text-align:right}
.kk-mt tr.kk-tot td{font-weight:700;background:var(--kd-surface-2)}
.kk-mt tr[data-kk-mo]{cursor:pointer}

/* Thẻ danh sách */
.kk-card{border:1px solid var(--kd-line);border-left:4px solid var(--kd-info);border-radius:8px;padding:7px 9px;background:var(--kd-surface);display:flex;flex-direction:column;gap:4px;min-width:0}
.kk-card.kk-v-do{border-left-color:var(--kd-bad)}.kk-card.kk-v-vang{border-left-color:var(--kd-warn)}.kk-card.kk-v-xanh{border-left-color:var(--kd-good)}.kk-card.kk-v-tim{border-left-color:var(--kd-purple)}
.kk-card .kk-ct1{display:flex;justify-content:space-between;gap:6px;font-weight:700;flex-wrap:wrap}
.kk-card dl{margin:0;display:grid;grid-template-columns:minmax(0,auto) minmax(40%,1fr);gap:2px 10px;font-size:13px}
.kk-card dt{color:var(--kd-muted);min-width:0;overflow-wrap:anywhere}.kk-card dd{margin:0;text-align:right;overflow-wrap:anywhere}
.kk-list{display:flex;flex-direction:column;gap:6px;max-height:70vh;overflow:auto}
.kk-btns{display:flex;gap:6px;flex-wrap:wrap}
.kk-btns button{border:1px solid var(--kd-lacquer);color:var(--kd-lacquer);background:var(--kd-surface);border-radius:8px;padding:5px 11px;font-size:13px;cursor:pointer;min-height:32px}
.kk-btns button.kk-pri{background:var(--kd-lacquer);color:var(--kd-on)}

/* Hộp chú thích, thanh tiến độ */
.kk-ct{background:var(--kd-info-soft);color:var(--kd-info);border-radius:8px;padding:6px 9px;font-size:12px}
.kk-bar{height:8px;border-radius:999px;background:var(--kd-grey-soft);overflow:hidden}
.kk-bar i{display:block;height:100%;background:var(--kd-good);border-radius:999px}
.kk-bar.kk-do i{background:var(--kd-bad)}.kk-bar.kk-vang i{background:var(--kd-warn)}

/* Trạng thái */
.kk-trong{border:1px dashed var(--kd-line);border-radius:8px;padding:16px;text-align:center;color:var(--kd-muted);font-size:13px}
.kk-tai{border:1px solid var(--kd-line);border-radius:8px;padding:16px;text-align:center;color:var(--kd-muted);font-size:13px;background:linear-gradient(90deg,var(--kd-surface-2),var(--kd-surface),var(--kd-surface-2));background-size:200% 100%;animation:kk-sk 1.4s linear infinite}
@keyframes kk-sk{to{background-position:-200% 0}}
.kk-loi{border:1px solid var(--kd-bad);background:var(--kd-bad-soft);color:var(--kd-bad);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;font-size:13px}
.kk-loi button{border:1px solid var(--kd-bad);background:var(--kd-surface);color:var(--kd-bad);border-radius:8px;padding:5px 12px;cursor:pointer;min-height:32px}
.kk-stamp{font-size:12px;color:var(--kd-muted);text-align:right}

/* Cửa sổ nổi */
.kk-m1bg{position:fixed;inset:0;background:rgba(20,14,10,.52);z-index:1000;display:flex;align-items:stretch;justify-content:center}
.kk-m1box{background:var(--kd-surface);color:var(--kd-ink);width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden}
.kk-m1h{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--kd-line);font-weight:700;background:var(--kd-surface-2)}
.kk-m1bk{border:0;background:none;color:var(--kd-lacquer);font-weight:600;cursor:pointer;padding:4px 2px}
.kk-m1x{display:none;margin-left:auto;border:0;background:none;font-size:18px;cursor:pointer;color:var(--kd-muted)}
.kk-m1b{padding:10px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:8px}
@media (min-width:700px){.kk-m1bg{align-items:center}.kk-m1box{width:760px;max-width:92%;height:auto;max-height:92vh;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.4)}.kk-m1bk{display:none}.kk-m1x{display:block}}
.kk-cach{background:var(--kd-info-soft);color:var(--kd-info);border-radius:8px;padding:6px 9px;font-size:12px}
.kk-sub{color:var(--kd-muted);font-weight:400}
.kk-nen.kk-trang{background:var(--kd-bg);min-height:100vh;color:var(--kd-ink)}
.kk-pill{align-self:flex-start}
.kk-pg{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;color:var(--kd-muted)}
.kk-pg button{border:1px solid var(--kd-line);background:var(--kd-surface);border-radius:8px;padding:4px 10px;min-height:32px;cursor:pointer;color:var(--kd-lacquer)}
.kk-pg button:disabled{opacity:.45;cursor:default}
.kk-ngan{align-items:flex-end}.kk-ngan .kk-m1box{height:auto;max-height:85vh;border-radius:12px 12px 0 0}.kk-ngan .kk-m1x{display:block}
@media (min-width:700px){.kk-ngan{align-items:stretch;justify-content:flex-end}.kk-ngan .kk-m1box{width:560px;max-width:100%;height:100%;max-height:none;border-radius:0}}

/* ===== Khung trang chung ===== */
.kk-app{display:flex;flex-direction:column;min-height:100vh}
.kk-top{position:sticky;top:0;z-index:50;height:57px;display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--kd-lacquer);color:var(--kd-on)}
.kk-burger{border:0;background:none;color:inherit;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.kk-burger .kk-ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.kk-brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.kk-brand img{border-radius:8px;flex:none}
.kk-brand-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.kk-brand-t b{font-size:14px}.kk-brand-t span{font-size:12px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk-who{display:none;flex-direction:column;text-align:right;line-height:1.2;font-size:13px}.kk-who small{font-size:12px;opacity:.9}
.kk-shell{display:flex;flex:1;min-width:0}
.kk-main{flex:1;min-width:0}
.kk-side{display:none;width:248px;flex:none;background:var(--kd-surface);border-right:1px solid var(--kd-line);padding:10px 10px 24px;position:sticky;top:57px;height:calc(100vh - 57px);overflow:auto}
@media (min-width:900px){.kk-side{display:block}.kk-burger{display:none}.kk-who{display:flex}}
.kk-nav-grp{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.kk-nav-grp h4{margin:10px 10px 4px;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--kd-muted);font-weight:600}
.kk-nav-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--kd-ink);text-decoration:none;min-height:40px}
.kk-nav-item:hover{background:var(--kd-grey-soft)}
.kk-nav-item[aria-current="page"]{background:var(--kd-lacquer-soft);color:var(--kd-lacquer);font-weight:700}
.kk-nav-item.kk-dim{color:var(--kd-muted)}
.kk-nav-item .kk-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kk-nt{flex:1;min-width:0}.kk-nt-tat{font-size:12px;color:var(--kd-muted)}
.kk-nav-con{padding-left:14px;display:flex;flex-direction:column;gap:2px}.kk-nav-con[hidden]{display:none}
.kk-nav-ph[aria-expanded="true"] .kk-chev{transform:rotate(180deg)}
.kk-nav-dl{margin:4px 10px;font-size:12px;color:var(--kd-muted)}
.kk-drawer-bg{position:fixed;inset:0;background:rgba(20,14,10,.52);z-index:900}
.kk-drawer{position:fixed;top:0;bottom:0;left:0;width:min(86vw,320px);background:var(--kd-surface);color:var(--kd-ink);z-index:901;display:flex;flex-direction:column;box-shadow:0 18px 60px rgba(0,0,0,.4)}
.kk-drawer-head{display:flex;justify-content:space-between;align-items:center;padding:10px;background:var(--kd-lacquer);color:var(--kd-on)}
.kk-dh-who{display:flex;flex-direction:column;line-height:1.25}.kk-dh-who small{font-size:12px;opacity:.9}
.kk-icon-btn{border:0;background:none;color:inherit;font-size:18px;width:40px;height:40px;cursor:pointer}
.kk-drawer-body{overflow:auto;padding:10px}
.kk-nen.kk-dn{display:flex;align-items:center;justify-content:center;padding:16px 4px}
.kk-dn-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.kk-dn-brand{display:flex;align-items:center;gap:10px;font-size:16px}.kk-dn-brand img{border-radius:10px}
.kk-form{display:flex;flex-direction:column;gap:10px}
.kk-form label{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--kd-muted)}
.kk-form input,.kk-form select,.kk-form textarea{border:1px solid var(--kd-line);border-radius:8px;padding:9px 10px;font-size:16px;background:var(--kd-surface);color:var(--kd-ink);width:100%;min-width:0;font-family:inherit}
.kk-err{color:var(--kd-bad);font-size:13px}.kk-err[hidden]{display:none}
.kk-nut{border:1px solid var(--kd-lacquer);color:var(--kd-lacquer);background:var(--kd-surface);border-radius:8px;padding:9px 14px;font-weight:600;cursor:pointer;min-height:40px}
.kk-nut.kk-pri{background:var(--kd-lacquer);color:var(--kd-on)}