# Sprint 7 — Bricks Builder Blueprint: Data Recovery Section

**Áp dụng cho:** Bricks Homepage Template
**CSS Module:** `recovery.css` (đã enqueue)
**JS Module:** `before-after.js` (hoạt động tự động với class `ba-slider`)

---

## Cấu trúc Element Tree

```
Section (class: recovery)
├── [Hero Banner Cứu Dữ Liệu]
│   Div (class: recovery-hero)
│   └── Container (class: container text-center)
│       ├── Heading (h2, class: section-title reveal)
│       │   → "Cứu Dữ Liệu Chuyên Nghiệp"
│       └── Text (class: section-desc reveal)
│           → "Khôi phục dữ liệu từ mọi thiết bị lưu trữ với tỷ lệ thành công lên đến 95%."
│
├── [Showcase 2 Cột]
│   Container (class: container)
│   ├── Div (class: recovery-showcase)
│   │   ├── Div (class: recovery-showcase-img reveal-left)
│   │   │   ├── Image → Ảnh phòng lab cứu dữ liệu
│   │   │   └── Div (class: img-caption) → "Phòng Lab Đạt Chuẩn Class 100 Cleanroom"
│   │   │
│   │   └── Div (class: reveal-right)
│   │       ├── Heading (h3) → "Đừng từ bỏ dữ liệu quan trọng của bạn"
│   │       ├── Div (class: recovery-points stagger)
│   │       │   <!-- Query Loop trên ACF: service_benefits (nếu có) hoặc tĩnh -->
│   │       │   ├── Div (class: recovery-point)
│   │       │   │   ├── Icon → "🔬"
│   │       │   │   └── Div → <strong>Công nghệ hiện đại</strong> <span>Sử dụng máy PC-3000 Nga</span>
│   │       │   ├── Div (class: recovery-point)
│   │       │   │   ├── Icon → "🔒"
│   │       │   │   └── Div → <strong>Bảo mật tuyệt đối</strong> <span>Cam kết không rò rỉ dữ liệu</span>
│   │       │   └── Div (class: recovery-point)
│   │       │       ├── Icon → "💰"
│   │       │       └── Div → <strong>Không có dữ liệu - Không tính phí</strong>
│   │       │
│   │       └── Link (class: btn btn-primary) → "Nhận Tư Vấn Cứu Dữ Liệu" (href: #)
│
├── [Before / After Slider]
│   Container (class: container reveal)
│   └── Div (class: ba-slider)  <-- JS sẽ tự động bắt class này
│       ├── Div (class: ba-label before) → "Ổ cứng bị cháy board"
│       ├── Div (class: ba-label after) → "Phục hồi 100% dữ liệu"
│       ├── Image (class: ba-img) → ẢNH BEFORE (Ảnh hỏng)
│       ├── Image (class: ba-img ba-after) → ẢNH AFTER (Màn hình khôi phục)
│       └── Div (class: ba-handle)
│
├── [Recovery Gallery]
│   Container (class: container)
│   ├── Heading (h3, class: text-center) → "Các ca cứu dữ liệu thành công"
│   └── Div (class: recovery-gallery stagger)
│       <!-- Query Loop Gallery / Static -->
│       ├── Div (class: recovery-gallery-item)
│       │   ├── Image
│       │   └── Figcaption → "Cứu dữ liệu ổ cứng NAS bị mã hóa"
│       ├── (Repeat...)
│
└── [Supported Devices Grid]
    Container (class: container text-center)
    ├── Heading (h3) → "Hỗ trợ mọi thiết bị lưu trữ"
    └── Div (class: recovery-grid stagger)
        ├── Div (class: recovery-item) → Icon 💾 + <h4>Ổ cứng HDD</h4>
        ├── Div (class: recovery-item) → Icon 💽 + <h4>Ổ cứng SSD</h4>
        ├── Div (class: recovery-item) → Icon 📱 + <h4>Điện thoại</h4>
        ├── Div (class: recovery-item) → Icon 🖥️ + <h4>Máy chủ NAS/SAN</h4>
        └── Div (class: recovery-item) → Icon 🔌 + <h4>USB / Thẻ nhớ</h4>
```

---

## Checklist
- [ ] CSS module `recovery.css` đã load.
- [ ] Before/After Slider: Bắt buộc cấu trúc có class `.ba-slider`, `.ba-img`, `.ba-img.ba-after`, và `.ba-handle`. JS sẽ tự động xử lý thanh trượt.
- [ ] Đổi được ảnh Before / After dễ dàng trong Bricks.
- [ ] Responsive: Showcase chuyển sang 1 cột, Slider giảm chiều cao, Grid tự động wrap.