# Skeleton
Khung chờ cho hàng danh sách, thẻ và chỉ số KPI khi dữ liệu đang tải.

## Khi nào dùng
- Giữ nguyên bố cục trong lúc tải để màn hình không nhảy.
- Tải ngắn, không rõ hình dạng nội dung thì dùng Spinner.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Dòng chữ | `tt-skeleton` | Dòng chữ 14px |
| Tiêu đề | `tt-skeleton--title` | Dòng 20px |
| Tròn | `tt-skeleton--circle` | Avatar 44px |
| Khối | `tt-skeleton--block` | Ảnh / biểu đồ 72px |
| Độ rộng | `--w25` `--w50` `--w75` | Rút ngắn dòng |
| Hàng | `tt-skeleton-row` (+ `__text`) | Hàng danh sách có avatar |
| Thẻ | `tt-skeleton-card` | Thẻ / ô KPI |

## Cấu trúc
```html
<div class="tt-skeleton-card" aria-busy="true">
  <span class="tt-sr-only" role="status">Đang tải thẻ…</span>
  <span class="tt-skeleton tt-skeleton--title tt-skeleton--w50"></span>
  <span class="tt-skeleton tt-skeleton--block"></span>
</div>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Đang tải | Khối `fill-muted` có ánh sáng chạy 1,4s |
| `prefers-reduced-motion` | Ẩn ánh sáng, chỉ còn khối tĩnh |

## Token sử dụng
`fill-muted`, `line`, `panel`, `radius-6/8/10/14/round`, `space-6/8/10/12/14`.

## Khả năng tiếp cận
- Vùng chứa `aria-busy="true"`; thêm một dòng `role="status"` ẩn "Đang tải…".
- Khi có dữ liệu thật, bỏ `aria-busy` và thay khung bằng nội dung.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Vẽ đúng số hàng và cỡ nội dung sẽ hiện | Dùng khung chờ mãi khi lỗi |
| Dùng `--w*` để dòng dài ngắn tự nhiên | Dựng khung chờ quá khác nội dung thật |

## Nguồn
Bổ sung có chủ đích: game không có khung chờ. Khối theo thang bo của hệ thống; keyframes `tt-skeleton-shine`.