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

# Claymorphism (`claymorphism`)

Khối đất nặn mềm, bóng dày, màu tím pastel

- Hợp với: Hợp khi đang dùng AI để dựng website cho tiện ích cho người trẻ cần cảm giác dễ chạm nhưng phép tính phải chính xác.
- Ngành minh hoạ: Sản phẩm công nghệ, ứng dụng, cửa hàng
- Trang minh hoạ làm việc gì: Ứng dụng chia tiền nhóm với khoản chi và cách tất toán
- Thang (1–10): biến tấu bố cục 6 · chuyển động 4 · mật độ 4
- Xem mẫu: https://tocbien.cloud/phong-cach/claymorphism/

## Đặc tả

Claymorphism: nền tím rất nhạt #f0edff, mực tím sẫm, màu pastel làm điểm phụ. Khối bo lớn khoảng 24–28px, bóng mềm sáng/tối tạo cảm giác đất nặn. Chỉ vài phần chủ đạo có chiều sâu mạnh; nội dung phụ phẳng và gọn. Nếu là công cụ, dùng bề mặt chính cho thao tác hoặc kết quả, số liệu dóng cột; nếu là trang giới thiệu, cho thấy một ví dụ hoạt động. Nút có nhãn và phản hồi rõ, không dựa vào bóng để người dùng đoán. Trên điện thoại giảm bóng và xếp dọc, không tạo lớp chồng che chữ.

**Chi tiết cần giữ:** Bóng nổi và bóng lõm phải dùng đúng vai: nổi cho thứ bấm được, lõm cho thứ chỉ để đọc. Dùng lẫn là khách bấm nhầm.

**Lưu ý khi áp dụng:** Bóng dày làm trang nặng mắt nếu dùng cho nhiều khối. Chỉ đắp cho vài khối chính.

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

# High-Fidelity Claymorphism Design System

## Design Philosophy

**Core Concept: Digital Clay**
This design system is not merely a "soft UI"—it is a high-fidelity simulation of a tangible, physical world constructed from **premium digital clay**. Every element on the screen should evoke the sensation of holding a high-end, matte-finish vinyl toy or a soft, air-filled silicone object. It rejects the flatness of modern minimalism in favor of volume, weight, and tactility.

**The "High-Fidelity" Difference**:
Unlike early 2020s "Neumorphism" (which felt like extruded plastic) or basic "Claymorphism" (which often feels like flat vector art), **High-Fidelity Claymorphism** relies on complex, multi-layered lighting simulation using 4-layer shadow stacks. It renders objects that feel dense, substantial, and interactive—not hollow decorations.

*   **Materiality**: Think of soft-touch matte silicone, marshmallow-like foam, or high-quality injection-molded plastic with a premium finish. Surfaces absorb light rather than reflecting it sharply, creating a warm, inviting aesthetic.
*   **Lighting**: The "world" is lit by a soft, diffused overhead light source positioned top-left, creating deep ambient occlusion shadows below objects and gentle specular highlights on their upper ridges. This creates the illusion of physical depth.
*   **Shadow Architecture**: Every element uses carefully crafted multi-layer shadows:
    - **Outer shadows**: Soft, colored drop shadows that define distance from the surface
    - **Highlight shadows**: Top-left highlights that simulate light reflection
    - **Inner shadows**: Subtle colored reflections and rim lights that add dimensionality
    - **Active states**: Pressed elements use inset shadows to simulate physical depression

**The Sensory Vibe**:
*   **Playful & Optimistic**: The interface radiates joy through "candy store" colors (vivid violets, hot pinks, sky blues, emerald greens, amber oranges) and bouncy, organic motion. It feels safe, welcoming, and unpretentious—like a premium toy store display.
*   **Tactile & Responsive**: Elements don't just change color when interacted with—they physically react with exaggerated realism. Buttons actively "squish" (scale-[0.92] + shadow-clayPressed) and compress under the cursor. Cards lift and float towards the user (-translate-y-2 with enhanced shadows). Every interaction provides satisfying visual feedback.
*   **Friendly & Safe**: There are **zero sharp corners** in this universe. Every edge is aggressively rounded (`rounded-[20px]` minimum, up to `rounded-[60px]` for large containers), subconsciously signaling safety and approachability to the user. The design language speaks "friendly" and "accessible" without words.
*   **Premium Craft**: Despite the playfulness, this aesthetic maintains a sense of quality through careful attention to detail: consistent border radii, precise shadow layering, harmonious color relationships, and smooth micro-interactions.

