# Màu sắc và phông nền

## 1. Mục tiêu

Giúp người thiết kế thiết lập diện mạo cho các khối nội dung thông qua màu sắc và hình ảnh. Mục tiêu chính là tạo ra sự phân tách rõ ràng giữa các Section, làm nổi bật thông điệp quan trọng và đảm bảo tính thẩm mỹ xuyên suốt cho toàn bộ trang Landing Page.

## 2. Khi nào dùng

Bạn nên sử dụng bộ công cụ Background trong các kịch bản sau:

* Phân tách nội dung: Sử dụng BG Color khác nhau giữa các Section (ví dụ: một Section trắng xen kẽ một Section xám nhạt) để người dùng dễ nhận diện sự thay đổi nội dung.
* Tạo ấn tượng thị giác: Sử dụng BG Image (hình ảnh chất lượng cao) ở phần đầu trang (Hero Section) để gây ấn tượng mạnh ngay khi khách hàng truy cập.
* Thiết kế hiệu ứng lớp: Sử dụng Opacity để tạo độ trong suốt cho các khung nội dung đè lên ảnh nền, giúp trang trông có chiều sâu và hiện đại hơn.
* Tối ưu khả năng đọc: Thay đổi Text Color ngay khi đổi màu nền để nội dung luôn nổi bật và dễ tiếp nhận.

## 3. Các bước thực hiện

Để tùy chỉnh màu sắc và nền, bạn thực hiện theo trình tự sau:

* Bước 1: Chọn thành phần hoặc Section mà bạn muốn thay đổi nền trên giao diện builder.

<figure><img src="/files/vVWI33ASHvfM4Iwe2LD1" alt=""><figcaption></figcaption></figure>

* Bước 2: Tại bảng thuộc tính bên phải, tìm đến mục Background hoặc các ô thiết lập tương ứng:
  * BG Color: Chọn ô màu để mở bảng màu. Bạn có thể chọn màu có sẵn hoặc nhập mã màu Hex.

<figure><img src="/files/e7S5BJFYn7nnznHm7qbu" alt=""><figcaption></figcaption></figure>

* BG Image: Chọn nút tải lên để chọn hình ảnh từ máy tính nếu bạn muốn dùng ảnh làm nền cho khung.

<figure><img src="/files/mirJgp9IsFrqQZF2HaDG" alt=""><figcaption></figcaption></figure>

* Text Color: Chọn màu sắc mới cho chữ bên trong khung sau khi đã hoàn tất màu nền.
* Bước 3: Chọn và kéo thanh trượt tại mục Opacity để điều chỉnh độ trong suốt của thành phần (từ 0 là hoàn toàn biến mất đến 1 là hiển thị rõ nét).
* Bước 4: Quan sát sự thay đổi và điều chỉnh lại sao cho hình ảnh nền không làm lu mờ nội dung chữ phía trên.

## 4. Lưu ý

* Quy tắc tương phản: Luôn đảm bảo Text Color và BG Color có sự tương phản tốt. Ví dụ: Chữ trắng trên nền tối hoặc chữ đen trên nền sáng để tránh gây mỏi mắt cho người đọc.
* Tối ưu hình ảnh: Khi dùng BG Image, hãy sử dụng ảnh đã được nén để trang tải nhanh hơn. Tránh dùng ảnh quá nhiều chi tiết gây rối mắt nếu có chữ đè lên trên.
* Sử dụng mã màu Hex: Để đồng bộ thương hiệu, hãy luôn sử dụng mã Hex chính xác thay vì chọn màu ngẫu nhiên trên bảng màu.
* Mẹo dùng Opacity: Khi dùng ảnh nền phức tạp, bạn có thể tạo một lớp phủ màu đen hoặc trắng phía trên ảnh và chỉnh Opacity khoảng 0.5, sau đó mới đặt chữ lên trên để chữ luôn rõ ràng.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mhiring.vn/mcms/thiet-ke-van-ban/dinh-dang-van-ban/mau-sac-va-phong-nen.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.