# Coachmark
Bong bóng hướng dẫn màu xanh dương kèm vòng nhấp nháy quanh phần tử cần thao tác ("Nhấn giữ hũ trà để rót, thả tay ở vạch xanh").

## Khi nào dùng
- Hướng dẫn người chơi mới ở quầy pha: chỉ vào đúng nút/hũ cần chạm tiếp theo.
- Mỗi lúc chỉ một coachmark và một đích.
- Lời của khách thì dùng Bubble, tin báo kết quả thì dùng Toast.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Bong bóng | `tt-coach` | Nền `coach`, chữ `on-fill` 800 cỡ 19px, bo 14, cạnh nổi `shadow-coach` |
| Đích | `tt-coach-target` | Thêm vào phần tử cần chỉ: vòng 4px `coach` + vòng nhấp nháy |

## Cấu trúc
```html
<div class="tt-coach">Nhấn giữ hũ trà để rót, thả tay ở vạch xanh</div>
<button class="tt-button tt-button--small tt-coach-target" style="position:relative">Hũ trà đen</button>
```
Bạn tự định vị `tt-coach` (game đặt `absolute` trên sân khấu). Phần tử đích phải có `position: relative` hoặc `absolute` để vòng nhấp nháy bám đúng.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Hiện / ẩn | Bỏ hoặc thêm thuộc tính `hidden` trên `tt-coach` |
| Đích đang được chỉ | Vòng ngoài dịch từ scale .96 đến 1.08 và mờ dần, 1.1s lặp vô hạn (`tt-ring`) |
| `prefers-reduced-motion` | Vòng nhấp nháy đứng yên, vòng 4px vẫn còn |

Lưu ý: chữ đổi thì cập nhật bằng `textContent`, không dùng `innerHTML`.

## Token sử dụng
`coach`, `on-fill`, `shadow-coach`, `radius-14`, `space-6`, `space-12`.

## Khả năng tiếp cận
- `pointer-events: none`: bong bóng không chặn thao tác thật dưới nó.
- Chữ trắng 19px đậm trên `coach`; bong bóng không phải kênh duy nhất, hành động đích vẫn dùng được khi không có coachmark.
- Nên đặt `tt-coach` trong vùng `role="status"` (hoặc `aria-live="polite"`) nếu muốn screen reader đọc câu hướng dẫn mới.
- Vòng nhấp nháy chỉ là trang trí, người dùng giảm chuyển động sẽ chỉ thấy vòng tĩnh.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Một câu ngắn, bắt đầu bằng động từ ("Nhấn giữ…", "Chạm…") | Viết đoạn dài trong bong bóng 420px |
| Bỏ `tt-coach-target` khi người chơi đã làm xong | Để vòng nhấp nháy mãi trên nhiều phần tử |
| Đặt coachmark gần đích, không che đích | Che đúng nút cần bấm |

Lưu ý: `tt-bin.is-want` (0,2,0) thắng `tt-coach-target` (0,1,0) ở `box-shadow` và `animation`, nên khay đang `is-want` giữ vòng cam của nó, không hiện vòng `coach`; đừng bật cả hai trên cùng một khay.

## Nguồn
`#q3coach` — css/style.css dòng 634 (min-height 40, padding 6px 12px, 19px/800/1.15, bo 14, bóng `0 4px 0`); `.q3z.q3coachT` dòng 630 (vòng 4px `#4a90c8` thành `coach`); `.q3z.q3coachT::before` dòng 631 (inset −10px, viền 5px, bo 18, `q3ring 1.1s ease-out infinite`); keyframes `q3ring` dòng 632 trùng `tt-ring` trong base nên dùng lại.