# Sprint 15 — Bricks Builder Blueprint: Global Footer

**Áp dụng cho:** Bricks Footer Template (Conditions: Entire Website)
**CSS Module:** `footer.css` (đã enqueue)

---

## Cấu trúc Element Tree

```
Section (tag: footer, class: footer)
├── Container (class: container)
│
│   <!-- HÀNG 1: LƯỚI 4 CỘT -->
│   ├── Div (class: footer-grid)
│   │
│   │   <!-- CỘT 1: THƯƠNG HIỆU -->
│   │   ├── Div (class: footer-brand)
│   │   │   ├── Image → Logo PCTech (sẽ tự động invert màu trắng nhờ CSS)
│   │   │   └── Text (p) → {acf_options:company_description}
│   │   │
│   │   <!-- CỘT 2: MENU DỊCH VỤ -->
│   │   ├── Div
│   │   │   ├── Heading (h4) → Dịch Vụ Của Chúng Tôi
│   │   │   └── Nav Menu (WordPress Menu) → Chọn Menu "Dịch vụ"
│   │   │
│   │   <!-- CỘT 3: KHU VỰC HỖ TRỢ -->
│   │   ├── Div
│   │   │   ├── Heading (h4) → Trạm Sửa Chữa
│   │   │   └── Nav Menu (WordPress Menu) → Chọn Menu "Khu vực"
│   │   │
│   │   <!-- CỘT 4: THÔNG TIN LIÊN HỆ -->
│   │   └── Div
│   │       ├── Heading (h4) → Liên Hệ
│   │       └── List (ul)
│   │           ├── ListItem → Email: {acf_options:company_email}
│   │           ├── ListItem → Hotline: {acf_options:company_phone}
│   │           └── ListItem → {acf_options:company_address}
│   │
│   <!-- HÀNG 2: TRUST BADGES (BỘ CÔNG THƯƠNG, DMCA) -->
│   ├── Div (class: footer-trust-badges)
│   │   ├── Link (href: {acf_options:bct_link})
│   │   │   └── Image (class: bct-badge) → Logo Đã Thông Báo BCT
│   │   │
│   │   └── Link (href: {acf_options:dmca_link})
│   │       └── Image (class: dmca-badge) → Logo DMCA Protected
│   │
│   <!-- HÀNG 3: COPYRIGHT -->
│   └── Div (class: footer-bottom)
│       ├── Text → © {current_year} PCTech.vn. All rights reserved.
│       └── Text → Giấy phép ĐKKD: {acf_options:company_tax}
```

---

## Hướng dẫn 
- **Template type:** Trong Bricks Builder, hãy tạo một Template mới, chọn type là `Footer`.
- **Conditions:** Thiết lập `Entire Website` để Footer này xuất hiện trên tất cả các trang.
- CSS `footer.css` đã quản lý việc đổi màu nền tối và chữ trắng, cũng như tự động xử lý filter cho logo.
- Có thể kết hợp Nav Menu của Bricks. Nhớ tắt styling mặc định của Nav Menu trong Bricks để nó nhận CSS từ `footer.css`.

## Checklist
- [ ] CSS module `footer.css` đã load.
- [ ] Responsive hiển thị 4 cột (Desktop), 2 cột (Tablet), 1 cột (Mobile).
- [ ] Logo Bộ Công Thương và DMCA hiển thị chính giữa.