@charset "UTF-8"; /* ============================================================================ BỘ MÀU — LỚP ÁP DỤNG DÙNG CHUNG (đợt 608) ---------------------------------------------------------------------------- Mỗi tệp bộ màu chỉ khai BIẾN (`--bm-…`). Tệp này là nơi DUY NHẤT biến đó được đắp lên màn hình. Nhờ tách đôi như vậy, thêm một bộ màu mới = viết 15 con số, không phải viết lại một nghìn dòng CSS — xem HUONG-DAN-THEM-BO-MAU.md. (15 chứ không phải 14: `--bm-vach-dai` thêm ở đợt 1340. Nguồn sự thật là `LuatBoMauGiaoDien.BienBatBuoc` — đếm ở đó, đừng tin con số chép trong chú thích.) ═══ ĐỢT 1543 (30/08/2026) — ANH TIẾN CHỐT: TỆP NÀY ĐÓNG BĂNG, KHÔNG ĐI TIẾP ═══ Được hỏi thẳng *"chủ đề thứ tư có được ĐỔI TÔNG MÀU toàn app không"*, anh trả lời **KHÔNG — giữ chốt 26/08**: chủ đề chỉ thêm logo và hiệu ứng sự kiện. ⇒ Hệ quả phải hiểu cho đúng, đây là chỗ dễ đọc nhầm nhất của cả tệp: · Hôm nay MỌI bộ chọn dưới đây đều tự loại trừ đủ CẢ BA chủ đề đang có (`petro-co-dien` · `e10` · `ky-niem-81-nam`) ⇒ tệp này **không áp lên chủ đề nào cả**. Đó là ĐÚNG CHỦ Ý, không phải lỗi cần đi vá. · ⛔ ĐỪNG đi "dọn cho gọn", ⛔ đừng bỏ tệp, và ⛔ đừng đi vá bộ màu cho hợp với nó. Giữ nguyên là đường lui rẻ nhất nếu ngày nào anh đổi ý. · Muốn bật lại thì phải HỎI ANH TRƯỚC, và phải vá cặp `--bm-chinh` trên nền tối (đo 30/08: **1,64:1**, ngưỡng đọc được là 3:1 — nút chính chìm vào nền) rồi mở hàng rào tương phản ra cả ba tệp bộ màu, TRƯỚC khi cho một chủ đề nào ăn tệp này. ═══ SỐ ĐO LỊCH SỬ 38,2 % — CỦA MỘT HƯỚNG ĐÃ BỊ BÁC BỎ, ⛔ ĐỪNG ĐỌC THÀNH VIỆC CÒN PHẢI LÀM ═══ Khối đo dưới đây là của tháng 8/2026, khi còn tưởng chủ đề sẽ đổi tông toàn app. Anh Tiến bác bỏ hướng ấy ngày 26/08 và nhắc lại ngày 30/08 (xem khối ngay trên); HUONG-DAN-THEM-BO-MAU.md cũng đã ghi *"tỉ lệ 38,2 % CỐ Ý không đo lại — nó là con số của một câu hỏi không còn ai hỏi"*. Giữ lại vì nó là dấu vết VÌ SAO đã quyết như vậy, ⛔ không phải một việc còn dang dở. Đo 13/08/2026: app.css + co-dien.css có 926 mã màu VIẾT THẲNG trong phần luật và chỉ 23 lượt dùng biến ⇒ bốn chủ đề hiện nay không phải một bộ token mà là BỐN BẢN CHÉP TAY. Các luật dưới đây đè được 153 trên 401 khối luật có tô màu; 248 khối còn lại (bảng dữ liệu, các thành phần riêng của bản cổ điển, bảng tin, ô mất kết nối vẽ trên canvas) VẪN GIỮ MÀU CŨ khi đổi bộ màu. ⇒ Người dùng bấm đổi bộ màu sẽ thấy KHUNG đổi mà RUỘT không đổi. Đó là hiện trạng đã biết và đã đo, không phải lỗi. Muốn phủ trọn thì phải chuyển màu viết thẳng sang biến — ước lượng 4–6 đợt, xem mục cuối HUONG-DAN-THEM-BO-MAU.md. ⛔ ĐỪNG vá bằng cách thêm luật `!important` quét rộng ở đây: quét rộng là đúng con đường dẫn tới ca hỏng đợt 588 (một luật quét trúng thẻ bọc hình hiệu). ═══ CHỐT AN TOÀN SỐ 1: BỘ MẶC ĐỊNH KHÔNG ĂN LUẬT NÀO ═══ Mọi bộ chọn dưới đây đều mở đầu bằng :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) Đọc là: *"có chọn bộ màu, VÀ bộ đó không phải bộ mặc định"*. Máy nào chưa bấm gì thì thẻ không có data-bo-mau ⇒ không luật nào ở đây khớp ⇒ giao diện giữ nguyên từng pixel. Đúng quy tắc #17: cài bản mới không đổi màn hình của ai. ⛔ ĐỪNG viết luật nào ở đây mà thiếu đoạn chốt đó — hàng rào test sẽ ĐỎ, và đúng ra là phải đỏ: một luật hở là 433 người đổi giao diện lúc nửa đêm. ═══ DANH SÁCH MIỄN TRỪ ĐANG DÀI RA — VÌ SAO, VÀ ĐỪNG DỌN CHO GỌN ═══ Ngoài bộ mặc định, mỗi bộ chọn còn chừa thêm `e10` (đợt 1347) và `ky-niem-81-nam` (đợt 1433). Hai chủ đề ấy CỐ Ý không đổi một pixel màu nào: anh Tiến chốt 26/08/2026 *"việc đổi tông màu ảnh hưởng quá nhiều, em để về mặc định đi, chỉ thay đổi và bổ sung thêm các logo"* + *"chủ đề chỉ làm thêm vài hiệu ứng đặc biệt cho dễ kiểm soát"*. Chất sự kiện của chúng nằm ở BIỂU TƯỢNG và HIỆU ỨNG. 🔑 CHỖ DỄ HIỂU NGƯỢC NHẤT: hai tệp chủ đề ấy ĐÃ khai biến bằng đúng bộ mặc định rồi — nhưng thế VẪN CHƯA ĐỦ, nên mới phải miễn trừ thêm ở đây. Lý do: các luật dưới đây đắp biến lên những phần tử mà hôm nay app tô bằng MÃ MÀU VIẾT THẲNG (926 mã, xem mục đo ở trên), nên kể cả khi giá trị biến trùng khít bộ mặc định thì vẫn có chỗ xê dịch — đúng loại xê dịch anh đã báo một lần. ⛔ Đừng "dọn gọn" bằng cách bỏ bớt một `:not(…)`, và cũng đừng đảo chiều thành danh sách TRẮNG các chủ đề được áp: đảo chiều thì chủ đề mới nào quên khai sẽ lặng lẽ mất hết màu, tức đổi một lỗi thấy được lấy một lỗi câm. 🩸 ĐỢT 1543 — BA DÒNG TRƯỚC ĐÂY Ở ĐÂY DẠY NGƯỢC CHÍNH HÀNG RÀO ĐANG CANH, đã bỏ. Nguyên văn câu sai: *"Thêm chủ đề mới mà muốn nó ĐƯỢC đổi tông thì cứ để nguyên, ⛔ không phải khai gì ở đây."* Làm đúng câu ấy là **build ĐỎ NGAY**: `BoMauGiaoDienTests.Moi_luat_trong_lop_ap_dung_deu_mien_tru_MOI_chu_de_dang_khai` duyệt `LuatBoMauGiaoDien.DanhSach` và bắt **MỌI** chủ đề phải có một `:not(…)` ở **MỌI** mảnh bộ chọn của tệp này. ⇒ LUẬT ĐÚNG, một câu: **thêm chủ đề mới thì BẮT BUỘC thêm một `:not([data-bo-mau= ""])` vào mọi bộ chọn ở dưới** (đo 30/08: 40 dòng đang mang mẫu ấy) — sót một dòng là hàng rào gọi đích danh dòng đó. Đây ⛔ không phải lựa chọn: theo chốt của anh Tiến ngày 26/08 và 30/08 thì chủ đề ⛔ KHÔNG đổi tông màu, nên mọi chủ đề đều phải được loại trừ khỏi tệp này. ⛔ Và vẫn giữ nguyên điều cấm ở gạch trên: đừng đảo chiều thành danh sách TRẮNG — đảo chiều thì chủ đề mới nào quên khai sẽ lặng lẽ mất hết màu, tức đổi một lỗi thấy được lấy một lỗi câm. ═══ CHỐT AN TOÀN SỐ 2: HAI THỨ KHÔNG BAO GIỜ ĐỔI ═══ Anh Tiến 13/08/2026: *"khi chuyển bộ màu / trend thì favicon và hình hiệu công ty trên thanh nav KHÔNG đổi"*. ⚠ CA THẬT ĐỢT 588: luật `.bg-white:not(.badge)` của bản cổ điển-tối quét trúng thẻ trắng bọc hình hiệu Petrolimex ⇒ hình bị tối đi mà không ai chủ định. Bài học: thứ làm hỏng không phải một luật NHẮC TỚI nó, mà một luật QUÉT TRÚNG nó. ⇒ Ba điều tệp này giữ, và hàng rào test canh: (1) không có lấy một bộ chọn nào chạm `.bg-white`, `img`, `.navbar-brand`; (2) không dùng `filter` / `backdrop-filter` ở bất kỳ đâu — một dòng `filter: hue-rotate(…)` ở thẻ cha là đủ xoay màu hình hiệu bên trong mà trong tệp chẳng có chữ nào để mà nghi; (3) luật nào đổi màu CHỮ trên thanh trên thì chốt tới đúng phần tử chữ, không rải xuống mọi con cháu. ═══ CHỐT AN TOÀN SỐ 3: MÀU MANG NGHĨA NGHIỆP VỤ ═══ Số bất lợi ĐỎ · số có lợi XANH (luật dự án). Tệp này KHÔNG đụng .text-danger / .text-success / .table-success / .badge / --bs-danger… — một bộ màu "cho đẹp" mà nuốt màu cảnh báo là làm sai lệch thông tin trên phần mềm nhân sự. ============================================================================ */ /* ───── 1. NỀN TRANG + CHỮ ───── */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) body { background-color: var(--bm-nen); color: var(--bm-chu); } /* ✅ ĐỢT 869 (việc o104) — LỆNH CẤM CŨ Ở ĐÂY ĐÃ GỠ. Đợt 831 (việc o73) dặn ĐỪNG viết gọn bằng `:is(.text-muted, .text-body-secondary)` vì hàng rào `BoMauGiaoDienTests.Moi_luat_trong_lop_ap_dung_deu_chot_sau_bo_mac_dinh` tách bộ chọn bằng `Split(',')` trần nên cắt cả dấu phẩy BÊN TRONG `:is()` ⇒ ĐỎ OAN. Bộ tách đã chữa ở việc t25 (luật thuần `src/TKNB.Tests/LuatTachBoChonCss.cs`, tách theo độ sâu ngoặc) và cả bốn hàng rào tách bộ chọn CSS đã chuyển sang dùng nó ở việc o104 ⇒ `:is()` nay viết được bình thường. ⓘ Ba dòng dưới CỐ Ý giữ nguyên cách viết liệt kê: chúng đang chạy đúng, đổi cách viết một luật dùng chung chỉ để cho gọn là rủi ro lan truyền không có lợi ích (quy tắc #18). */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .text-muted, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .text-body-secondary, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .form-text { color: var(--bm-chu-mo) !important; } /* ───── 2. LIÊN KẾT ───── :not(.btn) giữ đúng khuôn app.css: nút dạng thẻ phải giữ màu nút, không thì màu liên kết đè lên làm chữ chìm trên nền nút. :not(.top-row *) — chữ trên thanh trên do mục 3 lo riêng theo màu dải. ⭐ ĐỢT 1215 (việc o404) — :not(.ten-ban-ghi) cùng một lẽ với :not(.btn): TÊN BẢN GHI trong bảng/danh sách CỐ Ý mang màu chữ thường, ⛔ không phải màu liên kết (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` bên app.css: luật ấy chỉ (0,1,1) còn dòng này (0,5,1) ⇒ bỏ ra là hễ ai bật một BỘ MÀU thì tên bản ghi xanh liên kết trở lại, trong khi người dùng bộ màu mặc định vẫn thấy đúng — hỏng lặng lẽ ở đúng một nhóm người. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) a:not(.btn):not(.ten-ban-ghi):not(.top-row *), :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .btn-link:not(.top-row *) { color: var(--bm-lien-ket); } /* ───── 3. DẢI THANH TRÊN ───── ⚠ !important là BẮT BUỘC ở đây, không phải cho chắc: app.css và co-dien.css đều đặt `.top-row { background-color: … !important }`, thua !important thì luật này câm lặng. `background-image: none` để gỡ dải kim loại gradient của bản cổ điển — thiếu dòng đó thì màu nền mới nằm dưới gradient, không ai thấy. ⛔ CHỈ đặt nền cho CHÍNH thanh, không đặt cho con cháu ⇒ thẻ trắng bọc hình hiệu công ty giữ nguyên nền trắng, hình hiệu vẫn nổi đúng như trước. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .top-row { background-color: var(--bm-dai) !important; background-image: none !important; border-bottom: 1px solid var(--bm-vien-ro) !important; } /* Chữ + nút chữ trên thanh trên. Chốt tới đúng thẻ chữ (a / label.btn / .btn) chứ không dùng `.top-row *` — quét cả con cháu là quét trúng cả thẻ bọc hình hiệu. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .top-row a, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .top-row label.btn, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .top-row .btn-outline-secondary, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .nut-nhanh .btn { color: var(--bm-chu-tren-dai); } /* Vạch nhấn dưới thanh trên — chi tiết "sự kiện" rẻ nhất mà thấy ngay. Dùng box-shadow chứ không thêm phần tử: không đụng cấu trúc HTML của ai. ⭐ ĐỢT 1340 (việc o541) — VẠCH NAY ĐỌC BIẾN RIÊNG `--bm-vach-dai`, ⛔ KHÔNG còn `--bm-phu-nen`. 🔑 Lý do là một ràng buộc ĐO ĐƯỢC, ⛔ không phải sở thích: anh Tiến chốt 26/08/2026 *"làm tông màu tươi sáng như trang petrolimex gốc"* ⇒ dải nav đổi từ xanh lá đậm sang TRỜI XANH (#0b5d3b → #0f7ab8). Nhưng cam Petrolimex #f88126 chỉ vượt 3:1 khi nằm trên nền RẤT tối: trên dải cũ được 3,09:1, trên dải mới chỉ còn **1,81:1** — vạch gần như tan vào nền. ⇒ Đã thử và BÁC BỎ ba lối khác: hạ dải cho tối lại (mất đúng thứ anh yêu cầu) · đổi sang cam nhạt (mất màu thương hiệu, mà #ffc08a cũng chỉ 2,93:1) · dùng `--bm-chinh` (xanh lá trên trời xanh = 1,04:1, tệ hơn hẳn). Tách biến là lối duy nhất giữ được CẢ hai. ⚠ Bộ mặc định vẫn khai `--bm-vach-dai: #f47b20` — nó ⛔ không đổi một pixel nào (bộ đó không có luật áp dụng), khai chỉ để hàng rào đếm đủ biến và để bộ màu sau có sẵn khuôn. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .top-row { box-shadow: inset 0 -3px 0 var(--bm-vach-dai, var(--bm-phu-nen)); } /* ───── 4. MENU CỔ ĐIỂN + RAIL PHÂN HỆ ───── Hai dải điều hướng của bản cổ điển. Cùng lý do !important như mục 3. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .menu-co-dien, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .rail-phan-he { background-color: var(--bm-dai) !important; background-image: none !important; border-bottom-color: var(--bm-vien-ro) !important; } :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .menu-co-dien .mcd-muc, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .menu-co-dien .mcd-mui, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .menu-co-dien .mcd-nhom-tieude { color: var(--bm-chu-tren-dai); } /* Bảng thả xuống của menu: nền THẺ (không phải nền dải) — nó nổi trên nội dung. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .menu-co-dien .mcd-tha, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .rail-phan-he .rph-con { background-color: var(--bm-nen-the); border-color: var(--bm-vien); } :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .menu-co-dien .mcd-tha a, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .rail-phan-he .rph-con a { color: var(--bm-chu); } /* ───── 5. THẺ / HỘP / BẢNG NỔI ───── */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .card, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .modal-content, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .accordion-item { background-color: var(--bm-nen-the); color: var(--bm-chu); border-color: var(--bm-vien); } /* Đầu/chân thẻ: pha nhẹ màu nhấn để đọc ra ngay đây là bộ màu nào. color-mix giữ đúng một nguồn sự thật (không phải khai thêm một biến nữa cho mỗi bộ màu); trình duyệt cũ không hiểu thì bỏ qua dòng này và rơi về nền thẻ — xấu hơn một chút chứ không vỡ, nên cố ý không có bản dự phòng. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .card-header, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .card-footer { background-color: color-mix(in srgb, var(--bm-chinh) 8%, var(--bm-nen-the)); color: var(--bm-chu); border-color: var(--bm-vien); } /* 🗂 HÀNG DANH SÁCH — ĐẶT BIẾN `--bs-list-group-*` TRÊN THẺ BỌC, ⛔ ĐỪNG TÔ THẲNG LÊN `.list-group-item` (đợt 1524, việc o646 — trả nợ đợt 1451). 🔴 VÌ SAO: Bootstrap 5.3 dựng hàng danh sách bằng BIẾN — `.list-group-item` đọc `--bs-list-group-bg/-color/-border-color`, còn các biến thể MANG Ý NGHĨA (`.list-group-item-warning` = thông báo CHƯA ĐỌC ở /thong-bao) và trạng thái `.active` (mục ĐANG CHỌN ở /cong-cu-dev/csdl · /thong-ke-nhiem-vu · /tong-quan-nhiem-vu) chỉ ĐẶT LẠI BIẾN ở (0,1,0) và (0,2,0). Bộ chọn của tệp này là (0,6,0) và tệp lại nạp SAU CÙNG ⇒ một dòng `background-color` phẳng ở đây XOÁ SẠCH mọi tín hiệu màu đó, mà màn hình vẫn "đẹp" và build vẫn xanh. 🔑 CHỖ DỄ LÀM NGƯỢC NHẤT: phải đặt biến trên THẺ BỌC `.list-group` (cha), ⛔ không phải trên `.list-group-item`. Custom property cũng theo cascade: khai ngay trên chính hàng ở (0,6,0) là đè luôn biến mà biến thể vừa đặt ở (0,1,0) — tức dựng lại đúng cái lỗ vừa bịt, chỉ khác cách viết. Khai trên cha thì hàng KẾ THỪA, còn biến thể khai TẠI CHỖ nên vẫn thắng. ✅ Nhờ đi bằng biến, MỌI trạng thái Bootstrap tự đúng theo mà ⛔ không phải liệt kê: 8 biến thể màu · `.active` · `:hover`/`:focus` của `.list-group-item-action` · và cả biến thể nào Bootstrap thêm về sau. Cùng khuôn với `--bs-border-color` của ô nhập (đợt 846, quy tắc #6): ĐẶT BIẾN, ⛔ đừng đặt thuộc tính cuối. ⚠ Hàng nào nằm NGOÀI thẻ bọc `.list-group` thì ⛔ không nhận màu bộ màu (biến không có ai khai ⇒ khai báo bị vứt ⇒ nền trong suốt). Đo 29/08/2026: 18/18 tệp .razor có dùng `list-group-item` đều có thẻ bọc — và `HangDanhSachTheoBoMauTests` canh việc đó, ĐỎ ngay khi có tệp đầu tiên dùng hàng danh sách mà quên thẻ bọc. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .list-group { --bs-list-group-color: var(--bm-chu); --bs-list-group-bg: var(--bm-nen-the); --bs-list-group-border-color: var(--bm-vien); /* Hàng BẤM ĐƯỢC (`.list-group-item-action`) có bộ biến RIÊNG. Bỏ qua nhóm này là chữ rơi về `--bs-secondary-color` của Bootstrap — xám đậm, và trên một bộ màu NỀN TỐI thì gần như đọc không ra. Đo 29/08 trên bộ màu thử nền tối: chữ ra rgba(33,37,41,0.75) trước khi khai năm dòng này. */ --bs-list-group-action-color: var(--bm-chu); --bs-list-group-action-hover-color: var(--bm-chu); --bs-list-group-action-hover-bg: color-mix(in srgb, var(--bm-chinh) 12%, var(--bm-nen-the)); --bs-list-group-action-active-color: var(--bm-chu); --bs-list-group-action-active-bg: color-mix(in srgb, var(--bm-chinh) 20%, var(--bm-nen-the)); /* Mục ĐANG CHỌN đi theo màu CHÍNH của bộ màu thay vì xanh mặc định của Bootstrap. ⚠ Hàng nào mang biến thể màu (`.list-group-item-warning`…) thì Bootstrap đã đặt lại đúng ba biến này NGAY TRÊN HÀNG (0,1,0) ⇒ biến thể vẫn thắng phần kế thừa ở đây, nên hàng CHƯA ĐỌC mà đang chọn vẫn giữ sắc cảnh báo của nó. */ --bs-list-group-active-color: var(--bm-chu-tren-chinh); --bs-list-group-active-bg: var(--bm-chinh); --bs-list-group-active-border-color: var(--bm-chinh); } /* ───── 6. Ô NHẬP ───── ⚠ Nền ô nhập lấy --bm-nen-the chứ không lấy --bm-nen: ô nhập phải TÁCH khỏi nền trang thì người dùng mới biết chỗ nào gõ được. 🖊 ĐỢT 846 (việc o99) — ĐẶT BIẾN `--bs-border-color`, ⛔ ĐỪNG QUAY LẠI `border-color`. Bootstrap 5.3 dựng viền ô nhập bằng SHORTHAND `border: … var(--bs-border-color)` ở `.form-control` (0,1,0); trạng thái lỗi `.form-control.is-invalid` đặt LONGHAND ở chỉ (0,2,0). Bộ chọn ở đây là (0,3,0) — cao hơn — nên viết longhand là NUỐT viền đỏ báo lỗi, hỏng LẶNG LẼ (viền thường vẫn đúng màu bộ màu, chỉ dấu hiệu "ô này sai" biến mất). Đặt BIẾN thì viền thường không đổi một pixel mà longhand của `.is-invalid` vẫn thắng. ⚠ Trục `data-bo-mau` ĐỘC LẬP với `data-theme` — hai trục cùng đặt biến này thì bên độ đặc hiệu cao hơn thắng, đúng như trước khi đổi. Cùng khuôn đợt 838 + 840; hàng rào `VienONhapTuongPhanTests` canh. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .form-control, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .form-select { background-color: var(--bm-nen-the); color: var(--bm-chu); --bs-border-color: var(--bm-vien-ro); } :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .form-control::placeholder { color: var(--bm-chu-mo); } /* Vòng lấy nét bàn phím — MANG THÔNG TIN (người dùng bàn phím không có gì khác để biết mình đang ở đâu) ⇒ dùng --bm-vien-ro, biến bắt buộc đạt 3:1. 🖊 VIỆC o98 (18/08/2026) — `border-color` LONGHAND ở đây là **CỐ Ý, đừng đổi thành `--bs-border-color`** như luật cơ sở ngay trên (đợt 846). Bootstrap 5.3 đặt viền lúc focus bằng LONGHAND `.form-control:focus { border-color: #86b7fe }` (0,2,0) — longhand ấy KHÔNG đọc biến; đo sống 18/08: đổi sang biến thì ô thường đang gõ tụt về `rgb(134,183,254)`, mất viền bộ màu. ⚠ Bộ chọn này (0,5,0) vẫn thắng `.form-control.is-invalid:focus` (0,3,0) của Bootstrap ⇒ nó CÓ nuốt viền đỏ báo lỗi (đo sống bộ màu E10: ô SAI đang gõ ra `rgb(11,93,59)`, y hệt ô thường). ✅ Lỗ đó **đã bịt bằng MỘT luật khôi phục ở (0,6,0)** đặt trong `app.css` mục 5 — bộ chọn `:root:is([data-theme],[data-bo-mau]) .form-control.is-invalid:focus:not(.dn-nen *)` phủ **cả hai trục**, và đã đo là thắng bằng ĐỘ ĐẶC HIỆU kể cả khi bị đặt trước mọi tệp khác. ⛔ ĐỪNG chép thêm một bản khôi phục sang đây: hai nơi giữ cùng một luật là hai sổ nói hai chuyện. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .form-control:focus, :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .form-select:focus { border-color: var(--bm-chinh); box-shadow: 0 0 0 .2rem var(--bm-vien-ro); } /* ───── 7. NÚT CHÍNH ───── ⛔ CHỈ .btn-primary. Các nút mang nghĩa nghiệp vụ (.btn-danger, .btn-success, .btn-warning) CỐ Ý đứng ngoài — xem CHỐT AN TOÀN SỐ 3 ở đầu tệp. */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .btn-primary { background-color: var(--bm-chinh); border-color: var(--bm-chinh); color: var(--bm-chu-tren-chinh); } :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .btn-primary:hover:not(:disabled), :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .btn-primary:focus:not(:disabled) { background-color: color-mix(in srgb, var(--bm-chinh) 85%, var(--bm-chu)); border-color: color-mix(in srgb, var(--bm-chinh) 85%, var(--bm-chu)); color: var(--bm-chu-tren-chinh); } :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .btn-outline-primary { color: var(--bm-chinh); border-color: var(--bm-chinh); } /* ───── 8. TAB ĐANG MỞ ───── */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .nav-tabs { border-color: var(--bm-vien); } :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) .nav-tabs .nav-link.active { background-color: var(--bm-nen-the); color: var(--bm-chinh); border-color: var(--bm-vien) var(--bm-vien) var(--bm-nen-the); border-bottom: 2px solid var(--bm-phu-nen); } /* ───── 9. ĐƯỜNG KẺ NGANG ───── */ :root[data-bo-mau]:not([data-bo-mau="petro-co-dien"]):not([data-bo-mau="e10"]):not([data-bo-mau="ky-niem-81-nam"]) hr { border-color: var(--bm-vien); }