# Badge
Nhãn nhỏ cạnh tên món hoặc số liệu: tag "Mới", hạn dùng, hết hàng, pill khuyến mãi và pill số.

## Khi nào dùng
- Đánh dấu ngắn gọn, không phải hành động chính: hạn dùng của nguyên liệu, nhãn đặt online.
- Pill "Bán 30% (+1,4k)" trong tab Kho (có thể là `<button>`).
- Pill số liệu cạnh icon: số khách, số sao, "Chưa trả lời · 3".

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mặc định / mờ | `tt-badge` · `tt-badge--muted` | Hạn vô hạn ♾, nhãn trung tính (`line` + `soft`) |
| Nhấn | `tt-badge tt-badge--accent` | Tag nền `pink`, chữ `on-pink` |
| Hết hạn 1 ngày | `tt-badge tt-badge--fresh-1` | Sắp hỏng (đỏ nhạt) |
| Hạn 2+ ngày | `tt-badge tt-badge--fresh-3` | Còn vài ngày (vàng nhạt) |
| Hết hàng | `tt-badge tt-badge--sold` | Nền `warn`, chữ .58rem |
| Khuyến mãi | `tt-badge tt-badge--promo` | Pill viền `gold`, `<span>` hoặc `<button type="button">` |
| Số liệu | `tt-badge tt-badge--count` | Pill nền `panel` viền `line`, chữ .78rem đậm |

## Cấu trúc
```html
<span class="tt-badge tt-badge--fresh-3"><img class="tt-badge__icon" src="assets/Icons/ic_hourglass.png" alt=""> 3 ngày</span>
<button type="button" class="tt-badge tt-badge--promo">💸 Bán 30% (+1,4k)</button>
<span class="tt-badge tt-badge--count">Chưa trả lời · 3</span>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `tt-badge--promo` là `<button>` | Hover nhấc 1px, `:active` hạ 1px (.15s) |
| Focus bàn phím | Vòng `focus-ring` 3px (từ `.tt-app`) |

## Token sử dụng
`pink`, `on-pink`, `fresh-1-bg/ink`, `fresh-3-bg/ink`, `warn`, `on-fill`, `gold`, `panel`, `line`, `fill-muted` (nền badge muted), `soft`, `ink`, `radius-6/8`, `space-4/8`.

## Khả năng tiếp cận
- Nghĩa của badge luôn nằm trong chữ ("3 ngày", "Hết hàng"), không chỉ ở màu.
- Icon trang trí `alt=""`; icon mang nghĩa một mình cần `alt` ("Đặt online").
- Pill hành động phải là `<button type="button">`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Chữ ngắn, một dòng | Dùng Badge làm nút chính |
| Dùng `fresh-1` cho hạn 1 ngày, `fresh-3` cho còn lại | Tự đặt hex cho màu hạn dùng |

## Nguồn
`.tag`, `.life`, `.life.l1`, `.life.l3`, `.life.l0`, `.sold`, `.sell-mat-btn`, `.kpi-buff-pill` — css/style.css; `lifeTag` trong js/game.js.
- `.sell-mat-btn` gốc dùng màu hổ phách (#fffbeb, #b45309, #fcd34d), không có trong bảng đổi: chọn `gold` + `fresh-3-ink`.
- `.kpi-buff-pill` gốc nền trắng/xám xanh: đổi sang `panel`/`line`/`ink`.
- `.tag` gốc có `margin-left:4px`; khoảng cách do container quyết định.