# HUD
Thanh trên cùng của game: nút tròn và ngày ở trái, tên quán với tiền két ở giữa, sao đánh giá cùng nút Xuống Phố ở phải.

## Khi nào dùng
- Luôn nằm trên cùng mọi màn hình chính, dính khi cuộn (sticky) và chừa vùng tai thỏ.
- Màn chuẩn bị: dòng phụ ghi "Chuẩn bị", không có nút Tạm dừng.
- Lúc đang bán: thêm nút Tạm dừng (ô đầu của lưới nút) và dòng phụ đổi thành giờ trong game, ví dụ 11:10.

## Biến thể
| Phần | Lớp | Nội dung |
|---|---|---|
| Khối | `tt-hud` | Lưới `1fr auto 1fr`, sticky, nền `bg` |
| Trái | `tt-hud__left` + `tt-hud__buttons` | Lưới 2 cột nút `tt-iconbutton--sm` 28px, cạnh "Ngày 2" và `tt-hud__sub` |
| Giữa | `tt-hud__center` + `tt-hud__shop` | Tên quán (`pink-d`, .68rem) trên số tiền 1.3rem |
| Phải | `tt-hud__right` + `tt-hud__stars` + `tt-hud__rate` | Sao `gold`, điểm và số đánh giá, nút `tt-button--street` |

## Cấu trúc
```html
<header class="tt-hud">
  <div class="tt-hud__left">
    <div class="tt-hud__buttons">
      <button class="tt-iconbutton tt-iconbutton--sm" aria-label="Cài đặt"><img class="tt-iconbutton__icon" src="assets/Icons/ic_set.png" alt=""></button>
      <button class="tt-iconbutton tt-iconbutton--sm" aria-label="Xì Dách"><span class="tt-hud__emoji" aria-hidden="true">🧋</span></button>
    </div>
    <div>Ngày 2<small class="tt-hud__sub">Chuẩn bị</small></div>
  </div>
  <div class="tt-hud__center"><small class="tt-hud__shop">Tiệm Trà Mơ Ước</small><span class="tt-num">237,5k</span></div>
  <div class="tt-hud__right">
    <span class="tt-hud__stars" aria-label="1 trên 5 sao">★☆☆☆☆</span>
    <small class="tt-hud__rate">1,3 · 23 đánh giá</small>
    <button class="tt-button tt-button--street">…</button>
  </div>
</header>
```
Dùng `TTMU.formatMoney` cho tiền két và `TTMU.starString` cho chuỗi sao.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Chuẩn bị | 3 nút (Cài đặt, Bầu Cua, Xì Dách), dòng phụ "Chuẩn bị" |
| Đang bán | 4 nút (thêm Tạm dừng), dòng phụ là giờ `tt-num` |
| Màn thấp (`max-height: 680px`) | Padding trên giảm từ 14px xuống 4px, dưới từ 6px xuống 4px |
| Tên quán dài | Cắt `…`, tối đa 46vw |

## Token sử dụng
`bg`, `ink`, `soft`, `pink-d`, `gold`, `space-4/8/14`.

## Khả năng tiếp cận
- Dùng thẻ `<header>`; mọi nút tròn chỉ có icon đều có `aria-label` (icon `alt=""`).
- Chuỗi sao nên có `aria-label` đọc điểm ("1 trên 5 sao").
- Số dùng `tt-num` để không nhảy khi giờ và tiền đổi.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Giữ tối đa 4 nút tròn trong lưới 2×2 | Thêm nút thứ 5 làm lưới tràn |
| Tên quán ngắn, một dòng | Xuống dòng tên quán |
| Chỉ một nút Xuống Phố ở cột phải | Đặt nút `--street` ở nơi khác trên HUD |

## Nguồn
`header` (padding gốc `+14px 14px 6px`; màn thấp ≤680px dùng `+4px 14px 4px`), `.h-l`, `.h-l small`, `.h-btns-grid`, `.h-m`, `.h-m small`, `.h-r`, `.h-r small`, `.stars` — css/style.css; markup index.html dòng 80–99. Nút tròn dùng `IconButton`, nút Xuống Phố dùng `Button`.