/* ⚠ ĐỢT 386 — PHẢI CÓ FONT EMOJI Ở CUỐI CHUỖI (anh Tiến báo 09/08: "có hiện tượng lỗi font chữ"). App dùng ~1.650 emoji làm ICON (📋 🔐 🚀 …) trong 151 trang. Bootstrap khai sẵn dây chuyền dự phòng emoji ở --bs-font-sans-serif, NHƯNG app.css nạp SAU Bootstrap và đè thẳng `html, body` ⇒ xoá sạch phần emoji đó. Helvetica/Arial/Tahoma KHÔNG có một glyph emoji nào ⇒ máy nào thiếu font emoji của hệ điều hành (điển hình: Windows Server cài bản KHÔNG có Desktop Experience — rất hay gặp ở máy triển khai) thì mọi icon thành HỘP VUÔNG ▯, còn chữ tiếng Việt vẫn bình thường. ⇒ Luật: MỌI khai báo font-family trong app đều phải kết bằng 3 font emoji + font Linux dự phòng. (co-dien.css có 3 chuỗi nữa, đã sửa cùng đợt.) */ /* ⚠ ĐỢT 2655 (việc o2143) — BỎ 'Helvetica Neue' VÀ 'Helvetica' KHỎI ĐẦU CHUỖI. Anh Tiến 16/09/2026: "toàn bộ font chữ đang dùng bị lỗi với tiếng việt (chữ có dấu thì nhỏ)". 'Helvetica Neue' ⛔ CÓ trên Windows (⇒ máy dev và máy triển khai bỏ qua nó, rơi xuống Arial) nhưng CÓ THẬT trên iPhone/iPad/Mac, mà ở đó nó thiếu dải chữ HAI DẤU U+1EA0–1EF9 ⇒ máy Apple phải mượn phông khác cho đúng những chữ Ộ Ừ Ệ Ậ Ợ — đúng kiểu "chữ có dấu trông nhỏ hơn". Anh đang mở dần đường dùng app bằng điện thoại nên cái bẫy ấy ⛔ còn xa nữa. 📏 ĐỔI NÀY ⛔ LÀM ĐỔI MỘT ĐIỂM ẢNH NÀO TRÊN WINDOWS — đo tận tay 16/09 (Chrome thật, canvas measureText, câu 82 ký tự cỡ 16px): chuỗi CŨ 728,875px · chuỗi MỚI 728,875px · Arial trần 728,875px · Helvetica trần 728,875px. Windows vốn ánh xạ thẳng Helvetica sang Arial. ⛔ Đừng thêm họ chữ nào vào chuỗi này mà chưa dò dải U+1EA0–1EF9 của nó — mở /do-phong-chu.html trên chính máy nghi ngờ là biết. */ /* ═══ PHÔNG THÂN BÀI — ĐỢT 2695 (việc h322), anh Tiến báo lần THỨ BA 17/09/2026 ═════════════════ Nguyên văn: «em kiểm tra lại font chữ không phù hợp với tiếng việt như tiêu đề "Các đợt đã tạo (0)" chữ a. bị nhỏ» + ảnh nút «Đăng nhập» có chữ «ậ» nhỏ hơn phần còn lại. 🔴 VÌ SAO KHÔNG CHỮA ĐƯỢC BẰNG CÁCH SỬA CHUỖI PHÔNG NỮA. Hai đợt trước (2535, 2655) đều đo trên MÁY DEV và đều SẠCH: 941 ô chữ / 20.030 chữ, đúng MỘT phông Arial vẽ tất cả. Phông là chuyện của MÁY XEM chứ ⛔ của máy chủ — chuỗi `Arial, …` chỉ là lời ĐỀ NGHỊ, máy nào có bản Arial thiếu dải hai dấu U+1EA0–1EF9 (hoặc ⛔ có Arial: máy Apple, máy Android, máy Linux) thì trình duyệt lẳng lặng mượn phông khác cho ĐÚNG những chữ Ậ Ộ Ợ Ệ Ừ ⇒ trong một từ có hai bộ nét, mắt thấy «chữ có dấu thì nhỏ». ⇒ Đường chữa DUY NHẤT không phụ thuộc máy xem là NẠP PHÔNG THEO PHẦN MỀM. ⇒ Họ chữ: **Be Vietnam Pro** — do nhóm người Việt vẽ riêng cho tiếng Việt, dấu được VẼ chứ không chắp; sáu tệp nét 400/500/600 tải bổ sung ở đợt này (101 KB) nên chữ thường ⛔ còn bị vẽ bằng mặt ĐẬM như số đo đợt 2535 cảnh báo. Khai báo + tên biến nằm ở `chu/chu-viet.css`. 🔑 TẮT/BẬT BẰNG ĐÚNG MỘT CHỮ: bỏ `'Be Vietnam Pro',` ở đầu chuỗi dưới là app quay về Arial của máy xem, ⛔ phải sửa chỗ nào khác. Đuôi dự phòng giữ NGUYÊN theo luật đợt 386 (ba phông emoji). ⛔ ĐỪNG gói tên họ vào một biến `var(--…)` cho "gọn": hàng rào `Phong_dat_cho_toan_app_phai_co_net_thuong` đọc THẲNG chuỗi này để soi xem họ tự lưu đã có nét 400 chưa — thấy `var(…)` là nó đậu RỖNG, tức mất đúng cái hàng rào giữ cho cả app khỏi đậm lên 8,1% (số đo đợt 2535). */ html, body { font-family: 'Be Vietnam Pro', Arial, 'Liberation Sans', 'DejaVu Sans', sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; } a, .btn-link { color: #006bb7; } /* ═══ LIÊN KẾT KHÔNG GẠCH CHÂN LÚC NGHỈ (anh chỉ đạo 23/08/2026) ═══ Nguyên văn: "tên các nút, tên dự án,... không được gạch dưới kiểu link nữa rất xấu, tương tự với các phân hệ khác trên toàn dự án". 🔴 ⛔ ĐỪNG "dọn gọn" khối này thành một dòng `--bs-link-decoration: none` — ĐÃ ĐO, ĐÓ LÀ LƯỢT SỬA VÔ HIỆU HOÀN TOÀN. Bootstrap 5.3.8 KHÔNG dựng gạch chân của thẻ `a` bằng biến. Đọc thẳng bootstrap.min.css: a{color:rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));text-decoration:underline} Chữ `underline` nằm ĐÓNG ĐINH trong khai báo. Token `--bs-link-decoration` có khai đúng MỘT lần ở `:root,[data-bs-theme=light]` nhưng KHÔNG một luật nào trong cả tệp đọc tới nó — Bootstrap tiêu biến Sass `$link-decoration` ngay lúc biên dịch, token để lại chỉ là thứ cho người ngoài tham chiếu. ⇒ Đặt biến ấy thì build xanh, test xanh, màn hình KHÔNG ĐỔI GÌ: đúng loại hỏng lặng lẽ mà quy tắc #5 đã trả giá ba lượt ở đợt 838 / 840 / 850. Câu hỏi đúng luôn là "Bootstrap dựng thuộc tính NÀY bằng biến hay bằng chữ đóng đinh", và ở đây câu trả lời là CHỮ ĐÓNG ĐINH. ⇒ Cách đúng là đè thẳng chính khai báo. Chỉ cần THỨ TỰ NGUỒN, không phải đội trọng số: · `a` (0,0,1) — app.css nạp SAU bootstrap.min.css nên thắng luật `a` cùng trọng số của Bootstrap. · `.btn-link` (0,1,0) — phải kể tên RIÊNG: Bootstrap đặt lại `text-decoration: underline` cho lớp này ở (0,1,0), cao hơn `a`, nên luật `a` một mình không với tới. ⛔ KHÔNG dùng `!important`: ba lối CỐ Ý gạch chân sẽ bị cướp mất — lớp tiện dụng `.text-decoration-underline` của Bootstrap (bản thân nó mang !important), `abbr[title]` (gạch chấm chấm, nghĩa khác hẳn là "có chú giải"), và luật scoped của từng component. Không !important thì mọi chỗ ấy vẫn tự quyết được. ⓘ Không phải khai lại theo từng giao diện: `text-decoration` không dính màu, còn nét gạch thì lấy `currentColor` nên tự đi theo màu liên kết của giao diện đang bật. `bo-mau/ap-dung.css` chỉ đặt MÀU liên kết chứ không đụng gạch chân, nên một khối ở đây đủ cho cả hai trục `data-theme` và `data-bo-mau`. */ a, .btn-link { text-decoration: none; } /* 🔑 BÙ LẠI DẤU HIỆU "ĐÂY LÀ THỨ BẤM ĐƯỢC" — ⛔ đừng bỏ trắng. Bỏ gạch chân mà không bù gì thì một liên kết nằm giữa đoạn văn hết đường nhận ra, và người dùng bàn phím mất luôn mốc mình đang đứng ở đâu. ⇒ Gạch chân QUAY LẠI khi rê chuột và khi focus bàn phím: lúc bình thường sạch mắt đúng ý anh, lúc người ta hỏi tới thì nó tự khai. Dùng `:focus-visible` chứ ⛔ không phải `:focus` — bấm chuột xong không để lại gạch chân lủng lẳng. Hai nhóm ĐỨNG NGOÀI, vì đã có dấu hiệu bấm được riêng (nền, viền, đổi nền khi rê) nên thêm gạch chân chỉ làm chữ nhảy: ① LỚP ĐIỀU KHIỂN của Bootstrap — tập ĐÓNG trong 5.3.x, không phải danh sách chép tay tự mục theo thời gian. Bắt buộc phải kể ra: `a:hover` là (0,1,1), CAO HƠN `.btn` (0,1,0), nên không loại trừ thì đúng 67 thẻ `` của app bị gạch chân mỗi lần rê chuột. ② BỘ KHUNG của app (thanh trên, menu dọc, rail phân hệ, lưới 9 chấm) — toàn thứ điều hướng. Khuôn `:not(.top-row *)` lấy đúng theo tiền lệ đang chạy ở bo-mau/ap-dung.css mục 2. ③ ⭐ ĐỢT 1215 (việc o404) — `.ten-ban-ghi`: TÊN BẢN GHI trong bảng/danh sách. Anh Tiến 24/08/2026, xem màn hình 🗂 Nhiệm vụ đang thực hiện: *"chữ nhiệm vụ vẫn ở dạng link"*. Nhóm này đứng ngoài vì nó CỐ Ý không trông như liên kết ở BẤT KỲ trạng thái nào — dấu hiệu bấm được của nó là hàng sáng lên (`.table-hover`) + chữ đổi màu lúc rê, xem khối luật ngay dưới. Component nào muốn khác thì cứ khai trong `.razor.css` của nó: gói scoped nạp SAU app.css nên thắng ở cùng trọng số (`TabTrangCuaApp` đang làm đúng vậy để tab không nhảy chữ). ⓘ `:not()` nhận DANH SÁCH và nhận cả bộ chọn phức — Selectors Level 4, và kho đã phụ thuộc sẵn (`a:not(.btn):not(.top-row *)` ở ap-dung.css). Trình duyệt nào không hiểu thì bỏ nguyên bộ chọn này, tức chỉ mất phần BÙ còn phần bỏ gạch chân vẫn đúng — hỏng về phía an toàn. */ a:not(.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item, .ten-ban-ghi):not(.top-row *, .sidebar *, .nav-scrollable *, .rail-phan-he *, .menu-co-dien *):hover, a:not(.btn, .nav-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item, .ten-ban-ghi):not(.top-row *, .sidebar *, .nav-scrollable *, .rail-phan-he *, .menu-co-dien *):focus-visible, .btn-link:hover, .btn-link:focus-visible { text-decoration: underline; } /* ═══ ⭐ ĐỢT 1215 (việc o404) — TÊN BẢN GHI THÔI TRÔNG NHƯ MỘT LIÊN KẾT ═══ Anh Tiến 24/08/2026, kèm ảnh màn hình 🗂 Nhiệm vụ đang thực hiện: "chữ nhiệm vụ vẫn ở dạng link". 📏 ĐO TRƯỚC KHI SỬA, và số đo đổi hẳn cách chữa: luật bỏ gạch chân của đợt 23/08 ở ngay trên ĐANG CHẠY ĐÚNG — `curl http://localhost:5270/app.css` trả về đủ khối `a, .btn-link { text-decoration: none }`. Thứ còn lại trong ảnh là (a) MÀU LIÊN KẾT lúc nghỉ và (b) nét gạch mà chính luật ngay trên CỐ Ý trả lại khi rê chuột — hàng trong ảnh đang được rê nên nó hiện ra. ⇒ ⛔ ĐỪNG đi vá lại luật bỏ gạch chân (nó không hỏng); phải bỏ MÀU, và cho tên bản ghi đứng ngoài phần bù gạch chân. 🔑 VÌ SAO KHÔNG BỎ TRẮNG DẤU HIỆU BẤM ĐƯỢC. Bỏ cả màu lẫn gạch chân thì tên bản ghi hoá chữ thường, không ai biết bấm được nữa — đúng cái mà khối bù ở trên sinh ra để tránh. Ở đây dấu hiệu được trả bằng hai đường khác: hàng sáng lên (`.table-hover`, mọi bảng dùng lớp này) và CHỮ ĐỔI SANG MÀU LIÊN KẾT lúc rê/focus. Nghỉ thì sạch mắt đúng ý anh, hỏi tới thì nó tự khai. ⓘ Mọi thẻ mang lớp này đều PHẢI có `title` nói rõ bấm vào mở ra cái gì (luật đợt 222) — đó là đường thứ ba, và là đường duy nhất người dùng bàn phím đọc được. ⚠ `color: inherit` chứ ⛔ không đóng đinh một mã màu: ô nằm trong ``/`
` nên nó tự lấy màu chữ của giao diện đang bật (sáng/tối), khỏi phải khai lại theo từng trục `data-theme`. ⚠ Trọng số: `a.ten-ban-ghi` là (0,1,1) — thắng luật `a` (0,0,1) của Bootstrap ở cả màu nghỉ lẫn màu rê, ⛔ nên không cần `!important` (dùng nó là cướp mất quyền tự quyết của luật scoped). */ a.ten-ban-ghi { color: inherit; } a.ten-ban-ghi:hover, a.ten-ban-ghi:focus-visible { color: var(--bs-link-hover-color, #0a58ca); } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ⛔ ĐỢT 850 (18/08/2026) — ĐÃ XOÁ luật `.darker-border-checkbox.form-check-input { border-color:#929292 }` của khuôn mẫu Blazor: đo toàn kho (.razor · .cs · .css · .js · .html, bỏ bin/obj) ra **0 chỗ dùng**, chỉ còn chính dòng khai ấy. Nó cũng là 1 trong 5 luật đặt `border-color` LONGHAND lên `.form-check-input` đang được kể ở nợ **CK-65** ⇒ xoá xong còn **4**. Xoá vì rác thì rủi ro bằng 0, ⛔ KHÔNG phải vì nó nuốt viền đỏ — bốn luật kia mới là chuyện của CK-65 và chúng CỐ Ý ở lại (xem CK-65: khuôn `--bs-border-color` của đợt 838/840 KHÔNG chuyển sang ô tick được). */ /* Thong bao noi (popup) - hien co dinh goc phai tren man hinh, khong phai cuon trang di tim */ .thong-bao-noi { position: fixed; top: 72px; right: 16px; left: auto; z-index: 1080; max-width: min(440px, calc(100vw - 32px)); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); animation: thong-bao-hien .25s ease-out; } @keyframes thong-bao-hien { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ===================== Ô NGÀY dd/mm/yyyy CÓ NÚT LỊCH ===================== Component Components/ChungTu/ONgay.razor + ONgayCoThe.razor. Ba phần trong một khung: ô GÕ dd/mm/yyyy + nút 📅 vẽ giống nút lịch của trình duyệt + ô ngày THẬT bị giấu (chỉ để mượn lịch). Nhìn y hệt ô ngày cũ nhưng chữ luôn là dd/mm/yyyy trên mọi máy. */ .o-ngay-boc { position: relative; display: inline-block; width: 150px; max-width: 100%; vertical-align: middle; } .o-ngay-boc .o-ngay-go { width: 100%; padding-right: 1.9rem; /* chừa chỗ cho nút lịch, chữ không chui xuống dưới nút */ } .o-ngay-boc .nut-lich { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 1.7rem; padding: 0; border: 0; background: transparent; font-size: .85rem; line-height: 1; cursor: pointer; opacity: .75; } .o-ngay-boc .nut-lich:hover:not(:disabled) { opacity: 1; background-color: rgba(0, 0, 0, .06); } .o-ngay-boc .nut-lich:disabled { opacity: .35; cursor: default; } /* Ô ngày THẬT: giấu khỏi mắt nhưng VẪN nằm trong bố cục — `display:none` thì showPicker() báo lỗi. Đặt sát nút lịch để hộp lịch của trình duyệt bung ra đúng chỗ. */ .o-ngay-boc .lich-an { position: absolute; right: .6rem; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; } :root[data-theme="dark"] .o-ngay-boc .nut-lich:hover:not(:disabled) { background-color: rgba(255, 255, 255, .1); } /* ===================== HÀNG CHẴN/LẺ KHÁC MÀU — MỌI BẢNG, MỌI GIAO DIỆN ===================== Anh Tiến yêu cầu 01/08/2026: "nhìn danh sách trùng màu thì dò hàng ngang rất khó" ⇒ hàng chẵn và lẻ phải khác màu, áp cho CẢ bản hiện đại và MỌI bảng làm sau này. · Chỉ phần NỘI DUNG (tbody) — đầu bảng giữ nguyên. · `:not(.table-striped)`: 18 bảng trong app đã tự khai sọc của Bootstrap; Bootstrap tô hàng LẺ bằng lớp phủ box-shadow, mình tô hàng CHẴN bằng nền — chồng cả hai thì mọi hàng đều bị tô, hết phân biệt. · `:not([class*="table-"])`: chừa hàng đã tô màu nghiệp vụ (đủ công / vắng / nghỉ phép…), sọc đè lên là mất ý nghĩa màu. · ⚠ ĐỢT 359p — chừa CẢ CẤP Ô `> *:not([class*="table-"])`: bảng công tháng tô màu nghiệp vụ theo TỪNG Ô (không phải hàng) — luật cũ chỉ chừa hàng nên Ô vắng/đủ công ở HÀNG CHẴN bị sọc đè mất màu (lỗi thật anh Tiến chụp 07/08: "vắng có ô tô đỏ có ô không tô, đủ 2 buổi vẫn không xanh" — dòng lẻ hồng, dòng chẵn trắng xen kẽ đều tăm tắp). · Dùng rgba (không phải mã màu đặc) để sọc ăn theo nền của thẻ chứa bảng, không tạo mảng lệch màu. · Giao diện CỔ ĐIỂN có luật riêng đậm hơn ở co-dien.css (trọng số cao hơn nên thắng luật này). */ .table:not(.table-striped) > tbody > tr:not([class*="table-"]):nth-child(even) > *:not([class*="table-"]) { background-color: rgba(0, 0, 0, .028); } :root[data-theme="dark"] .table:not(.table-striped) > tbody > tr:not([class*="table-"]):nth-child(even) > *:not([class*="table-"]) { background-color: rgba(255, 255, 255, .045); } /* ===================== GIAO DIỆN HIỆN ĐẠI: SÁNG / TỐI ===================== Bootstrap 5.1 chưa có data-bs-theme nên tự override theo thuộc tính data-theme trên . Mặc định là CỔ ĐIỂN (đặt trong script ở App.razor). Nút chuyển ở thanh trên (top-row). ⚠ ĐỢT 226 — BỎ NỀN XÁM ("gray"): anh Tiến chốt 03/08/2026 *"tinh gọn bớt chế độ xem gray mode đi cũng được vì không dùng"*. Nay còn 4 lựa chọn: sáng · tối · cổ điển · cổ điển tối. Máy nào lỡ đang lưu "gray" trong trình duyệt thì script ở App.razor tự chuyển sang "light". */ /* --- Nền TỐI --- */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="dark"] body { background-color: #1c1f24; color: #dde1e6; } /* :not(.btn) — KHÔNG đổi màu chữ của nút dạng thẻ (vd "Xin nghỉ phép" btn-info), nếu không màu link đè lên màu nút làm chữ mờ trên nền sáng. ⭐ ĐỢT 1215 (việc o404) — `:not(.ten-ban-ghi)` cùng một lẽ: tên bản ghi CỐ Ý mang màu chữ thường (anh Tiến 24/08/2026: *"chữ nhiệm vụ vẫn ở dạng link"*). ⛔ ĐỪNG bỏ dấu chừa này rồi trông vào luật `a.ten-ban-ghi` ở đầu tệp: luật ấy chỉ (0,1,1) còn dòng này (0,3,1) — bỏ ra là nền TỐI lại xanh liên kết trong khi nền SÁNG vẫn đúng, tức hỏng ở đúng một nửa số người dùng và **không câu lỗi nào**. */ :root[data-theme="dark"] a:not(.btn, .ten-ban-ghi), :root[data-theme="dark"] .btn-link { color: #6bb3ff; } :root[data-theme="dark"] .card, :root[data-theme="dark"] .list-group-item, :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .accordion-item { background-color: #262a31; color: #dde1e6; border-color: #3a3f47; } :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer { background-color: #2d323a; color: #dde1e6; border-color: #3a3f47; } :root[data-theme="dark"] .top-row { background-color: #2d323a !important; border-color: #3a3f47 !important; } :root[data-theme="dark"] .top-row a, :root[data-theme="dark"] .top-row .btn-outline-secondary { color: #dde1e6; } :root[data-theme="dark"] .table { --bs-table-color: #dde1e6; --bs-table-bg: transparent; --bs-table-striped-color: #dde1e6; --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-color: #fff; --bs-table-hover-bg: rgba(255, 255, 255, 0.07); --bs-table-border-color: #3a3f47; color: #dde1e6; border-color: #3a3f47; } :root[data-theme="dark"] .table > :not(caption) > * > * { border-color: #3a3f47; } :root[data-theme="dark"] .table-light, :root[data-theme="dark"] .table-light > * { --bs-table-bg: #2d323a; --bs-table-color: #dde1e6; color: #dde1e6; } /* --- Nền TỐI: Ô/HÀNG BẢNG TÔ MÀU (xanh lá / vàng / đỏ / xanh dương) --- Bootstrap tô nền PASTEL SÁNG. Ở nền tối, chữ phụ trong ô (.text-muted, .form-text) đã bị ép sang xám nhạt nên nằm trên nền pastel sáng gần như KHÔNG ĐỌC ĐƯỢC (bảng duyệt đơn nghỉ phép, bảng chấm công theo tháng). Đổi sang tông TỐI cùng sắc màu → mọi chữ sáng vẫn đọc rõ, ý nghĩa màu (đủ công / nửa buổi / vắng / nghỉ phép) giữ nguyên. */ :root[data-theme="dark"] .table tr.table-success, :root[data-theme="dark"] .table td.table-success { --bs-table-bg: #1f3b2c; --bs-table-color: #dde1e6; --bs-table-striped-bg: #24422f; --bs-table-striped-color: #dde1e6; color: #dde1e6; } :root[data-theme="dark"] .table tr.table-warning, :root[data-theme="dark"] .table td.table-warning { --bs-table-bg: #4a3c12; --bs-table-color: #f1e4c0; --bs-table-striped-bg: #524217; --bs-table-striped-color: #f1e4c0; color: #f1e4c0; } :root[data-theme="dark"] .table tr.table-danger, :root[data-theme="dark"] .table td.table-danger { --bs-table-bg: #4a2126; --bs-table-color: #f3d3d7; --bs-table-striped-bg: #52262b; --bs-table-striped-color: #f3d3d7; color: #f3d3d7; } :root[data-theme="dark"] .table tr.table-info, :root[data-theme="dark"] .table td.table-info { --bs-table-bg: #123a44; --bs-table-color: #cfe9ef; --bs-table-striped-bg: #16424d; --bs-table-striped-color: #cfe9ef; color: #cfe9ef; } :root[data-theme="dark"] .table tr.table-secondary, :root[data-theme="dark"] .table td.table-secondary { --bs-table-bg: #2f343c; --bs-table-color: #c7ccd2; --bs-table-striped-bg: #343a43; --bs-table-striped-color: #c7ccd2; color: #c7ccd2; } /* ── ⭐ ĐỢT 955 (việc o155) — Ô NGÀY "K": NGHỈ PHÉP ĐÃ VƯỢT HẠN MỨC PHÉP NĂM ────────────────── 🔒 Anh Tiến chốt 21/08/2026, phương án (b): *"K nhưng TÔ MÀU KHÁC"* + rê chuột hiện lý do. Bảng lương vẫn đọc là "K" (nghỉ không lương), còn người chấm công nhìn màu là biết đây là nghỉ CÓ xin phép — khác hẳn người nghỉ không lương mà không xin phép. 🔑 VÌ SAO LÀ MỘT LỚP RIÊNG chứ không mượn một biến thể `table-*` của Bootstrap: bốn màn hình cùng vẽ ô này (bảng công theo tháng · hai khối ở trang chủ · màn hình tính lương) và tất cả đều nằm trong `.table`. Mượn `table-primary` là màu ấy đã mang nghĩa khác ở bảng khác; khai riêng thì MỘT chỗ sửa là cả bốn màn hình theo, không nơi nào tụt lại. ⛔ TÔNG TÍM là cố ý: phải tách được bằng mắt khỏi `table-info` (xanh — nghỉ phép trong hạn mức) đứng NGAY CẠNH nó trên cùng một hàng, và khỏi `table-secondary` (xám — không tính công / ngoài dữ liệu) lẫn `table-danger` (đỏ — vắng). Cùng bảng màu với ô Excel `MauPhepVuot` (#E4D7F5) để tờ giấy in ra và màn hình nói cùng một chuyện. 🔴 **TÊN LỚP BẮT BUỘC MANG CHUỖI `table-` — ⛔ đừng đổi thành `o-…` cho "đúng lối đặt tên của app".** Luật SỌC HÀNG CHẴN ở ngay trên (dòng ~156) chừa ô đã tô màu nghiệp vụ bằng phép `> *:not([class*="table-"])`. Tên không mang chuỗi đó thì **ô ở HÀNG CHẴN bị sọc đè mất màu**, hàng lẻ vẫn đúng ⇒ nhìn bảng thấy màu **xen kẽ đều tăm tắp** và rất dễ tưởng là dữ liệu khác nhau. 📏 Đo sống 21/08/2026 trên bản đang chạy: bản đầu đặt tên `o-phep-vuot` ⇒ ô 30/07 của một người ra `rgba(0,0,0,.028)` (xám sọc) trong khi `--bs-table-bg` đã đúng `#e4d7f5` — **biến đặt đúng mà không được vẽ**. Đây đúng lỗi thật anh Tiến chụp 07/08 mà đợt 359p đã đi chữa một lần. 🚧 Hàng rào canh: `OVuotPhepMoiNoiVeTests.Lop_mau_o_vuot_phep_phai_qua_duoc_luat_soc_hang_chan`. ⚠ Đặt `--bs-table-bg` chứ ⛔ ĐỪNG đặt `background-color` trần: Bootstrap 5.3 dựng nền ô bảng bằng `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-type, var(--bs-table-bg))`, nên một luật `background-color` ở độ đặc hiệu thấp hơn sẽ bị lớp bóng đó phủ kín và KHÔNG hiện ra — hỏng lặng lẽ, đúng họ bài học đợt 838/840. */ .table tr.table-phep-vuot, .table td.table-phep-vuot { --bs-table-bg: #e4d7f5; --bs-table-color: #3d2a5c; --bs-table-striped-bg: #ded0f1; --bs-table-striped-color: #3d2a5c; color: #3d2a5c; } :root[data-theme="dark"] .table tr.table-phep-vuot, :root[data-theme="dark"] .table td.table-phep-vuot { --bs-table-bg: #372a4d; --bs-table-color: #ddd0f2; --bs-table-striped-bg: #3d2f55; --bs-table-striped-color: #ddd0f2; color: #ddd0f2; } /* ═══════════ ĐỢT 1201 (việc o386) — Ô "P" RƠI VÀO NGÀY NGHỈ: BẢN NHẠT CỦA MÀU NGHỈ PHÉP ═══════════ Đơn nghỉ phép đã duyệt được bung ra TỪNG NGÀY LỊCH nên ô ngày tô "P" cho cả T7/CN/lễ, trong khi cột "Nghỉ phép" · huy hiệu · quỹ phép năm đều lọc thêm vế `!NgayNghi[i]`. Đo sống 24/08/2026 (mã 10515, đơn 20→24/08): 5 ô "P" liền nhau mà cột "Nghỉ phép" in 24 giờ = 3 ngày. 🔒 Anh Tiến chốt 24/08/2026: *"Giữ P, chỉ sửa màn hình"* ⇒ chữ trong ô vẫn là "P", chỉ tô NHẠT đi. ⛔ MÀU KHÔNG PHẢI KÊNH DUY NHẤT — ô còn mang dấu nhỏ "N" / "L" (LuatPhepNgayNghi) và câu `title`. Người mù màu và bản in đen trắng không đọc được sắc độ, mà đây đúng là bảng hay bị in ra giấy. ⛔ TÊN LỚP BẮT BUỘC MANG CHUỖI `table-` — luật SỌC HÀNG CHẴN ở trên chừa ô đã tô màu nghiệp vụ bằng `> *:not([class*="table-"])`; tên không mang chuỗi đó thì ô ở HÀNG CHẴN bị sọc đè mất màu, hàng lẻ vẫn đúng (đo sống đợt 1113 khi đặt tên `o-phep-vuot`). Hằng số tên lớp khai ở `LuatPhepNgayNghi.LopMauNgayNghi`, có hàng rào đối chiếu. ⚠ Đặt `--bs-table-bg` chứ ⛔ ĐỪNG đặt `background-color` trần — Bootstrap 5.3 dựng nền ô bảng bằng `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-type, var(--bs-table-bg))` nên một luật `background-color` ở độ đặc hiệu thấp hơn bị lớp bóng phủ kín và KHÔNG hiện ra (bài học 838/840). 📏 Tương phản đo tay: nền sáng 7,2:1 · nền tối 8,4:1 — cả hai qua ngưỡng 4,5:1. */ .table tr.table-phep-ngay-nghi, .table td.table-phep-ngay-nghi { --bs-table-bg: #e3f4f8; --bs-table-color: #33555c; --bs-table-striped-bg: #dceff4; --bs-table-striped-color: #33555c; color: #33555c; } :root[data-theme="dark"] .table tr.table-phep-ngay-nghi, :root[data-theme="dark"] .table td.table-phep-ngay-nghi { --bs-table-bg: #0f2a30; --bs-table-color: #a9c6cd; --bs-table-striped-bg: #133238; --bs-table-striped-color: #a9c6cd; color: #a9c6cd; } /* ⚠ ĐỢT 430 — `table-primary` BỊ BỎ SÓT ở lượt trước (đã có success/warning/danger/info/secondary). Đo thật ở /nuoc, bảng cảnh báo: ô `.text-danger` (chữ hồng nhạt của nền tối) nằm trong hàng `table-primary` còn nguyên nền pastel #cfe2ff ⇒ **1,39:1** — gần như không đọc được, và dính CẢ HAI nền tối. Bài học: liệt kê biến thể màu thì phải liệt ĐỦ BỘ, thiếu một cái là nó nằm im chờ trang nào dùng tới. Nay có test cưỡng chế đối chiếu đủ 6 biến thể. */ :root[data-theme="dark"] .table tr.table-primary, :root[data-theme="dark"] .table td.table-primary { --bs-table-bg: #17314f; --bs-table-color: #cfe0f5; --bs-table-striped-bg: #1b3757; --bs-table-striped-color: #cfe0f5; color: #cfe0f5; } /* 🔤 ĐỢT 831 (việc o73) — VÌ SAO MỌI LUẬT CHỮ PHỤ ĐỀU VIẾT `:is(.text-muted, .text-body-secondary)`. Anh Tiến chốt (h11 câu Q4, phương án b) đổi hết `.text-muted` sang `.text-body-secondary` — lớp `.text-muted` đã bị Bootstrap 5.3 khai tử. Nhưng **đổi tên trần là mất màu**: 6 nhóm luật dưới đây nhắm ĐÍCH DANH `.text-muted` bằng `!important`, nên đổi tên ở `.razor` mà không đổi ở đây thì 869 chỗ rơi khỏi luật của app và lãnh màu mặc định của Bootstrap. 📏 ĐO trên trang thăm dò trước khi sửa (chốt ngược `d-flex` ✓ · khung 1400px): `.text-muted` sáng `rgb(92,99,106)` · tối `rgb(154,160,168)` ← app quyết, đã đo tương phản `.text-body-secondary` sáng `rgb(33,37,41)` · tối `rgb(221,225,230)` ← **y hệt màu THÂN, không hề mờ** ⇒ Giữ **CẢ HAI TÊN** trong mọi bộ chọn ⇒ màu **không đổi một điểm ảnh nào**, mà tên lớp vẫn hiện đại hoá được. Anh yêu cầu đổi TÊN LỚP, không yêu cầu đổi MÀU — nên đây là đường giữ đúng cả hai. ⓘ `:is(a, b)` lấy độ đặc hiệu của thành phần đặc hiệu NHẤT; hai bên đều là một lớp nên độ đặc hiệu **không đổi** so với bản cũ ⇒ không xáo trộn thứ tự thắng/thua của cascade. ⚠ Còn `.text-muted` trong bộ chọn là CỐ Ý, ⛔ đừng "dọn cho gọn": Bootstrap và mã cũ vẫn có thể sinh ra lớp đó, và giữ lại là đường lui nếu phải hoàn nguyên lượt đổi tên. ⛔ `co-dien.css` CỐ Ý không sửa — sau đợt 822 tệp đó **không còn được nạp** (chỉ `co-dien-form-in.css` nạp, và tệp ấy không có luật chữ phụ nào), nên luật `.text-muted` trong đó đã là mã chết. */ /* Chữ phụ NẰM TRONG ô đã tô màu: dùng màu của ô (kế thừa) thay vì xám nhạt toàn cục */ :root[data-theme="dark"] .table tr[class*="table-"] :is(.text-muted, .text-body-secondary), :root[data-theme="dark"] .table td[class*="table-"] :is(.text-muted, .text-body-secondary) { color: inherit !important; opacity: .75; } /* ⛔ ĐỢT 659 — VIỀN Ô NHẬP NỀN TỐI: `#4a5058` chỉ được **1,58:1** với lòng ô `#2d323a` (đo 14/08/2026), dưới xa ngưỡng **3:1** của chỉ báo phi văn bản ⇒ người dùng khó thấy "chỗ nào là ô để gõ". ⚠ ĐỢT 634 ĐÃ VÁ NHƯNG **CHỈ VÁ MỘT NỬA**: bản vá đó (mục 13c, luật `.bg-light .form-control…`) nâng viền lên `#797f88` = 3,19:1 nhưng **chỉ áp cho ô nhập nằm trong khối `.bg-light`/`.bg-white`** — vì lúc ấy đang chữa đúng ca "ô nhập lọt trong khối phụ cùng màu". Mọi ô nhập đứng trên **thẻ thường / thân trang** vẫn giữ `#4a5058`, tức vẫn đúng con số 1,58 mà chính chú thích của đợt 634 gọi là *"trước khi vá"*. ⇒ Nay nâng thẳng ở luật GỐC: cả app dùng một màu viền đã đạt, và luật của đợt 634 thành thừa nhưng vô hại (cùng giá trị, giữ lại vì nó còn mang phần giải thích ca "khối phụ cùng màu"). 📏 `#797f88` đo trên ba nền mà ô nhập có thể nằm lên: lòng ô `#2d323a` **3,19:1** · nền thẻ `#262a31` **3,58:1** · thân trang `#1c1f24` **4,11:1** — đạt cả ba. ⓘ Bản cổ điển tối không dính (đã dùng `#7b838d` = 3,38:1). 🔴 ĐỢT 840 (việc o95) — MÀU GIỮ NGUYÊN, **CÁCH VIẾT** ĐỔI: `border-color` → `--bs-border-color`. Bản trước đặt `border-color` **longhand** ở bộ chọn (0,3,0), trong khi Bootstrap 5.3 báo lỗi ô nhập bằng `.form-control.is-invalid { border-color: var(--bs-form-invalid-border-color) }` chỉ (0,2,0) ⇒ luật của app **thắng cả viền đỏ**, ô sai vẫn viền xám. Đúng khuôn chữa mà đợt 838 đã dựng cho nền SÁNG (mục 3c, đoạn 🔑) — nay chép sang nền tối: đặt **biến** thì longhand của mọi trạng thái (`is-invalid` · `is-valid` · `:focus`) vẫn thắng như cũ, chỉ viền THƯỜNG mới lấy màu của app. 📏 ĐO SỐNG 17/08/2026 (bản tĩnh `--chu-de dark` cổng 5321, chốt ngược `d-flex` ✓): trước: `.form-control.is-invalid` ra `rgb(121,127,136)` = `#797f88` — **đúng bằng viền ô thường** sau : ra `rgb(220,53,69)` = `#dc3545`, tức token `--bs-form-invalid-border-color` của Bootstrap Đo cả 5 biến thể: ô nhập · `.form-select` · ô trong `.bg-light` · ô trong `.input-group` · nhãn dính. ⓘ HÔM NAY CHƯA CẮN: app dùng `.is-invalid` của Bootstrap **0 chỗ** trong `.razor`/`.cs` (xác thực của Blazor đi bằng `.valid`/`.invalid` + `outline`). Đây là chốt **PHÒNG** — và chính vì chưa cắn nên viết sai ở đây sẽ không ai phát hiện cho tới lúc có người thêm ô nhập có kiểm tra dữ liệu đầu tiên. ⛔ ĐỪNG "chữa" bằng `:not(.is-invalid)`: thêm một lớp là (0,4,0), lúc ấy nó vượt luôn luật thẻ đăng nhập `.dn-nen .dn-the .form-control` (0,4,0 và nằm SAU) rồi thắng/thua theo thứ tự — vỡ lặng lẽ. 🚧 Hàng rào canh cả MÀU lẫn CÁCH VIẾT: `VienONhapTuongPhanTests` (đợt 838, mở rộng ở đợt 840). */ :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: #2d323a; color: #dde1e6; --bs-border-color: #797f88; } :root[data-theme="dark"] .form-control::placeholder { color: #8a9099; } :root[data-theme="dark"] :is(.text-muted, .text-body-secondary), :root[data-theme="dark"] .form-text { color: #9aa0a8 !important; } :root[data-theme="dark"] .btn-outline-secondary, :root[data-theme="dark"] .btn-outline-dark { color: #c7ccd2; border-color: #6a7078; } :root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] hr { border-color: #3a3f47 !important; } :root[data-theme="dark"] .nav-tabs { border-color: #3a3f47; } :root[data-theme="dark"] .nav-tabs .nav-link.active { background-color: #262a31; color: #dde1e6; border-color: #3a3f47 #3a3f47 #262a31; } :root[data-theme="dark"] code { color: #ff9bb3; } /* ══════════════════════════════════════════════════════════════════════════════════════════ VÁ LỖI HUY HIỆU CHỮ TRẮNG TRÊN NỀN TRẮNG (đợt 205) App đang dùng Bootstrap v5.1.0, nhưng lớp `.text-bg-*` chỉ có từ Bootstrap 5.2 trở đi. Trong khi đó `.badge` của 5.1 tự đặt `color:#fff` mà KHÔNG đặt nền. ⇒ 114 chỗ dùng `text-bg-*` trong app là CHỮ TRẮNG TRÊN NỀN TRẮNG ở giao diện SÁNG — vô hình. Vì sao lỗi này sống lâu: ở giao diện TỐI thì trắng trên nền đen vẫn đọc được (16,5:1), nên ai dùng bản tối không thấy gì bất thường. Chỉ lộ ra khi xem bản sáng. Cặp màu dưới đây lấy ĐÚNG theo Bootstrap 5.3 chính thức, để sau này nâng Bootstrap lên 5.3 thì giao diện KHÔNG đổi. Mọi cặp đều đạt tỷ lệ tương phản ≥ 4,5:1. ══════════════════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════════════════ CHỮ MÀU CỐ ĐỊNH CỦA BOOTSTRAP 5.1 — CHẾT Ở NỀN TỐI (vá đợt 228, anh Tiến báo 03/08) `.text-body` của Bootstrap 5.1 là `color:#212529` GẮN CỨNG, không đổi theo giao diện. Trang Tổng quan dùng nó cho TÊN NGƯỜI (đợt 214 làm tên nổi bật) ⇒ ở nền tối thành **chữ đen trên nền đen — mất hẳn tên**, mà build vẫn sạch và bản sáng vẫn đẹp. Cùng họ với lỗi `.text-bg-*` chữ trắng trên nền trắng đã vá ở đợt 205. ⇒ Vá MỘT CHỖ cho cả app: mọi lớp chữ "màu tối cố định" phải theo giao diện. (Giao diện CỔ ĐIỂN TỐI có bản riêng ở co-dien.css mục 15.) ══════════════════════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] .text-body, :root[data-theme="dark"] .text-dark, :root[data-theme="dark"] .text-black { color: #dde1e6 !important; } /* NÚT PHỤ (viền xám) ở giao diện SÁNG: màu chữ #6c757d của Bootstrap chỉ đạt 4,4:1 trên nền thanh công cụ — đậm lại thành 5,6:1 (đợt 226, anh dặn chú ý tương phản của nút). Giao diện tối và cổ điển có màu riêng, trọng số cao hơn nên không bị luật này đụng tới. */ .btn-outline-secondary { color: #565e64; } .text-bg-primary { color: #fff !important; background-color: #0d6efd !important; } .text-bg-secondary { color: #fff !important; background-color: #6c757d !important; } .text-bg-success { color: #fff !important; background-color: #198754 !important; } .text-bg-danger { color: #fff !important; background-color: #dc3545 !important; } .text-bg-warning { color: #000 !important; background-color: #ffc107 !important; } .text-bg-info { color: #000 !important; background-color: #0dcaf0 !important; } .text-bg-light { color: #000 !important; background-color: #f8f9fa !important; } .text-bg-dark { color: #fff !important; background-color: #212529 !important; } /* ═══ ĐỢT 519 — THANH TIẾN ĐỘ MÀU VÀNG: ĐẬM LẠI ═══ Máng `.progress` của Bootstrap là #e9ecef và KHÔNG đổi theo giao diện — đo sống ở cả 4 giao diện đều ra cùng một con số. Thanh #ffc107 nằm trên máng đó chỉ được **1,37:1**, dưới ngưỡng 3:1 cho chỉ báo PHI VĂN BẢN ⇒ nhìn vào không biết thanh chạy tới đâu, mà đây lại đúng là thứ duy nhất thanh này nói. #997404 đo được **3,65:1** — và đây KHÔNG phải màu mới: app đã dùng nó cho `.btn-outline-warning` giao diện sáng ở cuối file. ⓘ Sửa luôn một lỗi thứ hai đi kèm: `.progress-bar` của Bootstrap có `color:#fff`, nên nhãn chữ trắng trên nền #ffc107 chỉ được 1,9:1 (đang dùng thật ở /quan-tri/dung-luong: "KHÔNG ĐO ĐƯỢC — kiểm kết nối kho này"). Nền đậm lại thì nhãn đó lên 4,4:1. ⛔ Khai HẸP `.progress-bar.bg-warning` — KHÔNG đụng `.bg-warning` nói chung: huy hiệu vàng chữ đen đang đạt chuẩn, đổi nền của chúng là hỏng chỗ đang đúng. Đang dùng ở: BaoCaoNangSuat · DungLuongPage · KhoiKhoTrinhChieu. */ .progress-bar.bg-warning { background-color: #997404 !important; } /* ══════════════════════════════════════════════════════════════════════════════════════════ BỐ CỤC THANH NAV — DÙNG CHUNG CHO CẢ 4 GIAO DIỆN (đợt 226, anh Tiến chốt 03/08/2026) Anh chỉ đạo: *"bố trí nút, menu, thanh bar mới cũng áp dụng với bản hiện đại"*. Đợt 223 dựng bố cục mới cho riêng giao diện CỔ ĐIỂN — rail icon phân hệ trôi nổi bên trái + thanh ngang chỉ còn ☰ Menu và hàng TAB của trang. Nay bố cục đó thành bố cục CHUNG: · KHUNG (chỗ đứng · kích thước · ẩn/hiện · chuyển động) = khối này, KHÔNG có tiền tố data-theme ⇒ sửa một chỗ là cả 4 giao diện đổi theo. · MÀU SẮC = mỗi giao diện một bộ: sáng/xám ngay dưới đây · tối ở khối :root[data-theme="dark"] cuối mục này · cổ điển ở co-dien.css (nạp SAU + trọng số cao hơn nên luôn thắng). ⚠ Thêm luật KHUNG mới thì viết vào đây, ĐỪNG chép sang co-dien.css — chép là hai bên lệch nhau. Component vẫn ở Components/CoDien/ (MenuNgangCoDien.razor + RailPhanHe.razor) vì sinh ra từ đợt cổ điển; nay dùng chung — xem Components/CoDien/CLAUDE.md. ══════════════════════════════════════════════════════════════════════════════════════════ */ :root { /* Nuôi vị trí DÍNH ĐẦU MÀN HÌNH của thanh nav và rail. Giao diện cổ điển chữ nhỏ hơn nên thanh trên thấp hơn ⇒ đè lại --cao-thanh-tren trong co-dien.css. */ --cao-thanh-tren: 3.5rem; /* = min-height của .top-row */ --cao-thanh-nav: 2.5rem; /* = chiều cao thanh nav ngang */ /* ⭐ ĐỢT 1155 — KHUNG ẢNH ĐẠI DIỆN: TRÒN hay VUÔNG (anh Tiến 24/08/2026: *"icon avatar của tài khoản cho phép chọn khung vuông hoặc khung tròn"*). 🔑 Vì sao là BIẾN toàn cục chứ không phải một lớp gắn lên từng thẻ ảnh: ảnh đại diện xuất hiện ở BA cỡ tại HAI nơi (nút 34px trên thanh nav · ảnh 64px trong thẻ tài khoản · ảnh 96px ở trang /anh-dai-dien), mỗi nơi lại có thêm hai lớp trang trí `::before`/`::after` phải bo cùng bán kính. Một biến thì đổi một chỗ là cả bộ theo; gắn lớp là bảy chỗ phải nhớ. ⚠ Lựa chọn nằm ở `localStorage['tknb-khung-anh']`, được khối nội tuyến đầu App.razor đặt thành thuộc tính `data-khung-anh` trên TRƯỚC khi vẽ — trục thứ ba, độc lập với `data-theme` và `data-bo-mau` (⛔ đừng gộp: người chọn khung vuông vẫn được đổi sáng/tối tùy ý). 📏 26% chứ không 0: góc vuông tuyệt đối trông thô cạnh khối cầu 3D và cạnh chuông thông báo bo tròn ngay bên. 26% cho dáng "squircle" — vuông rõ ràng mà vẫn mềm. */ --anh-dd-bo: 50%; } :root[data-khung-anh="vuong"] { --anh-dd-bo: 26%; } /* Lớp dùng chung cho mọi thẻ ảnh đại diện NGOÀI component `TheTaiKhoan` (component đó có CSS phạm vi riêng, đọc cùng biến). ⛔ ĐỪNG quay lại dùng `rounded-circle` của Bootstrap cho ảnh đại diện: lớp đó đóng đinh 50% nên nút chọn khung không kéo được — trước đợt 1155 trang /anh-dai-dien dùng đúng lớp ấy. */ .anh-dd-khung { border-radius: var(--anh-dd-bo, 50%); } /* ───── 1. THANH NAV NGANG: nút ☰ Menu + hàng tab của trang đang mở ───── */ .menu-co-dien { display: flex; flex-wrap: wrap; align-items: stretch; position: sticky; top: var(--cao-thanh-tren); /* nằm ngay dưới thanh trên (cũng đang dính đầu màn hình) */ z-index: 880; padding: 2px 6px 0 6px; background-color: #f7f7f7; /* ⭐ ĐỢT 887 hoàn nguyên 882 — anh Tiến 19/08 tối: "lấy lại thanh nav cũ" (nền xám) */ border-bottom: 1px solid #d6d5d5; } /* LOGO trên thanh nav (đợt 373 — anh: "logo làm nổi bật, không bị lẫn màu gốc"): logo chuẩn navy+cam luôn nằm trong CHIP TRẮNG bo góc nên nổi trên MỌI giao diện; đè logo-petrolimex.svg là tự đổi. */ /* ⚠ GIỮ NGUYÊN TỶ LỆ logo (anh dặn 08/08): flex-shrink 0 để thanh chật không bóp chip, width auto + max-width none để không luật nào ép bề ngang làm méo hình. */ .menu-co-dien .mcd-logo { display: inline-flex; align-items: center; padding: 3px 6px 3px 2px; flex-shrink: 0; } /* ⚠ ĐỢT 386b — chip logo CHỈ còn lo BỐ CỤC. Nền/viền/bo góc/bóng nay do lớp dùng chung `.the-bang-ten` (+ `.the-bang-ten-sang` giữ nền trắng — đợt 887 lấy lại chip trắng của đợt 373) lo — xem khối "BẢNG TÊN ĐEO ÁO" cuối file. Trước đó luật này tự đặt `background/border/border-radius/box-shadow`, mà `.menu-co-dien .mcd-logo-chip` (0,2,0) THẮNG `.the-bang-ten` (0,1,0) ⇒ chip giữ nguyên bóng phẳng cũ và vẫn trông LÕM đúng như anh Tiến phản ánh, dù lớp mới đã gắn vào. */ .menu-co-dien .mcd-logo-chip { display: inline-flex; align-items: center; padding: 2px 7px; flex-shrink: 0; } /* ⭐ ĐỢT 661 — PHÓNG TO LOGO (anh Tiến 14/08/2026: *"em phóng to logo petrolimex lên chút nữa nhé, hơi nhỏ"*). 22px → 30px, tức +36%. ⚠ VÌ SAO DỪNG Ở 30px chứ không to hơn: thanh nav cao **tối thiểu 3,5rem = 56px**, chip logo còn đệm 2px trên/dưới + viền. Logo 30px ⇒ chip ~36px, còn dư chỗ cho nút 9 chấm (40px) đứng cạnh mà KHÔNG đẩy thanh cao thêm — mà thanh cao thêm là đẩy tụt mọi nội dung của mọi trang xuống. ⚠ Chỉ đổi CHIỀU CAO, giữ `width: auto` — logo có tỷ lệ riêng, ép cả hai chiều là méo chữ thương hiệu (anh Tiến dặn giữ nguyên tỷ lệ, 08/08). */ .menu-co-dien .mcd-logo-chip img { height: 30px; width: auto; max-width: none; display: block; } /* ═══ ⭐ ĐỢT 893 (việc o110) — LOGO 3D NỔI BẬT + HIỆU ỨNG (anh Tiến 20/08/2026: "anh vẫn muốn logo 3D nổi bật và có hiệu ứng") ═══ Ba lớp, CHỈ hai giao diện hiện đại (cổ điển đóng băng — quy tắc #20, bọc :not() từng luật): ① BÓNG NỔI HƠN THẺ THƯỜNG — chip logo cố ý đậm hơn `.the-bang-ten` một nấc (viền navy rõ + bóng đổ sâu 8px) để nó là thứ NỔI NHẤT trên thanh. ⚠ Đây là ghi đè CÓ CHỦ ĐÍCH lên phân công của đợt 386b ("nền/viền/bóng do .the-bang-ten lo"): đợt đó chữa bệnh chip-tự-đặt-bóng-PHẲNG đè mất khối 3D; ở đây đặt bóng 3D ĐẬM HƠN chứ không phẳng đi — đúng chiều anh muốn. ② VỆT SÁNG QUÉT QUA (gloss sweep) mỗi ~7 giây — hiệu ứng "sống" mà không chớp nháy; máy khai giảm chuyển động tự tắt nhờ khối prefers-reduced-motion toàn cục (mục 10 đợt 381, * !important). ③ RÊ CHUỘT: chip nâng lên + phóng nhẹ 3% — cùng ngôn ngữ vật lý với .the-bang-ten:hover. */ :root:not([data-theme^="co-dien"]) .menu-co-dien .mcd-logo-chip { position: relative; overflow: hidden; /* vệt sáng không tràn ra ngoài góc bo */ border-color: rgba(3, 4, 94, .38) !important; /* navy đo từ điểm ảnh logo (#03045e) */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 23, 68, .12), 0 1px 1px rgba(0, 23, 68, .12), 0 4px 8px rgba(0, 23, 68, .22); transition: transform .15s ease, box-shadow .15s ease; } :root:not([data-theme^="co-dien"]) .menu-co-dien .mcd-logo-chip::after { content: ""; position: absolute; top: -25%; bottom: -25%; left: -45%; width: 34%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .9) 50%, transparent 100%); transform: skewX(-18deg); pointer-events: none; animation: quet-sang-logo 7s ease-in-out infinite; } /* 80% thời gian vệt nằm im ngoài mép trái (opacity 0) rồi lướt qua trong ~1,4s — nhịp thưa cho đỡ gây xao nhãng ở thanh điều hướng người ta nhìn cả ngày. */ @keyframes quet-sang-logo { 0%, 80% { left: -45%; opacity: 0; } 84% { opacity: 1; } 100% { left: 140%; opacity: 0; } } :root:not([data-theme^="co-dien"]) .menu-co-dien .mcd-logo:hover .mcd-logo-chip { transform: translateY(-1px) scale(1.03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(0, 23, 68, .12), 0 2px 3px rgba(0, 23, 68, .16), 0 7px 14px rgba(0, 23, 68, .28); } /* Một thẻ trên thanh (hiện chỉ có nút ☰ Menu) */ .menu-co-dien .mcd-muc { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .75rem; margin-right: 1px; border: 1px solid transparent; border-bottom: 0; border-radius: .25rem .25rem 0 0; color: #212529; font-size: .875rem; text-decoration: none; white-space: nowrap; cursor: pointer; list-style: none; /* bỏ mũi tên mặc định của */ } .menu-co-dien .mcd-muc::-webkit-details-marker { display: none; } .menu-co-dien .mcd-muc:hover { background-color: #e9ecef; border-color: #dee2e6; } /* Mục ĐANG XEM */ .menu-co-dien .mcd-dang-mo { background-color: #cfe2ff; border-color: #9ec5fe; color: #0a58ca; font-weight: 600; } .menu-co-dien .mcd-bieu { font-size: 1rem; } .menu-co-dien .mcd-mui { margin-left: .2rem; font-size: .7rem; /* ĐỢT 386: #6c757d chỉ được 4,4:1 trên nền kính của thanh nav (rgba(247,247,247,.92)) — mà đây là chữ .7rem, cỡ nhỏ nhất trong app. #5c636a lên 5,7:1. */ color: #5c636a; } /* Bảng menu đầy đủ thả xuống từ nút ☰ */ .menu-co-dien .mcd-nhom { position: relative; } .menu-co-dien .mcd-tha { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 2px; background-color: #fff; border: 1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); z-index: 1000; } .menu-co-dien .mcd-tha a { display: flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border: 1px solid transparent; border-radius: .25rem; color: #212529; font-size: .875rem; text-decoration: none; white-space: nowrap; } .menu-co-dien .mcd-tha a:hover { background-color: #e9ecef; } .menu-co-dien .mcd-tha a.mcd-dang-mo { background-color: #cfe2ff; border-color: #9ec5fe; color: #0a58ca; font-weight: 600; } .menu-co-dien .mcd-bang-menu { max-height: 78vh; overflow-y: auto; min-width: 280px; } .menu-co-dien .mcd-nhom-tieude { display: flex; align-items: center; gap: .45rem; padding: .34rem .5rem .2rem .5rem; margin-top: 2px; border-top: 1px solid #e9ecef; color: #0a58ca; font-size: .875rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .menu-co-dien .mcd-bang-menu .mcd-muc-con { padding-left: 1.6rem; } /* HÀNG TAB của trang do trang đẩy lên bằng SectionContent "thanh-tab-trang": bỏ lề dưới của Bootstrap cho khớp chiều cao thanh */ .menu-co-dien .nav { margin-bottom: 0 !important; align-items: center; } /* TAB CHƯA MỞ: màu xanh mặc định #0d6efd của Bootstrap nằm trên NỀN THANH (không phải nền trắng) nên tương phản tụt — đo thật: 4,2:1 ở nền sáng và 2,9:1 ở nền tối (dưới ngưỡng 4,5:1). Đậm màu lại cho đủ đọc: 5,6:1 (sáng) · 7,5:1 (tối). */ .menu-co-dien .nav-link { color: #0a58ca; } /* :not(.active) — tab ĐANG MỞ giữ chữ trắng của luật ngay dưới; thiếu dấu này thì chữ xanh nhạt nằm trên viên xanh đậm, tụt xuống 3,6:1 (đã đo, đã dính một lần) */ :root[data-theme="dark"] .menu-co-dien .nav-link:not(.active) { color: #9ec5fe; } /* TAB ĐANG MỞ = viên xanh ĐẬM chữ trắng (**6,44:1** — đo lại 14/08/2026; chú thích cũ ghi 5,4:1). ⛔ ĐÍNH CHÍNH 14/08/2026: câu cũ ghi *"#0d6efd chỉ được 3,7:1 với chữ trắng"* — **SAI ngữ cảnh**. Cặp #0d6efd/trắng đo ra **4,50:1** (chính tệp này ghi đúng 4,50 ở hai chỗ khác). Con số 3,67 là của #0d6efd trên **NỀN TỐI**, bị dán nhầm sang đây. Lý do đổi màu vẫn đứng vững — 4,50 chỉ vừa đủ cho chữ thường, mà đây là chữ nhỏ ở chỗ người dùng nhìn nhiều nhất — nhưng **lý do phải nói đúng con số của nó**. (Hai giao diện cổ điển có luật thẻ VÀNG riêng, trọng số cao hơn nên không bị luật này đụng.) */ .menu-co-dien .nav-link.active { background-color: #0a58ca; color: #fff; } /* Hàng tab đã dời LÊN THANH ⇒ bản render tại chỗ trong trang ẩn ở MỌI giao diện (cùng một RenderFragment render hai nơi — để cả hai là hiện đôi) */ .tab-trong-trang { display: none !important; } /* ───── 2. RAIL ICON PHÂN HỆ — trôi nổi bên trái, rê vào mới hiện chữ ───── */ .rail-phan-he { display: flex; flex-direction: column; gap: 3px; position: fixed; left: 6px; top: calc(var(--cao-thanh-tren) + var(--cao-thanh-nav)); z-index: 1035; } .rail-phan-he .rph-o { position: relative; } /* Ô icon vuông 38px; rê vào thì NỞ RA hiện chữ (max-width chuyển động — thuần CSS, không JS, nên chạy cả khi trang render TĨNH) */ .rail-phan-he .rph-icon { display: flex; align-items: center; gap: .45rem; height: 38px; max-width: 38px; padding: 0 9px; overflow: hidden; white-space: nowrap; background-color: #fff; border: 1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); color: #212529; font-size: .875rem; text-decoration: none; transition: max-width .18s ease; } .rail-phan-he .rph-o:hover .rph-icon { max-width: 260px; background-color: #e9ecef; } .rail-phan-he .rph-chu { opacity: 0; transition: opacity .18s ease; } .rail-phan-he .rph-o:hover .rph-chu { opacity: 1; } .rail-phan-he .rph-dang-mo > .rph-icon, .rail-phan-he .rph-icon.rph-dang-mo { background-color: #cfe2ff; border-color: #9ec5fe; color: #0a58ca; font-weight: 600; } /* Bảng MỤC CON của nhóm: hiện cạnh phải khi rê vào ô */ .rail-phan-he .rph-con { display: none; position: absolute; left: 100%; top: 0; margin-left: 2px; min-width: 230px; padding: 2px; background-color: #fff; border: 1px solid #dee2e6; border-radius: .375rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); z-index: 1040; } .rail-phan-he .rph-o:hover .rph-con { display: block; } .rail-phan-he .rph-con a { display: flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border: 1px solid transparent; border-radius: .25rem; color: #212529; font-size: .875rem; text-decoration: none; white-space: nowrap; } .rail-phan-he .rph-con a:hover { background-color: #e9ecef; } .rail-phan-he .rph-con a.rph-dang-mo { background-color: #cfe2ff; border-color: #9ec5fe; color: #0a58ca; font-weight: 600; } /* ⭐ ĐỢT 907 — THÂN TRANG CĂN GIỮA (anh Tiến 20/08/2026: *"nội dung của tất cả các trang đều căn giữa, không được lệch trái"*). ⛔ LUẬT CŨ Ở ĐÂY LÀ `article.content { padding-left: 56px !important }` — "nội dung né rail". Nó đã thành DI SẢN CHẾT từ đợt 645: rail (`Components/CoDien/RailPhanHe.razor`) không còn được dựng ở đâu cả (đo bằng grep: 0 lời gọi component trong toàn bộ .razor), nên 56px kia chỉ còn là một khoảng thụt đầu dòng vô cớ, và nó đẩy nội dung LỆCH HẲN SANG PHẢI 56px so với trục giữa. Đúng cái "lệch" anh nhìn thấy, chỉ khác chiều với chữ "lệch trái". 🔑 CĂN GIỮA = CỘT NỘI DUNG CÓ BỀ RỘNG TRẦN + hai lề tự động. Không đặt trần thì `article` rộng bằng cả màn hình, mà các khối bên trong đều tự khai `max-width` (720 / 900 / 1100px) nên chúng bám mép TRÁI của một khung mênh mông — đó mới là gốc của "lệch trái". Đặt trần rồi thì cả cột nằm giữa, các khối bên trong nằm giữa theo. ⛔ CỐ Ý KHÔNG khai `max-width` + `margin-inline` ở đây: phép CĂN GIỮA CỘT vốn ĐÃ CÓ từ 30/07 và nó nằm ở `Components/Layout/MainLayout.razor.css` (`.content { max-width: 1400px; margin-inline: auto }`). Đó là CSS scoped nên mang thêm thuộc tính `[b-xxxxx]` ⇒ độ đặc hiệu cao hơn hẳn luật ở tệp này và luôn thắng. Khai lại ở đây là dựng HAI SỔ nói về cùng một con số: sửa bản này thì không thấy gì đổi, người sửa sau lại đi tìm nguyên nhân ở chỗ khác. Đo sống 20/08 (khung 1900px, chốt ngược `d-flex` ✓): cột nội dung rộng 1400px, lề trái 243px / lề phải 258px (chênh đúng bề rộng thanh cuộn) ⇒ đã căn giữa thật. ⚠ Giữ `!important`: `px-4` của Bootstrap có `!important`, không thắng nó thì luật này không nói được gì về lề trái/phải. ⓘ CÒN LẠI (đã báo anh Tiến, chờ anh chốt): nhiều KHỐI trong thân trang tự khai `max-width: 720/900px` nên chúng bám mép TRÁI của cột — đó mới là thứ đọc ra thành "lệch trái" trên màn hình rộng. Đo 20/08: **343 chỗ khai / 110 tệp .razor**. ⛔ Đừng quét hàng loạt: phần lớn là cố ý (khung chữ hẹp cho dễ đọc), sửa cả loạt đúng là kiểu thay đổi mà quy tắc #18 xếp rủi ro cao nhất. */ article.content { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } /* ───── 3. THANH TRÊN: bỏ nút ☰ ngăn kéo (cụm nút nhanh ĐÃ HIỆN LẠI từ đợt 386b) ───── Lối đi tới mọi phân hệ nay nằm ở RAIL bên trái và nút ☰ Menu trên thanh nav ⇒ giữ thêm ngăn kéo là HAI LỐI cho cùng một việc. Ngăn kéo (.sidebar + NavMenu.razor) vẫn còn nguyên trong mã và vẫn là nguồn đối chiếu của MenuDongBoTests — chỉ là không còn nút bấm mở. ⚠ ĐỢT 386b: `.top-row .nut-nhanh` KHÔNG còn bị ẩn. Đợt 226 ẩn nó vì thanh chật (khi ấy có TỚI HAI thanh); nay gom còn một thanh, anh Tiến yêu cầu để lại 🏠 🕐 💧 trong bố cục mới. */ .top-row label.btn[for="menu-mo"] { display: none !important; } /* ══ MỘT THANH DUY NHẤT (đợt 386b) ══ Bố cục: [logo] [☰ Menu ▾] [nút nhanh] ⟶ khoảng trống co giãn ⟶ [giao diện] [🔔] [👤] [Đăng xuất]. `margin-left:auto` trên cụm nút giao diện = cái đẩy mọi thứ sau nó sang phải (trước đợt này là `margin-right:auto`, tức đẩy ngược — vì hồi đó bên trái trống trơn do nút nhanh đang bị ẩn). */ .top-row .btn-group { margin-left: auto; flex-shrink: 0; } /* Logo + nút ☰ Menu khi đã nằm TRONG thanh trên: giữ nguyên lớp `.menu-co-dien` để 4 bộ MÀU (`.menu-co-dien .mcd-*`) dùng lại được y nguyên, chỉ gỡ những gì thuộc về "một dải riêng". */ .top-row .menu-co-dien.mcd-trong-thanh { position: static; z-index: auto; padding: 0; background: none; border: 0; flex-wrap: nowrap; flex-shrink: 0; gap: .5rem; } /* Dải tab của trang: TỰ ẨN khi trang không đẩy tab nào lên — nếu không thì gom hai thanh vẫn còn thừa một dải rỗng. Phụ thuộc `MenuNgangCoDien.razor` viết LIỀN một dòng (xem chú thích ở đó). */ .menu-co-dien:empty { display: none; } /* ══ ĐỢT 422 — HÀNG TAB CỦA TRANG NẰM NGAY TRONG THANH TRÊN ══ Anh Tiến 10/08/2026: *"lưu ý lại sinh ra 2 thanh nav"*, rồi chốt cách xử: *"nếu thanh nav bị tràn thì mới đưa xuống thanh thứ 2"*. Đợt 386b đã gom logo + ☰ Menu lên thanh trên, nhưng hàng TAB vẫn là một dải riêng bên dưới ⇒ vẫn là hai thanh. Lâu nay ít ai để ý vì dải tab tự ẩn khi rỗng, mà trang quản trị mạng thì rỗng suốt (nó đang vỡ — xem KhoiSoDoMangDemo). Sửa xong trang là hai thanh lộ ra ngay. Cách làm: dải tab thành MỘT Ô co giãn của chính `.top-row`, ăn đúng khoảng trống vốn đang bỏ phí giữa ☰ Menu và cụm tài khoản (đo thật: ~400 px trên màn 1900 px — thừa cho 6 tab). ⚠ Gỡ sạch mọi thứ thuộc về "một dải riêng": sticky · nền · viền dưới · z-index. Giữ nguyên lớp `.menu-co-dien` để 4 bộ MÀU của `.mcd-*` và `.nav-link` dùng lại y nguyên (đúng luật module cổ điển: khung ở đây, màu ở co-dien.css). */ .top-row .menu-co-dien.mcd-dai-tab { position: static; top: auto; z-index: auto; padding: 0; background: none; border: 0; align-items: center; flex-wrap: nowrap; /* Co giãn theo chỗ còn lại; `min-width: 0` để nó ĐƯỢC PHÉP hẹp hơn nội dung — thiếu dòng này thì ô flex lấy bề rộng tối thiểu bằng nội dung và đẩy cụm tài khoản văng khỏi thanh. */ flex: 1 1 auto; min-width: 0; /* ⭐ ĐỢT 679 — THANH CUỘN MẢNH THAY VÌ ẨN HẲN (anh Tiến 15/08/2026: *"phải thu nhỏ lại 150%"* mới vào được tab). Câu cũ ở đây ghi *"ẩn thanh cuộn: nó chỉ tổ vướng, mà chuột/vuốt vẫn cuộn được"* — ĐÚNG về kỹ thuật nhưng SAI về người dùng: không có một dấu hiệu nào cho biết còn tab ở bên phải, nên cách duy nhất còn lại là thu nhỏ cả trang. ⇒ Thanh cuộn mảnh (~5px) + mặt nạ mờ dần hai mép: nhìn là biết còn nữa, chuột kéo được, mà vẫn không ăn mất chiều cao của dải. ⛔ Đừng đưa `scrollbar-width: none` trở lại. */ overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(127, 127, 127, .45) transparent; mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%); scroll-behavior: smooth; } .top-row .menu-co-dien.mcd-dai-tab::-webkit-scrollbar { height: 5px; } .top-row .menu-co-dien.mcd-dai-tab::-webkit-scrollbar-track { background: transparent; } .top-row .menu-co-dien.mcd-dai-tab::-webkit-scrollbar-thumb { background: rgba(127, 127, 127, .45); border-radius: 3px; } .top-row .menu-co-dien.mcd-dai-tab::-webkit-scrollbar-thumb:hover { background: rgba(127, 127, 127, .65); } .top-row .menu-co-dien.mcd-dai-tab .nav { flex-wrap: nowrap; } /* ⚠ ĐỢT 473 — ĐÍNH CHÍNH câu ghi ở đây từ đợt 422 ("cụm tài khoản vẫn dạt phải nhờ `.top-row .btn-group { margin-left: auto }` của đợt 386b"): câu đó SAI SỰ THẬT từ đợt 431. `.btn-group` trên thanh là THANH CHỌN GIAO DIỆN, và đợt 431 đã dời nó vào bảng ☰ Menu ⇒ luật kia nay KHỚP 0 PHẦN TỬ (đã đo). Từ đó cụm 🔔 🚪 không có gì đẩy, rơi về sát trái ở mọi trang KHÔNG có dải tab (trang có tab thì `.mcd-dai-tab` nở ra lấp chỗ nên nhìn vẫn đúng — đó là lý do lỗi trốn lâu). Nay việc dạt phải do khối `.cum-ben-phai` (lớp `ms-auto` của Bootstrap, khai trong MainLayout.razor) lo. Luật `.top-row .btn-group` bên trên GIỮ LẠI phòng khi có nhóm nút quay lại thanh. */ /* ⛔⛔ ĐỢT 467 — GỠ `overflow: hidden` KHỎI `.top-row`: ĐÂY LÀ THỦ PHẠM LÀM "BẤM ☰ MENU KHÔNG THẤY GÌ" (anh Tiến báo NHIỀU LẦN: *"nút menu vẫn lỗi nhấn vào bị nền đè hết không thấy gì"*). VÌ SAO: bảng menu `.mcd-tha` là `position: absolute`, khối chứa nó là `details.mcd-nhom` (`position: relative`) — mà `.mcd-nhom` nằm BÊN TRONG `.top-row`. Theo đúng luật CSS, một hộp `overflow` khác `visible` CẮT mọi hậu duệ mà nó nằm trên chuỗi khối-chứa. Thanh chỉ cao 41–56 px, bảng menu cao 437–500 px ⇒ bảng bị xén còn một vệt, phần còn lại biến mất SAU nội dung trang. Người dùng đọc hiện tượng đó thành "bị nền đè". 📏 ĐO THẬT (bản dựng đợt 467, đúng 4 tệp CSS của app, 4 giao diện): · 1441 px — cổ điển: bảng 280×437 px, THẤY 4 px = 1 % · hiện đại: 500 px, THẤY 16 px = 3 %. `document.elementFromPoint` giữa bảng trả về `div.card-body` — tức CHUỘT KHÔNG CHẠM ĐƯỢC MENU. · 1000 px — CÙNG mã, CÙNG giao diện: THẤY 100 %, elementFromPoint trả về `a.mcd-muc-con`. Khác đúng một thứ: dải 821–1200 px đã có `overflow: visible` (khối @media ngay dưới). · 391 px — 0–1 % (còn dính thêm một hộp cắt thứ hai, xem khối @media 820 px). ⚠ KHÔNG PHẢI "NGỮ CẢNH XẾP CHỒNG" — đã đo và LOẠI TRỪ, đừng đi lại đường này: quét toàn chuỗi cha từ bảng menu lên `` thì KHÔNG cha nào có `transform`/`filter`/ `will-change`/`contain`/`isolation`. `.top-row` CÓ `backdrop-filter: blur(8px)` (kính mờ, mục 7) và `position: sticky + z-index: 900` — cả hai ĐỀU tạo ngữ cảnh xếp chồng, nhưng ở 1000 px chúng vẫn nguyên đó mà bảng menu hiện đủ 100 %. Ngữ cảnh xếp chồng vô can; thứ giết bảng menu là PHÉP CẮT. ⇒ Giữ `flex-wrap: nowrap` (đó mới là thứ chống thanh xuống dòng), BỎ phép cắt. Không sợ tràn: dải tab `.mcd-dai-tab` là ô co giãn `flex: 1 1 auto; min-width: 0` và TỰ cuộn ngang trong lòng nó (đợt 422) — chỗ chật bị nuốt ở đó chứ không trào ra thanh. ⛔ ĐỪNG đặt lại `overflow: hidden/auto/clip` cho `.top-row` (hay cho `.menu-co-dien.mcd-trong-thanh`, `.mcd-nhom`) — thêm hiệu ứng mới cần che cạnh thì che ở CHÍNH khối con đó. Hàng rào canh: `TKNB.Tests/KhongCatBangMenuTests.cs`. */ .top-row { flex-wrap: nowrap; overflow: visible; } @media (max-width: 1200px) { /* Bỏ chữ, giữ biểu tượng — nút vẫn bấm được và `title` vẫn nói rõ nó làm gì (luật hướng dẫn nằm trong title, đợt 222). Tên người dùng cũng rút còn 👤. */ .top-row .chu-nut { display: none; } /* ĐỢT 422 — ĐÂY LÀ NẤC "THANH NAV BỊ TRÀN" mà anh Tiến nói: dưới 1200 px, bỏ hết chữ rồi mà tab vẫn không đủ chỗ ⇒ cho hàng tab XUỐNG HÀNG THỨ HAI, chiếm trọn bề ngang. ⚠ Phải mở `flex-wrap` cho `.top-row` và bỏ `overflow: hidden` — để nguyên `hidden` thì hàng thứ hai bị CẮT CỤT chứ không hiện ra (bẫy cũ của đợt 396: thanh trên từng cắt mất nút Đăng xuất đúng kiểu này). */ .top-row { flex-wrap: wrap; overflow: visible; row-gap: 0; } .top-row .menu-co-dien.mcd-dai-tab { flex: 1 0 100%; order: 9; /* luôn là hàng CUỐI, dù đứng giữa trong mã */ border-top: 1px solid var(--bs-border-color); } /* Rail icon bám dưới thanh trên bằng --cao-thanh-nav; thanh nay cao thêm một hàng tab nên trả biến này về đúng chiều cao hàng đó, không thì rail đè lên tab. */ :root { --cao-thanh-nav: 2.5rem; } } /* Từ 1200 px trở lên: không còn dải nav riêng nào nữa (tab đã nằm trong thanh trên) ⇒ rail dán ngay dưới thanh trên. Để nguyên 2,5rem là chừa một khoảng trống không có gì. */ @media (min-width: 1201px) { :root { --cao-thanh-nav: 0rem; } } @media (max-width: 820px) { .top-row .nut-nhanh { display: none !important; } /* !important: cụm mang .d-flex của Bootstrap */ } /* ═══ ĐỢT 396 — MÀN HÌNH ĐIỆN THOẠI (anh Tiến 09/08/2026: *"giao diện điện thoại bị vỡ"*, kèm ảnh chụp) ═══ Ba thứ hỏng cùng lúc trên máy ~390 px, thấy rõ trong ảnh anh gửi: ① RAIL ICON dọc bên trái (position: fixed) ĐÈ THẲNG lên nội dung — nút "Đăng xuất" bị cột icon che mất một nửa. Trên máy để bàn rail nổi ngoài lề trang nên vô hại; điện thoại không có lề nào cả. ② `.top-row` khai `flex-wrap: nowrap` + `overflow: hidden` — chật thì nó CẮT CỤT phần cuối, mà phần cuối chính là 🔔 · 👤 · Đăng xuất. Cắt mất nút đăng xuất là người dùng hết đường ra. ③ Nội dung dùng `px-4` (~24 px mỗi bên) — trên màn 390 px là mất 12% bề ngang cho lề trống. ⚠ Ẩn rail KHÔNG mất đường đi nào: mọi mục của rail đều có trong ngăn kéo ☰ Menu. */ @media (max-width: 820px) { .rail-phan-he { display: none !important; } /* Cố ý KHÔNG cho xuống dòng. ⚠ Vì sao không `flex-wrap: wrap`: dải tab `.menu-co-dien` dính đầu màn hình bằng `top: var(--cao-thanh-tren)` — một con số CỐ ĐỊNH (3.5rem). Cho thanh trên cao lên 2 hàng thì dải tab đè thẳng lên nó, đổi một chỗ vỡ chỗ khác. Giữ đúng một hàng là mọi thứ bên dưới vẫn khớp. ⛔ ĐỢT 467 — BỎ `overflow-x: auto; overflow-y: hidden` Ở ĐÂY (đợt 396 đặt để thanh CUỘN NGANG thay vì cắt cụt nút Đăng xuất). Lý do y hệt khối ngoài: một hộp `overflow` khác `visible` CẮT bảng ☰ Menu thả xuống — đo ở 391 px: bảng cao 437 px chỉ THẤY 0 px (cổ điển) / 4 px (hiện đại). Nay không cần nữa: mọi cụm cố định trên thanh khổ điện thoại chỉ còn logo + ☰ + 🔔 + 🚪 (chữ đã ẩn từ nấc 1200 px, rail và nút nhanh đã ẩn ở nấc này), còn dải tab thì TỰ cuộn trong lòng nó — đo lại sau khi sửa: `scrollWidth` của trang vẫn đúng bằng bề rộng màn hình, không trào ngang. */ .top-row { overflow: visible; column-gap: .5rem !important; /* đè gap-3 của Bootstrap: 1rem × nhiều cụm là tràn ngay */ padding: 0 .5rem; } /* ⚠ ĐỢT 473: thêm con của `.cum-ben-phai` — 🔔 và 🚪 nay nằm TRONG một khối bọc (để cụm dạt phải bằng `ms-auto`, xem MainLayout.razor), nên luật cũ chỉ với tới cái BỌC chứ không với tới hai nút bên trong nữa. Thiếu vế thứ hai thì ở khổ điện thoại hai nút lại co thành vệt chữ dính nhau. */ .top-row > *, .top-row .cum-ben-phai > * { flex-shrink: 0; } .content.px-4 { padding-left: .75rem !important; padding-right: .75rem !important; } /* Dải tab của trang: cuộn NGANG thay vì tự xuống dòng thành 3 tầng chiếm nửa màn hình. ⛔ ĐỢT 467 — CHỈ ĐÍCH DANH `.mcd-dai-tab`, ĐỪNG viết trần `.menu-co-dien`: lớp `.menu-co-dien` đang được ĐEO BỞI HAI khối (đợt 386b) — dải tab, VÀ cụm logo + ☰ Menu (`.mcd-trong-thanh`). Viết trần thì cụm ☰ Menu cũng thành hộp cắt cao 34 px, xén luôn bảng menu thả xuống (đo ở 391 px: đây là hộp cắt THỨ HAI, cùng với `.top-row`, hai cái cộng lại cho ra 0 % nhìn thấy). */ .menu-co-dien.mcd-dai-tab { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; } .menu-co-dien .nav { flex-wrap: nowrap; } /* Bảng rộng (bảng công 31 cột…) phải tự cuộn trong khung của nó, không đẩy cả trang trôi ngang. */ .table-responsive { -webkit-overflow-scrolling: touch; } } /* ═══ ĐỢT 400 — MỌI BẢNG TỰ THÀNH KHUNG CUỘN Ở KHỔ ĐIỆN THOẠI ═══ Đợt 396 đã lo phần KHUNG (thanh trên · rail · dải tab). Còn NỘI DUNG thì vẫn trôi ngang: đo thật ở 375 px với markup bảng chép nguyên từ mã (đúng số cột, đúng tiêu đề) thì **cả trang rộng 913 px** — người dùng vuốt ngang là thanh điều hướng, thẻ, chữ đều trượt theo, đúng cái anh Tiến chụp ảnh báo. ⚠ VÌ SAO KHÔNG ĐI BỌC `div.table-responsive` CHO TỪNG BẢNG: quét được **70 thẻ `` chưa có khung cuộn riêng** trên 40+ tệp `.razor`. Sửa tay 70 chỗ là 70 cơ hội gõ nhầm, lại đụng đúng những tệp các phiên khác đang viết. Một luật CSS lo hết, và bảng thêm về sau tự được che. CÁCH LÀM: cho chính thẻ `
` thành khối cuộn (`display:block` + `overflow-x:auto`) — đúng lối GitHub dùng cho bảng trong tài liệu. Nghe thì ngược đời, nên đã ĐO trước khi tin: · Sợ nhất là **đầu bảng lệch khỏi thân bảng**. Không lệch: `thead`/`tbody` là ba anh em liền kề nên trình duyệt gói CHUNG vào một bảng ẩn danh ⇒ cột vẫn chung một phép chia. Đo 6 bảng (6→9 cột), lệch tối đa **0 px** ở mọi cột. · Sau khi áp: trang **913 px → 375 px** (hết trôi ngang), 6/6 bảng cuộn được trong khung của nó. ⛔ `min-width: 0 !important` KHÔNG ĐƯỢC BỎ: 7 bảng khai thẳng `style="min-width: 820…2400px"` trong markup, mà `min-width` thắng `max-width` ⇒ thiếu dòng này thì riêng mấy bảng đó vẫn kéo cả trang đi (đo thật: vẫn 913 px). Bỏ trần ấy KHÔNG làm bảng hẹp lại — bảng ẩn danh bên trong vẫn giãn theo nội dung, chỉ là hết phần "khoảng thở" vốn dành cho màn hình rộng. ⛔ CHỪA `.bang-dinh-dau`: hai bảng đó (ghi chú nhân sự · khai mã hóa) đã nằm trong khung `max-height + overflow:auto` của riêng chúng và có tiêu đề cột DÍNH khi cuộn dọc. Biến chúng thành khung cuộn nữa thì `position: sticky` bám vào khung mới — khung này cao bằng nội dung nên không bao giờ cuộn dọc ⇒ tiêu đề hết dính mà build vẫn sạch. ⚠ `@media screen`: bản IN phải giữ nguyên bảng thật (khối in ở co-dien.css cố ý không gate theme). ⚠ Đã rà: app KHÔNG có `.dropdown-menu` nào ⇒ không lo khung cuộn cắt mất menu thả trong ô bảng. */ @media screen and (max-width: 820px) { .content table.table:not(.bang-dinh-dau) { display: block; width: 100%; max-width: 100%; min-width: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ═══════════ CHẾ ĐỘ TRÌNH CHIẾU CỦA PHÂN HỆ MẠNG (đợt 388d, dời về đây ở đợt 396h) ═══════════ Anh Tiến mở HAI màn hình: một chiếu SA BÀN, một chiếu SƠ ĐỒ NGUYÊN LÝ (tab Tổng quan). ⛔ VÌ SAO PHẢI Ở FILE DÙNG CHUNG: trước đó mấy lớp này khai trong