/* ============================================================
   thtruongmau-v2 — giao diện theo phong cách app bản mẫu THCS
   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 bản mẫu THCS */
  --dam: #187274;          /* navy — nền hero, header, thẻ đậm */
  --dam-2: #1f8f8b;        /* navy sáng hơn — gradient */
  --chinh: #1a8a8c;        /* màu nhấn liên kết, nút */
  --vang: #f5a524;         /* 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: #a8431a;
  /* ── Bảng màu MẦM NON (thầy Chung duyệt 10/9/2026, đo trên happysun.edu.vn) ──
     xanh ngọc #187274 + CAM #e7732c; KHÔNG dùng xanh lá #1ba843 (phủ 4 đơn vị
     diện tích trên trang mẫu — một cái chấm). KHÔNG chồng cam lên xanh ngọc. */
  --nang: #fddc95;         /* vàng nắng — khẩu hiệu, con số trên hero tối */
  --nang-dam: #f6c54a;     /* vàng đậm — tiêu đề SỨ MỆNH, MỤC TIÊU */
  --cam: #e7732c;          /* cam — điểm nhấn đặc trên nền sáng */
  --dao: #fae4d7;          /* cam đào nhạt — dải xem thử */
  --mint: #d3e4e5;         /* xanh bạc hà nhạt */     /* vàng đồng — chữ trên nền sáng (trước #c8901c) */
  --kem: #eef5f5;          /* nền trang (trước #f4f7fc) */
  --the: #ffffff;
  --chu: #16302f;          /* trước #16202f */
  --chu-mo: #4d6a69;       /* trước #5d6b81 */
  --chu-nhat: #5a7979;     /* chữ mờ nhất — nhãn cột, chú thích phụ */
  --vien: #d7e7e7;         /* viền thẻ (trước #e4e9f2) */
  --vien-dam: #bcd8d8;     /* viền ô nhập, khung công tắc */
  --ke: #e8f3f3;           /* đường kẻ trong bảng, giữa các dòng */
  --o-con: #f4fafa;        /* nền ô lồng trong thẻ trắng */
  --sb-phu: #a9d8d6;       /* chữ phụ trên nền navy (sidebar) */
  --sb-mo: #7fb8b5;        /* 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: 1440px;   /* mầm non: đúng bề rộng bản thiết kế đã duyệt (tiểu học 1320px) */
  /* Hoa văn chấm mờ trên các mảng navy (đặc trưng bản mẫu THCS) */
  --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(24, 114, 116, .14);
}
/* Logo đã tự có nền navy và bo góc riêng (bán kính = 0,157 cạnh) nên KHÔNG
   bọc thêm nền và padding nữa — bọc vào là hiện một vòng navy thừa quanh
   góc bo. Bán kính dưới đây bằng đúng bán kính vẽ trong ảnh. */
