/* OpenCADs · VÙNG CHẠM TRÊN ĐIỆN THOẠI — một chủ sở hữu cho cả 58 màn
 * ---------------------------------------------------------------------------
 * Vì sao là tệp RIÊNG, không nhét vào `ui.css`: 16 màn tự chứa KHÔNG nạp ui.css
 * (trang chợ, dịch vụ, sự kiện, hồ sơ, mức dùng, tool của bạn…). Một luật thêm
 * vào ui.css không bao giờ tới được đúng những màn đông người dùng nhất — đợt
 * 06/09 đã dính chính chỗ này. Tệp này được nạp từ MỌI màn, nên nó là chỗ duy
 * nhất cần sửa khi chuẩn đổi.
 *
 * ★ NGUYÊN TẮC: không phóng to HÌNH, phóng to VÙNG BẤM.
 * Một lớp trong suốt `::after` phủ rộng ra ngoài phần tử. Bố cục không đổi một
 * pixel, chữ không xê dịch, mà ngón tay vẫn trúng. Phóng to hình thì mọi thứ
 * quanh nó phải sắp lại — và đó là lý do đợt trước dừng lại ở trái tim «lưu».
 *
 * ★ HƯỚNG NỞ được chọn theo hàng xóm, không phải theo công thức. Phần tử nằm
 * sát nhau mà nở đều bốn phía thì vùng của cái sau đè lên cái trước, và người
 * dùng bấm trúng thứ mình không định bấm — hại hơn là để nguyên. Mỗi luật dưới
 * đây ghi rõ nở về đâu và vì sao chỗ đó trống.
 *
 * Số đo lấy từ `scratchpad/nghiem_thu/do_vung_cham.py` — đo bằng trình duyệt
 * thật ở khổ 390px, hỏi `elementFromPoint` xem điểm cách tâm 21px rơi trúng ai.
 * Đó là đúng câu ngón tay hỏi; đọc CSS không trả lời được câu đó.
 */

