/* ============================================================================= CHẾ ĐỘ SÁNG / TỐI — MỘT NƠI DUY NHẤT ĐỊNH NGHĨA MÀU CỦA CHẾ ĐỘ TỐI Người dùng (23/09): «làm full giao diện dark light nhé». Cách làm — và vì sao: 1. Không nhân đôi luật CSS cho từng chế độ. Toàn bộ site.css và control-chung.css đã lấy màu từ BIẾN (`--nen`, `--the-nen`, `--chu`, `--vien`, `--xanh`, `--o-nen`, `--luoi-*`…). Tệp này chỉ **định nghĩa lại chính những biến đó** — một chỗ, không đụng vào luật nào khác. Sửa một biến là cả site đổi theo. 2. Nạp SAU control-chung.css nên đè được biến của cả hai tệp; nạp TRƯỚC hoa-giai-portal.css để chỗ hoà giải vẫn là chỗ nói tiếng nói cuối cùng. 3. Ba nấc: `data-theme="sang"` · `data-theme="toi"` · `data-theme="he-thong"` (theo hệ điều hành). Máy chủ đặt sẵn thuộc tính trên thẻ từ cookie nên **không có cú nháy trắng** khi tải trang tối. 4. Thư viện của His_Site (Tabulator, Tom Select, flatpickr, Jodit, ECharts) là thư viện nền sáng và **không được sửa tệp gốc** (ADR-0018, có test canh). Lớp phủ cho chúng nằm ở cuối tệp này, chỉ trong chế độ tối. 5. Bản in LUÔN là chế độ sáng — nền tối in ra giấy vừa tốn mực vừa khó đọc. Xem khối @media print ở cuối. 6. Không style nội tuyến (CSP style-src 'self'): mọi thứ ở đây là CSS tĩnh; kịch bản chỉ đổi thuộc tính `data-theme` trên . ============================================================================= */ /* --------------------------------------------------------------------------- BẢNG MÀU TỐI. Nguyên tắc chọn số: · nền trang tối nhất, thẻ sáng hơn một bậc, tiêu đề thẻ sáng hơn nữa — giữ đúng thứ bậc của chế độ sáng; · chữ chính đạt ≥ 12:1 trên nền thẻ, chữ phụ ≥ 5:1 (WCAG AA cho chữ thường là 4,5:1); · nền trạng thái (đỏ/vàng/lục/tím) là bản TỐI của màu đó, chữ trạng thái là bản SÁNG — đảo đúng chiều; · màu nút chính giữ đủ đậm để chữ trắng trên nó vẫn ≥ 4,5:1. --------------------------------------------------------------------------- */ :root[data-theme="toi"] { --xanh: #2f6fe4; /* nền nút chính — chữ trắng trên nền này đạt 4,6:1 */ --xanh-chu: #8fb8ff; /* CHỮ và LIÊN KẾT trên nền tối — 7,3:1 trên --the-nen */ --xanh-dam: #2a5bb5; /* NỀN đậm (ô số nhấn, nút khi rê chuột) — chữ trắng trên nó đạt 6,4:1 */ --xanh-rat-dam: #0a1526; --xanh-nhat: #16263f; /* nền nhấn nhẹ */ --xanh-nhat-2: #1d3454; --xanh-vien: #2f4a73; /* viền vùng nhấn trên nền tối */ --xanh-diu: #16233d; /* nền lớn màu xanh dịu — 15,65:1 với chữ trắng, xem site.css */ --nen: #0e141d; --nen-sau: #0a0f17; --the-nen: #161e2a; --the-dinh: #1c2634; --chu: #e8eef7; /* 13,6:1 trên --the-nen */ --chu-mo: #a9b6c8; /* 6,9:1 trên --the-nen */ --vien: #2b384a; --vien-nhat: #232e3d; --vien-o-nhap: #8c9ab0; /* ranh giới thành phần: 4,6:1 trên nền ô */ --do: #f2555b; --do-nen: #3a1417; --do-chu: #ffb3b6; --luc: #34c07a; --luc-nen: #10301f; --luc-chu: #8ce0b2; --vang: #e2a13a; --vang-nen: #382611; --vang-chu: #f3cd8a; --tim: #a78bfa; --tim-nen: #241c3d; --tim-chu: #cbb8ff; /* Viền của viên/chip trạng thái (thêm 23/09, xem site.css cho lý do): một bậc sáng hơn --X-nen của TỐI, giữ đúng thứ bậc nền-tối/viền-sáng-hơn của toàn bảng này. */ --luc-vien: #2f6b48; --vang-vien: #7c5c16; --do-vien: #6b2a30; --do-dam: #8f1f1f; /* nền nút nguy hiểm ở chế độ tối — 8,81:1 với chữ trắng */ --nen-nhat: #243043; --o-mo: #45536a; --nen-khung: #121a26; /* Chữ phụ trên nền --xanh/--xanh-dam: ở chế độ tối --xanh tô SÁNG hơn (làm nền nút dễ bấm), nên tông xanh nhạt của chế độ sáng (#c7d7fe, 3,23:1 trên --xanh tối) không còn đủ; trắng đạt 4,65:1 trên cả --xanh và --xanh-dam của bảng này — xem phép đo ở PR thêm biến. */ --xanh-chu-phu: #ffffff; /* Khối nhấn (xem site.css) — nền giữ tông --xanh-dam của chế độ tối, chữ trắng: 6,44:1. */ --khoi-nhan-nen: #2a5bb5; --khoi-nhan-chu: #ffffff; /* Chữ mờ trên --khoi-nhan-nen (dòng phụ nút gốc sơ đồ): 4,96:1 trên #2a5bb5 — xem site.css. */ --khoi-nhan-chu-mo: #d6e2ff; /* Chuỗi số liệu: nâng độ sáng để đường và cột không chìm vào nền tối. */ --chuoi-1: #7aa9ff; --chuoi-2: #3ed6c0; --chuoi-3: #f5bd52; --chuoi-4: #b49bff; --chuoi-5: #ff7b7b; --chuoi-6: #4fd3ea; --chuoi-7: #a8e05f; --chuoi-8: #ff86c2; /* Bóng trên nền tối phải sâu hơn và không được dùng màu trắng. */ --bong-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .32); --bong-2: 0 2px 4px rgba(0, 0, 0, .40), 0 8px 20px -6px rgba(0, 0, 0, .55); --bong-3: 0 10px 40px -8px rgba(0, 0, 0, .70), 0 2px 8px rgba(0, 0, 0, .45); --bong-dau: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 2px 12px rgba(0, 0, 0, .55); /* --- Biến của BỘ CONTROL (control-chung.css) --------------------------- */ --o-vien: #7d8aa0; /* 3,2:1 trên nền ô — ranh giới thành phần, WCAG 1.4.11 */ --o-vien-mo: #48566c; --o-nen: #101823; --o-nen-tat: #1a2230; --o-chu-mau: #e8eef7; --o-cho: #93a2b7; /* chữ gợi ý trong ô: 4,6:1 */ --o-vien-tieu-diem: #6ea0ff; --luoi-vien: #2b384a; --luoi-vien-nhat: #232e3d; --luoi-dau-nen: #1c2634; --luoi-dau-chu: #dbe4f0; --luoi-soc: #19222f; --luoi-di-chuot: #1f2d42; } /* «Theo hệ thống»: dùng ĐÚNG bảng màu trên, không chép lại giá trị nào. */ @media (prefers-color-scheme: dark) { :root[data-theme="he-thong"] { --xanh: #2f6fe4; --xanh-chu: #8fb8ff; --xanh-dam: #2a5bb5; --xanh-rat-dam: #0a1526; --xanh-nhat: #16263f; --xanh-nhat-2: #1d3454; --xanh-vien: #2f4a73; --xanh-diu: #16233d; --nen: #0e141d; --nen-sau: #0a0f17; --the-nen: #161e2a; --the-dinh: #1c2634; --chu: #e8eef7; --chu-mo: #a9b6c8; --vien: #2b384a; --vien-nhat: #232e3d; --vien-o-nhap: #8c9ab0; --do: #f2555b; --do-nen: #3a1417; --do-chu: #ffb3b6; --do-vien: #6b2a30; --do-dam: #8f1f1f; --luc: #34c07a; --luc-nen: #10301f; --luc-chu: #8ce0b2; --luc-vien: #2f6b48; --vang: #e2a13a; --vang-nen: #382611; --vang-chu: #f3cd8a; --vang-vien: #7c5c16; --tim: #a78bfa; --tim-nen: #241c3d; --tim-chu: #cbb8ff; --nen-nhat: #243043; --o-mo: #45536a; --nen-khung: #121a26; --xanh-chu-phu: #ffffff; --khoi-nhan-nen: #2a5bb5; --khoi-nhan-chu: #ffffff; --khoi-nhan-chu-mo: #d6e2ff; --chuoi-1: #7aa9ff; --chuoi-2: #3ed6c0; --chuoi-3: #f5bd52; --chuoi-4: #b49bff; --chuoi-5: #ff7b7b; --chuoi-6: #4fd3ea; --chuoi-7: #a8e05f; --chuoi-8: #ff86c2; --bong-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .32); --bong-2: 0 2px 4px rgba(0, 0, 0, .40), 0 8px 20px -6px rgba(0, 0, 0, .55); --bong-3: 0 10px 40px -8px rgba(0, 0, 0, .70), 0 2px 8px rgba(0, 0, 0, .45); --bong-dau: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 2px 12px rgba(0, 0, 0, .55); --o-vien: #7d8aa0; --o-vien-mo: #48566c; --o-nen: #101823; --o-nen-tat: #1a2230; --o-chu-mau: #e8eef7; --o-cho: #93a2b7; --o-vien-tieu-diem: #6ea0ff; --luoi-vien: #2b384a; --luoi-vien-nhat: #232e3d; --luoi-dau-nen: #1c2634; --luoi-dau-chu: #dbe4f0; --luoi-soc: #19222f; --luoi-di-chuot: #1f2d42; } } /* --------------------------------------------------------------------------- CÔNG TẮC BA NẤC trên đầu trang. Đầu trang là dải xanh đậm ở CẢ HAI chế độ, nên công tắc dùng nền trong suốt + viền trắng mờ như hai nút cạnh nó (Đổi mật khẩu, Đăng xuất) — một hình thức cho cả hai chế độ. Nấc đang chọn đánh dấu bằng aria-pressed (trình đọc màn hình đọc được) VÀ bằng nền đặc (mắt thấy được): không chỉ dựa vào màu. --------------------------------------------------------------------------- */ .cong-tac-mau { display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, .38); border-radius: var(--bo-tron); overflow: hidden; height: 26px; } /* HÌNH THỨC CỦA NÚT gắn vào CHÍNH lớp của nút, không bó theo tổ tiên (.cong-tac-mau > button) — luật của bộ control dùng chung: bó theo tổ tiên thì một luật ở chỗ khác cùng hạng đặc hiệu sẽ thắng mà không ai thấy (BoControlChungTests.KhongConLuatBoTheoToTien canh đúng chuyện này). */ .nut-che-do { appearance: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .24); background: transparent; color: #fff; font: inherit; font-size: var(--cc-2); line-height: 1; padding: 0 var(--kc-3); height: 26px; cursor: pointer; white-space: nowrap; } .nut-che-do:first-child { border-left: 0; } .nut-che-do:hover { background: rgba(255, 255, 255, .16); } .nut-che-do[aria-pressed="true"] { background: rgba(255, 255, 255, .26); font-weight: 700; } .nut-che-do:focus-visible { outline: 3px solid #ffbf00; outline-offset: -3px; } /* Điện thoại: đầu trang đã chật, ẩn nấc «Theo máy» — vẫn đổi được ở máy tính. */ @media (max-width: 639.98px) { .nut-che-do-he-thong { display: none; } } @media print { .cong-tac-mau { display: none; } } /* --------------------------------------------------------------------------- TINH CHỈNH RIÊNG CHO CHẾ ĐỘ TỐI — control của CHÍNH DỰ ÁN (control-chung.css), không phải thư viện. Đo được (luật 15, 23/09): nút nguy hiểm tô đặc dùng thẳng `--do` làm NỀN, mà `--do` của chế độ tối được tô SÁNG để còn đọc được khi dùng làm CHỮ/biểu tượng trên nền tối — dùng luôn màu đó làm nền cho CHỮ TRẮNG chỉ còn 3,37:1 (nút "Xem định danh", nút viền khi rê chuột). Cùng một lỗi đã gặp với `--xanh-dam`/`--xanh-chu` tách vai trò nền/chữ; ở đây tách bằng `--do-dam` (8,81:1 với chữ trắng) — không sửa control-chung.css, vì hai luật đó vẫn đúng ở chế độ sáng. --------------------------------------------------------------------------- */ .che-do-toi .nut-nguy, .che-do-toi .nut-nguy:hover, .che-do-toi .nut-nguy-vien:hover { background: var(--do-dam); border-color: var(--do-dam); } /* Đầu nhóm của grouppanel.css (thư viện gốc — không sửa, ADR-0018) tô màu bằng biến CSS `--gp-nen-hd`/`--gp-chu-hd` do CHÍNH quy tắc gốc định nghĩa (kể cả bản tính bằng color-mix()), nhưng quy tắc tối của thư viện lại nhắm `html[data-theme='dark']` — quy ước RIÊNG của His_Site, không phải ba giá trị của dự án, nên chưa từng khớp ở CẢ Chrome lẫn Firefox (không chỉ vấn đề ESR — xem tools/giaodien/quet_css_esr.py và css/bu-firefox-esr.css cho phần bù ESR/color-mix, không liên quan lỗi này). Định lại đúng hai biến đó ở đây — thắng bằng độ đặc hiệu, không cần !important — là đủ, vì bản thân quy tắc gốc chỉ ĐỌC biến chứ không ép giá trị. */ .che-do-toi .gp-cha { --gp-nen-hd: var(--xanh-nhat); --gp-chu-hd: var(--xanh-chu); } /* --------------------------------------------------------------------------- LỚP PHỦ CHO THƯ VIỆN CỦA HIS_SITE — chỉ ở chế độ tối, và chỉ những chỗ thư viện viết cứng màu sáng trong tệp gốc (không được sửa tệp gốc: ADR-0018). Gom theo thư viện để còn biết chỗ nào là của ai khi thư viện lên bản mới. --------------------------------------------------------------------------- */ .che-do-toi .tabulator, .che-do-toi .tabulator-tableholder, .che-do-toi .tabulator-header, .che-do-toi .tabulator-row, .che-do-toi .tabulator-footer { background-color: var(--the-nen); color: var(--chu); border-color: var(--luoi-vien); } .che-do-toi .tabulator-header .tabulator-col, .che-do-toi .tabulator-header .tabulator-col-content { background-color: var(--luoi-dau-nen); color: var(--luoi-dau-chu); border-color: var(--luoi-vien); } /* 04-grid.js CHÈN QUA CSSOM, SAU tệp này, `.tabulator .tabulator-header{background:var(--panel-h,#f8fafc)}` (0,2,0) và `.tabulator .tabulator-header .tabulator-col{…}` (0,3,0) — cùng độ đặc hiệu với hai luật trên nên THẮNG vì nạp sau: hàng tiêu đề mọi lưới của site thành dải trắng giữa nền tối (người dùng 23/09: «grid bật lên ở dashboard xấu»; bảng điều khiển đã vá riêng trong khu của nó). Thêm chính lớp .tabulator của tổ tiên để hơn một bậc — một chỗ cho mọi lưới. */ .che-do-toi .tabulator .tabulator-header, .che-do-toi .tabulator .tabulator-headers { background-color: var(--luoi-dau-nen); color: var(--luoi-dau-chu); border-color: var(--luoi-vien); } /* Hàng lọc «Tìm…» dưới tiêu đề: thư viện viết cứng nền trắng cho ô lọc và khung chứa — dải trắng giữa lưới tối (thấy khi rà bố cục vùng 28/09, trang Đơn vị, Cảnh báo). Cùng bậc đặc hiệu với các luật trên (có .tabulator tổ tiên). */ .che-do-toi .tabulator .tabulator-header .tabulator-header-filter, .che-do-toi .tabulator .tabulator-header .tabulator-header-filter input, .che-do-toi .tabulator .tabulator-header .tabulator-header-filter select { background-color: var(--the-nen); color: var(--chu); border-color: var(--luoi-vien); } .che-do-toi .tabulator .tabulator-header .tabulator-col, .che-do-toi .tabulator .tabulator-header .tabulator-col-content { background-color: var(--luoi-dau-nen); color: var(--luoi-dau-chu); border-color: var(--luoi-vien); } /* Rê chuột lên tiêu đề cột sắp xếp được: Tabulator tô cứng #e6e6e6 (bộ chọn 0,6,0, trong @media hover) — ở chế độ tối thành ô xám sáng với chữ sáng, không đọc được (LUOI_DAU_SANG bắt được khi chuột còn đứng trên tiêu đề). Hơn một bậc. */ .che-do-toi .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover, .che-do-toi .tabulator .tabulator-header .tabulator-col.tabulator-moving { background-color: var(--luoi-di-chuot); } .che-do-toi .tabulator-row.tabulator-row-even { background-color: var(--luoi-soc); } .che-do-toi .tabulator-row:hover { background-color: var(--luoi-di-chuot); } /* Hàng dưới con chuột: thư viện lưới của His TỰ CHÈN một quy tắc có mã màu viết cứng `.tabulator .tabulator-row:hover { background: color-mix(in srgb, var(--accent,#2563eb) 6%, #fff) }` từ Script/MySystem/jsTemp/exComponent/04-grid.js. Quy tắc ấy cùng độ đặc hiệu với dòng trên nhưng được chèn SAU nên thắng — hệ quả ở chế độ tối là một DẢI TRẮNG chói giữa nền tối, chữ trắng trên nền trắng không đọc được (đo ngày 23/09/2026 trên /chi-so/gia-tri-cao, và có ở MỌI trang có lưới). Không sửa tệp gốc của His (ADR-0018), nên giành lại bằng một bộ chọn đặc hiệu hơn: thêm chính lớp .tabulator của tổ tiên. */ .che-do-toi .tabulator .tabulator-row:hover, .che-do-toi .tabulator .tabulator-row.tabulator-selectable:hover { background: var(--luoi-di-chuot); color: var(--chu); } .che-do-toi .tabulator-cell { border-color: var(--luoi-vien-nhat); color: var(--chu); } /* Hàng đang CHỌN (bấm nút «Sửa»/data-mo-dong để mở dòng chi tiết cũng đưa hàng vào trạng thái .tabulator-selected của thư viện): KHÔNG phải bộ chọn tĩnh trong tabulator_bootstrap5.min.css (đã thử giành bằng .tabulator.table — không ăn thua), mà là quy tắc CHÈN BẰNG JS lúc chạy của Script/MySystem/jsTemp/exComponent/04-grid.js (ADR-0018 — cấm sửa tệp gốc): `.tabulator .tabulator-selected,.tabulator .tabulator-row.tabulator-selected {background:color-mix(in srgb, var(--accent,#2563eb) 12%, #fff) !important; ...}` Mốc trắng cứng (#fff) trong color-mix() không đổi theo chế độ, và có !important nên đấu độ đặc hiệu vô ích — phải tự dùng !important mới thắng (đúng cách site.css/control-chung.css đã làm với Tom Select). Kết quả trước khi sửa: nền rgb(229,236,253) (12% xanh + trắng), CHỮ lại đổi màu chữ chế độ tối #e8eef7 qua quy tắc nền-lưới chung — hai màu gần như trùng nhau, tương phản ~1:1, ĐÚNG loại lỗi người dùng đã bắt hôm nay (chữ biến mất vì cùng màu nền), đo được trên /quan-tri/tai-khoan và mọi lưới có chọn hàng ở chế độ tối. */ .che-do-toi .tabulator .tabulator-selected, .che-do-toi .tabulator .tabulator-row.tabulator-selected { background: var(--luoi-di-chuot) !important; color: var(--chu) !important; } .che-do-toi .tabulator .tabulator-row.tabulator-selected:hover { background: var(--xanh-nhat-2) !important; } .che-do-toi .tabulator .tabulator-header input, .che-do-toi .tabulator .tabulator-header select { background-color: var(--o-nen); color: var(--o-chu-mau); border-color: var(--o-vien); } /* Thực đơn chuột phải, phễu lọc kiểu Excel, hộp xem trọn nội dung ô. */ .che-do-toi .tabulator-menu, .che-do-toi .tabulator-popup-container, .che-do-toi .excel-filter, .che-do-toi .excel-filter-list, .che-do-toi .grid-fullcell-box { background-color: var(--the-nen); color: var(--chu); border-color: var(--vien); box-shadow: var(--bong-3); } .che-do-toi .tabulator-menu-item:hover, .che-do-toi .excel-filter-item:hover { background-color: var(--luoi-di-chuot); } /* Vùng hàng của lưới: thư viện tô nền trắng ở .tabulator-table và ở từng hàng, phải phủ cả hai — nếu không thì chữ sáng nằm trên nền trắng (đo được: 1,17:1). */ .che-do-toi .tabulator .tabulator-tableholder .tabulator-table, .che-do-toi .tabulator-row.tabulator-selectable, .che-do-toi .tabulator .tabulator-row { background-color: var(--the-nen); color: var(--chu); } /* Tiêu đề cột do lớp Portal dựng (grid-head-title): chữ lấy màu cứng #111827 của thư viện. */ .che-do-toi .grid-title-text { color: var(--luoi-dau-chu); } .che-do-toi .luoi-ma-cot { color: var(--chu-mo); } .che-do-toi .filter-btn { color: var(--chu-mo); } /* Dòng "đang xem N trong tổng…" của lưới bị cắt (luoi-portal.css) — nền vàng nhạt, chữ nâu. */ .che-do-toi .luoi-pham-vi { background-color: var(--vang-nen); color: var(--vang-chu); border-color: var(--vang); } .che-do-toi .luoi-pham-vi-du { background-color: var(--the-dinh); color: var(--chu-mo); border-color: var(--vien); } /* Tom Select (ô chọn) */ /* !important ở đây KHÔNG phải để cho qua: bootStrapCustom.css của His_Site đặt nền ô chọn bằng !important (đúng như ADR-0018 mô tả), nên không có cách nào đè bằng độ đặc hiệu hợp lý. Đo được trước khi thêm: chữ sáng trên nền trắng 1,17:1. */ .che-do-toi .ts-wrapper .ts-control, .che-do-toi .ts-dropdown, .che-do-toi .ts-dropdown-content { background-color: var(--o-nen) !important; color: var(--o-chu-mau) !important; border-color: var(--o-vien) !important; } /* Ô chữ do bộ control nâng cấp (textBoxStyle/dateTimeStyle gắn thêm .form-control): cùng luật !important của bootStrapCustom.css đặt nền #fff, nên ở chế độ tối ô nhập thành nền TRẮNG chữ SÁNG — đo được trên /bao-cao và /bao-cao/dinh-ky (ADR-0041): nền rgb(255,255,255), chữ rgb(232,238,247), gần như vô hình. */ .che-do-toi input.form-control, .che-do-toi textarea.form-control { background-color: var(--o-nen) !important; color: var(--o-chu-mau) !important; border-color: var(--o-vien) !important; } .che-do-toi .ts-dropdown { box-shadow: var(--bong-2); } .che-do-toi .ts-dropdown .option, .che-do-toi .ts-dropdown .item, .che-do-toi .ts-wrapper .item { background-color: transparent; color: var(--chu); } .che-do-toi .ts-dropdown .option:hover, .che-do-toi .ts-dropdown .active { background-color: var(--xanh-nhat); color: var(--chu); } .che-do-toi .ts-wrapper.single .ts-control input { color: var(--o-chu-mau); } /* flatpickr (lịch) */ .che-do-toi .flatpickr-calendar, .che-do-toi .flatpickr-months, .che-do-toi .flatpickr-weekdays, .che-do-toi .flatpickr-weekdaycontainer { background-color: var(--the-nen); color: var(--chu); box-shadow: var(--bong-3); } .che-do-toi .flatpickr-day { color: var(--chu); } .che-do-toi .flatpickr-day.flatpickr-disabled, .che-do-toi .flatpickr-day.prevMonthDay, .che-do-toi .flatpickr-day.nextMonthDay { color: var(--chu-mo); } .che-do-toi .flatpickr-day:hover { background-color: var(--xanh-nhat); border-color: var(--xanh-nhat); } .che-do-toi .flatpickr-day.selected { background-color: var(--xanh); border-color: var(--xanh); color: #fff; } .che-do-toi .flatpickr-months .flatpickr-month, .che-do-toi .flatpickr-current-month input.cur-year, .che-do-toi .flatpickr-monthDropdown-months { color: var(--chu); background-color: var(--the-nen); } /* Jodit (trình soạn) — chỉ dùng ở màn hình soạn nội dung, vẫn phải đọc được. */ .che-do-toi .jodit-container, .che-do-toi .jodit-workplace, .che-do-toi .jodit-wysiwyg, .che-do-toi .jodit-toolbar__box { background-color: var(--the-nen) !important; /* Jodit đặt nền trắng bằng !important trong tệp gốc */ color: var(--chu) !important; border-color: var(--vien) !important; } /* Hộp thoại dựng bằng dialogDiv (modal Bootstrap của bộ control) */ .che-do-toi .modal-content, .che-do-toi .modal-header, .che-do-toi .modal-body, .che-do-toi .modal-footer { background-color: var(--the-nen); color: var(--chu); border-color: var(--vien); } .che-do-toi .modal-backdrop { background-color: #000; } /* Toast của bộ control */ .che-do-toi .his-toast, .che-do-toi .his-toast-wrap .toast { background-color: var(--the-nen); color: var(--chu); border-color: var(--vien); } /* --------------------------------------------------------------------------- BẢN IN LUÔN LÀ CHẾ ĐỘ SÁNG. Đặt lại đúng những biến mà chế độ tối đã đổi, nên mọi luật in sẵn có (site.css §in) chạy y như khi xem ở chế độ sáng. Không nhân đôi luật, chỉ trả biến về giá trị sáng. --------------------------------------------------------------------------- */ @media print { :root, :root[data-theme="toi"], :root[data-theme="he-thong"], :root[data-theme="sang"] { --nen: #ffffff; --nen-sau: #ffffff; --the-nen: #ffffff; --the-dinh: #f5f7fb; --chu: #000000; --chu-mo: #333333; --vien: #999999; --vien-nhat: #cccccc; --vien-o-nhap: #666666; --xanh: #1d4ed8; --xanh-chu: #1d4ed8; --xanh-dam: #1e3a8a; --xanh-nhat: #eff4ff; --xanh-nhat-2: #dce8ff; --xanh-diu: #2c4a78; --khoi-nhan-nen: #1e3a8a; --khoi-nhan-chu: #c7d7fe; --khoi-nhan-chu-mo: #9fb9f0; --do: #b91c1c; --do-nen: #fee2e2; --do-chu: #7f1d1d; --do-vien: #fecaca; --do-dam: #7f1d1d; --luc: #15803d; --luc-nen: #dcfce7; --luc-chu: #14532d; --luc-vien: #bbf7d0; --vang: #b45309; --vang-nen: #fef3c7; --vang-chu: #7c3d00; --vang-vien: #fde68a; --tim: #6d28d9; --tim-nen: #f3f0ff; --tim-chu: #5b21b6; --nen-nhat: #e2e8f0; --o-mo: #cbd5e1; --nen-khung: #ffffff; --xanh-chu-phu: #c7d7fe; --o-nen: #ffffff; --o-chu-mau: #000000; --o-vien: #666666; --o-cho: #555555; --luoi-dau-nen: #e5e5e5; --luoi-dau-chu: #000000; --luoi-soc: #ffffff; --luoi-vien: #666666; --luoi-vien-nhat: #999999; --bong-1: none; --bong-2: none; --bong-3: none; --bong-dau: none; } /* Lớp phủ thư viện của chế độ tối không được theo ra giấy. */ .che-do-toi .tabulator, .che-do-toi .tabulator-header, .che-do-toi .tabulator-row, .che-do-toi .tabulator-cell, .che-do-toi .ts-wrapper .ts-control { background-color: #ffffff; color: #000000; } }