# Sprint 11 — Bricks Builder Blueprint: Testimonials & Reviews

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

---

## Cấu trúc Element Tree

```
Section (id: reviews, class: testimonials section)
├── Container (class: container section-header text-center)
│   ├── Div (class: section-tag reveal) → "ĐÁNH GIÁ KHÁCH HÀNG"
│   ├── Heading (h2, class: section-title reveal)
│   │   → "Hàng ngàn khách hàng đã <span class="accent">Hài Lòng</span>"
│   └── Text (class: section-desc reveal)
│       → "Chất lượng dịch vụ được kiểm chứng qua những phản hồi thực tế."
│
└── Container (class: container)
    └── Div (class: testi-grid stagger)
    
        <!-- QUERY LOOP CPT: testimonial (3 bài) -->
        ├── Div (class: testi-card reveal-scale)
        │   <!-- Bỏ qua thẻ testi-photo-wrap nếu chỉ dùng text review -->
        │   
        │   ├── Div (class: testi-body)
        │   │   ├── Div (class: testi-stars) → "★★★★★"
        │   │   ├── Text (class: testi-text) → {acf:testimonial_content}
        │   │   │
        │   │   └── Div (class: testi-author)
        │   │       ├── Div (class: testi-avatar)
        │   │       │   └── Image → {post_featured_image}
        │   │       │
        │   │       └── Div
        │   │           ├── Div (class: testi-name) → {post_title}
        │   │           └── Div (class: testi-role) → {acf:testimonial_role}
```

---

## Hướng dẫn ACF Fields
- Khuyên dùng Custom Post Type `testimonial` (Đánh giá) thay vì Repeater (Như đã thống nhất).
- Fields cần thiết:
  - `testimonial_content` (Textarea)
  - `testimonial_role` (Text - Vd: Giám đốc công ty ABC)
- Ảnh chân dung khách hàng đặt trong Featured Image của post.

## Checklist
- [ ] CSS module `testimonials.css` đã load.
- [ ] Lưới 3 cột, có avatar tròn và dấu 5 sao.
- [ ] Các card bằng nhau chiều cao kể cả khi text review dài ngắn khác nhau (nhờ flex-grow).