# Alert
Banner cảnh báo nội tuyến nằm trong trang, có icon, tiêu đề, nội dung, tối đa 2 nút và nút đóng ×: "Kho sắp hết trân châu đen — còn 3 phần", "Đã đóng thuế, khách tăng 10% suốt chu kỳ 72h".

## Khi nào dùng
- Báo tình trạng kéo dài ngay trong màn hình đang xem (kho, thuế, sự kiện), người chơi vẫn làm việc khác được.
- Muốn người chơi chọn ngay hoặc bắt buộc phải xử lý: dùng Dialog hoặc UrgentAlert.
- Tin ngắn sau một thao tác: dùng Toast. Ô lưu ý nhỏ trong sổ sách: dùng Callout.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Thông tin | `tt-alert tt-alert--info` | Nền `link` 10%, viền `link`; `role="status"` |
| Thành công | `tt-alert tt-alert--success` | Nền `mint` 14%, viền `mint`; `role="status"` |
| Lưu ý | `tt-alert tt-alert--warn` | Nền `gold` 22%, viền `gold`, vạch trái 6px; `role="alert"` |
| Nguy hiểm | `tt-alert tt-alert--danger` | Nền `warn` 10%, viền `warn`, vạch trái 6px; `role="alert"` |

## Cấu trúc
```html
<div class="tt-alert tt-alert--warn" role="alert">
  <img class="tt-alert__icon" src="assets/Icons/ic_warn.png" alt="">
  <div class="tt-alert__body">
    <b class="tt-alert__title">Kho sắp hết trân châu đen — còn 3 phần</b>
    <small class="tt-alert__text">Nhập thêm trước khi mở cửa.</small>
    <div class="tt-alert__actions">  <!-- tối đa 2 nút -->
      <button type="button" class="tt-button tt-button--small">Nhập 10</button>
      <button type="button" class="tt-button tt-button--small tt-button--ghost">Để sau</button>
    </div>
  </div>
  <button type="button" class="tt-alert__close" aria-label="Đóng">✕</button>
</div>
```
Icon gợi ý: `ic_chart` (info), `ic_chartup` (success), `ic_warn` (warn, danger).

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Mặc định | Hiện nội tuyến, chiếm hết bề rộng cha |
| `hidden` | Ẩn (sau khi bấm ×) |
| Nút ×:hover | Nền `fill-muted`, chữ `ink` |

## Hành vi JS
```js
const a = TTMU.alertBanner(document.querySelector('.tt-alert'), { onClose: () => {} });  // { close, show, destroy }
```
Gắn một lần (`data-tt-bound="1"`); gọi lại trên banner đã gắn trả về cùng API. Bấm × đặt `hidden` rồi gọi `onClose`. Nội dung banner do bạn viết trong HTML; nếu tạo bằng JS thì gán chữ bằng `textContent`.

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

## Khả năng tiếp cận
- `role="status"` cho info/success (đọc khi rảnh), `role="alert"` cho warn/danger (đọc ngay). Preview tĩnh dùng `role="status"` cho mọi mẫu để không đọc to lúc tải trang. Chỉ đặt `role="alert"` khi banner xuất hiện do sự kiện mới, đừng gắn cho banner có sẵn lúc tải trang.
- Mức độ không chỉ dựa vào màu: tiêu đề nói rõ chuyện gì, icon khác nhau, warn/danger có vạch trái dày.
- Nút × là `<button>` có `aria-label="Đóng"`; icon trang trí có `alt=""`.
- Ở Tương phản cao viền `link`, `mint`, `gold`, `warn` đều từ 5:1 trở lên trên panel.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Tiêu đề nói thẳng tình trạng và con số ("còn 3 phần") | Tiêu đề chung chung ("Cảnh báo") |
| Tối đa 2 nút, nút đầu là hành động chính | Nhiều hơn 2 nút hoặc nút không có nhãn chữ |
| Dùng `danger` cho chuyện mất tiền / bị phạt | Dùng `danger` cho mọi cảnh báo |

## Nguồn
`.wbox` (cảnh báo nhỏ nền `warn` 10%), `.evc` và `.evc.loan` (nền `gold` 22% / `mint` 14%, viền 2px, icon 30px, bo 12), `.tax-status-box` (khối trạng thái thuế), `.tax-overdue-dot` (chấm quá hạn) — css/style.css. Bổ sung có chủ đích: mức `--info` (viền `link`), vạch trái dày cho warn/danger để mức độ không chỉ khác màu, nút đóng ×.