/* =============================================================================
 * TÚI ĐỒ › DẢI TAB LỌC KHÔNG CÒN CẮT CHỮ Ở MÁY HẸP — build 875 (worker 1/5, 13/10)
 * -----------------------------------------------------------------------------
 * PHẠM VI: CHỈ `.sf-panel.mode-bag .sf-inv-tab` (4 tab lọc của TÚI ĐỒ).
 * KHÔNG đụng tệp CSS cửa hàng, KHÔNG đụng cỡ chữ, KHÔNG đụng lớp hit-slop,
 * KHÔNG hạ sàn 44px của vùng chạm.
 *
 * ───────────────────────────── LỖI THẬT ĐÃ ĐO ────────────────────────────────
 * Đo TRÊN LIVE thật (`scripts/_probe_live_bag_fit_1013.py`, starlot.io, không
 * phải trang thử): tab thứ 4 "THÚ CƯNG" bị CẮT ở 3 cấu hình, và CHỈ ở tiếng
 * Việt — vì nhãn tiếng Việt dài nhất trong 5 tiếng đo:
 *
 *     cửa vào   khổ              dải (client/scroll)   tab 4 hiện   bị cắt
 *     home      320×568 dọc      282 / 297             81.11%       15.42px
 *     game      568×320 ngang    294 / 313             77.76%       19.05px
 *     game      320×568 rot90    282 / 289             91.29%        7.00px
 *
 * Từ 360px trở lên: 0px (365/365 ở 640×360, 615/615 ở 896×414) ⇒ đúng là lỗi
 * của riêng dải hẹp. 4 tiếng còn lại (en/ja/es/pt) 0px ở MỌI khổ ⇒ quét một
 * tiếng là trượt sạch lỗi này.
 *
 * VÌ SAO BỘ ĐO CŨ BÁO SẠCH: `.sf-inv-tabs` là `overflow-x:auto` +
 * `touch-action:pan-x` (mobile-shop-bag-787.css:41) nên `scrollWidth >
 * clientWidth` là ĐÚNG THIẾT KẾ, và chốt "tràn ngang mà KHÔNG cuộn được" cho
 * PASS. Nhưng CUỘN ĐƯỢC ≠ ĐỌC ĐƯỢC: người dùng mở túi đồ vẫn thấy chữ
 * "THÚ CƯNG" bị chặt mất đuôi. Tiêu chí có răng là % HIỆN của tab cuối.
 *
 * ──────────────────────── VÌ SAO LÀ PADDING, KHÔNG PHẢI CỠ CHỮ ───────────────
 * `mobile-shop-bag-787.css:60` ĐÃ định hạ cỡ chữ tab về 10px ở ≤350px, nhưng
 * `shop-text-836.css:106` (3×`#shopframe` + `.sf-panel.mode-bag`) đè lại thành
 * `var(--sfz-ui-s)` = 12.5px — 836 là lớp CHỐT cỡ chữ của khung cửa hàng và
 * `--sfz-ui-s` dùng chung cả hai mặt, nên hạ biến đó là nới bản vá sang cửa
 * hàng. Chữ 12.5px trên điện thoại đã sát sàn đọc được, co nữa là hại.
 * Padding ngang là trang trí của riêng viên tab ⇒ lấy px từ đó:
 *
 *     padding-inline 8px → 5px  (dọc hẹp)   thu 4 tab × 6px  = 24px > 15.42 ✔
 *     padding-inline 10px → 5px (ngang ngắn) thu 4 tab × 10px = 40px > 19.05 ✔
 *
 * SÀN 44px VẪN GIỮ: tab hẹp nhất "TẤT CẢ" rộng 59.78px (dọc) / 63.78px (ngang)
 * ⇒ sau khi bớt 6–10px còn 53.78px, vẫn > 44px. `min-height:44px` của
 * `bag-responsive-780.css:13` không bị chạm. Khe `column-gap:4px` của dải GIỮ
 * NGUYÊN — hạ khe là để hit-slop hai tab cạnh nhau ăn vào nhau
 * (xem KB `starlot-lshex-tap-slop-steals-neighbor`).
 *
 * 7 lần `#shopframe`: phải thắng `mobile-shop-bag-787.css:42` và `:60`
 * (2 id + 3 lớp) và `bag-responsive-780.css:13` (2 id + 1 lớp).
 *
 * KHỐI `body.rot90` PHẢI DÙNG `!important`: `mobile-repair-830.css:129` đặt
 * `padding:6px 8px!important` cho đúng trạng thái rot90. `!important` thắng mọi
 * mức đặc hiệu, nên đây là cách DUY NHẤT chạm được ca rot90 mà không đi sửa
 * tệp 830 (tệp sửa-chung-mobile, ngoài phạm vi lane này). Chỉ một thuộc tính.
 * ========================================================================== */

#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe {
  /* Dấu nhận biết cho bộ đo: đọc biến này để chắc chắn đang đo BẢN ĐÃ VÁ
     (chuỗi <link> từng bị một chú thích HTML nuốt 5 tệp cuối mà vẫn 0 FAIL). */
  --iwt-tabfit: 1;
}

/* (1) Điện thoại DỌC hẹp: 320×568 — cắt 15.42px ở cửa trang chủ. */
@media (max-width: 359px) {
  #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-tab {
    padding-inline: 5px;
  }

  /* Cùng khổ 320 nhưng ở /game/ thân trang xoay 90° (`body.rot90`) — cắt
     7.00px. Phải `!important` để thắng mobile-repair-830.css:129. */
  body.rot90 #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-tab {
    padding-inline: 5px !important;
  }
}

/* (2) Điện thoại NGANG THẬT, màn ngắn: 568×320 — cắt 19.05px.
   Chặn ở 600px để khổ 640×360 (đã vừa khít 365/365) không bị đổi một pixel. */
@media (max-height: 500px) and (max-width: 600px) and (orientation: landscape) {
  #shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-inv-tab {
    padding-inline: 5px;
  }
}