# BRICKS BLUEPRINT: TEMPLATE 01 (REMOTE IT HUB)

## 1. PURPOSE
Định nghĩa cấu trúc (Structure) và class CSS cho Trang Danh Mục Dịch Vụ IT Từ Xa (Hub Page) và các Trang Chi Tiết (Detail Post Page).

## 2. REQUIRED CSS/JS MODULES
- `dark-mode.css`
- `animations.css`
- `booking-toast.css`
- `ticker.css`
- `fab-dock.js` & `fab.css`
- `price-calc.js` & `price-calc.css` (Tính năng ROI Calculator)
- `ai-wizard.js` & `ai-wizard.css` (Tính năng Interactive Diagnosis)
- `before-after.js` (Tính năng So sánh Trước/Sau)

## 3. LAYOUT STRUCTURE (11 SECTIONS)

### Section 1: Hero (`section-hero`)
- **Wrapper:** `div.hero-wrapper.glass-panel`
- **Content:**
  - `h1.hero-title`: Giải pháp Dịch vụ IT Từ Xa
  - `div.urgency-badge`: Miễn phí chẩn đoán cho 5 khách đầu tiên
  - `div.live-pulse-indicator`: 🟢 2 Kỹ thuật viên đang online
  - `button.cta-primary`: Nhận hỗ trợ ngay
- **Media:**
  - `img.hero-image`: Kỹ thuật viên thao tác Ultraviewer

### Section 2: Trust & Stats (`section-trust`)
- **Wrapper:** `div.trust-ticker-wrapper` (Kế thừa sprint-3-stats-ticker.md)
- **Content:**
  - `div.stat-item`: 5000+ ca xử lý
  - `div.stat-item`: 5 phút phản hồi
  - `div.customer-avatars`: Avatar khách hàng hài lòng

### Section 3: Diagnosis Wizard (`section-wizard`)
- **Wrapper:** `div.wizard-container.glass-card`
- **Content:**
  - Khung trắc nghiệm 3 bước (JS xử lý logic lấy Lead).

### Section 4: Service Grid / Post Content (`section-core-content`)
- **Dành cho Hub Page:**
  - `div.service-grid.grid-3-cols`
  - `div.query-loop` (Loop qua 13 Custom Posts Services).
    - `div.service-card.glass-card.hover-lift`
- **Dành cho Detail Page:**
  - `div.post-content.rich-text`

### Section 5: Benefits (`section-benefits`)
- **Wrapper:** `div.benefits-grid`
- **Content:** 3 thẻ Card mô tả lợi ích (Nhanh, An toàn, Tiết kiệm).

### Section 6: So sánh Dịch vụ (`section-compare`)
- **Wrapper:** `div.compare-table-wrapper`
- **Modules:** Sử dụng `compare.css`
- **Content:** Bảng so sánh "Từ Xa" vs "Tận Nơi" (Thời gian, Chi phí, Khả năng giải quyết).

### Section 7: Remote Process (`section-process`)
- **Wrapper:** `div.process-timeline`
- **Content Đặc biệt:** Nút bấm `[Tải UltraViewer tại đây]` đặt tại Bước 2.
- **Logic:**
  - Bước 1 -> Bước 2 -> Bước 3 (Chia 2 nhánh: Thành công [Thanh toán] / Thất bại [Miễn phí]).

### Section 8: Tech Stack (`section-tech-stack`)
- **Wrapper:** `div.tech-logos`
- **Content:** Logo AnyDesk, UltraViewer, TeamViewer.

### Section 9: Pricing & ROI (`section-pricing`)
- **Wrapper:** `div.pricing-wrapper`
- **Content:**
  - `div.price-card.personal`: 50.000đ/sự cố
  - `div.price-card.business`: Từ 70.000đ/máy
  - `div.roi-calculator`: Thanh trượt tính toán tiết kiệm.

### Section 9: Guarantee & VAT (`section-guarantee`)
- **Wrapper:** `div.guarantee-box.glass-panel`
- **Content:**
  - Badge: Hoàn tiền 100%
  - Image: Hóa đơn VAT đỏ (Sửa máy tính từ xa).

### Section 10: Global FAQ (`section-faq`)
- **Wrapper:** `div.accordion-wrapper`
- Tích hợp Schema JSON-LD ẩn.

### Section 11: Final CTA (`section-final-cta`)
- **Wrapper:** `div.cta-banner`
- Nút kích hoạt Fab Dock / Modal liên hệ.

## 4. GLOBAL WIDGETS (Bắt buộc có)
- `div.booking-toast-container` (Góc trái dưới)
- `div.fab-dock` (Góc phải dưới)
- `div.sticky-toc` (Mục lục bám bên trái)