# Pager
Hàng nút chuyển trang ở danh sách dài như Đánh giá của khách: ◀ 1 2 3 … 8 ▶.

## Khi nào dùng
- Danh sách có nhiều hơn một trang. Game chỉ vẽ pager khi có từ 2 trang trở lên.
- Hiện trang đầu, trang cuối và trang hiện tại cùng hai trang cạnh nó; phần còn lại thu thành `…`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Khối | `tt-pager` | Hàng nút căn giữa, tự xuống dòng, lề dọc 10px |
| Nút trang | `tt-pager__button` | Số trang hoặc ◀ ▶, 38×38px |
| Dấu lược | `tt-pager__gap` | `…` giữa các trang bị bỏ qua |

## Cấu trúc
```html
<nav class="tt-pager" aria-label="Phân trang đánh giá">
  <button class="tt-pager__button" aria-label="Trang trước">◀</button>
  <button class="tt-pager__button">1</button>
  <button class="tt-pager__button" aria-current="page">2</button>
  <button class="tt-pager__button">3</button>
  <span class="tt-pager__gap" aria-hidden="true">…</span>
  <button class="tt-pager__button">8</button>
  <button class="tt-pager__button" aria-label="Trang sau">▶</button>
</nav>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Mặc định | Viền 2px `line`, nền `panel`, chữ `ink` |
| `[aria-current="page"]` | Nền và viền `pink`, chữ `on-pink` |
| `:disabled` | Opacity .35 (◀ ở trang đầu, ▶ ở trang cuối) |
| Focus bàn phím | Vòng `focus-ring` 3px |

## Token sử dụng
`line`, `panel`, `ink`, `soft`, `pink`, `on-pink`, `radius-12`.

## Khả năng tiếp cận
- Bọc trong `<nav aria-label>`; nút ◀ ▶ có `aria-label` "Trang trước" / "Trang sau".
- Trang hiện tại đánh dấu bằng `aria-current="page"`, không chỉ bằng màu.
- Dấu `…` là trang trí nên `aria-hidden="true"`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Để ◀ ▶ disabled ở hai đầu khi muốn giữ vị trí nút | Thu nhỏ nút dưới 36px |
| Giữ 38px để dễ chạm | Liệt kê hết 20 trang |
| Dùng `…` khi bỏ quá một trang liền kề | Dùng `aria-current` cho nút không phải trang hiện tại |

## Nguồn
`.pager`, `.pager button`, `.pager button.on`, `.pager button:disabled`, `.pager span` — css/style.css; `pagerHTML()` — js/game.js (game không vẽ nút ◀ ▶ khi ở hai đầu; DS cho phép `:disabled`).