@media (max-width: 880px) {

  /* ★ HAI KỸ THUẬT, chọn theo việc phần tử có TỰ CẮT hay không.
     Đo 07/09 mới thấy: `.ava` có `overflow:hidden` (để bo tròn ảnh), `.go` nằm trong
     một nút có `overflow:hidden`, `.tab` nằm trong thanh `overflow:auto`. Lớp phủ
     trong suốt bị CẮT ở đúng những chỗ đó — nó vẫn tồn tại trong CSS, vẫn đúng số
     đo, và vẫn vô dụng. Không đo bằng `elementFromPoint` thì không thấy: bảng CSS
     báo mọi thứ đã sửa xong.

     · Chỗ KHÔNG tự cắt → lớp phủ (bố cục không đổi một pixel);
     · Chỗ TỰ CẮT     → nới HỘP THẬT rồi đẩy phần nhìn thấy vào trong bằng `padding`
       + `background-clip: content-box`. Hình vẫn đúng kích thước cũ, hộp thì đủ to.

  ── Nhóm ① nới hộp thật, giữ nguyên hình ─────────────────────────────────── */

  /* Ảnh đại diện: hình tròn vẫn 34px và 30px, hộp thành 44px. */
  /* ★ Lớp nhân ba (`.ava.ava.ava`) để THẮNG CASCADE mà không dùng `!important`.
     16 màn tự chứa tả cùng những lớp này trong `<style>` của chính chúng, thường
     kèm một lớp cha (`.ochdr .av{width:30px}`) nên đặc hiệu hơn luật một lớp ở đây.
     Nhân lớp lên là cách nâng đặc hiệu mà vẫn giữ được thứ tự đè bình thường —
     `!important` thì người sau không đè lại được nữa, kể cả khi họ có lý do. */
  .ava.ava.ava { width: 44px; height: 44px; padding: 5px; background-clip: content-box; }
  .av.av.av { width: 44px; height: 44px; padding: 7px; background-clip: content-box; }

  /* Nút tìm trong ô tìm kiếm thu gọn: vòng tròn cam vẫn 28px. */
  .go.go.go { width: 44px; height: 44px; padding: 8px; background-clip: content-box; }

  /* Tab khu vực — 41px, thiếu 3. Thanh chứa nó cuộn ngang (`overflow:auto`) nên lớp
     phủ bị cắt; nới đệm dọc là cách duy nhất tới được. Gạch chân vẫn ở đáy. */
  .tab.tab.tab { padding-top: 8px; padding-bottom: 13px; }

  /* Ô lọc trong thanh tìm kiếm — 169×30, chỉ thiếu chiều dọc. */
  .fld.fld.fld { padding-top: 15px; padding-bottom: 15px; }

  /* Chân trang: 16 liên kết mỗi màn, cao 30px — nhóm ĐÔNG nhất trong cả phép đo.
     Không nới bằng lớp phủ được vì chúng xếp sát nhau theo cột; nới thật thì chân
     trang cao thêm, mà chân trang trên điện thoại vốn là một danh sách để bấm. */
  /* Hai đời chân trang cùng tồn tại: `.fc3` (bản mới) và `.fcols` (bản cũ). Bỏ sót
     một cái là bỏ sót đúng một nửa số màn — và không nhìn ra được nếu chỉ soi một
     trang. `.fbt` là dòng Điều khoản · Quyền riêng tư ở đáy, cao 16px. */
  .fc3 a, .fcols a { min-height: 44px; display: flex; align-items: center; }
  .fbt a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Hàng danh sách bấm được — 40px, thiếu 4. */
  .row > a { padding-top: 2px; padding-bottom: 2px; min-height: 44px; }

  /* Dải bộ sưu tập trong trang Đã lưu — 39px. */
  .bst button { min-height: 44px; }

  /* Đường dẫn phân cấp ở đầu màn — 16–20px. Đây là cách quay lui chính trên điện
     thoại (không có nút Back của trình duyệt khi mở từ ứng dụng khác), nên nó phải
     bấm được, không chỉ đọc được. */
  nav.muted a, nav.crumb a, nav.crumb2 a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Nút phân đoạn (Mới nhất · Dùng nhiều nhất) — 29px. */
  .seg button, .seg a { min-height: 44px; }

  /* Dòng pháp lý ở đáy — 21px. Cùng vai với `.fbt`, khác tên lớp vì khác đời. */
  .flaw a, .fbot a { display: inline-flex; align-items: center; min-height: 44px; }

  /* ── Nhóm ② lớp phủ trong suốt: bố cục không đổi ────────────────────────── */

  /* Chữ ký OpenCADs ở đầu trang — 117×28, thiếu 16 chiều dọc. Thanh đầu cao 53px
     nên trên và dưới mỗi bên còn hơn 12px trống: nở 8px không chạm gì. */
  .logo.logo, .lg.lg { position: relative; }
  .logo.logo::after, .lg.lg::after { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }

  /* «Xem thêm ›» ở cuối mỗi dải — 101×32. Nở dọc; hai bên là khoảng trống. */
  .xemthem.xemthem { position: relative; }
  .xemthem.xemthem::after { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }

  /* Nút chọn cửa hàng ở chân trang. */
  .ttbtn { position: relative; }
  .ttbtn::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }

  /* Trái tim «lưu» trên thẻ. `ui.css` đã nới `.heart` và `.save` từ 06/09 nhưng
     BỎ SÓT `.tim` — cùng chức năng, khác tên lớp, và `.tim` mới là lớp dùng trên
     trang chợ. Đó là kiểu sót chỉ lộ ra khi đo bằng vùng bấm hiệu dụng. */
  .tim.tim, .heart.heart, .save.save { position: relative; }
  .tim.tim::after, .heart.heart::after, .save.save::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }

  /* Lớp phủ không được che mất chữ hay chặn cuộn: nó trong suốt và không nhận
     con trỏ ở chế độ cuộn — nhưng PHẢI nhận cú chạm, nên không dùng
     `pointer-events: none`. Đặt dưới nội dung của chính nút để chữ vẫn chọn được. */
  .logo.logo::after, .lg.lg::after, .xemthem.xemthem::after, .ttbtn::after,
  .tim.tim::after, .heart.heart::after, .save.save::after { z-index: 0; }
}