# CodeInput
Ô nhập mã giãn chữ, căn giữa: mã PIN, mã quà, mã sao lưu 8 số; biến thể tên quán dùng chữ thường.

## Khi nào dùng
- Nhập mã ngắn (mã chủ game, mã quà, mã khôi phục): mặc định.
- Nhập tên hoặc khẩu hiệu ngắn (tên quán, khẩu hiệu): `--name`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mã | `tt-code-input` | Chữ 1.2rem, giãn chữ 4px, căn giữa |
| Tên | `tt-code-input tt-code-input--name` | Giãn chữ 0, 1.05rem, đậm 700 |

## Cấu trúc
```html
<label for="bak">Mã sao lưu</label>
<input id="bak" class="tt-code-input tt-num" inputmode="numeric" maxlength="8" value="48201937">
<label for="shop">Tên quán</label>
<input id="shop" class="tt-code-input tt-code-input--name" maxlength="30" placeholder="Ví dụ: Tiệm Trà Mơ Ước">
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Mặc định | Viền 2px `line`, nền `bg`, rộng 100% |
| Focus | Vòng `focus-ring` 3px |

## Token sử dụng
`line`, `bg`, `ink`, `radius-12`, `space-10`.

## Khả năng tiếp cận
- Luôn có `<label>` hoặc `aria-label` ("Tên quán", "Mã chủ game").
- Mã chủ game dùng `type="password" inputmode="numeric"`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Giới hạn `maxlength` đúng độ dài mã | Dùng `--name` cho mã số (mất giãn chữ dễ đọc) |
| Dùng `inputmode="numeric"` cho mã số | Bỏ nhãn vì đã có placeholder |

## Nguồn
`.pinbox`, `.pinbox.nm` — css/style.css; markup trong js/game.js (`nameIn`, `bSlo`, mã chủ game).
- `margin-top:8px` gốc là bố cục nơi dùng, không chép.
- Một số chỗ dùng ghi đè nội tuyến (`width:120px`, `font-weight:800`) cho ô số lượng thanh lý: không thuộc component.