Update 13/04/2023

adman/docs/intro.md

@@ -0,0 +1,41 @@
+---
+sidebar_position: 1
+---
+
+# Giới thiệu
+
+Hãy cùng khám phá **Minigame trong vòng 5 phút**.
+
+## Bắt đầu
+
+- Bắt đầu bằng cách **tạo một tài khoản Adman mới**.
+- Nếu bạn đã có tài khoản Adman rồi vui lòng xem tiếp **[Hướng dẫn - Minigame](./tutorial-minigame/index.md)**.
+
+### Đăng kí tài khoản
+
+- **[Đăng ký](https://app.adman.vn/register)** ngay một tài khoản quản trị Adman:
+  - Vui lòng cung cấp **thông tin liên hệ** đầy đủ và chính xác để được tư vấn tốt hơn.
+  - Sau đăng ký thành công, bạn sẽ nhận được **Mật khẩu** qua **[Email](https://www.google.com/intl/vi/gmail/about/)**.
+
+### Đăng nhập tài khoản
+
+- **[Đăng nhập](https://app.adman.vn/login)** vào tài khoản quản trị Adman:
+  - Nếu bạn là người mới vui lòng **[Đăng ký](https://app.adman.vn/register)** để được cấp tài khoản đăng nhập.
+  - Nếu bạn quên mật khẩu có thể sử dụng chức năng **Đăng nhập bằng mã OTP**. Mã OTP sẽ được gửi qua **[Email](https://www.google.com/intl/vi/gmail/about/)**.
+
+### Quản lý tài khoản
+
+- **[Quản lý tài khoản](https://app.adman.vn/account)** để thay đổi và cập nhật thông tin:
+  - Thay đổi thông tin tại Tab **Thông tin cơ bản**.
+  - Thay đổi mật khẩu tại Tab **Thay đổi mật khẩu**.
+
+:::tip
+
+Nên thay đổi mật khẩu ngay sau khi **Đăng ký tài khoản** và **Đăng nhập bằng OTP** để dễ dàng sử dụng cho lần tiếp theo.
+
+:::
+
+## Tham khảo
+
+- Bạn có thể tham khảo **[Một số Minigame mẫu có sẵn](/blog)**.
+- Để được tư vấn chi tiết hơn, vui lòng liên hệ **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)**.

adman/docs/tutorial-adman/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Adman",
+  "position": 3
+}

adman/docs/tutorial-adman/adman-setting.md

@@ -0,0 +1,33 @@
+---
+sidebar_position: 4
+---
+
+# Cài đặt
+
+Cài đặt các thiết lập dành riêng cho **Tài khoản gốc Adman** `(Tài khoản đầu tiên)` tạm gọi lad **ADMIN**.
+
+## Nhân sự
+
+Từ **Thanh công cụ bên trái**, ấn **Cài đặt**, tiếp theo ấn vào **Nhân sự**.
+
+![Setting Staffs](./img/minigame-setting-staffs.png)
+
+### Danh sách nhân sự
+
+Danh sách nhân sự bao gồm:
+
+- **Họ tên:** hiển thị Tên và Email của nhân sự.
+- **Quyền hạn:** quyền hạn được phân cấp bởi `ADMIN`, quyền hạn càng cao thì càng được sử dụng nhiều chức năng của `Adman`.
+- **Đăng nhập cuối:** hiển thị thời gian và địa chỉ ip của lần đăng nhập cuối cùng.
+- **Lựa chọn:**
+  - **Xóa:** xóa nhân sự.
+  - **Xem chi tiết:** chỉnh sửa lại thông tin cơ bản, quyền hạn và mật khẩu của nhân sự.
+
+### Thêm mới
+
+Ấn <button className="btn btn-add">[+] Thêm mới</button> để hiển thị Popup **Tạo nhân sự**
+
+- Nhập đầy đủ các trường `Họ, Tên, Email, Mobile`.
+- Ấn <button className="btn btn-submit">Thực hiện</button> để thêm nhân sự mới.
+
+![Setting Staffs](./img/minigame-setting-staffs-2.png)

adman/docs/tutorial-adman/files-library.md

@@ -0,0 +1,65 @@
+---
+sidebar_position: 2
+---
+
+# Thư viện files
+
+Là nơi bạn tải và lưu trữ toàn bộ files vào tài khoản Adman. Chủ yếu là các hình ảnh như: **ảnh sản phẩm, ảnh vòng quay, ảnh banner, logo, ...**. Giúp các bạn quản lý các files một cách hợp lý, khoa học hơn.
+
+Cung cấp một số thông tin chính như :
+
+- **Type**: loại file như Photo(ảnh), css(CSS3), js(javascript),... `Đang cập nhật`.
+- **Thông tin:** tên file và ảnh preview - `nếu là file ảnh`.
+- **Dung lượng:** kích thước file.
+- **Thời gian:** thời gian và tên tài khoản đã upload file.
+- **Lựa chọn:**
+  - **Xem chi tiết**: xem nội dung của file.
+  - **Xóa**: xóa file hiện tại.
+
+Phía bên trái là **Thanh điều hướng - Navbar**. Chọn **Thư viện files**.
+
+Đây là **Thư viện chung** cho toàn bộ Minigame của tài khoản Adman.
+
+:::tip
+
+Bạn nên tải các file ảnh **Logo, Banner, Icon,...** có thể tái sử dụng nhiều lần vào **Thư viện chung** này.
+
+:::
+
+![Files Library](./img/minigame-library-files-1.png)
+
+## Chức năng chính
+
+### Upload file mới
+
+- Ấn <button className="btn btn-add">[+] Upload file mới</button> một Popup sẽ hiển thị.
+- Ấn vào ô **Upload** rồi chọn file cần tải lên. Ảnh sẽ lập tức được upload lên website. Ấn <button className="btn btn-submit">OK</button> để đóng Popup.
+
+:::tip
+
+- File ảnh tải lên nên được tối ưu, có kích thước phù hợp, dung lượng nhỏ hơn 1MB.
+- File ảnh **sản phẩm** nên là ảnh vuông, có nền trong suốt, dạng PNG.
+- File ảnh banner, nền nên là ảnh JPG để có dung lượng tối ưu nhất.
+
+:::
+
+### Danh mục
+
+`Đang cập nhật`
+
+## Thư viện riêng
+
+Ngoài **Thư viện chung**, còn có các **Thư viện riêng** cho từng Minigame.
+
+Vào một Minigame bất kì, thanh điều hướng ngay bên trái,
+
+- Chọn **Thư viện files**, hệ thống tự động mở tab **File riêng của game**.
+- Chọn tab **Thư viện chung** ngay kế bên để xem danh sách các file chung.
+
+:::tip
+
+Các file ảnh như **ảnh sản phẩm, ảnh vòng quay,... file riêng biệt** cho từng Minigame nên upload ở **Thư viện riêng** để dễ quản lý hơn.
+
+:::
+
+![Files Library](./img/minigame-library-files-2.png)

adman/docs/tutorial-adman/index.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# Hướng dẫn Adman
+
+Hướng dẫn sử dụng các chức năng cơ bản của **Adman** các tính năng bổ trợ khác.
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />

adman/docs/tutorial-adman/tutorial-design-wheel.md

@@ -0,0 +1,101 @@
+---
+sidebar_position: 3
+---
+
+# Hướng dẫn cắt vòng quay
+
+Dưới đây là một số cách cắt vòng quay cơ bản, dễ làm và miễn phí.
+
+:::tip
+
+Nếu bạn muốn Vòng quay nhiều `màu sắc, hoạt ảnh, hiệu ứng...` xin vui lòng liên hệ bộ phần **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được tư vấn thêm về thiết kế.
+
+:::
+
+## Thiết kế bằng Figma
+
+**[Figma](https://www.figma.com/)** là một ứng dụng gồm nhiều công cụ thiết kế mạnh mẽ trên nền tảng website. Với Figma, bạn có thể sáng tạo không giới hạn giao diện người dùng (UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kế khác.
+
+### Đăng kí tài khoản (Miễn phí)
+
+Để sử dụng một cách đầy đủ nhất vui lòng **đăng ký tài khoản (miễn phí)** tại **[Figma](https://www.figma.com/)**, sau đó ấn <button className="btn btn-submit">Get Started</button>.
+
+![Figma Homepage](./img/minigame-tutorial-design-wheel-1.png)
+
+:::danger
+
+Sau khi `Đăng ký` xong tài khoản, vui lòng `Đăng nhập` để thực hiện bước tiếp theo.
+
+:::
+
+### Sử dụng thiết kế có sẵn
+
+Nhằm đảm bảo cho việc rút ngắn thời gian, đơn giản hóa công việc tạo **Ô sản phẩm trên vòng quay**, chúng tôi xin cung cấp các mẫu có sẵn theo từng số lượng cố định ở Link:
+
+- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 1](https://www.figma.com/file/EOx1EPnA2OkzQD5FEZzNJo/Thi%E1%BA%BFt-k%E1%BA%BF-v%C3%B2ng-quay-may-m%E1%BA%AFn-c%C6%A1-b%E1%BA%A3n-1?t=0U0p17qqc1kVnfjl-1)**
+
+- **[Thiết kế hình ảnh sản phẩm vòng quay mẫu 2](https://www.figma.com/file/T2aqeEFOUoB2o9fIA67wak/VONGQUAY_6-8-10-12?t=vLvTMihgA3xTmQKr-1)**
+
+Để chỉnh sửa vui lòng làm theo các bước:
+
+- Ấn vào dấu mũi tên đi xuống `(vị trí 1)`.
+- Ấn **Duplicate to your drafts** `(vị trí 2)`.
+- Ấn **Open** khi có thông báo đã thành công `(vị trí 3)` hoặc quay lại **[Figma](https://www.figma.com/)** để tìm, lưu ý cuối tên file có chữ `(Copy)`.
+
+![Figma Duplicate Draft](./img/minigame-tutorial-design-wheel-2.png)
+
+:::caution
+
+- Thiết kế mẫu chỉ bao gồm `Hình ảnh các ô trên vòng quay`. Bạn cần chọn `ảnh sản phẩm` phù hợp cùng với `tên giải thưởng` để chèn vào bên trong.
+- Khi **[Cài đặt vòng quay](../tutorial-minigame/wheel)** vui lòng `theo thứ tự như mẫu, màu sắc SOLE với nhau` để hình Vòng quay được hiển thị đẹp nhất.
+
+:::
+
+### Thiết kế theo số lượng tự chọn - Figpie
+
+:::caution
+
+- Cần thời gian và sự tỉ mỉ.
+- Số lượng ô trên vòng quay khuyến nghị là từ 4 - 12.
+- Nếu gặp khó khăn vui lòng liên hệ bộ phận **[Bộ phận Chăm sóc khách hàng](https://www.hurasoft.vn/)** để được giúp đỡ.
+
+:::
+
+- Vào Link **[Figpie](https://www.figma.com/community/plugin/924390003304842148/Figpie)**, sau đó ấn <button className="btn btn-submit">Try it out</button> để cài đặt.
+- Bạn sẽ được chuyển về trang Thiết kế của Figma, một Popup thông báo sẽ hiển thị, Ấn <button className="btn btn-submit">Run</button>.
+- Plugin **Figpie** hiển thị báo gồm các cài đặt sau:
+
+  - **DATA:** số lượng ô trên vòng quay.
+    - ấn `+` để thêm và ấn `-` để xóa.
+    - nhập `value` giống nhau, mặc định là `5`.
+  - **DIAMETER:** `chiều cao và chiều rộng` của Vòng quay.
+  - **THEME:** màu sắc mặc định của các ô.
+  - **PREVIEW:** xem trước Vòng quay hiển thị.
+
+  ![Figpie](./img/minigame-tutorial-design-wheel-3.png)
+
+- Ấn <button className="btn btn-figpie">Create a pie chart</button> để tạo.
+
+- **Một biểu đồ** sẽ hiển thị `(1)`, vui lòng chọn `1 ô (mảnh)` (tạm gọi là &#127829;) trong số đó và làm theo hướng dẫn:
+
+  - Kéo ra ngoài `(2)`
+  - Xóa viền trắng mặc định `(3)`, ấn dấu `-`
+  - Chỉnh màu `(5)`
+  - Chỉnh lại góc nghiêng `(4)` sao cho &#127829; dựng thẳng đứng `(6)`image.png
+
+  ![Figpie Tutorial 1](./img/minigame-tutorial-design-wheel-4.png)
+
+- **Tạo Frame** để bọc khung `Ô vòng quay` vừa lấy được:
+
+  - Ấn trên bàn phím nút `F`, sau đó kéo thả chuột tạo 1 **Frame** với `chiều cao` bằng với &#127829;, `chiều rộng` sẽ tự căn chỉnh sau `(1)`.
+  - Kéo &#127829; `(2)` vào bên trong **Frame** `(1)` sẽ được **Frame** `(3)`
+  - Xòa màu nền bằng cách ấn vào `-` `(4)`
+  - **Frame** hoàn thiện `(5)`, copy `Ctrl + C` và dán `Ctrl + V` lại ở vị trí khác rồi đổi màu sẽ có &#127829; khác `(6)`.
+
+  ![Figpie Tutorial 2](./img/minigame-tutorial-design-wheel-5.png)
+
+- Việc cuối cùng là tạo thêm các &#127829; để thêm nội dung vào đó rồi xuất ảnh.
+
+## Thiết kế bằng Photoshop
+
+`Đang cập nhật`

adman/docs/tutorial-minigame/1-startup.md

@@ -0,0 +1,31 @@
+---
+sidebar_position: 2
+---
+
+# Tạo Minigame
+
+Khởi tạo một Minigame đơn giản bằng những bước sau:
+
+## Khởi tạo Minigame
+
+Ngay khi vừa đăng nhập thành công. Phía bên trái là **Thanh điều hướng - Navbar**:
+
+- Chọn **Công cụ**
+- Chọn **MiniGame**
+- Chọn **Tạo game mới**
+
+![Adman Navbar](./img/minigame-navbar-1.png)
+
+## Nhập thông tin cơ bản của Minigame
+
+Sau khi **Khởi tạo Minigame** thành công, một bảng thông tin cần điền sẽ hiển thị:
+
+- **Phân loại:** chọn phân loại Minigame cần cài đặt.
+- **Tên đầy đủ:** điền tên Minigame.
+- **Mô tả tóm tắt:** viết mô tả đơn giản về Minigame.
+- **Trạng thái:** chọn **Cho chạy chính thức**
+- **Khoá sửa:** chọn **Cho phép sửa**
+
+![Minigame First Startup](./img/minigame-startup-info-1.png)
+
+Ấn <button className="btn btn-submit">Cập nhật</button> để lưu thông tin. Minigame đã được tạo thành công.

adman/docs/tutorial-minigame/2-policy.md

@@ -0,0 +1,25 @@
+---
+sidebar_position: 3
+---
+
+# Quy định chơi
+
+Sau khi tạo thành công Minigame, chọn tab <button className="btn btn-add btn-tab">Quy định chơi</button> và cài đặt:
+
+![Minigame Policy](./img/minigame-startup-policy-1.png)
+
+- **Thời gian kết thúc**: chọn thời gian kết thúc game. Khi đến đúng thời điểm đã đặt, Minigame sẽ tự động ngừng hoạt động.
+- **Lượt chơi tối đa mỗi người**: số lượt chơi Minigame tối đa của mỗi người chơi.
+- **Yêu cầu nhập trước khi chơi**: yêu cầu người chơi cung cấp thông tin để được phếp chơi game, bao gồm 3 lựa chọn:
+  - **Email**
+  - **Số điện thoại**
+  - **Họ tên**
+
+:::tip
+
+Với **Yêu cầu nhập trước khi chơi**, bạn nên chọn đầy đủ cả **3** lựa chọn,
+hoặc ít nhất **2** lựa chọn để tiện cho việc xác minh và liên hệ đến người chơi trúng giải.
+
+:::
+
+Ấn <button className="btn btn-submit">Cập nhật</button> để lưu Quy định chơi đã cài đặt.

adman/docs/tutorial-minigame/3-rewards.md

@@ -0,0 +1,37 @@
+---
+sidebar_position: 4
+---
+
+# Giải thưởng
+
+Sau khi cập nhật xong quy định chơi, chọn tab <button className="btn btn-add btn-tab">Giải thưởng</button>, chọn <button className="btn btn-add">[+] Thêm mới</button> và bắt đầu cài đặt các giải thưởng trúng giải:
+
+![Minigame Rewards](./img/minigame-startup-rewards-1.png)
+
+:::tip
+
+Mỗi lần chọn <button className="btn btn-add">[+] Thêm mới</button> sẽ tạo ra 1 hàng để nhập thông tin 1 giải thưởng, bạn có thể điền danh sách nhiều giải thưởng cho 1 lần <button className="btn btn-submit">Cập nhật</button> duy nhất.
+
+:::
+
+- **Ảnh**: chọn ảnh giải thưởng (khuyến nghị ảnh vuông, và nền trong suốt - ảnh png).
+  - Để tìm hiểu thêm vui lòng xem **[Thư viện files](../tutorial-adman/files-library)**.
+- **Mã theo dõi**: mã để theo dõi giải thưởng là sản phẩm trong kho của bạn, là mã SKU hoặc mã ID sản phẩm,...
+  - Nếu để trống thì hệ thống sẽ tự động tạo.
+  - Mã này sẽ **không được phép sửa** sau khi đã tạo.
+- **Tên**: tên giải thưởng (ghi ngắn gọn nhất).
+- **Giá trị**: giá trị giải thưởng, không bao gồm đơn vị tiền tệ.
+- **Tổng SL**: tổng số lượng giải thưởng.
+- **Đang giữ**: số lượng giải thưởng đã trúng (hiển thị sau khi cập nhật).
+- **Còn lại**: số lượng giải thưởng còn lại thời điểm đang xem (hiển thị sau khi cập nhật).
+- **Thứ tự**: thứ tự hiển thị trong dữ liệu, ảnh hưởng đến hiển thị danh sách giải thưởng ngoài giao diện (thứ tự cao xếp trước).
+- **Chọn**: các lựa chọn khác như **Xóa** để xóa giải thưởng đã cài đặt.
+
+:::danger
+
+- Không tạo giải thưởng **Chúc bạn may mắn lần sau**.
+- Không nên thay đổi **Danh sách giải thưởng** khi Minigame bắt đầu chạy, kể cả mọi **Thuộc tính** bên trên của giải thưởng trừ **Thứ tự**.
+
+:::
+
+Ấn <button className="btn btn-submit">Cập nhật</button> để lưu Danh sách giải thưởng đã cài đặt.

adman/docs/tutorial-minigame/4-wheel.md

@@ -0,0 +1,55 @@
+---
+sidebar_position: 5
+---
+
+# Cài đặt vòng quay
+
+Sau khi cập nhật danh sách giải thưởng, chọn tab <button className="btn btn-add btn-tab">Cài đặt vòng quay</button>, chọn <button className="btn btn-add">[+] Thêm mới</button> và bắt đầu cài đặt các hình giải thưởng trên vòng quay:
+
+![Minigame Wheel](./img/minigame-startup-wheel-setup-1.png)
+
+:::tip
+
+Mỗi lần chọn <button className="btn btn-add">[+] Thêm mới</button> sẽ tạo ra 1 hàng để nhập thông tin 1 hình giải thưởng, bạn có thể điền danh sách nhiều hình giải thưởng cho 1 lần <button className="btn btn-submit">Cập nhật</button> duy nhất.
+
+:::
+
+- **Ảnh**: chọn hình ảnh giải thưởng trên vòng quay - **Pizza Piece** &#127829; (có dạng như 1 miếng Pizza được chia đều, dựng dọc thẳng đứng)
+
+  - ![Minigame Piece of Wheel](./img/minigame-startup-wheel-setup-2.png)
+
+  - ![Minigame Wheel](./img/minigame-startup-wheel-setup-3.png)
+
+    :::caution
+
+    - Các miếng &#127829; đều có cấu trúc như `ảnh 1`, khi vòng quay được tạo sẽ tự ghép thành hình tròn hoàn chỉnh, tròn đẹp, không méo.
+    - Các miếng &#127829; nên được `chia đều, có kích thước giống nhau và có màu sắc khác nhau (khuyến nghị để SOLE màu sắc với nhau)`.
+    - Số lượng &#127829; không nhất thiết phải đúng bằng số lượng **Giải thưởng**. Nhiều &#127829; có thể chọn chung 1 **Giải thưởng**.
+    - Với &#127829; `Chúc bạn may mắn lần sau` vui lòng không chọn **Giải thưởng**
+
+    :::
+
+  - Để tìm hiểu thêm cách cắt ảnh vui lòng xem **[Hướng dẫn cắt vòng quay may mắn](../tutorial-adman/tutorial-design-wheel)**.
+
+- **Mã giải thưởng**: chọn 1 trong số các giải thưởng đã cài đặt ở tab **Giải thưởng**.
+- **Tên**: tên hình ảnh giải thưởng.
+- **Xác xuất trúng**: xác xuất người chơi quay được giải thưởng.
+  - Nhập số từ 0->100 (0= nghĩa là không bao giờ trúng, 100 = luôn trúng).
+  - Xác xuất được chia theo số lượng hình ảnh trên vòng quay.
+  - Ví dụ có 3 hình ảnh giải thưởng thì tổng xác suất trúng của cả 3 là: 10% + 20% + 70% = 100%.
+- **Thứ tự**: khuyến nghị bỏ trống, là thứ tự hiển thị trong dữ liệu, ảnh hưởng đến hiển thị vòng quay ngoài giao diện (thứ tự cao xếp trước).
+
+  :::caution
+
+  Bạn **nên** thêm **Hình ảnh giải thưởng** trên vòng quay **theo thứ tự như Thiết kế từ trước**. **Không** chỉnh sửa **Thứ tự** vì có thể dẫn đến lỗi giao diện vòng quay.
+
+  :::
+
+Ấn <button className="btn btn-submit">Cập nhật</button> để lưu Danh sách hình giải thưởng trên vòng quay đã cài đặt.
+
+:::tip CONGRATULATIONS
+
+Xin chúc mừng bạn đã cài đặt xong dữ liệu quản trị để Minigame hoạt động.
+Bước tiếp theo chính là **Lập trình Game Page (Template)** để hiển thị Minigame ngoài giao diện.
+
+:::

adman/docs/tutorial-minigame/5-game-page/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Game Page",
+  "position": 6
+}

adman/docs/tutorial-minigame/5-game-page/code/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Lập trình",
+  "position": 3
+}

adman/docs/tutorial-minigame/5-game-page/code/index.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# Lập trình
+
+Hướng dẫn các code (lệnh) hiển thị giao diện và chức năng cơ bản.
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />

adman/docs/tutorial-minigame/5-game-page/code/javascript-core.md

@@ -0,0 +1,809 @@
+---
+sidebar_position: 3
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Hướng dẫn Javascript (CORE)
+
+Các dòng `code (lệnh)` được viết sẵn đầy đủ các chức năng cơ bản để hoạt động đồng bộ với `API Adman` trong các thẻ `<script></script>` phía dưới cùng.
+
+## HTML/CSS Mẫu
+
+<details>
+<summary>HTML/CSS Mẫu</summary>
+<Tabs>
+<TabItem value="html" label="HTML">
+
+```html
+<div class="main-game">
+  <div class="container">
+    <!-- HEADER -->
+    <div class="header d-flex flex-column align-items-center pt-4">
+      <!-- MINIGAME NAME -->
+      <h1 class="js-minigame-name">MINIGAME</h1>
+
+      <!-- TIME END -->
+      <h2 class="js-minigame-endtime">THỜI GIAN KẾT THÚC</h2>
+
+      <!-- PLAYER STATUS -->
+      <div class="users-status text-center color-white">
+        <p>
+          Số người đang online:
+          <i class="js-users-status-online blink font-weight-700">999</i>
+        </p>
+        <p>
+          Đã chơi:
+          <i class="js-users-status-played blink font-weight-700">999</i>
+        </p>
+        <p>
+          Đang chơi:
+          <i class="js-users-status-playing blink font-weight-700">999</i>
+        </p>
+      </div>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main-content pt-4">
+      <!-- MINI GAME -->
+      <div class="mini-game d-flex align-items-center justify-content-between">
+        <!-- PLAYER -->
+        <div class="player">
+          <a
+            href="javascript:window.scroll({top:10000,behavior:'smooth'});"
+            class="font-weight-500 text-center"
+          >
+          </a>
+          <div action="" class="form">
+            <p class="form-title font-weight-900 text-center">
+              Vui lòng nhập thông tin của bạn để bắt đầu quay
+            </p>
+
+            <div class="form-list" id="js-user-info">
+              <!-- Ajax holder -->
+            </div>
+
+            <p id="js-game-status" class="font-weight-700 color-red my-3"></p>
+            <p id="js-game-notify" class="font-weight-700 color-red my-3"></p>
+
+            <a
+              href="javascript:;"
+              type="submit"
+              id="js-spin-btn"
+              style="display:block;"
+              class="form-btn-submit font-weight-900 color-secondary bg-primary text-center text-uppercase"
+              onclick="start_game()"
+            >
+              Click để bắt đầu
+            </a>
+            <!-- js-spin-btn -->
+            <a
+              href="javascript:;"
+              type="submit"
+              id="js-reset-btn"
+              style="display:none;"
+              class="form-btn-submit font-weight-900 color-secondary bg-primary text-center text-uppercase"
+              onclick="Adman.MiniGame.reset()"
+            >
+              Chơi lại
+            </a>
+            <!-- js-reset-btn -->
+            <div class="player-prize color-white">
+              <p class="font-weight-700 mb-1">Danh sách kết quả của bạn</p>
+              <ol id="js-reward-list">
+                <!-- js-reward-list -->
+                <!-- Ajax holder -->
+                <i class="color-red"
+                  >Quay ngay để nhận những phần quà hấp dẫn</i
+                >
+              </ol>
+            </div>
+          </div>
+        </div>
+        <!-- GAME -->
+        <div class="game-spin">
+          <div class="vqmm-ct-ct in-wheel spin-roll">
+            <div class="vq-ct">
+              <!-- CANVAS -->
+              <canvas
+                id="canvas"
+                width="772"
+                height="772"
+                class="wheel-canvas d-flex w-100"
+              >
+                <p style="color: white" align="center">
+                  Sorry, your browser doesn't support canvas. Please try
+                  another.
+                </p>
+              </canvas>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- GAME PZIRE -->
+      <div class="game-prize grid grid--1-cols grid--1-cols-mb pt-4">
+        <!-- COL PRIZE INFO -->
+        <div class="game-prize-info pt-4">
+          <!-- HEADING -->
+          <div class="heading-p text-center p-relative">
+            <div class="wrapper">
+              <div class="title">
+                <h2 class="text-center">DANH SÁCH GIẢI THƯỞNG</h2>
+              </div>
+            </div>
+          </div>
+          <!-- CONTENT -->
+          <div class="content-p">
+            <!-- ROW P TOP-->
+            <div class="row-p row-p-best grid" id="js-reward-list-top">
+              <!-- AJAX HOLDER -->
+            </div>
+          </div>
+        </div>
+        <!-- COL PRIZE RECENT -->
+        <div class="game-prize-recent pt-4">
+          <!-- HEADING -->
+          <h2 class="text-center">DANH SÁCH NGƯỜI CHƠI TRÚNG GIẢI GẦN ĐÂY</h2>
+          <div id="js-recent-winners">
+            <h4>Hãy là người chơi đầu tiên được ghi lên BẢNG VÀNG!</h4>
+            <!-- AJAX HOLDER -->
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- FOOTER -->
+    <div class="footer pt-4">
+      <!-- GAME POLICY -->
+      <div class="game-policy color-white">
+        <h2 class="">THỂ LỆ CHƯƠNG TRÌNH</h2>
+        <ol class="list" id="js-game-policy">
+          <li>Quý khách cần đăng nhập Thông tin chính xác để quay thưởng.</li>
+          <li>Mỗi khách hàng được quay 5 lần và chỉ được chọn 1 phần quà.</li>
+          <li>
+            Mã giảm giá sử dụng trong vòng 15 ngày kể từ ngày nhận thưởng.
+          </li>
+          <li>Voucher được phát hành và áp dụng đến khi hết số lượng.</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+</TabItem>
+<TabItem value="css" label="CSS">
+
+```css
+*,
+*,
+::after,
+::before {
+  padding: 0;
+  margin: 0;
+  -webkit-box-sizing: inherit;
+  box-sizing: inherit;
+}
+html {
+  font-size: 16px;
+}
+body {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: Inter, sans-serif;
+  color: #000;
+  min-width: 1220px;
+  word-break: break-word;
+  line-height: 1.3;
+  font-weight: 400;
+  background-size: cover;
+  background-attachment: fixed;
+}
+.container {
+  max-width: 1220px;
+  width: 100%;
+  padding: 0 10px;
+  margin: 0 auto;
+}
+a {
+  text-decoration: none;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+}
+.font-weight-900 {
+  font-weight: 900;
+}
+.font-weight-800 {
+  font-weight: 800;
+}
+.font-weight-700 {
+  font-weight: 700;
+}
+.font-weight-600 {
+  font-weight: 600;
+}
+.font-weight-500 {
+  font-weight: 500;
+}
+.font-weight-400 {
+  font-weight: 400;
+}
+.font-weight-300 {
+  font-weight: 300;
+}
+.grid {
+  display: -ms-grid;
+  display: grid;
+  gap: 16px;
+}
+.grid--2-cols {
+  -ms-grid-columns: (1fr) [2];
+  grid-template-columns: repeat(2, 1fr);
+}
+.grid--3-cols {
+  -ms-grid-columns: (1fr) [3];
+  grid-template-columns: repeat(3, 1fr);
+}
+.grid--4-cols {
+  -ms-grid-columns: (1fr) [4];
+  grid-template-columns: repeat(4, 1fr);
+}
+.d-flex {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.align-items-center {
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+.align-items-start {
+  -webkit-box-align: start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+}
+.align-items-end {
+  -webkit-box-align: end;
+  -ms-flex-align: end;
+  align-items: flex-end;
+}
+.align-items-baseline {
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+}
+.justify-content-center {
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+.justify-content-between {
+  -webkit-box-pack: justify;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+.flex-column {
+  -ms-flex-direction: column;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  flex-direction: column;
+}
+.flex-row {
+  -ms-flex-direction: row;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  flex-direction: row;
+}
+.flex-1 {
+  -webkit-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+.flex-wrap {
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+.p-4 {
+  padding: 24px !important;
+}
+.pt-4,
+.py-4 {
+  padding-top: 24px !important;
+}
+.pr-4,
+.px-4 {
+  padding-right: 24px !important;
+}
+.pb-4,
+.py-4 {
+  padding-bottom: 24px !important;
+}
+.pl-4,
+.px-4 {
+  padding-left: 24px !important;
+}
+text-center {
+  text-align: center;
+}
+.blink {
+  -webkit-animation: blink 1s steps(1, end) infinite;
+  animation: blink 1s steps(1, end) infinite;
+}
+@-webkit-keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+canvas {
+  max-width: 600px;
+}
+.p-item {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+}
+.form {
+  padding: 10px;
+  border: 1px solid;
+}
+.form-input {
+  margin: 8px 0;
+  width: 100%;
+}
+.form-btn-submit {
+  padding: 8px;
+  background: red;
+  color: #fff;
+  margin: 8px 0;
+  text-align: center;
+}
+```
+
+</TabItem>
+</Tabs>
+</details>
+
+## Khai báo ID Minigame, Link API Adman và các biến thường dùng
+
+```jsx
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
+<script>const GAME_ID ='O4z25JLzP9';</script>
+<script id="hura-am-main" src="https://static.gleecdn.com/am/v1/aman.bundle.js?id=EVjpMnXO"></script>
+```
+
+```jsx
+const SPIN_HOLDER = $("#js-spin-btn");
+const RESET_HOLDER = $("#js-reset-btn");
+const REWARD_LIST_HOLDER = $("#js-reward-list");
+const GAME_NOTIFY = $("#js-game-notify");
+```
+
+## Khởi tạo Minigame và các hàm xử lý chung
+
+```jsx
+$(function () {
+  if (Adman) {
+    // Cài đặt game
+    Adman.MiniGame.setUp({
+      id: GAME_ID,
+      handleStatusUpdate, // Hàm xử lý hiển thị các thông tin về: Người đang chơi - Người trúng thưởng - Giải thưởng còn lại - Trạng thái game (đóng hay mở)
+      handleNotification, // Hàm xử lý thông báo lỗi tới người dùng
+      onSetupComplete, // Hàm xử lý khi quá trình cài đặt đã xong
+      onReset, // Hàm xử lý khi Người dùng click vào Reset
+      onPlayStart, // Hàm xử lý khi Người dùng click vào Play
+      onPlayComplete, // Hàm xử lý khi Hiệu ứng chạy kết thúc (v.d. Khi vòng quay dừng lại)
+      handleDisplayWinningPrize, // Hàm xử lý Hiển thị danh sách giải thưởng đã trúng (v.d. Game cho phép quay 5 lần, khách hàng trúng 5 giải, khách hàng khi đó sẽ cần Chọn 1 giải để nhận thưởng )
+    });
+  }
+});
+```
+
+## Xử lý hiển thị giao diện
+
+```jsx
+// Hàm xử lý hiển thị các thông tin về: Người đang chơi - Người trúng thưởng - Giải thưởng còn lại - Trạng thái game (đóng hay mở)
+function handleStatusUpdate(game_status) {
+  console.log("handleStatusUpdate", game_status);
+  // Hiển thị danh sách người trúng giải gần nhất
+  if (recent_winners) buildRecentWinners(recent_winners);
+
+  // Cập nhật số lượng giải thưởng còn lại liên tục
+  if (rewards) updateRemainingRewards(rewards);
+
+  // Hiển thị số lượng Người chơi online - đang chơi - đã chơi
+  if (users) showUserStat(users);
+}
+
+function showUserStat(users) {
+  console.log("user_status:", users);
+  $(".js-users-status-online").html(users.online);
+  $(".js-users-status-played").html(users.played);
+  $(".js-users-status-playing").html(users.playing);
+}
+
+function updateRemainingRewards(remaining_rewards) {
+  console.log("remaining_rewards", remaining_rewards);
+  remaining_rewards.forEach((item) => {
+    let remaining_reward = item.reserved > 0 ? item.remaining : item.total;
+    $(".js-remaining-" + item.id).html(remaining_reward);
+  });
+}
+
+// Hàm hiển thị danh sách người trúng giải gần nhất
+function buildRecentWinners(recent_winners) {
+  console.log("recent_winners", recent_winners);
+  const showUnixTime = Adman.Util.showUnixTime;
+  const row_list = recent_winners.map(function (item, index) {
+    return `
+      <tr>
+        <td>${index + 1}</td>
+        <td>${item.email}</td>
+        <td>${item.prize}</td>
+        <td>${showUnixTime(item.time)}</td>
+      </tr>
+    `;
+  });
+
+  const table_content = `
+    <!-- TABLE LIST RECENT PRIZE -->
+    <table class="text-14 text-12-mb w-100">
+      <tr>
+          <th>STT</th>
+          <th>Khách hàng</th>
+          <th>Giải thưởng</th>
+          <th>Thời gian</th>
+      </tr>
+      ${row_list.join("")}
+    </table>
+  `;
+
+  $("#js-recent-winners").html(table_content);
+}
+```
+
+## Xử lý Hiển thị danh sách giải thưởng đã trúng
+
+```jsx
+// Hàm xử lý Hiển thị danh sách giải thưởng đã trúng (v.d. Game cho phép quay 5 lần, khách hàng trúng 5 giải, khách hàng khi đó sẽ cần Chọn 1 giải để nhận thưởng )
+function handleDisplayWinningPrize(winning_rewards) {
+  console.log(winning_rewards);
+  const claimed_reward = winning_rewards.some(
+    (_reward) => _reward.has_claimed == 1
+  );
+
+  function _rewardHtml(reward) {
+    let chose_reward = "";
+    if (claimed_reward)
+      chose_reward = reward.has_claimed == 1 ? "Bạn đã chọn giải này" : "";
+    else
+      chose_reward =
+        reward.title.indexOf("Chúc bạn may mắn lần sau") == 0
+          ? ""
+          : "Chọn giải này";
+
+    return `
+      <li class="item mb-1 ml-4">
+        ${reward.title} 
+        <i class="js-chose-reward color-red font-weight-700">
+          <a href="javascript:;" data-id="${reward.id}" class="js-chose-reward-btn">${chose_reward}</a>
+        </i>
+      </li>
+    `;
+  }
+
+  REWARD_LIST_HOLDER.html(
+    winning_rewards.map((reward) => _rewardHtml(reward)).join("")
+  );
+  if (claimed_reward) $(".js-chose-reward-btn").css("pointer-events", "none");
+
+  // Turn off any listener
+  REWARD_LIST_HOLDER.off("click");
+
+  // Hàm lắng nghe khi ấn "Nhận giải"
+  REWARD_LIST_HOLDER.on("click", function (e) {
+    let reward_id = $(e.target).data("id");
+
+    if (reward_id) {
+      if (confirm("Bạn chắc chắn muốn chọn giải thưởng này chứ?") == true) {
+        Adman.MiniGame.claimReward(reward_id).then(function (res) {
+          //console.log('Adman.MiniGame.claimReward', res);
+          _checkRewardStatus(res, reward_id);
+        });
+      }
+    }
+  });
+}
+```
+
+## Kiểm tra tình trạng giải thưởng
+
+```jsx
+// Hàm kiểm tra tình trạng giải thưởng
+function _checkRewardStatus(data, reward_id) {
+  let status = data.status;
+  let message = data.msg;
+  let error = "";
+
+  if (status == "error") {
+    if (message == "The reward is out of stock!") {
+      error +=
+        "- Số lượng giải thưởng đã hết. Vui lòng chọn giải thưởng khác.<br>";
+    } else if (message == "Has claimed a reward before") {
+      error += "- Có lỗi xảy ra. Bạn đã từng nhận 1 giải thưởng.<br>";
+    } else if (
+      message ==
+      "Email hoặc số di động đã được dùng chọn giải trước đó rồi.<br>"
+    ) {
+      error += "- Có lỗi xảy ra. Email hoặc số di động đã được trao giải.<br>";
+    } else {
+      error += message;
+    }
+
+    GAME_NOTIFY.html(error);
+    $(".js-reward-notify").html(error);
+  } else {
+    GAME_NOTIFY.html(
+      "Giải thưởng bạn chọn đã được gửi vào Email. Vui lòng kiểm tra lại."
+    );
+    $(".js-reward-notify").html(
+      "Giải thưởng bạn chọn đã được gửi vào Email. Vui lòng kiểm tra lại."
+    );
+
+    $("#js-reward-list a").each(function () {
+      let id = $(this).attr("data-id");
+
+      if (reward_id == id) {
+        $(this).css("pointer-events", "none").html("Bạn đã chọn giải này");
+      } else {
+        $(this).remove();
+      }
+    });
+  }
+}
+```
+
+## Xử lý khi quá trình cài đặt đã xong
+
+```jsx
+// Kiểm tra lượt chơi
+function checkSpinLeft(permission) {
+  const gameInfo = Adman.MiniGame.getInfo();
+
+  let spinMax = gameInfo.rules.max_retry_per_user;
+  let spinUsed = $("#js-reward-list .item").length;
+  let spinLeft = spinMax - spinUsed;
+
+  if (permission > 0 && spinLeft > 0)
+    $(".js-reward-notify").html(`Bạn còn ${spinLeft} lượt quay.`);
+
+  if (spinLeft == 0) {
+    SPIN_HOLDER.remove();
+    RESET_HOLDER.remove();
+    GAME_NOTIFY.html(`Bạn đã hết lượt quay.`);
+  }
+}
+
+// Hàm kiểm tra người dùng đã đăng nhập chưa
+function checkUserExist(game_info) {
+  const user_info = Adman.User.getUserInfo();
+  console.log(user_info);
+
+  if (user_info.name || user_info.email || user_info.mobile) {
+    checkUserInfo();
+  } else {
+    const email =
+      game_info.rules.require_email_before_play == 1
+        ? '<input type="email" placeholder="Email*" id="js-user-email" class="form-input" />'
+        : "";
+    const name =
+      game_info.rules.require_name_before_play == 1
+        ? '<input type="text" placeholder="Họ tên*" id="js-user-name" class="form-input" />'
+        : "";
+    const mobile =
+      game_info.rules.require_mobile_before_play == 1
+        ? '<input type="text" placeholder="Số điện thoại*" id="js-user-mobile" class="form-input" />'
+        : "";
+
+    $("#js-user-info").html(`${email} ${name} ${mobile}`);
+  }
+}
+
+function checkUserInfo() {
+  const user_info = Adman.User.getUserInfo();
+
+  if (user_info && (user_info.name || user_info.email || user_info.mobile)) {
+    let user_name = "";
+
+    if (user_info.name && user_info.name != "") {
+      user_name = user_info.name;
+    } else if (user_info.email && user_info.email != "") {
+      user_name = user_info.email;
+    } else if (user_info.mobile && user_info.mobile != "") {
+      user_name = user_info.mobile.substring(0, 7) + "***";
+    }
+
+    $("#js-user-info").html(
+      `<p class="color-white pb-2">Xin chào, <i class="font-weight-700">${user_name}</i>.</p>`
+    );
+  }
+}
+
+// Hiển thị Danh sách giải thưởng
+function renderRewardList(data, holder) {
+  let dataReward = data;
+  let product_tpl = "";
+
+  dataReward.forEach(function (item, index) {
+    product_tpl += `
+      <!-- PRODUCT ITEM -->
+      <div class="p-item" data-id="${item.id}">
+        <h4 class="p-title">Giải thưởng ${index + 1}</h4>
+        <a href="" class="p-img">
+          <img src="${item.image}" alt="${item.title}" class="p-pic" />
+        </a>
+        <h3 class="p-name line-clamp-2 my-2">${item.title}</h3>
+        <p class="p-price mb-2">${item.market_value.toLocaleString(3)} VNĐ </p>
+        <p class="p-quantity-total">Số lượng <span class="font-weight-700">${
+          item.total
+        }</span></p>
+        <p class="p-quantity-left bg-primary">Còn <span class="ml-1 font-weight-700 js-remaining-${
+          item.id
+        }">${item.remaining}</span></p>
+      </div>
+    `;
+
+    $(holder).html(product_tpl);
+  });
+}
+
+// Hàm xử lý khi quá trình cài đặt đã xong
+function onSetupComplete(game_info) {
+  console.log(game_info);
+
+  // Kiểm tra lượt quay
+  checkSpinLeft(0);
+
+  // Kiểm tra thông tin người dùng, nếu chưa có thì hiển thị form cập nhật thông tin
+  checkUserExist(game_info);
+
+  // Tên Vòng quay
+  $(".js-minigame-name").html(game_info.title);
+
+  // Thời gian kết thúc
+  $(".js-minigame-endtime").html(
+    Adman.Util.showUnixTime(game_info.rules.end_time)
+  );
+
+  // Render list giải thưởng
+  const data_reward = game_info.rewards;
+  renderRewardList(data_reward, "#js-reward-list-top");
+
+  // Hiển thị quy định chơi
+  GAME_POLICY_HOLDER.html(game_info.description);
+}
+```
+
+## Xử lý khi chơi Minigame
+
+```jsx
+// Hàm xử lý khi Người dùng click vào Reset
+function onReset() {
+  // Ẩn nút Reset và hiển thị nút Play
+  SPIN_HOLDER.css("display", "none");
+  RESET_HOLDER.css("display", "none");
+  start_game();
+}
+
+// Hàm xử lý khi Người dùng click vào Play
+function onPlayStart() {
+  // Ẩn nút Play để không click vào lần 2
+  SPIN_HOLDER.css("display", "none");
+  GAME_NOTIFY.html("");
+}
+
+// Hàm xử lý khi Hiệu ứng chạy kết thúc (v.d. Khi vòng quay dừng lại)
+function onPlayComplete() {
+  // Ẩn nút Play và hiển thị nút Reset
+  SPIN_HOLDER.css("display", "none");
+  RESET_HOLDER.css("display", "block");
+
+  setTimeout(function (params) {
+    checkSpinLeft(1);
+  }, 100);
+}
+
+// Hàm khởi động Vòng quay
+function start_game() {
+  if (check_field() == false) {
+    return false;
+  } else {
+    let email = $("#js-user-email").val();
+    let name = $("#js-user-name").val();
+    let mobile = $("#js-user-mobile").val();
+
+    Adman.User.setUserInfo({
+      email: email,
+      name: name,
+      mobile: mobile,
+    }).then(function (response) {
+      Adman.MiniGame.play();
+      checkUserInfo();
+      GAME_NOTIFY.html("");
+    });
+  }
+}
+```
+
+## Xử lý khác
+
+```jsx
+// Kiểm tra form điền thông tin trước khi gửi
+function check_field() {
+  let error = "";
+  const number_regex1 = /^[0]\d{9}$/i;
+  const number_regex2 = /^[0]\d{10}$/i;
+
+  let check_name = $("#js-user-name").val();
+  if (check_name != undefined) {
+    if (check_name.length < 2) error += "- Tên quá ngắn <br>";
+  }
+
+  let check_email = $("#js-user-email").val();
+  if (check_email != undefined) {
+    if (check_email.length < 4) {
+      error += "- Bạn chưa nhập email <br>";
+    } else if (check_email.length > 4) {
+      if (validateEmail(check_email) == false)
+        error += "- Email không hợp lệ <br>";
+    }
+  }
+
+  let check_tel = $("#js-user-mobile").val();
+  if (check_tel != undefined) {
+    if (
+      number_regex1.test(check_tel) == false &&
+      number_regex2.test(check_tel) == false
+    )
+      error += "- Số điện thoại chưa chính xác\n";
+  }
+
+  if (error != "") {
+    GAME_NOTIFY.html(error);
+    return false;
+  }
+}
+
+// Kiểm tra Email
+function validateEmail(sEmail) {
+  var filter =
+    /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
+  if (filter.test(sEmail)) {
+    return true;
+  } else {
+    return false;
+  }
+}
+```

adman/docs/tutorial-minigame/5-game-page/code/template-demo.md

@@ -0,0 +1,69 @@
+---
+sidebar_position: 2
+---
+
+# Dùng template mẫu
+
+Template có sẵn giao diện và các chức năng cơ bản của **Minigame**. Dùng để kiểm tra dữ liệu bạn đã thêm trước đó.
+
+- Ấn <button className="btn btn-add">Dùng template mẫu</button> để nạp template mẫu vào **Game Page**, sau đó ấn <button className="btn btn-submit">Cập nhật</button> để lưu lại.
+- Ấn <button className="btn btn-add">Xem trước</button> để xem giao diện hiện thị hiện tại.
+
+:::tip
+
+Sau khi **Tạo template mẫu**, bạn có thể copy `toàn bộ code` về **Code Editor (VS Code, Sublime Text, Atom...)** và chỉnh sửa và chạy ngay trên đó (với **VS Code** là Extension `Live Server`,...)
+
+Sau khi hoàn thiện, quay lại **Adman** và sao chép lại `code` vào **Game Page**.
+
+:::
+
+## Giao diện vòng quay - Canvas
+
+:::caution
+
+Vòng quay được vẽ bằng **Canvas**, phụ thuộc vào kích thước của **Hình ảnh giải thưởng trên vòng quay** - **Pizza Piece** &#127829;
+
+Ví dụ:
+
+- &#127829; của bạn có `chiều cao` là `300`, thì `300` này chính là bán kính vòng quay đó. Lúc này **Canvas** sẽ có `chiều dài(width)` và `chiều cao(heigh)` là `300 * 2 = 600`.
+- Trong **Code Editor** của **Game Page**, sử dụng tìm kiếm `Ctrl + F` với từ khóa `Canvas` để thay đổi lại `width` và `height` phù hợp với hiển thị ngoài giao diện.
+
+```jsx
+// highlight-next-line
+<canvas id="canvas" width="600" height="600" style="width:100%">
+  <p style="{color: white}" align="center">
+    Sorry, your browser doesn't support canvas. Please try another.
+  </p>
+</canvas>
+```
+
+:::
+
+## Kết quả
+
+![Minigame Template 3](./img/minigame-startup-gamepage-3.png)
+
+:::tip SUCCESS
+
+Nếu bạn thấy giao diện như hình bên trên bao gồm (có thể bị lỗi giao diện 1 chút):
+
+- **Thời gian hết hạn:** đúng ngày kết thúc đã cài đặt.
+- **Số người đang online:** bằng 1, chính là bạn đang online.
+- **Vòng quay:** hiển thị **đúng và đủ** các **Hình ảnh giải thưởng vòng quay** trong tab **Cài đặt vòng quay**.
+
+Xin chúc mừng bạn, Minigame bước đầu đã hiển thị ngoài giao diện thành công. Việc tiếp theo là **Lập trình giao diện đẹp và phù hợp hơn theo Thiết kế của bạn (HTML5, CSS3)**.
+Sau đó là **Lập trình chức năng để Minigame hoạt động hoàn hảo (Javascript)**.
+
+:::
+
+:::danger ERROR
+
+Nếu Minigame có lỗi vui lòng kiểm tra lại một số lỗi cơ bản sau:
+
+- **Minigame không chạy:**
+  - Kiểm tra tại tab **[Quy định chơi/Thời gian kết thúc](../../policy)**: thời gian cần cài đặt `sau thời điểm hiện tại`.
+  - Kiểm tra tại tab **[Thông tin cơ bản/Trạng thái game](../../startup)**: tích `Cho chạy chính thức`.
+- **Vòng quay không hiển thị, hiển thị lỗi:**
+  - Kiểm tra tại tab **[Cài đặt vòng quay](../../4-wheel.md)**: cài đặt `Hình ảnh vòng quay` và đủ số lượng như thiết kế.
+
+:::

adman/docs/tutorial-minigame/5-game-page/index.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# Game Page (Template)
+
+Để hiển thị **Minigame** ngoài giao diện website ta cần phải **Lập trình Template (HTML5, CSS3, JavaScript)**.
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />

adman/docs/tutorial-minigame/5-game-page/support-bar.md

@@ -0,0 +1,61 @@
+---
+sidebar_position: 2
+---
+
+# Thanh hỗ trợ
+
+Chuyển sang tab <button className="btn btn-add btn-tab">Game Page</button>, ngay phía dưới là 1 **Thanh hỗ trợ** chữ xanh bao gồm:
+
+![Minigame Support Bar](./img/minigame-startup-gamepage-4.png)
+
+## Xem lịch sử
+
+Xem lại các phiên bản đã chỉnh sửa gần nhất của Template chứa các thông tin cơ bản như:
+
+- Phiên bản
+- Người cập nhật
+- Thời gian
+- Lựa chọn
+
+![Minigame Template 2](./img/minigame-startup-gamepage-2.png)
+
+:::tip
+
+Khi bạn không may gặp vấn đề như bị Xóa nhầm, Lưu nhầm, Code lỗi... Hãy vào **Xem lịch sử**, chọn **Xem nội dung** để lấy lại bản lưu Template trước đó.
+**Lưu ý chỉ hiển thị bản lưu của 10 phiên bản gần nhất**.
+
+:::
+
+## Xem trợ giúp
+
+Hiện thị **2 dòng code bắt buộc phải có** đối với mỗi Minigame, đó là khai báo:
+
+```jsx
+<script>const GAME_ID = 'O4z25JLzP9';</script>
+<script id="hura-am-main" src="https://static.gleecdn.com/am/v1/aman.bundle.js?id=EVjpMnXO"></script>
+// highlight-start
+/* O4z25JLzP9 là ID Minigame */
+/* EVjpMnXO là ID Thư viện Adman */
+// highlight-end
+```
+
+- **ID Mingame:** mỗi 1 game sẽ có 1 id khác nhau.
+- **ID Thư viện Adman:**
+
+  - Với mỗi tài khoản quản trị là tài khoản Adman gốc **đầu tiên**, không tính các tài khoản phụ được thêm sau.
+  - Tất cả Mini game đều chung 1 id thư viện Adman.
+
+## Thư viện files
+
+Tổng hợp các file ảnh đã tải lên, bao gồm:
+
+- **Thư viện chung:** tải và lưu trữ các file chung của toàn bộ Minigame.
+- **File riêng:** tải và lưu trữ các file riêng của mỗi Minigame.
+
+Để tìm hiểu thêm vui lòng vào **[Thư viện files](../../tutorial-adman/files-library)**.
+
+## Dùng template mẫu
+
+Là Template cơ bản chứa toàn bộ **CODE CORE** của Minigame. Tuy nhiên chỉ chủ yếu là phần **Hiển thị vòng quay** và **Tính năng cơ bản (Javascript - Jquery)** chứ không có phần giao diện hoàn chỉnh.
+
+Từ Template mẫu ta có thể phát triển thêm giao diện và các tính năng mở rộng dựa trên những gì cung cấp sẵn từ trước.

adman/docs/tutorial-minigame/6-report.md

@@ -0,0 +1,74 @@
+---
+sidebar_position: 7
+---
+
+# Báo cáo
+
+Là danh sách dữ liệu mà **Minigame** đã thu thập được trong quá trình chạy (hoạt động). Cung cấp cho bạn thông tin để quản lý, kiểm soát, kiểm tra **Minigame** đang hoạt động cũng như phát triển các dự án **Marketing** khác trong tương lai.
+
+:::danger
+
+- **Dữ liệu thu thập** bao gồm nhiều thông tin khác nhau, phục vụ cho nhiều mục đích khác nhau. Tuy nhiên đây là **dữ liệu cá nhân**, vui lòng chỉ sử dụng cho mục đích **Marketing doanh nghiệp**.
+- Khuyến nghị **Marketing** theo hình thức **gửi Email và SMS** thông báo các chương trình khuyến mại đang hoặc sắp diễn ra. Vui lòng **không spam và hạn chế dùng hình thức gọi điện thoại**.
+- **Không chia sẻ, cung cấp, trao đổi, mua bán** dữ liệu với bên thứ 3, làm lộ thông tin khách hàng.
+- **Bảo vệ thông tin khách hàng** là tôn trọng và bảo vệ khách hàng cũng như bảo vệ chính doanh nghiệp của bạn.
+
+:::
+
+Vào một Minigame bất kì, thanh điều hướng ngay bên trái, ấn **Báo cáo**.
+
+## Báo cáo (tổng quát)
+
+Một biểu đồ hiển thị tổng quan hiển thị số liệu trong 1 tuần gần nhất và các thông tin chính :
+
+- Tổng lượt chơi
+- Tổng lượt truy cập
+- Số lượng người tham gia
+
+![Minigame Report](./img/minigame-report-1.png)
+
+## Người chơi
+
+Danh sách người chơi đã truy cập vào **Minigame**, kể cả những người không chơi **Minigame**.
+
+Ấn tab <button className="btn btn-add btn-tab">Người chơi</button>, một danh sách người chơi xuất hiện bao gồm:
+
+- **ID:** id của mỗi người chơi, được tạo tự động.
+- **Khách hàng:** nếu người chơi cập nhật thông tin để chơi Minigame, thông tin sẽ được lưu tại đây.
+- **Lượt chơi:** số lượt mà người chơi đã chơi và thời gian lượt chơi cuối cùng.
+
+![Minigame Report](./img/minigame-report-2.png)
+
+## Người thắng
+
+Danh sách người trúng giải của **Minigame**
+
+Ấn tab <button className="btn btn-add btn-tab">Người thắng</button>, một danh sách người thắng xuất hiện bao gồm:
+
+- **Khách hàng:** thông tin khách hàng (tên, email, sđt).
+- **Giải thưởng:** thông tin giải thưởng (tên giải thưởng, mã giải thưởng và id giải thưởng - được tạo tự động khi người chơi ấn **Nhận giải**).
+- **Thời gian:** thời gian người chơi ấn **Nhận giải** ở **Minigame**.
+- **Nhận giải:** trạng thái giải thưởng hiện tại:
+  - **Chưa nhận:** chưa trao giải đến tay người thắng.
+  - **Đã nhận:** đã trao giải đến tay người thắng.
+- **Chọn:** cập nhật lại thông tin người trúng giải hoặc chỉnh sửa trạng thái giải thưởng đã được trao đến người thắng.
+
+![Minigame Report](./img/minigame-report-3.png)
+
+## Lịch sử lượt chơi
+
+Danh sách lượt chơi của mỗi người chơi (đã điền thông tin và chơi Minigame).
+
+Ấn tab <button className="btn btn-add">Lịch sử lượt chơi</button>, một danh sách lượt chơi xuất hiện bao gồm:
+
+- **Khách hàng:** tên người chơi.
+- **Trúng:** tên giải thưởng đã trúng của lượt chơi đó.
+- **Thời gian:** của lượt chơi đó
+
+![Minigame Report](./img/minigame-report-4.png)
+
+:::tip
+
+Ấn <button className="btn btn-add">[&#10140;] Tải danh sách Excel</button> để tải danh sách dữ liệu đầy đủ dưới dạng file Excel về máy tính.
+
+:::

adman/docs/tutorial-minigame/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "Minigame",
+  "position": 2
+}

adman/docs/tutorial-minigame/index.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# Hướng dẫn Minigame
+
+5 phút để tìm hiểu các khái niệm quan trọng nhất của Minigame.
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />