# Sprint 5 — Bricks Builder Blueprint: About & Team Section

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

---

## Cấu trúc Element Tree

```
Section (id: about, class: section)
└── Container (class: container about-grid)
    
    <!-- CỘT 1: HÌNH ẢNH (BÊN TRÁI) -->
    ├── Div (class: about-img-wrap reveal-left)
    │   ├── Image → {acf_options:about_image} hoặc ảnh static đội ngũ PCTech
    │   └── Div (class: about-img-badge)
    │       → "🏆 10+ Năm Kinh Nghiệm"
    │
    <!-- CỘT 2: NỘI DUNG (BÊN PHẢI) -->
    └── Div (class: about-content)
        ├── Div (class: section-tag reveal) → "VỀ PCTECH"
        ├── Heading (h2, class: section-title reveal)
        │   → "Hơn cả một dịch vụ sửa chữa, <br>chúng tôi là <span class="accent">Đối Tác IT của bạn</span>"
        ├── Text (class: reveal)
        │   → "PCTechComVn tự hào mang đến các giải pháp CNTT toàn diện..."
        │
        <!-- DANH SÁCH TÍNH NĂNG / ƯU ĐIỂM -->
        └── Div (class: about-features stagger reveal)
            ├── Div (class: about-feat)
            │   ├── Div (class: icon) → "👨‍🔧" (Dùng icon svg hoặc emoji)
            │   └── Div
            │       ├── Text (strong) → "Đội ngũ chuyên nghiệp"
            │       └── Text (span) → "100% KTV có chứng chỉ, giàu kinh nghiệm"
            │
            ├── Div (class: about-feat)
            │   ├── Div (class: icon) → "⏱️"
            │   └── Div
            │       ├── Text (strong) → "Tốc độ phản hồi nhanh"
            │       └── Text (span) → "Có mặt sau 30 phút trong nội thành"
            │
            ├── Div (class: about-feat)
            │   ├── Div (class: icon) → "🔒"
            │   └── Div
            │       ├── Text (strong) → "Bảo mật dữ liệu tuyệt đối"
            │       └── Text (span) → "Cam kết không sao chép dữ liệu khách hàng"
            │
            └── Div (class: about-feat)
            │   ├── Div (class: icon) → "💡"
            │   └── Div
            │       ├── Text (strong) → "Giải pháp AI tiên tiến"
            │       └── Text (span) → "Ứng dụng AI giúp tối ưu chi phí vận hành"
```

---

## ACF Fields (Gợi ý)
- Có thể dùng Global Options (ACF) để điền các text này, hoặc hardcode trực tiếp vào Bricks Builder nếu team marketing ít thay đổi nội dung phần "Về Chúng Tôi" trên trang chủ.

## Checklist
- [ ] Section ID là `about` để Navigation menu anchor link đến đúng vị trí.
- [ ] Cấu trúc Grid 2 cột: Cột ảnh (trái) và Cột nội dung (phải).
- [ ] Hình ảnh có badge nổi bật ở góc trái dưới.
- [ ] Phần features có cấu trúc 2 cột trên desktop, 1 cột trên mobile.
- [ ] Responsive: Tablet/Mobile (Hình ảnh xếp trên nội dung).
- [ ] Hiệu ứng scroll-reveal hoạt động.