> ## 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. # Booking > Hướng dẫn cài đặt component Booking: quản lý danh mục dịch vụ, chọn bố cục, và tùy chỉnh thẻ dịch vụ. ### **3.3.4. Booking** **Bố cục**\ Người dùng có thể lựa chọn các bố cục hiển thị **dịch vụ**, bao gồm: **Bố cục dọc**, **Bố cục ngang**, **Trượt ngang**, **Tab danh mục**, **Danh sách dịch vụ**, **Nhóm danh mục**. Các kiểu bố cục hiển thị Booking: dọc, ngang, trượt ngang, tab danh mục, danh sách, nhóm danh mục **Dữ liệu** **Thêm dữ liệu mới** Người dùng nhấn vào nút **"Thêm dữ liệu mới"** để bắt đầu thêm **danh mục dịch vụ**. Nút thêm dữ liệu mới trong giao diện Booking * Nhập **tên danh mục** và chọn **link liên kết** * Nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”** cho **danh mục** và **banner danh mục** * Chọn **danh mục con** (nếu có) Giao diện nhập thông tin danh mục, banner và danh mục con cho Booking Người dùng nhấn **“Thêm dữ liệu”** để hoàn tất việc thêm danh mục,\ hoặc nhấn **“Hủy bỏ”** để hủy thao tác. **Chỉnh sửa:** Người dùng nhấn vào nút để mở **trang chỉnh sửa danh mục**. Nút chỉnh sửa danh mục Booking trong giao diện quản lý * Nhập **tên danh mục** và **link liên kết** * Nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”** để thay đổi **ảnh danh mục** và **banner danh mục** * Chọn lại **danh mục con** (nếu cần) Giao diện chỉnh sửa danh mục, ảnh và danh mục con trong Booking Người dùng nhấn **“Lưu chỉnh sửa”** để hoàn tất cập nhật,\ hoặc nhấn **“Hủy bỏ”** nếu không muốn lưu thay đổi. **Xóa:** Người dùng nhấn vào nút để **xóa danh mục** khỏi hệ thống. Nút xóa danh mục Booking trong giao diện quản lý Khi hộp thoại xác nhận xuất hiện, người dùng chọn **“Xóa ngay”** để tiến hành xóa,\ hoặc chọn **“Hủy”** nếu không muốn thực hiện thao tác này. **Tiêu đề** **Nền** * Chọn **màu nền** cho **tiêu đề dịch vụ** bằng cách nhấn ô vuông rồi chọn màu. Ví dụ hiển thị tiêu đề phần Booking * Bật/tắt có **màu nền** hoặc **không có màu nền** bằng nút . * Xóa màu nền bằng nút . **Hiển thị tiêu đề** * Nhấn nút để bật/tắt **có tiêu đề** và **không có tiêu đề**; có thể **nhập nội dung tiêu đề** (ví dụ: “Danh mục dịch vụ”). Ví dụ hiển thị tiêu đề phần Booking **Cỡ chữ** * Điều chỉnh **kích thước chữ** cho **tiêu đề** tại Ví dụ hiển thị tiêu đề phần Booking **Màu chữ** * Thay đổi **màu chữ tiêu đề** tại Ví dụ hiển thị tiêu đề phần Booking **Hiển thị icon** * Bật/tắt **hiển thị icon** trong tiêu đề bằng nút . **Danh mục chính** **Nền** * Chọn **màu nền** cho **danh mục chính** bằng cách nhấn ô vuông rồi chọn màu Screenshot of a deployment confirmation message that says All checks have passed. * Bật/tắt màu nền bằng nút . * Xóa màu nền bằng nút . **Hiển thị icon / hình ảnh** * Bật/tắt **hiển thị icon/hình ảnh** cho danh mục chính bằng nút . **Kích thước** * Nhập hoặc tăng/giảm **kích thước** của danh mục chính tại Screenshot of a deployment confirmation message that says All checks have passed. **Kiểu hình ảnh** * Chọn **kiểu hình ảnh** cho danh mục chính tại Screenshot of a deployment confirmation message that says All checks have passed. **Bo góc** Screenshot of a deployment confirmation message that says All checks have passed. hoặc **chỉnh riêng lẻ từng góc** bằng nút Screenshot of a deployment confirmation message that says All checks have passed. **Hiển thị tên danh mục** * Bật/tắt **tên danh mục** bằng nút . **Kích thước / Màu sắc** * Điều chỉnh **kích thước** và **màu sắc** cho danh mục chính tại Screenshot of a deployment confirmation message that says All checks have passed. **Hiển thị danh mục phụ** * Bật/tắt **danh mục phụ** bằng nút . **Danh mục phụ** **Hiển thị tên** * Bật/tắt **tên danh mục phụ** bằng nút . **Hiển thị hình ảnh** * Bật/tắt **hình ảnh danh mục phụ** bằng nút . **Banner** **Hiển thị banner** * Bật/tắt **banner** bằng nút . **Chiều cao** * Nhập hoặc tăng/giảm **chiều cao** của banner tại Screenshot of a deployment confirmation message that says All checks have passed. **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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. **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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. * **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 Screenshot of a deployment confirmation message that says All checks have passed. 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 Screenshot of a deployment confirmation message that says All checks have passed. * **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 Screenshot of a deployment confirmation message that says All checks have passed. * Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu Screenshot of a deployment confirmation message that says All checks have passed. * 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 * Xóa viền bằng cách nhấn nút * **Đổ bóng** * Người dùng có thể chọn độ lớn đổ bóng của header tại ô Screenshot of a deployment confirmation message that says All checks have passed. * Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu Screenshot of a deployment confirmation message that says All checks have passed. * Nhấn biểu tượng để ẩn hoặc hiển thị hiệu ứng bóng. * Xóa đồ bóng bằng cách nhấn nút **Thẻ dịch vụ** **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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. **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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. * 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. Screenshot of a deployment confirmation message that says All checks have passed. **Chiều cao** * Nhập hoặc tăng/giảm **chiều cao** của **thẻ dịch vụ** tại Screenshot of a deployment confirmation message that says All checks have passed. **Kiểu hình ảnh** * Chọn **kiểu hình ảnh** của **thẻ dịch vụ** tại Screenshot of a deployment confirmation message that says All checks have passed. * **Nền** * Chọn màu nền cho header bằng cách nhấn ô vuông sau đó chọn màu Screenshot of a deployment confirmation message that says All checks have passed. * 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 * Xóa màu nền bằng cách nhấn nút * **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 Screenshot of a deployment confirmation message that says All checks have passed. 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 Screenshot of a deployment confirmation message that says All checks have passed. * **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 Screenshot of a deployment confirmation message that says All checks have passed. * Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu Screenshot of a deployment confirmation message that says All checks have passed. * 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 * Xóa viền bằng cách nhấn nút * **Đổ bóng** * Người dùng có thể chọn độ lớn đổ bóng của header tại ô Screenshot of a deployment confirmation message that says All checks have passed. * Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu Screenshot of a deployment confirmation message that says All checks have passed. * Nhấn biểu tượng để ẩn hoặc hiển thị hiệu ứng bóng. * Xóa đồ bóng bằng cách nhấn nút **Hiển thị tên dịch vụ** * Bật/tắt **Tên dịch vụ** bằng nút . **Hiển thị danh mục** * Bật/tắt **Danh mục** bằng nút . **Hiển thị giá tiền** * Bật/tắt **Giá tiền** bằng nút . **Hiển thị giá giảm** * Chọn **kiểu hiển thị giá giảm** (theo phần trăm hoặc giá gốc) tại **Sản phẩm Sale** * Bật/tắt **hiển thị sale** bằng nút . **Hiển thị nhãn** * Chọn **ẩn nhãn** hoặc hiển thị **FlashSale**, **Bán chạy**, **Mới nhất** tại Tùy chọn hiển thị nút đặt lịch dạng icon hoặc button trong Booking **Hiển thị yêu thích** * Bật/tắt **nút yêu thích** bằng nút . **Hiển thị đánh giá** * Bật/tắt **số sao đánh giá** bằng nút . **Hiển thị loại dịch vụ** * Bật/tắt **loại dịch vụ** bằng nút . **Hiển thị thời gian dịch vụ** * Bật/tắt **thời gian dịch vụ** bằng nút . **Hiển thị số lượng yêu thích** * Bật/tắt **số lượng yêu thích** bằng nút . **Hiển thị số lượng đã đặt** * Bật/tắt **số lượng đã đặt/đã bán** bằng nút . **Hiển thị nút đặt lịch** * Bật/tắt **nút đặt lịch** bằng nút . **Kiểu nút đặt lịch** * Chọn hiển thị **nút đặt lịch** ở dạng **icon** hoặc **button**. Tùy chọn hiển thị nút đặt lịch dạng icon hoặc button trong Booking **Kiểu thẻ dịch vụ** * Chọn hiển thị **thẻ dịch vụ** theo **ngang** hoặc **dọc**. Tùy chọn thẻ dịch vụ hiển thị theo chiều ngang hoặc dọc