/* ═══ LỚP CỦA TÔI — giáo viên cá nhân (migration_137, 20/10/2026) ═══════════════════════════════════════════
   Ba tab: Hôm nay (điểm danh một chạm) · Sổ điểm danh · Lớp & phụ huynh. Dùng lại .pq-tabs, .luoi-hs (ô học sinh),
   .og-modal/.og-hop (hộp thoại), .badge của quanly.html. Bảng có nút KHÔNG bọc overflow-x: màn hẹp đổi hàng thành thẻ dọc
   (nhãn cột lấy từ data-nhan). Ngăn tạo/sửa lớp là .lr-nen (không dùng .og-modal: Esc/bấm nền của .og-modal đóng thẳng,
   còn ngăn này phải hỏi trước khi bỏ phần đã nhập). */
#lr-tabs button[hidden], #lr-f-tabs button[hidden] { display:none; }
#view-loprieng .lr-bar { display:flex; flex-wrap:wrap; gap:var(--k3); align-items:flex-end; margin:0 0 var(--k4); }
#view-loprieng .lr-o, #lr-ngan .lr-o, #lr-modal-xoa .lr-o { flex:1 1 200px; min-width:0; margin-bottom:var(--k3); }
#view-loprieng .lr-bar .lr-o { margin-bottom:0; }
#view-loprieng .lr-o > label, #lr-ngan .lr-o > label, #lr-modal-xoa .lr-o > label { display:block; font-size:var(--t-nho); color:var(--n-600); margin-bottom:var(--k1); }
#lr-ngan .lr-o > .nhan-o { display:flex; align-items:center; gap:6px; margin-bottom:var(--k1); }
#lr-ngan .lr-o > .nhan-o > label { margin:0; font-size:var(--t-nho); color:var(--n-600); }
#view-loprieng .lr-o input, #view-loprieng .lr-o select, #lr-ngan .lr-o input, #lr-ngan .lr-o select, #lr-ngan .lr-o textarea, #lr-modal-xoa .lr-o input { margin:0; }
#lr-ngan #lr-f-mon-tim { margin-bottom:var(--k2); }
.lr-phu { font-size:var(--t-sm); color:var(--n-500); margin:var(--k1) 0 0; }
.lr-thong-bao { border:1px solid var(--n-200); background:var(--n-50); border-radius:var(--r-vua); padding:var(--k3) var(--k4); color:var(--n-700); font-size:var(--t-nho); }
.lr-thong-bao[hidden] { display:none; }
.lr-han { margin:0; font-size:var(--t-sm); color:var(--n-600); display:flex; align-items:center; gap:6px; }
.lr-han.gan-het { color:var(--luu); font-weight:600; }
.lr-hang-nut { display:flex; flex-wrap:wrap; align-items:center; gap:var(--k2); margin-top:var(--k3); }
.lr-hang-nut button, #lr-lop-bang .lr-thaotac button, #lr-moi-bang button, #lr-f-hs-bang button, .lr-dd-dau button, .lr-ngan-dau button, .lr-gui-tay button {
  margin:0; padding:6px 12px; font-size:var(--t-sm); white-space:nowrap; }

/* Tab Hôm nay: thẻ tiết dạy (div role=button — thẻ cao hơn 40px nên không dùng <button>) */
.lr-tiet-ds { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:var(--k3); margin:0 0 var(--k4); }
.lr-tiet { display:flex; align-items:center; gap:var(--k3); border:1px solid var(--n-200); border-radius:var(--r-vua); background:var(--trang);
           padding:var(--k3) var(--k4); cursor:pointer; box-shadow:var(--bong-1); min-width:0; }
