/* ============================================================ mobile.css — Lưới an toàn chung cho mobile (PAPASAN Marketing) Chỉ áp trong media query → KHÔNG ảnh hưởng layout desktop. Mục tiêu: chặn tràn ngang, ép media/bảng không vượt khung. ============================================================ */ @media (max-width:768px){ /* Chặn cuộn ngang toàn trang. CHỈ đặt overflow-x lên , KHÔNG đặt lên : overflow trên biến body thành vùng cuộn riêng, nên mọi `position:sticky` bên trong lấy mốc từ mép trong (content box) của body — vốn đã bị `padding-top:var(--ab-h)` đẩy xuống. Hậu quả đo được: `.topbar` (top:var(--ab-h)) tụt thêm đúng một lần --ab-h và che 57px đầu của nội dung ở ≤768px, trong khi desktop bình thường. Đặt trên vẫn chặn cuộn ngang (overflow của html lan ra khung nhìn) mà không tạo vùng cuộn mới. */ html{ overflow-x:hidden; } html,body{ max-width:100%; } /* Media không bao giờ vượt khung cha */ img,video,canvas,svg,iframe{ max-width:100%; height:auto; } /* Bảng: không tràn khỏi khung; nếu cần rộng hơn thì bọc .table-wrap/overflow-x riêng */ table{ max-width:100%; } /* Nội dung dài (URL, chuỗi không dấu cách) tự ngắt để không đẩy khung */ pre,code{ white-space:pre-wrap; word-break:break-word; max-width:100%; } /* Media object-fit cover không bị méo khi thu nhỏ */ .cs-img img,.cs-mq-thumbs img{ max-width:100%; } } @media (max-width:600px){ /* iOS Safari tự zoom khi focus input < 16px → ép tối thiểu 16px */ input,select,textarea{ font-size:17px; } /* Tap target đủ lớn để chạm bằng ngón tay */ .btn{ min-height:40px; } }