/* ============================================================
   thdienlien-v2 — giao diện theo phong cách app THCS Bạch Liêu
   Tông chủ đạo: XANH NAVY DỊU (giảm tông cho nhẹ mắt) + nhũ vàng
   ============================================================ */
:root {
  /* Bảng màu lấy ĐÚNG theo app THCS Bạch Liêu */
  --dam: #14306b;          /* navy — nền hero, header, thẻ đậm */
  --dam-2: #1e4593;        /* navy sáng hơn — gradient */
  --chinh: #2a5cb8;        /* màu nhấn liên kết, nút */
  --vang: #e5b13a;         /* nhũ vàng trên nền tối */
  /* 14/8/2026 — bốn biến dưới đây chỉnh theo Design Tokens của bản bàn giao
     "Điều hành v3 — phương án 1b" (hiệu trưởng đã chốt). Thầy Chung quyết áp
     TOÀN SITE thay vì chỉ module Điều hành, để app giữ được vẻ một khối.
     Chênh lệch rất nhỏ nên ba module kia gần như không đổi hình. */
  --vang-sam: #c8963e;     /* vàng đồng — chữ trên nền sáng (trước #c8901c) */
  --kem: #eef2f8;          /* nền trang (trước #f4f7fc) */
  --the: #ffffff;
  --chu: #1c2b4a;          /* trước #16202f */
  --chu-mo: #5a6b8c;       /* trước #5d6b81 */
  --chu-nhat: #8494b3;     /* chữ mờ nhất — nhãn cột, chú thích phụ */
  --vien: #dde5f0;         /* viền thẻ (trước #e4e9f2) */
  --vien-dam: #cdd8ea;     /* viền ô nhập, khung công tắc */
  --ke: #edf1f8;           /* đường kẻ trong bảng, giữa các dòng */
  --o-con: #f6f8fc;        /* nền ô lồng trong thẻ trắng */
  --sb-phu: #a9bbdf;       /* chữ phụ trên nền navy (sidebar) */
  --sb-mo: #7d92c4;        /* nhãn nhóm trên nền navy */
  --bo-goc: 16px;
  /* Bề ngang khung chung cho ĐẦU TRANG · HERO · THÂN TRANG.
     Ba khối phải cùng một con số thì logo mới thẳng cột với tên trường ở
     hero và với nội dung bên dưới — đây là chỗ bản cũ lệch (đầu trang 1460,
     hero 1180 → logo thò ra ngoài 140px). */
  --rong-khung: 1320px;
  /* Hoa văn chấm mờ trên các mảng navy (đặc trưng Bạch Liêu) */
  --cham-navy: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'UTM Avo', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  overflow-x: hidden;   /* chặn trượt ngang ngoài ý muốn trên điện thoại */
  background: var(--kem); color: var(--chu); font-size: 16px; line-height: 1.6;
}
a { color: var(--chinh); }
img { max-width: 100%; }

/* ═══ CỔNG VÀO — khóa toàn trang cho tới khi đăng nhập ═══
   Khóa bằng CSS ngay từ HTML (body class="dang-khoa"), JS chỉ MỞ khóa.
   Làm ngược lại (JS khóa) thì lỡ JS lỗi hay bị chặn là trang mở toang —
   nguyên tắc: hỏng thì phải hỏng theo hướng ĐÓNG, không hướng mở. */
body.dang-khoa > header.dau-trang,
body.dang-khoa > .bang-xem-thu,
body.dang-khoa > .bang-trang-thai,
body.dang-khoa > .hero,
body.dang-khoa > main,
body.dang-khoa > footer { display: none !important; }

