Vietnam Wedding Guide (VWG) — Design System & Guidelines

Mục đích: Tài liệu này là nguồn chân lý thiết kế duy nhất (Single Source of Truth) cho toàn bộ website weddinginvietnam.com. Mọi trang mới (Homepage, Services, Blog Index, Blog Article, Contact...), component mới hoặc bản sửa đổi UI BẮT BUỘC phải tuân thủ nghiêm ngặt các quy chuẩn dưới đây.

1. Triết Lý & Định Vị Thương Hiệu (Brand Philosophy)

Định vị: Chuyên trang biên tập và tư vấn độc lập cao cấp nhất về Đám cưới Điểm đến tại Việt Nam (Bespoke Destination Wedding Editorial & Private Advisory).
Phong cách: Warm Minimalist Luxury (Sang trọng tinh tế, ấm áp, đậm chất tạp chí cao cấp như Vogue Weddings, Kinfolk, Architectural Digest).
Nguyên tắc cốt lõi:
Uncompromising Neutrality: 100% khách quan, không nhận hoa hồng ngầm từ nhà cung cấp.
Production Rigor: Tư duy quản trị dự án sản xuất sự kiện tiêu chuẩn quốc tế.
"Made by Vietnam": Tôn vinh vẻ đẹp cảnh quan, văn hóa và tài năng nghệ thuật thủ công của Việt Nam.

2. Bảng Màu Thương Hiệu (Color Palette & Tokens)

Hệ thống màu được cấu hình trực tiếp trong Tailwind CSS v4 (frontend/app/globals.css). Tuyệt đối không sử dụng các mã màu tùy tiện ngoài bảng mã chuẩn:

Tên Token	Mã Hex / HSL	CSS Variable	Ứng Dụng
Brand Ivory	`#FAF8F5`	`--color-brand-ivory`	Nền chính của toàn trang web (thay thế màu trắng chói).
Brand Sand	`#F3EFEA`	`--color-brand-sand`	Nền phân cách các section phụ, badge, khung ảnh tác giả.
Brand Gold	`#C5A880`	`--color-brand-gold`	Màu nhấn thương hiệu chính: buttons, icons, links, hover, gradient.
Brand Gold Hover	`#B0936C`	`--color-brand-gold-hover`	Trạng thái hover của nút bấm và link màu gold.
Brand Dark	`#1C1917`	`--color-brand-dark`	Màu chữ chính (Typography), nền Footer và Banner CTA nổi bật.
Brand Muted	`#78716C`	`--color-brand-muted`	Màu chữ phụ, mô tả ngắn, metadata, ngày tháng, caption.
Brand Surface	`#FFFFFF`	`--color-brand-surface`	Nền thẻ bài viết (`card-luxury`), hộp nội dung trắng tinh khôi.
Brand Border	`#E7E2DB`	`--color-brand-border`	Đường kẻ viền tinh xảo, phân cách section và đường bao card.

Text Selection:

::selection {
  background-color: #C5A880;
  color: #FFFFFF;
}

Gradient Text:

