## Ghi chú thiết kế (Design Notes)

Để giảm thiểu việc phải tùy chỉnh lại (overrides) các style của theme Flatsome và tối ưu hóa tốc độ triển khai, vui lòng lưu ý các điểm sau:

#### **Headline:**
- **Nên** Follow headline size và đúng thứ tự 3 headline từ trên xuống mỗi trang
- **Hạn chế** Để trang không có headline hay headline đầu tiền h1 nhưng size lại qua nhỏ hay headline ở dưới lại lớn hơn headline ở trên. Ví dụ: Headline 1 ở hero section size 2 rem còn headline các section khác lại 3 rem.
- **Tham khảo**:
+ https://www.nomensa.com/blog/how-structure-headings-web-accessibility/
+ https://www.telerik.com/blogs/design-formatting-tips-website-titles-headings

#### **Elements:**
- **Ưu tiên** sử dụng [Flatsome UX Block](https://demos.flatsome.com/elements/).
- **Hạn chế** việc cố định (fixed) các element khi cuộn trang, trừ trường hợp header và footer. Ví dụ: banner left [trang này](https://ibb.co/w0jMDNR)

#### **Grid:**
- **Ưu tiên** sử dụng grid sẵn có của Flatsome ([Rows & Columns](https://demos.flatsome.com/elements/rows-columns/)).
+ Chia tỉ lệ cột hợp lý: cấu trúc 12 cột theo nhiều cách khác nhau (ví dụ: 1-11, 2-10, 3-9, 4-8, 6-6, 4-4-4,…). Thiết kế chia cột 12 này linh hoạt và dễ dàng chuyển đổi khi sang các kích thước màn hình khác nhau.
+ Responsive: với màn hình nhỏ như điện thoại, thông thường các cột sẽ tự động xếp chồng lên nhau (stack) theo thứ tự từ trên xuống dưới.
- **Hạn chế** chia cột với nhiều logic (chiều rộng tối đa X, chiều rộng tối đa XX), ví dụ như layout "Dịch chuyển đôi bát A". Ví dụ:

- **Tránh** thiết kế quá flexible, như "Dịch chuyển đôi bát B" (hình ảnh hai cô gái sát cạnh video, nhưng vẫn cần điều chỉnh để responsive). Ví dụ: [như thế này](https://ibb.co/BqKfPht)

#### **Buttons:**
- **Ưu tiên** sử dụng style [nút có sẵn của Flatsome](https://demos.flatsome.com/elements/buttons/). Ví dụ: 

- **Hạn chế** dùng hình ảnh làm nền cho button. Ví dụ: 

- **Hạn chế** sử dụng nền gradient cho button. Ví dụ:

- **Giảm thiểu** sử dụng hiệu ứng hoặc animation không cần thiết cho CTA. Ví dụ: [như thế này](https://jmp.sh/s/hk4G96rjaWPLX9vhuGXF)
- **Hạn chế** thêm icon vào bên trong button, nếu không cần thiết. Hay fixed icon trong hình nền button Ví dụ: 
(khó khăn trong việc đảm bảo responsive)

#### **Responsive:**
- **Sử dụng** khả năng responsive mặc định cho các element của Flatsome đối với tablet và mobile. Tham khảo [Flatsome UX Block](https://demos.flatsome.com/elements/)
- **Hạn chế** thiết kế riêng cho desktop, và mobile khác với responsive style mặc định của theme, nếu được hãy dùng sẵn các element của Flatsome. Tuy nhiên, hãy dành thời gian để tối ưu thiết kế cho bản mobile nếu nó không thể hiện đủ thông tin và thân thiện như mong muốn.

#### **Color:**
- **Định nghĩa** trước các màu chính và phụ để cấu hình trong phần theme options. Gồm 4 phần sau:
1. Main 

2. Type 

3. Links 

4. Tooltip 

- **Hạn chế** sử dụng gradient cho các element không phải là text hoặc button.
- **Tránh** lạm dụng hiệu ứng opacity quá nhiều, phải custom vì theme options chỉ cho chọn màu và set value đồng bộ. Ví dụ: divider này 

#### **Spacing:**
- **Ưu tiên** dùng các thông số mặc định của Flatsome cho section, row và column để thiết lập khoảng cách.
- **Thông số cụ thể** cho section:
- Margin: `0`
- Padding top: `30px`
- Padding bottom: `30px`
- **Thông số cụ thể** cho row:
- Margin: `0`
- Padding: `0`
- **Thông số cụ thể** cho column:
- Margin: `0`
- Padding 3 bên right và left: `15px`
- Padding bottom: `30px`
- **Hạn chế** sử dụng các khoảng cách tùy chỉnh khác biệt giữa các section.

Những lưu ý này sẽ giúp duy trì sự nhất quán trong thiết kế và tối ưu hóa quy trình phát triển dựa trên theme Flatsome mà không phải tùy chỉnh quá nhiều.