.lr-tiet:hover { border-color:var(--muc-400); background:var(--muc-50); }
.lr-tiet:focus-visible { outline:2px solid var(--muc-500); outline-offset:2px; }
.lr-tiet.dang-chon { border-color:var(--muc-600); box-shadow:0 0 0 3px var(--muc-100); }
.lr-tiet-gio { flex:none; width:56px; text-align:center; line-height:1.3; }
.lr-tiet-gio b { display:block; font-size:var(--t-lon); }
.lr-tiet-gio small, .lr-tiet-than small { display:block; color:var(--n-500); font-size:var(--t-sm); }
.lr-tiet-than { flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.lr-tiet .badge { flex:none; margin:0; white-space:nowrap; }
.lr-dd { border:1px solid var(--n-200); border-radius:var(--r-vua); background:var(--n-50); padding:var(--k3) var(--k4); margin:0 0 var(--k4); }
.lr-dd[hidden] { display:none; }
.lr-dd-dau, .lr-ngan-dau { display:flex; align-items:center; justify-content:space-between; gap:var(--k2); }
.lr-dd-dau h3, .lr-ngan-dau h3 { margin:0; font-size:var(--t-lon); min-width:0; overflow-wrap:anywhere; }
.lr-dem { margin:var(--k2) 0 0; font-size:var(--t-nho); color:var(--n-700); }
#lr-dd-ds .o small.zalo { display:block; color:var(--tot); font-size:var(--t-xs); }
#lr-dd-ds .o .badge { flex:none; }
.lr-kq { margin:var(--k3) 0 0; font-size:var(--t-nho); }
.lr-kq p { margin:0 0 var(--k1); }
.lr-kq .ok { color:var(--tot); font-weight:600; }
.lr-canh-bao { border:1px solid var(--luu-vien); background:var(--luu-nen); border-radius:var(--r-nho); padding:var(--k2) var(--k3); color:var(--n-800); }
.lr-gui-tay { margin-top:var(--k3); border-top:1px solid var(--n-200); padding-top:var(--k3); }
.lr-gui-tay[hidden] { display:none; }
.lr-gui-tay h4 { margin:0 0 var(--k2); font-size:var(--t-nho); }
.lr-gui-tay ul { list-style:none; margin:0; padding:0; }
.lr-gui-tay li { display:flex; align-items:center; justify-content:space-between; gap:var(--k2); padding:var(--k2) 0; border-bottom:1px solid var(--n-100); font-size:var(--t-nho); min-width:0; }
.lr-gui-tay li span { min-width:0; overflow-wrap:anywhere; }

/* Bảng: Sổ điểm danh · Lớp & phụ huynh · học sinh trong ngăn · mã mời */
#lr-so-bang, #lr-lop-bang, #lr-f-hs-bang, #lr-moi-bang { width:100%; table-layout:fixed; border-collapse:collapse; font-size:var(--t-nho); }
#lr-so-bang th, #lr-lop-bang th, #lr-f-hs-bang th, #lr-moi-bang th { text-align:left; padding:var(--k2) 6px; font-size:var(--t-sm); color:var(--n-600); border-bottom:1px solid var(--n-300); background:var(--trang); }
#lr-so-bang td, #lr-lop-bang td, #lr-f-hs-bang td, #lr-moi-bang td { padding:var(--k2) 6px; border-bottom:1px solid var(--n-100); vertical-align:top; overflow-wrap:anywhere; }
#lr-so-bang td small, #lr-lop-bang td small, #lr-moi-bang td small { display:block; color:var(--n-500); font-size:var(--t-sm); }
#lr-so-bang td.so { font-variant-numeric:tabular-nums; }
#lr-lop-bang .lr-thaotac, #lr-moi-bang .lr-thaotac { display:flex; flex-wrap:wrap; gap:var(--k1); justify-content:flex-end; }
#lr-lop-bang tr.ngung td { color:var(--n-500); }
#lr-lop-bang .badge, #lr-moi-bang .badge { margin-left:0; }
#lr-lop-bang .badge.ngung { background:var(--n-100); color:var(--n-600); border-color:var(--n-200); }
.lr-cuon { max-height:350px; overflow-y:auto; border:1px solid var(--n-200); border-radius:var(--r-vua); }
.lr-cuon thead th { position:sticky; top:0; }
#lr-f-hs-bang input { margin:0; padding:6px 8px; font-size:var(--t-nho); }
#lr-f-hs-bang td.stt { color:var(--n-400); font-variant-numeric:tabular-nums; }
#lr-f-hs-bang tr.moi td { background:var(--muc-50); }
.lr-ma { font-family:var(--font-so); font-size:var(--t-vua); font-weight:700; letter-spacing:.08em; }
.lr-ph { display:flex; align-items:center; justify-content:space-between; gap:var(--k2); margin:0 0 var(--k1); }
.lr-ph span { min-width:0; overflow-wrap:anywhere; }
.lr-buoc { margin:var(--k2) 0 var(--k3); padding-left:var(--k5); font-size:var(--t-nho); line-height:1.6; }

/* Lịch dạy trong ngăn: mỗi thứ một khối, mỗi buổi 5 chip tiết (nút bật/tắt aria-pressed) */
.lr-luoi-tiet { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:var(--k3); }
.lr-thu { border:1px solid var(--n-200); border-radius:var(--r-vua); padding:var(--k2) var(--k3); background:var(--trang); }
.lr-thu > b { display:block; font-size:var(--t-nho); margin-bottom:var(--k1); }
.lr-buoi-hang { display:flex; align-items:center; gap:6px; margin:4px 0; }
.lr-buoi-hang > span { flex:0 0 44px; font-size:var(--t-sm); color:var(--n-600); }
.lr-buoi-hang button { margin:0; width:32px; height:32px; padding:0; font-size:var(--t-sm); background:var(--trang); color:var(--n-700); border:1px solid var(--n-300); box-shadow:none; }
.lr-buoi-hang button:hover { background:var(--muc-50); border-color:var(--muc-400); }
.lr-buoi-hang button[aria-pressed=true] { background:var(--muc-600); color:#fff; border-color:var(--muc-600); }

/* Ngăn tạo/sửa lớp: bên phải ở màn rộng, cả màn ở điện thoại; chân ngăn dính đáy để nút Lưu luôn thấy */
.lr-nen { position:fixed; inset:0; z-index:70; display:flex; justify-content:flex-end; background:rgba(13,43,33,.45); }
.lr-ngan { width:min(600px,100%); height:100%; display:flex; flex-direction:column; background:var(--trang); box-shadow:var(--bong-3); }
.lr-ngan-dau { padding:var(--k4) var(--k5) var(--k2); }
.lr-ngan > .pq-tabs { padding:0 var(--k5); margin:0; border-bottom:1px solid var(--n-200); }
.lr-ngan-than { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:var(--k4) var(--k5); }
.lr-ngan-chan { border-top:1px solid var(--n-200); padding:var(--k3) var(--k5); background:var(--n-50); }
.lr-ngan-chan .lr-hang-nut { margin-top:0; }
.lr-ngan-chan .loi { margin:0 0 var(--k2); }
.lr-nhap-lai { margin:0 var(--k5) var(--k2); padding:var(--k2) var(--k3); border:1px solid var(--tin-vien); background:var(--tin-nen); border-radius:var(--r-nho); font-size:var(--t-nho); }
#lr-ngan section[hidden] { display:none; }

@media (max-width:900px) {
  #lr-so-bang thead, #lr-lop-bang thead, #lr-moi-bang thead { display:none; }
  #lr-so-bang, #lr-so-bang tbody, #lr-so-bang tr, #lr-so-bang td,
  #lr-lop-bang, #lr-lop-bang tbody, #lr-lop-bang tr, #lr-lop-bang td,
  #lr-moi-bang, #lr-moi-bang tbody, #lr-moi-bang tr, #lr-moi-bang td { display:block; }
  #lr-so-bang tr, #lr-lop-bang tr, #lr-moi-bang tr { border:1px solid var(--n-200); border-radius:var(--r-vua); background:var(--trang); padding:var(--k2) var(--k3); margin:var(--k2); }
  #lr-so-bang td, #lr-lop-bang td, #lr-moi-bang td { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--k3); border:0; padding:var(--k1) 0; }
  #lr-so-bang td::before, #lr-lop-bang td::before, #lr-moi-bang td::before { content:attr(data-nhan); flex:none; color:var(--n-500); font-size:var(--t-xs); }
  #lr-so-bang td.ten, #lr-lop-bang td.ten, #lr-moi-bang td.ten { flex-direction:column; gap:2px; }
  #lr-so-bang td.ten::before, #lr-lop-bang td.ten::before, #lr-moi-bang td.ten::before { display:none; }
  #lr-so-bang td > :not(small), #lr-lop-bang td > :not(small) { text-align:right; }
  #lr-lop-bang td.lr-thaotac, #lr-moi-bang td.lr-thaotac { justify-content:flex-start; }
  #lr-lop-bang td.lr-thaotac::before, #lr-moi-bang td.lr-thaotac::before { display:none; }
  #lr-so-bang tr[hidden], #lr-lop-bang tr[hidden], #lr-moi-bang tr[hidden] { display:none; }
  .lr-cuon { max-height:none; border:0; }
  .lr-ngan-dau, .lr-ngan-than { padding-left:var(--k4); padding-right:var(--k4); }
  .lr-ngan > .pq-tabs { padding:0 var(--k4); }
  .lr-ngan-chan { padding:var(--k3) var(--k4); }
}
#lr-modal-moi .og-hang-nut, #lr-modal-xoa .og-hang-nut { display:flex; flex-wrap:wrap; align-items:center; gap:var(--k2); margin-top:var(--k3); }
#lr-modal-moi .og-hang-nut button, #lr-modal-xoa .og-hang-nut button { margin:0; padding:6px 12px; font-size:var(--t-sm); white-space:nowrap; }
/* Nút chính của thanh trên tab (Tải bảng, + Tạo lớp): button.act mặc định cao 43px, bộ đo giao diện đòi ≤ 40px. */
#lr-so-csv, #lr-lop-moi { margin:0; padding:8px 16px; font-size:var(--t-nho); white-space:nowrap; }