# Sprint 10 — Bricks Builder Blueprint: Service Areas & Partners

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

---

## Cấu trúc Element Tree

```
Section (id: areas, class: section)
├── Container (class: container text-center)
│   ├── Heading (h2, class: section-title reveal)
│   │   → "Sẵn sàng phục vụ tại <span class="accent">TP.HCM</span>"
│   └── Text (class: section-desc reveal) → "Có mặt nhanh chóng..."
│
├── Container (class: container)
│   ├── Div (class: areas-grid stagger)
│   │   <!-- Có thể dùng ACF Options Repeater: service_areas -->
│   │   ├── Div (class: area-card reveal-scale)
│   │   │   ├── Div (class: pin) → "📍"
│   │   │   ├── Heading (h4) → "Quận 1"
│   │   │   └── Text (p) → "Có mặt sau 20 phút"
│   │   │
│   │   ├── (Repeat for other areas...)
│   │
│   <!-- LOCAL SEO LINKS -->
│   └── Div (class: local-seo-grid reveal)
│       ├── Link (class: local-seo-link) → "Sửa máy tính Quận 1" (href: /sua-may-tinh-quan-1)
│       ├── Link (class: local-seo-link) → "Cài Win Quận 3" (href: /cai-win-quan-3)
│       └── (Các link Local SEO khác)
│
└── [Partners Marquee Section]
    Div (class: brands-section)
    └── Div (class: brands-marquee)
        └── Div (class: brands-track)
            <!-- Query Loop ACF Options Repeater: partner_logos -->
            ├── Div (class: brand-logo-item)
            │   └── Image → {acf_repeater:logo_image}
            <!-- Lặp lại loop lần nữa nếu cần mượt mà -->
```

---

## Checklist
- [ ] CSS module `service-areas.css` đã load.
- [ ] Responsive `areas-grid` 4 cột (Desktop) -> 2 cột (Tablet) -> 1 cột (Mobile).
- [ ] Link SEO Local được phân bổ dạng chips nằm ngang.
- [ ] Brands marquee tự động chạy ngang vô tận nhờ CSS animation `brandsTicker`.