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

# Flashsale

> Hướng dẫn quản lý dữ liệu (thêm, sửa, xóa) và tùy chỉnh phong cách cho component FlashSale.

### **4.2.7. FlashSale**

**Dữ liệu**

* **Thêm dữ liệu mới:**

<Steps>
  <Step title="Thêm dữ liệu mới cho FlashSale">
    Người dùng nhấn vào nút **“Thêm dữ liệu mới”**.

    <Frame caption="Nút thêm dữ liệu mới">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image145_2567539437.png"
        alt="Nút thêm dữ liệu mới cho FlashSale trong giao diện quản lý"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút thêm dữ liệu mới"
      />
    </Frame>
  </Step>

  <Step title="Nhập thông tin FlashSale và chọn ảnh">
    Người dùng nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”**, sau đó nhập **tiêu đề FlashSale**.

    <Frame caption="Thêm dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image155_f5334e8e57.png"
        alt="Giao diện thêm dữ liệu FlashSale và nhập tiêu đề"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Thêm dữ liệu FlashSale"
      />
    </Frame>
  </Step>

  <Step title="Hoàn tất hoặc hủy thao tác thêm dữ liệu">
    Người dùng nhấn **“Thêm dữ liệu”** để tiến hành thêm tiêu đề và hình ảnh cho FlashSale, hoặc nhấn **“Hủy bỏ”** để hủy quá trình thêm dữ liệu.
  </Step>
</Steps>

* **Chỉnh sửa:**

<Steps>
  <Step title="Mở trang chỉnh sửa FlashSale">
    Người dùng nhấn vào nút <Icon icon="pencil" color="#cfcfcf" size={15} /> để **đến trang chỉnh sửa chương trình FlashSale**.

    <Frame caption="Nút chỉnh sửa">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image111_d570a45bee.png"
        alt="Nút chỉnh sửa FlashSale trong giao diện quản lý"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút chỉnh sửa FlashSale"
      />
    </Frame>
  </Step>

  <Step title="Chỉnh sửa thông tin và hình ảnh FlashSale">
    Người dùng nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”** và nhập **tiêu đề chương trình FlashSale**.

    <Frame caption="Chỉnh sửa dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image178_35cf75f28c.png"
        alt="Giao diện chỉnh sửa thông tin và hình ảnh FlashSale"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Chỉnh sửa dữ liệu FlashSale"
      />
    </Frame>
  </Step>

  <Step title="Lưu hoặc hủy thao tác chỉnh sửa">
    Người dùng nhấn **“Lưu chỉnh sửa”** để hoàn tất cập nhật thông tin FlashSale, hoặc nhấn **“Hủy bỏ”** để hủy quá trình chỉnh sửa dữ liệu.
  </Step>
</Steps>

* **Xóa:**

<Steps>
  <Step title="Xóa sản phẩm khỏi FlashSale">
    Người dùng nhấn vào nút <Icon icon="minus" color="#cfcfcf" size={15} /> để **xóa dữ liệu sản phẩm** khỏi chương trình FlashSale.

    <Frame caption="Nút xóa dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image112_cd35ffc2fb.png"
        alt="Nút xóa sản phẩm khỏi chương trình FlashSale trong giao diện quản lý"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút xóa dữ liệu FlashSale"
      />
    </Frame>
  </Step>

  <Step title="Xác nhận thao tác xóa">
    Khi hộp thông báo xuất hiện, người dùng nhấn **“Xóa ngay”** để **tiến hành xóa sản phẩm khỏi FlashSale**, hoặc nhấn **“Hủy”** để **dừng quá trình xóa dữ liệu**.

    <Frame caption="Hộp xác nhận xóa dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image104_1ba4757e62.png"
        alt="Hộp xác nhận thao tác xóa sản phẩm khỏi FlashSale"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Xác nhận xóa dữ liệu FlashSale"
      />
    </Frame>
  </Step>
</Steps>

**Tổng quan**

* **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 sản phẩm. Ví dụ, nếu tiêu đề là "FLASH SALE TRONG NGÀY" thì phần flashsale sẽ như thế này

<Frame caption="Tiêu đề sản phẩm">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image158_131887ac4e.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 sản phẩm tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image460_6a756c61f1.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ị phụ đề:**
  * 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ó phụ đề và không có phụ đề, ngoài ra người dùng có thể nhập phụ đề cho phần sản phẩm. Ví dụ, nếu phụ đề là "Xem tất cả" thì phần sản phẩm sẽ như thế này

<Frame caption="Phụ đề sản phầm">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image98_b161364914.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 sản phẩm tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image461_33faceab82.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ộ đếm giờ**

