/* PHF HR — QTTH · Vận hành · shared COST semantics for period comparisons.
 * One convention for every Vận hành report (Tổng quan, Chi phí hoạt động, Chi phí cần
 * theo dõi, Chi phí hủy hàng, Văn phòng phẩm):
 *   ▲ cost increase = red · ▼ cost decrease = green · = no change = neutral · no data = gray.
 * Only the delta value / indicator carries the colour, never a whole card.
 * Loaded after the page stylesheets; tooltips live under <body>, so the classes are global. */
:root{--phf-cost-up:#b42318;--phf-cost-down:#067647;--phf-cost-flat:#5c6672;--phf-cost-na:#98a1ab}
.phf-sem-up{color:var(--phf-cost-up);font-weight:700}
.phf-sem-down{color:var(--phf-cost-down);font-weight:700}
.phf-sem-flat{color:var(--phf-cost-flat);font-weight:700}
.phf-sem-na{color:var(--phf-cost-na);font-weight:400}

/* Chi phí hoạt động (all four reports) — the module's own up/down tokens follow the standard */
.phf-oc{--oc-up:var(--phf-cost-up);--oc-down:var(--phf-cost-down)}
/* The shared payroll table rule (.phf-pa .phf-pa-recon td.is-down = blue, phf-qtth-payroll-annual.css)
   also reaches the Vận hành tables that reuse .phf-pa; within Vận hành only, decrease is green. */
.phf-oc .phf-pa-recon td.is-down,.phf-vpp .phf-pa-recon td.is-down{color:var(--phf-cost-down)}
.phf-oc .phf-pa-recon td.is-up,.phf-vpp .phf-pa-recon td.is-up{color:var(--phf-cost-up)}
/* Chi phí cần theo dõi — was neutral ink; the indicator and the delta cells now carry the semantics */
.phf-oc .phf-oc-tracked td.c-tdelta.phf-sem-up,.phf-oc .phf-oc-tracked .c-sym.phf-sem-up,.phf-oc .c-tdelta.phf-sem-up{color:var(--phf-cost-up)}
.phf-oc .phf-oc-tracked td.c-tdelta.phf-sem-down,.phf-oc .phf-oc-tracked .c-sym.phf-sem-down,.phf-oc .c-tdelta.phf-sem-down{color:var(--phf-cost-down)}
.phf-oc .phf-oc-tracked td.c-tdelta.phf-sem-flat,.phf-oc .phf-oc-tracked .c-sym.phf-sem-flat{color:var(--phf-cost-flat)}
.phf-oc .phf-oc-stat-s .c-tdelta{font-weight:700}
.phf-oc .phf-oc-stacklegend{flex-wrap:wrap}

/* Chi phí hủy hàng — trend ▲/▼ and tooltip T-1 line */
.phf-waste .phf-waste-dir.is-up{color:var(--phf-cost-up)}
.phf-waste .phf-waste-dir.is-down{color:var(--phf-cost-down)}
.phf-waste .phf-waste-tip .is-delta{font-weight:700}
.phf-waste .phf-waste-tip .is-delta.phf-sem-up{color:var(--phf-cost-up)}
.phf-waste .phf-waste-tip .is-delta.phf-sem-down{color:var(--phf-cost-down)}
.phf-waste .phf-waste-tip .is-delta.phf-sem-flat{color:var(--phf-cost-flat)}
.phf-waste .phf-waste-tip .is-delta.phf-sem-na{color:var(--phf-cost-na);font-weight:400}

/* Văn phòng phẩm — change column had no colour at all */
.phf-vpp .c-delta{white-space:nowrap}
.phf-vpp .c-delta.phf-sem-up{color:var(--phf-cost-up)}
.phf-vpp .c-delta.phf-sem-down{color:var(--phf-cost-down)}
.phf-vpp .c-delta.phf-sem-flat{color:var(--phf-cost-flat)}

/* shared tooltip (.phf-pc-tip): semantic value + TOTAL row */
.phf-pc-tip p em.phf-sem-up{color:var(--phf-cost-up)}
.phf-pc-tip p em.phf-sem-down{color:var(--phf-cost-down)}
.phf-pc-tip p em.phf-sem-flat{color:var(--phf-cost-flat)}
.phf-pc-tip p em.phf-sem-na{color:var(--phf-cost-na);font-weight:400}
.phf-pc-tip p.is-total{border-top:1px solid #9aa3ad;font-weight:800}

/* Vận hành · Tổng quan — semantic deltas + stacked A/B/C trend */
.phf-op-hero .phf-op-delta{display:inline}
.phf-op-moves .phf-op-delta{white-space:nowrap;text-align:right}
.phf-op-moves .phf-op-delta.phf-sem-up{color:var(--phf-cost-up)}
.phf-op-moves .phf-op-delta.phf-sem-down{color:var(--phf-cost-down)}
.phf-op-moves .phf-op-delta.phf-sem-na{color:var(--phf-cost-na);font-weight:400}
.phf-op-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px;font-size:12px;color:#394150}
.phf-op-legend span{display:inline-flex;align-items:center;gap:5px}
.phf-op-legend i{display:inline-block;width:10px;height:10px}
.phf-op-legend .phf-op-legend-note{color:#5c6672;font-style:italic}
.phf-op-bar{cursor:default;outline:none}
.phf-op-bar:focus-visible span{outline:2px solid #27313d;outline-offset:2px}
.phf-op-bar span.is-stack{display:flex;flex-direction:column;background:transparent}
.phf-op-bar span.is-stack .phf-op-seg{display:block;flex:none;width:100%;min-height:1px}
.phf-op-bar:hover span{filter:brightness(1.08)}