/* Giao diện theo bộ UI KIT "Taske" (ui8.net): nền navy gần đen, dải màu indigo,
   font Barlow. Phối vệt xanh lá thương hiệu Bệnh viện TWQĐ 108. Xem docs/04. */

/* --- Font Barlow, đóng gói cục bộ trong vendor/fonts (không gọi CDN — docs/05) --- */

@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("vendor/fonts/barlow-vietnamese-300-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("vendor/fonts/barlow-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("vendor/fonts/barlow-vietnamese-400-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("vendor/fonts/barlow-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("vendor/fonts/barlow-vietnamese-500-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("vendor/fonts/barlow-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("vendor/fonts/barlow-vietnamese-600-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("vendor/fonts/barlow-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("vendor/fonts/barlow-vietnamese-700-normal.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("vendor/fonts/barlow-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* Thương hiệu Bệnh viện (benhvien108.vn) — dùng làm vệt nhấn */
  --brand: #319243;
  --brand-sang: #4ab961;

  /* Dải màu Taske: navy gần đen → indigo */
  --nen-1: #070a1a;
  --nen-2: #0b1026;
  --panel: rgba(21, 29, 61, 0.72);
  --panel-manh: rgba(32, 43, 84, 0.85);
  --line: rgba(255, 255, 255, 0.09);
  --line-manh: rgba(255, 255, 255, 0.16);
  --bong: 0 16px 44px rgba(0, 0, 0, 0.45);

  --primary: #3b6bff;
  --primary-sang: #7d9bff;
  --primary-mo: rgba(59, 107, 255, 0.14);

  /* Chữ */
  --chu: #eef1fb;
  --xam: #8390b8;

  /* Màu trạng thái — 4 vùng màu tách nhau ≥ 40° góc màu (docs/04) */
  --xanh-la: #3ddc72;    /* Hoàn thành */
  --xanh-duong: #22d3ee; /* Đang thực hiện */
  --tim: #b07cff;        /* Chưa tiến hành */
  --do: #ff4d6d;         /* Chậm deadline */
  --vang: #ffb020;       /* Sắp đến hạn */

  --bo-goc: 16px;
  --nhanh: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 48px;
  min-height: 100vh;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--chu);
  line-height: 1.5;
  background:
    radial-gradient(circle at 12% -5%, rgba(59, 107, 255, 0.30), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(124, 77, 255, 0.20), transparent 40%),
    linear-gradient(180deg, var(--nen-1), var(--nen-2) 45%, #070a1a);
  background-attachment: fixed;
}

/* --- Header --- */

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--bo-goc);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--bong);
  overflow: hidden;
}

/* Vệt màu thương hiệu chạy dọc mép trên header */
.header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-sang) 35%, var(--primary));
}

.header h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #fff;
}

.header-sub {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--brand-sang);
}

.header-phai { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.header-filter { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--xam); }

.nut-in {
  padding: 9px 18px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--primary-sang);
  background: var(--primary-mo);
  border: 1px solid rgba(59, 107, 255, 0.42);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--nhanh), color var(--nhanh);
}

.nut-in:hover { background: var(--primary); color: #fff; }

/* Ngày giờ in — chỉ hiện trên giấy (điền lúc bấm In). */
.dong-in { display: none; }
.chi-khi-in { display: none; }
.dang-lam-moi { color: var(--xam); opacity: 0.75; }

.nut-thu-lai {
  margin-left: 10px;
  padding: 4px 13px;
  font: inherit;
  font-size: 13px;
  color: inherit;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid currentColor;
  border-radius: 999px;
  cursor: pointer;
}

.nut-thu-lai:hover { background: rgba(255, 255, 255, 0.20); }

.header-filter select {
  padding: 9px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--chu);
  background: var(--panel-manh);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

.header-filter select:hover:not(:disabled) {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-mo);
}
.header-filter select:disabled { opacity: 0.5; cursor: default; }
.header-filter select option { background: #10163a; }

/* --- Trang đăng nhập (task 5.2b) --- */

.trang-dang-nhap { display: flex; align-items: center; justify-content: center; padding: 24px; }

.dn-khung {
  width: 100%;
  max-width: 430px;
  padding: 34px 32px 26px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--bong);
}

