/* ========================================================================== KHOANH VÙNG NGUỒN — TRẢ KHỐI THEME VỀ ĐÚNG THEME (21/09/2026) ========================================================================== 🔴 LỆNH CHỦ DỰ ÁN, 21/09: *"Template mua về là ưu tiên phải ĐÚNG TEMPLATE. Còn khối Hope UI là chuẩn theo những thiết kế của riêng nó."* Và sáng cùng ngày: *"khoanh vùng theo nguồn là cách tối ưu nhất, vì nguồn đều có tên và đều để khai báo vì nhập kho template."* ------------------------------------------------------------------------ CHỖ HỞ TỆP NÀY BỊT ------------------------------------------------------------------------ CSS ba theme ĐÃ khoanh vùng: mọi luật mang tiền tố [data-khung=""]. Nhưng khoanh vùng một chiều chỉ chặn theme tràn RA — nó không chặn Hope UI tràn VÀO. Hope UI khai 3.232 tên lớp KHÔNG khoanh vùng, và markup 850 dùng 331 tên lớp; đo ngày 21/09 thì **16 tên trùng nhau**: .btn 128 luật · .active 100 · .nav 30 · .container 21 · .header 7 .footer 6 · .time 5 · .badge 3 · .pagination 3 · .story 2 · .faq 2 .tag 1 · .avatar 1 · .name 1 · .info 1 (.sr-only — xem dưới) Ở chỗ theme CÓ NÓI thì theme thắng nhờ độ ưu tiên cao hơn. Chỗ theme IM LẶNG — một trạng thái, một bề ngang màn hình, một thuộc tính nó không đặt — thì Hope UI điền vào, và không ai thấy. 🔴 THẤY BẰNG MẮT: ảnh thu nhỏ `fjelvik-06` ra một HỘP TRẮNG, không đọc nổi một chữ. Đo ra: khung-1.css .nav { background: var(--bs-gray-900) } ← #ffffff theme-fjelvik.css [data-khung="fjelvik"] .nav { background: var(--fog) } …chỉ nằm trong @media (max-width: 960px) Ở 1200px theme im lặng, Hope UI tô trắng, mà chữ thừa `color: var(--snow)` từ `.header` cũng trắng. Trắng trên trắng. ------------------------------------------------------------------------ CÁCH BỊT ------------------------------------------------------------------------ `all: revert` bỏ TOÀN BỘ phần Hope UI đóng góp cho 16 lớp đó, chỉ bên trong khối mang dấu nguồn. Sau bước này khối theme đứng trên nền trình duyệt trơn cộng CSS của chính nó — đúng môi trường người thiết kế theme đã dựng nó. 🔴 THỨ TỰ NẠP LÀ ĐIỀU KIỆN, KHÔNG PHẢI TÙY CHỌN. `[data-khung] .btn` và `[data-khung="fjelvik"] .btn` có độ ưu tiên BẰNG NHAU — mỗi bên một bộ chọn thuộc tính cộng một lớp. Bằng nhau thì thứ tự quyết định, nên tệp này phải nạp TRƯỚC ba tệp theme. Nạp sau là bịt luôn miệng theme, và khối theme ra trắng trơn. Đã ghi điều kiện đó ngay cạnh chỗ khai trong `tai-nguyen-khung.ts`. 🔴 KHỐI HOPE UI VÀ KHỐI CREWLY KHÔNG SUY CHUYỂN. Chúng không mang `data-khung` nên không bộ chọn nào dưới đây chạm tới — Hope UI vẫn là gốc, đúng chốt. 🔴 VÌ SAO `.sr-only` ĐỨNG NGOÀI DANH SÁCH: nó không phải nhãn thiết kế, nó là thứ giấu chữ khỏi mắt và chỉ chừa cho trình đọc màn hình. Trả nó về mặc định trình duyệt là **hiện chữ đó ra giữa trang**. Bản của Hope UI đúng và vô hại, cứ để nguyên. 🔴 THÊM LỚP MỚI THÌ PHẢI ĐO, ĐỪNG ĐOÁN: chạy lại phép đếm va chạm tên lớp (markup 850 ∩ lớp Hope UI không khoanh vùng). Thêm bừa cho «chắc» là gỡ mất nền mặc định ở chỗ chưa ai kiểm. ========================================================================== */ [data-khung] .btn, [data-khung].btn, [data-khung] .active, [data-khung].active, [data-khung] .nav, [data-khung].nav, [data-khung] .container, [data-khung].container, [data-khung] .header, [data-khung].header, [data-khung] .footer, [data-khung].footer, [data-khung] .time, [data-khung].time, [data-khung] .badge, [data-khung].badge, [data-khung] .pagination, [data-khung].pagination, [data-khung] .story, [data-khung].story, [data-khung] .faq, [data-khung].faq, [data-khung] .tag, [data-khung].tag, [data-khung] .avatar, [data-khung].avatar, [data-khung] .name, [data-khung].name, [data-khung] .info, [data-khung].info { all: revert; /* 🔴 TRẢ LẠI `border-box` NGAY SAU `all: revert` — bắt được bằng mắt, không bằng suy luận. `all: revert` gỡ MỌI khai báo của tác giả cho phần tử đó, kể cả luật toàn cục `*{box-sizing:border-box}` của Bootstrap. Phần tử rơi về `content-box`, nên `.container` của theme (`width:100%` + `padding-inline: var(--gutter)`) phình rộng hơn khung chứa nó. Ảnh chân trang `fjelvik-07` lộ ra ngay: «Bergen 5003, Norwa…» và «Photography via P…» bị cắt cụt ở mép phải. `border-box` KHÔNG phải một lựa chọn thiết kế của Hope UI — nó là nền chung mà mọi CSS thời nay viết dựa trên, ba theme 850 cũng vậy. Trả nó lại là trả đúng môi trường người thiết kế theme đã dựng, không phải chừa lại một mẩu Bootstrap. Khai sau `all` trong cùng khối nên nó luôn thắng. */ box-sizing: border-box; }