# Cấu trúc layer

### 1. Mục tiêu

Giúp người thiết kế nắm bắt được cấu trúc phân cấp và mối quan hệ giữa các thành phần trên trang. Mục tiêu chính là quản lý các lớp (layers) một cách hệ thống, giúp việc chọn, di chuyển hoặc ẩn/hiện các khối nội dung lớn trở nên đơn giản và chính xác, đặc biệt là với các trang có thiết kế phức tạp.

### 2. Cách hiển thị (Dạng Cây thư mục)

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

Bảng Layer được tổ chức theo dạng Tree View, mô phỏng mối quan hệ "Cha - Con" giữa các khối:

* Thành phần Cha (Container/Module): Đóng vai trò là các nhóm nội dung lớn hoặc các khung chứa chính. Khi bạn thao tác (di chuyển, nhân bản hoặc xóa) khối cha này, tất cả các thành phần nằm bên trong nó sẽ tự động đi theo.
* Thành phần Con (Text, Button, Input,...): Đây là các yếu tố nội dung chi tiết. Trong bảng Layer, các thành phần này sẽ nằm thụt lề vào bên phải so với khối cha của chúng. Cách hiển thị này giúp bạn biết chính xác một đoạn văn bản hay nút bấm cụ thể đang thuộc về khu vực nào trên trang.

### 3. Các thao tác cơ bản

Để quản lý cây thư mục này hiệu quả, bạn có thể thực hiện:

* Chọn nhanh: Thay vì cố gắng nhấn chọn trên màn hình chính (vốn dễ bị nhầm giữa các lớp đè lên nhau), bạn có thể chọn trực tiếp tên thành phần trong bảng Layer.
* Thay đổi thứ tự: Kéo và thả các dòng trong bảng Layer để thay đổi thứ tự hiển thị (lớp nào nằm trên, lớp nào nằm dưới).
* Quản lý nhóm: Nhấn vào biểu tượng mũi tên bên cạnh Khối cha để thu gọn hoặc mở rộng danh sách các Khối con, giúp bảng Layer gọn gàng hơn khi làm việc.
* Xác định vị trí: Khi bạn chọn một thành phần trong bảng Layer, hệ thống sẽ tự động khoanh vùng thành phần đó trên màn hình chính để bạn dễ dàng nhận diện.

### 4. Lưu ý

* Tên gọi gợi nhớ: Bạn nên đặt tên cho các Khối cha (ví dụ: "Hero Section", "Form Đăng ký") để dễ dàng tìm kiếm trong cây thư mục khi trang có quá nhiều thành phần.
* Thụt lề là chìa khóa: Luôn quan sát độ thụt lề để đảm bảo bạn không đặt nhầm một thành phần con vào sai khối cha, điều này có thể làm vỡ bố cục khi bạn di chuyển các Section.
* Di chuyển an toàn: Hãy luôn di chuyển từ Khối cha nếu bạn muốn thay đổi vị trí của cả một cụm nội dung (như di chuyển cả một Form gồm nhãn, ô nhập và nút bấm).


---

# 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/layer/cau-truc-layer.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.