/* ════════════════════════════════════════════════════════════════════════════
   QUẢN LÝ TRẺ (js/quan-ly-tre.js) — tiền tố .qlt-
   Dùng lại khung .dh-* của Điều hành; tệp này chỉ thêm phần riêng.
   Bảng màu mầm non (CLAUDE.md mục 5): xanh ngọc #187274 (var --dam) · CAM #e7732c cho nút bấm.
   🔴 Cam chỉ đặc trên nền SÁNG/TRẮNG — không bao giờ chồng lên nền xanh ngọc.
   ════════════════════════════════════════════════════════════════════════════ */

.qlt { display: flex; flex-direction: column; gap: 4px; }
.qlt-tab { margin-bottom: 6px; }
.qlt-nam { margin: 2px 0 8px; }
.qlt-nhan-nho { font-size: 12px; font-weight: 800; color: var(--chu-mo, #4d6a69); letter-spacing: .3px; margin-right: 4px; }
.qlt-ghi-chu { font-size: 12.6px; color: var(--chu-mo, #4d6a69); line-height: 1.6; margin: 4px 0 8px; }
.qlt-kpi { margin: 4px 0 6px; }
.qlt-hang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.6px; margin-top: 7px; }
.qlt-pill-hang { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.qlt-dem { font-size: 12.4px; color: var(--chu-mo, #4d6a69); margin: 2px 0 6px; }

/* Nút cam — đặc, trên nền trắng của thẻ */
.dh-nut-gui.qlt-nut-cam, .dh-nut-lon.qlt-nut-cam {
  background: #e7732c; border-color: #e7732c; color: #fff; border-radius: 32px;
}
.dh-nut-gui.qlt-nut-cam:hover, .dh-nut-lon.qlt-nut-cam:hover { background: #cf6224; border-color: #cf6224; }
.qlt-nut-du { width: 100%; margin: 10px 0 4px; font-size: 15.5px; min-height: 56px; }
.qlt-nut-xoa { color: #a33024; border-color: #f2cccc; }
.qlt-nut-hang { margin-top: 10px; }
.qlt-nut-hang .dh-nut-gui { margin: 0; }

/* ① Thẻ nhóm/lớp */
.qlt-luoi-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.qlt-lop.vuot { border-color: #f2cccc; border-left: 4px solid #c0392b; background: #fffafa; }
.qlt-so { font-size: 17px; }
.qlt-pc .qlt-chip-nguoi {
  display: inline-flex; align-items: center; gap: 2px; background: #eef6f6; color: var(--dam, #187274);
  border: 1px solid var(--vien, #d7e7e7); border-radius: 999px; padding: 3px 4px 3px 11px; font-size: 12.8px; font-weight: 700;
}
.qlt-x {
  font: inherit; font-size: 16px; line-height: 1; cursor: pointer; border: 0; background: none;
  color: #a33024; min-width: 30px; min-height: 30px; border-radius: 50%;
}
.qlt-x:hover { background: #fbe9e7; }
.qlt-sua select.dh-o-nhap { flex: 1 1 140px; min-width: 0; max-width: 100%; }
.qlt-them-lop { margin-top: 14px; }

/* Biểu mẫu hai cột → một cột trên điện thoại */
.qlt-luoi-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.qlt-luoi-form label, .qlt-o-dai { display: block; font-size: 12.8px; font-weight: 700; color: #33415a; }
.qlt-luoi-form select.dh-o-nhap { width: 100%; margin-top: 6px; }
.qlt-o-dai { grid-column: 1 / -1; margin-top: 8px; }
.qlt-mat { font-weight: 600; color: #a33024; }
.qlt-form { margin: 6px 0 14px; background: #fff; border-style: solid; border-color: var(--vien, #d7e7e7); }
.qlt-goi-y { font-size: 13px; line-height: 1.6; margin: 10px 0 2px; color: #33415a; }
.qlt-dong-y { margin-top: 12px; padding: 10px 12px; background: #fdf3ec; border: 1px solid #f6d6c1; border-radius: 10px; }
.qlt-dong-y .dh-tick { margin-top: 8px; }
.qlt-dong-y small { display: block; color: var(--chu-mo, #4d6a69); font-size: 12px; margin-top: 2px; }

/* ② Danh sách trẻ */
.qlt-cong-cu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0 6px; }
.qlt-cong-cu .dh-nut-gui { margin: 0; min-width: 0; }
.qlt-tim { flex: 1 1 220px; margin-top: 0; }
.qlt-chips { margin: 4px 0 8px; }
.qlt-tre .tt small { word-break: break-word; }

/* ③ Điểm danh */
.qlt-ngay .dh-o-nhap { width: auto; margin-top: 0; }
.qlt-dd-dong { border-top: 1px dashed var(--vien, #d7e7e7); padding: 9px 0; }
.qlt-dd-dong.vang { background: #fffaf1; }
.qlt-dd-ten { font-size: 14px; margin-bottom: 6px; }
.qlt-dd-ten small { color: var(--chu-mo, #4d6a69); font-size: 12px; }
.qlt-seg-hang { display: flex; flex-wrap: wrap; gap: 6px; }
.qlt-seg {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; min-height: 42px; padding: 6px 12px;
  border-radius: 10px; border: 1.5px solid var(--vien, #d7e7e7); background: #fff; color: #33415a; flex: 1 1 auto;
}
.qlt-seg.on.co { background: #e5f3ec; border-color: #1e7f4f; color: #17663f; }
.qlt-seg.on.co_phep { background: #fdf3dc; border-color: #b7791f; color: #8f5d14; }
.qlt-seg.on.khong_phep { background: #fbe9e7; border-color: #c0392b; color: #a33024; }
.qlt-ly-do { margin-top: 6px; }
.qlt-suat { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.qlt-suat input { width: 110px; margin-top: 0; font-size: 18px; font-weight: 800; text-align: center; }
.qlt-suat small { flex-basis: 100%; color: var(--chu-mo, #4d6a69); font-size: 12px; }
.qlt-so-o { text-align: center; }
.qlt-bang-ngay .qlt-tong td { background: #f4faf9; }

/* ④ Cân đo */
.qlt-cd.qua-han { border-left: 4px solid #c0392b; }
.qlt-nhap-nhanh { margin-top: 10px; }

@media (max-width: 560px) {
  .qlt-luoi-form { grid-template-columns: 1fr; }
  .qlt-luoi-the { grid-template-columns: 1fr; }
  .qlt-seg { flex: 1 1 30%; padding: 6px 6px; font-size: 12.4px; }
  .qlt-cong-cu .dh-nut-gui { width: 100%; }
  .qlt-tre { flex-wrap: wrap; }
}

/* Soát 15/9/2026: người phụ trách là NHÂN VIÊN (y tế…) — chip viền nét đứt để phân biệt với giáo viên */
.qlt-pc .qlt-chip-nguoi.nv { background: #fff; border-style: dashed; }
.qlt-pc .qlt-chip-nguoi small { font-weight: 600; color: var(--chu-mo, #4d6a69); }
.qlt-sua select.qlt-vai { flex: 0 1 150px; }
.qlt-ngay small.qlt-ghi-chu { flex-basis: 100%; margin: 0; }
.qlt-nhap-nhanh label small.qlt-ghi-chu { display: block; font-weight: 600; margin: 4px 0 0; }