skills/tocbien-ui-ux/references/styles/web3.md

# Web3 (`web3`)

Nền đen, khối cầu cam và quỹ đạo vàng

- Hợp với: Hợp khi đang dùng AI để dựng website cho sản phẩm blockchain cần giải thích cơ chế bằng thao tác, không dựa vào giá coin.
- Ngành minh hoạ: Giáo dục, cộng đồng công nghệ
- Trang minh hoạ làm việc gì: Phòng thực hành giải thích chuỗi dữ liệu qua bốn khối mẫu
- Thang (1–10): biến tấu bố cục 8 · chuyển động 6 · mật độ 4
- Xem mẫu: https://tocbien.cloud/phong-cach/web3/

## Đặc tả

Nền #030304, cam #F97316 và vàng; Space Grotesk, Inter, JetBrains Mono. Hero hai cột với cầu 3D bằng CSS, quỹ đạo quay, thẻ kính, lưới mờ, timeline nối khối, ba lộ trình và FAQ.

**Chi tiết cần giữ:** Trên điện thoại xếp nội dung theo thứ tự đọc; hỗ trợ bàn phím, focus rõ và prefers-reduced-motion. Mọi số liệu trong bản minh hoạ phải được ghi rõ.

**Lưu ý khi áp dụng:** Giữ chữ tiếng Việt rõ, nút dễ bấm và hiệu ứng không che nội dung.

## Đặc tả gốc chi tiết (giữ đầy đủ)

# Design Philosophy: The "Bitcoin DeFi" Aesthetic

This style embodies the visual DNA of Bitcoin and decentralized finance—a sophisticated fusion of precision engineering, cryptographic trust, and digital gold. It is **not generic dark mode**; it is a deep cosmic void where data structures glow with the warmth of Bitcoin orange and the brilliance of digital gold.

## Core Design Principles

1.  **Luminescent Energy**: Light emanates from interactive elements themselves. Bitcoin orange glows, golden highlights shimmer, and data points pulse with life against the true void background. Shadows are colored (orange/gold tints), not just black.

2.  **Mathematical Precision**: Everything follows strict geometric rules. Ultra-thin 1px borders define boundaries, monospace fonts display data with technical accuracy, and grids provide the underlying structure of the blockchain aesthetic.

3.  **Layered Depth**: Create three-dimensional space through transparency stacking (glass morphism), colored glow shadows, and backdrop blur effects. Elements float in Z-space without heavy skeuomorphism—it's digital depth, not physical.

4.  **Textured Void**: Backgrounds are never flat. Subtle grid patterns (representing blockchain networks), radial gradient blurs (representing energy fields), and noise textures bring the void to life. The darkness breathes.

5.  **Trust Through Design**: High contrast, clear hierarchy, and technical precision communicate security and reliability. The aesthetic says "your assets are safe here."

The vibe is **Secure, Technical, and Valuable**. This is digital gold—it should feel premium, cutting-edge, and engineered to perfection. Think Bitcoin mining rigs humming in the darkness, glowing with orange heat.

# Design Token System

## Colors (Dark Mode Only)
This palette uses a "True Void" foundation with "Bitcoin Fire" energy—the warmth of Bitcoin orange and the brilliance of digital gold.

*   **Background**: `#030304` (True Void) - The deepest space where all begins
*   **Surface**: `#0F1115` (Dark Matter) - Elevated surfaces, cards, and panels
*   **Foreground**: `#FFFFFF` (Pure Light) - Primary text, maximum contrast
*   **Muted**: `#94A3B8` (Stardust) - Secondary text, descriptions, metadata
*   **Border**: `#1E293B` (Dim Boundary) - Subtle borders at rest (often at 10-20% opacity when using white)
*   **Primary Accent**: `#F7931A` (Bitcoin Orange) - The iconic color of decentralization. Primary CTAs, links, active states, and trust indicators
*   **Secondary Accent**: `#EA580C` (Burnt Orange) - A deeper, warmer orange for gradients, secondary elements, and visual depth
*   **Tertiary Accent**: `#FFD600` (Digital Gold) - The color of value. Used in gradients with Bitcoin Orange, highlights, and success states

**Gradient Formula**: The signature look is `linear-gradient(to right, #EA580C, #F7931A)` or `linear-gradient(to right, #F7931A, #FFD600)` for text and buttons.

