# Avatar
Mặt khách hình tròn viền 2px: ảnh nhân vật vẽ tay hoặc emoji, dùng trên thẻ khách, đánh giá và danh sách nhân viên.

## Khi nào dùng
- Mặt khách ở thẻ khách (ảnh nhóm Avatars hoặc emoji theo tâm trạng).
- Ảnh người đánh giá trong Review; ảnh nhân viên trong tab Nhân viên.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mặc định | `tt-avatar` | 36px |
| Nhỏ | `tt-avatar tt-avatar--sm` | 28px |
| Lớn | `tt-avatar tt-avatar--lg` | 56px |
| Emoji | `tt-avatar tt-avatar--emoji` | Mặt khách bằng emoji (cỡ chữ 1.7rem ở 36px) |

## Cấu trúc
```html
<span class="tt-avatar"><img class="tt-avatar__img" src="assets/Avatars/b00.png" alt="Bé Na"></span>
<span class="tt-avatar tt-avatar--emoji" role="img" aria-label="Khách đang chờ">😐</span>
```
Ảnh nhóm Avatars: b00…b49 (xem docs/assets.md). Ảnh cần `alt` là tên khách, hoặc `alt=""` khi tên đã có chữ ngay cạnh.

## Trạng thái
Tĩnh. Khi khách giận có thể gắn `tt-shake` lên avatar (keyframes từ base).

## Token sử dụng
`bg` (nền), `line` (viền 2px), `radius-round`.

## Khả năng tiếp cận
- Emoji dùng `role="img"` + `aria-label` mô tả tâm trạng.
- Ảnh trang trí cạnh tên: `alt=""`.
- Viền `line` là trang trí (dưới 3:1), danh tính nằm ở chữ tên cạnh bên.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Chọn 1 trong 3 cỡ | Tự đặt `width`/`height` khác |
| Dùng ảnh `object-fit: contain` có sẵn (`__img`) | Bóp méo ảnh vẽ tay |

## Nguồn
`.who .face` (36px, 1.7rem, nền `bg`, viền 2px), `.rface` (40px, 1.5rem, ảnh 36px), `.staff-kho-avatar`, `.gz-avatar` — css/style.css; markup `rface` trong js/game.js.
- Cỡ 28 / 56 theo yêu cầu của DS (nguồn chỉ có 36/40).
- `.rface` gốc nền `#fff` cho ảnh thương hiệu: đổi sang `bg` theo theme.