:root {
  --nen: #f6f7f9; --mat: #fff; --chu: #1d2329; --mo: #5d6873; --vien: #dfe3e8;
  --nhan: #1f5fbf; --nhan-nhat: #e8f0fb; --do: #c0392b; --do-nhat: #fdecea;
  --xanh: #1e7e45; --xanh-nhat: #e6f4ea; --vang-nhat: #fff6db;
  font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; color: var(--chu);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--nen); }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; border: 1px solid var(--nhan); background: var(--nhan); color: #fff;
         padding: 6px 14px; border-radius: 6px; }
button:disabled { opacity: .5; cursor: default; }
.phu-nut { background: var(--mat); color: var(--nhan); }
input, select { font: inherit; padding: 5px 8px; border: 1px solid var(--vien); border-radius: 5px; background: #fff; }
label { display: flex; flex-direction: column; gap: 4px; color: var(--mo); font-size: 13px; }

.dang-nhap { min-height: 100vh; display: grid; place-items: center; }
.the-dn { width: 340px; background: var(--mat); border: 1px solid var(--vien); border-radius: 10px; padding: 28px;
          display: flex; flex-direction: column; gap: 14px; }
.the-dn h1 { margin: 0; font-size: 22px; }
.phu { margin: 0; color: var(--mo); }
.loi { color: var(--do); min-height: 1em; margin: 0; }

.thanh { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 8px 16px;
         background: var(--mat); border-bottom: 1px solid var(--vien); }
.ten-app { font-size: 16px; margin-right: 8px; }
.chon-ky { flex-direction: row; align-items: center; gap: 8px; }
.day { flex: 1; }
.nhan { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--xanh-nhat); color: var(--xanh); }
.nhan.khoa { background: var(--do-nhat); color: var(--do); }
.than { display: flex; min-height: calc(100vh - 50px); }
.menu { width: 180px; flex: none; background: var(--mat); border-right: 1px solid var(--vien); padding: 10px 0; }
.menu a { display: block; padding: 9px 18px; color: var(--chu); cursor: pointer; text-decoration: none; }
.menu a:hover { background: var(--nen); }
.menu a.dang { background: var(--nhan-nhat); color: var(--nhan); font-weight: 600; border-right: 3px solid var(--nhan); }
main { flex: 1; padding: 18px 22px; min-width: 0; }
h2 { font-size: 18px; margin: 0 0 4px; }
.mo-ta { color: var(--mo); margin: 0 0 16px; }