.dn-dau { text-align: center; margin-bottom: 26px; }
.dn-dau h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: 0.2px; color: #fff; }
.dn-form { display: flex; flex-direction: column; }
.dn-huong-dan { margin: 0 0 20px; font-size: 15px; color: var(--xam); }
.dn-nhan { margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--xam); }

.dn-o {
  margin-bottom: 18px;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  color: var(--chu);
  background: var(--panel-manh);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

.dn-o:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-mo);
}

.dn-nut {
  margin-top: 4px;
  padding: 12px 20px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--nhanh), transform var(--nhanh);
}

.dn-nut:hover:not(:disabled) { background: var(--primary-sang); transform: translateY(-1px); }
.dn-nut:disabled { opacity: 0.6; cursor: default; }

.dn-loi {
  margin-bottom: 16px;
  padding: 11px 14px;
  font-size: 14px;
  color: #ffc2cd;
  background: rgba(255, 77, 109, 0.12);
  border: 1px solid rgba(255, 77, 109, 0.42);
  border-radius: 10px;
}

.dn-chan { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: var(--xam); text-align: center; }

/* Nút đăng xuất trên header trang chính */
.nut-ra {
  padding: 9px 15px;
  font: inherit;
  font-size: 14px;
  color: var(--xam);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: color var(--nhanh), border-color var(--nhanh);
}

.nut-ra:hover { color: var(--chu); border-color: var(--line-manh); }
.ten-dang-nhap { font-size: 14px; color: var(--xam); }

/* --- Tab --- */

.tabs { display: flex; gap: 8px; margin: 18px 0 0; flex-wrap: wrap; }

.tab {
  padding: 11px 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--xam);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: color var(--nhanh), background var(--nhanh), transform var(--nhanh), box-shadow var(--nhanh);
}

.tab:hover { color: var(--chu); background: var(--panel-manh); transform: translateY(-1px); }

.tab.is-active {
  color: #fff;
  font-weight: 600;
  border-color: transparent;
  background: var(--primary);
  box-shadow: 0 10px 26px rgba(59, 107, 255, 0.38);
}

/* --- Dòng trạng thái & cảnh báo --- */

.cap-nhat { margin: 15px 0 0; font-size: 15px; color: var(--xam); }

.canh-bao {
  margin: 12px 0 0;
  padding: 13px 17px;
  font-size: 15px;
  border-radius: 12px;
  color: #ffddab;
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.38);
}

.canh-bao--do {
  color: #ffc2cd;
  background: rgba(255, 77, 109, 0.12);
  border-color: rgba(255, 77, 109, 0.42);
}

.hidden { display: none !important; }

.dang-tai { display: flex; align-items: center; gap: 12px; padding: 48px 0; font-size: 16px; color: var(--xam); }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line-manh);
  border-top-color: var(--primary-sang);
  border-radius: 50%;
  animation: quay 0.8s linear infinite;
}

@keyframes quay { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 3s; }
  * { transition: none !important; }
}

.loi { color: #ffb3c0; font-size: 16px; }
.dang-tai-nho { font-size: 16px; color: var(--xam); padding: 28px 0; }

.trong {
  padding: 34px;
  font-size: 16px;
  color: var(--xam);
  text-align: center;
  background: var(--panel);
  border: 1px dashed var(--line-manh);
  border-radius: var(--bo-goc);
}

.cho-lam {
  padding: 26px;
  font-size: 16px;
  color: var(--xam);
  background: var(--panel);
  border: 1px dashed var(--line-manh);
  border-radius: var(--bo-goc);
}

/* --- Panel & tab content --- */

.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: hien-len 260ms ease both; }

/* Tiêu đề mục + gạch ngang kéo hết chiều rộng */
.muc {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--primary-sang);
}

.muc::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(125, 155, 255, 0.45), rgba(255, 255, 255, 0.04));
}

@keyframes hien-len {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* --- Thẻ KPI --- */

.kpi { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin: 18px 0 6px; }

.kpi-the {
  position: relative;
  padding: 20px 20px 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--bong);
  overflow: hidden;
  transition: transform var(--nhanh), border-color var(--nhanh), box-shadow var(--nhanh);
}

.kpi-the:hover {
  transform: translateY(-3px);
  border-color: var(--line-manh);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.55);
}