## Typography
The type system balances technical precision with modern geometric forms.

*   **Headings**: `Space Grotesk` (Google Font) - A geometric grotesque with quirky technical character
    *   Weights: 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
    *   Usage: All headings (h1-h6), section titles, card titles
    *   Apply `font-heading` class

*   **Body**: `Inter` (Google Font) - Highly legible sans-serif optimized for screens
    *   Weights: 400 (Regular), 500 (Medium), 600 (Semibold)
    *   Usage: Body copy, descriptions, buttons
    *   Apply `font-body` class

*   **Mono/Data**: `JetBrains Mono` (Google Font) - Technical monospace for precision
    *   Weights: 400 (Regular), 500 (Medium)
    *   Usage: Stats, prices, badges, technical labels, navigation links
    *   Apply `font-mono` class

*   **Scale Philosophy**: Dramatic contrast between display and body. Heroes are massive (`text-4xl` → `md:text-7xl`), body is comfortable (`text-base` or `text-lg`). Mobile-first scaling prevents overwhelming small screens.

*   **Leading & Tracking**: Tight leading on headings (`leading-tight`), relaxed on body (`leading-relaxed`). Uppercase mono text gets generous tracking (`tracking-wider`, `tracking-widest`).

## Radius & Borders
Geometric precision with soft curves for approachability.

*   **Radius Tokens**:
    *   Cards/Containers: `rounded-2xl` (16px) or `rounded-xl` (12px)
    *   Buttons: `rounded-full` (pill shape)
    *   Inputs: `rounded-lg` (8px) or bottom-border only for minimalism
    *   Small elements (badges, icons): `rounded-lg` or `rounded-full`

*   **Border Philosophy**: Ultra-thin `1px` borders create delicate boundaries without visual weight
    *   Default state: `border border-white/10` (barely visible structure)
    *   Hover state: `border-[#F7931A]/50` (orange accent, 50% opacity)
    *   Active/Focus: `border-[#F7931A]` (full intensity)

*   **Special Border Techniques**:
    *   Corner accents: Small decorative border segments at corners (see How It Works cards)
    *   Gradient borders: Simulate with inner pseudo-elements or subtle box-shadow gradients

## Shadows & Effects (The Glow)
The signature of this style is **colored luminescence**—shadows and glows in Bitcoin orange and gold tints.

*   **Orange Glow** (Primary): `shadow-[0_0_20px_-5px_rgba(234,88,12,0.5)]` or `shadow-[0_0_30px_-5px_rgba(247,147,26,0.6)]`
    *   Used on buttons, cards on hover, primary CTAs, and interactive elements

*   **Gold Glow** (Accent): `shadow-[0_0_20px_rgba(255,214,0,0.3)]`
    *   Used on special highlights, success states, value indicators

*   **Subtle Card Elevation**: `shadow-[0_0_50px_-10px_rgba(247,147,26,0.1)]`
    *   Used on product mockups, major sections

*   **Glass Morphism**:
    *   Formula: `backdrop-blur-lg` + `bg-white/5` or `bg-black/40`
    *   Creates floating, translucent panels that reveal background blur
    *   Used on floating cards (hero), testimonials, "How It Works" cards

*   **Radial Blur Backgrounds**: Large, soft radial gradients with heavy blur for ambient background glow
    *   Example: `bg-[#F7931A] opacity-10 blur-[120px]` positioned absolutely

## Textures & Patterns
Backgrounds breathe with subtle, non-distracting patterns that reinforce the blockchain/network theme.

*   **Grid Pattern** (Signature):
    ```css
    background-size: 50px 50px;
    background-image:
      linear-gradient(to right, rgba(30, 41, 59, 0.5) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(30, 41, 59, 0.5) 1px, transparent 1px);
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    ```
    *   Creates a fading grid that disappears toward edges (vignette effect)
    *   Used on hero section

*   **External Texture Overlays**:
    *   Example: `bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5`
    *   Very subtle, barely visible patterns for visual interest

*   **Radial Gradient Blurs**: Massive, soft color blobs for ambient lighting
    *   Position absolutely, use low opacity (5-10%), apply blur-[120px] or blur-[150px]
    *   Creates depth and guides eye to focal points

