# Đường viền, bo góc và đổ bóng
## 1. Mục tiêu
Giúp người thiết kế tinh chỉnh hình khối và tạo hiệu ứng chiều sâu cho các thành phần trên trang. Mục tiêu chính là làm cho các khối nội dung trở nên nổi bật, hiện đại và tinh tế hơn, tạo ra sự phân tách rõ rệt giữa các phần tử khác nhau trên Landing Page.
## 2. Khi nào dùng
Bạn nên sử dụng bộ công cụ này trong các kịch bản sau:
* Border Color (Đường viền): Khi bạn muốn tạo khung bao quanh cho một Form, một nút bấm hoặc các thẻ (Cards) để người dùng dễ dàng phân định khu vực nội dung.
* Radius (Bo góc): Sử dụng khi muốn giao diện trở nên mềm mại, thân thiện hơn. Bo góc nhẹ (4px-8px) cho phong cách hiện đại, hoặc bo góc tối đa (99px) cho các nút bấm hình viên thuốc.
* Shadow (Đổ bóng): Khi muốn tạo hiệu ứng "nổi" (elevation) cho các thành phần quan trọng như Form đăng ký hoặc các gói bảng giá, giúp chúng trông như đang nằm phía trên mặt trang web.
## 3. Các bước thực hiện
Để tùy chỉnh các thuộc tính này, bạn thực hiện theo trình tự sau:
* Bước 1: Chọn thành phần hoặc khối nội dung bạn muốn trang trí trên giao diện builder.
* Bước 2: Tại bảng thuộc tính bên phải, tìm đến mục Border/Shadow và thực hiện thiết lập:
* Border Color: Chọn màu sắc cho đường viền. Bạn có thể sử dụng các sắc độ xám từ nhạt (gray-50) đến đen đậm (gray-900) để làm nổi bật khối.
* Radius: Nhập giá trị số (pixel) vào ô bo góc. Số càng lớn, góc khung càng tròn.
* Shadow: Chọn mức độ đổ bóng từ thư viện có sẵn để tạo chiều sâu.
* Bước 3: Quan sát sự thay đổi trực tiếp trên vùng làm việc.
* Bước 4: Kiểm tra sự hài hòa giữa các thành phần khác nhau để đảm bảo không bị quá "nặng" về mặt thị giác.
## 4. Lưu ý
* Quy tắc phối hợp: Đừng lạm dụng cả 3 tính năng cùng lúc với cường độ mạnh. Ví dụ: Nếu đã đổ bóng đậm, hãy cân nhắc sử dụng đường viền nhạt để tổng thể trông tinh tế hơn.
* Mẹo bo góc (Radius): Để tạo hình tròn hoàn hảo (như ảnh đại diện), hãy đảm bảo khung hình là hình vuông và đặt giá trị Radius bằng 50% kích thước cạnh. Ví dụ: Khung 100x100px thì bo góc 50px.
* Tính nhất quán: Nên quy định một mức bo góc chung cho toàn bộ trang (ví dụ tất cả các nút và form đều bo 8px) để tạo sự đồng bộ chuyên nghiệp.
* Màu sắc viền: Khi sử dụng Border Color, nên ưu tiên các màu xám trung tính hoặc các màu nằm trong bộ nhận diện thương hiệu để tránh làm xao nhãng người đọc.
---
# 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/duong-vien-bo-goc-va-do-bong.md?ask=
```
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.