> ## 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.

# User profile

> Hướng dẫn tùy chỉnh trang Cá nhân (User Profile): chọn bố cục, quản lý hạng thành viên, và bật/tắt các mô-đun hiển thị.

### **3.3.7. User profile**

**Bố cục**\
Người dùng có thể lựa chọn các bố cục hiển thị trang cá nhân, bao gồm: Mặc định, Cá tính, Đơn giản

<Frame caption="Bố cục trang cá nhân">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image86_fa25674407.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 -38px" 
}}
    title=""
  />
</Frame>

**Tiêu đề**

**Nền**

* Chọn màu nền cho thẻ sản phẩm bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image338_df8e386b5b.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 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái 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} />
* **Hiển thị tiêu đề:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 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 trang cá nhân. Ví dụ, nếu tiêu đề là "Cá nhân" thì sẽ hiển thị như sau:

<Frame caption="Tiêu đề trang cá nhân ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image67_2fe601f6ad.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 -38px" 
}}
    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 phần cá nhân tại

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image339_c92d6a47a5.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 -38px" 
}}
    title=""
  />
</Frame>

**Tổng quan**

**Phụ đề**

* Người dùng có thể nhập phụ đề cho trang cá nhân.

<Frame caption="Tiêu đề trang cá nhân ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image76_3436cad29e.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 -38px" 
}}
    title=""
  />
</Frame>

**Đơn hàng của tôi**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có hiển thị đơn hàng của tôi và không có hiển thị đơn hàng của tôi
  * **Hóa đơn dịch vụ**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có hiển thị hóa đơn dịch vụ và không có hiển thị hóa đơn dịch vụ

**Quản lý liệu trình**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có quản lý liệu trình và không có quản lý liệu trình
  * **Quản lý lịch hẹn**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có quản lý lịch hẹn và không có quản lý lịch hẹn
  * **Kho voucher**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có kho voucher và không có kho voucher
  * **Liên kết và hoa hồng**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có liên kết và hoa hồng và không có liên kết và hoa hồng
  * **Mini game**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có mini game và không có mini game
  * **Top up**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có top up và không có top up

**Sản phẩm yêu thích**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có sản phẩm yêu thích và không có sản phẩm yêu thích
  * **Dịch vụ yêu thích**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có dịch vụ yêu thích và không có dịch vụ yêu thích

**Quà tặng của tôi**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có quà tặng của tôi và không có quà tặng của tôi
  * **Sổ địa chỉ**
    * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có sổ địa chỉ và không có sổ địa chỉ

**Điều khoản và chính sách**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có điều khoản và chính sách và không có điều khoản và chính sách

**Link chính sách**

* Người dùng có thể điền thông tin link chính sách

**Liên hệ và góp ý**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có liên hệ và góp ý và không có liên hệ và góp ý

**Hiển thị CTA**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có CTA và không có CTA

**Hiển thị hạng thành viên**

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có hạng thành viên và không có hạng thành viên

**Hạng thành viên**

**Thêm**

* **Bước 1**: Người dùng nhấn vào nút "Thêm mới"

<Frame caption="Nút thêm mới ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image216_ad0aa0722d.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 -38px" 
}}
    title=""
  />
</Frame>

* **Bước 2:**
  * Người dùng nhập tên hạng thành viên, Chi tiêu tối thiểu để đạt hạng, Tỷ lệ khuyến mãi, Tổng tiền giảm tối đa

<Frame caption="Thêm dữ liệu ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image51_e3ca8b4675.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 -38px" 
}}
    title=""
  />
</Frame>

* **Bước 3**: Người dùng nhấn "Thêm dữ liệu" để tiến hành thêm mới hoặc nhấn "Hủy bỏ" để hủy quá trình thêm dữ liệu

**Chỉnh sửa**

* **Bước 1:** Người dùng nhấn vào nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để đến trang chỉnh sửa

<Frame caption="Nút chỉnh sửa  ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image154_7290731921.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 -38px" 
}}
    title=""
  />
</Frame>

* **Bước 2:** Người dùng nhập Tên hạng thành viên, Chi tiêu tối thiểu để đạt hạng, Tỷ lệ khuyến mãi, Tổng tiền giảm tối đa

