.welfare-costs {
    --welfare-bg: #f7f3eb;
    --welfare-card: #ffffff;
    --welfare-card-sub: #faf6f0;
    --welfare-border: #e5dac8;
    --welfare-border-soft: #efe7d8;
    --welfare-gold: #966830;
    --welfare-gold-light: #b7874c;
    --welfare-title: #241d17;
    --welfare-body: #2d241e;
    --welfare-muted: #8c7d70;
    /* Header va noi dung cung nam tren mot duong ray do `.hc-page` cua RIENG man phuc loi
       cap. Khong bu ngang bang le am nua: cach cu lam nen module vuon sat mep trong khi
       cum tieu de van nam trong khung rong cu, nen hai khoi lech nhau ro tren man hinh rong. */
    margin: -14px 0px 0;
    padding: 12px 0px 18px;
    min-height: calc(100vh - 118px);
    border-radius: 20px;
    background: var(--welfare-bg);
    color: var(--welfare-body);
    font-family: "Plus Jakarta Sans", Arial, sans-serif;
}

.welfare-costs *, .welfare-costs *::before, .welfare-costs *::after { box-sizing: border-box; }
.welfare-costs button, .welfare-costs input, .welfare-costs select, .welfare-costs textarea { font: inherit; }
.welfare-costs button { cursor: pointer; }
.welfare-costs button:disabled { cursor: not-allowed; opacity: .52; }

.welfare-costs__page-head,
.welfare-costs__section-head,
.welfare-costs__dialog-head,
.welfare-costs__dialog-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* Khong con tieu de o day nua (xem ghi chu trong hanh-chinh.html): khoi nay gio chi la mot
   thanh thao tac gon, nen le duoi nho lai theo. */
