# FTEL Minigame Design System

Bộ design system dùng chung cho mini game FPT Telecom trên 4 kênh: **activation offline (kiosk)**, **website**, **app (webview)**, **Zalo Mini App**.
Nguồn: `resources/FTEL_Brand_Guildlines.pdf` (FCM, 2025).

Tài liệu hướng dẫn (HTML) nằm trong [docs/06-thiet-ke/](../docs/06-thiet-ke/) cùng bộ tài liệu sản phẩm — mở từ [docs/index.html](../docs/index.html).

Xem trực quan: [index.html](index.html) (design system) · [templates/index.html](templates/index.html) (màn hình mẫu 10 game).

## Cấu trúc

| Đường dẫn | Nội dung | Ai dùng |
|---|---|---|
| `tokens/tokens.css` | Biến CSS 3 lớp: primitive → semantic → mode | Dev web, Zalo, app webview |
| `tokens/tokens.json` | Cùng giá trị, định dạng W3C DTCG | Designer (Figma Tokens Studio), dev React Native/Flutter |
| `tokens/tailwind.preset.js` | Preset Tailwind trỏ vào biến CSS | Dev dùng Tailwind |
| `components/components.css` | 20 component `.ds-*` dùng chung | Dev |
| `components/game.css` | Component riêng cho game: khung TV, QR tham gia, nút chạm, chọn 3 hướng, webcam, đối đầu… | Dev |
| `templates/index.html` | Màn hình mẫu 10 game trong khung điện thoại / TV / kiosk | PM, designer, dev |
| `assets/mascot/` | 30 tư thế Cáo FPT (WebP) theo tình huống game — xem `assets/mascot/README.md` | Tất cả |
| `assets/logo/` | Logo màu + âm bản (bản tạm) | Tất cả |
| `assets/bitdot/` | Khối bit-dot, cụm 5 bit, corner shape, pattern | Tất cả |
| `assets/fonts/` | Chỗ đặt font chính thức | Dev |
| [`docs/06-thiet-ke/nen-tang-thiet-ke.html`](../docs/06-thiet-ke/nen-tang-thiet-ke.html) | Màu, chữ, hình khối, khoảng cách, chuyển động | Tất cả |
| [`docs/06-thiet-ke/kenh-trien-khai.html`](../docs/06-thiet-ke/kenh-trien-khai.html) | Khác biệt kiosk / web / app / Zalo | PM, dev |
| [`docs/06-thiet-ke/thanh-phan.html`](../docs/06-thiet-ke/thanh-phan.html) | Cách dùng từng component | Designer, dev |
| [`docs/06-thiet-ke/mau-man-hinh-game.html`](../docs/06-thiet-ke/mau-man-hinh-game.html) | Luồng & màn hình chuẩn của một mini game | PM, designer |
| [`docs/06-thiet-ke/mau-game.html`](../docs/06-thiet-ke/mau-game.html) | Đặc tả 10 game: mô hình thiết bị, luật, màn hình, rủi ro | PM, designer, dev |

## Dùng nhanh

```html
<html data-platform="zalo" data-theme="orange">
  <link rel="stylesheet" href="design/tokens/tokens.css">
  <link rel="stylesheet" href="design/components/components.css">
  <link rel="stylesheet" href="design/components/game.css"> <!-- nếu là màn game -->
  <body class="ds-root">
    <button class="ds-btn ds-btn--primary ds-btn--lg">Chơi ngay</button>
  </body>
</html>
```

| Thuộc tính | Giá trị | Tác dụng |
|---|---|---|
| `data-platform` | `web` · `app` · `zalo` · `kiosk` · `tv` | Đổi cỡ chữ, vùng chạm, safe area, header |
| `data-theme` | `orange` (mặc định) · `blue` · `green` | Đổi màu chủ đạo theo chiến dịch |

## Quyết định đã chốt

| # | Quyết định | Lý do |
|---|---|---|
| 1 | Cam `#FF8206` là màu chủ đạo, CTA dùng gradient `#FF971A → #FF6A13` | Brand book trang 30–32 |
| 2 | Thêm tông dẫn xuất `#C2410C` (cam chữ), `#168A00` (lá chữ) | Cam/lá gốc trên nền trắng chỉ đạt 2.5:1 — không đọc được chữ nhỏ |
| 3 | Thêm đỏ `#D92D20` cho lỗi | Brand không có màu lỗi; cam-đỏ trùng màu CTA sẽ gây nhầm |
| 4 | Nghiêng 13° cho badge, nút "bit", số thứ tự | Visual cue chính thức (trang 8) |
| 5 | Leading tiêu đề 1.1 thay vì 1.0 | Dấu tiếng Việt chồng (Ệ, Ở) bị chạm dòng trên ở 1.0 |
| 6 | Font dự phòng: Lexend (tiêu đề), Be Vietnam Pro (nội dung) | Có trên Google Fonts, hỗ trợ tiếng Việt đầy đủ |
| 7 | Đổ bóng pha xanh Blue Crayola | Brand quy định dùng xanh cho đổ bóng (trang 31) |

## Việc cần FCM cung cấp

| Hạng mục | Trạng thái | Ghi chú |
|---|---|---|
| Font FPT SongVui + Articulat (.woff2, có license web/app) | Chưa có | Đặt vào `assets/fonts/` — tên file xem `assets/fonts/README.md` |
| Logo vector (SVG) bản màu + âm bản | Đang dùng PNG 252px tách từ PDF | Đủ cho mobile, **không đủ cho kiosk/in ấn** |
| Biểu trưng phụ trợ (WIFI ON, PLAY ALWAYS, HOME LINK…) | Chưa có | Dùng cho icon minh hoạ game theo dịch vụ |
| Bộ ảnh người (trang 46) | Chưa có | Dùng cho màn attract/kết quả |
| Mascot Cáo — file gốc vector (AI/SVG) + quy định dùng | Đang dùng 30 sticker PNG → WebP 480px | Đủ cho điện thoại/TV; kiosk 4K và in ấn cần file vector. Cần xác nhận quyền dùng sticker cho game |