**The "Clay" Physics Engine**:
1.  **Convexity (The Bulge)**: Primary interactive elements (Buttons, Stat orbs, Feature cards) bulge OUT towards the user with `shadow-clayButton` or `shadow-clayCard`. They capture light on their top-left edge and cast soft colored shadows below, creating the illusion of floating above the surface.
2.  **Concavity (The Press)**: Secondary surfaces (Input fields, Active button states, FAQ panels when open) are pressed INTO the clay surface with `shadow-clayPressed`. They cast internal shadows on their top edge and catch light on their bottom lip, making them feel recessed.
3.  **Buoyancy (The Float)**: The interface exists in a zero-gravity environment with high air resistance. Background blobs drift slowly (8-12s animations with translateY and rotate). Cards hover effortlessly with hover states that amplify the float effect. Nothing feels statically "stuck" to the grid—everything breathes and moves subtly.
4.  **Micro-Physics**: Hover states consistently lift elements upward (`hover:-translate-y-1` to `-translate-y-2`) while enhancing their shadows, simulating the element floating closer to the viewer. Active/pressed states do the opposite—compressing downward with reduced shadows.

---

## Design Token System

### Colors (The "Candy Shop" Palette)

**Background**:
*   **Canvas**: `#F4F1FA` (Very pale, cool lavender-white). This provides a cleaner, more modern base than warm beige. Never use pure white—the slight tint creates warmth.

**Foreground**:
*   **Text (Primary)**: `#332F3A` (Soft Charcoal). High contrast (passing WCAG AA) but softer than black for a friendlier feel.
*   **Muted (Secondary)**: `#635F69` (Dark Lavender-Gray). Crucial for readability against light backgrounds. Use for body text, labels, and secondary information. Never go lighter than this value.

**Accents (Vibrant & Saturated)**:
*   **Primary Accent**: `#7C3AED` (Vivid Violet). The hero color used for primary CTAs, links, and brand emphasis.
*   **Secondary Accent**: `#DB2777` (Hot Pink). Used in gradients and for secondary emphasis.
*   **Tertiary**: `#0EA5E9` (Sky Blue). For informational elements and background blobs.
*   **Success/Benefits**: `#10B981` (Emerald Green). For checkmarks and positive indicators.
*   **Warning**: `#F59E0B` (Amber). For alerts and star ratings.

