# FriendRow
Hàng bạn bè / bảng xếp hạng: hạng (1–3 có huy hiệu cúp), avatar, tên quán, sao, doanh thu, món ruột và nút Thách đấu / Gửi quà.

## Khi nào dùng
- Danh sách bạn quen trong tab Bạn bè.
- Bảng xếp hạng doanh thu giữa các quán, có hàng của chính mình.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Hàng | `tt-friend-row` | Một bạn bè hoặc một quán |
| Hạng top | `tt-friend-row__rank--top` | Hạng 1–3: nền `fresh-3`, viền `gold`, icon `ic_trophy` |
| Của mình | `tt-friend-row is-me` | Viền `pink` đôi, không có nút Thách đấu |

## Cấu trúc
```html
<ol class="tt-business-list">
<li><article class="tt-friend-row">
  <span class="tt-friend-row__rank tt-friend-row__rank--top">
    <img class="tt-friend-row__trophy" src="assets/Icons/ic_trophy.png" alt=""><span class="tt-sr-only">Hạng </span>1</span>
  <span class="tt-avatar tt-friend-row__avatar"><img class="tt-avatar__img" src="assets/Avatars/b01.png" alt=""></span>
  <div class="tt-friend-row__details">
    <div class="tt-friend-row__name-row"><span class="tt-friend-row__name">Minh Anh</span><span class="tt-badge tt-badge--fresh-3">👑 VIP</span></div>
    <div class="tt-friend-row__sub">Quán Trà Nắng · <span class="tt-friend-row__stars" aria-hidden="true">★★★★★</span> 5,0★ · <span class="tt-friend-row__revenue">1,25tr</span></div>
    <div class="tt-friend-row__favs"><span class="tt-badge tt-badge--muted">🍵 Trà ô long</span></div>
  </div>
  <div class="tt-friend-row__ops">
    <button type="button" class="tt-button tt-button--small" data-action="challenge" aria-label="Thách đấu Minh Anh">⚔️ Thách đấu</button>
    <button type="button" class="tt-button tt-button--small" data-action="gift" aria-label="Gửi quà cho Minh Anh">🎁 Gửi quà</button>
  </div>
</article></li>
</ol>
```
Bảng xếp hạng là `<ol class="tt-business-list">`; danh sách bạn quen không xếp hạng dùng `<ul>`. VIP dùng `tt-badge--fresh-3`, món ruột dùng `tt-badge--muted`.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Hạng 1–3 | Huy hiệu cúp, số hạng vẫn là chữ |
| `is-me` | Viền `pink` + `shadow-ring-pink` |
| Hẹp | Cột nút xuống dòng dưới tên, không tràn ngang ở 360px |

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

## Token sử dụng
`panel`, `line`, `ink`, `soft`, `fill-muted`, `fresh-3-bg`, `fresh-3-ink`, `gold`, `pink`, `shadow-ring-pink`, `radius-14/pill`, `space-4/6/10/12`.

## Khả năng tiếp cận
- Hạng có chữ ẩn `tt-sr-only` "Hạng " trước số, và `<ol>` giữ thứ tự; cúp chỉ trang trí (`alt=""`).
- Sao hiển thị cạnh số "5,0★" bằng chữ; chuỗi ★ có `aria-hidden`.
- Nút có `aria-label` nêu tên bạn để người đọc màn hình phân biệt các hàng.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Luôn hiện số hạng cùng cúp | Chỉ dùng cúp để biểu thị hạng |
| Dùng `tt-button--small` cho Thách đấu / Gửi quà | Tự vẽ nút nhỏ như `.bb-sm-btn` |

## Nguồn
`.bb-friends-list`, `.bb-friend-item`, `.bb-friend-face`, `.bb-friend-details`, `.bb-friend-name-row`, `.bb-friend-name`, `.bb-friend-vip-tag`, `.bb-friend-sub`, `.bb-friend-quote`, `.bb-friend-ops`, `.bb-sm-btn`, `.bb-fav-tag`, `.bb-trophy-badge` — css/banbe.css; markup trong js/banbe.js.
- Hex Tailwind (slate, yellow) đổi sang token; VIP và món ruột dùng `tt-badge` của hệ thống thay cho `.bb-friend-vip-tag`, `.bb-fav-tag`.
- Cột hạng và dòng sao / doanh thu là bổ sung có chủ đích (game có bảng thách đấu riêng).