# OnlineOrder
Thẻ đơn online qua app (Soppi, Tóp Tóp, Biiiii, Gờ Ráp): nguồn, món, số tiền sau phí 20%, thời gian chờ và nút Nhận / Từ chối.

## Khi nào dùng
- Danh sách đơn app đổ về quầy khi đã mua tablet và mở bán Online.
- Đơn đã nhận và đang chờ shipper lấy hàng.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Chờ nhận | `tt-online-order` + `__actions` có hai nút | Đơn mới, có thời gian chờ |
| Chờ shipper | `tt-online-order` + `tt-badge` "🛵 Đang tới lấy" | Đã nhận, chờ shipper; không còn nút |

## Cấu trúc
```html
<ul class="tt-business-list">
<li><article class="tt-online-order" aria-label="Đơn Soppi lúc 11:10">
  <img class="tt-online-order__icon" src="assets/Icons/ic_phone.png" alt="">
  <div>
    <div class="tt-online-order__head"><span class="tt-online-order__app">Soppi · 11:10</span><span class="tt-online-order__wait">Chờ nhận 1:30</span></div>
    <div class="tt-online-order__items">Trà sữa trân châu x2, Matcha latte x1</div>
    <div class="tt-online-order__money"><span>Đơn 87k</span><span>Phí app −20%</span><span class="tt-online-order__net">Nhận 69,6k</span></div>
  </div>
  <div class="tt-online-order__actions">
    <button type="button" class="tt-button tt-button--small tt-button--accent" data-action="accept">Nhận đơn</button>
    <button type="button" class="tt-button tt-button--small" data-action="reject">Từ chối</button>
  </div>
</article></li>
</ul>
```
Mỗi đơn là `<li>` trong `<ul class="tt-business-list">`; `__actions` là lưới cột đều. Badge "🛵 Đang tới lấy" hiện chỉ là chữ trong `tt-badge`; khi có ShipperBadge thì thay bằng nó.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Chờ nhận | Viền `pink` 2px, hai nút |
| Chờ shipper | Badge "🛵 Đang tới lấy" + dòng `__state` |

## Hành vi JS
`TTMU.businessCards(root, { onAction })`: "accept" và "reject".

## Token sử dụng
`panel`, `pink`, `soft`, `ink`, `radius-14`, `space-4/6/8` (cộng token của Badge, Button).

## Khả năng tiếp cận
- Thẻ có `aria-label` nêu app và giờ; phí app và số nhận được ghi bằng chữ ("Phí app −20%", "Nhận 69,6k").
- Trạng thái giao hàng là chữ, không chỉ màu viền.
- Chữ app màu `pink` thấp hơn 4.5:1 ở Kem sữa (như token `pink`); thông tin quan trọng nằm ở chữ `ink`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Hiển thị cả giá đơn, phí và số nhận | Chỉ hiển thị giá gốc |
| Dùng `TTMU.formatMoney` | Gõ tay số tiền |

## Nguồn
`.online`, `.onl`, `.onl .ol`, `.onl .hd` — css/style.css; markup `onlineCard` trong js/game.js (phí app −20%, `CFG.commission`).
- Dòng tiền, thời gian chờ và nút Nhận / Từ chối là bổ sung có chủ đích để thẻ dùng được ngoài tablet.