# Component Stylings

## Buttons
Buttons are bold, pill-shaped, and emit colored light. All use `rounded-full` for the signature crypto pill shape.

*   **Primary (Default)**:
    *   Background: `bg-gradient-to-r from-[#EA580C] to-[#F7931A]`
    *   Text: White, bold, uppercase with `tracking-wider`
    *   Shadow: `shadow-[0_0_20px_-5px_rgba(234,88,12,0.5)]`
    *   Hover: `scale-105` + intensified shadow `shadow-[0_0_30px_-5px_rgba(247,147,26,0.6)]`
    *   Min height: 44px (touch-friendly)

*   **Outline**:
    *   Background: Transparent
    *   Border: `border-2 border-white/20`
    *   Text: White
    *   Hover: `border-white` + `bg-white/10`

*   **Ghost**:
    *   Background: Transparent, no border
    *   Text: White
    *   Hover: `bg-white/10` + `text-[#F7931A]`

*   **Link**:
    *   Text: `text-[#F7931A]`
    *   Hover: Underline

All buttons include smooth `transition-all` for responsive micro-interactions.

## Cards (The "Block" Concept)
Cards are elevated surfaces that float above the void, representing blocks in the chain.

*   **Standard Card**:
    *   Background: `bg-[#0F1115]` (Dark Matter surface)
    *   Border: `border border-white/10` (subtle boundary)
    *   Radius: `rounded-2xl` (16px)
    *   Padding: `p-8` (generous spacing)
    *   Hover: `hover:-translate-y-1` (lift) + `hover:border-[#F7931A]/50` + `hover:shadow-[0_0_30px_-10px_rgba(247,147,26,0.2)]`
    *   Transition: `transition-all duration-300`

*   **Glass Cards** (Floating/Special):
    *   Background: `bg-black/40` or `bg-white/5`
    *   Backdrop: `backdrop-blur-sm` or `backdrop-blur-lg`
    *   Border: `border border-white/10`
    *   Creates translucent, floating effect

*   **Pricing Cards**:
    *   Highlighted tier: `scale-105`, `border-[#F7931A]`, elevated z-index, `shadow-[0_0_40px_-10px_rgba(247,147,26,0.15)]`
    *   Others: Lower opacity (`opacity-80`), scale up on hover

*   **Card Hierarchy**:
    *   Header: `p-8 pb-4`
    *   Title: `font-heading font-semibold text-2xl`
    *   Description: `text-[#94A3B8] text-sm`
    *   Content: `p-8 pt-0`
    *   Footer: `p-8 pt-0`

## Inputs
Minimalist, precise input fields with bottom-border styling for a technical aesthetic.

*   **Background**: `bg-black/50` (semi-transparent dark)
*   **Border**: Bottom border only - `border-b-2 border-white/20`
*   **Height**: `h-12` (48px for touch targets)
*   **Padding**: `px-4 py-2`
*   **Text**: `text-white text-sm`
*   **Placeholder**: `placeholder:text-white/30`
*   **Focus State**:
    *   Border: `focus-visible:border-[#F7931A]`
    *   Glow: `focus-visible:shadow-[0_10px_20px_-10px_rgba(247,147,26,0.3)]`
    *   No outline: `focus-visible:outline-none`
*   **Disabled**: `disabled:opacity-50 disabled:cursor-not-allowed`

Inputs feel like data entry terminals—clean, precise, and purposeful.

## Icons
Icons from `lucide-react` reinforce the technical, precise aesthetic.

*   **Stroke Width**: Default (1.5-2px for clean, technical lines)
*   **Colors**: Use accent colors to create hierarchy
    *   Orange: `text-[#F7931A]` or `text-[#EA580C]`
    *   Gold: `text-[#FFD600]`
    *   Muted: `text-[#94A3B8]`
    *   White: `text-white`

*   **Icon Containers**: Wrap in colored, glowing containers
    *   Example: `bg-[#EA580C]/20 border border-[#EA580C]/50 rounded-lg p-3`
    *   Creates a "holographic node" effect
    *   Hover: Add glow shadow `hover:shadow-[0_0_20px_rgba(234,88,12,0.4)]`

