# Sprint 9 — Bricks Builder Blueprint: Case Studies

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

---

## Cấu trúc Element Tree

```
Section (id: cases, class: cases section)
├── Container (class: container section-header text-center)
│   ├── Div (class: section-tag reveal) → "CASE STUDY"
│   ├── Heading (h2, class: section-title reveal)
│   │   → "Những câu chuyện <span class="accent">Thành Công</span>"
│   └── Text (class: section-desc reveal)
│       → "Khám phá cách chúng tôi giải quyết các vấn đề IT hóc búa..."
│
└── Container (class: container)
    └── Div (class: cases-grid stagger)
    
        <!-- QUERY LOOP CPT: case-study (3 bài mới nhất) -->
        ├── Div (class: case-card reveal-scale)
        │   ├── Div (class: case-img)
        │   │   └── Image → {post_featured_image}
        │   │
        │   └── Div (class: case-body)
        │       ├── Div (class: case-tag) → {post_terms_case_category}
        │       ├── Heading (h3) → {post_title}
        │       ├── Text (p) → {post_excerpt}
        │       └── Div (class: case-result) → {acf:case_result_highlight}
```

---

## Hướng dẫn ACF Fields
- Nên tạo một Custom Post Type là `case-study` (Dự án/Case Study).
- Các fields khuyên dùng:
  - `case_result_highlight` (Text): Dùng để show kết quả (vd: "Khôi phục 100% dữ liệu kế toán").
- Thumbnail mặc định dùng Featured Image.
- Excerpt mặc định dùng Post Excerpt.

## Checklist
- [ ] CSS module `case-studies.css` đã load.
- [ ] Lưới 3 cột trên Desktop, 2 cột Tablet, 1 cột Mobile.
- [ ] Có hiệu ứng hover nổi card và phóng to ảnh bên trong.