# Card
Thẻ nền `panel` viền 2px bo 14: thẻ "Mục tiêu ngày" với các dòng tiến độ, trạng thái hoàn thành và thẻ két tiền (`till`).

## Khi nào dùng
- Gói một nhóm thông tin ngắn trong tab hoặc hộp thoại (mục tiêu ngày, két tiền).
- Thẻ mục tiêu: tiêu đề + nhiều dòng "nhãn — giá trị" kèm thanh `tt-progress--goal`.
- Khi cả thẻ đã đạt: dùng `is-done` để báo "hoàn thành".

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Thẻ | `tt-card` | Khung panel, viền 2px `line`, padding 10×12 |
| Mục tiêu | `tt-card tt-card--goal` | Thẻ có dòng tiêu đề và các dòng tiến độ |
| Két tiền | `tt-card tt-card--till` | Rộng tối đa 330px, bo 20, padding 14, xếp cột gap 10 |

## Cấu trúc
```html
<section class="tt-card tt-card--goal" aria-label="Mục tiêu ngày 2">
  <div class="tt-card__head">Mục tiêu ngày 2 <span class="tt-card__meta">3 mục</span></div>
  <div class="tt-card__row">
    <div class="tt-card__row-text"><span class="tt-card__row-label">Bán 20 ly</span><span class="tt-card__row-value tt-num">12/20</span></div>
    <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>
  </div>
</section>
```
Người dùng tự cung cấp nội dung các dòng và độ rộng `style="width:…%"` của thanh tiến độ.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `tt-card.is-done` | Viền và chữ `mint`, đậm, căn giữa (kèm chữ "✓" trong nội dung) |
| `tt-card__row.is-done` | Nhãn của dòng đó chuyển `mint` (đặt thêm `is-done` cho thanh `tt-progress`) |

## Token sử dụng
`panel`, `line`, `ink`, `soft`, `mint`, `radius-14`, `radius-20`, `space-4/6/10/12`.

## Khả năng tiếp cận
- Dùng `<section aria-label>` hoặc có tiêu đề để screen reader đọc được tên thẻ.
- "✓" là chữ trong nội dung nên trạng thái hoàn thành không chỉ dựa vào màu.
- Thanh tiến độ có `role="progressbar"` đầy đủ (xem Progress).

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Ghi số "12/20" bằng chữ cạnh thanh | Chỉ báo tiến độ bằng màu thanh |
| Dùng `tt-num` cho số để cột chữ số đều | Lồng thẻ trong thẻ |

## Nguồn
`.goalc`, `.goalc.done`, `.gh`, `.gh span`, `.gr`, `.gt`, `.till` — css/style.css; markup trong js/game.js (`.goalc`).
- `.till .stp` (min-height 48, .75rem) không có lớp riêng: đặt bằng `style` hoặc lớp của trang khi cần.
- `.gr.ok .gt span:first-child` mint → `tt-card__row.is-done .tt-card__row-label`.