# Sprint 14 — Bricks Builder Blueprint: V2 Features & Polishing

**Áp dụng cho:** Bricks Homepage Template
**CSS Modules mới:** `ai-wizard.css`, `blog.css` (đã enqueue)
**JS Modules mới:** `district-tabs.js`, `ai-wizard.js`

Sprint 14 bổ sung các tính năng nâng cao (Interactive & Wow Effects) còn sót lại trong bản thiết kế tĩnh.

---

## 1. Trình chẩn đoán AI (AI Wizard)

**CSS Module:** `ai-wizard.css`
**JS Module:** `ai-wizard.js` (Cần load từ `main.js`)

Thay vì chỉ là UI hiển thị tính năng AI (Sprint 8), đây là giao diện tương tác từng bước cho khách hàng tự chẩn đoán.

```
Div (class: ai-wizard-wrap)
├── Div (class: wizard-steps)
│   ├── Div (class: wizard-step-dot active)
│   ├── Div (class: wizard-step-dot)
│   └── Div (class: wizard-step-dot)
│
├── Div (class: wizard-panel active)
│   ├── Heading (class: quiz-q) → "Máy tính của bạn đang gặp vấn đề gì?"
│   └── Div (class: wizard-options)
│       ├── Button (class: wizard-opt) → Khởi động không lên màn hình
│       ├── Button (class: wizard-opt) → Màn hình xanh (BSOD)
│       └── Button (class: wizard-opt) → Máy chạy rất chậm
│
├── Div (class: wizard-panel)
│   ├── Heading (class: quiz-q) → "Tình trạng này xuất hiện từ bao giờ?"
│   └── Div (class: wizard-options)
│       ├── Button (class: wizard-opt) → Vừa mới bị hôm nay
│       └── Button (class: wizard-opt) → Đã bị vài ngày
│
└── Div (class: wizard-result)
    ├── Heading (h4) → "Chẩn đoán Sơ bộ"
    ├── Text (p) → "Có thể do lỏng RAM hoặc lỗi nguồn..."
    └── Link (class: btn btn-primary) → Đặt lịch ngay
```

---

## 2. Video Testimonial & Google Reviews Marquee

Được bổ sung vào module `testimonials.css`. Bố trí vào phần Testimonials của Sprint 11.

```
<!-- VIDEO TESTIMONIAL -->
Div (class: video-testi reveal-scale)
├── Image (class: video-testi-poster)
├── Iframe (YouTube Embed)
└── Button (class: video-testi-play)
    └── Span → "▶"

<!-- GOOGLE REVIEWS -->
Div (class: google-reviews)
├── Div (class: google-reviews-header)
│   ├── Div (class: google-score) → "5.0"
│   └── Div (class: google-stars) → "★★★★★"
└── Div (class: reviews-track-wrap)
    └── Div (class: reviews-track)
        <!-- Query Loop ACF / Static -->
        ├── Div (class: review-card)
        │   ├── Div (class: review-stars) → "★★★★★"
        │   ├── Text (p) → Nội dung review
        │   └── Div (class: review-author) → Tên KH
        ├── (Lặp lại các card...)
```

---

## 3. District Info Tabs (Local SEO Nâng cao)

Thay vì chỉ là thẻ Link (Sprint 10), phần này cho phép click vào từng Quận để xem thời gian đến nơi dự kiến.

```
Div (class: district-map-wrap)
├── Div (class: district-chips)
│   ├── Button (class: district-chip active, attr: data-target="info-q1") → Quận 1
│   ├── Button (class: district-chip, attr: data-target="info-q3") → Quận 3
│   └── ...
│
├── Div (id: info-q1, class: district-info visible)
│   └── Text → Trạm Quận 1: <strong>Có mặt sau 15 phút</strong>
│
└── Div (id: info-q3, class: district-info)
    └── Text → Trạm Quận 3: <strong>Có mặt sau 20 phút</strong>
```

---

## 4. Blog Pillar Card

Hiển thị một bài viết nổi bật, to bằng 2 cột.

```
Div (class: blog-pillar)
├── Image (class: blog-pillar-img)
└── Div (class: blog-pillar-body)
    ├── Span (class: blog-pillar-badge) → Tin mới
    ├── Heading (h3) → Tiêu đề bài viết
    ├── Text (p) → Đoạn trích
    └── Link (class: btn btn-outline) → Xem chi tiết
```

---

## Checklist
- [ ] CSS & JS cho các thành phần này đã được enqueue trong file ZIP mới nhất.
- [ ] Bật `initAiWizard()` và `initDistrictTabs()` trong `main.js`.