.cong-hop .logo {
  width: 64px; height: 64px; border-radius: 10px; object-fit: contain;
  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(26, 138, 140, .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(10, 60, 62, .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ản mẫu THCS).
   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ản mẫu THCS. */
@media (min-width: 1600px) {
  .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 1000px) ──
   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
   bản mẫu THCS: đầu trang chỉ còn một hàng, cao đúng 66px.
   ⚠ Mốc từng là 1360px và đó là LỖI trên máy tính: Windows phóng to 125–150%
   (mặc định của nhiều laptop Dell màn 14") làm màn 1920px chỉ còn 1280px CSS,
   tụt dưới 1360 → máy tính hiện ☰ như điện thoại (các cô báo 24/8/2026).
   Nay ☰ CHỈ dành cho dưới 1000px; dải 1000–1359 là máy tính, menu trải thành
   hàng riêng — xem khối "MÁY TÍNH PHÓNG TO" ở CUỐI TỆP. */
@media (max-width: 999px) {
  .dau-trang .khung { position: relative; flex-wrap: nowrap; }
  /* Tên trường CANH GIỮA trên điện thoại (27/8/2026). Phải là flex:1 1 auto
     chứ không phải margin-right:auto: margin-auto chỉ đẩy khoảng trống sang
     phải, khối tên vẫn co đúng bề rộng chữ nên text-align:center chẳng có chỗ
     nào mà căn. Cho khối chiếm trọn quãng giữa logo và nút ☰ thì hai dòng
     (tên trường · địa chỉ) mới nằm chính giữa được. Logo 46px và nút ☰ 44px
     gần bằng nhau nên tâm khối cũng gần đúng tâm màn hình.
     ⚠ KHÔNG thu nhỏ cỡ chữ để ép một dòng — thầy đã chốt: trường nào tên dài
     thì cứ để rơi xuống hai dòng, bóp chữ nữa thì đọc không ra. */
  .ten-khu { flex: 1 1 auto; margin-right: 0; min-width: 0; text-align: center; }
  .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; }
  /* ⚠ PHẢI đổi sang display:block. Khai báo gốc .khu-tai-khoan là display:flex
     (xếp NGANG cho đầu trang màn rộng). Trong bảng ☰ thì hộp tài khoản được
     hạ xuống position:static — thành ra nó là ô flex thứ hai nằm CẠNH chip,
     mỗi thứ chiếm nửa bề ngang: chip bị bóp lệch sang trái, hộp thành cột hẹp
     bên phải chữ rơi mỗi dòng một hai từ (ảnh cô gửi 27/8/2026). */
  .khu-dieu-huong .khu-tai-khoan {
    display: block; 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 { display: flex; 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.
     72.1-DA-SOI (28/8/2026): cha RUỘT là .khu-tai-khoan (#khu-tai-khoan trong
     index.html) — khai báo gốc `.khu-tai-khoan { display: flex }`, và ĐÃ hạ về
     block ngay trên đây. An toàn. Hộp này do JS sinh (supabase-ket-noi.js) nên
     dò cây DOM trong index.html KHÔNG thấy — phải soi tay. */
  .khu-dieu-huong .hop-tai-khoan {
    position: static; margin-top: 8px; min-width: 0; width: 100%;
    box-shadow: none;
  }
}
/* Bo GÓC chứ không cắt tròn. Trước 20/8/2026 logo là con dấu tròn của trường
   nên border-radius:50% vừa khít; logo Quản trị số là hình vuông bo góc, cắt
   tròn thì xén mất bốn góc và một đoạn đầu ba thanh. Nền trắng + padding giữ
   lại để logo nổi trên dải đầu trang màu navy. */
.logo-truong {
  width: 46px; height: 46px; border-radius: 10px; 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: 8px 12px; 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(--dao); color: var(--vang-sam); font-size: 13.5px; font-weight: 700;
  padding: 8px 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ủ — MẦM NON ═══
   Dựng đúng bản thiết kế thầy Chung duyệt 10/9/2026 (MẦM NON/giao-dien/mau-duyet/).
   Nền: sáng góc trên trái, tối dần xuống chân (đo từ ảnh mẫu #27a29d → #065255).
   Ảnh cô và các bé bên phải, MỜ DẦN VÀO NỀN BẰNG MASK — làm mờ chính ảnh, không
   phủ lớp màu lên ảnh: cam chồng xanh ngọc thì thành nâu ô-liu đục (bài học 10/9).
   Hai lớp ảnh trong .anh: ảnh riêng của trường (--anh-truong, js/app.js) nằm trên;
   trường chưa gửi ảnh thì 404 và lộ ảnh dùng chung img/anh-hero-mn.jpg. */
.hero {
  position: relative; color: #fff; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(58% 78% at 6% 0%, rgba(58, 192, 182, .55), transparent 64%),
    linear-gradient(172deg, #168788 0%, #117274 46%, #0a5c5f 78%, #064f52 100%);
}
.hero .anh {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  background-image: var(--anh-truong, none), url('img/anh-hero-mn.jpg');
  background-position: right center, right center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, .55) 27%, #000 42%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 14%, rgba(0, 0, 0, .55) 27%, #000 42%);
}
/* Lớp phủ màu của bản tiểu học: mầm non KHÔNG dùng (xem đầu khối). */
.hero .phu { display: none; }
.trang-tri { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; z-index: 1; pointer-events: none; }
/* lá giữa và lá trên chỉ hiện khi lề trái đủ rộng, không đè lên biểu tượng */
@media (max-width: 1679px) { .trang-tri .xa { display: none; } }
@media (min-width: 1100px) and (max-width: 1499px) { .hero .anh { width: 56%; } }
/* 1100–1299px: ảnh hiện rõ từ ~743px mà cột chữ tới 776px → cuối dòng SỨ MỆNH nằm trên mặt cô
   giáo (soát 10/9). Thu ảnh và cột chữ lại; tên trường có thể xuống hai dòng, chấp nhận. */
@media (min-width: 1100px) and (max-width: 1299px) { .hero .anh { width: 48%; } .hero .chu { max-width: 590px; } }
/* Màn hẹp: ảnh thành dải trên cùng, mờ dần xuống; chữ bắt đầu ngay chỗ ảnh tan. */
@media (max-width: 1099px) {
  .hero .anh {
    left: 0; width: auto; bottom: auto; height: min(47.4vw, 360px);
    background-position: center, center;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero .khung { padding-top: calc(min(47.4vw, 360px) - 20px) !important; }
  .trang-tri { display: none; }
}
.hero .khung { position: relative; z-index: 2; max-width: var(--rong-khung); margin: 0 auto; padding: 46px 16px 18px; }
@media (min-width: 1100px) { .hero .chu { max-width: 760px; } }
.hieu-bai {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #e3f3f2;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 8px 18px;
  margin-bottom: 16px; background: rgba(255, 255, 255, .08);
}
.hero h1 {
  font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; letter-spacing: 0;
  text-transform: uppercase; line-height: 1.12; text-shadow: 0 2px 16px rgba(0, 0, 0, .28);
  margin-bottom: 8px; text-wrap: balance;
}
.hero .khau-hieu { color: var(--nang); font-weight: 700; font-size: clamp(17px, 2.3vw, 26px); margin: 0 0 26px; }
/* Trường chưa khai khẩu hiệu: js/app.js gắn lớp này — tên trường tự nhận khoảng thở. */
.hero.khong-khau-hieu h1 { margin-bottom: clamp(18px, 3vw, 30px); }
.su-menh { display: flex; gap: 16px; max-width: 700px; margin-bottom: 20px; align-items: flex-start; }
.su-menh .bi {
  flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; font-size: 22px;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  display: grid; place-items: center;
}
/* Vàng nhạt + 19px đậm (= chữ lớn theo WCAG, cần 3:1): vàng đậm #f6c54a chỉ đạt 2,9 trên nền xanh ngọc (soát 10/9) */
.su-menh h4 { color: var(--nang); letter-spacing: .04em; font-size: 19px; font-weight: 800; margin-bottom: 3px; }
.su-menh p { font-size: 16px; color: #eef7f7; line-height: 1.55; }
/* Dải số liệu: ĐẶC suốt chiều dài như ảnh mẫu, đè lên ảnh. */
.dai-so-lieu {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 26px; border-radius: 18px; padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background: linear-gradient(90deg, rgba(4, 74, 77, .97) 0%, rgba(7, 92, 96, .94) 50%, rgba(20, 122, 122, .82) 100%);
}
.dai-so-lieu .o:last-child { grid-column: span 2; }
@media (min-width: 700px)  { .dai-so-lieu { grid-template-columns: repeat(3, 1fr); } }
@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, .16); }
}
.dai-so-lieu .o { background: none; padding: 6px 6px 6px 22px; display: flex; gap: 14px; align-items: center; }
.dai-so-lieu .bi {
  flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; font-size: 22px;
  background: linear-gradient(150deg, #22c2bc, #0b8e8e); border: 0; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.dai-so-lieu .so { font-size: 30px; font-weight: 800; color: var(--nang); line-height: 1.05; font-variant-numeric: tabular-nums; }
.dai-so-lieu .nhan { font-size: 14px; color: #fff; opacity: .92; display: block; }
@media (min-width: 1100px) and (max-width: 1439px) {
  .dai-so-lieu .o { padding-left: 14px; gap: 11px; }
  .dai-so-lieu .bi { flex-basis: 46px; width: 46px; height: 46px; font-size: 20px; }
  .dai-so-lieu .nhan { font-size: 13px; }
}

/* 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ản mẫu THCS) ═══ */
.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(110, 150, 150, .16); cursor: pointer;
  box-shadow: 0 3px 14px rgba(24, 114, 116, .07);
  transition: transform .15s, box-shadow .15s;
  display: flex; flex-direction: column;
}
.the-module:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(24, 114, 116, .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ản mẫu THCS 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(110, 150, 150, .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: #1d6b6d; }
.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: #c3dfdc; 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(24, 114, 116, .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: #b2d6d2; 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: #c3dfdc; 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ản mẫu THCS) ═══ */
.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ản mẫu THCS) */
.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 #eef5f4; padding: 13px 17px; cursor: pointer;
  color: var(--chu);
}
.hop-tai-khoan .muc-menu:last-child { border-bottom: 0; }
/* Mục "Hướng dẫn sử dụng" là thẻ <a> mở trang mới — cùng dáng với các <button> trong hộp */
.hop-tai-khoan a.muc-menu { display: block; text-decoration: none; color: inherit; }
.nut-huong-dan {
  display: inline-flex; align-items: center; gap: 4px; margin-right: 8px;
  font-size: 14px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 6px 10px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55);
}
.nut-huong-dan:hover { background: rgba(255,255,255,.14); }
@media (max-width: 999px) {
  .khu-dieu-huong .nut-huong-dan { display: flex; width: 100%; margin: 0 0 8px; justify-content: center; }
}
.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: #1f8f8b; 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 — bản NẰM NGANG (23/8/2026, thay bản dựng đứng kiểu
   bản mẫu THCS). Trường 39 người thì bản cũ cao ~175px, cuộn mãi không hết.
   Ba thứ bỏ đi để rút còn ~85px, tức hơn một nửa:
     · dải mũ navy trang trí — tốn ~54px mà không mang thông tin nào;
     · nút "📁 Hồ sơ cá nhân" trải hết bề ngang — thu về một nút biểu tượng
       36px ở mép phải, đúng kiểu nút 📂 của bảng danh mục hồ sơ nên đã quen;
     · lối xếp dọc căn giữa — nay ảnh · chữ · nút nằm trên MỘT trục ngang, mắt
       quét dọc theo cột tên là đọc được cả nhóm, không phải nhảy zíc-zắc.
   Ô lưới nới từ 212px lên 240px: thẻ ngang cần chỗ, nhưng mỗi hàng bớt một
   thẻ vẫn lãi to vì chiều cao giảm hơn một nửa. */
.luoi-cbgv { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
/* Lưới thẻ nằm trong khối xếp gọn (.sub) thì phải có lề trong: sát mép nhìn
   chật, mà thẻ lại nhấc lên 2px lúc rê chuột nên không có lề là bị cắt bóng. */
.sub-body > .luoi-cbgv { padding: 13px; }
/* Ô chọn nơi công tác — chỉ hiện ở nhóm Giáo viên của trường nhiều điểm.
   Nằm ngay trên lưới thẻ, dùng chung nền xám nhạt của thân khối cho liền mạch.
   Trên điện thoại cho phép xuống dòng: nhãn + ô chọn + số đếm mà ép một hàng
   thì ô chọn bị bóp còn vài chục pixel, không đọc nổi tên phân hiệu. */
.cbgv-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 13px 13px 0; }
.cbgv-loc label { font-weight: 700; font-size: 14px; color: var(--dam); }
.cbgv-loc select { font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--vien-dam); border-radius: 8px; background: var(--the);
  color: var(--chu); max-width: 100%; }
.cbgv-loc-dem { font-size: 13px; color: var(--chu-mo); }
/* Thẻ theo bản mẫu thầy Chung chọn 25/8/2026: vạch nhấn xanh lá bên trái ·
   ảnh tròn gradient xanh (chấm trạng thái đăng nhập ở góc ảnh) · tên đậm navy ·
   chức vụ XANH LÁ · viên email · nút thư mục góc trên phải. */
.the-cbgv {
  position: relative; overflow: hidden;
  background: var(--the); border: 1px solid var(--vien); border-radius: 16px;
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 13px 14px 19px;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.the-cbgv::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #4cbf8b, #1f8a5f);
}
.the-cbgv:hover {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(24, 114, 116, .12);
  border-color: #bfe3d2;
}
.the-cbgv .anh-bao { position: relative; flex: 0 0 auto; }
.the-cbgv .anh {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid;
  place-items: center; color: #fff; font-size: 16.5px; font-weight: 800;
  letter-spacing: .02em;
  /* Gradient xanh của bản mẫu; chữ trắng trên #2ba070 đạt ~4,6:1 — qua AA */
  background: linear-gradient(135deg, #4cbf8b, #1f8a5f);
}
/* Chấm trạng thái ở góc ảnh thay cho dòng chữ "Đã kích hoạt / Chưa đăng nhập"
   bản cũ — thẻ theo mẫu chỉ có 3 dòng, câu đầy đủ vẫn còn trong title. */
.the-cbgv .anh-bao::after {
  content: ''; position: absolute; right: -1px; bottom: 1px;
  width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid #fff;
}
.the-cbgv .anh-bao.da-vao::after  { background: #22a06b; }
.the-cbgv .anh-bao.chua-vao::after { background: #cfd6e2; }
/* min-width:0 là thứ giữ cho tên dài không đẩy nút thư mục tràn khỏi thẻ —
   ô flex mặc định không co nhỏ hơn nội dung của nó. */
.the-cbgv .than { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.the-cbgv .than b { font-size: 15.5px; font-weight: 800; color: var(--dam); line-height: 1.25; }
.the-cbgv .vt {
  font-size: 12.5px; font-weight: 700; color: #1f8a5f; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.the-cbgv .mail {
  align-self: flex-start; max-width: 100%; margin-top: 3px;
  background: #eff6f5; border-radius: 999px; padding: 3px 11px;
  font-size: 12px; color: var(--chu); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.the-cbgv .nut-hs {
  flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center;
  text-decoration: none; font-size: 17px; line-height: 1;
  border: 1.5px solid #bfe3d2; border-radius: 11px; background: #fff;
}
.the-cbgv .nut-hs:hover { background: #e7f6ef; border-color: #7fcdaa; }
.the-cbgv .nut-hs.trong { border-color: var(--vien); cursor: default; filter: grayscale(1); opacity: .55; }

.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; }

/* ── Ô nhập của màn Danh mục hồ sơ ──────────────────────────────────────────
   Trước đây các ô trong khối "Thêm một đầu hồ sơ" không gắn lớp nào nên rơi
   về kiểu mặc định của trình duyệt: viền xám mảnh, góc vuông, chữ sát mép —
   trông y như ô bảng tính. Khuôn dưới đây theo đúng .dh-o-nhap của module
   Điều hành để cả app nhìn cùng một kiểu. */
.dm-o-nhap {
  font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
  color: var(--chu); background: #fff;
  border: 1px solid var(--vien-dam); border-radius: 10px; padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.dm-o-nhap::placeholder { color: var(--chu-mo); opacity: .75; }
.dm-o-nhap:hover { border-color: var(--chinh); }
.dm-o-nhap:focus {
  outline: none; border-color: var(--chinh);
  box-shadow: 0 0 0 3px rgba(24, 114, 116, .12);
}
select.dm-o-nhap { width: auto; min-width: 168px; cursor: pointer; }

/* Ô sửa TẠI CHỖ trong bảng danh mục (tên hồ sơ, tầng, tên hộp, biểu tượng bộ
   phận) — lớp `dm-o`, khuôn nhỏ vừa ô bảng .nho. Cố ý không dùng .dm-o-nhap:
   đệm 10px + bo 10px của nó là cho biểu mẫu, vào ô bảng thì dòng cao gấp rưỡi.
   Trước đây lớp này KHÔNG có luật nào, ô chỉ đẹp nhờ .bang-quan-tri input /
   select đỡ hộ — ai sửa hai luật bảng đó là ô danh mục vỡ theo mà không biết
   vì sao. Khai rõ ở đây; luật bảng vẫn thắng về đặc hiệu, nhưng viền khi bấm
   vào thì theo cùng kiểu với .dm-o-nhap để cả màn nhìn một giọng. */
.dm-o {
  font: inherit; font-size: 12.8px; box-sizing: border-box;
  color: var(--chu); background: #fff;
  border: 1px solid var(--vien); border-radius: 7px; padding: 6px 8px;
}
.dm-o:focus {
  outline: none; border-color: var(--chinh);
  box-shadow: 0 0 0 3px rgba(24, 114, 116, .12);
}
select.dm-o { cursor: pointer; }

/* Ô nhập trong bảng kiểm kê cơ sở vật chất (js/csvc.js, lớp `csvc-o`) — cùng
   khuôn với .dm-o vì cũng nằm trong bảng .bang-quan-tri.nho. Trước đây lớp này
   không có luật nào, ô chỉ đẹp nhờ luật bảng đỡ hộ (đúng bẫy đã ghi ở .dm-o).
   Chiều rộng do inline style của từng ô đặt (64px cho ô số, 100% cho ghi chú). */
.csvc-o {
  font: inherit; font-size: 12.8px; box-sizing: border-box;
  color: var(--chu); background: #fff;
  border: 1px solid var(--vien); border-radius: 7px; padding: 6px 8px;
}
.csvc-o:hover { border-color: var(--chinh); }
.csvc-o:focus {
  outline: none; border-color: var(--chinh);
  box-shadow: 0 0 0 3px rgba(24, 114, 116, .12);
}
select.csvc-o { cursor: pointer; }
/* Luật chung .bang-quan-tri input (dòng ~1344) đặt min-width: 90px và thắng
   về đặc hiệu, nên ô số 64px của bảng này bị nong ra 90px — gỡ riêng ở đây. */
.bang-quan-tri input.csvc-o { min-width: 0; }
/* Ẩn nút tăng giảm của ô số — cùng lý do với .ct-o: lăn chuột hay bấm nhầm
   một cái là đổi số phòng học mà không ai để ý. */
.csvc-o[type="number"]::-webkit-outer-spin-button,
.csvc-o[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.csvc-o[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Nhãn nhỏ trên mỗi ô. Chỉ dựa vào placeholder thì gõ xong là mất, người
   dùng nhìn lại không biết ô ấy hỏi gì. */
.dm-nhan-o {
  display: block; font-size: 12.4px; font-weight: 600; letter-spacing: .01em;
  color: var(--chu-mo); margin: 0 0 5px 2px;
}

/* Nút phụ: "Thôi", "Huỷ" — việc vô hại, không được mang màu đỏ như nút xoá.
   Bản đầu dùng .nut-xoa-nd nên nút Thôi hiện ra đỏ viền y như nút nguy hiểm. */
.nut-phu-nd {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: var(--chu-mo); background: var(--the);
  border: 1.5px solid var(--vien-dam); border-radius: 8px; padding: 5.5px 13px;
}
.nut-phu-nd:hover { background: var(--o-con); color: var(--chu); }
.nut-phu-nd:disabled { opacity: .5; cursor: default; }

/* ════════════════════════════════════════════════════════════
   MODULE HỒ SƠ kiểu bản mẫu THCS (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(10, 60, 62, .06), 0 8px 24px rgba(10, 60, 62, .07);
  --bong-lon: 0 12px 40px rgba(10, 60, 62, .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%, #136466 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: #e3efee; 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 bản mẫu THCS) ═══ */
.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; }
/* Một hàng duy nhất: [Năm học ▾]  ·  15 lớp · 433 học sinh
   Máy hẹp thì tự xuống dòng, ô chọn năm vẫn đứng trên vì đó là thứ bấm được. */
.hs-dieu-khien {
  margin-top: 18px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 12px;
}
.hs-pill {
  display: inline-block;
  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 {
  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(24, 114, 116, .15); }
.the-khoi.on { box-shadow: 0 0 0 2px var(--dam), 0 12px 28px rgba(24, 114, 116, .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: #c3dfdc; }

.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(24, 114, 116, .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: #edf6f5; 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: #fafdfc; 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: #f0f7f6; 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: #f6fafa; cursor: pointer;
}
.sub-head:hover { background: #f0f7f6; }
.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: #edf5f5; 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 #bcdcd8; vertical-align: middle; }
.rec-tbl thead th + th, .rec-tbl tbody td + td { border-left: 1px dashed #bcdcd8; }
.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: #23797b; 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; }
/* Sau khi "Kiểm tra ngay": thư mục trống / không mở được / hồ sơ chưa có tệp
   → icon 📂 chuyển XÁM; thư mục có tệp giữ màu sáng bình thường. */
.rec-tbl .drive.xam { filter: grayscale(1); opacity: .45; }
@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: #edf5f5; 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 #eef5f4; font: inherit;
}
.tim-xo .muc:last-child { border-bottom: 0; }
.tim-xo .muc:hover { background: #edf7f6; }
.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 #d2e2df; 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 #d2e2df; 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ản mẫu THCS

   🔴 ĐỌC TRƯỚC KHI SỬA BẤT KỲ DÒNG NÀO DƯỚI ĐÂY (đo ngày 28/8/2026)

   Khối này bị khối "TCQG — CSS GỐC BẠCH LIÊU" ở dưới (tìm chuỗi đó, cách
   đây khoảng 230 dòng) đè lên. Đo cụ thể: trong 395 khai báo của khối này,
   **201 cái (51%) đã CHẾT** — bị khai lại nguyên xi ở khối dưới, mà @media
   không cộng độ đặc hiệu nên khối đứng SAU luôn thắng.

   ⇒ Sửa một giá trị ở đây rồi mở trang thấy KHÔNG ĐỔI GÌ là chuyện bình
     thường, không phải thầy sửa nhầm tệp hay trình duyệt còn nhớ bản cũ.
     Tìm cùng bộ chọn ấy ở khối dưới rồi sửa ở đó.

   ⇒ Nhưng ĐỪNG XOÁ khối này cho gọn: 194 khai báo còn lại (49%) vẫn đang
     giữ giao diện, khối dưới không có (.the-kd, .nut-vien, .kd-nut,
     .tc-ma, .tc-ten, .kd-thanh, #kd-list…). Xoá cả khối là vỡ màn TCQG.

   Muốn biết chính xác bộ chọn nào bị đè: chạy `node quet-css.js` bên repo
   tài liệu, mục "Bộ chọn khai trùng mà THẬT SỰ đè nhau".
   ════════════════════════════════════════════════════════════ */
.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, #0b4346, var(--dam) 60%, #1a7c7e); 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: #edf7f6; border: 1px solid #cdeae7; 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: #f0f7f6; 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: #f4faf9; }
.tc-hang.chon { background: #edf7f6; 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: #f0f7f6; 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 #d2e2df; 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: #f6fafa; 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 #c3e0dc; 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 #d2e2df; 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: #f0f7f6; 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: #edf7f6; border: 1px solid #cdeae7; 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 trường thử)
   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, #0b4346, #187274 60%, #1a7c7e);
}

/* ── 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: #f3f9f9; }
@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: #f1f8f8; border-color: #d3ebe8; }
.the.xanh .ic { background: #e2edfd; color: #1f8f8b; }
.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 #c8e4e0; border-left: 4px solid var(--dam-2);
  border-radius: 10px; padding: 11px 15px; font-size: 13.4px; color: #1d5f61; 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 #cbe0dd; 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: #f0f7f6; }
.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: #f3f9f9; 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: #f0f7f6; border: 1px solid #d5e6e4; 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 #cbe0dd; background: #fff;
  font-size: 13px; font-weight: 600; color: var(--chu-mo); min-height: 40px; cursor: pointer; font-family: inherit;
}
/* 🔴 ĐẠT và CHƯA ĐẠT phải NHÌN RA KHÁC NHAU (sửa 20/8/2026).
   Dòng này trước đây gộp `.pick.on, .pick.dat.on, .pick.khong.on` vào cùng
   một màu navy — nghĩa là chấm "Đạt" hay "Chưa đạt" đều ra y hệt nhau, người
   chấm chỉ phân biệt được bằng cách đọc chữ trên nút. Cả màn chấm tiêu chí
   Trường chuẩn Quốc gia đã chạy như vậy một thời gian.
   Đã rà: KHÔNG có nút nào chỉ mang `pick on` mà thiếu `dat`/`khong` (4 chỗ
   dùng, ở tcqg.js và tcqg-co-so.js), nên bỏ `.pick.on` khỏi đây không làm
   mất trạng thái sáng của nút nào. */
.pick.dat.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.pick.khong.on { background: var(--thieu); border-color: var(--thieu); 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 #cbe0dd; 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: #f0f7f6; }
.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: #f1f8f8;
  border: 1px solid #d3ebe8; 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 #cbe0dd; 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: #c6e6e3; color: #17797b; }
.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: #f1f8f8; border: 1px solid #d3ebe8; 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 (≥1360px). Dải 1000–1359 đầu trang cao 124px (menu xuống hàng
   riêng) → top được hạ theo ở khối "MÁY TÍNH PHÓNG TO" cuối tệp. 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; }

  /* 72.1-DA-SOI (28/8/2026): cả hai đều là con TRỰC TIẾP của <body>
     (.overlay khai trong index.html; .hs-lop do hoso-sua.js gắn bằng
     document.body.appendChild). <body> không có display:flex/grid nên hạ
     fixed → static ở đây không rơi vào luồng flex nào. An toàn. */
  .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; }

  /* ── IN DANH SÁCH HỌC SINH ────────────────────────────────────────────
     Nút "🖨 In danh sách" gắn lớp .in-danh-sach vào <body> rồi mới gọi
     window.print(), gỡ ra ở sự kiện afterprint.

     Vì sao cần: trước 22/8/2026 bấm In là in TRỌN màn hình — hai tờ giấy
     đầu là lưới thẻ Khối 1…Khối 5 và các thẻ lớp, mãi tờ thứ ba mới tới
     danh sách học sinh. Thầy cô in một lớp mà tốn ba tờ, hai tờ bỏ đi.
     #hs-phu là con TRỰC TIẾP của <body> nên giấu anh em của nó là đủ. */
  body.in-danh-sach > *:not(#hs-phu) { display: none !important; }
  body.in-danh-sach #hs-phu { display: block !important; }
  /* Đầu bảng đang dính (sticky) trên màn hình — in ra thì phải thả tự do,
     không thì nó đè lên dòng đầu của bảng. */
  body.in-danh-sach .sheet-head { position: static !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   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: #1f8f8b; }

/* 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: #f4faf9; border: 1px dashed #c6e6e3; 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 1000px (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: 1000px) {
  .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%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MÁY TÍNH PHÓNG TO 125–150% (24/8/2026) — các cô máy Dell báo "giao diện như
   điện thoại" dù màn Full HD: Windows phóng to 150% làm 1920px chỉ còn 1280px
   CSS, tụt dưới mốc ☰ cũ (1360). Nay ☰ chỉ còn dưới 1000px (khối đầu tệp);
   dải 1000–1359 này là MÁY TÍNH: menu trải thành hàng ngang riêng ngay dưới
   hàng tên trường (order đẩy nav xuống cuối + chiếm trọn hàng, khu tài khoản
   ở lại hàng trên bên phải). Đầu trang cao 10+46+12+46+10 = 124px nên thanh
   TT57 dính phải hạ top theo — vì vậy khối này bắt buộc nằm CUỐI TỆP, sau
   khai báo .kd-thanh gốc (@media không cộng độ đặc hiệu, sau mới thắng). */
@media (min-width: 1000px) and (max-width: 1599px) {
  .dau-trang .khung { flex-wrap: wrap; }
  nav.menu { order: 5; flex: 1 1 100%; }
  .khu-tai-khoan { margin-left: auto; }
  .kd-thanh { top: 124px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   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(24, 114, 116, .12); }
.lt-the.cuoi { background: #fafdfc; }          /* 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: #fafdfc;
}
/* 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: #f5faf9; 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(24, 114, 116, .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: #edf5f5; 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: #edf5f5; 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: #1f8587; --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. #86bcb8 đạt 5,00:1. */
:root { --sb-mo: #86bcb8; }

/* Đường kẻ giữa các dòng hàng chờ: #ebf3f3 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: #1f8f8b; }

/* ── 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: #1f8f8b; }
/* 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: #edf5f5; }
.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); }

/* ── 3b. THẺ TỔ CHỨC ĐẢNG (js/to-chuc-dang.js) ───────────────────────────────
   Cố ý KHÔNG mượn .tl-nhom / .tl-o của thẻ Thông tin trường: .tl-nhom thành
   lưới 2 cột từ 720px và .tl-o input đặt width:100% — nút radio bị kéo rộng cả
   dòng, còn khối chọn thì bị xé làm đôi. Lớp riêng, không đụng thẻ kia. */
.tcd-nhom {
  background: var(--the); border: 1px solid var(--vien); border-radius: 14px;
  padding: 16px 18px; margin: 14px 0;
}
.tcd-nhom h4 { margin: 0 0 4px; font-size: 15px; }

.tcd-chon {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1px solid var(--vien); border-radius: 11px;
  padding: 11px 13px; margin-bottom: 9px; background: #fff;
}
.tcd-chon:hover { border-color: var(--chinh); }
.tcd-chon.dang { border-color: var(--chinh); background: var(--o-con); }
/* width:auto ghi đè luật input rộng 100% của biểu mẫu chung. */
.tcd-chon input[type="radio"] { width: auto; margin: 3px 0 0; flex: 0 0 auto; }
.tcd-chu { flex: 1 1 auto; font-size: 14px; line-height: 1.5; }
.tcd-chu small { display: block; margin-top: 3px; font-size: 12px; color: var(--chu-mo); line-height: 1.5; }
.tcd-cho {
  margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--chinh);
  border: 1px solid var(--chinh); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

.tcd-ds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tcd-mot {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--vien); border-radius: 11px; padding: 10px 12px; background: #fff;
}
/* Mã hộp có ba ký tự (H15) nên KHÔNG dùng vòng tròn 30px như .tl-dau — chữ tràn ra ngoài. */
.tcd-ma {
  flex: 0 0 auto; font-weight: 700; font-size: 12.5px; letter-spacing: .3px;
  background: var(--chinh); color: #fff; border-radius: 8px; padding: 4px 9px;
}
.tcd-ten { flex: 1 1 auto; font-size: 14px; line-height: 1.5; }
.tcd-ten small { color: var(--chu-mo); font-size: 12px; }

.tcd-o { display: block; }
.tcd-nhan { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.tcd-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);
}
.tcd-o input:focus { outline: 2px solid var(--chinh); outline-offset: -1px; }
.tcd-o small { display: block; margin-top: 3px; font-size: 12px; color: var(--chu-mo); line-height: 1.5; }

/* ── 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 #a4cbc7 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 #a4cbc7; 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(26, 138, 140, .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(24, 114, 116, .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; }
}

/* ── Chip "Chưa mở đăng nhập" ──
   Trường đã có mã, đã vào được trang, nhưng chưa dựng CSDL riêng (một trường,
   một trường lúc mới cấp mã). Trước đây góc phải trống trơn — thầy cô tưởng
   app hỏng. Chip này chỉ để GIẢI THÍCH, cố tình xám và không bấm được, để
   không ai nhầm nó với nút đăng nhập. */
.chip-chua-mo {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  gap: 1px; padding: 6px 12px; border-radius: 10px;
  border: 1px dashed var(--vien, #d6dae2); background: #f6f7f9;
  color: var(--chu-mo, #6b7280); line-height: 1.25; cursor: default;
}
.chip-chua-mo b { font-size: 12.5px; font-weight: 700; color: #4b5563; }
.chip-chua-mo small { font-size: 11px; }
@media (max-width: 560px) {
  .chip-chua-mo { padding: 5px 9px; }
  .chip-chua-mo b { font-size: 11.5px; }
  .chip-chua-mo small { font-size: 10px; }
}

/* ══════════════════════════════════════════════════════════
   HỘP THOẠI DÙNG CHUNG (js/hop-thoai.js) — thay prompt/confirm
   Hộp của trình duyệt đề tên miền "quantrisotruonghoc.com cho biết",
   ô nhập một dòng hẹp, không nhãn, không xuống dòng được. Hộp này giữ
   đúng tông app: đầu navy có hoa văn chấm, thân trắng, nút navy đặc.
   Trên điện thoại tự trượt lên từ đáy như tấm sheet quen tay.
   ══════════════════════════════════════════════════════════ */
.ht-phu {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(10, 20, 42, .58); backdrop-filter: blur(3px);
  animation: htHien .16s ease-out;
}
.ht-phu.dong { animation: htTat .14s ease-in forwards; }
@keyframes htHien { from { opacity: 0; } to { opacity: 1; } }
@keyframes htTat  { to { opacity: 0; } }

.ht-hop {
  width: 100%; max-width: 660px; background: #fff; border-radius: 18px;
  overflow: hidden; box-shadow: 0 26px 70px rgba(10, 20, 42, .38);
  animation: htLen .2s cubic-bezier(.2, .9, .3, 1);
  display: flex; flex-direction: column; max-height: calc(100vh - 40px);
}
@keyframes htLen { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.ht-hop.lac { animation: htLac .32s; }
@keyframes htLac {
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
  100% { transform: none; }
}

.ht-dau {
  display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px;
  background: linear-gradient(135deg, var(--dam), var(--dam-2));
  background-image: var(--cham-navy), linear-gradient(135deg, var(--dam), var(--dam-2));
  background-size: 20px 20px, auto; color: #fff; flex: none;
}
.ht-dau .ht-ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center; font-size: 21px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2);
}
.ht-dau .ht-tt { flex: 1; min-width: 0; padding-top: 1px; }
.ht-dau h4 { font-size: 17.5px; font-weight: 800; letter-spacing: .2px; line-height: 1.35; }
.ht-dau p { font-size: 12.6px; color: #c2dfdb; margin-top: 2px; line-height: 1.45; }
.ht-x {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; font-family: inherit;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff;
  transition: background .15s;
}
.ht-x:hover { background: rgba(255, 255, 255, .24); }

.ht-than { padding: 18px; overflow-y: auto; flex: 1; }
.ht-nhan {
  display: block; font-size: 11.8px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--chu-nhat); margin-bottom: 8px;
}
.ht-o {
  width: 100%; font: inherit; font-size: 15.5px; line-height: 1.6; color: var(--chu);
  background: #fcfdff; border: 1px solid var(--vien-dam); border-radius: 12px;
  padding: 12px 14px; resize: vertical; transition: border-color .15s, box-shadow .15s;
}
textarea.ht-o { min-height: 116px; display: block; }
.ht-o.hep { max-width: 240px; }
.ht-o:focus {
  outline: none; background: #fff; border-color: var(--chinh);
  box-shadow: 0 0 0 3px rgba(26, 138, 140, .16);
}
.ht-o.sai { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192, 57, 43, .13); }
.ht-o::placeholder { color: #9aa8c2; }

.ht-hang { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.ht-chu-thich { flex: 1; font-size: 12.4px; color: var(--chu-mo); line-height: 1.5; }
.ht-dem { font-size: 12px; font-weight: 700; color: var(--chu-nhat); white-space: nowrap; padding-top: 1px; }
.ht-loi {
  margin-top: 10px; font-size: 13.2px; font-weight: 700; color: #a5321f;
  background: #fdf0ee; border: 1px solid #f3cdc6; border-radius: 10px; padding: 9px 12px;
}
/* white-space: pre-line — hộp thoại đặt nội dung bằng textContent, nên mọi
   dấu xuống dòng trong lời nhắn bị nuốt sạch. Chín tệp đang viết lời cảnh báo
   nhiều đoạn (cảnh báo gỡ hồ sơ tầng A, nhắc chép số liệu năm trước…) và tất
   cả hiện ra thành một khối chữ liền, khó đọc đúng lúc cần đọc kỹ nhất. */
.ht-loi-nhac { font-size: 15.2px; line-height: 1.65; color: var(--chu); white-space: pre-line; }

.ht-chan {
  display: flex; justify-content: flex-end; gap: 10px; flex: none;
  padding: 14px 18px; background: #f5faf9; border-top: 1px solid var(--vien);
}
.ht-nut {
  font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  border-radius: 11px; padding: 11px 20px; transition: .15s; border: 1px solid transparent;
}
.ht-huy { background: #fff; border-color: var(--vien-dam); color: var(--chu-mo); }
.ht-huy:hover { background: #edf4f4; color: var(--chu); }
.ht-ok { background: var(--dam); color: #fff; box-shadow: 0 4px 12px rgba(24, 114, 116, .22); }
.ht-ok:hover { background: var(--dam-2); }
.ht-ok.nguy { background: #b3372a; box-shadow: 0 4px 12px rgba(179, 55, 42, .24); }
.ht-ok.nguy:hover { background: #972c20; }

/* Điện thoại: dán xuống đáy màn cho ngón cái với tới hai nút */
@media (max-width: 560px) {
  .ht-phu { align-items: flex-end; padding: 0; }
  .ht-hop {
    max-width: none; border-radius: 18px 18px 0 0; max-height: 94vh;
    animation: htTruot .22s cubic-bezier(.2, .9, .3, 1);
  }
  @keyframes htTruot { from { transform: translateY(100%); } to { transform: none; } }
  .ht-dau { padding: 14px 15px; }
  .ht-dau h4 { font-size: 16.5px; }
  .ht-than { padding: 15px; }
  .ht-o { font-size: 16px; }          /* ≥16px thì iOS không tự phóng to trang */
  .ht-o.hep { max-width: none; }
  .ht-chan { padding: 12px 15px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ht-nut { flex: 1; padding: 13px 16px; }
}

/* ════════════════════════════════════════════════════════════
   SỔ PHÂN CÔNG – ỦY QUYỀN (js/phan-cong.js, thêm 20/8/2026)
   Biểu mẫu nhiều ô. MỘT CỘT trên điện thoại, hai cột từ 640px —
   thầy Chung làm việc chủ yếu bằng điện thoại nên một cột là mặc
   định, hai cột mới là ngoại lệ.
   ════════════════════════════════════════════════════════════ */
.pc-luoi { display: grid; grid-template-columns: 1fr; gap: 11px 14px; }
.pc-o { display: flex; flex-direction: column; gap: 5px; }
.pc-o > span { font-size: 13px; font-weight: 700; color: var(--chu-mo); }
.pc-o input, .pc-o select, .pc-o textarea {
  font: inherit; font-size: 16px;      /* ≥16px thì iOS không tự phóng to trang */
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border: 1.5px solid var(--vien-dam);
  border-radius: 10px; background: var(--the); color: inherit;
}
.pc-o textarea { resize: vertical; line-height: 1.5; }
.pc-o input:focus, .pc-o select:focus, .pc-o textarea:focus {
  outline: none; border-color: var(--chinh);
}
@media (min-width: 640px) {
  .pc-luoi { grid-template-columns: 1fr 1fr; }
  .pc-o.pc-rong { grid-column: 1 / -1; }
  .pc-o input, .pc-o select, .pc-o textarea { font-size: 14.5px; }
}

/* Danh sách văn bản trong sổ — THẺ chứ không phải bảng. Bảy cột trong đó có
   hai cột văn xuôi dài, trên màn 430px cột nội dung bị bóp còn một chữ mỗi
   dòng. Thẻ đọc được thẳng trên điện thoại, màn rộng xếp hai cột. */
.pc-ds { display: grid; grid-template-columns: 1fr; gap: 12px; }
.pc-the {
  background: var(--the); border: 1px solid var(--vien);
  border-left: 4px solid var(--chinh);
  border-radius: 12px; padding: 13px 15px;
}
.pc-the.uy-quyen { border-left-color: #c26a1f; }
.pc-dau { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pc-dau b { font-size: 15.5px; }
.pc-tt { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.pc-nho { font-size: 13px; color: var(--chu-mo); line-height: 1.5; margin: 3px 0 0; }
.pc-hieu { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 8px; }
.pc-nhan {
  font-size: 12.5px; font-weight: 700; color: var(--chinh);
  background: #edf6f5; border-radius: 999px; padding: 3px 10px;
}
.pc-nhan.cam { color: #c26a1f; background: #fbf1e4; }
.pc-noi-dung { font-size: 14.2px; line-height: 1.6; margin: 0 0 4px; }
.pc-chan {
  display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--vien-dam);
  font-size: 13px; color: var(--chu-mo);
}
.pc-thieu-vb { color: var(--thieu); font-weight: 700; }
.pc-nut { margin-top: 10px; display: flex; gap: 8px; }
@media (min-width: 900px) {
  .pc-ds { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════
   TỰ ĐÁNH GIÁ SOI TỪNG ĐỊA ĐIỂM (js/tcqg-co-so.js, 20/8/2026)
   Dùng lại .pick / .chu-dat / .chu-khong của khối tiêu chí để
   nút chấm ở đây giống hệt nút chấm toàn trường — cùng thao tác
   thì phải cùng hình dáng.
   ════════════════════════════════════════════════════════════ */
.cs-ds { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.cs-the {
  border: 1px solid var(--vien); border-left: 4px solid var(--chinh);
  border-radius: 11px; padding: 11px 13px; background: var(--the);
}
.cs-the.lech { border-left-color: var(--thieu); background: var(--thieu-nen); }
.cs-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cs-dau b { font-size: 14.5px; }
.cs-loai {
  font-size: 11.5px; font-weight: 700; color: var(--chu-mo);
  background: #edf6f5; border-radius: 999px; padding: 2px 9px;
}
.cs-muc { margin-top: 8px; font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cs-o {
  width: 100%; box-sizing: border-box; margin-top: 8px; font: inherit; font-size: 16px;
  padding: 8px 10px; border: 1.5px solid var(--vien-dam); border-radius: 9px;
  resize: vertical; line-height: 1.5;
}
.cs-o:focus { outline: none; border-color: var(--chinh); }
.cs-chu { font-size: 13.4px; line-height: 1.6; margin: 7px 0 0; }
.cs-chu.thieu { color: var(--thieu); }
.cs-nhac { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--chu-mo); }
.cs-nhac.lech { color: var(--thieu); }
@media (min-width: 760px) {
  .cs-ds { grid-template-columns: 1fr 1fr; }
  .cs-o { font-size: 14px; }
}

/* Màu nút Đạt / Chưa đạt nay khai một lần ở bản .pick chính (dòng ~1399) và
   áp cho CẢ màn chấm tiêu chí lẫn thẻ Địa điểm. Bản riêng cho .cs-muc từng
   đặt ở đây đã gỡ 20/8/2026 — hai nơi cùng khai một màu là sớm muộn sửa một
   nơi quên nơi kia. */

/* Đối sánh chất lượng giữa các địa điểm (js/dbcl-doi-sanh.js, 20/8/2026) */
.ds-ds { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ds-the { border: 1px solid var(--vien); border-radius: 11px; padding: 11px 13px; background: var(--the); }
.ds-dau { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-dau b { font-size: 14.8px; }
.ds-so { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 7px; font-size: 13.4px; color: var(--chu-mo); }
.ds-so b { color: var(--dam); font-size: 15px; }
.ds-ht { margin-top: 7px; font-size: 13.6px; padding-top: 7px; border-top: 1px dashed var(--vien-dam); }
@media (min-width: 760px) { .ds-ds { grid-template-columns: 1fr 1fr; } }

/* Bảng chỉ tiêu chất lượng (js/dbcl-chi-tieu.js, 20/8/2026) */
.ct-cot { text-align: center; white-space: nowrap; }
.ct-o {
  width: 74px; font: inherit; font-size: 16px; text-align: center;
  padding: 6px 4px; border: 1.5px solid var(--vien-dam); border-radius: 8px;
}
.ct-o:focus { outline: none; border-color: var(--chinh); }
/* Ẩn nút tăng giảm của ô số — bấm nhầm một cái là đổi chỉ tiêu mà không ai để ý */
.ct-o::-webkit-outer-spin-button, .ct-o::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ct-o { -moz-appearance: textfield; appearance: textfield; }
.ct-xem { font-weight: 700; }
/* Cột tên môn: không có min-width thì trên màn 430px bảng dồn hết chỗ cho
   5 cột số, "Tự nhiên và Xã hội" bị bóp xuống bốn dòng. */
.ct-ten { min-width: 108px; }
@media (min-width: 760px) { .ct-o { font-size: 14px; width: 68px; } }

/* Tổ ĐBCL & Hồ sơ (js/dbcl-to.js, 20/8/2026) */
.tv-them {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; padding: 12px; background: #f6fafa;
  border: 1px dashed var(--vien-dam); border-radius: 11px;
}
.tv-them select, .tv-them input {
  font: inherit; font-size: 16px; padding: 8px 10px;
  border: 1.5px solid var(--vien-dam); border-radius: 9px; background: var(--the);
}
.tv-them select:focus, .tv-them input:focus { outline: none; border-color: var(--chinh); }
.pl-o {
  font: inherit; font-size: 16px; padding: 6px 9px;
  border: 1.5px solid var(--vien-dam); border-radius: 8px; background: var(--the);
  max-width: 100%;
}
.pl-o.pl-link { min-width: 190px; }
.pl-o:focus { outline: none; border-color: var(--chinh); }
@media (min-width: 760px) {
  .tv-them select, .tv-them input, .pl-o { font-size: 14px; }
}

/* ── Thẻ "Nạp dữ liệu" trong màn Quản trị ─────────────────────────────
   Hai bước đánh số, mỗi bước một thẻ: người dùng nhìn là biết còn thiếu
   bước nào. Ô chọn tệp mặc định của trình duyệt vừa xấu vừa hiện chữ Anh
   trên một số máy, nên ẩn đi và thay bằng nhãn dựng như nút — vẫn là
   <input type="file"> thật nên bấm bằng bàn phím và trình đọc màn hình
   vẫn hoạt động. */
.nap-buoc {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--the); border: 1px solid var(--vien);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}
.nap-so {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--chinh); color: #fff; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.nap-noi { flex: 1 1 auto; min-width: 0; }
.nap-nhan {
  display: block; font-weight: 700; color: var(--chu); margin-bottom: 8px;
}
.nap-chon {
  font: inherit; font-size: 16px; padding: 8px 11px; cursor: pointer;
  border: 1.5px solid var(--vien-dam); border-radius: 8px;
  background: var(--the); color: var(--chu); max-width: 100%; min-width: 240px;
}
.nap-chon:focus { outline: none; border-color: var(--chinh); }
/* Không dùng display:none — ẩn kiểu ấy là bàn phím không tới được ô nữa. */
.nap-tep-that {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0);
}
.nap-nut-tep {
  display: inline-block; cursor: pointer; font-weight: 600; font-size: 15px;
  padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--chinh);
  color: var(--chinh); background: var(--the);
}
.nap-nut-tep:hover { background: var(--kem); }
.nap-tep-that:focus + .nap-nut-tep { outline: 2px solid var(--chinh); outline-offset: 2px; }
.nap-ten-tep {
  display: inline-block; margin-left: 10px; color: var(--chu-mo);
  font-size: 14px; word-break: break-all;
}
.nap-mach { margin-top: 9px; font-size: 13.5px; color: var(--chu-mo); line-height: 1.5; }
/* Nút "Tải mẫu Excel để điền" — nút phụ đứng cạnh nút chọn tệp, cùng khổ chữ
   nhưng viền mờ để không tranh với nút chính. Là <button> thật nên phải
   font: inherit, kẻo trình duyệt ép phông hệ thống 13px. */
.nap-nut-mau {
  font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer;
  padding: 8px 14px; border-radius: 8px; border: 1.5px solid var(--vien-dam);
  color: var(--chu); background: var(--the);
}
.nap-nut-mau:hover { background: var(--kem); border-color: var(--chinh); color: var(--chinh); }
.nap-nut-mau:disabled { opacity: .55; cursor: default; }
@media (max-width: 560px) {
  .nap-buoc { padding: 12px 13px; gap: 11px; }
  .nap-chon { min-width: 0; width: 100%; }
  .nap-nut-tep { display: block; text-align: center; }
  .nap-ten-tep { display: block; margin: 8px 0 0; }
  .nap-nut-mau { display: block; width: 100%; }
  .nap-hanh-dong .nap-mach { flex: 1 1 100%; }
}
/* Hàng nút Ghi / Huỷ của màn Nạp dữ liệu. Không cho nút co lại: để mặc thì
   nút "Huỷ" bị nút chính (chữ dài, có số) bóp còn hai dòng. */
.nap-hanh-dong { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nap-hanh-dong button { flex: 0 0 auto; white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════════════════
   VÙNG THÔNG BÁO TRANG CHỦ (dieu-hanh.js → veNhaCard) — tiền tố .tc-
   Bố cục do thầy Chung vẽ 22/8/2026: khối lịch bên trái · dãy ô số liệu ở
   giữa · thẻ cảnh báo và hai nút bên phải.

   Vì sao đổi: bản cũ dồn cả bốn con số vào MỘT dòng ngăn bằng dấu chấm giữa —
   máy tính đọc dài, điện thoại gãy dòng lung tung, và phải đọc hết câu mới
   thấy số. Bản này liếc là thấy.

   Xếp hàng: máy tính một hàng ngang; máy bảng ô số liệu xuống 2 cột; điện
   thoại xếp dọc, khối lịch nằm ngang cho đỡ tốn chiều cao.
   ════════════════════════════════════════════════════════════════════════════ */
.tc-bang {
  background: var(--the); border: 1px solid var(--vien); border-radius: 20px;
  box-shadow: var(--bong); padding: 16px; margin-bottom: 16px;
}
.tc-tren { display: flex; flex-wrap: wrap; align-items: stretch; gap: 16px; }

/* -- Khoi lich -- */
/* gap 14 -> 22: hinh lich va cum ngay thang dinh sat nhau, tach xa them
   mot chut cho can doi (thay Chung 24/8/2026) */
.tc-lich { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; padding-right: 20px; }
@media (min-width: 1000px) { .tc-lich { border-right: 1px solid var(--ke); } }
.tc-hinh { width: 100px; height: auto; flex: none; }
.tc-ngay { text-align: center; line-height: 1.12; }
.tc-thu { font-size: 15px; font-weight: 800; letter-spacing: .1em; color: var(--dam); }
.tc-so { font-size: 52px; font-weight: 800; color: var(--dam); letter-spacing: -.02em; }
.tc-thang { font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--dam); }
.tc-buoi {
  display: inline-block; margin-top: 9px; background: var(--chinh); color: #fff;
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  padding: 7px 16px; border-radius: 999px;
}

/* -- NAM MANG BANG NHAU: 4 o so lieu + cot thu nam (canh bao & hai nut) -- */
.tc-luoi { flex: 1 1 520px; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px)  { .tc-luoi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tc-luoi { grid-template-columns: repeat(5, 1fr); } }
/* Truong khong khai URL_TKB thi thieu o Thoi khoa bieu: con 3 o + cot thu nam
   = BON mang, chia bon cot cho khoi ho mot mang trong o cuoi hang. (Truoc
   24/8/2026 co lop `co-tkb` xep SAU mang — o TKB nay thay cho o "Chua xac
   nhan" nen dai lai dung nam mang, bo lop do.) */
@media (min-width: 1100px) { .tc-luoi.bon-mang { grid-template-columns: repeat(4, 1fr); } }
/* Duoi 1100px so o khong chia het so cot: 720-1099px luoi 3 cot ma co 4 o
   (3 + o TKB) -> o TKB mot minh mot hang, cho no trai het hang thay vi ho hai
   o trong; duoi 720px luoi 2 cot ma chi 3 o (khong TKB) -> o thu ba trai het. */
@media (min-width: 720px) and (max-width: 1099px) {
  .tc-luoi:not(.bon-mang) .tc-o-tkb { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .tc-luoi.bon-mang .tc-o:nth-child(3) { grid-column: 1 / -1; }
}
.tc-o { border-radius: 18px; padding: 15px 16px; min-width: 0; }
/* Bieu tuong TRON dung canh nhan tren cung mot hang (dung ban ve) */
.tc-dau { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.tc-ic {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 18px;
}
.tc-nhan { font-size: 13px; font-weight: 700; color: var(--chu); line-height: 1.28; }
.tc-con { font-size: 32px; font-weight: 800; line-height: 1.1; margin-top: 8px; }
.tc-dv { font-size: 12.5px; color: var(--chu-mo); margin-top: 3px; }
/* Chua co so lieu: dau gach ngang co 32px trong nhu mot thanh den */
.tc-con.trong { font-size: 25px; color: var(--chu-nhat); }

.tc-o.lam  { background: #edf7f6; } .tc-o.lam  .tc-ic { background: #d6eeeb; } .tc-o.lam  .tc-con { color: var(--dam); }
.tc-o.la   { background: #ecfaf1; } .tc-o.la   .tc-ic { background: #cfeedd; } .tc-o.la   .tc-con { color: var(--ok); }
.tc-o.tim  { background: #f4f1ff; } .tc-o.tim  .tc-ic { background: #e3dcfb; } .tc-o.tim  .tc-con { color: #5b28c4; }
.tc-o.vang { background: #fdf6e7; } .tc-o.vang .tc-ic { background: #f7e6c9; } .tc-o.vang .tc-con { color: var(--vang-sam); }

/* -- O THOI KHOA BIEU: cung khuon o so lieu nhung la the <a> BAM DUOC --
   Bieu tuong la anh 3D nen BO nen tron: hinh ve chi tiet nhoi vao vong tron
   36px thi thanh mot vet mau. Chu "Mo app" nho hon con so 32px cua cac o kia —
   day la loi di, khong phai mot con so de doc. */
.tc-o-tkb { display: block; text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.tc-o-tkb:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 110, 112, .16); }
.tc-o-tkb:focus-visible { outline: 3px solid var(--chinh); outline-offset: 2px; }
.tc-o-tkb .tc-ic { width: 46px; height: 46px; border-radius: 0; background: none; }
.tc-o-tkb .tc-ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tc-o-tkb .tc-con { font-size: 18px; margin-top: 10px; }

/* -- Cot thu nam: chia doi theo chieu doc -- */
.tc-cot5 { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; min-width: 0; }
.tc-canh {
  display: flex; align-items: center; gap: 10px; text-align: left;
  font: inherit; width: 100%; cursor: pointer;
  background: #fef2f2; border: 1px solid #fadcdc; border-radius: 16px; padding: 12px 14px;
}
.tc-canh:hover { background: #fde9e9; }
.tc-canh .bi {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #e5484d; color: #fff; font-size: 16px; font-weight: 800;
}
.tc-canh .chu { flex: 1; font-size: 13px; font-weight: 700; color: #b91c1c; line-height: 1.3; }
.tc-canh .mui { color: #d98b8b; font-size: 18px; flex: none; }
/* Khong co viec gi cho -> the xanh, cung khuon, KHONG bam duoc */
.tc-canh.yen { background: #ecfaf1; border-color: #cfeedd; cursor: default; }
.tc-canh.yen .bi { background: var(--ok); }
.tc-canh.yen .chu { color: #14663a; }
/* HAI NUT NAM NGANG canh nhau, chia doi be ngang cot — khong xep chong doc */
.tc-nut { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
/* Cho chu XUONG DONG khi chat, KHONG cat cut bang dau ba cham: "Mo Dieu..."
   thi thay co doc ra khong biet nut lam gi. */
.tc-nut button {
  width: 100%; min-height: 0; padding: 8px 6px; font-size: 12.2px;
  white-space: normal; line-height: 1.25;
}

@media (max-width: 999px) {
  .tc-bang { padding: 14px; }
  /* Dien thoai: khoi lich nam NGANG o tren cho do ton chieu cao, va CA CUM
     (hinh + ngay thang) dat vao GIUA the — de canh trai thi chu don ve mot
     ben, thua mot mang trong ben phai, nhin lech. Thay Chung goi y 23/8. */
  .tc-lich {
    padding-right: 0; border-bottom: 1px solid var(--ke); padding-bottom: 14px;
    width: 100%; justify-content: center; gap: 24px;
  }
  .tc-hinh { width: 79px; }
  .tc-so { font-size: 40px; }
  .tc-ngay { text-align: center; }
}
@media (max-width: 1099px) {
  /* Chua du cho 5 cot: cot thu nam trai het be ngang, canh bao va nut nam
     canh nhau cho do trong troi. */
  .tc-cot5 { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
  .tc-nut { grid-template-columns: auto auto; }
  .tc-nut button { padding: 9px 14px; font-size: 13px; }
}
@media (max-width: 560px) {
  .tc-cot5 { grid-template-columns: 1fr; }
  .tc-nut { grid-template-columns: 1fr 1fr; }
  .tc-o { padding: 13px 14px; border-radius: 15px; }
  .tc-ic { width: 34px; height: 34px; font-size: 17px; }
  .tc-nhan { font-size: 12.6px; }
  .tc-con { font-size: 27px; }
}

/* Hàng xác nhận hàng loạt của màn Lên lớp — ô tích ở cột cuối bảng, một nút
   duy nhất ở đây. Trước 22/8/2026 mỗi lớp một nút riêng: 20 lớp là 40 cú bấm
   (nút + hộp xác nhận), thầy Chung góp ý đổi. */
.ll-hang-chon {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 12px; padding: 12px 14px;
  background: var(--o-con); border: 1px solid var(--vien); border-radius: 12px;
}
.ll-hang-chon .ll-dem { font-size: 12.8px; color: var(--chu-mo); }
.bang-quan-tri input[type="checkbox"].ll-chon,
.bang-quan-tri input[type="checkbox"].ll-chon-het { width: 18px; height: 18px; cursor: pointer; accent-color: var(--chinh); }

/* ════════════════════════════════════════════════════════════════════════════
   MẦM NON GĐ 1 — màn "Đang dựng" (10/9/2026)
   Phân hệ chưa tới giai đoạn thì nói rõ là đang dựng và sẽ có gì — KHÔNG hiện
   số liệu mẫu dưới tên một trường có thật.
   ════════════════════════════════════════════════════════════════════════════ */
.dang-dung {
  background: var(--the); border: 1px solid var(--vien); border-radius: 16px;
  padding: 20px 22px; max-width: 860px; box-shadow: 0 1px 2px rgba(10, 60, 62, .05);
}
.dang-dung-nhan {
  display: inline-block; background: var(--dao); color: var(--vang-sam); font-weight: 800;
  font-size: 13px; letter-spacing: .04em; border-radius: 999px; padding: 5px 13px; margin-bottom: 10px;
}
.dang-dung p { color: var(--chu-mo); font-size: 15px; line-height: 1.6; margin-bottom: 10px; }
.dang-dung ul { margin: 0 0 12px 20px; color: var(--chu); font-size: 15px; line-height: 1.7; }
.dang-dung-chan { font-size: 13px !important; color: var(--chu-nhat) !important; }
.dang-dung code { font-size: 12.5px; background: var(--o-con); padding: 1px 6px; border-radius: 6px; }
.chip.dang-dung-chip { background: var(--dao); color: var(--vang-sam); border-color: transparent; }
.gt-bang { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin-bottom: 16px; font-size: 15px; }
.gt-bang dt { color: var(--chu-nhat); font-weight: 600; }
.gt-bang dd { color: var(--chu); font-weight: 700; margin: 0; }

/* Ô "Chưa mở đăng nhập" (trường chưa dựng CSDL) — trên máy tính thu thành NÚT TRÒN
   cỡ nút đăng nhập, để menu 8 mục của mầm non nằm đủ một hàng như bản thiết kế.
   Lời giải thích vẫn còn: rê chuột thấy title, và dải "Chế độ xem thử" ngay dưới. */
@media (min-width: 1000px) {
  .chip-chua-mo {
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    flex-direction: row; align-items: center; justify-content: center;
  }
  .chip-chua-mo b, .chip-chua-mo small { display: none; }
  .chip-chua-mo::before { content: "🔒"; font-size: 17px; }
}

/* ── Soát đối kháng 10/9/2026 ── */
/* Dòng Tầng · Căn cứ · Áp dụng dưới tên hồ sơ (js/app.js dongTang) */
.hs-tang { display: block; margin-top: 3px; font-size: 12px; color: var(--chu-mo); line-height: 1.45; }
.hs-tang b { font-weight: 800; }
.hs-tang .tang-A { color: #b3261e; } .hs-tang .tang-B { color: var(--vang-sam); } .hs-tang .tang-C { color: #2e7d32; }
/* Chú thích "Ảnh minh hoạ" — ảnh hero dùng chung không phải ảnh của nhà trường */
.hero .anh-chu-thich {
  position: absolute; top: 12px; right: 16px; z-index: 3; font-size: 11.5px; font-weight: 600;
  color: #fff; background: rgba(0, 0, 0, .32); padding: 3px 10px; border-radius: 999px; pointer-events: none;
}
@media (max-width: 1099px) { .hero .anh-chu-thich { top: 8px; right: 10px; } }