> For the complete documentation index, see [llms.txt](https://huongdan.cnvcdp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://huongdan.cnvcdp.com/tinh-nang/dynamicaction/thiet-lap-dynamicaction/thanh-phan-component/dan-trang.md).

# Dàn trang

### 2.1. Block

Block là khối để chứa các thành phần khác bên trong.

**Mục đích sử dụng Block (khối):**

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

:thumbsup:Gom nhóm các thành phần với nhau và phân tách giữa các nhóm thành phần: Admin tạo Block; trong mỗi Block, admin có thể thêm các thành phần từ 6 nhóm đã đề cập. Các Block được ngăn cách bằng khoảng trống để tạo ra sự phân chia rõ ràng, giúp giao diện trở nên dễ nhìn, thẩm mỹ và dễ quản lý hơn.

<figure><img src="/files/8v4xYSEokfzDuJJl3wKZ" alt=""><figcaption></figcaption></figure>

:thumbsup:Điều chỉnh khoảng cách của Block so với lề: Khi thêm Block, admin có thể điều chỉnh khoảng cách của các Block so với hai lề bằng cách cài đặt kích thước hiển thị.

**Có hai cách trình bày khối Block**

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

:thumbsup:**Đồng cấp:** Các khối cùng cấp bậc với nhau. Giữa các Block đồng cấp sẽ có không gian phân cách. Muốn tạo đồng cấp thì chuột máy tính phải đang chọn mục Header hoặc Cài đặt.

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

:thumbsup:Mẹ con: Block được phân cấp mẹ con khi đang trong 1 Block, admin tiến hành thêm 1 Block khác. Block con sẽ thụt trong một khoảng cách nhất định so với Block mẹ. Muốn tạo Block con trong Block mẹ thì chuột máy tính phải đang chọn Block mẹ.

**Cài đặt thông số**

<figure><img src="/files/22Ymjghr5y1tv7XXvQKd" alt=""><figcaption></figcaption></figure>

* **\[1] Kích thước hiển thị:**
  * 100%: lề Block sát với hai lề điện thoại
  * Trong lề: lề Block thụt vào trong một khoảng nhất định so với hai lề điện thoại
  * Tùy chỉnh: admin có thể tùy chỉnh khoảng cách giữa lề Block và hai lề điện thoại
* **Style:**
  * \[2] Màu chủ đạo: Màu nền của Block
  * \[3] Text trên màu chủ đạo: Màu chữ của các thành phần trong Block
  * \[4] Radius: tùy chỉnh độ bo góc của Block

### 2.2. Đường

Tương tự như Block, đường sẽ tạo ra một đường kẻ (dòng kẻ) ở giữa hai thành phần. Đường được dùng với mục đích phân chia các thành phần thành các nhóm riêng biệt tùy theo mục đích trình bày trang. Sự sắp xếp này giúp tạo ra một bố cục rõ ràng và có tổ chức, làm nổi bật các phần quan trọng. Qua đó, chúng ta có thể dẫn dắt mắt người đọc qua từng phần của trang DynamicAction một cách hợp lý.

**Cài đặt thông số**

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

* Kích thước: độ dày của đường kẻ. Có 3 loại kích cỡ: nhỏ, vừa và lớn. Kích thước của đường ảnh hưởng sự phân tách giữa các nhóm thành phần. Kích thước của đường càng lớn thì sự phân biệt giữa các nhóm thành phần càng tăng.
* Màu sắc: cài đặt màu sắc cho đường kẻ.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://huongdan.cnvcdp.com/tinh-nang/dynamicaction/thiet-lap-dynamicaction/thanh-phan-component/dan-trang.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.