.the-so { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin-bottom: 18px; }
.the { background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; padding: 12px 14px; }
.the .nhan-the { color: var(--mo); font-size: 12px; }
.the .gia-tri { font-size: 20px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
.the .ghi { font-size: 12px; color: var(--mo); margin-top: 2px; }
.the.tot { border-color: #b7dfc3; background: var(--xanh-nhat); }
.the.xau { border-color: #f1b8b1; background: var(--do-nhat); }

.cong-cu { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-bottom: 12px; }
.cong-cu label { flex-direction: row; align-items: center; gap: 6px; }

.bang-bao { background: var(--mat); border: 1px solid var(--vien); border-radius: 8px; overflow: auto; max-height: calc(100vh - 210px); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: 6px 9px; border-bottom: 1px solid #eef0f3; white-space: nowrap; text-align: left; }
th { position: sticky; top: 0; background: #f0f3f6; font-weight: 600; font-size: 12.5px; z-index: 1; }
td.so, th.so { text-align: right; }
tbody tr { cursor: default; }
tbody tr.bam { cursor: pointer; }
tbody tr.bam:hover { background: var(--nhan-nhat); }
td.lech { background: var(--do-nhat); color: var(--do); font-weight: 600; }
td.khop { color: var(--xanh); }
tr.da-sua td:first-child { box-shadow: inset 3px 0 var(--nhan); }
tfoot td { font-weight: 600; background: #f0f3f6; position: sticky; bottom: 0; }

.khung { position: fixed; top: 0; right: 0; width: 520px; max-width: 100vw; height: 100vh; background: var(--mat);
         border-left: 1px solid var(--vien); box-shadow: -6px 0 24px rgba(0,0,0,.08); z-index: 20; overflow: auto; }
.khung-dau { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
             border-bottom: 1px solid var(--vien); position: sticky; top: 0; background: var(--mat); }
#khung-than { padding: 14px 16px; }
.luoi-sua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 14px; }
.luoi-sua input { text-align: right; }
.ket { width: 100%; margin-top: 8px; }
.ket td { padding: 4px 6px; }

.o-ngay { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.o-ngay div { border: 1px solid var(--vien); border-radius: 5px; padding: 4px; text-align: center; font-size: 12px; }
.o-ngay div b { display: block; font-size: 13px; }
.o-ngay .cn { background: #f4f4f4; } .o-ngay .nghi { background: var(--vang-nhat); } .o-ngay .tc { background: var(--nhan-nhat); }

.tai-tep { display: grid; gap: 12px; max-width: 640px; background: var(--mat); border: 1px solid var(--vien);
           border-radius: 8px; padding: 16px; }
.tai-tep label { color: var(--chu); }
.ghi-chu { font-size: 12px; color: var(--mo); }
.canh-bao { background: var(--vang-nhat); border: 1px solid #f0d78a; padding: 8px 12px; border-radius: 6px; margin: 8px 0; }
.bao { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #263238; color: #fff;
       padding: 9px 16px; border-radius: 6px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 30; }
.bao.hien { opacity: 1; } .bao.loi { background: var(--do); }

.nhom-menu { padding: 14px 18px 4px; font-size: 11.5px; color: var(--mo); text-transform: uppercase; letter-spacing: .04em; border-top: 1px solid var(--vien); margin-top: 8px; }
.the-nho { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 9px; margin-right: 4px; white-space: nowrap; }
.the-nho.vang { background: #fff2cc; color: #7a5b00; } .the-nho.cam { background: #f8cbad; color: #8a3a12; } .the-nho.xam { background: #eee; color: #666; }
tr.da-nghi td { color: #8a8a8a; }
.nhom-sua { margin: 6px 0 4px; font-size: 13px; color: var(--nhan); border-bottom: 1px solid var(--vien); padding-bottom: 3px; }
.luoi-sua input.thieu, .luoi-sua select.thieu { background: #fff2cc; border-color: #e6c35c; }
.luoi-sua .rong { grid-column: 1 / -1; }
.luoi-sua input.chu { text-align: left; }
.the-bc { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.the-bc button.dang { background: var(--nhan); color: #fff; }
.ds-ten { font-size: 12px; color: var(--mo); white-space: normal; display: inline-block; min-width: 200px; max-width: 360px; vertical-align: top; }

/* Bảng chấm công */
.bcc-bang { max-height: calc(100vh - 250px); }
.bcc-bang table { width: auto; }
.bcc-bang th, .bcc-bang td { padding: 2px 4px; font-size: 12px; }
.bcc-bang th.ngay { width: 34px; text-align: center; font-weight: 500; }
.bcc-bang th.ngay.cn, .bcc-bang td.cn { background: #f1f1f1; }
.bcc-bang td.dinh, .bcc-bang th.dinh { position: sticky; left: 0; background: #fff; z-index: 2; }
.bcc-bang th.dinh { background: #f0f3f6; z-index: 3; }
.bcc-bang td.dinh2, .bcc-bang th.dinh2 { position: sticky; left: 70px; background: #fff; z-index: 2; min-width: 150px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.bcc-bang th.dinh2 { background: #f0f3f6; z-index: 3; }
input.occ { width: 32px; padding: 2px 0; text-align: center; font-size: 12px; border: 1px solid transparent; border-radius: 3px; background: transparent; }
input.occ:focus { border-color: var(--nhan); background: #fff; outline: none; }
input.occ.m-do { background: #f4b6b0; } input.occ.m-cam { background: #f8cbad; } input.occ.m-vang { background: #fff2cc; }
input.occ.co-ghi { box-shadow: inset -4px 4px 0 -2px #c0392b; }
input.occ.doi { border-color: var(--nhan); font-weight: 700; color: var(--nhan); }
input.oso { width: 46px; text-align: right; font-size: 12px; padding: 2px 3px; }
.chu-mau { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin: 0 3px 0 10px; }
.nhan.cho { background: var(--vang-nhat); color: #7a5b00; }

.khung.lon { width: 860px; }
.bc-loc { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.bc-loc input[type=search] { width: 220px; }
a.nut-ct { color: var(--nhan); cursor: pointer; text-decoration: none; white-space: nowrap; }
td.sua-tay { box-shadow: inset 0 -2px 0 #c0392b; font-weight: 700; }
td.bam-tong { cursor: pointer; } td.bam-tong:hover { background: var(--nhan-nhat); }
.banner-thang { background: #eef4ff; border: 1px solid #b6cdf5; padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; }

/* Đơn giá nhân công */
.khoi-dg { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--vien); border-radius: 8px; padding: 12px; background: var(--mat); }
.loi-chu { color: #b42318; }
@media (max-width: 720px) { #dg-dc, #dg-nap { grid-column: 1 / -1; } }

/* Lưới bảng lương (bố cục PLASTIC) */
.luoi-bl { max-height: calc(100vh - 230px); }
.luoi-bl table { font-size: 12.5px; }
.luoi-bl th { position: sticky; top: 0; z-index: 2; background: #eef2f6; white-space: nowrap; font-size: 11.5px; line-height: 1.25; }
.luoi-bl th.nhap, .luoi-bl td.nhap { background: #fff8db; }
.luoi-bl td.nhap input { width: 92px; border: 1px solid transparent; background: transparent; text-align: right; padding: 2px 4px; font: inherit; }
.luoi-bl td.nhap input:focus { border-color: #1f4e78; background: #fff; outline: none; }
.luoi-bl .dinh { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 86px; }
.luoi-bl .dinh2 { position: sticky; left: 86px; background: #fff; z-index: 1; min-width: 170px; white-space: nowrap; }
.luoi-bl th.dinh, .luoi-bl th.dinh2 { z-index: 3; background: #eef2f6; }
.luoi-bl tr.ten-to td { background: #f2f4f7; font-weight: 600; }
.luoi-bl .dinh-chu { position: sticky; left: 8px; }
.luoi-bl tr.cong-to td { background: #f8fafc; font-weight: 600; }
.luoi-bl tr.cong-tong td { background: #e8eef6; font-weight: 700; }
.luoi-bl tr.dong-do td { background: #fdecec; }
.luoi-bl tr.da-sua td.dinh { box-shadow: inset 3px 0 0 #2e7d32; }

/* Tiến trình tháng */
.tien-trinh { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin: 10px 0 16px; }
.tien-trinh .buoc { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--vien); border-radius: 8px; background: var(--mat); color: var(--chu); text-decoration: none; }
.tien-trinh .buoc:hover { border-color: #1f4e78; }
.tien-trinh .so-buoc { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #eef2f6; color: #5d6873; }
.tien-trinh .xong .so-buoc { background: #067647; color: #fff; }
.tien-trinh .chua { border-left: 3px solid #f79009; }

/* kẻ ô + dòng lọc */
.luoi-bl td, .luoi-bl th { border: 1px solid #d9dee5; }
.luoi-bl thead { position: sticky; top: 0; z-index: 4; }
.luoi-bl thead th { position: static; }
.luoi-bl thead th.dinh, .luoi-bl thead th.dinh2 { position: sticky; z-index: 5; }
.luoi-bl tr.dong-loc th { background: #f7f9fb; padding: 2px; }
th input.loc { width: 100%; min-width: 60px; font-size: 12px; padding: 3px 5px; border: 1px solid #cfd6de; border-radius: 4px; background: #fff; font-weight: 400; text-align: left; }
th input.loc:not(:placeholder-shown) { border-color: #1f4e78; background: #eef4fb; }
.luoi-bl .dinh { min-width: 92px; }
.luoi-bl .dinh2 { left: 92px; }
.bang-bao table.co-loc thead { position: sticky; top: 0; z-index: 2; }
.bang-bao table.co-loc thead th { position: static; }
.bang-bao table.co-loc tr.dong-loc th { background: #f7f9fb; padding: 2px 4px; }
.bang-bao table.ke-o td, .bang-bao table.ke-o th { border: 1px solid #e1e6ec; }

caption.dem-loc { caption-side: top; text-align: left; font-size: 12px; color: var(--mo); padding: 2px 6px; }
caption.dem-loc:empty { display: none; }

/* sắp xếp: bấm tiêu đề */
th.sap-duoc { cursor: pointer; user-select: none; }
th.sap-duoc:hover { background: #e3e9f0; }
th.sap-duoc[data-sap="▲"]::after { content: " ▲"; color: #1f4e78; font-size: 10px; }
th.sap-duoc[data-sap="▼"]::after { content: " ▼"; color: #1f4e78; font-size: 10px; }

td.o-ct { cursor: pointer; }
td.o-ct:hover { background: #e8f0fb; text-decoration: underline; }

/* ===== MENU: mục báo cáo của từng phân hệ ===== */
.menu a.menu-bc { color: var(--nhan); font-size: 13px; }
.menu a.menu-bc::before { content: "▸ "; }

/* ===== TRUNG TÂM BÁO CÁO ===== */
.the-bc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.the-bc-o { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--mat); border: 1px solid var(--vien);
            border-radius: 8px; cursor: pointer; color: var(--chu); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.the-bc-o:hover { border-color: var(--nhan); box-shadow: 0 2px 8px rgba(31,95,191,.10); }
.the-bc-o span { color: var(--mo); font-size: 13px; line-height: 1.4; }

/* ===== BẢNG ĐIỀU KHIỂN ===== */
.db-dau { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.db-loc { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.db-loc select { min-width: 96px; }
#db-bp { max-width: 220px; }
.db-cho { padding: 40px; text-align: center; color: var(--mo); }
.db-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.db-kpi { background: var(--mat); border: 1px solid var(--vien); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 3px;
          position: relative; overflow: hidden; }
.db-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--nhan); }
.db-kpi.canh::before { background: #eda100; }
.db-kpi.bam-duoc { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.db-kpi.bam-duoc:hover { border-color: var(--nhan); box-shadow: 0 2px 10px rgba(31,95,191,.12); }
.db-kpi-ten { color: var(--mo); font-size: 12.5px; }
.db-kpi b { font-size: 24px; font-weight: 650; letter-spacing: -.3px; color: var(--chu); font-variant-numeric: tabular-nums; }
.db-kpi-phu { color: var(--mo); font-size: 12px; min-height: 1em; }
.db-lech { font-size: 12px; color: var(--mo); }
.db-lech.tang { color: var(--xanh); } .db-lech.giam { color: var(--do); }
.db-muc { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 8px; }
.db-muc a { cursor: pointer; color: var(--nhan); font-size: 13px; }
.db-tieu { margin: 0; font-size: 15px; } .db-tieu span { color: var(--mo); font-weight: 400; font-size: 13px; margin-left: 6px; }
.db-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; margin-bottom: 20px; }
.db-luoi.hai { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.db-the { background: var(--mat); border: 1px solid var(--vien); border-radius: 10px; padding: 12px 14px; min-width: 0; }
.db-the.rong2 { grid-column: span 2; }
.db-the.cao { grid-row: span 2; }
.db-the h3 { margin: 0 0 2px; font-size: 13.5px; font-weight: 600; }
.db-phu { margin: 0 0 6px; color: var(--mo); font-size: 12px; }
.db-ds { display: flex; flex-direction: column; }
.db-dong { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--nen); cursor: pointer; font-size: 13px; }
.db-dong:hover { background: var(--nen); }
.db-dong em { color: var(--mo); font-style: normal; font-size: 12px; margin-left: 4px; }
.db-dong b { font-weight: 600; white-space: nowrap; } .db-dong b.do { color: var(--do); }
.db-them { display: block; padding: 6px 4px; color: var(--nhan); cursor: pointer; font-size: 13px; }
@media (max-width: 760px) { .db-the.rong2 { grid-column: auto; } .db-luoi, .db-luoi.hai { grid-template-columns: 1fr; } .db-kpi b { font-size: 20px; } }

/* ===== BIỂU ĐỒ ===== */
.bd-luoi { stroke: #e9ecf0; stroke-width: 1; } .bd-goc { stroke: #c5ccd3; }
.bd-truc { fill: #7b8590; font-size: 11px; font-variant-numeric: tabular-nums; }
.bd-nhan { fill: #4a545e; font-size: 11.5px; }
.bd-so { fill: #39424b; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bd-giua { fill: var(--chu); font-size: 17px; font-weight: 650; }
.bd-moc { transition: opacity .12s; } .bd-moc.mo { opacity: .35; }
.bd-tran { stroke: #9aa4ae; stroke-width: 1; stroke-dasharray: 3 3; }
svg.bam-duoc .bd-vung, .bd-muc.bam-duoc, .bd-tron .bd-moc { cursor: pointer; }
.bd-rong { color: var(--mo); padding: 26px 0; text-align: center; font-size: 13px; }
.bd-chu-giai { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mo); margin: 2px 0 4px; }
.bd-chu-giai i, .bd-muc i, .bd-dong i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.bd-tron { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bd-ds { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 3px; }
.bd-muc { display: grid; grid-template-columns: 16px 1fr auto 48px; align-items: center; gap: 4px; font-size: 12.5px; padding: 2px 4px; border-radius: 4px; }
.bd-muc.bam-duoc:hover { background: var(--nen); }
.bd-muc b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; } .bd-muc em { color: var(--mo); font-style: normal; text-align: right; }
.bd-tip { position: fixed; z-index: 50; pointer-events: none; background: #fff; border: 1px solid var(--vien); border-radius: 8px; padding: 8px 10px;
          box-shadow: 0 6px 18px rgba(20,30,40,.14); font-size: 12.5px; min-width: 150px; }
.bd-dong { display: flex; align-items: center; gap: 2px; margin-top: 3px; } .bd-dong b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.bd-goi-y { color: var(--mo); font-size: 11.5px; margin-top: 5px; }
/* Màn hình hẹp (điện thoại): menu thành thanh cuộn ngang */
@media (max-width: 760px) {
  .thanh { flex-wrap: wrap; } .than { flex-direction: column; }
  .menu { width: auto; display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--vien); padding: 0; }
  .menu a { white-space: nowrap; padding: 10px 12px; } .menu a.dang { border-right: 0; border-bottom: 3px solid var(--nhan); }
  .menu .nhom-menu { display: none; }
  main { padding: 12px 16px; }
  .db-kpis { grid-template-columns: 1fr 1fr; } .db-loc label { flex: 1 1 40%; }
}