# Rating
Hiển thị điểm sao: dòng sao + số (`tt-rating`) và khối tổng hợp đánh giá có 5 thanh phân bố bấm lọc được (`tt-rating-summary`).

## Khi nào dùng
- Hiện điểm trung bình hoặc điểm của một đánh giá: `tt-rating`.
- Đầu tab Đánh giá: điểm lớn, số đánh giá và phân bố 5★…1★ để lọc: `tt-rating-summary`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Dòng sao | `tt-rating` | Sao `gold` + điểm bằng chữ |
| Tổng hợp | `tt-rating-summary` | Điểm 2.4rem bên trái, 5 dòng phân bố bên phải |

## Cấu trúc
```html
<span class="tt-rating" role="img" aria-label="4,6 trên 5 sao">
  <span class="tt-rating__stars" aria-hidden="true">★★★★★</span>
  <span class="tt-rating__score">4,6</span>
</span>

<div class="tt-rating-summary" id="rs">
  <div class="tt-rating-summary__big">
    <b class="tt-rating-summary__score">4,6</b>
    <span class="tt-rating-summary__stars" aria-hidden="true">★★★★★</span>
    <div class="tt-rating-summary__count">💬 23 đánh giá</div>
  </div>
  <div>
    <button type="button" class="tt-rating-summary__row" data-stars="5" aria-pressed="false" aria-label="Lọc 5 sao, 16 đánh giá">
      <span>5★</span><span class="tt-rating-summary__bar"><i style="width:100%"></i></span><span class="tt-num">16</span>
    </button>
    <!-- 4, 3, 2, 1 tương tự -->
  </div>
</div>
```
Chuỗi sao dùng `TTMU.starString(4.6)`; điểm tiếng Việt dùng dấu phẩy.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `.tt-rating-summary__row[aria-pressed="true"]` | Nền `line` cả dòng, rãnh thanh đổi sang `panel` |

## Hành vi JS
```js
var f = TTMU.ratingFilter(document.getElementById('rs'), { onChange: function (stars) {} });
f.value;   // 1–5 hoặc null
f.set(4);  // đặt thủ công, set(null) để bỏ lọc
```
- Bấm dòng đang bật sẽ bỏ lọc. Gắn một lần (`data-tt-bound`); trả về `{ value, set(n), destroy() }`.
- **Quy ước `onChange`:** chỉ thao tác của người dùng mới gọi `onChange`, và chỉ khi giá trị thật sự đổi; `set()` từ code thì im lặng.
- `set()` với giá trị không phải số (`"abc"`, `NaN`) coi như `null` (bỏ lọc).

## Token sử dụng
`gold`, `fill-muted` (rãnh thanh tóm tắt), `panel`, `soft`, `shadow-edge` (viền hàng lọc đang bật ở `hc`), `radius-8`, `space-4/6/10/16`.

## Khả năng tiếp cận
- `gold` trên nền sáng chỉ khoảng 1.79:1, nên sao luôn đi kèm điểm bằng chữ; sao `aria-hidden`.
- Mỗi dòng phân bố là `<button aria-pressed>` với `aria-label` "Lọc N sao, M đánh giá" (kèm số lượng).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Luôn kèm số điểm | Chỉ hiện sao vàng |
| Số đếm ở cột phải dùng `tt-num` | Dùng dấu chấm thập phân ("4.6") |

## Nguồn
`.stars`, `.revsum`, `.revbig`, `.revbig b`, `.dist div`, `.dist .dstr`, `.dist .dstr.on`, `.dist i`, `.dist .bar` — css/style.css; markup `revsum` trong js/game.js.
- `.note` ("💬 23") không tìm thấy luật CSS: dùng `soft` .82rem.