# Progress
Thanh tiến độ mảnh: tiến độ mục tiêu ngày, độ kiên nhẫn của khách và thanh doanh thu trong bảng kê.

## Khi nào dùng
- Mục tiêu ngày (Bán 20 ly): `--goal`, đạt rồi thêm `is-done`.
- Độ kiên nhẫn của khách trên thẻ khách: `--patience`.
- Thanh so sánh nhỏ dưới tên món trong bảng kê cuối ngày: `--revenue`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mục tiêu | `tt-progress tt-progress--goal` | Cao 6px, fill `gold`, bo 3 |
| Mục tiêu đạt | `tt-progress tt-progress--goal is-done` | Fill chuyển `mint` |
| Kiên nhẫn | `tt-progress tt-progress--patience` | Cao 5px, fill `mint`, chiếm cả hàng lưới (`grid-column: 1/-1`) |
| Doanh thu | `tt-progress tt-progress--revenue` | Cao 4px, fill `link` |

## Cấu trúc
```html
<div class="tt-progress tt-progress--goal" role="progressbar" aria-label="Bán 20 ly"
     aria-valuemin="0" aria-valuemax="20" aria-valuenow="12">
  <i class="tt-progress__fill" style="width:60%"></i>
</div>
```
Người dùng tự đặt `width` của `__fill` (phần trăm) và giữ `aria-valuenow` đồng bộ. Khi dùng trong thẻ khách (CustomerCard), đặt `tt-progress--patience` làm con trực tiếp của lưới.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `is-done` | Fill đổi sang `mint` (dùng cho `--goal`) |

## Token sử dụng
`fill-muted` (rãnh), `gold`, `mint`, `link`, `space-4`.

## Khả năng tiếp cận
- Luôn có `role="progressbar"`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow` và `aria-label`.
- Cạnh thanh nên có số ("12/20") hoặc tên để không chỉ dựa vào chiều dài.
- Rãnh `line` rất nhạt so với panel (dưới 3:1): thanh là phần trang trí, thông tin chính nằm ở chữ.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Kẹp `width` trong 0–100% | Để fill vượt rãnh |
| Dùng `--patience` ngay dưới tên khách | Tự đổi màu fill bằng hex |

## Nguồn
`.gb`, `.gb i`, `.gr.ok .gb i`, `.pat`, `.pat i`, `.tbar`, `.tbar i` — css/style.css; markup trong js/game.js (`goalc`, thẻ khách, `trow`).
- `.pat i` mặc định `width:100%`; ở đây fill do trang đặt.
- Game không có transition cho fill; DS giữ nguyên.