/* ============ DANH SÁCH LỚP ============ */
/* ---- Tiêu đề chia nhóm CƠ SỞ ----
Bản trước chỉ là dòng chữ xám 14px, lẫn vào giữa rừng thẻ lớp nên rất khó
nhận ra ranh giới giữa các cơ sở (cô Quỳnh báo 25/07/2026). Giờ: chữ to,
đậm, có dải màu teal bên trái, nền nhạt, và một vạch kẻ tách hẳn nhóm trên. */
.nhom-coso { margin-top:26px; }
.nhom-coso + .nhom-coso { margin-top:34px; padding-top:24px; border-top:2px solid var(--vien); }
/* 🏫 THIẾT KẾ LẠI 08/09/2026 — Boss: *"cái title cơ sở màu xanh nước biển Nguyễn
Tuân tôi thấy thiết kế quá đơn giản và vuông góc"*.
Trước: khối chữ nhật VUÔNG HOÀN TOÀN (`--r-lg` là 0 nên `border-radius` cũ không
bo được góc nào), nền phẳng một màu, icon nhà trôi nổi cạnh chữ.
Nay: bo 10px cả bốn góc · icon ngồi trong ô tròn trắng · số lớp thành viên riêng
nền trắng, tách hẳn khỏi tên · dải teal bên trái giữ nguyên nhưng bo theo góc.
⛔ KHÔNG đổi `--r-lg`: đó là số đã chốt cho cả app (xem BANG-MAU-VA-CHU mục 4).
Bo tại chỗ bằng số cứng, y như đã làm cho nút hộp thoại.
⛔ Gradient rất nhẹ (hai bậc cùng tông) chứ không đổi màu — dải màu loè là thứ
Boss gọi "lộ ui AI". Ở nền tối luật riêng bên dưới trả về nền phẳng. */
/* ⛔⛔ 08/09/2026 (lần 2) — BOSS CHÊ "TRÔNG GIỐNG AI QUÁ", VÀ ĐÚNG.
Bản trước tôi dựng mắc ĐÚNG BA THỨ trong danh sách *mười thứ làm giao diện lộ ra
là máy làm* (BANG-MAU-VA-CHU mục 9):
① nền chuyển màu (gradient) — chính là mục số 5 của danh sách ấy
② ô TRÒN TRẮNG bọc icon nhà — Boss: *"cái icon nhà còn bị trắng xóa nữa chứ"*.
Mảng trắng 30px giữa dải xanh nhạt hút mắt hơn cả tên cơ sở.
③ số lớp thành VIÊN bo tròn 999px — huy hiệu kiểu thẻ quảng cáo
Ba thứ chồng lên nhau thành bốn tầng nền trong một dải cao 50px.
Mẫu gốc của app là GOOGLE SHEETS: nền phẳng, viền mảnh, không huy hiệu.
⛔ ĐỪNG dựng lại gradient, ô tròn, hay viên bo tròn ở đây.
⛔ NHƯNG cũng đừng trả về vuông góc: Boss chê *"thiết kế quá đơn giản và vuông
góc"* ngay trước đó. Bo 8px là chỗ đứng giữa hai lời chê — đủ mềm để không
thô, đủ phẳng để không loè.
Thứ giữ lại từ bản trước: bo góc, và số lớp đẩy sang phải (đọc ra hai mẩu tin
chứ không thành một câu "Nguyễn Tuân 37 lớp"). */
.nhom-coso h2 { display:flex; align-items:center; flex-wrap:wrap; gap:9px;
font-size:19px; font-weight:700; color:var(--xanh-dam);
text-transform:none; letter-spacing:-.01em;
margin:0 0 14px; padding:10px 14px;
background:var(--xanh-nhat);
border-left:4px solid var(--xanh);
border-radius:8px; }
.nhom-coso h2 > span:first-child { display:inline-flex; align-items:center; gap:9px;
min-width:0; }
/* Icon nhà TRẦN, ăn màu chữ của tiêu đề — không ô, không nền, không viền. */
.nhom-coso h2 i { flex:none; width:19px; height:19px; margin:0; padding:0;
background:var(--xanh-dam); }
/* Số lớp: chữ thường màu mờ, đẩy sang phải. Không viền, không nền, không bo tròn. */
.nhom-coso h2 .dem-nhom { font-size:13px; font-weight:600; color:var(--mo);
margin-left:auto; flex:none; }
/* ---- CỤM THEO THỨ, LỒNG TRONG TỪNG CƠ SỞ (cô Quỳnh 25/07/2026) ----
Nhạt hơn tiêu đề cơ sở một bậc để nhìn ra ngay cái nào bọc cái nào. */
.nhom-thu { margin:0 0 18px; }
.nhom-thu h3 { display:flex; align-items:center; flex-wrap:wrap; gap:9px;
font-size:14.5px; font-weight:700; color:#3A4A57;
margin:0 0 9px; padding:6px 0 6px 12px;
border-left:4px solid var(--vien); }
.nhom-thu h3 .dem-nhom { font-size:12.5px; font-weight:700; color:var(--mo); }
/* Cụm của HÔM NAY: tô cam cho bật hẳn lên — đây là thứ trợ giảng cần tìm nhất */
.nhom-thu.hom-nay h3 { color:#B26A00; border-left-color:var(--cam); }
.nhan-homnay { background:var(--cam); color:#fff; font-size:11px; font-weight:700;
border-radius:var(--r-xl); padding:3px 10px; }
/* ✨ ĐỔI CƠ SỞ THÌ THẤY NÓ ĐỔI — Boss chốt 08/09/2026
*"khi chọn cơ sở mới thay đổi thì phải có animation các block lớp nó hiện lên chứ
tôi thấy lúc tôi đổi cơ sở xong ko rõ đổi chưa vì ko cảm nhận đc sự thay đổi"*.
Danh sách vẽ lại tức thì nên mắt không bắt được gì đã đổi — nhất là khi hai cơ sở
có số lớp na ná nhau.
⛔ CHỈ chạy khi ĐỔI CƠ SỞ và khi MỞ MÀN, KHÔNG chạy lúc gõ tìm: gõ mỗi ký tự là
vẽ lại một lần, cho cả danh sách nhấp nháy theo từng phím là chóng mặt. Việc
bật/tắt nằm ở `veKetQuaLop(hieuUng)` trong js/tinh-nang.js — xem chú thích ở đó.
⛔ So le chỉ 10 thẻ đầu. Cơ sở đông có hơn trăm thẻ; so le hết thì thẻ cuối phải
chờ mấy giây mới hiện, thành ra chậm chứ không mượt.
⛔ `prefers-reduced-motion` phải tắt hẳn: người say chuyển động bật cờ ấy trong
máy thì mọi hiệu ứng phải nằm im, không nhấp nháy. */
@keyframes dslHien { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
#ketQuaLop.dsl-vao .nhom-coso h2 { animation:dslHien .34s cubic-bezier(.22,.9,.28,1) both; }
#ketQuaLop.dsl-vao .the-lop { animation:dslHien .30s cubic-bezier(.22,.9,.28,1) both; }
#ketQuaLop.dsl-vao .the-lop:nth-child(1) { animation-delay:.02s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(2) { animation-delay:.04s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(3) { animation-delay:.06s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(4) { animation-delay:.08s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(5) { animation-delay:.10s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(6) { animation-delay:.12s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(7) { animation-delay:.14s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(8) { animation-delay:.16s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(9) { animation-delay:.18s; }
#ketQuaLop.dsl-vao .the-lop:nth-child(n+10) { animation-delay:.20s; }
@media (prefers-reduced-motion: reduce) {
#ketQuaLop.dsl-vao .nhom-coso h2,
#ketQuaLop.dsl-vao .the-lop { animation:none; }
}
.luoi-lop { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:12px; }
/* 🔲 05/08 — SẮC NÉT: thẻ lớp vuông vắn hơn, viền rõ, bóng nét */
.the-lop { background:var(--the); border:1px solid var(--vien); border-radius:9px; padding:16px;
cursor:pointer; transition:box-shadow .12s, border-color .12s; }
.the-lop:hover { box-shadow:0 2px 4px rgba(15,90,92,.12), 0 6px 14px rgba(15,90,92,.10);
border-color:var(--xanh); }
/* ---- VIỀN THEO GIỜ HỌC + AI ĐANG Ở TRONG LỚP (cô Quỳnh 26/07/2026) ----
Mục đích cô nói rõ: *"cho nó dễ nhận biết với người mới"* → phải nhìn PHÁT
RA, nên dùng viền dày 2px + nền nhạt + nhãn chữ, không chỉ đổi màu mờ mờ.
⚠️ Dùng `box-shadow` làm viền thay cho `border`: border làm thẻ to thêm 4px
→ cả lưới thẻ xô lệch mỗi khi tới giờ học (họ hàng bẫy §6.16 và bẫy ô
"đang sửa" ở bảng điểm). */
.the-lop.dang-hoc { box-shadow:0 0 0 2px var(--o-tot); background:#F2FAF5; }
.the-lop.sap-hoc { box-shadow:0 0 0 2px var(--cam); background:#FFF9F2; }
/* Có người đang mở lớp này → thêm quầng tím, KHÔNG đè lên viền giờ học */
.the-lop.co-nguoi { box-shadow:0 0 0 2px #7C5BD0, 0 6px 18px rgba(124,91,208,.18); }
.the-lop.co-nguoi.dang-hoc { box-shadow:0 0 0 2px var(--o-tot), 0 0 0 5px rgba(124,91,208,.28); }
.the-lop.co-nguoi.sap-hoc { box-shadow:0 0 0 2px var(--cam), 0 0 0 5px rgba(124,91,208,.28); }
/* ⛔ CHẤM TRÒN VẼ BẰNG CSS, KHÔNG DÙNG EMOJI — Boss chốt 08/09/2026.
Trước: chuỗi chữ mở đầu bằng 🟢 / 🟠. Emoji nằm trong danh sách "mười thứ làm
giao diện lộ ra là máy làm", lại mỗi máy vẽ một kiểu (Android tròn dẹt, Windows
viền đen) nên không bao giờ khớp màu app.
`currentColor` cho chấm ăn theo màu chữ của chính nhãn, nên nền tối tự đúng. */
.nhan-gio { display:inline-flex; align-items:center; gap:6px;
font-size:11px; font-weight:700; border-radius:999px;
padding:2px 9px; margin-bottom:6px; background:#fff; border:1px solid var(--vien); }
.nhan-gio::before { content:""; width:7px; height:7px; flex:none;
border-radius:50%; background:currentColor; }
.the-lop.dang-hoc .nhan-gio { color:#12613A; border-color:var(--o-tot); background:#E8F6EC; }
.the-lop.sap-hoc .nhan-gio { color:#9A6400; border-color:var(--cam); background:#FFF3D9; }
/* Tên người đang ở trong lớp — hiện THẲNG trên thẻ vì điện thoại không rê chuột được */
.ai-trong-lop { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.ai-nho { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
color:#4A3B7A; background:#EDE9FB; border-radius:999px; padding:2px 8px 2px 3px; }
.ai-nho .cham-mau { width:13px; height:13px; border-radius:50%; display:inline-block; }
/* 👤 04/08 (cô Quỳnh): Avatar ẢNH THẬT + chữ tắt cho người đang ở lớp */
.ai-nho .ai-anh { width:18px; height:18px; border-radius:50%; object-fit:cover; display:inline-block; flex:none; }
.ai-nho .ai-tat { width:18px; height:18px; border-radius:50%; display:inline-flex; align-items:center;
justify-content:center; font-size:9px; font-weight:700; color:#fff; flex:none; }
/* 🎨 04/08 (cô Quỳnh): MÀU THEO CHỨC VỤ ở khung lớp —
trợ giảng(staff)=VÀNG · giáo vụ(giaovu)=TÍM · admin=ĐỎ · giáo viên(teacher)=XANH LÁ · owner=CẦU VỒNG */
.ai-nho.vt-staff, .ai-nho.vt-giaovu, .ai-nho.vt-admin, .ai-nho.vt-teacher {
border:2px solid var(--vt); background:var(--the); color:var(--chu); padding:1px 8px 1px 2px; }
.ai-nho.vt-staff { --vt:#E0A200; }
.ai-nho.vt-giaovu { --vt:#8B5CF6; }
.ai-nho.vt-admin { --vt:#E5484D; }
.ai-nho.vt-teacher { --vt:#20A171; }
.ai-nho.vt-staff .ai-tat, .ai-nho.vt-giaovu .ai-tat,
.ai-nho.vt-admin .ai-tat, .ai-nho.vt-teacher .ai-tat { background:var(--vt); }
.ai-nho.vt-owner { color:var(--chu); border:2px solid transparent; padding:1px 8px 1px 2px;
background:linear-gradient(var(--the),var(--the)) padding-box,
linear-gradient(90deg,#ff004c,#ff9a00,#ffe600,#33d17a,#00b4d8,#7b2ff7,#ff004c) border-box; }
.ai-nho.vt-owner .ai-tat { background:conic-gradient(from 0deg,#ff004c,#ff9a00,#ffe600,#33d17a,#00b4d8,#7b2ff7,#ff004c); }
.the-lop .ten { font-size:19px; font-weight:700; line-height:1.2; }
/* ⏰ GIỜ HỌC — mẩu tin NỔI BẬT NHẤT sau tên lớp, Boss chốt 08/09/2026
*"cái giờ … trở nên nổi bật và sắp xếp rõ ràng hơn đi chứ nó nối tiếp nhau thế
nếu lớp mà có nhiều giờ học thì nhìn rối mắt lắm"*.
Trước: giờ nằm lẫn trong dòng chữ mờ cùng thứ và phòng, hai ca dính thành một
chuỗi số dài. Nay: đứng riêng, màu chữ CHÍNH (không mờ), mỗi ca MỘT DÒNG.
⛔ `tabular-nums` là chỗ ăn tiền: phông hệ thống vẽ số 1 hẹp hơn số 0, nên hai
dòng "17:30–19:15" và "10:00–11:45" lệch cột nhau trông như gõ ẩu. Bật nó
thì mọi chữ số rộng bằng nhau, hai dòng thẳng cột như trong bảng tính.
⛔ KHÔNG tô nền, KHÔNG viền, KHÔNG bo tròn cho mẩu giờ — Boss vừa chê dải cơ sở
"trông giống AI quá" đúng vì mấy thứ ấy. Nổi bật bằng ĐỘ ĐẬM và MÀU CHỮ. */
.the-lop .tl-gio { display:flex; flex-direction:column; gap:1px; margin-top:5px; }
.the-lop .tl-gio span { font-size:13.5px; font-weight:700; color:var(--chu);
line-height:1.35; font-variant-numeric:tabular-nums;
letter-spacing:.01em; }
/* 21/09/2026 — lớp học nhiều thứ: dòng của thứ KHÁC nhóm đang xem thì lùi xuống
màu chữ phụ, để mắt bắt ngay ca của chính ngày ấy. Vẫn giữ nét đậm vừa (600) để
không thành chữ mờ khó đọc — Boss vừa chê chữ nền tối mờ. */
.the-lop .tl-gio span.khac-thu { color:var(--mo); font-weight:600; }
.the-lop .phu { color:var(--mo); font-size:12.5px; margin-top:4px; }
/* 👤 Tên giáo viên TÁCH RIÊNG một dòng (08/09/2026). Trước nó nhét trong `.phu`
sau một thẻ ` chứ không chỉ viền ô chọn — liếc dọc cột là thấy ngay
lớp còn mấy em học.
⛔ NỀN NHẠT, CHỮ ĐẬM MÀU. Tô nền đặc màu xanh lá / đỏ cho 20 hàng liền nhau thì
bảng thành cái cầu vồng, đúng thứ cô Quỳnh đã chê ba lần ("lộ rõ ui AI").
Nền ~8% + chữ đậm là đủ nổi mà vẫn đọc được số trong ô.
⛔ KHÔNG chỉ dựa vào màu: chữ trong ô vẫn ghi rõ "On Going" / "Stop". Người mù
màu đỏ-lục đọc chữ, không đọc màu.
⛔ Khai màu bằng BIẾN ở đây rồi dùng lại cho chip đếm phía trên. Nền tối chỉ
cần đè lại sáu biến này, không phải viết lại cả khối. */
:root {
/* ⛔ Hình icon dùng lại cho `::before`/`::after` — 08/09/2026.
Lớp `.ic-*` chỉ dùng được khi có thẻ `` thật trong HTML. Mấy chỗ Boss
bảo bỏ chữ (nút Làm mới · cặp đang chờ/đã xử lý · bốn ô số) thì icon phải
do CSS vẽ ra, nên cùng một hình phải để được ở cả hai nơi. Đổi hình thì
đổi ở khai báo `.ic-*` phía dưới VÀ ở đây, không thì hai chỗ lệch nhau. */
--mi-dongho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7v5.2l3.2 2'/%3E%3C/svg%3E");
--mi-lich: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
--mi-xong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6l4.8 4.8L19.6 7.1'/%3E%3C/svg%3E");
--mi-canhbao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2L22 20.4H2z'/%3E%3Cpath d='M12 9.4v4.6'/%3E%3Ccircle cx='12' cy='17.4' r='.9' fill='%23000' stroke='none'/%3E%3C/svg%3E");
--mi-vongtron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3C/svg%3E");
--tt-chay-nen:#E8F5EC; --tt-chay-chu:#256B39; --tt-chay-vien:#B6DDC3;
--tt-di-nen:#EFEFEE; --tt-di-chu:#5C5A56; --tt-di-vien:#D3D1CD;
--tt-dung-nen:#FBEAE7; --tt-dung-chu:#A8352A; --tt-dung-vien:#EBC3BD; }
body.toi { --tt-chay-nen:#16291D; --tt-chay-chu:#7FD6A0; --tt-chay-vien:#2B4634;
--tt-di-nen:#242729; --tt-di-chu:#9A9490; --tt-di-vien:#33383C;
--tt-dung-nen:#2A1D1C; --tt-dung-chu:#E5766C; --tt-dung-vien:#4A2C28; }
.qlh-bang td.qlh-tt.tt-chay { background:var(--tt-chay-nen); }
.qlh-bang td.qlh-tt.tt-di { background:var(--tt-di-nen); }
.qlh-bang td.qlh-tt.tt-dung { background:var(--tt-dung-nen); }
.qlh-bang td.qlh-tt.tt-chay .nv-in { color:var(--tt-chay-chu); border-color:var(--tt-chay-vien); font-weight:700; }
.qlh-bang td.qlh-tt.tt-di .nv-in { color:var(--tt-di-chu); border-color:var(--tt-di-vien); font-weight:700; }
.qlh-bang td.qlh-tt.tt-dung .nv-in { color:var(--tt-dung-chu); border-color:var(--tt-dung-vien); font-weight:700; }
.qlh-bang td.qlh-tt .nv-in { background:transparent; }
/* Hàng của em đã dừng / đã chuyển đi thì mờ nhẹ cả hàng — nhưng CHỈ mờ, không
khoá: cô Quỳnh vẫn phải sửa lại được nếu bấm nhầm. */
.qlh-bang tr:has(td.tt-dung) .qlh-ten .nv-in,
.qlh-bang tr:has(td.tt-di) .qlh-ten .nv-in { color:var(--mo); }
.ql-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:var(--r-xl);
width:fit-content; white-space:nowrap; }
.ql-badge.congkhai { background:#E4F5EB; color:#2E7D32; }
.ql-badge.nhap { background:#FFF3D9; color:#9A6A00; }
.ql-badge.sheet { background:#E4EFFB; color:#1F63B8; }
/* ⚠️ 01/09/2026 — lớp mà tab bên Google Sheet đã bị xoá. Con tem THAY tem
"Google Sheet" (không đứng thêm bên cạnh): hai tem cùng nói về Sheet trên một
hàng với tên lớp thì đẩy tên lớp xuống dòng, mà tem này đã hàm ý nguồn Sheet. */
.ql-badge.mat-tab { background:#FDF0E3; color:#9A4B00; }
/* 🎒 06/09/2026 — hai con tem trong hàng HỌC SINH (không phải hàng lớp).
⛔ `display:inline-block` chứ đừng để `width:fit-content` của tem cha đẩy nó
xuống dòng riêng: ô Tên đã có sẵn ô nhập, tem phải nằm ngay bên cạnh.
⛔ Xanh cho "đã biết đi đâu", cam cho "cần xem lại" — cùng bộ màu với tem
`mat-tab` ở trên, đừng nghĩ ra màu mới. */
.ql-badge.da-roi-lop, .ql-badge.mat-tren-file {
display:inline-block; margin-left:6px; font-size:10.5px; vertical-align:middle; }
.ql-badge.da-roi-lop { background:#E4EFFB; color:#1F63B8; }
.ql-badge.mat-tren-file { background:#FDF0E3; color:#9A4B00; }
/* Dải chỉ việc phải làm tiếp, đặt ngay trên dãy nút của chính thẻ đó — đọc xong
là bấm được luôn, không phải đi tìm màn khác (luật công-cụ-cho-người-thật). */
.ql-mat-tab { margin:0 0 10px; padding:9px 12px; border-radius:var(--r-md);
background:#FDF0E3; color:#9A4B00; border:1px solid #F0C08A;
font-size:12px; line-height:1.55; }
.ql-mat-tab b { font-weight:700; }
.ql-the.ql-sheet { opacity:.97; }
.ql-the { position:relative; }
.ql-the.ql-chon { border-color:var(--xanh); box-shadow:0 0 0 2px rgba(20,160,160,.25); }
.ql-tick { position:absolute; top:8px; right:8px; cursor:pointer; }
.ql-tick input { width:18px; height:18px; cursor:pointer; accent-color:var(--xanh); }
.ql-chon-thanh { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 12px;
padding:9px 13px; background:#E1F4F3; border:1px solid #9FD9D6; border-radius:var(--r-lg); position:sticky; top:0; z-index:5; }
.ql-chon-so { font-size:13.5px; color:var(--muc); } .ql-chon-so b { font-size:15px; }
/* 🗄️ Tab Đang chạy / Đã kết thúc trong Quản lý lớp */
.ql-tab { display:flex; gap:8px; margin:10px 0 4px; flex-wrap:wrap; }
.ql-tab-nut { font-size:14px; font-weight:700; padding:8px 16px; border-radius:var(--r-xl); cursor:pointer;
border:1px solid var(--vien); background:var(--the); color:var(--muc); display:flex; align-items:center; gap:7px; }
.ql-tab-nut:hover { border-color:var(--xanh); }
.ql-tab-nut.chon { background:var(--xanh); color:#fff; border-color:var(--xanh); }
.ql-tab-so { font-size:12px; font-weight:700; background:rgba(0,0,0,.12); border-radius:var(--r-xl); padding:1px 9px; }
.ql-tab-nut.chon .ql-tab-so { background:rgba(255,255,255,.28); }
/* 📗 06/09/2026 — HÀNG TAB LỌC THỨ HAI (đã / chưa lên điểm danh — Boss).
Nhỏ và nhẹ hơn hàng trên có chủ đích: hàng trên chọn KHO lớp (đang chạy / đã
kết thúc), hàng này chỉ lọc trong kho ấy. Hai hàng nút y hệt nhau xếp chồng là
người đọc không biết cái nào bao cái nào.
⛔ ĐỪNG đổi thành viền đứt hay chữ nhạt để "cho khác": lúc đang chọn nó vẫn phải
là nút xanh đặc như hàng trên, không thì không nhìn ra mình đang lọc cái gì. */
.ql-tab-len { margin:2px 0 8px; }
.ql-tab-len .ql-tab-nut { font-size:13px; font-weight:600; padding:5px 12px; }
.ql-tab-len .ql-tab-so { font-size:11px; font-weight:700; padding:1px 7px; }
.ql-the.ql-kt { opacity:.9; border-style:dashed; }
/* ---- Lưới kiểu Sheets ---- */
/* `overscroll-behavior-x:contain` chặn kéo ngang lan ra ngoài (trên điện thoại
hay bị vuốt ngang một cái là trình duyệt hiểu nhầm thành "lùi trang").
⚠️ CỐ Ý chỉ chặn trục X. Đặt `contain` cả hai trục thì cuộn dọc hết bảng sẽ
KHÔNG đẩy tiếp được trang — ngón tay bị kẹt trong bảng, đúng cái khó mà
cô Quỳnh báo 25/07/2026. */
/* ⭐ `touch-action:none` = app TỰ LO cả hai chiều — PHẢN HỒI TỨC THÌ.
Bắt buộc phải tự lo: gần như mọi ô đều là /` co lại vừa đúng nội dung — bảng không bao giờ tự
nở ra bằng khối cha. Nhưng `.khung-cuon` là thẻ ``, mà `
` thì LUÔN
rộng hết phần cha. Trên màn 2340px, bảng một buổi chỉ có 14 cột nên dừng ở
khoảng giữa, còn cái khung viền xám bo tròn nền trắng vẫn chạy tiếp hết bề
ngang — thành một mảng trắng trơn to tướng bên phải.
⛔ CÁCH SỬA: cho KHUNG ôm sát bảng thay vì bắt BẢNG nở ra cho đầy khung.
Bắt bảng nở đầy sẽ kéo giãn mọi cột theo tỉ lệ, tức là phá đúng cái bề rộng
cột mà cô Quỳnh vừa yêu cầu lưu riêng cho từng tài khoản hôm nay. Không đáng.
⛔ `fit-content` chứ KHÔNG phải `max-content`: bảng rộng hơn chỗ trống thì khung
vẫn chỉ lấy đúng chỗ đang có rồi cho cuộn ngang như cũ. Dùng `max-content` là
khung phình theo bảng và đẩy cả trang ra, hỏng hẳn.
⛔ Làm bằng CSS chứ không đo trong JS: đo bề ngang của chính khung rồi lại đặt bề
ngang cho nó là tự quay vòng — lần đo sau ra số khác lần trước.
══════════════════════════════════════════════════════════════════════════════ */
.khung-cuon { overflow:auto; border:1px solid var(--vien); border-radius:var(--r-xl); background:#fff;
max-height:calc(100vh - 190px - var(--dnc-du, 0px));
width:fit-content; max-width:100%;
/* ⛔ `-x` chứ KHÔNG phải trần. Chú thích ⚠️ ngay trên đã dặn "CỐ Ý chỉ
chặn trục X", nhưng mã lại viết `overscroll-behavior:contain` — chặn
luôn cả trục Y, tức cuộn dọc hết bảng thì ngón tay KẸT trong bảng,
không đẩy tiếp được trang. Đúng cái khó cô Quỳnh báo 25/07/2026 mà
dòng chú thích ấy sinh ra để chống. Vá 23/08/2026. */
touch-action:none; overscroll-behavior-x:contain; }
/* Kéo bảng bằng chuột trên máy tính (điện thoại vẫn dùng cuộn sẵn có của
trình duyệt cho mượt — xem hàm gaKeoBang) */
.khung-cuon.keo-duoc { cursor:grab; }
/* Ô nhập trong khung cuộn: con trỏ chữ, để biết là bôi chọn được (10/08/2026). */
.khung-cuon.keo-duoc textarea, .khung-cuon.keo-duoc select, .khung-cuon.keo-duoc [contenteditable],
.khung-cuon.keo-duoc input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]) { cursor:auto; }
.khung-cuon.dang-keo { cursor:grabbing; user-select:none; }
.khung-cuon.dang-keo select, .khung-cuon.dang-keo input { pointer-events:none; }
/* ---- Thanh nhảy giữa các buổi ----
Bảng rộng cả trăm cột; vuốt tay tới buổi cần điền là cực hình trên điện thoại.
Nút ◀ ▶ nhảy đúng một khối DAY, nút "Buổi đang điền" nhảy thẳng về chỗ cần làm. */
.dh-day { display:flex; align-items:center; gap:7px; margin:0 0 9px; flex-wrap:wrap; }
.dh-day button { border:1px solid var(--vien); background:#fff; border-radius:var(--r-md);
padding:8px 12px; font-size:13px; font-weight:700; color:var(--chu); }
.dh-day button:hover:not(:disabled) { border-color:var(--xanh); color:var(--xanh); }
.dh-day button:disabled { opacity:.4; cursor:default; }
/* ⛔ BỀ RỘNG CỐ ĐỊNH — cô Quỳnh chốt 25/07/2026: "nút không bị di chuyển theo
số lượng chữ". Tên buổi dài ngắn khác nhau ("DAY 9" vs "DAY 10 (old)") mà để
ô chữ co giãn thì hai nút ◀ ▶ nhảy qua nhảy lại, bấm liên tiếp là trượt tay.
`flex:0 0 auto` + `width` cố định: chữ dài thì cắt bằng "…", nút đứng im. */
/* ---- AVATAR + MENU TÀI KHOẢN ---- */
/* Ba nút cũ đã gom hết vào menu avatar → ẨN đi cho thanh trên gọn.
⛔ ĐỪNG XOÁ khỏi HTML: menu avatar bấm hộ chúng (`$("#nutTaiKhoan").click()`),
xoá là các mục trong menu chết câm. Chỉ giấu bằng CSS. */
#nutCaiDat, #nutTaiKhoan, #nutThoat { display:none !important; }
.tk-boc { position:relative; margin-left:auto; }
.tk-nut { display:flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--vien);
border-radius:999px; padding:4px 10px 4px 4px; cursor:pointer; color:var(--chu); font:inherit; }
.tk-nut:hover { background:var(--nen2); }
/* 👤 Hình người mặc định — xem khối lý do ở `AV_NGUOI` trong phần mã.
⛔ `fill:currentColor` là chỗ mấu chốt: một hình dùng chung cho sáu ô có nền
khác nhau, mỗi ô tự quyết màu bằng `color` của chính nó. */
.av-nguoi { width:100%; height:100%; display:block; fill:currentColor; }
/* ⛔ Ô ảnh đại diện KHÔNG còn tô màu sinh theo tên nữa (bỏ ngày 22/08/2026) —
nền xám nhạt, hình người xám, đúng kiểu Facebook. Xem `AV_NGUOI`. */
.tk-anh { width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
background:var(--nen2); color:var(--mo); border:1px solid var(--vien);
box-sizing:border-box; flex:0 0 auto; }
.tk-anh.to { width:42px; height:42px; font-size:15px; }
.tk-anh { overflow:hidden; } /* để ảnh avatar tròn khít */
.tk-anh img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.tk-ten { font-weight:700; font-size:13px; max-width:150px; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.tk-mui { font-size:10px; opacity:.6; }
/* ══════════════════════════════════════════════════════════════════════════
👤 MENU AVATAR PHẢI DÍNH VÀO NÚT TRÒN — Boss 10/09/2026
──────────────────────────────────────────────────────────────────────────
Boss: *"cái block avatar ở trên cùng thanh màn hình tròn tròn bé bé ấn vào
hiện ra mục này thì tôi muốn bạn trang trí lại cho tôi mục này nó gắn liền
với cái block tròn hơn đi chứ nó tách ra lơ lửng giữa màn hình quá, và ấn
phát hiện luôn gây giật mình nên tôi muốn nó có animation nó mở kéo xuống
nhẹ nhàng."*
BA THỨ SỬA, mỗi thứ chữa đúng một nửa câu Boss:
① Khe hở 6px → 4px, và có MỘT MŨI TÊN nhỏ trỏ lên đúng tâm nút tròn. Hộp
không còn trôi tự do: mắt nối được nó với nút vừa bấm.
② Bóng đổ nhẹ đi (32px → 22px) và thêm viền trên đậm hơn một nấc — bóng quá
dày làm hộp trông như đang bay lơ lửng bên trên trang.
③ Mở ra thì TRƯỢT XUỐNG 6px + hiện dần trong 0,16 giây, gốc biến đổi ở góc
trên–phải (đúng chỗ nút tròn) nên nó trông như bung ra TỪ cái nút.
⛔ DÙNG `animation`, KHÔNG DÙNG `transition`. Menu bật/tắt bằng thuộc tính
`hidden` (`#tkMenu.hidden`), mà phần tử vừa từ `display:none` hiện ra thì
KHÔNG có trạng thái đầu để transition chạy từ đó — trình duyệt nhảy thẳng
tới trạng thái cuối, y hệt không có hiệu ứng. `animation` thì chạy ngay
khi phần tử xuất hiện, không cần JS đụng vào.
⛔ CHỈ 0,16 GIÂY. Đây là menu người ta bấm mỗi ngày; dài hơn là thấy chậm.
⛔ TÔN TRỌNG `prefers-reduced-motion`: có người tắt hiệu ứng vì chóng mặt.
⛔ MŨI TÊN vẽ bằng hai hình vuông xoay 45°, KHÔNG dùng border-triangle: cần cả
viền lẫn nền, mà tam giác bằng border thì không có viền riêng. Lớp dưới là
viền, lớp trên là nền — đúng cách Bootstrap/Popper vẫn làm.
⛔ Mũi tên đặt ở `right:14px` — tâm nút tròn 30px trên điện thoại (padding 3px)
rơi vào quãng đó. Đo lại nếu đổi cỡ `.tk-anh`.
══════════════════════════════════════════════════════════════════════════ */
.tk-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:60; min-width:232px;
/* ⛔ MỘT BIẾN CHO CẢ HỘP LẪN MŨI TÊN. Trước đây hộp gõ thẳng #fff còn mũi tên
lấy var(--the) — nền tối là hai màu lệch nhau, mũi tên lộ ra như miếng vá.
Ai đổi màu menu sau này chỉ phải sửa đúng một chỗ. */
--tk-nen:#fff;
background:var(--tk-nen); border:1px solid var(--vien); border-radius:var(--r-xl); padding:6px;
box-shadow:0 8px 22px rgba(0,0,0,.13);
transform-origin:top right;
animation:tkMenuXuong .16s cubic-bezier(.22,.68,.36,1) both; }
/* Mũi tên: lớp dưới là viền, lớp trên là nền — đè lên nhau lệch 1px. */
.tk-menu::before, .tk-menu::after {
content:""; position:absolute; right:14px; width:11px; height:11px;
transform:rotate(45deg); border-radius:2px; }
.tk-menu::before { top:-6px; background:var(--vien); }
.tk-menu::after { top:-5px; background:var(--tk-nen); }
@keyframes tkMenuXuong {
from { opacity:0; transform:translateY(-6px) scale(.985); }
to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .tk-menu { animation:none; } }
.tk-menu .tk-dau { display:flex; gap:10px; align-items:center; padding:8px 10px 10px;
border-bottom:1px solid var(--vien); margin-bottom:6px; }
.tk-menu .tk-dau small { display:block; opacity:.65; font-size:11.5px; margin-top:2px; }
.tk-menu button { display:block; width:100%; text-align:left; background:transparent; border:0;
padding:9px 10px; border-radius:var(--r-md); cursor:pointer; font:inherit; font-size:13.5px; color:var(--chu); }
.tk-menu button:hover { background:var(--nen2); }
.tk-menu button.do { color:#c0392b; }
/* 🌗 03/09/2026 — ĐỔI NỀN NGAY TRONG MENU AVATAR (cô Quỳnh, mẫu Supabase).
⛔ Hai nút nằm NGANG trong một hàng, khác mọi mục khác vốn xếp dọc — nên phải
gỡ `display:block; width:100%` mà luật `.tk-menu button` ở trên áp cho
MỌI nút trong menu, không thì hai nút chồng nhau thành hai dòng.
⛔ Dấu ĐANG CHỌN vẽ theo `body.toi`, không theo một biến JS: nền tối bật/tắt
từ ⚙ Cài đặt hay từ đây thì dấu ở đây vẫn luôn đúng, khỏi đồng bộ tay. */
.tk-menu .tk-nhan-nho { padding:8px 10px 3px; font-size:11px; font-weight:600;
color:var(--mo); text-transform:none; }
.tk-menu .tk-chedo { display:flex; gap:5px; padding:0 6px 4px; }
.tk-menu .tk-chedo button { display:flex; align-items:center; justify-content:center;
gap:6px; width:auto; flex:1 1 0; text-align:center; font-size:12.5px;
padding:7px 6px; border:1px solid var(--vien); background:var(--the); }
body:not(.toi) .tk-menu .tk-chedo [data-tkchedo="sang"],
body.toi .tk-menu .tk-chedo [data-tkchedo="toi"] {
background:var(--xanh-nhat); border-color:var(--xanh); color:var(--muc);
font-weight:600; }
.tk-menu .tk-vach { height:1px; background:var(--vien); margin:6px 4px; }
/* ⛔ 03/09/2026 — BỐN MỤC NÀY ẨN KHỎI MENU AVATAR, KHÔNG XOÁ.
Cô Quỳnh xin menu gọn kiểu Supabase ("gmail, màn hình tối hay trắng, đăng
xuất thế thôi"). Bốn mục dưới đây ĐỀU CÒN ĐƯỜNG VÀO KHÁC — đã soi tận nơi:
· Quản lý tài khoản · Quyền theo chức vụ · Lớp tôi phụ trách → ngăn
"Quản trị" của thanh dọc (`TK_QUANLY`)
· Cài đặt → nút "Cài đặt" của thanh dọc (trang ⚙ Cài đặt, `TK_CANHAN`)
⛔ ẨN chứ KHÔNG XOÁ THẺ: `chayMucTK` và vài đoạn khác còn tìm các id này.
Xoá là chúng nổ, mà nổ lúc khởi động thì app đứng trước khi vào màn nào.
⛔ Mục nào SAU NÀY mất đường ở thanh dọc thì phải gỡ lớp này trả nó về menu —
đừng để người dùng cụt cả hai cửa. */
.tk-menu .tk-co-duong-khac { display:none; }
@media (max-width:640px) { .tk-nut { padding:3px; border:0; } .tk-menu { min-width:210px; } }
.dh-day .dh-chu { font-size:13px; font-weight:700; color:var(--mo);
flex:0 0 auto; width:150px; text-align:center;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Thanh KÉO nhanh giữa các buổi — lớp 40-80 buổi bấm ◀▶ không xuể */
.dh-day .dh-keo { flex:1 1 120px; min-width:90px; max-width:320px; accent-color:var(--xanh);
height:22px; cursor:grab; touch-action:none; }
.dh-day .dh-keo:active { cursor:grabbing; }
/* Nới rộng + cho chữ thở: 190px làm nhãn "4. DAY 1 (24/7/2026) ← đang điền" bị
nhồi dính cục (cô Quỳnh báo 25/07/2026). */
/* 📜 02/09/2026 — Ô CHỌN BUỔI ĐỔI TỪ SANG BẢNG TỰ VẼ CÓ CUỘN.
Cô Quỳnh: *"lớp nào mà có nhiều day thì nó sẽ dài kinh khủng… thiết kế cái
chức năng kéo lên xuống để không bị dài quá"*.
⛔ ĐỪNG QUAY VỀ . Bảng xổ của do HỆ ĐIỀU HÀNH vẽ, CSS không
với tới được chiều cao của nó — max-height viết vào cũng vô nghĩa. Lớp 54
buổi là danh sách chạy gần hết màn hình, đúng cái cô Quỳnh chỉ.
⛔ Chiều cao hãm bằng min(46vh, 340px): trên màn thấp thì 46vh nhỏ hơn nên
bảng không tràn khỏi màn; trên màn cao thì 340px chặn lại cho khỏi dài
quá. Thiếu một trong hai vế là hỏng ở đúng loại màn còn lại.
⛔ overscroll-behavior:contain — cuộn hết bảng thì DỪNG, không đẩy tiếp cho
trang nền cuộn theo. Không có nó thì cuộn tới đáy danh sách buổi là cả
bảng điểm danh phía sau chạy mất chỗ. */
.dh-day .dh-chon-boc { position:relative; flex:0 1 auto; min-width:150px; max-width:290px; }
.dh-day .dh-chon { display:flex; align-items:center; gap:6px; width:100%;
font-size:12.5px; padding:6px 8px; line-height:1.5; text-align:left; font-weight:500;
border:1px solid var(--vien); border-radius:var(--r-md);
background:#fff; color:var(--chu); cursor:pointer; }
/* ⛔ Ba lớp chứ không hai: luật `.dh-day button:hover:not(:disabled)` ở trên có
trọng số CAO HƠN `.dh-day .dh-chon:hover`, nên viết ngắn là chữ trên nút hoá
teal theo luật kia. Thêm `.dh-chon-boc` cho đủ sức đè. */
.dh-day .dh-chon-boc .dh-chon:hover { border-color:var(--xanh); color:var(--chu); }
.dh-day .dh-chon-chu { flex:1; min-width:0; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.dh-day .dh-chon-mui { flex:none; font-size:10px; color:var(--mo); }
.dh-day .dh-chon-menu { position:absolute; left:0; right:auto; top:calc(100% + 4px);
z-index:70; min-width:100%; width:max-content; max-width:min(460px, 86vw);
max-height:min(46vh, 340px); overflow-y:auto; overflow-x:hidden;
overscroll-behavior:contain; padding:4px;
background:var(--the); border:1px solid var(--vien); border-radius:var(--r-md);
box-shadow:0 12px 32px rgba(0,0,0,.16); }
/* Chuyen dong MO RA — Boss chot 08/09/2026: *"cai nut an vao chon day ngay thi
no ko co aniamtion keo cai cot xuong ma bup phat hien ra giat minh nen toi muon
co saniamtion tha xuong lua chon de tim day"*.
Menu nay bat/tat bang thuoc tinh `hidden` chu khong dung/xoa phan tu, nen chi
can bam vao `:not([hidden])` la du — khong phai sua JS.
Cung khuon voi bang tha cua nut chon co so (`dncThaXuong`), de hai cho mo ra
giong nhau; nhung giu keyframes rieng vi menu nay do tu `.dh-chon-boc` chu
khong phai fixed theo man.
KHONG dung `scale`: menu co `overflow-y:auto` va `max-height`, keo gian la chu
ben trong meo theo. */
@keyframes dhMenuXuong { from { opacity:0; transform:translateY(-6px); }
to { opacity:1; transform:none; } }
.dh-day .dh-chon-menu:not([hidden]) {
animation:dhMenuXuong .15s cubic-bezier(.22,.9,.28,1) both; }
@media (prefers-reduced-motion: reduce) {
.dh-day .dh-chon-menu:not([hidden]) { animation:none; }
}
/* 🔎 20/09/2026 — Ô TÌM trong bảng chọn buổi (Boss xin "thanh tìm kiếm").
⛔ Ô tìm DÍNH trên đỉnh (`position:sticky`) còn danh sách thì cuộn riêng
bên dưới — cuộn tới buổi 40 mà ô tìm trôi mất thì muốn sửa chữ vừa gõ
phải cuộn ngược lên đầu.
⛔ Nền phải ĐẶC (`var(--the)`), không trong suốt: chữ của mấy dòng buổi
cuộn qua bên dưới sẽ chạy xuyên qua ô tìm. */
.dh-day .dh-chon-tim { position:sticky; top:0; z-index:2; display:flex;
align-items:center; gap:0; margin:-4px -4px 4px; padding:4px;
background:var(--the); border-bottom:1px solid var(--vien-nhe); }
.dh-day .dh-chon-tim i[class^="ic-"] { position:absolute; left:14px;
width:13px; height:13px; margin:0; color:var(--mo); pointer-events:none; }
.dh-day .dh-chon-tim input { width:100%; height:32px; padding:0 9px 0 30px;
border:1px solid var(--vien); border-radius:var(--r-sm); background:var(--nen-o);
color:var(--chu); font-family:inherit; font-size:12.5px; }
.dh-day .dh-chon-tim input:focus { outline:none; border-color:var(--xanh); }
/* Chrome vẽ sẵn một nút X trong `type=search`; nó lệch tông với cả app. */
.dh-day .dh-chon-tim input::-webkit-search-cancel-button {
-webkit-appearance:none; appearance:none; }
.dh-day .dh-chon-trong { margin:0; padding:12px 9px; font-size:12.5px;
color:var(--mo); line-height:1.5; }
/* Vùng chạm 44px trên điện thoại — đây là đường đi chính tới từng buổi.
Số 44 theo chuẩn Apple; Google đòi 48dp nhưng bảng này nằm trong một menu
thả xuống có giới hạn chiều cao, 44 là mức vừa đủ mà vẫn thấy được 5 dòng. */
@media (max-width:820px) {
.dh-day .dh-chon-tim input { height:40px; font-size:14px; }
.dh-day .dh-chon-menu .dh-mucbuoi { min-height:44px; display:flex;
align-items:center; }
}
.dh-day .dh-chon-menu .dh-mucbuoi { display:block; width:100%; text-align:left;
background:transparent; border:0; border-radius:var(--r-sm); padding:7px 9px;
font:inherit; font-size:12.5px; font-weight:500; color:var(--chu); cursor:pointer;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dh-day .dh-chon-menu .dh-mucbuoi:hover { background:var(--nen2); color:var(--chu); }
.dh-day .dh-chon-menu .dh-mucbuoi.chon { background:var(--xanh-nhat); font-weight:700; }
@media (max-width:640px) { .dh-day .dh-chon-boc { max-width:100%; flex:1 1 100%; } }
.dh-day .dh-toi { border-color:var(--cam); background:#FFF6EA; color:#B26A00;
display:inline-flex; align-items:center; justify-content:center;
gap:6px; }
.dh-day .dh-toi:hover { background:var(--cam); color:#fff; }
table.luoi { border-collapse:separate; border-spacing:0; font-size:13px; }
.luoi th, .luoi td { border-right:1px solid #E5E9EE; border-bottom:1px solid #E5E9EE;
padding:0; white-space:nowrap; background:#fff; }
/* ---- VẠCH NGĂN GIỮA CÁC KHỐI DAY ----
Cột đầu của mỗi khối có vạch dày; khối kế tiếp nhìn phát là tách hẳn ra,
không bị lẫn sang khối bên cạnh (user yêu cầu 24/07/2026). */
.luoi .batdau-day { border-left:3px solid #253449 !important; }
.luoi td.batdau-day { border-left:3px solid #C3CBD6 !important; }
.luoi .h-day { border-left:3px solid #101A28 !important; }
/* hàng tiêu đề khối DAY */
.luoi .h-day { position:sticky; top:0; z-index:5; color:#fff; text-align:center;
font-weight:700; font-size:12.5px; padding:7px 8px; }
.h-day.nau { background:var(--day-nau); }
.h-day.navy { background:var(--day-navy); }
.h-day .ngay { font-weight:600; opacity:.85; margin-left:6px; font-size:11.5px; }
.h-day .done { display:inline-block; margin-left:8px; background:rgba(255,255,255,.18);
border-radius:var(--r-xl); padding:1px 9px; font-size:10.5px; }
/* 🚫 31/08/2026 — BUỔI GIÁO VỤ ĐÃ HUỶ. Phải ĐỎ và đọc được ngay trên đầu khối:
trước đây buổi huỷ trông y hệt buổi thường, trợ giảng bấm mãi không gõ được ô
nào mà không một chữ nào nói vì sao. */
.h-day .done.dahuy { background:#B0281C; color:#fff; font-weight:700; }
.h-day.dangmo { outline:3px solid var(--cam); outline-offset:-3px; }
.h-day .nut-done { margin-left:9px; border:none; border-radius:var(--r-md); background:var(--cam); color:#fff;
font-size:11px; font-weight:700; padding:4px 12px; cursor:pointer; }
.h-day .nut-done:hover { filter:brightness(1.12); }
.h-day .nut-done:disabled { opacity:.6; cursor:default; }
/* Ô cho trợ giảng TỰ GHI tên buổi (sheet để trống, không ghi sẵn DAY N) */
.o-ten-day { width:96px; border:none; border-radius:var(--r-o, 8px); padding:3px 8px; font-size:12px;
font-weight:700; text-align:center; background:rgba(255,255,255,.92); color:#1C2530; }
.o-ten-day:focus { outline:2px solid var(--cam); }
.o-ten-day::placeholder { color:#8A93A0; font-weight:600; }
/* Ô tiêu đề cột: bấm đúp đổi tên · GIỮ RỒI KÉO để đổi chỗ cột */
.h-cot { cursor:pointer; }
.h-cot:hover { background:#E4EAF0; }
.h-cot.moi { background:#E8F4EC; }
/* Chỉ khi BẬT nút "Đổi chỗ cột" thì tiêu đề mới thành chỗ để kéo cột.
Lúc tắt, tiêu đề để trống cho việc vuốt bảng đi ngang. */
#app.keo-cot-bat .h-cot[data-cot] { cursor:grab; background:#FFF4E5; }
#app.keo-cot-bat .h-cot[data-cot]::after {
content:"↔"; display:block; margin-top:2px; font-size:12px; color:var(--cam-dam); }
#app.keo-cot-bat .h-cot.khoa-mo[data-cot] { background:#FFEBCC; }
body.dang-keo-cot { user-select:none; }
body.dang-keo-cot .h-cot[data-cot] { cursor:grabbing; }
/* nút bật/tắt */
.nut-keocot { border:1px solid var(--vien); background:#fff; color:var(--chu);
border-radius:var(--r-md); padding:8px 13px; font-size:13px; font-weight:700; }
.nut-keocot:hover { border-color:var(--cam); color:var(--cam-dam); }
.nut-keocot.dang-bat { background:var(--cam); border-color:var(--cam); color:#fff;
box-shadow:0 3px 12px rgba(245,130,31,.35); }
.cot-dang-cam { box-shadow:inset 0 0 0 2px var(--cam); opacity:.97; }
th.cot-dang-cam { z-index:9; }
td.cot-dang-cam { position:relative; z-index:4; }
/* các cột né sang nhường chỗ — đây là phần "animation" cô Quỳnh muốn */
.cot-nhuong { transition:transform .16s cubic-bezier(.2,.8,.3,1); }
/* Nút thêm cột — để trên THANH CÔNG CỤ của lớp, không nhét cuối bảng.
Cuối bảng là sau hơn 100 cột, phải cuộn sang phải mãi mới thấy (user báo 24/07). */
.nut-themcot { border:1px dashed var(--xanh); background:var(--xanh-nhat); color:var(--xanh-dam);
border-radius:var(--r-md); padding:8px 13px; font-size:13px; font-weight:700; }
.nut-themcot:hover { background:var(--xanh); color:#fff; border-style:solid; }
.nut-molai { border:1px solid var(--cam); background:#FFF6EA; color:#B26A00;
border-radius:var(--r-md); padding:8px 13px; font-size:13px; font-weight:700; }
.nut-molai:hover { background:var(--cam); color:#fff; }
/* ---- hàng tên cột con ----
⚠️ Tên cột tiếng Việt rất dài: "Số câu sai phần luyện tập kiến thức mới".
Bản cũ bó trong 86px + chữ 10.5px nên nó xếp thành 6–7 dòng chữ li ti dồn
cục vào nhau, đọc không nổi (cô Quỳnh báo 25/07/2026). Nới rộng + tăng cỡ
chữ + giãn dòng. Bảng có rộng thêm cũng không sao: đã có nút ◀ ▶ nhảy buổi. */
.luoi .h-cot { position:sticky; top:33px; z-index:5; background:#F2F5F8; color:#2C3742;
font-size:11.5px; font-weight:700; padding:7px 7px; text-align:center;
white-space:normal; overflow-wrap:break-word;
min-width:70px; max-width:152px; line-height:1.35; vertical-align:middle; }
.h-cot.khoa-mo { background:#FEF3E2; }
/* Cột chỉ có trong app, Sheet không có chỗ tương ứng → đánh dấu cho khỏi hiểu nhầm */
.h-cot.chi-app { background:#F3EEFB; }
.h-cot.chi-app.khoa-mo { background:#EFE6FB; }
.dau-chiapp { display:block; margin-top:3px; font-size:9.5px; font-weight:700;
color:#6B4FA8; }
/* ---- Cột NGÀY ĐIỂM DANH (đầu mỗi khối DAY, giống sheet thật) ----
Máy tự điền cho cả lớp theo ngày của buổi, không ai gõ tay. */
.luoi .h-ngay { min-width:84px; max-width:98px; color:#1F2A5A; }
.luoi td.o-ngay { min-width:84px; background:#F7F9FB; }
.luoi td.o-ngay.dangmo { background:#FFF7E8; }
.o-ngay .gt-ngay { font-size:11.5px; font-weight:700; color:#46525F; white-space:nowrap; }
/* Máy tính: ngày đủ 4 số năm. Điện thoại: bản ngắn (xem @media bên dưới). */
.o-ngay .ngay-ngan { display:none; }
/* cột cố định bên trái */
.luoi .c-ma { position:sticky; left:0; z-index:6; min-width:72px; background:#FAFBFC;
color:var(--mo); font-size:11.5px; padding:0 8px; }
/* ⭐⭐ TÊN HỌC SINH XUỐNG DÒNG, KHÔNG CẮT — cô Quỳnh đề nghị 13/08/2026:
*"cột tên vẫn không lấy theo tên dài nhất… bạn có thể thiết kế giống cột tên của
điện thoại, nếu khó quá thì các tên dài sẽ xuống dòng"*.
Bản điện thoại làm vậy từ lâu và chạy tốt (xem khối @media). Nay áp cho cả màn
rộng. Cách này CHẮC HƠN HẲN cách đo bề rộng: dù cột bị bóp hẹp vì lý do gì —
người kéo tay, bảng tính tổng thiếu, màn hình nhỏ — thì tên cũng chỉ XUỐNG DÒNG
chứ không bao giờ mất chữ. Không phải đoán, không phải đo.
⛔ Hàng lưới cao 32px; tên hai dòng ở cỡ chữ 13px lọt vừa, số hàng nhìn thấy
không đổi. Tên nào dài tới ba dòng thì hàng đó cao thêm — chấp nhận được, vì
thà hàng cao hơn còn hơn gọi nhầm tên học sinh.
⛔ `break-word` chứ KHÔNG `break-all`: phải ngắt ở khoảng trắng giữa các tiếng,
không được cắt ngang một tiếng thành "Nguy / ễn". */
.luoi .c-ten { position:sticky; left:72px; z-index:6; min-width:158px; background:#FAFBFC;
font-weight:600; padding:3px 10px; border-right:2px solid #CBD4DC;
white-space:normal; line-height:1.2; overflow-wrap:break-word;
word-break:normal; }
.luoi thead .c-ma, .luoi thead .c-ten { z-index:8; background:#F2F5F8; font-size:11.5px;
color:#3D4854; font-weight:700; text-align:left; padding:6px 10px; }
/* hàng tổng */
.luoi .tong td { background:#FBF6EC; color:#8A6D1B; font-weight:700; text-align:center;
font-size:12px; height:26px; }
.luoi .tong .c-ma, .luoi .tong .c-ten { background:#FBF6EC; text-align:left; }
/* ô dữ liệu */
/* `position:relative` để ô CHỮ đang gõ neo được vào đúng ô của nó khi nổi lên
(xem `.o textarea.o-chu:focus`). Không ảnh hưởng ô thường. */
.luoi td.o { text-align:center; min-width:70px; height:32px; position:relative; }
.o span.gt { display:block; padding:6px 5px; font-weight:700; font-size:12.5px; }
.o.khoa { background:#FAFAF8; }
.o.khoa span.gt { opacity:.92; }
/* màu theo giá trị — cả ô khoá lẫn ô đang điền */
.gt-tot { background:var(--o-tot); color:#fff; }
.gt-nghi { background:var(--o-nghi); color:#fff; }
.gt-thieu { background:var(--o-thieu); color:#3A2A00; }
.gt-quen { background:var(--o-quen); color:#fff; }
/* ô đang điền: select/input tràn kín ô */
.o select, .o input { width:100%; height:30px; border:none; background:transparent; text-align:center;
font-size:12.5px; font-weight:700; padding:0 2px; appearance:auto; }
.o select:focus, .o input:focus { outline:2px solid var(--cam); outline-offset:-2px; }
.o.dangmo { background:#FFFDF7; }
/* Ô buổi ĐÃ KHOÁ nhưng giáo vụ vẫn sửa được — nền tím nhạt cho phân biệt rõ */
.o.gvsua { background:#F5F1FB; }
.o.gvsua select, .o.gvsua input { font-weight:700; }
.o input { font-variant-numeric:tabular-nums; }
/* ⭐ 29/08/2026 — VẠCH BÁO ĐANG GIỮ Ô ĐẦU CỘT ĐẦU ĐIỂM (xem `hoiDoiTongCot`).
Giữ 3 giây mà màn hình đứng im thì người ta buông tay ở giây thứ hai. Vạch chạy
từ trái sang phải cho biết còn bao lâu nữa.
⛔ Chỉ vẽ vạch, KHÔNG đổi nền hay chữ của ô — ô vẫn phải đọc được, vì giữ hụt là
trợ giảng gõ điểm tiếp ngay tại đó.
Dùng nền chèn của chính ô nên không cần thêm thẻ nào; giữ hụt thì gỡ lớp là hết. */
.o input.o-giu-tong {
background-image:linear-gradient(var(--xanh-dam,#0B7A6E),var(--xanh-dam,#0B7A6E));
background-repeat:no-repeat; background-position:left bottom;
background-size:0 2px; animation:oGiuTong 2.6s linear forwards;
}
@keyframes oGiuTong { from { background-size:0 2px; } to { background-size:100% 2px; } }
@media (prefers-reduced-motion:reduce) {
/* Người tắt hiệu ứng vẫn phải biết là đang giữ — đứng yên nhưng hiện đủ vạch. */
.o input.o-giu-tong { animation:none; background-size:100% 2px; }
}
/* ══════════════════════════════════════════════════════════════════════════════
Ô VIẾT CHỮ: NẰM YÊN TRONG BẢNG, CHỈ CAO DẦN — cô Quỳnh 16/08/2026
──────────────────────────────────────────────────────────────────────────────
*"lúc viết dài ra thì cái ô đó phải mở rộng ra ở phía bên phải chứ không phải
nhảy giữa bảng. Mở rộng ra như các công cụ giáo vụ có sheet khác á, nó cố định
và đẹp."*
Bề ngang do CỘT quyết định — `.luoi td.o-cot-chu` cho cột rộng sẵn 260px, đó
chính là phần "rộng ra ở phía bên phải". Chiều cao do cơ chế chung `o-bang` lo,
giống hệt Follow up · Chăm sóc · Lịch thi.
⛔⛔ TUYỆT ĐỐI KHÔNG cho ô này `position:absolute` hay `fixed` khi gõ. Đã thử
HAI LẦN trong ngày 16/08 và cả hai lần ô đều BAY RA GIỮA TRANG, rời khỏi hàng
của nó — cô Quỳnh gửi ảnh chụp. Ô phải ở yên đúng ô của nó.
══════════════════════════════════════════════════════════════════════════════ */
.luoi td.o-cot-chu { min-width:260px; text-align:left; }
/* ⛔⛔ CHỮ TĨNH CỦA BUỔI ĐÃ KHOÁ KHÔNG ĐƯỢC ĐÒI BỀ RỘNG — Boss cho sửa riêng lỗi này 22/09/2026
(ngoài lỗi này màn Điểm danh vẫn cấm đụng).
Trợ giảng lùi về buổi đã khoá (nút ◀) thì ô nhận xét là `span.gt` chứ không phải ô gõ. Đo
Chrome thật 22/09, nhận xét ~470 chữ: cột nhận xét 2.835px một dòng (bảng 3.296px ở màn
1600, 3.165px ở màn điện thoại 390), kéo hẹp cột không co, bấm vào không mở khung xem.
Buổi đang mở cùng lớp: ô 260px (390: 70px), 4 dòng rồi cắt — đúng luật ㊱ Boss chốt 11/09.
GỐC: `capNhatTong` (gaKeoCot) cố ý chỉ đặt `min-width` cho bảng (vá 11/09 cho Dự giờ), bảng
không có bề rộng cụ thể thì Chrome BỎ `table-layout:fixed`, đo cột theo chữ; mà `span`
mang `nowrap` (luật chung bảng Sheet) nên cả đoạn nằm một dòng và đẩy cột ra.
⇒ Chữ tĩnh theo ĐÚNG số của ô gõ: `width:0; min-width:100%` = không góp bề rộng nào vào
cột, rồi phủ đủ ô · xuống dòng · trần 80px = 4 dòng × 20px (khối ㊱) · cắt gọn, không dấu.
Bấm vào ô bị cắt thì khung xem sẵn có (`sheetMoKhungXem`) mở đủ chữ — không viết thêm JS.
⛔ ĐỪNG gắn `.sheet-hang` vào bộ chọn: `gaKeoCot` đo và GHIM bề rộng cột TRƯỚC khi `sheetGan`
gắn lớp ấy cho hàng. Đã đo: bộ chọn có `.sheet-hang` thì cột bị ghim 560px (trần kéo cột).
⛔ ĐỪNG đổi sang `width:100%`: đo 22/09 (Chrome thật) thì ở màn 1600 cột bị ghim 560px (trần
kéo cột) chứ không về 260px như buổi đang mở. `width:0` mới là thứ không góp bề rộng.
⛔ ĐỪNG kẹp dòng bằng `-webkit-line-clamp`: nó tự vẽ "…", mà Boss đã bỏ dấu ấy 21/09.
⛔ Chỉ ô CHỮ (kiểu "chu"). Ô tích nhiều mục (`.o-tich-xem`) cũng mang `o-cot-chu` — không đụng.
Bài canh: kiem-thu/thu-o-khoa-nhan-xet-22-09.js */
.luoi td.o.khoa.o-cot-chu > span.gt:not(.o-tich-xem) {
display:block; width:0; min-width:100%;
white-space:pre-wrap; overflow-wrap:anywhere; text-align:left;
max-height:80px; overflow:hidden;
}
.o textarea.o-chu { width:100%; box-sizing:border-box; display:block;
text-align:left; font-size:13px; font-family:inherit;
font-variant-numeric:normal; letter-spacing:0;
border:none; outline:none; background:transparent; color:inherit;
resize:none; overflow:hidden; white-space:pre-wrap;
padding:5px 7px; line-height:1.45; min-height:30px; }
/* Đang gõ: CHỈ tô viền cho biết đang ở ô nào. Không dời, không đổi bề ngang. */
.o textarea.o-chu:focus { box-shadow:inset 0 0 0 2px var(--muc); background:var(--the);
border-radius:var(--r-o, 8px); }
/* Ô chữ chưa gõ gì: chữ gợi ý mờ hẳn cho khỏi rối mắt giữa một bảng toàn số. */
.o textarea.o-chu::placeholder { color:var(--mo); opacity:.55; }
/* ⛔ PHẢI đặt CẢ NỀN cho , không chỉ màu chữ.
Dòng `.o select { background:transparent }` ở trên có độ ưu tiên CAO HƠN
`.gt-tot` (2 phần chọn so với 1), nên nó đè mất nền màu — kết quả là
chữ TRẮNG nằm trên nền TRẮNG, người dùng chọn "Đủ" xong thấy ô trống trơn
và tưởng bị mất (user báo 24/07/2026). Bốn dòng dưới có độ ưu tiên cao hơn
nên thắng. ĐỪNG rút gọn thành chỉ đặt `color`. */
.o select.gt-tot { background:var(--o-tot); color:#fff; }
.o select.gt-nghi { background:var(--o-nghi); color:#fff; }
.o select.gt-thieu { background:var(--o-thieu); color:#3A2A00; }
.o select.gt-quen { background:var(--o-quen); color:#fff; }
/* Ô chọn còn trống: viền đứt cho thấy "chỗ này chưa điền" */
.o select:not([class*="gt-"]) { background:#fff; color:var(--mo);
box-shadow:inset 0 0 0 1px #E0E6EC; border-radius:var(--r-o, 8px); }
/* Danh sách xổ ra phải luôn chữ đen nền trắng, không thừa hưởng màu của ô */
.o select option { background:#fff; color:#1C2530; font-weight:600; }
/* ---- HÀNG CỦA HỌC SINH NGHỈ: TÔ XÁM + KHOÁ (cô Quỳnh 25/07/2026) ----
"bôi đen ... để đỡ điền nhầm". Dùng xám đậm chứ không đen kịt: phải nhìn ra
ngay là hàng chết, nhưng vẫn đọc được tên em đó là ai.
⛔ Ô "Điểm danh" CỐ Ý không bị khoá — tích nhầm còn có đường sửa lại. */
.luoi tr.hs-nghi .c-ma,
.luoi tr.hs-nghi .c-ten { background:#D5DAE0; color:#5A646E; text-decoration:line-through; }
.luoi tr.hs-nghi td.o { background:#DFE3E8; }
/* ---- HỌC SINH NGHỈ HẲN (Move Out / Stop) — cô Quỳnh 26/07/2026 ----
Đậm hơn hẳn kiểu "nghỉ một buổi": em này không bao giờ điền nữa, phải nhìn
ra ngay từ xa để khỏi lỡ tay. Nhưng vẫn đọc được tên (còn tra cứu). */
.luoi tr.hs-nghi-han .c-ma,
.luoi tr.hs-nghi-han .c-ten { background:#B9C0C8; color:#3B444D; text-decoration:line-through; }
.luoi tr.hs-nghi-han td.o { background:#C6CCD3; }
.luoi tr.hs-nghi-han td.o.o-nghi-khoa { background:#BEC5CC; }
.nhan-nghi-han { display:block; margin-top:2px; font-size:9.5px; font-weight:700;
color:#fff; background:#7A848E; border-radius:var(--r-sm);
padding:1px 5px; width:fit-content; text-decoration:none; }
.luoi td.o.o-nghi-khoa { background:#CFD5DB; }
/* ---- DẢI "ĐANG ẨN N EM ĐÃ NGHỈ" (cô Quỳnh 14/08/2026) ----
Giấu hàng thì PHẢI nói ra là đang giấu, kèm nút bật lại. Giấu im lặng thì giáo
viên đếm thiếu một em rồi tưởng app làm mất học sinh của lớp. */
.dai-an-nghi { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin:8px 0 0; padding:7px 11px; font-size:12.5px;
color:var(--mo); background:var(--nen2);
border:1px solid var(--vien); border-radius:var(--r-md); }
.dai-an-nghi b { color:var(--chu); font-weight:700; }
.dai-an-nghi button { border:1px solid var(--vien); background:var(--the);
color:var(--chu); border-radius:var(--r-md); padding:5px 11px;
font-size:12.5px; font-weight:600; cursor:pointer;
font-family:inherit; }
.dai-an-nghi button:hover { border-color:var(--xanh); color:var(--xanh); }
/* Lớp mà CẢ LỚP đã nghỉ (đo thật 14/08/2026: 6/125 lớp) → lưới rỗng trơn, phải
có câu giải thích chứ không thì nhìn như app hỏng. */
.luoi tr.hang-trong-nghi td { padding:20px 12px; text-align:center;
color:var(--mo); font-size:13px; }
/* ---- HÀNG HỌC BÙ (giả lập, chỉ trong app) — cô Quỳnh 28/07/2026 ----
Nền vàng nhạt + nhãn để phân biệt rõ với học sinh thật của lớp; dữ liệu điền
vào KHÔNG bao giờ lên Google Sheet. */
.luoi tr.hs-bu .c-ma,
.luoi tr.hs-bu .c-ten { background:#FFF6DE; }
.luoi tr.hs-bu td.o { background:#FFFCF2; }
/* 🎙️ Đã nộp bài nói → cả hàng xanh lá (cô Quỳnh 03/08/2026). */
.luoi tr.hs-nop-noi td { background:#E4F5EB; }
.luoi tr.hs-nop-noi .c-ma, .luoi tr.hs-nop-noi .c-ten { background:#D2EEDD; }
.luoi tr.hs-nop-noi .c-ten { color:#155F35; }
.nhan-noi { margin-right:3px; }
.nhan-bu { display:block; margin-top:2px; font-size:9.5px; font-weight:700;
color:#8A5A00; background:#FFE7A8;
border:1px solid #F0CE77; border-radius:var(--r-sm);
padding:0 5px; width:fit-content; text-decoration:none; }
.hs-xoabu { float:right; margin-left:4px; border:none; background:transparent;
cursor:pointer; font-size:13px; line-height:1; padding:1px 2px;
border-radius:var(--r-sm); opacity:.75; }
.hs-xoabu:hover { opacity:1; background:#FBD9D3; }
/* Ô bị khoá: làm mờ hẳn và bỏ con trỏ chuột cho khỏi mời bấm (bẫy §6.9) */
.o select:disabled, .o input:disabled {
background:transparent; color:#8A939C; cursor:not-allowed; opacity:1;
-webkit-text-fill-color:#8A939C; /* Safari tự làm nhạt thêm nếu không chặn */
}
.luoi tr.hs-nghi td.o.o-nghi-khoa select:not([class*="gt-"]) { box-shadow:none; background:transparent; }
/* ---- AI ĐANG Ở Ô NÀO — giống Google Sheet (cô Quỳnh 26/07/2026) ----
Viền màu quanh ô + thẻ tên nhỏ ở góc trên. Màu sinh từ TÊN nên mỗi người một
màu cố định, trùng đúng màu avatar của họ — nhìn phát biết ai.
⚠️ `outline` chứ không phải `border`: border làm ô rộng thêm 4px → cả bảng
xô lệch mỗi lần có người bước vào ô (bẫy họ hàng với §6.16). */
.luoi td.o.dang-sua { outline:2px solid var(--mau-nguoi); outline-offset:-2px; position:relative; }
.luoi td.o.dang-sua::after {
content: attr(data-ai);
position:absolute; left:-2px; top:-15px; z-index:4;
background:var(--mau-nguoi); color:#fff;
font-size:9.5px; font-weight:700; line-height:1;
padding:2px 5px; border-radius:var(--r-sm) var(--r-sm) var(--r-sm) 0;
white-space:nowrap; pointer-events:none;
}
/* Hàng đầu bảng: thẻ tên chui lên trên mất → lật xuống dưới ô */
.luoi tbody tr:first-child td.o.dang-sua::after { top:auto; bottom:-15px; border-radius:0 var(--r-sm) var(--r-sm) var(--r-sm); }
/* Thanh "đang cùng xem lớp này" trên đầu bảng */
.thanh-cung-xem { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
margin:0 0 8px; font-size:12px; color:var(--mo); }
.thanh-cung-xem .ai { display:inline-flex; align-items:center; gap:5px;
background:#fff; border:1px solid var(--vien); border-radius:999px;
padding:3px 10px 3px 4px; font-weight:700; color:var(--chu); }
.thanh-cung-xem .cham-mau { width:16px; height:16px; border-radius:50%; display:inline-block; }
.ghi-chu-khoa { font-size:12px; color:var(--mo); margin-top:8px; }
/* Khối hướng dẫn gập lại được (cô Quỳnh 23/08/2026 — xem chú thích ở chỗ dựng).
⛔ `list-style:none` + `::-webkit-details-marker` để bỏ tam giác mặc định — mỗi
trình duyệt vẽ một kiểu, để nguyên là mỗi máy nhìn một khác. */
.ghi-chu-gap { margin-top:10px; }
.ghi-chu-gap > summary { cursor:pointer; list-style:none; display:inline-flex;
align-items:center; gap:6px; font-size:12.5px; color:var(--mo);
padding:8px 12px; border:1px solid var(--vien); border-radius:var(--r-md);
background:var(--the); min-height:38px; box-sizing:border-box; }
.ghi-chu-gap > summary::-webkit-details-marker { display:none; }
.ghi-chu-gap > summary::after { content:"▾"; font-size:11px; opacity:.7; }
.ghi-chu-gap[open] > summary::after { content:"▴"; }
.ghi-chu-gap > summary:hover { border-color:var(--xanh); color:var(--xanh); }
.ghi-chu-gap[open] > .ghi-chu-khoa { margin-top:10px; }
/* ============ GHI CHÚ CỦA BUỔI ============ */
.khung-note { background:#fff; border:1px solid var(--vien); border-radius:var(--r-xl); padding:12px 14px; margin-top:12px; }
.khung-note h4 { margin:0 0 8px; font-size:13px; color:var(--mo); }
.khung-note textarea { width:100%; min-height:74px; border:1px solid var(--vien); border-radius:var(--r-o, 8px);
padding:10px 12px; font-size:14px; font-family:inherit; resize:vertical; line-height:1.5; }
.khung-note textarea:focus { outline:2px solid var(--xanh); border-color:transparent; }
.khung-note textarea[readonly] { background:#F7F8FA; color:var(--mo); }
.note-duoi { display:flex; gap:9px; align-items:center; margin-top:9px; flex-wrap:wrap; }
.note-luu { font-size:12.5px; color:var(--o-tot); font-weight:700; opacity:0; transition:opacity .25s; }
.note-luu.hien { opacity:1; }
/* ============ PHIẾU BUỔI (để chụp ảnh) ============
Đây là thứ cô Quỳnh chụp màn hình gửi phụ huynh, nên phải ĐẸP và DỄ ĐỌC.
Bản cũ: bảng 11 cột nhồi trong hộp thoại rộng 560px, chữ 11.5px, tên cột dài
dồn thành nhiều dòng dính nhau — "xấu khó nhìn" (cô báo 25/07/2026).
Cách chữa: hộp thoại rộng hẳn ra, chữ to lên, cột thở ra, hai cột đầu
(số thứ tự + tên) DÍNH bên trái để cuộn ngang vẫn biết đang xem em nào. */
.phieu { background:#fff; border-radius:var(--r-xl); padding:20px 20px 16px; }
.phieu-dau { border-bottom:2px solid var(--xanh); padding-bottom:12px; margin-bottom:14px;
display:flex; justify-content:space-between; align-items:center; gap:14px; }
.phieu-dau .lop { font-size:21px; font-weight:700; letter-spacing:-.01em; }
.phieu-dau .phu { font-size:13.5px; color:var(--mo); margin-top:5px; line-height:1.5; }
/* 🏷 Logo MyPAS bên phải đầu phiếu (30/07, sửa 31/07) — dùng lại đúng khối
`.logo-mypas` của app (My cam + PAS teal), chỉ dồn chữ về mép phải. */
.phieu-logo { flex:none; }
.phieu-logo .logo-mypas { align-items:flex-end; }
/* 📝 Ghi chú buổi NGOÀI khung ảnh — góc phải dưới phiếu (31/07). Nằm ngoài
#khungPhieu nên "Lưu ảnh phiếu" không bao giờ chụp trúng. */
/* `white-space:pre-line` — GIỮ XUỐNG DÒNG người dùng gõ trong ghi chú (cô Quỳnh
31/07: gõ xuống dòng mà phiếu hiện dồn một dòng). Text căn TRÁI cho dễ đọc
khi nhiều dòng, cả khối vẫn dồn về phải bằng margin-left:auto. */
.phieu-note-ngoai { text-align:left; margin:8px 4px 0 auto; max-width:min(92%, 520px);
white-space:pre-line; font-size:13px; line-height:1.5; color:#4A555C;
background:#FFF9E8; border:1px dashed #E3C96B; border-radius:var(--r-md);
padding:7px 11px; }
.phieu-note-ngoai .nhan-note { display:block; font-weight:700; color:#8A6D1F; margin-bottom:3px; }
/* Ô/tiêu đề phiếu đang trỏ vào để gõ tự do — viền mảnh cho biết chỗ đang sửa
(viền chỉ hiện lúc focus nên KHÔNG dính vào ảnh chụp) */
.phieu [contenteditable]:focus { outline:2px solid var(--xanh); outline-offset:-1px; border-radius:var(--r-sm); }
/* ---- Khung phiếu: TỰ THU NHỎ CHO VỪA, không bắt cuộn ngang ----
Cô Quỳnh 25/07/2026: "phần chụp ảnh của 2 thiết bị đều phải nhìn được hết
tất cả các cột" + "kéo sang trái phải vẫn khó".
→ Bỏ hẳn chuyện cuộn ngang: bảng lấy bề ngang tự nhiên (`max-content`) rồi
`transform: scale()` thu lại vừa khung (hàm `canhPhieu`). Ảnh chụp bắt trọn
mọi cột trong một khung hình, không phải kéo đi đâu cả. */
.phieu-cuon { overflow:hidden; border:1px solid #E3E8ED; border-radius:var(--r-lg); }
table.phieu-bang { border-collapse:separate; border-spacing:0; font-size:13.5px;
width:max-content; min-width:100%; }
.phieu-bang th, .phieu-bang td { border-right:1px solid #E3E8ED; border-bottom:1px solid #E3E8ED;
padding:8px 9px; text-align:center; background:#fff; }
.phieu-bang tr > *:last-child { border-right:none; }
.phieu-bang tbody tr:last-child > * { border-bottom:none; }
.phieu-bang th { background:var(--xanh-nhat); font-weight:700; font-size:12px; color:#28414A;
line-height:1.35; white-space:normal; overflow-wrap:break-word;
min-width:76px; max-width:124px; vertical-align:middle; padding:9px 8px; }
.phieu-bang td { height:34px; font-weight:600; }
.phieu-bang tbody tr:nth-child(even) > td { background:#FAFBFC; }
/* ⛔ KHÔNG dùng `position:sticky` cho hai cột đầu nữa: bảng đang bị
`transform: scale()`, mà phần tử có transform trở thành khung chứa mới nên
sticky bám sai chỗ. Không cần nữa — phiếu đã vừa khung, chẳng phải cuộn. */
.phieu-bang .c-stt { min-width:34px; width:34px; color:var(--mo); font-size:12px; }
.phieu-bang .c-hs { min-width:150px; text-align:left; font-weight:700; white-space:nowrap;
border-right:2px solid #CBD4DC; }
.phieu-bang td[contenteditable]:focus { outline:2px solid var(--cam); background:#FFFBF2; }
/* ✏️ Ô CỘT VIẾT CHỮ TRONG PHIẾU — cô Quỳnh 16/08/2026.
`pre-wrap` là chỗ quan trọng nhất: nó giữ DẤU XUỐNG DÒNG người viết đã gõ.
Không có nó thì HTML nuốt xuống dòng thành một dấu cách, cả câu dồn thành một
dòng dài, kéo cột phình ngang và bóp hết các cột còn lại — và ảnh chụp gửi phụ
huynh cũng mất luôn cách trình bày mà giáo viên cố ý viết.
Trần 260px: rộng hơn nữa thì một cột nhận xét chiếm nửa tờ phiếu. */
.phieu-bang td.c-chu { white-space:pre-wrap; overflow-wrap:break-word; word-break:break-word;
text-align:left; vertical-align:top; height:auto;
min-width:150px; max-width:260px; font-weight:500;
font-size:12.5px; line-height:1.4; }
.phieu-bang th.c-chu-dau { max-width:260px; }
/* tô màu giá trị trong phiếu y như trong bảng — nhìn phát biết ngay em nào thiếu */
.phieu-bang td.v-tot { background:#E7F4EC !important; color:#14603A; }
.phieu-bang td.v-nghi { background:#FBEBEA !important; color:#8E2F28; }
.phieu-bang td.v-thieu { background:#FEF5E0 !important; color:#7A5600; }
.phieu-bang td.v-quen { background:#EEF0F4 !important; color:#414B5C; }
.phieu-note { margin-top:14px; padding:11px 13px; background:#F7F8FA; border-radius:var(--r-md);
font-size:13.5px; line-height:1.6; white-space:pre-line; }
.phieu-huong-dan { font-size:13px; color:var(--mo); margin:14px 0 0; line-height:1.6; }
.phieu-an-cot { margin:10px 0 0; font-size:13px; color:var(--mo); }
.phieu-an-cot button { border:1px solid var(--vien); background:#fff; border-radius:var(--r-md);
padding:7px 12px; font-size:12.5px; font-weight:700; color:var(--xanh-dam); }
.phieu-an-cot button:hover { border-color:var(--xanh); background:var(--xanh-nhat); }
/* Nhãn trạng thái ngay cạnh tên buổi — xem phiếu buổi cũ phải biết ngay nó đã
chốt hay đang điền, không thì sửa nhầm mà tưởng đang xem buổi hôm nay. */
.phieu-nhan { display:inline-block; margin-left:10px; vertical-align:middle;
font-size:11.5px; font-weight:700; border-radius:var(--r-xl); padding:4px 11px;
background:#EEF1F5; color:var(--mo); }
.phieu-nhan.khoa { background:#E7F4EC; color:var(--o-tot); }
.phieu-nhan.mo { background:#FEF3E2; color:#B26A00; }
/* Lật qua lại giữa các buổi ngay trong phiếu */
.phieu-lat { display:flex; align-items:center; gap:9px; margin:12px 0 0; flex-wrap:wrap; }
.phieu-lat button { border:1px solid var(--vien); background:#fff; border-radius:var(--r-md);
padding:8px 13px; font-size:12.5px; font-weight:700; color:var(--chu); }
.phieu-lat button:hover:not(:disabled) { border-color:var(--xanh); color:var(--xanh); }
.phieu-lat button:disabled { opacity:.4; cursor:default; }
.phieu-lat-chu { font-size:12.5px; font-weight:700; color:var(--mo); }
.phieu-lat .pl-anh { background:var(--xanh); border-color:var(--xanh); color:#fff; }
.phieu-lat .pl-anh:hover:not(:disabled) { background:var(--xanh-dam); color:#fff; }
.phieu-lat .pl-anh:disabled { opacity:.6; }
/* ---- 🧊 MÀN PHỦ "ĐANG CHỈNH CỘT" (cô Quỳnh 29/07/2026) ----
Thêm/xoá/đổi chỗ/đổi tên cột đang chạy → phủ kín app, KHÔNG điền được gì,
chờ dấu ✓ XANH hiện rồi mới thao tác tiếp. Máy chủ cũng chặn thật (409) —
màn phủ chỉ là lớp ngoài cho khỏi mời bấm. z thấp hơn modal(150)/toast(200). */
#phuSuaCot { position:fixed; inset:0; z-index:140; background:rgba(16,32,38,.45);
display:flex; align-items:center; justify-content:center; }
.psc-hop { background:#fff; border-radius:var(--r-xl); padding:22px 30px; text-align:center;
max-width:min(88vw,380px); box-shadow:0 12px 40px rgba(0,0,0,.25); }
.psc-hop b { display:block; font-size:15.5px; margin:10px 0 6px; color:#1F2A33; }
.psc-hop small { color:#5A646E; font-size:12.5px; line-height:1.45; display:block; }
.psc-xoay { width:34px; height:34px; margin:0 auto; border-radius:50%;
border:4px solid #D8E4E4; border-top-color:var(--xanh); animation:pscQuay 1s linear infinite; }
@keyframes pscQuay { to { transform:rotate(360deg); } }
.psc-tick { width:44px; height:44px; margin:0 auto; border-radius:50%; background:#1E7C45;
color:#fff; font-size:26px; font-weight:900; line-height:44px; }
/* Nút "bỏ bài đang sửa" dưới ô soạn caption (28/07/2026). Cố ý làm NHỎ và
nhạt: nó là đường xoá chữ, không phải việc chính — đừng mời bấm. */
.nut-bo-nhap { margin-top:7px; padding:5px 11px; font-size:12.5px; font-weight:600;
border:1px solid #D8DEE5; border-radius:var(--r-md); background:#F6F8FA;
color:#5A646E; cursor:pointer; }
.nut-bo-nhap:hover { background:#ECEFF3; color:#333B44; }
.nut-bo-nhap.hoi { background:#FDE7E7; border-color:#F0B4AE; color:#B0281C; }
/* 📊 BẢNG ĐIỂM TRONG HỘP CAPTION (cô Quỳnh 29/08/2026) — xem `veBangDiemCaption`.
Dáng bám mẫu Google Sheets: nền trắng, tiêu đề cột nền xanh lá chữ trắng, đường
kẻ mảnh, số căn giữa và dùng chữ số đều bề ngang (`tabular-nums`) cho cột thẳng.
⛔ KHUNG CUỘN RIÊNG. Lớp 25 em × 8 cột mà để bảng đẩy hộp thoại rộng ra thì nút
"Xong — gửi đi" trôi khỏi màn hình — bảng phải cuộn trong `.bdc-cuon`, không
phải cả trang cuộn theo.
⛔ CAO TỐI ĐA 220px. Bảng cao hơn ô soạn là lấn mất việc chính (soạn caption). */
.bdc { margin-bottom:12px; }
.bdc-dau { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
font-size:12.5px; font-weight:700; color:var(--mo); margin-bottom:5px; }
.bdc-dem { font-weight:600; color:var(--mo); opacity:.75; }
.bdc-cuon { max-height:220px; overflow:auto; border:1px solid var(--vien); border-radius:var(--r-sheet); background:#fff; }
.bdc-bang { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%;
font-size:12.5px; font-variant-numeric:tabular-nums; }
.bdc-bang th, .bdc-bang td { padding:4px 9px; border-right:1px solid #E3E7EB;
border-bottom:1px solid #E3E7EB; text-align:center; white-space:nowrap; }
.bdc-bang thead th { position:sticky; top:0; z-index:2; background:#1E8E4E; color:#fff;
font-weight:600; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.bdc-bang .bdc-ten { position:sticky; left:0; z-index:1; background:#fff; text-align:left;
font-weight:600; color:var(--chu); max-width:170px;
overflow:hidden; text-overflow:ellipsis; }
.bdc-bang thead .bdc-ten { z-index:3; background:#1E8E4E; color:#fff; }
.bdc-bang tbody tr:nth-child(even) td { background:#FAFBFC; }
.bdc-bang tbody tr:nth-child(even) .bdc-ten { background:#FAFBFC; }
.bdc-bang .bdc-rong { color:#C3C9D0; }
body.toi .bdc-cuon, body.toi .bdc-bang .bdc-ten { background:var(--the); }
body.toi .bdc-bang th, body.toi .bdc-bang td { border-color:#343B42; }
body.toi .bdc-bang tbody tr:nth-child(even) td,
body.toi .bdc-bang tbody tr:nth-child(even) .bdc-ten { background:#242A30; }
/* ---- Sửa tạm tên cột + đổi chỗ cột NGAY TRONG PHIẾU ----
Chỉ để chụp ảnh cho gọn; không đụng app hay Google Sheet. */
.pc-ten { display:block; cursor:text; border-radius:var(--r-sm); padding:1px 3px; }
.pc-ten:hover { background:#FFF6E5; outline:1px dashed var(--cam); }
.pc-ten:focus { outline:2px solid var(--cam); background:#FFFBF2; }
/* Tay nắm kéo đổi chỗ cột. `touch-action:none` để ngón tay kéo được trên
điện thoại (không thì trình duyệt cuộn trang, nuốt mất cú kéo). */
.pc-keo { display:block; margin:3px auto 0; width:26px; cursor:grab;
color:#9AA3AE; font-size:12px; line-height:1.2;
border-radius:var(--r-sm); touch-action:none; user-select:none; }
.pc-keo:hover { background:var(--xanh-nhat); color:var(--xanh-dam); }
body.dang-keo-cot .pc-keo { cursor:grabbing; }
/* Nút ẩn tạm MỘT cột khỏi phiếu (cô Quỳnh 27/07/2026). Chỉ đổi trong phiếu này. */
.pc-an { display:inline-block; margin:2px auto 0; padding:0 5px; cursor:pointer;
color:#B9424E; font-size:12px; font-weight:700; line-height:1.3;
border-radius:var(--r-sm); border:1px solid transparent; user-select:none; }
.pc-an:hover { background:#FDECEE; border-color:#E7B4BA; }
/* Nút ✕ ẩn HÀNG học sinh trong phiếu (cô Quỳnh 28/07/2026) — nhỏ, đứng trước tên. */
.hs-an { display:inline-block; margin-right:6px; width:18px; height:18px; line-height:16px;
text-align:center; border-radius:50%; border:1px solid #E7B4BA; background:#FDECEE;
color:#B9424E; font-size:11px; font-weight:700; cursor:pointer; vertical-align:middle; padding:0; }
.hs-an:hover { background:#F7C9CE; }
.phieu-bang .c-hs { white-space:nowrap; }
/* Ô được tô màu thủ công trong phiếu (cô Quỳnh 27/07/2026). Vàng đậm, đè cả màu
nền của ô chọn. `!important` để thắng lớp màu `mauNut`. Màu này ĐI VÀO ảnh. */
.phieu-bang td.o-tomau { background:#FFE14D !important; font-weight:700; }
.phieu-bang.dang-to-mau td { cursor:pointer; }
.phieu-bang.dang-to-mau { outline:2px dashed #F5A623; outline-offset:3px; }
.phieu-bang th.pc-dich { outline:2px solid var(--cam); outline-offset:-2px; background:#FFF1DC; }
.phieu-bang .pc-dang-cam { opacity:.45; }
/* Hộp thoại RỘNG — chỉ bật khi đang mở phiếu (xem moPhieu / dongHopThoai) */
.modal.rong { width:min(97vw, 1060px); }
/* ============ ĐIỆN THOẠI ============
Nhân viên dùng điện thoại là chính. Lưới 100+ cột không thể điền trên màn hình
nhỏ → chuyển hẳn sang chế độ THẺ: mỗi học sinh một thẻ, bấm nút to để chọn. */
/* ⛔ Chế độ "Điền từng em" (thẻ) ĐÃ BỎ ngày 25/07/2026 — cô Quỳnh đổi ô đó
thành TẠO CAPTION. Lưới đã vuốt được thoải mái trên điện thoại nên không
cần chế độ thẻ nữa. */
@media (max-width: 820px) {
/* chừa chỗ cho THANH CÔNG CỤ dính đáy màn hình */
.noi-dung { padding:12px 10px 96px; }
/* ⛔ MÉP 0 — ĐỔI 08/09/2026, cho khớp `body.man-cong-cu .noi-dung` ở cùng mốc
màn hình này (nó cũng vừa về margin 0). Boss chỉ thẳng vào chỗ này:
*"ở trên cùng tách ra 1 chút so với cái thông báo ở dưới"* — cái "tách ra 1
chút" chính là `margin:0 8px 8px` cũ: 8px hai bên và 8px dưới.
⛔ BA CHỖ MỘT CON SỐ, ĐỔI LÀ ĐỔI CẢ BA: `.thanh-tren` (đây) · `.dnc-dai` ·
`body.man-cong-cu .noi-dung`. Lệch một chỗ là bài đo trên màn thật
(thu-thanh-nut-cong-cu, mục "hai mép trái/phải khớp nhau") bắt ngay.
⛔ `thu-home-plus.js` đọc NGUYÊN VĂN dòng dưới. Sửa dòng này phải sửa cả
phép canh bên đó, không thì đỏ mà lời báo lỗi nói về chuyện khác. */
.thanh-tren { padding:4px 10px; gap:7px; margin:0; }
/* ☰ 08/09/2026 — BA GẠCH, CHỈ MỌC Ở ĐÂY (điện thoại). Boss muốn đúng nếp
Facebook: ba gạch góc trái, ấn ra ngăn kéo công cụ trượt từ bên trái sang.
⛔ Ô chạm 40x40 chứ không phải 24x24 bằng đúng ba cái gạch. Ngón cái không
bấm trúng ô 24px — đó là lý do app cũ phải để nút "Thêm" to ở thanh đáy.
⛔ Ba gạch vẽ bằng ba thẻ đặc, KHÔNG dùng ký tự "☰": mỗi máy một phông,
ký tự ấy lúc mảnh lúc dày, lúc lệch khỏi tâm ô. */
/* ⛔ 08/09/2026 — THU GỌN, nhưng GIỮ NGUYÊN Ô CHẠM 40px. Boss: *"để chỗ này chữ và
nút gọn hơn cho tôi chứ tôi thấy nó chiếm màn quá"*. Đo trước khi sửa: thanh cao
57px, và chính nút này (40px) là thứ ép chiều cao ấy.
Cách thu: nút vẫn 40×40 để ngón cái bấm trúng, nhưng `margin:-4px 0` kéo nó THÒ
RA khỏi dòng nên chỉ còn chiếm 32px chiều cao thanh.
⛔ ĐỪNG thu bằng cách hạ `height` xuống 32px — thế là thu cả ô chạm, và quay lại
đúng lỗi mà khối chú thích ngay trên đã dặn tránh: ngón cái không bấm trúng ô
nhỏ, rồi lại phải bày một nút to ở chỗ khác để bù. */
.tt-bagach { display:flex; flex-direction:column; justify-content:center;
align-items:center; gap:4px; flex:none;
width:40px; height:40px; margin:-4px 0 -4px -8px;
padding:0; border:0; background:none; cursor:pointer;
border-radius:var(--r-lg); -webkit-tap-highlight-color:transparent;
transition:background .18s ease, transform .18s ease; }
.tt-bagach span { display:block; width:18px; height:2px; border-radius:2px;
background:var(--chu); }
.tt-bagach:active { background:var(--nen2); transform:scale(.92); }
.tt-bagach:focus-visible { outline:2px solid var(--xanh); outline-offset:1px; }
/* Chữ MyPAS 20 → 17px và bỏ phần đệm quanh logo: hai thứ này cùng với nút ba gạch
ở trên là toàn bộ chiều cao thừa của thanh. Vẫn là chữ to nhất trên thanh. */
.thanh-tren .logo-mypas { padding:0; }
.thanh-tren .logo-mypas .ten { font-size:17px; }
.thanh-tren .ten-app { font-size:13px; white-space:nowrap; padding-left:7px; }
.thanh-tren .nut-nho { padding:7px 9px; font-size:15px; line-height:1; }
.logo-dn .ten { font-size:23px; }
.ten-toi { display:none; }
.luoi-lop { grid-template-columns:1fr 1fr; gap:9px; }
/* tiêu đề cơ sở trên điện thoại: vẫn phải nổi bật nhưng gọn hơn */
.nhom-coso h2 { font-size:16.5px; padding:9px 12px; gap:7px; border-left-width:5px; }
.nhom-coso h2 .dem-nhom { font-size:12.5px; }
.nhom-coso + .nhom-coso { margin-top:26px; padding-top:18px; }
/* 🗂 BÓP CHO GỌN — Boss 08/09/2026 *"các block lớp phải rõ ràng hơn gọn hơn"*.
⛔ Bóp ĐỆM và KHOẢNG CÁCH DÒNG, KHÔNG bỏ mẩu tin nào và KHÔNG hạ cỡ chữ dưới
11,5px: năm mẩu (tên · lịch · giáo viên · sĩ số · trạng thái) đều là thứ
trợ giảng cần liếc là thấy, bỏ mẩu nào cũng phải mở lớp ra mới biết.
⛔ Nhãn trạng thái KHÔNG nhấc lên cạnh tên được: "Đang học DAY 12" cần ~100px
mà tên "4C12" đã ăn 55px trong lòng thẻ 149px — nhấc lên là nó bị bóp cụt.
Đã đo trước khi bỏ ý ấy. */
.the-lop { padding:12px 12px 11px; }
.the-lop .ten { font-size:17px; }
.the-lop .phu { font-size:11.5px; margin-top:3px; }
/* ⛔ Giờ KHÔNG hạ theo dòng phụ. Đây là mẩu tin Boss bảo phải nổi bật, hạ bằng
chữ mờ là xoá đúng thứ vừa làm. 12,5px vẫn to hơn dòng phụ 11,5px một bậc. */
.the-lop .tl-gio { margin-top:4px; }
.the-lop .tl-gio span { font-size:12.5px; }
.the-lop .tl-gv { font-size:11.5px; margin-top:2px; }
.the-lop .duoi { margin-top:8px; gap:5px; }
.the-lop .siso { font-size:11.5px; }
.the-lop .nhan-gio { margin-bottom:5px; }
.dau-lop { gap:8px; margin-bottom:10px; }
.dau-lop .ten { font-size:19px; }
.dau-lop .phu { font-size:11.5px; width:100%; }
/* 🔎 Ô TÌM + NÚT CƠ SỞ VỀ CÙNG MỘT HÀNG — Boss chốt 08/09/2026
*"trong màn hình điểm danh tôi muốn cái thanh tìm kiem phải gọn hơn và bé hơn
để cái nút chọn cơ sở bên cạnh cho gọn"*.
⛔ THỦ PHẠM CŨ chính là luật ở đây: `min-width:100%` ép ô tìm chiếm TRỌN bề
ngang, nên nút cơ sở luôn bị đẩy xuống hàng hai — thanh tìm ngốn 85px.
Nay `flex:1 1 0` + `min-width:0` cho ô co lại vừa đủ, nút ngồi cạnh.
⛔ `min-width:0` là BẮT BUỘC, không phải trang trí: ô `: nó ăn ~20px mỗi ô, mà một
hàng có cả chục ô → mất cả trăm pixel chỉ để vẽ mũi tên. Bỏ đi thì chữ
"Đủ"/"Thiếu" được đưa vào GIỮA ô, thở ra, đọc thoáng hẳn.
Ô vẫn bấm ra danh sách bình thường — và ô có màu nền nên vẫn nhìn ra ngay
là ô chọn được, không sợ tưởng là chữ chết. */
.o select {
-webkit-appearance:none; appearance:none;
text-align:center; text-align-last:center;
padding:0 3px; font-size:12px; font-weight:700;
text-overflow:ellipsis;
}
/* ---- ⛔ ĐỪNG HẠ CỠ CHỮ Ô NHẬP XUỐNG DƯỚI 16px TRÊN ĐIỆN THOẠI ----
Cô Quỳnh: *"mỗi lần ấn vào ô điền số là lại bị zoom gần vào rất khó chịu"*.
Đây KHÔNG phải lỗi của app: **Safari trên iPhone tự phóng to trang mỗi khi
người dùng bấm vào ô nhập có cỡ chữ NHỎ HƠN 16px** (nó cho là chữ quá bé
không đọc nổi). Phóng xong không tự thu lại → phải tự chụm tay thu về, mỗi
ô một lần.
⭐ Cách chữa: cho đúng **16px**. Đủ ngưỡng là Safari thôi phóng.
Số điểm chỉ 1–2 chữ số, ô rộng 64px nên 16px vẫn thừa chỗ.
⛔ ĐỪNG chữa bằng `maximum-scale=1` / `user-scalable=no` ở thẻ viewport:
cách đó chặn luôn quyền TỰ chụm tay phóng to của người dùng — cô Quỳnh vẫn
cần phóng để nhìn bảng (§2 "bé thì zoom vào"). */
.o input { text-align:center; font-size:16px; padding:0 3px; }
/* Các ô gõ chữ khác cũng dính đúng nết đó — nâng hết lên 16px */
.o-ten-day, #oNote, .tim-lop input, .ht-o input, .ht-o textarea,
.man-dn input, .cap-soan textarea { font-size:16px; }
.luoi td.o-ngay .gt-ngay { font-size:11.5px; }
/* Đổi sang ngày rút gọn "24/07/26" — xem lý do đo được ở chỗ vẽ ô ngày. */
.luoi .o-ngay .ngay-dai { display:none; }
.luoi .o-ngay .ngay-ngan { display:inline; }
/* Chừa thêm chỗ cho chắc: ô có đệm hai bên, và phông máy thật có thể to hơn. */
.luoi td.o-ngay { padding-left:2px; padding-right:2px; }
/* Ô KHOÁ (buổi đã chốt) cũng canh giữa cho đều hàng */
.luoi td.o.khoa .gt { display:block; text-align:center; }
.luoi .h-ngay, .luoi td.o-ngay { min-width:78px; max-width:84px; }
/* 📅 04/09/2026 — ô NGÀY bấm được thì phải TRÔNG như bấm được, và ô đã đổi
ngày phải nhìn ra ngay. Dùng gạch chân chấm + con trỏ tay, KHÔNG đổi màu nền
— nền của ô này đã mang nghĩa "buổi đang mở / đã khoá" rồi, chồng thêm một
nghĩa nữa lên cùng chỗ là không ai đọc ra cái nào. */
.luoi td.o-ngay.ngay-sua { cursor:pointer; }
.luoi td.o-ngay.ngay-sua .gt-ngay { text-decoration:underline dotted; text-underline-offset:2px; }
.luoi td.o-ngay.ngay-lech .gt-ngay { font-weight:600; }
.luoi td.o-ngay .ngay-dau-bu { color:var(--cam,#d97706); margin-left:2px; font-weight:700; }
/* ---- Phiếu chụp ảnh trên điện thoại ----
Màn hình 375px mà bảng chục cột thì kiểu gì cũng phải cuộn ngang, mà ảnh
chụp màn hình chỉ bắt được phần đang nhìn thấy → mất cột. Nên ở đây bóp
mọi thứ nhỏ hết mức còn đọc được, và BỎ cột "Ngày điểm danh" vì ngày đã
nằm sẵn ngay dòng đầu phiếu rồi, để lại chỉ tổ chiếm chỗ. */
.modal.rong { width:97vw; padding:14px 10px; }
.phieu { padding:12px 10px 10px; }
.phieu-dau .lop { font-size:17px; }
.phieu-dau .phu { font-size:12.5px; }
.phieu-nhan { font-size:10.5px; padding:3px 9px; margin-left:7px; }
.phieu-lat button { flex:1; min-height:44px; font-size:12px; padding:10px 6px; }
.phieu-lat-chu { width:100%; order:-1; text-align:center; }
/* Trên điện thoại phiếu sẽ bị thu nhỏ để vừa khung, nên ở đây CỐ Ý để cỡ chữ
to hơn bình thường một chút — thu xong vẫn còn đọc được. */
.phieu-bang th { min-width:58px; max-width:88px; font-size:12px; padding:7px 5px; }
.phieu-bang td { padding:7px 5px; font-size:13px; height:32px; }
.phieu-bang .c-stt { min-width:26px; width:26px; font-size:11.5px; padding:7px 3px; }
/* ⚠️ Cột tên để `nowrap` thì nó NỞ RA theo tên dài nhất lớp → bảng rộng ngoác
→ tỉ lệ thu nhỏ tụt xuống, chữ bé tí. Cho tên xuống dòng và chặn bề ngang. */
.phieu-bang .c-hs { min-width:100px; max-width:116px; font-size:12.5px;
white-space:normal; overflow-wrap:break-word; line-height:1.35; }
/* ---- THU GỌN THANH CHỌN BUỔI: 3 HÀNG → 2 HÀNG ----
Thanh này đang ăn 134px trên đầu bảng (◀ tên-buổi ▶ · thanh kéo · ô chọn ·
nút "Buổi đang điền" — rơi thành 3 hàng). Cắt bớt để nhường chỗ cho bảng.
⭐ Bỏ dòng chữ tên buổi `.dh-chu` trên điện thoại: Ô CHỌN ngay dưới đã ghi
đúng thông tin đó rồi ("8. buổi 8 · 25/07/2026 ← đang điền") — bày hai lần
là phí mất một hàng.
⛔ VẪN GIỮ thanh kéo `.dh-keo` — cô Quỳnh yêu cầu đích danh ("lớp có 40 mấy
DAY bấm đến bao giờ cho xong, vẫn phải có cái kéo sang"). Chỉ xếp lại cho
nó nằm CÙNG HÀNG với ◀ ▶ chứ không chiếm riêng một hàng. */
/* 08/09/2026 — HA VE 36px NHU CA APP. Boss: *"may cai nut o tren cung dang bi
to kinh khung gay ton dien tich"*. Do that tren man 390px: thanh nay cao
94px, xep thanh HAI DONG, moi nut 44px.
Luat cu giu 44px la san dich bam cho ngon tay; nhung ca app da chot ve 36px
(Boss duyet cung ngay cho man Tuyen sinh), giu rieng cho nay 44px la lech
khuon ma van ton cho. */
.dh-day button { min-height:36px; padding:7px 10px; font-size:13px; }
.dh-day .dh-chu { display:none; }
/* `flex-basis:auto` la CHO VO HANG. Trinh duyet xep dong theo BASIS chu khong
co truoc roi moi xep: `.jpg) đứng TRƯỚC trong
danh sách nền; CHƯA có file thì lớp ảnh trong suốt và MÀU TRỜI dự phòng
phía sau hiện ra — không vỡ gì, thả ảnh vào thư mục là đẹp ngay. */
#nenMua { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
body.co-nen-mua { background:transparent; }
body.co-nen-mua #app { position:relative; z-index:1; }
#nenMua .nen-anh { position:absolute; inset:0; background-position:center; background-size:cover; }
/* Ảnh nằm TRÊN, gradient màu trời DƯỚI cùng làm nền dự phòng. Nhận cả .webp
lẫn .jpg: đuôi nào 404 thì lớp đó trong suốt, lớp dưới hiện qua — nên có bất
kỳ đuôi nào (hoặc chưa có ảnh) đều không vỡ. */
#nenMua[data-mua="xuan"] .nen-anh { background-image:url("/anh/nen-xuan.webp"), url("/anh/nen-xuan.jpg"), linear-gradient(180deg,#CDE9F5 0%,#F8E4EE 55%,#EAF6E7 100%); }
#nenMua[data-mua="he"] .nen-anh { background-image:url("/anh/nen-he.webp"), url("/anh/nen-he.jpg"), linear-gradient(180deg,#A9DCF2 0%,#D9F0F5 55%,#E9F7EF 100%); }
#nenMua[data-mua="thu"] .nen-anh { background-image:url("/anh/nen-thu.webp"), url("/anh/nen-thu.jpg"), linear-gradient(180deg,#F5D7A5 0%,#F4E3C9 55%,#F1EADB 100%); }
#nenMua[data-mua="dong"] .nen-anh { background-image:url("/anh/nen-dong.webp"), url("/anh/nen-dong.jpg"), linear-gradient(180deg,#C7D8EA 0%,#E2EAF4 55%,#F0F4F9 100%); }
/* 🖼 05/08 — ẢNH NỀN RIÊNG của từng người (chọn trong ⚙ Cài đặt) */
#nenRieng { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
#nenRieng .nen-anh { position:absolute; inset:0; background-position:center; background-size:cover; }
/* 🛡 Đang NHẬP ĐIỂM trong lớp → tắt hẳn ảnh nền (mọi cỡ màn hình) cho khỏi rối mắt */
body.dang-trong-lop #nenRieng, body.dang-trong-lop #nenMua { display:none !important; }
body.co-nen-mua.dang-trong-lop { background:var(--nen); }
/* Lớp phủ ĐỦ MẠNH: ảnh của người dùng có thể rất chói hoặc rất tối — phủ để mọi
chữ/viền phía trên luôn đọc được (đã đo thử cả ảnh vàng chói lẫn ảnh đen). */
#nenRieng .nen-phu { position:absolute; inset:0; background:rgba(255,255,255,.58); }
body.toi #nenRieng .nen-phu { background:rgba(8,14,22,.7); }
/* ⚙ 05/08 — TRANG CÀI ĐẶT gom một chỗ (hồ sơ · giao diện · tài khoản · thiết bị).
Kiểu bảng cài đặt của app doanh nghiệp: khối vuông vắn, hàng phân cách rõ. */
.cd-boc { display:flex; flex-direction:column; gap:14px; max-width:860px; }
.cd-khoi { background:var(--the); border:1px solid var(--vien); border-radius:var(--r-md); overflow:hidden;
box-shadow:0 1px 2px rgba(20,50,70,.08); }
.cd-dau { padding:12px 16px; border-bottom:1px solid var(--vien); background:var(--nen2);
font-weight:700; font-size:14px; color:var(--chu); }
.cd-hang { display:flex; align-items:center; gap:14px; padding:14px 16px; border-top:1px solid var(--vien); }
/* ⛔ Ô ICON CHỈ DÀNH CHO ĐIỆN THOẠI (Boss 10/09/2026 nói riêng về màn điện thoại).
Máy tính màn rộng đã có khuôn thẻ viền để phân nhóm, thêm một cột icon là thừa.
⛔ PHẢI VIẾT `.cd-hang > i.cd-ico`, KHÔNG viết `.cd-ico`. Luật nền
`i[class^="ic-"]` (dòng ~6871) đặt `display:inline-block`, độ đặc hiệu
(0,1,1) và nằm SAU chỗ này trong file — `.cd-ico` trơn chỉ (0,1,0) nên thua
cả hai vế, ẩn không ăn mà chẳng có dấu hiệu gì. Thêm `.cd-hang >` cho lên
(0,2,1) là thắng thật, khỏi phải chồng `!important`. */
.cd-hang > i.cd-ico { display:none; }
.cd-khoi .cd-dau + .cd-hang { border-top:0; }
.cd-hang-chu { flex:1; min-width:0; }
.cd-hang-chu b { display:block; font-size:14px; font-weight:600; color:var(--chu); }
.cd-hang-chu small { display:block; color:var(--mo); font-size:12.5px; margin-top:2px; }
.cd-nut { flex:none; background:var(--the); border:1px solid var(--vien); border-radius:var(--r-md);
padding:8px 14px; font-size:13px; font-weight:600; font-family:inherit; color:var(--chu); cursor:pointer; }
.cd-nut:hover { border-color:var(--xanh); color:var(--muc); }
.cd-av { width:52px; height:52px; border-radius:50%; overflow:hidden; flex:none;
display:inline-flex; align-items:center; justify-content:center;
background:var(--nen2); color:var(--mo); border:1px solid var(--vien); box-sizing:border-box; }
.cd-av img { width:100%; height:100%; object-fit:cover; display:block; }
.cd-chon { display:flex; gap:8px; flex-wrap:wrap; flex:none; }
.cd-chon button { border:1px solid var(--vien); background:var(--the); border-radius:var(--r-md);
padding:7px 13px; font-size:12.5px; font-weight:600; font-family:inherit; color:var(--chu); cursor:pointer; }
.cd-chon button.chon { border-color:var(--xanh); background:var(--xanh); color:#fff; }
/* ══════════════════════════════════════════════════════════════════════════════
📱 HÀNG CÀI ĐẶT TRÊN MÀN HẸP — vá 22/08/2026
──────────────────────────────────────────────────────────────────────────────
Cô Quỳnh gửi ảnh màn Cài đặt trên iPhone: dòng *"Phóng to / thu nhỏ toàn bộ chữ
và bảng cho vừa mắt"* bị bóp thành **một cột dọc rộng 90px**, mỗi dòng hai ba
chữ. Cô: *"nhìn nó xấu quá"*.
GỐC: `flex-wrap:wrap` MỘT MÌNH KHÔNG ĐỦ. Hàng gồm [cụm chữ][cụm nút]:
.cd-hang-chu flex:1 min-width:0 ← co được tới 0
.cd-chon flex:none ← không co
Cụm nút không chịu co, mà cụm chữ thì co được vô hạn — nên trình duyệt CHỌN
CÁCH CO CHỮ chứ không bao giờ xuống dòng. Bốn nút "Nhỏ · Vừa · Lớn · Rất lớn"
ăn gần hết bề ngang, chữ còn lại 90px.
Đo được ngày 22/08 trên bốn khổ máy (320 · 360 · 393 · 430) — cả bốn đều bóp.
CÁCH VÁ: cho cụm chữ một SÀN bề ngang. Hết sàn thì cụm nút buộc phải xuống
dòng — đúng thứ `flex-wrap` sinh ra để làm.
⛔ `min(100%, 210px)` chứ KHÔNG phải `210px` trần: máy hẹp 320px sau khi trừ
đệm chỉ còn 288px, mà hàng có avatar còn trừ thêm 52px nữa. Đặt trần là
chính cụm chữ tràn ra ngoài — đổi một lỗi lấy một lỗi khác.
⛔ ĐỪNG chữa bằng cách thu nhỏ cỡ chữ hay cắt bớt câu mô tả. Câu ấy là thứ
giải thích nút làm gì; app này người dùng không rành máy tính. */
@media (max-width:820px) {
/* ══════════════════════════════════════════════════════════════════════════
📱 SỬA LẠI 09/09/2026 — Boss: *"setting đang thiết kế kiểu thiếu chuyên
nghiệp thiếu đi sự đồng bộ trên điện thoại, nó cứ trồng lên nhau trống xấu
kinh khủng"*.
Bản vá 22/08 ở trên cho MỌI hàng xuống dòng để cứu lỗi chữ bị bóp thành cột
90px. Nó chữa đúng lỗi ấy, nhưng vơ cả những hàng chỉ có MỘT nút — "Đổi ảnh
đại diện", "Đổi mật khẩu", "Liên kết Gmail". Nút đơn rộng 109–127px thừa sức
nằm cùng hàng, đẩy nó xuống dòng là:
· mỗi mục ngốn ba dòng thay vì hai → màn phải cuộn thêm 760–1138px;
· nửa phải mỗi hàng bỏ trống, nút thì nép trái → đúng chữ "trống xấu".
Chuẩn ngành (Material 3 list item · iOS Settings): MỘT MỤC LÀ MỘT HÀNG NGANG
— nhãn bên trái, điều khiển bên phải. Chỉ khi điều khiển là một NHÓM nhiều
nút mới cho xuống dòng rồi trải hết bề ngang.
Nên tách hai kiểu hàng, đừng gộp:
· hàng có `.cd-nut` (một nút hành động) → KHÔNG xuống dòng
· hàng có `.cd-chon` (nhóm nút chọn) → xuống dòng, trải đều
══════════════════════════════════════════════════════════════════════════ */
/* ① Hàng có NHÓM nút chọn: giữ nguyên cách cũ — sàn bề ngang cho cụm chữ,
hết sàn thì nhóm nút xuống dòng. Lý do đầy đủ ở khối 22/08 ngay trên. */
.cd-hang:has(.cd-chon) { flex-wrap:wrap; }
/* ⛔ SÀN LÀ 100%, KHÔNG PHẢI `min(100%, 210px)` — Boss 09/09/2026 chê "thiếu đi
sự đồng bộ". Với sàn 210px thì nhóm HAI nút ("Nền sáng · Nền tối", "Thoáng ·
Gọn") vẫn còn đủ ~140px nên nó Ở LẠI cùng hàng và bị bóp, trong khi nhóm BỐN
nút ("Nhỏ · Vừa · Lớn · Rất lớn") thì xuống dòng. Cùng một loại điều khiển mà
hai kiểu bày — mắt đọc thấy lộn xộn ngay.
Sàn 100% thì MỌI nhóm chọn đều xuống dòng và trải đều bề ngang: một luật, một
dáng, không phụ thuộc nhóm ấy có mấy nút. */
.cd-hang:has(.cd-chon) .cd-hang-chu { min-width:100%; }
.cd-chon { flex:1 1 auto; }
/* ② Hàng chỉ có MỘT nút: ở lại cùng dòng, nút nép phải.
`min-width:0` để cụm chữ tự xuống dòng trong lòng nó thay vì đẩy nút đi;
`flex:none` giữ nút nguyên cỡ, không bị bóp thành hình thước kẻ. */
.cd-hang:not(:has(.cd-chon)) { flex-wrap:nowrap; }
.cd-hang:not(:has(.cd-chon)) .cd-hang-chu { min-width:0; flex:1; }
.cd-hang:not(:has(.cd-chon)) .cd-nut { flex:none; margin-left:auto; }
/* ③ ĐÍCH BẤM 44px — đo 09/09/2026 thấy CẢ 19 nút của màn này đều cao 32–37px,
dưới mức tối thiểu của cả hai nhà: Apple 44×44px, Google Material 48×48dp.
Chỉ nâng chiều cao, KHÔNG phóng cỡ chữ: chữ 13px là số đã chốt trong
`thiet-ke/BANG-MAU-VA-CHU.md`, phóng lên là lệch khỏi cả app. */
.cd-nut, .cd-chon button { min-height:44px; padding-top:0; padding-bottom:0; }
/* Hai tab "Cá nhân · Dữ liệu" cũng là đích bấm — đo 09/09 ra 72×37 và 66×37,
thiếu 7px so với mức tối thiểu 44px. Đây là hai nút bấm nhiều nhất của màn. */
.cd-tabs button { min-height:44px; }
/* ④ Nhóm nút chọn chia đều bề ngang thay vì dồn cục bên trái — bốn nút "Nhỏ ·
Vừa · Lớn · Rất lớn" thành bốn ô bằng nhau, mắt quét một lượt là thấy hết,
và không còn khoảng trống lệch bên phải. */
.cd-chon { display:flex; gap:8px; }
.cd-chon button { flex:1 1 0; min-width:0; padding-left:6px; padding-right:6px; }
/* ⑤ Hàng cao tối thiểu 56px (Material: mục hai dòng là 64dp, một dòng 48dp).
Trước đây chiều cao hàng do nội dung quyết định nên mỗi hàng một kiểu — đó là
chỗ Boss thấy "thiếu đồng bộ". */
.cd-hang { min-height:56px; }
/* ══════════════════════════════════════════════════════════════════════════
⚙ KHUÔN TIKTOK CHO MÀN CÀI ĐẶT ĐIỆN THOẠI — Boss 10/09/2026
──────────────────────────────────────────────────────────────────────────
Boss gửi ảnh chụp màn Cài đặt của TikTok: *"bạn hãy nhìn dùng skill mà bạn
học được phân tích và áp vào app của mình phần setting cho tôi, sửa lại hết
phần setting trên điện thoại cho tôi."*
Bản vá 09/09 ngay trên đã dựng lại HÀNG (một mục một hàng ngang, đích bấm
44px, nhóm nút trải đều). Còn thiếu ba thứ, đo trên ảnh TikTok Boss gửi:
① MỖI HÀNG CÓ ICON NÉT MỘT MÀU BÊN TRÁI. Đây là thứ làm mắt quét dọc bắt
được mục cần tìm mà không phải đọc hết chữ. Boss chốt bằng nút bấm:
CÓ icon, nét xám đơn sắc — không emoji màu.
② TIÊU ĐỀ NHÓM là chữ nhỏ xám trên nền trang, KHÔNG phải một dải nền xám.
Bản mình đang để `.cd-dau` có `background:var(--nen2)` + viền dưới —
kiểu thanh tiêu đề của bảng tính. Trên màn hẹp bốn dải xám xếp dọc trông
như bốn cái bảng chồng lên nhau.
③ NHÓM CÁCH NHAU BẰNG KHOẢNG TRỐNG, không phải viền hộp. Bỏ viền quanh
`.cd-khoi`, thay bằng một tấm nền bo góc ôm lấy đúng phần các hàng.
⛔ KHÔNG BÊ NGUYÊN TIKTOK. Ba thứ CỐ Ý không lấy, vì trái mẫu gốc đã chốt ở
`thiet-ke/BANG-MAU-VA-CHU.md`: emoji màu (Boss đã chê "lộ rõ ui AI" nhiều
lần), nền tối mặc định, và chữ trắng trên nền đen. Chỉ lấy BỐ CỤC + SỐ ĐO.
⛔ KHÔNG PHÓNG CỠ CHỮ theo TikTok — 13–14px là số đã chốt cho cả app.
⛔ CHỈ TRONG KHỐI MÀN HẸP NÀY. Máy tính giữ nguyên khuôn thẻ có viền.
══════════════════════════════════════════════════════════════════════════ */
/* ① Ô icon 20px, xám như chữ mô tả.
⛔ `.cd-hang > i.cd-ico` chứ đừng `.cd-ico` — luật nền `i[class^="ic-"]`
(dòng ~6871) là (0,1,1) và nằm SAU trong file, nên `.cd-ico` trơn thua cả
cỡ lẫn `display`. Lý do đầy đủ ở chỗ ẩn icon cho máy tính, dòng ~2001.
⛔ `margin-right:0` bắt buộc: luật chung `i[class^="ic-"]` đẩy icon 6px sang
phải, cộng với `gap` của hàng thành 18px — icon trôi khỏi cột. */
.cd-hang > i.cd-ico { display:block; width:20px; height:20px; margin-right:0;
color:var(--mo); opacity:.85; }
/* Hàng nào KHÔNG có icon (hàng "Ảnh nền của tôi" dựng thẳng trong JS) thì thụt
vào đúng bằng ô icon + khe, để chữ vẫn thẳng một cột với các hàng khác.
Làm bằng CSS chứ không đi thêm icon cho từng hàng lẻ: hàng nào người sau thêm
vào mà quên icon cũng tự thẳng hàng, không phải nhớ luật này. */
.cd-hang > .cd-hang-chu:first-child { margin-left:32px; }
/* ② Tiêu đề nhóm: chữ nhỏ xám, bỏ dải nền và viền dưới. */
.cd-dau { background:transparent; border-bottom:0; padding:18px 4px 7px;
font-size:12px; font-weight:600; color:var(--mo); letter-spacing:.02em; }
/* ③ Khối bỏ viền; nền và bo góc chuyển xuống cho chính các hàng, nên tấm trắng
ôm đúng phần bấm được. `overflow:visible` vì không còn gì phải cắt. */
.cd-khoi { border:0; background:transparent; border-radius:0; overflow:visible;
margin-bottom:4px; }
.cd-khoi .cd-hang { background:var(--the); }
.cd-khoi .cd-dau + .cd-hang { border-top:0;
border-radius:var(--r-md) var(--r-md) 0 0; }
.cd-khoi .cd-hang:last-child { border-radius:0 0 var(--r-md) var(--r-md); }
.cd-khoi .cd-dau + .cd-hang:last-child { border-radius:var(--r-md); }
/* ④ Mô tả kẹp HAI dòng, không phải một.
⛔ ĐỪNG cắt còn một dòng bằng `nowrap` + ba chấm. Khối 22/08 ngay trên file
này đã cấm: *"ĐỪNG chữa bằng cách thu nhỏ cỡ chữ hay cắt bớt câu mô tả.
Câu ấy là thứ giải thích nút làm gì; app này người dùng không rành máy
tính."* Câu dài nhất ở đây (hàng Gmail, 66 chữ) vừa đúng hai dòng trên màn
360px — kẹp 2 dòng chặn được hàng cao vống mà không nuốt chữ nào. */
.cd-hang-chu small { display:-webkit-box; -webkit-box-orient:vertical;
-webkit-line-clamp:2; line-clamp:2; overflow:hidden; }
/* ⑤ Hàng có nhóm nút chọn: sàn của cụm chữ phải TRỪ ĐI ô icon VÀ CÓ DƯ.
⛔ Luật 09/09 ở trên đặt `min-width:100%`. Nay hàng có thêm icon 20px + khe
12px đứng trước, để nguyên 100% là cụm chữ đẩy hàng quá khổ 32px.
⛔ TRỪ 40px CHỨ ĐỪNG TRỪ ĐÚNG 32px. Đo 10/09/2026 ở cả bốn khổ máy: trừ khít
32px thì icon + khe + cụm chữ cộng lại BẰNG ĐÚNG bề ngang còn lại, và mọi
bề ngang ở đây là số lẻ (`clientWidth` trừ đệm) — chỉ cần dôi nửa pixel là
trình duyệt hất luôn cụm chữ xuống dòng dưới. Hậu quả không dừng ở một
hàng xấu: chữ tụt về mép 28px (lệch cột với chín hàng kia), hàng cao vọt
từ 81px lên 174px, và câu mô tả bị ép vào cột hẹp thành 5–8 dòng — đúng ba
thứ Boss đang bảo sửa. Dư 8px là chỗ đệm cho phép làm tròn, không hơn.
(Nhóm nút vẫn xuống dòng như ý: chỗ còn lại 8px không chứa nổi nút nào.) */
.cd-hang:has(.cd-chon) .cd-hang-chu { min-width:calc(100% - 40px); }
/* Nhóm nút xuống dòng thì thụt vào thẳng cột với chữ ngay trên nó. */
.cd-hang:has(.cd-chon) .cd-chon { margin-left:32px; }
/* ⑥ SÀN CHO CỘT CHỮ — đo 10/09/2026, bốn khổ máy.
──────────────────────────────────────────────────────────────────────────
Luật 09/09 cho cụm chữ `min-width:0` và cho nút `flex:none`: nút giữ nguyên
bề ngang tự nhiên, còn bao nhiêu thì cụm chữ chịu. Trên màn 320 sau khi trừ
thêm ô icon 20px, kết quả đo được:
Mật khẩu 107px · Gmail 102px · Thông báo 136px · PHIÊN BẢN APP 22px
Hàng "Phiên bản app" tệ nhất vì bên phải nó không phải nút mà là chuỗi số
phiên bản — chuỗi ấy KHÔNG NGẮT ĐƯỢC, nên bề ngang tối thiểu của nó lớn, và
cụm chữ bị nén còn 22px: nhãn "Phiên bản app" rơi thành một cột dọc mỗi dòng
một chữ. Đúng lỗi cô Quỳnh đã chê ngày 22/08, nay tái hiện ở hàng khác.
Chữa bằng cách đảo thứ tự ai phải nhường: CỘT CHỮ có sàn 52%, phần bên phải
mới là phần co lại.
⛔ `min-width:0` cho nút là BẮT BUỘC đi kèm — không có nó thì nút vẫn lấy bề
ngang tối thiểu của mình và tổng vượt khổ, đẩy hàng tràn ngang.
⛔ Nhãn nút xuống hai dòng ở màn 320 là CHẤP NHẬN ĐƯỢC, vì `min-height:44px`
đã giữ đích bấm; chữ giải thích bị nén mới là thứ không đọc nổi. */
/* ⛔ HAI DÒNG NÀY KHÔNG NGANG NHAU — đo bằng thử phá 10/09/2026:
· Dòng `.cd-nut` là dòng GÁNH VIỆC. Gỡ nó (trả về `flex:none` như luật
09/09) là cột chữ bị bóp lại ngay, nhãn vỡ dòng — bài kiểm đỏ.
· Dòng `.cd-hang-chu` là LƯỚI ĐỠ. Gỡ riêng nó thì bài vẫn xanh đủ 108/108,
vì nút đã chịu co nên chẳng còn ai bóp cột chữ nữa.
Giữ cả hai là cố ý, và lý do hay hơn tôi tưởng lúc đầu — đo được khi phá:
SÀN 52% BIẾN LỖI CÂM THÀNH LỖI ỒN.
· CÓ sàn: cột chữ không chịu co nữa, nên một cái nút không co được sẽ đẩy cả
hàng TRÀN RA NGOÀI MÀN. Đo thấy ở cả ba khổ 320/360/390 — bài kiểm kêu ngay
ở phép "KHÔNG tràn ngang".
· KHÔNG sàn: cột chữ lặng lẽ teo còn 22px. Nhìn vẫn "có chữ", không phép canh
nào kêu, và người dùng thì chịu trận — đúng lỗi cô Quỳnh chê 22/08/2026.
⛔ Nên đừng thấy "gỡ dòng `min-width:52%` mà bài vẫn xanh" rồi kết luận nó vô
dụng và xoá đi. Nó không gánh bố cục — nó gánh việc LÀM CHO HỎNG NÓ LỘ RA.
Thà hỏng ồn còn hơn hỏng câm. */
.cd-hang:not(:has(.cd-chon)) .cd-hang-chu { min-width:52%; flex:1 1 auto; }
.cd-hang:not(:has(.cd-chon)) .cd-nut { flex:0 1 auto; min-width:0; }
/* Phần bên phải KHÔNG phải nút (chuỗi số phiên bản) — cho phép ngắt giữa chuỗi.
`:not(.cd-av)` vì ảnh đại diện cũng là một , mà nó thì không được co. */
.cd-hang > span:not(.cd-av) { flex:0 1 auto; min-width:0;
overflow-wrap:anywhere; text-align:right; }
/* ⑦ CHỪA SẴN ĐÚNG HAI DÒNG CHO MÔ TẢ → mọi hàng một-nút cao BẰNG NHAU.
──────────────────────────────────────────────────────────────────────────
Đây là nửa còn lại của chữ "thiếu đi sự đồng bộ" Boss dùng. Kẹp trần 2 dòng
(mục ④ trên) mới chỉ chặn hàng cao vống; hàng nào mô tả ngắn thì vẫn thấp
hơn hàng khác 17px, và mắt đọc dọc thấy ngay các hàng so le. Đặt SÀN bằng
đúng hai dòng nữa là trần gặp sàn: mọi hàng một-nút cao y hệt nhau.
⛔ `2.7em` = 2 × 1.35, và `em` ở đây ăn theo cỡ chữ CỦA CHÍNH , nên
Boss đổi cỡ chữ toàn app thì hàng vẫn tự đúng. Gõ một số px là hỏng ngay
lần đầu ai bấm "Cỡ chữ → Lớn".
⛔ Phải ghi `line-height:1.35` ngay đây, đừng tin giá trị thừa kế: `normal`
mỗi phông một khác, mà số nhân trong `2.7em` phải khớp với nó. */
.cd-hang-chu small { line-height:1.35; min-height:2.7em; }
/* ⑧ Hàng hồ sơ (ảnh đại diện 52px) CỐ Ý cao hơn và không theo cột icon — chính
TikTok cũng để hàng tài khoản riêng một khuôn. Ảnh mặt là thứ người ta nhận
ra mình, bóp bằng 20px là mất nghĩa. */
.cd-hang:has(.cd-av) { min-height:76px; }
.cd-hang:has(.cd-av) .cd-hang-chu small { -webkit-line-clamp:1; line-clamp:1; }
}
/* ⚙⚙ 11/08/2026 — TRANG CÀI ĐẶT CHIA TAB DỌC.
Cô Quỳnh: *"tôi ko muốn mở ra kéo xuống như này"*, *"tương lai bàn giao cho
doanh nghiệp khác"*. Trước đây trang này là MỘT dải cuộn dài 6 khối, mà toàn
bộ 13 việc hệ thống thì bị nhồi sau MỘT ô xổ xuống — chọn xong bấm "Tiếp"
mới biết mục đó là gì. Người tiếp nhận app không thể mò ra.
Nay: dải tab dọc bên trái (kiểu bảng cài đặt của phần mềm doanh nghiệp),
nội dung bên phải, mỗi việc là một hàng có tiêu đề + một câu giải thích.
⛔ Tab nào người này không có mục nào thì KHÔNG DỰNG RA — không phải ẩn đi
bằng CSS. Ẩn bằng CSS là chữ vẫn nằm trong trang, mở xem nguồn là thấy. */
/* ⚠️ 11/08/2026 (lần 2) — CÔ QUỲNH: *"thiết kế kiểu này nó trông cứ bị thừa ra
nhiều khoảng trắng"*. Bản đầu tôi làm dải tab DỌC rộng 200px bên trái. Sai ở
ba chỗ cộng lại: (1) nhãn tab ngắn nên cột đó gần như trống, (2) mỗi tab chỉ
2–3 hàng nên khung thấp tè, (3) khung công cụ vốn rộng 1120px căn giữa màn nên
hai bên hụt sẵn. Nhìn tổng thể là một hộp nhỏ trôi giữa vùng trống mênh mông.
Nay: tab NẰM NGANG kiểu gạch chân — đúng nếp 7 công cụ khác trong app đang
dùng — nội dung bắt đầu ngay từ mép trái, không còn cột trống. Và gom 6 tab
xuống 3 để mỗi tab có đủ hàng, không còn tab hai dòng. */
.cd-tabs { display:flex; gap:2px; margin:0 0 16px; border-bottom:1px solid var(--vien);
overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cd-tabs button { flex:none; border:0; background:transparent; margin-bottom:-1px;
border-bottom:2px solid transparent; padding:9px 16px; white-space:nowrap;
font-family:inherit; font-size:13.5px; font-weight:600; color:var(--mo); cursor:pointer; }
.cd-tabs button:hover { color:var(--chu); }
.cd-tabs button.chon { color:var(--muc); border-bottom-color:var(--xanh); }
/* Một câu nói tab này để làm gì — đứng ngay trên nội dung, không phải chú thích mờ. */
.cd-tab-mt { margin:0 0 12px 2px; font-size:12.5px; color:var(--mo); }
/* Hàng việc NGUY HIỂM (xoá / hoàn tác): tách hẳn xuống cuối, viền đỏ nhạt bên
trái. Trước đây "Xoá dữ liệu ĐÃ IMPORT" nằm lọt thỏm giữa danh sách phẳng —
giáo vụ bấm nhầm là mất dữ liệu thật. */
.cd-hang.cd-nguy { border-left:3px solid var(--do); }
.cd-hang.cd-nguy .cd-nut { border-color:var(--do); color:var(--do); }
.cd-hang.cd-nguy .cd-nut:hover { background:var(--do); color:#fff; }
/* ══════ BẢNG PHÂN QUYỀN THEO CHỨC VỤ — làm lại 12/08/2026 ══════
Cô Quỳnh: *"thiết kế thật chuyên nghiệp hơn, bớt trẻ con và để thật giống
business, tốt, dễ tiếp cận"*.
Bản cũ sai ở đâu (đếm được, không phải cảm tính):
1. KHÔNG có một dòng CSS riêng nào — toàn bộ style viết thẳng vào chuỗi HTML
trong JS. Nên nền tối vỡ (tô cứng #f3f7f7), và không ai sửa nổi.
2. Emoji 🔐 ở tiêu đề, emoji 🔒 dùng thay icon ô khoá.
3. Câu chữ NỘI BỘ lọt ra màn hình: "Developer (bạn) luôn có mọi quyền nên
không có cột riêng" — người dùng doanh nghiệp đọc câu này thấy ngay là
phần mềm chưa xong.
4. Ô tick trần, bấm phải trúng đúng 19px; 40 hàng × 4 cột mà không có cách
nào tick nhanh cả cột, cũng không tìm được hàng nào.
Bản này: bám đúng nếp trang Cài đặt (.cd-*) — viền mảnh, nền phẳng, tab/nhóm
phân cách bằng ĐƯỜNG KẺ chứ không bằng màu, mọi màu đi qua var() nên nền tối
tự đúng. Cả ô là vùng bấm được. */
/* ══════════════════════════════════════════════════════════════════════════════
TRANG "QUYỀN THEO CHỨC VỤ" — cô Quỳnh 21/08/2026
──────────────────────────────────────────────────────────────────────────────
*"ấn vào nó sẽ ra 1 tab riêng nhìn cho dễ và chuyên nghiệp hơn"*.
Cả trang là MỘT CỘT FLEX cao bằng màn hình, và ô cuộn bảng nhận `flex:1` để
nuốt hết chỗ thừa. Nhờ vậy bảng dài bao nhiêu cũng dùng hết chiều cao có sẵn,
không bao giờ chừa lại dải trắng dưới đáy — thứ cô Quỳnh chê nhiều nhất.
⛔ Đừng đặt `max-height` cố định (kiểu `54vh` của bản hộp thoại cũ) cho
`.pq-trang .pq-cuon`. Số cứng thì màn to hở đáy, màn nhỏ lại cụt bảng —
`flex:1` tự đo, không phải đoán. */
.pq-trang { display:flex; flex-direction:column; gap:0; min-height:calc(100vh - 118px - max(0px, var(--dnc-du, 0px))); }
.pq-mota { margin:2px 2px 11px; font-size:13px; color:var(--mo); line-height:1.55; max-width:78ch; }
.pq-trang .pq-cuon { flex:1 1 auto; max-height:none; min-height:220px; }
/* Thanh nút DÍNH ĐÁY. Bảng 37 hàng: cuộn xuống cuối để tick mấy quyền cuối rồi
phải cuộn ngược lên tìm nút Lưu là kiểu bỏ quên thay đổi. */
.pq-day { position:sticky; bottom:0; z-index:4; display:flex; align-items:center;
gap:10px; flex-wrap:wrap; margin-top:11px; padding:11px 2px;
background:var(--nen); border-top:1px solid var(--vien); }
.pq-day .pq-chan { flex:1 1 240px; margin:0; }
/* Chữ "Có thay đổi chưa lưu" — hổ phách, cùng sắc với "đã tiếp nhận" bên Công
việc: cả hai đều nghĩa là "đang dở, chưa chốt". */
.pq-canh { font-size:12.5px; font-weight:700; color:var(--nhan-chu);
background:var(--nhan-nen); border:1px solid var(--nhan-vien);
border-radius:var(--r-xl); padding:2px 10px; white-space:nowrap; }
.pq-thanh { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.pq-tim { flex:1; min-width:180px; }
.pq-dem { font-size:12.5px; color:var(--mo); white-space:nowrap; }
.pq-cuon { overflow:auto; max-height:54vh; border:1px solid var(--vien); border-radius:var(--r-sheet);
background:var(--the); contain:paint; }
.pq-bang { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.pq-bang th, .pq-bang td { padding:8px 10px; }
/* Hàng tiêu đề DÍNH: cuộn 40 hàng mà không thấy tên cột thì tick nhầm cột ngay. */
.pq-bang thead th { position:sticky; top:0; z-index:3; background:var(--nen2);
border-bottom:1px solid var(--vien); text-align:center; font-weight:600;
font-size:12.5px; color:var(--chu); white-space:nowrap; }
.pq-bang thead th:first-child { text-align:left; }
.pq-vaitro { display:block; }
/* "Chọn cả cột" — chữ nhỏ dưới tên chức vụ, không phải nút to tranh chỗ. */
/* ⛔ `width:100%` LÀ THỨ GIỮ CON SỐ THẲNG CỘT. `display:block` trên một ``
KHÔNG kéo nó rộng bằng ô: nút vẫn co lại vừa chữ rồi nằm dính mép trái, nên tên
chức vụ thì căn giữa mà con số ngay dưới lại lệch sang trái gần 100px — cô Quỳnh
bắt được đúng chỗ này 21/08/2026. Rộng 100% thì `text-align:center` của ô mới ăn. */
.pq-tatca { display:block; width:100%; margin-top:2px; font-size:11px; font-weight:500; color:var(--mo);
background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-decoration:underline;
text-underline-offset:2px; }
.pq-tatca:hover { color:var(--muc); }
/* Tiêu đề nhóm: CHỮ NHỎ IN HOA giãn nét — nếp bảng doanh nghiệp. Không tô nền
màu cứng, chỉ một đường kẻ trên. */
.pq-nhom td { background:var(--nen2); font-size:11px; font-weight:700;
color:var(--mo); padding:7px 10px;
border-top:1px solid var(--vien); border-bottom:1px solid var(--vien); }
.pq-bang tbody tr:not(.pq-nhom) td { border-bottom:1px solid var(--vien); }
.pq-bang tbody tr:not(.pq-nhom):hover td { background:var(--nen2); }
/* Ô tên chức năng là chứ không phải — trình đọc màn hình
đọc được "quyền này, cột kia". Trình duyệt tự in đậm + căn giữa , phải gỡ. */
.pq-bang tbody th.pq-ten { text-align:left; font-weight:500; color:var(--chu); line-height:1.35; }
.pq-o { text-align:center; width:96px; padding:0; }
/* ⛔ Trong TRANG (không phải hộp thoại) bề ngang rộng gấp rưỡi, nên nới cột chức
vụ ra 150px. Để 96px thì ba cột tick dồn hết về mép phải còn cột tên chức năng
kéo dài 900px trống — mắt phải chạy ngang cả gang tay mới nối được tên với ô
tick, rất dễ tick nhầm hàng. */
/* 240px chứ không phải 150px: tên chức năng dài nhất chỉ chiếm ~340px, nên ba
cột tick rộng 240px kéo ô tick lại gần tên, mắt bớt phải chạy ngang. */
.pq-trang .pq-o { width:240px; }
/* Cả ô là vùng bấm — trên điện thoại ngón tay không phải nhắm 19px. */
.pq-o label { display:flex; align-items:center; justify-content:center; padding:8px 0; cursor:pointer; }
.pq-o input { width:17px; height:17px; accent-color:var(--xanh); cursor:pointer; }
/* Ô khoá: icon ổ khoá NÉT MẢNH thay cho emoji 🔒 của bản cũ. `margin-right` phải
gỡ, không thì icon lệch trái trong ô căn giữa (luật chung `i[class^="ic-"]`
đặt margin-right:6px cho icon đứng trước chữ). */
.pq-khoa { display:inline-flex; align-items:center; justify-content:center;
color:var(--mo); padding:8px 0; }
.pq-khoa i { width:14px; height:14px; margin-right:0; vertical-align:0; }
/* Nhãn "chỉ Developer" — viền mảnh, không phải viên kẹo bo tròn 999px. */
.pq-nhan { display:inline-block; margin-left:7px; font-size:10.5px; font-weight:600;
color:var(--mo); border:1px solid var(--vien); border-radius:var(--r-sm);
padding:1px 6px; vertical-align:1px; white-space:nowrap; }
/* ❓ 12/09/2026 — NÚT "?" CẠNH TÊN TỪNG QUYỀN (Boss giao 12/09).
> *"có nút bé ? ấn vào đó để nó giải thích công cụ hoạt động như nào"*
Nút tròn viền mảnh, nằm ngay sau tên hàng, bấm ra hộp giải thích.
⛔ `margin-right:0` cho icon bên trong là BẮT BUỘC: luật chung
`i[class^="ic-"]` đẩy icon 6px sang phải, để nguyên thì dấu hỏi lệch hẳn
ra khỏi tâm vòng tròn. Đúng cái bẫy đã dính ở `.tk-anh.trong i`.
⛔ Cỡ 17px là cỡ NHỎ NHẤT còn bấm trúng trên điện thoại khi tính cả khoảng
đệm quanh; hạ nữa là người dùng bấm ba lần mới trúng.
⛔ Không dùng `:has()` — luật cấm trong CSS mới của app. */
/* ⛔⛔ 20/09/2026 — NÚT "?" RÕ NÉT HƠN. Boss: *"trong phân quyền chức vụ có
nút ? làm nó rõ nét hơn"*. Bản cũ: 17px, viền `--vien` nhạt, chữ `--mo` nhạt,
nền trong suốt — đặt giữa một bảng 52 hàng thì nó chìm hẳn, người phân quyền
không biết là có chỗ để hỏi.
⛔ 19px chứ không to hơn: nó đứng ngay sau tên quyền trong ô bảng, to nữa là
đẩy cả hàng cao lên và bảng 52 hàng dài thêm cả một màn.
⛔ Nền `--nen-o` + viền đậm hơn mới là thứ làm nó nổi lên, không phải cỡ. */
.pq-bang .pq-hoi { display:inline-flex; align-items:center; justify-content:center;
width:19px; height:19px; margin-left:7px; padding:0; vertical-align:-4px; flex:none;
/* 2px chứ không 1,5px — đo thật trong Chrome thấy `getComputedStyle` trả về
đúng "1px": trình duyệt làm tròn bề rộng viền xuống số nguyên điểm màn,
nên 1,5px hóa ra không đậm hơn bản cũ một chút nào. */
border:2px solid var(--mo); border-radius:50%; background:var(--nen-o, #fff);
color:var(--chu); font-weight:700; cursor:pointer;
transition:background .14s ease, border-color .14s ease, color .14s ease; }
.pq-bang .pq-hoi > i { width:12px; height:12px; margin-right:0; vertical-align:0; }
.pq-bang .pq-hoi:hover { border-color:var(--xanh); color:#fff; background:var(--xanh); }
.pq-bang .pq-hoi:focus-visible { outline:2px solid var(--xanh); outline-offset:2px; }
/* Ảnh minh hoạ trong hộp giải thích của nút "?" — Boss 20/09.
⛔ Ảnh chụp rộng 1200px, hộp thoại hẹp hơn nhiều — `width:100%` để nó co vừa,
và `height:auto` để không bị bóp méo. */
.pq-anh { margin:12px 0 2px; border:1px solid var(--vien); border-radius:var(--r-lg);
overflow:hidden; background:var(--nen-o, #fff); }
/* ⛔ MÀN HẸP THÌ CHO CUỘN NGANG, ĐỪNG CO TIẾP. Ảnh rộng 1180px, màn điện thoại
390px — co vừa màn thì chữ trong ảnh còn chưa tới 5px, chỉ là vết mờ. Người
phân quyền mở nó ra để NHẬN MẶT công cụ, không đọc được thì bằng không có.
Vuốt ngang xem từng phần thì vẫn nhận ra được.
⛔ `overscroll-behavior-x: contain` để vuốt hết ảnh thì dừng, không kéo luôn cả
hộp thoại đi theo. */
.pq-anh img { display:block; width:100%; height:auto; }
@media (max-width: 760px) {
.pq-anh { overflow-x:auto; overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch; }
/* ⛔ ĐẶT CỠ CỐ ĐỊNH, ĐỪNG ĐỂ `auto`. Đo thật: `width:auto` cho ra 2360px
— ảnh chụp ở độ nét gấp đôi nên kích thước tự nhiên cũng gấp đôi, thành ra
phải vuốt hai quãng mới hết một thanh công cụ. 680px là cỡ đủ để chữ 13px
trong ảnh còn 7,5px — đọc được, mà chỉ vuốt một quãng ngắn. */
.pq-anh img { width:680px; max-width:none; }
}
.pq-anh-chu { display:block; padding:6px 10px; font-size:11.5px; color:var(--mo);
border-top:1px solid var(--vien); }
.pq-chan { margin:9px 2px 0; font-size:12px; color:var(--mo); line-height:1.5; }
.pq-trong { padding:22px 12px; text-align:center; color:var(--mo); font-size:13px; }
@media (max-width:760px) {
.pq-bang { font-size:12.5px; }
.pq-o { width:64px; }
.pq-cuon { max-height:46vh; }
}
/* ══════════════════════════════════════════════════════════════════════════════
🌳 22/09/2026 — CÂY PHÂN QUYỀN (Boss chốt câu 1–20)
⛔⛔ HÀNG TÊN CHỨC VỤ PHẢI DÍNH KHI CUỘN (Boss nhắn giữa việc 22/09). Đo trên Chrome
thật 22/09: lăn chuột 2.295px thì hàng tên chức vụ trôi lên tận -2.085px. Lý do:
`.pq-cuon` là khung cuộn (overflow:auto) mà lại cao theo nội dung, nên TRANG
cuộn chứ khung không cuộn; hàng tiêu đề dính vào khung, khung trôi thì nó trôi.
`overflow:clip` vẫn cắt gọn góc bo nhưng KHÔNG tạo khung cuộn → hàng tiêu đề
dính theo cửa sổ, ngay dưới thanh trên cùng (cố định, cao 48px).
══════════════════════════════════════════════════════════════════════════════ */
.pq-trang .pq-cuon { overflow:clip; contain:none; }
/* `--pq-tren` = đáy thật của thanh trên, đo lúc mở màn: máy tính 48px, điện thoại 61px.
Ghim cứng 48px thì trên điện thoại hàng tên chức vụ chui 13px dưới thanh trên. */
.pq-trang .pq-bang thead th { top:var(--pq-tren, 48px); }
/* ⛔ Cột tên RỘNG 380px, cột chức vụ tự chia phần còn lại. Bản cũ ghim mỗi cột chức vụ
240px nên cột tên chỉ còn ~160px — thêm mũi tên + icon của cây vào là tên nhóm, tên
công cụ và nút "?" gãy ba dòng (chụp Chrome 22/09). */
.pq-trang .pq-bang tr > :first-child { width:380px; min-width:280px; }
.pq-trang .pq-o { width:auto; }
/* Đường kẻ hàng và nền rê chuột phải chạy HẾT hàng, cả ô tên (bản cũ chỉ có ở ô tích
nên hàng như bị cắt đôi). */
.pq-trang .pq-bang tbody tr:not(.pq-nhom) th.pq-ten { border-bottom:1px solid var(--vien); }
.pq-trang .pq-bang tbody tr:not(.pq-nhom):hover th { background:var(--nen2); }
/* Cây: mũi tên gập/mở · icon công cụ · tên. Nút con thụt vào một nấc. */
.pq-cay { display:inline-flex; align-items:center; gap:7px; vertical-align:middle; }
.pq-cay.cap2 { padding-left:29px; }
.pq-mo-cho { display:inline-block; flex:0 0 22px; width:22px; }
.pq-mo-con, .pq-mo-nhom { display:inline-flex; align-items:center; gap:7px; background:none; border:0;
padding:0; color:inherit; font:inherit; cursor:pointer; }
.pq-mo-con { flex:0 0 22px; justify-content:center; width:22px; height:22px; border-radius:6px; color:var(--mo); }
.pq-mo-con:hover { background:var(--nen2); color:var(--chu); }
.pq-mo-con:focus-visible, .pq-mo-nhom:focus-visible { outline:2px solid var(--xanh); outline-offset:2px; }
.pq-mui { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2;
stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease; }
[aria-expanded="true"] > .pq-mui { transform:rotate(90deg); }
.pq-ico { flex:0 0 16px; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7;
stroke-linecap:round; stroke-linejoin:round; color:var(--mo); }
.pq-so-con { margin-left:2px; font-size:11px; font-weight:500; color:var(--mo); letter-spacing:0;
text-transform:none; font-variant-numeric:tabular-nums; }
/* Hàng nhóm: bấm cả dải tên để gập/mở; mỗi cột một ô tích cả nhóm. */
.pq-nhom .pq-mo-nhom { min-height:30px; font-size:11px; font-weight:700; letter-spacing:.05em;
text-transform:uppercase; color:var(--mo); }
.pq-nhom .pq-mo-nhom:hover { color:var(--chu); }
.pq-bang .pq-nhom td.pq-tm-o { padding:0; text-align:center; }
.ck-tm { display:inline-flex; align-items:center; justify-content:center; width:44px; height:40px;
padding:0; background:none; border:0; cursor:pointer; }
.ck-tm:focus-visible { outline:2px solid var(--xanh); outline-offset:-4px; border-radius:8px; }
/* ── Ô TÍCH (animated check box, đổi màu sang teal thương hiệu — câu 7–10) ────────
Khung 24px, vùng bấm 44px. , KHÔNG dùng ký tự ☰: ký tự ấy mỗi máy một
phông, chỗ dày chỗ mảnh, còn thì cao thấp đúng từng pixel — giống
nút tròn `#ddFab` ở màn điểm danh. */
#thanhCC .cc-dong { display:flex; flex-direction:column; align-items:center;
justify-content:center; gap:3px; flex:none;
background:transparent; border:1px solid transparent; color:var(--mo);
border-radius:var(--r-md); width:30px; height:30px; padding:0; cursor:pointer; }
#thanhCC .cc-dong span { display:block; width:15px; height:1.5px; border-radius:var(--r-sm);
background:currentColor; }
#thanhCC .cc-dong:hover { background:var(--nen2); color:var(--chu); }
/* ══════════════════════════════════════════════════════════════════════════
🎚 CỘT NGĂN (rail) — cô Quỳnh 22/08/2026
──────────────────────────────────────────────────────────────────────────
⛔ 48px, KHÔNG rộng hơn. Cô Quỳnh: *"nhớ thiết kế cột bên trái mới bé thôi kẻo
tốn diện tích"*. 48 = nút 36 + đệm hai bên 6. Nút 36px vẫn đạt chuẩn vùng
bấm tối thiểu cho cảm ứng khi cộng khoảng hở giữa các nút.
⛔ Cột này KHÔNG cuộn (`overflow:visible`): nhiều nhất là 4 ngăn, mà cho cuộn
thì tên hiện khi rê chuột bị chính khung cuộn cắt mất. */
#thanhCC .cc-hai-cot { flex:1; min-height:0; display:flex; }
/* ⛔ 52px (nút 40 + đệm 6 mỗi bên) — cô Quỳnh 22/08 lần 2: *"tăng kích thước
icon và font chữ menu để dễ bấm/quét mắt hơn"*. Vẫn là cột HẸP đúng như lần
dặn thứ nhất (*"bé thôi kẻo tốn diện tích"*): 52px chỉ bằng một phần sáu thanh. */
/* ══════════════════════════════════════════════════════════════════════════
🟠 MÀU CAM CHỈ Ở ĐÚNG CỘT NÀY — VIỆC E, sửa lại 23/08/2026
──────────────────────────────────────────────────────────────────────────
Cô Quỳnh 22/08 xin đổi cam: *"thiết kế cho cái thanh công cụ có các công cụ
của các bộ phận ý — THANH CÔNG CỤ Ở BÊN NGOÀI ý — sửa nó lại thành màu cam"*.
Lần đầu tôi hiểu thành cả tấm panel và bôi cam hết. Cô xem xong chụp lại đúng
phần DANH SÁCH TÊN CÔNG CỤ (ô "Tìm công cụ", nhóm "Giáo vụ", "Điểm danh",
"Progress test"…) và nói: *"cái thanh này phải màu xanh lá như cũ chỉ riêng
nhìn kĩ ảnh để biết thanh công cụ nào"*.
→ "Thanh công cụ ở bên ngoài" = ĐÚNG CỘT ICON HẸP NGOÀI CÙNG này (52px), thứ
nằm sát rìa màn hình. Phần thân bên trong giữ teal như cũ.
Vì sao cam ĐẤT chứ không phải cam logo #F5821F: cam logo làm nền thì icon
trắng chỉ đạt 2,48 lần tương phản, dưới xa ngưỡng 3,0 của nét vẽ. Dải
#B0540A → #96470B cho icon trắng 5,10 và icon mờ 3,01.
⛔ PHẢI CÓ VẠCH PHÂN CÁCH RÕ. Cam đất và teal gần nhau về ĐỘ SÁNG (chỉ hơn
kém 1,48 lần) — chúng khác nhau ở sắc chứ không ở sáng tối. Không vạch thì
hai cột nhoè vào nhau thành một mảng nâu xỉn, mà người nhìn màu kém lại
càng không tách nổi. Vạch tối bên phải làm ranh giới ấy hiện ra.
══════════════════════════════════════════════════════════════════════════ */
#thanhCC .cc-rail { flex:none; width:44px; display:flex; flex-direction:column; gap:3px;
padding:7px 6px;
background:linear-gradient(180deg, var(--cc-rail-dinh) 0%, var(--cc-rail-day) 100%);
border-right:1px solid rgba(0,0,0,.32);
box-shadow:1px 0 4px rgba(0,0,0,.18); }
/* ══════════════════════════════════════════════════════════════════════════
⛔⛔ LÚC CHỈ CÓ CỘT ICON THÌ ĐỪNG LỘ RA HAI THANH — cô Quỳnh 23/08/2026
──────────────────────────────────────────────────────────────────────────
*"Thiết kế cái thanh công cụ sao cho lúc ấn trang chủ không lộ ra 2 thanh, mà
tôi chỉ muốn 1 thanh bên trong cùng thôi; và cái thanh hẹp bé xíu đó bỏ đi
hoặc mở rộng cái thanh trong cùng ra, đừng để kiểu chia cắt với 1 thanh hẹp thế."*
ĐO THẬT 23/08/2026 (màn 1280, body `cc-gon man-cong-cu`):
`.cc-panel` rộng **64px**, còn `.cc-rail` bên trong chỉ **52px**
→ thừa đúng **12px** của panel lộ ra bên phải cột icon,
mà panel lại có nền gradient KHÁC và viền phải RIÊNG
`.cc-rail` viền phải 1px rgba(0,0,0,.32)
`.cc-panel` viền phải 1px rgba(255,255,255,.20)
→ hai đường viền cách nhau 12px, nhìn đúng thành "hai thanh".
CHỮA: lúc chỉ bày cột icon thì cho cột icon rộng ĐẦY panel và nhường việc kẻ
viền cho panel. Một thanh, một đường viền.
⛔ CHỈ áp khi `.chi-rail`. Lúc thanh MỞ hẳn thì panel rộng 252px và danh sách
công cụ nằm bên phải cột icon — khi ấy cột icon PHẢI giữ 52px và PHẢI có
viền, không thì icon dính liền vào danh sách.
⛔ Đệm ngang lên 12px cho nút 40px nằm đúng giữa 64px (12+40+12=64); giữ 6px
là icon lệch hẳn sang trái, nhìn còn lỗi hơn cũ.
══════════════════════════════════════════════════════════════════════════ */
#thanhCC.chi-rail .cc-rail { width:100%; padding-left:12px; padding-right:12px;
border-right:0; box-shadow:none;
/* Ðệm co cùng nhịp với dải nền (.cc-panel cũng .2s ease) — xem lời dặn ở nút. */
transition:padding .2s ease; }
/* ⛔⛔ NÚT PHẢI ĐO THEO CỘT, ĐỪNG TỰ CHẠY MỘT NHỊP RIÊNG — vá 12/09/2026.
Bản cũ: nút 32px ở trạng thái nghỉ, `width:100%` lúc rê chuột. Nghe thì tương
đương, nhưng trình duyệt phải NỘI SUY từ `100%` về `32px`, mà `100%` lại tính
theo `.cc-rail` — cái đang co. Hai đường cong chồng nhau nên nút TỤT NHANH HƠN
nền, để hở một dải tối không chữ không nút.
Đo thật (1366×900, rời chuột, ghi từng khung hình): hở tối đa 86,7px (lia ra
sau 100ms) · 108px (250ms) · 108px (vào-ra-vào).
⇒ Cho nút `width:100%` ở CẢ HAI trạng thái: lúc nghỉ `.cc-rail` rộng đúng 32px
(56 trừ 12+12 đệm) nên số đo không đổi một pixel, mà nút thì bám dính theo
cột suốt cú co — hết hở.
⛔ Chỉ trong `.chi-rail`. Thanh mở hẳn có bố cục khác, `100%` ở đó là nút dài
hết cột. */
#thanhCC.chi-rail .cc-rail-nut { width:100%; }
#thanhCC .cc-rail-nut { position:relative; flex:none; width:32px; height:32px;
display:flex; align-items:center; justify-content:center; padding:0;
border:1px solid transparent; border-radius:var(--r-md); background:transparent;
color:var(--mo); cursor:pointer; font-family:inherit;
/* ⛔⛔ PHẢI CÓ `width`/`padding`/`gap` TRONG DANH SÁCH — vá 12/09/2026.
`#thanhCC.chi-rail:hover .cc-rail-nut` đổi `width` 32px ↔ 100%, nhưng nhịp
cũ không khai `width` nên nút NHẢY MỘT PHÁT trong đúng một khung hình, trong
khi `.cc-panel` bên ngoài còn co từ từ (`transition: width .2s ease`).
Khoảng chênh ấy để lại một DẢI TỐI RỖNG — nền còn rộng mà không chữ không nút.
Đo thật (1366×900, rời chuột): dải còn 142,7px kéo dài 116ms · 164px kéo dài
149ms · ca vào-ra-vào 164px kéo dài 700ms.
⇒ Cho nút đi đúng .2s ease như dải nền thì hai thứ về cùng lúc, hết dải rỗng.
⛔ Khối `prefers-reduced-motion` bên dưới vẫn tắt sạch nhịp này — đừng gỡ. */
transition:background .12s, color .12s, border-color .12s, transform .14s ease,
width .2s ease, padding .2s ease, gap .2s ease; }
/* ⛔ Gõ thẳng rgba trắng, KHÔNG `var(--the)`: `--the` trong thanh nay CHÍNH LÀ
màu nền thanh, nên rê chuột vào sẽ "sáng lên" bằng đúng màu nền — không thấy gì. */
/* 🪶 nền .12 → .07, và chữ/biểu tượng sáng hẳn lên — đúng gợi ý cô Quỳnh 02/09. */
#thanhCC .cc-rail-nut:hover { background:rgba(255,255,255,.07); color:#fff;
border-color:rgba(255,255,255,.24); }
#thanhCC .cc-rail-nut:focus-visible { outline:none; border-color:var(--xanh); box-shadow:var(--vong); }
/* ⛔ Ngăn ĐANG MỞ mang BỐN dấu hiệu cùng lúc (nền teal nhạt · viền teal · chữ
teal đậm · vạch teal mép trái) — cùng lý do với block bộ phận cũ: ở nền tối
nền nhạt gần như biến mất, còn ai nhìn màu kém thì vẫn còn viền và vạch. */
/* ⛔⛔ VIẾT LẠI 23/08/2026 — ĐỌC LÝ DO ĐẦY ĐỦ Ở KHỐI `--cc-o-day-*` TRÊN KIA.
Bản cũ đắp trắng mờ 16% lên nền và kẻ một vạch TEAL. Cả hai đều là cách làm
đúng CHO NỀN TEAL; từ lúc nền cột đổi sang cam (22/08) thì nền nút chỉ còn hơn
nền 1,33 lần và vạch teal tụt xuống 2,73 lần — dưới ngưỡng nhìn được. Cô Quỳnh
báo ngay hôm sau: *"hay chọn nhầm trang chủ với giáo vụ"*.
Nay nút đang đứng mang MÀU ĐẶC chứ không phải một lớp phủ mờ, nên nó không còn
phụ thuộc nền cột nữa — đổi nền cột lần sau cũng không làm hỏng dấu này. */
#thanhCC .cc-rail-nut.chon { background:var(--cc-o-day-nen); color:#fff;
border-color:var(--cc-o-day-vien); box-shadow:none; }
/* ══════════════════════════════════════════════════════════════════════════
MỨC SÁNG THỨ HAI — "danh sách đang bày ngăn này", cô Quỳnh 22/08/2026
──────────────────────────────────────────────────────────────────────────
Cột icon nay chở HAI thứ khác nhau:
.chon NƠI ĐANG ĐỨNG — màn hình trước mắt là cái này
.dang-bay NGĂN ĐANG BÀY — danh sách bên phải là của ngăn này
Hai thứ ấy TÁCH NHAU RA được: đứng ở Trang chủ mà danh sách bày Tuyển sinh
là chuyện thường ngày.
⛔ VÌ SAO PHẢI CÓ MỨC HAI — đo trên trình duyệt thật 22/08 bắt được: bản vá
đầu cho nút làm việc "át" ngăn, nên bấm Tuyển sinh thì danh sách đổi mà
icon không sáng lên. Nút bấm không phản hồi là lỗi nặng hơn hẳn chuyện
hai nút cùng sáng — người ta bấm lại lần nữa, rồi tưởng app đơ.
⛔ NHẸ HƠN HẲN `.chon`, ĐỪNG LÀM ĐẬM LÊN: chỉ vạch teal mờ ở mép trái, không
nền, không viền. Đậm ngang nhau là lại về đúng cảnh hai nút cùng sáng mà
không phân biệt được cái nào là nơi mình đứng. */
/* ⛔ 23/08/2026 — độ đục nâng .45 → .65. Cột icon nay sẫm hơn hẳn, mà vạch này là
màu MỜ nên nó tự tối theo nền: đo trên nền mới chỉ còn 2,67 lần, dưới ngưỡng
nét vẽ 3,0. Nâng lên .65 thì đạt 3,91 / 4,31 lần.
Luật "nhẹ hơn hẳn .chon" ở trên VẪN GIỮ và nay còn dễ giữ hơn: `.chon` là một
mảng cam ĐẶC, còn đây chỉ là một vạch teal mờ 2px — không cách nào lẫn. */
#thanhCC .cc-rail-nut.dang-bay { color:rgba(255,255,255,.82);
box-shadow:inset 2px 0 0 rgba(122,214,209,.65); }
/* ══════════════════════════════════════════════════════════════════════════
📋 NÚT CÔNG VIỆC — PHẢI THẤY NGAY, KHÔNG PHẢI DÒ. Cô Quỳnh 23/08/2026
──────────────────────────────────────────────────────────────────────────
*"làm sao để nút công việc trở nên nổi bật hơn nữa vì nó là nút chắc chắn
nhiều người ấn vào nhưng ko nên phải dò á."*
⛔ KHÔNG ĐƯỢC TÔ CAM. Cam trong thanh này đã mang đúng MỘT nghĩa — "nơi cô
đang đứng" (`--cc-o-day-nen`). Mượn cam cho nút hay dùng là hỏng luôn cái
dấu vừa dựng hôm nay để chữa chuyện bấm nhầm.
⛔ CŨNG KHÔNG mượn vạch teal mờ mép trái — đó là dấu "danh sách đang bày".
Nên nút này mang dấu hiệu HÌNH THỨC KHÁC HẲN: nó là nút duy nhất trên cột
LÚC NÀO CŨNG có nền và viền, tức trông ra "một cái nút" giữa những icon trơn.
Số đo (WCAG, tự tính chứ không ướm):
nền #12616B nổi khỏi nền cột 1,67 lần (sáng) · 1,91 lần (tối)
viền #14A0A0 — đúng teal của file logo — nổi 3,72 / 4,25 lần, trên ngưỡng
nét vẽ 3,0 ở CẢ HAI chế độ nên dùng chung một bộ màu, khỏi lệch nhau
chữ trắng trên nền ấy được 7,12 lần
⛔ `:not(.chon)` là bắt buộc: lúc cô đang đứng ở Công việc thì ô cam phải đè
lên, nếu không thì nút này thành cái duy nhất không cho biết mình đang mở. */
#thanhCC .cc-rail-nut.cc-viec:not(.chon) {
background:var(--cc-viec-nen); border-color:var(--cc-viec-vien); color:#fff; }
#thanhCC .cc-rail-nut.cc-viec:not(.chon):hover {
background:#17727E; border-color:#3FBFBF; }
/* Tách khỏi nhóm bộ phận bên trên — mắt neo được vị trí, khỏi đếm từ đầu cột. */
#thanhCC .cc-rail-nut.cc-viec { margin-top:8px; }
/* 🔢 Số việc đang chờ, ngay trên nút. Đây mới là thứ khiến cô không phải dò:
nhìn cột là biết có việc hay không, khỏi bấm vào xem.
⛔ Đỏ #C62828 CHỈ khi có việc QUÁ HẠN — cùng quy ước với `.cc-badge.do` trong
danh sách, đừng đặt màu khác kẻo hai chỗ nói hai kiểu về cùng một việc. */
#thanhCC .cc-rail-so { position:absolute; top:-4px; right:-4px; min-width:17px;
height:17px; padding:0 4px; border-radius:var(--r-md); background:#0E7C86; color:#fff;
border:1.5px solid var(--cc-rail-dinh); font-size:10.5px; font-weight:700;
line-height:14px; text-align:center; pointer-events:none; }
#thanhCC .cc-rail-so.do { background:#C62828; }
#thanhCC .cc-rail-nut svg { width:22px; height:22px; flex:none; fill:none; stroke:currentColor;
stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
/* Nút Tài khoản tụt xuống ĐÁY cột — nếp quen của mọi app có cột icon bên trái:
thứ dùng hằng ngày ở trên, thứ về tài khoản ở dưới cùng. */
#thanhCC .cc-rail-duoi { margin-top:auto; }
/* 🏷 TÊN HIỆN KHI RÊ CHUỘT — cô Quỳnh: *"di chuột vào hiện tên nút đó lên để đỡ
tốn diện tích"*.
⛔ Tự vẽ chứ KHÔNG dùng thuộc tính `title` của trình duyệt: `title` đợi gần
một giây mới hiện, và chữ nó bé xíu theo hệ điều hành, không đổi được.
⛔ Nhãn nằm TRONG panel (panel 272 − rail 48 = 224px chỗ trống), vì
`.cc-panel` có `overflow:hidden` — thò ra ngoài là bị cắt cụt.
⛔ `pointer-events:none`: nhãn nổi lên đè sang danh sách công cụ; không chặn
thì rê chuột trúng nhãn là mất luôn cú bấm vào công cụ nằm dưới nó. */
#thanhCC .cc-rail-ten { position:absolute; left:calc(100% + 7px); top:50%;
transform:translateY(-50%); z-index:5; pointer-events:none;
/* ⛔ Gõ thẳng, KHÔNG `var(--chu)`/`var(--the)`: trong thanh, `--chu` nay là
trắng và `--the` là teal — cặp cũ hoá ra chữ teal trên nền trắng, chói và
lạc hẳn tông. Nhãn nổi thì phải SẪM ĐẶC hơn cả nền thanh mới bật lên được. */
/* ⛔ 23/08/2026 — TRẢ LẠI TEAL SẪM. Có một lượt đổi sang nâu sẫm #3A1B05 hồi
bôi cam cả tấm thanh; nay chỉ CỘT ICON cam còn thân về teal, mà nhãn này
bung ra BÊN PHẢI cột icon — tức nó nằm trên nền THÂN. Nền sau lưng nó là
teal thì nhãn phải teal sẫm, để nâu là một mảng nâu lạc giữa vùng xanh. */
background:#062A31; color:#FDF6F0; border:1px solid rgba(255,255,255,.20);
box-shadow:0 2px 8px rgba(0,0,0,.35);
font-size:12px; font-weight:500;
padding:4px 9px; border-radius:var(--r-sm); white-space:nowrap;
/* Tên BỘ PHẬN do người dùng tự đặt, có thể dài. Panel có `overflow:hidden` nên
tên dài quá sẽ bị cắt cụt KHÔNG có dấu ba chấm — thà cắt có báo còn hơn. */
max-width:190px; overflow:hidden; text-overflow:ellipsis;
opacity:0; visibility:hidden; transition:opacity .12s; }
#thanhCC .cc-rail-nut:hover .cc-rail-ten,
#thanhCC .cc-rail-nut:focus-visible .cc-rail-ten { opacity:1; visibility:visible; }
/* ⛔ NÚT ĐANG MỞ THÌ KHÔNG HIỆN NHÃN — cô Quỳnh 22/08 tối: *"nút giáo vụ TÊN BỊ
TRÙNG"*. Tên ngăn đang mở đã in sẵn ở `.cc-ngan-ten` ngay dưới ô tìm; rê chuột
vào đúng nút ấy lại hiện thêm một lần nữa, hai chữ y hệt nằm cách nhau vài chục
điểm ảnh.
⛔ CHỈ ẩn nhãn của nút ĐANG MỞ. Các nút chưa mở vẫn phải hiện tên đầy đủ — bịt
hết là quay lại đúng lỗi cô báo sáng nay (*"khó tìm được cái ô tuyển sinh ý"*),
và `thu-giao-dien-nen-tang.js` đang canh chính điều đó. */
#thanhCC .cc-rail-nut.chon:hover .cc-rail-ten,
#thanhCC .cc-rail-nut.chon:focus-visible .cc-rail-ten { opacity:0; visibility:hidden; }
/* Tên ngăn đang mở, đặt trên đầu danh sách. Đây KHÔNG phải nút — chỉ để biết
mình đang đứng ở ngăn nào, vì icon bên rail chỉ nói tên khi rê chuột vào. */
#thanhCC .cc-ngan-ten { font-size:12px; font-weight:600; color:var(--mo);
padding:2px 9px 2px; }
/* ⛔ Lề 10 → 8px (*"thu gọn lề"* — cô Quỳnh 22/08 lần 2). Mỗi bên bớt 2px là
hàng công cụ được thêm 4px bề ngang, vừa đủ bù cho cỡ chữ tăng lên 14,5px. */
#thanhCC .cc-than { flex:1; min-width:0; padding:7px; display:flex; flex-direction:column; gap:6px; overflow-y:auto; }
#thanhCC .cc-tim { width:100%; box-sizing:border-box; padding:8px 10px;
border:1px solid var(--vien); border-radius:var(--r-md);
font-size:13px; font-family:inherit; background:var(--nen-o); color:var(--chu); }
#thanhCC .cc-tim::placeholder { color:var(--mo); }
/* Vòng sáng khi đang gõ — shadcn có ở mọi ô. Người dùng bàn phím trước đây gần
như không nhận ra mình đang đứng ở ô nào. */
#thanhCC .cc-tim:focus { outline:none; border-color:var(--xanh); box-shadow:var(--vong); }
#thanhCC .cc-tim-boc { position:relative; }
/* ⛔ `pointer-events:none`: nhắc phím nằm ĐÈ lên ô nhập, không chặn thì bấm trúng
chữ "Ctrl K" là ô không nhận con trỏ — người dùng bấm mà không gõ được. */
#thanhCC .cc-tim-phim { position:absolute; right:7px; top:50%; transform:translateY(-50%);
pointer-events:none; font-family:inherit; font-size:10.5px; color:var(--mo);
background:var(--nen2); border:1px solid var(--vien-nhe);
border-radius:var(--r-sm); padding:2px 5px; line-height:1.3; }
/* Đang gõ thì giấu đi, không thì chữ dài đâm vào nhắc phím. */
#thanhCC .cc-tim:focus + .cc-tim-phim { display:none; }
#thanhCC .cc-tim { padding-right:58px; }
#thanhCC .cc-ds { display:flex; flex-direction:column; gap:2px; }
/* 🏢 05/08 (cô Quỳnh): mục con là PHỤ → BÉ LẠI (bỏ khung, nền trong, thụt vào)
để tiêu đề nhóm nổi lên làm block CHÍNH. */
/* 🎨 22/08/2026 — HÀNG CÔNG CỤ theo nếp shadcn: cao hơn một chút cho dễ bấm,
bo 8px, chữ 13px, rê chuột mới hiện nền.
⛔ Thụt trái chỉ còn 10px (trước 12px): nhãn nhóm nay không có khung nữa nên
không cần thụt sâu để "chui vào trong hộp". */
#thanhCC .cc-muc { display:flex; align-items:center; gap:10px; text-align:left;
background:transparent; border:1px solid transparent; border-radius:var(--r-md);
/* ⛔⛔ 13,5px/500 — ĐÃ TRẢ VỀ ĐÚNG BẢN CÔ QUỲNH ƯNG, ĐỪNG TĂNG NỮA.
Đường đi của con số này: 12,5 → 13 → 13,5 (cô ưng) → 14,5 (cô CHÊ) → 13,5.
Nguyên văn 22/08: *"cho về font chữ của thanh công cụ trước đó mà tôi bảo tôi
ưng… chứ font chữ của thanh công cụ bây h bạn thiết kế đậm nét quá mức rồi"*.
⛔ Thủ phạm thật KHÔNG chỉ là 14,5px. Nền vừa đổi từ TRẮNG sang XANH SẪM, mà
chữ sáng trên nền sẫm thì trình duyệt vẽ nở ra, nhìn dày hơn hẳn cùng một
nét — hiện tượng loang sáng. Vì thế ngoài việc hạ cỡ chữ còn phải tắt
kiểu vẽ dày ở khối `#thanhCC` (xem `-webkit-font-smoothing` trong bảng màu).
Chỉ hạ cỡ mà quên chỗ kia là vẫn còn dày.
⛔ Nét giữ 500, KHÔNG lên 600: hàng ĐANG MỞ cần 600 làm dấu riêng của nó. */
padding:6px 9px; font-size:13.5px; font-weight:500; color:var(--chu);
cursor:pointer; white-space:normal; }
/* 🔍 Nhích to khi lia chuột — cô Quỳnh 22/08: *"Các nút công cụ trong thanh công
cụ tôi muốn nó có chút zoom ra khi lia chuột vào."*
⛔ 1,02 thôi. Hàng công cụ nằm sát nhau trong một cột hẹp; phóng mạnh là chữ
nhoè và hàng này đè lên hàng kia.
⛔ `transform-origin:left center` — nở về BÊN PHẢI, giữ nguyên mép trái. Nở ra
hai bên thì icon lấn qua mép thanh, nhìn như bị lệch. */
#thanhCC .cc-muc { transition:background .12s, transform .14s ease, border-color .12s;
transform-origin:left center; }
#thanhCC .cc-muc:hover { background:color-mix(in srgb, var(--nen2) 55%, transparent);
color:var(--chu); transform:scale(1.02); }
/* ⛔⛔ `z-index:6` LÀ THUỐC CHỮA, ĐỪNG XOÁ — cô Quỳnh 22/08 tối: *"nút giáo vụ
tên bị trùng và ĐÈ LÊN thanh tìm kiếm công cụ"*.
Chuyện xảy ra thế này, và nó tinh vi:
· `transform` khác `none` TẠO RA MỘT LỚP VẼ RIÊNG trên chính cái nút. Từ lúc
đó, `z-index:5` của nhãn `.cc-rail-ten` bị NHỐT trong nút, không còn so
được với thứ gì bên ngoài.
· Cả cụm nút+nhãn tụt xuống vẽ ở mức của NÚT. Mà `.cc-tim-boc` (ô tìm) cũng
`position:relative`, lại đứng SAU trong cây HTML → ô tìm vẽ ĐÈ lên nhãn.
· Nền ô nhập là `rgba(255,255,255,.10)`, gần như trong suốt, nên chữ "Giáo vụ"
vẫn hiện xuyên qua và chồng lên chữ "Tìm công cụ…". Đúng cảnh trong ảnh cô gửi.
⛔ Dấu vân tay để nhận ra loại lỗi này: đi bằng BÀN PHÍM (Tab) thì KHÔNG hỏng,
vì `:focus-visible` không có `transform`. Rê chuột mới hỏng.
⛔ Vì thế: THÊM `transform` cho phần tử nào có con nổi lên trên thì phải cấp
`z-index` cho nó cùng lúc. Nhớ luật này, đừng nhớ mỗi ca cụ thể. */
#thanhCC .cc-rail-nut:hover { transform:scale(1.09); z-index:6; }
/* Máy đặt "ít chuyển động" thì bỏ hẳn phần nhích — vẫn đổi nền nên không mất
dấu hiệu nào. */
@media (prefers-reduced-motion: reduce) {
/* ⛔ Thêm `.cc-rail` 12/09/2026 cùng lượt vá "dải tối rỗng": nay đệm của nó
cũng chạy nhịp .2s, mà máy đặt ít chuyển động thì không được chạy nhịp nào. */
#thanhCC .cc-muc, #thanhCC .cc-rail-nut, #thanhCC .cc-rail { transition:none; }
#thanhCC .cc-muc:hover, #thanhCC .cc-rail-nut:hover { transform:none; }
}
/* ⭐ CÔNG CỤ ĐANG MỞ — thứ shadcn nào cũng có mà app mình chưa hề có.
Không biết mình đang đứng ở đâu là lỗi dùng được, không phải lỗi thẩm mỹ:
app có hơn 30 công cụ, mở một cái xong quay lại thanh bên thì không dấu vết gì.
⛔ Tô bằng NỀN + CHỮ ĐẬM chứ không bằng màu chữ teal: hàng teal giữa danh sách
xám trông như một đường siêu liên kết, người ta tưởng bấm được sang chỗ khác. */
/* 🎨 Hàng đang mở mang màu trung tâm: nền teal rất nhạt, chữ teal đậm, và một
vạch teal mép trái. Ba thứ cùng lúc để ở nền tối cũng thấy (nền tối thì nền
nhạt gần như biến mất, còn vạch thì vẫn rõ).
⛔ Chữ dùng `--muc` (#0D8081 teal ĐẬM) chứ không dùng `--xanh` (#14A0A0):
#14A0A0 trên nền #E8F5F5 chỉ đạt tương phản ~2,9 lần, đọc không nổi. */
#thanhCC .cc-muc.dang-o { background:var(--xanh-nhat); color:var(--muc);
font-weight:600; box-shadow:inset 2px 0 0 var(--xanh); }
#thanhCC .cc-muc.dang-o .cc-ico { color:var(--muc); }
body.toi #thanhCC .cc-muc.dang-o { color:var(--muc); }
/* 🎯 05/08 — icon nét mảnh dùng ở phần NỘI DUNG (tiêu đề khối Trang chủ…) */
/* 👔 05/08 — icon nhỏ trong NHÃN và trong NÚT (trang Quản lý tài khoản) */
.ico-the { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; vertical-align:-2px; margin-right:4px; }
.ico-nut { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8;
stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; margin-right:6px; }
.ico { width:17px; height:17px; flex:none; fill:none; stroke:currentColor;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
vertical-align:-3px; margin-right:7px; color:var(--muc); }
/* 🎯 05/08 — ICON NÉT MẢNH đơn sắc thay emoji: ăn theo màu chữ, đậm lên khi rê/chọn */
/* ⛔ 22/08/2026 — nét 1,7 → 1,9 và màu `--mo` → `--chu`. Icon nhạt hơn chữ mà
lại đứng ĐẦU DÒNG thì mắt đọc cả hàng theo cái nhạt nhất; đây là lý do chính
khiến cả thanh trông mờ. Nay icon và chữ cùng một tông, cùng một độ đậm.
⛔ Rê chuột / hàng đang mở vẫn đổi icon sang teal — hai luật ngay dưới lo việc
đó, đừng gộp màu vào đây. */
#thanhCC .cc-ico { flex:none; width:17px; height:17px; fill:none; stroke:currentColor;
stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; color:var(--chu); }
#thanhCC .cc-muc:hover .cc-ico { color:var(--muc); }
#thanhCC .cc-muc.cc-tk.do .cc-ico { color:var(--do); }
#thanhCC .cc-muc.keo-qua { border-color:var(--xanh); border-style:dashed;
background:rgba(255,255,255,.16); }
#thanhCC .cc-muc.dang-keo { opacity:.45; }
#thanhCC .cc-keo { flex:none; color:var(--mo); cursor:grab; font-size:15px; line-height:1;
padding:2px 1px; user-select:none; }
#thanhCC .cc-keo:active { cursor:grabbing; }
/* ⭐ 20/09/2026 — NHÃN DÀI XUỐNG HAI DÒNG. Boss chọn bằng nút bấm: thanh hẹp lại
thì tên dài "cho xuống hai dòng", chứ không cắt bằng dấu ba chấm — cắt thì phải
rê chuột mới đọc được tên đầy đủ, mà trên điện thoại thì không rê được.
`min-width:0` để chữ được phép ngắt: thiếu nó thì ô con trong flex giữ nguyên
bề ngang nội dung và đẩy cả thanh rộng ra, đúng cái ta đang muốn bỏ. */
#thanhCC .cc-nhan { flex:1; min-width:0; white-space:normal;
overflow-wrap:anywhere; line-height:1.3; }
#thanhCC .cc-trong { font-size:12px; color:var(--mo); font-style:italic; padding:6px 2px; }
#thanhCC .cc-sapco { font-size:11.5px; color:var(--mo); line-height:1.55; padding:8px 4px 4px;
border-top:1px dashed var(--vien); margin-top:2px; white-space:normal; }
/* 🗂️ 03/08 — NHÓM thu/mở được (folder) + mục Tài khoản/Quản lý (không có tay kéo). */
#thanhCC .cc-nhom { display:flex; flex-direction:column; gap:4px; }
/* 🏢 05/08 (cô Quỳnh): TIÊU ĐỀ NHÓM = BLOCK CHÍNH — to, đậm, có nền + khung,
bấm để thu/mở; các mục bên dưới là phụ nên bé hơn hẳn. */
/* 🎨 22/08/2026 — NHÃN NHÓM BỎ KHUNG.
Đây là điểm khác NHÌN RA NGAY giữa thanh cũ và bốn ảnh cô Quỳnh gửi: bên
shadcn "Overview · Planning · Account · Documents" đều là chữ xám bé trần
trụi; bên mình chúng bị bọc trong hộp xám có viền.
⛔ Hộp xám ấy nặng hơn chính các công cụ nằm dưới nó — tức là nhãn hút mắt hơn
nội dung. Ngược hẳn với việc nhãn phải làm.
⛔ VẪN LÀ NÚT BẤM ĐƯỢC (thu/mở nhóm) nên vẫn phải có phản hồi khi rê chuột và
vẫn phải bấm trúng được — vùng bấm giữ nguyên cả chiều ngang. */
#thanhCC .cc-nhom-ten { display:flex; align-items:center; gap:6px; width:100%; text-align:left;
background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
cursor:pointer; font-family:inherit;
font-size:11.5px; font-weight:600;
color:var(--mo); padding:6px 10px 4px; margin-top:14px; }
#thanhCC .cc-nhom:first-child .cc-nhom-ten { margin-top:2px; }
#thanhCC .cc-nhom-ten:hover { background:transparent; border-color:transparent; color:var(--chu); }
/* 🏢 13/08/2026 — BLOCK BỘ PHẬN. Chỉ hiện khi người đó dùng công cụ của từ 2 bộ
phận trở lên; ai một bộ phận thì thanh bên y hệt cũ.
⛔ Cố ý KHÔNG vẽ thẻ to có mô tả: thanh bên chỉ rộng 252px, nhét thẻ to là
dính đúng lời cô chê 11/08 *"trông cứ bị thừa ra nhiều khoảng trắng"*.
Dùng lại đúng cái đầu nhóm sẵn có, thêm một vạch teal bên trái cho biết
đang mở cái nào. Mọi màu đi qua var() — tô cứng là nền tối vỡ. */
/* 🏢 22/08/2026 — BỘ PHẬN KHÔNG PHẢI NHÃN, NÓ LÀ NÚT CHUYỂN.
Nhãn nhóm bên trên đã bỏ khung, nhưng đầu block BỘ PHẬN thì phải giữ hình hài
một hàng bấm được — vì bấm vào nó là ĐỔI CẢ DANH SÁCH CÔNG CỤ, không phải chỉ
thu/mở cho gọn. shadcn cũng phân biệt đúng như vậy: nhãn là chữ trần, còn thứ
bấm được là một hàng có nền.
⛔ Đừng gộp hai cái làm một cho gọn mã. Gộp là mất dấu hiệu "bấm được", mà
người dùng nhiều bộ phận thì đây là nút họ bấm nhiều nhất. */
#thanhCC .cc-ban > .cc-nhom-ten { font-size:13.5px; font-weight:600; color:var(--chu);
padding:9px 11px; margin-top:6px; border-radius:var(--r-md);
background:var(--the); border:1px solid var(--vien); box-shadow:var(--bong-1); }
#thanhCC .cc-ban > .cc-nhom-ten:hover { background:var(--nen2); border-color:var(--vien); }
/* Nhãn "Bộ phận" đứng trên hai nút — không có nó thì hai cái nút đứng trơ ở đầu
thanh, chẳng cho biết chúng là gì và bấm vào thì đổi cái gì. */
#thanhCC .cc-ban-nhan { font-size:11.5px; font-weight:600; color:var(--mo);
padding:2px 10px 4px; }
/* ⛔ Vạch teal bên trái = "đang mở bộ phận này". Bài kiểm thu-block-bo-phan.js
canh đúng dòng này, và canh cả việc màu phải đi qua var() — tô cứng là nền
tối vỡ. Đừng đổi sang màu thẳng. */
/* ⛔ Bộ phận ĐANG MỞ: nền teal nhạt + viền teal + chữ teal đậm + vạch teal.
Bốn dấu hiệu cùng lúc là cố ý — ở nền tối thì nền nhạt gần như biến mất, còn
ai nhìn màu kém thì vẫn còn cái viền và cái vạch. */
#thanhCC .cc-nhom-ten.chon { background:var(--xanh-nhat); color:var(--muc);
border-color:var(--xanh);
box-shadow:inset 2px 0 0 var(--xanh); font-weight:600; }
#thanhCC .cc-nhom-ten.chon:hover { background:var(--xanh-nhat); border-color:var(--xanh); }
/* Hàng chọn bộ phận trên tấm trượt điện thoại. */
.tts-ban { display:flex; gap:6px; padding:0 12px 8px; flex-wrap:wrap; }
.tts-ban-nut { flex:1; min-width:110px; border:1px solid var(--vien);
border-radius:var(--r-md);
background:var(--the); color:var(--chu); font-family:inherit; font-size:13px;
font-weight:500; padding:9px 12px; cursor:pointer; }
.tts-ban-nut.chon { border-color:var(--xanh); color:var(--chu); background:var(--nen2);
font-weight:600; box-shadow:inset 2px 0 0 var(--xanh); }
#thanhCC .cc-ban-trong { padding:9px 12px; font-size:12.5px; color:var(--mo); line-height:1.5; }
#thanhCC .cc-nhom-muc { padding-left:2px; }
#thanhCC .cc-nhom-mui { display:inline-block; transition:transform .15s; font-size:11px; color:var(--mo); }
#thanhCC .cc-ban > .cc-nhom-ten .cc-nhom-mui { font-size:12px; color:inherit; }
#thanhCC .cc-nhom.dong .cc-nhom-mui { transform:rotate(-90deg); }
#thanhCC .cc-nhom-muc { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
#thanhCC .cc-nhom.dong .cc-nhom-muc { display:none; }
/* ⛔ 22/08/2026 — BỎ KHUNG ĐỎ quanh "Đăng xuất". Trong thanh bên shadcn, hàng
nguy hiểm chỉ khác ở MÀU CHỮ; đóng khung nó lại là biến hàng cuối cùng thành
thứ nặng nhất cả thanh, trong khi nó là hàng người ta bấm ít nhất.
⛔ Nền khi rê chuột dùng `--do-nen` (biến sẵn có) chứ không gõ thẳng #FDECEC —
màu gõ thẳng thì nền tối thành mảng hồng chói. */
/* Nút Đăng xuất trong bảng Cài đặt — đỏ nhạt, viền đỏ, không phải khối đỏ đặc:
nó nằm cuối một trang toàn nút xám, đỏ đặc ở đó là quá to tiếng. */
.cd-nut.cd-nut-do { color:var(--do); border-color:var(--do); }
.cd-nut.cd-nut-do:hover { background:var(--do-nen); border-color:var(--do); }
#thanhCC .cc-muc.cc-tk.do { color:var(--do); border-color:transparent; }
#thanhCC .cc-muc.cc-tk.do:hover { background:var(--do-nen); }
/* 👤 02/09/2026 — AVATAR GÓC PHẢI BẬT LẠI. Cô Quỳnh: *"cái logo avatar ở góc
bên phải"*. Luật cũ 03/08 (`#tkBoc { display:none !important }`) đã gỡ.
⛔ ĐỪNG dựng lại luật ẩn ấy. Lý do nó tồn tại — *"nhìn tên ở sảnh + thanh là
đủ"* — đã hết hiệu lực: danh thiếp trong thanh bên vừa bị bỏ cùng lượt này.
Ẩn ô này bây giờ là app không còn chỗ nào cho biết đang đăng nhập bằng ai,
và mất luôn menu Đổi mật khẩu / Liên kết Gmail / Đăng xuất nằm trong nó. */
/* 🖥️ MÁY TÍNH: thanh mở SẴN, ẩn nút mở/đóng; TÁCH rõ khỏi nội dung (bo góc phải +
bóng) và nội dung NÉ XA hơn cho đỡ sát/rối (cô Quỳnh 03/08). */
@media (min-width:821px) {
#thanhCC .cc-toggle { display:none; }
/* ══════════════════════════════════════════════════════════════════════
🔝 THANH TRÊN CÙNG KIỂU SUPABASE — cô Quỳnh 02/09/2026
*"Toàn bộ phần thanh trên cùng gắn vào cái thanh công cụ… nhìn thiết kế
thanh trên cùng của supabase bạn làm y hệt cho tôi."*
Ảnh cô gửi: thanh trên chạy SUỐT bề ngang, cao 48px, dính đỉnh; cột công
cụ bắt đầu BÊN DƯỚI nó. Hàng thứ hai (dải thẻ bảng) thì không chạy suốt —
nên dải nút công cụ của app giữ nguyên chỗ, đúng như Supabase.
⛔ VẠCH TEAL 2px Ở ĐÁY GIỮ NGUYÊN — luật cô Quỳnh 22/08/2026, đó là màu
nhận diện MyPAS chứ không phải nét trang trí.
⛔ 48px GÕ CỨNG, CỐ Ý. Cột công cụ phải biết mình bắt đầu từ đâu ngay từ
khung hình đầu; đo động bằng biến CSS thì lúc JS chưa kịp đo, cột đè
lên thanh một nhịp rồi mới nhảy xuống.
⛔ z-index 11002 = trên panel (11001) đúng một bậc. Đừng nâng thêm: cao
hơn nữa là đè cả hộp thoại.
⛔ Không áp cho `body.dang-trong-lop` — ở đó thanh công cụ ẩn hẳn và thanh
trên có bộ luật gọn riêng của màn nhập điểm. */
body:not(.dang-trong-lop) .thanh-tren {
position:fixed; top:0; left:0; right:0; z-index:11002;
height:48px; box-sizing:border-box; padding:0 18px; margin:0;
/* 🟢 02/09/2026 — 3px, xem lý do ở dòng gốc của .thanh-tren. */
max-width:none; border:0; border-bottom:5px solid var(--xanh);
border-radius:0; box-shadow:none; }
body:not(.dang-trong-lop) #thanhCC .cc-panel { top:48px; }
/* 🏢 02/09/2026 — LOGO GỌN LẠI CHO VỪA DẢI 48px.
Bản đầy đủ cao ~42px (chữ 23px + khẩu hiệu 8,5px + đệm), nhét vào dải 48px
thì chạm cả mép trên lẫn mép dưới, nhìn như bị kẹt. Supabase để đúng một
dòng chữ hiệu ở góc trái, không kèm khẩu hiệu — làm theo.
⛔ KHÔNG đụng màu: "My" cam + "PAS" teal giữ nguyên tuyệt đối. Chỉ đổi cỡ.
🔄 03/09/2026 — CÔ QUỲNH XIN TRẢ KHẨU HIỆU VỀ (chọn bằng nút bấm, sau khi
báo *"cái chỗ logo mypas đang bị sai"*). Lý do bỏ đi hôm qua vẫn đúng — bản
ĐẦY ĐỦ cao 42px thì kẹt thật — nên đây KHÔNG phải bỏ luật cũ mà là thu nhỏ
cả cụm cho vừa: 17px + 7,5px + 2px đệm = 26,5px, nằm gọn giữa dải 43px (48px
trừ 5px vạch teal), còn dư 8px mỗi bên.
⛔ ĐỪNG trả `.ten` về 23px rồi mới thêm khẩu hiệu — cộng lại là 33px, cụm
logo chạm sát vạch teal, đúng cái "nhìn như bị kẹt" đã tránh hôm qua.
⛔ `white-space:nowrap` của `.cham` (luật gốc) PHẢI giữ: khẩu hiệu xuống dòng
là cụm cao gấp đôi và thanh vỡ bố cục. */
body:not(.dang-trong-lop) .thanh-tren .logo-mypas .ten { font-size:17px; }
body:not(.dang-trong-lop) .thanh-tren .logo-mypas .cham {
display:block; font-size:7.5px; letter-spacing:.04em; margin-top:2px; }
body:not(.dang-trong-lop) #app { padding-top:48px; }
/* ⛔ 02/09/2026 — nút ba gạch "Ẩn thanh" cũng đi luôn trên máy tính. Cô Quỳnh
bỏ hẳn việc thu thanh; để nút lại thì bấm chẳng ra gì, người dùng tưởng treo.
Trên điện thoại nó vẫn hiện và vẫn đóng được tấm trượt — đừng gỡ chỗ đó. */
#thanhCC .cc-dong { display:none; }
/* 02/09/2026 — nút đóng đã ẩn ở đây từ trước, mà ảnh + tên cũng vừa ẩn nốt,
nên cái vỏ chỉ còn là một vệt trống có viền. Ẩn luôn. */
#thanhCC .cc-dau { display:none; }
/* 🏢 05/08 (cô Quỳnh: "giống app business, thanh trái NỐI LIỀN với các block"):
thanh điều hướng DÍNH SÁT mép trái, CAO HẾT màn, KHÔNG bo góc, chỉ 1 vạch
ngăn — nội dung nằm liền kề bên phải như app quản trị chuyên nghiệp. */
/* ⛔ 22/08/2026 — 252 → 300px, cộng thêm đúng bằng cột rail (48px). Danh sách
công cụ vẫn rộng 252px như trước, không bị hẹp đi vì cột rail mới.
⛔ `padding-left` của #app ngay dưới PHẢI đổi cùng con số, không thì nội
dung trang nằm đè lên thanh (hoặc chừa một dải trắng).
⭐⭐ 20/09/2026 — THÔI GHIM CỨNG, ĐỂ APP TỰ ĐO THEO CHỮ.
Boss: *"thiết kế lại cho tôi cái thanh công cụ… hẹp lại ngang với chữ đi vì
nó chiếm diện tích bảng quá"*, và chọn bằng nút bấm: **app tự đo theo chữ
dài nhất**.
Đo thật 20/09 (Chrome, 1600px): nhãn dài nhất là "Yêu cầu của giáo viên" =
132px ở cỡ chữ 13,5px, mà panel đang 276px → THỪA 144px, hơn gấp đôi phần
chữ thật sự cần. Đó là 144px bề ngang bị lấy mất của bảng, trên mọi màn.
⛔⛔ HAI SỐ NÀY PHẢI LUÔN BẰNG NHAU, nên nay CHUNG MỘT BIẾN `--cc-rong`:
panel rộng bao nhiêu thì `#app` phải chừa đúng bấy nhiêu. Ghi hai con số
rời như trước là sớm muộn sửa một chỗ quên chỗ kia — chính khối chú thích
bên trên đã phải dặn điều đó bằng tay.
`--cc-rong` do `ccDoBeRongThanh()` trong js/tinh-nang.js đặt, sau khi đo nhãn
thật. Số dưới đây chỉ là bản dự phòng cho lúc JS chưa kịp chạy. */
#thanhCC .cc-panel, #thanhCC.mo .cc-panel { width:var(--cc-rong, 235px);
left:0; top:0; bottom:0; max-height:none;
border-radius:0; border:0; border-right:1px solid var(--vien);
box-shadow:none; }
/* ⛔⛔ LUẬT GẤP PHẢI NẰM Ở ĐÂY, TRONG CHÍNH KHỐI NÀY — và không được đòi `.mo`.
Bản đầu chỉ có một dòng `#thanhCC.chi-rail.mo .cc-panel{width:64px}` đặt tít
trên, ngoài mọi `@media`. Từ 821px trở lên, thanh là cột dính bên trái và
KHÔNG mang lớp `.mo` — nên luật ấy chẳng bao giờ khớp, panel cứ 304px, gấp
chỉ là gấp trên giấy. Nó lại còn nằm trong suốt nên nhìn tưởng gấp thật, mà
thực ra vẫn ăn hết cú bấm ở dải 0–303px.
(Phép đo đầu tiên của tôi cũng nói "gấp rồi, 64px" — vì chính đoạn đo tự thêm
`.mo` vào trước khi đo. Tự dựng điều kiện cho luật của mình rồi đo, thì đo
cái gì cũng đạt.)
Đặt SAU dòng 304px ở trên: hai bên cùng độ mạnh (một id + hai lớp), đứng sau
thì thắng. */
/* ⭐ 18/09/2026 — Boss xin thu hep cot icon de bang co them cho:
*"thu hẹp lại thanh công cụ của app 1 chút cho nó hẹp lại sát bó chữ
vào để có nhiều vị trí chỗ bảng dữ liệu"*. 56 -> 48px.
⛔ DUNG HA DUOI 48px. Day dung bang dich bam toi thieu cua Google
(44px cua Apple con thap hon). Duoi nguong ay la bam truot tay,
va khong mot bai kiem nao bat duoc — chi nguoi dung that thay.
⛔ Chi bop LE hai ben, GIU NGUYEN co icon (Boss chot), nen icon van
de nhin de bam nhu cu. */
/* ⛔ 18/09 LUOT SAU — TRA VE 56px. Toi ha xuong 48px theo con so Boss
chon, nhung DO THAT tren man cho thay nut icon trong cot chi con rong
23px — hep hon ca cai icon 22px nam trong no. Boss: *"cái thanh công
cụ này bị bé quá mức bẹp dí"*, va *"các màn hình chỉ có thanh đó thì
cho rộng hơn nha"*.
⛔ DUNG HA LAI XUONG 48px DE "DUOC THEM CHO". Cho cho bang da lay o
cho khac roi: le ngang cua tam noi dung 20px -> 8px. Ha cot icon
nua la bop dung cai khong con gi de bop. */
#thanhCC.chi-rail .cc-panel { width:56px; }
/* ⛔ Chung biến với `.cc-panel` ngay trên — xem khối chú thích ở đó. Hai con
số này mà lệch nhau là nội dung đè lên thanh, hoặc chừa một dải trắng. */
body:not(.dang-trong-lop) #app { padding-left:var(--cc-rong, 235px); }
/* ⭐⭐ 23/08/2026 — GẤP THANH THÌ NỘI DUNG PHẢI GIÃN THEO.
Cô Quỳnh xin gấp thanh là để *"cho trang chủ giộng ra nhìn dễ hơn"*. Gấp mà
quên dòng này thì thanh co lại còn 64px nhưng nội dung vẫn chừa nguyên 304px
— người ta được đúng một dải trắng rỗng bên trái, không rộng thêm một milimét.
Đo trên trình duyệt thật: thiếu dòng này, Trang chủ giữ y nguyên bề ngang.
⛔ Selector phải mạnh hơn dòng trên (thêm `#thanhCC.chi-rail ~` không dùng được
vì #app không phải anh em sau nó) — nên dùng `body.cc-gon`. */
body.cc-gon:not(.dang-trong-lop) #app { padding-left:56px; }
/* ══════════════════════════════════════════════════════════════════════════
⭐⭐ 02/09/2026 — CỘT ICON NỞ RA KHI RÊ CHUỘT, ĐỌC ĐƯỢC TÊN TỪNG NÚT
──────────────────────────────────────────────────────────────────────────
CÔ QUỲNH: *"tôi muốn bạn giúp tôi thiết kế cho cái thanh trong cùng đó lúc
di chuột vào thì cái thanh đó sẽ mở rộng ra để mọi người đọc được tên của
icon đó công cụ đó (chứ bây giờ thấy mỗi cái icon tôi cảm thấy rất khó sử
dụng)"*. Cô lấy mẫu từ thanh bên của Supabase.
⛔⛔ ĐÈ LÊN NỘI DUNG, KHÔNG ĐẨY — chính cô chọn khi tôi hỏi. `.cc-panel` là
`position:fixed` nên nới bề ngang của nó KHÔNG đụng vào dòng chảy trang;
chỗ nội dung chừa ra do `body.cc-gon #app{padding-left:64px}` ngay trên
quyết định, và dòng ấy GIỮ NGUYÊN 64px. Bảng đang xem đứng yên tuyệt đối.
⛔ ĐỪNG "sửa cho gọn" bằng cách đổi padding ấy theo hover: mỗi lần chuột
đi ngang cột là cả bảng nhảy 150px, mất luôn chỗ đang đọc.
⛔ CHỈ Ở `.chi-rail`. Lúc thanh mở hẳn thì danh sách công cụ đã nằm sẵn bên
phải cột icon — nở thêm nữa là đè lên chính nó.
⛔ `@media (hover:hover)`: máy cảm ứng KHÔNG có trạng thái rê chuột. Thiếu
dòng này thì trên iPad chạm một cái là cột nở ra rồi nằm nở luôn cho tới
khi chạm chỗ khác — người dùng tưởng app kẹt.
⛔ Độ mạnh: `#thanhCC.chi-rail:hover` (1 id + 2) ăn đứt `#thanhCC.chi-rail`
(1 id + 1) nên KHÔNG phụ thuộc thứ tự dòng — nhưng vẫn đặt ở đây, ngay
dưới hai luật nó ghi đè, để người sau đọc một mạch là hiểu.
⛔ ĐỪNG đụng `#thanhCC.chi-rail .cc-rail { … }` ở dòng 7459: bài kiểm
`thu-dien-diem-toan-man.js` ghi ĐÚNG TỪNG CHỮ luật ấy. Ở đây chỉ THÊM.
══════════════════════════════════════════════════════════════════════════ */
@media (hover:hover) {
#thanhCC.chi-rail:hover .cc-panel { width:164px; }
/* Nút giãn hết bề ngang và xếp icon-rồi-chữ, thay vì ô vuông 40px giữa cột. */
#thanhCC.chi-rail:hover .cc-rail { align-items:stretch; padding-left:8px; padding-right:8px; }
#thanhCC.chi-rail:hover .cc-rail-nut { width:100%; justify-content:flex-start;
gap:11px; padding:0 9px; }
/* ⛔ TẮT phóng to 1.09 lần lúc rê chuột. Với ô vuông 40px nó là một hiệu ứng
nhỏ; với một hàng dài hết cột thì cả hàng phình ra khỏi mép, trông như lỗi. */
#thanhCC.chi-rail:hover .cc-rail-nut:hover { transform:none; }
/* Nhãn thôi làm thẻ nổi bên cạnh, trở về nằm THẲNG HÀNG trong nút. Phải gỡ
hết dáng "thẻ nổi" (nền, viền, bóng, đệm) chứ không chỉ bật hiện lên. */
#thanhCC.chi-rail:hover .cc-rail-ten { display:block; position:static;
transform:none; opacity:1; visibility:visible;
background:none; border:0; box-shadow:none; padding:0;
max-width:none; font-size:13px; font-weight:500; color:inherit;
overflow:hidden; text-overflow:ellipsis; }
/* ⛔ NÚT ĐANG MỞ CŨNG PHẢI HIỆN TÊN. Luật cũ giấu nhãn của nút `.chon` để
khỏi trùng với tiêu đề ngăn bên phải — nhưng ở `chi-rail` KHÔNG có cột bên
phải, nên giấu đi là đúng cái nút người ta đang đứng lại thành ô câm. */
#thanhCC.chi-rail:hover .cc-rail-nut.chon:hover .cc-rail-ten,
#thanhCC.chi-rail:hover .cc-rail-nut.chon .cc-rail-ten { opacity:1; visibility:visible; }
/* Số việc: rời góc trên-phải của ô vuông về cuối hàng, kẻo đè lên chữ. */
/* ⛔⛔ SỐ GHIM LÊN GÓC BIỂU TƯỢNG, KHÔNG dồn về cuối hàng — vá 03/09/2026.
Boss: *"cái số báo đỏ ở lịch giáo viên đang bị đè lên chữ gây mất thẩm mĩ,
thiếu đi sự chuyên nghiệp"*.
ĐO THẬT (Playwright, 25 lớp trống người dạy nên số hiện "40"):
nút 8→155px (rộng 147) · chữ "Lịch giáo viên" 51→131,8 · số 123,9→146
→ 7,9px chữ nằm DƯỚI con số.
⛔ ĐÃ THỬ CÁCH KIA VÀ BỎ: cho số vào dòng chảy (`position:static;
margin-left:auto`) thì hết đè thật, nhưng nhãn phải co còn 60,9px trong
khi chữ cần 80,8px → "Lịch giáo v…". Ở bề rộng 147px thì
8+22+10+80,8+10+22 = 152,8 > 147: biểu tượng, tên đầy đủ và số hai chữ
KHÔNG cùng nằm một hàng được. Boss đã chê chữ cụt nhiều lần, nên đổi
cụt lấy hết đè là vá nửa vời.
⛔ CŨNG ĐÃ LOẠI cách nới nút rộng ra: 147px là con số đã chốt trong
`thiet-ke/BANG-MAU-VA-CHU.md`, không tự ý đổi.
Nên số bám vào GÓC TRÊN-PHẢI CỦA BIỂU TƯỢNG — đúng nếp mọi app có cột icon,
và nó cũng chính là chỗ số đang đứng khi cột chưa nở ra, nên mắt không phải
đi tìm lại. Biểu tượng chiếm 8..30px trong nút; số rộng ~22px đặt `left:15px`
thì mép phải tới 37px, còn nhãn tên bắt đầu ở 43px → cách nhau 6px.
⛔ KHÔNG đặt `flex`/`min-width` cho nhãn nữa: số đã ra khỏi dòng chảy thì
nhãn cứ để tự nhiên, thêm `flex:1` chỉ tổ ép nó co lại vô cớ. */
#thanhCC.chi-rail:hover .cc-rail-so { top:0; left:15px; right:auto;
transform:none; }
/* Cột icon đang là dải cam; nở ra thì chữ phải sáng mới đọc được trên nền ấy. */
#thanhCC.chi-rail:hover .cc-rail-nut { color:rgba(255,255,255,.92); }
}
/* ══════════════════════════════════════════════════════════════════════
🖱 NỞ RA CẢ KHI THANH ĐANG MỞ — cô Quỳnh 02/09/2026
Khối ngay trên chỉ lo lúc ĐÃ GẤP (`.chi-rail`). Lúc thanh mở hẳn thì cột
icon 52px nằm cạnh danh sách công cụ, và rê chuột vào chẳng nở ra gì —
đúng chỗ cô Quỳnh chỉ.
⛔ KHÔNG nới `width` của `.cc-rail`, cũng KHÔNG cho nó `position:absolute`:
cả hai đều kéo danh sách công cụ bên phải nhảy chỗ rồi nhảy về, giật
mỗi lần rê chuột. Nền nở ra vẽ bằng `::before` — ngoài dòng chảy, không
đẩy ai; nút bên trong tràn sang phải ĐÈ LÊN danh sách, đúng lối Supabase.
⛔ 212px là cố ý nhỏ hơn panel 304px: panel có `overflow:hidden`, rộng hơn
304 là bị cắt cụt.
⛔ `::before` vẫn nhận chuột (nó là một phần của chính `.cc-rail`), nên rê
sang vùng chữ không bị tính là rời chuột ra. */
@media (hover:hover) {
#thanhCC:not(.chi-rail) .cc-rail { position:relative; }
/* ⛔ z-index PHẢI đặt ở đây, trên chính `.cc-rail`. Đặt ở `::before` thì vô
dụng: cột icon không có tầng riêng nên danh sách công cụ (đứng sau trong
DOM) vẫn vẽ đè lên, chữ chồng chữ — đúng lỗi cô Quỳnh bắt được 02/09. */
#thanhCC:not(.chi-rail) .cc-rail:hover { z-index:3; box-shadow:none; border-right-color:transparent; }
/* ⛔ `::before` LUÔN CÓ MẶT, không chỉ lúc rê chuột. Sinh ra ngay lúc hover thì
nó nhảy thẳng tới 212px, không có mốc "từ" nào để chạy — đúng cái "bụp một
phát" cô Quỳnh chê. Có sẵn ở bề rộng cột icon rồi mới nở ra được. */
#thanhCC:not(.chi-rail) .cc-rail::before {
content:""; position:absolute; left:0; top:0; bottom:0; width:100%; z-index:0;
background:linear-gradient(180deg, var(--cc-rail-dinh) 0%, var(--cc-rail-day) 100%);
border-right:1px solid rgba(0,0,0,.32); box-shadow:none;
transition:width .16s ease, box-shadow .16s ease; }
#thanhCC:not(.chi-rail) .cc-rail:hover::before {
width:164px; box-shadow:3px 0 14px rgba(0,0,0,.30); }
/* 🌫 PHẦN CÒN LẠI CỦA PANEL MỜ ĐI — cô Quỳnh: *"nếu đã đè thì phải đè lên để
hở mờ đằng sau"*. Không làm mờ thì dải 92px (212 → 304px) lộ ra một mẩu chữ
bị cắt dở, đúng chỗ cô kêu khó nhìn. `~` được vì `.cc-than` là em kế của
`.cc-rail` trong `.cc-panel`. */
#thanhCC:not(.chi-rail) .cc-than {
transition:opacity .16s ease, filter .16s ease; }
#thanhCC:not(.chi-rail) .cc-rail:hover ~ .cc-than {
opacity:.28; filter:blur(2px); pointer-events:none; }
#thanhCC:not(.chi-rail) .cc-rail-nut { transition:background .12s, color .12s,
border-color .12s, transform .14s ease, width .16s ease, padding .16s ease; }
#thanhCC:not(.chi-rail) .cc-rail:hover .cc-rail-nut {
z-index:1; width:148px; justify-content:flex-start; gap:10px; padding:0 8px;
transform:none; color:rgba(255,255,255,.92); }
/* ⛔ Máy nào bật hạn chế chuyển động thì thôi hẳn, đừng ép xem. */
@media (prefers-reduced-motion: reduce) {
#thanhCC:not(.chi-rail) .cc-rail::before,
#thanhCC:not(.chi-rail) .cc-than,
#thanhCC:not(.chi-rail) .cc-rail-nut { transition:none; }
}
#thanhCC:not(.chi-rail) .cc-rail:hover .cc-rail-nut:hover { transform:none; }
#thanhCC:not(.chi-rail) .cc-rail:hover .cc-rail-ten,
#thanhCC:not(.chi-rail) .cc-rail:hover .cc-rail-nut.chon .cc-rail-ten {
display:block; position:static; transform:none; opacity:1; visibility:visible;
background:none; border:0; box-shadow:none; padding:0;
max-width:none; font-size:13px; font-weight:500; color:inherit;
overflow:hidden; text-overflow:ellipsis; }
/* Cùng bài với khối `.chi-rail:hover` ở trên — đọc chú thích dài ở đó.
⛔ ĐỪNG SỬA MỘT KHỐI RỒI THÔI: hai khối này là hai trạng thái khác nhau của
cùng cột icon (đã gấp / đang mở). Bản 02/09 chép khối trên xuống đây mà
chỉ đổi `right:8px` thành `right:10px`, nên lỗi đè chữ có ở CẢ HAI. */
#thanhCC:not(.chi-rail) .cc-rail:hover .cc-rail-so { top:0; left:15px;
right:auto; transform:none; }
}
/* 🖥️ 04/08 (cô Quỳnh): ẨN thanh để RỘNG màn nhìn bảng. Bấm ✕ trong thanh để thu;
hiện lại tab 🧰 mép trái để mở ra. Thu thì bảng .lt-fullw giãn gần hết màn. */
body.cc-thu #thanhCC .cc-panel { display:none; }
body.cc-thu #thanhCC .cc-toggle { display:flex; }
body.cc-thu:not(.dang-trong-lop) #app { padding-left:0; }
/* ⛔ Ẩn thanh: NỚI thẻ .noi-dung rộng ra + bảng FILL 100% (bỏ chiêu full-bleed
margin-left âm — vì thẻ chỉ 1120px, 50% thẻ < 48.5vw nên bảng lòi trái, CẮT cột
đầu — cô Quỳnh 04/08 "tắt thanh thì giao diện bị lệch"). */
/* ⛔ 21/08/2026 — trần này nay THẤP HƠN khung mặc định (đã bỏ trần), tức là ẩn
thanh công cụ đi lại làm màn HẸP LẠI — ngược hẳn ý. Bỏ trần luôn. */
body.cc-thu.man-cong-cu .noi-dung { max-width:none; }
body.cc-thu .lt-fullw { width:100%; max-width:100%; margin-left:0; }
}
/* ===== Chip CHỌN NHIỀU cho Dự giờ (👀 02/08/2026) — viết ĐẦY ĐỦ câu ===== */
/* 02/08: cô Quỳnh "chip khó nhìn díu dít" → mỗi nhóm một KHUNG riêng, chip to +
thoáng hơn, bật/tắt rõ ràng. */
.dg-nhom { margin:8px 0; padding:9px 11px; border:1px solid var(--vien); border-radius:var(--r-lg); background:var(--the); }
.dg-nhom > .nv-lb { margin-top:0; }
.dg-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.dg-chip { font-size:13px; background:var(--nen2); border:1px solid var(--vien); border-radius:var(--r-xl);
padding:7px 14px; cursor:pointer; line-height:1.35; transition:background .1s,border-color .1s; }
.dg-chip:hover { background:#E8F4F2; border-color:var(--xanh); }
/* ⛔ 11/09/2026 — KHONG NEN XANH DAC. Boss: *"an vao khong duoc co mau xanh
dang sau cai khung, chi hien ra cai lua chon thoi."* Dai xanh dam nuot het
chu va bien hop lua chon thanh mot mang mau.
⛔ Van phai con duong NHAN RA muc dang chon (dau ✓ o `::before` + chu xanh
+ vien xanh day hon) — bo sach dau hieu la de ra mot loi khac. */
.dg-chip.chon { background:transparent; color:#0d6e5f; border-color:#159F8B;
font-weight:600; box-shadow:none; }
body.toi .dg-chip.chon { color:#7FD6C4; border-color:#159F8B; }
.dg-chip.chon::before { content:"✓ "; }
.dg-them-chon { font-size:12.5px; background:#FFF3D9; border:1px dashed var(--cam); color:var(--cam-dam);
border-radius:var(--r-xl); padding:7px 13px; cursor:pointer; font-weight:600; }
.dg-them-chon:hover { background:#FFE9C4; }
.dg-luutt { font-size:12px; align-self:center; font-weight:600; }
.dg-luutt.dang { color:var(--mo); } .dg-luutt.xong { color:#2E7D32; } .dg-luutt.loi { color:var(--do); }
/* 🆕 Bảng Dự giờ "nhìn như Sheet / Lịch thi" (cô Quỳnh 03/08/2026) — hàng = phiếu, ô điền thẳng, cuộn ngang. */
.dg-cuon { overflow:auto; max-height:calc(100vh - 250px - var(--dnc-du, 0px)); touch-action:none; overscroll-behavior:contain;
border:1px solid var(--vien); border-radius:var(--r-sheet);
/* ⚡⚡ 06/08/2026 — NỀN ĐỤC. ĐỪNG BỎ, ĐỪNG ĐỔI SANG `transparent`.
Cô Quỳnh: "kéo sang 2 bên bằng chuột rất lag và giật."
Trước đây khung này KHÔNG khai nền → nó trong suốt, và cô đang đặt ẢNH NỀN RIÊNG
phủ kín màn (`#nenRieng`, position:fixed). Nội dung TRONG SUỐT cuộn trên một tấm
nền CỐ ĐỊNH là kiểu lag kinh điển: trình duyệt không thể trượt sẵn một lớp ảnh
đã vẽ, mà phải TRỘN LẠI cả bảng với ảnh nền ở MỖI khung hình.
Cho nền đục là khung bảng thành một lớp vẽ riêng, trượt đi được — hết trộn. */
background:var(--the);
/* 🚀 06/08: gói việc vẽ lại GỌN trong khung bảng. Thiếu dòng này thì mỗi nhịp kéo
trình duyệt phải xét lại cả trang xem có gì xê dịch → kéo ngang bị khựng. */
contain:paint; }
/* Chỉ bật lúc ĐANG kéo: báo trước cho trình duyệt "sắp cuộn nhiều" để nó dựng sẵn
lớp vẽ. Bật thường trực thì ngốn bộ nhớ vô ích nên gắn theo class .dang-keo. */
.dg-cuon.dang-keo { will-change:scroll-position; }
/* ⛔⛔ border-collapse phải là SEPARATE — ĐỪNG đổi về `collapse`.
Với `collapse`, Chrome vẽ nền ô vào lớp nền của cả BẢNG chứ không gắn theo từng ô,
nên hàng tiêu đề `position:sticky` bị chữ của các dòng bên dưới ĐÈ XUYÊN QUA lúc
cuộn — cô Quỳnh báo 06/08/2026: "kéo xuống thì không hiểu cột đó là cột gì nữa".
Với `separate` thì nền dính liền ô sticky nên che đúng. Viền vẽ bằng border-right
+ border-bottom (không phải `border` cả bốn cạnh) để khỏi thành nét đôi; cạnh
ngoài cùng đã có viền của .dg-cuon lo. */
.dg-bang { border-collapse:separate; border-spacing:0; font-size:12.5px; }
.dg-bang th, .dg-bang td { border-right:1px solid var(--vien); border-bottom:1px solid var(--vien);
padding:4px 6px; vertical-align:top; }
.dg-bang thead th { background:var(--dau-bang-nen); color:var(--dau-bang-chu);
font-weight:700; position:sticky; top:0; z-index:5;
border-right-color:var(--dau-bang-vien); border-bottom-color:var(--dau-bang-vien);
white-space:normal; min-width:98px; line-height:1.25; text-align:center; }
.dg-bang td { min-width:120px; }
/* 🚀 Bỏ box-shadow, dùng viền thường: bóng đổ trên ô DÍNH phải vẽ lại mỗi khung hình
lúc kéo ngang, còn viền thì trình duyệt vẽ một lần rồi thôi. */
.dg-bang .dg-dinh { position:sticky; left:0; z-index:3; background:var(--the); min-width:118px; }
/* ══════════════════════════════════════════════════════════════════════════════
⭐ GOM HỒ SƠ TRÙNG THEO LỚP — nút mở nhóm ở Dự giờ (Boss chốt 16/09/2026)
──────────────────────────────────────────────────────────────────────────────
Boss bấm chọn "giống hệt Sổ tuyển sinh", nên mượn nguyên hình dáng .cts-bung
bên css/man.css: nút vuông nhỏ mang CON SỐ lượt, nền đặc khi đang mở.
⛔ KHÔNG dùng box-shadow để vẽ vạch nhóm ở ô .dg-dinh. Ngay khối trên đã ghi:
ô này là ô GHIM, bóng đổ trên ô ghim phải vẽ lại mỗi khung hình lúc kéo
ngang. Dùng viền trái — trình duyệt vẽ một lần rồi thôi.
⛔ MỌI DÒNG ĐỀU CÓ VIỀN TRÁI 3px, dòng không thuộc nhóm thì để trong suốt. Chỉ
tô viền cho dòng trong nhóm là cả bảng xô ngang 3px mỗi lần mở/đóng nhóm.
⛔ KHÔNG đặt position:absolute cho nút: ô cột đầu đã là ô ghim (position:sticky),
chồng thêm một lớp định vị nữa là nút trôi khỏi ô lúc kéo ngang.
══════════════════════════════════════════════════════════════════════════════ */
.dg-bang tbody td.dg-dinh { border-left:3px solid transparent; }
/* ══════════════════════════════════════════════════════════════════════════
⛔ DẢI XANH CHỈ HIỆN KHI CỤM ĐANG MỞ — Boss 16/09/2026.
──────────────────────────────────────────────────────────────────────────
Boss: *"lúc tôi ấn vào mở hiển thị các hàng ẩn thì nhìn khó phân biệt được
là hàng nào là hàng vừa hiện lên… tôi muốn cái viền xanh ở khung bảng bên
trái khi mở hàng ẩn của 1 ô nào đó thì cái màu xanh ở khung đó sẽ hiển thị
ra… và để check được lịch sử nó dài đến đâu"*.
ĐO THẬT 16/09 (sân 8 phiếu, một lớp 3 phiếu, một lớp 2 phiếu): luật cũ bám
`tr.dg-nhom` nên MỌI hàng thuộc nhóm đều có dải — kể cả nhóm đang ĐÓNG, lúc
ấy chỉ một hàng lộ ra. Đo `borderLeftColor` 6 hàng đầu: rgb(13,128,129) ở cả
hàng nhóm đóng lẫn nhóm mở ⇒ dải KHÔNG nói được cụm nào vừa bung, đúng chỗ
Boss chê "khó phân biệt".
Nay dải bám `.cum-mo` — lớp `dgHangHTML` chỉ khoác khi `DG_MO` có khoá nhóm.
Cụm mở thì cả dãy hàng (đầu + con) cùng mang lớp, nên dải chạy LIỀN từ hàng
đầu tới hàng cuối: nhìn mép trái là biết lịch sử dài tới đâu.
⛔ Nhóm ĐÓNG mất dải là CỐ Ý, không phải sót: dấu hiệu "hàng này có lịch sử"
đã là NÚT SỐ (`.dg-bung`) — Boss chốt bằng nút "Dải xanh là đủ".
══════════════════════════════════════════════════════════════════════════ */
.dg-bang tbody tr.dg-nhom.cum-mo td.dg-dinh { border-left-color:var(--muc); }
/* ══════════════════════════════════════════════════════════════════════════
⭐ KHUNG XANH ÔM TRỌN CỤM, ĐỦ 4 CẠNH — Boss chốt bằng nút 16/09/2026 (tối).
──────────────────────────────────────────────────────────────────────────
Boss: *"giờ tôi thấy lúc mở ra các hàng ẩn hiện giờ nhận biết được bằng mỗi
cái màu xanh ở khung bên trái thì giờ tôi thấy bạn thêm cho tôi nó đóng khung
lại luôn cho tôi từ chỗ mở ra đến hết hàng ẩn đó để nhân biết rõ hơn khi nhìn
vào ơ giữa cột"*. Hỏi bằng nút, Boss chọn **viền 4 cạnh**, **ôm cả hàng mang
nút số**, và **đóng cụm lại thì mất hết**.
⛔ DÙNG `box-shadow: inset`, KHÔNG DÙNG `border` — lý do kỹ thuật, đừng "sửa
cho đúng kiểu". Thêm `border` thật vào `td` là **đội chiều cao hàng** và
đẩy cả bảng — chú thích `O_TEN_CAO_BANG_HANG` (11/09) cấm đổi chiều cao
hàng, và chính đó là cái Boss gọi là "giật". `inset` vẽ ĐÈ LÊN trong lòng
ô, không chiếm một pixel nào.
⛔ DẢI TRÁI VẪN LÀ `border-left-color` ở luật ngay trên — ô ghim `.dg-dinh` đã
có sẵn `border-left: 3px solid transparent` nên chỉ cần đổi màu. Đừng
chuyển nó sang box-shadow: có phép canh riêng trong `thu-dg-gom-ho-so-trung.js`.
⛔ CẠNH PHẢI bám `td:last-child` — bảng này kéo được cột nên số cột đổi theo
màn; ghim theo tên cột là lượt sau mất cạnh phải mà không ai biết.
⛔ CẢ BỐN LUẬT ĐỀU ĐÒI `.cum-mo`: cụm đóng lại là không hàng nào còn lớp ấy
nên khung tự biến — đúng ý Boss, không cần một dòng JS nào để dọn.
⛔ `box-shadow` KHÔNG CỘNG DỒN giữa các luật: luật sau đè sạch luật trước. Nên
hàng vừa-đầu-vừa-cuối và ô cuối của hàng đầu/cuối phải khai ĐỦ các vạch
trong cùng một câu, không thì mất vạch mà không lỗi nào báo.
══════════════════════════════════════════════════════════════════════════ */
.dg-bang tbody tr.dg-nhom.dau.cum-mo > td { box-shadow: inset 0 2px 0 0 var(--muc); }
.dg-bang tbody tr.dg-nhom.cuoi.cum-mo > td { box-shadow: inset 0 -2px 0 0 var(--muc); }
.dg-bang tbody tr.dg-nhom.dau.cuoi.cum-mo > td {
box-shadow: inset 0 2px 0 0 var(--muc), inset 0 -2px 0 0 var(--muc);
}
.dg-bang tbody tr.dg-nhom.cum-mo > td:last-child {
box-shadow: inset -2px 0 0 0 var(--muc);
}
.dg-bang tbody tr.dg-nhom.dau.cum-mo > td:last-child {
box-shadow: inset -2px 0 0 0 var(--muc), inset 0 2px 0 0 var(--muc);
}
.dg-bang tbody tr.dg-nhom.cuoi.cum-mo > td:last-child {
box-shadow: inset -2px 0 0 0 var(--muc), inset 0 -2px 0 0 var(--muc);
}
.dg-bang tbody tr.dg-nhom.dau.cuoi.cum-mo > td:last-child {
box-shadow: inset -2px 0 0 0 var(--muc), inset 0 2px 0 0 var(--muc),
inset 0 -2px 0 0 var(--muc);
}
/* ══════════════════════════════════════════════════════════════════════════
⛔ Ô TÊN KHÔNG ĐƯỢC NỞ RA KHI BẤM VÀO — nếu không, NÚT SỐ TRÔI 12px.
──────────────────────────────────────────────────────────────────────────
Boss: *"ấn vào số 3… nó lại bị xung đột với ô xem chọn tên hay sao á tôi ko
rõ nên lúc ấn vào cái nút lại bị nhảy vị trí"*.
ĐO THẬT 16/09, bấm bằng chuột thật (KHÔNG tự gắn class — xem cảnh báo dưới):
ô tên đóng → nút `.dg-bung` ở y=221, `.ont` rộng 68px
ô tên đang sửa → nút ở y=209, `.ont` rộng 134px ⇒ LỆCH 12px
GỐC: `.ont` là `inline-flex` (luật `.sheet-moi tbody tr.sheet-hang td > div`
thắng, hỏi CSSOM mới thấy) nên bề rộng chạy theo nội dung. Lớp xem hẹp 68px
nằm CÙNG DÒNG với nút; ô nhập nở ra 134px thì không đủ chỗ ⇒ `.ont` rơi
xuống dòng dưới ⇒ nội dung ô cao thêm, mà `td` canh `vertical-align:middle`
nên cả cụm dịch lên 12px. Nút vừa nhắm vào đã trôi khỏi đầu ngón tay.
⛔ ĐỪNG ĐO BẰNG CÁCH TỰ GẮN `dang-sua` BẰNG JS: làm thế lệch ra 0px ở CẢ bản
chưa vá — bốn phương án đều "đạt" hết. Đường thật còn chạy `focus()` +
`ontMo()`, và chính nó mới làm ô nhập nở.
⛔ ĐÃ THỬ VÀ LOẠI: `white-space:nowrap` trên ô (vẫn lệch 12px — nowrap không
ngăn được flex item nở); ép `.ont-in` co về min-content (hết lệch nhưng ô
gõ chỉ còn 68px, tên dài không đọc được); cho nút `position:absolute`
(hết lệch nhưng phải đổi padding của ô ghim — đụng bố cục cột dính).
⛔ TRỪ ĐÚNG 24px VÀ CHỈ TRỪ Ở HÀNG THUỘC NHÓM: hàng đầu mang nút
`.dg-bung` 17px + margin 2+5 = 24px; hàng con mang gạch `.dg-bung-lui`
đúng 24px. Hàng LẺ không có cả hai nên không được trừ gì — đo lại sau khi
vá: hàng lẻ vẫn 68px, hàng nhóm 110px cố định ở cả hai trạng thái.
══════════════════════════════════════════════════════════════════════════ */
.dg-bang tbody tr.dg-nhom td.dg-dinh .ont { width: calc(100% - 24px); }
/* ══════════════════════════════════════════════════════════════════════════
⭐ MỞ CỤM: LƯỢT CŨ TRƯỢT NHẸ RA, NỀN XÁM NHẠT — Boss chốt tối 21/09/2026.
──────────────────────────────────────────────────────────────────────────
Boss: *"Y hệt Sổ tuyển sinh hôm nay: lượt cũ trượt nhẹ ra, nền xám nhạt,
bảng đứng yên, cột trái không đổi màu"* — BỎ kiểu "rèm kéo xuống, so le từng
hàng" (16/09) và "rèm kéo ngược lên" lúc đóng (18/09). Lịch sử và lý do: khối
chú thích trên `dgBungNhom` (man-hinh/du-gio.js). Nếp gốc: khối `cts-luot-cu-truot`
ở css/man.css.
⛔ Chỉ `opacity` + `transform`, 0,18 giây, KHÔNG so le, KHÔNG `clip-path`.
⛔ Lớp `dg-vua-mo` chỉ có trong ĐÚNG MỘT lượt vẽ ngay sau cú bấm mở; đóng cụm
thì hàng biến mất ngay, không hiệu ứng.
⛔ Tên khung hình RIÊNG — đừng mượn `cts-luot-cu-truot` của Sổ tuyển sinh (bài
học: keyframe dùng chung kéo về giá trị của nó).
══════════════════════════════════════════════════════════════════════════ */
@keyframes dg-luot-cu-truot {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.dg-bang tbody tr.dg-vua-mo > td { animation: dg-luot-cu-truot .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
.dg-bang tbody tr.dg-vua-mo > td { animation: none; }
}
/* ⭐ LƯỢT CŨ TÔ XÁM NHẠT — cùng màu `--nen2` với lượt cũ ở Sổ tuyển sinh.
⛔ CHỪA HAI CỘT GHIM (`sheet-cot-gham`): dải ghim của Dự giờ vốn đã xám be
(`--sheet-nen-td2`, Boss chốt "cột cố định phải có màu xám" 18/09). Tô đè
lên là cột trái đổi màu — đúng điều Boss dặn tránh. Sổ tuyển sinh tô cả dải
ghim vì dải ấy trắng; ở đây dải đã có màu riêng nên để nguyên.
⛔ `background-color`, KHÔNG `background`: ô đầu mang dải số dòng vẽ bằng
`background-image`, viết tắt là xoá mất.
⛔ `:where(...)` không cộng độ nặng: ô đang gõ vẫn trắng như mọi ô đang gõ, ô
Boss tô màu tay (`sheet-dd-to`) vẫn giữ màu của Boss.
⛔ Lượt cũ mang lớp `sheet-nen-rieng` (man-hinh/du-gio.js) để `sheetGhamCot` KHÔNG
lấy màu này làm màu cả dải ghim — đường lỗi "cả cột cố định xanh hết" Boss
báo ở Sổ tuyển sinh 21/09. */
.dg-bang tbody tr.dg-nhom.con > td:where(:not(.sheet-cot-gham, :focus-within, .sheet-dd-to)) {
background-color: var(--nen2);
}
/* Dòng con mờ hơn dòng đầu: nhìn là biết mấy dòng này là lượt cũ của cùng một lớp. */
.dg-bang tbody tr.dg-nhom.con td { color:var(--mo); }
/* ⛔⛔ CAO 24px, KHÔNG PHẢI 17px NHƯ NÚT BÊN SỔ TUYỂN SINH — ĐÃ ĐO, KHÔNG ĐOÁN.
Bảng này chạy ở dạng sheet, và luật của kênh giao diện
.sheet-moi tbody tr.sheet-hang td button:not(...) { min-height:24px }
THẮNG luật height:17px ở đây (min-height ăn đứt height). Viết 17 thì file nói
một đằng, màn hình hiện một nẻo — đo bằng trình duyệt ra đúng 17×24px.
⇒ Khai thẳng 24px cho khớp sự thật. Hàng Dự giờ cao theo nội dung chứ không
ghim 30px như Sổ tuyển sinh, nên 24px không làm dòng phình ra. */
.dg-bung { display:inline-block; vertical-align:middle; width:17px; height:24px;
line-height:22px; margin:0 5px 0 2px; padding:0; flex:none;
font:inherit; font-size:10.5px; font-weight:700; font-variant-numeric:tabular-nums;
text-align:center; color:var(--muc); background:var(--the);
border:1px solid var(--muc); border-radius:var(--r-sm); cursor:pointer; }
.dg-bung:hover { background:var(--xanh-nhat); }
.dg-bung.mo { background:var(--muc); color:#fff; }
/* Ô đệm của dòng con: đúng bề ngang cái nút (17 + 5 + 2) để chữ dòng con thẳng
cột với dòng đầu. Không có nó thì dòng con lệch trái, bảng nhìn như vỡ. */
.dg-bung-lui { display:inline-block; width:24px; height:1px; vertical-align:middle; }
/* Ô góc trên-trái dính cả hai chiều: phải cùng màu hàng tiêu đề, không thì nó
là một ô xám lạc lõng đúng chỗ mắt nhìn vào đầu tiên. */
.dg-bang thead .dg-dinh { z-index:6; background:var(--dau-bang-nen); }
/* ⛔⛔ VẠCH ĐẬM CHO TRƯỜNG HỢP APP ĐÃ TỰ GỠ DẢI GHĂM — vá 12/09/2026 (nửa (b) của cụm vạch).
CHUYỆN ĐÃ XẢY RA: luật vạch 2px chung chỉ bám `.sheet-moi.sheet-gham .sheet-cot-gham-cuoi`
(css/lop.css, khối "Ranh giới giữa phần đứng yên và phần trôi"). Nhưng `sheetGhamCot`
TỰ BỎ lớp `sheet-gham` khi dải ghăm nuốt quá 55% bề ngang khung — lúc ấy cột tên vẫn
ĐỨNG YÊN nhờ `.dg-dinh` ở ngay trên, mà vạch thì biến mất, chỉ còn viền 1px `--vien`.
Đo pixel thật trên mốc b2d51e6 (sân 18 hàng, cuộn ngang 45%), TÁM phép đo hỏng:
Chăm sóc 1001 · Dự giờ 390 · Chăm sóc 390 · Follow up 390 — cả thân lẫn hàng tiêu đề
đều rgb(214,210,203) dày 1px → 1,51:1 (chuẩn nét đồ hoạ WCAG ≥ 3:1)
Mười lăm cặp còn lại đang ghăm thật thì 4,10–4,75 — tức app đang không nhất quán với
chính nó ở đúng những khổ máy người ta hay dùng.
⛔ ĐỪNG chữa bằng cách hạ ngưỡng 55% trong `sheetGhamCot`: ngưỡng ấy có lý do riêng
(dải ghăm rộng quá thì còn đâu chỗ mà cuộn), đổi nó là đổi bố cục chứ không phải
đổi màu một cái vạch.
⛔ ĐỪNG nới luật cũ ra bằng cách bỏ `.sheet-gham` khỏi nó: làm thế thì khi CÒN ghăm,
cả `.dg-dinh` lẫn `.sheet-cot-gham-cuoi` cùng vẽ ⇒ HAI vạch trong một bảng.
⇒ Tách luật riêng, và chỉ mở đúng lúc app đã gỡ ghăm: `:not(.sheet-gham)`.
⛔ `box-shadow`, KHÔNG phải `border-right`: bảng chạy `table-layout` cố định + JS nhớ
bề rộng cột, thêm một pixel viền là lệch bề rộng ở MỌI bảng (đã trả giá một lần).
⛔ Phải kèm `.sheet-moi`: `.dg-bang` còn được Phụ đạo và mấy bảng khác dùng chung;
chỉ bảng nào đã khoác áo Sheets mới thuộc bộ luật vạch này. */
.dg-bang.sheet-moi:not(.sheet-gham) .dg-dinh {
box-shadow: 2px 0 0 var(--muc, var(--vien-ro, var(--vien)));
}
.dg-dinh b { display:block; font-size:12.5px; }
.dg-dinh .dg-luutt { display:block; font-size:11px; margin:2px 0; }
.dg-o { width:100%; box-sizing:border-box; border:1px solid var(--vien); border-radius:var(--r-sm); padding:3px 5px;
font-size:12px; background:var(--nen-o); color:var(--chu); font-family:inherit; }
/* 10/08/2026 — bỏ `resize:vertical` (kéo tay) vì nay ô TỰ cao theo nội dung.
Giữ min-height cho ô rỗng vẫn đủ chỗ bấm vào. */
.dg-ta { min-width:150px; min-height:40px; }
.dg-chipcell { min-width:180px; max-width:240px; }
.dg-chipcell .dg-chips { display:flex; flex-wrap:wrap; gap:3px; padding-right:2px; }
/* ══════════════════════════════════════════════════════════════════════════
🤝 HAI CỘT TRỢ GIẢNG GỘP LÀM MỘT — Boss giao 16/09/2026 (việc 8).
"Trợ giảng 1 · NX trợ giảng 1 · Trợ giảng 2 · NX trợ giảng 2" ⇒ còn hai cột
"Trợ giảng" và "Nhận xét trợ giảng", mỗi cột hai dòng.
⛔⛔ HAI CỘT PHẢI DÓNG THẲNG NHAU THEO DÒNG, nếu không thì gộp xong lại tệ hơn
lúc chưa gộp: người đọc không biết dòng nhận xét thứ hai là của ai.
Cách giữ cho thẳng là CHO HAI DÒNG CÙNG MỘT CHIỀU CAO TỐI THIỂU ở cả hai
cột (`--dg-tg-dong`), chứ KHÔNG phải canh bằng mắt rồi gõ số lẻ cho vừa.
⛔ ĐỪNG dùng `align-items:center` cho ô: ô trợ giảng và ô nhận xét cao khác
nhau (một bên là ô gõ, một bên là nút có thể xuống 2–3 dòng thẻ), canh giữa
là hai cột lệch nhau đúng lúc nhận xét dài ra — tức đúng lúc cần đọc nhất.
══════════════════════════════════════════════════════════════════════════ */
/* ⛔⛔ 40px = ĐÚNG TRẦN CỦA Ô TÊN HAI DÒNG, và phải DÙNG CHUNG cho cả hai cột.
Đây là thứ giữ cho hai cột dóng thẳng hàng, và nó phải là MỘT con số chứ không
phải hai. Đo 16/09 lúc chưa dùng chung: ô trợ giảng cao 42px (tên xuống hai
dòng) còn ô nhận xét 24px ⇒ dòng đầu đã lệch 12px, dòng sau lệch tiếp — người
đọc lại phải tự đoán nhận xét nào của ai, đúng thứ việc gộp cột sinh ra để bỏ.
⛔ ĐỪNG hạ xuống cho hàng thấp lại: hạ là tên dài bị cắt, mà Boss có luật cứng
11/09 *"tên nhân viên hay học sinh đều phải NHÌN THẤY ĐƯỢC, không được ẩn"*.
⚠️ CÁI GIÁ, đã đo và đã báo Boss: hàng cao 32px ⇒ ~94px khi cả hai dòng có tên
dài. Muốn thấp lại thì KÉO RỘNG cột Trợ giảng — tên nằm gọn một dòng là ô
tự co về 24px và hàng tự thấp xuống. Bề rộng kéo tay được nhớ lại.
⛔ Đã thử ép bề rộng mặc định bằng ba cách (`min-width` ở td · `width` ở th ·
class `c-ten` của `LOP_TU_VUA`) — cả ba đều KHÔNG ăn: `gaKeoCot` ghi thẳng
`th.style.width` và style nội tuyến thắng CSS; còn `LOP_TU_VUA` đo
`td.scrollWidth`, mà ô này cho chữ xuống dòng nên `scrollWidth` không bao
giờ đòi thêm bề rộng. Đừng đi lại ba đường ấy. */
.dg-tgcell, .dg-nxtgcell { --dg-tg-dong:40px; vertical-align:top; }
/* ⛔⛔ ĐỪNG ĐẶT BỀ RỘNG CHO CỘT TRỢ GIẢNG Ở ĐÂY — đã thử và ĐO, cả hai đều trượt:
`min-width` trên `td.dg-tgcell` ⇒ vẫn 120px · `width` trên `th.dg-th-tg` ⇒ vẫn
120px. `gaKeoCot` đo rồi ghi thẳng `th.style.width` (đo được 98px), style nội
tuyến thắng mọi luật CSS. Bề rộng cột ấy nay do `c-ten` + `LOP_TU_VUA` lo —
xem khối lý do ở `man-hinh/du-gio.js`, chỗ dựng hàng tiêu đề.
⛔ ĐỪNG "chữa" bằng `!important`: nó thắng luôn con số người dùng vừa KÉO ra,
tức giết tính năng kéo rộng cột để đổi lấy một bề rộng mặc định. */
.dg-nxtgcell { min-width:190px; }
.dg-tg-dong, .dg-nxtg-dong {
min-height:var(--dg-tg-dong); display:flex; align-items:flex-start; gap:4px; }
.dg-tg-dong + .dg-tg-dong, .dg-nxtg-dong + .dg-nxtg-dong {
margin-top:4px; padding-top:4px; border-top:1px dashed var(--vien); }
.dg-tg-dong > .ont { flex:1 1 auto; min-width:0; }
/* Dấu tên chưa khớp tài khoản — Boss chốt "tự gộp, nhưng phải khớp đúng tài
khoản". Nhỏ, đứng ngoài ô, KHÔNG chặn gõ: đây là lời nhắc, không phải lỗi. */
.dg-tg-la { flex:0 0 auto; font-size:12px; line-height:1.6; color:#B8860B; cursor:help; }
/* Nhãn tên ở cột nhận xét: nhỏ và xám, vì tên ĐẦY ĐỦ đã nằm ở cột bên trái —
đây chỉ là cái mỏ neo cho mắt, in đậm bằng nó là đọc thành hai cột tên. */
.dg-nxtg-ten { flex:0 0 68px; max-width:68px; font-size:11px; line-height:1.5;
color:var(--mo); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dg-nxtg-dong > .dg-o-tich { flex:1 1 auto; min-width:0; }
/* Chưa có người ở dòng ấy ⇒ mờ đi, để không ai lỡ chấm nhận xét cho ô trống.
⛔ Chỉ mờ, KHÔNG `display:none`: ẩn hẳn thì hai cột thôi dóng thẳng hàng, và
người muốn điền trợ giảng thứ hai không thấy chỗ nào để điền nhận xét. */
.dg-nxtg-dong.trong { opacity:.45; }
.dg-nxtg-dong.trong .dg-nxtg-ten { font-style:italic; }
/* 🆕 04/08 (cô Quỳnh: "để có thanh kéo xuống nhìn rõ hơn") — ô chọn nhiều = KÉO XUỐNG:
summary hiện mục đã chọn, bấm mở ra list to rõ để tick. Mở inline nên bảng không cắt mất. */
.dg-chipbox { width:100%; }
.dg-chipbox > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; gap:4px; align-items:center;
padding:5px 7px; border:1px solid var(--vien); border-radius:var(--r-md); background:var(--nen-o); min-height:28px; }
.dg-chipbox > summary::-webkit-details-marker { display:none; }
.dg-chipbox[open] > summary { border-color:var(--xanh); border-radius:var(--r-md) var(--r-md) 0 0; }
.dg-tom-tag { font-size:11px; background:#159F8B; color:#fff; border-radius:var(--r-lg); padding:1px 8px; }
.dg-tom-trong { font-size:12px; color:var(--mo); }
.dg-tom-mui { margin-left:auto; color:var(--mo); font-size:10px; transition:transform .15s; }
.dg-chipbox[open] > summary .dg-tom-mui { transform:rotate(180deg); }
.dg-chipbox > .dg-chips { max-height:none; overflow:visible; gap:6px; padding:8px;
border:1px solid var(--xanh); border-top:none; border-radius:0 0 var(--r-md) var(--r-md); background:var(--the); }
.dg-chipbox .dg-chip { font-size:12px; padding:4px 10px; }
.dg-chipbox .dg-them-chon { font-size:11.5px; padding:4px 10px; }
/* ⛔⛔ INFO_KHONG_KEO_COT 11/09/2026 — Boss: *"cot lop... cho no vua voi chu
luon di, de tranh no mo rong ra nhieu khoang khong dung den."*
Dong `GV: ... · Tro giang: ...` nam TRONG CUNG O voi o xo chon lop. Do o 2320:
dong ay DOI 416px trong khi ten lop that chi 30-40px — chinh no keo ca cot rong
ra, va hang nao khong co no thi o trong hoac.
⇒ Dua ra NGOAI DONG CHAY (`position:absolute`). Thuat toan dung bang khong tinh
phan tu ngoai dong chay vao be rong cot, nen cot thu lai vua o xo.
⛔ KHONG dat `display:none`: dong nay CO NGHIA — no cho biet lop vua chon do ai
day va tro giang la ai. Giau han la lay mat thong tin, khong phai gon.
⛔ Phai co nen DUC va `z-index`: ra khoi dong chay la no de len hang duoi;
trong suot thi chu chong chu.
⛔ O cha phai la chan neo. `td` cua bang nay da `position` san hay chua thi
khong chac, nen neo thang vao chinh o bang `position:relative` o luat duoi. */
/* ⛔ Lop rieng `.dg-lopcell`, KHONG `:has()` — luat cua kho nay cam `:has()`
trong CSS moi cua index.html. Lop duoc gan o `man-hinh/du-gio.js`. */
.dg-bang td.dg-lopcell { position: relative; }
.dg-bang .dg-lop-info { font-size:11px; margin-top:0; padding:3px 5px;
position:absolute; left:3px; right:3px; top:100%; z-index:2;
background:#F1F8F6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 🆕 Follow up HS "nhìn như Sheet / Lịch thi" (03/08/2026) — dùng chung bảng .dg-*.
Ô chọn giữ +＋; cột Lịch sử liên hệ xếp dọc gọn trong 1 ô. */
.dg-bang .fhs-selcell { min-width:230px; max-width:260px; }
/* ⭐ 12/08/2026 — bốn ô chọn của Follow up nay là CHIP CHỌN NHIỀU (cô Quỳnh:
"chọn 1 cái xong chọn cái khác thì cái lựa chọn cũ bị mất").
⛔ Các câu lựa chọn ở đây DÀI (có câu 130 chữ, cả một câu nhận xét), khác hẳn
chip ngắn của Dự giờ. Không chặn bề ngang thì một chip kéo cột rộng ra cả
màn hình. Cho chip XUỐNG DÒNG trong bề rộng của cột. */
.fhs-chipbox > .dg-chips { max-width:100%; }
.fhs-chip { max-width:100%; white-space:normal; word-break:break-word; text-align:left; }
.dg-bang td.cs-ptcell { min-width:190px; }
/* MỌI ô chọn trong ô (học lực/đánh giá/phụ trách) đủ rộng + chừa chỗ cho dấu ▼ để
không che chữ (cô Quỳnh 04/08). Giá trị dài: di chuột vào ô thấy đủ (title), hoặc bấm mở. */
.fhs-o-hang select { flex:1; min-width:0; padding-right:22px; text-overflow:ellipsis; }
.fhs-ngaycell { white-space:nowrap; }
.dg-bang td.fhs-lhcell { min-width:340px; }
/* KHÔNG cap chiều cao → đoạn văn dài hiện ĐỦ (cô Quỳnh 04/08: "ô chữ không to ra"). */
.fhs-lhcell .fhs-lhs { overflow:visible; }
.fhs-lhcell .fhs-lh .nv-datevn { width:118px; }
.fhs-lhcell .fhs-lh-kq { flex:1; min-width:120px; }
/* ══════════════════════════════════════════════════════════════════════════
⭐ NÚT "+ THÊM LẦN" ĐỨNG YÊN MỘT CHỖ — Boss chốt 16/09/2026
──────────────────────────────────────────────────────────────────────────
Boss: *"cái nút thêm lần nó bị đổi vị trí nên tôi muốn bạn cố định lại đúng 1
vị trí khi mở ô và ko mở ô trong cột lịch sử liên hệ"*. Hỏi bằng nút, Boss
chọn **góc PHẢI của ô, luôn thế**.
Gốc: nút là anh em ĐỨNG SAU cụm `.fhs-lhs` trong cùng ``, nên cụm cao lên
bao nhiêu là nút bị đẩy xuống bấy nhiêu — hàng chưa mở thì nút ở phải trên,
hàng mở ra thì nút rơi xuống trái dưới. Đúng hai tấm ảnh Boss gửi.
⛔ `position:absolute` thì PHẢI chừa chỗ bằng `padding-right` cho cụm bên
trái, không thì nút nằm đè lên dấu × xoá của lần liên hệ đầu tiên.
⛔ `top` chứ không `bottom`: neo đáy thì nút lại đi theo chiều cao ô — đúng
cái bệnh đang chữa, chỉ đổi chiều.
⛔ Ô này KHÔNG phải cột ghim nên `position:relative` ở đây không tháo ghim
của ai. Đừng bê cách này sang `td.dg-dinh` (xem luật "ngang cơ đứng sau
thì thắng" — một dòng `position:relative` từng tháo ghim cả đầu bảng).
══════════════════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
NÚT ＋ TRÒN, ĐẶT GIỮA Ô — Boss 17/09/2026 (thay luật ghim góc phải cùng ngày)
──────────────────────────────────────────────────────────────────────────
⛔⛔ LUẬT `position:absolute` Ở ĐÂY ĐÃ ĐƯỢC GỠ — chính nó đẻ ra cảnh "lẫn hàng".
Sáng 17/09 tôi ghim nút vào góc phải trên để nó không đổi chỗ khi ô nở ra.
Nhưng ghim thế là nút rời khỏi mạch nội dung, mà các hàng cao thấp khác nhau
— nên nút của hàng này nằm ngang tầm chữ của hàng kia. Boss chiều 17/09:
*"1 hàng mà lại dính 2 hàng cột lịch sử liên hệ làm lẫn lộn và khó nhìn"*.
⛔ `padding-right:104px` cũng gỡ theo: nó chỉ tồn tại để chừa chỗ cho nút ghim.
Giữ lại là mỗi ô mất trắng 104px bề ngang mà chẳng cho ai.
⛔ GIỮ `position:relative` trên ô: bảng xem đầy đủ (việc ⒓) không dùng tới nó,
nhưng dấu ✕ xoá từng lần liên hệ thì có — gỡ là dấu ✕ văng ra góc trang.
══════════════════════════════════════════════════════════════════════════ */
.fhs-lhcell { position:relative; }
.fhs-them-boc { display:flex; justify-content:center; margin-top:6px; }
.fhs-lhcell .fhs-them-lh {
display:flex; align-items:center; justify-content:center; /* dấu ＋ đúng giữa nút */
width:28px; height:28px; min-width:28px; min-height:28px; /* Boss chốt 28×28 */
padding:0; border-radius:50%;
font-size:15px; line-height:1;
color:var(--xanh); background:var(--nen2, #F5F4F1);
border:1px solid var(--vien); cursor:pointer;
transition:background .12s, border-color .12s, transform .12s;
}
.fhs-lhcell .fhs-them-lh:hover { background:#E8F3EE; border-color:var(--xanh); }
.fhs-lhcell .fhs-them-lh:active { transform:scale(.92); }
body.toi .fhs-lhcell .fhs-them-lh { background:rgba(255,255,255,.07); }
/* Ô TÌM KIẾM đẹp (bo tròn, icon, rộng) — dùng chung các công cụ. */
.o-tim-dep { width:100%; box-sizing:border-box; padding:11px 15px; border:1.5px solid var(--vien);
border-radius:var(--r-xl); font-size:14.5px; font-family:inherit; background:var(--nen-o); margin:8px 0 4px;
transition:border-color .12s, box-shadow .12s; }
.o-tim-dep:focus { outline:none; border-color:var(--xanh); box-shadow:0 0 0 3px rgba(20,160,160,.15); }
/* 🚀 Thanh "đang hiện N/M + Hiện thêm" cho bảng lớn (vẽ ít dòng cho nhẹ). */
.bl-thanh { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:2px 0 6px; }
.bl-dem { font-size:12.5px; color:var(--mo); }
.bl-them { flex:none; }
/* Nút "Ít lại" (12/08/2026) — đường VỀ sau khi bấm Hiện thêm. Cố ý nhạt hơn nút
Hiện thêm: đây là nút phụ, đừng tranh chỗ với việc chính. */
.bl-bot { flex:none; }
/* ===== 🧑🎓 Follow up học sinh (thẻ GỌN bấm-mở + chia lớp) ===== */
.fhs-nhom { margin-bottom:16px; }
.fhs-nhom-dau { display:flex; align-items:center; gap:8px; font-weight:700; font-size:14.5px; color:var(--muc);
padding:7px 12px; background:var(--nen2); border:1px solid var(--vien); border-radius:var(--r-lg); margin-bottom:8px; }
.fhs-nhom-so { font-size:12px; font-weight:700; background:var(--xanh); color:#fff; border-radius:var(--r-xl); padding:1px 9px; }
/* ===== 📇 Thông tin học sinh (tổng hợp) + 📊 Báo cáo điểm danh ===== */
.tths-thanh { flex-wrap:wrap; gap:8px; align-items:center; }
.tths-tim { flex:1 1 240px; min-width:180px; }
.tths-tom { color:var(--mo); font-size:13px; margin:2px 0 12px; }
.tths-tom b { color:var(--muc); font-size:15px; }
/* 🏫 05/08: cột "Lớp" ngay cạnh tên học sinh (cô Quỳnh yêu cầu) */
.tths-lopo { white-space:nowrap; }
.tths-lop-nhan { display:inline-block; padding:1px 9px; border-radius:999px;
background:#DCF1F3; color:#0E7C86; font-weight:700; font-size:11.5px; }
body.toi .tths-lop-nhan { background:rgba(14,124,134,.25); color:#7FD4DC; }
.tths-lop { margin:0 0 12px 6px; }
.tths-lop-dau { font-weight:700; font-size:13.5px; color:var(--muc); padding:4px 2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tths-lop-dau small { color:var(--mo); font-weight:600; }
/* ⛔ 06/08: trước đây chỉ có `overflow-x:auto`. Nghe thì vô hại, nhưng theo luật CSS
hễ một chiều khác `visible` thì chiều kia cũng thành khung cuộn — mà khung này
KHÔNG giới hạn chiều cao, nên hàng tiêu đề `position:sticky` chẳng có mép nào để
bám: kéo xuống là mất tiêu đề hẳn. Nay cho khung một chiều cao tối đa để nó thành
khung cuộn thật. Nhóm nào ít học sinh, chưa chạm mức này thì hiển thị y như cũ. */
.tths-cuon { overflow:auto; max-height:calc(100vh - 220px - var(--dnc-du, 0px)); overscroll-behavior:contain;
border:1px solid var(--vien); border-radius:var(--r-sheet); contain:paint;
background:var(--the); } /* nền ĐỤC — cùng lý do đã ghi ở `.dg-cuon`, đừng bỏ */
.tths-bang { border-collapse:separate; border-spacing:0; width:100%; font-size:13px; min-width:560px; }
.tths-bang th { background:var(--dau-bang-nen); text-align:left; padding:6px 9px; font-weight:700; color:var(--dau-bang-chu); white-space:nowrap; border-bottom:1px solid var(--dau-bang-vien); position:sticky; top:0; z-index:5; }
.tths-bang td { padding:5px 9px; border-bottom:1px solid var(--vien); vertical-align:top; }
.tths-bang tbody tr:nth-child(even) { background:var(--nen2); }
.tths-ten { font-weight:600; }
/* 📇 21/09/2026 (việc C) — nối Sổ tuyển sinh theo Mã HS, hai dấu nhỏ trong ô tên:
· CÙNG MÃ KHÁC TÊN → icon cảnh báo màu dải nhắc vàng, rê chuột thấy cả hai tên.
· CHƯA CÓ TRONG SỔ → một dòng chữ mờ cỡ nhỏ, không nền không viền (kiểu Sheet).
⛔ (0,2,1) để thắng luật nền i[class^="ic-"] (0,1,1), và gỡ lề phải 6px của nó. */
.tths-ten > i.tths-lech-ten { margin:0 0 0 5px; width:13px; height:13px; vertical-align:-2px;
color:var(--nhan-chu); cursor:help; }
.tths-ten > .tths-chua-so { display:block; font-weight:400; font-size:11px; line-height:1.3; color:var(--mo); }
/* Ô địa chỉ dài hơn ô số điện thoại — hẹp quá thì gõ tới đâu chữ trôi mất tới đó. */
.tths-bang td.tths-diachi .tths-sua { min-width:180px; }
/* ⭐ 21/09/2026 — Ô LIÊN HỆ XUỐNG DÒNG, không cắt "…". Boss: *"các ô này khi ghi nhiều
chữ thì phải xuống dòng cho tôi"*. Ô SỬA ĐƯỢC nay là