# Sprint 7.6 — Bricks Builder Blueprint: Pricing

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

---

## Cấu trúc Element Tree

```
Section (id: pricing, class: section)
├── Container (class: container section-header text-center)
│   ├── Div (class: section-tag reveal) → "BẢNG GIÁ"
│   ├── Heading (h2, class: section-title reveal)
│   │   → "Chi phí <span class="accent">Minh Bạch — Rõ Ràng</span>"
│   └── Text (class: section-desc reveal)
│       → "Cam kết báo giá trước khi làm..."
│
└── Container (class: container)
    └── Div (class: pricing-grid stagger)
    
        <!-- QUERY LOOP TRÊN ACF OPTIONS REPEATER: pricing_packages -->
        <!-- Gợi ý cấu trúc lặp -->
        
        ├── Div (class: pricing-card reveal-scale)
        │   <!-- Nếu gói được đánh dấu "Featured" trong ACF, thêm class "featured" -->
        │   
        │   <!-- Điều kiện: Nếu là gói Featured -->
        │   ├── Div (class: price-badge) → "ĐƯỢC CHỌN NHIỀU NHẤT"
        │   
        │   ├── Heading (h3) → {acf_repeater:package_name} (vd: Gói Cơ Bản)
        │   ├── Div (class: pricing-price)
        │   │   → {acf_repeater:package_price} <small>{acf_repeater:package_unit}</small>
        │   │   (vd: 50.000đ <small>/lần</small>)
        │   │
        │   ├── List (ul, class: pricing-features)
        │   │   <!-- Có thể dùng ACF Repeater cho features, lặp thẻ <li> -->
        │   │   ├── ListItem (li) → Kiểm tra lỗi phần mềm
        │   │   ├── ListItem (li) → Cài đặt Windows từ xa
        │   │   └── ListItem (li) → Tối ưu hệ thống
        │   │
        │   └── Link (class: btn btn-primary / btn-outline)
        │       → {acf_repeater:cta_text}
        │       href: {acf_repeater:cta_link}
```

---

## Hướng dẫn ACF Fields
Để phần này tự động hóa, hãy tạo Group `Pricing` trong trang Options:
- `pricing_packages` (Repeater)
  - `package_name` (Text)
  - `package_price` (Text - VD: 150.000đ)
  - `package_unit` (Text - VD: /lần)
  - `is_featured` (True/False)
  - `features_list` (Repeater -> Text)
  - `cta_text` (Text)
  - `cta_link` (URL)

## Checklist
- [ ] CSS module `pricing.css` đã load.
- [ ] Grid 3 cột.
- [ ] Gói Featured (chính giữa) to hơn 1 chút, có badge "Được chọn nhiều nhất", có viền cam.
- [ ] Tích xanh (dấu check) ở đầu mỗi dòng feature tự động hiện nhờ CSS `li::before`.