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

# Tùy chỉnh Thiết kế & Chủ đề

> Tùy chỉnh giao diện và cảm nhận của trang thanh toán, cửa hàng và cổng khách hàng từ một nơi. Chọn chủ đề dựng sẵn, cấu hình kiểu chữ và màu sắc, rồi áp dụng ghi đè từng phần, tất cả với chế độ xem trước trực tiếp.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-overview.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=89f19bfb791cb903fccb3ea7127246ba" alt="Trang cài đặt thiết kế với chế độ xem trước trực tiếp của trang thanh toán, cổng thông tin khách hàng và cửa hàng trực tuyến" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="1920" data-path="images/design/general-overview.jpg" />
</Frame>

<Info>
  Trang Thiết kế là trung tâm điều phối cho việc xây dựng thương hiệu trên mọi bề mặt tiếp xúc khách hàng: thanh toán, cửa hàng và cổng khách hàng. Các thay đổi áp dụng tức thì trên cả ba và được xem trước theo thời gian thực trước khi bạn lưu.
</Info>

## Điểm nổi bật chính

1. **Trung tâm Thiết kế thống nhất** - Cấu hình giao diện thanh toán, cửa hàng và cổng khách hàng trên cùng một trang.
2. **Chủ đề dựng sẵn** - Bắt đầu với chủ đề được tuyển chọn và tùy chỉnh từ đó.
3. **Chế độ Sáng & Tối** - Xác định bảng màu riêng cho mỗi chế độ.
4. **Xem trước trực tiếp** - Xem các thay đổi hiển thị thế nào trên thanh toán, cổng khách hàng và cửa hàng trước khi lưu.
5. **Ghi đè từng phần** - Tinh chỉnh từng phần riêng (thanh toán, cửa hàng, cổng khách hàng) mà không ảnh hưởng phần khác.
6. **Điều khiển theo chương trình** - Ghi đè chủ đề lúc thanh toán qua API hoặc Checkout SDK.

## Bắt đầu

Điều hướng đến **Cài đặt → Thiết kế** trong Bảng điều khiển thương gia của bạn. Trang Thiết kế có bốn tab:

| Tab                 | Mục đích                                                         |
| ------------------- | ---------------------------------------------------------------- |
| **Chung**           | Tên doanh nghiệp, logo, chọn chủ đề và cài đặt nâng cao toàn cục |
| **Thanh toán**      | Ghi đè cài đặt chủ đề chỉ dành cho trang thanh toán              |
| **Cửa hàng**        | Ghi đè cài đặt chủ đề và cấu hình bố cục cửa hàng                |
| **Cổng khách hàng** | Ghi đè cài đặt chủ đề cho cổng khách hàng                        |

## Cài đặt Chung

Tab **Chung** điều khiển bản sắc thương hiệu cơ bản và chủ đề toàn cục của bạn.

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-advanced-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=00131c2a9d74d4c120bf85f588e358d8" alt="Tab Chung hiển thị cài đặt nâng cao với cấu hình kiểu chữ, màu sắc và viền" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2672" data-path="images/design/general-advanced-settings.jpg" />
</Frame>

### Cấu hình cơ bản

| Cài đặt               | Mô tả                                                       |
| --------------------- | ----------------------------------------------------------- |
| **Tên doanh nghiệp**  | Tên hiển thị trên thanh toán, cửa hàng và cổng khách hàng   |
| **Logo doanh nghiệp** | Logo thương hiệu của bạn trên mọi trang tiếp xúc khách hàng |
| **Chủ đề**            | Chọn chủ đề dựng sẵn làm điểm khởi đầu của bạn              |

### Cài đặt nâng cao

Mở rộng **Cài đặt nâng cao** để truy cập các điều khiển chi tiết:

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/general-color-settings.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=c09ecc738beb79cff0d130f46bb72b0a" alt="Cài đặt nâng cao mở rộng hiển thị cấu hình màu đầy đủ cho chế độ sáng và tối" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="4192" data-path="images/design/general-color-settings.jpg" />
</Frame>

#### Kiểu chữ

