# Chip
Nút lựa chọn dạng viên thuốc: tab Trà / Topping / Dụng cụ, chọn Theo ngày/tuần/tháng, bộ lọc sao trong đánh giá.

## Khi nào dùng
- Chọn một giá trị trong nhóm ngắn: dùng `tt-segmented` (chia đều bề rộng).
- Bộ lọc nhiều lựa chọn, tự xuống dòng: dùng `tt-chip-group`.
- Trạng thái bật tắt luôn đặt bằng `aria-pressed`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Chip | `tt-chip` | Chip đơn, chữ .78rem đậm |
| Có icon | `tt-chip tt-chip--icon` | Icon + chữ căn giữa, cao tối thiểu 34px; chữ bọc `tt-chip__text` |
| Lớn | `tt-chip tt-chip--lg` | Cao tối thiểu 52px, chữ .9rem |
| Chia đều | `tt-segmented` (+ `tt-segmented--compact`) | Hàng tab; compact dùng padding 6px 4px (`.seg`) |
| Hàng lọc | `tt-chip-group` | Chip xuống dòng, gap 6px |

## Cấu trúc
```html
<div class="tt-segmented" role="group" aria-label="Loại hàng">
  <button class="tt-chip tt-chip--icon" aria-pressed="true">
    <img class="tt-ico" src="assets/Icons/ic_cupfull.png" alt=""><b class="tt-chip__text">Trà</b>
  </button>
  <button class="tt-chip tt-chip--icon" aria-pressed="false">…</button>
</div>
<div class="tt-chip-group"><button class="tt-chip" aria-pressed="false">5★</button></div>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Tắt | Viền `line`, nền trong |
| `aria-pressed="true"` | Viền `pink`, nền pha 16% `pink` |
| `:disabled` | Opacity .4 (bổ sung) |
| Focus bàn phím | Vòng `focus-ring` 3px |

## Token sử dụng
`line`, `pink`, `ink`, `shadow-on` (vòng trong của chip đang bật ở `hc`), `radius-10`, `space-4/6`.

## Khả năng tiếp cận
- Mỗi chip là `<button aria-pressed>`; bọc nhóm bằng `role="group"` kèm `aria-label`.
- Trạng thái chọn không chỉ dựa vào màu: viền và nền đều đổi, nên kèm chữ rõ.
- Khi chip là tab thật của một vùng nội dung, đổi sang `role="tab"` và `aria-selected` (lớp CSS `aria-pressed` chỉ áp cho nút bật/tắt).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đổi `aria-pressed` bằng JS khi bấm | Dùng một lớp `.on` tự đặt |
| Dùng `tt-segmented` cho 2–4 lựa chọn | Nhồi hơn 4 chip vào một hàng chia đều |

## Nguồn
`.chip`, `.chip.on`, `.chip.ic2`, `.chip.ic2 b`, `.chip.lg`, `.segtabs`, `.segtabs .chip`, `.seg`, `.seg .chip`, `.revflt` — css/style.css; markup trong js/game.js (`data-sm`, `data-rf`).
- Lớp `.on` của game chuyển thành `aria-pressed="true"`.
- `margin-bottom:8px` của `.segtabs` và `margin:6px 0 10px` của `.revflt` là bố cục nơi dùng, không chép.
- Luật `.chip{padding:5px 2px}` trong media query nhỏ không được chép.