**Gradient Strategy**:
*   **Primary Buttons**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED]` (lighter violet to primary violet). This creates depth and prevents overly dark buttons.
*   **Icon Orbs**: `bg-gradient-to-br` from light pastel (400) to saturated hue (600) with varied colors for visual interest (e.g., `from-blue-400 to-blue-600`, `from-purple-400 to-purple-600`, `from-pink-400 to-pink-600`).
*   **Text Highlights**: Use multi-stop gradients for hero text (`clay-text-gradient`): `from-clay-foreground 20%, to-clay-accent 60%, to-clay-accent-alt`. Keep gradient text large (text-5xl+) for readability.
*   **Background Blobs**: Semi-transparent accent colors with 10% opacity and blur-3xl for soft ambient lighting.

### Typography

**Font Selection**:
*   **Headings**: **Nunito** (Google Fonts, Weights: 700/800/900). The rounded terminals perfectly complement the soft clay aesthetic. Apply via inline styles: `style={{ fontFamily: "Nunito, sans-serif" }}` for all headings, stat numbers, and emphasis text.
*   **Body**: **DM Sans** (Google Fonts, Weights: 400/500/700). Geometric, clean, and highly readable. Applied globally via body font-family.

**Hierarchy (Mobile-First with Progressive Enhancement)**:
*   **Hero Headline**: `text-5xl sm:text-6xl md:text-7xl lg:text-8xl`, Black weight (font-black), tight tracking (tracking-tight), line-height 1.1. Always use Nunito.
*   **Section Titles**: `text-3xl sm:text-4xl md:text-5xl`, Extrabold (font-extrabold) or Black. Always use Nunito.
*   **Card Titles**: `text-xl` to `text-2xl` (larger for hero cards: `text-3xl`), Bold (font-bold) to Extrabold. Use Nunito.
*   **Body Text**: `text-base` to `text-lg`, Medium weight (font-medium), relaxed leading (leading-relaxed). Use DM Sans.
*   **Small Text**: `text-sm` to `text-xs`, Medium to Bold weight. Use for labels, metadata, uppercase tracking-wide treatments.

**Typography Best Practices**:
*   Always pair Nunito headings with DM Sans body for optimal hierarchy.
*   Use `font-black` (900 weight) for maximum impact on large headings and numbers.
*   Ensure line-height is generous: `leading-relaxed` (1.625) for body, `leading-[1.1]` for tight display headings.
*   Limit line length to 60-75 characters with max-w-2xl to max-w-3xl containers for optimal readability.
*   Use `tracking-tight` on large headings to maintain visual density, `tracking-wide` or `tracking-widest` on small caps/labels.

### Shapes & Radii

**The "Super-Rounded" Rule** (Absolute Values Only):
*   **Large Containers/Hero Sections**: `rounded-[48px]` to `rounded-[60px]`
*   **Standard Cards**: `rounded-[32px]` (the default for most cards)
*   **Medium Elements** (Benefits pills, Blog cards): `rounded-[24px]`
*   **Buttons & Inputs**: `rounded-[20px]` or `rounded-2xl`
*   **Icon Containers**: `rounded-2xl` (16px) for square icons, `rounded-full` for circular
*   **Small Badges**: `rounded-lg` (8px) minimum, `rounded-full` preferred
*   **Stat Orbs**: `rounded-full` (perfect circles)

**Critical Rules**:
*   Never use `rounded-md` (4px) or `rounded-sm`. They appear too sharp and generic for this aesthetic.
*   Maintain consistency: if a card uses `rounded-[32px]`, its nested image should use `rounded-[24px]` (8px less) to create visual hierarchy.
*   On mobile, you may reduce radii slightly (e.g., `rounded-[32px] sm:rounded-[40px]`) to maximize screen real estate while maintaining the soft aesthetic.

### Shadows (The Engine of Clay)

This system uses a **High-Fidelity Shadow Stack** to simulate complex lighting.

**1. Deep Clay (Surface)**:
For the main background elements or large containers.
```css
box-shadow: 
  30px 30px 60px #cdc6d9,           /* Deep, soft ambient occlusion */
  -30px -30px 60px #ffffff,         /* Top-left ambient light */
  inset 10px 10px 20px rgba(139, 92, 246, 0.05), /* Subtle color reflection */
  inset -10px -10px 20px rgba(255, 255, 255, 0.8); /* Surface specularity */
```

**2. Clay Card (Floating)**:
For standard content cards.
```css
box-shadow: 
  16px 16px 32px rgba(160, 150, 180, 0.2), /* Soft purple-gray drop shadow */
  -10px -10px 24px rgba(255, 255, 255, 0.9), /* Strong top-left highlight */
  inset 6px 6px 12px rgba(139, 92, 246, 0.03), /* Inner colored bounce light */
  inset -6px -6px 12px rgba(255, 255, 255, 1); /* Inner rim light */
```

**3. Clay Button (High Convexity)**:
For clickable elements.
```css
box-shadow: 
  12px 12px 24px rgba(139, 92, 246, 0.3), /* Strong colored drop shadow */
  -8px -8px 16px rgba(255, 255, 255, 0.4), /* Top-left highlight */
  inset 4px 4px 8px rgba(255, 255, 255, 0.4), /* Inner rim */
  inset -4px -4px 8px rgba(0, 0, 0, 0.1); /* Bottom-right shading */
```

**4. Clay Pressed (Recessed)**:
For inputs and active states.
```css
box-shadow: 
  inset 10px 10px 20px #d9d4e3, /* Deep inner shadow top-left */
  inset -10px -10px 20px #ffffff; /* Inner highlight bottom-right */
