# Sprint 12 — Bricks Builder Blueprint: FAQ Accordion

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

---

## Cấu trúc Element Tree

```
Section (id: faq, class: section)
├── Container (class: container section-header text-center)
│   ├── Div (class: section-tag reveal) → "HỎI ĐÁP"
│   ├── Heading (h2, class: section-title reveal)
│   │   → "Câu hỏi <span class="accent">Thường Gặp</span>"
│   └── Text (class: section-desc reveal)
│       → "Giải đáp các thắc mắc phổ biến của khách hàng..."
│
└── Container (class: container)
    └── Div (class: bricks-accordion hoặc dùng HTML HTML/CSS structure bên dưới)

        <!-- CÁCH 1: DÙNG BRICKS NATIVE ACCORDION (Khuyên dùng) -->
        <!-- Bricks tự sinh HTML/JS, chúng ta sẽ viết CSS đè hoặc dùng structure sau nếu muốn tự viết -->
        
        <!-- CÁCH 2: DÙNG QUERY LOOP VÀ TỰ DỰNG (Nếu dùng JS riêng) -->
        ├── Div (class: faq-list)
        │   <!-- Query Loop CPT: faq -->
        │   ├── Div (class: faq-item)
        │   │   <!-- faq-q là nút bấm mở FAQ -->
        │   │   ├── Button (class: faq-q)
        │   │   │   ├── Text → {post_title}
        │   │   │   └── Div (class: arrow) → "▼"
        │   │   │
        │   │   <!-- faq-a là nội dung ẩn -->
        │   │   └── Div (class: faq-a)
        │   │       └── Text (p) → {acf:faq_answer} (Hoặc {post_content})
```

---

## Hướng dẫn 
- Bricks Builder đã có sẵn element **Accordion**. Khuyên dùng element này để tận dụng JS mở/đóng mượt mà của Bricks.
- Nếu dùng Accordion của Bricks, hãy thêm class `faq-item`, `faq-q`, `faq-a` vào các mục tương ứng trong phần setting của element Accordion (phần Custom CSS Classes) để tận dụng CSS mà em đã viết.
- **Dữ liệu**: Tạo Custom Post Type `faq`, nội dung lưu trong ACF Field `faq_answer` hoặc mặc định của WordPress Editor.

## Checklist
- [ ] CSS module `faq.css` đã load.
- [ ] Accordion mở/đóng mượt mà.
- [ ] Icon mũi tên (arrow) quay 180 độ khi mở.