.welfare-costs__page-head { margin-bottom: 6px; }
.welfare-costs__page-head p { margin: 0; color: var(--welfare-muted); font-size: 12.5px; font-weight: 600; }
.welfare-costs__page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.welfare-costs__button,
.welfare-costs__text-button,
.welfare-costs__dialog button,
.welfare-costs__tabs button {
    border: 1px solid #ded2c0;
    border-radius: 10px;
    background: #fff;
    color: #5c4d40;
    font-size: 12px;
    font-weight: 750;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.welfare-costs__button { min-height: 38px; padding: 8px 14px; }
.welfare-costs__button:hover, .welfare-costs__text-button:hover, .welfare-costs__dialog button:hover { border-color: var(--welfare-gold-light); background: #fdf9f3; }
.welfare-costs__button--primary,
.welfare-costs__dialog .welfare-costs__button--primary {
    border-color: transparent;
    background: linear-gradient(135deg, #b7874c 0%, #956830 100%);
    color: #fff;
}
.welfare-costs__button--primary:hover,
.welfare-costs__dialog .welfare-costs__button--primary:hover { background: linear-gradient(135deg, #a9773f 0%, #825824 100%); }

/* Cum dau trang (Chu CRM, 27/08/2026: "can doi ca cai cum nay nua, giam height tiep").
   Bo `min-height` cua the KPI: chieu cao gio do NOI DUNG quyet dinh. Ba the van bang nhau
   vi day la grid — mac dinh `align-items: stretch` keo ca ba theo the cao nhat. KHONG
   duoc dat `align-items: start` cho luoi nay: ba the se cao thap khac nhau, nhin lech ngay. */
.welfare-costs__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 9px; }
.welfare-costs__kpi {
    padding: 11px 13px;
    border: 1px solid rgba(225, 210, 190, .75);
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, #faf5ee 100%);
    box-shadow: 0 5px 18px rgba(121, 84, 42, .055);
}
.welfare-costs__kpi--hero { background: linear-gradient(125deg, #fff 0%, #f5eadb 45%, #e8d3b8 100%); }
.welfare-costs__kpi > span { display: block; color: #8a6335; font-size: 10.5px; font-weight: 850; line-height: 1.3; letter-spacing: .055em; text-transform: uppercase; }
.welfare-costs__kpi > strong { display: block; margin: 3px 0 2px; color: var(--welfare-title); font-size: clamp(17px, 1.7vw, 21px); line-height: 1.15; }
.welfare-costs__kpi > small { color: #806f60; font-size: 10.5px; font-weight: 650; line-height: 1.3; }

.welfare-costs__filters {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
    padding: 8px 10px;
    border: 1px solid #e7dece;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(52, 35, 21, .035);
}
.welfare-costs__filter-group { display: flex; flex: 1; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.welfare-costs__filters label, .welfare-costs__dialog label { display: flex; flex-direction: column; gap: 3px; }
.welfare-costs__filters label > span, .welfare-costs__dialog label > span { color: #8c7a68; font-size: 10.5px; font-weight: 850; letter-spacing: .04em; }
.welfare-costs__filters select, .welfare-costs__filters input,
.welfare-costs__dialog select, .welfare-costs__dialog input, .welfare-costs__dialog textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    line-height: 1.3;
    border: 1px solid #e2d6c4;
    border-radius: 9px;
    outline: none;
    background: var(--welfare-card-sub);
    color: var(--welfare-body);
    font-size: 12px;
    font-weight: 650;
}
.welfare-costs__filters select:focus, .welfare-costs__filters input:focus,
.welfare-costs__dialog select:focus, .welfare-costs__dialog input:focus, .welfare-costs__dialog textarea:focus {
    border-color: var(--welfare-gold-light);
    box-shadow: 0 0 0 3px rgba(183, 135, 76, .14);
}
/* Hang loc: o thap hon o cua hop thoai. Co y de KHAC nhau — hop thoai la cho go lieu that,
   giu o cao 38px de bam khong truot; hang loc chi chon nhanh nen thap duoc. */
.welfare-costs__filters select, .welfare-costs__filters input { min-height: 32px; padding: 5px 9px; }
/* Ghi chu che do "Tat ca thoi gian" — noi ro VI SAO bang Thuong bien mat, thay vi de trong. */
.welfare-costs__alltime-note {
    margin: 0 0 10px;
    padding: 9px 12px;
    border: 1px solid #e6d7b4;
    border-left: 4px solid var(--welfare-gold-light);
    border-radius: 10px;
    background: #fdf8ee;
    color: #6d5b45;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.45;
}
/* O go tim + danh sach nhan su trong hop thoai su kien. */
#welfareEventPersonnelSearch { margin-bottom: 5px; }
#welfareEventPersonnel { min-height: 118px; padding: 4px; }
.welfare-costs__pick-count { margin-left: 6px; color: var(--welfare-gold); font-size: 10px; font-weight: 800; }
.welfare-costs__search { flex: 1; min-width: 220px; max-width: 390px; }
.welfare-costs__save-state { min-height: 18px; color: #7f6a57; font-size: 11px; font-weight: 700; text-align: right; }
.welfare-costs__save-state.is-error { color: #991b1b; }
.welfare-costs__save-state.is-success { color: #26734d; }

.welfare-costs__tabs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 9px; padding-bottom: 5px; border-bottom: 1px solid #e3d8c8; }
.welfare-costs__tabs button { padding: 5px 11px; border-color: transparent; background: transparent; color: #7a6b5e; }
.welfare-costs__tabs button.active { background: #e8dcb8; color: #33261c; font-weight: 850; }
.welfare-costs__tabs button:focus-visible { outline: 3px solid rgba(183, 135, 76, .24); outline-offset: 1px; }

.welfare-costs__section { margin-top: 15px; }
.welfare-costs__section-head { margin-bottom: 8px; }
.welfare-costs__section-head h3 { margin: 0; color: #2d2319; font-size: 13px; letter-spacing: .045em; }
.welfare-costs__section-head > div { display: flex; flex-wrap: wrap; gap: 7px; }
.welfare-costs__text-button { min-height: 32px; padding: 6px 10px; color: #8c6230; }

.welfare-costs__table-card { overflow: hidden; border: 1px solid var(--welfare-border); border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(52, 35, 21, .04); }
/* `max-height` + `overflow-y` la DIEU KIEN de `position: sticky` cua hang tieu de co tac dung:
   sticky bam vao khung cuon gan nhat, khong co khung cuon doc thi no khong bam vao dau ca. */
.welfare-costs__table-scroll { max-height: 68vh; overflow: auto; overscroll-behavior-inline: contain; }

/* ---- Co dinh hang tieu de + cot STT/TEN (Chu CRM 28/08) ----
   Bang nay rong ngang (nhieu cot tien) va dai doc (65 nhan su). Keo sang phai la mat ten,
   keo xuong la mat tieu de cot — khong biet dang nhin o cua ai, cot nao.
   `background` tren o dinh la BAT BUOC: o sticky trong suot se de chu ben duoi troi qua. */
/* Hang tieu de dinh o tren. `th` da co `background: #f6efe3` san — nen KHONG duoc bo,
   o sticky trong suot se de chu ben duoi troi qua no. */
.welfare-costs thead th { position: sticky; top: 0; z-index: 3; }

/* Hai cot dau dinh ben trai. CHI ap cho hang du lieu that:
   hang nhom phong ban va hang "chua co du lieu" dung mot o `colspan` trai het bang —
   dinh o do lai thi nhan phong ban se treo lo lung giua bang khi keo ngang. */
.welfare-costs tbody tr:not(.welfare-costs__group-row) > td:nth-child(1),
.welfare-costs thead th:nth-child(1),
.welfare-costs tfoot td:nth-child(1) { position: sticky; left: 0; z-index: 2; }
.welfare-costs tbody tr:not(.welfare-costs__group-row) > td:nth-child(2),
.welfare-costs thead th:nth-child(2),
.welfare-costs tfoot td:nth-child(2) { position: sticky; left: var(--welfare-stt-w); z-index: 2; }
.welfare-costs thead th:nth-child(1),
.welfare-costs thead th:nth-child(2) { z-index: 4; }

/* Be rong CO DINH cho hai cot dinh: `left` cua cot 2 phai bang be rong cot 1, neu de trinh
   duyet tu co gian thi cot 2 se dinh sai cho va de len cot 1. Mot bien, dung o ca hai noi. */
.welfare-costs { --welfare-stt-w: 44px; }
.welfare-costs tr > :nth-child(1):not([colspan]) { width: var(--welfare-stt-w); min-width: var(--welfare-stt-w); max-width: var(--welfare-stt-w); }
.welfare-costs tr > :nth-child(2):not([colspan]) { width: 178px; min-width: 178px; max-width: 178px; }

/* O sticky phai TU co nen. Voi `border-collapse: collapse`, vien cua o dinh bi mat khi no
   dang bam — nen dung `box-shadow` lam duong ke thay vien, va to nen theo dung mau cua hang
   (thuong / di chuot / hang Tong), neu khong se lo nen trang giua mot hang co mau. */
.welfare-costs tbody tr:not(.welfare-costs__group-row) > td:nth-child(1),
.welfare-costs tbody tr:not(.welfare-costs__group-row) > td:nth-child(2) { background: #fff; }
.welfare-costs tbody tr:not(.welfare-costs__group-row):hover > td:nth-child(1),
.welfare-costs tbody tr:not(.welfare-costs__group-row):hover > td:nth-child(2) { background: #fcfaf6; }
.welfare-costs tfoot td:nth-child(1),
.welfare-costs tfoot td:nth-child(2) { background: #f3eadb; }
.welfare-costs tr > :nth-child(2):not([colspan]) { box-shadow: 1px 0 0 #e8dfc8; }
/* Chieu cao dong (Chu CRM, 27/08/2026: "chinh height vua voi co chu thoi").
   Ba thu cong lai lam dong cao: dem cua o, khoi TEN xep hai dong, va o nhap tien co dem rieng.
   Sieu ca ba, va dat `line-height` TUONG MINH — de chu khong tu keo cao o theo mac dinh cua
   trinh duyet. Khong dung `height` co dinh: mot o dai bat thuong se bi cat chu. */
.welfare-costs table { width: 100%; min-width: 880px; border-collapse: collapse; color: var(--welfare-body); font-size: 11.5px; line-height: 1.25; }
.welfare-costs th {
    padding: 6px 10px;
    border-right: 1px solid #e8dfc8;
    border-bottom: 1px solid var(--welfare-border);
    background: #f6efe3;
    color: #554639;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .055em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Chu trong bang can giua HET (Chu CRM, 27/08/2026). Luat nay phai dat truoc cac luat
   rieng ben duoi; nhung o tien da doi sang can giua ngay tai luat cua chung. */
.welfare-costs td { padding: 4px 10px; border-right: 1px solid #f0e8dc; border-bottom: 1px solid var(--welfare-border-soft); vertical-align: middle; text-align: center; }
.welfare-costs tbody tr:hover { background: #fcfaf6; }
.welfare-costs .welfare-costs__group-row td {
    padding: 8px 12px;
    border-top: 1px solid #ded4c2;
    border-bottom: 1px solid #ded4c2;
    background: linear-gradient(90deg, #f2eee6 0%, #faf8f3 100%) !important;
    color: #2c3f35;
    text-align: left;
}
.welfare-costs__group-label { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.welfare-costs__group-label::before { width: 7px; height: 7px; border-radius: 999px; background: #2f7d5d; content: ''; }

.welfare-costs__name { min-width: 170px; text-align: center; }
.welfare-costs__name strong, .welfare-costs__name small { display: block; }
.welfare-costs__name strong { color: #292019; font-size: 11.5px; line-height: 1.25; }
.welfare-costs__name small { margin-top: 0; color: #8e8072; font-size: 9px; line-height: 1.2; }
.welfare-costs__money-cell, .welfare-costs__money { text-align: center; white-space: nowrap; }
.welfare-costs__money-input { width: 112px; padding: 2px 7px; line-height: 1.25; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--welfare-body); font-weight: 750; text-align: center; }
.welfare-costs__money-input:focus { border-color: var(--welfare-gold-light); outline: none; background: #fffdf9; box-shadow: 0 0 0 2px rgba(183, 135, 76, .18); }
.welfare-costs__row-total { background: #faf5ec; color: var(--welfare-gold); font-size: 12px; font-weight: 850; text-align: center; white-space: nowrap; }
.welfare-costs__actions { min-width: 96px; text-align: center; white-space: nowrap; }
.welfare-costs__actions button { padding: 2px 4px; border: 0; background: transparent; color: #8c6230; font-size: 11px; font-weight: 800; text-decoration: underline; }
.welfare-costs__actions button.is-danger { color: #991b1b; }
.welfare-costs tfoot td { border-top: 2px solid #d9caaf; border-bottom: 0; background: #f3eadb; font-weight: 850; }
.welfare-costs__foot-label { text-align: center !important; text-transform: uppercase; }
.welfare-costs__grand-total { background: #e8dcb8 !important; color: var(--welfare-gold); font-size: 13px; text-align: center; white-space: nowrap; }
.welfare-costs__recipient-count { margin-left: 3px; color: #756452; font-size: 9.5px; font-weight: 750; }
.welfare-costs__empty { padding: 16px !important; color: var(--welfare-muted); font-style: italic; text-align: center !important; }
.welfare-costs__badge { display: inline-block; max-width: 200px; padding: 2px 6px; line-height: 1.25; border-radius: 7px; background: #efe9df; color: #655849; font-size: 10px; font-weight: 800; line-height: 1.3; text-align: center; }
.welfare-costs__badge[data-tone="health"] { background: #fef3c7; color: #92400e; }
.welfare-costs__badge[data-tone="birth"] { background: #f3e8ff; color: #6b21a8; }
.welfare-costs__badge[data-tone="wedding"] { background: #fde8e8; color: #9b2c2c; }
.welfare-costs__badge[data-tone="loss"] { background: #e2e8f0; color: #334155; }

.welfare-costs__modal { position: fixed; inset: 0; z-index: 10020; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(36, 29, 23, .58); }
/* Hop thoai rong ra de bang chon nhan su (5 cot) khong phai keo ngang
   (Chu CRM 28/08: "mo rong ra de thay duoc toan bo du lieu"). Dung `min(..., 96vw)`
   chu khong phai con so cung: man hep hon 1080px thi no tu co lai, khong tran ra ngoai. */
.welfare-costs__dialog { width: min(1080px, 96vw); max-height: 90vh; overflow-y: auto; padding: 20px; border-top: 4px solid var(--welfare-gold-light); border-radius: 16px; background: #fff; box-shadow: 0 24px 70px rgba(26, 19, 13, .28); }
.welfare-costs__dialog--small { width: min(520px, 100%); }
.welfare-costs__dialog-head { align-items: flex-start; margin-bottom: 16px; }
.welfare-costs__dialog-head h3 { margin: 0 0 4px; color: var(--welfare-title); font-size: 20px; }
.welfare-costs__dialog-head p { margin: 0; color: var(--welfare-muted); font-size: 11.5px; }
.welfare-costs__dialog-head > button { padding: 7px 10px; }
.welfare-costs__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.welfare-costs__field-wide { grid-column: 1 / -1; }
.welfare-costs__dialog textarea { resize: vertical; }
.welfare-costs__dialog-actions { justify-content: flex-end; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--welfare-border-soft); }
.welfare-costs__dialog-actions button { min-height: 38px; padding: 8px 14px; }
.welfare-costs__column-list { display: grid; gap: 8px; }
.welfare-costs__column-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid var(--welfare-border-soft); border-radius: 11px; background: var(--welfare-card-sub); }
.welfare-costs__column-copy { min-width: 0; }
.welfare-costs__column-copy strong,
.welfare-costs__column-copy small { display: block; }
.welfare-costs__column-copy strong { overflow-wrap: anywhere; color: var(--welfare-title); font-size: 13px; }
.welfare-costs__column-copy small { margin-top: 3px; color: var(--welfare-muted); font-size: 10.5px; }
.welfare-costs__column-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.welfare-costs__column-actions button { min-height: 32px; padding: 6px 9px; }
.welfare-costs__column-actions .is-danger { border-color: #e7c5c0; color: #991b1b; }
.welfare-costs__column-empty { padding: 18px 14px; border: 1px dashed var(--welfare-border); border-radius: 11px; color: var(--welfare-muted); font-size: 12px; line-height: 1.5; text-align: center; }

@media (max-width: 900px) {
    .welfare-costs__kpis { grid-template-columns: 1fr; }
    .welfare-costs__kpi { min-height: 0; }
}

@media (max-width: 768px) {
    .welfare-costs { margin: -4px 0 0; padding: 14px 0; border-radius: 0; }
    .welfare-costs__page-head, .welfare-costs__filters, .welfare-costs__section-head { align-items: stretch; flex-direction: column; }
    .welfare-costs__page-actions { justify-content: flex-start; }
    .welfare-costs__page-actions .welfare-costs__button { flex: 1 1 160px; }
    .welfare-costs__filter-group { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .welfare-costs__search { grid-column: 1 / -1; min-width: 0; max-width: none; }
    .welfare-costs__save-state { text-align: left; }
    .welfare-costs__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 9px; }
    .welfare-costs__tabs button { flex: 0 0 auto; white-space: nowrap; }
    .welfare-costs__section-head > div { justify-content: flex-start; }
    .welfare-costs__form-grid { grid-template-columns: 1fr; }
    .welfare-costs__field-wide { grid-column: auto; }
    .welfare-costs__modal { padding: 8px; }
    .welfare-costs__dialog { max-height: 96vh; padding: 16px; border-radius: 13px; }
    .welfare-costs__column-row { align-items: stretch; flex-direction: column; }
    .welfare-costs__column-actions { width: 100%; }
    .welfare-costs__column-actions button { flex: 1; }
}

/* Nut "Xuất Báo Cáo Excel" chuyen tu dai thao tac da bo xuong day (27/08/2026). */
.welfare-costs__filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
/* Nut Xuat Bao Cao dung chung lop `__button` (cao 38px). O hang loc da tut xuong 32px, neu
   khong keo nut theo thi no cao hon o ben canh — dung cai lech ma Chu CRM goi la "khong can doi". */
.welfare-costs__filter-actions .welfare-costs__button { min-height: 32px; padding: 6px 12px; }

/* Bang chon NHIEU nhan su trong o "Thêm dòng thưởng lễ" — thay cho o tro xuong chon tung nguoi. */
.welfare-costs__picker {
    border: 1px solid var(--welfare-border);
    border-radius: 12px;
    background: var(--welfare-card-sub);
    overflow: hidden;
}
.welfare-costs__picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--welfare-border-soft);
}
.welfare-costs__picker-head > span { color: #8c7a68; font-size: 10.5px; font-weight: 850; letter-spacing: .04em; }
.welfare-costs__picker-head > span b { color: var(--welfare-gold); }
.welfare-costs__picker-head > div { display: flex; align-items: center; gap: 8px; }
.welfare-costs__picker-head input[type="search"] {
    width: 240px;
    padding: 7px 10px;
    border: 1px solid var(--welfare-border);
    border-radius: 8px;
    background: #fff;
    font-size: 12.5px;
}
.welfare-costs__picker-scroll { max-height: 300px; overflow: auto; }
.welfare-costs__picker-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.welfare-costs__picker-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    background: #f1e9dc;
    color: #7a6a58;
    font-size: 10.5px;
    font-weight: 850;
    letter-spacing: .04em;
    text-align: left;
}
.welfare-costs__picker-table td { padding: 7px 10px; border-top: 1px solid var(--welfare-border-soft); }
.welfare-costs__picker-table tbody tr { cursor: pointer; }
.welfare-costs__picker-table tbody tr:hover { background: #fff; }
.welfare-costs__picker-table tbody tr.is-picked { background: #fdf5e9; }
.welfare-costs__picker-table small { color: var(--welfare-muted); }

@media (max-width: 760px) {
    .welfare-costs__picker-head { align-items: stretch; flex-direction: column; }
    .welfare-costs__picker-head input[type="search"] { width: 100%; }
    .welfare-costs__filter-actions { margin-left: 0; }
}

/* ---- Cot TRANG THAI (Chu CRM, 27/08/2026) ---- */
.welfare-costs__dept { min-width: 110px; color: #5d5145; font-size: 10.5px; font-weight: 700; }
.welfare-costs__dept-empty { color: #a2937f; font-style: italic; font-weight: 600; }
.welfare-costs__status { white-space: nowrap; }
.welfare-costs__status-pill {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1.25;
}
.welfare-costs__status-pill.is-active { background: #E4F3E6; color: #2C6B35; }
.welfare-costs__status-pill.is-pending { background: #FFF3D8; color: #9A6500; }
.welfare-costs__status-pill.is-resigned { background: #ECEFF1; color: #455A64; }
/* Ho so nhan su khong tra duoc: to XAM, khong to xanh. Mot dong khong tra duoc ma
   son mau "dang lam viec" la noi sai ve nguoi that. */
.welfare-costs__status-pill.is-unknown { background: #F3EDE3; color: #8A7A66; }

/* ---- Phuong an B: chi ha bang tieu de TREN MAN PHUC LOI ----
   `.hc-main-topbar` dung chung cho moi module Hanh chinh. Lop `is-welfare-compact`
   do chinh module phuc loi gan vao <body> khi mount va GO khi roi man — nho vay cac
   man Hanh chinh khac giu nguyen kich thuoc. Neu quen go, man khac se bi ha theo:
   co ca kiem bat buoc phai co ca cap add/remove. */
body.is-welfare-compact .hc-topbar-title small { margin-bottom: 3px; font-size: 11px; }
body.is-welfare-compact .hc-topbar-title h1 { font-size: 23px; margin-bottom: 3px; }
body.is-welfare-compact .hc-topbar-title p { font-size: 12px; line-height: 1.4; }
/* LOI CUA CHINH TOI, do duoc 27/08: khung trang dung chung da co dem ngang CO GIAN
   `clamp(22px, 3.5vw, 54px)` (hanh-chinh.css). Toi ghi de bang mot con so CUNG 34px —
   cung do dac hieu, ma file nay nap sau nen toi thang. Ket qua: tren man hinh rong,
   man phuc loi co dem HEP HON moi man Hanh chinh khac (34px thay vi 54px). Toi tuong
   minh dang gian le, thuc te dang bop lai.
   Sua: quay ve dung do CO GIAN, va dat rong hon mot chut so voi mac dinh dung chung. */
body.is-welfare-compact .hc-page {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0;
    gap: 14px;
    padding-top: 16px;
    padding-inline: clamp(22px, 3vw, 48px);
}
body.is-welfare-compact .hc-main-topbar { gap: 12px; }

@media (max-width: 768px) {
    body.is-welfare-compact .hc-page { padding-inline: 14px; }
}