/* =============================================================================
 * 872 — SÀN VÙNG CHẠM PHẲNG 44px  (lane "vùng chạm ≥44×44", worker 3/5)
 * -----------------------------------------------------------------------------
 * PHẠM VI: CHỈ lớp hit-slop. Một khai báo biến + hai dòng nền trong suốt.
 *          KHÔNG đụng lưới thẻ, KHÔNG đụng bố cục khay ví, KHÔNG !important.
 *
 * ---------------------------------------------------------------------------
 * BỆNH: phép chia `44px / var(--sf-fit)` là phép BÙ NGƯỢC cho một `transform:
 *       scale()` KHÔNG CÒN TỒN TẠI.
 * ---------------------------------------------------------------------------
 * `ui/shoptap.ts` sinh ra (và `shopframe.ts` bơm vào <style> trên `#shopframe`,
 * 1 lần id):
 *
 *     --sf-tap: clamp(44px, calc(44px / max(var(--sf-fit,1), .05)), 160px);
 *
 * Công thức ĐÚNG ở thời cửa hàng còn là khổ cố định 1280×720 rồi thu nhỏ bằng
 * `transform: scale(--sf-fit)`: px bố cục × fit = px THẬT, nên muốn 44px thật
 * thì phải đặt 44/fit px bố cục.
 *
 * Nhưng `shop-responsive-779.css:4` ghi `.sf-panel { transform: none }` bằng
 * 2 lần id — THẮNG `scale()` của shopframe.ts (1 lần id) ở **MỌI KHỔ MÀN**, kể
 * cả điện thoại dọc, không chỉ landscape. Khung reflow thật, px bố cục ĐÃ LÀ
 * px thật ⇒ phép bù chỉ còn bơm phồng mọi thứ neo vào `--sf-tap`/`--sw-tap`:
 *
 *   ĐO ĐƯỢC 2026-10-12 (scripts/_qa_tapslop_w3.py, Chromium thật, 9 khổ màn):
 *     khổ        --sf-fit   --sf-tap  hậu quả đo được
 *     360×640    0,2750     160px    `.sf-cat` cao 160px (thiết kế 46), nút
 *                                    SẮP XẾP 96,7×160, `.sf-cta` 284×160,
 *                                    lớp phủ ::after của #sf-baglist 160×160
 *                                    (vùng chạm hiệu dụng 110×160) và `.sf-inv`
 *                                    thừa 50px scrollWidth bị CẮT ÂM THẦM
 *     375×667    0,2867     153px    y như trên, 153px
 *     390×844    0,2984     147px    y như trên, 147px
 *     414×896    0,3172     139px    y như trên, 139px
 *     rot90/ngang 0,49–0,56  78–90px  nút 78–96px, `.sf-inv` thừa 11–17px
 *     PC 1366    1,0556     44px     ĐÚNG 44px — PC chưa bao giờ bị bệnh này
 *
 * ---------------------------------------------------------------------------
 * CHỮA: trả sàn về ĐÚNG 44px phẳng — không nhân, không chia.
 * ---------------------------------------------------------------------------
 * 44px là sàn WCAG 2.5.5 / Material. Ở chế độ KHÔNG scale thì 44px bố cục = 44px
 * thật, nên không cần hơn 1px nào. Đặt ở ĐÚNG MỘT CHỖ (biến) thay vì vá từng nút
 * — cách vá từng nút (852 cho `.sf-cta`, 863 cho ô sắp xếp, 864 cho tab túi đồ,
 * 847 mục 7b cho 2 nút trong khay ví) để lại y nguyên con bệnh ở nút kế tiếp:
 * `.sf-cat`, `.sf-sortbtn`, `.sf-icobtn`, `.sf-dlg-x` vẫn 139–160px đến hôm nay.
 *
 * 7 lần `#shopframe` để thắng:
 *   • 1 lần id — khối <style> của shopframe.ts (nơi khai `--sf-tap` gốc)
 *   • 6 lần id — `shop-textwrap-847.css:86` (`--sw-tap: var(--sf-tap, 44px)`)
 * Không cần `!important`: 7 > 6 > 1 là đủ, và cổng B8 của
 * `src/ui/shoptextwrap.test.ts` đòi chuỗi lớp này sạch `!important`.
 *
 * ⚠ TIỀN ĐỀ PHẢI CÒN ĐÚNG: nếu mai này ai trả `transform: scale(--sf-fit)` lại
 *   cho `.sf-panel` thì px bố cục ≠ px thật và file này thành SAI (nút co lại
 *   còn 12–25px thật). Bộ đo `_qa_tapslop_w3.py` có case `C· Tiền đề bản vá`
 *   chốt `getComputedStyle(.sf-panel).transform === 'none'` ở cả 9 khổ — sửa
 *   `.sf-panel` mà quên file này thì lượt QA đó FAIL ngay, không âm thầm.
 *
 * ⚠ KHÔNG đổi `ui/shoptap.ts`: công thức ở đó là NGUỒN SỐ dùng chung với
 *   `shoptap.test.ts` / `shopnav.test.ts` / `shoplandcta.test.ts` (TAP_MIN_PX,
 *   tapLayoutPx…). Sửa TS là 4 bộ test đổi kỳ vọng và lane khác phải nghiệm thu
 *   lại; chặn ở tầng CSS thì chỉ cửa hàng đổi, và đổi đúng 1 dòng.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * (1) SÀN PHẲNG 44px — chỉ KHAI BÁO BIẾN, không vẽ, không đặt kích thước.
 *     Mọi nút đang neo vào 2 biến này tự về đúng sàn:
 *       847:134/167  `.sf-cat`            max(46px, --sw-tap)  160 → 46
 *       847:188-189  `.sf-allpill`        max(44px, --sw-tap)  160 → 44
 *       847:220-228  `.sf-sort` + select  max(44px, --sw-tap)  160 → 44
 *       847:263/277  `.sf-cta`            max(48px, --sw-tap)  160 → 48
 *       847:297-314  `.sf-inv-tab`, `.sf-sortbtn`, `.sf-autoeq`  160 → 44
 *       847:380      `.sf-im-act`         max(44px, --sw-tap)  160 → 44
 *       847:442-443  lớp phủ ::after của 4 nút icon  max(100%, --sw-tap) → 44
 *       shopframe.ts 3611 `--sf-hd` thanh trên landscape   96 → 54 (thiết kế)
 *       shopframe.ts 3640 nút "+" ví landscape             160 → 44
 *       shopframe.ts 3671 `--fb-h` khung 9-slice bộ lọc    96 → 44
 *       shopframe.ts 3777 `.sf-card` min-width/height      160 → 44 (hết ép
 *                          thẻ rộng 160px ⇒ lưới không còn bị đẩy tràn ngang)
 *     PC KHÔNG ĐỔI 1px: ở fit ≥ 1 thì clamp() vốn đã trả về đúng 44px. */
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe {
  --sf-tap: 44px;
  --sw-tap: 44px;
}

