# Review
Một đánh giá của khách: mặt/ảnh khách, tên, ngày, số sao, nội dung và (nếu có) lời phản hồi của chủ quán.

## Khi nào dùng
- Danh sách trong tab Đánh giá, dưới khối `tt-rating-summary`.
- Review thấp sao (≤ 2★) dùng chữ `warn`; review chưa trả lời có nút "Trả lời".

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Review | `tt-review` | Lưới `40px | 1fr | auto`, vạch kẻ dưới |
| Chữ cảnh báo | `tt-review__text--bad` | Đánh giá 2★ trở xuống |
| Phản hồi chủ quán | `tt-review__reply` | Chữ `link`, nhãn "Chủ quán:" |

## Cấu trúc
```html
<article class="tt-review">
  <span class="tt-review__face"><span class="tt-avatar">…</span></span>
  <div>
    <div class="tt-review__top"><b>Bé Na</b> <span class="tt-badge tt-badge--accent">…</span><span class="tt-review__day">Ngày 2</span></div>
    <div class="tt-rating" role="img" aria-label="5,0 trên 5 sao">…</div>
    <p class="tt-review__text">Trà sữa ngon, trân châu dẻo, sẽ quay lại!</p>
    <p class="tt-review__reply"><span class="tt-review__reply-label">Chủ quán:</span> Cảm ơn bạn nhé!</p> <!-- tuỳ chọn -->
  </div>
  <button type="button" class="tt-button tt-button--small">Trả lời</button> <!-- tuỳ chọn; để <span></span> nếu không có -->
</article>
```
Mặt khách dùng Avatar; sao dùng `tt-rating`; tag nhỏ dùng Badge.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `tt-review__text--bad` | Nội dung đổi màu `warn` |
| Có phản hồi | Hiện `__reply` thay cho nút "Trả lời" |

## Token sử dụng
`line`, `soft`, `gold`, `warn`, `link`, `space-6/8/10`.

## Khả năng tiếp cận
- Dùng `<article>` cho từng đánh giá; sao có `aria-label` "N trên 5 sao" kèm điểm bằng chữ.
- Màu `warn` không phải tín hiệu duy nhất: số sao ghi trong chữ.
- Nút "Trả lời" là `<button>` thật.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Ghi rõ "Chủ quán:" trước phản hồi | Chỉ phân biệt phản hồi bằng màu |
| Giữ 3 cột (cột 3 để trống nếu không có nút) | Đặt nút Trả lời dưới nội dung khi có phản hồi |

## Nguồn
`.rev`, `.rev .top`, `.rev p`, `.rev.bad p`, `.rtop`, `.rday`, `.revc`, `.tag`, `.rface` — css/style.css; markup tab Đánh giá (`revsum`, `rev`) trong js/game.js.
- `.rev .top` (space-between) dùng thực tế là `.rtop` (flex, gap 6, .85rem) nên DS theo `.rtop`.
- Màu phản hồi `link` (#2b78c5) theo `.revc`.