| Cài đặt              | Tùy chọn                                | Mô tả                                    |
| -------------------- | --------------------------------------- | ---------------------------------------- |
| **Phông chính**      | Bất kỳ phông Google nào                 | Phông chính dành cho tiêu đề và nội dung |
| **Phông phụ**        | Bất kỳ phông Google nào                 | Phông điểm nhấn cho nhãn và văn bản phụ  |
| **Kích thước phông** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl`     | Cỡ phông cơ sở toàn cục                  |
| **Độ đậm phông**     | `normal`, `medium`, `bold`, `extraBold` | Độ dày phông mặc định                    |

#### Cấu hình màu sắc

Định nghĩa bảng màu riêng cho **Chế độ Sáng** và **Chế độ Tối**. Mỗi chế độ hỗ trợ các thuộc tính sau:

| Thuộc tính            | Mô tả                    |
| --------------------- | ------------------------ |
| **Nền chính**         | Màu nền chính            |
| **Nền phụ**           | Nền phụ (tab, thẻ)       |
| **Văn bản chính**     | Màu văn bản chính        |
| **Văn bản phụ**       | Màu văn bản mờ           |
| **Nút chính**         | Nền nút chính            |
| **Văn bản nút chính** | Màu chữ trên nút chính   |
| **Nút phụ**           | Nền nút phụ              |
| **Văn bản nút phụ**   | Màu chữ trên nút phụ     |
| **Đường viền chính**  | Màu đường viền chính     |
| **Đường viền phụ**    | Màu đường viền điểm nhấn |

#### Viền

| Cài đặt                 | Mô tả                                                                                                                      |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| **Bán kính đường viền** | Điều khiển độ bo tròn của ô nhập, nút, tab và thẻ (ví dụ: `0` cho góc nhọn, `8px` cho bo tròn, `16px` cho kiểu viên thuốc) |

## Chủ đề dựng sẵn

Dodo Payments đi kèm bốn chủ đề được tuyển chọn. Chọn một chủ đề từ menu **Chủ đề** trong tab Chung để áp dụng ngay một thiết kế đồng nhất cho thanh toán, cửa hàng và cổng khách hàng.

### Dodo Pulses

Chủ đề mặc định của Dodo Payments. Điểm nhấn xanh chanh mang đến cảm giác năng động và tươi mới. Kiểu chữ sans-serif sạch với khoảng cách rộng rãi.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Dodo Pulses in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=f081086300770146c0df373b6304ea12" alt="Chủ đề Dodo Pulses ở chế độ sáng hiển thị thanh toán, cổng khách hàng và cửa hàng" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Dodo Pulses in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-dodo-pulses-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=d2fe47c69734ccb419471609095627fe" alt="Chủ đề Dodo Pulses ở chế độ tối hiển thị thanh toán, cổng khách hàng và cửa hàng" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="525" data-path="images/design/theme-dodo-pulses-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Terminal

Chủ đề dành cho nhà phát triển với kiểu chữ monospaced và điểm nhấn xanh hoàng gia. Góc nhọn và thẩm mỹ kỹ thuật phù hợp với các sản phẩm hướng công cụ dev và ưu tiên API.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Terminal in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=3e3320fc9c073ed9bf3ebe7b03bf7a3f" alt="Chủ đề Terminal ở chế độ sáng hiển thị thanh toán với các điểm nhấn màu xanh lam và phông chữ monospace" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Terminal in dark mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-terminal-dark.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=dea087e1c0fad9cf7a66fc37cfbda8ac" alt="Chủ đề Terminal ở chế độ tối hiển thị thanh toán với các điểm nhấn màu xanh lam và phông chữ monospace" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="526" data-path="images/design/theme-terminal-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bumblebee

Điểm nhấn hổ phách và vàng ấm cùng phong cách bo tròn hiện đại. Nổi bật và tương phản cao, phù hợp với các sản phẩm hướng tới người tiêu dùng muốn tạo cảm giác cao cấp.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bumblebee in light mode">
      <img src="https://mintcdn.com/dodopayments/fsVpks_kbNisjAe1/images/design/theme-bumblebee-light.png?fit=max&auto=format&n=fsVpks_kbNisjAe1&q=85&s=e276288fe683a831d10add3f8af4eae0" alt="Chủ đề Bumblebee ở chế độ sáng hiển thị thanh toán với các điểm nhấn màu hổ phách" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bumblebee in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bumblebee-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a35df24ccd45a9acb717652ce5b5fd19" alt="Chủ đề Bumblebee ở chế độ tối hiển thị thanh toán với các điểm nhấn màu vàng" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bumblebee-dark.png" />
    </Frame>
  </Tab>
</Tabs>

### Bubblegum

Điểm nhấn hồng và magenta vui nhộn với góc bo tròn hoàn toàn. Giao diện hiện đại, thân thiện phù hợp cho công cụ sáng tạo, sản phẩm thiết kế và thương hiệu phong cách sống.

<Tabs>
  <Tab title="Light Mode">
    <Frame caption="Bubblegum in light mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-light.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b53c9d3c6d07ef0ff44d4c613520789" alt="Chủ đề Bubblegum ở chế độ sáng hiển thị thanh toán, cổng thông tin khách hàng và cửa hàng với các điểm nhấn màu hồng" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-light.png" />
    </Frame>
  </Tab>

  <Tab title="Dark Mode">
    <Frame caption="Bubblegum in dark mode">
      <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/theme-bubblegum-dark.png?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=ef4a70ff8f289715628377b0631adf25" alt="Chủ đề Bubblegum ở chế độ tối hiển thị thanh toán, cổng thông tin khách hàng và cửa hàng với các điểm nhấn màu hồng" style={{ maxHeight: '500px', width: 'auto' }} width="912" height="536" data-path="images/design/theme-bubblegum-dark.png" />
    </Frame>
  </Tab>
</Tabs>

<Tip>
  Sau khi chọn chủ đề dựng sẵn, bạn có thể tùy chỉnh thêm từng thuộc tính riêng trong Cài đặt nâng cao. Bất kỳ thuộc tính nào chưa chỉ định sẽ quay về giá trị mặc định của chủ đề.
</Tip>

## Ghi đè từng phần

Mỗi tab phần (Thanh toán, Cửa hàng, Cổng khách hàng) bao gồm công tắc **Ghi đè Chủ đề**. Khi bật, bạn có thể tùy chỉnh giao diện của phần đó độc lập với chủ đề toàn cục.

### Tab Thanh toán

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/checkout-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=a17880492490e6abe2f6b8b9e9f4680e" alt="Tab Thanh toán hiển thị toàn bộ trang thanh toán với chi tiết sản phẩm và biểu mẫu thanh toán" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/checkout-tab.jpg" />
</Frame>

Ghi đè kiểu chữ, màu sắc và cài đặt đường viền chỉ dành cho trải nghiệm thanh toán. Phần xem trước trực tiếp hiển thị:

* Thông tin sản phẩm và giá cả
* Tùy chọn thanh toán nhanh (Apple Pay, Google Pay)
* Lựa chọn phương thức thanh toán và biểu mẫu thẻ
* Nhập mã giảm giá và tóm tắt giá

### Tab Cửa hàng

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/storefront-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=3b45fc842eb771be573ae1a5744d82c5" alt="Tab cửa hàng hiển thị URL cửa hàng, điều khiển thương hiệu và chế độ xem trước cửa hàng" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/storefront-tab.jpg" />
</Frame>

Cấu hình các cài đặt riêng cho cửa hàng:

| Cài đặt               | Mô tả                                                                 |
| --------------------- | --------------------------------------------------------------------- |
| **URL cửa hàng**      | Địa chỉ cửa hàng của bạn (ví dụ: `store.dodopayments.com/your-store`) |
| **Tên cửa hàng**      | Bật tắt và đặt tên hiển thị trên cửa hàng                             |
| **Logo cửa hàng**     | Bật tắt và tải logo cho đầu trang cửa hàng                            |
| **Biểu ngữ cửa hàng** | Bật tắt và tải hình ảnh biểu ngữ                                      |
| **Mô tả sản phẩm**    | Bật để hiển thị hoặc ẩn mô tả sản phẩm trên thẻ                       |
| **Ghi đè Chủ đề**     | Bật để tùy chỉnh kiểu chữ, màu sắc và đường viền chỉ cho cửa hàng     |

### Tab Cổng khách hàng

<Frame>
  <img src="https://mintcdn.com/dodopayments/vsqWNGxzquCPMqJB/images/design/customer-portal-tab.jpg?fit=max&auto=format&n=vsqWNGxzquCPMqJB&q=85&s=38c16ef9ed1648f0f5d3851d7c91f17c" alt="Tab cổng thông tin khách hàng hiển thị quản lý đăng ký, lịch sử thanh toán và chế độ xem trước phương thức thanh toán" style={{ maxHeight: '500px', width: 'auto' }} width="2880" height="2528" data-path="images/design/customer-portal-tab.jpg" />
</Frame>

Ghi đè chủ đề cho cổng khách hàng, bao gồm:

* Quản lý đăng ký
* Lịch sử thanh toán
* Phương thức thanh toán
* Ví và tín dụng

## Tài nguyên liên quan

<CardGroup cols={2}>
  <Card title="Checkout Features" icon="cart-shopping" href="/features/checkout">
    Các tính năng thanh toán bao gồm tiền tệ, ngôn ngữ, thuế, giảm giá và nhiều hơn nữa.
  </Card>

  <Card title="Overlay Checkout SDK" icon="layer-group" href="/developer-resources/overlay-checkout">
    Nhúng thanh toán dưới dạng lớp phủ modal trên trang của bạn.
  </Card>

  <Card title="Inline Checkout SDK" icon="credit-card" href="/developer-resources/inline-checkout">
    Nhúng thanh toán trực tiếp vào bố cục trang của bạn.
  </Card>

  <Card title="Storefront" icon="store" href="/features/storefront">
    Thiết lập và quản lý cửa hàng thương hiệu của bạn.
  </Card>

  <Card title="Customer Portal" icon="user" href="/features/customer-portal">
    Cổng dịch vụ tự phục vụ cho đăng ký và thanh toán.
  </Card>

  <Card title="Multi-Brand Setup" icon="building-columns" href="/features/multi-brands">
    Vận hành nhiều thương hiệu trong một tài khoản với thương hiệu riêng biệt.
  </Card>
</CardGroup>