# BetChips
Hàng chip chọn mức cược 10k / 50k / 100k / 500k / 1tr / Tất tay, dùng chung cho Bầu Cua và Xì Dách: mỗi mệnh giá một màu, chip đang chọn nhấc lên và có vòng pink.
## Khi nào dùng
- Chọn số tiền mỗi lần bấm đặt cược (Bầu Cua) hoặc mốc cược chuẩn của nhà con (Xì Dách).
- Chọn đúng một mệnh giá trong hàng cố định; muốn nhập số bất kỳ thì dùng `tt-price-input`.
- Component generic: không biết gì về luật chơi, chỉ báo lại chip nào đang chọn.
## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mệnh giá | `tt-betchip--10k` · `--50k` · `--100k` · `--500k` · `--1m` | Gắn lên `tt-betchip`, quy định màu nền, chữ, viền |
| Tất tay | `tt-betchip--all` | Chip rộng hơn, viền 3px, chữ lớn hơn để nổi giữa hàng; `data-value="all"` |
| Gọn | `tt-betchips--compact` | Cỡ Xì Dách (`.xd-chip`): cao 30px, chữ .76rem |
| Có khung | `tt-betchips--framed` + `tt-betchips__label` | Khung viền `line` kèm nhãn "Mốc cược chuẩn…" (`.xd-chips-section`) |
## Cấu trúc
```html
```
Mỗi chip có `data-value` là số tiền (đồng) hoặc `all`. Nhãn chữ do bạn đặt ("1tr" cho 1.000.000), có thể dùng `TTMU.formatMoney`.
## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `aria-checked="true"` | Chip nhấc lên 2px, vòng pink 3px cách chip 2px (hình dạng, không chỉ khác sắc độ) |
| Nhấn (`:active`) | Chip lún xuống 2px, mất bóng |
| `disabled` | Mờ 50%, con trỏ cấm; dùng khi đang lắc hoặc hết tiền |
| Focus bàn phím | Vòng `focus-ring` 3px của base |
## Hành vi JS
`TTMU.betChips(root, { onChange })` gắn một lần lên `.tt-betchips` (đánh dấu `data-tt-bound="1"`, gắn lần hai trả về `null`) và trả về `{ value, select(v), setDisabled(flag), destroy() }`.
- Roving `tabindex`: một điểm Tab cho cả hàng; mũi tên, Home, End đổi chip và bỏ qua chip `disabled`.
- `onChange(value, chip)` với `value` là số hoặc `'all'`, chỉ gọi khi người dùng đổi chip thật sự; `select()` và `setDisabled()` gọi từ code thì không gọi `onChange`.
```js
var chips = TTMU.betChips(document.querySelector('.tt-betchips'), {
onChange: function (v) { selectedBet = v === 'all' ? money - totalBet : v; }
});
chips.select(100000); // đổi chip từ code, không gọi onChange
chips.setDisabled(true); // khoá khi đang lắc
```
## Token sử dụng
`chip-10k-bg/ink/line` … `chip-all-bg/ink/line` (18 token), `pink`, `panel`, `ink`, `line`, `bg`, `outline`, `radius-14`, `space-6/8/10`.
## Khả năng tiếp cận
- `role="radiogroup"` + `role="radio"` `aria-checked`, không dùng `aria-pressed`; nhóm cần `aria-label` hoặc `aria-labelledby` (nhãn khung dùng `aria-labelledby`).
- Chip đang chọn có vòng và nhấc lên, không chỉ khác màu. Ở Tương phản cao chữ chip đạt từ 7.97:1 và viền chip từ 4.23:1.
- Chữ chip là tên mệnh giá ("50k", "Tất tay"), đọc được nguyên văn.
## Nên / Không nên
| Nên | Không nên |
|---|---|
| Luôn có đúng một chip `aria-checked="true"` | Để không chip nào được chọn |
| Khoá cả hàng (`setDisabled(true)`) khi đang lắc | Để người chơi đổi mức giữa ván |
| Dùng `data-value="all"` cho Tất tay và để code ngoài tính số tiền | Nhét số tiền còn lại vào `data-value` |
## Nguồn
`.bc-chips-row`, `.bc-chip`, `.bc-chip.selected`, `.bc-chip-10k` … `.bc-chip-all` — css/baucua.css; `.xd-chips-section`, `.xd-chips-label`, `.xd-chips-bar`, `.xd-chip*` — css/xidach.css; markup `CHIPS` trong js/baucua.js, js/xidach.js.
- Màu hex của từng mệnh giá đổi sang token `chip-*` (bốn theme gốc giữ nguyên hex của game; Tương phản cao đậm hơn để chữ đạt 7:1).
- Vòng chọn: game dùng `outline` pink (Bầu Cua) và vàng (Xì Dách); ở đây cả hai dùng `box-shadow` vòng pink để không tranh với vòng focus.
- `radiogroup` thay cho các `