# Sprint 6 — Bricks Builder Blueprint: Why Choose Us Section

**Áp dụng cho:** Bricks Homepage Template
**CSS Module:** `why.css` (đã enqueue)

---

## Cấu trúc Element Tree

```
Section (id: why, class: why)
├── Container (class: container section-header text-center)
│   ├── Div (class: section-tag reveal) → "LÝ DO CHỌN CHÚNG TÔI"
│   ├── Heading (h2, class: section-title reveal)
│   │   → "Tại sao 5.000+ Khách hàng tin tưởng <span class="accent">PCTech</span>?"
│   └── Text (class: section-desc reveal)
│       → "Chúng tôi không chỉ sửa lỗi, chúng tôi mang đến sự an tâm."
│
└── Container (class: container)
    └── Div (class: why-grid stagger)
    
        <!-- QUERY LOOP CÁC LÝ DO (Hoặc Static) -->
        ├── Div (class: why-card reveal-scale)
        │   ├── Div (class: why-icon) → "⚡"
        │   ├── Heading (h3) → "Nhanh Chóng & Tiện Lợi"
        │   └── Text (p) → "Đặt lịch dễ dàng, hỗ trợ từ xa ngay lập tức hoặc có mặt tận nơi sau 30 phút."
        │
        ├── Div (class: why-card reveal-scale)
        │   ├── Div (class: why-icon) → "🛡️"
        │   ├── Heading (h3) → "Minh Bạch Chi Phí"
        │   └── Text (p) → "Báo giá rõ ràng trước khi làm. Không bao giờ phát sinh chi phí ẩn."
        │
        ├── Div (class: why-card reveal-scale)
        │   ├── Div (class: why-icon) → "🏆"
        │   ├── Heading (h3) → "Bảo Hành Tận Tâm"
        │   └── Text (p) → "Cam kết bảo hành dài hạn, hoàn tiền 100% nếu không hài lòng."
        │
        └── Div (class: why-card reveal-scale)
            ├── Div (class: why-icon) → "🤖"
            ├── Heading (h3) → "Giải Pháp Đột Phá"
            └── Text (p) → "Tích hợp AI và quy trình làm việc chuẩn quốc tế, tiết kiệm thời gian và chi phí."
```

---

## Hướng dẫn 
- **Tại sao chọn chúng tôi (Why Choose Us):** Sử dụng các Card với hiệu ứng Glassmorphism trên nền gradient màu xanh đậm.
- Các card này có thể được dựng tĩnh (static) hoàn toàn bằng Bricks elements vì thông tin này thường cố định.

## Checklist
- [ ] Section có class `why` để có background dark blue gradient.
- [ ] Section Header (Title, Tag, Desc) được căn giữa.
- [ ] Lưới `why-grid` có 4 cột trên desktop.
- [ ] Hiệu ứng hover nổi (transform translateY) và sáng viền của `why-card` hoạt động.
- [ ] Responsive: 4-col (Desktop) → 2-col (Tablet) → 1-col (Mobile).