:root {
--red: #c62828; --red-dark: #8e0000; --card: #ffffff;
/* PHƯƠNG ÁN C "Mười hai canh" (NHAT_KY_THIET_KE §3.12, TV chốt 05/09) — khung app đổi màu theo
canh giờ; JS ghi đè 3 biến này lúc dựng trang chủ. Giá trị ở đây là giờ Ngọ, dùng khi JS
chưa chạy hoặc hỏng (nhánh dự phòng — nguyên tắc 17).
--bg TRƯỚC ĐÂY là #f5f5f5, xám LẠNH, cãi nhau với giấy ẤM #fbf8f1 của khối tranh. */
--canh: #473f26; --canh-chu: #776631; --son: #c0292e; --bg: #f7f4e9;
--text: #212121; --muted: #757575; --green: #2e7d32; --border: #e0e0e0;
/* ═══ ĐỢT 3 (05/09/2026) — BẢNG CỠ CHỮ + SÀN VÙNG CHẠM ═══
Sáu cỡ, không hơn. Trước đợt này tệp này có 22 cỡ khác nhau — nhiều đến mức không ai còn
phân biệt được cỡ nào mang nghĩa gì. ⛔ Thêm cỡ thứ bảy là quay lại đúng chỗ cũ:
cần cỡ khác thì sửa BẢNG, đừng khai px rời. Ngoại lệ đều ghi lý do ngay tại chỗ. */
--fs-1: 11px; /* nhãn nhỏ nhất — chip, huy hiệu, nhãn thanh đáy */
--fs-2: 12px; /* nhãn, dòng phụ */
--fs-3: 13px; /* SÀN cho mọi chữ đọc */
--fs-4: 14px; /* thân bài */
--fs-5: 16px; /* nhấn, ô nhập, nút chính */
--fs-6: 19px; /* tiêu đề màn */
--cham: 44px; /* @dot3_quet_not */ /* sàn vùng chạm — mọi thứ bấm được */
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; background: var(--bg); color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
header.topbar { position: sticky; top: 0; z-index: 20; background: var(--canh); color: #fff; padding: 12px 56px 12px 16px;
box-shadow: 0 2px 6px rgba(0,0,0,.15); position: -webkit-sticky; }
header.topbar h1 { margin: 0; font-size: var(--fs-6); font-weight: 700; letter-spacing: .3px; }
header.topbar .sub { font-size: var(--fs-2); opacity: .9; margin-top: 2px; }
.gnt-lammoi { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 44px; height: 44px; border: 0;
background: transparent; padding: 10px; color: #fff; opacity: .85; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gnt-lammoi svg { width: 100%; height: 100%; display: block; }
.gnt-lammoi.dang-quay svg { animation: gntQuay .8s linear infinite; }
@keyframes gntQuay { to { transform: rotate(360deg); } }
main { padding: 16px; max-width: 640px; margin: 0 auto; padding-bottom: 60px; }
.hidden { display: none !important; }
/* 🔤 LUẬT NỀN Ô NHẬP — ARCHITECTURE nguyên tắc 1d + 15. Dưới 16px thì iPhone TỰ PHÓNG TO
trang khi chạm vào ô, và bảng chọn dấu tiếng Việt hiện lệch chỗ. Đây là selector thẻ trần
nên mọi luật có class đều đè được — luật nào đè thì cũng phải ≥16px. */
input, textarea, select { font-size: 16px; }
/* ===== B (04/09): THANH ĐIỀU HƯỚNG ĐÁY — nằm trọn vùng ngón cái =====
Chép từ `trao.html`; hai tệp phải giống hệt nhau, lệch một con số là thanh nhảy
một nhịp mỗi lần chuyển trang. Xem `_THIET_KE\09_vi_tri_nut_quay_lai\` §6b. */
.thanh-day { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(40,50,70,.06); }
.thanh-day a { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 2px; text-decoration: none; color: var(--muted); font-size: var(--fs-3);
font-weight: 700; -webkit-tap-highlight-color: transparent; padding: 6px 2px; }
.thanh-day a .bi { font-size: 19px; line-height: 1; }
.thanh-day a.dang { color: var(--red); }
/* Máy nhỏ (iPhone SE cao 568): 56px là 9,9% chiều cao màn — rút còn 50, vùng chạm vẫn > 44. */
@media (max-height: 600px) {
.thanh-day a { min-height: 50px; font-size: var(--fs-3); }
.thanh-day a .bi { font-size: 17px; }
}
/* Chừa chỗ cho thanh đáy, CHỈ khi nó đang hiện — thân trang không bị che dòng cuối. */
body.co-thanh-day main { padding-bottom: 76px; }
/* Dòng báo ngắn phải nổi LÊN TRÊN thanh, không thì nó báo vào chỗ người ta không thấy. */
body.co-thanh-day .mang { bottom: 74px; }
@media (max-height: 600px) {
body.co-thanh-day main { padding-bottom: 70px; }
body.co-thanh-day .mang { bottom: 68px; }
}
/* VER01 · nhãn phiên bản hiển thị (TV chốt 13/09/2026). CHỈ là chữ trong luồng, nằm trong
padding-bottom 76px mà body.co-thanh-day main đã chừa sẵn cho thanh đáy — KHÔNG thêm một
hàng nội dung cao, KHÔNG overlay che nội dung, nên các khối chức năng không dịch chỗ.
margin-bottom 6px = khoảng cách tới mép trên thanh đáy; cách mép phải 14px. Không viền,
không pill, không nền nổi, không opacity tuỳ tiện; cỡ chữ để người dùng phóng được. */
.nhan-phien-ban { text-align: right; font: 400 12px/16px system-ui, sans-serif; color: #737c73;
margin: 6px 0 0; padding: 0; pointer-events: none; user-select: none; }
/* Căn phải theo MÉP NỘI DUNG: thẳng hàng với mép phải các thẻ ở trên (main đã có padding 16px,
≈ khoảng 14px của mẫu thiết kế). Không tự cộng thêm lề riêng làm nhãn lệch khỏi cột nội dung. */
.nhan-phien-ban[hidden], .nhan-phien-ban:empty { display: none; }
.mang { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: #333; color: #fff; font-size: var(--fs-3);
padding: 9px 14px; border-radius: 20px; z-index: 30; box-shadow: 0 2px 8px rgba(0,0,0,.3); max-width: 90vw; text-align: center; }
/* ---------- Màn nhập mã (giống .login-card của app) ---------- */
.login-card { background: var(--card); border-radius: 12px; padding: 24px 20px; margin-top: 12px;
box-shadow: 0 1px 4px rgba(0,0,0,.08); text-align: center; }
.login-card h2 { margin: 0 0 4px; font-size: var(--fs-6); color: var(--red); }
.login-card p { color: var(--muted); font-size: var(--fs-4); line-height: 1.5; margin: 6px 0 0; }
.login-card input { width: 100%; font-size: 22px; text-align: center; letter-spacing: 2px; padding: 12px;
border: 2px solid var(--border); border-radius: 8px; margin: 14px 0 0; background: #fff; color: var(--text); }
.login-card input.khoa { font-size: var(--fs-5); letter-spacing: 0; text-align: left; }
.login-card input:focus { outline: none; border-color: var(--red); }
.login-card label.nho { display: flex; align-items: center; min-height: var(--cham); justify-content: center; gap: 8px; margin: 14px 0 0;
font-size: var(--fs-4); color: var(--muted); }
.login-card label.nho input { width: 20px; height: 20px; margin: 0; }
button.primary { background: var(--red); color: #fff; border: none; border-radius: 8px; padding: 14px 20px;
font-size: var(--fs-5); font-weight: 700; width: 100%; cursor: pointer; margin-top: 16px; font-family: inherit; }
button.primary:disabled { background: #ccc; cursor: default; }
button.phu { background: #fff; color: var(--red); border: 2px solid var(--red); border-radius: 8px; padding: 11px 16px;
font-size: var(--fs-4); font-weight: 700; width: 100%; cursor: pointer; margin-top: 10px; font-family: inherit; }
.loi { color: #c5221f; font-size: var(--fs-4); margin-top: 12px; min-height: 1.4em; }
/* ---------- Trang chủ V1 + khối Câu Động Lực (thiết kế 09_trang_chu) ---------- */
.cdl,.cdl *{box-sizing:border-box}.cdl svg{display:block;max-width:none}.cdl{position:relative;border-radius:14px;background:#fbf8f1;border:1px solid #e9dfcb;overflow:hidden;color:#1c1917;padding:14px 14px 10px 54px;min-height:196px;display:flex;flex-direction:column;text-align:left}.cdl .cdl-n{position:absolute;inset:0;pointer-events:none;opacity:.55;background:url("data:image/svg+xml;utf8,")}.cdl .cdl-mo{position:absolute;pointer-events:none}.cdl .cdl-mount{left:0;right:0;bottom:0;width:100%;height:84px}.cdl .cdl-truc{right:30px;bottom:0;width:146px;height:104px}.cdl .cdl-dao{right:40px;bottom:4px;width:186px;height:71px}.cdl .cdl-nguyet{right:58px;bottom:0;width:112px;height:120px}.cdl .cdl-an{left:-8px;right:-8px;bottom:-6px;height:86px}.cdl .cdl-lien{right:46px;bottom:-2px;width:146px;height:104px}.cdl .cdl-strip{position:absolute;left:12px;top:12px;z-index:2;writing-mode:vertical-rl;white-space:nowrap;background:var(--canh);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;padding:12px 6px 10px;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,.15)}.cdl .cdl-q{position:relative;z-index:1;margin:0;font-family:serif!important;font-weight:500!important;font-size:16.5px!important;line-height:1.55!important;font-style:normal!important;color:#1c1917!important}.cdl .cdl-c{position:relative;z-index:1;margin:8px 0 0;font-size:10.5px!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--canh-chu)!important;font-style:normal!important;line-height:1.4!important}.cdl .cdl-f{position:relative;z-index:1;display:flex;align-items:flex-end;margin-top:auto;padding:10px 74px 0 0;min-height:44px}.cdl .cdl-a{font-family:serif!important;font-style:italic!important;font-size:var(--fs-3)!important;color:#7c6d6a!important;line-height:1.4!important}.cdl .cdl-dau{position:absolute;right:14px;bottom:10px;z-index:1}@media (max-width:340px){.cdl{padding-left:48px}.cdl .cdl-q{font-size:15.5px!important}}.cdl .cdl-sac{position:absolute;inset:0;pointer-events:none;z-index:0}
/* ===== TRANG CHỦ V1 (thiết kế 09_trang_chu §4) — gói trong #manChinh ===== */
#manChinh { display: flex; flex-direction: column; gap: 11px; }
#manChinh > * { flex-shrink: 0; }
#manChinh .chao { display: flex; align-items: center; gap: 10px; padding: 2px 2px 0; background: none; border: 0; }
#manChinh .ch-av { width: 34px; height: 34px; border-radius: 50%; background: var(--canh);
color: #fff; font-size: var(--fs-4); font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#manChinh .ch-t { font-size: var(--fs-5); font-weight: 800; letter-spacing: .1px; }
/* Mục 22 TV chốt: nút Thoát đo được 55×26px — hụt sàn chạm gần một nửa. */
#manChinh .ch-thoat { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--cham);
border: 0; box-shadow: none; opacity: .70; background: transparent; color: var(--muted);
font-size: var(--fs-2); font-weight: 700; padding: 0 13px; border-radius: 20px; font-family: inherit; }
/* THẺ SỔ — S3 "canh giờ chủ đạo, chấm son" (§3.12) + C4/C3 (§3.14) + M1 (§3.15).
🔴 CAO CỐ ĐỊNH 96px ở MỌI tình huống: nút chính mà lúc to lúc nhỏ thì mắt phải tìm lại vị trí
mỗi lần mở app (đúng luật LESSONS §6 đã áp cho khối tranh 196px).
🪤 Chiều cao do CSS giữ, KHÔNG do dòng rỗng ` ` giữ — chèn dòng rỗng thì thẻ vẫn 96px
nhưng tên bị đẩy xuống nửa dưới, nhìn lệch. Tầng trên rỗng thì BỎ HẲN dòng đó. */
#manChinh .hero { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: none;
border-radius: 16px; padding: 0 13px; height: 96px; color: #fff;
background: linear-gradient(135deg, #473f26, #504113);
position: relative; overflow: hidden; font-family: inherit; }
#manChinh .hero:after { content: ""; position: absolute; right: -34px; top: -34px; width: 126px; height: 126px;
border-radius: 50%; background: rgba(255,255,255,.10); }
/* Ô biểu tượng LÀ chấm son — mảng đỏ duy nhất còn lại của cả màn (luật ngân sách đỏ).
⛔ Viền sáng BẮT BUỘC, không phải trang trí: sau khi cân độ sáng cảm nhận cho 12 canh, chấm son
trùng độ sáng với mặt thẻ ở giờ Sửu (1,00:1) và cạnh tan vào nền. Có viền ⇒ ≥ 3,21:1 cả 12 canh. */
#manChinh .hero-ic { width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; background: var(--son);
box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.62);
display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
#manChinh .hero-ic svg { width: 25px; height: 25px; display: block; }
#manChinh .hero-noi { position: relative; z-index: 1; display: flex; flex-direction: column;
justify-content: center; flex: 1 1 auto; min-width: 0; }
#manChinh .hero .tren { display: block; font-size: var(--fs-3); font-weight: 700; opacity: .92; line-height: 1.25;
margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#manChinh .hero .duoi { display: block; font-size: 21px; font-weight: 800; line-height: 1.15;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* C3 — nhật ký rời khỏi dòng chữ, thành huy hiệu số cạnh mũi tên. Chuỗi 0 thì huy hiệu MỜ và
hiện dấu `+`: lời mời, không phải lời chê (đừng bao giờ viết "0 ngày"). */
#manChinh .hero-hh { flex: none; position: relative; z-index: 1; display: flex; align-items: center; gap: 4px;
background: rgba(255,255,255,.20); border-radius: 999px; padding: 5px 10px; font-size: var(--fs-3); font-weight: 800; }
#manChinh .hero-hh.mo { opacity: .62; }
/* M1 — mũi tên trong vòng tròn 44px: vùng chạm từ VÔ HÌNH thành nhìn thấy được. */
#manChinh .hero-mui { flex: none; position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
background: rgba(255,255,255,.20); display: flex; align-items: center; justify-content: center; }
#manChinh .hero-mui svg { width: 20px; height: 20px; display: block; }
/* Máy hẹp: bốn thứ trong thẻ (chấm son · chữ · huy hiệu · vòng mũi tên) đều CỐ ĐỊNH bề ngang,
nên chữ là thứ duy nhất bị ép. Đo ở 340px: chữ còn 142px, "12 việc chờ bạn" 17px = 129px ⇒ vừa.
Chấm son rút 44 → 40 (nó là dấu nhận diện, không phải nút — vùng chạm là CẢ thẻ). */
@media (max-width: 360px) {
#manChinh .hero { gap: 8px; padding: 0 10px; }
#manChinh .hero-ic { width: 40px; height: 40px; border-radius: 12px; }
#manChinh .hero-ic svg { width: 22px; height: 22px; }
#manChinh .hero .duoi { font-size: 17px; }
#manChinh .hero .tren { font-size: var(--fs-2); }
#manChinh .hero-hh { padding: 4px 7px; font-size: var(--fs-2); }
}
/* Máy rất hẹp (iPhone SE 320px): số việc hai chữ số ("12 việc chờ bạn") còn hụt 7px. Một nấc nữa. */
@media (max-width: 330px) { #manChinh .hero .duoi { font-size: var(--fs-5); } }
#manChinh .the { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
#manChinh .the-dau { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none;
border: 0; padding: 12px 13px; font-family: inherit; color: inherit; }
#manChinh .the.mo .the-dau, #manChinh .the-dau.tinh { border-bottom: 1px solid #f0f0f0; }
#manChinh .ic-vien { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; }
#manChinh .ic-vien svg { width: 19px; height: 19px; display: block; }
/* Luật NGÂN SÁCH ĐỎ (§3.12): một màn chỉ MỘT mảng đỏ đặc + MỘT chấm đỏ nhỏ. Trên trang chủ hai suất
ấy đã thuộc về chấm son của thẻ Sổ và dấu son trong tranh — nên ô biểu tượng "Tiến Độ" lùi về mực.
Giá trị lấy đúng bảng `icDo` của phương án C trong `cong_thuc\bang_mau.js`. */
#manChinh .ic-do { background: #f0ede8; color: #4a4038; }
#manChinh .ic-tim { background: #f2eff8; color: #5d4a8c; }
#manChinh .the-noi { display: block; min-width: 0; }
#manChinh .the-noi .tt { display: block; font-size: var(--fs-4); font-weight: 800; letter-spacing: .1px; }
#manChinh .the-noi .ph { display: block; font-size: var(--fs-2); color: var(--muted); margin-top: 2px; }
#manChinh .the-noi .ph b { color: var(--canh-chu); }
#manChinh .xoay { margin-left: auto; color: #bdbdbd; flex-shrink: 0; }
#manChinh .xoay svg { width: 19px; height: 19px; display: block; }
#manChinh .xoay.len { transform: rotate(180deg); color: #8d8d8d; }
#manChinh .tin { padding: 11px 13px 9px; }
#manChinh .luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 11px 13px 13px; }
#manChinh .o { position: relative; border: 1px solid var(--border); border-radius: 13px; padding: 13px 8px 11px;
background: #fff; font-family: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 8px; }
#manChinh .o-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
#manChinh .o-ic svg { width: 23px; height: 23px; display: block; }
#manChinh .o-t { font-size: var(--fs-2); font-weight: 700; line-height: 1.28; text-align: center; }
#manChinh .o-quay .o-ic { background: #fdf0e0; color: #b3600f; }
#manChinh .o-hang .o-ic { background: #eaf0fb; color: #2f4f96; }
#manChinh .o-nop .o-ic { background: #eaf5ec; color: #2e7d32; }
#manChinh .o-nk .o-ic { background: #f6eef2; color: #8c3a5e; }
#manChinh .o-hu { position: absolute; top: 8px; right: 9px; min-width: 19px; height: 19px; border-radius: 20px;
background: var(--red); color: #fff; font-size: var(--fs-1); font-weight: 800; display: flex; align-items: center;
justify-content: center; padding: 0 5px; }
#manChinh .o.cho { background: #fafafa; border-style: dashed; }
#manChinh .o.cho .o-ic { filter: grayscale(.55); opacity: .8; }
#manChinh .o.cho .o-t { color: #8a8178; }
/* @dot1_don_giao_dien §1 — khối "sắp có" thu gọn. Chiếm trọn hàng của lưới 2 cột, nếu không nó
thành một ô lệch cạnh ô thật. Sàn chạm 44px cho thanh mở/đóng (A-44). Cỡ chữ lấy từ bảng
--fs-*, KHÔNG gõ số px mới — cổng phát hành chặn "cỡ chữ thứ 23". */
#manChinh .ud-sapco { grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: 13px;
background: #fafafa; }
#manChinh .ud-sapco > summary { list-style: none; cursor: pointer; min-height: 44px;
display: flex; align-items: center; gap: 8px; padding: 0 13px;
/* @moc_chu13 — cỡ chữ 13px (--fs-3), KHÔNG dùng --fs-2 (12px): cổng đếm "phần tử chữ dưới
13px" theo bánh cóc, thêm 2 phần tử 12px là mốc XẤU ĐI và cổng chặn. Sàn chữ đọc là 13px. */
font-size: var(--fs-3); font-weight: 700; color: #8a8178; }
#manChinh .ud-sapco > summary::-webkit-details-marker { display: none; }
#manChinh .ud-sapco > summary .ud-mui { margin-left: auto; transition: transform .18s; }
#manChinh .ud-sapco[open] > summary .ud-mui { transform: rotate(180deg); }
#manChinh .ud-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 9px 9px; }
/* @an_the_ung_dung_khi_rong — thẻ "Ứng Dụng" tự ẩn khi trong lưới KHÔNG còn ô nào chạm được
(`.hidden` = chưa mở quyền; `[disabled]` = ô "sắp có"). Nhân viên thường rơi vào đúng cảnh
này sau khi ô "Nhật ký cá nhân" chuyển hẳn vào tab Sổ. Thẻ hiện lại TỰ ĐỘNG khi có ô đầu
tiên bỏ `hidden` — không nơi nào phải nhớ gọi thêm hàm. Trình duyệt không hiểu `:has()`
bỏ qua luật ⇒ thẻ vẫn hiện như cũ, không ai mất ô. */
#manChinh .the-ud:not(:has(.luoi .o:not(.hidden):not([disabled]))) { display: none; }
#manChinh .o-ngoai { position: absolute; top: 7px; right: 7px; font-size: var(--fs-1); font-weight: 700;
color: #655f58; background: #ebe7e1; border-radius: 20px; padding: 1px 7px 2px; line-height: 1.45; }
#manChinh .giai { background: #fff; border: 1px solid #ecdfc4; border-radius: 14px; overflow: hidden; }
#manChinh .giai-tom { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; border: 0;
font-family: inherit; color: inherit; padding: 12px 13px; background: linear-gradient(100deg, #fffdf6, #fdf4e4); }
#manChinh .g-ic { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--red), #c9971f);
color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#manChinh .g-ic svg { width: 19px; height: 19px; display: block; }
#manChinh .g-noi { display: block; min-width: 0; }
#manChinh .g-noi .t { display: block; font-size: var(--fs-3); font-weight: 800; }
#manChinh .g-noi .s { display: block; font-size: var(--fs-1); color: #8a7a4f; margin-top: 2px; }
#manChinh .giai-tom .so { margin-left: auto; text-align: right; font-size: var(--fs-4); font-weight: 900; line-height: 1;
background: linear-gradient(135deg, var(--red), #c9971f); -webkit-background-clip: text; background-clip: text;
color: transparent; white-space: nowrap; }
#manChinh .giai-tom .so i { display: block; font-size: var(--fs-1); font-style: normal; font-weight: 800; letter-spacing: .14em;
color: #a8894a; -webkit-text-fill-color: #a8894a; margin-top: 3px; }
#manChinh .giai.mo .giai-tom { border-bottom: 1px solid #f4ead6; }
#manChinh .giai-mo { padding: 14px 13px 15px; position: relative; }
#manChinh .giai-mo .duong { position: absolute; left: 32px; top: 26px; bottom: 26px; width: 2px;
background: linear-gradient(to bottom, var(--red), #c9971f); }
#manChinh .giai-d { display: flex; align-items: flex-start; gap: 12px; position: relative; margin-bottom: 13px; }
#manChinh .giai-d:last-child { margin-bottom: 0; }
#manChinh .giai-d .vg { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center;
justify-content: center; flex-shrink: 0; z-index: 1; background: #fff; border: 2px solid var(--red); color: var(--red); }
#manChinh .giai-d .vg svg { width: 19px; height: 19px; display: block; }
#manChinh .giai-d.g2 .vg { background: var(--red); border-color: var(--red); color: #fff; }
#manChinh .giai-d.g3 .vg { background: linear-gradient(135deg, var(--red), #c9971f); border: none; color: #fff; }
#manChinh .giai-d .lb { font-size: var(--fs-1); font-weight: 600; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; }
#manChinh .giai-d .rw { margin-top: 3px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
#manChinh .giai-d .nm { font-size: var(--fs-4); font-weight: 700; }
#manChinh .giai-d.g2 .nm { font-size: var(--fs-5); }
#manChinh .giai-d.g3 .nm { font-size: var(--fs-5); font-weight: 800; }
#manChinh .giai-d .mn { font-size: var(--fs-3); font-weight: 700; color: var(--red); }
#manChinh .giai-d.g3 .mn { font-weight: 800; background: linear-gradient(135deg, var(--red), #c9971f);
-webkit-background-clip: text; background-clip: text; color: transparent; }
/* ═══ KHỐI GIẢI THƯỞNG ĐỔI THEO BUỔI (thiết kế `_THIET_KE\14_khoi_giai_thuong\`) ═══
Bốn buổi = bốn bộ luật CSS trên CÙNG MỘT khối DOM. JS chỉ đặt data-buoi + --gt-tia.
Giá trị mặc định trong HTML là "trua" — nhánh dự phòng khi JS chưa chạy (nguyên tắc 17). */
#manChinh .giai { position: relative; }
#manChinh .giai > .tia, #manChinh .giai > .quang,
#manChinh .giai > .sao-lon, #manChinh .giai > .vien-kim { display: none; position: absolute; pointer-events: none; }
#manChinh .giai > .tia { inset: 0; z-index: 1; }
#manChinh .giai-tom, #manChinh .giai-mo { position: relative; z-index: 2; }
#manChinh .giai .vg-ic { display: flex; align-items: center; justify-content: center; }
#manChinh .giai .vg-so { display: none; font-weight: 900; font-size: var(--fs-4); }
#manChinh .giai .trien-hang { display: none; margin-left: auto; gap: 5px; align-items: center; }
#manChinh .giai .vg.vg-sao svg { width: 22px; height: 22px; display: block; }
/* ── SANG · V5 · Trục khát vọng (Nhiệt đới) ── */
#manChinh .giai[data-buoi="sang"] > .tia { display: block; }
#manChinh .giai[data-buoi="sang"] { border-color:#cbe8e2;background:linear-gradient(115deg,#f6fcfa,#eef9f5) }
#manChinh .giai[data-buoi="sang"] .giai-tom { background:none }
#manChinh .giai[data-buoi="sang"].mo .giai-tom { border-bottom:1px solid #dcefe9 }
#manChinh .giai[data-buoi="sang"] .g-ic { background:linear-gradient(135deg,#0e8f83,#f0a52e);color:#fff }
#manChinh .giai[data-buoi="sang"] .g-noi .t { color:#22333b }
#manChinh .giai[data-buoi="sang"] .g-noi .s { color:#46736c }
#manChinh .giai[data-buoi="sang"] .giai-tom .so { background:linear-gradient(120deg,#0e8f83,#f0a52e);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--fs-5) }
#manChinh .giai[data-buoi="sang"] .giai-tom .so i { color:#63938c;-webkit-text-fill-color:#63938c }
#manChinh .giai[data-buoi="sang"] .xoay { color:#9dc3bb }
#manChinh .giai[data-buoi="sang"] .giai-mo .duong { left:31px;width:3px;border-radius:3px;background:linear-gradient(to bottom,#0e8f83 0%,#4aa66a 46%,#f0a52e 100%) }
#manChinh .giai[data-buoi="sang"] .giai-d .vg { background:#fff;border:2.5px solid #0e8f83;color:#0e8f83 }
#manChinh .giai[data-buoi="sang"] .giai-d.g2 .vg { background:#fff;border-color:#4aa66a;color:#3c9a5f }
#manChinh .giai[data-buoi="sang"] .giai-d.g3 .vg { background:linear-gradient(135deg,#f0a52e,#e08a12);border:none;color:#fff;box-shadow:0 2px 9px rgba(240,165,46,.42) }
#manChinh .giai[data-buoi="sang"] .giai-d .lb { color:#4f6f69 }
#manChinh .giai[data-buoi="sang"] .giai-d .nm { color:#22333b }
#manChinh .giai[data-buoi="sang"] .giai-d .mn { color:#0a7268 }
#manChinh .giai[data-buoi="sang"] .giai-d.g2 .mn { color:#2f7c4b }
#manChinh .giai[data-buoi="sang"] .giai-d.g3 .mn { background:none;color:#9c6205;-webkit-text-fill-color:#9c6205;font-size:var(--fs-5) }
#manChinh .giai[data-buoi="sang"] .tia { background:linear-gradient(130deg,var(--gt-tia) 0%,rgba(255,255,255,0) 58%);opacity:.16 }
/* ── TRUA · V3 · Ngôi sao dẫn đường ── */
#manChinh .giai[data-buoi="trua"] > .quang, #manChinh .giai[data-buoi="trua"] > .sao-lon { display: block; }
#manChinh .giai[data-buoi="trua"] { border-color:#ecdfc4;background:linear-gradient(100deg,#fffdf6,#fdf3e2) }
#manChinh .giai[data-buoi="trua"] .sao-lon { position:absolute;right:-14px;top:-16px;width:120px;height:120px;color:#c9971f;opacity:.06;z-index:0 }
#manChinh .giai[data-buoi="trua"] .quang { position:absolute;right:6px;top:2px;width:104px;height:104px;border-radius:50%;z-index:0 } /* bỏ hiệu ứng làm mờ 1px — luật G3 cm1 (giật máy yếu); gradient đã mờ mép sẵn */
#manChinh .giai[data-buoi="trua"] .giai-tom .so { font-size:var(--fs-5) }
#manChinh .giai[data-buoi="trua"] .giai-mo .duong { left:32px;background:linear-gradient(to bottom,#c9971f,var(--red)) }
#manChinh .giai[data-buoi="trua"] .giai-d.g3 .vg { background:linear-gradient(135deg,#f0b429,#c9971f);border:none;color:#fff;box-shadow:0 2px 10px rgba(201,151,31,.45) }
#manChinh .giai[data-buoi="trua"] .giai-d.g3 .vg svg { width:21px;height:21px }
#manChinh .giai[data-buoi="trua"] .giai-d.g3 .nm { background:linear-gradient(135deg,#8f6404,#a81f24);-webkit-background-clip:text;background-clip:text;color:transparent }
#manChinh .giai[data-buoi="trua"] .nhay { position:absolute;width:7px;height:7px;color:#e8b93c }
#manChinh .giai[data-buoi="trua"] .quang { background:radial-gradient(circle at 50% 50%, var(--gt-tia) 0%, rgba(255,255,255,0) 68%);opacity:.30 }
/* ── CHIEU · V4 · Ba con dấu son ── */
#manChinh .giai[data-buoi="chieu"] > .tia { display: block; }
#manChinh .giai[data-buoi="chieu"] .trien-hang { display: flex; }
#manChinh .giai[data-buoi="chieu"] .giai-tom .so { display: none; }
#manChinh .giai[data-buoi="chieu"] .giai-d .vg-so { display: block; }
#manChinh .giai[data-buoi="chieu"] .giai-d.g1 .vg-ic,
#manChinh .giai[data-buoi="chieu"] .giai-d.g2 .vg-ic { display: none; }
#manChinh .giai[data-buoi="chieu"] { border-color:#e9dfcb;background:#fdfbf5 }
#manChinh .giai[data-buoi="chieu"] .giai-tom { background:none }
#manChinh .giai[data-buoi="chieu"].mo .giai-tom { border-bottom:1px solid #eee3cd }
#manChinh .giai[data-buoi="chieu"] .g-ic { background:none;border:2px solid var(--son);color:var(--son);border-radius:7px }
#manChinh .giai[data-buoi="chieu"] .giai-tom .so { background:none;color:var(--son);-webkit-text-fill-color:var(--son) }
#manChinh .giai[data-buoi="chieu"] .giai-tom .so i { color:#9a7f52;-webkit-text-fill-color:#9a7f52 }
#manChinh .giai[data-buoi="chieu"] .trien-hang { margin-left:auto;display:flex;gap:5px;align-items:center }
#manChinh .giai[data-buoi="chieu"] .trien { width:26px;height:26px;border-radius:6px;border:2px solid var(--son);color:var(--son);display:flex;align-items:center; justify-content:center;font-size:var(--fs-2);font-weight:900;position:relative;background:#fdf6ee }
#manChinh .giai[data-buoi="chieu"] .trien::after { content:"";position:absolute;inset:2px;border:1px solid var(--son);border-radius:3px;opacity:.45 }
#manChinh .giai[data-buoi="chieu"] .giai-mo .duong { display:none }
#manChinh .giai[data-buoi="chieu"] .giai-d { align-items:center }
#manChinh .giai[data-buoi="chieu"] .giai-d .vg, #manChinh .giai[data-buoi="chieu"] .giai-d.g2 .vg, #manChinh .giai[data-buoi="chieu"] .giai-d.g3 .vg { width:40px;height:40px;border-radius:8px;border:2.5px solid var(--son); background:#fdf6ee;color:var(--son);font-size:var(--fs-4);font-weight:900;position:relative }
#manChinh .giai[data-buoi="chieu"] .giai-d .vg::after { content:"";position:absolute;inset:3px;border:1px solid var(--son);border-radius:4px;opacity:.4 }
#manChinh .giai[data-buoi="chieu"] .giai-d.g3 .vg { background:var(--son);color:#fdf6ee }
#manChinh .giai[data-buoi="chieu"] .giai-d .vg.vg-sao svg { width:22px;height:22px;display:block }
#manChinh .giai[data-buoi="chieu"] .giai-d.g3 .vg::after { border-color:#fdf6ee;opacity:.55 }
#manChinh .giai[data-buoi="chieu"] .giai-d .mn { color:var(--son) }
#manChinh .giai[data-buoi="chieu"] .giai-d.g3 .mn { background:none;color:var(--son);-webkit-text-fill-color:var(--son) }
#manChinh .giai[data-buoi="chieu"] .tia { background:linear-gradient(200deg,var(--gt-tia) 0%,rgba(255,255,255,0) 62%);opacity:.16 }
/* ── TOI · V2 · Tấm thẻ kim loại ── */
#manChinh .giai[data-buoi="toi"] > .tia, #manChinh .giai[data-buoi="toi"] > .vien-kim { display: block; }
#manChinh .giai[data-buoi="toi"] { border:1px solid #6f5628;background:linear-gradient(150deg,#2c2219 0%,#3b2e1f 52%,#241b13 100%); box-shadow:0 4px 14px rgba(60,44,16,.22) }
#manChinh .giai[data-buoi="toi"] .giai-tom { background:none;border-bottom:0 }
#manChinh .giai[data-buoi="toi"].mo .giai-tom { border-bottom:1px solid rgba(217,180,90,.28) }
#manChinh .giai[data-buoi="toi"] .g-ic { background:linear-gradient(135deg,#e8c46e,#c9971f);color:#2c2219 }
#manChinh .giai[data-buoi="toi"] .g-noi .t { color:#f7e8c6 }
#manChinh .giai[data-buoi="toi"] .g-noi .s { color:#b09a6c }
#manChinh .giai[data-buoi="toi"] .giai-tom .so { background:linear-gradient(135deg,#f8dfa0,#d9ad4e);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:var(--fs-5) }
#manChinh .giai[data-buoi="toi"] .giai-tom .so i { color:#a89263;-webkit-text-fill-color:#a89263 }
#manChinh .giai[data-buoi="toi"] .xoay { color:#8d7a4f }
#manChinh .giai[data-buoi="toi"] .giai-mo .duong { background:linear-gradient(to bottom,#d9b45a,#8a6a24);opacity:.55 }
#manChinh .giai[data-buoi="toi"] .giai-d .vg { background:rgba(255,255,255,.05);border:2px solid #d9b45a;color:#e8c46e }
#manChinh .giai[data-buoi="toi"] .giai-d.g2 .vg { background:rgba(217,180,90,.16);border-color:#e8c46e;color:#f3dda3 }
#manChinh .giai[data-buoi="toi"] .giai-d.g3 .vg { background:linear-gradient(135deg,#e8c46e,#c9971f);border:none;color:#2c2219 }
#manChinh .giai[data-buoi="toi"] .giai-d .lb { color:#a3906d }
#manChinh .giai[data-buoi="toi"] .giai-d .nm { color:#f7edd8 }
#manChinh .giai[data-buoi="toi"] .giai-d .mn { color:#e8c46e }
#manChinh .giai[data-buoi="toi"] .giai-d.g3 .mn { background:linear-gradient(135deg,#f8dfa0,#d9ad4e);-webkit-background-clip:text;background-clip:text;color:transparent }
#manChinh .giai[data-buoi="toi"] .vien-kim { position:absolute;inset:1px;border-radius:13px;border:1px solid rgba(232,196,110,.30);pointer-events:none;z-index:3 }
#manChinh .giai[data-buoi="toi"] .tia { background:linear-gradient(115deg,transparent 26%,var(--gt-tia) 46%,transparent 64%);opacity:.38 }
#manChinh .cdl-lui { border-left: 4px solid var(--red); padding: 10px 0 10px 12px; font-style: italic; color: #555;
background: var(--card); border-radius: 0 12px 12px 0; }
#manChinh .cdl-lui-a { margin-top: 8px; font-size: var(--fs-2); font-style: normal; opacity: .75; }
@media (max-width: 359px) {
#manChinh .hero .t { font-size: var(--fs-6); }
#manChinh .o-t { font-size: var(--fs-2); }
#manChinh .giai-tom .so { font-size: var(--fs-3); }
}
.empty-note { text-align: center; color: var(--muted); padding: 30px 10px; font-size: var(--fs-4); }
.bt-grp { border-left: 5px solid #bdbdbd; padding-left: 11px; margin-bottom: 10px; }
/* Dòng nhãn nay là NÚT chính của bảng tin (mọi nhóm mặc định gọn), nên phải đủ cao để
bấm bằng ngón cái: 13px chữ trần trụi cho vùng chạm ~18px — hụt so với mốc 44px. */
.bt-gh { font-size: var(--fs-3); font-weight: 800; cursor: pointer; padding: 12px 2px;
min-height: 44px; box-sizing: border-box; display: flex; align-items: center;
gap: 6px; -webkit-tap-highlight-color: rgba(0,0,0,.06); }
.bt-gh:active { background: #f2f2f2; border-radius: 8px; }
.bt-mui { margin-left: auto; font-size: var(--fs-3); }
.bt-body { padding-bottom: 6px; }
.bt-card { background: #fff; border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; }
.bt-ten { font-weight: 700; font-size: var(--fs-3); line-height: 1.4; }
.bt-who { color: var(--muted); font-size: var(--fs-2); margin-top: 2px; }
.bt-who b { color: var(--text); font-weight: 700; }
.bt-giai { color: #8d6e00; font-weight: 700; }
.bt-chip { font-size: var(--fs-2); font-weight: 700; color: #8d6e00; background: #fff8e1; border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
.bt-ls { display: none; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.bt-ls-luc { font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.bt-ls-nd { font-size: var(--fs-3); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
/* ---------- Sổ của tôi + chi tiết (chép y SoThanhTuuUI.html) ---------- */
/* Sàn chạm 44px (§3.13 "ba việc nên làm dù chọn cách nào"): trước đây cao 31px. */
/* `display: flex` (khối) + `width: fit-content`, KHÔNG dùng inline-flex: inline-flex cho phần tử đứng sau
nằm CÙNG HÀNG — chat "HAO HUT AI" đo được nút "Thoát màn quản lý" bị đẩy sang lề 174px vì nút
"📜 Xem nhật ký thao tác" mới thêm nằm cạnh nó (2d ca 40f). Khối thì mỗi nút một dòng, đúng ý cũ. */
.stt-back { display: flex; width: fit-content; align-items: center; background: none; border: none; color: var(--red);
font-weight: 700; font-size: var(--fs-3); cursor: pointer; min-height: 44px; padding: 0 8px 0 0; margin: 0 0 2px -2px;
font-family: inherit; white-space: normal; max-width: 100%; }
/* ---------- N4 (04/09): hàng THƯ MỤC trong màn Sổ ----------
TV nêu 11:5x 04/09 (`_DE_XUAT\trao-viec\05` §1): Trao Việc là một thư mục trong Sổ, ngang hàng
Nhật Ký Công Việc / Nhật Ký Cá Nhân. Đợt 1 (đường B) ba thư mục này là CỨNG — không có bảng
`stt_thu_muc`, không tạo/đổi tên/xoá được; đó là N7. Hai thư mục hệ thống vốn "không cần dòng nào"
(MO_TA §2), nên hàng này chạy được với 0 bảng, 0 cửa mới.
🔴 Danh sách việc VẪN nằm ngay dưới ⇒ mở Sổ vẫn là 2 BƯỚC, không thành 3 (MO_TA §1). */
.tm-hang { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; -webkit-tap-highlight-color: transparent;
min-height: 78px; } /* @thu_muc_78_0609: 2 dòng cần 76.6px; cùng sàn78. Nguyên tắc 14d: mọi hàng trong một danh sách cao bằng nhau.
76 chứ không 72: --fs-2 (12px) làm dòng phụ hai dòng cao hơn 72 một chút. */
.tm-hang .tm-ico { font-size: 22px; width: 30px; text-align: center; flex: none; }
.tm-hang .tm-vong { width: 40px; height: 40px; flex: none; }
.tm-hang .tm-vong svg { display: block; width: 40px; height: 40px; }
.tm-hang .tm-ten { font-weight: 700; font-size: var(--fs-4); color: var(--text); }
/* Kẹp ĐÚNG 2 dòng: ở khổ 320px câu này từng xuống 3 dòng và đẩy riêng hàng ấy cao 90px. */
.tm-hang .tm-phu { font-size: var(--fs-2); color: var(--muted); margin-top: 2px; line-height: 1.4;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tm-hang .tm-mui { margin-left: auto; color: var(--muted); font-size: var(--fs-6); flex: none; }
.tm-hang.tm-day { border-color: var(--red); }
.tm-hang .tm-huy { display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
border-radius: 999px; background: var(--red); color: #fff; font-size: var(--fs-2); font-weight: 800; text-align: center; }
.tm-hang .tm-cham { display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: #f0b400; }
/* N7 */
.tm-hang.mo { border-color: var(--red); background: #fffafa; }
/* Sàn chạm 44px (nhóm 1–5 TV duyệt 05/09): trước đây 16px + padding 4/6 ⇒ vùng chạm ~24×24. */
.tm-ghim { border: 0; background: transparent; font-size: var(--fs-5); min-width: 44px; min-height: 44px;
display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 -8px;
cursor: pointer; opacity: .28; flex: none; }
/* Chỉ đổi độ mờ .28 → 1 trên một emoji đỏ nền kem là quá nhẹ để thấy ngoài nắng. Dấu hiệu thật
là cái NỀN TRÒN: nút đang ghim trông như một công tắc đã bật. Chữ ("MỞ THẲNG") thì tốn bề ngang
và ở khổ 320px nó đẩy dòng phụ xuống hai dòng, làm hàng cao so le (nguyên tắc 14d). */
.tm-ghim.co { opacity: 1; background: #fdecea; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #f0c3c3; }
.tm-dem { font-size: var(--fs-2); color: var(--muted); margin-left: auto; flex: none; }
.tm-nut-hang { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 2px 0 12px; }
.tm-nut { border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px;
padding: 6px 12px; font-size: var(--fs-3); min-height: var(--cham); font-family: inherit; cursor: pointer; }
.tm-nut.chon { background: var(--red); color: #fff; border-color: var(--red); font-weight: 700; }
.tm-o-ten { display: flex; gap: 6px; margin-bottom: 8px; }
.tm-o-ten input { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px;
font-size: var(--fs-5); font-family: inherit; }
.tm-o-ten button { border: 0; background: var(--red); color: #fff; border-radius: 10px; padding: 9px 14px;
font-size: var(--fs-4); font-weight: 700; font-family: inherit; cursor: pointer; }
.tm-sua-nut { border: 1px solid var(--border); background: transparent; border-radius: 8px; padding: 4px 8px;
font-size: var(--fs-2); font-family: inherit; cursor: pointer; flex: none; margin-left: 4px; }
.tm-viec-hang { display: flex; gap: 6px; align-items: center; margin: -4px 0 10px; flex-wrap: wrap; }
.tm-viec-hang select { border: 1px solid var(--border); border-radius: 999px; padding: 5px 8px;
font-size: var(--fs-5); font-family: inherit; background: var(--card); }
.stt-tieu-de { font-weight: 800; font-size: var(--fs-6); color: var(--red); margin: 0 0 4px; }
.stt-chi-xem { font-size: var(--fs-2); color: #8d6e00; background: #fff8e1; border: 1px solid #f0d98c; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; line-height: 1.5; }
.stt-trongtam-note { font-size: var(--fs-2); color: #8d6e00; background: #fff8e1; border: 1px solid #f0d98c; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
/* ---------- T5 (§3.13, TV chốt 05/09): một dòng tóm tắt tháng thay cho tiêu đề màn ----------
Tiêu đề "📒 Sổ Thành Tựu của tôi" đã BỎ: tên màn đã có ở nút lui và ở chính thẻ vừa bấm. */
.so-tomtat { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; background: var(--card);
border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; margin: 0 0 10px; }
.so-tomtat .thang { font-size: var(--fs-4); font-weight: 800; color: var(--text); margin-right: 2px; }
.so-tomtat .o { font-size: var(--fs-2); font-weight: 700; color: var(--muted); background: #f3f2ef;
border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.so-tomtat .o.sao { color: #8d6e00; background: #fff8e1; }
.so-hang-nut { display: flex; align-items: stretch; gap: 8px; margin: 4px 0 14px; }
.so-hang-nut .stt-luu-btn { flex: 1 1 auto; width: auto; margin: 0; }
.so-hang-nut .stt-status-btn { flex: none; }
/* Hai mục của T5. Nhãn mục là chữ nhỏ in hoa — nó phân đoạn, không phải tiêu đề để đọc. */
.so-nhom { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 8px; }
.so-nhom .nh { font-size: var(--fs-2); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--red-dark); }
.so-nhom .dem { margin-left: auto; font-size: var(--fs-2); color: var(--muted); }
.so-nhom + .so-nhom-sau { margin-top: 14px; }
/* Thay chip `CÁ NHÂN` 10,5px — bản đo đã kết luận cỡ ấy không đọc được. */
.stt-rieng { color: var(--muted); }
/* --- 2d-2: ba công tắc một ô --- */
/* --- 2d-3: ô nhập. Cỡ chữ 16px là BẮT BUỘC (nguyên tắc 15): dưới ngưỡng đó iPhone tự
phóng to trang khi chạm vào ô. lang="vi" + tắt tự sửa ở nguyên tắc 1d.
KHÔNG có đoạn JS nào đổi chiều cao ô trong lúc gõ (nguyên tắc 1c) — bộ gõ Telex giữ
một vùng chữ đang soạn bên trong ô, đổi hình dạng ô lúc đó là làm hỏng dấu tiếng Việt. --- */
.stt-o { width: 100%; box-sizing: border-box; font-family: inherit; font-size: var(--fs-5); line-height: 1.5;
color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 8px;
padding: 10px 12px; min-height: 76px; resize: vertical; }
.stt-o:focus { outline: none; border-color: var(--red); }
.stt-o-nho { min-height: 56px; }
.stt-o-nhan { display: block; font-size: var(--fs-3); font-weight: 700; color: var(--text); margin: 0 0 6px; line-height: 1.4; }
/* Ô chọn "Cá nhân" ở màn ghi việc mới — chép y luật trình bày của app cũ (SoThanhTuuUI.html) */
.stt-canhan-o { display: flex; align-items: flex-start; gap: 10px; margin: -2px 0 14px;
padding: 11px 12px; border: 1px solid #e0d7bf; border-radius: 9px; background: #fffdf5;
cursor: pointer; font-size: var(--fs-3); line-height: 1.5; color: #6b5a2a; }
.stt-canhan-o input { width: 18px; height: 18px; margin-top: 1px; flex: none; accent-color: #8d6e00; }
.stt-canhan-o b { color: #5b4a1c; }
/* --- 2d-5: dải ảnh, khối tải, màn xem --- */
.stt-cc-moc { font-size: var(--fs-2); font-weight: 700; color: var(--muted); margin: 12px 0 6px; }
.stt-cc-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 7px; }
/* Ô nháp TO HƠN ô đã lưu: đây là chỗ người ta nhìn để quyết bỏ ảnh nào — 72px không đủ để thấy
ảnh nào chụp trượt, mà bỏ nhầm thì phải chụp lại. Nút ✕ 24px trên ô 72px cũng che mất một góc ba. */
#ctCcNhap { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
/* Khung VUÔNG CỐ ĐỊNH khai sẵn: ảnh tải lười mà không có chỗ đặt thì chữ nhảy loạn khi ảnh vào. */
.stt-cc-o { position: relative; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden;
border: 1px solid var(--border); background: #f0f0f0; cursor: pointer; }
.stt-cc-o img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Đường lùi khi trình duyệt không hiện được ảnh (HEIC của iPhone là ca hay gặp nhất) */
.stt-cc-o .lui { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center;
justify-content: center; gap: 4px; font-size: var(--fs-6); color: var(--muted); background: #f7f7f7; }
.stt-cc-o.hong .lui { display: flex; }
.stt-cc-o.hong img { display: none; }
.stt-cc-o .ten-lui { font-size: var(--fs-1); line-height: 1.2; padding: 0 4px; text-align: center;
word-break: break-word; max-height: 24px; overflow: hidden; }
.stt-cc-x { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 999px;
border: none; background: rgba(0,0,0,.62); color: #fff; font-size: var(--fs-4); line-height: 1;
cursor: pointer; font-family: inherit; padding: 0; }
.stt-cc-tai { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.stt-cc-nhan-tep { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 12px 16px; border-radius: 10px;
cursor: pointer; background: var(--card); color: var(--red); border: 1px solid var(--red); }
.stt-cc-tien { font-size: var(--fs-2); color: var(--muted); }
/* Màn xem ảnh: nền tối, một ảnh một lúc */
.stt-xem { position: fixed; inset: 0; z-index: 60; background: #111; display: flex; flex-direction: column; }
.stt-xem-tren { display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 10px 12px; color: #fff; font-size: var(--fs-3); flex: none; }
.stt-xem-tren button { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 9px 13px; border-radius: 8px;
cursor: pointer; background: rgba(255,255,255,.14); color: #fff; border: none; }
.stt-xem-than { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: pan-y; }
.stt-xem-than img { max-width: 100%; max-height: 100%; object-fit: contain; }
.stt-xem-duoi { flex: none; padding: 10px 12px 16px; color: #cfcfcf; font-size: var(--fs-2); text-align: center; }
/* --- 2d-5: màn quản lý ảnh của TV --- */
.ql-hang { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px;
background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.ql-hang.da-xoa { background: #fbfbfb; }
.ql-hang.da-xoa .ql-anh { opacity: .45; }
.ql-anh { width: 56px; height: 56px; flex: none; border-radius: 8px; overflow: hidden; background: #f0f0f0;
border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: var(--fs-6); }
.ql-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ql-than { flex: 1; min-width: 0; font-size: var(--fs-3); line-height: 1.45; }
.ql-ten { font-weight: 700; word-break: break-word; }
.ql-phu { font-size: var(--fs-2); color: var(--muted); margin-top: 2px; }
.ql-con { font-size: var(--fs-2); font-weight: 700; color: #8d6e00; background: #fff8e1; border: 1px solid #f0d98c;
border-radius: 999px; padding: 2px 9px; display: inline-block; margin-top: 5px; }
.ql-con.het { color: var(--red-dark); background: #fff5f5; border-color: #f3c9c9; }
.ql-nut { flex: none; display: flex; flex-direction: column; gap: 6px; }
.ql-nut button { font-family: inherit; font-size: var(--fs-2); font-weight: 700; padding: 9px 12px; border-radius: 8px;
cursor: pointer; white-space: nowrap; }
.ql-xoa { background: var(--card); color: var(--muted); border: 1px solid var(--border); }
.ql-lai { background: var(--red); color: #fff; border: 1px solid var(--red); }
.ql-tai { background: var(--card); color: var(--red); border: 1px solid var(--red); }
/* ===== Màn nhật ký thao tác quản trị (#ql=nk) ===== */
.qtnk-loc { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.qtnk-loc select { font-family: inherit; font-size: var(--fs-5); padding: 10px 12px; min-height: 44px;
border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: inherit; }
.qtnk-hang { padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border);
border-radius: 10px; background: var(--card); font-size: var(--fs-3); line-height: 1.45; }
.qtnk-tren { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.qtnk-viec { font-weight: 700; }
.qtnk-ai { font-size: var(--fs-2); color: var(--muted); }
.qtnk-dt { font-size: var(--fs-2); color: var(--muted); margin-top: 2px; word-break: break-word; }
.qtnk-nhan { display: inline-block; font-size: var(--fs-2); font-weight: 700; padding: 2px 7px;
border-radius: 999px; border: 1px solid; }
.qtnk-go { color: #8d6e00; background: #fff8e1; border-color: #f0d98c; }
.qtnk-la-go { color: var(--red-dark); background: #fff5f5; border-color: #f3c9c9; }
.qtnk-loi { color: var(--red-dark); background: #fff5f5; border-color: #f3c9c9; }
/* ===== Màn quản lý tài khoản (#ql=tk) ===== */
.qttk-nguoi { border: 1px solid var(--border); border-radius: 10px; background: var(--card);
padding: 12px; margin-bottom: 10px; }
.qttk-ten { font-weight: 700; font-size: var(--fs-4); }
.qttk-phu { font-size: var(--fs-2); color: var(--muted); margin-top: 2px; }
.qttk-luoi { display: grid; grid-template-columns: 1fr; gap: 2px; margin: 10px 0 4px; }
.qttk-o { display: flex; align-items: flex-start; gap: 9px; padding: 9px 4px; min-height: 44px;
border-radius: 6px; cursor: pointer; }
.qttk-o input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.qttk-o span { font-size: var(--fs-3); line-height: 1.4; }
.qttk-o small { display: block; font-size: var(--fs-2); color: var(--muted); margin-top: 1px; }
.qttk-nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.qttk-nut button { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 11px 14px;
min-height: 44px; border-radius: 8px; cursor: pointer; }
.qttk-luu { background: var(--red); color: #fff; border: 1px solid var(--red); }
.qttk-khoa { background: var(--card); color: var(--muted); border: 1px solid var(--border); }
.qttk-khoa-roi { opacity: .55; }
/* ===== Gắn mã số nhân viên vào tài khoản quản lý (Đường B có chốt) ===== */
.qttk-vai-tv { display: inline-block; background: var(--red); color: #fff; border-radius: 6px;
padding: 1px 7px; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.qttk-canma { color: var(--red-dark); font-weight: 700; }
.qttk-note { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 6px; }
.qttk-gan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px;
padding-top: 10px; border-top: 1px dashed var(--border); }
.qttk-gan label { display: flex; align-items: center; gap: 7px; font-size: 13px;
min-height: 44px; cursor: pointer; }
.qttk-gan label input[type="checkbox"] { width: 20px; height: 20px; margin: 0; flex: none; }
.qttk-gan input[type="text"] { width: 84px; height: 44px; font-family: inherit; font-size: 16px;
text-align: center; border: 1px solid var(--border); border-radius: 8px; padding: 0 6px;
background: var(--card); color: inherit; }
.qttk-gan button { font-family: inherit; font-size: 13px; font-weight: 700; padding: 11px 14px;
min-height: 44px; border-radius: 8px; cursor: pointer; }
/* ===== Ô Quản lý + màn gom (#ql) ===== */
.o-ql .o-ic { color: var(--red); }
/* @o_toc_do_mang — ô "Kiểm tra tốc độ mạng", chỉ TV thấy (cùng cơ chế ẩn/hiện với ô Quản lý). */
.o-do .o-ic { color: #0b6b57; background: #e3f4ee; }
.qtg-the { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
padding: 14px 12px; margin-bottom: 10px; min-height: 44px; cursor: pointer;
border: 1px solid var(--border); border-radius: 12px; background: var(--card); font-family: inherit; }
.qtg-ic { width: 40px; height: 40px; flex: none; border-radius: 10px; display: flex;
align-items: center; justify-content: center; font-size: var(--fs-5, 19px); background: #faf7f2; }
.qtg-noi { flex: 1; min-width: 0; }
/* `display:block` là BẮT BUỘC: hai thẻ này là , để mặc định inline thì tên thẻ và
dòng mô tả dính liền nhau thành một câu khó đọc. Đã thấy trên ảnh chụp lần đầu. */
.qtg-t { display: block; font-size: var(--fs-4, 14px); font-weight: 800; }
.qtg-p { display: block; font-size: var(--fs-2, 12px); color: var(--muted); margin-top: 2px; }
.qtg-mui { flex: none; color: var(--muted); }
.qtg-tat { opacity: .45; }
.stt-cn-vung { background: #fafafa; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin: 18px 0; }
.stt-luu-btn { width: 100%; font-family: inherit; font-size: var(--fs-4); font-weight: 800; padding: 14px 16px; margin: 4px 0 0;
border-radius: 10px; cursor: pointer; background: var(--red); color: #fff; border: 1px solid var(--red); }
.stt-luu-btn[disabled] { opacity: .55; cursor: default; }
/* ===== N6 (05/09): dải "nháp do AI tổng hợp" trên đầu form Ghi việc mới ===== */
.nh-dai { background: #f4f7f4; border: 1px dashed #bcd0bc; border-radius: 12px;
padding: 12px 14px; margin: 0 0 14px; font-size: var(--fs-3); line-height: 1.5; color: var(--text); }
.nh-dai b { color: var(--green); }
.nh-ten-hang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Nút chọn tên là VÙNG CHẠM, không phải chip trang trí: cao 44, chữ 14 — cùng mốc đợt
"Cỡ chữ & vùng chạm" 05/09. Chữ dài thì xuống dòng trong nút, không cắt cụt. */
.nh-ten { font-family: inherit; font-size: var(--fs-4); font-weight: 700; line-height: 1.35;
min-height: 44px; padding: 10px 14px; border-radius: 10px; cursor: pointer; text-align: left;
background: var(--card); color: var(--red); border: 2px solid var(--red); max-width: 100%; }
.nh-nguon-nhac { margin: 10px 0; }
.nh-nguon-mau { padding: 10px 0; border-top: 1px solid #ddd; overflow-wrap: anywhere; }
.nh-nguon-chu { font-size: var(--chu-13); line-height: 1.6; margin-top: 6px; }
.nh-nguon-viec { margin-top: 12px; }
.nh-nguon-viec summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.nh-ten.dang { background: var(--red); color: #fff; }
.stt-cn-bao { font-size: var(--fs-3); margin-top: 8px; line-height: 1.45; }
.stt-cn-bao.hong { color: var(--red-dark); }
.stt-cn-bao.duoc { color: var(--green); }
.stt-nhom-nhan { font-size: var(--fs-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--muted); margin: 16px 0 7px; }
.stt-cong-tac-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; }
.stt-cong-tac { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 12px 16px; min-height: var(--cham); border-radius: 10px; cursor: pointer;
background: #fafafa; color: var(--text); border: 1px solid var(--border); margin: 0; }
.stt-cong-tac.bat { background: #fff8e1; color: #8d6e00; border: 1.5px solid #f0b400; }
.stt-cong-tac.bat-cn { background: #fffbe9; color: #8d6e00; border: 1.5px solid #d9c88f; }
.stt-cong-tac[disabled] { opacity: .5; cursor: default; }
.stt-cong-tac-loi { font-size: var(--fs-2); color: var(--red-dark); margin: 4px 0 8px; line-height: 1.45; }
/* Dải xoá: tự mang khoảng hở của thẻ (nguyên tắc 23) và thẳng hàng với chữ trong thẻ */
.stt-xoa-vung { margin-top: 26px; border-top: 1px solid var(--border); padding-top: 14px; }
.stt-xoa-btn { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 12px 16px; min-height: var(--cham); border-radius: 8px; cursor: pointer;
background: none; color: var(--muted); border: 1px solid var(--border); }
.stt-xoa-dai { background: #fff5f5; border: 1px solid #f3c9c9; border-radius: 10px; padding: 14px 16px; }
.stt-xoa-dai p { margin: 0 0 10px; font-size: var(--fs-3); color: var(--text); line-height: 1.5; }
.stt-xoa-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.stt-xoa-nut button { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 12px 18px; min-height: var(--cham); border-radius: 8px; cursor: pointer; margin: 0; }
.stt-xoa-that { background: var(--red); color: #fff; border: 1px solid var(--red); }
.stt-xoa-thoi { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.stt-card { background: var(--card); border-radius: 12px; margin-bottom: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.08); border: 1px solid var(--border); overflow: hidden; cursor: pointer; }
.stt-card-trongtam { border: 2px solid #f0b400; box-shadow: 0 1px 6px rgba(240,180,0,.3); }
.stt-card-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 16px; gap: 6px; flex-wrap: wrap; }
.stt-card-head > * { min-width: 0; }
.stt-card-title { font-weight: 700; font-size: var(--fs-4); }
.stt-card-sub { font-size: var(--fs-2); color: var(--muted); margin-top: 3px; }
.stt-card-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; max-width: 100%; }
.stt-status-pill { font-size: var(--fs-1); font-weight: 700; padding: 4px 9px; border-radius: 20px; white-space: nowrap; max-width: 100%; }
.stt-status-thu { background: #eeeeee; color: var(--muted); }
.stt-status-tot { background: #e8f5e9; color: var(--green); }
.stt-status-theodoi { background: #fff3e0; color: #e65100; }
.stt-status-dung { background: #f5f5f5; color: #9e9e9e; }
.stt-sao { font-size: 20px; line-height: 1; padding: 2px 4px; }
/* `.stt-canhan-chip` (chip chữ CÁ NHÂN, 10,5px) ĐÃ BỎ — bản đo cỡ chữ kết luận cỡ ấy không đọc
được. Cả màn Sổ lẫn màn chi tiết nay dùng `.stt-rieng` (🔒 riêng, 12px). */
.stt-empty-note { text-align: center; color: var(--muted); padding: 30px 10px; font-size: var(--fs-4); }
.stt-hotro-note { font-size: var(--fs-2); color: var(--muted); }
.stt-recap { background: #fafafa; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; font-size: var(--fs-3); color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.stt-field { margin: 14px 0; }
.stt-field label { display: block; font-size: var(--fs-3); font-weight: 700; color: var(--red-dark); margin-bottom: 6px; }
/* Sàn chạm 44px: trước đây cao 38px. */
.stt-status-btn { width: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
padding: 0 14px; font-size: var(--fs-3); margin: 0; background: var(--card); color: var(--red);
border: 2px solid var(--red); border-radius: 8px; font-weight: 700; cursor: pointer; font-family: inherit; }
.stt-status-btn.chon { background: var(--red); color: #fff; }
/* --- 🧹 Dọn danh sách (chép khuôn app cũ SoThanhTuuUI.html) + ↩ Hoàn tác --- */
/* Đang dọn thì thẻ KHÔNG còn là vùng bấm mở chi tiết nữa; đổi cả con trỏ để
tay biết ngay, đừng để người ta bấm rồi tự hỏi sao không mở. */
.stt-card-don { cursor: default; border-color: #f3c9c9; }
/* 40x40: đo ở 320/360/414 px thấy bản 6px/9px chỉ cao 29px — quá nhỏ cho một nút
PHÁ dữ liệu trên điện thoại (Apple HIG 44pt · Material 48dp). Nút này có bước xác
nhận thứ hai nên 40 là mức thoả hiệp chấp nhận được với hàng chip vốn đã chật. */
.stt-card-xoa { font-family: inherit; font-size: var(--fs-5); line-height: 1; border-radius: 8px;
min-width: 40px; min-height: 40px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; background: #fff5f5; color: var(--red); border: 1px solid #f3c9c9; }
.stt-card-xoa:active { background: #ffe9e9; }
/* Dải xác nhận DỰNG NGAY TRONG THẺ vừa bấm — không dùng confirm() của trình duyệt:
cả app không có chỗ nào dùng, và WebView của trang bọc PWA nuốt nó không báo gì. */
.so-xn { padding: 14px 16px; background: #fff5f5; }
.so-xn-loi { font-size: var(--fs-3); color: var(--text); line-height: 1.5; margin-bottom: 10px; }
.so-xn-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.so-xn-nut button { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 10px 16px;
border-radius: 8px; cursor: pointer; }
.so-xn-co { background: var(--red); color: #fff; border: 1px solid var(--red); }
.so-xn-khong { background: var(--card); color: var(--text); border: 1px solid var(--border); }
/* Dải hoàn tác nằm ĐÚNG CHỖ thẻ vừa biến mất — không phải thanh nổi dưới đáy.
Đặt ở đáy màn thì lúc đang cuộn giữa danh sách người ta không thấy, mà thanh
nổi còn đá nhau với thanh điều hướng đáy sắp bật. */
.so-ht { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
background: #f4f7f4; border: 1px dashed #bcd0bc; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.so-ht-chu { font-size: var(--fs-3); color: var(--muted); line-height: 1.45; min-width: 0; overflow-wrap: anywhere; }
.so-ht-nut { font-family: inherit; font-size: var(--fs-3); font-weight: 700; padding: 9px 14px; border-radius: 8px;
cursor: pointer; background: var(--card); color: var(--green); border: 2px solid var(--green); flex-shrink: 0; }
.stt-orig-toggle { display: flex; align-items: center; min-height: var(--cham); background: none; border: none; color: var(--red); font-weight: 700; font-size: var(--fs-3); cursor: pointer; padding: 6px 0; text-align: left; font-family: inherit; }
.stt-orig-box { display: none; }
.stt-orig-box.show { display: block; }
.stt-orig-box .stt-recap { margin-bottom: 6px; }
.stt-vaitro-item { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-3); line-height: 1.4; color: var(--text); min-width: 0; max-width: 100%; margin-bottom: 6px; }
.stt-vaitro-item input { margin-top: 3px; flex: 0 0 auto; }
.stt-cc-item { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-3); padding: 8px 10px; background: #faf7f2; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; min-width: 0; }
.stt-cc-thumb-file { width: 44px; height: 44px; border-radius: 6px; flex: 0 0 auto; background: #eee; display: flex; align-items: center; justify-content: center; font-size: var(--fs-6); }
.stt-cc-name { flex: 1; word-break: break-word; }
.stt-cc-date { font-size: var(--fs-2); color: var(--muted); }
.stt-nhom-block { background: #fafafa; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; overflow-wrap: anywhere; }
.stt-nhom-title { font-weight: 700; font-size: var(--fs-3); color: var(--red-dark); margin-bottom: 6px; }
.stt-nhom-block ul { margin: 0; padding-left: 18px; }
.stt-nhom-block li { font-size: var(--fs-3); line-height: 1.5; color: var(--text); margin-bottom: 3px; }
.stt-nhan-doi { font-size: var(--fs-3); color: var(--muted); font-style: italic; }
/* ---------- Khối đo tốc độ (dành cho TV) ---------- */
details.do { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; margin-top: 22px; }
details.do summary { cursor: pointer; font-weight: 700; font-size: var(--fs-4); color: var(--muted); }
.do-nhanh { font-size: var(--fs-3); color: var(--muted); margin: 8px 0; line-height: 1.6; }
.do-nhanh b { color: var(--text); }
.lon { font-size: var(--fs-6); font-weight: 800; color: var(--green); }
table.so { width: 100%; border-collapse: collapse; font-size: var(--fs-3); margin-top: 10px; }
table.so th, table.so td { text-align: left; padding: 6px 4px; border-bottom: 1px solid #eee; vertical-align: top; }
table.so th { color: var(--muted); font-weight: 700; font-size: var(--fs-1); text-transform: uppercase; }
table.so td.n { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.moc { background: #fef7e0; border: 1px solid #f9d67a; padding: 9px 11px; border-radius: 8px; font-size: var(--fs-2); line-height: 1.55; margin-top: 10px; }
pre.tho { background: #f1f3f4; padding: 9px; border-radius: 7px; font-size: var(--fs-2); overflow-x: auto; margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tien-trinh { font-size: var(--fs-3); color: var(--muted); margin-top: 8px; }
/* 2d-6 — nút nhờ AI sắp xếp nhật ký (04/09/2026) */
.stt-ai-hang{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.stt-ai-btn{border:1px solid #c62828;background:#fff;color:#c62828;border-radius:8px;
padding:9px 14px;font-size: var(--fs-4);min-height: var(--cham);font-weight:600;cursor:pointer;line-height:1.2}
.stt-ai-btn:disabled{opacity:.55;cursor:default}
.stt-ai-tt{font-size: var(--fs-4);color:#666;flex:1;min-width:140px}
.stt-ai-tt.loi{color:#c62828}
/* Ô vừa được AI điền: nhấp nháy nhẹ MỘT lần để mắt bắt được ô nào vừa đổi. */
@keyframes sttAiHien{from{background:#fff6d6}to{background:#fff}}
.stt-o.stt-ai-vua{animation:sttAiHien 1.2s ease-out}
/* @thanh_day_nhay_0609: phản hồi cả ô; không đổi kích thước/vùng chạm. */
.thanh-day a { position: relative; -webkit-tap-highlight-color: rgba(198,40,40,.14); }
.thanh-day a:active, .thanh-day a.td-cho { background: #fbe9e7; color: var(--red); }
.thanh-day a:focus-visible { outline: 2px solid var(--red); outline-offset: -3px; }
.thanh-day a.td-cho::after { content: 'Đang mở…'; position: absolute; bottom: 100%;
left: 0; right: 0; padding: 4px 2px; background: #fbe9e7; color: var(--red);
font-size: var(--fs-3); text-align: center; border-radius: 6px 6px 0 0; }
/* @chu_nguoi_viet_30 — TV 06/09: chỉ nội dung nghiệp vụ +30%.
Bảng --fs-1..6 của nhãn/nút giữ nguyên; các cỡ đọc dưới đây ánh xạ
12/13/14/16/19px × 1.30, không nhân cỡ chữ theo phần tử cha. */
:root {
--chu-12: 15.6px; --chu-13: 16.9px; --chu-14: 18.2px;
--chu-16: 20.8px; --chu-19: 24.7px;
--chu-tranh: 21.45px; --chu-tranh-nho: 20.15px;
}
.chu-viet-13 { font-size: var(--chu-13); }
.chu-viet-16 { font-size: var(--chu-16); }
.chu-viet-13, .chu-viet-16 { overflow-wrap: anywhere; }
textarea.stt-o, #tmTen { font-size: var(--chu-16); }
textarea.stt-o::placeholder, #tmTen::placeholder { font-size: var(--fs-5); }
.stt-card-title, .tm-hang .tm-ten.chu-thu-muc { font-size: var(--chu-14); overflow-wrap: anywhere; }
#ctTen { font-size: var(--chu-19); overflow-wrap: anywhere; }
.stt-recap.chu-co-noi-dung { font-size: var(--chu-13); white-space: pre-wrap; }
.cdl .cdl-q { font-size: var(--chu-tranh)!important; overflow-wrap: anywhere; }
/* Giữ cùng khung cho 126 câu trên một khổ màn; min-height cho phép nở
khi câu dự phòng dài hoặc người dùng tăng chữ hệ thống. Không cắt chữ. */
.cdl { min-height: 252px; }
.cdl .cdl-f { padding-top: 14px; }
.cdl-lui-q { font-size: var(--chu-16); overflow-wrap: anywhere; }
@media (max-width: 360px) { .cdl { min-height: 284px; } }
@media (max-width: 340px) { .cdl .cdl-q { font-size: var(--chu-tranh-nho)!important; } }
.sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.td-ban-phim.co-thanh-day {padding-bottom:0}
/* @tq_0709: shared visual vocabulary, scoped to the new controls. */
.tq-note{font-size:13px;color:#6b6259;line-height:1.5;overflow-wrap:anywhere}
.tq-panel,.tq-roster,.tq-notice{padding:14px;margin:12px 0;border:1px solid #ded7cd;border-radius:14px;background:#fffdf8;overflow-wrap:anywhere}
.tq-panel{box-shadow:0 4px 20px #493c2610}
.tq-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tq-member{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #e8e1d8;flex-wrap:wrap}
.tq-panel button,.tq-sao,.tq-admin button{min-height:44px;min-width:44px;border:1px solid #d5ccbd;border-radius:10px;background:#fffdf8;color:#514431;padding:8px 12px;font-family:inherit;font-size:14px;cursor:pointer}
.tq-panel button:disabled,.tq-admin button:disabled{opacity:.55;cursor:default}
.tq-panel input,.tq-admin input,.tq-admin select{box-sizing:border-box;width:100%;min-height:44px;padding:10px;border:1px solid #d5ccbd;border-radius:10px;background:white;color:#342f2a;font:inherit;font-size:16px}
.tq-panel label{display:block;margin-top:12px;font-size:14px}
.tq-sao{align-self:flex-start;flex:none;font-size:24px;background:transparent;border-color:transparent;color:#ad751b;padding:4px}
.tq-sao[aria-pressed=true]{background:#fff1c7}
.tq-roster ul{padding-left:20px;margin:8px 0}
.tq-roster span{font-size:13px;color:#6b6259}
.tq-admin{max-width:900px;margin:auto;padding-bottom:24px;color:#342f2a}
.tq-admin .tq-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tq-admin .tq-toolbar>*{flex:1;min-width:130px}
.tq-admin .tq-card{display:block;width:100%;text-align:left;padding:14px;margin:8px 0;background:#fffdf8;border:1px solid #e1d9cc;border-radius:14px;overflow-wrap:anywhere}
.tq-admin .tq-card b{font-size:16px;line-height:1.5}
.tq-admin .tq-card p{font-size:14px;line-height:1.6;margin:6px 0;white-space:pre-wrap}
.tq-admin .tq-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tq-admin .tq-tabs button[aria-pressed=true]{background:#534532;color:white;border-color:#534532}
.tq-admin .tq-title{font-size:19px;font-weight:700;margin:14px 0 6px}
.tq-admin .tq-check{width:22px;height:22px;min-height:22px;accent-color:#736044}
.tq-admin label.tq-row{min-height:44px}
.tq-admin .tq-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.tq-admin .tq-photos img{display:block;width:100%;height:110px;object-fit:cover;border-radius:10px}
.tq-admin pre{white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:14px;margin:8px 0}
.tq-admin .tq-undo{position:sticky;bottom:12px;background:#fff1c7;padding:12px;border-radius:14px;box-shadow:0 4px 18px #493c2620;z-index:3}
.tq-admin .tq-bread{font-size:13px;color:#746551;overflow-wrap:anywhere}