# Sprint 4 — Bricks Builder Blueprint: Services Bento Grid

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

---

## Cấu trúc Element Tree

```
Section (id: services, class: services)
├── Container (class: container section-header)
│   ├── Div (class: section-tag reveal) → "WE SAVE YOUR DATA"
│   ├── Heading (h2, class: section-title reveal)
│   │   → "Dịch vụ <span class="accent">Nhanh Gọn — Chuyên Sâu</span>"
│   └── Text (class: section-desc reveal)
│       → "Đội ngũ chuyên gia..."
│
├── Container (class: container)
│   └── Div (class: services-bento stagger)
│
│       <!-- THẺ ĐẶC BIỆT (FEATURED REMOTE) -->
│       ├── Div (class: service-remote-featured reveal-scale)
│       │   ├── Div (class: badge-online) → "Đang online"
│       │   ├── Div (class: service-icon) → "🌐"
│       │   ├── Div (class: service-price-tag) → "50.000đ"
│       │   ├── Heading (h3) → "Sửa máy tính từ xa"
│       │   ├── Text (p) → "Sửa qua UltraViewer..."
│       │   └── Link (class: service-link) → "Yêu cầu ngay →"
│       │       href: #sua-tu-xa-50k
│       │       data-modal-open: modalRemote
│       │
│       <!-- QUERY LOOP CÁC DỊCH VỤ CÒN LẠI -->
│       └── Query Loop on CPT: Service
│           (Exclude post "Sửa máy tính từ xa" nếu cần, order by menu_order)
│           ├── Div (class: service-card card-hover reveal)
│           │   (Dynamic class: thêm 'ai' nếu là dịch vụ AI - dùng code hoặc condition)
│           │   ├── Div (class: service-icon) → {acf:service_icon}
│           │   ├── Heading (h3) → {post_title}
│           │   ├── Text (p) → {acf:service_short_description}
│           │   └── Link (class: service-link) → "Xem chi tiết →"
│           │       href: {post_url}
│
├── [Highlight Band]
│   Div (class: highlight-band)
│   └── Container (class: container highlight-band-inner)
│       ├── Div (class: highlight-item) → <div class="hi-icon">⚡</div> Có mặt sau 30 phút
│       ├── Div (class: highlight-item) → <div class="hi-icon">🛡️</div> Bảo hành minh bạch
│       └── Div (class: highlight-item) → <div class="hi-icon">😊</div> Kỹ thuật viên thân thiện
│
└── [Partners Marquee]
    Div (class: partners-strip)
    └── Div (class: partners-track)
        └── Query Loop on ACF Options Repeater: partner_logos
            ├── Div (class: partner-logo)
            │   → Dynamic image {acf_repeater:logo_image}
            │   (Duplicate loop để tạo seamless marquee)
```

---

## Hướng dẫn dựng Query Loop Dịch vụ

1. **Card Featured (Thẻ lớn 2x2)**:
   - Dựng tĩnh (static) hoặc Query riêng ra 1 post cụ thể.
   - Bắt buộc phải có class `service-remote-featured`.

2. **Các thẻ nhỏ (Grid)**:
   - Add **Query Loop** vào Div `service-card`.
   - Post Type: `Dịch vụ CNTT` (`service`).
   - Limits: 6 (tùy số lượng).
   - Order by: Menu Order (để dễ xếp vị trí).

## ACF Fields
- `service_icon` (Text / Emoji)
- `service_short_description` (Textarea)
- Options: `partner_logos` (Repeater chứa images)

## Checklist
- [ ] Section có class `services` để hiện background pattern.
- [ ] Bento layout hiển thị đúng (1 thẻ to 2x2, các thẻ còn lại 1x1).
- [ ] Hover vào thẻ nhỏ hiện viền gradient trên cùng (`::before`).
- [ ] Nháy sáng chạy liên tục quanh thẻ Featured (`::after` + `glowRotate`).
- [ ] Nút "Yêu cầu ngay" mở popup (khi đã làm hệ thống modal).
- [ ] Responsive: Tablet (2 cột) → Mobile (1 cột).
- [ ] Highlight band có luồng sáng lướt qua (animation `bandShine`).
- [ ] Partners Marquee tự động cuộn ngang vô tận.