.cong-vao {
  position: fixed; inset: 0; z-index: 9999; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kem);
  background-image: var(--cham-navy);
  background-size: 22px 22px;
}
.cong-vao.an { display: none; }
.cong-hop {
  background: #fff; border: 1px solid var(--vien); border-radius: 20px;
  padding: 34px 30px 26px; width: 100%; max-width: 430px; text-align: center;
  box-shadow: 0 18px 50px rgba(20, 48, 107, .14);
}
.cong-hop .logo {
  width: 64px; height: 64px; border-radius: 16px; object-fit: contain;
  background: var(--dam); padding: 8px; margin: 0 auto 16px; display: block;
}
.cong-hop h1 { font-size: 19px; font-weight: 800; color: var(--dam); line-height: 1.35; }
.cong-hop .loi-moi { font-size: 14px; color: var(--chu-mo); margin: 10px 0 22px; }
.cong-hop .nut-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 11px;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--chu); cursor: pointer;
  background: #fff; border: 1.5px solid var(--vien); border-radius: 12px; padding: 13px 16px;
  transition: border-color .15s, box-shadow .15s;
}
.cong-hop .nut-google:hover { border-color: var(--chinh); box-shadow: 0 4px 14px rgba(42, 92, 184, .14); }
.cong-hop .nut-google svg { width: 20px; height: 20px; flex: 0 0 auto; }
.cong-hop .nut-phu {
  margin-top: 10px; width: 100%; font: inherit; font-size: 14px; font-weight: 700;
  background: #eef1f6; color: var(--chu); border: 0; border-radius: 12px; padding: 11px; cursor: pointer;
}
.cong-hop .chan {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--vien);
  font-size: 12px; color: var(--chu-mo); line-height: 1.65;
}
.cong-hop .hop-loi {
  margin-top: 14px; border-radius: 11px; padding: 11px 13px; font-size: 13.2px;
  line-height: 1.6; text-align: left;
}
.cong-hop .hop-loi.cho  { background: var(--canh-nen); color: var(--canh); border: 1px solid #f1e2b5; }
.cong-hop .hop-loi.khoa { background: var(--thieu-nen); color: var(--thieu); border: 1px solid #f2cccc; }
.cong-hop .dang-cho { font-size: 14px; color: var(--chu-mo); }

/* ═══ Thanh đầu trang ═══ */
header.dau-trang {
  background: var(--dam); color: #fff; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(16, 32, 64, .28);
}
.dau-trang .khung {
  max-width: var(--rong-khung); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Màn hình rộng: menu nằm CÙNG HÀNG với tên trường (như Bạch Liêu).
   Mốc 1360px chứ không phải 1240px: dưới mức đó 5 nút menu không đủ chỗ,
   ép cùng hàng thì menu phải cuộn ngang — thà cho xuống dòng còn hơn.
   Khoảng trống đẩy về TRƯỚC khu tài khoản (margin-left:auto), KHÔNG đẩy ở
   sau tên trường — nhờ vậy menu bám sát tên trường đúng kiểu Bạch Liêu. */
@media (min-width: 1360px) {
  .dau-trang .khung { flex-wrap: nowrap; }
  .ten-khu { flex: 0 0 auto; margin-right: 0; }
  .khu-tai-khoan { margin-left: auto; }
}
/* Bọc menu + khu tài khoản để gộp chúng thành MỘT bảng xổ xuống trên máy hẹp.
   display:contents nghĩa là trên màn rộng cái bọc này coi như không tồn tại —
   nav và khu tài khoản vẫn là con trực tiếp của .khung như trước. */
.khu-dieu-huong { display: contents; }
.nut-menu { display: none; }

/* ── Đầu trang trên điện thoại và máy tính bảng (dưới 1360px) ──
   Trước đây 5 nút menu xuống dòng thành 2–3 hàng, cộng thêm cụm tên người
   dùng, chiếm gần nửa màn hình điện thoại. Nay gói hết vào nút ☰ như bản
   THCS Bạch Liêu: đầu trang chỉ còn một hàng, cao đúng 66px ở mọi bề rộng. */
@media (max-width: 1359px) {
  .dau-trang .khung { position: relative; flex-wrap: nowrap; }
  .ten-khu { margin-right: auto; min-width: 0; }
  .ten-khu .ten { font-size: 15.5px; }
  .nut-menu {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; font-size: 21px; line-height: 1; cursor: pointer;
    color: #fff; background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px;
  }
  .nut-menu:hover { background: rgba(255, 255, 255, .18); }

  .khu-dieu-huong {
    display: none;
    position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; z-index: 200;
    background: var(--dam-2); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px; padding: 10px;
    box-shadow: 0 18px 44px rgba(8, 18, 42, .45);
  }
  .khu-dieu-huong.mo { display: block; }
  .khu-dieu-huong nav.menu {
    flex-direction: column; gap: 6px; overflow: visible; padding: 0; max-width: none;
  }
  .khu-dieu-huong nav.menu button { width: 100%; text-align: left; }
  .khu-dieu-huong .khu-tai-khoan {
    margin: 10px 0 0; padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .khu-dieu-huong .chip-nguoi,
  .khu-dieu-huong .nut-dang-nhap { width: 100%; }
  /* Hộp tài khoản nằm trong bảng thì trải thẳng ra, không xổ đè lên trang */
  .khu-dieu-huong .hop-tai-khoan {
    position: static; margin-top: 8px; min-width: 0; box-shadow: none;
  }
}
.logo-truong {
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  object-fit: contain; padding: 2px; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
.ten-khu { line-height: 1.25; margin-right: auto; }
.ten-khu .ten { font-weight: 800; font-size: 16.5px; }
.ten-khu .dia-chi { font-size: 12.5px; opacity: .75; }
nav.menu { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px; max-width: 100%; }
nav.menu button {
  flex: 0 0 auto; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: #e4ecf5; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 9px 15px; min-height: 42px; white-space: nowrap; transition: all .15s;
}
nav.menu button:hover { background: rgba(255, 255, 255, .16); }
nav.menu button.dang-chon { background: #fff; color: var(--dam); border-color: #fff; }

/* ═══ Băng xem thử ═══ */
.bang-xem-thu {
  background: var(--vang); color: #4a3200; font-size: 13px; font-weight: 700;
  padding: 7px 16px; text-align: center;
}

/* ═══ Ô đổi trường (nhiều trường dùng chung một địa chỉ) ═══
   Hiện ở hai nơi: chân màn đăng nhập và băng xem thử. Tự ẩn khi app mới có
   một trường — js/cauhinh.js trả chuỗi rỗng. */
.chon-truong {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; font-size: 13px; font-weight: 600;
}
.bang-xem-thu .chon-truong { margin-top: 0; }
.chon-truong select {
  font: inherit; font-weight: 600; padding: 3px 8px; border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, .25); background: #fff; color: inherit;
  max-width: 15em;
}

/* ═══ Hero trang chủ ═══ */
/* Nền dải đầu trang. KHÔNG để trơ một màu phẳng: trường chưa gửi ảnh (ảnh nền
   404) thì lớp .anh không vẽ gì, và cả dải thành một mảng xanh trơn trông như
   trang chưa dựng xong. Hoa văn chấm + chuyển sắc chéo làm nó ra dáng có chủ ý.
   Trường đã gửi ảnh thì .anh phủ đè lên, không thấy lớp này. */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background:
    var(--cham-navy) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--dam-2) 0%, var(--dam) 55%, #0f2450 100%);
}
/* Ảnh nền theo TỪNG TRƯỜNG: js/app.js đặt biến --anh-truong lúc chạy
   (datNhanDienTruong).

   🔑 HAI LỚP NỀN chồng lên nhau, lớp ĐẦU nằm TRÊN:
       lớp 1  ảnh thật của trường  (img/<mã>/truong.jpg)
       lớp 2  hình vẽ dùng chung   (img/nen-truong-hoc.svg)
   Trường đã gửi ảnh thì lớp 1 phủ kín, không thấy lớp 2. Trường CHƯA gửi thì
   lớp 1 tải hỏng (404) và lớp 2 lộ ra — trình duyệt tự lo, không cần một dòng
   JS nào. Trước đây chỉ có một lớp nên trường chưa gửi ảnh thì dải đầu trang
   là một mảng xanh trơn, trông như trang chưa dựng xong. */
.hero .anh {
  position: absolute; inset: 0;
  background-image: var(--anh-truong, none), url('img/nen-truong-hoc.svg');
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero .phu {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--dam) 0%, var(--dam) 34%, rgba(20, 48, 107, .88) 48%, rgba(20, 48, 107, .42) 68%, rgba(20, 48, 107, .12) 100%);
}
.hero .khung { position: relative; max-width: var(--rong-khung); margin: 0 auto; padding: 40px 16px 28px; }
.hieu-bai {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #d5e6f7;
  border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; padding: 7px 16px;
  margin-bottom: 18px; background: rgba(255, 255, 255, .06);
}
.hero h1 {
  font-size: clamp(30px, 6vw, 52px); font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1.15; text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}
.hero .khau-hieu { color: var(--vang); font-weight: 700; font-size: clamp(15px, 2.6vw, 20px); margin: 10px 0 26px; }
.su-menh { display: flex; gap: 14px; max-width: 620px; margin-bottom: 20px; }
.su-menh .bi {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.su-menh h4 { color: var(--vang); letter-spacing: .12em; font-size: 13.5px; margin-bottom: 4px; }
.su-menh p { font-size: 15px; color: #ecf3fa; }
/* Dải số liệu — LẤY ĐÚNG THÔNG SỐ CỦA BẠCH LIÊU (.hero-stats trong index.html
   của repo thcsbachlieu). Một tấm nền duy nhất, gradient tắt dần đến TRONG SUỐT
   HOÀN TOÀN ở mép phải; các ô KHÔNG có nền riêng, KHÔNG đường ngăn — cái tôi
   tưởng là đường kẻ thật ra chỉ là khe hở 10px cho lộ ảnh nền. */
.dai-so-lieu {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-top: 24px; border: 0; border-radius: 16px; padding: 14px 19px;
  background: linear-gradient(90deg,
    rgba(10, 26, 60, .97) 0%,
    rgba(19, 45, 99, .9) 45%,
    rgba(38, 74, 145, .78) 75%,
    rgba(44, 84, 160, .6) 88%,
    rgba(50, 92, 170, 0) 100%);
}
/* Dải có 5 ô — số lẻ nên ở 2 hoặc 3 cột sẽ thừa chỗ hàng cuối; cho ô cuối chiếm
   2 cột cho cân. Từ 1100px xếp đủ 5 cột, trả ô cuối về bình thường. */
.dai-so-lieu .o:last-child { grid-column: span 2; }
@media (min-width: 700px)  { .dai-so-lieu { grid-template-columns: repeat(3, 1fr); } }
/* Từ 1100px cả 5 ô nằm trên MỘT hàng — lúc đó bỏ hẳn khe hở và ngăn nhau
   bằng một đường tóc mảnh, đúng kiểu Bạch Liêu: nhìn ra một dải liền tràn
   mờ dần chứ không phải 5 cái thẻ xếp cạnh nhau. Dưới 1100px vẫn giữ khe,
   vì ô xuống hàng thì đường kẻ dọc sẽ đứng sai chỗ. */
@media (min-width: 1100px) {
  .dai-so-lieu { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .dai-so-lieu .o:last-child { grid-column: auto; }
  .dai-so-lieu .o + .o { border-left: 1px solid rgba(255, 255, 255, .14); }
}
/* Ô KHÔNG có nền riêng — nền thuộc về cả dải, nhờ vậy vệt mờ chạy liền mạch */
.dai-so-lieu .o {
  background: none; padding: 6px 4px 6px 18px;
  display: flex; gap: 12px; align-items: center;
}
/* Huy hiệu tròn, nền chuyển sắc xanh sáng — đúng thông số Bạch Liêu */
.dai-so-lieu .bi {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 50%; font-size: 20px;
  background: linear-gradient(150deg, #3b82f6, #1d4ed8); border: 0; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
.dai-so-lieu .so { font-size: 26px; font-weight: 700; color: var(--vang); line-height: 1.05; }
.dai-so-lieu .nhan { font-size: 12.3px; color: #fff; opacity: .85; display: block; }

/* Các tinh chỉnh cho điện thoại đã CHUYỂN XUỐNG CUỐI TỆP — xem mục
   "ĐIỆN THOẠI". Lý do: @media KHÔNG cộng thêm độ đặc hiệu, nên khi khối
   @media đứng ở đây mà .the-khoi / .hs-hero / .hai-cot lại được khai báo
   sau (dòng ~559–604), quy tắc sau thắng và 6/11 dòng tinh chỉnh thành
   code chết. Quy tắc chung: khối @media phải nằm SAU mọi quy tắc nó sửa. */

/* ═══ Khung nội dung ═══ */
main { max-width: var(--rong-khung); margin: 0 auto; padding: 26px 16px 10px; }
.man-hinh { display: none; }
.man-hinh.hien { display: block; animation: hien-ra .25s ease; }
@keyframes hien-ra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.dau-muc { text-align: center; margin: 8px 0 22px; }
.dau-muc .nhan-nho { color: var(--vang-sam); font-weight: 800; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; }
.dau-muc h2 { font-size: clamp(26px, 4.5vw, 38px); font-weight: 800; color: var(--dam); margin: 4px 0 8px; }
.dau-muc p { color: var(--chu-mo); max-width: 640px; margin: 0 auto; font-size: 15px; }

/* ═══ 6 thẻ module trang chủ (theo mẫu Bạch Liêu) ═══ */
.luoi-module { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 26px 0; }
@media (min-width: 700px) { .luoi-module { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .luoi-module { grid-template-columns: repeat(3, 1fr); } }
.the-module {
  position: relative; overflow: hidden; border-radius: 18px; padding: 24px;
  border: 1px solid rgba(120, 130, 160, .16); cursor: pointer;
  box-shadow: 0 3px 14px rgba(20, 48, 107, .07);
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column;
}
.the-module:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20, 48, 107, .15); }
/* Biểu tượng NÉT (SVG) thay cho emoji — emoji mỗi máy vẽ một kiểu, in ra mờ
   và không đổi được màu theo phối màu thẻ. Đây là cách Bạch Liêu làm. */
.ic {
  width: 1em; height: 1em; display: block; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.the-module .bi {
  width: 58px; height: 58px; border-radius: 15px; font-size: 27px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.the-module h3 { font-size: 20px; font-weight: 800; margin-bottom: 10px; }
.chip-hang { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chip {
  font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px;
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(120, 130, 160, .2);
}
.the-module p { font-size: 14px; color: #54606e; flex: 1; position: relative; z-index: 1; }
.the-module .chan-the {
  display: flex; align-items: center; gap: 10px; margin-top: 16px;
  font-weight: 800; font-size: 15px; position: relative; z-index: 1;
}
.the-module .mui-ten {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
/* Hình chìm góc dưới phải: bản vẽ NÉT to, mờ, mang màu của thẻ */
.the-module .hinh-chim {
  position: absolute; right: -16px; bottom: -20px; width: 156px; height: 156px;
  opacity: .12; pointer-events: none; user-select: none;
}
.the-module .hinh-chim .ic { width: 100%; height: 100%; stroke-width: 1; }

/* 6 phối màu — .bi và .hinh-chim mang cùng màu chữ để nét SVG ăn theo thẻ */
.v-lam   { background: linear-gradient(150deg, #ffffff 12%, #e2e6f8 100%); }
.v-lam .bi { background: #d4daf4; }
.v-lam h3, .v-lam .chan-the, .v-lam .chip, .v-lam .bi, .v-lam .hinh-chim { color: #33418f; }
.v-luc   { background: linear-gradient(150deg, #ffffff 12%, #ddefe6 100%); }
.v-luc .bi { background: #cde7da; }
.v-luc h3, .v-luc .chan-the, .v-luc .chip, .v-luc .bi, .v-luc .hinh-chim { color: #1e7a55; }
.v-cam   { background: linear-gradient(150deg, #ffffff 12%, #f9ecd8 100%); }
.v-cam .bi { background: #f3ddbe; }
.v-cam h3, .v-cam .chan-the, .v-cam .bi, .v-cam .hinh-chim { color: #c26a1f; }
.v-cam .chip { color: #a85c1a; }
.v-xanh-la { background: linear-gradient(150deg, #ffffff 12%, #e2f1df 100%); }
.v-xanh-la .bi { background: #d1e8cd; }
.v-xanh-la h3, .v-xanh-la .chan-the, .v-xanh-la .chip, .v-xanh-la .bi, .v-xanh-la .hinh-chim { color: #2e7d32; }
.v-tim   { background: linear-gradient(150deg, #ffffff 12%, #ebe2f9 100%); }
.v-tim .bi { background: #e0d2f5; }
.v-tim h3, .v-tim .chan-the, .v-tim .bi, .v-tim .hinh-chim { color: #7c3aed; }
.v-tim .chip { color: #6d31d4; }
.v-xam   { background: linear-gradient(150deg, #ffffff 12%, #e8eaef 100%); }
.v-xam .bi { background: #dcdfe6; }
.v-xam h3, .v-xam .chan-the, .v-xam .chip, .v-xam .bi, .v-xam .hinh-chim { color: #3f4756; }

/* ═══ Thẻ thống kê (màn Hồ sơ) ═══ */
.luoi-thong-ke { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 18px; }
@media (min-width: 860px) { .luoi-thong-ke { grid-template-columns: repeat(4, 1fr); } }
.o-so {
  background: linear-gradient(135deg, var(--dam), var(--dam-2)); color: #fff;
  border-radius: var(--bo-goc); padding: 18px 18px 16px;
}
.o-so .so { font-size: 30px; font-weight: 800; line-height: 1.1; }
.o-so .so.trang { color: #fff; } .o-so .so.xanh { color: #6ee7b7; }
.o-so .so.vang { color: var(--vang); } .o-so .so.hong { color: #f9a8b4; }
.o-so .nhan { font-size: 13px; color: #c9daec; margin-top: 2px; }
.thanh-tien-do { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .18); margin-top: 12px; overflow: hidden; }
.thanh-tien-do i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #10b981, #6ee7b7); }

/* ═══ Thanh tìm kiếm ═══ */
.hang-tim { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.o-tim-kiem {
  flex: 1 1 280px; min-height: 50px; padding: 12px 18px; font: inherit; font-size: 15px;
  border: 1.5px solid var(--vien); border-radius: 999px; background: var(--the);
}
.o-tim-kiem:focus { outline: 2.5px solid var(--chinh); border-color: var(--chinh); }
.chon-loc {
  min-height: 50px; padding: 10px 16px; font: inherit; font-size: 14.5px; font-weight: 600;
  border: 1.5px solid var(--vien); border-radius: 14px; background: var(--the); cursor: pointer;
}

/* ═══ Thẻ hộp hồ sơ ═══ */
.luoi-hop { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .luoi-hop { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .luoi-hop { grid-template-columns: repeat(3, 1fr); } }
.the-hop {
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc);
  overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column;
}
.the-hop:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(20, 48, 107, .14); }
.the-hop .dau {
  background: linear-gradient(135deg, var(--dam), var(--dam-2)); color: #fff;
  padding: 16px 18px; display: flex; align-items: center; gap: 13px;
}
.the-hop .so-hop {
  width: 44px; height: 44px; flex: 0 0 auto; border: 1.5px solid var(--vang); border-radius: 11px;
  color: var(--vang); font-weight: 800; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
}
.the-hop .dau .phu-tren { font-size: 10.5px; letter-spacing: .2em; color: #b6cbe2; font-weight: 700; }
.the-hop .dau .ten-hop { font-weight: 800; font-size: 15.5px; text-transform: uppercase; line-height: 1.3; }
.the-hop .than { padding: 14px 18px 16px; display: flex; flex-direction: column; flex: 1; }
.the-hop .mo-ta { font-size: 13.5px; color: var(--chu-mo); flex: 1; }
.the-hop .thanh-tien-do { background: #ebedf2; margin-top: 12px; }
.the-hop .chan { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13.5px; }
.the-hop .chan b { color: var(--dam); }
.the-hop .chan .mo-dm { color: var(--chinh); font-weight: 700; }

/* ═══ Chi tiết một hộp ═══ */
.nut-quay-lai {
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--dam); background: var(--the); border: 1.5px solid var(--vien); border-radius: 999px;
  padding: 10px 18px; cursor: pointer; margin-bottom: 16px; min-height: 44px;
}
.bang-ho-so { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden; }
.dong-ho-so { padding: 13px 18px; border-top: 1px solid #eef0f4; display: flex; gap: 12px; align-items: flex-start; }
.dong-ho-so:first-child { border-top: 0; }
.dong-ho-so .ma {
  font-size: 12px; font-weight: 800; color: var(--dam); background: #fdf0d2;
  border-radius: 7px; padding: 3px 8px; white-space: nowrap;
}
.dong-ho-so .ten { font-size: 14.5px; flex: 1; font-weight: 600; }
.dong-ho-so .ten small { color: var(--chu-mo); display: block; font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.cham { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px; }
.cham.co { background: #16a34a; } .cham.dang { background: var(--vang); } .cham.chua { background: #d3d6dd; }

/* ═══ Tiêu chí TT57 ═══ */
.nhom-tc { margin-bottom: 20px; }
.nhom-tc > .dau-nhom {
  background: linear-gradient(135deg, var(--dam), var(--dam-2)); color: #fff;
  border-radius: var(--bo-goc) var(--bo-goc) 0 0; padding: 13px 18px;
  font-weight: 800; font-size: 15px; display: flex; gap: 10px; align-items: center;
}
.nhom-tc > .dau-nhom .so-tc {
  color: var(--vang); border: 1.5px solid var(--vang); border-radius: 9px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.nhom-tc .than-nhom { background: var(--the); border: 1px solid var(--vien); border-top: 0; border-radius: 0 0 var(--bo-goc) var(--bo-goc); }
.dong-tc { display: flex; gap: 12px; align-items: flex-start; padding: 13px 18px; border-top: 1px solid #eef0f4; }
.dong-tc:first-child { border-top: 0; }
.dong-tc .ma-tc { font-weight: 800; color: var(--chinh); min-width: 36px; }
.dong-tc .ten-tc { flex: 1; font-size: 14.5px; font-weight: 600; }
.dong-tc .ten-tc .nhan-mc { display: block; font-weight: 400; font-size: 12.5px; color: var(--chu-mo); margin-top: 2px; }
.nhan-bb {
  font-size: 11px; font-weight: 800; color: #92400e; background: #fdf0d2;
  border-radius: 7px; padding: 3px 9px; white-space: nowrap;
}

/* ═══ Ghi chú pháp lý & chân trang ═══ */
.chu-thich-phap-ly {
  font-size: 13px; color: #46586e; background: #e8eef6; border: 1px solid #d3dfec;
  border-radius: var(--bo-goc); padding: 13px 18px; margin: 20px 0;
}
.the-thong-bao { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc); padding: 20px; }
footer {
  background: var(--dam); color: #c9daec; text-align: center;
  font-size: 13px; padding: 26px 16px; margin-top: 34px;
}
footer .ten { color: #fff; font-weight: 700; font-size: 14.5px; }

/* ═══ Hoa văn chấm mờ trên mọi mảng navy (đặc trưng Bạch Liêu) ═══ */
.o-so,
.the-hop .dau,
.nhom-tc > .dau-nhom {
  background-image: var(--cham-navy), linear-gradient(135deg, var(--dam), var(--dam-2));
  background-size: 14px 14px, auto;
}
/* .dai-so-lieu .o KHÔNG có nền riêng — xem chú thích ở khối .dai-so-lieu:
   cả dải là MỘT tấm nền duy nhất tắt dần sang phải để lộ ảnh trường. Dòng
   gán background-image cho từng ô đã bị gỡ vì nó phá đúng hiệu ứng đó:
   mỗi ô lại có tấm navy đục riêng, che mép phải và biến khe 10px giữa các
   ô thành đường kẻ thật. Muốn giữ hoa văn chấm thì đặt lên CẢ DẢI, không
   đặt lên từng ô. */

/* ═══ Khu tài khoản + đăng nhập (thêm 10/8/2026) ═══ */
.khu-tai-khoan { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.nut-dang-nhap {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: var(--dam); background: var(--vang);
  border: none; border-radius: 999px; padding: 9px 16px; min-height: 42px;
  white-space: nowrap; transition: filter .15s;
}
.nut-dang-nhap:hover { filter: brightness(1.08); }
.khu-tai-khoan { position: relative; }
.chip-nguoi {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 4px 14px 4px 5px; color: #fff; text-align: left;
  transition: background .15s;
}
.chip-nguoi:hover { background: rgba(255, 255, 255, .18); }
.chip-nguoi img, .chip-nguoi .anh-chu {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .15); flex: 0 0 auto;
}
.chip-nguoi .chip-chu { line-height: 1.2; min-width: 0; }
.chip-nguoi b { display: block; font-size: 13px; white-space: nowrap; }
.chip-nguoi small { display: block; font-size: 10.8px; opacity: .75; white-space: nowrap; }

/* Hộp xổ xuống của tài khoản (kiểu Bạch Liêu) */
.hop-tai-khoan {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 300;
  background: #fff; border-radius: 14px; box-shadow: 0 14px 44px rgba(10, 20, 45, .3);
  min-width: 250px; overflow: hidden; display: none; color: var(--chu);
}
.hop-tai-khoan.hien { display: block; }
.hop-tai-khoan .phan-ten { padding: 15px 17px 13px; border-bottom: 1px solid var(--vien); }
.hop-tai-khoan .phan-ten b { font-size: 14.5px; color: var(--dam); }
.hop-tai-khoan .email { font-size: 12.3px; color: var(--chu-mo); margin: 3px 0 9px; word-break: break-all; }
.hop-tai-khoan .the-vai-tro {
  display: inline-block; background: var(--dam); color: #fff; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; padding: 4px 14px;
}
.hop-tai-khoan .muc-menu {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; font-weight: 600;
  background: #fff; border: 0; border-bottom: 1px solid #f0f3f8; padding: 13px 17px; cursor: pointer;
  color: var(--chu);
}
.hop-tai-khoan .muc-menu:last-child { border-bottom: 0; }
.hop-tai-khoan .muc-menu:hover { background: var(--kem); }
.hop-tai-khoan .muc-menu.thoat { color: #c0392b; }

/* Băng trạng thái đăng nhập */
.bang-trang-thai { text-align: center; font-size: 13.5px; padding: 9px 16px; }
.bang-trang-thai.moi  { background: #eaf1fb; color: #1e4593; border-bottom: 1px solid #d4e2f5; }
.bang-trang-thai.cho  { background: #fdf4dc; color: #8a6414; border-bottom: 1px solid #f1e2b5; }
.bang-trang-thai.khoa,
.bang-trang-thai.loi  { background: #fdeaea; color: #a33; border-bottom: 1px solid #f2cccc; }

/* Thẻ danh bạ CBGV-NV */
/* Thẻ CBGV kiểu Bạch Liêu: mũ navy có hoa văn chấm, huy hiệu chữ tắt tràn
   xuống mép mũ, rồi tên · chức vụ · trạng thái · nút mở thư mục Drive.
   Chiều cao rút còn ~60% bản Bạch Liêu (≈160px so với ≈265px): mũ mỏng hơn,
   huy hiệu 40px thay vì 62px, bỏ dòng email — email đã có ở tab Quản trị. */
.luoi-cbgv { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.the-cbgv {
  background: var(--the); border: 1px solid var(--vien); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column; text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.the-cbgv:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20, 48, 107, .13); }
.the-cbgv .mu {
  height: 34px; position: relative;
  background-image: var(--cham-navy), linear-gradient(135deg, var(--dam), var(--dam-2));
  background-size: 14px 14px, auto;
}
.the-cbgv .mu .anh {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: #fff; color: var(--dam); font-size: 14px; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(10, 25, 60, .25);
}
.the-cbgv .than {
  padding: 26px 11px 11px; display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.the-cbgv .than b { font-size: 14px; color: var(--dam); line-height: 1.3; }
.the-cbgv .vt { font-size: 11.8px; color: var(--chu-mo); }
.the-cbgv .tt { font-size: 11.2px; margin-bottom: 9px; }
.the-cbgv .da-vao  { color: #1f7a5e; }
.the-cbgv .chua-vao { color: #6b7688; }
.the-cbgv .nut-hs {
  margin-top: auto; display: block; width: 100%; text-decoration: none;
  font: inherit; font-size: 12.4px; font-weight: 700; padding: 9px 8px;
  border: 0; border-radius: 9px; background: var(--dam); color: #fff;
}
.the-cbgv .nut-hs:hover { background: var(--dam-2); }
.the-cbgv .nut-hs.trong { background: #eef2f8; color: #6b7688; cursor: default; }

.the-cbgv .than b, .the-cbgv .than small { display: block; }
.nut-drive { margin-left: auto; text-decoration: none; font-size: 18px; flex: 0 0 auto; }
.dong-ho-so .nut-drive { margin-left: 0; }

/* Bảng quản trị + sổ nhật ký */
.cuon-ngang { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bang-quan-tri {
  width: 100%; border-collapse: collapse; background: var(--the);
  border: 1px solid var(--vien); border-radius: var(--bo-goc); overflow: hidden;
  font-size: 13.5px; min-width: 640px;
}
.bang-quan-tri th {
  text-align: left; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--chu-mo); background: var(--kem); padding: 10px 12px;
}
.bang-quan-tri td { padding: 10px 12px; border-top: 1px solid var(--vien); vertical-align: middle; }
.bang-quan-tri select {
  font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--vien); border-radius: 8px; background: #fff; max-width: 150px;
}
.bang-quan-tri .dong-cho td { background: #fdf7e3; }
.bang-quan-tri.nho { min-width: 560px; font-size: 12.5px; }
.nut-luu-nd {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--chinh); border: none; border-radius: 8px; padding: 7px 13px;
}
.nut-luu-nd:hover { filter: brightness(1.1); }
/* Nút xóa tài khoản — cố tình để viền rỗng, nhạt hơn nút Lưu để khỏi bấm nhầm */
.nut-xoa-nd {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; margin-left: 6px;
  color: var(--thieu); background: var(--the);
  border: 1.5px solid var(--thieu); border-radius: 8px; padding: 5.5px 11px;
}
.nut-xoa-nd:hover { background: var(--thieu-nen); }
.nut-xoa-nd:disabled { opacity: .5; cursor: default; }

/* ════════════════════════════════════════════════════════════
   MODULE HỒ SƠ kiểu Bạch Liêu (thêm 10/8/2026)
   Lớp phủ chi tiết bộ phận · bảng minh chứng · thẻ bộ phận ·
   gợi ý tìm kiếm · ô sửa hồ sơ · toast
   ════════════════════════════════════════════════════════════ */
:root {
  /* ⚠️ NĂM biến màu dưới đây (--ok, --canh, --thieu và hai nền, --vang-nen)
     BỊ GHI ĐÈ bởi khối :root thứ ba ở cuối tệp (tìm "--navy-fill"). Sửa ở đây
     KHÔNG có tác dụng gì — sửa ở khối kia. Chỉ --bong và --bong-lon là còn
     sống. Giữ nguyên khối này để khỏi vỡ thứ tự cũ, chỉ dán biển báo. */
  --ok: #15803d; --ok-nen: #dcfce7;
  --canh: #b45309; --canh-nen: #fef3c7;
  --thieu: #b91c1c; --thieu-nen: #fee2e2;
  --bong: 0 1px 2px rgba(16, 32, 64, .06), 0 8px 24px rgba(16, 32, 64, .07);
  --bong-lon: 0 12px 40px rgba(16, 32, 64, .2);
  --vang-nen: #fbf3dd;
}

/* ── Thẻ bộ phận (cat) ── */
.cat-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat {
  background: var(--the); border: 1px solid var(--vien); border-radius: 16px; overflow: hidden;
  box-shadow: var(--bong); text-align: left; transition: transform .18s, box-shadow .18s;
  width: 100%; cursor: pointer; font: inherit; padding: 0;
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--bong-lon); }
.cat-top {
  padding: 18px; color: #fff; position: relative; min-height: 96px;
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(135deg, var(--dam-2) 0%, #193a7d 55%, var(--dam) 100%);
}
.cat-top::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--cham-navy); background-size: 15px 15px; opacity: .9;
}
.cat-top > * { position: relative; z-index: 1; }
.cat-top .ic {
  width: 50px; height: 50px; border-radius: 13px; background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(229, 177, 58, .55); color: var(--vang);
  display: grid; place-items: center; font-size: 19px; font-weight: 800; flex: none;
}
.cat-top .tt { flex: 1; min-width: 0; }
.cat-top .no { font-size: 11.5px; font-weight: 700; opacity: .85; letter-spacing: 1.4px; }
.cat-top h3 { font-size: 17px; margin-top: 2px; font-weight: 800; text-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.cat-body { padding: 14px 18px 17px; }
.cat-body p { font-size: 12.6px; color: var(--chu-mo); margin-bottom: 11px; min-height: 38px; line-height: 1.55; }
.cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cat-cnt { font-size: 12.6px; font-weight: 700; color: var(--dam); }
.cat-open { font-size: 13px; font-weight: 700; color: var(--chinh); }
.prog { height: 8px; background: #e8edf5; border-radius: 999px; overflow: hidden; margin-top: 9px; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), #31a97b); border-radius: 999px; transition: width .6s; }

/* ═══ Module Quản lý học sinh (bố cục theo bản THCS Bạch Liêu) ═══ */
.hs-hero {
  background: linear-gradient(135deg, var(--dam), var(--dam-2));
  background-image: var(--cham-navy), linear-gradient(135deg, var(--dam), var(--dam-2));
  background-size: 22px 22px, auto;
  border-radius: var(--bo-goc); color: #fff; text-align: center;
  padding: 30px 20px 26px; margin-bottom: 22px;
}
.hs-hero h2 { font-size: clamp(22px, 3.4vw, 30px); font-weight: 800; }
.hs-hero > p { font-size: 14.5px; color: #cbdcee; margin-top: 8px; }
.hs-pill {
  display: inline-block; margin-top: 18px;
  background: rgba(255, 255, 255, .08); border: 1.5px solid var(--vang);
  color: #fff; border-radius: 999px; padding: 10px 24px; font-size: 14px; font-weight: 700;
}
.hs-pill b { color: var(--vang); }
.hs-nam-boc {
  margin-top: 16px; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 13.5px; color: #cbdcee;
}
.hs-nam-boc select {
  font: inherit; font-size: 14px; font-weight: 700; padding: 9px 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 10px;
  background: #fff; color: var(--dam);
}

.luoi-khoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 720px) { .luoi-khoi { grid-template-columns: repeat(5, 1fr); } }
.the-khoi {
  font: inherit; text-align: center; cursor: pointer; background: var(--the);
  border: 1px solid var(--vien); border-left: 4px solid var(--dam);
  border-radius: 14px; padding: 20px 14px 16px;
  transition: transform .15s, box-shadow .15s;
}
.the-khoi:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20, 48, 107, .15); }
.the-khoi.on { box-shadow: 0 0 0 2px var(--dam), 0 12px 28px rgba(20, 48, 107, .15); }
.the-khoi .huy {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 13px;
  background: linear-gradient(135deg, var(--dam), var(--dam-2)); color: #fff;
  display: grid; place-items: center; font-size: 21px; font-weight: 800;
}
.the-khoi .ten-khoi { font-size: 17px; font-weight: 800; color: var(--chu); }
.the-khoi .ngan {
  border: 0; border-top: 1px solid var(--vien); margin: 13px 0 12px;
}
.the-khoi .hai-cot { display: flex; justify-content: center; gap: 26px; }
.the-khoi .hai-cot .so { font-size: 21px; font-weight: 800; color: var(--dam); line-height: 1.1; }
.the-khoi .hai-cot .nhan {
  font-size: 10.5px; font-weight: 700; color: var(--chu-mo);
  letter-spacing: .1em; text-transform: uppercase; margin-top: 2px;
}
.the-khoi .mo-khoi { font-size: 13px; font-weight: 700; color: var(--chinh); margin-top: 14px; }
.the-khoi[disabled] { cursor: default; opacity: .55; border-left-color: var(--vien); }
.the-khoi[disabled]:hover { transform: none; box-shadow: none; }

.bang-khoi {
  display: flex; align-items: center; gap: 13px; margin: 22px 0 12px;
  background: linear-gradient(135deg, var(--dam), var(--dam-2)); color: #fff;
  border-radius: var(--bo-goc); padding: 14px 18px;
}
.bang-khoi .so {
  width: 44px; height: 44px; flex: none; border: 1.5px solid var(--vang); border-radius: 12px;
  display: grid; place-items: center; font-weight: 800; font-size: 18px; color: var(--vang);
}
.bang-khoi b { font-size: 15.5px; }
.bang-khoi small { display: block; font-size: 12.4px; color: #c9daec; }

.luoi-lop { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 700px)  { .luoi-lop { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1020px) { .luoi-lop { grid-template-columns: repeat(5, 1fr); } }
.the-lop {
  font: inherit; text-align: left; cursor: pointer; background: var(--the);
  border: 1px solid var(--vien); border-radius: 13px; padding: 14px 15px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.the-lop:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(20, 48, 107, .12); border-color: var(--chinh); }
.the-lop .ten-lop { font-size: 17px; font-weight: 800; color: var(--dam); }
.the-lop .si-so { font-size: 12.6px; color: var(--chu-mo); margin-top: 3px; }
.the-lop .gvcn { font-size: 12.4px; color: var(--chu); margin-top: 7px; }
.the-lop .gvcn.trong { color: var(--canh); font-style: italic; }
.the-lop .co-so-nho {
  display: inline-block; margin-top: 7px; font-size: 11.4px; font-weight: 700;
  background: #eef2fb; color: var(--dam); border-radius: 999px; padding: 2px 9px;
}
.hs-trong {
  background: var(--the); border: 1px dashed var(--vien); border-radius: var(--bo-goc);
  padding: 30px 24px; text-align: center; color: var(--chu-mo); font-size: 14px;
}
.hs-trong b { display: block; color: var(--chu); font-size: 15.5px; margin-bottom: 8px; }

/* ── Lớp phủ + tấm chi tiết (sheet) ── */
.overlay {
  position: fixed; inset: 0; background: rgba(10, 20, 42, .66); z-index: 200;
  display: none; padding: 0; overflow-y: auto; backdrop-filter: blur(2px);
}
.overlay.on { display: block; }
.sheet { background: #fbfcfe; max-width: 1080px; margin: 0 auto; min-height: 100vh; box-shadow: var(--bong-lon); }
.sheet-head {
  background: #fff; border-bottom: 1px solid var(--vien); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 10;
}
.sheet-head .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 24px; flex: none; }
.sheet-head .ic.num {
  background: linear-gradient(135deg, var(--dam), var(--dam-2)); color: var(--vang);
  font-size: 19px; font-weight: 800;
}
.sheet-head .tt { flex: 1; min-width: 0; }
.sheet-head h3 { font-size: 20px; color: var(--dam); letter-spacing: .3px; font-weight: 800; }
.sheet-head p { font-size: 12.6px; color: var(--chu-mo); }
.sheet-x {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--vien); background: #fff;
  display: grid; place-items: center; font-size: 19px; color: var(--chu-mo); flex: none; cursor: pointer;
}
.sheet-x:hover { background: #f1f5fb; color: var(--chu); }
.sheet-body { padding: 18px 18px 60px; }
.sheet-sum {
  background: #fff; border: 1px solid var(--vien); border-radius: 13px; padding: 14px 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; box-shadow: var(--bong);
}
.sheet-sum .big { font-size: 16.5px; font-weight: 800; color: var(--dam); }
.sheet-sum .sub-chu { font-size: 12.6px; color: var(--chu-mo); }
.sheet-sum .sp { flex: 1; }
.nut-kiem-tra {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: #fff; background: var(--dam); border: none; border-radius: 10px; padding: 11px 16px;
}
.nut-kiem-tra:hover { background: var(--dam-2); }

/* ── Hộp hồ sơ xổ xuống + bảng minh chứng ── */
.sub { background: #fff; border: 1px solid var(--vien); border-radius: 13px; margin-bottom: 13px; overflow: hidden; box-shadow: var(--bong); }
.sub-head {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  text-align: left; background: #f8fafd; cursor: pointer;
}
.sub-head:hover { background: #f1f5fb; }
.sub-head .fo { font-size: 17px; }
.sub-head b { flex: 1; font-size: 14.5px; color: var(--dam); }
.sub-cnt { font-size: 11.8px; font-weight: 700; color: #fff; background: var(--chinh); padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.sub-word {
  font: inherit; font-size: 12.2px; font-weight: 700; color: #7a5410; background: var(--vang-nen);
  border: 1px solid #f0e0bb; border-radius: 9px; padding: 6px 12px; cursor: pointer;
  white-space: nowrap; transition: .15s; flex: none;
}
.sub-word:hover { background: #f9edd2; border-color: #e0c98a; }
@media (max-width: 640px) {
  .sub-word { font-size: 0; padding: 9px 11px; }
  .sub-word::before { content: "📄"; font-size: 15px; }
}
.sub-arrow { color: var(--chu-mo); font-size: 12px; transition: transform .2s; }
.sub.open .sub-arrow { transform: rotate(90deg); }
.sub-body { display: none; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sub.open .sub-body { display: block; }

.rec-tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
.rec-tbl thead th {
  background: #eef2f9; color: #41536e; font-size: 11.4px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--vien);
}
.rec-tbl thead th .th-phu { font-weight: 400; font-size: 10.6px; opacity: .7; text-transform: none; letter-spacing: 0; }
.rec-tbl tbody td { padding: 12px 14px; border-bottom: 1px dashed #bfd3ec; vertical-align: middle; }
.rec-tbl thead th + th, .rec-tbl tbody td + td { border-left: 1px dashed #bfd3ec; }
.rec-tbl tbody tr:last-child td { border-bottom: none; }
.rec-tbl tbody tr:hover { background: #f8fbff; }
.rec-tbl tr.sang td { background: #fdf7dd; }
.code { font-weight: 700; color: var(--chinh); font-size: 13.4px; white-space: nowrap; }
.code::before { content: "• "; color: var(--vang-sam); }
.ma-cu { display: block; margin-top: 3px; font-size: 10.8px; font-weight: 600; color: #8a94a6; letter-spacing: .02em; }
.ma-cu.ma-moi { color: var(--ok); font-style: italic; }
.rname { color: var(--chu); font-weight: 500; }
.rname .crits { display: block; margin-top: 4px; }
.rname .hop-phu { display: block; font-size: 11.5px; color: var(--chu-mo); margin-top: 2px; }
.tag-crit {
  display: inline-block; background: #eef2ff; color: #3d4fa3; border: 1px solid #d8dffb;
  font-size: 10.8px; padding: 2px 8px; border-radius: 999px; font-weight: 600; margin: 2px 4px 0 0; cursor: pointer;
}
.tag-crit:hover { background: #dfe6ff; }
.owner { color: var(--chu-mo); font-size: 13.4px; white-space: nowrap; }
.st { font-size: 11.6px; font-weight: 700; padding: 4px 11px; border-radius: 999px; white-space: nowrap; display: inline-block; }
.st-co { background: var(--ok-nen); color: var(--ok); }
.st-dang { background: var(--canh-nen); color: var(--canh); }
.st-chua { background: var(--thieu-nen); color: var(--thieu); }
.rec-tbl .drive {
  width: 34px; height: 32px; border-radius: 8px; border: 1px solid #f0e0bb; background: var(--vang-nen);
  display: inline-grid; place-items: center; font-size: 15px; margin-left: 8px; vertical-align: middle;
  text-decoration: none; cursor: pointer;
}
.rec-tbl .drive:hover { background: #f9edd2; }
.rec-tbl .drive.mo { opacity: .4; }
@media (hover: none) { .rec-tbl .drive { width: 44px; height: 44px; font-size: 18px; margin-left: 6px; } }
td.tdst { white-space: nowrap; text-align: right; }

/* ── Nguyên văn tiêu chí (Mức 1/2) ── */
.lv { border: 1px solid var(--vien); border-radius: 11px; padding: 14px 16px; margin-top: 13px; background: #fff; }
.lv p { font-size: 14px; line-height: 1.7; white-space: pre-line; }
.lv-tag {
  font-size: 11.4px; font-weight: 700; padding: 3px 11px; border-radius: 999px;
  background: var(--dam); color: #fff; display: inline-block; margin-bottom: 8px;
}
.lv-tag.m2 { background: var(--vang-sam); }
.ev-list { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.ev { font-size: 12px; background: #eef2f9; border: 1px solid var(--vien); border-radius: 8px; padding: 4px 10px; }

/* ── Ô tìm có gợi ý xổ xuống ── */
.hang-tim { position: relative; }
.o-tim-boc { position: relative; flex: 1; }
.o-tim-boc .o-tim-kiem { width: 100%; }
.tim-xo {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 150;
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  box-shadow: var(--bong-lon); overflow: hidden; display: none;
}
.tim-xo.hien { display: block; }
.tim-xo .muc {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; cursor: pointer;
  width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid #f0f3f8; font: inherit;
}
.tim-xo .muc:last-child { border-bottom: 0; }
.tim-xo .muc:hover { background: #eef4ff; }
.tim-xo .muc .ma { font-weight: 700; color: var(--chinh); font-size: 12.8px; white-space: nowrap; padding-top: 1px; }
.tim-xo .muc .ten { font-size: 13.8px; color: var(--chu); }
.tim-xo .muc .phu { display: block; font-size: 11.8px; color: var(--chu-mo); margin-top: 2px; }
.tim-xo .het { padding: 13px 16px; font-size: 13.5px; color: var(--chu-mo); }
.tim-xo mark { background: #ffe9a8; border-radius: 3px; padding: 0 1px; }

/* ── Toast ── */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(96px);
  background: var(--chu); color: #fff; padding: 13px 22px; border-radius: 11px;
  font-size: 13.8px; font-weight: 600; box-shadow: 0 12px 36px rgba(0, 0, 0, .34);
  z-index: 9999; transition: transform .3s; max-width: 90vw; text-align: center;
}
.toast.on { transform: translateX(-50%) translateY(0); }

/* ── Ô sửa hồ sơ ── */
.hs-lop {
  position: fixed; inset: 0; z-index: 9300; background: rgba(10, 20, 45, .55);
  display: none; align-items: flex-end; justify-content: center;
}
.hs-lop.hien { display: flex; }
@media (min-width: 760px) { .hs-lop { align-items: center; padding: 24px; } }
.hs-hop {
  background: #fff; width: 100%; max-width: 620px; max-height: 92vh; overflow: auto;
  border-radius: 18px 18px 0 0; display: flex; flex-direction: column;
}
@media (min-width: 760px) { .hs-hop { border-radius: 18px; } }
.hs-dau {
  padding: 18px 20px; background: var(--dam); color: #fff; display: flex; align-items: flex-start; gap: 12px;
  position: sticky; top: 0; z-index: 2;
}
.hs-dau .ma { background: var(--vang-sam); border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: 13px; flex: none; }
.hs-dau h3 { margin: 0; font-size: 16px; line-height: 1.4; flex: 1; font-weight: 600; }
.hs-dau button {
  background: rgba(255, 255, 255, .15); border: 0; color: #fff; width: 32px; height: 32px;
  border-radius: 8px; cursor: pointer; font-size: 15px; font-family: inherit; flex: none;
}
.hs-than { padding: 20px; }
.hs-o { margin-bottom: 18px; }
.hs-o label {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--dam);
  margin-bottom: 7px; text-transform: uppercase; letter-spacing: .03em;
}
.hs-o input, .hs-o select, .hs-o textarea {
  width: 100%; padding: 11px 13px; border: 1.5px solid #d7dde8; border-radius: 10px;
  font-size: 15px; font-family: inherit; background: #fff; color: #1f2937;
}
.hs-o input:focus, .hs-o select:focus, .hs-o textarea:focus { outline: 0; border-color: var(--dam); }
.hs-o textarea { min-height: 74px; resize: vertical; }
.hs-o .goi-y { font-size: 12px; color: #8a94a6; margin-top: 6px; line-height: 1.5; }
.hs-tt { display: flex; gap: 8px; flex-wrap: wrap; }
.hs-tt button {
  flex: 1 1 120px; min-height: 48px; border: 1.5px solid #d7dde8; background: #fff;
  border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit;
  color: #64748b; transition: .15s;
}
.hs-tt button.chon[data-tt="co"] { background: var(--ok-nen); border-color: var(--ok); color: var(--ok); }
.hs-tt button.chon[data-tt="dang"] { background: var(--canh-nen); border-color: var(--canh); color: var(--canh); }
.hs-tt button.chon[data-tt="chua"] { background: var(--thieu-nen); border-color: var(--thieu); color: var(--thieu); }
.hs-chan {
  padding: 16px 20px; border-top: 1px solid #eef1f6; display: flex; gap: 10px;
  position: sticky; bottom: 0; background: #fff;
}
.hs-chan button {
  flex: 1; min-height: 50px; border: 0; border-radius: 11px; cursor: pointer;
  font-size: 15px; font-weight: 600; font-family: inherit;
}
.hs-chan .huy { background: #f1f5f9; color: #475569; }
.hs-chan .luu { background: var(--dam); color: #fff; }
.hs-chan .luu:disabled { opacity: .6; cursor: default; }
.hs-loi {
  margin: 0 20px 16px; padding: 11px 13px; border-radius: 10px; background: #fef2f2;
  border: 1px solid #fecaca; color: var(--thieu); font-size: 13.5px; line-height: 1.5; display: none;
}
.hs-loi.hien { display: block; }

/* ════════════════════════════════════════════════════════════
   MÀN TRƯỜNG CHUẨN QUỐC GIA (TT57) — kế thừa Bạch Liêu
   ════════════════════════════════════════════════════════════ */
.kd-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.kd-dau-phai { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.kd-muctieu {
  background: var(--vang-nen); border: 1px solid #f0e0bb; color: #7a5410;
  font-size: 12.6px; font-weight: 700; border-radius: 999px; padding: 7px 14px; white-space: nowrap;
}
.nut-vien {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--dam); background: #fff; border: 1.5px solid var(--vien); border-radius: 10px; padding: 8px 13px;
}
.nut-vien:hover { border-color: var(--dam); }
.nut-vien.nho { font-size: 12px; padding: 6px 10px; }

.kd-tong { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-bottom: 12px; }
.kd-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); flex: 1; min-width: 0; }
@media (min-width: 860px) { .kd-stats { grid-template-columns: repeat(4, 1fr); } }
.the-kd {
  background: linear-gradient(140deg, #0e2454, var(--dam) 60%, #22488c); color: #fff;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: 13px; padding: 14px 15px;
  box-shadow: var(--bong); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
}
.the-kd::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px); background-size: 18px 18px;
}
.the-kd > * { position: relative; z-index: 1; }
.the-kd b { font-size: 21px; line-height: 1.15; }
.the-kd span { font-size: 12px; color: rgba(255, 255, 255, .8); }
.the-kd.xanh b { color: #6ee7a8; }
.the-kd.vang b { color: #fcd34d; }
.the-kd.la { flex-direction: row; align-items: center; gap: 12px; }
.the-kd.la .vong {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
}
.the-kd.la .vong i {
  width: 38px; height: 38px; border-radius: 50%; background: var(--dam);
  display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800;
}
.kd-nut { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.kd-nut button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: #fff; color: var(--dam); border: 1.5px solid var(--vien); border-radius: 10px; padding: 10px 14px; white-space: nowrap;
}
.kd-nut button:hover { border-color: var(--dam); }

.kd-vi {
  background: #eef4ff; border: 1px solid #cfe0ff; border-left: 5px solid var(--chinh);
  border-radius: 12px; padding: 12px 16px; font-size: 13.5px; margin-bottom: 14px;
}
.kd-vi:empty { display: none; }

.kd-thanh {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  background: var(--the); border: 1px solid var(--vien); border-radius: 13px;
  padding: 10px 12px; margin-bottom: 14px; box-shadow: var(--bong);
  position: sticky; top: 66px; z-index: 40;
}
@media (max-width: 640px) { .kd-thanh { position: static; } }
.kd-thanh:empty { display: none; }
.kd-thanh select {
  font: inherit; font-size: 13.5px; padding: 9px 10px; border: 1.5px solid var(--vien);
  border-radius: 10px; background: #fff; max-width: 100%;
}
.kd-thanh #kd-std { max-width: 430px; }
.kd-thanh .sp, .ct-tab .sp, .ct-day .sp, .mc-dong .sp { flex: 1; }

/* Hai cột làm việc */
.kd-lam { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1000px) { .kd-lam { grid-template-columns: 45fr 55fr; } }
/* Chế độ "Chỉnh sửa" (lớp .rong) TRƯỚC ĐÂY ẩn hẳn cột trái để lấy chỗ gõ.
   Hệ quả: đang sửa thì mất luôn danh sách 15 tiêu chí, không nhảy sang tiêu
   chí khác được và màn hình trông như một trang khác hẳn. Nay chỉ NỚI cột
   phải, cột trái vẫn còn — thầy Chung yêu cầu giữ bố cục hai cột. */
@media (min-width: 1000px) { .kd-lam.rong { grid-template-columns: 32fr 68fr; } }
.kd-trai {
  background: var(--the); border: 1px solid var(--vien); border-radius: 13px;
  box-shadow: var(--bong); display: flex; flex-direction: column; overflow: hidden;
}
.kd-trai-dau { padding: 13px 16px 8px; font-weight: 800; color: var(--dam); font-size: 14.5px; }
.kd-loc { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; }
.chip-loc {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: #f1f5fb; color: var(--chu-mo); border: 1px solid var(--vien);
  border-radius: 999px; padding: 5px 11px;
}
.chip-loc.on { background: var(--dam); color: #fff; border-color: var(--dam); }
.chip-loc b { font-weight: 800; }
#kd-list { overflow-y: auto; max-height: 640px; border-top: 1px solid var(--vien); }
.tc-hang {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px dashed #e3eaf5;
}
.tc-hang:hover { background: #f6f9fe; }
.tc-hang.chon { background: #eef4ff; box-shadow: inset 3px 0 0 var(--dam); }
.tc-ma {
  flex: none; width: 42px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--dam); color: var(--vang); font-weight: 800; font-size: 13px;
}
.tc-ten { flex: 1; min-width: 0; font-size: 13.6px; font-weight: 600; line-height: 1.35; }
.tc-ten small { display: block; font-weight: 400; font-size: 11.8px; color: var(--chu-mo); margin-top: 2px; }
.tc-bb {
  display: inline-block; background: var(--thieu-nen); color: var(--thieu);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; vertical-align: 1px;
}
.crit-nh {
  flex: none; font-size: 11px; font-weight: 700; color: var(--chu-mo);
  background: #f1f5fb; border: 1px solid var(--vien); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.crit-nh.xong { background: var(--ok-nen); color: var(--ok); border-color: #bfe6cf; }
.badge-m { flex: none; font-size: 11.2px; font-weight: 800; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.badge-m2 { background: var(--ok-nen); color: var(--ok); }
.badge-m1 { background: var(--canh-nen); color: var(--canh); }
.badge-no { background: var(--thieu-nen); color: var(--thieu); }

/* Cột phải */
.kd-phai {
  background: var(--the); border: 1px solid var(--vien); border-radius: 13px;
  box-shadow: var(--bong); padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.ct-dau { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.ct-dau b { font-size: 15.5px; color: var(--dam); flex: 1; line-height: 1.35; }
.ct-tab { display: flex; gap: 4px; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--vien); flex-wrap: wrap; }
.ct-tab button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--chu-mo);
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 9px 11px;
}
.ct-tab button.on { color: var(--dam); border-bottom-color: var(--vang-sam); }
.ct-than { padding: 14px 16px; flex: 1; overflow-y: auto; }
.ct-day { display: flex; gap: 9px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--vien); flex-wrap: wrap; }
.ct-day .nut-kiem-tra:disabled { opacity: .5; cursor: default; }

.yc { background: var(--vang-nen); border: 1px solid #f0e0bb; border-left: 5px solid var(--vang-sam); border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; }
.yc-nhan { font-size: 11.5px; font-weight: 800; letter-spacing: .05em; color: #7a5410; margin-bottom: 6px; }
.yc p { font-size: 13.4px; line-height: 1.65; }
.lv-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--dam); }
.lv-pick.khoa { font-weight: 400; font-style: italic; color: var(--chu-mo); }
.pick {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  background: #fff; border: 1.5px solid #d7dde8; border-radius: 999px; padding: 7px 16px; color: #64748b;
}
.pick.dat.on { background: var(--ok-nen); border-color: var(--ok); color: var(--ok); }
.pick.khong.on { background: var(--thieu-nen); border-color: var(--thieu); color: var(--thieu); }
.chu-dat { color: var(--ok); }
.chu-khong { color: var(--thieu); }

.tt-box { background: #f8fafd; border: 1px solid var(--vien); border-radius: 11px; padding: 12px 14px; margin-bottom: 12px; }
.tt-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.tt-dau b { font-size: 13.5px; color: var(--dam); }
.tt-dau .sp { flex: 1; }
.dem-nh { font-size: 11.8px; color: var(--chu-mo); }
.ct-tomtat { font-size: 13px; color: var(--chu-mo); padding: 4px 0; line-height: 1.55; }
.ct-tomtat.co { color: var(--chu); }

.nh-o { background: #fff; border: 1px solid var(--vien); border-left: 4px solid #c7d5ee; border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.nh-o.xong { border-left-color: #5eb884; background: #fafefb; }
.nh-so { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--chu-mo); display: flex; gap: 8px; align-items: center; }
.nh-vb { font-size: 13.2px; line-height: 1.6; margin: 6px 0 8px; }
.nh-o textarea {
  width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: 14px;
  border: 1.5px solid #d7dde8; border-radius: 9px; padding: 9px 11px; background: #fff;
}
.nh-o textarea:focus { outline: 0; border-color: var(--dam); }
.nh-mcs { margin-top: 8px; font-size: 12px; color: var(--chu-mo); display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.nh-mc {
  font: inherit; font-size: 11.3px; font-weight: 700; cursor: pointer;
  background: #f1f5fb; color: var(--chinh); border: 1px solid var(--vien); border-radius: 999px; padding: 3px 10px;
}
.nh-mc.on { background: var(--dam); color: #fff; border-color: var(--dam); }
.tdg-luu { color: var(--ok); font-size: 11.5px; font-weight: 700; opacity: 0; transition: opacity .4s; }

.mc-dong { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--chu-mo); padding: 4px 2px; }
.mc-dem { display: flex; gap: 8px; flex-wrap: wrap; }
.ev.thieu { border-style: dashed; color: var(--chu-mo); }

.ct-kl-muc { border-radius: 11px; padding: 14px 16px; font-size: 14.5px; }
.ct-kl-muc small { display: block; font-size: 12px; margin-top: 4px; opacity: .8; }
.ct-kl-muc.m2 { background: var(--ok-nen); color: var(--ok); }
.ct-kl-muc.m1 { background: var(--canh-nen); color: var(--canh); }
.ct-kl-muc.no { background: var(--thieu-nen); color: var(--thieu); }

/* Quan tri dang the (tab) + hoi dong + dieu kien CQG */
.qt-tab { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 2px solid var(--vien); padding-bottom: 0; }
.qt-tab button {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--chu-mo);
  background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 13px; margin-bottom: -2px;
}
.qt-tab button.on { color: var(--dam); border-bottom-color: var(--vang-sam); }
.hd-kiem { border-radius: 11px; padding: 11px 14px; font-size: 13.2px; margin: 8px 0 12px; line-height: 1.6; }
.hd-kiem.xanh { background: var(--ok-nen); color: var(--ok); border: 1px solid #bfe6cf; }
.hd-kiem.vang { background: var(--canh-nen); color: var(--canh); border: 1px solid #f1e2b5; }
.hd-kiem.do { background: var(--thieu-nen); color: var(--thieu); border: 1px solid #f2cccc; }
.hd-toi {
  background: #eef4ff; border: 1px solid #cfe0ff; border-radius: 10px;
  padding: 9px 13px; font-size: 13px; margin-bottom: 10px;
}
.hd-form {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px;
}
.hd-form .hs-o { margin-bottom: 0; flex: 1 1 180px; }
.hd-form select, .hd-form > input {
  font: inherit; font-size: 13.5px; padding: 9px 10px; border: 1.5px solid var(--vien); border-radius: 10px; background: #fff;
}
.hd-th { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--chu-mo); }
.tt-dk {
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 10px;
}
.tt-dk-dau { font-size: 13.8px; line-height: 1.55; }
.tt-dk small { display: block; color: var(--chu-mo); font-size: 12.3px; margin-top: 4px; line-height: 1.55; }
.tt-dk select, .tt-dk input {
  font: inherit; font-size: 13px; padding: 8px 10px; border: 1.5px solid var(--vien); border-radius: 9px; background: #fff;
}
.bang-quan-tri input { font: inherit; font-size: 12.8px; padding: 6px 8px; border: 1px solid var(--vien); border-radius: 7px; width: 100%; min-width: 90px; background: #fff; }
.bang-quan-tri input[type="checkbox"] { width: auto; min-width: 0; }
.bang-quan-tri input[type="date"] { min-width: 128px; }

/* ════════════════════════════════════════════════════════════
   TCQG — CSS GỐC BẠCH LIÊU (bê nguyên, đổi tên biến sang Diễn Liên)
   Khối này đứng SAU khối cũ nên thắng cascade; các class trùng tên
   được định nghĩa lại đúng bản gốc.
   ════════════════════════════════════════════════════════════ */
:root {
  --ok: #0f7b52; --ok-nen: #e7f6ef;
  --canh: #8f5d14; --canh-nen: #fdf3e0;   /* #a86a08 chỉ đạt 4,03:1 — nay 5,1:1 */
  --thieu: #9b2c3a; --thieu-nen: #fdecee;
  --vang-nen: #fdf6e6;
  --navy-fill: linear-gradient(135deg, #0e2454, #14306b 60%, #22488c);
}

/* ── Hàng tổng quan: 4 thẻ + 2 nút (bố cục gốc) ── */
.kd-tong { display: flex; gap: 11px; flex-wrap: wrap; align-items: stretch; margin-bottom: 12px; }
.kd-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; margin: 0; flex: 1; min-width: 280px; }
@media (min-width: 900px) { .kd-stats { grid-template-columns: 1.35fr 1fr 1fr 1.15fr; } }
.kd-tong .kd-nut { margin-left: 0; align-items: stretch; flex-wrap: wrap; flex-direction: row; display: flex; gap: 9px; }
.kd-tong .kd-nut button {
  height: auto; min-height: 0; align-self: stretch;
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  box-shadow: var(--bong); font: inherit; font-size: 13.4px; font-weight: 700;
  color: var(--dam); cursor: pointer; padding: 9px 15px;
}
.kd-tong .kd-nut button:hover { border-color: var(--dam-2); background: #f5f9ff; }
@media (max-width: 899px) {
  .kd-tong .kd-nut { width: 100%; }
  .kd-tong .kd-nut button { flex: 1; min-width: 150px; min-height: 46px; }
}

/* Thẻ tổng quan kiểu sáng (bản gốc) */
.the {
  display: flex; align-items: center; gap: 10px; border-radius: 14px; padding: 9px 13px;
  border: 1px solid var(--vien); background: #fff; box-shadow: var(--bong);
}
.the .ic { width: 35px; height: 35px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none; }
.the .noi { min-width: 0; }
.the .so { font-weight: 800; font-size: 21px; color: var(--dam); line-height: 1.05; display: block; }
.the .nhan { font-size: 12.2px; color: var(--chu-mo); display: block; margin-top: 0; line-height: 1.3; }
.the .them { font-size: 11.4px; color: var(--chu-mo); display: block; margin-top: 1px; line-height: 1.3; }
.the.xanh { background: #f2f7ff; border-color: #d8e6fb; }
.the.xanh .ic { background: #e2edfd; color: #1e4593; }
.the.vang { background: var(--vang-nen); border-color: #f0dfb4; }
.the.vang .ic { background: #faedcd; color: #a2740f; }
.the.la { background: #f1faf5; border-color: #c9e9d7; }
.the.la .ic { background: #dcf2e6; color: #0f7b52; }
.the.navy { background: var(--navy-fill); border-color: rgba(255, 255, 255, .1); color: #fff; position: relative; overflow: hidden; }
.the.navy::before { content: ""; position: absolute; inset: 0; background-image: var(--cham-navy); background-size: 15px 15px; pointer-events: none; }
.the.navy > * { position: relative; z-index: 1; }
.the.navy .ic { background: rgba(255, 255, 255, .14); }
.the.navy .so { color: #fff; font-size: 23px; }
.the.navy .nhan, .the.navy .them { color: rgba(255, 255, 255, .8); }

/* Vòng tròn tiến độ gốc */
.vong { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12.4px; font-weight: 700; color: var(--ok); }
.vong span, .vong i { width: 34px; height: 34px; border-radius: 50%; background: #f1faf5; display: grid; place-items: center; font-style: normal; }

/* Dòng giải thích xếp mức (bản gốc) */
.kd-vi {
  background: #eef4fd; border: 1px solid #cbdcf5; border-left: 4px solid var(--dam-2);
  border-radius: 10px; padding: 11px 15px; font-size: 13.4px; color: #22406b; margin-bottom: 20px; line-height: 1.6;
}

/* Đầu trang */
.kd-dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.kd-dau .dau-muc { text-align: left; flex: 1; min-width: 270px; }
.kd-dau .dau-muc p { margin: 0; max-width: 64ch; }
.kd-dau-phai { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; flex-direction: row; }
.kd-muctieu {
  display: inline-flex; align-items: center; gap: 7px; background: var(--vang-nen);
  border: 1px solid #f0dfb4; border-radius: 999px; padding: 9px 17px; font-size: 13.4px; color: #6b4e0d; white-space: normal;
}

/* Thanh công cụ */
.kd-thanh { position: sticky; top: 66px; z-index: 40; }
@media (max-width: 640px) { .kd-thanh { position: static; } }
.kd-thanh .nhan-nam { font-size: 13.4px; font-weight: 700; color: var(--chu-mo); }
.kd-thanh .nut-xuat-bc {
  font: inherit; font-size: 13.8px; font-weight: 700; cursor: pointer;
  background: var(--vang-sam); color: #fff; border: 0; border-radius: 10px; padding: 11px 17px;
}
.kd-thanh .nut-xuat-bc:hover { background: #7d5a16; }

/* Hai cột (bản gốc: cả hai là thẻ trắng có đệm) */
.kd-lam { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: stretch; }
@media (min-width: 1000px) { .kd-lam { grid-template-columns: 45fr 55fr; } }
.kd-trai, .kd-phai {
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  box-shadow: var(--bong); padding: 16px; display: block; overflow: visible;
}
@media (min-width: 1000px) {
  .kd-trai { display: flex; flex-direction: column; min-height: 0; }
  .kd-trai #kd-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 5px; max-height: none; }
}
.kd-trai-dau { font-weight: 800; font-size: 19px; color: var(--dam); margin-bottom: 11px; padding: 0; }
.kd-trai-dau span { font-size: 13px; color: var(--chu-mo); font-weight: 400; }
.kd-loc { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; padding: 0; }
.chip-loc {
  border: 1px solid #cfd8e6; background: #fff; border-radius: 999px;
  padding: 7px 13px; font-size: 13px; font-weight: 600; color: #42526b; cursor: pointer; font-family: inherit;
}
.chip-loc:hover { background: #f1f5fb; }
.chip-loc.on { background: var(--dam); color: #fff; border-color: var(--dam); }
#kd-list { border-top: 0; }

/* Dòng tiêu chí (bản gốc: mỗi dòng một thẻ bo góc) */
.tc-hang {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 10px 11px; border: 1px solid var(--vien); border-radius: 11px; background: #fff;
  margin-bottom: 7px; cursor: pointer; font-family: inherit; font-size: 14px; border-bottom: 1px solid var(--vien);
}
.tc-hang:hover { background: #f7faff; }
.tc-hang.chon { border-color: var(--dam-2); background: #f5f9ff; box-shadow: inset 3px 0 0 var(--dam-2); }
.tc-hang .tc-ma {
  min-width: 40px; width: auto; height: 30px; padding: 0 8px; border-radius: 8px; background: var(--dam);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none;
}
.tc-hang .tc-ten { flex: 1; min-width: 0; font-weight: 600; line-height: 1.4; font-size: 13.8px; }
.crit-nh {
  flex: none; font-size: 11.6px; font-weight: 700; color: #42526b;
  background: #f1f5fb; border: 1px solid #dbe4f0; border-radius: 999px; padding: 4px 11px; white-space: nowrap;
}
.crit-nh.xong { background: var(--ok-nen); color: var(--ok); border-color: #bfe8cd; }
.badge-m { flex: none; font-size: 11.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.badge-m2 { background: var(--ok-nen); color: var(--ok); border: 1px solid #bfe8cd; }
.badge-m1 { background: var(--canh-nen); color: var(--canh); border: 1px solid #f0d089; }
.badge-no { background: var(--thieu-nen); color: var(--thieu); border: 1px solid #f3c9c5; }
.tc-bb {
  font-size: 10.6px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  background: #fdeceb; color: #a8352b; border: 1px solid #f3c9c5; border-radius: 999px;
  padding: 2px 8px; white-space: nowrap; vertical-align: middle; margin-left: 6px;
}

/* Cột phải (bản gốc) */
.ct-dau { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 12px; padding: 0; }
.ct-dau .tc-ma { background: var(--dam); color: #fff; border-radius: 9px; padding: 7px 13px; font-weight: 700; font-size: 14px; flex: none; height: auto; }
.ct-dau b { flex: 1; min-width: 180px; font-size: 17px; font-weight: 700; color: var(--dam); line-height: 1.35; }
.ct-tab { display: flex; gap: 2px; border-bottom: 1px solid var(--vien); margin-bottom: 14px; flex-wrap: wrap; padding: 0; align-items: center; }
.ct-tab button {
  border: 0; background: none; padding: 10px 15px; font-size: 14.5px; font-weight: 600;
  color: var(--chu-mo); cursor: pointer; border-bottom: 2.5px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.ct-tab button.on { color: var(--dam); border-bottom-color: var(--dam-2); }
.ct-tab button:hover { color: var(--dam); }
.ct-than { padding: 0; overflow: visible; }

/* Ô nguyên văn yêu cầu (bản gốc) */
.yc { background: var(--vang-nen); border: 1px solid #f0dfb4; border-left: 4px solid var(--vang-sam); border-radius: 11px; padding: 13px 16px; margin-bottom: 12px; }
.yc .yc-nhan { font-size: 13.6px; color: #7a5410; margin-bottom: 7px; font-weight: 700; letter-spacing: 0; }
.yc p { font-size: 14.4px; line-height: 1.68; color: #4a3a12; margin-bottom: 10px; }
.lv-pick { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; font-size: 13px; font-weight: 600; color: var(--chu-mo); }
.pick {
  padding: 7px 15px; border-radius: 8px; border: 1px solid #cfd8e6; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--chu-mo); min-height: 40px; cursor: pointer; font-family: inherit;
}
.pick.on, .pick.dat.on, .pick.khong.on { background: var(--dam); border-color: var(--dam); color: #fff; }
.lv-pick.khoa { opacity: .75; font-style: italic; font-weight: 400; }

/* Ô thực trạng (bản gốc) */
.tt-box { border: 1px solid var(--vien); border-radius: 11px; padding: 13px 16px; margin-bottom: 14px; background: #fff; }
.tt-dau { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.tt-dau b { font-size: 14.4px; color: var(--dam); }
.ct-quaylai {
  border: 1px solid #cfd8e6; background: #fff; border-radius: 9px; padding: 6px 12px;
  font-size: 12.8px; font-weight: 600; color: #42526b; cursor: pointer; font-family: inherit; margin-left: auto;
}
.ct-quaylai:hover { background: #f1f5fb; }
.ct-tomtat { font-size: 13.6px; color: #33415c; line-height: 1.65; padding: 4px 0 4px 2px; }
.ct-tomtat.co { color: #33415c; }

/* Dòng minh chứng gọn (bản gốc) */
.mc-dong {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f2f7ff;
  border: 1px solid #d8e6fb; border-radius: 11px; padding: 11px 15px; font-size: 13.8px; color: #33506e;
}

/* Hàng nút cuối cột phải (bản gốc .ct-nut) */
.ct-day { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 16px; padding: 14px 0 0; border-top: 1px solid var(--vien); }
.ct-nut {
  flex: 1; min-width: 140px; border-radius: 10px; padding: 11px 14px; font-size: 13.8px;
  font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid #cfd8e6; background: #fff; color: #42526b;
  text-align: center;
}
.ct-nut:hover { background: #f5f8fd; }
.ct-nut.xong { background: var(--ok-nen); border-color: #bfe8cd; color: var(--ok); cursor: default; }
.ct-nut.cho { background: var(--canh-nen); border-color: #f0d089; color: var(--canh); cursor: default; }
.ct-nut.chinh { background: var(--dam); border-color: var(--dam); color: #fff; }
.ct-nut.chinh:hover { background: var(--dam-2); }
.ct-nut[disabled] { opacity: .5; cursor: default; }

/* Tab Kết luận (bản gốc) */
.ct-kl-muc { border-radius: 10px; padding: 12px 15px; font-size: 15px; border: 1px solid; }
.ct-kl-muc.m2 { background: #e7f0ff; border-color: #c9dbff; color: #1a3f8f; }
.ct-kl-muc.m1 { background: var(--ok-nen); border-color: #bfe8cd; color: var(--ok); }
.ct-kl-muc.no { background: var(--thieu-nen); border-color: #f3c9c5; color: var(--thieu); }

/* Cửa sổ Căn cứ & hướng dẫn + hộp minh chứng (bản gốc) */
.ev-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ev { background: #fff; border: 1px solid var(--vien); border-radius: 8px; padding: 5px 11px; font-size: 12.2px; color: #3b4a63; display: inline-flex; align-items: center; gap: 6px; }
.ev.thieu { border-style: dashed; color: var(--chu-mo); }

/* Chân màn hình kiểu gốc */
#mh-chuanqg .chu-thich-phap-ly {
  background: #f2f7ff; border: 1px solid #d8e6fb; border-radius: 11px;
  color: #33506e; font-size: 12.9px; text-align: left;
}


/* ════════════════════════════════════════════════════════════════════════════
   ĐIỆN THOẠI — phải nằm CUỐI TỆP
   Khối này trước đây đứng ở dòng ~201, trước khi .the-khoi / .hs-hero /
   .hai-cot được khai báo. @media không cộng thêm độ đặc hiệu, nên quy tắc
   khai báo sau thắng và 6 trong 11 dòng dưới đây là code chết. Chuyển xuống
   cuối là hết. Thêm dòng nào ở đây thì cũng phải giữ nó ở cuối tệp.

   GIỮ dải số liệu 2 cột, KHÔNG hạ về 1 cột: ô cuối đang đặt grid-column:span 2,
   xuống 1 cột thì lưới tự nở thành 2 cột và bố cục vỡ.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .dai-so-lieu { padding: 12px; gap: 8px; }
  .dai-so-lieu .o { padding: 6px 2px; gap: 10px; }
  .dai-so-lieu .bi { flex: 0 0 38px; width: 38px; height: 38px; font-size: 17px; }
  .dai-so-lieu .so { font-size: 21px; }
  .dai-so-lieu .nhan { font-size: 11.4px; line-height: 1.35; }
  .hero .khung { padding: 28px 14px 22px; }
  .hs-hero { padding: 24px 14px 22px; }
  .hs-hero .hs-pill { padding: 9px 16px; font-size: 13px; }
  .hs-nam-boc { flex-wrap: wrap; }
  .the-khoi { padding: 16px 8px 14px; }
  .the-khoi .hai-cot { gap: 14px; }
  .the-khoi .hai-cot .so { font-size: 18px; }
  .the-khoi .huy { width: 40px; height: 40px; font-size: 18px; margin-bottom: 9px; }
  .the-khoi .ten-khoi { font-size: 15px; }
  .cong-hop { padding: 26px 20px 20px; }
}

/* Thanh công cụ TT57 dính ở top:66px — đúng bằng chiều cao đầu trang khi menu
   nằm một hàng. Từ khi có nút ☰ (khối @media ở đầu tệp), đầu trang luôn cao
   66px ở mọi bề rộng nên số này lại đúng. Dưới 1000px màn xếp dọc, dính thêm
   chỉ tổ chiếm chỗ — cho về static. */
@media (max-width: 999px) { .kd-thanh { position: static; } }

/* Danh sách 15 tiêu chí bị nhốt trong hộp cuộn 640px → cuộn lồng: ngón tay
   cuộn trong hộp thì trang đứng yên. Trên điện thoại người dùng đọc là
   "trang bị kẹt". Chỉ giữ hộp cuộn khi màn đủ rộng để thấy cả hai cột. */
@media (max-width: 999px) { #kd-list { max-height: none; } }

/* Vùng chạm tối thiểu 44px trên thiết bị cảm ứng.
   .nh-mc là nút gắn/gỡ mã minh chứng — thao tác lặp hàng trăm lần trong một
   kỳ tự đánh giá — trước đây chỉ cao ~24px. Mẫu @media (hover:none) này đã có
   sẵn ở khối .rec-tbl .drive, đây là mở rộng cho phần còn lại. */
@media (hover: none) {
  .nh-mc, .tag-crit, .chip-loc, .ct-quaylai, .nut-vien, .sub-word, .nut-luu-nd, .nut-xoa-nd {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .hs-dau button, .sheet-x { width: 44px; height: 44px; }
}

/* Trạng thái focus: cả tệp trước đây chỉ có 3 quy tắc :focus, hai trong số đó
   còn viết outline:0. Người dùng bàn phím không biết mình đang ở đâu.
   :focus-visible nên chuột bấm không hiện viền, chỉ hiện khi đi bằng Tab. */
:where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--chinh);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Người bị rối loạn tiền đình tắt hiệu ứng ở cấp hệ điều hành — tôn trọng. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   IN GIẤY
   Nút "In danh sách" gọi window.print() từ TRONG lớp phủ .overlay, mà lớp phủ
   là position:fixed — trình duyệt in phần tử fixed chỉ ra đúng một khung nhìn
   đầu tiên, nên danh sách 30 em mất từ em thứ ~12 trở đi. Khối này gỡ fixed,
   bỏ mọi thứ không thuộc về tờ giấy, và cấm cắt ngang một dòng bảng.
   ════════════════════════════════════════════════════════════════════════════ */
@media print {
  header.dau-trang, nav.menu, .hero, .hs-hero, footer,
  .bang-xem-thu, .bang-trang-thai, .toast, .sheet-x, .nut-kiem-tra { display: none !important; }

  .overlay, .hs-lop {
    position: static !important;
    overflow: visible !important;
    background: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
  }
  .sheet, .hs-hop {
    min-height: 0 !important;
    max-width: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .cuon-ngang { overflow: visible !important; }
  .bang-quan-tri, .rec-tbl { min-width: 0 !important; font-size: 11pt; }
  .bang-quan-tri thead, .rec-tbl thead { display: table-header-group; }
  tr, .the-hop, .cat, .the-khoi { break-inside: avoid; }

  body { background: #fff; color: #000; }
  a[href]::after { content: ""; }   /* không in đuôi URL vào giữa câu */
  @page { margin: 15mm 12mm; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MODULE ĐIỀU HÀNH NHÀ TRƯỜNG (dieu-hanh.js) — toàn bộ tiền tố .dh-
   Thiết kế mobile-first: nút lớn, thao tác một tay, 4 màu trạng thái thống
   nhất (xanh / vàng / đỏ / xám). Khối này nằm CUỐI TỆP; media query riêng của
   nó đặt ngay sau các quy tắc gốc — đúng quy tắc "@media phải nằm sau mọi quy
   tắc nó sửa" đã ghi trong nhật ký dự án.
   ════════════════════════════════════════════════════════════════════════════ */

/* Đầu ngày */
.dh-dau { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.dh-dau b { font-size: 18px; color: var(--dam); letter-spacing: .4px; }
.dh-dau small { display: block; color: var(--chu-mo); font-size: 13px; margin-top: 2px; }

/* Thanh tab của module — cho XUỐNG DÒNG, không cuộn ngang: thầy Chung góp ý
   11/8/2026 là không được có thanh trượt dưới dãy nút. */
.dh-thanh-tab { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dh-thanh-tab button {
  font: inherit; font-size: 13.2px; font-weight: 700; white-space: nowrap;
  padding: 10px 14px; border-radius: 999px; border: 1px solid var(--vien);
  background: #fff; color: #3b4a63; cursor: pointer; min-height: 44px;
}
.dh-thanh-tab button.on { background: var(--dam); border-color: var(--dam); color: #fff; }

.dh-loc-cs { margin: 0 0 10px; }
.dh-noi-dung { min-height: 200px; }

/* Băng trạng thái toàn trường — chữ to, một giây là hiểu */
.dh-bang { border-radius: 13px; padding: 15px 18px; font-size: 16.5px; font-weight: 800; margin: 2px 0 12px; text-align: center; letter-spacing: .3px; }
.dh-bang.xanh { background: var(--ok-nen); color: var(--ok); border: 1px solid #bfe6cf; }
.dh-bang.vang { background: var(--canh-nen); color: var(--canh); border: 1px solid #f1e2b5; }
.dh-bang.do   { background: var(--thieu-nen); color: var(--thieu); border: 1px solid #f2cccc; }
.dh-bang.xam  { background: #f1f4f8; color: #5b6b80; border: 1px solid #dfe5ec; }

/* 5 thẻ số liệu: dùng lại .luoi-thong-ke/.o-so, chỉ nới lưới cho 5 ô */
.dh-5the { grid-template-columns: repeat(5, 1fr); }

/* Tiêu đề nhỏ trong tab */
.dh-tieu-de { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--dam); margin: 18px 0 8px; }
.dh-tieu-de:first-child { margin-top: 4px; }

/* Hai cột trên màn rộng, một cột trên điện thoại */
.dh-hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }

/* Hàng trạng thái một điểm trường / một sự việc */
.dh-diem-hang {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 8px;
}
.dh-diem-hang .tt { flex: 1; min-width: 0; }
.dh-diem-hang .tt b { font-size: 14px; }
.dh-diem-hang .tt small { display: block; color: var(--chu-mo); font-size: 12.6px; margin-top: 2px; line-height: 1.5; }

/* Chấm màu trạng thái — vẽ bằng CSS, không dùng emoji (in ra giấy vẫn rõ) */
.dh-cham { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; margin-top: 3px; }
.dh-cham.xanh { background: #17a45c; }
.dh-cham.vang { background: #e5a50f; }
.dh-cham.do   { background: #d64545; }
.dh-cham.xam  { background: #b9c2ce; }

.dh-ul { margin: 0 0 10px; padding-left: 20px; font-size: 13.6px; line-height: 1.9; color: #33415a; }

/* Nút lớn chọn nhanh (Đủ / Có vắng, mức độ báo việc…) */
.dh-chon-hang { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dh-nut-lon {
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  min-height: 48px; padding: 10px 18px; border-radius: 11px;
  border: 1.6px solid var(--vien); background: #fff; color: #33415a;
}
.dh-nut-lon.on { background: var(--dam); border-color: var(--dam); color: #fff; }
.dh-nut-lon.phu { border-style: dashed; }
.dh-nut-nho {
  font: inherit; font-size: 12.8px; font-weight: 700; cursor: pointer;
  min-height: 40px; padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--vien); background: #fff; color: var(--dam);
}

/* Ba nút an toàn — tính năng trung tâm, phải to và rõ nhất màn */
.dh-an3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dh-an-toan {
  font: inherit; cursor: pointer; border-radius: 13px; padding: 14px 8px;
  border: 2px solid var(--vien); background: #fff; text-align: center; min-height: 76px;
}
.dh-an-toan b { display: block; font-size: 14.5px; }
.dh-an-toan small { display: block; color: var(--chu-mo); font-size: 11.6px; margin-top: 3px; }
.dh-an-toan.xanh.on { background: var(--ok-nen); border-color: #17a45c; }
.dh-an-toan.vang.on { background: var(--canh-nen); border-color: #e5a50f; }
.dh-an-toan.do.on   { background: var(--thieu-nen); border-color: #d64545; }

/* Hộp chọn tên (GV vắng / HS vắng) */
.dh-hop-chon { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.dh-ghi-chu-nho { flex-basis: 100%; font-size: 12.4px; color: var(--chu-mo); line-height: 1.6; margin-top: 6px; }

/* Ô nhập chung */
.dh-o-nhap {
  font: inherit; font-size: 13.5px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px;
  background: #fff; margin-top: 6px;
}
select.dh-o-nhap { width: auto; margin-top: 0; }
.dh-tick { display: flex; gap: 9px; align-items: flex-start; font-size: 13.4px; color: #33415a; margin-top: 14px; line-height: 1.55; }
.dh-tick input { width: 19px; height: 19px; margin-top: 1px; }

/* Nút gửi to bản mobile */
/* Nút gửi chính (XÁC NHẬN ĐẦU BUỔI · GỬI BÁO CÁO).
   ⚠️ KHÔNG để width:100% trên máy tính. Kiểu nút trải hết bề ngang là kiểu
   của ĐIỆN THOẠI — ngón cái chạm đâu cũng trúng. Bê nguyên lên màn 1720px
   thì nó thành một thanh navy dài gần một mét cho ba chữ, vừa thô vừa lệch
   hẳn so với nút "Lưu phiếu kiểm tra" nhỏ gọn ngay bên dưới.
   Máy tính: rộng vừa nội dung, canh trái theo biểu mẫu. Điện thoại: trải
   hết như cũ (xem @media dưới). */
.dh-nut-gui {
  font: inherit; font-size: 14.5px; font-weight: 800; letter-spacing: .3px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 250px; max-width: 100%; padding: 0 32px; min-height: 48px; margin: 16px 0 6px;
  border: 0; border-radius: 11px; background: var(--dam); color: #fff;
}
.dh-nut-gui:hover { background: #1e4593; }

/* Biểu mẫu nhập không nên rộng quá — ô một dòng kéo dài 900px thì mắt phải
   quét cả sải tay mới hết, mà nội dung thật chỉ vài chữ. Giới hạn bề ngang
   là cách thường dùng cho mọi biểu mẫu. */
.dh-cot-nhap { max-width: 620px; }
.dh-nut-gui.mo { opacity: .45; }

/* Thẻ điểm danh một lớp */
.dh-lop-the { background: var(--the); border: 1px solid var(--vien); border-radius: 12px; padding: 13px 15px; margin-bottom: 9px; }
.dh-lop-ten { font-size: 15px; font-weight: 800; color: var(--dam); margin-bottom: 9px; }
.dh-lop-ten small { font-weight: 600; color: var(--chu-mo); }
.dh-lop-xong { font-size: 13.4px; color: var(--ok); font-weight: 700; line-height: 1.6; }

/* Dạy thay theo tiết */
.dh-tiet {
  display: flex; align-items: center; gap: 12px;
  background: var(--the); border: 1px solid #f2cccc; border-radius: 10px;
  padding: 10px 13px; margin-bottom: 7px;
}
.dh-tiet.xong { border-color: var(--vien); }
.dh-tiet-so { font-weight: 800; font-size: 13px; color: var(--dam); flex: 0 0 52px; }
.dh-tiet-mon { flex: 1; font-size: 13.6px; }
.dh-tiet-gv { font-size: 13px; font-weight: 700; color: var(--ok); }
.dh-tiet-gv.thieu { color: var(--thieu); }

.dh-goiy {
  font: inherit; text-align: left; cursor: pointer; display: block; width: 100%;
  background: #fff; border: 1.6px solid var(--vien); border-radius: 11px;
  padding: 11px 14px; margin-bottom: 8px;
}
.dh-goiy:hover { border-color: var(--dam); }
.dh-goiy b { font-size: 14px; color: var(--dam); }
.dh-goiy small { display: block; color: var(--chu-mo); font-size: 12.4px; margin: 3px 0 4px; }
.dh-goiy span { font-size: 12.6px; font-weight: 700; color: var(--ok); }

/* Việc trong tuần */
.dh-viec-tom { font-size: 13.6px; font-weight: 700; color: #33415a; background: var(--the); border: 1px solid var(--vien); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.dh-giao-viec { background: #f6f9fe; border: 1px dashed #c9dbff; border-radius: 11px; padding: 10px 12px 12px; margin-bottom: 14px; }
.dh-giao-viec .dh-chon-hang { margin-top: 8px; }
.dh-nguoi-nhom { margin-bottom: 14px; }
.dh-nguoi-ten { font-size: 13.6px; font-weight: 800; color: var(--dam); margin-bottom: 6px; }
.dh-nguoi-ten small { font-weight: 600; color: var(--chu-mo); }
.dh-viec {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 6px;
}
.dh-viec.qua-han { border-color: #f2cccc; background: #fffafa; }
.dh-viec .tt { flex: 1; min-width: 0; }
.dh-viec .tt b { font-size: 13.6px; font-weight: 700; }
.dh-viec .tt small { display: block; color: var(--chu-mo); font-size: 12.2px; margin-top: 2px; }
.dh-viec-tt { font: inherit; font-size: 17px; line-height: 1; cursor: pointer; border: 0; background: none; padding: 4px; min-width: 34px; min-height: 34px; }
.dh-muc { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 7px; vertical-align: 1px; }
.dh-muc.qt { background: var(--canh-nen); color: var(--canh); }
.dh-muc.kh { background: var(--thieu-nen); color: var(--thieu); }
.dh-do { color: var(--thieu); }
.dh-vang { color: var(--canh); font-weight: 700; }
.dh-xanh { color: var(--ok); font-weight: 700; }

/* Nhật ký điều hành */
.dh-nk { border-left: 3px solid var(--vien); padding-left: 14px; }
.dh-nk-dong { display: flex; gap: 10px; font-size: 13.2px; line-height: 1.6; margin-bottom: 9px; color: #33415a; }
.dh-nk-luc { flex: 0 0 62px; font-weight: 800; color: var(--chu-mo); font-size: 12.2px; padding-top: 1px; }

/* Điện thoại: 5 thẻ về 2 cột (ô cuối chiếm cả hàng), hai cột về một */
@media (max-width: 900px) {
  .dh-5the { grid-template-columns: repeat(2, 1fr); }
  .dh-5the .o-so:last-child { grid-column: span 2; }
  .dh-hai-cot { grid-template-columns: 1fr; }
  /* Điện thoại: nút gửi trở lại trải hết bề ngang — ngón cái chạm đâu cũng
     trúng, và bỏ luôn giới hạn bề ngang biểu mẫu vì màn đã hẹp sẵn. */
  .dh-nut-gui { width: 100%; min-width: 0; }
  .dh-cot-nhap { max-width: none; }
}
@media (max-width: 560px) {
  .dh-bang { font-size: 14.5px; padding: 13px 12px; }
  .dh-an3 { gap: 6px; }
  .dh-an-toan b { font-size: 13px; }
  .dh-nut-lon { flex: 1 1 auto; }
}


/* ════════════════════════════════════════════════════════════════════════════
   GÓP Ý GIAO DIỆN 11/8/2026 (thầy Chung) — nằm CUỐI TỆP để thắng quy tắc gốc
   1) Menu chính KHÔNG hiện thanh trượt: vẫn cuộn được bằng tay/chạm khi thật
      sự thiếu chỗ, nhưng ẩn thanh trượt (Windows luôn vẽ thanh trượt đè ngay
      dưới dãy nút, rất rối mắt).
   2) Nút đăng nhập / tài khoản thành NÚT TRÒN trên màn rộng — gọn đầu trang,
      menu 6 nút đủ chỗ nằm một hàng. Dưới 1360px (trong bảng ☰) giữ nguyên
      nút chữ đầy đủ để thầy cô mới dùng không phải đoán.
   ════════════════════════════════════════════════════════════════════════════ */
nav.menu { scrollbar-width: none; }
nav.menu::-webkit-scrollbar { display: none; }

.nut-dang-nhap { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.nut-dang-nhap .ic { width: 19px; height: 19px; flex: 0 0 auto; }

@media (min-width: 1360px) {
  .nut-dang-nhap {
    width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 50%;
  }
  .nut-dang-nhap span { display: none; }
  .chip-nguoi {
    width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%;
  }
  .chip-nguoi .chip-chu { display: none; }
  .chip-nguoi img, .chip-nguoi .anh-chu { width: 38px; height: 38px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ĐIỀU HÀNH ĐỢT 2 (12/8/2026) — vá mobile cho các hàng có nút hành động.
   Nằm CUỐI TỆP để thắng khai báo gốc (.dh-diem-hang, .dh-nut-nho, .chip-loc).
   1) .dh-diem-hang thêm flex-wrap: hàng "Cần tôi xử lý" / đề xuất có 2 nút
      (Duyệt · Từ chối) — màn 360px không được bóp chữ nút thành cột dọc.
   2) .dh-nut-nho không co, không ngắt chữ giữa từ.
   3) .chip-loc trong khu Điều hành nâng vùng chạm lên 40px (chip gốc của
      module khác chỉ ~33px — KHÔNG sửa khai báo gốc kẻo ảnh hưởng nơi khác).
   ════════════════════════════════════════════════════════════════════════════ */
.dh-diem-hang { flex-wrap: wrap; }
.dh-nut-nho { white-space: nowrap; flex: 0 0 auto; }
.dh-hop-chon .chip-loc, .dh-chon-hang .chip-loc, .dh-loc-cs .chip-loc { min-height: 40px; }
@media (max-width: 560px) {
  /* nút hành động rơi hẳn xuống dòng dưới, phần chữ chiếm trọn hàng trên */
  .dh-diem-hang .tt { flex: 1 1 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   BẢNG CÔNG THÁNG (14/8/2026) — đợt A "tư duy lại module Điều hành".
   ════════════════════════════════════════════════════════════════════════════ */

/* 1) Cột họ tên DÍNH khi cuộn ngang. Bảng công có tới 10 cột, rộng gần 2,5 màn
      điện thoại; cuộn sang xem cột "Có mặt" thì cột tên đã trôi khỏi màn —
      nhìn thấy số mà không biết của ai. Chỉ áp cho .bang-cong, không đụng các
      bảng quản trị khác.
   ⚠ .bang-quan-tri gốc đặt overflow:hidden (để bo góc). Ô sticky nằm trong
      một hộp overflow khác hộp đang cuộn thì trình duyệt KHÔNG dính — phải trả
      bảng này về overflow:visible, đổi lại mất bo góc, đáng.
   ⚠⚠ 14/8/2026: khối này từng có dấu ĐÓNG chú thích lọt vào giữa, biến ba
      dòng chú thích thành BỘ CHỌN rác, và quy tắc overflow:visible bên dưới bị
      trình duyệt vứt IM LẶNG — cột dính không chạy lần nào kể từ đợt A.
      Bài học: CSS không báo lỗi bao giờ. Sửa chú thích xong phải quét lại
      trạng thái mở/đóng bằng máy, và TUYỆT ĐỐI không viết dấu đóng chú thích
      vào trong lời văn. */
.bang-cong { overflow: visible; }
.bang-cong .cot-dinh {
  position: sticky; left: 0; z-index: 1;
  background: var(--the); box-shadow: 1px 0 0 var(--vien);
}
.bang-cong thead .cot-dinh { background: var(--kem); z-index: 2; }

/* 2) Vùng chạm 44px trên máy CẢM ỨNG. Khối "đợt 2" ở trên đặt .dh-chon-hang
      .chip-loc = 40px với đặc tả 0,2,0, thắng cả khai báo 44px trong
      @media (hover:none) — nên trên điện thoại nút thật ra bị HẠ xuống 40px.
      Khai lại ở đây cho đúng ngưỡng 44px mà chính dự án đã đặt ra, và bổ sung
      .dh-nut-nho (trước nay không nằm trong danh sách cảm ứng nào). */
@media (hover: none) {
  .dh-hop-chon .chip-loc, .dh-chon-hang .chip-loc, .dh-loc-cs .chip-loc,
  .dh-nut-nho {
    min-height: 44px; display: inline-flex; align-items: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   LỊCH CÔNG TÁC TUẦN (14/8/2026) — đợt B.
   Trên màn hình bày theo LƯỚI THẺ THEO NGÀY: liếc một cái là thấy hôm nay có
   gì, ai trực điểm nào. Bảng chi tiết 6 cột để dành cho bản Word — bảng ngang
   trên điện thoại là phải cuộn, mà tờ lịch tuần thì phải liếc được.
   Máy tính rộng thì lưới tự chia nhiều cột, điện thoại tự về một cột.
   ════════════════════════════════════════════════════════════════════════════ */
.lt-luoi {
  display: grid; gap: 12px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.lt-the {
  background: var(--the); border: 1px solid var(--vien); border-radius: 12px;
  padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px;
}
/* Hôm nay nổi hẳn lên — mở app giữa tuần là mắt rơi đúng vào cột hôm nay */
.lt-the.nay { border-color: var(--dam); box-shadow: 0 0 0 2px rgba(20, 48, 107, .12); }
.lt-the.cuoi { background: #fbfcfe; }          /* Thứ Bảy, Chủ nhật nhạt hơn */
.lt-the-dau {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border-bottom: 1px solid var(--vien); padding-bottom: 6px;
}
.lt-the-dau b { font-size: 14px; color: var(--dam); }
.lt-the-dau span { font-size: 12.5px; color: var(--chu-mo); }
.lt-the-dau em { color: var(--vang-sam); font-style: normal; font-weight: 700; }
.lt-the.nay .lt-the-dau { border-bottom-color: var(--dam); }

.lt-truc {
  font-size: 12.5px; line-height: 1.5; color: var(--chu);
  background: #f2f6fd; border-radius: 8px; padding: 6px 9px;
}
.lt-truc a { color: var(--thieu, #9b2c3a); text-decoration: none; margin-left: 3px; }

.lt-buoi-ten {
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--chu-mo); font-weight: 700; margin-bottom: 4px;
}
.lt-buoi + .lt-buoi { margin-top: 8px; }
.lt-viec { display: flex; gap: 7px; align-items: flex-start; padding: 4px 0; }
.lt-viec + .lt-viec { border-top: 1px dashed var(--vien); }
.lt-gio {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #fff;
  background: var(--chinh); border-radius: 6px; padding: 2px 6px; margin-top: 1px;
}
.lt-viec-tt { flex: 1 1 auto; min-width: 0; }
.lt-viec-tt b { font-size: 13.2px; display: block; line-height: 1.45; }
.lt-viec-tt small { display: block; font-size: 11.8px; color: var(--chu-mo); line-height: 1.5; }
.lt-viec-tt small.lt-ghichu { color: var(--vang-sam); }
.lt-xoa { flex: 0 0 auto; color: var(--chu-mo); text-decoration: none; font-size: 13px; padding: 0 2px; }
.lt-trong { font-size: 12.5px; color: var(--chu-mo); font-style: italic; }

.lt-trongtam {
  background: #fff8e7; border-left: 4px solid var(--vang);
  border-radius: 8px; padding: 9px 12px; font-size: 13.5px; line-height: 1.55;
  margin-top: 10px;
}
.lt-khung {
  border: 1px dashed var(--vien); border-radius: 12px;
  padding: 12px; margin-top: 10px; background: #fbfcfe;
}
/* Vùng chạm hai dấu ✕ nhỏ xíu: đủ 44px CẢ HAI CHIỀU. Đặt min-width mà quên
   min-height thì chiều cao thật chỉ ~18px — cô giáo đứng ở sân trường, một
   tay cầm điện thoại, chạm là trượt sang dòng dưới. */
@media (hover: none) {
  .lt-xoa, .lt-truc a {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ── In ra giấy ────────────────────────────────────────────────────────────
   Hiệu trưởng bấm Ctrl+P để dán bảng tin. Không có khối này thì tờ giấy in
   ra có: thanh 7 nút thẻ, băng trạng thái, các nút "＋ Thêm việc / Ban hành",
   thẻ ngày bị cắt ngang sang trang 2, và ở cuối là TOÀN BỘ khối Dạy thay mẫu
   với tên người bịa — tờ giấy có tên giả dán lên bảng tin trường. */
@media print {
  .dh-thanh-tab, .dh-nut-nho, .chip-loc, .lt-khung, .lt-xoa, .lt-truc a,
  .dh-nut-lon, .dh-nut-gui, .dh-goiy, .dh-loc-cs { display: none !important; }
  .lt-luoi { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .lt-the { break-inside: avoid; page-break-inside: avoid; border-color: #999 !important; }
  .lt-the.nay { box-shadow: none !important; }
  .lt-trongtam { border-left-color: #999 !important; }
  .lt-gio { background: none !important; color: #000 !important; font-weight: 700; padding: 0 !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   DỰ GIỜ – KIỂM TRA NỘI BỘ (14/8/2026) — đợt C.
   ════════════════════════════════════════════════════════════════════════════ */
.dg-nhom { border: 1px solid var(--vien); border-radius: 10px; padding: 10px 12px; margin-top: 10px; background: var(--the); }
.dg-nhom-ten {
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dam); font-weight: 700; margin-bottom: 6px;
}
.dg-tc { padding: 7px 0; }
.dg-tc + .dg-tc { border-top: 1px dashed var(--vien); }
.dg-tc-tt { font-size: 13.2px; line-height: 1.5; margin-bottom: 5px; }
.dg-tc-tt i { color: var(--chu-mo); }
.dg-trongtam {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--vang-sam); border: 1px solid var(--vang); border-radius: 5px; padding: 1px 5px;
  white-space: nowrap;
}
.dg-chitiet {
  margin-top: 6px; padding: 8px 10px; background: #f7f9fd; border-radius: 8px;
  font-size: 12.8px; line-height: 1.55;
}
.dg-chitiet div + div { margin-top: 4px; }
@media print {
  .dg-nhom, .dg-tc { break-inside: avoid; page-break-inside: avoid; }
}

/* Dải thẻ số của Dự giờ chỉ có 2–3 ô — dùng .dh-5the (ép 5 cột) thì hai ô co
   lại còn 1/5 màn, chừa ba cột trống, và trên điện thoại ô cuối span 2 rơi hẳn
   xuống hàng riêng. Lưới tự co vừa đúng số ô đang có. */
.luoi-thong-ke.dg-dai-so { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.luoi-thong-ke.dg-dai-so .o-so:last-child { grid-column: auto; }

/* ════════════════════════════════════════════════════════════════════════════
   ĐIỀU HÀNH v3 — PHƯƠNG ÁN 1b (bàn giao thiết kế 14/8/2026, hiệu trưởng chốt)
   Thanh bên phân nhóm nhiệm vụ · mỗi điểm trường một cột để so sánh ngang.
   Máy tính: sidebar 232px. Điện thoại: sidebar ẩn, thay bằng thanh tab dưới —
   BGH và phụ trách điểm thao tác chủ yếu trên điện thoại.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Khung: sidebar + vùng nội dung ── */
/* ══════════════════════════════════════════════════════════════════════════
   MÀN ĐIỀU HÀNH TRẢI RỘNG — thầy Chung chốt 15/8/2026
   Cột điều hướng bên trái đã bỏ, thay bằng thanh tab ngang.
   ══════════════════════════════════════════════════════════════════════════
   ⚠️ ĐÂY LÀ NGOẠI LỆ CÓ CHỦ Ý của quy tắc "mọi khung dùng --rong-khung"
   (mục 14 sổ dự án). Bảng điều hành có 5 thẻ số liệu + 3 thẻ điểm trường xếp
   ngang, bó trong 1320px thì thẻ nào cũng hẹp và chữ xuống dòng lắt nhắt.
   Các module khác GIỮ NGUYÊN --rong-khung — đừng nhân rộng ngoại lệ này.

   Cách trải rộng: nới ra hai bên bằng margin âm tính từ chính giữa, KHÔNG
   dùng transform — transform trên tổ tiên sẽ giết position:sticky của cột
   tên bảng công (bẫy đã dính hai lần, mục 12.4).
   Không để 100vw: màn 2560px mà trải hết thì mắt phải quét ngang cả sải tay,
   đọc một hàng bảng là lạc dòng. 1720px là chỗ dừng. */
.dh-rong { width: 100%; }

/* Chỉ nới ra khi màn THỰC SỰ rộng. Dưới 1400px thì khung 1320px đã gần kín
   màn rồi, nới thêm chẳng được bao nhiêu mà lại dễ sinh thanh cuộn ngang:
   100vw tính CẢ thanh cuộn dọc (~15px) nên phép trừ hụt là tràn sang phải.
   Trừ 48px là đã tính dư cho thanh cuộn. */
@media (min-width: 1400px) {
  .dh-rong {
    width: min(100vw - 48px, 1720px);
    margin-left: calc((100% - min(100vw - 48px, 1720px)) / 2);
  }
}

/* ── Thanh tab ngang (thay thanh bên) ── */
.dh-tab-hang {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  padding: 0 6px 0 14px; margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(20, 48, 107, .05);
}
/* KHÔNG cuộn ngang — thầy Chung: "bỏ hẳn thanh trượt cho đỡ rối".
   Chật thì XUỐNG DÒNG. Thanh trượt ngang vừa chiếm một dải xám dưới hàng tab,
   vừa giấu mất mấy mục cuối: người dùng không biết bên phải còn gì để mà kéo. */
.dh-tab-cuon { display: flex; flex-wrap: wrap; gap: 0 2px; flex: 1; min-width: 0; }
/* Tab dạng VIÊN bo tròn, giống hệt menu chính ở đầu trang — mỗi nút có ranh
   giới thật. Kiểu gạch-chân cũ để các mục dính thành một dòng chữ liền, nhìn
   không ra đâu là nút bấm; mà đây là chỗ điều hướng chính của cả module. */
.dh-tab-nut {
  border: 1px solid transparent; background: none; font: inherit; font-size: 13.5px;
  font-weight: 700; color: var(--chu); padding: 9px 15px; margin: 9px 3px 9px 0;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.dh-tab-nut:hover { background: #eef2f9; border-color: var(--vien); }
.dh-tab-nut.on {
  background: var(--dam); color: #fff; font-weight: 800; border-color: var(--dam);
}
/* Mục mở sang APP KHÁC (Thời khóa biểu). Viền nét đứt để phân biệt ngay với
   các tab đổi màn tại chỗ — bấm vào là rời khỏi Hồ sơ số, người dùng nên
   biết trước điều đó. */
.dh-tab-ngoai {
  border: 1px dashed var(--vien-dam); color: var(--dam);
  text-decoration: none; display: inline-flex; align-items: center;
}
.dh-tab-ngoai:hover { background: #eef2f9; border-style: solid; }
.dh-chon-hang a.chip-loc { text-decoration: none; border-style: dashed; }
.dh-tab-badge {
  background: #c0392b; color: #fff; font-size: 10px; font-weight: 800;
  border-radius: 999px; padding: 1px 6px; margin-left: 5px; vertical-align: 1px;
}
.dh-tab-phai {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  padding-right: 8px;
}
.dh-tab-ngay { font-size: 12.5px; color: var(--chu-mo); white-space: nowrap; }
.dh-than { display: flex; flex-direction: column; gap: 16px; }

/* Thanh tab ngang chỉ dành cho máy tính; điện thoại đi bằng thanh tab đáy
   (ngón cái với tới) + hàng chip cuộn ngang — giữ nguyên như thiết kế 3b. */
.chi-may-tinh { display: flex; }
@media (max-width: 900px) { .chi-may-tinh { display: none; } }

/* ── Năm thẻ số liệu ── */
.dh-kpi-luoi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px;
}
/* Mỗi thẻ mang màu trạng thái của chính nó: viền trái 4px + nền nhuộm rất
   nhạt. Năm thẻ trắng như nhau thì mắt không biết nhìn đâu trước — mà cái
   cần thấy đầu tiên chính là thẻ đang đỏ hoặc vàng.
   Nền nhuộm giữ ở mức RẤT nhạt để chữ vẫn đạt tương phản: chữ chính #1c2b4a
   trên #fdf6f5 vẫn trên 12:1. */
.dh-kpi-o {
  background: #fff; border: 1px solid var(--vien); border-left: 4px solid var(--vien-dam);
  border-radius: 14px; padding: 13px 16px 14px;
}
.dh-kpi-o.xanh { border-left-color: #1e7f4f; background: #f5fbf8; }
.dh-kpi-o.vang { border-left-color: #b7791f; background: #fffaf1; }
.dh-kpi-o.do   { border-left-color: #c0392b; background: #fdf6f5; }
.dh-kpi-o.navy { border-left-color: var(--dam); }
.dh-kpi-o.xam  { border-left-color: #c3cddf; }
.dh-kpi-o .nhan { font-size: 11.5px; font-weight: 700; color: var(--chu-mo); }
.dh-kpi-o .so { font-size: 27px; font-weight: 800; line-height: 1.15; margin: 3px 0 1px; }
/* Dấu "—" ở cỡ 27px là một gạch dài trông như lỗi hiển thị. Thu nhỏ lại và
   đẩy xuống cho ngang tầm chữ số, để nó đọc ra "chưa có số" chứ không phải
   "màn hình hỏng". */
.dh-kpi-o .so.trong { font-size: 20px; opacity: .55; }
.dh-kpi-o .phu { font-size: 11.5px; color: var(--chu-mo); }

/* Chip "dữ liệu thật": trước là băng cao chiếm trọn một dòng, nay một dòng
   mảnh — người mở app mỗi sáng chỉ cần biết đang chạy số thật hay số mẫu. */
.dh-chip-that {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: var(--ok-nen); color: var(--ok); border: 1px solid #bfe3d2;
  border-radius: 999px; padding: 5px 13px; font-size: 12px; font-weight: 600;
}
/* (Đã bỏ .dh-sb-* và .dh-noi cùng lúc bỏ thanh bên navy — 15/8/2026.) */

/* ── Đầu mỗi màn: nhãn vàng + tiêu đề + công tắc Sáng/Chiều — CHỈ điện thoại ── */
.dh-dau-man { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dh-nhan-vang {
  font-size: 11px; letter-spacing: .14em; font-weight: 800; color: var(--vang-sam);
}
.dh-tieu-man { font-size: 23px; font-weight: 800; color: var(--dam); margin-top: 2px; line-height: 1.25; }
.dh-buoi {
  display: flex; border: 1px solid var(--vien-dam); border-radius: 8px;
  overflow: hidden; background: #fff; flex-shrink: 0;
}
.dh-buoi button {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--chu-mo); padding: 8px 16px; min-height: 40px; cursor: pointer;
}
.dh-buoi button.on { background: var(--dam); color: #fff; }

/* (Dải trạng thái một hàng chữ .dh-dai-tt đã thay bằng năm thẻ .dh-kpi-o —
    xem khối "Năm thẻ số liệu" phía trên.) */

/* ── Mỗi điểm trường một cột ── */
.dh-cot-diem {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 12px; align-items: start;
}
/* MỘT THẺ LIỀN, viền trái mang màu trạng thái — không còn dải đầu thẻ tô đặc.
   Kiểu này vốn chỉ dùng cho điện thoại, nay lên mặc định cho mọi cỡ màn.
   Lý do: trường mới có MỘT cơ sở nên lưới auto-fit chỉ ra một cột, dải đầu
   thẻ tô đặc kéo dài hết bề ngang thành một băng xám khổng lồ hút hết mắt
   vào thứ ít quan trọng nhất, lại còn tách rời khỏi phần thân trắng bên dưới
   trông như hai khối chẳng liên quan. Viền trái 5px nói đúng chừng ấy màu. */
.dh-diem-cot {
  display: flex; flex-direction: column; gap: 0;
  background: #fff; border: 1px solid var(--vien);
  border-left: 5px solid var(--chu-nhat); border-radius: 13px; overflow: hidden;
}
.dh-diem-cot.xanh { border-left-color: #1e7f4f; }
.dh-diem-cot.vang { border-left-color: #8f5d14; }
.dh-diem-cot.do   { border-left-color: #c0392b; }

/* ── MÀU ĐỊNH DANH TỪNG ĐIỂM TRƯỜNG ──
   Sáu tông trầm, gán xoay vòng theo thứ tự cơ sở (xem hàm mauCoSo trong
   dieu-hanh.js). CỐ Ý không dùng xanh lá · vàng · đỏ vì ba màu đó đã mang
   nghĩa TRẠNG THÁI — lẫn vào là người đọc không biết màu đang nói điều gì.
   Đặt ở viền TRÊN + nền đầu thẻ, tách hẳn khỏi viền TRÁI của trạng thái. */
.cs1 { --cs: #2f5aa8; --cs-nen: #eef3fb; }
.cs2 { --cs: #17706b; --cs-nen: #eaf6f5; }
.cs3 { --cs: #6b4a9c; --cs-nen: #f2eefa; }
.cs4 { --cs: #a55b1e; --cs-nen: #fbf1e8; }
.cs5 { --cs: #a63d6a; --cs-nen: #fbeef3; }
.cs6 { --cs: #3f6d8c; --cs-nen: #eef4f8; }

/* Chip lọc mang cùng màu định danh: vạch trái khi chưa chọn, nền đầy khi
   đang chọn — bấm chip nào là mắt bắt ngay thẻ tương ứng bên dưới. */
.dh-loc-cs .chip-loc { border-left: 3px solid var(--cs, var(--vien-dam)); }
.dh-loc-cs .chip-loc.on {
  background: var(--cs, var(--dam)); border-color: var(--cs, var(--dam)); color: #fff;
}
/* Dùng biến có giá trị dự phòng thay cho bộ chọn [class*="cs"] — bộ chọn đó
   khớp cả những lớp khác tình cờ chứa "cs" (csvc chẳng hạn). Không có màu
   định danh thì mọi thứ tự rơi về mặc định, không hỏng gì. */
.dh-diem-cot { border-top: 4px solid var(--cs, transparent); }
.dh-diem-cot .dh-diem-dau { background: var(--cs-nen, transparent); }
.dh-diem-cot .dh-diem-dau .ten { color: var(--cs, var(--dam)); }
/* Dòng "người phụ trách · N lớp · N HS": --chu-nhat #5f7091 đủ 4,98 trên nền
   TRẮNG, nhưng đặt lên nền đầu thẻ đã nhuộm thì tụt còn 4,36–4,49. Đổi nền là
   phải đo lại — không suy ra được. #4d5b76 đưa cả sáu tông về trên 5,4. */
.dh-diem-cot .dh-diem-dau .phu { color: #4d5b76; }
.dh-diem-dau { background: none; color: var(--chu); border-radius: 0; padding: 13px 16px 7px; }
.dh-diem-dau .hang { display: flex; align-items: center; gap: 8px; }
.dh-diem-dau .ten { font-weight: 800; font-size: 14.5px; flex: 1; min-width: 0; color: var(--dam); }
/* Pill 11px là CHỮ NHỎ nên cần đủ 4,5:1 — xám #5f7091 trên #eef1f6 chỉ được
   4,40, vàng #b7791f trên #fdf3dc còn thấp hơn. Dùng bộ màu đã đo ở 12.6. */
.dh-diem-dau .pill {
  font-size: 11px; font-weight: 800; background: #eef1f6; color: #4d5b76;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.dh-diem-dau.xanh .pill { background: #e5f3ec; color: #17663f; }
.dh-diem-dau.vang .pill { background: #fdf3dc; color: #8f5d14; }
.dh-diem-dau.do   .pill { background: #fbe9e7; color: #a33024; }
.dh-diem-dau .phu { font-size: 11.5px; opacity: 1; color: var(--chu-nhat); margin-top: 2px; }
.dh-diem-than {
  background: none; border: 0; border-radius: 0;
  padding: 5px 16px 13px; display: flex; flex-direction: column; gap: 7px;
}
.dh-diem-dong { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.dh-diem-dong span { color: var(--chu-nhat); font-weight: 600; }
.dh-diem-dong b { font-weight: 800; }
.dh-diem-note {
  background: #fdf3dc; border-radius: 12px; padding: 10px 14px;
  font-size: 12px; color: #8a5a12; font-weight: 600; line-height: 1.5;
}

/* ── Khối "Cần Ban giám hiệu xử lý" ──
   Khối này là thứ Ban giám hiệu mở app để xem, nên nó phải NỔI HƠN mọi khối
   khác — nhưng chỉ khi thật sự có việc. Rỗng thì để trắng trơn như cũ. */
.dh-cho-khoi { background: #fff; border: 1px solid var(--vien); border-radius: 14px; overflow: hidden; }
.dh-cho-khoi.gap  { border-left: 5px solid #c0392b; box-shadow: 0 3px 14px rgba(192, 57, 43, .13); }
.dh-cho-khoi.luuy { border-left: 5px solid #b7791f; box-shadow: 0 3px 14px rgba(183, 121, 31, .12); }
.dh-cho-dau {
  padding: 12px 20px; font-weight: 800; font-size: 14px; color: var(--dam);
  border-bottom: 1px solid var(--ke);
}
.dh-cho-khoi.gap .dh-cho-dau  { background: #fdf6f5; }
.dh-cho-khoi.luuy .dh-cho-dau { background: #fffaf1; }
.dh-cho-hang {
  display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  border-bottom: 1px solid var(--ke); flex-wrap: wrap;
}
.dh-cho-hang:last-child { border-bottom: 0; }
.dh-cho-hang .tt { flex: 1; min-width: 140px; }
.dh-cho-hang .tt b { font-size: 13px; font-weight: 600; display: block; line-height: 1.45; }
.dh-cho-hang .tt small { font-size: 11.5px; color: var(--chu-nhat); display: block; margin-top: 1px; }
.dh-cho-xong { font-size: 12px; font-weight: 800; color: #1e7f4f; }
.dh-pill {
  font-size: 10.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
/* Cùng bộ màu pill đã đo ở 12.6 — chữ 10,5px thì 4,5:1 là mức tối thiểu */
.dh-pill.do    { background: #fbe9e7; color: #a33024; }
.dh-pill.vang  { background: #fdf3dc; color: #8f5d14; }
.dh-pill.xanh  { background: #e5f3ec; color: #17663f; }
.dh-pill.navy  { background: #e8eefb; color: var(--dam); }
.dh-pill.xam   { background: #eef1f6; color: #4d5b76; }
.dh-nut-hd {
  padding: 8px 14px; min-height: 40px; border-radius: 8px; border: 0;
  background: var(--dam); color: #fff; font: inherit; font-weight: 700; font-size: 12px;
  cursor: pointer; flex-shrink: 0;
}
.dh-nut-hd.xanh { background: #1e7f4f; }
.dh-nut-hd.vien { background: #fff; color: var(--dam); border: 1px solid var(--vien-dam); }

/* ── Nhật ký điều hành, cuối mọi màn ── */
.dh-nk-khoi {
  background: #fff; border: 1px solid var(--vien); border-radius: 14px;
  padding: 14px 20px; margin-top: auto;
}
.dh-nk-khoi > b {
  display: block; font-size: 11px; letter-spacing: .1em; font-weight: 800;
  color: var(--chu-nhat); margin-bottom: 8px;
}
.dh-nk-khoi .dong { display: flex; gap: 12px; padding: 4px 0; font-size: 12.5px; }
.dh-nk-khoi .gio { color: var(--vang-sam); font-weight: 800; flex-shrink: 0; min-width: 42px; }
.dh-nk-khoi .chu { color: var(--chu-mo); line-height: 1.5; }

/* Thanh tab dưới chỉ hiện trên điện thoại */
.dh-tabm { display: none; }

/* ════════════════ ĐIỆN THOẠI ════════════════ */
@media (max-width: 900px) {
  /* Điện thoại: .dh-rong thu về đúng bề ngang màn, không nới ra hai bên */
  .dh-rong { width: 100%; margin-left: 0; }
  .dh-than { gap: 14px; }
  .dh-tieu-man { font-size: 19px; }
  /* Hai thẻ số liệu một hàng — năm thẻ xếp dọc thì phải cuộn hết màn mới
     thấy con số cuối, mà năm con số này vốn để LIẾC. */
  .dh-kpi-luoi { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dh-kpi-o { padding: 11px 13px 12px; }
  .dh-kpi-o .so { font-size: 23px; }
  .dh-cot-diem { grid-template-columns: 1fr; }
  /* Kiểu thẻ viền trái nay là mặc định ở mọi cỡ màn — ở đây chỉ thu lề lại */
  .dh-diem-dau { padding: 12px 14px 6px; }
  .dh-diem-than { padding: 4px 14px 12px; gap: 6px; }
  .dh-diem-note { border-radius: 0; }
  /* Việc chờ xử lý: nút hành động chiếm trọn bề ngang, chạm bằng ngón cái */
  .dh-cho-hang { flex-wrap: wrap; padding: 12px 14px; }
  .dh-cho-hang .tt { flex: 1 1 100%; order: 2; }
  .dh-cho-hang .dh-pill { order: 1; }
  .dh-cho-hang .dh-nut-hd { order: 3; flex: 1 1 100%; min-height: 44px; font-size: 13.5px; }
  .dh-nk-khoi { padding: 12px 14px; }

  .dh-tabm {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: sticky; bottom: 0; z-index: 20;
    background: #fff; border-top: 1px solid var(--vien);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom, 0px));
    margin: 0 -14px -20px;
  }
  .dh-tabm button {
    border: 0; background: none; font: inherit; cursor: pointer;
    text-align: center; padding: 5px 0; min-height: 44px;
  }
  .dh-tabm .bi { font-size: 17px; line-height: 1.2; }
  .dh-tabm .ch { font-size: 10.5px; font-weight: 700; color: var(--chu-nhat); }
  .dh-tabm button.on .ch { color: var(--dam); font-weight: 800; }
}

@media print {
  .dh-tab-hang, .dh-tabm, .dh-buoi, .dh-nut-hd { display: none !important; }
  /* In ra giấy thì khổ A4 quyết định bề ngang, không nới ra hai bên */
  .dh-rong { width: 100%; margin-left: 0; }
  .dh-diem-cot, .dh-cho-hang { break-inside: avoid; page-break-inside: avoid; }
}

/* Hàng chip dẫn tới 5 màn ngoài thanh tab — chỉ có nghĩa trên điện thoại,
   máy tính đã có đủ 9 mục ở thanh bên. */
.chi-dien-thoai { display: none; }
@media (max-width: 900px) { .chi-dien-thoai { display: flex; } }

/* ════════════════════════════════════════════════════════════════════════════
   VÁ SAU SOÁT ĐỐI KHÁNG — Điều hành v3 (14/8/2026)
   Nằm CUỐI TỆP để thắng khai báo phía trên. Ba nhóm: đọc được · chạm được ·
   in được. Ghi rõ số đo vì đây toàn là chỗ đã đo bằng máy, không phải cảm tính.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. ĐỌC ĐƯỢC ──────────────────────────────────────────────────────────
   Design Tokens của bản bàn giao đẹp nhưng vài cặp màu không đạt ngưỡng đọc
   4,5:1. Người dùng là cô giáo đứng ngoài sân trường, nắng, điện thoại nhỏ —
   nên chỗ nào là CHỮ THẬT thì ưu tiên đọc được, chỗ nào là trang trí thì giữ
   đúng token. Số đo dưới đây tính bằng máy (tỉ lệ tương phản WCAG).            */

/* #8494b3 trên trắng chỉ 3,06:1 — dùng cho nhãn cột 10–12,5px thì mờ.
   #5f7091 đạt 4,98:1 mà vẫn giữ sắc xanh xám của bộ màu. */
:root { --chu-nhat: #5f7091; }

/* (Hai dòng vá màu pill đã dọn — giá trị nay nằm ngay tại chỗ khai báo
   `.dh-pill.*` ở khối giữa tệp, đo được 6,03 và 5,08. Để cả hai nơi thì
   sửa một chỗ không ăn thua, đúng cái bẫy nói ở khối dưới đây.) */

/* 🔴 BA DÒNG CŨ Ở ĐÂY ĐÃ BỎ (15/8/2026) — chúng tô nền đặc cho đầu thẻ điểm
   trường và đặt chữ phụ màu TRẮNG, phục vụ kiểu "đầu thẻ tô đặc" nay không
   còn. Đầu thẻ giờ nền trắng, chữ navy.

   ⚠️ CHÍNH LÀ CÁI BẪY ĐÃ GHI Ở MỤC 12.6 SỔ DỰ ÁN, lần này dính thêm một lần:
   sửa `.dh-diem-dau` ở khối GIỮA tệp (~dòng 1993) mà quên ba dòng này ở CUỐI
   tệp, nên nền xám và chữ trắng vẫn thắng — ra màn hình là chữ navy nằm trên
   nền xám, thầy Chung nhìn thấy ngay là "quá mờ".
   QUY TẮC: đụng vào `.dh-diem-*`, `.dh-pill`, `--chu-nhat`, `--sb-mo` thì
   PHẢI grep cả tệp trước khi sửa — cuối tệp còn một khối vá tương phản nữa. */

/* Nhãn nhóm và chân thanh bên: #7d92c4 trên navy chỉ 4,07:1, mà đây là chỉ
   dẫn điều hướng chính. #8ea3d2 đạt 5,00:1. */
:root { --sb-mo: #8ea3d2; }

/* Đường kẻ giữa các dòng hàng chờ: #edf1f8 trên trắng ≈ 1,06:1 — mắt không
   thấy vạch nào. Dùng luôn --vien (1,27:1) cho có ranh giới. */
.dh-cho-hang { border-bottom-color: var(--vien); }

/* Nút GỬI lúc chưa đủ điều kiện: opacity .45 hạ cả nền lẫn chữ xuống 2,63:1 —
   nút quan trọng nhất của phụ trách điểm mà gần như không đọc được ngoài sáng.
   (Bản mẫu dùng trắng trên #c3cddf còn tệ hơn: 1,60:1 — chỗ này thiết kế sai,
   không chép theo.) Chữ đậm trên nền xám nhạt: 7,04:1. */
.dh-nut-gui.mo {
  opacity: 1; background: #e3e9f3; color: #4d5b76;
  border: 1px solid var(--vien-dam); cursor: not-allowed;
}

/* Hai chỗ chữ TRẮNG trên nền vàng: token #c8963e chỉ 2,66:1. Nền tối hơn
   #8f671c đạt 5,09:1, mắt vẫn đọc ra là vàng đồng. */
.kd-thanh .nut-xuat-bc { background: #8f671c; }
.kd-thanh .nut-xuat-bc:hover { background: #7d5a16; }
/* Nhãn Mức 2 của Trường chuẩn cũng là chữ trắng trên nền vàng — cùng cảnh. */
.lv-tag.m2 { background: #8f671c; }

/* ── 2. CHẠM ĐƯỢC ─────────────────────────────────────────────────────────
   Quy tắc dự án: mọi nút chạm ≥44px trên máy cảm ứng. Ba lớp nút mới và
   công tắc Sáng/Chiều chưa có tên trong danh sách nào.                        */
@media (hover: none) {
  .dh-nut-hd, .dh-buoi button, .dh-tab-nut {
    min-height: 44px; display: inline-flex; align-items: center;
  }
  .dh-buoi button { justify-content: center; }
}

/* ── 3. ĐIỆN THOẠI ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 🔑 Thanh tab dưới và cột tên bảng công đều dùng position:sticky. Tổ tiên
     nào có overflow:hidden là sticky neo vào hộp đó thay vì vào cửa sổ →
     không dính nữa. Bẫy này đã trả giá HAI lần (cột dính Bảng công đợt C,
     thanh tab đáy đợt v3), cả hai lần thủ phạm là .dh-khung — hộp bo góc bọc
     ngoài. Nay .dh-khung đã bỏ cùng thanh bên, .dh-rong KHÔNG đặt overflow.
     ⚠️ Đừng thêm overflow:hidden vào .dh-rong hay .dh-than để bo góc gì đó. */

  /* Dòng hàng chờ: nút phải xuống dưới cùng và chiếm trọn bề ngang. Các dòng
     cũ phát ra .dh-nut-nho (không có order → 0 → nhảy lên TRƯỚC cả nhãn lẫn
     nội dung). Gom cả hai lớp nút vào một quy tắc. */
  .dh-cho-hang .dh-nut-hd,
  .dh-cho-hang .dh-nut-nho {
    order: 3; flex: 1 1 100%; min-height: 44px; font-size: 13.5px;
    justify-content: center;
  }
}

/* ── Dải "Bố trí dạy thay" — bắc cầu sang app Thời khóa biểu ───────────────
   Chỉ hiện khi thật sự có người vắng buổi đang xem. Viền trái vàng vì đây là
   việc CẦN LÀM, không phải thông báo suông. */
.dh-sang-tkb {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fffaf1; border: 1px solid var(--vien); border-left: 5px solid #8f5d14;
  border-radius: 13px; padding: 13px 17px; margin-top: 16px;
}
.dh-sang-tkb .chu { flex: 1; min-width: 260px; font-size: 13.5px; line-height: 1.55; }
.dh-sang-tkb .chu b { color: var(--dam); }
.dh-sang-tkb .chu span { display: block; font-size: 12px; color: var(--chu-mo); margin-top: 3px; }
.dh-sang-tkb .nut {
  background: var(--dam); color: #fff; border-radius: 10px; padding: 11px 18px;
  font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center; flex-shrink: 0;
}
.dh-sang-tkb .nut:hover { background: #1e4593; }

/* ── Lưới thẻ tick: Cơ sở vật chất · Phiếu kiểm tra điểm trường ────────────
   Thay cho các hàng tràn hết bề ngang. Trên màn 1720px, nhãn nằm mép trái mà
   nút nằm mép phải thì mắt phải quét ngang cả sải tay mới biết mục nào đang
   chọn gì — và càng rộng màn càng tệ. Thẻ giữ nhãn với nút cạnh nhau. */
.dh-luoi-tick {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 10px; margin-bottom: 4px;
}
.dh-o-tick {
  background: #fff; border: 1px solid var(--vien); border-radius: 12px;
  padding: 11px 14px 12px;
}
.dh-o-tick .nhan { font-size: 13px; font-weight: 700; color: var(--dam); margin-bottom: 8px; }
.dh-o-tick .nut { display: flex; gap: 7px; flex-wrap: wrap; }
.dh-o-tick .nut .chip-loc { margin: 0; }

/* Khai người vắng (màn Điểm danh & Chấm công) */
.dh-vang-ds {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 10px; margin-top: 10px;
}
.dh-vang-o {
  background: #fff; border: 1px solid var(--vien); border-left: 4px solid #8f5d14;
  border-radius: 12px; padding: 11px 14px 12px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.dh-vang-o > b { flex: 1 1 100%; font-size: 13.5px; color: var(--dam); }
.dh-vang-o .dh-o-nhap { width: auto; min-width: 118px; margin-top: 0; }
.dh-vang-den {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--chu-mo);
}
.dh-vang-den .dh-o-nhap { min-width: 0; }

/* ── THỜI KHÓA BIỂU (thoi-khoa-bieu.js) ───────────────────────────────────── */
.tkb-tai {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--vien); border-left: 4px solid var(--dam);
  border-radius: 14px; padding: 14px 18px;
}
.tkb-tai-chu { flex: 1; min-width: 240px; line-height: 1.5; }
.tkb-tai-chu b { display: block; font-size: 14px; color: var(--dam); }
.tkb-tai-chu span { font-size: 12px; color: var(--chu-mo); }
.tkb-nut-hang { display: flex; gap: 9px; flex-wrap: wrap; flex-shrink: 0; }
.tkb-nut-tai, .tkb-nut-mau {
  border-radius: 10px; padding: 11px 18px; min-height: 44px;
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap;
}
.tkb-nut-tai { background: var(--dam); color: #fff; border: 1px solid var(--dam); }
.tkb-nut-tai:hover { background: #1e4593; }
/* Tải mẫu là bước ĐẦU nhưng không phải việc chính — nút viền, không tô đặc,
   để nút nạp tệp vẫn là chỗ mắt nhìn vào trước. */
.tkb-nut-mau { background: #fff; color: var(--dam); border: 1px solid var(--vien-dam); }
.tkb-nut-mau:hover { background: #eef2f9; }
.tkb-nguon {
  background: var(--o-con); border: 1px solid var(--vien); border-radius: 12px;
  padding: 10px 15px; font-size: 12.5px; color: var(--chu); line-height: 1.6;
}
.tkb-canh { color: #8f5d14; font-weight: 600; }
.tkb-tom { font-size: 13px; color: var(--chu-mo); margin: 10px 0 6px; }
/* Hàng chọn lớp/giáo viên có thể rất dài (25 lớp, 35 người) — cho xuống dòng
   chứ KHÔNG cuộn ngang, cùng lý do đã bỏ thanh trượt ở hàng tab. */
.tkb-cuon-chon { flex-wrap: wrap; margin-bottom: 10px; }
.tkb-bang td, .tkb-bang th { vertical-align: middle; }
.tkb-bang tr.tkb-dau-thu td { border-top: 2px solid var(--vien-dam); }
.tkb-trong { color: var(--chu-nhat); }
.tkb-ngay td { min-width: 108px; font-size: 12px; }
.tkb-ngay small { color: var(--chu-mo); }

/* ── LÊN LỚP (len-lop.js) ─────────────────────────────────────────────────── */
.ll-tom-tat {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px; margin: 12px 0 14px;
}
.ll-o {
  background: var(--o-con); border: 1px solid var(--vien);
  border-radius: 12px; padding: 12px 10px; text-align: center;
}
.ll-o b { display: block; font-size: 21px; color: var(--dam); line-height: 1.15; }
.ll-o span { display: block; font-size: 12px; color: var(--chu-mo); margin-top: 3px; }
.ll-o.xanh b { color: var(--ok); }
.ll-o.vang b { color: var(--canh); }
.ll-o.do b { color: var(--thieu); }

/* ═══ MÀN THIẾT LẬP (js/thiet-lap.js): Cài đặt · Thông tin trường · Danh sách mời ═══
   Mobile-first: mỗi ô một dòng, nhãn nằm trên. Từ 720px trở lên xếp hai cột. */
.tl-nhom {
  margin: 14px 0; padding: 14px; background: var(--the);
  border: 1px solid var(--vien); border-radius: var(--bo-goc);
}
.tl-nhom h4 { margin: 0 0 10px; font-size: 14.5px; }
.tl-o { display: block; margin-bottom: 12px; }
.tl-o:last-child { margin-bottom: 0; }
.tl-nhan { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.tl-o input {
  width: 100%; font: inherit; font-size: 14.5px; padding: 9px 11px;
  border: 1px solid var(--vien-dam); border-radius: 9px; background: #fff; color: var(--chu);
}
.tl-o input:focus { outline: 2px solid var(--chinh); outline-offset: -1px; }
.tl-o small { display: block; margin-top: 3px; font-size: 12px; color: var(--chu-mo); line-height: 1.5; }
@media (min-width: 720px) {
  .tl-nhom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .tl-nhom h4 { grid-column: 1 / -1; margin-bottom: 0; }
  .tl-o { margin-bottom: 0; }
}

.tl-day-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 4px; }
.tl-bao { font-size: 13px; color: var(--chu-mo); }
.nut-chinh {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  background: var(--chinh); color: #fff; border: 0; border-radius: 10px; padding: 11px 18px;
}
.nut-chinh:hover { filter: brightness(1.08); }
.nut-chinh:disabled { opacity: .55; cursor: default; }

.tl-dan { margin: 12px 0; border: 1px dashed var(--vien-dam); border-radius: var(--bo-goc); padding: 12px 14px; }
.tl-dan summary { font-weight: 700; font-size: 14px; cursor: pointer; }
.tl-dan textarea {
  width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  padding: 10px; border: 1px solid var(--vien-dam); border-radius: 9px; margin-bottom: 10px;
}

.tl-tien-do { font-size: 15px; margin: 6px 0 12px; }
.tl-buoc { display: flex; flex-direction: column; gap: 10px; }
.tl-mot-buoc {
  display: flex; align-items: center; gap: 12px; padding: 13px 14px;
  background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-goc);
}
.tl-mot-buoc[data-di-toi] { cursor: pointer; }
.tl-mot-buoc[data-di-toi]:hover { border-color: var(--chinh); }
.tl-mot-buoc.xong { border-left: 4px solid var(--ok); }
.tl-mot-buoc.chua { border-left: 4px solid var(--canh); }
.tl-dau {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.tl-mot-buoc.xong .tl-dau { background: var(--ok); color: #fff; }
.tl-mot-buoc.chua .tl-dau { background: var(--kem); color: var(--chu-mo); }
.tl-viec { flex: 1 1 auto; font-size: 14px; line-height: 1.5; }
.tl-viec small { color: var(--chu-mo); }
.tl-mui { flex: 0 0 auto; font-size: 22px; color: var(--chu-nhat); }

/* ── 4. IN RA GIẤY ────────────────────────────────────────────────────────── */
@media print {
  /* overflow:hidden trên tổ tiên làm trình duyệt cắt phần tràn khi phân trang —
     bảng công và lịch tuần (thứ sinh ra để in) có nguy cơ mất từ trang 2.
     Hộp bọc .dh-khung đã bỏ; giữ dòng này phòng khi có hộp bọc mới. */
  .dh-rong, .dh-than { overflow: visible !important; }
  /* Khổ A4 ~794px lọt vào mốc 900px nên hàng chip điện thoại bật lên, chip bên
     trong lại bị ẩn → còn một dải trống giữa tờ giấy. */
  .chi-dien-thoai { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CỔNG CHUNG NHIỀU TRƯỜNG — js/cong-truong.js
   Màn khai mã trường · màn đăng ký sử dụng · đường lùi đổi trường.
   Đặt ở CUỐI tệp có chủ ý: khối .cong-hop gốc nằm ở đầu tệp (dòng ~65) và
   khối điện thoại ở dòng ~1413, cả hai đều khai .cong-hop ở cấp gốc — muốn
   đè được thì phải đứng sau. Đây chính là món nợ 60 bộ chọn trùng ở mục 12.6
   sổ dự án; chưa dọn được thì ít nhất đừng chen vào giữa.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Màn đăng ký cao hơn màn hình điện thoại. Khung gốc dùng align-items:center,
   nội dung cao hơn khung thì phần ĐẦU bị cắt và không cuộn tới được — đây là
   lỗi kinh điển của flex canh giữa. Cách chữa: canh đầu + margin:auto, hộp
   vẫn nằm giữa khi ngắn mà cuộn được đủ khi dài. */
.cong-vao { overflow-y: auto; align-items: flex-start; }
.cong-hop { margin: auto; }

/* ── Ô nhập ── */
.cong-hop .cong-nhom { text-align: left; margin-bottom: 13px; }
.cong-hop .cong-nhan {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--chu); margin-bottom: 6px;
}
.cong-hop .cong-nhan .sao { color: var(--thieu); }
.cong-hop .cong-o {
  width: 100%; font: inherit; font-size: 16px;   /* 16px: dưới mức này iPhone tự phóng to trang */
  color: var(--chu); background: #fff;
  /* Viền #a8b8d4 chứ KHÔNG dùng var(--vien-dam) #cdd8ea: màu kia chỉ đạt
     1,44:1 trên nền trắng, trong khi WCAG 1.4.11 đòi 3:1 cho ranh giới ô nhập.
     Ngoài nắng hoặc khi hạ độ sáng màn hình, 9 ô của màn đăng ký tan vào nền
     trắng — chỉ còn thấy 9 dòng nhãn, không rõ chỗ nào bấm được. */
  border: 1.5px solid #a8b8d4; border-radius: 11px; padding: 11px 13px;
  transition: border-color .15s, box-shadow .15s;
}
/* Chữ gợi ý trong ô là NƠI DUY NHẤT chứa mấy thông tin quan trọng ("5 chữ số",
   "dùng để đăng nhập hệ thống"), không lặp lại ở đâu. Để trình duyệt tự chọn
   màu thì phần lớn ra xám nhạt dưới 4,5:1 — thầy cô không đọc được dòng nhắc
   dùng Gmail nào, điền nhầm là cấp xong tài khoản lại không đăng nhập được. */
.cong-hop .cong-o::placeholder { color: #6b7a99; opacity: 1; }
.cong-hop .cong-o:focus {
  outline: none; border-color: var(--chinh);
  box-shadow: 0 0 0 3px rgba(42, 92, 184, .13);
}
.cong-hop .cong-mach {
  font-size: 12.2px; color: var(--chu-mo); line-height: 1.55; margin-top: 6px;
}

/* ── Nút chính: nền navy, phân biệt hẳn với hai nút phụ bên dưới ── */
.cong-hop .nut-google.cong-chinh {
  margin-top: 4px; background: var(--dam); color: #fff; border-color: var(--dam);
}
.cong-hop .nut-google.cong-chinh:hover {
  background: var(--dam-2); border-color: var(--dam-2);
  box-shadow: 0 4px 14px rgba(20, 48, 107, .22);
}

/* ── Vạch ngăn có chữ giữa dòng ── */
.cong-hop .cong-ngan {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 12px; font-size: 12.6px; color: var(--chu-mo);
}
.cong-hop .cong-ngan::before,
.cong-hop .cong-ngan::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--vien);
}

/* ── Biểu mẫu đăng ký ── */
.cong-hop .cong-form { margin-bottom: 4px; }
.cong-hop .cong-lienhe {
  margin-top: 12px; font-size: 13px; color: var(--chu-mo); line-height: 1.6;
  /* Địa chỉ thư điện tử không có dấu cách để xuống dòng — địa chỉ dài thò ra
     khỏi hộp trên màn hình 320px. */
  overflow-wrap: anywhere;
}
.cong-hop .cong-chep {
  width: 100%; margin-top: 9px; font-family: inherit; font-size: 13px;
  line-height: 1.55; color: var(--chu); background: #fff;
  border: 1px solid var(--vien-dam); border-radius: 9px; padding: 9px; resize: vertical;
}
.cong-hop .hop-loi.xong {
  background: var(--ok-nen); color: var(--ok); border: 1px solid #bfe8cd;
}

/* ── Đường lùi "nhập lại mã trường" trên cổng đăng nhập của từng trường ── */
.cong-hop .cong-lui {
  margin-top: 18px; font-size: 13px; text-align: center;
}
.cong-hop .cong-lui a { color: var(--chu-mo); text-decoration: none; }
.cong-hop .cong-lui a:hover { color: var(--chinh); text-decoration: underline; }

/* ── Băng xem thử: đường về cổng ── */
.bang-xem-thu a { color: inherit; text-decoration: underline; white-space: nowrap; }

/* ── Điện thoại ── */
@media (max-width: 560px) {
  .cong-vao { padding: 14px; }
  .cong-hop .cong-nhom { margin-bottom: 11px; }
  .cong-hop .cong-ngan { margin: 16px 0 10px; }
  .cong-hop .cong-o { padding: 10px 12px; }
}