/* Vệt sáng góc trên trái, đổi màu theo loại thẻ */
.kpi-the::after {
  content: "";
  position: absolute;
  top: -50px; left: -50px;
  width: 130px; height: 130px;
  border-radius: 50%;
  opacity: 0.18;
  background: currentColor;
  pointer-events: none;
}

/* Nhãn TRÊN — số to ở giữa — ghi chú dưới, ngăn bằng đường kẻ */
.kpi-nhan {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--xam);
  min-height: 36px;
}

.kpi-so {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.kpi-phu {
  margin-top: 13px;
  padding-top: 10px;
  font-size: 13.5px;
  color: var(--xam);
  border-top: 1px solid var(--line);
}

.kpi-the--tong { color: var(--primary-sang); }
.kpi-the--tong .kpi-so { color: #fff; }
.kpi-the--hoan-thanh { color: var(--xanh-la); }
.kpi-the--hoan-thanh .kpi-so { color: var(--xanh-la); }
.kpi-the--dang-thuc-hien { color: var(--xanh-duong); }
.kpi-the--dang-thuc-hien .kpi-so { color: var(--xanh-duong); }
.kpi-the--chua-tien-hanh { color: var(--tim); }
.kpi-the--chua-tien-hanh .kpi-so { color: var(--tim); }
.kpi-the--cham-deadline { color: var(--do); }
.kpi-the--cham-deadline .kpi-so { color: var(--do); }
.kpi-the--ty-le { color: var(--primary-sang); }
.kpi-the--ty-le .kpi-so { color: var(--primary-sang); }

/* --- Biểu đồ --- */

.bd-hang { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }

.bd-o {
  position: relative;
  margin-top: 16px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--bong);
}

.bd-o h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--chu);
}

.bd-khung { position: relative; height: 270px; }

/* --- Bảng (task 3.1; task 3.2 và 4.1 dùng lại `.bang`) --- */

/* docs/04: màn hình hẹp thì bảng cuộn ngang, không co chữ cho vỡ layout. */
.bang-cuon {
  margin-top: 14px;
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--bong);
}

.bang {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  white-space: nowrap;
}

.bang thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 13px 14px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-align: right;
  color: var(--primary-sang);
  background: var(--panel-manh);
  border-bottom: 1px solid var(--line-manh);
}

.bang thead th:first-child { text-align: left; }
.bang tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.bang tbody tr:last-child td { border-bottom: none; }

/* --- Bảng 1 Tab 2: đơn vị × trạng thái --- */

.dv-hang { cursor: pointer; transition: background var(--nhanh); }
.dv-hang:hover { background: rgba(255, 255, 255, 0.05); }

.dv-hang.is-chon { background: var(--primary-mo); }
.dv-hang.is-chon .dv-ma { color: var(--primary-sang); }

/* Vệt indigo mép trái cho dòng đang chọn — nhận ra ngay cả khi cuộn ngang. */
.dv-hang.is-chon .dv-ten { box-shadow: inset 3px 0 0 var(--primary); }

.dv-ten { text-align: left; white-space: normal; }

.dv-nut {
  display: block;
  padding: 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.dv-nut:focus-visible { outline: 2px solid var(--primary-sang); outline-offset: 3px; border-radius: 6px; }

.dv-hang-so { font-size: 12.5px; color: var(--xam); font-variant-numeric: tabular-nums; }
.dv-ma { font-weight: 600; color: var(--chu); }
.dv-day { display: block; font-size: 13px; color: var(--xam); }

/* --- Thanh công cụ: tìm kiếm + chọn nhanh + mở rộng danh sách --- */

.dv-cong-cu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.dv-tim, .dv-chon {
  padding: 9px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--chu);
  background: var(--panel-manh);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

.dv-tim { min-width: 260px; flex: 1 1 260px; max-width: 380px; }
.dv-chon { max-width: 340px; cursor: pointer; }
.dv-chon option { background: #10163a; }

.dv-tim:focus, .dv-chon:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-mo);
}

.dv-tim::placeholder { color: var(--xam); }
.dv-chon-lb { font-size: 14px; color: var(--xam); }
.dv-dem { font-size: 14px; color: var(--xam); font-variant-numeric: tabular-nums; }

.dv-mo-rong {
  padding: 8px 15px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-sang);
  background: var(--primary-mo);
  border: 1px solid rgba(59, 107, 255, 0.42);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--nhanh), color var(--nhanh);
}

