# Button
Nút bấm của game: nút lớn 3D ở cuối mỗi hộp thoại, nút nhỏ trong hàng nhập/mua, nút phụ, nút nguy hiểm và nút Xuống Phố ở mặt tiền.

## Khi nào dùng
- Một hành động chính cho mỗi hộp thoại hoặc màn hình: dùng `--primary` ("Mở cửa ngày 2", "Xong").
- Hành động nằm trong một hàng nhỏ (nhập hàng, vay, ký): dùng `--small`, thêm `--accent` cho lựa chọn nổi bật.
- Hành động phụ, ít quan trọng ("Bỏ qua", "Tối đa", "Đóng"): `--small --ghost`.
- Hành động không thể hoàn tác ("Xoá dữ liệu", "Khôi phục mặc định"): `--danger`.
- Chỉ một nút `--street` trên mặt tiền để mở màn Xuống Phố.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Chính | `tt-button tt-button--primary` | Hành động chính, rộng 100% (tối đa 420px), nền `pink`, cạnh nổi 3D |
| Nhỏ | `tt-button tt-button--small` | Nút trong hàng; hỗ trợ 2 dòng, `<b>` là dòng giá/số |
| Nhỏ nhấn | `tt-button tt-button--small tt-button--accent` | Nút nhỏ được ưu tiên ("Vay", "Ký hợp đồng") |
| Phụ | `tt-button tt-button--small tt-button--ghost` | Hành động phụ, padding 10px, chữ .95rem |
| Nguy hiểm | `tt-button tt-button--danger` | Viền và chữ `warn`, nền trong |
| Xuống Phố | `tt-button tt-button--street` | Gradient cam, icon 20px, nảy lò xo khi hover/nhấn |

## Cấu trúc
```html
<button class="tt-button tt-button--primary">Mở cửa ngày 2</button>
<button class="tt-button tt-button--small">Nhập 10<b>45k</b></button>
<button class="tt-button tt-button--small tt-button--accent">Nhập 10<b>45k</b></button>
<button class="tt-button tt-button--small tt-button--ghost">Bỏ qua</button>
<button class="tt-button tt-button--danger">Xoá dữ liệu</button>
<button class="tt-button tt-button--street">
  <img class="tt-button__icon" src="assets/Icons/ic_upmega.png" alt="">
  <span class="tt-button__text">Xuống Phố</span>
</button>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Nhấn (`:active`) | `--primary`: dịch xuống 3px, đổi sang `shadow-press-down`; `--street`: scale .94 |
| Hover | Chỉ `--street`: scale 1.08 (lò xo `cubic-bezier(.34,1.56,.64,1)` .18s). Các nút khác không đổi, như game |
| `:disabled` | `--primary` opacity .6; các biến thể khác .4; con trỏ `not-allowed` |
| Focus bàn phím | Vòng `focus-ring` 3px (từ `.tt-app`) |

## Token sử dụng
`pink`, `pink-d` (qua `shadow-press`), `on-pink`, `bg`, `ink`, `line`, `warn`, `street`, `street-hi`, `street-line`, `on-fill`, `outline`, `shadow-press`, `shadow-press-down`, `shadow-street`, `radius-10/12/16`, `space-4/8/10/12/14/26`.

## Khả năng tiếp cận
- Luôn là `<button>` thật; có thể bấm bằng Enter/Space.
- Nút chỉ có icon phải thêm `aria-label` (nút Xuống Phố có chữ nên icon dùng `alt=""`).
- Chữ `on-pink` trên `pink` chỉ đạt 2.86:1 (Kem sữa) và 2.27:1 (Đêm dịu): giữ đúng như game, nên dùng chữ đậm 1.1rem như đã định.
- `on-fill` trên `street`: 3.56:1, chữ .72rem đậm; nút này luôn kèm icon.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Một `--primary` cho mỗi hộp thoại | Đặt hai nút `--primary` cạnh nhau |
| Dùng `--danger` cho hành động mất dữ liệu | Dùng màu `warn` cho nút bình thường |
| Dùng `<b>` cho dòng giá trong nút nhỏ | Nhồi 3 dòng chữ vào nút nhỏ |
| Viết nhãn ngắn, động từ ("Nhập 10") | Tự đổi font-size/padding bằng style nội tuyến |

## Nguồn
`.big`, `.big:active`, `.big:disabled`, `.sbtn`, `.sbtn b`, `.sbtn.pri`, `.sbtn:disabled`, `.sbtn.ghost`, `.danger`, `.front-btn-megah` (+ `.front-mega-img`, `.front-btn-text`, :hover/:active) — css/style.css.
- `.sbtn.ghost` chỉ có `padding:10px;font-size:.95rem` trên nền `.sbtn`, nên `--ghost` được dùng chồng lên `--small`.
- `.danger` gốc có `margin-top:14px`: bỏ đi vì là bố cục của nơi dùng.
- `drop-shadow(rgba(0,0,0,.25))` của icon Xuống Phố đổi sang `color-mix` với `outline`.