# ItemRow
Hàng danh sách món/nguyên liệu: icon 30px, tên và dòng phụ ở giữa, điều khiển ở bên phải (tab Kho, danh sách nâng cấp).

## Khi nào dùng
- Mỗi nguyên liệu trong tab Kho: tên, hạn dùng, tồn kho, ô nhập số phần.
- Mỗi nâng cấp / mặt hàng có nút "Mua" bên phải.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Hàng | `tt-item-row` | Lưới `30px | 1fr | auto`, gap 10, vạch kẻ dưới 1px `line` |
| Nút xếp lưới | `tt-item-row__actions--grid` | Cột phải có 3 nút nhỏ cạnh nhau (gap 3) |

## Cấu trúc
```html
<div class="tt-item-row">
  <img class="tt-item-row__icon" src="assets/Icons/ic_cupfull.png" alt="">
  <div>
    <div class="tt-item-row__name">Trà sữa <span class="tt-badge tt-badge--fresh-3">3 ngày</span></div>
    <div class="tt-item-row__sub">10 · 0 · 4,5k</div>
  </div>
  <div class="tt-stepper"><!-- Stepper tĩnh hoặc gắn TTMU.stepper --></div>
</div>
```
Phần tử con: `__icon`, `__name`, `__sub`, `__note` (.72rem, `soft`), `__actions`, `__swatch` (ô màu 26px). Dòng phụ báo "ok": `__sub--ok` (mint).

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `tt-item-row__sub.is-low` | Dòng phụ chữ `warn` đậm: tồn kho thấp/hết |
| Hàng cuối | Không có vạch kẻ dưới |

## Token sử dụng
`line`, `soft`, `warn`, `mint`, `space-4/8/10`.

## Khả năng tiếp cận
- Icon trang trí dùng `alt=""`; icon mang nghĩa trong dòng phụ cần `alt` ("Tồn", "Đã dùng").
- Tồn thấp chỉ đổi màu và đậm, nên kèm số "0" ở dòng phụ để không phụ thuộc màu.
- Ô số và hai nút trong Stepper cần `aria-label` có tên món: "Số phần Trà sữa", "Bớt Trà sữa", "Thêm Trà sữa" (đừng để trơn "Bớt"/"Thêm" lặp ở mọi dòng).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đặt cả danh sách trong một thẻ, mỗi món một ItemRow | Tự thêm viền cho từng hàng |
| Dùng `tt-badge` cho hạn dùng, pill khuyến mãi cạnh tên | Thêm cột thứ 4 vào lưới |

## Nguồn
`.rowi`, `.rowi .nm`, `.rowi .sub`, `.rowi .sub.low`, `.btns`, `.rowi.kho .btns`, `.sw`, `.wl`, `.okline`, `.warnline` — css/style.css; markup `paneKho` trong js/game.js.
- `.rowi.kho .sbtn` (padding 3×5, .66rem) và `.rowi.offm` (opacity .5) không có lớp riêng: dùng `tt-button--small` và style của trang.
- `.sw` (26px, viền 2px `rgba(0,0,0,.12)`) -> `__swatch`, viền đổi sang `line` (token gần vai trò nhất).
- Nút "Bán 30%" là pill `tt-badge--promo` (màu đổi sang token gold).