.dv-mo-rong:hover { background: var(--primary); color: #fff; }

.dv-khong-thay td { padding: 26px 14px !important; text-align: center; color: var(--xam); }

.dv-so {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--chu);
}

/* Ô 0 làm mờ để mắt bám vào đơn vị thực sự có việc. */
.dv-so--khong { color: var(--xam); opacity: 0.45; font-weight: 400; }
.dv-so--hoan-thanh { color: var(--xanh-la); }
.dv-so--dang-thuc-hien { color: var(--xanh-duong); }
.dv-so--chua-tien-hanh { color: var(--tim); }
.dv-so--cham-deadline { color: var(--do); font-weight: 600; }

.dv-ty-le { text-align: right; min-width: 110px; }
.dv-ty-le-so { font-variant-numeric: tabular-nums; font-weight: 600; }

.dv-thanh {
  display: block;
  margin-top: 5px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  overflow: hidden;
}

.dv-thanh i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary), var(--xanh-la));
}

.bang tfoot .dv-tong td {
  padding: 13px 14px;
  font-weight: 700;
  color: var(--chu);
  background: var(--panel-manh);
  border-top: 2px solid var(--line-manh);
}

.bang tfoot .dv-tong .dv-ten {
  font-size: 13.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary-sang);
}

.dv-goi-y { margin: 10px 0 0; font-size: 14px; color: var(--xam); }

.dv-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding: 9px 9px 9px 15px;
  width: fit-content;
  font-size: 14px;
  color: var(--chu);
  background: var(--primary-mo);
  border: 1px solid rgba(59, 107, 255, 0.42);
  border-radius: 999px;
}

.dv-bo-loc {
  padding: 5px 13px;
  font: inherit;
  font-size: 13px;
  color: var(--chu);
  background: var(--panel-manh);
  border: 1px solid var(--line-manh);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--nhanh), border-color var(--nhanh);
}

.dv-bo-loc:hover { background: var(--primary); border-color: var(--primary); }

/* --- Bảng 2 Tab 2: nhiệm vụ chi tiết theo tuần (task 3.2) --- */

.ct-tuan {
  margin: 26px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--chu);
}

.ct-tuan-dem { font-weight: 400; color: var(--xam); }

/* Bảng chi tiết có ô văn bản dài → cho xuống dòng, khác bảng pivot toàn số. */
.bang-chi-tiet { white-space: normal; table-layout: fixed; min-width: 900px; }

.bang-chi-tiet th:nth-child(1), .bang-chi-tiet td:nth-child(1) { width: 48px; }
.bang-chi-tiet th:nth-child(2) { width: 30%; }
.bang-chi-tiet th:nth-child(3), .bang-chi-tiet th:nth-child(4) { width: 15%; }
.bang-chi-tiet th:nth-child(5) { width: 116px; }
.bang-chi-tiet th:nth-child(6) { width: 132px; }
.bang-chi-tiet th:nth-child(7) { width: 92px; }
.bang-chi-tiet th:nth-child(8) { width: 84px; }

.bang-chi-tiet thead th { text-align: left; }
.bang-chi-tiet td { vertical-align: top; }

/* docs/04: nội dung nhiệm vụ tối đa 2 dòng, rê chuột xem đầy đủ. */
.ct-kep {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ct-stt { color: var(--xam); font-variant-numeric: tabular-nums; }
.ct-noi-dung { color: var(--chu); }
.ct-don-vi { font-size: 14px; color: var(--xam); }
.ct-mo { color: var(--xam); opacity: 0.5; }

.ct-deadline { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-qua-han { color: var(--do); font-weight: 700; }
.ct-sap-han { color: var(--vang); font-weight: 600; }

.ct-phu { display: block; font-size: 12.5px; color: var(--xam); }
.ct-tre { color: var(--vang); }

.ct-tam {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--xam);
  border-bottom: 1px dotted var(--xam);
  cursor: help;
  text-decoration: none;
}

.ct-pt { min-width: 78px; }
.ct-pt-so { font-size: 14px; font-variant-numeric: tabular-nums; }
.ct-link a { color: var(--primary-sang); text-decoration: none; font-variant-numeric: tabular-nums; }
.ct-link a:hover { text-decoration: underline; }

/* --- Tab 3: bộ lọc năm/tuần + dòng tóm tắt (task 4.1) --- */

.tm-loc {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tm-nhan { font-size: 14px; color: var(--xam); }

.tm-select {
  padding: 9px 14px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--chu);
  background: var(--panel-manh);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--nhanh), box-shadow var(--nhanh);
}

