# CardHand
Tay bài của một người chơi hoặc nhà cái: các thẻ chồng lệch nhau kèm nhãn kết quả đúng chữ của game: Xì Bàng!, Xì Dách!, Ngũ Linh (Nđ), Quá chén (Nđ), N điểm (Chưa đủ tuổi), N điểm.

## Khi nào dùng
- Trong ghế người chơi (`XiDachSeat`) và khu nhà cái của `XiDachTable`.
- Sau khi so điểm, hoặc khi nhà cái xem bài của mình: nhãn nói rõ tay bài đang ở mức nào.
- Component chỉ trình bày: điểm và loại kết quả do code của bạn tính rồi truyền vào (`setResult`).

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Tay bài | `tt-cardhand` | Lá chồng nhau 12px, nhãn dưới bài (`.xd-cards-hand`) |
| Mini | `tt-cardhand--mini` | Đi với `tt-playcard--mini`: chồng 9px, cao tối thiểu 44px |
| Nhà cái | `tt-cardhand--dealer` | Tiêu đề và nhãn cùng hàng trên, khay bài viền `line` (`.xd-dealer-head`, `.xd-dealer-cards-wrap`); dùng thẻ `--large` |
| Nhãn | `tt-cardhand__label--xibang` · `--xidach` · `--ngulinh` | Tông `mint` (tay mạnh) |
| | `--quac` · `--non` · `--dutuoi` | Quá chén tông `warn`, chưa đủ tuổi tông `gold`, đủ tuổi tông `street` nhạt |

## Cấu trúc
```html
<div class="tt-cardhand" role="group" aria-label="Bài của Gen Z Sống Ảo">
  <div class="tt-cardhand__head">
    <span class="tt-cardhand__label tt-cardhand__label--dutuoi" data-result="dutuoi">
      <span class="tt-cardhand__icon" aria-hidden="true">🎂</span>
      <span class="tt-cardhand__name">19 điểm</span>
    </span>
  </div>
  <div class="tt-cardhand__cards">
    <span class="tt-cardhand__slot"><span class="tt-playcard tt-playcard--trang" role="img" aria-label="Trân Châu Trắng 3Q 9" data-label="Trân Châu Trắng 3Q 9">…</span></span>
    <span class="tt-cardhand__slot"><span class="tt-playcard" role="img" aria-label="Trân Châu Đen 10" data-label="Trân Châu Đen 10">…</span></span>
  </div>
</div>
```
Mỗi thẻ bọc trong `tt-cardhand__slot` (lo chồng lệch và nhấc khi rê chuột). Nhà cái thêm `<span class="tt-cardhand__title">👑 Chủ Quán (Bạn)</span>` vào đầu `__head`. Tay chưa có kết quả để `<span class="tt-cardhand__label" hidden>`; `__empty` dành cho dòng "Chưa có thẻ".

## Trạng thái
| Kết quả | Chữ nhãn (như game) | Biểu tượng | Điều kiện (code của bạn tính) |
|---|---|---|---|
| `xibang` | Xì Bàng! | 🔥 | 2 thẻ đầu là AA |
| `xidach` | Xì Dách! | ⚡ | 2 thẻ đầu là Át + 10/J/Q/K |
| `ngulinh` | Ngũ Linh (16đ) | ✨ | 5 thẻ, tổng ≤ 21 |
| `quac` | Quá chén (25đ) | 💥 | tổng > 21 |
| `non` | 12 điểm (Chưa đủ tuổi) | ⚠️ | dưới 16 điểm (nhà cái dưới 15) |
| `dutuoi` | 19 điểm | 🎂 | từ 16 điểm (nhà cái từ 15) |

## Hành vi JS
`TTMU.cardHand(el)` gắn một lần lên `.tt-cardhand` (gắn lần hai trả về `null`) và trả về `{ result, setResult(type, score), destroy() }`.

```js
var hand = TTMU.cardHand(document.querySelector('.tt-cardhand--dealer'));
hand.setResult('quac', 26); // nhãn "💥 Quá chén (26đ)", đổi tông sang warn
hand.setResult(null);       // ẩn nhãn
```
`setResult` trả về `false` nếu `type` lạ. Điểm ghép vào chữ theo `calcHand()` của game; chữ gán bằng `textContent`; hàm không tính điểm và không gọi callback.

## Token sử dụng
`mint`, `warn`, `gold`, `street`, `panel`, `fill-muted`, `line`, `ink`, `soft`, `radius-14`, `space-4/6/8/10`.

## Khả năng tiếp cận
- Tay bài là `role="group"` có `aria-label` ("Bài của Chủ Quán"); thẻ đọc như `PlayingCard`.
- Mỗi kết quả có chữ riêng và biểu tượng `aria-hidden`; tông màu chỉ là phần thêm. Chữ nhãn luôn `ink` trên nền pha nhạt nên đạt 7:1 ở Tương phản cao.
- Hover nhấc lá chỉ là hiệu ứng; không có thông tin nào chỉ hiện khi rê chuột.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Truyền điểm để nhãn ghi "Quá chén (25đ)", "19 điểm" | Chỉ tô màu mà không có chữ |
| Dùng `tt-cardhand--mini` khi ghế hẹp và tay có 5 lá | Để năm lá thường tràn khỏi ghế ~95px |
| Úp lá của khách tới khi so điểm, chỉ hiện nhãn sau đó | Hiện nhãn của khách khi lá còn úp |

## Nguồn
`.xd-cards-hand`, `.xd-dealer-head`, `.xd-dealer-title`, `.xd-dealer-score-badge(.quac|.xidach)`, `.xd-dealer-cards-wrap`, `.xd-p-status` — css/xidach.css; `calcHand()` (tên và xếp loại kết quả) và `renderUI()` trong js/xidach.js.
- Chữ nhãn giữ nguyên chuỗi của `calcHand()`: "Xì Bàng! 🔥", "Xì Dách! ⚡", "Ngũ Linh (Nđ) ✨", "Quá chén (Nđ) 💥", "N điểm (Chưa đủ tuổi)", "N điểm"; emoji tách thành `__icon` `aria-hidden`.
- `gap: -14px` của `.xd-cards-hand` là giá trị không hợp lệ nên không có tác dụng; chồng lệch thực tế do `margin-left: -12px` của thẻ, chuyển sang `tt-cardhand__slot`.
- Badge điểm nhà cái cam / xanh / đỏ (`#f59e0b`, `#16a34a`, `#dc2626` với chữ trắng) đổi sang nền pha nhạt + chữ `ink` để đạt 7:1.