/* ============================================================
   thdienlien-v2 — giao diện theo phong cách app THCS Bạch Liêu
   Tông chủ đạo: XANH NAVY DỊU (giảm tông cho nhẹ mắt) + nhũ vàng
   ============================================================ */
:root {
  /* Bảng màu lấy ĐÚNG theo app THCS Bạch Liêu */
  --dam: #14306b;          /* navy — nền hero, header, thẻ đậm */
  --dam-2: #1e4593;        /* navy sáng hơn — gradient */
  --chinh: #2a5cb8;        /* màu nhấn liên kết, nút */
  --vang: #e5b13a;         /* nhũ vàng trên nền tối */
  --vang-sam: #c8901c;     /* vàng sậm cho chữ trên nền sáng */
  --kem: #f4f7fc;          /* nền trang */
  --the: #ffffff;
  --chu: #16202f;
  --chu-mo: #5d6b81;
  --vien: #e4e9f2;
  --bo-goc: 16px;
  /* Bề ngang khung chung cho ĐẦU TRANG · HERO · THÂN TRANG.
     Ba khối phải cùng một con số thì logo mới thẳng cột với tên trường ở
     hero và với nội dung bên dưới — đây là chỗ bản cũ lệch (đầu trang 1460,
     hero 1180 → logo thò ra ngoài 140px). */
  --rong-khung: 1320px;
  /* Hoa văn chấm mờ trên các mảng navy (đặc trưng Bạch Liêu) */
  --cham-navy: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'UTM Avo', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  overflow-x: hidden;   /* chặn trượt ngang ngoài ý muốn trên điện thoại */
  background: var(--kem); color: var(--chu); font-size: 16px; line-height: 1.6;
}
a { color: var(--chinh); }
img { max-width: 100%; }

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

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

