# Sprint 13 — Bricks Builder Blueprint: Final CTA

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

---

## Cấu trúc Element Tree

```
Section (id: cta, class: cta-section)
└── Container (class: container)
    ├── Heading (h2, class: section-title reveal)
    │   → {acf_options:homepage_cta_title} (Vd: "Máy tính lỗi? Đã có PCTech lo!")
    │
    ├── Text (class: section-desc reveal)
    │   → {acf_options:homepage_cta_description}
    │
    ├── Div (class: cta-buttons reveal-scale)
    │   ├── Link (class: btn btn-primary)
    │   │   → "Đặt Lịch Ngay" (href: {acf_options:homepage_cta_btn_link})
    │   │
    │   └── Link (class: btn btn-outline)
    │       → "Chat với Tư Vấn" (href: {acf_options:homepage_cta_btn_2_link})
    │
    └── Link (class: cta-hotline reveal)
        → "Hotline 24/7: {acf_options:company_phone}"
        href: "tel:{acf_options:company_phone}"
```

---

## Các Floating Elements (Đã setup JS/CSS ở Sprint 0)
Sprint 13 cũng là bước để kiểm tra lại các floating UI elements đã được cấu hình trong `main.js`:
- `fab-dock.js`: Nhóm nút bấm Zalo/Mess ở góc màn hình.
- `booking-toast.js`: Thông báo popup "Có người vừa đặt lịch".
- `back-to-top.js`: Nút cuộn lên đầu trang.

## Checklist
- [ ] CSS module `cta.css` đã load.
- [ ] CTA background có gradient xanh đậm và hình tròn trang trí.
- [ ] Zalo/Messenger/Phone Z-index lớn hơn các thành phần khác.