*   **Decorative Icons**: Large, watermark-style icons in card backgrounds
    *   High opacity on hover for subtle reveal effect
    *   Example: `opacity-20 group-hover:opacity-100`

# Non-Generic "Bold" Choices

This design MUST NOT look like default Tailwind. These bold choices create unmistakable personality:

1.  **Gradient Text on Headlines**: Apply `bg-gradient-to-r from-[#F7931A] to-[#FFD600] bg-clip-text text-transparent` to final 1-2 words of hero headlines. Creates instant visual hierarchy and Bitcoin brand association.

2.  **Spinning Orbital Rings**: Hero section features animated 3D-style orb with CSS rotating rings (`animate-[spin_10s_linear_infinite]` and reverse). Floating stat cards bounce around it with staggered delays.

3.  **Corner Border Accents**: "How It Works" cards use decorative corner borders (`border-t border-l` on top-left, `border-r border-b` on bottom-right) in Bitcoin orange, creating a "selected node" effect.

4.  **Glowing Animated Badges**: Pulsing dot badges (`animate-ping`) on trust indicators and status markers. Suggests live network activity.

5.  **Background Icon Watermarks**: Large, rotated, low-opacity icons in feature card backgrounds that reveal on hover (`opacity-20 group-hover:opacity-100`).

6.  **Timeline as Blockchain**: "How It Works" uses a vertical gradient line (orange to transparent) with numbered circular nodes, mimicking a blockchain ledger.

7.  **Asymmetric Pricing Scale**: The popular pricing tier is `scale-105` and elevated, while others are `opacity-80`, creating intentional hierarchy through scale manipulation.

8.  **Glass Morphism with Grid Patterns**: Combine `backdrop-blur` with background grid patterns visible through transparency, creating layered depth.

9.  **Colored Shadows Replace Black**: ALL shadows use orange/gold tints. No pure black shadows exist in this design system.

# Layout & Spacing

*   **Container Width**: `max-w-7xl` (1280px) - Wide and expansive to showcase data and content without cramping
*   **Section Padding**: Generous vertical `py-24` (96px) creates breathing room between major sections
*   **Density**: Spacious approach with `gap-8` (32px) or `gap-12` (48px) between grid items
*   **Section Dividers**: NO hard lines or `<hr>` elements. Sections separate through:
    *   Vertical spacing (`py-24`)
    *   Alternating backgrounds (`bg-[#030304]` → `bg-[#0F1115]` → `bg-[#030304]`)
    *   Subtle top/bottom borders on specific sections (e.g., stats ticker has `border-y`)

*   **Responsive Grids**:
    *   Mobile-first: Single column by default
    *   Tablet: `md:grid-cols-2` or `md:grid-cols-3`
    *   Desktop: Keep `md:grid-cols-3` or `lg:grid-cols-4` for features
    *   Pricing: Always `md:grid-cols-3` for tier comparison

# Animation & Motion

Motion should feel **precise, snappy, and purposeful**—like a high-performance trading terminal.

*   **Custom Float Animation**:
    ```css
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    .animate-float {
      animation: float 8s ease-in-out infinite;
    }
    ```
    *   Applied to hero 3D orb graphic
    *   Slow, smooth, endless float creates ethereal quality

*   **Spinning Orbitals**:
    *   `animate-[spin_10s_linear_infinite]` for outer ring
    *   `animate-[spin_15s_linear_infinite_reverse]` for inner ring (reverse direction)
    *   Creates mesmerizing 3D depth illusion

*   **Bouncing Cards**: Floating stat cards use `animate-bounce` with custom durations (`3s`, `4s`) and delays (`delay-1s`) for staggered motion

*   **Pulsing Indicators**: Status badges use `animate-ping` for "live" feel

*   **Interaction Speed**: Fast and responsive (`duration-200` or `duration-300`)
    *   Button hover: `transition-all duration-300`
    *   Card lift: `transition-all duration-300`
    *   Input focus: Instant (`duration-200`)

*   **Hover Effects**:
    *   Cards: Lift (`-translate-y-1`), border color shift, glow intensification
    *   Buttons: Scale (`scale-105`), glow spread
    *   Images: Scale (`scale-110`), contrast boost (`contrast-125`)

The motion design communicates **speed, precision, and responsiveness**—critical values in crypto/finance.