/* ═══ Thanh đầu trang ═══ */
header.dau-trang {
  background: var(--dam); color: #fff; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(16, 32, 64, .28);
}
.dau-trang .khung {
  max-width: var(--rong-khung); margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Màn hình rộng: menu nằm CÙNG HÀNG với tên trường (như Bạch Liêu).
   Mốc 1360px chứ không phải 1240px: dưới mức đó 5 nút menu không đủ chỗ,
   ép cùng hàng thì menu phải cuộn ngang — thà cho xuống dòng còn hơn.
   Khoảng trống đẩy về TRƯỚC khu tài khoản (margin-left:auto), KHÔNG đẩy ở
   sau tên trường — nhờ vậy menu bám sát tên trường đúng kiểu Bạch Liêu. */
@media (min-width: 1360px) {
  .dau-trang .khung { flex-wrap: nowrap; }
  .ten-khu { flex: 0 0 auto; margin-right: 0; }
  .khu-tai-khoan { margin-left: auto; }
}
.logo-truong {
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  object-fit: contain; padding: 2px; flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}
.ten-khu { line-height: 1.25; margin-right: auto; }
.ten-khu .ten { font-weight: 800; font-size: 16.5px; }
.ten-khu .dia-chi { font-size: 12.5px; opacity: .75; }
nav.menu { display: flex; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px; max-width: 100%; }
nav.menu button {
  flex: 0 0 auto; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: #e4ecf5; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 9px 15px; min-height: 42px; white-space: nowrap; transition: all .15s;
}
nav.menu button:hover { background: rgba(255, 255, 255, .16); }
nav.menu button.dang-chon { background: #fff; color: var(--dam); border-color: #fff; }

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

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

/* ── Điện thoại: dải số liệu 2 cột rất hẹp, phải thu nhỏ huy hiệu và chữ,
      nếu không nhãn "đầu hồ sơ được quản lý" chỉ còn ~64px bề ngang, vỡ chữ.
      GIỮ 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; }
}

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

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

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

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

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

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

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

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

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

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

/* ═══ Hoa văn chấm mờ trên mọi mảng navy (đặc trưng Bạch Liêu) ═══ */
.o-so,
.the-hop .dau,
.nhom-tc > .dau-nhom {
  background-image: var(--cham-navy), linear-gradient(135deg, var(--dam), var(--dam-2));
  background-size: 14px 14px, auto;
}
.dai-so-lieu .o { background-image: var(--cham-navy), linear-gradient(135deg, rgba(20, 48, 107, .82), rgba(30, 69, 147, .78)); }

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

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

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

/* Thẻ danh bạ CBGV-NV */
.luoi-cbgv { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.the-cbgv {
  display: flex; align-items: center; gap: 11px;
  background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 12px 14px;
}
.the-cbgv .anh { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.the-cbgv .anh.chu {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kem); font-size: 21px;
}
.the-cbgv .phan-chu { min-width: 0; }
.the-cbgv b { font-size: 14.5px; display: block; }
.the-cbgv small { display: block; font-size: 12px; color: var(--chu-mo); }
.the-cbgv .da-vao { color: #2d8a6e; }
.the-cbgv .chua-vao { color: #98a4b5; }
.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); }

/* ════════════════════════════════════════════════════════════
   MODULE HỒ SƠ kiểu Bạch Liêu (thêm 10/8/2026)
   Lớp phủ chi tiết bộ phận · bảng minh chứng · thẻ bộ phận ·
   gợi ý tìm kiếm · ô sửa hồ sơ · toast
   ════════════════════════════════════════════════════════════ */
:root {
  --ok: #15803d; --ok-nen: #dcfce7;
  --canh: #b45309; --canh-nen: #fef3c7;
  --thieu: #b91c1c; --thieu-nen: #fee2e2;
  --bong: 0 1px 2px rgba(16, 32, 64, .06), 0 8px 24px rgba(16, 32, 64, .07);
  --bong-lon: 0 12px 40px rgba(16, 32, 64, .2);
  --vang-nen: #fbf3dd;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Hai cột làm việc */
.kd-lam { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 1000px) { .kd-lam { grid-template-columns: 45fr 55fr; } }
.kd-lam.rong { grid-template-columns: 1fr; }
.kd-lam.rong .kd-trai { display: none; }
.kd-trai {
  background: var(--the); border: 1px solid var(--vien); border-radius: 13px;
  box-shadow: var(--bong); display: flex; flex-direction: column; overflow: hidden;
}
.kd-trai-dau { padding: 13px 16px 8px; font-weight: 800; color: var(--dam); font-size: 14.5px; }
.kd-loc { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 10px; }
.chip-loc {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  background: #f1f5fb; color: var(--chu-mo); border: 1px solid var(--vien);
  border-radius: 999px; padding: 5px 11px;
}
.chip-loc.on { background: var(--dam); color: #fff; border-color: var(--dam); }
.chip-loc b { font-weight: 800; }
#kd-list { overflow-y: auto; max-height: 640px; border-top: 1px solid var(--vien); }
.tc-hang {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer;
  border-bottom: 1px dashed #e3eaf5;
}
.tc-hang:hover { background: #f6f9fe; }
.tc-hang.chon { background: #eef4ff; box-shadow: inset 3px 0 0 var(--dam); }
.tc-ma {
  flex: none; width: 42px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--dam); color: var(--vang); font-weight: 800; font-size: 13px;
}
.tc-ten { flex: 1; min-width: 0; font-size: 13.6px; font-weight: 600; line-height: 1.35; }
.tc-ten small { display: block; font-weight: 400; font-size: 11.8px; color: var(--chu-mo); margin-top: 2px; }
.tc-bb {
  display: inline-block; background: var(--thieu-nen); color: var(--thieu);
  font-size: 10px; font-weight: 800; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; vertical-align: 1px;
}
.crit-nh {
  flex: none; font-size: 11px; font-weight: 700; color: var(--chu-mo);
  background: #f1f5fb; border: 1px solid var(--vien); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.crit-nh.xong { background: var(--ok-nen); color: var(--ok); border-color: #bfe6cf; }
.badge-m { flex: none; font-size: 11.2px; font-weight: 800; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.badge-m2 { background: var(--ok-nen); color: var(--ok); }
.badge-m1 { background: var(--canh-nen); color: var(--canh); }
.badge-no { background: var(--thieu-nen); color: var(--thieu); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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