/* ===========================================================================
* inventory-bagfit-872.css — TÚI ĐỒ vừa khung ĐIỆN THOẠI DỌC (360/375/414)
* (worker 1/5, 2026-10-12). Nạp SAU CÙNG trong index.html.
* ===========================================================================
*
* ĐO BẰNG: scripts/qa_inventory_fit_w1/invfit.spec.ts
* (12 khổ × 7 thứ tiếng, chuỗi CSS THẬT bóc từ index.html)
* Chẩn đoán: scripts/qa_inventory_fit_w1/_diag{,2,3}.ts
* Baseline trước vá: 251 FAIL / 1854 ca.
*
* PHẠM VI: chỉ layer túi đồ. KHÔNG sửa tệp cửa hàng, KHÔNG sửa lớp phủ vùng
* chạm `::after` của shop-textwrap-847.css.
*
* ---------------------------------------------------------------------------
* (1) LỖI NẶNG NHẤT — mở túi đồ trên máy 360×640 KHÔNG THẤY Ô NÀO
* ---------------------------------------------------------------------------
* `shop-textwrap-847.css:311-314` đặt cho `.sf-sortbtn`:
* min-height: max(44px, var(--sw-tap))
* mà `--sw-tap` = `--sf-tap` = clamp(44px, 44px / var(--sf-fit), 160px)
* (ui/shoptap.ts:96). Phép CHIA đó là phần bù ngược cho `transform: scale()`
* — thứ mà shop-responsive-779.css ĐÃ BỎ TỪ LÂU (xem ghi chú sẵn có ở
* shop-landscape-compact.css:128-131). Không còn scale thì phép chia chỉ còn
* làm phình hộp THẬT:
*
* khổ --sf-fit --sf-tap nút SẮP XẾP chân khay VÙNG CUỘN KHO
* 360×640 0,2750 160px 160px 166px 5,61px ← 0/24 ô
* 375×667 0,2867 153,5px 153,5px 159,5px 40,0px ← 0/24 ô
* 390×844 0,2984 147,4px 147,4px 153,4px 191,9px
* 414×896 0,3172 138,7px 138,7px 144,7px 258,6px
* 1280×800 0,9938 44,3px 44,3px 55,3px 388,7px (đúng)
*
* Nút "SẮP XẾP" chỉ chứa 1 icon 18px + 1 nhãn 15,6px, tức nội dung cao 34px;
* 160px là SỐ RÁC. Nó ăn hết chiều cao của `.sf-inv-scroll` ⇒ người chơi mở
* túi đồ trên máy nhỏ thấy khay TRỐNG TRƠN dù có 24 ô. Đây là lỗi DỌC nên mọi
* phép đo bề ngang trước đây đều trượt sạch.
*
* Cách vá đi theo ĐÚNG lối đã thành nếp của dự án — đặt một biến RIÊNG có sàn
* phẳng 44px, KHÔNG đụng `--sf-tap` / `--sw-tap` toàn cục (y như
* `--ivt-tap` của inventory-topbar-864.css:69, `--sfs-tap` của
* shop-sortsel-863.css:40, `--sfc-tap` của shop-landscape-cta.css:121).
* Vùng chạm vẫn ≥ 44×44 THẬT vì không còn transform:scale nào để bù.
* CỐ Ý không lồng trong @media: 160px sai ở MỌI khổ, kể cả rot90.
*
* ---------------------------------------------------------------------------
* (2) SỐ DƯ VÀNG / KIM CƯƠNG BIẾN MẤT — thủ phạm là bề rộng TIÊU ĐỀ
* ---------------------------------------------------------------------------
* `mobile-shop-bag-787.css:6` ẩn `.sf-title` ở ≤700px, nhưng
* `inventory-781/inventory.css:6` bật lại `display:block!important` CHO RIÊNG
* `.mode-bag` ⇒ chỉ TÚI ĐỒ có tiêu đề trên điện thoại, và chỉ TÚI ĐỒ mất số dư.
*
* `.sf-title` có `min-width: auto` + `overflow: visible` + chữ không có chỗ
* ngắt ("INVENTORY" / "INVENTARIO") nên KHÔNG co được; `.sf-wallets`
* (`flex: 1 1 0`) gánh hết. Trong viên ví, icon 18px và nút "+" 44px đều
* `flex: 0 0`, nên `.sf-wal b` là phần tử DUY NHẤT co được → co về 0:
*
* 360×640: tiêu đề 78,4px ⇒ ô số dư 16,8px (vi) / 0,0px (en, es, pt)
* 375×667: tiêu đề 81,6px ⇒ ô số dư 22,7px
* 390×844: tiêu đề 84,9px ⇒ ô số dư 28,9px (chữ vẫn bị xén 4-6px)
*
* Số tiền biến mất KHÔNG có dấu "…" vì `.sf-wal b` là `overflow: hidden`.
*
* Vá: ≤479px cho tiêu đề ra KHỎI LUỒNG FLEX. Dùng visually-hidden
* (1×1px + `clip-path: inset(50%)`) THAY VÌ `display: none` — giữ nguyên chữ
* cho trình đọc màn hình mà vẫn nhả toàn bộ 78-89px cho ví. Đây cũng chính là
* khuôn sr-only mà dự án đã dùng ở ui/shopnav.ts:136 và 847:155.
* Từ 480px tiêu đề hiện lại bình thường, chỉ thêm quyền CO ĐƯỢC (min-width:0 +
* ellipsis) để nó nhường chỗ chứ không bóp ví.
* `!important` là BẮT BUỘC: phải thắng `display:block!important` của 781.
*
* (2b) Sàn `min-width` cho `.sf-wal b` là CHỐT CHẶN, không phải phép bù: sau
* (2) thì ô số dư tự có 60px ở 360px. Sàn 34px để nếu sau này có lane bật lại
* tiêu đề, hoặc gặp máy 320px, con số vẫn còn chứ không tụt về 0.
*
* ---------------------------------------------------------------------------
* CỐ Ý KHÔNG LÀM
* ---------------------------------------------------------------------------
* • KHÔNG hạ 44px của `.sf-plus` / `#sf-close` / `#sf-baglist` — đó là SÀN
* vùng chạm, hạ xuống là đổi lỗi này thành lỗi khác.
* • KHÔNG đụng `.sf-plus::after` / `.sf-icobtn::after` (847:433-443). Lớp phủ
* chạm đó rộng tới 160px và TRÀN ra khỏi hàng, nhưng nó trong suốt và bị
* `.sf-panel { overflow: hidden }` chặn lại: người chơi KHÔNG cuộn ngang
* (đo được: tràn tài liệu = 0px ở cả 12 khổ). Đo bằng `scrollWidth` thì
* chính nó cho 115 FAIL GIẢ — xem khối ghi chú trong invfit.spec.ts.
* • KHÔNG đụng `flex-wrap` của `.sf-inv-head` (inventory-wallet-align-864.css
* đã vá, đo lại 140/140 PASS) và không đụng bố cục `.sf-inv-tabs` (đã vá ở
* inventory-topbar-864.css).
* • KHÔNG đụng logic vàng / kim cương, không đụng tệp cửa hàng.
*
* 7 lần `#shopframe`: phải thắng shop-textwrap-847.css (6 lần id).
* ========================================================================= */
/* Dấu nhận biết cho harness — bộ đo đọc biến này để chắc chắn đang đo BẢN ĐÃ
VÁ. Chuỗi của index.html từng bị một chú thích HTML nuốt mất 5 tệp
cuối mà bộ đo vẫn báo 0 FAIL. */
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe {
--ivf-fit: 1;
/* Sàn bề rộng ô số dư ví. "123.4K" ở 13,5px cần ~45px; 34px là sàn ĐỌC
ĐƯỢC (còn thấy 4-5 chữ số), dưới mức đó con số coi như biến mất. */
--ivf-wal-min: 34px;
/* Bề rộng khay ví cần giữ lại cho mục (2) ở dải 480-700px — xem phần dẫn
giải ngay trên luật `.sf-title`. */
--ivf-wal-need: 360px;
}
/* ---- (1) NÚT SẮP XẾP — ĐÃ CHUYỂN CHO LANE tapslop-flat-872.css -----------
* Lane vùng chạm (worker khác, cùng đợt b872) vá ĐÚNG GỐC bằng cách hạ
* `--sf-tap` / `--sw-tap` về 44px phẳng tại 7×#shopframe
* (tapslop-flat-872.css:81-83). Cách đó tổng quát hơn bản vá cục bộ ở đây:
* nó chữa một lượt cho `.sf-cat`, `.sf-inv-tab`, `.sf-sortbtn`, `.sf-autoeq`,
* `.sf-icobtn`, `.sf-dlg-x`, và thu luôn lớp phủ `::after` từ 160px về 44px.
* Đo lại sau khi lane đó vào cây: nút SẮP XẾP 160px → 44px, chân khay 166px →
* 55px, vùng cuộn kho 5,61px → 235,6px ở 360×640. Vậy nên luật cục bộ
* `.sf-inv-foot .sf-sortbtn { min-height: 44px }` ĐÃ ĐƯỢC GỠ khỏi đây: chồng
* hai lớp cùng khẳng định một điều chỉ làm tầng CSS khó đọc thêm.
*
* ĐÂY LÀ PHỤ THUỘC CHÉO DUY NHẤT của lane túi đồ. Nếu lane vùng chạm bị lùi,
* hai ca `sortbtn.height` và `grid.height` của
* scripts/qa_inventory_fit_w1/invfit.spec.ts FAIL trở lại ngay — bộ đo vẫn
* canh giùm, không cần luật CSS trùng ở đây. */
/* ---- (2) TIÊU ĐỀ PANEL phải nhường chỗ cho ví --------------------------- */
/* ≤479px: ra khỏi luồng flex, GIỮ chữ cho trình đọc màn hình.
`position: absolute` là thứ nhả chỗ; `.sf-top` đã là `position: relative`
(787:5) nên không có hiện tượng nhảy ra ngoài panel. */
@media (max-width: 479px) {
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-title {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 0 !important;
max-width: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
}
/* 480-700px: tiêu đề hiện bình thường nhưng bị CHẶN TRẦN để nhường chỗ ví.
*
* VÌ SAO `min-width: 0` + ellipsis MỘT MÌNH LÀ VÔ DỤNG ở đây (đo được):
* `.sf-title` là `flex: 0 1 auto` (basis = bề rộng chữ) còn `.sf-wallets` là
* `flex: 1 1 0` — basis 0. Tổng basis của hàng vì thế LUÔN nhỏ hơn hàng, nên
* KHÔNG BAO GIỜ có pha co: `flex-shrink` của tiêu đề không hề được dùng, và
* `.sf-wallets` chỉ nhận phần CÒN LẠI sau khi tiêu đề lấy đủ bề rộng chữ.
* 480px · es/pt: tiêu đề "INVENTARIO" 161,2px ⇒ ô số dư 35,4px mà "123,4 mil"
* cần 67px ⇒ vẫn xén 32px dù đã có min-width:0 + ellipsis.
* Vậy thứ DUY NHẤT có tác dụng là một TRẦN tuyệt đối cho tiêu đề.
*
* `--ivf-wal-need` = bề rộng khay ví cần để số dư DÀI NHẤT (es/pt "123,4 mil")
* không bị xén, cộng khe của `.sf-top`:
* 1 viên ví = 8 (padding) + 18 (icon) + 8 (2 khe) + 70 (số) + 44 (nút +)
* = 148px
* khay ví = 148 × 2 + 6 + 6 (khe) + 44 (nút X) = 352px
* + 8px khe giữa tiêu đề và khay ví = 360px
* Dùng `calc(100% - …)` để trần TỰ NỞ: ở 600px tiêu đề được 220px (thừa sức
* hiện đủ "INVENTARIO" 161px), chỉ ở 480px mới thật sự bị cắt còn 100px. */
@media (min-width: 480px) and (max-width: 700px) {
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-title {
min-width: 0 !important;
max-width: calc(100% - var(--ivf-wal-need)) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
}
/* ---- (2b) CHỐT CHẶN: ô số dư không bao giờ về 0 ------------------------- */
/* `.sf-panel.mode-bag` là CỐ Ý: cửa hàng dùng chung `.sf-wal b` nhưng ở đó
`.sf-title` đã bị 787:6 ẩn hẳn nên ví không bao giờ bị bóp, và tệp cửa hàng
là lane khác. Chặn phạm vi ở đây để lane túi đồ KHÔNG đổi một pixel nào của
cửa hàng. */
@media (max-width: 700px) {
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-wal b {
min-width: var(--ivf-wal-min);
}
/* (2c) HAI VIÊN VÍ CHIA THEO NỘI DUNG, không chia đôi cứng.
*
* `mobile-shop-bag-787.css:8` đặt `.sf-wal { flex: 1 1 0; width: 0 }` ⇒ hai
* viên LUÔN rộng bằng nhau, dù số vàng dài gấp đôi số kim cương:
* 480×800 es: vàng "123,4 mil" cần 67px nhưng chỉ được 66px
* kim cương "1810" cần 30px mà cũng lĩnh 66px (thừa 36px)
* Thiếu 1px thôi là `text-overflow: ellipsis` phải nhả chỗ cho chính glyph
* "…" nên nó bỏ hẳn chữ "mil" ⇒ hiện "123,4 …". Đổi sang `flex: 1 1 auto` +
* `width: auto` cho cơ sở flex đi theo NỘI DUNG: viên vàng tự lấy phần nó
* cần, phần dư mới chia đều. Tổng vẫn vừa khung vì phần cố định (icon 18px,
* nút "+" 44px, nút X 44px) không đổi, và `min-width: 0` sẵn có của viên ví
* vẫn cho co lại nếu số dư dài bất thường. */
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-panel.mode-bag .sf-wal {
flex: 1 1 auto;
width: auto;
}
}