# GiftCard
Thẻ quà / lì xì từ bạn bè: icon, tên quà, giá trị, người gửi, nút Nhận, cùng lưới chọn mức lì xì và ô nhập mã quà.

## Khi nào dùng
- Chọn bao lì xì để gửi cho bạn trong tab Bạn bè (100k, 200k, 500k).
- Quà bạn gửi tới cần bấm Nhận.
- Nhập mã quà (dùng lại `tt-code-input`).

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Chọn mức | `<button class="tt-gift-card" role="radio" aria-checked>` trong `role="radiogroup"` | Chọn một mức lì xì; chỉ một thẻ `aria-checked="true"` |
| Quà nhận | `<article class="tt-gift-card">` | Có `__sender` và nút Nhận |
| Nhập mã | `tt-gift-card tt-gift-card--redeem` | Ô nhập mã và nút Đổi quà |
| Lưới | `tt-gift-card-grid` (+ `__wide` span 2 cột) | Hai cột như `.bb-gift-grid` |

## Cấu trúc
```html
<div class="tt-gift-card-grid" role="radiogroup" aria-label="Chọn mức bao lì xì">
  <button type="button" class="tt-gift-card" role="radio" aria-checked="true" data-value="100000">
    <span class="tt-gift-card__icon" aria-hidden="true">🧧</span>
    <span class="tt-gift-card__name">Lì xì 100k</span>
    <span class="tt-gift-card__value">Vốn khởi nghiệp</span>
  </button>
</div>
<section class="tt-gift-card tt-gift-card--redeem" aria-labelledby="gr1">
  <h3 class="tt-gift-card__name" id="gr1">🎁 Nhập mã quà</h3>
  <div class="tt-gift-card__row">
    <input class="tt-code-input tt-num tt-gift-card__input" inputmode="numeric" maxlength="8" aria-label="Mã quà">
    <button type="button" class="tt-button tt-button--small tt-button--accent" data-action="redeem">Đổi quà</button>
  </div>
</section>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `aria-checked="true"` | Viền `pink`, vòng `shadow-ring-pink`, nền pha `pink` 10% |
| Mặc định | Viền `line` 2px |

## Hành vi JS
`TTMU.businessCards(root, { onAction, onChange })`: nhóm `radiogroup` chọn một thẻ (click hoặc phím mũi tên / Home / End, roving `tabindex`); `onChange(data-value, thẻ)` chỉ gọi khi người dùng đổi lựa chọn. Nút `[data-action]` gọi `onAction("claim" | "redeem", nút, thẻ)`.

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

## Khả năng tiếp cận
- Thẻ chọn mức là `role="radio"` trong `radiogroup` (một điểm Tab cho cả nhóm, mũi tên đổi thẻ); trạng thái chọn có viền đôi chứ không chỉ khác màu.
- Emoji trang trí `aria-hidden="true"`, ảnh trang trí `alt=""`; ô nhập mã có `aria-label`.
- Giá trị `pink-d` ở Kem sữa và Đêm dịu thấp hơn 4.5:1 như ghi ở token; giá trị đã có trong tên quà.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Ghi số tiền ngay trong tên quà ("Lì xì 100k") | Chỉ để dòng giá trị phụ |
| Dùng `tt-code-input` cho ô nhập mã | Viết lại ô nhập |

## Nguồn
`.bb-gift-grid`, `.bb-gift-card`, `.bb-gift-card.on`, `.bb-gift-icon`, `.bb-gift-name`, `.bb-gift-val`, `.bb-redeem-box`, `.bb-redeem-title`, `.bb-redeem-input-row`, `.bb-redeem-input` — css/banbe.css; markup trong js/banbe.js.
- Màu cam (`#ea580c`, `#fff7ed`) đổi sang `pink` / `pink-d`; ô nhập mã dùng `tt-code-input`.
- Dòng người gửi và nút Nhận là bổ sung có chủ đích (game nhận quà qua hộp thoại).