# CustomerCard
Thẻ đơn của một khách trong làn khách: mặt và tên nổi lên mép trên, lời gọi món, các ô thành phần đã đủ ✓, thanh kiên nhẫn và nút mời về ×.

## Khi nào dùng
- Hàng khách đang chờ ở quầy: mỗi khách một thẻ trong `tt-lane` (cuộn ngang, bám mép trái khi dừng).
- Khách đặt qua app dùng `--online` (viền `pink`, nhãn "Đơn online", danh sách món đánh số).
- Làn chưa có ai thì đặt `tt-empty tt-empty--lane` (ô trống cao 128px) thay vì thẻ.
- Khách đang đứng giữa quầy (lời gọi 24px trên sân khấu) không dùng thẻ này: dùng `tt-bubble--stage`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Khách thường | `tt-customer` | Mặt + tên, lời gọi món, ô thành phần, thanh kiên nhẫn; rộng 172px |
| Đơn online | `tt-customer tt-customer--online` | Viền và nhãn `pink`, tên `pink-d`, danh sách món thay cho ô thành phần |
| Làn khách | `tt-lane` | Hàng thẻ cuộn ngang, đệm trên 22px chừa chỗ cho mặt nổi |

## Cấu trúc
```html
<div class="tt-lane" role="list" aria-label="Làn khách">
  <article class="tt-customer" role="listitem">
    <button type="button" class="tt-customer__select" aria-label="Phục vụ Bé Na"></button>
    <div class="tt-customer__who">
      <span class="tt-avatar"><img class="tt-avatar__img" src="assets/Avatars/b00.png" alt=""></span>
      <span class="tt-customer__name">Bé Na</span>
    </div>
    <div class="tt-customer__say"><div class="tt-bubble">Cho mình 1 ly <b class="tt-bubble__key">Trà sữa</b> size L…</div></div>
    <div class="tt-customer__tiles">
      <div class="tt-customer__tile is-done"><img class="tt-ico" src="assets/Icons/ic_cupfull.png" alt="Trà sữa"></div>
      <div class="tt-customer__tile"><span class="tt-cupsize__mini"></span><small class="tt-customer__tile-label">M</small></div>
    </div>
    <div class="tt-progress tt-progress--patience" role="progressbar" aria-label="Độ kiên nhẫn của Bé Na"
         aria-valuemin="0" aria-valuemax="100" aria-valuenow="70"><i class="tt-progress__fill" style="width:70%"></i></div>
    <button type="button" class="tt-customer__decline" aria-label="Mời Bé Na về">×</button>
  </article>
</div>
```
Thẻ `--online`: thay `__tiles` bằng `<div class="tt-customer__tag">Đơn online</div>` và `__order` gồm các `__line` (`__num` + `__item`). `tt-customer__select` là nút chọn khách phủ kín thẻ (trong suốt, đặt đầu thẻ), nút × `__decline` nằm trên nó nên hai nút không lồng nhau; con trỏ tay (`cursor: pointer`) nằm ở nút này. Mặt dùng `tt-avatar`, lời gọi `tt-bubble` (đặt trong khung `__say`), thanh kiên nhẫn `tt-progress--patience` là con trực tiếp của thẻ. Ô trống trong làn cần `flex:none` và bề rộng 172px để không bị co lại.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `:active` | Thẻ scale .97 |
| `__select:focus-visible` | Vòng focus bao quanh cả thẻ (nút chọn phủ kín thẻ) |
| `is-angry` | Lắc ngang `tt-shake` .3s (khi kiên nhẫn cạn) |
| `__tile.is-done` | Viền `mint`, nền `mint` 14% pha `panel`, dấu ✓ tròn ở góc |
| `__item.is-done` | Chữ `mint` đậm, thêm " ✓" (đơn online) |

## Token sử dụng
`panel`, `line`, `fill-muted` (số thứ tự món online), `pink`, `pink-d`, `soft`, `mint`, `on-fill`, `radius-8/12/14`, `radius-round`, `space-4/6/8/10/22`; qua các khối dùng lại: `bg`, `ink`, `warn`, `gold` (Avatar, Bubble, Progress).

## Khả năng tiếp cận
- Chọn khách bằng bàn phím qua `<button class="tt-customer__select" aria-label="Phục vụ Bé Na">` phủ kín thẻ: Tab tới nút, Enter/Space để chọn, vòng focus hiện quanh cả thẻ. Nút × xếp trên nút chọn nên vẫn bấm riêng được.
- Thanh kiên nhẫn có `role="progressbar"` + `aria-label` tên khách; thông tin chính vẫn nằm ở lời gọi món.
- Nút × là `<button>` có `aria-label` ("Mời Bé Na về", "Huỷ đơn online"), không đặt trong `<button>` khác.
- Trạng thái "đã đủ" của ô thành phần chỉ là màu + ✓ trang trí: nên cập nhật `aria-label` ô ("Size L, đã đủ") nếu cần đọc.
- Thẻ lắc có tắt animation khi `prefers-reduced-motion` (từ base).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Bọc `tt-bubble` bằng `tt-customer__say` | Viết `.tt-customer .tt-bubble` để chỉnh vị trí |
| Tối đa 6 ô thành phần trên một hàng | Ô thành phần có chữ dài hơn 4–5 ký tự |
| Cập nhật `width` thanh kiên nhẫn theo thời gian chờ | Tự đổi màu fill bằng hex |

## Nguồn
`.lane`, `.lane .cust`, `.cust`, `.cust:active`, `.cust.onlc`, `.who`, `.who .face`, `.say`, `.icons`, `.ic`, `.ic small`, `.ic.ok`, `.ic.ok::after`, `.otx`, `.otx .ol`, `.otx .n`, `.otx .oi.ok`, `.pat`, `.pat i`, `.decl`, `.cust.angry`, `.onl .hd` — css/style.css dòng 336–392.
- Game hiện vẽ khách bằng `q3chip` tròn; DS theo thẻ `.cust` (khách ở quầy kiểu cũ) theo yêu cầu.
- Mặt: `.who .face` đổi sang `tt-avatar` (36px, viền 2px `line`). `#fff` trong dấu ✓ đổi `on-fill`; `#4fa883` đổi `mint`; `.onl .hd` chữ `pink` dùng cho `__tag`.
- Ô "đủ" và cỡ ly nhỏ `.mcup` dùng `tt-cupsize__mini` của khối CupSize; hình ly trà/topping thay cho SVG của game bằng icon `ic_cupfull`, `ic_pearlbowl`.