```

---

## Component Architecture

### 1. The Universal Card (`Card`)
*   **Base Styles**: `relative overflow-hidden rounded-[32px] bg-clay-cardBg p-8 text-clay-foreground shadow-clayCard backdrop-blur-xl`
*   **Interactive States**:
    *   Default: `shadow-clayCard` (4-layer shadow with soft depth)
    *   Hover: `hover:-translate-y-2 hover:shadow-[enhanced]` (lifted with stronger shadow)
    *   Transition: `transition-all duration-500` (smooth, premium feel)
*   **Structure**:
    *   Outer wrapper handles positioning, overflow, shadows
    *   **Inner Content Wrapper**: `<div className="relative z-10 flex h-full flex-col">{children}</div>` to support absolute positioned decorative elements
*   **Decorations**: Use absolute positioned panels with negative margins (`-bottom-8 -left-8 -right-8`) to create "peeking" UI elements that emerge from card bottoms
*   **Variants**:
    *   Glass effect: `bg-white/60` to `bg-white/80`
    *   Solid: `bg-white`
    *   Feature hero card: `md:col-span-2 md:row-span-2` with larger internal padding

### 2. The Clay Button (`Button`)
*   **Base Shape**: `rounded-[20px]` with chunky height (`h-14` default, `h-16` for lg)
*   **Base Styles**: `inline-flex items-center justify-center font-bold tracking-wide transition-all duration-200`
*   **Variants**:
    *   **Primary/Default**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED] text-white shadow-clayButton hover:shadow-clayButtonHover`
    *   **Secondary**: `bg-white text-clay-foreground shadow-clayButton`
    *   **Outline**: `border-2 border-clay-accent/20 bg-transparent text-clay-accent hover:border-clay-accent hover:bg-clay-accent/5`
    *   **Ghost**: `text-clay-foreground hover:bg-clay-accent/10 hover:text-clay-accent`
*   **Interactive States**:
    *   Hover: `hover:-translate-y-1` (lift up 4px) + Enhanced shadow
    *   Active: `active:scale-[0.92] active:shadow-clayPressed` (pronounced squish effect)
    *   Focus: `focus-visible:ring-4 focus-visible:ring-clay-accent/30 focus-visible:ring-offset-2`
*   **Sizing**: Use `size` prop: `sm` (h-11), `default` (h-14), `lg` (h-16)

### 3. The Recessed Input (`Input`)
*   **Base Shape**: `rounded-2xl` with generous height `h-16`
*   **Base Styles**: `flex w-full border-0 bg-[#EFEBF5] px-6 py-4 text-clay-foreground text-lg shadow-clayPressed`
*   **States**:
    *   Default: Recessed with `shadow-clayPressed` (inset shadows)
    *   Focus: `focus:bg-white focus:ring-4 focus:ring-clay-accent/20` (transforms to raised white surface)
    *   Placeholder: `placeholder:text-clay-muted`
*   **Accessibility**: `transition-all duration-200` for smooth state changes

### 4. Floating 3D Blobs (Background)
**Never use a flat background.** Always include 3-4 large, animated blobs.
*   **Container**: `<div className="pointer-events-none fixed inset-0 overflow-hidden -z-10">`
*   **Individual Blobs**:
    *   Classes: `absolute h-[60vh] w-[60vh] rounded-full blur-3xl`
    *   Colors: Accent colors with `/10` opacity (e.g., `bg-[#8B5CF6]/10`, `bg-[#EC4899]/10`, `bg-[#0EA5E9]/10`)
    *   Positioning: Negative margins to bleed off edges (`-top-[10%] -left-[10%]`, `-right-[10%] top-[20%]`)
    *   Animation: `clay-blob` or `clay-blob-alt` with staggered `animation-delay-2000` or `animation-delay-4000`
*   **Purpose**: Creates ambient colored lighting that shows through glass-morphic cards

---

## Animation System

**1. Clay Float (`clay-float`)**:
Simulates zero-gravity drift for background blobs. 8 second duration.
```css
@keyframes clay-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}
```

**2. Clay Float Delayed (`clay-float-delayed`)**:
Alternative animation with opposite rotation. 10 second duration.
```css
@keyframes clay-float-delayed {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(-2deg); }
}
```

**3. Clay Float Slow (`clay-float-slow`)**:
For hero decorative elements that orbit the headline. 12 second duration with more pronounced movement.
```css
@keyframes clay-float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(5deg); }
}
```

**4. Clay Breathe (`clay-breathe`)**:
Simulates an object inflating/deflating slightly. 6 second duration. Used on stat orbs.
```css
@keyframes clay-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
```

**5. Hover Lift**:
Standard interactive elements should lift upward on hover:
*   Cards: `hover:-translate-y-2` (8px) with enhanced shadow
*   Benefits pills: `hover:-translate-y-1` (4px)
*   Testimonials: `hover:-translate-y-2` (8px)
*   Blog posts: `hover:-translate-y-3` (12px) for dramatic effect
*   Buttons: `hover:-translate-y-1` (4px) with shadow enhancement

**6. Active Press**:
Buttons use `active:scale-[0.92]` combined with `active:shadow-clayPressed` to simulate a physical squish when clicked. Duration should be fast (200ms) for immediate feedback.