/* ---------------------------------------------------------------------------
 * (2) LỚP PHỦ HIT-SLOP PHẢI TRONG SUỐT — bài học b862.
 *     `shop-textwrap-847.css` chiếm `::after` của 4 nút icon làm lớp nới vùng
 *     chạm. Với `.sf-closebtn` thì `shop-responsive-779.css:17-18` đang dùng
 *     ĐÚNG pseudo đó để vẽ nét chữ X (`background:#e4edff`) ⇒ nở ra thành ô
 *     vuông trắng phủ kín nút (847 đã chữa riêng ca đó ở mục (862)).
 *     Nay sàn hạ về 44px, lớp phủ của `.sf-icobtn` / `.sf-dlg-x` thu từ 160px
 *     về 44px — khai nền trong suốt TƯỜNG MINH để không ai vô tình vẽ lên nó
 *     lần nữa, và chốt `pointer-events: auto` vì lớp phủ chỉ có một việc duy
 *     nhất là BẮT CHẠM (sự kiện nổi bọt từ ::after lên chính nút).
 *     KHÔNG đặt kích thước ở đây — kích thước vẫn do 847 quyết (max(100%,44px)). */
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-icobtn::after,
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-dlg-x::after {
  background: none transparent;
  border: 0;
  box-shadow: none;
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
 * (3) LỚP PHỦ KHÔNG ĐƯỢC NUỐT NÚT BÊN CẠNH.
 *     Lớp phủ neo tâm (`left:50%; top:50%; translate(-50%,-50%)`) nên nó nở
 *     ĐỀU hai bên: hộp 42px + sàn 44px ⇒ thò 1px mỗi bên; hộp 34px (`.sf-dlg-x`)
 *     ⇒ thò 5px mỗi bên. Khe nhỏ nhất quanh các nút này:
 *       `.sf-inv-foot` gap 12px  (#sf-baglist ↔ select lọc)  → thò 1px: an toàn
 *       `.sf-dlg-x` neo absolute trên vùng ảnh skin (ảnh không bấm được)
 *       khay ví rot90 khe flex 6px — 847 mục (7b)/(rot90) đã chốt 44px THẬT
 *     ⇒ ở sàn 44px KHÔNG còn chỗ nào lớp phủ chồng sang nút khác. Trước bản vá,
 *     lớp phủ 160px của nút X từng trùm hẳn nút "+" ví thứ hai (đo được 0,0%
 *     diện tích phản hồi ở 360/375 — xem KB `shop-tapslop-eats-plus-button`).
 *     Case `T4 không nuốt chạm của nút bên cạnh` của bộ đo chốt điều này ở cả
 *     9 khổ × 12 nút: quét `elementFromPoint` TRONG hộp nút LÁNG GIỀNG và đòi
 *     0 điểm trả về nút đang xét. KHÔNG dùng `getBoundingClientRect` — hai hộp
 *     hiển thị giao nhau 0px² mà vẫn nuốt sạch cú chạm.
 *     (Không có luật CSS nào ở mục này — chỉ ghi lại chốt nghiệm thu.) */