.tm-select:hover:not(:disabled), .tm-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-mo);
}

.tm-select:disabled { opacity: 0.5; cursor: default; }
.tm-select option { background: #10163a; }

.tm-khoang {
  font-size: 15px;
  color: var(--primary-sang);
  font-variant-numeric: tabular-nums;
}

.tm-tom-tat {
  margin: 16px 0 0;
  padding: 13px 18px;
  font-size: 15px;
  color: var(--xam);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
}

.tm-tom-tat strong { color: var(--chu); }

/* Badge trạng thái — dùng chung cho task 3.2 và 4.1 (docs/04). */
.badge {
  display: inline-block;
  padding: 3px 11px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.badge--hoan-thanh { color: var(--xanh-la); background: rgba(61, 220, 114, 0.12); }
.badge--dang-thuc-hien { color: var(--xanh-duong); background: rgba(34, 211, 238, 0.12); }
.badge--chua-tien-hanh { color: var(--tim); background: rgba(176, 124, 255, 0.12); }
.badge--cham-deadline { color: var(--do); background: rgba(255, 77, 109, 0.14); }

/* --- Footer --- */

.footer {
  margin-top: 40px;
  padding-top: 14px;
  font-size: 14px;
  color: var(--xam);
  border-top: 1px solid var(--line);
}

/* --- Màn hình hẹp --- */

@media (max-width: 1000px) { .kpi { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .bd-hang { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
  body { padding: 0 14px 32px; }
  .header h1 { font-size: 19px; }
  .tab { padding: 9px 16px; font-size: 15px; }
  .kpi { grid-template-columns: repeat(2, 1fr); gap: 10px; }  /* docs/04: KPI xuống 2 cột */
  .kpi-so { font-size: 30px; }
  .bang { font-size: 14px; }
  .bang thead th, .bang tbody td { padding: 9px 10px; }
}

/* --- Bản in: lật sang nền sáng, bỏ hiệu ứng (docs/04) --- */

@media print {
  /* Ngang: bảng chi tiết 8 cột và bảng pivot 7 cột không vừa khổ dọc. */
  @page { size: A4 landscape; margin: 10mm; }

  :root {
    --chu: #111827; --xam: #4b5563;
    --panel: #ffffff; --panel-manh: #ffffff; --line: #9ca3af; --line-manh: #9ca3af;
    --bong: none;
    /* Bộ màu trạng thái bản in — đậm hơn để rõ trên giấy trắng, cùng giá trị với
       bảng IN trong bieu-do-tong-quan.js (docs/04). */
    --xanh-la: #15803d; --xanh-duong: #0e7490; --tim: #6d28d9; --do: #b91c1c;
    --vang: #b45309;
    --primary: #1d4ed8; --primary-sang: #1d4ed8;
  }

  /* Mặc định trình duyệt bỏ nền/màu khi in — buộc giữ để badge và vệt màu còn nghĩa. */
  body {
    padding: 0;
    background: #fff !important;
    color: #111827;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .tabs, .header-filter, .footer, .spinner, .dang-tai, .nut-in, .nut-thu-lai,
  .header-phai, .nut-ra, .ten-dang-nhap { display: none !important; }

  /* Ngược lại: 2 thứ CHỈ hiện trên giấy — ngày số liệu và ngày in. Tờ giấy phát
     trong giao ban phải tự nói được nó là số liệu ngày nào, in lúc nào. */
  .chi-khi-in { display: inline !important; }
  .dong-in {
    display: block !important;
    flex: 1 0 100%;   /* .header là flex — không đặt basis thì nó nằm cạnh tiêu đề */
    margin: 6px 0 0;
    font-size: 10pt;
    color: #4b5563 !important;
  }
  .cap-nhat { color: #4b5563 !important; font-size: 10pt; }
  .dang-lam-moi { display: none !important; }

  /* Banner cảnh báo VẪN in: bản giấy phải kèm cảnh báo số liệu cũ, nếu không
     người cầm tờ giấy không biết nó đã lỗi thời. */
  .canh-bao { border: 1px solid #b45309 !important; background: none !important;
    color: #7c2d12 !important; }
  .canh-bao--do { border-color: #b91c1c !important; color: #7f1d1d !important; }

  /* Chỉ in tab đang mở. In cả 3 sẽ ra kèm mấy dòng "chờ làm ở task 3.1/4.1". */
  .tab-panel { display: none !important; }
  .tab-panel.is-active { display: block !important; animation: none; }

  .header, .kpi-the, .bd-o, .trong { background: #fff !important; box-shadow: none !important;
    border: 1px solid #9ca3af !important; backdrop-filter: none !important; }
  .header h1 { color: #111827 !important; }

  /* Số KPI giữ MÀU TRẠNG THÁI (docs/04): màu ở đây là thông tin nghiệp vụ, không phải
     trang trí. Chỉ 2 thẻ trung tính mới về đen/xanh chủ đạo. */
  .kpi-the--tong .kpi-so { color: #111827 !important; }
  .kpi-the--ty-le .kpi-so { color: var(--primary) !important; }

  .kpi-the::after, .header::before { display: none; }
  .kpi-the, .bd-o { break-inside: avoid; }
  .kpi { gap: 8px; }

  /* Bảng: bỏ cuộn ngang (giấy không cuộn được), kẻ ô rõ, lặp tiêu đề mỗi trang. */
  .bang-cuon { overflow: visible !important; border: none !important;
    box-shadow: none !important; backdrop-filter: none !important; background: #fff !important; }
  .bang { font-size: 11pt; white-space: normal; }
  .bang thead { display: table-header-group; }
  .bang tfoot { display: table-footer-group; }
  .bang thead th { position: static; color: #111827 !important;
    background: #e5e7eb !important; border: 1px solid #6b7280 !important; }
  .bang tbody td, .bang tfoot td { border: 1px solid #9ca3af !important; }
  .bang tbody tr { break-inside: avoid; }
  .dv-hang { cursor: auto; }
  .dv-hang.is-chon, .dv-hang.is-chon .dv-ten { background: none !important; box-shadow: none !important; }
  .dv-so--khong { opacity: 1; color: #6b7280 !important; }
  .dv-thanh { background: #e5e7eb !important; }
  .dv-thanh i { background: #1d4ed8 !important; }
  .bang tfoot .dv-tong td { background: #e5e7eb !important; }
  /* Chip lọc, thanh công cụ, gợi ý là thao tác trên màn hình — in ra vô nghĩa.
     Bản in giữ đúng những đơn vị đang hiện trên màn hình. */
  .dv-chip, .dv-goi-y, .dv-tim, .dv-chon, .dv-chon-lb, .dv-mo-rong { display: none !important; }
  .dv-cong-cu { margin: 0; }
  .dv-dem { color: #4b5563 !important; font-size: 10pt; }

  /* Bảng chi tiết: giấy A4 ngang vẫn hẹp → bỏ min-width, in hết nội dung nhiệm vụ. */
  .bang-chi-tiet { min-width: 0 !important; font-size: 9.5pt; }
  .ct-kep { display: block !important; -webkit-line-clamp: none !important; overflow: visible !important; }
  .ct-tuan { break-after: avoid; margin-top: 16pt; }
  .badge { border: 1px solid currentColor !important; background: none !important; }
  .badge--hoan-thanh { color: var(--xanh-la) !important; }
  .badge--dang-thuc-hien { color: var(--xanh-duong) !important; }
  .badge--chua-tien-hanh { color: var(--tim) !important; }
  .badge--cham-deadline { color: var(--do) !important; }
  .ct-qua-han { color: var(--do) !important; }
  .ct-sap-han, .ct-tre { color: #b45309 !important; }
  .ct-link a { color: #111827 !important; text-decoration: none; }
  .ct-mo { opacity: 1; color: #6b7280 !important; }

  /* Tab 3: ô chọn là thao tác màn hình. Tiêu đề mục đã ghi rõ tuần nào nên bản
     giấy vẫn tự nói được nó là tuần mấy. */
  .tm-loc { display: none !important; }
  .tm-tom-tat { background: none !important; border: 1px solid #9ca3af !important;
    border-left: 3px solid #1d4ed8 !important; color: #111827 !important; }
}