# FILE PHONG CÁCH — "Kem · Mực · Vàng" (The Solo OS)

> Dán toàn bộ file này cho AI (Claude/ChatGPT/Lovable…) TRƯỚC khi yêu cầu làm bất kỳ trang nào.
> Câu mở đầu: "Hãy thiết kế theo đúng File Phong Cách dưới đây, không tự thêm màu hay font khác."

## 1. Tinh thần
Báo in cao cấp + phong cách "neo-brutalism" nhẹ: nền kem ấm, chữ mực đen, điểm nhấn vàng.
Viền đen 2px, bóng đổ cứng (không mờ) lệch 4–12px. Rõ ràng, tự tin, không lòe loẹt.
TUYỆT ĐỐI KHÔNG: gradient tím-xanh, glassmorphism, bóng mờ to, emoji tràn lan, bo góc quá tròn.

## 2. Màu (CSS variables)
```css
:root{
  --cream:#f3efe4;   /* nền chính */
  --cream2:#ebe5d4;  /* nền phụ, hàng xen kẽ */
  --paper:#ffffff;   /* thẻ, form */
  --ink:#141412;     /* chữ tiêu đề, viền, bóng */
  --ink2:#3d3a33;    /* chữ thân */
  --mute:#6f6a5e;    /* chữ phụ */
  --line:#d9d1bc;    /* đường kẻ trên nền kem */
  --gold:#f0c93a;    /* điểm nhấn, nút chính */
  --gold-d:#8a6a1c;  /* chữ vàng trên nền sáng */
  --red:#c8312b;     /* lỗi, gạch giá cũ, cảnh báo */
  --ok:#2f8a4e;      /* thành công, tăng trưởng */
  --dark:#141412;    /* section tối */
  --dark2:#1e1d1a;   /* thẻ trên nền tối */
  --dline:#34322c;   /* đường kẻ trên nền tối */
  --cr:#f3efe4;      /* tiêu đề trên nền tối */
  --crm:#b9b3a3;     /* chữ thân trên nền tối */
}
```
Tỉ lệ: 70% kem/trắng · 20% mực/tối · 10% vàng. Vàng chỉ cho nút chính, số nổi bật, chữ nhấn.

## 3. Chữ
- Google Fonts: `Montserrat:wght@700;800;900` (tiêu đề, số, nút) + `Be Vietnam Pro:wght@400;500;600;700` (thân).
- H1 44px/800 · H2 40px/800 · H3 18–22px/800 · thân 16–17px, line-height 1.7 · letter-spacing tiêu đề -0.3px.
- Nhãn nhỏ ("eyebrow"): 12px, 700, IN HOA, letter-spacing 1.6px, màu --gold-d (trên tối: --gold).
- Số liệu lớn: Montserrat 900, màu vàng hoặc mực.
- Mobile: H1 28–32px, H2 26–28px.

## 4. Thành phần
- **Nút chính:** nền --gold, chữ --ink, Montserrat 800, padding 15px 24px, bo 10px, viền 2px --ink, `box-shadow:4px 4px 0 var(--ink)`; hover: `transform:translate(2px,2px); box-shadow:2px 2px 0`.
- **Nút phụ:** nền trong suốt, viền 2px --ink, cùng kích thước.
- **Thẻ (card):** nền --paper, viền 1px --line, bo 14px, padding 18–24px. Thẻ nổi bật: viền 2px --ink + `box-shadow:8px 8px 0 var(--ink)`.
- **Ảnh/khối hero:** bo 12–18px, `box-shadow:12px 12px 0 var(--gold)`, có thể xoay -2deg.
- **Input:** nền --cream, viền 1.5px --line, bo 10px, padding 13px 14px; focus viền --ink.
- **Chip/tag:** nền --gold, chữ --ink, 12px 700 in hoa, bo 999px. Trạng thái: ok=--ok, lỗi=--red (chữ trắng).
- **Danh sách tick:** ô vuông vàng 22px bo 6px chứa "✓" đen.
- **Bảng:** đầu bảng nền --ink chữ --cr; hàng xen kẽ --cream2; đường kẻ --line.
- **Thanh trên (topbar):** nền --dark, cao 56px, logo Montserrat 900 có 1 chữ vàng.

## 5. Bố cục
- Khung `max-width:1120px`, lề 20px. Section cách nhau 80px (mobile 60px).
- Xen kẽ section kem ↔ section tối để tạo nhịp.
- App/dashboard: sidebar tối 240px (--dark) + nội dung nền --cream, thẻ trắng; mobile: sidebar thành thanh dưới hoặc menu.
- Luôn responsive tới 360px, không cuộn ngang.

## 6. Kỹ thuật
- 1 file HTML duy nhất, CSS trong `<style>`, JS thuần (không framework, không build).
- Mọi màu dùng biến ở mục 2. Chữ tiếng Việt có dấu đầy đủ.
- Dữ liệu mẫu thật kiểu Việt Nam (tên người, VNĐ, số Zalo 09xx).