# StaffCard
Thẻ nhân viên trong tab Nhân viên và KPI: avatar, tên, vai trò, lương/ngày, buff KPI, thanh chu kỳ, nút Thuê / Cho nghỉ; kèm widget nhân viên Gen Z dưới quầy.

## Khi nào dùng
- Danh sách đội ngũ và ứng viên (9 vai trò): Thử việc 0 lương (0), Thử việc chính thức (165k), Nhân viên pha chế (200k), Nhân viên đơn online (250k), Quản lý tập sự (200k), Nhân viên Gen Z (275k), Nhân viên đi chợ (100k), Sinh viên cuối tháng (200k/ca đêm), Nhân viên Me két tinh (200k). Lương tính theo ngày.
- Widget Gen Z: nhân viên đang pha, dỗi hoặc đang đá bill, kèm nút bắt quả tang / dỗ dành.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Thẻ | `tt-staff-card` | Hàng nhân viên trong tab, nút ở bên phải |
| Widget | `tt-staff-card tt-staff-card--widget` | Thanh ngang 64px của Gen Z, bo 20 |

## Cấu trúc
```html
<ul class="tt-business-list">
<li><article class="tt-staff-card">
  <div class="tt-staff-card__info">
    <span class="tt-avatar tt-staff-card__avatar"><img class="tt-avatar__img" src="assets/Avatars/b05.png" alt=""></span>
    <div class="tt-staff-card__body">
      <div class="tt-staff-card__name">Nhân viên pha chế
        <span class="tt-badge tt-badge--muted">Pha chế</span>
        <span class="tt-badge tt-badge--count">🟢 Đang đi làm</span></div>
      <div class="tt-staff-card__sub">Lương <span class="tt-staff-card__wage">200k/ngày</span></div>
      <div class="tt-staff-card__buffs"><span class="tt-badge tt-badge--count">📣 +10% gọi khách</span></div>
      <div class="tt-staff-card__kpi">
        <div class="tt-staff-card__kpi-text"><span>⭐ Cấp KPI: 2</span><span>Ca 5/7</span></div>
        <div class="tt-progress tt-progress--goal" role="progressbar" aria-label="..." aria-valuemin="0" aria-valuemax="7" aria-valuenow="5"><i class="tt-progress__fill"></i></div>
      </div>
    </div>
  </div>
  <div class="tt-staff-card__action"><button type="button" class="tt-button tt-button--small" data-action="fire"><b>✓</b>Cho nghỉ</button></div>
</article></li>
</ul>
```
Mỗi thẻ là `<li>` trong `<ul class="tt-business-list">`. Pill buff và "Đang đi làm" dùng `tt-badge tt-badge--count`; vai trò, "Tạm nghỉ ca", "Chưa tuyển" dùng `tt-badge--muted`; "Đang dỗi" dùng `tt-badge--fresh-1`. Không có lớp trạng thái riêng.

## Trạng thái
| Trạng thái | Lớp | Hiệu ứng |
|---|---|---|
| Đang đi làm | `tt-badge--count` | Chữ "🟢 Đang đi làm" |
| Tạm nghỉ / chưa tuyển | `tt-badge--muted` | "⏸️ Tạm nghỉ ca", "⚪ Chưa tuyển" |
| Đang dỗi | `tt-badge--fresh-1` + widget `is-sulking` | Viền `warn`, nền pha `warn` |
| Đang đá bill | widget `is-stealing` | Viền `warn` 2px |
| Bắt quả tang | `__poke.is-catch` | Nút `warn` nhịp `tt-pulse` |

Ngoại lệ có chủ đích: `tt-staff-card__poke` là chip hành động riêng của Gen Z (Button không có biến thể tương đương), nên giữ lớp riêng.

## Hành vi JS
`TTMU.businessCards(root, { onAction })`: nút `[data-action]` ("hire", "fire", "poke", "cheer") gọi `onAction(action, nút, thẻ)`.

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

## Khả năng tiếp cận
- Trạng thái luôn có chữ (và emoji), không chỉ màu.
- Thanh KPI là `role="progressbar"` có `aria-label` nêu tên nhân viên.
- Nút Thuê có tên nhân viên trong chữ ẩn `tt-sr-only`; avatar cạnh tên dùng `alt=""`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Giữ thứ tự: tên, vai trò, trạng thái, lương, buff, thanh KPI | Dồn lương và buff vào một dòng dài |
| Dùng `tt-badge` cho pill buff và trạng thái | Tự định nghĩa lại pill |

## Nguồn
`.staff-kho-row`, `.staff-kho-info`, `.staff-kho-avatar`, `.staff-kho-details`, `.staff-kho-name`, `.staff-kho-sub`, `.staff-kho-kpi`, `.kpi-status-working`, `.kpi-status-off`, `.kpi-buff-pill`, `.kpi-progress-bar`, `.gz-widget`, `.gz-avatar`, `.gz-name`, `.gz-pill-work`, `.gz-pill-sulk`, `.gz-msg`, `.gz-poke-chip` — css/style.css; markup `staffKhoHTML` trong js/game.js.
- Màu hex Tailwind của game (slate, emerald, orange) đổi sang token cùng vai trò (`panel`, `mint`, `warn`, `street`), gradient bỏ để đọc được ở cả 5 theme.