/* PHF QTTH — Chi phí nhân sự · TỔNG QUAN V1. Scoped to .phf-ov only.
 * Same vocabulary as Lương theo năm (.phf-pa) and Chi phí VPP (.phf-vpp):
 * Arial, square corners, 1px #d7dde0 panels, numbered orange section markers,
 * uppercase 13.5px section heads, centered numeric cells, tables first.
 * Comparison is direction-only in neutral ink — never good/bad colours.
 * (The root deliberately does NOT carry .phf-pa: the Excel export decorator
 * binds its Lương theo năm button to any .phf-pa root.) */
.phf-ov{--ov-orange:#F58220;--ov-orange-ink:#B8560A;--ov-ink:#1E2430;--ov-muted:#5C6672;--ov-line:#d7dde0;--ov-line-soft:#edf1f0;font-family:Arial,Helvetica,sans-serif;color:var(--ov-ink)}
.phf-ov,.phf-ov *{border-radius:0!important}
.phf-ov .phf-qr-block-no{background:var(--ov-orange)}
.phf-ov .phf-ov-head{margin-bottom:10px}
.phf-ov .phf-ov-scope{margin:0;font-size:12.5px}
.phf-ov .phf-ov-tabs{margin-bottom:12px}
.phf-ov .phf-ov-filters{border-left-color:var(--ov-orange);margin-bottom:14px}
.phf-ov .phf-ov-filters .phf-qr-filters{align-items:flex-end;flex-wrap:nowrap}
.phf-ov .phf-ov-filters .phf-qtth-field{flex:0 0 170px;min-width:150px}
.phf-ov .phf-ov-filters select{width:100%;box-sizing:border-box}
.phf-ov .phf-ov-source{margin:0 0 4px;font-size:12px;line-height:1.45;color:var(--ov-muted);max-width:760px}

/* states */
.phf-ov .phf-ov-state{margin:6px 0 0;padding:12px 14px;border:1px solid var(--ov-line);border-left:3px solid #55758a;background:#F7F9FA;font-size:12.5px;line-height:1.45;color:var(--ov-ink)}
.phf-ov .phf-ov-state.is-error{border-left-color:#B42318;background:#FFF5F4}
.phf-ov .phf-ov-state.is-loading{border-left-color:var(--ov-line);color:var(--ov-muted)}

/* THEO KỲ — six owner panels */
.phf-ov .phf-ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.phf-ov .phf-ov-panel{border:1px solid var(--ov-line);background:#fff;padding:12px 14px 14px;min-width:0}
.phf-ov .phf-ov-h{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:26px;margin-bottom:8px}
.phf-ov .phf-ov-h h3{margin:0;font-size:13.5px;font-weight:700;color:#27313d;text-transform:uppercase;letter-spacing:.2px;display:flex;align-items:center}
.phf-ov .phf-ov-drill{font-size:12px;font-weight:700;color:var(--ov-orange-ink);text-decoration:none;white-space:nowrap;border-bottom:1px dotted var(--ov-orange-ink)}
.phf-ov .phf-ov-drill:hover{color:var(--ov-ink);border-bottom-color:var(--ov-ink)}
.phf-ov .phf-ov-drill:focus-visible{outline:2px solid var(--ov-orange);outline-offset:2px}
.phf-ov table.phf-ov-kv{min-width:0;width:100%;table-layout:fixed}
.phf-ov table.phf-ov-kv th,.phf-ov table.phf-ov-kv td{padding:7px 8px!important;font-size:12.5px!important;line-height:1.3;height:auto!important}
.phf-ov table.phf-ov-kv th{font-size:10.5px!important;position:static}
.phf-ov table.phf-ov-kv th:first-child,.phf-ov table.phf-ov-kv td.c-name{width:40%;text-align:left;white-space:normal}
.phf-ov table.phf-ov-kv td.c-num{font-variant-numeric:tabular-nums;white-space:normal}
.phf-ov table.phf-ov-kv tr.is-primary td{font-weight:700;background:#FBFBFA}
.phf-ov table.phf-ov-kv tbody tr:hover{background:transparent}
.phf-ov .phf-ov-note{margin:8px 0 0;font-size:11.5px;line-height:1.4;color:var(--ov-muted)}
.phf-ov .phf-ov-na{color:#8a949e;font-weight:400}

/* comparison — direction glyph + wording only, one neutral ink */
.phf-ov .phf-ov-cmp{display:inline-block;font-size:12px;font-weight:700;color:#27313d;white-space:nowrap}
.phf-ov .phf-ov-cmp small{display:block;font-size:11px;font-weight:400;color:var(--ov-muted)}
.phf-ov .phf-ov-cmp.is-flat{font-weight:400;color:var(--ov-muted)}
.phf-ov .phf-ov-cmp.is-na{font-weight:400;color:#8a949e;white-space:normal}

/* THEO NĂM — one month matrix, grouped by owner */
.phf-ov .phf-ov-matrix-wrap{border:1px solid var(--ov-line)}
.phf-ov table.phf-ov-matrix{min-width:760px;width:100%}
.phf-ov table.phf-ov-matrix th,.phf-ov table.phf-ov-matrix td{padding:6px 8px!important;font-size:12.5px!important;line-height:1.3;height:auto!important;white-space:nowrap}
.phf-ov table.phf-ov-matrix thead th{font-size:10.5px!important;text-transform:uppercase}
.phf-ov table.phf-ov-matrix td.c-num{font-variant-numeric:tabular-nums}
.phf-ov table.phf-ov-matrix td.is-na{color:#98a1ab}
.phf-ov table.phf-ov-matrix .c-total{font-weight:700;background:#f6f7f8}
.phf-ov table.phf-ov-matrix sup{font-size:9px;margin-left:1px}
.phf-ov table.phf-ov-matrix th.c-name,.phf-ov table.phf-ov-matrix td.c-name{position:sticky;left:0;z-index:1;background:#fff;text-align:left;min-width:220px;white-space:normal;box-shadow:1px 0 0 var(--ov-line)}
.phf-ov table.phf-ov-matrix thead th.c-name{background:#F3F4F6;z-index:2}
.phf-ov table.phf-ov-matrix tr.is-primary td{font-weight:700}
.phf-ov table.phf-ov-matrix tr.phf-ov-group th{position:static;background:#fff;padding:12px 8px 6px!important;border-top:1px solid var(--ov-line);border-bottom:1px solid var(--ov-line-soft);font-size:12.5px!important;color:#27313d;text-transform:uppercase;letter-spacing:.2px}
.phf-ov table.phf-ov-matrix tbody:first-of-type tr.phf-ov-group th{border-top:0}
.phf-ov .phf-ov-group-in{position:sticky;left:8px;display:inline-flex;align-items:center;gap:12px}
.phf-ov .phf-ov-group-in .phf-ov-drill{text-transform:none;letter-spacing:0}
.phf-ov table.phf-ov-matrix tr.phf-ov-note-row td,.phf-ov table.phf-ov-matrix td.phf-ov-state-cell{white-space:normal;font-size:11.5px!important;color:var(--ov-muted);background:#fbfbfa;text-align:left}
.phf-ov table.phf-ov-matrix td.phf-ov-state-cell.is-error{color:#912018;background:#FFF5F4}
.phf-ov table.phf-ov-matrix tbody tr:hover{background:transparent}
.phf-ov .phf-ov-unit{margin:8px 0 0;font-size:11px;color:#6b7680}

@media (max-width:1180px){
  .phf-ov .phf-ov-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .phf-ov .phf-ov-filters .phf-qr-filters{flex-wrap:wrap}
  .phf-ov .phf-ov-filters .phf-qtth-field{flex:1 1 100%}
  .phf-ov .phf-ov-h{flex-wrap:wrap}
  .phf-ov table.phf-ov-matrix th.c-name,.phf-ov table.phf-ov-matrix td.c-name{min-width:150px}
}
@media (max-width:520px){
  .phf-ov .phf-ov-panel{padding:10px}
  .phf-ov table.phf-ov-kv th,.phf-ov table.phf-ov-kv td{padding:6px 4px!important}
  .phf-ov table.phf-ov-kv th:first-child,.phf-ov table.phf-ov-kv td.c-name{width:34%}
  .phf-ov .phf-ov-cmp{white-space:normal}
}