/* PHF QTTH — Lương theo năm (Annual Payroll V1). Scoped to .phf-pa only.
 * Same language as the accepted Payroll period / 2A–2D / BHXH screens:
 * square panels, 1px #d7dde0 borders, numbered section markers, Arial,
 * report H green #075e33, G ink #b45309, up red #b42318 / down blue #175cd3.
 * Note: the shell's `.phf-hr-root svg{fill:none;stroke:currentColor}` reset
 * beats SVG attributes, so fills are inline styles and svg is reset here;
 * `span{font-weight:400!important}` means bold text uses <b>. */
.phf-pa{font-family:Arial,Helvetica,sans-serif;color:#1d2b24}
.phf-pa .phf-pa-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:10px}
.phf-pa .phf-pa-scope{margin:0;font-size:12.5px}
.phf-pa .phf-pa-scope b{color:#1d2b24}
.phf-pa .phf-pa-year{flex:0 0 150px;min-width:140px}
.phf-pa .phf-pa-year select{width:100%;box-sizing:border-box}
.phf-pa .phf-pa-filters{margin-bottom:14px}
.phf-pa .phf-pa-loading,.phf-pa .phf-pa-empty{margin:10px 0;padding:14px 16px;border:1px solid #d7dde0;background:#fbfbfa;font-size:13px;color:#5c6672}

/* B. KPI strip — one row, H primary; no oversized cards. */
.phf-pa .phf-pa-kpis{display:grid;grid-template-columns:1fr 1fr 1.25fr 1fr;border:1px solid #d7dde0;background:#fff;margin:0 0 14px}
.phf-pa .phf-pa-kpi{padding:12px 16px 13px;border-left:1px solid #e6e9ec;border-top:3px solid transparent;min-width:0}
.phf-pa .phf-pa-kpi:first-child{border-left:0}
.phf-pa .phf-pa-kpi-label{font-size:11.5px;font-weight:700;color:#4a5752;text-transform:uppercase;letter-spacing:.2px}
.phf-pa .phf-pa-kpi-value{margin-top:6px;font-size:20px;font-weight:700;color:#14261c;font-variant-numeric:tabular-nums;white-space:nowrap}
.phf-pa .phf-pa-kpi-value small{font-size:12px;color:#5c6672}
.phf-pa .phf-pa-kpi-sub{margin-top:4px;font-size:11.5px;color:#5c6672;line-height:1.35}
.phf-pa .phf-pa-kpi.is-g .phf-pa-kpi-value{color:#8a4b08}
.phf-pa .phf-pa-kpi.is-h{border-top-color:#075e33;background:#f5f9f6}
.phf-pa .phf-pa-kpi.is-h .phf-pa-kpi-label{color:#075e33}
.phf-pa .phf-pa-kpi.is-h .phf-pa-kpi-value{font-size:24px;color:#075e33}
.phf-pa .phf-pa-code{display:inline-block;min-width:15px;margin-right:6px;padding:0 3px;border:1px solid #9aa3ad;font-size:10.5px;line-height:15px;text-align:center;color:#27313d;background:#fff}
.phf-pa .is-h .phf-pa-code{border-color:#075e33;color:#fff;background:#075e33}
.phf-pa .is-g .phf-pa-code{border-color:#b45309;color:#8a4b08}

/* Panels + section heads (numbered like BHXH regions). */
.phf-pa .phf-pa-grid{display:grid;gap:14px;margin-bottom:14px;align-items:stretch}
.phf-pa .phf-pa-grid.is-trend{grid-template-columns:minmax(0,1.5fr) minmax(400px,1fr)}
.phf-pa .phf-pa-grid.is-org{grid-template-columns:1fr 1fr}
.phf-pa .phf-pa-grid.is-pop{grid-template-columns:minmax(0,.8fr) minmax(620px,1.3fr)}
.phf-pa .phf-pa-panel{border:1px solid #d7dde0;background:#fff;padding:12px 14px 14px;min-width:0}
.phf-pa > .phf-pa-body > .phf-pa-panel{margin-bottom:14px}
.phf-pa .phf-pa-h{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:26px}
.phf-pa .phf-pa-h h3{margin:0;font-size:13.5px;font-weight:700;color:#27313d;text-transform:uppercase;letter-spacing:.2px}
.phf-pa .phf-pa-note{margin:4px 0 10px;font-size:11.5px;line-height:1.4;color:#5c6672}
.phf-pa .phf-pa-unit{margin:8px 0 0;font-size:11px;color:#6b7680}
.phf-pa .phf-pa-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 8px;font-size:12px;color:#27313d}
.phf-pa .phf-pa-legend span{display:inline-flex;align-items:center;gap:6px}
.phf-pa .phf-pa-legend i{display:inline-block;width:12px;height:12px}
.phf-pa .phf-pa-legend i.is-hatch{background:repeating-linear-gradient(45deg,#fbeee2 0 2px,#b45309 2px 4px)!important;outline:1px solid #b45309;outline-offset:-1px}
.phf-pa .phf-pa-legend i.is-outline{outline:1.5px solid #27313d;outline-offset:-1.5px}

/* SVG charts — reset the shell's icon-outline svg rule for these charts only. */
.phf-pa .phf-pa-svg{display:block;width:100%;height:auto;fill:currentColor;stroke:none;overflow:visible}
.phf-pa .phf-pa-svg text{stroke:none;font-family:Arial,Helvetica,sans-serif}
.phf-pa .phf-pa-axis{font-size:10.5px;fill:#6b7680}
.phf-pa .phf-pa-xlab{font-size:11.5px;font-weight:700;fill:#27313d}
.phf-pa .phf-pa-val-f{font-size:10.5px;fill:#4a5752}
.phf-pa .phf-pa-val-h{font-size:11px;font-weight:700;fill:#fff}
.phf-pa .phf-pa-val-n{font-size:11.5px;font-weight:700;fill:#27313d}
.phf-pa .phf-pa-delta{font-size:11px;font-weight:700;fill:#6b7680}
.phf-pa .phf-pa-delta.is-up{fill:#b42318}
.phf-pa .phf-pa-delta.is-down{fill:#175cd3}
.phf-pa .phf-pa-svg g[data-pa-tip]:hover rect[style*="fill:#"]{opacity:.86}

/* D. Annual composition. */
.phf-pa .phf-pa-comp-body{display:grid;grid-template-columns:124px minmax(0,1fr);gap:14px;align-items:center}
.phf-pa .phf-pa-donut{width:124px;height:124px;border-radius:50%;display:grid;place-items:center;position:relative}
.phf-pa .phf-pa-donut>svg{position:absolute;inset:0;width:124px;height:124px;transform:rotate(-90deg)}
.phf-pa .phf-pa-donut>svg circle{pointer-events:stroke;cursor:default}
.phf-pa .phf-pa-donut>div{width:80px;height:80px;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center;position:relative;pointer-events:none}
.phf-pa .phf-pa-donut b{font-size:14px;color:#14261c}
.phf-pa .phf-pa-donut small{font-size:10px;font-weight:700;color:#4a5752}
.phf-pa .phf-pa-comp-table{width:100%;border-collapse:collapse;font-size:12px}
.phf-pa .phf-pa-comp-table th{padding:0 4px 5px!important;font-size:10.5px!important;font-weight:700;text-transform:uppercase;color:#5c6672!important;text-align:left;background:none!important;border:0!important;border-bottom:1px solid #d7dde0!important;height:auto!important}
.phf-pa .phf-pa-comp-table td{padding:5px 4px!important;font-size:12px!important;background:none;border:0!important;border-bottom:1px solid #edf1f0!important;white-space:nowrap;height:auto!important;line-height:1.3}
.phf-pa .phf-pa-comp-table .c-num{text-align:right;font-variant-numeric:tabular-nums}
.phf-pa .phf-pa-comp-table td i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.phf-pa .phf-pa-comp-table tfoot td{font-weight:700!important}
.phf-pa .phf-pa-comp-table tfoot .is-f td{border-top:2px solid #9aa3ad!important}
.phf-pa .phf-pa-comp-table tfoot .is-g td{color:#8a4b08}
.phf-pa .phf-pa-comp-table tfoot .is-h td{color:#075e33;font-size:13px!important;border-bottom:0!important;background:#f5f9f6}

/* E. Monthly stacked composition. */
.phf-pa .phf-pa-mode{margin:0;border-bottom:0}
.phf-pa .phf-pa-mode .phf-qr-tab{padding:4px 2px;margin-right:12px;font-size:12.5px}
.phf-pa .phf-pa-srow{display:grid;grid-template-columns:44px minmax(0,1fr) 72px 64px 76px;gap:10px;align-items:center;padding:3px 0;font-size:12px}
.phf-pa .phf-pa-srow.is-head{padding:6px 0 4px;border-bottom:1px solid #d7dde0;font-size:10.5px;font-weight:700;text-transform:uppercase;color:#5c6672}
.phf-pa .phf-pa-srow>b:first-child{font-size:12px;color:#27313d}
.phf-pa .phf-pa-srow .c-f,.phf-pa .phf-pa-srow .c-g,.phf-pa .phf-pa-srow .c-h{text-align:right;font-variant-numeric:tabular-nums}
.phf-pa .phf-pa-srow .c-g{color:#8a4b08}
.phf-pa .phf-pa-srow b.c-h,.phf-pa .phf-pa-srow.is-head .c-h{color:#075e33}
.phf-pa .phf-pa-strack{height:24px;background:#f3f5f4}
.phf-pa .phf-pa-sbar{display:flex;height:100%}
.phf-pa .phf-pa-sbar i{position:relative;display:block;height:100%;min-width:1px;box-shadow:inset -2px 0 0 #fff;overflow:hidden}
.phf-pa .phf-pa-sbar i:last-child{box-shadow:none}
.phf-pa .phf-pa-sbar em{position:absolute;inset:0 2px 0 0;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap}

/* F/G/H. Organization analyses — identical bar grammar on every axis. */
.phf-pa .phf-pa-orow{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 74px 58px;gap:10px;align-items:center;padding:4px 0;font-size:12px}
.phf-pa .phf-pa-org.is-wide .phf-pa-orow{grid-template-columns:minmax(160px,260px) minmax(0,1fr) 80px 64px}
.phf-pa .phf-pa-orow.is-head{padding:0 0 4px;border-bottom:1px solid #d7dde0;font-size:10.5px;font-weight:700;text-transform:uppercase;color:#5c6672}
.phf-pa .phf-pa-orows{padding-top:4px}
.phf-pa .phf-pa-oname{min-width:0}
.phf-pa .phf-pa-oname b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#14261c}
.phf-pa .phf-pa-oname small{display:block;font-size:10.5px;color:#5c6672}
.phf-pa .phf-pa-otrack{height:16px;background:#f3f5f4}
.phf-pa .phf-pa-otrack i{display:block;height:100%}
.phf-pa .phf-pa-oval{text-align:right;font-variant-numeric:tabular-nums;color:#075e33}
.phf-pa .phf-pa-oshare{text-align:right;font-variant-numeric:tabular-nums;color:#4a5752}
.phf-pa .phf-pa-orow.is-head .phf-pa-oval{color:#5c6672}
.phf-pa .phf-pa-orow.is-missing .phf-pa-oname b{color:#7a4b11;font-style:italic}
.phf-pa .phf-pa-orow[data-pa-tip]:hover{background:#f7faf8}

/* J. Reconciliation table. */
.phf-pa .phf-pa-recon{min-width:560px;width:100%}
.phf-pa .phf-pa-recon th,.phf-pa .phf-pa-recon td{padding:6px 8px!important;font-size:12.5px!important;line-height:1.3;height:auto!important;white-space:nowrap}
.phf-pa .phf-pa-recon th{font-size:10.5px!important;text-transform:uppercase}
.phf-pa .phf-pa-recon .c-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.phf-pa .phf-pa-recon td.c-h{color:#075e33;font-weight:700!important}
.phf-pa .phf-pa-recon td.is-up{color:#b42318;font-weight:700!important}
.phf-pa .phf-pa-recon td.is-down{color:#175cd3;font-weight:700!important}
.phf-pa .phf-pa-recon td.is-flat{color:#5d6b65}
.phf-pa .phf-pa-recon tfoot td{background:#f3f5f4;font-weight:700!important;border-top:2px solid #aeb6bf}
.phf-pa-tip.phf-pc-tip{min-width:210px}

@media(max-width:1280px){
  .phf-pa .phf-pa-grid.is-trend,.phf-pa .phf-pa-grid.is-pop{grid-template-columns:1fr}
}
@media(max-width:1180px){
  .phf-pa .phf-pa-kpis{grid-template-columns:1fr 1fr}
  .phf-pa .phf-pa-kpi:nth-child(3){border-left:0}
  .phf-pa .phf-pa-kpi:nth-child(n+3){border-top-width:3px;box-shadow:inset 0 1px 0 #e6e9ec}
}
@media(max-width:820px){
  .phf-pa .phf-pa-scroll{overflow-x:auto}
  .phf-pa .phf-pa-scroll .phf-pa-svg{min-width:600px}
  .phf-pa .phf-pa-scroll .phf-pa-svg.is-pop{min-width:420px}
  .phf-pa .phf-pa-grid.is-org{grid-template-columns:1fr}
  .phf-pa .phf-pa-head{flex-direction:column}
  .phf-pa .phf-pa-srow{grid-template-columns:34px minmax(0,1fr) 60px 64px;gap:6px}
  .phf-pa .phf-pa-srow .c-g{display:none}
  .phf-pa .phf-pa-orow,.phf-pa .phf-pa-org.is-wide .phf-pa-orow{grid-template-columns:minmax(96px,130px) minmax(0,1fr) 64px 48px;gap:6px}
}
/* K. Chi phí lương theo nhân viên qua các tháng. */
.phf-pa .phf-pa-etools{display:flex;align-items:flex-end;gap:12px;margin:8px 0 10px}
.phf-pa .phf-pa-etools .phf-qtth-field{min-width:240px;max-width:320px}
.phf-pa .phf-pa-emp .phf-qtth-tablewrap{max-height:560px;overflow:auto}
.phf-pa .phf-pa-emp-table{min-width:760px;width:100%}
.phf-pa .phf-pa-emp-table th,.phf-pa .phf-pa-emp-table td{padding:6px 8px!important;font-size:12.5px!important;line-height:1.3;height:auto!important;white-space:nowrap}
.phf-pa .phf-pa-emp-table thead th{position:sticky;top:0;z-index:1;font-size:10.5px!important;text-transform:uppercase}
.phf-pa .phf-pa-emp-table .c-num{text-align:right;font-variant-numeric:tabular-nums}
.phf-pa .phf-pa-emp-table td.c-h{color:#075e33;font-weight:700!important}
.phf-pa .phf-pa-emp-table td.is-na{color:#9aa3ad}
.phf-pa .phf-pa-emp-table td.c-dept{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.phf-pa .phf-pa-sort{appearance:none;-webkit-appearance:none;font:inherit;text-transform:inherit;border:0;border-radius:0;background:transparent;padding:0;color:inherit;cursor:pointer;white-space:nowrap}
.phf-pa .phf-pa-sort:hover,.phf-pa .phf-pa-sort.is-on{color:#075e33}
@media(max-width:520px){
  .phf-pa .phf-pa-etools{flex-direction:column;align-items:stretch}
  .phf-pa .phf-pa-etools .phf-qtth-field{max-width:none;min-width:0}
  .phf-pa .phf-pa-kpis{grid-template-columns:1fr}
  .phf-pa .phf-pa-kpi{border-left:0;box-shadow:inset 0 1px 0 #e6e9ec}
  .phf-pa .phf-pa-comp-body{grid-template-columns:1fr;justify-items:center}
}