# Bubble
Bong bóng lời thoại: lời khách trong thẻ khách và ở quầy, lời linh vật ở mặt tiền. Khối dùng lại được, kích thước theo chữ nên chạy ở mọi cỡ DOM.

## Khi nào dùng
- Câu khách nói về ly nước muốn gọi ("Cho mình 1 ly **Trà sữa** size L…").
- Lời nhận xét ngắn trong review ("Làm nhanh, đúng vị").
- Lời gợi ý của linh vật ở mặt tiền.
- Chữ hướng dẫn thao tác thì dùng Coachmark, không dùng bubble.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Thường | `tt-bubble` | Đuôi trên-trái (bo 4px 12px 12px 12px), nền `bg`; đặt trên nền `panel` |
| Nổi | `tt-bubble tt-bubble--raised` | Đặt trên nền `bg`: nền `panel` + viền 2px `line` |
| Linh vật | `tt-bubble tt-bubble--mascot` | Viền vàng, đuôi giữa phía dưới, lơ lửng nhẹ (`tt-bob`) |
| Sân khấu | `tt-bubble tt-bubble--stage` | Lời khách ở quầy 768px: chữ 24px, không nền, từ khoá `stage-accent` |

## Cấu trúc
```html
<div class="tt-bubble">
  Cho mình 1 ly <b class="tt-bubble__key">Trà sữa</b> size L,
  thêm <b class="tt-bubble__key">trân châu đen</b> nha
</div>
```
Từ khoá món đặt trong `<b class="tt-bubble__key">` (đậm 800, màu `pink-d`). Bubble là `inline-block`, `max-width: 100%`, tự xuống dòng.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `--mascot` | Lơ lửng 4px chu kỳ 5s (`tt-bob`), tắt khi `prefers-reduced-motion` |
| Còn lại | Tĩnh |

## Token sử dụng
`bg`, `panel`, `ink`, `line`, `pink-d`, `gold`, `shadow-edge` (viền trong ở `hc`), `stage-ink`, `stage-accent`, `radius-12/14`, `space-6/12`.

## Khả năng tiếp cận
- Chỉ là chữ, không có role riêng; nằm trong luồng đọc bình thường.
- `pink-d` trên `bg` / `panel` đạt tương phản chữ nhỏ ở bốn theme gốc (và 12.18:1 ở `hc`, nơi bong bóng có thêm viền `shadow-edge`), nhưng từ khoá vẫn đã đậm 800 nên đừng chỉ dựa vào màu để báo "từ quan trọng".
- Nếu bubble đổi chữ liên tục (khách mới), đặt bubble trong vùng `aria-live="polite"` ở nơi dùng.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Bôi đậm tối đa 2–3 từ khoá món | Bôi đậm cả câu |
| Dùng `--raised` khi nền phía sau là `bg` | Để bubble `bg` trên nền `bg` (mất khung) |
| Với `--stage`, đặt trong `.tt-stage` 768px | Dùng `--stage` ở DOM thường (chữ 24px cố định) |

## Nguồn
`.say`, `.say b` — css/style.css dòng 355–356 (cỡ .74rem, padding 5px 7px, line-height 1.3); `.frontshop-karin-bubble` (+ `::after`, keyframes `floatBubble`) — dòng 2329–2360, viền `#f59e0b` đổi `gold`, nền trắng .96 đổi `panel`, chữ `#78350f` đổi `ink`, bóng `0 4px 15px rgba(0,0,0,.2)` viết bằng `color-mix`; `#q3bub`/`#q3say`, `#q3say b` — dòng 607–615 (24px, 600, 1.18; từ khoá `#c2506c` thành `stage-accent`).