/** * Base — reset tối thiểu + typography nền, dùng token từ tokens.css. Không * hard-code màu/spacing ở đây hay bất kỳ component nào (mục T chỉ thị * Phase 2) — mọi giá trị phải qua var(--alo-*). */ *, *::before, *::after { box-sizing: border-box; } /** * P0 chỉ thị Phase 7 — safety net cho toàn site: các overlay/drawer trượt * (mobile menu, quick-actions, search overlay, Cart Drawer) khi ĐÓNG dùng * `transform: translateX/Y(±100%)` để đẩy panel ra ngoài viewport. Đã thêm * `overflow:hidden` trên từng container overlay (Phase 6), nhưng browser vẫn * tính scrollable overflow của TOÀN TRANG dựa trên vị trí hình học của * descendant `position:fixed` (dù cha có overflow:hidden) trong 1 số layout * engine — verify trực tiếp qua browser thật ở Phase 7: `.alo-cart-drawer__panel` * (đóng, translateX(100%)) vẫn đẩy `document.body.scrollWidth` vượt viewport * ở 768px dù container cha đã overflow:hidden. `overflow-x:hidden` ở * html/body là biện pháp chuẩn ngành cho đúng lớp bug này (chặn tại nguồn * cuối cùng, không phải hack riêng từng trang — mục P0.2), an toàn vì toàn * site không có layout nào cố ý cần cuộn ngang. */ html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* Homepage Polish 2027 — `overflow-x: hidden` CHỈ còn ở , KHÔNG còn ở . Lý do: khi có overflow khác `visible`, chính body trở thành scroll container, nên `position: sticky` của header dính theo scrollport của body (không cuộn) và trôi đi cùng nội dung — đo thật: header top = -1200px sau khi cuộn 1200px. Vì sao vẫn an toàn: theo spec, overflow của phần tử gốc được PROPAGATE lên viewport, nên viewport vẫn cắt tràn ngang đúng như bản vá Phase 7 mô tả ở trên; tự nó được coi như `visible` nên không phá sticky. Đã verify lại: không có cuộn ngang ở 1440 và 390. */ body { margin: 0; background: var(--alo-color-bg); color: var(--alo-color-text); font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--alo-body); line-height: 1.5; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } /* Mục B chỉ thị Phase 10 — scale chung, không rời rạc theo từng trang. Trang cần bậc khác (VD PDP dùng --alo-h1 cho H1) tự override font-size, KHÔNG đổi margin/line-height/weight nền ở đây. */ h1, h2, h3 { margin: 0 0 12px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; } h1 { font-size: var(--alo-h1-page); } h2 { font-size: var(--alo-h2); } h3 { font-size: var(--alo-h3); } :focus-visible { outline: 3px solid var(--alo-color-primary); outline-offset: 2px; } /** * KHUNG FOCUS XANH CÒN ĐỌNG LẠI SAU KHI CHẠM — chỉ trên thiết bị cảm ứng. * * Triệu chứng Owner gặp trên iPhone/Safari: chạm icon giỏ ở header hoặc nút * ALÔ giữa bottom nav xong thì còn một khung chữ nhật xanh quanh nút, mãi tới * khi tiêu điểm chuyển đi mới mất. * * Nguyên nhân KHÔNG phải `border`, `box-shadow` hay `-webkit-tap-highlight-color` * (đo thật: `boxShadow: none`, tap highlight vẫn là màu mặc định của hệ) mà là * chính rule `:focus-visible` ngay trên, cộng với hành vi **trả tiêu điểm** của * `overlay-manager.js`: `close()` gọi `back.focus({preventScroll: true})` để * người dùng bàn phím quay lại đúng nút đã mở overlay (đo thật: * `document.activeElement` === nút giỏ / nút ALÔ sau khi đóng). Safari coi lần * focus theo chương trình đó là "focus-visible" nên vẽ vòng 3px màu chủ đạo. * * Cách xử lý: CHỈ trên thiết bị thuần cảm ứng (`hover: none` + `pointer: coarse`) * và CHỈ với đúng những nút mà JS trả tiêu điểm về, bỏ vòng focus. Không đụng * `:focus-visible` toàn cục, không dùng `*:focus { outline: none }`, không tắt * tiêu điểm bàn phím: máy có con trỏ tinh (desktop, iPad có trackpad) vẫn thấy * vòng focus đầy đủ ở mọi phần tử, kể cả các nút này. */ @media (hover: none) and (pointer: coarse) { .alo-header__cart:focus-visible, .alo-header__hamburger:focus-visible, .alo-header__mobile-search:focus-visible, .alo-mobile-bottom-nav__item:focus-visible, .alo-cart-drawer__close:focus-visible { outline: none; } } /** * Container DUY NHẤT toàn site (mục B chỉ thị Phase 5) — trước đây * archive/category/single-product mỗi nơi tự viết max-width+padding riêng dù * cùng dùng var(--alo-container), dễ lệch nếu sửa sau này không đồng bộ. * `.alo-container` là tên chuẩn cho markup MỚI (header/footer/homepage); * `.container` (đã dùng ở archive/category/single-product từ Phase 2-4) giữ * NGUYÊN class name trong các file đó (không đổi markup đã duyệt) nhưng * dùng lại CHÍNH XÁC 1 rule này — sửa Ở ĐÂY áp dụng toàn site. */ .alo-container, .container { width: min(calc(100% - 32px), var(--alo-container)); margin-inline: auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /** * ===================================================================== * ICON DOMAIN ALÔ (PNG) — kích thước quang học * ===================================================================== * * ĐO THẬT bộ asset 10/09/2026 (16 PNG, canvas 256×256, bounding box theo * kênh alpha): artwork đã lấp 90,2–96,5% cạnh dài, tức KHÔNG còn thừa * khoảng trong suốt như bộ trước. Không bù padding bằng CSS nữa. * * Nhưng tỉ lệ khung hình chênh nhau 3,58 lần — `nuoc-chai` 113×237 (0,477) * so với `giao-nuoc` 244×143 (1,706). Vì canvas vuông và `object-fit: * contain`, canvas luôn lấp đúng ô, còn artwork chỉ chiếm bbox/256 của ô. * Hệ quả đo được: cùng ô 26px, `nuoc-chai` chỉ vẽ 11,5×24,1 trong khi * `nha-hang-quan-an` vẽ 23,5×20,9 — chênh 3,3 lần lượng mực. * * Đó là lý do thật khiến "cùng một con số mà icon trông to nhỏ khác nhau", * và cũng là lý do tăng đồng loạt một con số không sửa được. * * Cách xử lý: một hệ số bù theo NHÓM HÌNH DẠNG, tính từ trung bình * sqrt(bw·bh)/256 của từng nhóm, lấy nhóm vuông làm chuẩn: * * portrait (AR < 0,85) hệ số hình 0,779 → ×1,10 * square (0,85–1,25) hệ số hình 0,873 → ×1,00 * wide (AR > 1,25) hệ số hình 0,760 → ×1,15 * * Bù được CHẶN ở 15%. Bù đủ để ba nhóm bằng nhau tuyệt đối sẽ đẩy * `nuoc-chai` lên 1,45× — nó sẽ cao vống hơn hẳn icon bên cạnh trong cùng * một hàng. Chấp nhận `nuoc-chai` nhẹ hơn trung bình một chút: đó là hình * chai thật, thon là đúng bản chất. * * Lớp hình dạng do `alo_icon()` in ra từ mapping tĩnh trong inc/icons.php, * không đoán theo tên file. */ /** * Selector cố ý dùng CẢ HAI class + type (0,2,1). Icon domain vẫn mang class * `.alo-icon` chung, mà 13 wrapper trong theme có rule dạng * `.alo-hero__cat-icon .alo-icon { width: 21px }` (0,2,0) vốn được canh cho * SVG inline. Nếu rule này chỉ là `img.alo-domain-icon` (0,1,1) thì các con * số SVG đó sẽ đè lên ảnh PNG. Nâng specificity ở ĐÂY thắng cả 13 rule mà * không phải sửa rule nào của SVG generic. */ img.alo-icon.alo-domain-icon { --alo-icon-optical: 1; --alo-icon-size: var(--alo-icon-md); width: calc(var(--alo-icon-size) * var(--alo-icon-optical)); height: calc(var(--alo-icon-size) * var(--alo-icon-optical)); object-fit: contain; /* Trong hàng flex/inline (PDP trust row, link menu) icon không được co. */ flex-shrink: 0; /* Ảnh là inline mặc định → line-height cha tạo khoảng trắng dưới ảnh và làm lệch tâm dọc trong ô căn giữa. */ display: block; } /** * Hai selector này PHẢI cùng hạng specificity với rule gốc (0,2,1) và đứng * SAU nó. Viết `img.alo-domain-icon--portrait` (0,1,1) là hỏng: giá trị mặc * định `--alo-icon-optical: 1` trong rule gốc thắng, bù quang học im lặng * không chạy — đo ở hero desktop ra đúng 36,0px thay vì 39,6px. */ img.alo-domain-icon.alo-domain-icon--portrait { --alo-icon-optical: 1.1; } img.alo-domain-icon.alo-domain-icon--wide { --alo-icon-optical: 1.15; }