/* =================================================================== * VỎ WIDGET - những luật bộ dịch đánh rơi * * Bảng dịch của `dich-lop-khoac.py` biết `.elementor-heading-title`, * `.elementor-button`, `.elementor-icon-list-*`... nhưng KHÔNG biết * `.elementor-widget-image`. Luật nào bám lớp ấy thì nó bỏ hẳn, im lặng - * không một dòng `.elementor-` nào còn sót trong CSS đã dịch, nên nhìn tệp * ra thì sạch sẽ, chỉ hình vẽ ra là khác. * * Trong cây sạch, `.elementor-widget-image` chính là cái vỏ `[data-ten]` mang * lớp thiết kế của nó (`su-ft__logo`, `su-tpl__anh`), nên viết lại theo lớp ấy. * * Đo ngày 19/10/2026 trên bản đóng băng. * =================================================================== */ /* Logo chân trang. Thiếu `align-self` thì vỏ kéo giãn hết cột: 116px ra 269px, và logo lệch sang giữa. */ .su-ft__brand .su-ft__logo { align-self: flex-start; } .su-ft__brand .su-ft__logo img { max-width: none; } /* Ảnh chụp trong thẻ mẫu. Vỏ phải phủ kín khung 16/11 thì `object-fit: cover` của ảnh mới cắt đúng chỗ; thiếu thì vỏ co theo ảnh và khung cắt lệch. */ .su-tpl__media .su-tpl__anh, .su-tpl__media .su-tpl__anh img { display: block; width: 100%; height: 100%; } /* ---------- Danh sách có biểu tượng ---------- Widget icon-list của Elementor mang theo bộ đặt lại riêng (`.elementor-widget .elementor-icon-list-items{list-style:none;margin:0;padding:0}`). Bộ đặt lại ấy nằm trong CSS của chính widget, không phải CSS thiết kế, nên không có gì để dịch - và cũng không ai nhận ra là thiếu: danh sách vẫn đúng thứ tự, chỉ thụt vào 40px và cao thêm. Dòng tin cậy ở hero: 54px ra 62px. Chỉ áp cho đúng những vỏ widget từng là icon-list, không áp cho `ul` trong bài viết - danh sách trong trang chính sách phải giữ dấu đầu dòng và lề. Gói trong `:where()` cho ĐỘ CỤ THỂ BẰNG KHÔNG. Bộ đặt lại của Elementor chỉ (0,2,0) và nạp TRƯỚC CSS thiết kế, nên luật nào của thiết kế cũng thắng nó. Viết thẳng `.e-su-badges > ul > li` là (0,3,0) và nạp sau, nên nó đè luôn `.e-su-badges--lg li{padding:0 10px}`: huy hiệu hẹp đi 20px, hai huy hiệu lọt một dòng thay vì hai, trang chủ ở 390px ngắn đi 34px. Đo 19/10/2026. */ :where(.su-ft__ds, .su-ft__lh, .su-ft__legal, .su-hd__may, .su-hd__dt, .su-price__li, .su-cmp__ds, .e-su-badges, .e-su-tr) > ul { margin: 0; padding: 0; list-style-type: none; } :where(.su-ft__ds, .su-ft__lh, .su-ft__legal, .su-hd__may, .su-hd__dt, .su-price__li, .su-cmp__ds, .e-su-badges, .e-su-tr) > ul > li { display: flex; position: relative; margin: 0; padding: 0; } /* KHÔNG chép `align-items:center` và `font-size:inherit` của Elementor vào đây. Trong cây sạch, thẻ `span` bọc chữ của mục danh sách đã bị gộp vào chính thẻ `li`, nên hai dòng ấy không còn vô hại: - `font-size:inherit` đè luôn cỡ chữ 15px mà Elementor đặt cho span, mục dòng tin cậy ra 16px, rộng thêm 14px và cao thêm 1px; - `align-items:center` đè `flex-start` của cột liên hệ chân trang, làm biểu tượng và chữ nhiều dòng so le. Đo 19/10/2026. */ /* ---------- Đệm dọc của nhãn nút ---------- Bộ khoác có `.e-su-btn .elementor-button .elementor-button-text{padding:1px 0}`: đệm đặt trên thẻ `span` BÊN TRONG nút. Cây sạch gỡ hai lớp span ấy đi, nên nếu dịch thẳng sang `.e-su-btn > a{padding:1px 0}` thì nó cùng độ cụ thể (0,1,1) với `.e-su-btn--lg > a{padding:0 28px}` mà lại nằm sau, nên xoá sạch đệm NGANG của nút: nút Zalo 167px còn 75px. Viết thành hai thuộc tính riêng thì không đụng tới đệm ngang. Nút có chiều cao cố định không đổi gì; chỉ nút dạng liên kết (không đặt `height`) cao thêm 2px, đúng như bản gốc: "Xem demo" 17px trở lại 19px. Đo 19/10/2026. */ .e-su-btn > a { padding-top: 1px; padding-bottom: 1px; } /* ---------- Trang xem demo ---------- Hai luật bù cho 09-trang-demo.css. Tệp ấy dịch bằng máy từ bộ khoác Elementor, nên nó chỉ biết cái vỏ `.su-demo-trang`; hai chỗ dưới đây phụ thuộc vào thứ NẰM NGOÀI vỏ, mà bộ dịch không thấy được. 1. Thanh công cụ: bộ chuẩn khai `.su-dt{position:sticky;top:0}`, đúng cho bản dựng React nơi thanh ấy là thứ dính duy nhất. Trong cây Bricks thì đầu trang của site đã dính ở top:0 rồi, nên hai cái cùng dính một chỗ và chồng lên nhau khi cuộn. Chính bản thiết kế cũng chữa đúng chỗ này: DemoScreen.jsx truyền `style={{position:'static'}}` vào DemoToolbar. */ .su-demo-trang .su-dt { position: static; } /* 2. Nút liên hệ nổi và thanh liên hệ phải ẩn. 09-trang-demo.css có luật ấy nhưng viết `.su-demo-trang .siteup-contact`, tức đòi nút nằm BÊN TRONG vỏ. Plugin in nút ở cuối body, ngoài vỏ, nên luật không với tới và nút vẫn nổi - đè nút liên hệ của chính mẫu đang trưng, và đè "Chọn mẫu này" ở dải chân. Bám vào lớp body do 50-trang-demo.php đặt. */ body.su-co-trang-demo .siteup-contact, body.su-co-trang-demo .su-cb { display: none !important; } /* 3. Chân trang lớn của site không thuộc trang này. Bản thiết kế kết thúc ở dải giá: xem demo là một màn hình trọn vẹn, không phải một trang để cuộn. Bricks dựng chân trang cho mọi trang nên nó vẫn ra — đo 19/10/2026 ở 2048px: cao 806px, kéo cả trang từ 1093 lên 2004 và sinh 911px cuộn dọc dưới một khung xem vốn đã vừa đúng màn hình. Ẩn bằng CSS chứ không gỡ mẫu chân trang của Bricks: gỡ thì phải với vào `Database::$active_templates`, mà cả bộ khung này tránh dựa vào nội tình Bricks. Đổi lại thì mã chân trang vẫn tải về rồi mới ẩn — còn chịu được với tám trang, nhưng là chỗ đáng tối ưu nếu sau này nặng. */ body.su-co-trang-demo > footer { display: none; } /* 4. Vỏ cao trọn màn hình TRỪ đầu trang. 09-trang-demo.css khai `min-height:100vh`, đúng với bản dựng React nơi màn hình demo là cả tài liệu. Dưới Bricks thì nó nằm sau đầu trang dính, nên 100vh đẩy trang dài hơn màn hình đúng bằng chiều cao đầu trang. Chính bản thiết kế tính đúng chỗ này: DemoScreen.jsx dùng `calc(100vh - var(--header-h))`. Trừ thêm 1px vì `--header-h` khai 72px mà đầu trang dựng ra 73px. Đo 19/10/2026: với 1px ấy thì trang cao đúng bằng màn hình, cuộn dọc bằng 0 (thanh quản trị 32px chỉ hiện với người đã đăng nhập, không tính). */ .su-demo-trang { min-height: calc(100vh - var(--header-h) - 1px); }