# UpgradeCard
Thẻ nâng cấp trong tab Nâng cấp: icon, tên, hiệu ứng, cấp hiện tại / tối đa, giá và nút Mua.

## Khi nào dùng
- Mỗi món trang bị trong tab Nâng cấp > Trang bị (Biển hiệu đèn LED, Bàn ghế, Máy lạnh, Quảng cáo, Máy dán nắp).
- Cần báo rõ nâng cấp đang mua được, thiếu tiền, đã mua hoặc chưa mở khoá.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mặc định | `tt-upgrade-card` | Có thể mua; nút Mua bên phải |
| Đã mua | `tt-upgrade-card is-owned` | Viền `mint`, thay nút bằng chữ "✓ Đã mua" |
| Chưa mở khoá | `tt-upgrade-card is-locked` | Viền nét đứt, nền `bg`, icon xám, "Cần Level 3" kèm `ic_lock` |

## Cấu trúc
```html
<ul class="tt-business-list">
<li><article class="tt-upgrade-card">
  <img class="tt-upgrade-card__icon" src="assets/Icons/ic_upbulb.png" alt="">
  <div>
    <div class="tt-upgrade-card__name">Biển hiệu đèn LED</div>
    <div class="tt-upgrade-card__effect">+20% khách ghé quán</div>
    <div class="tt-upgrade-card__level"><span>Cấp</span><span class="tt-num">2/5</span></div>
    <div class="tt-progress tt-progress--goal" role="progressbar" aria-label="Biển hiệu đèn LED: cấp 2 trên 5"
         aria-valuemin="0" aria-valuemax="5" aria-valuenow="2"><i class="tt-progress__fill" style="width:40%"></i></div>
  </div>
  <div class="tt-upgrade-card__action">
    <button type="button" class="tt-button tt-button--small tt-button--accent" data-action="buy"><b>400k</b>Mua<span class="tt-sr-only"> Biển hiệu đèn LED</span></button>
  </div>
</article></li>
</ul>
```
Mỗi thẻ là một `<li>` trong `<ul class="tt-business-list">` (danh sách không chấm, xếp dọc). Icon: `ic_upbulb`, `ic_upchair`, `ic_upcups`, `ic_upmega`, `ic_upsnow`. Thanh cấp dùng lại `tt-progress`.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Đủ tiền | Nút `--accent` bật |
| Thiếu tiền | Nút `disabled` có `aria-describedby` trỏ tới `tt-upgrade-card__reason is-short` ("Thiếu 150k", chữ `warn` đậm, có `id`) |
| `is-owned` | Viền `mint`, `__owned` "✓ Đã mua" |
| `is-locked` | Viền nét đứt, `__lock` có icon khoá và điều kiện bằng chữ |

## Hành vi JS
`TTMU.businessCards(root, { onAction })` (dùng chung cả nhóm Nghiệp vụ): bấm nút `[data-action]` chưa `disabled` thì gọi `onAction("buy", nút, thẻ)`. Việc trừ tiền, thêm `is-owned` và thay nút bằng "✓ Đã mua" do game làm (preview chỉ minh hoạ trạng thái tĩnh).

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

## Khả năng tiếp cận
- Nút Mua có tên truy cập đủ ý nhờ chữ ẩn `tt-sr-only` ("400k Mua Biển hiệu đèn LED"); không dùng `aria-label` đè lên chữ giá. Lý do thiếu tiền gắn bằng `aria-describedby`.
- Thiếu tiền, đã mua, bị khoá đều có chữ riêng; không chỉ dựa vào màu viền hay độ mờ.
- Thanh cấp là `role="progressbar"` có `aria-label`; icon trang trí `alt=""`, icon khoá cạnh chữ cũng `alt=""`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Ghi lý do khi nút bị khoá ("Thiếu 150k", "Cần Level 3") | Chỉ làm mờ thẻ mà không giải thích |
| Dùng `tt-button--small tt-button--accent` cho nút Mua | Tự vẽ nút Mua mới |
| Đặt các thẻ trong `tt-stack` | Thêm cột thứ 4 vào lưới |

## Nguồn
`.rowi`, `.rowi .nm`, `.rowi .sub`, `.okline`, `.wl`, `.lock.unl` — css/style.css; markup `UPG.map` trong tab Nâng cấp của js/game.js (nâng cấp trong game chỉ có mua một lần; cấp hiện tại/tối đa và thanh cấp là bổ sung có chủ đích để thẻ dùng được cho mốc nâng Level 1000·2^lv).
- Lưới `44px 1fr 88px`, đường viền nét đứt cho thẻ khoá và vòng `mint` cho thẻ đã mua là bổ sung có chủ đích (game dùng hàng `.rowi` phẳng, mờ `.5`).