/* * LALUZ UI Patch — MODULE MOBILE (CSS) * * Nhắc lại: WPCode 23020 in SAU file này, nên mọi rule phải prefix "html body" * + !important. Xem ghi chú đầy đủ trong laluz-ui-patch.php. * * ───────────────────────────────────────────────────────────────────────────── * TRƯỚC KHI SỬA — KIỂM TRA XEM MOBILE CÓ PHẢI DOM KHÁC KHÔNG * ───────────────────────────────────────────────────────────────────────────── * có class "desktop-detect", nhìn thì tưởng theme render riêng cho * điện thoại. Đã quét TOÀN BỘ stylesheet đang chạy tìm selector chứa * "mobile-detect" / "tablet-detect": ĐƯỢC 0 RULE. * => class đó không được dùng để tạo kiểu. Site chỉ responsive bằng media * query, DOM giống hệt nhau. Nên mọi module đã làm (empty_state, * theme_colors, size_default, dấu · ở nhãn thương hiệu) chạy y như desktop. * Đã mở lại từng trang ở khổ hẹp để đối chiếu, khớp hết. * * File này chỉ xử lý HAI thứ THỰC SỰ hỏng riêng ở khổ hẹp. * * ───────────────────────────────────────────────────────────────────────────── * [A] LOGO THƯƠNG HIỆU QUÁ NHỎ (Thành báo) * ───────────────────────────────────────────────────────────────────────────── * Đo trên live tại /thuong-hieu-a-z/, khổ ~555px: * .brand-item 151 x 97 (3 cột, aspect-ratio 2/1) * .brand-logo 136 x 81 (ô viền trắng) * 77 x 31 <- chỉ chiếm chưa tới nửa ô * * Thủ phạm nằm trong WPCode 23020: * body .brand-box-list .brand-logo img { * max-height: 70% !important; * max-width: 78% !important; * } * Hai cái cap này là SỐ CỐ ĐỊNH, không đổi theo khổ màn. Trên desktop ô rộng * ~250px nên 78% vẫn thoáng và đẹp. Trên điện thoại ô chỉ còn ~136px thì 78% * biến logo thành một vệt mờ không đọc được tên hãng. * * SỬA: chỉ ở <=767px, nới cap lên 88% / 84% và giảm khoảng cách giữa các ô. * Desktop KHÔNG đổi một pixel nào. * * ───────────────────────────────────────────────────────────────────────────── * [B] TIÊU ĐỀ DANH MỤC ĐÂM VÀO Ô SẮP XẾP / HIỂN THỊ * ───────────────────────────────────────────────────────────────────────────── * .prod-heading là flex, space-between, wrap. Ở khổ hẹp: * h1.tt-sec 87px * .prod-heading-right 353px (cao 90px vì "Sắp xếp" và "Hiển thị" xếp chồng) * Hai cái vẫn "vừa" một hàng nên KHÔNG wrap, kết quả là tiêu đề bị kẹp giữa * hai dòng điều khiển — đọc ra như bị đè lên nhau. * * NÓI RÕ PHẦN LỖI CỦA TÔI: ô "Hiển thị" (.lz-pp-wrap, module shop_perpage) đo * được 521px — tức nó ăn hết chiều ngang, trong khi ô "Sắp xếp" chỉ 175px. * Chính rule của tôi làm nó giãn ra và khiến hàng này chật thêm. * * SỬA: ở <=767px cho tiêu đề chiếm trọn một hàng, hai ô điều khiển xuống hàng * dưới nằm cạnh nhau, và trả .lz-pp-wrap về rộng tự nhiên như ô Sắp xếp. * * MUỐN TẮT MODULE: * define( 'LALUZ_UI_PATCH_DISABLE_MOBILE', true ); */ @media screen and ( max-width: 767px ) { /* ── [A] Logo thương hiệu ──────────────────────────────────────────── ĐÃ CHUYỂN Ở 1.2.7: hai rule cap 84%/88% từng nằm đây đã bỏ. Nới cap chỉ lấy lại được 78%->88%, trong khi phần phí lớn nhất nằm BÊN TRONG file ảnh (nhiều logo chỉ dùng 36-71% khung ảnh của chính nó). Việc đó giờ do module brand_logo lo: gỡ cap về 100% rồi đo từng file và phóng đúng bằng phần nó bị phí. Ở đây chỉ giữ lại phần thu khoảng cách ô. */ html body .brand-box .brand-item { padding: 0 .4rem !important; } /* ── [B] Hàng tiêu đề danh mục: tiêu đề một hàng, điều khiển hàng dưới ── */ html body .prod-heading { align-items: flex-start !important; row-gap: 14px !important; } html body .prod-heading .tt-sec { width: 100% !important; } html body .prod-heading .prod-heading-right { width: 100% !important; justify-content: flex-start !important; column-gap: 20px !important; row-gap: 10px !important; } /* Trả ô "Hiển thị" về rộng tự nhiên — chính rule của module shop_perpage làm nó giãn full width ở khổ hẹp. */ html body .prod-heading-right .box-op.lz-pp-wrap { width: auto !important; flex: 0 0 auto !important; } }