# ChalkMenu
Bảng phấn xanh "Menu hôm nay" ở màn chuẩn bị: món, giá bán, topping và phụ phí size L.

## Khi nào dùng
- Đầu màn chuẩn bị, dưới biển tên quán, để người chơi thấy giá đang bán.
- Chỉ liệt kê món đã mở khoá. Khối "Hương vị" chỉ hiện khi có hương vị.

## Biến thể
| Phần | Lớp | Dùng khi |
|---|---|---|
| Khối | `tt-chalkmenu` | Nền `chalk`, khung gỗ `counter` 8px |
| Tiêu đề | `tt-chalkmenu__title` | "Menu hôm nay" kèm icon cốc |
| Lưới món | `tt-chalkmenu__items` (+ `--top`) | 2 cột; `--top` cho lưới topping |
| Dòng món | `tt-chalkmenu__item` | Tên bên trái, giá bên phải, gạch nét đứt |
| Nhóm | `tt-chalkmenu__group` | "Hương vị", "Topping" |
| Nhóm con | `tt-chalkmenu__subgroup` | Nhãn nhỏ chiếm cả hàng khi có hơn 4 topping |
| Phụ phí | `tt-chalkmenu__extra` | "Size L +7k" |

## Cấu trúc
```html
<section class="tt-chalkmenu" aria-labelledby="menu-title">
  <h2 class="tt-chalkmenu__title" id="menu-title"><img class="tt-ico" src="assets/Icons/ic_cupfull.png" alt=""> Menu hôm nay</h2>
  <div class="tt-chalkmenu__items">
    <div class="tt-chalkmenu__item"><span>Trà sữa</span><span class="tt-num">25k</span></div>
  </div>
  <div class="tt-chalkmenu__group">Topping</div>
  <div class="tt-chalkmenu__items tt-chalkmenu__items--top">
    <div class="tt-chalkmenu__item"><span>Trân châu đen</span><span class="tt-num">+6k</span></div>
  </div>
  <div class="tt-chalkmenu__extra">Size L +7k</div>
</section>
```
Giá lấy từ `TTMU.formatMoney`.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Mặc định | Chữ phấn `chalk-ink` trên `chalk`, bóng phẳng `shadow-board` |
| Chỉ đọc | Không có hover hay chọn; đây là bảng thông tin |

## Token sử dụng
`chalk`, `chalk-ink`, `alpha-chalk-group`, `alpha-chalk-sub`, `alpha-chalk-extra` (độ đục chữ phấn), `counter`, `shadow-board`, `radius-10`, `space-2/4/10/12/14/16`.

## Khả năng tiếp cận
- Chữ phấn `chalk-ink` trên `chalk` đạt 8.46:1; mọi theme dùng cùng màu nên không đổi.
- Tiêu đề là `<h2>`, vùng bảng liên kết bằng `aria-labelledby`.
- Icon cốc `alt=""` vì tiêu đề đã có chữ.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Giá căn phải, dùng `tt-num` | Đổi nền bảng sang màu theo theme |
| Đặt topping sau món chính | Thêm hơn 2 cột |
| Dùng `--top` cho lưới topping | Tự chỉnh khoảng cách dòng |

## Nguồn
`.board`, `.board h2`, `.board .items`, `.board .it`, `.board .btop`, `.board .extra`, `.board .tgb`, `.board .items.top` — css/style.css; `menuBoard()` — js/game.js. Padding trên 18px là giá trị cuối cùng của game; đường gạch `rgba(244,239,226,.25)` thành `color-mix(chalk-ink 25%, transparent)`.