/** * Giao diện 18 – Nhật Trình Đen (bố cục nt). * * Skin này KHÔNG chứa bố cục. Toàn bộ khung, lưới và 3 điểm ngắt nằm ở * assets/css/layout-nt.css dùng chung cho cả 4 skin 15–18; ở đây chỉ đổi bảng * màu + font tiêu đề. Nhờ tách như vậy, sửa bố cục một lần là cả 4 giao diện * cùng đổi, không phải sửa 4 file. * * Việc riêng của bản Đen: màu nhấn #1a1a1a trùng đúng màu chữ tiêu đề * (--nt-ink). Nếu để nguyên thì nhãn chuyên mục, chữ tiêu đề và chữ khi rê * chuột đều đen như nhau — người đọc không thấy gì thay đổi khi rê chuột, và * viền focus của bàn phím cũng biến mất trên nền trắng. Vì vậy bản này tách * làm hai vai: * - --nt-brand giữ đen: nhãn chuyên mục, gạch dưới tiêu đề khối, viền trên * chân trang vẫn là những nét đen của một tờ báo đen trắng; * - --nt-brand-dark (layout-nt.css dùng cho trạng thái rê chuột) đổi sang * vàng đồng #b8860b. * Chọn #b8860b chứ không phải #444 vì #444 đứng cạnh chữ đen #1a1a1a gần như * không phân biệt nổi — rê chuột mà chữ không đổi thì coi như không có phản * hồi; còn vàng đồng đổi cả sắc lẫn độ sáng nên nhận ra ngay, vẫn đạt độ * tương phản khoảng 4,6:1 trên nền trắng cho cỡ chữ nhỏ, và giữ đúng tinh * thần đen–vàng cổ điển của măng-sét báo in. * * Class skin-18 đã được baochi_body_classes() gắn sẵn vào thẻ . */ body.skin-18 { /* Ba biến nt: layout-nt.css đọc chúng ở mọi chỗ cần màu nhấn / font tiêu đề. */ --nt-brand: #1a1a1a; --nt-brand-dark: #b8860b; --nt-headfont: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Các trang phụ (tìm kiếm, 404, trang tĩnh) vẫn chạy bằng base.css. Không đặt lại 3 biến dưới đây thì chúng giữ màu mặc định của base.css, lệch hẳn với màu của bố cục nt. Ở đây cũng lấy vàng đồng làm màu hover cho nhất quán. */ --c-primary: #1a1a1a; --c-primary-dark: #b8860b; --c-accent: #1a1a1a; } /* Tinh chỉnh riêng để 4 skin không giống hệt nhau — chỉ chạm vào chi tiết nhỏ, không đụng tới bố cục. Đặt sau body.skin-18 để chắc chắn thắng layout-nt.css về độ ưu tiên, bất kể thứ tự nạp file. */ /* Viết lại màu rê chuột cho mọi tiêu đề và link. Về nguyên tắc layout-nt.css đã dùng var(--nt-brand-dark) nên chỉ đổi biến là đủ; khai thêm ở đây để phòng trường hợp có chỗ ghi thẳng var(--nt-brand) — bản Đen mà thiếu thì coi như mất hẳn trạng thái rê chuột. */ body.skin-18 .nt-card__title:hover, body.skin-18 .nt-row__title:hover, body.skin-18 .nt-list__title:hover, body.skin-18 .nt-mini__title:hover, body.skin-18 .nt-side-row__title:hover, body.skin-18 .nt-rank__title:hover, body.skin-18 .nt-related__item:hover, body.skin-18 .nt-nav__item:hover, body.skin-18 .nt-hot__item:hover, body.skin-18 .nt-regions__item:hover, body.skin-18 .nt-panel__cat:hover, body.skin-18 .nt-suggest__item:hover, body.skin-18 .nt-footer__link:hover, body.skin-18 .nt-crumb a:hover { color: var(--nt-brand-dark); } /* Viền focus của bàn phím: đen trên trắng thì lẫn vào chữ, nên dùng vàng đồng. */ body.skin-18 a:focus-visible, body.skin-18 button:focus-visible, body.skin-18 input:focus-visible { outline: 2px solid var(--nt-brand-dark); outline-offset: 2px; } body.skin-18 .nt-searchform__input:focus { border-color: var(--nt-brand-dark); } /* Mục menu đang xem: chữ vàng đồng để nổi hẳn khỏi dãy chữ đen bên cạnh (gạch dưới 3px vẫn do layout-nt.css vẽ, không đụng tới). */ body.skin-18 .nt-nav__item.is-active { color: var(--nt-brand-dark); } /* Gạch trên hàng 3 bài dày hơn: bản Đen sống bằng nét kẻ chứ không bằng màu. */ body.skin-18 .nt-card--top { border-top-width: 4px; }