# Responsive Strategy

The design must maintain its bold personality across all screen sizes while adapting gracefully.

*   **Mobile-First Philosophy**: Start with single-column layouts, scale up for larger screens
*   **Breakpoints**:
    *   `sm`: 640px - Minor adjustments
    *   `md`: 768px - Major layout shifts (2-3 columns activate)
    *   `lg`: 1024px - Full desktop experience
    *   `xl`: 1280px - Maximum width container (`max-w-7xl`)

*   **Typography Scaling**: All headings use responsive classes
    *   Hero: `text-4xl sm:text-5xl md:text-7xl`
    *   Section Titles: `text-2xl md:text-4xl` or `md:text-5xl`
    *   Body: `text-base md:text-lg`
    *   Keep mobile readable, don't overwhelm small screens

*   **Touch Targets**: All interactive elements minimum 44px (`min-w-[44px]`, `h-10+`)

*   **Mobile Adaptations**:
    *   Navigation: Show only essential CTA on mobile, hide secondary nav
    *   Hero 3D graphic: Smaller size on mobile (`h-[300px] md:h-[450px]`)
    *   Grids: Single column → 2-3 columns at `md`
    *   Pricing cards: Stack vertically, remove scale effect on mobile
    *   How It Works timeline: Left-aligned on mobile with simpler layout

*   **Maintain Core Aesthetic**: Grid patterns, glows, and gradients persist on mobile—don't strip personality for smaller screens

# Accessibility & Best Practices

*   **Color Contrast**: White text on `#030304` exceeds WCAG AAA (21:1 ratio). Orange `#F7931A` on dark backgrounds meets AA for large text.
*   **Focus States**: All interactive elements have visible focus rings using `focus-visible:ring-2 focus-visible:ring-[#F7931A]`
*   **Semantic HTML**: Proper heading hierarchy (h1 → h2 → h3), `<nav>`, `<section>`, `<button>` elements
*   **Alt Text**: All images require descriptive alt attributes
*   **Keyboard Navigation**: All interactive elements accessible via Tab, buttons activate on Enter/Space
*   **Motion Preferences**: Consider `prefers-reduced-motion` for users sensitive to animation (disable float/spin animations)

# Implementation Notes

*   **Font Loading**: Use `fontImport()` helper to load Google Fonts
*   **Custom Classes**: Define `.font-heading`, `.font-body`, `.font-mono` in style block
*   **Grid Pattern**: Define `.bg-grid-pattern` with CSS-in-JS in style block
*   **Glass Morphism**: Define `.holographic-gradient` helper class
*   **Components**: Build Button, Card, and Input components using `cva` (class-variance-authority) following Shadcn patterns but with Crypto-specific styling
*   **Icons**: Import specific icons from `lucide-react` as needed (Zap, Lock, Layers, Globe, Check, etc.)

This is not a generic dark theme. This is the **Bitcoin DeFi aesthetic**—engineered for precision, security, and digital value.

## Đặc tả áp dụng chi tiết

CÁCH ÁP DỤNG PHONG CÁCH WEB3
Bố cục và nhận diện: Nền void #030304, Space Grotesk, nhấn Bitcoin orange theo file; sơ đồ khối là nội dung chính thay đồng tiền xoay. Hero hai tầng: câu hỏi ở trên, chuỗi 4 khối ở dưới; max-width 1240 px, heading 64–88 px.

## 3. Nội dung mở đầu

**H1:** Một thay đổi. Cả chuỗi cùng biết.

**Lời dẫn:** Khám phá cách các khối dữ liệu liên hệ với nhau qua một mô hình tương tác đơn giản.

**Hành động chính:** Thử thay đổi một khối

## 4. Đặc tả từng vùng nội dung và tác vụ

### 1. Tình huống cần kiểm chứng

**Bố cục và hành vi:** Câu hỏi và một khối dữ liệu được phóng lớn, phía sau ba khối tiếp nối.

**Nội dung và đầu ra:** Ví dụ sổ ghi nhận bốn lần bàn giao tài liệu. Không giá token, lợi nhuận hay hứa bảo mật tuyệt đối.

### 2. Chuỗi mẫu

**Bố cục và hành vi:** Bốn khối có số thứ tự, nội dung, dấu nhận diện và trạng thái liên kết.

