# Callout
Ô lưu ý nhỏ: sự kiện trong ngày, khoản vay gợi ý, dự báo khách, cảnh báo nhẹ và thông báo lên cấp.

## Khi nào dùng
- Báo sự kiện hôm nay ("Món hot trên mạng") với icon: `--event`.
- Gợi ý vay khi sắp hết tiền, kèm nút hành động: `--loan`.
- Dự báo số khách / câu giải thích nền `bg`: `--forecast` (thêm `--big` cho số lớn).
- Dòng cảnh báo nhỏ trong sổ sách: `--warn`. Thông báo ngày mai / lên cấp: `--level`.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Sự kiện | `tt-callout tt-callout--event` | Nền `gold` 22%, viền 2px `gold`, có icon 30px |
| Vay | `tt-callout tt-callout--loan` | Nền `mint` 14%, viền `mint`, nút ở bên phải |
| Dự báo | `tt-callout tt-callout--forecast` | Nền `bg`, bo 10, chữ .85rem |
| Dự báo lớn | `… --forecast tt-callout--big` | Chữ 1.1rem đậm, căn giữa |
| Cảnh báo | `tt-callout tt-callout--warn` | Nền `warn` 10%, chữ .75rem |
| Lên cấp | `tt-callout tt-callout--level` | Nền `gold` 20%, chữ `ink` đậm |

## Cấu trúc
```html
<div class="tt-callout tt-callout--event">
  <img class="tt-callout__icon" src="assets/Icons/ic_chartup.png" alt="">
  <div>
    <b class="tt-callout__title">Hôm nay: Món hot trên mạng</b>
    <small class="tt-callout__text">matcha được gọi nhiều gấp đôi (+25%)</small>
  </div>
  <button type="button" class="tt-button tt-button--small tt-callout__action">Vay</button> <!-- tuỳ chọn -->
</div>
```

## Trạng thái
Không có trạng thái tương tác; mức độ thể hiện qua biến thể. Nút trong `__action` theo Button.

## Token sử dụng
`gold`, `mint`, `warn`, `panel`, `bg`, `ink`, `soft`, `shadow-edge` (viền hộp dự báo ở `hc`), `radius-8/10/12`, `space-6/8/10`.

## Khả năng tiếp cận
- Nội dung quan trọng nằm ở chữ, icon trang trí dùng `alt=""`.
- Cảnh báo cần đọc ngay có thể thêm `role="status"` lên chính phần tử.
- `warn` 10% trên nền sáng vẫn đọc được với chữ `ink`; không đổi màu chữ.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Một Callout `--event` mỗi ngày | Xếp nhiều Callout cùng màu liên tiếp |
| Dòng đầu ngắn (`__title`), giải thích ở `__text` | Nhét đoạn văn dài vào `--warn` |

## Nguồn
`.evc`, `.evc b`, `.evc small`, `.evc.loan`, `.evc .sbtn`, `.fore`, `.fore.big2`, `.wbox`, `.lvup` — css/style.css; markup trong js/game.js (`evCard`, `loanCard`).
- `.lvup` có `color:var(--ink)!important` trong game; ở đây chỉ đặt `color: var(--ink)`.
- `.evc` có `margin:0 0 8px`; khoảng cách do container quyết định (dùng `tt-stack`).