> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appminis.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Home

> Hướng dẫn tùy chỉnh Header trang Home, bao gồm chọn mẫu, cài đặt lề, phong cách, tiêu đề, và thanh tìm kiếm.

### **3.3.1. Home**

**Các mẫu Header**\
Người dùng nhấn nút “**Xem thêm**” để có thể chọn mẫu Header phù hợp

<Frame caption="Nút xem thêm">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image129_3326f12a1f.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Khoảng cách**

* **Lề ngoài**
  * Người dùng muốn **chỉnh khoảng cách trên – dưới** giữa phần tử và các phần khác trên trang nhấn nút.

<Frame caption="Nút chỉnh khoảng cách trên – dưới">
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image234_png_cca9fd3cc8.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Người dùng muốn **chỉnh khoảng cách trái – phải** của phần tử nhấn nút.

<Frame caption="Nút chỉnh khoảng cách trái – phải">
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image236_png_92e8515602.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Nếu muốn **chỉnh riêng từng bên trái hoặc phải** ,**chỉnh riêng lề trên hoặc lề dưới**, nhấn nút.

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image235_png_b3c78e06e7.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* **Lề trong**
  * Người dùng muốn **chỉnh khoảng cách trên – dưới** giữa nội dung bên trong phần tử và viền của phần tử nhấn nút.

<Frame caption="Nút chỉnh khoảng cách trên – dưới">
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image237_png_09add43703.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Người dùng muốn **chỉnh khoảng cách trái – phải** bên trong phần tử nhấn nút.

<Frame caption="Nút chỉnh khoảng cách trái – phải">
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image238_png_bbf59909ab.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Nếu muốn **chỉnh riêng từng bên trái hoặc phải** ,**chỉnh riêng lề trên hoặc lề dưới**, nhấn nút.

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image239_png_450c6efde7.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

**Phong cách**

* **Nền**
  * Chọn màu nền cho header bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image240_png_bfd8c60325.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Bật/tắt có màu nền và không có màu nền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa màu nền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Bo góc**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của header tại ô nhập

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image241_png_062857766a.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

hoặc điều chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image246_ec162154ef.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* **Viền**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của header tại ô nhập

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image242_png_ca6d14aa1f.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image243_png_354238ad7d.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa viền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của header tại ô

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image244_png_3536016fb9.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img src="https://aimini-upload.sgp1.digitaloceanspaces.com/image245_png_018232cd8b.png" alt="Screenshot of a deployment confirmation message that says All checks have passed." style={{ borderRadius:"0.5rem" }} title="" />
</Frame>

* Nhấn biểu tượng <Icon icon="eye" color="#cfcfcf" size={15} /> để ẩn hoặc hiển thị hiệu ứng bóng.
* Xóa đồ bóng bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />

**Hiển thị tiêu đề:**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt trạng thái có tiêu đề và không có tiêu đề, ngoài ra người dùng có thể nhập tiêu đề cho header. Ví dụ, nếu tiêu đề là "**Xin chào**" thì sẽ như thế này

<Frame caption="Tiêu đề header">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image88_99772ecfa8.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Kích thước/ Màu sắc:**
  * Người dùng có thể điều chỉnh kích thước và màu sắc cho tiêu đề của header tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image247_d65c8c9f28.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Hiển thị phụ đề:**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt có phụ đề và không có phụ đề, ngoài ra người dùng có thể nhập phụ đề cho header. Ví dụ, nếu tiêu đề là "**Ngày mới tốt lành 👋**" thì sẽ như thế này

<Frame caption="Phụ đề header">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image221_8acdfaedd4.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Kích thước/ Màu sắc:**
  * Người dùng có thể điều chỉnh kích thước và màu sắc cho phụ đề của header tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image248_ec7e664c78.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

* **Hiển thị biểu tượng**
  * Người dùng gạt nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt tính năng **Logo, Giỏ hàng, Tin nhắn, Tìm kiếm, Thông báo**.

**Trang tìm kiếm:** Người dùng thể chọn phạm vi tìm kiếm như **Sản phẩm** hoặc **Dịch vụ** trong phần tùy chọn.

<Frame caption="Điều chỉnh tùy chọn trang tìm kiếm">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image102_c0beb86e26.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>

**Thanh tìm kiếm**

**Hiển thị thanh tìm kiếm:**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để bật/tắt có thanh tìm kiếm và không có thanh tìm kiếm, ngoài ra người dùng có thể nhập nội dung tùy chỉnh. Ví dụ, nếu nội dung tùy chỉnh là "**Bạn đang cần gì**?" thì sẽ như thế này

<Frame caption="Thanh tìm kiếm">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image87_32421d153c.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -40px" 
}}
    title=""
  />
</Frame>