**Nội dung và đầu ra:** Mỗi khối có cùng schema; mở block 2 hiển thị người gửi, tên hồ sơ và phiên bản. Ký hiệu minh họa không tự gọi là hash bảo mật.

### 3. Thử thay dữ liệu

**Bố cục và hành vi:** Một form sửa tên tài liệu ở khối 2, preview trước/sau bên cạnh.

**Nội dung và đầu ra:** Bấm Kiểm tra liên kết làm rõ những khối nào không còn khớp với dữ liệu mẫu.

### 4. Giải thích kết quả

**Bố cục và hành vi:** Trình bày một mô tả ngắn theo kết quả, kèm sơ đồ liên kết và giới hạn.

**Nội dung và đầu ra:** Nêu rõ đây là mô phỏng giao diện; không kết nối mạng blockchain, không giao dịch.

### 5. Khôi phục và học tiếp

**Bố cục và hành vi:** Một thao tác khôi phục chuỗi và glossary mở từng thuật ngữ.

**Nội dung và đầu ra:** Dùng nhãn Khối, Liên kết, Kiểm chứng; không bắt đăng ký hoặc nối ví để thử.

## 5. Dữ liệu và trạng thái tương tác

original → edited → checked; sửa lại sau checked chuyển về edited, xóa dấu kết luận cũ. Reset khôi phục cả dữ liệu lẫn trạng thái. Không dùng randomness làm kết quả không tái hiện được.

Phân biệt rõ dữ liệu dựng sẵn với hành động thực: chức năng thử trong mẫu không gửi tin, tạo đơn, đặt lịch hoặc thực thi workflow bên ngoài. Nếu phiên bản khách sau này kết nối dịch vụ thật, đó là phần tích hợp riêng cần quyền và kiểm lỗi phù hợp.

## 6. Responsive và thứ tự đọc

Desktop chuỗi ngang, 768 px hai hàng có đánh số, 390 px dọc. Chi tiết dữ liệu là disclosure trong flow, không modal rộng cố định. Chuỗi dài cuộn trong panel có nhãn.

Kiểm thêm 320 px và 1280×720 để phát hiện cắt chữ/đáy panel. Thứ tự DOM phải theo việc người xem cần làm, không chỉ sắp lại bằng CSS rồi khiến Tab đi lộn. Bảng/log dài cuộn bên trong vùng có nhãn.

## 7. Chuyển động và phản hồi

Orbital 30 s chỉ trang trí và dừng được; cập nhật trạng thái 220 ms. Tắt motion vẫn hiện số thứ tự và đường liên kết.

Không để motion làm chậm thao tác hoặc che lỗi. Lưu trạng thái pause trong phiên khi có vòng lặp; reduced-motion phải giữ toàn bộ thông tin và thứ tự nội dung.

## 8. Art direction và ảnh đại diện

**Tài sản nội dung:** Khối 3D nguyên bản; sơ đồ tương tác bằng HTML/SVG có ngữ nghĩa; bỏ số lợi nhuận và giá token.

**Cover:** Một khối lớn ở tiền cảnh, ba khối theo phối cảnh và chữ ngắn; cam là điểm neo. Không để đồng coin làm người xem tưởng trang đầu tư.

**Bộ xuất:** cover 1200×750; cover dọc 900×1200; OG 1200×630; screenshot QA riêng ở viewport thực. Chụp/compose từ đúng phiên bản đã dựng, không ảnh hero hứa một thiết kế khác trang thật.

## 9. Trường hợp nghiệm thu riêng

1. Sửa block 2 cho kết quả nhất quán với mô hình đã mô tả.
2. Reset đưa cả bốn khối về trạng thái ban đầu.
3. Có thể hiểu demo mà không biết thuật ngữ crypto.

Ngoài ba trường hợp này, chạy bộ kiểm chung của kế hoạch: tải ảnh/font lỗi, focus, reduced-motion, zoom200%, trạng thái trống và quay lại/reset. Không ghi đạt nếu chưa có bằng chứng.

Các tên, ngành và tác vụ ở trên là ví dụ có thể chuyển sang dự án của người dùng. Giữ ngôn ngữ thị giác gốc; không ép dự án thật thành nội dung của trang minh họa.