/* =================================================================== * ĐẦU TRANG - viết tay, không dịch máy được. * * Bản Elementor khoác dáng lên ruột widget `nav-menu` * (`.elementor-nav-menu--main .elementor-item`...). Bricks không sinh những * lớp ấy, mà đầu trang thì dựng lại bằng mã mới, nên 21 luật kia phải viết * lại theo mã mới. Giá trị giữ nguyên từng con số - đây là bản dịch, không * phải thiết kế lại. * * Mã mới (xem ban-sach/html/dau-trang.html): * .su-hd__nav vỏ, chứa cả ba thứ dưới * nav.su-hd__may thanh ngang máy tính * ul.su-hd__ds > li > a * li.su-hd__dd > a[aria-expanded] + div.su-hd__panel * button.su-hd__nut nút ba gạch * nav.su-hd__dt ngăn kéo điện thoại * * Bộ chuẩn (03-thanh-phan.css) viết cho mã PHẲNG `.su-hd__nav > a`, tức bản * thiết kế gốc chưa từng dựng ra HTML. Đích của đợt này là khớp từng điểm ảnh * với bản Elementor đã đóng băng, nên dựng theo mã Elementor đang chạy chứ * không theo mã phẳng kia. Chuẩn hoá về mã phẳng là một đợt riêng, làm sau, * có phép so điểm ảnh canh gác. * =================================================================== */ /* ---------- Vỏ ---------- `.su-hd` là hộp flex, nên `.su-hd__in` co lại bằng nội dung (đo được 1073 thay vì 1264). Bên Elementor vỏ kéo giãn con nên không lộ. Khai rõ bề rộng thì `max-width` và `margin:0 auto` của bộ chuẩn mới có chỗ làm việc. */ .su-hd__in { width: 100%; } /* Ba con của `.su-hd__in` xếp ngang. Bản Elementor lấy kích cỡ ba khối này từ luật theo từng phần tử mà nó sinh ra; đầu trang bản Bricks dựng bằng mã mới nên phải khai thẳng, không thì logo giãn kín 504x72 thay vì 133x32. */ .su-hd__in > .su-hd__logo { flex: 0 0 auto; align-self: center; } .su-hd__in > .su-hd__nav { flex: 1 1 auto; min-width: 0; align-self: stretch; } .su-hd__in > .su-hd__acts { flex: 0 0 auto; align-self: center; margin-left: auto; } /* `flex` chứ không `inline-flex`: inline-flex sinh ra một hộp dòng, nên vỏ logo cao theo `line-height` của chữ (39px) chứ không theo ảnh (32px). Bảy pixel ấy đẩy cả đầu trang và khối hero xuống, nên phép so điểm ảnh của MỌI trang bắt đầu lệch từ dòng 14. Đo 19/10/2026. */ .su-hd__logo > a { display: flex; align-items: center; } /* ---------- Thanh ngang máy tính ---------- */ /* Thiếu chiều cao ở BẤT KỲ lớp nào là chữ bị đẩy lên đỉnh thay vì căn giữa. */ .e-su-nav .su-hd__may { height: 100%; } .e-su-nav .su-hd__may > .su-hd__ds { display: flex; align-items: center; gap: 0; height: 100%; margin: 0; padding: 0; list-style: none; } .e-su-nav .su-hd__may > .su-hd__ds > li { display: flex; height: 100%; } .e-su-nav .su-hd__may > .su-hd__ds > li > a { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; white-space: nowrap; flex: none; font-family: var(--font-ui); font-weight: var(--fw-medium); font-size: 15px; line-height: var(--lh-label); /* `normal` chứ không để trống. Bản Elementor dính kiểu chữ toàn cục "Primary" của widget, kéo theo letter-spacing -0,15px của tiêu đề, làm CẢ SÁU mục menu hẹp đi 1px. Bộ chuẩn không khai letter-spacing cho mục menu, nên đúng là `normal`. Đo được 05/10/2026. */ letter-spacing: normal; color: var(--text-2); text-decoration: none; background: none; border: 0; border-bottom: var(--bar-w) solid transparent; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .e-su-nav .su-hd__may > .su-hd__ds > li > a:hover, .e-su-nav .su-hd__may > .su-hd__ds > li > a[aria-current="page"] { color: var(--text); background: none; } .e-su-nav .su-hd__may > .su-hd__ds > li > a[aria-current="page"] { border-bottom-color: var(--accent); } /* ---------- Mục mở tấm ---------- */ .e-su-nav .su-hd__ds > li.su-hd__dd { position: relative; } .e-su-nav .su-hd__ds > li.su-hd__dd > a[aria-expanded="true"] { color: var(--text); border-bottom-color: var(--accent); } .su-hd__dd .su-hd__caret { color: var(--text-3); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); } .su-hd__dd > a:hover .su-hd__caret, .su-hd__dd > a[aria-expanded="true"] .su-hd__caret { color: var(--text); } .su-hd__dd > a[aria-expanded="true"] .su-hd__caret { transform: rotate(180deg); } /* Tấm chỉ hiện khi mở. JS gắn `data-mo` lên `.su-hd__dd`, không gắn lớp - xem `2-header-js.js` trong bản Elementor, nay là `js/dau-trang.js`. */ .su-hd__dd > .su-hd__panel { display: none; } .su-hd__dd[data-mo] > .su-hd__panel { display: grid; } /* Mục trong tấm. Bản Elementor phải khai đè vì widget nav-menu nhét `padding:13px 20px; white-space:nowrap` ở (0,2,1) đè lên luật (0,1,1) của bộ chuẩn: tên ngành không xuống dòng nữa nên ba cột `1fr` phình theo nội dung thành 287/262/251 thay vì 226 bằng nhau, bảng tràn ra ngoài 720px và thấp 351 thay vì 378. Bricks không nhét gì, nhưng giữ lại ba dòng này cho chắc và để khi so điểm ảnh có cùng một gốc. */ .su-hd__panel > a { padding: 10px 12px; white-space: normal; line-height: 1.3; } .su-hd__panel > a.all { padding: 14px 12px 10px; } /* Ngành chưa có mẫu nào: chữ "Đang dựng" phải nhìn ra ngay là khác con số, nếu không khách tưởng ngành đó đã có mẫu rồi bấm vào mới biết chưa. */ .su-hd__panel > a.chua-co small { color: var(--text-3); font-style: italic; } .su-hd__panel > a.chua-co .ic { opacity: .55; } /* ---------- Nút ba gạch ---------- */ /* Bộ chuẩn dùng biến thể `secondary iconOnly`: hình tròn viền mảnh, nền trong. */ .e-su-nav .su-hd__nut { width: var(--control-h); height: var(--control-h); padding: 0; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; margin: 0 0 0 auto; background: transparent; border: var(--border-w) solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .e-su-nav .su-hd__nut:hover, .e-su-nav .su-hd__nut[aria-expanded="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-text); } .e-su-nav .su-hd__nut svg { color: inherit; fill: none; stroke: currentColor; } /* Hai biểu tượng chồng chỗ: ba gạch lúc đóng, dấu nhân lúc mở. */ .e-su-nav .su-hd__nut > :nth-child(2) { display: none; } .e-su-nav .su-hd__nut[aria-expanded="true"] > :nth-child(1) { display: none; } .e-su-nav .su-hd__nut[aria-expanded="true"] > :nth-child(2) { display: inline-flex; } /* ---------- Ngăn kéo điện thoại ---------- */ /* Vỏ là flex, nên ngăn kéo thành phần tử flex và chiếm 147px, đẩy nút ba gạch sang trái 52px. Đưa nó ra khỏi dòng chảy bằng `position: absolute`. */ .e-su-nav .su-hd__dt { position: absolute; top: 100%; left: auto; right: 0; min-width: 260px; background: var(--surface); border: var(--border-w-thin) solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-2); padding: 8px; } .e-su-nav .su-hd__dt[aria-hidden="true"] { display: none; } .e-su-nav .su-hd__dt > .su-hd__ds { margin: 0; padding: 0; list-style: none; } /* Bộ chuẩn đặt vùng chạm tối thiểu --touch-min 44px; Elementor cho 40px. Đây là lỗi dùng được chứ không phải lỗi hình thức. */ .e-su-nav .su-hd__dt a { min-height: var(--touch-min); display: flex; align-items: center; padding: 0 10px; font-family: var(--font-ui); font-size: 15px; color: var(--text-2); text-decoration: none; } .e-su-nav .su-hd__dt a:hover { color: var(--text); } /* Ngăn kéo không mang theo tấm ngành: ở điện thoại tấm 720px ba cột không vừa, và mục "Mẫu giao diện" vẫn là một liên kết thật dẫn tới trang kho mẫu. */ .e-su-nav .su-hd__dt .su-hd__panel, .e-su-nav .su-hd__dt .su-hd__caret { display: none; } /* ---------- Bật tắt theo bề rộng ---------- Bản Elementor để widget tự bật tắt theo mốc tablet của nó. Bricks không có cơ chế ấy nên khai thẳng, lấy mốc 1024px của bộ chuẩn (`@media(min-width:1024px){.su-hd__nav{display:flex}}`). */ .e-su-nav .su-hd__may { display: none; } .e-su-nav .su-hd__nut { display: inline-flex; } @media (min-width: 1024px) { .e-su-nav .su-hd__may { display: flex; } .e-su-nav .su-hd__nut, .e-su-nav .su-hd__dt { display: none; } } /* ---------- Header dính, cuộn xuống ẩn, cuộn lên hiện lại ---------- Chốt 06/10/2026, KHÁC BẢN MẪU và có chủ ý. Trước đó `.su-hd` khai `position: sticky` mà không bao giờ dính: thẻ bọc nó cao đúng bằng nó nên sticky không có một điểm ảnh nào để đi. Toàn bộ hiệu ứng co header chưa từng có người xem. Chữa bằng cách đưa `sticky` lên thẻ bọc ngoài cùng - bên Elementor là `header.elementor-location-header`, bên Bricks là `header#brx-header` - vì nó là con trực tiếp của `body`. Ẩn hiện bằng `transform` chứ không bằng `top` hay `display`: `transform` chạy trên luồng hợp ảnh, không bắt trình duyệt tính lại bố cục mỗi khung hình. Luật giảm chuyển động trong tokens.css tự tắt phần chuyển tiếp này. */ body > header#brx-header { position: sticky; top: 0; z-index: var(--z-header); transition: transform var(--dur) var(--ease); } body > header#brx-header.su-hd--an { transform: translateY(-100%); } /* Mũi tên xổ xuống của mục "Mẫu giao diện". Bản mẫu vẽ svg nội dòng kèm `width="16" height="16"`; biểu tượng do `siteup_icon_html()` in ra không mang hai thuộc tính ấy, và bộ chuẩn không có luật `.ic{width}` nền nào, nên mũi tên vẽ ra bằng cỡ mặc định của svg và đẩy lệch cả dòng menu. Đặt cỡ ở đây chứ KHÔNG đặt `.ic{width:24px}` chung: biểu tượng sinh từ bản thiết kế mang cỡ riêng trên chính thẻ svg, mà luật CSS thì thắng thuộc tính, nên một luật nền sẽ ép tất cả về cùng một cỡ. Đo 19/10/2026. */ .su-hd__caret { flex: 0 0 auto; width: 16px; height: 16px; } /* ---------- Vỏ điều hướng phải HIỆN ở điện thoại ---------- Vỏ này mang cả lớp chuẩn `su-hd__nav` lẫn lớp khoác `e-su-nav`. Bộ chuẩn (03-thanh-phan.css) viết cho mã PHẲNG, ở đó nút ba gạch nằm NGOÀI vỏ, nên nó khai `.su-hd__nav{display:none}` và chỉ mở lại từ 1024px. Cây Bricks để nút ba gạch BÊN TRONG vỏ này. Luật kia vì thế chôn luôn cả nút: đo ngày 19/10/2026 ở 390px, nút ba gạch ra ĐÚNG 0x0 — không nhìn thấy, không bấm được, tức cả site không có menu trên điện thoại. Phép so điểm ảnh không bắt được: 44x44 điểm chỉ là 0,03% một trang, chìm dưới mức nhiễu. Phải mở trang ở bề rộng điện thoại và thử bấm mới thấy. Dùng `.su-hd__nav.e-su-nav` (0,2,0) để thắng luật của bộ chuẩn mà không phải sửa bộ chuẩn — bộ chuẩn còn dùng cho mã phẳng ở nơi khác. */ .su-hd__nav.e-su-nav { display: flex; } @media (max-width: 1023px) { .su-hd__nav.e-su-nav { position: relative; flex: 0 0 auto; width: auto; margin-left: auto; } }