**7. Scale Transforms**:
*   Stat orbs: `hover:scale-110` (10% growth)
*   How It Works circles: `group-hover:scale-110` with 300ms duration
*   Pricing cards (non-highlighted): `hover:scale-105` (5% subtle growth)
*   Featured card in Bento grid: `hover:scale-[1.02]` (minimal growth due to large size)

**8. Animation Delays**:
Use staggered animations for visual rhythm:
*   `.animation-delay-2000` (2s delay)
*   `.animation-delay-4000` (4s delay)

**9. Reduced Motion**:
Always include `@media (prefers-reduced-motion: reduce)` to disable all animations for accessibility.

---

## Layout Patterns

**1. Masonry / Bento Grid**:
*   Don't use uniform grids. Mix `col-span-1` with `col-span-2` or `row-span-2` cards.
*   Use `hover:scale-[1.02]` on large grid items for a tactile feel.

**2. Split Layouts**:
*   Use 50/50 splits for "Product" or "Benefits" sections.
*   One side text, one side **Abstract 3D Composition** (nested clay shapes, not just an image).

**3. Overlapping Elements**:
*   Allow elements to break their containers (e.g., a "Popular" badge floating *above* a pricing card).
*   Use negative margins to pull decorative elements to the edges.

---

## Responsive Strategy

**Mobile-First Approach with Progressive Enhancement**

The Clay design system maintains its playful, tactile personality across all screen sizes while adapting layouts and sizing for optimal mobile experience.

**Typography Scaling**:
*   Hero headlines: `text-5xl → sm:text-6xl → md:text-7xl → lg:text-8xl`
*   Section titles: `text-3xl → sm:text-4xl → md:text-5xl`
*   Body text: `text-base → sm:text-lg → md:text-xl` where appropriate
*   Always maintain `leading-relaxed` and proper line length constraints

**Layout Transformations**:
*   **Navigation**: Compact on mobile (`h-16 rounded-[32px] px-4`) → Larger on desktop (`sm:h-20 sm:rounded-[40px] sm:px-8`). Hide non-essential nav items on mobile.
*   **Hero**: Stack CTAs vertically (`flex-col gap-6`) → Horizontal on desktop (`sm:flex-row`)
*   **Stats**: 2-column grid on mobile (`grid-cols-2 gap-6`) → 4 columns on desktop (`md:grid-cols-4 gap-8`)
*   **Features**: Single column → Bento layout with spans on desktop (`md:grid-cols-2 lg:grid-cols-3` with hero card `md:col-span-2 md:row-span-2`)
*   **Benefits/Product Detail**: Stack vertically on mobile → Side-by-side split on desktop (`lg:grid-cols-2`)
*   **Pricing**: Stack cards on mobile → 3 columns on desktop (`md:grid-cols-3`). Scale effect for highlighted card only applies on desktop (`md:scale-110`)

**Component Adjustments**:
*   **Cards**: Reduce padding on mobile (`p-6 sm:p-8`)
*   **Border Radii**: Maintain generous radii even on mobile (never less than `rounded-[20px]`)
*   **Buttons**: Full width on mobile (`w-full sm:w-auto`) for primary CTAs
*   **Decorative Elements**: Hide some floating shapes on mobile (`hidden lg:block`)
*   **Shadows**: Keep full shadow stacks—they're essential to the aesthetic

**Touch Targets**:
*   All interactive elements meet 44px minimum tap target (buttons are `h-14+`)
*   Increase spacing in mobile navigation for easier tapping
*   Ensure accordion FAQ items have adequate vertical spacing

**Performance**:
*   Animations still run on mobile but respect `prefers-reduced-motion`
*   Blur effects (`backdrop-blur-xl`) remain—they're critical to the glass-clay aesthetic
*   Background blobs scale with viewport units (`vh`) so they adapt naturally

**What NOT to Change on Mobile**:
*   Don't flatten the design—keep the shadows and depth
*   Don't reduce border radii to generic values
*   Don't remove the candy-store colors or make them muted
*   Don't disable all animations (only simplify if performance issues arise)

---

## Dos and Don'ts