<Frame caption="Trang chỉnh sửa dữ liệu  ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image135_ab3138c3e7.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 -38px" 
}}
    title=""
  />
</Frame>

* **Bước 3**: Người dùng nhấn "Lưu chỉnh sửa" để tiến hành chỉnh sửa hoặc nhấn "Hủy bỏ" để hủy quá trình chỉnh sửa dữ liệu

**Xóa**

* **Bước 1:** Người dùng nhấn vào nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để xóa dữ liệu

<Frame caption="Nút xóa ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image147_65956d1065.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 -38px" 
}}
    title=""
  />
</Frame>

* **Bước 2:** Tại hộp thông báo hiện lên, người dùng nhấn 'Xóa ngay" để tiến hành xóa hoặc nhấn "Hủy" để hủy quá trình xóa dữ liệu

**Chi tiết CTA**

**Lề ngoài**

* Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới CTA bằng nút

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image340_9bd718a064.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 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng điều chỉnh khoảng cách giữa lề trái và phải CTA bằng nút

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image341_17e22454c4.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 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image342_20f063ec5f.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 -38px" 
}}
    title=""
  />
</Frame>

* **Lề trong**
  * Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới giữa CTA với các thành phần bên trong CTA bằng nút

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image343_69e9158b47.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 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng điều chỉnh khoảng cách giữa lề trái và phải giữa CTA bằng nút

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image344_9075294108.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 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image345_f3000968e0.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 -38px" 
}}
    title=""
  />
</Frame>

**Nền**

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

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image346_57d7ccd2ba.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 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái 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="toggle-large-on" color="#0a06e4" 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 phần CTA tại ô nhập

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image347_ba6fcb7afd.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 -38px" 
}}
    title=""
  />
</Frame>

hoặc điềù 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/image348_c86604fb04.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 -38px" 
}}
    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 phần CTA tại ô nhập

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image349_1b93d12700.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 -38px" 
}}
    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/image350_9bc99ac1cb.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 -38px" 
}}
    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="toggle-large-on" color="#0a06e4" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của phần CTA tại ô

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image351_74f3f22a2d.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 -38px" 
}}
    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/image352_714416a5be.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 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có đổ bóng và không đổ bóng bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa đổ bóng bằng cách nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} />

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

* Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 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 phần CTA. Ví dụ, nếu tiêu đề là "Nhận thông báo các bài viết, sự kiện nổi bật" thì phần CTA sẽ như thế này

<Frame caption="Tiêu đề CTA ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image134_4d233bade4.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 -38px" 
}}
    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 phần CTA tại

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image353_2bbdba4787.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 -38px" 
}}
    title=""
  />
</Frame>

* **Hiển thị nút quan tâm:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có nút quan tâm OA và không có nút quan tâm OA
* **Hiển thị nút tạo lối tắt:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có nút tạo lối tắt và không có nút tạo lối tắt
  * **Hiển thị nút liên hệ:**
    Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có nút liên hệ và không có nút liên hệ

**Nền**

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

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image355_4b3fa5549a.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 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái 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="toggle-large-on" color="#0a06e4" 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 phần CTA tại ô nhập

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image356_c12ce8bf13.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 -38px" 
}}
    title=""
  />
</Frame>

hoặc điềù 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/image357_7c9173f845.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 -38px" 
}}
    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 phần CTA tại ô nhập

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image358_fab709c3b8.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 -38px" 
}}
    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/image359_924d0f6c0f.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 -38px" 
}}
    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="toggle-large-on" color="#0a06e4" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của phần CTA tại ô

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image360_db8ba4a71d.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 -38px" 
}}
    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/image361_3f95acc31a.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 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có đổ bóng và không đổ bóng bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa đổ bóng bằng cách nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} />

**Nút liên hệ**

* Chọn màu nền cho nút liên hệ bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image362_7fbf994e82.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 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có nút liên hệ và không có nút liên hệ bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa nút liên hệ bằng cách nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} />
* Người dùng có thể nhập số điện thoại

**Màu sắc nút liên hệ**

* Chọn màu cho nút liên hệ bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption="">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image363_9041e67ea8.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 -38px" 
}}
    title=""
  />
</Frame>
