# 04 — Wireframes (Hybrid: 3 key pages) **Stage:** 4 — ui-wireframe **Approach:** Hybrid — wireframe 3 page critical (Home, Tool template, Dashboard) → Stage 5 mockup HTML cho phần còn lại **Mode:** ASCII grayscale, no color/font/icon yet **Breakpoints:** mobile 375px + desktop 1280px --- ## Page list & approach | Page | Wireframe ở đây? | Lý do | |---|---|---| | **Home** | ✅ Full | Page quan trọng nhất, định form CTA + tool grouping | | **Tool template** (1 wireframe áp dụng cho 25+ tool) | ✅ Full | Mọi tool page reuse layout này | | **Dashboard "Lá số của tôi"** | ✅ Full | Logged-in core experience | | Auth (login/register) | ⏭️ Stage 5 trực tiếp | Pattern chuẩn, không cần wireframe | | Blog list/detail | ⏭️ Stage 5 trực tiếp | Pattern chuẩn | | Tool group page (`/phong-thuy`, `/tu-vi`...) | ⏭️ Stage 5 trực tiếp | Variant của tool grid | | 404 / settings | ⏭️ Stage 5 trực tiếp | Trivial | --- # Page 1: HOME (`/`) ## Mobile (375px) ``` ┌─────────────────────────────────────┐ │ [☰] ◈ Logo [👤] [🌙] │ Sticky header 56px ├─────────────────────────────────────┤ │ │ │ ◇ ◇ ◇ (subtle bagua) │ │ │ │ ╔═══════════════════════════╗ │ H1 serif display 32px │ ║ Khám Phá Vận Mệnh ║ │ text-primary │ ║ Của Bạn ║ │ │ ╚═══════════════════════════╝ │ │ │ │ Tử vi · Vận mệnh · Phong thủy │ Tagline 16px muted │ trực tuyến bằng AI │ │ │ │ ┌───────────────────────────────┐ │ Hero form card │ │ Nhập ngày sinh để xem lá số │ │ Card border-subtle │ │ ───────────────────────── │ │ │ │ [Họ tên..................] │ │ │ │ [DD] [MM] [YYYY] [⚥ Nam ▾] │ │ 3 dropdowns + gender │ │ [HH:MM] [● AL ○ DL] │ │ Time + lunar/solar toggle │ │ │ │ │ │ [════ Xem Tử Vi Trọn Đời ═] │ │ CTA primary gold │ └───────────────────────────────┘ │ │ │ │ [💬 Hỏi AI luận giải] │ CTA secondary outline │ [📅 Xem ngày tốt] │ CTA secondary outline │ │ ├─────────────────────────────────────┤ 64px section gap │ │ │ ◇ Tử Vi Hôm Nay │ H2 serif 28px │ ───────── │ │ │ │ ┌────────────────────────────────┐│ │ │ ◐ 30/05/2026 · Mùng 4 tháng 5 ││ Today date card │ │ Lục diệu giờ này: Tốc Hỷ ✓ ││ │ │ Nay là ngày: ... ││ │ └────────────────────────────────┘│ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Tất Cả Công Cụ │ H2 │ ─────────── │ │ │ │ Tabs: [Tử vi] [Phong thủy] │ Horizontal scroll tabs │ [Lịch] [Hợp tuổi] [Khác] │ │ │ │ ┌──────────┐ ┌──────────┐ │ 2-col tool grid mobile │ │ ◈ │ │ ◈ │ │ │ │ Tử Vi │ │ Vận Mệnh │ │ │ │ Trọn │ │ AI │ │ │ │ Đời │ │ │ │ │ └──────────┘ └──────────┘ │ │ ┌──────────┐ ┌──────────┐ │ │ │ ◈ │ │ ◈ │ │ │ │ Tứ Trụ │ │ Số Mạng │ │ │ │ │ │ 60 Tuổi │ │ │ └──────────┘ └──────────┘ │ │ ... (5 cards/category × 5 cats) │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ 12 Con Giáp Hôm Nay │ H2 │ ───────────── │ │ │ │ ◀ [🐀 Tý][🐂 Sửu][🐅 Dần] ... ▶ │ Horizontal scroll │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Lục Diệu Theo Giờ │ H2 │ ────────────── │ │ │ │ ╔═══════════════════════════╗ │ Hexagram circle / table │ ║ Đại An | Lưu Niên | ... ║ │ │ ╚═══════════════════════════╝ │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Blog Tử Vi & Mệnh Học │ H2 │ ──────────────── │ │ │ │ ┌────────────────────────────────┐│ Article card │ │ [thumbnail] ││ │ │ Sao Lưu Trong Vận Hạn: ││ │ │ Thiên Mã, Lộc Tồn, Kình Đà ││ │ │ #Tử Vi · 5 phút đọc ││ │ └────────────────────────────────┘│ │ ┌────────────────────────────────┐│ │ │ ... (3-5 articles) ││ │ └────────────────────────────────┘│ │ │ │ [Xem tất cả bài viết →] │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Thư Viện Tử Vi & Mệnh Học │ H2 │ ────────────────── │ │ │ │ ┌──────────┐ ┌──────────┐ │ │ │ 24 Sao │ │ 12 Cung │ │ │ │ Tử Vi │ │ Tử Vi │ │ │ └──────────┘ └──────────┘ │ │ │ ├─────────────────────────────────────┤ Footer dark │ │ │ ◈ Logo │ │ Tagline ngắn về site │ │ │ │ ───────── │ │ Sản phẩm │ Hỗ trợ │ Pháp lý │ 3-col link list │ │ │ ⚠ Disclaimer: Thông tin chỉ mang │ │ tính chất tham khảo... │ │ │ │ © 2026 website-tuvi · vi_VN │ └─────────────────────────────────────┘ ┌───────────────────────────────────┐ │ [🏠] [✦] [📅] [🌪] [👤] │ Sticky bottom nav └───────────────────────────────────┘ Fixed 64px bottom Trang chủ · Tử vi · Lịch · Phong · Cá nhân ``` **Flow notes (mobile):** - Hero form là CTA chính — nhập 1 lần, nhiều tool dùng được lại (qua "Lá số của tôi" sau khi login) - Sticky bottom nav 5 icon — đây là pattern lichngaytot.com borrow - 2 CTA secondary (Hỏi AI / Ngày tốt) ngay dưới hero để cover JTBD #2 và #3 - Tool grid lazy-load: load 6 card đầu, scroll mới load tiếp --- ## Desktop (1280px) ``` ┌────────────────────────────────────────────────────────────────────────────────┐ │ ◈ Logo Tử vi Phong thủy Lịch Hợp tuổi Blog [Đăng nhập] [Đăng ký]│ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ◇ ◇ ◇ (subtle bagua art) │ │ │ │ ╔══════════════════════════════════════════════╗ │ │ ║ Khám Phá Vận Mệnh Của Bạn ║ │ H1 64px │ ╚══════════════════════════════════════════════╝ │ │ │ │ Tử vi · Vận mệnh · Phong thủy trực tuyến bằng AI │ Tagline │ │ │ ┌──────────────────────────────────────┐ ┌──────────────────────────────┐ │ 2-col │ │ Hero form card (lớn hơn mobile) │ │ ◈ Symbolic illustration │ │ │ │ ─────────────────────────────── │ │ (lá số / bát quái) │ │ │ │ [Họ tên........................] │ │ │ │ │ │ [DD] [MM] [YYYY] [Giới tính ▾] │ │ │ │ │ │ [Giờ HH:MM] [● AL ○ DL] │ │ │ │ │ │ [════ Xem Tử Vi Trọn Đời ═══] │ │ │ │ │ │ │ │ │ │ │ │ [Hỏi AI luận giải] [Ngày tốt] │ │ │ │ │ └──────────────────────────────────────┘ └──────────────────────────────┘ │ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ 128px gap │ │ │ ◇ Tử Vi Hôm Nay │ H2 center │ ───────────── │ │ │ │ ┌────────────────────┐ ┌────────────────────┐ ┌────────────────────┐ │ 3-col day card │ │ Ngày 30/05/2026 │ │ Lục Diệu giờ này │ │ 12 Con giáp hôm │ │ │ │ Mùng 4 tháng 5 AL │ │ Tốc Hỷ — Tốt │ │ nay (carousel) │ │ │ └────────────────────┘ └────────────────────┘ └────────────────────┘ │ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ◇ Tất Cả Công Cụ │ │ ─────────────── │ │ │ │ [Tử vi] [Phong thủy] [Lịch] [Hợp tuổi] [Đặt tên] [AI] [Khác] │ Tab nav │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │ 5-col grid │ │ ◈ │ │ ◈ │ │ ◈ │ │ ◈ │ │ ◈ │ │ │ │ Tử Vi │ │ Vận │ │ Tứ Trụ │ │ Số mạng│ │ Tử Vi │ │ │ │ Trọn │ │ Mệnh │ │ │ │ 60 t │ │ Năm │ │ │ │ Đời │ │ AI │ │ │ │ │ │ │ │ │ └────────┘ └────────┘ └────────┘ └────────┘ └────────┘ │ │ (5 col × 5 row = 25 tools) │ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Lục diệu theo giờ (large hex visualization) │ H2 │ │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ◇ Blog Tử Vi & Mệnh Học │ H2 │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ 4-col blog grid │ │ [thumb] │ │ [thumb] │ │ [thumb] │ │ [thumb] │ │ │ │ Title... │ │ Title... │ │ Title... │ │ Title... │ │ │ │ #tag·5p │ │ #tag·3p │ │ #tag·8p │ │ #tag·4p │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ [Xem tất cả bài viết →] │ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ Footer │ │ │ ◈ Logo Sản phẩm Hỗ trợ Pháp lý Theo dõi │ 4-col footer │ Tagline... Tử vi FAQ Điều khoản FB / YT │ │ Phong thủy Liên hệ Privacy │ │ Hợp tuổi Disclaimer │ │ │ │ ───────────────────────────────────────────────────────────────── │ │ │ │ ⚠ Thông tin trên trang chỉ mang tính chất tham khảo, không thay thế tư vấn │ │ chuyên môn. Người dùng tự chịu trách nhiệm khi áp dụng. │ │ │ │ © 2026 website-tuvi · Made with ◇ in Vietnam · vi_VN │ └────────────────────────────────────────────────────────────────────────────────┘ ``` **Flow notes (desktop):** - Header sticky, logo trái, nav giữa, auth phải - Không sticky bottom nav (chỉ mobile) - Hero 2-col: form trái + illustration phải - Tool grid 5×5 đầy đủ luôn (không lazy) - Footer 4-col với disclaimer rõ --- # Page 2: TOOL TEMPLATE (1 layout cho 25+ tool) Dùng cho: `/tuvi`, `/van-menh`, `/tu-tru`, `/lich-am`, `/hop-tuoi`, `/phong-thuy-nha`, ... Mỗi tool có: - **Phase A: Input form** (state khi vừa vào) - **Phase B: Result display** (state sau khi submit) ## Mobile — Phase A (Input) ``` ┌─────────────────────────────────────┐ │ [☰] ◈ Logo [👤] [🌙] │ ├─────────────────────────────────────┤ │ [← Quay lại] Tử Vi Trọn Đời │ Breadcrumb + page title ├─────────────────────────────────────┤ │ │ │ ◈ │ Tool icon 64px │ Tử Vi Trọn Đời │ H1 serif 32px │ │ │ Lá số tử vi 12 cung dựa trên │ Subtitle 16px muted │ ngày tháng năm sinh, an sao theo │ │ trường phái cổ học. │ │ │ ├─────────────────────────────────────┤ │ │ │ ┌────────────────────────────────┐│ Input form card │ │ Nhập thông tin ││ │ │ ────────────── ││ │ │ ││ │ │ Họ và tên ││ │ │ [...........................] ││ │ │ ││ │ │ Ngày sinh Giới tính ││ │ │ [DD][MM][YYYY] [Nam ▾] ││ │ │ ││ │ │ Giờ sinh Lịch ││ │ │ [HH:MM] [●AL ○DL] ││ │ │ ││ │ │ ┌──────────────────────────┐ ││ │ │ │ ═══ Xem Lá Số ═══ │ ││ CTA primary │ │ └──────────────────────────┘ ││ │ └────────────────────────────────┘│ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Cách Tính (giải thích lý thuyết) │ H2 — SEO content │ ────────── │ │ Tử vi trọn đời được an dựa trên... │ │ (~300-500 từ giải thích) │ │ │ │ ◇ Câu Hỏi Thường Gặp │ H2 — FAQ schema │ ───────────── │ │ ▸ Lá số tử vi có chính xác không? │ Accordion │ ▸ Cần biết giờ sinh chính xác đến..│ │ ▸ Tôi không biết giờ sinh thì sao? │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Công cụ liên quan │ Cross-link engagement │ ───────────── │ │ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │Tứ Trụ│ │ Vận │ │ Năm │ │ │ │ │ │Mệnh │ │ XN │ │ │ └──────┘ └──────┘ └──────┘ │ │ │ └─────────────────────────────────────┘ ``` ## Mobile — Phase B (Result) ``` ┌─────────────────────────────────────┐ │ [☰] ◈ Logo [👤] [🌙] │ ├─────────────────────────────────────┤ │ [← Sửa thông tin] Lá số của bạn │ ├─────────────────────────────────────┤ │ │ │ ╔════════════════════════════════╗ │ Summary card │ ║ Nguyễn Văn A — Nam — Canh Thân║ │ với info người xem │ ║ 15/03/1990 — Giờ Tý ║ │ │ ║ Mệnh: Thạch Lựu Mộc ║ │ │ ║ Cung Mệnh: Tử Vi · Thiên Phủ ║ │ │ ╚════════════════════════════════╝ │ │ │ │ [💾 Lưu lá số] [🔗 Chia sẻ] │ Action buttons │ [📥 Tải PDF] [✦ Hỏi AI luận giải] │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Lá Số Tử Vi (12 cung) │ H2 │ │ │ ┌─────────────────────────────────┐│ SVG/Canvas chart │ │ ┌────┬────┬────┬────┐ ││ Mobile: zoomable │ │ │ T.D│ T.B│ T.M│ Mng │ ││ 4×4 grid layout │ │ ├────┼────┼────┼────┤ ││ cổ truyền │ │ │ NB │ │ │ PMU│ ││ │ │ ├────┼────┼────┼────┤ ││ │ │ │ TT │ │ │ ĐE │ ││ │ │ ├────┼────┼────┼────┤ ││ │ │ │ T │ TS │ HH │ TT │ ││ │ │ └────┴────┴────┴────┘ ││ │ │ ││ │ │ [↻] [+] [-] [Lưu ảnh] ││ Chart controls │ └─────────────────────────────────┘│ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Luận Giải Cung Mệnh │ H2 │ ──────────────── │ │ Cung Mệnh có Tử Vi tọa thủ, lại │ Body text 16px │ được Thiên Phủ chiếu hợp... │ line-height 1.6 │ (~400-800 từ luận giải) │ │ │ │ ◇ Cung Tài Bạch │ Accordion (tap mở) │ ▸ Cung Quan Lộc │ │ ▸ Cung Phu Thê │ │ ▸ Cung Tử Tức │ │ ▸ ... (12 cung) │ │ │ ├─────────────────────────────────────┤ │ │ │ ╔════════════════════════════════╗ │ AI CTA banner │ ║ ✦ Hỏi AI luận giải sâu hơn? ║ │ prominent │ ║ ║ │ │ ║ Đặt câu hỏi tự do về sự ║ │ │ ║ nghiệp, tình duyên, sức khỏe..║ │ │ ║ ║ │ │ ║ [═══ Bắt đầu hỏi AI ═══] ║ │ │ ╚════════════════════════════════╝ │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Bài viết về Tử Vi của bạn │ Personalized blog │ ──────────────── │ │ Tự động lọc bài liên quan đến │ │ sao và cung của user │ │ │ └─────────────────────────────────────┘ ``` ## Desktop — Phase B (Result) ``` ┌────────────────────────────────────────────────────────────────────────────────┐ │ ◈ Logo Tử vi Phong thủy Lịch Hợp tuổi Blog [👤 Nguyễn Văn A ▾] │ ├────────────────────────────────────────────────────────────────────────────────┤ │ Trang chủ › Tử vi › Lá số của bạn │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ╔═══════════════════════════════════════════════════════════════════════════╗│ Summary bar │ ║ Nguyễn Văn A · Nam · 15/03/1990 · Canh Thân · Mệnh Thạch Lựu Mộc ║│ │ ║ [Sửa] [Lưu] [Chia sẻ] [Tải PDF] [Hỏi AI] ║│ │ ╚═══════════════════════════════════════════════════════════════════════════╝│ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────────┐ ┌──────────────────────────────┐ │ 2-col │ │ Lá Số 12 Cung (lớn 600×600px) │ │ Mục lục luận giải │ │ │ │ ┌────┬────┬────┬────┐ │ │ ─────────── │ │ │ │ │ │ │ │ │ │ │ • Cung Mệnh (active) │ │ Sticky toc │ │ ├────┼────┼────┼────┤ │ │ • Cung Tài Bạch │ │ │ │ │ │ │ │ │ │ │ • Cung Quan Lộc │ │ │ │ ├────┼────┼────┼────┤ │ │ • Cung Phu Thê │ │ │ │ │ │ │ │ │ │ │ • Cung Tử Tức │ │ │ │ ├────┼────┼────┼────┤ │ │ • Cung Tật Ách │ │ │ │ │ │ │ │ │ │ │ • ... (12 cung) │ │ │ │ └────┴────┴────┴────┘ │ │ │ │ │ │ [↻] [+] [-] [Lưu ảnh] [Toàn màn hì]│ │ │ │ │ └──────────────────────────────────────┘ └──────────────────────────────┘ │ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ◇ Luận Giải Cung Mệnh │ │ ──────────────── │ │ (Body text 600-800 chữ, paragraph rộng max-width 720px center) │ │ │ │ ◇ Luận Giải Cung Tài Bạch │ │ ───────────────── │ │ ... │ │ │ │ (... 12 cung — đều mở sẵn ở desktop, accordion ở mobile) │ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ╔══════════════════════════════════════════════════════════════════╗ │ AI banner │ ║ ✦ Muốn luận giải sâu hơn? Hỏi AI ║ │ │ ║ ║ │ │ ║ "AI đã đọc lá số của bạn. Hỏi tự do về sự nghiệp, tình duyên, ║ │ │ ║ sức khỏe — AI sẽ trả lời dựa trên cung và sao của bạn." ║ │ │ ║ ║ │ │ ║ [═══ Bắt đầu hỏi AI ═══] ║ │ │ ╚══════════════════════════════════════════════════════════════════╝ │ │ │ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ ◇ Bài viết về Tử Vi của bạn ◇ Công cụ liên quan │ 2-col footer │ (4 article cards) (Tứ Trụ · Năm xây nhà · Phong thủy nhà) │ │ │ └────────────────────────────────────────────────────────────────────────────────┘ ``` **Flow notes (Tool template):** - Phase A → submit → Phase B (cùng URL, không reload, query params lưu input) - URL pattern: `/tuvi?n=Nguyen+Van+A&dob=1990-03-15&t=00:30&g=m&l=al` - User logged-in: tự động lưu lá số vào dashboard ngay sau submit - User chưa login: prompt "Đăng ký để lưu lá số" sau khi xem result - Cross-link "Công cụ liên quan" — engagement KPI - AI banner prominent — drive AI conversion KPI - Blog liên quan personalized — content + SEO --- # Page 3: DASHBOARD "LÁ SỐ CỦA TÔI" (`/me`) ## Mobile ``` ┌─────────────────────────────────────┐ │ [☰] ◈ Logo [👤] [🌙] │ ├─────────────────────────────────────┤ │ │ │ ╔═══════════════════════════════╗ │ User card │ ║ ◯ Avatar ║ │ │ ║ Nguyễn Văn A ║ │ │ ║ nv.a@email.com ║ │ │ ║ ║ │ │ ║ [Sửa hồ sơ] ║ │ │ ╚═══════════════════════════════╝ │ │ │ │ Hôm nay: 30/05 · Mùng 4 tháng 5 │ Today snippet │ Tử vi ngày của bạn: ✓ Tốt │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Lá Số Của Tôi │ H2 │ ────────── │ │ ┌────────────────────────────────┐│ │ │ ★ Lá số gốc (Default) ││ │ │ Nguyễn Văn A · 15/03/1990 ││ │ │ Canh Thân · Thạch Lựu Mộc ││ │ │ [Xem] [Sửa] [Xóa] ││ │ └────────────────────────────────┘│ │ ┌────────────────────────────────┐│ │ │ Lá số mẹ ││ Có thể lưu nhiều lá số │ │ Trần Thị B · 12/08/1962 ││ cho gia đình │ └────────────────────────────────┘│ │ │ │ [+ Tạo lá số mới] │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Lịch Sử Đã Xem │ H2 │ ────────────── │ │ • Hợp tuổi với 1985 — 2 ngày trước │ │ • Ngày tốt khai trương — 5/4/2026 │ │ • Phong thủy nhà hướng Tây Nam │ │ [Xem tất cả →]│ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Câu Hỏi AI Đã Lưu │ H2 — AI history │ ────────────── │ │ Q: "Năm 2026 sự nghiệp tôi ra sao?"│ │ → Đã trả lời 28/05 │ │ │ │ Q: "Có nên đầu tư bất động sản │ │ năm Bính Ngọ?" │ │ → Đã trả lời 20/05 │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Lời Nhắc │ H2 — reminders │ ─────── │ │ ⏰ Sinh nhật Mẹ: 12/08 (75 ngày) │ │ ⏰ Ngày tốt khai trương: 5/4/2026 │ │ │ │ [+ Thêm lời nhắc] │ │ │ ├─────────────────────────────────────┤ │ │ │ ◇ Cài Đặt │ H2 │ ────── │ │ • Thông báo email │ │ • Đăng xuất │ │ • Xóa tài khoản │ │ │ └─────────────────────────────────────┘ ``` ## Desktop ``` ┌────────────────────────────────────────────────────────────────────────────────┐ │ ◈ Logo Tử vi Phong thủy Lịch Hợp tuổi Blog [Nguyễn Văn A ▾]│ ├────────────────────────────────────────────────────────────────────────────────┤ │ │ │ Cá nhân › Lá số của tôi │ │ │ │ ┌──────────────────────────┐ ┌────────────────────────────────────────────┐ │ 2-col │ │ Sidebar │ │ Main content │ │ │ │ ────── │ │ │ │ │ │ │ │ Chào Nguyễn Văn A │ │ │ │ ◯ Avatar │ │ ──────── │ │ │ │ Nguyễn Văn A │ │ Hôm nay 30/05/2026 — Mùng 4 tháng 5 AL │ │ │ │ nv.a@email.com │ │ Tử vi ngày của bạn: ✓ Tốt cho công việc │ │ │ │ [Sửa hồ sơ] │ │ │ │ │ │ │ │ ┌───────────┐ ┌───────────┐ ┌─────────┐ │ │ 3-col stat cards │ │ ───────── │ │ │ 3 │ │ 28 │ │ 12 │ │ │ │ │ Menu: │ │ │ Lá số đã │ │ Tools đã │ │ Câu hỏi │ │ │ │ │ • Tổng quan ✓ │ │ │ lưu │ │ dùng │ │ AI │ │ │ │ │ • Lá số │ │ └───────────┘ └───────────┘ └─────────┘ │ │ │ │ • Lịch sử │ │ │ │ │ │ • Câu hỏi AI │ │ ◇ Lá Số Của Tôi │ │ │ │ • Lời nhắc │ │ ┌───────────┐ ┌───────────┐ ┌─────────┐ │ │ 3-col chart cards │ │ • Cài đặt │ │ │ ★ Default │ │ Mẹ │ │ Vợ │ │ │ │ │ │ │ │ Nguyễn V. │ │ Trần T. B │ │ Phạm T. │ │ │ │ │ │ │ │ Canh Thân │ │ Nhâm Dần │ │ Quý Hợi │ │ │ │ │ │ │ └───────────┘ └───────────┘ └─────────┘ │ │ │ │ │ │ [+ Tạo mới] │ │ │ │ │ │ │ │ │ │ │ │ ◇ Câu Hỏi AI Đã Lưu (3 gần nhất) │ │ │ │ │ │ ... │ │ │ │ │ │ │ │ │ │ │ │ ◇ Lời Nhắc Sắp Tới │ │ │ │ │ │ ... │ │ │ └──────────────────────────┘ └────────────────────────────────────────────┘ │ └────────────────────────────────────────────────────────────────────────────────┘ ``` **Flow notes (Dashboard):** - Sidebar nav (desktop) / drawer (mobile) - Multi-chart support: user lưu nhiều lá số (mình + gia đình) - AI history: user xem lại câu hỏi đã hỏi (privacy: chỉ user thấy được) - Lịch sử tools: tự động log mọi tool đã dùng - Reminder: user thêm sinh nhật, ngày khai trương → email/push notification - Stats card top: số lá số, tool đã dùng, câu AI — đo engagement --- ## Gate — Stage 4 EXIT CRITERIA - [x] Mỗi page key có wireframe mobile + desktop - [x] Flow notes giữa các page - [x] Responsive breakpoints documented (375 + 1280) - [x] Tool template cover 25+ tool (1 layout reuse) ✅ **PASS (hybrid mode)** — Sẵn sàng vào Stage 5 (ui-implement) — mockup HTML rồi port Next.js **Tool group page, blog, auth pages** sẽ implement ở Stage 5 trực tiếp (pattern chuẩn, không cần wireframe text).