*   **DO** use pronounced "Squish" animations on click (`active:scale-[0.92]` combined with `shadow-clayPressed`).
*   **DO** use varying border radii within components (e.g., `rounded-[48px]` for outer container, `rounded-[32px]` for card, `rounded-[24px]` for inner image).
*   **DO** use "Glass-Clay" hybrid (semi-transparent white `bg-white/60` to `/80` + `backdrop-blur-xl`) for cards to reveal background blobs.
*   **DO** use multi-layer shadow stacks (4 shadows minimum) to achieve high-fidelity depth.
*   **DO** apply Nunito font family explicitly to all headings, numbers, and labels via inline styles.
*   **DO** use vibrant gradient backgrounds for icon containers with varied colors (blue, purple, pink, green, cyan, amber).
*   **DON'T** use gray text lighter than `#635F69`. This is the minimum for accessibility against light backgrounds.
*   **DON'T** use sharp corners anywhere. Minimum radius is `rounded-[20px]`, never `rounded-md` or `rounded-lg`.
*   **DON'T** use flat colors for backgrounds. Always include animated blobs or subtle gradients.
*   **DON'T** use gradient text for font sizes smaller than `text-5xl` (readability risk).
*   **DON'T** make buttons too small. Minimum height is `h-11` (44px) for accessibility.
*   **DON'T** skip the hover lift effect on interactive elements—it's core to the tactile feel.

---

## Implementation Checklist
- [ ] **Background**: Canvas `#F4F1FA` + Animated Blobs.
- [ ] **Shadows**: 4-layer box-shadows defined in CSS.
- [ ] **Typography**: Nunito Black (Headings) + DM Sans (Body).
- [ ] **Buttons**: Gradient, rounded-2xl, click-squish.
- [ ] **Cards**: White/60%, backdrop-blur, rounded-3xl.
- [ ] **Text**: High contrast charcoal/slate, no light grays.

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

CÁCH ÁP DỤNG PHONG CÁCH CLAYMORPHISM
Bố cục và nhận diện: Nunito/DM Sans, lavender #F4F1FA, charcoal #332F3A, violet #7C3AED; nhiều lớp shadow theo nguồn tạo vật thể phồng, không chỉ radius lớn. Calculator là nội dung hero.

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

**H1:** Chia tiền gọn, chuyến đi vui.

**Lời dẫn:** Nhập chi phí mẫu và xem mỗi người cần góp bao nhiêu.

**Hành động chính:** Thử chia một khoản

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

### 1. Chiếc ví chung

**Bố cục và hành vi:** Headline 56–72 px và calculator phồng; icon ví là tài sản 3D duy nhất nổi bật.

**Nội dung và đầu ra:** Không nhiều blob che số tiền.

### 2. Thành viên

**Bố cục và hành vi:** Thêm tối đa 6 tên mẫu; avatar chữ cái, không cần ảnh người thật.

**Nội dung và đầu ra:** Tối thiểu 2 người, không tên trùng làm khó hiểu.

### 3. Khoản chi

**Bố cục và hành vi:** Tên khoản/số tiền/người đã trả; thêm/sửa/xóa từng dòng.

**Nội dung và đầu ra:** Dùng đồng Việt Nam nguyên, giải thích tổng mẫu và không giao dịch.

### 4. Kết quả chia

**Bố cục và hành vi:** Hiện tổng, phần mỗi người và chênh lệch đã trả/cần góp.

**Nội dung và đầu ra:** Quy tắc phần dư 1 đ phải minh bạch, không để tổng nợ khác tổng có.

### 5. Bản tóm tắt

**Bố cục và hành vi:** Sao chép bảng chi phí và reset; cho sửa lại dữ liệu.

**Nội dung và đầu ra:** Không xuất QR chuyển tiền hoặc nhắc ai trả thật.

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

Validate amount>0, integer; xóa thành viên đang có khoản chi phải yêu cầu chuyển người trả hoặc xóa khoản tương ứng. Phần dư phân theo thứ tự thành viên có giải thích.

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

390 px calculator chiếm đủ ngang, fields một cột, số tiền không ellipsis; shadow giảm độ lan để không cắt mép, vẫn giữ inset/outset.

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

Button press 120 ms với inset, success nhỏ 220 ms; blob nền chậm nếu có, không giật số. Reduced-motion giữ vật liệu.

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:** Hai vật thể clay AI hợp chủ đề; phần số và UI phải dựng thật, không nằm trong ảnh.

**Cover:** Một con số lớn trong calculator, vật thể ví và haiavatar mềm; tránh card trong card nhỏ không thấy tác vụ.

**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. 100001 đ chia 3 tổng phần đóng vẫn 100001 đ.
2. Xóa người trả không mất hoặc mồ côi khoản chi.
3. Kết quả cập nhật ngay sau sửa khoản.

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.