.gold-gradient-text {
  background: linear-gradient(135deg, #C5A880 0%, #E8D8C3 50%, #B0936C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. Quy Chuẩn Typography (Typography Standards)

A. Font chữ bắt buộc:

Title / Heading Font: Philosopher (Google Fonts, serif phong cách cổ điển thanh lịch).
BẮT BUỘC áp dụng cho: h1, h2, h3, h4, h5, h6 và class .font-title.
CSS rule trong @layer base: css h1, h2, h3, h4, h5, h6, .font-title { font-family: "Philosopher", Georgia, serif !important; }
Body / Sans Font: Be Vietnam Pro (Google Fonts, sans-serif hiện đại, tối ưu hiển thị tiếng Anh và tiếng Việt dấu thanh chuẩn xác).
Áp dụng cho: toàn bộ nội dung thân trang, thẻ p, buttons, menu, caption.

B. Thang kích thước & khoảng cách dòng (Type Scale):

Hero H1: text-4xl sm:text-5xl lg:text-6xl, font-bold, leading-[1.18], tracking-tight.
Section H2: text-3xl sm:text-4xl lg:text-5xl, font-bold, leading-tight.
Card H3: text-xl sm:text-2xl, font-bold, leading-snug.
Lead Paragraph: text-lg sm:text-xl, font-normal, leading-relaxed, màu text-brand-muted.
Body Text: text-sm sm:text-base, leading-relaxed, màu text-brand-muted hoặc text-brand-dark/90.
Label / Subtitle: text-xs, font-semibold, uppercase, tracking-widest, màu text-brand-gold.

4. Bố Cục & Không Gian (Layout & Spacing)

Max Width Container: ```tsx

``` - **Khoảng cách dọc giữa các Section (Vertical Rhythm):** - Section thông thường: `py-20 lg:py-28` - Hero Section: `pt-16 pb-20 lg:pt-24 lg:pb-32` - Đáy trang: `pb-20 lg:pb-32` - **Section Headers:** Luôn căn giữa hoặc căn trái với nhãn phân loại (uppercase gold badge), tiêu đề h2 Philosopher nổi bật, và mô tả ngắn súc tích. --- ## 5. Quy Chuẩn Trình Bày Logo & Đối Tác (Vendor / Venue Showcase) > [!IMPORTANT] > **Quy tắc hiển thị Logo Vendor & Curated Venues:** > 1. **KHÔNG DÙNG KHỐI HỘP (No Block):** Tuyệt đối không bao bọc logo trong các thẻ card viền trắng bo tròn dày đặc tạo cảm giác nặng nề. > 2. **NỀN TRONG SUỐT (Transparent Background):** Mọi logo hiển thị phải có nền trong suốt (`RGBA` / `.webp` / `.svg` trong suốt), không chứa mảng đen, viền hộp hay khối vuông che nền. > 3. **CHỈ 1 DÒNG (Single Continuous Line / Marquee):** Bố trí toàn bộ logo trên 1 dải ngang duy nhất (`flex items-center gap-12 md:gap-16 flex-nowrap`). Dải này được thiết kế để sau này có thể tự động chạy cuộn vô tận (marquee ticker) khi số lượng venue tăng lên. > 4. **Tỷ Lệ Quang Học Đồng Đều (Optical Sizing):** Giới hạn chiều cao logo trong khoảng `max-h-12 md:max-h-14` để đảm bảo sự cân bằng thị giác giữa các thương hiệu có tỷ lệ khung hình khác nhau. > 5. **Tương Tác Thanh Lịch:** Mặc định độ mờ nhẹ (`opacity-75 hover:opacity-100 transition-all duration-300 hover:scale-105`). --- ## 6. Tiêu Chuẩn Bảo Mật Số Điện Thoại (Privacy & Anti-Scraping) > [!CAUTION] > **Bảo vệ quyền riêng tư & Chống Bot Scraper:** > - **CẤM** hiển thị số điện thoại thô (dạng văn bản như `+84 908 372 168`) trong mã nguồn HTML, DOM, hoặc nội dung text hiển thị cho người dùng. > - **CẤM** đặt link trực tiếp `href="https://wa.me/..."` trong client bundle để tránh bot dò quét tự động. > - **BẮT BUỘC** điều hướng qua endpoint phía server: > - Link WhatsApp: `/whatsapp` hoặc `/whatsapp?text=...` (xử lý redirect HTTP 307 an toàn từ server Next.js). > - **Nhãn nút bấm:** Sử dụng các nhãn trang nhã: > - *"Chat on WhatsApp"* > - *"WhatsApp Advisory"* > - *"Inquire via WhatsApp"* > - *"Connect with Senior Advisor"* --- ## 7. Thư Viện Thành Phần Chuẩn (Component Patterns) ### A. Nút Bấm (Buttons) - **Nút Chính (Primary Luxury CTA):** - Bo tròn hoàn toàn: `rounded-full` - Màu nền: `bg-brand-gold hover:bg-brand-gold-hover text-white` - Font: `text-xs sm:text-sm font-medium tracking-wide shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-0.5` - **Nút Phụ (Secondary Ghost / Border Button):** - Bo tròn hoàn toàn: `rounded-full` - Màu nền: `bg-white/90 hover:bg-white text-brand-dark border border-brand-border hover:border-brand-gold shadow-xs transition-all duration-300` ### B. Huy Hiệu Nhỏ (Badges) - Dùng cho category, nhãn section, status: - Class utility: `.badge-gold` - Cấu trúc: `px-3.5 py-1 rounded-full text-xs font-semibold text-brand-dark tracking-wider uppercase inline-flex items-center gap-2` ### C. Thẻ Bài Viết & Dịch Vụ (Cards) - Class utility: `.card-luxury` - Cấu trúc: ```css background-color: #FFFFFF; border: 1px solid #E7E2DB; border-radius: 1.5rem; /* rounded-3xl */ transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1); ``` - Hover: Đổi màu viền sang `#C5A880`, nhấc nhẹ `translateY(-3px)`, đổ bóng tinh tế. ### D. Phần Giới Thiệu Tác Giả (Author Section) - **Ảnh chân dung tác giả:** Sử dụng ảnh chính thức từ `Projects/nhi-nhi-vo-blog` (`/images/nhi-vo-profile.webp`), định dạng trong suốt hoặc bo góc mềm mại, không dùng ảnh stock giả tạo. - **Liên kết bắt buộc:** - Link nội bộ: `/about` (tìm hiểu câu chuyện thương hiệu VWG). - Link ngoại: `https://nhivo.io.vn` (portfolio & bài viết chuyên môn của tác giả Nhi Võ). --- ## 8. Hướng Dẫn Kiểm Tra Khi Hoàn Thiện Một Trang Mới Trước khi bàn giao bất kỳ trang hoặc template nào: 1. Đảm bảo toàn bộ thẻ tiêu đề đều thừa hưởng font `Philosopher`. 2. Kiểm tra source code (`view-source` hoặc grep) tuyệt đối không có số điện thoại dạng plain-text. 3. Kiểm tra logo hiển thị không bị viền đen, không bị đóng hộp thô kệch. 4. Chạy `corepack pnpm --filter frontend typecheck` đạt 0 lỗi. 5. Chạy `corepack pnpm --filter frontend build` biên dịch thành công 100%.