/* KPIV5.2.73: FHD-first personal KPI, compact columns and independent table scrolling */
@media(min-width:1500px){
 #page-kpi .hf8-personal-kpi{gap:16px}
 #page-kpi .hf8-personal-kpi-grid{grid-template-columns:minmax(0,1.4fr) minmax(350px,1fr)}
 #page-kpi .hf8-personal-kpi>.panel{min-width:0}
 #page-kpi .hf10-opportunity-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
#page-kpi .kpi-table-options{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:8px 12px;background:var(--surface-soft,#f5f8fb);border:1px solid var(--border,#dce4ed);border-bottom:0;border-radius:9px 9px 0 0}
#page-kpi .kpi-table-options small{color:var(--muted,#627487);font-size:12px}
#page-kpi .kpi-table-toggle{display:flex;gap:9px;align-items:center;font-size:13px;cursor:pointer;white-space:nowrap}
#page-kpi .kpi-table-toggle input{width:16px;height:16px;margin:0}
#page-kpi .kpi-table-viewport{max-width:100%;max-height:min(64vh,670px);overflow:auto;overscroll-behavior:contain;border-radius:0 0 9px 9px}
#page-kpi .hf8-personal-kpi-table{width:100%;min-width:1100px;border-collapse:separate;border-spacing:0}
#page-kpi .hf8-personal-kpi-table thead th{position:sticky;top:0;z-index:3;background:var(--surface,#fff);box-shadow:0 1px 0 var(--border,#dce4ed);white-space:nowrap}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact{min-width:900px}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(n+4):nth-child(-n+8),
#page-kpi .hf8-personal-kpi-table.kpi-table-compact tbody tr:not([class*="hf8-group-"])>td:nth-child(n+4):nth-child(-n+8){display:none}
#page-kpi .hf8-personal-kpi-table thead th:nth-child(3){min-width:260px}
#page-kpi .hf8-personal-kpi-table tbody tr:not([class*="hf8-group-"])>td:nth-child(3){min-width:260px;max-width:520px}
@media(max-width:1450px){#page-kpi .hf8-personal-kpi-grid{grid-template-columns:1fr 1fr}#page-kpi .hf8-score-layout{grid-template-columns:130px 1fr;gap:12px}#page-kpi .hf8-classification{grid-column:1/-1}}
@media(max-width:1000px){#page-kpi .hf8-personal-kpi-grid{grid-template-columns:1fr}#page-kpi .hf8-score-layout{grid-template-columns:1fr}#page-kpi .kpi-table-viewport{max-height:60vh}}

/* KPIV5.2.74 — Fill the card after hiding technical columns. */
#page-kpi .kpi-table-viewport{width:100%;min-width:0}
#page-kpi .hf8-personal-kpi-table{width:100%;min-width:max(100%, 1320px);table-layout:auto}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact{width:100%;min-width:max(100%, 900px);table-layout:auto}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(3),
#page-kpi .hf8-personal-kpi-table.kpi-table-compact tbody tr:not([class*="hf8-group-"])>td:nth-child(3){width:40%;min-width:280px;max-width:none;overflow-wrap:anywhere}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:first-child{min-width:102px}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(2){min-width:65px}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(9),
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(10),
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(11),
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(12){min-width:95px}
#page-kpi .hf8-personal-kpi-table.kpi-table-compact thead th:nth-child(13){min-width:170px}

/* KPIV5.2.91 - two printable annex previews share the approved source rows */
.kpi-appendix-preview{margin-top:18px;border-top:1px solid var(--border,#d9e0e7);padding:15px 0}
.kpi-preview-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.kpi-preview-content{overflow-x:auto;max-width:100%;font-size:14px;line-height:1.5}
.kpi-preview-content h4{font-size:14px;text-align:center;margin:14px 0}
.kpi-preview-content h5{font-size:13px;margin:10px 0}
.kpi-preview-entry{padding:9px 0;border-bottom:1px solid var(--border,#e0e5ea)}
.kpi-preview-entry p{margin:4px 0;overflow-wrap:anywhere}
.kpi-bc-justification{max-height:180px;overflow:auto;font-size:12px;line-height:1.6;padding:8px 0}
.kpi-bc-table textarea{width:100%;min-width:130px;margin-top:6px}

/* KPIV5.2.92 — Three real tabs and shared approved/projected display mode */
#page-kpi .kpi-5292-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 8px;border-bottom:1px solid var(--border,#dce4ed)}
#page-kpi .kpi-5292-tabs{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
#page-kpi .kpi-5292-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;padding:11px 15px;cursor:pointer;font-size:14px;color:var(--muted,#59697c);font-weight:500;border-radius:5px 5px 0 0}
#page-kpi .kpi-5292-tabs button.active{color:var(--primary,#194d7b);border-bottom-color:var(--primary,#194d7b);font-weight:650;background:var(--surface-soft,#f2f7fc)}
#page-kpi .kpi-5292-data-mode{display:flex;align-items:center;gap:3px;margin-bottom:4px;white-space:nowrap;font-size:13px}
#page-kpi .kpi-5292-data-mode>span{color:var(--muted,#59697c);margin-right:7px}
#page-kpi .kpi-5292-data-mode button{padding:7px 11px;background:var(--surface,#fff);border:1px solid var(--border,#ccd7e5);cursor:pointer;color:var(--text,#233449)}
#page-kpi .kpi-5292-data-mode button:first-of-type{border-radius:6px 0 0 6px}
#page-kpi .kpi-5292-data-mode button:last-of-type{border-radius:0 6px 6px 0}
#page-kpi .kpi-5292-data-mode button.active{background:var(--surface-soft,#e9f3fc);border-color:var(--primary,#2563a0);color:var(--primary,#235d98);font-weight:650}
#page-kpi .kpi-5292-source-note{margin:9px 0 12px;padding:10px 12px;background:var(--surface-soft,#f7f9fc);border-radius:7px;font-size:13px;line-height:1.6}
#page-kpi .kpi-5292-chip{display:inline-block;vertical-align:baseline;font-size:11px;font-weight:650;border-radius:5px;padding:2px 7px;white-space:nowrap}
#page-kpi .kpi-5292-chip.pending{color:#76501d;background:#fff1d5;border:1px solid #e8c888}
#page-kpi .kpi-5292-chip.approved{color:#12644e;background:#e9f7ef;border:1px solid #b3e2cf}
#page-kpi .kpi-5292-group-filter{display:flex;gap:7px;justify-content:flex-start;flex-wrap:wrap;margin:0 0 9px}
#page-kpi .kpi-5292-annexes{width:100%;min-width:0}
#page-kpi .kpi-5292-annex-head{text-align:center;padding:7px 0 13px}
#page-kpi .kpi-5292-annex-head h4{font-size:15px;font-weight:700;line-height:1.5;margin:0 0 5px}
#page-kpi .kpi-5292-annex-head p{font-size:13px;color:var(--muted,#66798c);margin:0}
#page-kpi .kpi-5292-table-wrap{width:100%;overflow:auto;max-height: min(72vh, 770px);border:1px solid var(--border,#dce4ed);border-radius:7px;overscroll-behavior:contain}
#page-kpi .kpi-5292-annex-table{width:100%;min-width:1240px;border-collapse:separate;border-spacing:0;line-height:1.5;font-size:13px}
#page-kpi .kpi-5292-annex-table th,#page-kpi .kpi-5292-annex-table td{border-right:1px solid var(--border,#dce4ed);border-bottom:1px solid var(--border,#dce4ed);padding:8px 9px;vertical-align:top;overflow-wrap:anywhere}
#page-kpi .kpi-5292-annex-table thead th{position:sticky;top:0;z-index:3;text-align:center;background:var(--surface-soft,#eff4f9);color:var(--text,#243c51);font-weight:650;vertical-align:middle}
#page-kpi .kpi-5292-annex-table td.num,#page-kpi .kpi-5292-annex-table th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#page-kpi .kpi-5292-catalog td:nth-last-child(1){min-width:115px}
#page-kpi .kpi-5292-catalog .kpi-5292-group-name{min-width:150px;max-width:230px}
#page-kpi .kpi-5292-catalog .kpi-5292-group-index{width:43px;text-align:center}
#page-kpi .kpi-5292-catalog tr.is-pending td:not([rowspan]),#page-kpi .kpi-5292-score tr.has-pending td{background:color-mix(in srgb,#ffe6a6 15%,var(--surface,#fff))}
#page-kpi .kpi-5292-item-status{margin-top:7px}
#page-kpi .kpi-5292-catalog tbody tr:hover td,#page-kpi .kpi-5292-score tbody tr:hover td{box-shadow:inset 0 0 0 9999px rgba(95,124,150,.035)}
#page-kpi .kpi-5292-final-row th{font-weight:650;background:var(--surface-soft,#f4f7fa)}
#page-kpi .kpi-5292-score{min-width:1840px;font-size:12px}
#page-kpi .kpi-5292-score tbody>tr>td:nth-child(2){min-width:140px}
#page-kpi .kpi-5292-score tbody>tr>td:nth-child(3){min-width:305px;width:24%}
#page-kpi .kpi-5292-score tbody>tr>td:nth-child(15){min-width:170px}
#page-kpi .kpi-5292-score small{display:block;font-size:11px;color:var(--muted,#637487);margin-top:4px}
#page-kpi .kpi-5292-work-list{max-height:235px;overflow:auto;line-height:1.6}
#page-kpi .kpi-5292-work-list>div{border-bottom:1px dashed var(--border,#dce4ed);padding:4px 0}
#page-kpi .kpi-5292-score-summary{display:flex;flex-wrap:wrap;gap:9px 19px;margin-top:13px;padding:12px;border:1px solid var(--border,#dce4ed);border-radius:7px;font-size:13px}
#page-kpi .kpi-5292-footnote{font-size:12px;color:var(--muted,#637487);line-height:1.6;margin:10px 0}
#page-kpi .kpi-5292-empty{text-align:center;color:var(--muted,#637487)}
@media(max-width:900px){#page-kpi .kpi-5292-tabs{width:100%}#page-kpi .kpi-5292-tabs button{flex:1;padding:9px;font-size:12px}#page-kpi .kpi-5292-data-mode{margin:8px 0}}

/* KPIV5.2.93 — Bảng danh mục theo mẫu thực tế tháng 8/2026. */
#page-kpi .kpi-5293-sample-table{table-layout:fixed;min-width:1420px;font-size:13px;line-height:1.58}
#page-kpi .kpi-5293-sample-table .kpi-5292-group-name{min-width:0;max-width:none;font-weight:650}
#page-kpi .kpi-5293-sample-table .kpi-5292-group-index{width:auto;text-align:center;font-weight:700}
#page-kpi .kpi-5293-sample-table .kpi-5293-category{padding:0 0 15px;margin:0 0 15px;border-bottom:1px dashed var(--border,#dde5ee)}
#page-kpi .kpi-5293-sample-table .kpi-5293-category:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
#page-kpi .kpi-5293-sample-table .kpi-5293-category-prefix{display:block;color:var(--text,#243c51);margin-bottom:7px;font-size:12px}
#page-kpi .kpi-5293-sample-table .kpi-5293-work-item{display:flex;gap:5px;align-items:baseline;padding:3px 4px;margin:2px 0;border-radius:4px}
#page-kpi .kpi-5293-sample-table .kpi-5293-work-item.is-pending{background:color-mix(in srgb,#ffe2a1 29%,var(--surface,#fff))}
#page-kpi .kpi-5293-sample-table .kpi-5293-bullet{flex-shrink:0}
#page-kpi .kpi-5293-sample-table .kpi-5293-product-result{color:var(--muted,#52647b)}
#page-kpi .kpi-5293-sample-table .kpi-5293-pending-mark{display:inline-block;margin-left:6px;color:#925f1b;font-size:11px}
#page-kpi .kpi-5293-sample-table .kpi-5293-points>div{margin-bottom:8px}
#page-kpi .kpi-5293-sample-table .kpi-5293-points small{font-size:11px;color:var(--muted,#52647b)}
#page-kpi .kpi-5293-sample-table td{overflow-wrap:break-word;word-break:normal}
/* 5.3.4: diễn giải điểm A giữ trong một ô, không tràn cột. */
#page-kpi .kpi-5292-score tbody>tr>td:nth-child(8){min-width:245px;width:17%;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.25}
#page-kpi .kpi-5292-score tbody>tr>td:nth-child(8) small{white-space:normal;overflow-wrap:anywhere;font-size:12px;line-height:1.25}
#page-kpi .kpi-531-calculation,#page-kpi .kpi-531-calculation p{line-height:1;margin-top:0;margin-bottom:0.25em}

/* KPIV5.3.28: G2 trace on personal KPI. */
.kpi5328-g2-trace{margin-top:16px;border:1px solid var(--border,#d5dce5);border-radius:12px;padding:12px 14px}
.kpi5328-g2-trace summary{cursor:pointer;font-weight:650;font-size:15px}
.kpi5328-g2-trace p{color:var(--muted,#64748b);font-size:13px;margin:12px 0}
.kpi5328-g2-trace table{width:100%;min-width:820px}
.kpi5328-g2-trace td small{display:block;font-size:11px;color:var(--muted,#64748b);overflow-wrap:anywhere}