/* ==========================================================================
   Giao diện Hệ thống theo dõi tiến độ dự án — phong cách cơ quan nhà nước:
   trang trọng, hiện đại, trực quan. Màu chủ đạo xanh công vụ + nhấn vàng.
   Quy ước màu RAG NHẤT QUÁN (mục 1.7): xanh=đúng tiến độ; vàng=cần chú ý;
   đỏ=trễ/quá hạn; xám=chưa/hủy.
   ========================================================================== */

:root {
    --xanh-tinh: #0a3d6e;          /* xanh công vụ chủ đạo */
    --xanh-tinh-dam: #062c52;
    --xanh-tinh-nhat: #e8f0f8;
    --vang-cong: #c79a3b;          /* nhấn vàng trang trọng */
    --vang-cong-sang: #e3be63;
    --do-co: #9e1c1c;              /* đỏ cờ (dải accent) */

    --rag-xanh: #157347; --rag-xanh-nen: #d8efe2;
    --rag-vang: #d97706; --rag-vang-nen: #fdeccf;
    --rag-cam:  #ea580c; --rag-cam-nen:  #fde0cd;
    --rag-do:   #c1272d; --rag-do-nen:   #f7d9da;
    --rag-xam:  #687485; --rag-xam-nen:  #e8ebef;

    --nen-app: #eef1f6;
    --vien: #e1e6ee;
    --chu: #1d2733;
    --chu-nhat: #5b6776;
    --sidebar-w: 256px;
    --bong: 0 1px 3px rgba(16,32,64,.06), 0 1px 2px rgba(16,32,64,.04);
    --bong-noi: 0 6px 24px rgba(8,28,58,.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
    background: var(--nen-app);
    font-family: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--chu);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Dải accent cờ ở đỉnh trang */
body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--do-co) 0 38%, var(--vang-cong) 38% 62%, var(--do-co) 62% 100%); z-index: 2000; }

h1, h2, h3, h4, h5, h6 { color: var(--xanh-tinh-dam); text-wrap: balance; }
a { color: var(--xanh-tinh); }
/* Tránh chữ lẻ rơi một mình xuống dòng (orphan) ở tiêu đề/nhãn */
.card-box-head, .kpi-card .nhan, .ten-trang, .sidebar .brand > div { text-wrap: pretty; }

