# IngredientBin
Ô khay topping, foam và nguyên liệu trên quầy pha: ảnh cắt từ tranh quầy, badge số lượng, và các trạng thái khách đang gọi, đã chọn, hết, bị khoá.

## Khi nào dùng
- Khay topping 4×3 (trân châu, thạch, pudding…) và 6 khay foam/đá/đường ở hàng dưới quầy.
- Khách đang gọi món nào thì khay đó nhấp nháy viền cam (`is-want`).
- Đo theo px sân khấu 768×1376: đặt trong `.tt-stage` rồi `TTMU.fitStage`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Khay topping | `tt-bin` | 107×98px, badge 28px (`tt-bin__badge`) |
| Khay foam / đá / đường | `tt-bin` + `style="width:116px;height:158px"` | Có nhãn 2 dòng `tt-bin__label`, badge nhỏ `tt-bin__badge--sm` (24px) |

## Cấu trúc
```html
<button type="button" class="tt-bin is-want" aria-label="Trân châu đen, còn 5, khách đang gọi">
  <span class="tt-bin__img" style="background-image:url(assets/Sprites/bg.jpg);background-position:-285px -620px"></span>
  <span class="tt-bin__veil"><span class="tt-bin__veil-text">Hết</span><img class="tt-bin__veil-lock" src="assets/Icons/ic_lock.png" alt=""></span>
  <span class="tt-bin__badge">5</span>
</button>
```
Ảnh là tranh `bg.jpg` 768×1376 cắt bằng `background-position` âm toạ độ góc trái-trên của khay (CSS đã đặt `background-size` và `no-repeat`; người dùng chỉ cần `background-image` và `background-position`).
Toạ độ khay topping (từ `TCOL`/`TROW` trong game.js): cột x = 285, 402, 520, 640; hàng y = 620, 728, 836. Khay foam: x = 19 + 124 × thứ tự (0..5), y = 975.
`__veil` luôn có trong DOM, chỉ hiện khi `is-empty` (chữ "Hết") hoặc `is-locked` (icon `ic_lock`).

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `:active`, `is-on` | Lớp phủ `on-fill` 28% (`::after`, xếp tầng: ảnh crop < lớp phủ nhấn < veil/nhãn < badge) |
| `is-want` | Viền `shadow-want` (trắng + cam `want`), nhịp 1.4s `tt-pulse`, nổi lên trên |
| `is-picked` | Viền `shadow-pick` (4px `target`) |
| `is-empty` | Lớp phủ `stage-paper` 75% + chữ "Hết" `stage-muted` 22px |
| `is-locked` | Lớp phủ `stage-ground` 85% + `ic_lock`; badge topping mờ, badge nhỏ ẩn |

## Token sử dụng
`shadow-want`, `shadow-pick`, `want`, `target`, `on-fill`, `stage-ink`, `outline`, `stage-paper`, `stage-ground`, `stage-muted`, `stage-track`, `alpha-veil` (độ đục lớp phủ Hết), `bin-label-bg` (nền nhãn FOAM MATCHA ở `hc`), `bin-badge`, `outline-soft`, `radius-10/14`.

## Khả năng tiếp cận
- Mỗi khay là `<button>` có `aria-label` nêu tên, số còn lại và trạng thái; khay hết/khoá thêm `aria-disabled="true"` (vẫn bấm được để báo "Hết hàng").
- Trạng thái nằm trong chữ ("Hết") và icon, không chỉ ở viền màu.
- Nhịp `is-want` tắt khi `prefers-reduced-motion`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đặt trong `.tt-stage` rồi scale | Dùng ở px DOM thường rồi chỉnh kích thước tay |
| Chỉ một khay `is-want` mỗi lúc | Gộp `is-want` và `is-picked` trên cùng khay |
| Ghi số còn lại trong `aria-label` | Chỉ để số trong badge |

## Nguồn
`.q3z`, `.q3z:active`, `.q3z.q3on`, `.q3z.q3want`, `q3wantP`, `.q3z.q3empty::after`, `.q3z.q3lock::after`, `.q3z.q3pick`, `.q3badge`, `.q3badge.q3sm`, `.q3spr`, `.q3lbT` — css/style.css dòng 622–646; toạ độ `TCOL`, `TROW`, `BADGE_X/Y`, `BINS` (js/game.js dòng 5052–5057).
- Crop sprite thật từ `bg.jpg` (không dùng sticker). Số in sẵn trên tranh được badge che đi, đúng như game.
- Game khoá bằng emoji 🔒; DS dùng `ic_lock`. Lớp phủ khoá `rgba(240,230,215,.85)` đổi `stage-ground`; badge khoá `#ece4d8/#c9b9a4` đổi `stage-paper/stage-track`.
- Badge topping 30px của game thu về 28px chuẩn của DS; `--sm` giữ nguyên 24px.