/* nd-mobile.css — lưới an toàn cho ĐIỆN THOẠI, dùng chung mọi trang ═══════════════════════════════════════════════════════════════════════════ Sếp bắt 14/08: "giao diện mobile đang bị xô lệch rất nhiều... đảm bảo mobile dùng tốt cho tất cả các giao diện (web chính, học tập, admin)". File này CỐ Ý rất mỏng. Chỉ chứa những luật mà trên điện thoại LUÔN đúng, không phụ thuộc thiết kế từng trang. Lỗi riêng của từng trang thì sửa tại trang đó sau khi ĐO — không nhét vào đây, vì một luật quét sạch mọi trang rất dễ đạp lên bố cục đã cân chỉnh kỹ. Nạp SAU CÙNG trong để thắng CSS trang ở cùng độ đặc hiệu. */ /* ── 1. Chặn Safari/Chrome iOS tự phóng chữ khi xoay ngang ─────────────────── */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ── 2. Ảnh/khung nhúng không bao giờ được rộng hơn khung chứa ─────────────── */ img, svg, video, iframe { max-width: 100%; } img, video { height: auto; } @media (max-width: 600px) { /* ── 3. Ô NHẬP PHẢI >= 16px — lỗi nặng nhất, đo ra ở 10 trang ──────────── Safari trên iPhone TỰ PHÓNG TO cả trang khi người ta chạm vào ô nhập có cỡ chữ dưới 16px. Trang đang cân đối bỗng nhảy vọt, chữ tràn ra ngoài mép, xong phải chụm hai ngón thu lại mới đọc tiếp được — đúng cảm giác "xô lệch" Sếp mô tả. Đây KHÔNG phải chuyện thẩm mỹ: nó phá luôn thao tác điền form, tức là phá chỗ khách gõ email để mua hàng. 16px là ngưỡng Apple đặt, không phải con số tôi chọn. Đo được ở: admin · daisu · dat-lai · datlich · donthauvan · khach-tong-quan · quan-tri-nguoi-dung · thauvan · tracking-content · xoai-day (14–15px). ⚠️ PHẢI dùng !important, và đây là chỗ nó ĐÚNG. Đo lần đầu thất bại vì tôi tưởng "nạp sau là thắng": không phải — ĐỘ ĐẶC HIỆU thắng trước thứ tự. Trang viết `.add input{font-size:14.5px}` (0,1,1) đè bẹp `input` (0,0,1) dù file này nạp sau. Mà một lớp thì không selector-toàn-thẻ nào với tới. Luật này lại là luật TUYỆT ĐỐI (hành vi của iOS, không phải sở thích thiết kế) nên !important là đúng công cụ, không phải cách lách. */ input, select, textarea { font-size: 16px !important; } /* Ô loại nút bấm (radio/checkbox) không có chữ -> giữ nguyên cỡ. */ input[type="checkbox"], input[type="radio"] { font-size: inherit !important; } }