* **Hiển thị bộ đếm giờ:** 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ó bộ đếm giờ và không có bộ đếm giờ.
* **Nền**
  * Chọn màu nền cho các thẻ bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image462_9fc3e3aadb.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} />
* **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 các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image463_c5bbf69a6f.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/image464_8c287444ed.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 các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image465_c2c868c35f.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/image466_65338c1cbf.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="minus" color="#cfcfcf" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của các thẻ tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image467_91eb9f6c9a.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/image468_3e083ab3cd.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="minus" color="#cfcfcf" size={15} />
* **Kích thước/ Màu sắc (Thời gian):** Người dùng có thể điều chỉnh kích thước và màu sắc cho thời gian flashsale tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image469_061db1195c.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ày, giờ, phút, giây):** Người dùng có thể điều chỉnh kích thước và màu sắc cho ngày, giờ, phút, giây của flashsale tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image470_9eacd532a6.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ị 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 flashsale. Ví dụ, nếu tiêu đề là "Ưu đãi chỉ còn" thì phần flashsale sẽ như thế này

<Frame caption="Tiêu đề Flashsale">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image205_f1a2e691d8.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>

* **Link phụ đề khi nhấn:** Người dùng có thể chọn liên kết để khi click vào phụ đề, ứng dụng sẽ chuyển hướng đến liên kết đó tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image471_e686c605b9.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>

**Danh sách thẻ**

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

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image472_5f8128f825.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 các thẻ với các thẻ khác bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image473_09523ef95e.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/image474_953130ac63.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 lề các thẻ bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image475_f7aeca1b18.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 lề các thẻ bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image476_7379ecd00d.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/image477_ae8663a839.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 các thẻ bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image478_821ff1ee0d.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} />
* **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 các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image479_d0c4a63f7e.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/image480_908aae6199.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 các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image481_6ad38e6282.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/image482_43dc2f87eb.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="minus" color="#cfcfcf" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của các thẻ tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image483_b1a321d908.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/image481_6ad38e6282.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="minus" color="#cfcfcf" size={15} />
* **Khoảng cách giữa phần tử** Người dùng có thể nhập hoặc tăng/giảm khoảng cách của phần danh sách sản phẩm tại ô nhập

**Thẻ sản phẩm**

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

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image486_5a03602632.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 các thẻ với các thẻ khác bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image487_bdb9e62773.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/image488_676cb7fa0a.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 lề các thẻ bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image489_74ef519774.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 lề các thẻ bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image490_1ebdf74714.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/image491_57e02e2cbe.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** Người dùng có thể chọn hoặc tăng/giảm kích thước của các thẻ sản phẩm tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image492_7b76511134.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>

* **Kiểu hình ảnh** Người dùng có thể chọn kiểu hình ảnh các thẻ sản phẩm tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image493_2e8b980b98.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 các thẻ bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image494_33deb886bd.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} />
* **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 các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image496_c22f3c8db6.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/image497_057c35d004.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 các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image498_25be7ebd89.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/image499_31bcf8e8ce.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="minus" color="#cfcfcf" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của các thẻ tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image500_dbf1405406.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/image501_a01b52cf7b.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="minus" color="#cfcfcf" size={15} />
* **Hiển thị tên sản phẩ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ó tên sản phẩm và không có tên sản phẩm
* **Hiển thị danh mục:**
  * 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ó danh mục và không có danh mục
* **Hiển thị giá tiề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 hiển thị giá tiền và ẩn
* **Hiển thị giá giảm:**
  * Người dùng chọn hiển thị giá giảm theo phần trăm hay giá gốc

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image502_ad240ed58a.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>

* **Sản phẩm Sale:**
  * 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 sale và không có sản phẩm sale
* **Hiển thị nhãn:**
  * Người dùng chọn không hiển thị nhãn hoặc chọn hiển thị nhãn flashsale, bán chạy, mới nhất.

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image503_a7a1624f73.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ị 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ó nút yêu thích và không có nút yêu thích
* **Hiển thị đánh giá:**
  * 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ố sao đánh giá và không có số sao đánh giá
* **Hiển thị số lượng 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ố lượng yêu thích và không có số lượng yêu thích
* **Hiển thị số lượng đã bá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ó số lượng đã bán và không có số lượng đã bán
* **Hiển thị nút giỏ 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ó nút thêm vào giỏ hàng và không có nút thêm vào giỏ hàng

**Kiểu nút giỏ hàng:** Người dùng có thể chọn chuyển đổi hiển thị giỏ hàng giữa icon hoặc button

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image504_cb176069b9.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>

***
