# Sprint 1 — Bricks Builder Blueprint: Global Header
**Áp dụng cho:** Bricks > Templates > Header (Template Part)
**CSS Module:** `header.css` (đã enqueue qua `functions.php`)
**JS Modules:** `sticky-header.js`, `nav-drawer.js`, `pledge-sticky.js`, `theme-toggle.js`
---
## Cấu trúc Element Tree trong Bricks
```
Template Part: Header
├── Section (tag: header, id: header, class: header)
│ └── Container (class: container header-inner)
│ ├── [Logo] Link → {site_url}
│ │ └── Image → ACF Options: company_logo
│ │ fallback: /assets/logo-pctech.png
│ │ class: logo
│ │
│ ├── Nav (tag: nav, class: nav)
│ │ ├── Div (class: nav-links)
│ │ │ ├── Link → "Dịch Vụ" href: #services
│ │ │ ├── Link → "Từ Xa 50K" href: #sua-tu-xa-50k
│ │ │ ├── Link → "Bảng Giá" href: #pricing
│ │ │ ├── Link → "Về PCTech" href: #about
│ │ │ ├── Link → "Cứu Dữ Liệu" href: #recovery
│ │ │ ├── Link → "AI Agent" href: #ai
│ │ │ ├── Link → "Cửa Hàng" href: /cua-hang/
│ │ │ ├── Link → "Blog" href: /blog/
│ │ │ ├── Link → "Tra Cứu" href: #tracking
│ │ │ └── Link → "FAQ" href: #faq
│ │ │
│ │ ├── Div (class: header-actions)
│ │ │ ├── Button "🔍 Chẩn đoán"
│ │ │ │ class: btn-diagnose
│ │ │ │ data-modal-open: modalDiagnose
│ │ │ │
│ │ │ └── Button "🌙"
│ │ │ id: theme-toggle
│ │ │ class: theme-toggle
│ │ │ aria-label: "Đổi giao diện sáng/tối"
│ │ │
│ │ ├── Div (class: nav-cta)
│ │ │ └── Link "☎ Gọi Ngay"
│ │ │ href: tel:{acf_options:company_phone}
│ │ │ class: btn btn-primary
│ │ │
│ │ └── Button (hamburger)
│ │ id: nav-toggle
│ │ class: nav-toggle
│ │ aria-label: "Mở menu"
│ │ aria-expanded: false
│ │ children:
│ │
│ │
│
├── [Pledge Sticky Bar]
│ Div (id: pledge-sticky, class: pledge-sticky, aria-hidden: true)
│ ├── Span → "Không sửa thêm khi chưa đồng ý"
│ ├── Span → "Không phát sinh sau báo giá"
│ └── Span → "Không lưu trữ dữ liệu trái phép"
│
├── [Nav Overlay]
│ Div (id: nav-overlay, class: nav-overlay)
│
└── [Nav Drawer]
Nav (id: nav-drawer, class: nav-drawer, aria-label: "Menu di động")
├── Link "Trang chủ" href: #hero class: drawer-link
├── Link "Dịch Vụ" href: #services class: drawer-link
├── Link "Về PCTech" href: #about class: drawer-link
├── Link "Cứu Dữ Liệu" href: #recovery class: drawer-link
├── Link "AI Agent" href: #ai class: drawer-link
├── Link "Cửa Hàng" href: /cua-hang/ class: drawer-link
├── Link "Sửa từ xa 50K" href: #sua-tu-xa-50k class: drawer-link
├── Link "Bảng giá" href: #pricing class: drawer-link
├── Link "Blog" href: /blog/ class: drawer-link
├── Link "Tra cứu đơn" href: #tracking class: drawer-link
├── Link "FAQ" href: #faq class: drawer-link
└── Div (class: drawer-cta)
├── Link "☎ {acf_options:company_phone}"
│ href: tel:{acf_options:company_phone}
│ class: btn btn-primary
└── Link "💬 Chat Zalo"
href: https://zalo.me/{acf_options:company_phone}
class: btn btn-outline
target: _blank
```
---
## Hướng dẫn từng bước trong Bricks Editor
### Bước 1: Tạo Template Part
1. **Bricks > Templates > Add New**
2. Template Type: **Header**
3. Template Name: `PCTech Header v2`
4. Conditions: **Entire Website**
### Bước 2: Tạo Section (header tag)
1. Thêm **Section** element
2. **Tag:** `header`
3. **HTML ID:** `header`
4. **CSS Classes:** `header`
5. Style > Layout: **không cần** (CSS module tự xử lý)
### Bước 3: Container bên trong
1. Thêm **Container** bên trong Section
2. **CSS Classes:** `container header-inner`
3. Layout > Direction: Row | Align: Center | Justify: Space Between
### Bước 4: Logo
1. Thêm **Link** element → URL: `{site_url}`
2. **CSS Classes:** `logo`
3. Bên trong Link, thêm **Image** → Dynamic: `{acf_options:company_logo}`
4. Fallback: upload `logo-pctech.png`
### Bước 5: Nav Links (Desktop)
1. Thêm **Div** → class: `nav`
2. Bên trong, thêm **Div** → class: `nav-links`
3. Thêm 10 **Link** elements (Dịch Vụ, Từ Xa 50K, ...)
4. Mỗi link href là anchor (#services, #pricing, etc.)
### Bước 6: Header Actions
1. Trong `.nav`, thêm **Div** → class: `header-actions`
2. Thêm **Button** "🔍 Chẩn đoán" → class: `btn-diagnose`
3. **Custom Attribute:** `data-modal-open` = `modalDiagnose`
4. Thêm **Button** "🌙" → id: `theme-toggle`, class: `theme-toggle`
### Bước 7: Nav CTA
1. Thêm **Div** → class: `nav-cta`
2. Thêm **Link** "☎ Gọi Ngay"
3. href: `tel:{acf_options:company_phone}` (Dynamic Data)
4. class: `btn btn-primary`
### Bước 8: Hamburger Toggle
1. Thêm **Div** element (dùng Custom HTML hoặc Rich Text)
2. id: `nav-toggle`, class: `nav-toggle`
3. HTML: ``
4. Hoặc dùng Bricks **Code** element
### Bước 9: Pledge Sticky Bar
1. **Ngoài** Section header, thêm **Div**
2. id: `pledge-sticky`, class: `pledge-sticky`
3. Attribute: `aria-hidden` = `true`
4. 3 **Text** elements bên trong (3 cam kết)
### Bước 10: Nav Overlay + Drawer
1. Thêm **Div** → id: `nav-overlay`, class: `nav-overlay`
2. Thêm **Div** (tag: `nav`) → id: `nav-drawer`, class: `nav-drawer`
3. Attribute: `aria-label` = `Menu di động`
4. 11 **Link** elements → class: `drawer-link`
5. **Div** `drawer-cta` chứa 2 buttons
---
## ACF Options Fields cần có
| Field | Key | Type | Ghi chú |
|---|---|---|---|
| Logo | `company_logo` | Image | Upload trong Options page |
| Phone | `company_phone` | Text | `0936102287` |
| Zalo | `company_zalo` | URL | `https://zalo.me/0936102287` |
---
## Checklist kiểm tra
- [ ] Header fixed top, glassmorphism blur
- [ ] Scroll → thêm class `scrolled` (đậm hơn, có shadow)
- [ ] Logo link về homepage
- [ ] 10 nav links hiện trên desktop, ẩn trên tablet/mobile
- [ ] Hamburger hiện trên ≤ 1024px
- [ ] Click hamburger → drawer slide-in từ phải
- [ ] Drawer overlay ẩn khi click
- [ ] ESC đóng drawer
- [ ] "Cam kết 3 Không" bar hiện khi scroll qua Hero
- [ ] Theme toggle (🌙/☀️) hoạt động
- [ ] "🔍 Chẩn đoán" mở modal (khi có modalDiagnose)
- [ ] "☎ Gọi Ngay" link điện thoại đúng
- [ ] Responsive: desktop / tablet / mobile
- [ ] Logo không bị crop trên mobile