/* ----------------------------- Bố cục khung ----------------------------- */
.app-wrap { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(185deg, var(--xanh-tinh-dam), var(--xanh-tinh));
    color: #d8e4f1;
    position: fixed; top: 3px; bottom: 0; left: 0; overflow-y: auto; z-index: 1040;
    transition: transform .2s ease; box-shadow: 2px 0 10px rgba(6,28,58,.12);
}
.sidebar .brand {
    padding: 18px 18px 16px; font-weight: 700; font-size: 1.02rem; color: #fff; line-height: 1.35;
    border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: 11px;
}
.sidebar .brand .emblem {
    flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, var(--vang-cong-sang), var(--vang-cong));
    color: var(--xanh-tinh-dam); display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; box-shadow: 0 0 0 3px rgba(199,154,59,.25);
}
/* Quốc huy Việt Nam (ảnh thật) — không bo tròn để giữ trọn dải băng + bánh răng. */
.sidebar .brand .emblem-img { flex: 0 0 44px; width: 44px; height: auto; display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.auth-card .emblem-img { display: block; width: 78px; height: auto; margin: 0 auto 12px; }
.sidebar .brand small { display: block; font-weight: 400; font-size: .72rem; color: #a9c6e3; margin-top: 2px; letter-spacing: .02em; }
.sidebar .nav-link {
    color: #c8d8ea; padding: 10px 18px; display: flex; align-items: center; gap: 11px;
    border-left: 3px solid transparent; font-size: .92rem; transition: background .12s, border-color .12s;
}
.sidebar .nav-link i { font-size: 1.05rem; opacity: .9; width: 18px; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar .nav-link.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--vang-cong-sang); font-weight: 600; }
.sidebar .nav-link.active i { opacity: 1; color: var(--vang-cong-sang); }
.sidebar .nav-muc { padding: 15px 18px 5px; font-size: .67rem; text-transform: uppercase; letter-spacing: .08em; color: #7ea4cd; font-weight: 600; }

/* HÀNG NGHIỆP VỤ + BỘ CHỌN ĐỢT — đứng trên cùng thực đơn.
   Chọn nghiệp vụ là điều hướng nên phải THẤY ĐƯỢC, không giấu trong cái thả xuống ở
   thanh tiêu đề. Xếp lưới 2 cột: 4 nghiệp vụ vừa đúng hai hàng, thêm nghiệp vụ thứ 5
   thì tự xuống hàng chứ không đẩy thực đơn bên dưới đi đâu. */
.nghiep-vu-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.nghiep-vu-muc {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 8px 9px; border-radius: 7px; text-decoration: none;
    color: #c8d8ea; background: rgba(255,255,255,.05);
    border: 1px solid transparent; font-size: .76rem; line-height: 1.25;
    transition: background .12s, border-color .12s, color .12s;
}
.nghiep-vu-muc i { font-size: 1rem; opacity: .85; }
.nghiep-vu-muc:hover { background: rgba(255,255,255,.11); color: #fff; }
.nghiep-vu-muc.dang-mo {
    background: rgba(255,255,255,.14); color: #fff; font-weight: 600;
    border-color: var(--vang-cong-sang);
}
.nghiep-vu-muc.dang-mo i { opacity: 1; color: var(--vang-cong-sang); }
.nghiep-vu-muc:focus-visible { outline: 2px solid var(--vang-cong-sang); outline-offset: 1px; }
.dot-chon { padding: 9px 12px 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.dot-chon .form-label { color: #7ea4cd; text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; font-weight: 600; }
.dot-chon .form-select {
    background-color: rgba(255,255,255,.08); color: #eaf2fa;
    border-color: rgba(255,255,255,.18); font-size: .82rem;
}
.dot-chon .form-select:focus { border-color: var(--vang-cong-sang); box-shadow: none; }
.dot-chon .form-select option { color: #16324f; }

/* NHÓM THỰC ĐƠN đóng/mở được (phân hệ 6 rõ có 19 màn, để phẳng thì không ai đọc nổi).
   Dùng <details>/<summary> để bấm là mở, không cần JS — JS chỉ để NHỚ lần sau.
   Tiêu đề nhóm cố ý KHÔNG mang lớp .nav-link, vì app.js đóng sập ngăn kéo trên điện
   thoại mỗi khi bấm vào .nav-link. */
.sidebar .nav-nhom { border-top: 1px solid rgba(255,255,255,.07); }
.sidebar .nav-nhom:first-of-type { border-top: none; }
.sidebar .nav-nhom-dau {
    display: flex; align-items: center; gap: 11px; cursor: pointer; list-style: none;
    padding: 11px 18px; font-size: .74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #9dbfe2; user-select: none;
    transition: background .12s, color .12s;
}
.sidebar .nav-nhom-dau::-webkit-details-marker { display: none; }
.sidebar .nav-nhom-dau > span { flex: 1 1 auto; min-width: 0; }
.sidebar .nav-nhom-dau > i:first-child { font-size: 1rem; width: 18px; text-align: center; opacity: .85; }
.sidebar .nav-nhom-dau .mui { font-size: .72rem; opacity: .65; transition: transform .18s ease; }
.sidebar .nav-nhom[open] > .nav-nhom-dau { color: #fff; }
.sidebar .nav-nhom[open] > .nav-nhom-dau .mui { transform: rotate(180deg); }
.sidebar .nav-nhom-dau:hover { background: rgba(255,255,255,.06); color: #fff; }
.sidebar .nav-nhom-dau:focus-visible { outline: 2px solid var(--vang-cong-sang); outline-offset: -3px; }
.sidebar .nav-nhom-than { padding-bottom: 4px; }
.sidebar .nav-nhom-than .nav-link { padding-left: 30px; font-size: .89rem; }
/* Nhóm đang đóng mà bên trong có màn hình đang mở thì phải nhìn thấy được — nếu không
   người dùng bấm đóng nhóm rồi tưởng mình lạc mất. */
.sidebar .nav-nhom:not([open]):has(.nav-link.active) > .nav-nhom-dau {
    color: #fff; border-left: 3px solid var(--vang-cong-sang); padding-left: 15px;
}

.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }

.topbar {
    background: #fff; border-bottom: 1px solid var(--vien); padding: 11px 22px;
    display: flex; align-items: center; gap: 14px; position: sticky; top: 3px; z-index: 1030; box-shadow: var(--bong);
}
.topbar .ten-trang { font-weight: 600; font-size: 1.08rem; margin: 0; color: var(--xanh-tinh-dam); min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar form[role="search"], .topbar > .ms-auto { flex-shrink: 0; }
.topbar .menu-toggle { display: none; }
.topbar .input-group-text { background: var(--xanh-tinh-nhat); border-color: var(--vien); color: var(--xanh-tinh); }

.noi-dung { padding: 22px; flex: 1; }

/* ------------------------------- Thẻ KPI -------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.kpi-card {
    background: #fff; border: 1px solid var(--vien); border-radius: 12px; padding: 15px 17px;
    box-shadow: var(--bong); position: relative; overflow: hidden; transition: transform .12s, box-shadow .12s;
    min-width: 0;   /* cho phép co lại trong lưới — số dài không đẩy vỡ ô */
}
.kpi-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--xanh-tinh); opacity: .85; }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--bong-noi); }
.kpi-card .nhan { font-size: .78rem; color: var(--chu-nhat); margin-bottom: 7px; font-weight: 500; }
/* Cỡ chữ TỰ CO theo bề rộng (auto-size) để số tiền dài không làm vỡ thẻ thống kê */
.kpi-card .so { font-size: clamp(1.15rem, .7rem + 1.1vw, 1.8rem); font-weight: 700; line-height: 1.1; color: var(--xanh-tinh-dam); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-card .xu-huong { font-size: .76rem; margin-top: 7px; }
.kpi-card.kpi-do::before { background: var(--rag-do); } .kpi-card.kpi-do .so { color: var(--rag-do); }
.kpi-card.kpi-vang::before { background: var(--rag-vang); } .kpi-card.kpi-vang .so { color: var(--rag-vang); }
.kpi-card.kpi-xanh::before { background: var(--rag-xanh); } .kpi-card.kpi-xanh .so { color: var(--rag-xanh); }
.xu-huong .len { color: var(--rag-do); font-weight: 600; }
.xu-huong .giam { color: var(--rag-xanh); font-weight: 600; }

/* ---------------------- Dải tóm tắt điều hành --------------------------- */
.exec-band { background: linear-gradient(120deg, var(--xanh-tinh-dam), var(--xanh-tinh)); color: #eaf2fb;
    border-radius: 14px; padding: 15px 20px; box-shadow: var(--bong-noi); display: flex; flex-wrap: wrap;
    align-items: center; gap: 12px 26px; position: relative; overflow: hidden; }
.exec-band::after { content: ""; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px;
    border-radius: 50%; background: radial-gradient(circle, rgba(199,154,59,.20), transparent 70%); }
.exec-band .muc { display: flex; flex-direction: column; gap: 3px; min-width: 116px; position: relative; z-index: 1; }
.exec-band .muc .nhan { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #a9c6e3; font-weight: 600; }
.exec-band .muc .gt { font-size: 1.5rem; font-weight: 700; line-height: 1.05; color: #fff; }
.exec-band .muc .gt small { font-size: .72rem; font-weight: 500; color: #bdd3ea; }
.exec-band .vach { width: 1px; align-self: stretch; min-height: 38px; background: rgba(255,255,255,.16); }
.exec-band .canh-do { color: #ff9ea3 !important; }
.exec-band .canh-vang { color: #ffd485 !important; }
.exec-band .canh-xanh { color: #8fe6b6 !important; }
.exec-band a.muc { text-decoration: none; }
.exec-band a.muc:hover .nhan { color: #fff; }
.exec-band a.muc:hover .gt { text-decoration: underline; text-underline-offset: 3px; }
/* Cụm "về đích": mốc dứt điểm + vòng gauge tiến độ chung */
.exec-band .cum-ve-dich { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.exec-band .gauge-tiendo { display: flex; align-items: center; gap: 9px; }
.exec-band .gauge-svg { width: 60px; height: 60px; flex: 0 0 auto; }
.exec-band .gauge-text { fill: #fff; font-size: 14px; font-weight: 700; }
.exec-band .gauge-cap { display: flex; flex-direction: column; gap: 1px; }
.exec-band .gauge-cap .nhan { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #a9c6e3; font-weight: 600; }
.exec-band .gauge-cap small { font-size: .66rem; color: #8fa9c4; }
/* Thẻ KPI bấm được (drill-down) */
a.kpi-card { text-decoration: none; color: inherit; }

/* Dải "Tình hình & tâm điểm chỉ đạo" (dashboard giải ngân) — lãnh đạo nhìn là biết ngay */
.dai-chi-dao { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; border-radius: 12px; padding: 16px 22px; color: #fff; box-shadow: var(--bong); }
.dai-chi-dao .dai-nhan { font-size: .78rem; opacity: .92; text-transform: uppercase; letter-spacing: .04em; }
.dai-chi-dao .dai-so { font-size: clamp(1.8rem, 1rem + 2vw, 2.6rem); font-weight: 800; line-height: 1; }
.dai-chi-dao .dai-verdict { font-weight: 700; font-size: 1.02rem; margin-top: 4px; }
.dai-chi-dao .dai-phai { margin-left: auto; text-align: right; font-size: .9rem; line-height: 1.75; }
.dai-chi-dao.dai-do { background: linear-gradient(135deg, #98161d, #c1272d); }
.dai-chi-dao.dai-vang { background: linear-gradient(135deg, #a8761a, #d6a23a); }
.dai-chi-dao.dai-xanh { background: linear-gradient(135deg, #10683a, #1c9d57); }
.dai-chi-dao.dai-xam { background: linear-gradient(135deg, #55636f, #75858f); }
@media (max-width: 640px) { .dai-chi-dao .dai-phai { margin-left: 0; text-align: left; } }
.tam-diem { display: block; text-decoration: none; background: #fff; border: 1px solid var(--vien); border-left-width: 4px; border-radius: 10px; padding: 11px 13px; height: 100%; transition: box-shadow .12s, transform .12s; }
.tam-diem:hover { box-shadow: var(--bong-noi); transform: translateY(-2px); }
.tam-diem .td-nhan { font-size: .72rem; color: var(--chu-nhat); text-transform: uppercase; letter-spacing: .03em; }
.tam-diem .td-chinh { font-weight: 700; color: var(--xanh-tinh-dam); margin-top: 3px; line-height: 1.2; }
.tam-diem .td-phu { font-size: .82rem; color: var(--chu-nhat); margin-top: 2px; }
.tam-diem.td-do { border-left-color: var(--rag-do); }
.tam-diem.td-vang { border-left-color: var(--rag-vang); }
table.bang a.badge-rag { cursor: pointer; }

/* Thông tin chung dự án — lưới định nghĩa khoa học */
.tt-muc { font-size: .73rem; text-transform: uppercase; letter-spacing: .05em; color: var(--xanh-tinh);
    font-weight: 700; margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--vien); }
.tt-muc:first-of-type { margin-top: 0; }
.tt-o { padding: 5px 10px; }
.tt-nhan { font-size: .73rem; color: var(--chu-nhat); margin-bottom: 2px; line-height: 1.25; }
.tt-gt { font-size: .92rem; }

/* ------------------------------ Tab dashboard --------------------------- */
.dash-tabs { border-bottom: 2px solid var(--vien); margin-bottom: 18px; gap: 2px; flex-wrap: wrap; }
.dash-tabs .nav-link { border: none; color: var(--chu-nhat); font-weight: 600; padding: 9px 16px;
    border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; margin-bottom: -2px;
    display: inline-flex; align-items: center; gap: 7px; }
.dash-tabs .nav-link:hover { color: var(--xanh-tinh); background: var(--xanh-tinh-nhat); }
.dash-tabs .nav-link.active { color: var(--xanh-tinh-dam); background: transparent; border-bottom-color: var(--vang-cong); }

/* ------------------------------- Màu RAG -------------------------------- */
.rag-xanh { color: var(--rag-xanh) !important; }
.rag-vang { color: var(--rag-vang) !important; }
.rag-do   { color: var(--rag-do)   !important; }
.rag-xam  { color: var(--rag-xam)  !important; }

.badge-rag { display: inline-flex; align-items: center; gap: 4px; padding: .25em .62em; border-radius: 6px; font-size: .76rem; font-weight: 600; line-height: 1.4; }
.badge-rag.rag-xanh { background: var(--rag-xanh-nen); color: #0d5132 !important; }
.badge-rag.rag-vang { background: var(--rag-vang-nen); color: #8a4b04 !important; }
.badge-rag.rag-do   { background: var(--rag-do-nen);   color: #8a1418 !important; }
.badge-rag.rag-xam  { background: var(--rag-xam-nen);  color: #41505f !important; }

.den-rag { width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 2px rgba(0,0,0,.04); }
.den-rag.rag-xanh { background: var(--rag-xanh); } .den-rag.rag-vang { background: var(--rag-vang); }
.den-rag.rag-do { background: var(--rag-do); } .den-rag.rag-xam { background: var(--rag-xam); }

.rag-cam  { color: var(--rag-cam)  !important; }
.badge-rag.rag-cam  { background: var(--rag-cam-nen);  color: #9a3412 !important; }
.the-hoi.the-cam { border-left-color: var(--rag-cam); } .the-hoi.the-cam .so { color: var(--rag-cam); }

.rag-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: var(--chu-nhat); align-items: center; }
.rag-legend span { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------------------------------------------------
   THANH PHÂN LOẠI NHIỆM VỤ trên bảng điều hành.
   Sáu nhóm trước đây là sáu thẻ, mỗi thẻ kèm một câu dặn dò — đọc hết mới nắm
   được tình hình, trong khi đây là chỗ mắt dừng ngay sau ba con số lớn. Một
   thanh liền cho thấy tỷ lệ đỏ/cam/vàng/xanh trong một cái liếc; câu dặn phải
   làm gì chuyển sang chú giải khi rê chuột.
   -------------------------------------------------------------------------- */
.rag-nen-xanh { background: var(--rag-xanh); } .rag-nen-vang { background: var(--rag-vang); }
.rag-nen-cam  { background: var(--rag-cam);  } .rag-nen-do   { background: var(--rag-do); }
.rag-nen-xam  { background: var(--rag-xam);  }

.thanh-du-bao { background: var(--rag-xam-nen); }
.thanh-du-bao .doan { min-width: 4px; text-decoration: none; transition: filter .15s; }
.thanh-du-bao .doan:hover { filter: brightness(1.16); }
.thanh-du-bao .doan:focus-visible { outline: 2px solid var(--xanh-tinh-dam); outline-offset: -2px; }
.chu-thich-db:hover .text-muted-sm { color: var(--chu); }

/* ------------------------------ Chip lọc -------------------------------- */
.chip-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
/* Biến thể GIỮ 1 HÀNG: không xuống dòng, cuộn ngang nếu hẹp (chip giữ kích thước, không co). */
.chip-bar.mot-hang { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.chip-bar.mot-hang .chip { flex: 0 0 auto; white-space: nowrap; }
.chip {
    border: 1px solid var(--vien); background: #fff; border-radius: 20px; padding: 6px 14px;
    font-size: .83rem; color: #344559; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; box-shadow: var(--bong); transition: all .12s;
}
.chip:hover { border-color: var(--xanh-tinh); color: var(--xanh-tinh); }
.chip.active { background: var(--xanh-tinh); color: #fff; border-color: var(--xanh-tinh); box-shadow: 0 2px 8px rgba(10,61,110,.25); }
.chip.active .badge { background: rgba(255,255,255,.25) !important; }

/* ------------------------------- Thẻ/Bảng ------------------------------- */
.card-box { background: #fff; border: 1px solid var(--vien); border-radius: 12px; box-shadow: var(--bong); }
.card-box .card-box-head {
    padding: 13px 17px; border-bottom: 1px solid var(--vien); font-weight: 600; color: var(--xanh-tinh-dam);
    display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .95rem;
}
.card-box .card-box-body { padding: 17px; }

table.bang { width: 100%; border-collapse: collapse; }
table.bang th, table.bang td { padding: 10px 11px; border-bottom: 1px solid #eef1f5; text-align: left; vertical-align: middle; font-size: .88rem;
    /* GD-09 — người dùng dán được cả một chuỗi dài không dấu cách (đường dẫn, mã hồ sơ,
       văn bản chép từ PDF). Không có hai dòng này thì ô đó kéo bảng rộng ra, cột cuối
       văng khỏi màn hình và cả trang phải cuộn ngang. */
    overflow-wrap: anywhere; word-break: break-word; }
table.bang th { background: #f6f8fb; font-weight: 600; color: var(--chu-nhat); font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; position: sticky; top: 0; }
table.bang tbody tr:hover td { background: #f7faff; }
table.bang tbody tr:last-child td { border-bottom: none; }

.progress-thin { height: 8px; background: #e9edf3; border-radius: 6px; overflow: hidden; }
.progress-thin > span { display: block; height: 100%; background: linear-gradient(90deg, var(--rag-xanh), #1aa05f); border-radius: 6px; }

.ma-du-an { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-weight: 600; color: var(--xanh-tinh); letter-spacing: .02em; }
.btn-copy { border: none; background: transparent; color: #9aa6b6; cursor: pointer; padding: 0 2px; }
.btn-copy:hover { color: var(--xanh-tinh); }

/* --------------------------- Cây vướng mắc ------------------------------ */
/* overflow: visible để menu "Hành động" của nhiệm vụ KHÔNG bị khung vướng mắc cắt khi thả
   xuống (trước đây overflow:hidden cắt mất menu → "thi thoảng không chọn được"). Bo góc
   chuyển sang phần tử con (đầu .vm-head / đuôi .nv-row:last-child) để giữ nguyên hình thức. */
.vm-item { border: 1px solid var(--vien); border-radius: 10px; margin-bottom: 13px; overflow: visible; box-shadow: var(--bong); }
.vm-head { padding: 11px 15px; background: #f6f8fb; border-bottom: 1px solid var(--vien); display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border-radius: 10px 10px 0 0; }
.vm-con { margin-left: 26px; }
.nv-row { padding: 9px 15px; border-bottom: 1px solid #f1f4f8; display: flex; gap: 10px; align-items: flex-start; transition: background .1s; }
.nv-row:last-child { border-bottom: none; border-radius: 0 0 10px 10px; }
.nv-row:hover { background: #fafcff; }
.nv-row.qua-han { background: var(--rag-do-nen); }
.nv-row.sap-han { background: var(--rag-vang-nen); }
.nv-tre { color: var(--rag-do); font-weight: 600; font-size: .8rem; }

/* ------------------------------ Timeline -------------------------------- */
.gantt { overflow-x: auto; }
.gantt-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.gantt-bar { height: 16px; border-radius: 5px; position: relative; min-width: 2px; }
.gantt-bar.rag-xanh { background: var(--rag-xanh); } .gantt-bar.rag-vang { background: var(--rag-vang); }
.gantt-bar.rag-do { background: var(--rag-do); } .gantt-bar.rag-xam { background: var(--rag-xam); }

/* ------------------------------ Đăng nhập ------------------------------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--xanh-tinh-dam), var(--xanh-tinh) 70%, #0e4f8c); padding: 20px; position: relative; }
.auth-wrap::after { content: ""; position: absolute; inset: 0; opacity: .07;
    background-image: radial-gradient(circle at 20% 30%, #fff 1px, transparent 1px), radial-gradient(circle at 70% 60%, #fff 1px, transparent 1px);
    background-size: 46px 46px; }
.auth-card { background: #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.32); width: 100%; max-width: 410px; padding: 34px 32px; position: relative; z-index: 1; }
.auth-card .emblem { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 14px;
    background: radial-gradient(circle at 50% 35%, var(--vang-cong-sang), var(--vang-cong)); color: var(--xanh-tinh-dam);
    display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 0 0 5px rgba(199,154,59,.18); }
.auth-card h1 { font-size: 1.1rem; line-height: 1.35; text-align: center; color: var(--xanh-tinh-dam); margin: 0; text-wrap: balance; }
.auth-card .co-quan { text-align: center; font-size: .82rem; color: var(--chu-nhat); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; margin-bottom: 2px; }

/* ----------------------------- Thông báo -------------------------------- */
.tb-badge { position: absolute; top: -4px; right: -6px; background: var(--rag-do); color: #fff; border-radius: 10px; font-size: .64rem; padding: 1px 5px; min-width: 16px; text-align: center; font-weight: 600; }
.tb-item { padding: 11px 15px; border-bottom: 1px solid #f1f4f8; display: block; color: inherit; text-decoration: none; }
.tb-item:hover { background: #f6f8fb; }
.tb-item.chua-doc { background: var(--xanh-tinh-nhat); border-left: 3px solid var(--xanh-tinh); }

/* ------------------------------- Nút ------------------------------------ */
.btn-primary { background: var(--xanh-tinh); border-color: var(--xanh-tinh); }
.btn-primary:hover, .btn-primary:focus { background: var(--xanh-tinh-dam); border-color: var(--xanh-tinh-dam); }
.btn-outline-primary { color: var(--xanh-tinh); border-color: #b9cbe0; }
.btn-outline-primary:hover { background: var(--xanh-tinh); border-color: var(--xanh-tinh); }
.btn { border-radius: 8px; }
.btn-sm { border-radius: 7px; }

/* ----------------------------- Wallboard -------------------------------- */
body.wallboard { font-size: 18px; }
body.wallboard .kpi-card .so { font-size: 2.6rem; }
body.wallboard .sidebar { display: none; }
body.wallboard .main { margin-left: 0; }

/* ===================== Responsive (mobile/tablet đa nền tảng) ============== */
/* Nền tảng: iOS không tự phóng to chữ, bỏ nhấp nháy khi chạm, cuộn mượt, chống tràn ngang */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
img, svg, canvas, video, table { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }
/* Tôn trọng safe-area (tai thỏ/thanh home iPhone) khi xoay ngang */
.sidebar { transition: transform .25s ease; will-change: transform; }
.noi-dung { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
/* Lớp phủ khi mở menu off-canvas */
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(8,20,36,.45); z-index: 1035; }
.sidebar-backdrop[hidden] { display: none; }

@media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); width: 284px; max-width: 84vw; box-shadow: 0 0 40px rgba(0,0,0,.35);
               padding-left: env(safe-area-inset-left); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
    .sidebar.mo { transform: translateX(0); }
    .main { margin-left: 0; }
    .topbar { padding-right: max(16px, env(safe-area-inset-right)); }
    .topbar .menu-toggle { display: inline-flex; }
    body.menu-mo { overflow: hidden; }
    .dropdown-menu { max-width: 92vw; }
}
/* Máy tính bảng dọc (iPad, Samsung Tab) */
@media (max-width: 1024px) {
    .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
}
/* Máy tính bảng & laptop nhỏ (iPad/Samsung Tab... 769–1399px, tới ngưỡng xxl): giữ dải điều
   hành + lưới 5 thẻ KPI trên 1 HÀNG (thu nhỏ cho vừa) thay vì vỡ 2 hàng. Mốc 1399 vì khi còn
   sidebar (~284px), layout desktop 1 hàng cần ~1400px bề ngang mới đủ. */
@media (min-width: 769px) and (max-width: 1399px) {
    /* Giữ TẤT CẢ trên 1 HÀNG bằng cách thu nhỏ gauge + cỡ chữ (thay vì vỡ xuống 2 hàng). */
    .exec-band { flex-wrap: nowrap; gap: 8px 14px; padding: 13px 16px; }
    .exec-band .cum-ve-dich { flex: 0 0 auto; gap: 12px; }
    .exec-band .vach { min-height: 34px; }
    .exec-band > .muc { flex: 1 1 0; min-width: 0; }   /* 5 ô chỉ số chia đều, nhãn tự xuống dòng */
    .exec-band .muc .nhan { font-size: .62rem; }
    .exec-band .muc .gt { font-size: 1.2rem; }
    .exec-band .gauge-svg { width: 44px; height: 44px; }
    .exec-band .gauge-tiendo { gap: 6px; }
    .exec-band .gauge-cap .nhan { font-size: .62rem; }
    .exec-band .gauge-cap small { font-size: .58rem; }
    /* Lưới 5 thẻ KPI (trang "Công việc của tôi"...): giữ TRÊN 1 HÀNG, thu nhỏ thẻ cho vừa. */
    .kpi-5 { grid-template-columns: repeat(5, 1fr); gap: 10px; }
    .kpi-5 .kpi-card { padding: 12px 13px; }
    .kpi-5 .kpi-card .so { font-size: 1.5rem; }
    .kpi-5 .kpi-card .nhan { font-size: .72rem; margin-bottom: 4px; }
}
/* Điện thoại (iPhone, Samsung...) */
@media (max-width: 768px) {
    .noi-dung { padding: 14px max(14px, env(safe-area-inset-right)) 22px max(14px, env(safe-area-inset-left)); }
    /* iOS không tự phóng to khi chạm ô nhập (cần font ≥ 16px) */
    .form-control, .form-select, input, select, textarea { font-size: 16px; }
    /* Bảng dữ liệu: cuộn ngang gọn trên 1 hàng (bảng không bọc .table-responsive thì tự cuộn) */
    .card-box-body > table.bang { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .table-responsive table.bang { white-space: nowrap; }
    table.bang th, table.bang td { padding: 8px 9px; font-size: .82rem; }
    .topbar { gap: 8px; padding-left: 10px; }
    .topbar .ten-trang { font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi-card .so { font-size: 1.5rem; }
    .exec-band { gap: 10px 16px; padding: 12px 14px; }
    .exec-band .vach { display: none; }
    .exec-band .muc { min-width: 104px; }
    .exec-band .muc .gt { font-size: 1.2rem; }
    .exec-band .cum-ve-dich { gap: 12px; width: 100%; }
    .exec-band .gauge-svg { width: 52px; height: 52px; }
    .dash-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .dash-tabs .nav-link { padding: 8px 12px; font-size: .9rem; white-space: nowrap; }
    .chip-bar { gap: 6px; }
    .gantt-chart { --gantt-label: 146px; }
    footer { font-size: .8rem; }
}
/* DẢI NHẮC VIỆC — tầng 1, luôn hiện khi còn nợ việc, không có nút tắt.
   Mảnh và nằm ngang để không chiếm chỗ của nội dung chính: nó là lời nhắc, không
   phải nội dung. Trên điện thoại thì xuống dòng cho nút không bị đẩy khuất. */
.dai-nhac {
    display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
    padding: 9px 15px; border-radius: 10px;
    background: var(--rag-do-nen); border-left: 4px solid var(--rag-do);
}
.dai-nhac-nhan { font-weight: 600; color: var(--chu); }
@media (max-width: 640px) {
    .dai-nhac { padding: 10px 12px; }
    .dai-nhac .btn { width: 100%; }
}

/* BẢNG "CƠ QUAN CHỦ TRÌ CHƯA KHỚP" TRÊN ĐIỆN THOẠI — XẾP DỌC, KHÔNG CUỘN NGANG.
   Quy ước chung của hệ thống là bảng hẹp thì cuộn ngang; nhưng bảng này cột cuối là
   NÚT BẤM, đẩy ra ngoài mép màn hình thì người dùng không biết là có nút, coi như
   khối rà soát chỉ để ngắm. Nên dưới 768px mỗi dòng thành một thẻ xếp dọc, mỗi ô có
   nhãn riêng, nút nằm hết chiều ngang cho dễ chạm. */
@media (max-width: 768px) {
    /* .bang-nghen (Bản đồ điểm nghẽn) xếp giống hệt .bang-lech: cột "vì sao" và "ai phải
       gỡ" đều là câu dài, để nguyên dạng bảng trên điện thoại là chữ bị cắt cụt. */
    .bang-lech, .bang-lech tbody, .bang-lech tr, .bang-lech td,
    .bang-nghen, .bang-nghen tbody, .bang-nghen tr, .bang-nghen td { display: block; width: 100%; }
    .bang-lech thead, .bang-nghen thead { display: none; }
    .table-responsive table.bang-nghen { white-space: normal; }
    .table-responsive:has(.bang-nghen) { overflow-x: visible; }
    .bang-nghen tr {
        border: 1px solid var(--vien); border-radius: 10px;
        padding: 10px 12px; margin: 10px; background: #fff;
    }
    .bang-nghen td { border: 0 !important; padding: 3px 0; }
    .bang-nghen td[data-nhan]::before {
        content: attr(data-nhan) ": ";
        color: var(--chu-nhat); font-size: .78rem;
    }
    .bang-nghen .btn { width: 100%; margin-top: 6px; padding: 9px; }
    /* Phải ghi đủ .table-responsive table.bang-lech: quy tắc nowrap chung của bảng
       trong .table-responsive có độ ưu tiên cao hơn, không thì chữ vẫn bị cắt cụt. */
    .table-responsive table.bang-lech { white-space: normal; }
    .table-responsive:has(.bang-lech) { overflow-x: visible; }
    .bang-lech tr {
        border: 1px solid var(--vien); border-radius: 10px;
        padding: 10px 12px; margin: 10px; background: #fff;
    }
    .bang-lech td { border: 0 !important; padding: 3px 0; }
    .bang-lech td[data-nhan]::before {
        content: attr(data-nhan) ": ";
        color: var(--chu-nhat); font-size: .78rem;
    }
    .bang-lech .btn { width: 100%; margin-top: 6px; padding: 9px; }
}
/* Điện thoại nhỏ-vừa: các cặp ô trong hộp thoại (modal) xuống dòng cho dễ nhập */
@media (max-width: 575px) {
    .modal-body .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
}
/* Màn hình rất nhỏ (≤ 380px: iPhone SE/mini, Galaxy nhỏ) */
@media (max-width: 380px) {
    .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .auth-card { padding: 26px 20px; }
}
/* Thiết bị cảm ứng: vùng chạm đủ lớn (dễ bấm bằng ngón tay) */
@media (pointer: coarse) {
    .sidebar .nav-link { padding-top: 12px; padding-bottom: 12px; }
    .btn-sm, .btn-group-sm > .btn { min-height: 38px; }
    .chip { min-height: 36px; align-items: center; }
    .dropdown-item { padding-top: 9px; padding-bottom: 9px; }
}

footer { color: var(--chu-nhat); }
.text-muted-sm { color: var(--chu-nhat); font-size: .82rem; }
.required:after { content: " *"; color: var(--rag-do); }
.section-anchor { scroll-margin-top: 76px; }

/* ----------------------- Tiếp cận (a11y) -------------------------------- */
/* Viền focus rõ ràng cho điều hướng bàn phím (vàng công vụ, tương phản cao). */
a:focus-visible, .btn:focus-visible, .chip:focus-visible, .btn-copy:focus-visible,
.nav-link:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--vang-cong-sang); outline-offset: 2px; border-radius: 6px;
}
.sidebar .nav-link:focus-visible { outline-offset: -3px; }
.form-control:focus, .form-select:focus { border-color: var(--xanh-tinh); box-shadow: 0 0 0 .2rem rgba(10,61,110,.18); }
/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ===== Sơ đồ Gantt tổng hợp (Dự án — góp ý Chủ tịch mục 3) ===== */
.gantt-chu-giai { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center; font-size: .8rem; color: var(--xanh-tinh-dam); margin-bottom: .65rem; }
.gantt-chu-giai .g-dot { display: inline-block; width: .85rem; height: .85rem; border-radius: .2rem; vertical-align: -1px; margin-right: .25rem; }
.g-dot.g-late { background: var(--rag-do); } .g-dot.g-soon { background: var(--rag-vang); }
.g-dot.g-go { background: var(--xanh-tinh); } .g-dot.g-done { background: var(--rag-xanh); } .g-dot.g-none { background: var(--rag-xam); }

.gantt-chart { --gantt-label: 250px; position: relative; }
.gantt-row { display: flex; align-items: stretch; min-height: 30px; }
.gantt-row + .gantt-row { border-top: 1px dashed #eef1f5; }
.gantt-label { width: var(--gantt-label); flex: 0 0 var(--gantt-label); padding: .26rem .6rem .26rem 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.gantt-label .ma-du-an { font-size: .82rem; line-height: 1.15; }
.gantt-ten { font-size: .73rem; color: #56616f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt-track { position: relative; flex: 1 1 auto; min-width: 0; }

.gantt-gline { position: absolute; top: 0; bottom: 0; width: 1px; background: #eef1f5; }
.gantt-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rag-do); opacity: .5; z-index: 2; }
.gantt-today-nhan { position: absolute; top: 2px; transform: translateX(-50%); font-size: .66rem; color: var(--rag-do); font-weight: 600; white-space: nowrap; }

.gantt-axis { border-bottom: 1px solid var(--vien); min-height: 26px; }
.gantt-axis .gantt-track { height: 24px; }
.gantt-thang { position: absolute; top: 4px; transform: translateX(-50%); font-size: .7rem; color: #6b7682; white-space: nowrap; }

.gantt-bar { position: absolute; top: 50%; transform: translateY(-50%); height: 16px; border-radius: 4px; min-width: 6px; display: flex; align-items: center; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.gantt-bar.g-late { background: var(--rag-do-nen); } .gantt-bar.g-soon { background: var(--rag-vang-nen); }
.gantt-bar.g-go { background: var(--xanh-tinh-nhat); } .gantt-bar.g-done { background: var(--rag-xanh-nen); }
.gantt-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px 0 0 4px; opacity: .9; }
.gantt-bar.g-late .gantt-fill { background: var(--rag-do); } .gantt-bar.g-soon .gantt-fill { background: var(--rag-vang); }
.gantt-bar.g-go .gantt-fill { background: var(--xanh-tinh); } .gantt-bar.g-done .gantt-fill { background: var(--rag-xanh); }
.gantt-bar-nhan { position: relative; z-index: 1; font-size: .64rem; font-weight: 700; color: #1f2a37; padding: 0 .3rem; white-space: nowrap; }

.gantt-cham { position: absolute; top: 50%; transform: translateY(-50%); font-size: .66rem; color: #5a6675; background: var(--rag-xam-nen); border: 1px dashed var(--rag-xam); border-radius: 4px; padding: 0 .35rem; white-space: nowrap; }

.gantt-nhom-tieu-de { font-weight: 600; color: var(--xanh-tinh-dam); font-size: .82rem; padding: .5rem 0 .28rem; margin-top: .3rem; border-bottom: 2px solid var(--xanh-tinh-nhat); }
.gantt-nhom-tieu-de .badge-dem { display: inline-block; background: var(--xanh-tinh-nhat); color: var(--xanh-tinh); border-radius: 10px; font-size: .7rem; padding: 0 .45rem; margin-left: .3rem; }

/* ===== Khối "Tổ tôi phụ trách" trên Trung tâm điều hành (Phó Chủ tịch kiêm tổ trưởng) ===== */
.to-phu-trach { background: #fff; border: 1px solid var(--vien); border-left: 4px solid var(--vang-cong); border-radius: 10px; padding: .7rem .9rem; box-shadow: 0 1px 2px rgba(16,42,67,.05); }
.to-phu-trach .tpt-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .55rem; }
.tpt-tieu-de { font-size: .95rem; color: var(--xanh-tinh-dam); }
.tpt-tieu-de i { color: var(--vang-cong); }
.tpt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .4rem; }
.tpt-o { background: var(--xanh-tinh-nhat); border-radius: 8px; padding: .4rem .55rem; display: flex; flex-direction: column; }
.tpt-o .lbl { font-size: .7rem; color: #5a6675; }
.tpt-o .num { font-size: 1.3rem; font-weight: 700; color: var(--xanh-tinh-dam); line-height: 1.15; }
.tpt-o .num.rag-do { color: var(--rag-do) !important; } .tpt-o .num.rag-xanh { color: var(--rag-xanh) !important; } .tpt-o .num.rag-vang { color: var(--rag-vang) !important; }
.tpt-canh-bao { margin-top: .5rem; font-size: .8rem; color: var(--rag-do); font-weight: 500; }
.tpt-canh-bao i { margin-right: .2rem; }

/* ==========================================================================
   MODULE THEO DÕI 6 RÕ — LƯỚI THEO DÕI THEO NGÀY (mục 5A.2)
   Hàng = nhiệm vụ, cột = ngày làm việc. Màu KHÔNG phải phương tiện truyền đạt
   duy nhất: mỗi ô có tooltip mô tả trạng thái bằng chữ, kèm chú giải cố định.
   ========================================================================== */
.luoi-bao { overflow: auto; max-height: 68vh; }
.luoi-td { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .82rem; }
.luoi-td thead th { position: sticky; top: 0; z-index: 3; background: var(--xanh-tinh-nhat);
    border-bottom: 2px solid var(--vien); padding: 5px 3px; text-align: center; font-weight: 600;
    color: var(--xanh-tinh-dam); white-space: nowrap; }
.luoi-td .luoi-cot-nv { position: sticky; left: 0; z-index: 2; background: #fff; min-width: 300px;
    max-width: 340px; border-right: 2px solid var(--vien); padding: 7px 10px; text-align: left; }
.luoi-td thead .luoi-cot-nv { z-index: 4; background: var(--xanh-tinh-nhat); }
.luoi-cot-ngay { width: 34px; min-width: 34px; }
.luoi-cot-ngay.hom-nay { background: var(--vang-cong-sang); color: #3d2c00; }
.luoi-ngay-so { font-size: .68rem; font-weight: 400; opacity: .8; }
.luoi-td tbody tr:nth-child(even) .luoi-cot-nv { background: #fbfcfe; }
.luoi-td tbody tr:hover .luoi-cot-nv { background: var(--xanh-tinh-nhat); }
.luoi-o { text-align: center; padding: 3px 2px; border-bottom: 1px solid #f0f2f6; }
.o-td { display: inline-block; width: 22px; height: 22px; border-radius: 4px; border: 1px solid rgba(0,0,0,.08);
    cursor: help; position: relative; }
.o-da-ghi   { background: var(--rag-xanh); }
.o-khong-ps { background: var(--rag-xam-nen); border-color: var(--rag-xam); }
.o-trong    { background: var(--rag-do); }
.o-ghi-bu   { background: var(--rag-vang); }
.o-chua-toi { background: #f4f6f9; border-style: dashed; }
/* Ô có vướng mắc: thêm dấu chấm trắng — phân biệt được cả khi in đen trắng */
.o-td[data-vm="1"]::after { content: ""; position: absolute; inset: 0; margin: auto;
    width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.luoi-chu-giai { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .76rem; color: var(--chu-nhat); }
.luoi-chu-giai .o-mau { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    vertical-align: -1px; margin-right: 4px; border: 1px solid rgba(0,0,0,.1); }
.luoi-chu-giai .o-da-ghi { background: var(--rag-xanh); }
.luoi-chu-giai .o-khong-ps { background: var(--rag-xam-nen); border-color: var(--rag-xam); }
.luoi-chu-giai .o-trong { background: var(--rag-do); }
.luoi-chu-giai .o-ghi-bu { background: var(--rag-vang); }
.luoi-chu-giai .o-chua-toi { background: #f4f6f9; border-style: dashed; }

/* ===== Bản đồ nhiệt tải theo tuần =====
   Ô LUÔN in ra con số, màu chỉ là kênh thứ hai (độ dồn). Chỉ tô màu mà không in số thì
   không đọc được khi in đen trắng và người mù màu mất hẳn thông tin. */
.nhiet-td { border-collapse: separate; border-spacing: 0; }
.nhiet-td th, .nhiet-td td { border-bottom: 1px solid var(--vien); }
.nhiet-cot-dv { position: sticky; left: 0; z-index: 3; background: #fff; min-width: 210px;
    max-width: 300px; border-right: 2px solid var(--vien); padding: 6px 10px; text-align: left; }
.nhiet-td thead .nhiet-cot-dv { z-index: 4; background: var(--xanh-tinh-nhat); }
.nhiet-td tbody tr:hover .nhiet-cot-dv { background: var(--xanh-tinh-nhat); }
/* nowrap ở mọi ô: cột chỉ rộng 66px nên "10/08" và "×2.3" bị ngắt giữa con số,
   đọc thành "10/0 8" — sai hẳn nghĩa. Ngày và bội số phải luôn nằm trọn một dòng. */
.nhiet-o { text-align: center; padding: 0; width: 66px; min-width: 66px; white-space: nowrap; }
.nhiet-o a, .nhiet-o span { display: block; padding: 7px 2px; font-weight: 700; font-size: .9rem;
    text-decoration: none; color: var(--chu); line-height: 1.15; white-space: nowrap; }
.nhiet-o a:hover { outline: 2px solid var(--xanh-tinh); outline-offset: -2px; }
.nhiet-td thead .nhiet-o { white-space: normal; font-size: .72rem; line-height: 1.2; }
.nhiet-don { display: block; font-size: .64rem; font-weight: 600; opacity: .75; white-space: nowrap; }
.n-trong { background: #fbfcfe; color: var(--chu-nhat); }
.n-nhat  { background: var(--rag-xanh-nen); }
.n-xanh  { background: #bfe4cf; }
.n-vang  { background: var(--rag-vang-nen); }
.n-cam   { background: var(--rag-cam-nen); }
.n-do    { background: var(--rag-do); color: #fff; }
.n-do a, .n-do span { color: #fff; }
/* Rê chuột qua hàng KHÔNG được xoá màu ô nhiệt: quy tắc hover chung của table.bang
   (tr:hover td → nền trắng xanh) mạnh hơn .n-do một bậc, ô đỏ chữ trắng bị đè thành
   nền trắng chữ trắng — con số biến mất đúng lúc người dùng đang chỉ chuột vào nó. */
table.bang tbody tr:hover td.n-trong { background: #fbfcfe; }
table.bang tbody tr:hover td.n-nhat  { background: var(--rag-xanh-nen); }
table.bang tbody tr:hover td.n-xanh  { background: #bfe4cf; }
table.bang tbody tr:hover td.n-vang  { background: var(--rag-vang-nen); }
table.bang tbody tr:hover td.n-cam   { background: var(--rag-cam-nen); }
table.bang tbody tr:hover td.n-do    { background: var(--rag-do); }
.nhiet-tuan-nay { border-left: 3px solid var(--vang-cong); }

/* Thanh kiểm tra 6 rõ (QT-02) */
.sau-ro { display: flex; flex-wrap: wrap; gap: 8px; }
.sau-ro .muc { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
    font-size: .82rem; font-weight: 600; border: 1px solid transparent; }
.sau-ro .du    { background: var(--rag-xanh-nen); color: #0e5c38; border-color: #b9e2cd; }
.sau-ro .thieu { background: var(--rag-do-nen);  color: #8f1f24; border-color: #efc2c4; }
.sau-ro-thanh { height: 8px; border-radius: 999px; background: var(--rag-do-nen); overflow: hidden; }
.sau-ro-thanh > i { display: block; height: 100%; background: var(--rag-xanh); transition: width .3s; }

/* --------------------------------------------------------------------------
   THẺ CÂU HỎI — mỗi thẻ trả lời đúng MỘT câu lãnh đạo hỏi mỗi ngày.
   Câu hỏi ở trên, con số lớn ở giữa, câu trả lời bằng chữ ở dưới: đọc lướt
   là nắm, không phải suy luận từ con số.
   -------------------------------------------------------------------------- */
.the-hoi { display: block; height: 100%; text-decoration: none; background: #fff;
    border: 1px solid var(--vien); border-radius: 12px; padding: 14px 16px 12px;
    border-left: 5px solid var(--rag-xam); transition: box-shadow .18s, transform .18s; }
.the-hoi:hover { box-shadow: 0 6px 18px rgba(10,61,110,.13); transform: translateY(-2px); text-decoration: none; }
.the-hoi .hoi { font-size: .86rem; font-weight: 600; color: var(--xanh-tinh-dam); }
.the-hoi .so  { font-size: 2.3rem; font-weight: 700; line-height: 1.1; margin: 2px 0 1px; }
.the-hoi .dap { font-size: .84rem; color: #34404f; }
.the-hoi .phu { font-size: .78rem; color: var(--chu-nhat); margin-top: 6px;
    border-top: 1px dashed var(--vien); padding-top: 6px; }
.the-hoi.the-xanh { border-left-color: var(--rag-xanh); } .the-hoi.the-xanh .so { color: var(--rag-xanh); }
.the-hoi.the-vang { border-left-color: var(--rag-vang); } .the-hoi.the-vang .so { color: var(--rag-vang); }
.the-hoi.the-do   { border-left-color: var(--rag-do);   } .the-hoi.the-do .so   { color: var(--rag-do); }
.the-hoi.the-do   { background: linear-gradient(180deg, #fff 62%, var(--rag-do-nen)); }

/* Dòng thời gian "hôm nay các sở, ngành đang làm gì" */
.dong-tin { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--vien); font-size: .86rem; }
.dong-tin:last-child { border-bottom: 0; }
.dong-tin > div { min-width: 0; }
.cham { flex: none; width: 11px; height: 11px; border-radius: 50%; margin-top: 5px;
    background: var(--rag-xam); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rag-xam); }
.cham.rag-xanh { background: var(--rag-xanh); box-shadow: 0 0 0 1px var(--rag-xanh); }
.cham.rag-vang { background: var(--rag-vang); box-shadow: 0 0 0 1px var(--rag-vang); }
.cham.rag-do   { background: var(--rag-do);   box-shadow: 0 0 0 1px var(--rag-do); }
.cham.rag-xam  { background: var(--rag-xam);  box-shadow: 0 0 0 1px var(--rag-xam); }

/* --------------------------------------------------------------------------
   THẺ NHIỆM VỤ TRONG NGÀY (màn "Việc hôm nay") — mỗi thẻ tự trả lời:
   đang vướng khâu nào, cơ quan nào giữ, thiếu rõ gì, 10 ngày qua có nắm không.
   -------------------------------------------------------------------------- */
.the-viec { background: #fff; border: 1px solid var(--vien); border-left: 5px solid var(--rag-xam);
    border-radius: 11px; padding: 12px 14px; margin-bottom: 11px; }
.the-viec.v-xanh { border-left-color: var(--rag-xanh); }
.the-viec.v-vang { border-left-color: var(--rag-vang); }
.the-viec.v-do   { border-left-color: var(--rag-do); }
.the-viec .tieu { font-weight: 600; color: var(--xanh-tinh-dam); font-size: .95rem; }
.the-viec .meta { font-size: .8rem; color: var(--chu-nhat); display: flex; flex-wrap: wrap; gap: 3px 12px; margin-top: 3px; }
.the-viec .vuong { margin-top: 7px; font-size: .84rem; background: var(--rag-do-nen); color: #8f1f24;
    border-radius: 8px; padding: 6px 10px; }
.the-viec .vuong.v-cho { background: var(--rag-vang-nen); color: #7a4405; }
.the-viec .vuong.v-yen { background: var(--rag-xam-nen); color: #414c5c; }

/* Sáu chấm 6 rõ — thiếu rõ nào nhìn là thấy, có cả tooltip chữ */
.ro-cham { display: inline-flex; gap: 3px; vertical-align: -3px; }
.ro-cham span { min-width: 21px; height: 17px; border-radius: 4px; padding: 0 2px;
    font-size: .62rem; line-height: 16px; text-align: center; font-weight: 700; cursor: help;
    background: var(--rag-do-nen); color: #a3272d; border: 1px solid #eec3c5; }
.ro-cham span.du   { background: var(--rag-xanh-nen); color: #0e5c38; border-color: #b9e2cd; }
.ro-cham span.chua { background: #f4f6f9; color: #8a94a2; border-color: var(--vien); }

/* Dải 10 ngày làm việc gần nhất, gắn ngay trong thẻ nhiệm vụ */
.dai-ngay { display: inline-flex; gap: 2px; vertical-align: -3px; }
.dai-ngay i { display: block; width: 13px; height: 17px; border-radius: 3px; cursor: help;
    background: #f4f6f9; border: 1px solid var(--vien); }
.dai-ngay i.d-da-ghi { background: var(--rag-xanh); border-color: var(--rag-xanh); }
.dai-ngay i.d-ghi-bu { background: var(--rag-vang); border-color: var(--rag-vang); }
.dai-ngay i.d-khong-ps { background: var(--rag-xam-nen); border-color: var(--rag-xam); }
.dai-ngay i.d-trong { background: var(--rag-do); border-color: var(--rag-do); }
.dai-ngay i.d-nay { outline: 2px solid var(--xanh-tinh); outline-offset: 1px; }

/* --------------------------------------------------------------------------
   CHUỖI BƯỚC THỰC HIỆN — trả lời "đi đến đâu rồi, đang tắc ở khâu nào".
   Trạng thái không chỉ dựa vào màu: có số thứ tự, dấu ✓, và viền đậm cho
   khâu đang giữ việc, nên vẫn đọc được khi in đen trắng.
   -------------------------------------------------------------------------- */
.chuoi-buoc { display: flex; flex-wrap: wrap; gap: 6px; }
.nut-buoc { flex: 1 1 190px; min-width: 175px; max-width: 300px; position: relative;
    border: 1px solid var(--vien); border-top: 4px solid var(--rag-xam); border-radius: 9px;
    padding: 8px 10px 9px; background: #fff; }
.nut-buoc .so { display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%; font-size: .72rem; font-weight: 700;
    background: var(--rag-xam-nen); color: #414c5c; margin-bottom: 4px; }
.nut-buoc .ten { display: block; font-size: .84rem; font-weight: 600; color: var(--xanh-tinh-dam); line-height: 1.3; }
.nut-buoc .phu { display: block; font-size: .74rem; color: var(--chu-nhat); margin-top: 3px; }
.nut-buoc.b-xong  { border-top-color: var(--rag-xanh); background: #fbfefc; }
.nut-buoc.b-xong .so { background: var(--rag-xanh); color: #fff; }
.nut-buoc.b-dang  { border-top-color: var(--xanh-tinh); }
.nut-buoc.b-dang .so { background: var(--xanh-tinh); color: #fff; }
.nut-buoc.b-vuong,
.nut-buoc.b-tre   { border-top-color: var(--rag-do); background: #fffafa; }
.nut-buoc.b-vuong .so,
.nut-buoc.b-tre .so { background: var(--rag-do); color: #fff; }
.nut-buoc.b-hien-tai { box-shadow: 0 0 0 2px var(--xanh-tinh) inset; }
.nut-buoc.b-hien-tai::after { content: "đang ở đây"; position: absolute; top: -9px; right: 8px;
    font-size: .66rem; font-weight: 700; letter-spacing: .02em; background: var(--xanh-tinh);
    color: #fff; border-radius: 999px; padding: 1px 7px; }
.nut-buoc.b-tre.b-hien-tai { box-shadow: 0 0 0 2px var(--rag-do) inset; }
.nut-buoc.b-tre.b-hien-tai::after { content: "đang tắc ở đây"; background: var(--rag-do); }

/* Tiêu đề phân đoạn bên trong một thẻ tab */
.tieu-muc { margin: 1.15rem 0 .5rem; font-size: .92rem; font-weight: 600; color: var(--xanh-tinh-dam); }
.tieu-muc i { opacity: .75; margin-right: .25rem; }

/* --------------------------------------------------------------------------
   DIỄN BIẾN CỦA MỘT NGÀY — hôm đó nhích lên bao nhiêu, đổi trạng thái gì.
   Đây là thứ bảng tính không làm được: mỗi lần cập nhật là đè mất lần trước.
   -------------------------------------------------------------------------- */
.dien-bien { display: flex; flex-wrap: wrap; gap: 6px; }
.dien-bien .muc { font-size: .78rem; padding: 2px 9px; border-radius: 999px;
    background: var(--xanh-tinh-nhat); color: var(--xanh-tinh-dam); border: 1px solid #d3e2f2; }
.dien-bien .muc.len   { background: var(--rag-xanh-nen); color: #0e5c38; border-color: #b9e2cd; }
.dien-bien .muc.xuong { background: var(--rag-do-nen);   color: #8f1f24; border-color: #efc2c4; }

/* Ghi nhanh nhật ký trên danh sách và trên điện thoại */
.ghi-nhanh { display: flex; gap: 6px; }
.ghi-nhanh input { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   DÒNG GHI NHANH — chỗ 160 ô mỗi ngày đi qua, và phần lớn đi qua trên điện thoại.
   Đo ở màn 390px của bản cũ: ô gõ nội dung còn 72px (nhìn được bảy chữ) trong khi
   ô chọn "nắm tin bằng cách nào" chiếm 150px — cái hộp chứa nội dung thật nhỏ bằng
   nửa cái không ai đụng tới. Nay ô nội dung ăn trọn một dòng, các nút xuống dòng dưới.
   -------------------------------------------------------------------------- */
.chip-khau { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-khau .chip-khau-nut { padding: 1px 8px; font-size: .8rem; line-height: 1.5; }
.ghi-nhanh-phu { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 576px) {
    /* Trên điện thoại phải cuộn 1.220px qua băng độ phủ, dải chip mục lục và dòng
       tổng mới tới ô ghi đầu tiên — trong khi ghi mới là việc người ta mở máy ra để
       làm. Thu gọn ba khối đầu trang lại, không bỏ đi (số liệu vẫn phải đọc được). */
    .dai-chi-dao .dai-so { font-size: 1.6rem; }
    .dai-chi-dao .dai-phai { display: none; }
    .muc-luc-dinh { max-height: 4.6rem; overflow-y: auto; }
    /* Trên điện thoại, Ô GHI ĐỨNG NGAY DƯỚI TÊN VIỆC. Phần bối cảnh (đang vướng ở đâu,
       sản phẩm cần ra, lần cập nhật gần nhất) vẫn giữ đủ nhưng đẩy xuống dưới: người ta
       mở máy ra là để GHI, không phải để đọc lại 493px mô tả rồi mới tới ô nhập. */
    .the-viec { display: flex; flex-direction: column; }
    .the-viec > *          { order: 3; }
    .the-viec > div:first-child { order: 1; }
    .the-viec > .ghi-nhanh-khoi { order: 2; margin-top: .5rem; }
    .ghi-nhanh { flex-direction: column; align-items: stretch; }
    .ghi-nhanh input { width: 100%; }
    .ghi-nhanh .btn { width: 100%; }
    .ghi-nhanh-phu .btn { flex: 1 1 auto; }
    /* Chip theo khâu cuộn ngang thay vì xuống sáu dòng chiếm hết màn hình. */
    .chip-khau { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
    .chip-khau .chip-khau-nut { white-space: nowrap; }
}
@media (max-width: 768px) {
    .luoi-td .luoi-cot-nv { min-width: 180px; max-width: 200px; }
    .ghi-nhanh { flex-wrap: wrap; }
    .kpi-grid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}

/* --------------------------------------------------------------------------
   CON SỐ BẤM ĐƯỢC — mọi con số thống kê phải mở ra đúng danh sách của chính nó.
   Gạch chân chấm để người dùng nhìn là biết bấm vào xem được, không phải dò.
   -------------------------------------------------------------------------- */
.so-bam { font-weight: 600; color: inherit; text-decoration: none;
    border-bottom: 1px dotted currentColor; cursor: pointer; }
.so-bam:hover { color: var(--xanh-tinh-dam); border-bottom-style: solid; }
.the-hoi .so-bam { border-bottom: 0; }
.the-hoi a.so:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Ô LƯỚI BẤM ĐƯỢC + hộp ghi nhanh tại chỗ.
   Lưới theo dõi ngày là nơi duy nhất nhìn ra ô trống của những ngày TRƯỚC cần
   ghi bù, nên phải ghi được ngay tại đây, không bắt rời màn hình.
   -------------------------------------------------------------------------- */
.o-td.o-bam { cursor: pointer; }
.o-td.o-bam:hover { outline: 2px solid var(--xanh-tinh-dam); outline-offset: 1px; }
.o-td.o-bam:focus-visible { outline: 2px solid var(--xanh-tinh-dam); outline-offset: 2px; }
.o-hop { position: fixed; inset: 0; background: rgba(12,26,44,.45); z-index: 1080;
    display: flex; align-items: center; justify-content: center; padding: 16px; }
.o-hop[hidden] { display: none; }
.o-hop-trong { background: #fff; border-radius: 12px; padding: 18px 20px;
    width: min(640px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 18px 48px rgba(10,61,110,.28); }

/* --------------------------------------------------------------------------
   GD-06 — THANH MỤC LỤC DÍNH của màn "Việc hôm nay".
   Màn này có thể dài hơn hai vạn điểm ảnh khi chuyên viên giữ hàng trăm việc.
   Thanh này dính ở đầu vùng cuộn để mọi khối luôn cách một cú bấm, kèm số việc
   nên nhìn là biết khối nào có gì mà không phải cuộn xuống dò.
   -------------------------------------------------------------------------- */
.muc-luc-dinh { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap;
    gap: 6px; align-items: center; background: rgba(255,255,255,.96);
    backdrop-filter: blur(6px); border: 1px solid var(--vien); border-radius: 11px;
    padding: 8px 12px; box-shadow: 0 3px 10px rgba(10,61,110,.07); }
.muc-luc-dinh .ml-chip { display: inline-flex; align-items: center; gap: 5px;
    font-size: .82rem; text-decoration: none; border-radius: 999px;
    padding: 4px 11px; border: 1px solid transparent; white-space: nowrap; }
.muc-luc-dinh .ml-do   { background: var(--rag-do-nen);   color: #8f1f24; border-color: #eec3c5; }
.muc-luc-dinh .ml-vang { background: var(--rag-vang-nen); color: #7a4405; border-color: #f4d6a5; }
.muc-luc-dinh .ml-xam  { background: var(--rag-xam-nen);  color: #414c5c; border-color: var(--vien); }
.muc-luc-dinh .ml-chip:hover { filter: brightness(.95); }

/* Phần dôi ra của một khối dài — cuộn ít đi, nhưng KHÔNG giấu mất việc nào:
   số việc còn lại ghi rõ ngay trên nút bung. */
details.con-lai > summary { cursor: pointer; font-size: .86rem; color: var(--chu-nhat);
    background: var(--rag-xam-nen); border-radius: 8px; padding: 7px 12px; }
details.con-lai > summary:hover { filter: brightness(.97); }
details.con-lai[open] > summary { margin-bottom: 4px; }

/* NHỊP CẬP NHẬT THEO NGÀY LÀM VIỆC — mỗi ô luôn mang MẪU SỐ.
   Ngày chưa mở ô theo dõi in dấu gạch, không bao giờ in 0%: 0% và "chưa mở ô" là hai
   sự thật khác hẳn nhau, gộp lại là biến sự cố vận hành thành lời kết tội đơn vị. */
.nhip-o { min-width: 62px; padding: 6px 8px; border: 1px solid var(--vien); border-radius: 4px;
    text-align: center; line-height: 1.25; background: #fbfcfe; }
.nhip-o .ng { display: block; font-size: .66rem; font-weight: 600; color: var(--chu-nhat);
    letter-spacing: .02em; }
.nhip-o .tl { display: block; font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nhip-o .ms { display: block; font-size: .62rem; color: var(--chu-nhat); font-variant-numeric: tabular-nums; }
.nhip-o.n-xanh  { background: var(--rag-xanh-nen); border-color: #b9e2cd; }
.nhip-o.n-vang  { background: var(--rag-vang-nen); border-color: #ecd9a6; }
.nhip-o.n-do    { background: var(--rag-do-nen);   border-color: #efc2c4; }
.nhip-o.n-do .tl { color: var(--rag-do); }
.nhip-o.n-trong { background: repeating-linear-gradient(45deg, #f4f6f9, #f4f6f9 4px, #eef1f5 4px, #eef1f5 8px);
    border-style: dashed; }
.nhip-o.n-trong .tl { color: var(--chu-nhat); font-weight: 600; }

/* THANH "THIẾU TIÊU CHÍ NÀO" — thanh ngang bấm được, luôn in con số ở cuối.
   Màu chỉ là kênh phụ; chiều dài và con số mới là thông tin, để in đen trắng vẫn đọc được. */
.thanh-ro { display: grid; grid-template-columns: 150px 1fr 52px; align-items: center; gap: 12px;
    padding: 4px 6px; border-radius: 4px; color: var(--chu); }
.thanh-ro:hover { background: var(--xanh-tinh-nhat); }
.thanh-ro:focus-visible { outline: 2px solid var(--xanh-tinh); outline-offset: 1px; }
.thanh-ro .ten { font-size: .88rem; font-weight: 600; }
.thanh-ro .thanh { display: block; height: 16px; background: var(--rag-vang-nen); border-radius: 3px; overflow: hidden; }
.thanh-ro .thanh > i { display: block; height: 100%; background: var(--rag-cam); transition: width .3s; }
.thanh-ro .so { text-align: right; font-weight: 700; font-size: 1.02rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MÀN HÌNH LỚN PHÒNG HỌP (/nv6/man-lon)
   Đọc ở ba mét: cỡ chữ nhỏ nhất 18px, con số chính 64px trở lên. Chỉ áp trong
   .ml nên không đụng tới bất cứ màn làm việc nào.
   ========================================================================== */
body.wallboard { background: #eef2f6; }
.ml { padding: 18px 22px 10px; font-size: 20px; }
.ml-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
    border-bottom: 3px solid var(--xanh-tinh); padding-bottom: 12px; margin-bottom: 14px; }
.ml-ten { font-size: 30px; font-weight: 700; color: var(--xanh-tinh-dam); line-height: 1.2; }
.ml-phu { font-size: 18px; color: var(--chu-nhat); }
.ml-gio { text-align: right; }
.ml-ngay { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-cu { background: var(--rag-do-nen); color: var(--rag-do); border: 2px solid var(--rag-do);
    border-radius: 6px; padding: 8px 14px; font-size: 19px; font-weight: 600; margin-bottom: 14px; }

.ml-so { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
.ml-so .o { background: #fff; border-radius: 8px; padding: 14px 18px; border-left: 10px solid var(--vien); }
.ml-so .o-ten { font-size: 20px; font-weight: 600; color: var(--chu-nhat); }
.ml-so .o-n { font-size: 68px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ml-so .o-chu { font-size: 18px; color: var(--chu-nhat); }
.ml-so .o-do   { border-left-color: var(--rag-do); }   .ml-so .o-do .o-n   { color: var(--rag-do); }
.ml-so .o-cam  { border-left-color: var(--rag-cam); }  .ml-so .o-cam .o-n  { color: var(--rag-cam); }
.ml-so .o-vang { border-left-color: var(--rag-vang); } .ml-so .o-vang .o-n { color: #8a6d0b; }
.ml-so .o-xanh { border-left-color: var(--rag-xanh); } .ml-so .o-xanh .o-n { color: var(--rag-xanh); }

.ml-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ml-khoi { background: #fff; border-radius: 8px; padding: 14px 18px; }
.ml-khoi h2 { font-size: 21px; font-weight: 700; margin: 0 0 10px; color: var(--xanh-tinh-dam);
    border-bottom: 2px solid var(--vien); padding-bottom: 6px; }
.ml-rong { grid-column: span 2; }
.ml-trong { font-size: 19px; color: var(--chu-nhat); }
.ml-bang { width: 100%; border-collapse: collapse; font-size: 20px; }
.ml-bang td { padding: 6px 4px; border-bottom: 1px solid var(--vien); }
.ml-bang tr:last-child td { border-bottom: none; }
.ml-bang .t { font-weight: 600; }
/* Cột số của màn hình lớn chứa cả CHỮ ("thiếu 12") chứ không chỉ con số, nên phải đủ
   rộng — chữ bị ngắt làm hai dòng ở ba mét là đọc thành hai thông tin rời. */
.ml-bang .n { text-align: right; font-weight: 800; font-size: 26px; width: 132px;
    white-space: nowrap; font-variant-numeric: tabular-nums; }
.ml-bang .p { font-size: 17px; color: var(--chu-nhat); padding-left: 10px; width: 140px; }
.ml-thanh { display: block; height: 12px; background: var(--rag-vang-nen); border-radius: 3px; overflow: hidden; }
.ml-thanh > i { display: block; height: 100%; background: var(--rag-cam); }

.ml-dudia .dd-so { font-size: 66px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ml-dudia .dd-so span { font-size: 21px; font-weight: 600; color: var(--chu-nhat); }
.ml-dudia .dd-chu { font-size: 19px; color: #34404f; margin-top: 6px; }

.ml-nhiet { width: 100%; border-collapse: collapse; font-size: 20px; }
.ml-nhiet th { font-size: 17px; font-weight: 600; color: var(--chu-nhat); padding: 4px;
    text-align: center; white-space: nowrap; }
.ml-nhiet th span { display: block; font-size: 17px; font-weight: 400; }
.ml-nhiet th.t, .ml-nhiet td.t { text-align: left; font-weight: 600; }
.ml-nhiet td { padding: 7px 4px; text-align: center; font-weight: 700; border-top: 1px solid var(--vien);
    font-variant-numeric: tabular-nums; }
.ml-chan { font-size: 17px; color: var(--chu-nhat); text-align: center; padding: 12px 0 4px; }
@media (max-width: 1400px) {
    .ml-so { grid-template-columns: repeat(2, 1fr); }
    .ml-luoi { grid-template-columns: repeat(2, 1fr); }
    .ml-rong { grid-column: span 2; }
}
.ml-khoi h2 .ml-ct { float: right; font-size: 17px; font-weight: 400; color: var(--chu-nhat); }
.ml-bang .ml-mau { color: var(--chu-nhat); }
/* Cột "Còn kịp không?" chứa CHỮ ("thiếu 13", "vừa đủ") chứ không phải số trần, nên rộng
   hơn các ô nhiệt: số âm không nói được nó là thiếu ngày hay thiếu gì. */
.nhiet-o.nhiet-kip { width: 92px; min-width: 92px; }
.nhiet-o.nhiet-kip span { font-size: .86rem; }

/* ================= Tổng quan điều hành (ngày · tuần · tháng) =================
   Một màn gộp ba nhịp thời gian, nên mắt phải biết ngay mình đang đọc nhịp nào.
   Dải phân nhịp làm việc đó: nhãn đặc, số to, kẻ ngang chạy hết chiều rộng. Ba
   nhịp ba màu KHÔNG mang nghĩa RAG (không phải tốt/xấu) — chỉ để phân đoạn, nên
   cố tình dùng xanh công vụ / vàng nhấn chứ không đụng vào bảng màu xanh–đỏ. */
.tq-nhip { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    margin: 4px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--vien); }
.tq-nhan { display: inline-block; background: var(--xanh-tinh); color: #fff;
    font-weight: 700; font-size: .92rem; letter-spacing: .3px; text-transform: uppercase;
    border-radius: 6px; padding: 4px 12px; }
.tq-nhan.tq-tuan  { background: var(--vang-cong); }
.tq-nhan.tq-thang { background: var(--xanh-tinh-dam); }
.tq-ngay { color: var(--chu-nhat); font-size: .9rem; }
.tq-nhip a { text-decoration: none; white-space: nowrap; }
.tq-nhip a:hover { text-decoration: underline; }

/* Thanh "còn thiếu tiêu chí nào": tên — thanh dài ngắn — số. Bấm cả dòng ra danh
   sách, nên phải trông bấm được mà không rối như một cái nút. */
.thanh-ro { display: grid; grid-template-columns: 1fr 96px 34px; align-items: center;
    gap: 10px; color: var(--chu); font-size: .88rem; padding: 2px 0; }
.thanh-ro:hover { color: var(--xanh-tinh); }
.thanh-ro:hover .thanh { background: var(--rag-cam-nen); }
.thanh-ro .ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thanh-ro .thanh { display: block; height: 9px; background: var(--xanh-tinh-nhat);
    border-radius: 3px; overflow: hidden; }
.thanh-ro .thanh > i { display: block; height: 100%; background: var(--rag-cam); }
.thanh-ro .so { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dải "cả tháng đi đâu về đâu": năm phần cộng lại đúng bằng số việc có hạn trong tháng.
   Cố ý vẽ liền một dải chứ không tách năm cột — người xem phải thấy ngay tỷ lệ, không
   phải cộng nhẩm. Chú giải bên dưới bấm được, trừ phần "không đưa vào chấm" (nhóm này
   gom nhiều trạng thái khác nhau nên không có một bộ lọc nào tương ứng). */
.tq-dai { display: flex; height: 16px; border-radius: 4px; overflow: hidden;
    background: var(--vien); }
.tq-dai > i { display: block; height: 100%; }
.tq-chu-giai { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px;
    font-size: .84rem; color: var(--chu-nhat); }
.tq-chu-giai a, .tq-chu-giai span { display: inline-flex; align-items: center; gap: 6px;
    color: inherit; text-decoration: none; }
.tq-chu-giai a:hover { color: var(--xanh-tinh); text-decoration: underline; }
.tq-chu-giai b { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto;
    border: 1px solid rgba(16,32,64,.12); }
.tq-chu-giai strong { color: var(--chu); font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   SỔ GHI HÔM NAY — bảng nhập, nên ô gõ phải rộng chứ không phải cột mô tả.
   -------------------------------------------------------------------------- */
.bang-so-ghi td { vertical-align: top; }
.bang-so-ghi textarea { min-height: 3.4rem; }
@media (max-width: 768px) {
    /* Trên điện thoại bảng ba cột không đọc được — xếp thành từng khối dọc. */
    .bang-so-ghi, .bang-so-ghi tbody, .bang-so-ghi tr, .bang-so-ghi td { display: block; width: 100%; }
    .bang-so-ghi thead { display: none; }
    .bang-so-ghi tr { border: 1px solid var(--vien); border-radius: 8px; margin-bottom: 10px; padding: 8px; }
    .bang-so-ghi td { border: 0; padding: 4px 0; }
}


/* ==========================================================================
   TRUNG TÂM ĐIỀU HÀNH GIẢI NGÂN VỐN ĐẦU TƯ CÔNG (IOC)
   ==========================================================================

   MỘT MÀN NỀN TỐI DUY NHẤT TRONG CẢ HỆ THỐNG, và cố ý như vậy.

   Bảng điều hành vốn không được đọc như mọi màn khác: nó chiếu lên màn lớn giữa phòng
   giao ban, người ngồi cuối bàn cách bốn mét vẫn phải đọc được con số. Nền sáng ở khoảng
   cách ấy bị đèn phòng họp rửa trôi hết tương phản, còn nền tối thì chữ sáng nổi lên.
   Đó là lý do mọi trung tâm điều hành đều tối, không phải vì trông "công nghệ".

   BÓ TRONG .ioc, không đụng biến toàn cục. Khai màu ở đây bằng biến RIÊNG (--ioc-*) chứ
   không ghi đè --nen, --chu của hệ thống: ghi đè biến gốc thì mọi thành phần Bootstrap
   lọt vào trong (thực đơn, hộp thoại, nút) đều đổi màu theo, và một cái nút nào đó sẽ
   thành chữ trắng trên nền trắng ở chỗ không ai ngờ.

   CỠ CHỮ THEO clamp(), không cố định: cùng một màn phải đọc được cả trên điện thoại của
   chuyên viên lẫn trên màn 65 inch của phòng họp.
   -------------------------------------------------------------------------- */
.ioc {
    --ioc-nen:      #0a1020;   /* nền ngoài cùng  */
    --ioc-tam:      #121c30;   /* mặt tấm         */
    --ioc-tam-2:    #18243c;   /* mặt tấm nổi hơn */
    --ioc-vien:     #23324e;
    --ioc-chu:      #e8eefb;
    --ioc-chu-mo:   #93a4c4;
    --ioc-lam:      #38bdf8;   /* số chính, đường chỉ tiêu */
    --ioc-xanh:     #34d399;   /* đạt      */
    --ioc-vang:     #fbbf24;   /* hụt nhẹ  */
    --ioc-do:       #f87171;   /* hụt sâu  */
    --ioc-tim:      #a78bfa;
    background: var(--ioc-nen);
    color: var(--ioc-chu);
    border-radius: 14px;
    padding: 14px;
    margin: -4px 0 0;
    font-variant-numeric: tabular-nums;
}
.ioc a { color: var(--ioc-lam); text-decoration: none; }
.ioc a:hover { color: #7dd3fc; text-decoration: underline; }
.ioc .text-muted-sm, .ioc small { color: var(--ioc-chu-mo) !important; }

/* Tấm — thay cho .card-box của nền sáng. */
.ioc-tam {
    background: var(--ioc-tam); border: 1px solid var(--ioc-vien);
    border-radius: 12px; overflow: hidden; height: 100%;
}
.ioc-tam > .dau {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px; border-bottom: 1px solid var(--ioc-vien);
    background: linear-gradient(180deg, rgba(56,189,248,.10), transparent);
    font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
.ioc-tam > .dau .phu { text-transform: none; font-weight: 400; font-size: .78rem;
    color: var(--ioc-chu-mo); }
.ioc-tam > .than { padding: 12px 14px; }
.ioc-tam > .than.khit { padding: 0; }

/* Băng tiêu đề trên cùng. */
.ioc-bang-ten { display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* PHẢI KHAI MÀU CHỮ CHO HẲN Ở ĐÂY. Nền sáng đặt `h1..h6 { color: var(--xanh-tinh-dam) }`
   — xanh đậm gần như đen. Quy tắc ấy nhắm thẳng vào thẻ h2 nên nó thắng màu chữ mà .ioc
   đặt cho cả khối (màu đó chỉ là thừa kế), và tiêu đề chìm hẳn vào nền tối: đúng dòng
   chữ to nhất màn hình lại là dòng khó đọc nhất. Kèm luôn màu cho mọi cấp tiêu đề nằm
   trong khung, để lần sau thêm h3 h4 không phải đi tìm lại lỗi này. */
.ioc h1, .ioc h2, .ioc h3, .ioc h4, .ioc h5, .ioc h6 { color: var(--ioc-chu); }
.ioc-bang-ten h2 { font-size: clamp(1.05rem, .7rem + 1vw, 1.55rem); font-weight: 700;
    margin: 0; letter-spacing: .01em; color: var(--ioc-chu); }
.ioc-bang-ten .moc-hien { color: var(--ioc-lam); }
.ioc-cham { width: 9px; height: 9px; border-radius: 50%; background: var(--ioc-xanh);
    display: inline-block; margin-right: 7px; box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.ioc select.form-select {
    background: var(--ioc-tam-2); color: var(--ioc-chu); border-color: var(--ioc-vien); }
.ioc select.form-select:focus { border-color: var(--ioc-lam); box-shadow: none; }

/* Ô số lớn. */
.ioc-so { padding: 11px 13px; border-radius: 10px; background: var(--ioc-tam-2);
    border: 1px solid var(--ioc-vien); border-left: 3px solid var(--ioc-lam); height: 100%; }
.ioc-so .nhan { font-size: .74rem; color: var(--ioc-chu-mo); text-transform: uppercase;
    letter-spacing: .04em; margin-bottom: 4px; }
.ioc-so .so { font-size: clamp(1.35rem, .8rem + 1.5vw, 2.3rem); font-weight: 700;
    line-height: 1.05; letter-spacing: -.02em; }
.ioc-so .dvi { font-size: .78rem; color: var(--ioc-chu-mo); margin-top: 3px; }
.ioc-so.xanh { border-left-color: var(--ioc-xanh); } .ioc-so.xanh .so { color: var(--ioc-xanh); }
.ioc-so.vang { border-left-color: var(--ioc-vang); } .ioc-so.vang .so { color: var(--ioc-vang); }
.ioc-so.do   { border-left-color: var(--ioc-do);   } .ioc-so.do   .so { color: var(--ioc-do); }
.ioc-so.lam  { border-left-color: var(--ioc-lam);  } .ioc-so.lam  .so { color: var(--ioc-lam); }
.ioc-so.tim  { border-left-color: var(--ioc-tim);  } .ioc-so.tim  .so { color: var(--ioc-tim); }

/* Ô lát cắt bấm được — bấm ra đúng danh sách sinh ra con số (quy tắc 1 của dự án). */
/* CƠ CẤU VỐN — MỘT THANH CHIA PHẦN, thay cho bảng ba dòng kèm bốn đoạn thuyết minh.
   Đây là màn chiếu phòng họp: người xem đứng xa, nhìn mươi giây. Con số và tỷ trọng nằm
   ngay trên phần của mình, phần nào bấm được sang phần ấy; ai cần chi tiết thì rê chuột. */
.ioc-coc { background: var(--ioc-tam-2); border: 1px solid var(--ioc-vien);
    border-radius: 10px; padding: 10px 13px 12px; }
.ioc-coc .dinh { display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin-bottom: 8px; }
.ioc-coc .dinh .nhan { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase;
    color: var(--ioc-chu-mo); font-weight: 600; }
.ioc-coc .dinh .tong { font-size: 1.1rem; font-weight: 700; color: var(--ioc-chu); }
.ioc-coc .dinh .tong i { font-size: .78rem; font-weight: 400; font-style: normal;
    color: var(--ioc-chu-mo); }
/* THANH MẢNH, BA MẢNG MÀU ĐẶC, KHÔNG CHỮ.
   Bản trước là ba cái hộp có viền có chữ, rộng theo tỷ trọng. Với 70 / 25 / 5 thì hộp
   thứ ba chỉ còn bốn chục điểm ảnh: để chữ thì cắt cụt, bỏ chữ thì còn một cái khung
   rỗng trông như màn hình lỗi. Mảng màu đặc thì bé đến mấy vẫn là một mảng màu thật —
   và con số thì đã có ba cột ngay dưới, cột nào cũng rộng như nhau. */
.ioc-coc .thanh { display: flex; gap: 2px; height: .85rem; margin-bottom: 9px; }
.ioc-coc .doan { display: block; min-width: 3px; border-radius: 3px;
    text-decoration: none; transition: filter .12s, transform .12s; }
.ioc-coc .doan:hover { filter: brightness(1.25); transform: scaleY(1.35);
    text-decoration: none; }
.ioc-coc .doan.tinh  { background: var(--ioc-lam); }
.ioc-coc .doan.ngoai { background: #94a3b8; }
/* Mảng thứ ba: phần biểu chưa xếp vào trong hay ngoài kế hoạch. Hổ phách như ô nguồn
   cùng loại bên dưới — nó không phải một nhóm, nó là một việc còn dở. */
.ioc-coc .doan.mo    { background: var(--ioc-vang); }
/* Tên nhóm vẫn phải có cho trình đọc màn hình, dù mắt thường đọc ở cột số bên dưới. */
.ioc-coc .doan .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }

/* BA CỘT SỐ DƯỚI THANH — mỗi nhóm một cột, cột nào cũng rộng như nhau.
   Đây là chỗ đọc số thật: nhóm giữ 4,9% vốn cũng có đúng chừng ấy chiều ngang như nhóm
   giữ 70,4%, nên không con số nào phải cắt và không ô nào thành khung rỗng. Vạch màu ở
   mép trên nối cột với mảng màu tương ứng trên thanh — mắt bắt màu trước khi đọc chữ. */
.ioc-coc .chugiai { display: grid; gap: 7px;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ioc-coc .chugiai a { display: block; text-decoration: none; padding: 7px 11px 8px;
    border-radius: 8px; background: rgba(148,163,184,.07);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.18);
    border-top: 3px solid transparent; transition: transform .12s, box-shadow .12s; }
.ioc-coc .chugiai a:hover { transform: translateY(-2px); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--ioc-lam); }
.ioc-coc .chugiai .ten { display: block; font-size: .74rem; font-weight: 600;
    color: var(--ioc-chu-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ioc-coc .chugiai .ten i { display: inline-block; width: .55rem; height: .55rem;
    border-radius: 2px; margin-right: 5px; }
.ioc-coc .chugiai .tien { display: flex; align-items: baseline; gap: 5px;
    font-size: 1.32rem; font-weight: 700; color: var(--ioc-chu); line-height: 1.3; }
.ioc-coc .chugiai .tien i { font-size: .74rem; font-weight: 400; font-style: normal;
    color: var(--ioc-chu-mo); }
.ioc-coc .chugiai .tien b { margin-left: auto; font-size: .82rem; font-weight: 600;
    color: var(--ioc-chu-mo); }
.ioc-coc .chugiai .phu { display: block; font-size: .71rem; color: var(--ioc-chu-mo);
    line-height: 1.3; }
.ioc-coc .chugiai .tinh  { border-top-color: var(--ioc-lam); }
.ioc-coc .chugiai .tinh .ten i  { background: var(--ioc-lam); }
.ioc-coc .chugiai .ngoai { border-top-color: #94a3b8; }
.ioc-coc .chugiai .ngoai .ten i { background: #94a3b8; }
.ioc-coc .chugiai .mo    { border-top-color: var(--ioc-vang);
    background: rgba(245,158,11,.10); box-shadow: inset 0 0 0 1px rgba(245,158,11,.34); }
.ioc-coc .chugiai .mo .ten i    { background: var(--ioc-vang); }

/* BẢY Ô NGUỒN TIỀN, ngay dưới thanh hai nhóm của chính khối ấy.
   Ô nguồn trong kế hoạch đầu tư công tô xanh như đoạn "tỉnh giao" phía trên, ô ngoài kế
   hoạch tô xám như đoạn kia — mắt phải nối được ô với đoạn mà không cần đọc chữ. Ô "chưa
   phân loại" tô hổ phách: nó không phải một nguồn, nó là một việc phải làm. */
.ioc-coc .ioc-nguon { display: grid; gap: 6px; margin-top: 8px;
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.ioc-coc .ioc-nguon .o { display: block; text-decoration: none; padding: 8px 10px 7px;
    border-radius: 8px; background: rgba(148,163,184,.07);
    box-shadow: inset 0 0 0 1px rgba(148,163,184,.20);
    transition: transform .12s, box-shadow .12s; }
.ioc-coc .ioc-nguon .o:hover { transform: translateY(-2px); text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--ioc-lam); }
.ioc-coc .ioc-nguon .o .ten { display: block; font-size: .74rem; font-weight: 600;
    color: var(--ioc-chu-mo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ioc-coc .ioc-nguon .o .tien { display: flex; align-items: baseline; gap: 5px;
    font-size: 1.08rem; font-weight: 700; color: var(--ioc-chu); line-height: 1.25; }
.ioc-coc .ioc-nguon .o .tien i { font-size: .72rem; font-weight: 400; font-style: normal;
    color: var(--ioc-chu-mo); }
.ioc-coc .ioc-nguon .o .tien b { margin-left: auto; font-size: .78rem; font-weight: 600;
    color: var(--ioc-chu-mo); }
.ioc-coc .ioc-nguon .o .vach { display: block; height: 4px; border-radius: 2px;
    background: #0d1729; overflow: hidden; margin: 4px 0 3px; }
.ioc-coc .ioc-nguon .o .vach i { display: block; height: 100%; border-radius: 2px; }
/* DÒNG PHỤ ĐƯỢC XUỐNG HÀNG. Cắt bằng dấu ba chấm thì đúng chỗ quan trọng nhất bị mất:
   "giải ngân 44,…" và "biểu chưa tách…" — hai câu mà cả ô này sinh ra để nói. Cho xuống
   hàng và chốt hai dòng: mọi ô cao bằng nhau, không câu nào bị cụt. */
.ioc-coc .ioc-nguon .o .phu { display: block; font-size: .7rem; color: var(--ioc-chu-mo);
    line-height: 1.3; min-height: 2.6em; }
.ioc-coc .ioc-nguon .o .phu em { font-style: normal; color: #94a3b8; }
.ioc-coc .ioc-nguon .o.trong { background: rgba(56,189,248,.10);
    box-shadow: inset 0 0 0 1px rgba(56,189,248,.32); }
.ioc-coc .ioc-nguon .o.trong .vach i { background: var(--ioc-lam); }
.ioc-coc .ioc-nguon .o.ngoai .vach i { background: #94a3b8; }
.ioc-coc .ioc-nguon .o.mo { background: rgba(245,158,11,.12);
    box-shadow: inset 0 0 0 1px rgba(245,158,11,.42); }
.ioc-coc .ioc-nguon .o.mo .vach i { background: var(--ioc-vang); }

/* THẺ SỐ LỚN BẤM ĐƯỢC. Bốn con số to nhất bảng điều hành đều là đường sang danh sách
   sinh ra chúng, nên chúng phải TRÔNG như bấm được: cùng một kiểu nhấc lên khi rê chuột
   như ô lát cắt, và không gạch chân — gạch chân dưới một con số cỡ 2rem đọc thành phân số. */
a.ioc-so { display: block; text-decoration: none; transition: transform .12s, border-color .12s; }
a.ioc-so:hover { transform: translateY(-2px); border-left-color: #7dd3fc; text-decoration: none; }
a.ioc-so:hover .nhan { color: #cbd5e1; }

/* HAI KHỐI CẤP QUẢN LÝ — cấp tỉnh và cấp xã, phường. Rộng hơn ô lát cắt vì mỗi khối
   mang bốn con số chứ không phải một, và đứng ngay dưới hàng thẻ lớn. */
a.ioc-khoi { display: block; text-decoration: none; padding: 12px 14px; border-radius: 10px;
    background: var(--ioc-tam-2); border: 1px solid var(--ioc-vien);
    transition: transform .12s, border-color .12s; }
a.ioc-khoi:hover { transform: translateY(-2px); border-color: var(--ioc-lam); text-decoration: none; }
a.ioc-khoi .ten { font-size: .9rem; font-weight: 700; color: var(--ioc-chu); }
a.ioc-khoi .ray { height: 10px; border-radius: 5px; background: #0d1729; overflow: hidden;
    position: relative; margin: 8px 0 6px; }
a.ioc-khoi .ray i { display: block; height: 100%; border-radius: 5px; }
a.ioc-khoi .ray b { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #f1f5f9;
    border-radius: 2px; }

/* CHẶNG ĐƯỜNG NĂM MỐC — một hàng năm ô, mốc đã qua và mốc sắp tới nhìn thấy cùng lúc. */
.ioc-chang { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
a.ioc-moc { display: block; text-decoration: none; padding: 9px 10px; border-radius: 9px;
    background: var(--ioc-tam-2); border: 1px solid var(--ioc-vien); border-top: 3px solid #334155;
    transition: transform .12s, border-color .12s; }
a.ioc-moc:hover { transform: translateY(-2px); text-decoration: none; }
a.ioc-moc.dat { border-top-color: var(--ioc-xanh); }
a.ioc-moc.hut { border-top-color: var(--ioc-do); }
a.ioc-moc.dang { background: #17233c; box-shadow: inset 0 0 0 1px var(--ioc-lam); }
a.ioc-moc .ngay { font-size: .82rem; font-weight: 700; color: var(--ioc-chu); }
a.ioc-moc .so { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
a.ioc-moc .nhan { font-size: .72rem; color: var(--ioc-chu-mo); }

a.ioc-lat { display: block; text-align: center; padding: 10px 8px; border-radius: 10px;
    background: var(--ioc-tam-2); border: 1px solid var(--ioc-vien); height: 100%;
    color: var(--ioc-chu); transition: transform .12s, border-color .12s; }
a.ioc-lat:hover { transform: translateY(-2px); border-color: var(--ioc-lam);
    text-decoration: none; color: var(--ioc-chu); }
a.ioc-lat .so { font-size: clamp(1.3rem, .9rem + 1vw, 1.9rem); font-weight: 700; line-height: 1.1; }
a.ioc-lat .nhan { font-size: .76rem; color: var(--ioc-chu-mo); margin-top: 2px; }

/* Thanh ngang xếp hạng. */
.ioc-hang { display: grid; grid-template-columns: minmax(0,1fr) 6.5rem; gap: 10px;
    align-items: center; padding: 6px 0; }
.ioc-hang + .ioc-hang { border-top: 1px solid rgba(35,50,78,.6); }
.ioc-hang .ten { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ioc-hang .ray { height: 9px; border-radius: 5px; background: #0d1729; overflow: hidden;
    margin-top: 5px; position: relative; }
.ioc-hang .ray i { display: block; height: 100%; border-radius: 5px; background: var(--ioc-lam); }
/* Vạch chỉ tiêu. Bản đầu để 2px màu #cbd5e1 thì trên nền tối nó mảnh tới mức không
   nhìn ra, mà đây chính là cái thước để đo thanh màu dài hay ngắn. */
.ioc-hang .ray b { position: absolute; top: -4px; bottom: -4px; width: 3px; background: #f1f5f9;
    border-radius: 2px; box-shadow: 0 0 5px rgba(241,245,249,.55); }
.ioc-hang .phai { text-align: right; font-size: .8rem; font-weight: 600; }

/* Bảng trong nền tối. */
.ioc table.bang { color: var(--ioc-chu); margin: 0; }
.ioc table.bang thead th { background: #0d1729; color: var(--ioc-chu-mo);
    border-bottom-color: var(--ioc-vien); text-transform: uppercase; font-size: .7rem;
    letter-spacing: .04em; }
.ioc table.bang td { border-color: rgba(35,50,78,.7); }
/* Rê chuột. Phải nhắm vào TD chứ không phải TR: nền sáng đặt màu ở
   `table.bang tbody tr:hover td`, mà nền của td phủ lên nền của tr — để ở tr thì
   dòng đang rê chuột hóa trắng, chữ sáng trên nền trắng, mất hẳn một dòng. */
.ioc table.bang tbody tr:hover td { background: rgba(56,189,248,.07); }
.ioc .ma-du-an { background: rgba(56,189,248,.14); color: #7dd3fc; }
.ioc .badge-rag.rag-xanh { background: rgba(52,211,153,.16); color: #6ee7b7 !important; }
.ioc .badge-rag.rag-cam, .ioc .badge-rag.rag-vang { background: rgba(251,191,36,.16); color: #fcd34d !important; }
.ioc .badge-rag.rag-do { background: rgba(248,113,113,.16); color: #fca5a5 !important; }
.ioc .badge-rag.rag-xam { background: rgba(148,163,184,.16); color: #cbd5e1 !important; }
.ioc .rag-xanh { color: var(--ioc-xanh) !important; }
.ioc .rag-cam, .ioc .rag-vang { color: var(--ioc-vang) !important; }
.ioc .rag-do { color: var(--ioc-do) !important; }

/* Băng cảnh báo — mỗi mục phải có đường bấm sang chỗ gỡ được nó (quy tắc 2). */
.ioc-canh { display: flex; align-items: center; gap: 9px; padding: 9px 11px;
    border-radius: 10px; background: var(--ioc-tam-2); border: 1px solid var(--ioc-vien);
    border-left: 3px solid var(--ioc-vang); height: 100%; color: var(--ioc-chu); }
a.ioc-canh:hover { border-color: var(--ioc-vang); text-decoration: none; color: var(--ioc-chu); }
.ioc-canh .bi { font-size: 1.3rem; color: var(--ioc-vang); flex: 0 0 auto; }
.ioc-canh .so { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.ioc-canh .nhan { font-size: .76rem; color: var(--ioc-chu-mo); }
.ioc-canh.on { border-left-color: var(--ioc-xanh); }
.ioc-canh.on .bi { color: var(--ioc-xanh); }

/* Biểu đồ SVG — vẽ tay, không nạp thư viện ngoài. */
.ioc-do-thi { width: 100%; height: auto; display: block; }
.ioc-do-thi .luoi { stroke: #1d2a44; stroke-width: 1; }
.ioc-do-thi .nhan { fill: #93a4c4; font-size: 11px; }
.ioc-do-thi .nhan-dam { fill: #e8eefb; font-size: 11px; font-weight: 600; }
.ioc-chu-giai { display: flex; gap: 16px; flex-wrap: wrap; font-size: .78rem;
    color: var(--ioc-chu-mo); }
.ioc-chu-giai i { display: inline-block; width: 14px; height: 3px; border-radius: 2px;
    vertical-align: middle; margin-right: 5px; }

@media (max-width: 575.98px) {
    .ioc { padding: 9px; border-radius: 10px; }
    .ioc-tam > .than { padding: 10px; }
}
/* Chiếu lên màn hình lớn: bỏ hết trang trí thừa, chỉ còn số. */
body.wallboard .ioc { border-radius: 0; margin: 0; padding: 18px; }
body.wallboard .ioc-so .so { font-size: 3rem; }
body.wallboard { background: #0a1020; }