/* ===========================================================================
* inventory-wallet-align-864.css — CANH TÂM nút "+" của VÍ và của TÚI ĐỒ
* (worker 1/5, 2026-10-08). Nạp SAU CÙNG trong index.html.
* ===========================================================================
*
* ĐO BẰNG: scripts/_qa_wallet_align_w1.py (25 khổ + 7 thứ tiếng, chuỗi
* CSS THẬT của index.html) · chẩn đoán: scripts/_diag_invhead_w1.py.
* Tiêu chí: |tâm cross-axis của nút − tâm cross-axis của chip chứa nó| ≤ 1,0px.
*
* ---------------------------------------------------------------------------
* (1) LỖI THẬT ĐÃ ĐO ĐƯỢC — nút "+" đầu TÚI ĐỒ rơi xuống HÀNG FLEX THỨ HAI
* ---------------------------------------------------------------------------
* `.sf-inv-head` là flex 3 món: tên khay (`.sf-inv-title`) · số lượng
* (`.sf-inv-count`, `margin-left: auto`) · nút "+" (`.sf-inv-add`, 44px).
* bag-responsive-780.css:8 đặt cho nó `flex-wrap: wrap`. Bề ngang CẦN là
* 217 + 10 + 54 + 10 + 44 = 335px, mà cột `.sf-inv` ở dải máy tính bảng chỉ
* rộng 263–326px ⇒ flex KHÔNG co chữ, nó ĐẨY món cuối xuống hàng mới:
*
* 701×900 → đầu khay cao 86px, nút "+" nằm hàng 2, tâm LỆCH 25,00px
* 760×1000 → cao 96,89px, nút "+" chiếm nguyên hàng 2, tâm LỆCH 20,45px
* 820×1180 và ≥1024 → vừa 1 hàng, lệch 0,00px (không có lỗi)
* ≤700px và mọi khổ landscape/rot90 → `.sf-inv-head` bị `display: none`
* (bag-responsive-780.css:56 · mobile-shop-bag-787.css:40) ⇒ KHÔNG đo được,
* và hộp 0×0 của nó từng cho 16 FAIL GIẢ ở bộ đo vùng chạm.
*
* VÌ SAO KHÔNG vá bằng `position: absolute` như bản gốc shopframe.ts:2878
* (`right: 8px; top: 50%`): `.sf-inv-head` đã bị 780 gỡ `padding-right: 84px`
* nên nút ra khỏi luồng là chữ chạy thẳng xuống dưới nút. Cách đúng là CẤM
* XUỐNG HÀNG (`flex-wrap: nowrap`) rồi mở khoá cho CHỮ co lại — chữ tự xuống
* dòng TRONG ô của nó, hàng cao thêm, và `align-items: center` của đầu khay
* canh nút vào đúng tâm hàng. Đo lại: 701 và 760 về 0,00px, PC KHÔNG đổi 1px.
*
* CỐ Ý KHÔNG đặt `flex-grow` cho `.sf-inv-title`: `.sf-inv-count` đẩy sang phải
* bằng `margin-left: auto`, cho tên khay nở ra là ăn hết chỗ trống đó ⇒ số
* lượng + nút "+" trôi về giữa khay, đổi bố cục PC. Chỉ mở `flex-shrink`.
*
* ---------------------------------------------------------------------------
* (2) CHỐT CHẶN cho nút "+" VÍ VÀNG / KIM CƯƠNG — không để lỗi cũ sống lại
* ---------------------------------------------------------------------------
* Hai nút "+" trong khay ví ĐANG ĐÚNG (0,00px ở 25 khổ × 7 tiếng) nhờ
* shop-textwrap-847.css mục (7b) khoá `inset: auto`. Nhưng cái bẫy sinh ra lỗi
* đó vẫn còn nguyên và đã tái diễn 2 lần:
* shopframe.ts:3241 `.sf-wal .sf-plus { position: absolute; right: 4px;
* top: 50%; transform: translateY(-50%) }` — 779/780 huỷ bằng
* `position: static !important` + `transform: none !important`. `static` thì
* `top/right` bị BỎ QUA nên vô hại; hễ lớp nào sau này nâng lên `relative`
* (để làm khối chứa cho hit-slop `::after`) là `top: 50%` SỐNG LẠI mà
* `translateY(-50%)` bù ngược thì vẫn bị tắt ⇒ nút tụt đúng nửa khay (22px
* mobile, 23px PC) và đè hàng bộ lọc.
* Vì vậy ở đây ghim `inset: auto` + `align-self: center` tại 7×#shopframe —
* cao hơn mọi lớp đang có (847 dùng 6×) — để lần nâng `position` sau KHÔNG
* đánh thức lại lệch cũ, và để một `align-items` khác trên `.sf-wal` cũng
* không kéo nút lệch được. Hai dòng này đo ra 0px thay đổi ở mọi khổ: chúng là
* CHỐT CHẶN, không phải phép bù.
*
* KHÔNG đụng: bố cục hàng `.sf-top`/`.sf-wallets` (lane khác), bề rộng/cỡ chữ ô
* ví, `--sf-tap`/`--sw-tap`, và tuyệt đối không đụng logic vàng/kim cương.
* ========================================================================= */
/* 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 từng bị một chú thích HTML nuốt mất 5 file cuối mà vẫn 0 FAIL). */
#shopframe {
--iwa-align: 1;
}
/* ---- (1) ĐẦU TÚI ĐỒ: một hàng, nút "+" canh tâm ------------------------- */
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-inv-head {
flex-wrap: nowrap;
}
/* `min-width: 0` là điều kiện để flex item CHỮ co được dưới min-content; không
có nó, `nowrap` chỉ đổi chỗ tràn chứ không cứu được gì. Giữ `white-space`
như cũ (normal) để chữ xuống dòng trong ô, KHÔNG cắt bằng "…". */
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-inv-title {
min-width: 0;
}
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-inv-count {
flex: 0 0 auto;
}
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-inv-add {
flex: 0 0 44px;
align-self: center;
inset: auto;
}
/* ---- (2) NÚT "+" VÍ: chốt chặn, 0px thay đổi --------------------------- */
#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe#shopframe .sf-wallets .sf-plus {
align-self: center;
inset: auto;
}