Thành phần (components)

Tất cả nằm trong components/components.css, tiền tố .ds-. Kích thước tự đổi theo data-platform.

Nguồn: chuyển từ design/docs/03-thanh-phan.md ngày 2026-11-11.

Danh mục

Component	Class	Dùng khi	Lưu ý
Nút chính	`.ds-btn--primary`	CTA chính: Chơi ngay, Nhận quà	1 nút/màn. Gradient cam
Nút bit	`.ds-btn--primary.ds-btn--bit`	CTA nổi bật nhất của game (Quay!, Bắt đầu)	Nghiêng 13°, bọc chữ trong `<span>`
Nút phụ	`.ds-btn--secondary`	Hành động phụ quan trọng (Xem quà)	Xanh `#0047BB`
Nút viền	`.ds-btn--outline`	Thể lệ, Chơi lại
Nút chữ	`.ds-btn--ghost`	Bỏ qua, Huỷ
Nút trên nền cam	`.ds-btn--inverse`	CTA đặt trên hero/ảnh cam	Nền trắng chữ cam đậm
Cỡ nút	`--sm` `--lg` `--block` `--icon`
Section tag	`.ds-tag` > `__num` + `__label`	Tiêu đề bước: [01] Đăng ký	Motif tiêu đề của brand book
Badge	`.ds-badge` (+ `--blue --lime --pink --soft --dark`)	MỚI, HOT, x2	Nghiêng 13°, chữ hoa
Chip	`.ds-chip`	Lọc, chọn đáp án	`aria-pressed="true"` khi chọn
Card	`.ds-card` (+ `--brand --subtle --interactive`)	Danh sách game, quà	Thêm `.ds-corner` để có corner shape
Input	`.ds-field` > `.ds-input`	Form thu lead	Chữ ≥ 16px để iOS không zoom
OTP	`.ds-otp`	Xác thực SĐT	6 ô
Checkbox	`.ds-check`	Đồng ý điều khoản	Không tick sẵn
HUD	`.ds-hud` > `.ds-stat`	Thanh điểm/giờ/mạng trên màn chơi	`.ds-stat--warn` khi < 5 giây
Điểm	`.ds-score`	Điểm lớn ở màn kết quả	Số tabular
Đồng hồ vòng	`.ds-timer` style `--p:0–100`	Đếm ngược
Tiến độ	`.ds-progress` (`--v`) / `.ds-bits`	Tiến độ màn, câu hỏi	`.ds-bits` là chuỗi bit nghiêng
Lượt chơi	`.ds-turns`	"Còn 3 lượt"
Voucher	`.ds-voucher`	Thẻ quà, mã giảm giá	Có lỗ khuyết 2 cạnh
Kết quả	`.ds-result--win / --lose`	Màn trúng / chưa trúng	Cụm bit xoay nền
Modal	`.ds-overlay` > `.ds-modal`	Xác nhận, kết quả	Kiosk tự to 880px
Bottom sheet	`.ds-sheet`	Thể lệ, chọn quà (mobile)	Tự cộng safe area
Toast	`.ds-toast` (+ `--success --error`)	Thông báo ngắn	Tự ẩn 3 giây
Bảng xếp hạng	`.ds-rank` > `.ds-rank__row` (`--1 --2 --3 --me`)	Leaderboard	Top 1 cam, 2 xanh, 3 lime
App bar	`.ds-appbar`	Header web	Tự ẩn ở `app`, `zalo`
Loader	`.ds-loader` (9 `<i>`)	Đang tải	Hình chữ X bit-dot nhấp nháy
Layout	`.ds-screen .ds-container .ds-stack .ds-row .ds-safe-bottom-bar`	Khung màn hình
Nền	`.ds-bg-brand` `.ds-bg-pattern`	Nền gradient / pattern bit mờ

Mẫu HTML

CTA nút bit

<button class="ds-btn ds-btn--primary ds-btn--bit ds-btn--lg"><span>Quay ngay</span></button>

Form thu lead

<form class="ds-stack">
  <div class="ds-field">
    <label class="ds-field__label" for="phone">Số điện thoại</label>
    <input class="ds-input" id="phone" type="tel" inputmode="numeric" autocomplete="tel" placeholder="09xx xxx xxx">
    <span class="ds-field__hint">Dùng để nhận mã quà qua SMS</span>
  </div>
  <label class="ds-check"><input type="checkbox" required>
    <span>Tôi đồng ý để FPT Telecom xử lý dữ liệu theo <a class="ds-link" href="#">Chính sách</a></span></label>
  <button class="ds-btn ds-btn--primary ds-btn--block">Nhận lượt chơi</button>
</form>

HUD

<div class="ds-hud">
  <span class="ds-stat"><span class="ds-stat__icon">★</span>1.250</span>
  <div class="ds-timer" style="--p:62"><span>18</span></div>
  <div class="ds-bits"><i class="on"></i><i class="on"></i><i></i></div>
</div>

Voucher

<div class="ds-voucher">
  <div class="ds-voucher__value">-50%</div>
  <div class="ds-voucher__body">
    <strong>Giảm 50% tháng đầu</strong>
    <span class="ds-caption">Internet FPT · HSD 31/12/2026</span>
    <span class="ds-voucher__code">FPT50XMAS</span>
  </div>
</div>

Trạng thái bắt buộc mỗi component tương tác

Trạng thái	Cách thể hiện
Mặc định	Như trên
Nhấn	`scale(.96)` 120ms
Focus bàn phím	Viền xanh `#3755DF` 3px
Disabled	Nền xám `#E3E3E3`, chữ `#8A8A8A`, không bóng
Đang tải	Thay nội dung nút bằng `.ds-loader`, giữ nguyên kích thước
Lỗi	Viền + chữ đỏ `#D92D20`, mô tả cách sửa

Lịch sử thay đổi

Bản	Ngày	Người sửa	Nội dung
1.0	2026-11-11	Designer	Chuyển từ Markdown sang HTML