Update 13/04/2023

adman/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

adman/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

adman/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

adman/blog/authors.yml

@@ -0,0 +1,23 @@
+duc_quan:
+  name: Nguyen Duc Quan
+  title: Hurasoft FE Developer
+  url: https://www.hurasoft.vn/
+  image_url: https://lh3.googleusercontent.com/a/AGNmyxZSCSTQNXvfZcd2BTjR9tMAr6WpvwftkMV6yC1w=s83-c-mo
+
+nguyen_an:
+  name: Nguyen Van An
+  title: Hurasoft FE Developer
+  url: https://www.hurasoft.vn/
+  image_url: https://lh3.googleusercontent.com/a/AGNmyxZEo4KFmZU4BU1bfZYW8VEceNMjnE3pH1m1FWmE=s83-c-mo
+
+dao_duc:
+  name: Đào Đức
+  title: Hurasoft FE Developer
+  url: https://www.hurasoft.vn/
+  image_url: https://i.pinimg.com/736x/94/f1/c2/94f1c23356efabd95c77d81434df6408.jpg
+
+van_tiep:
+  name: Văn Tiệp
+  title: Hurasoft FE Developer
+  url: https://www.hurasoft.vn/
+  image_url: https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ba899107-378e-446c-8d6e-c659d4153e64/d7tku2p-fcf3d3e0-05c6-42d5-9570-ce5d711a70c5.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2JhODk5MTA3LTM3OGUtNDQ2Yy04ZDZlLWM2NTlkNDE1M2U2NFwvZDd0a3UycC1mY2YzZDNlMC0wNWM2LTQyZDUtOTU3MC1jZTVkNzExYTcwYzUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.j3STfTf1nNlAoSoUoC4HP_49IRI4YofABeaBbgKOnTc

adman/blog/minigame-audio-1/index.md

@@ -0,0 +1,22 @@
+---
+slug: vong-quay-audio-1
+title: Vòng quay Audio 1
+authors: [duc_quan]
+tags: [minigame, vòng quay, vòng quay 8]
+---
+
+**Mẫu Audio 1** vô cùng đẹp mắt với màu **Xanh đậm** là chủ đạo. Có ảnh nền **Đêm Trung thu đầy đèn lồng** tạo ra cảm giác thoải thân thuộc, hoài niệm tuổi thơ của biết bao người.
+
+![Minigame Demo](./minigame-audio-1-1.png)
+
+![Minigame Demo](./minigame-audio-1-2.png)
+
+![Minigame Demo](./minigame-audio-1-3.png)
+
+![Minigame Demo](./minigame-audio-1-4.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=kHMKvjwWMn)**
+
+:::

adman/blog/minigame-audio-2/index.md

@@ -0,0 +1,22 @@
+---
+slug: vong-quay-audio-2
+title: Vòng quay Audio 2
+authors: [duc_quan]
+tags: [minigame, vòng quay, vòng quay 12]
+---
+
+**Mẫu Audio 2** vô cùng đẹp mắt với màu **Đen và Vàng** là chủ đạo. Có ảnh banner đầu trang tạo điểm nhấn, kích thước toàn trang ngắn ngọn, sử dụng popup hiển thị và nổi bật là vòng quay với sắc viền sắc vàng tạo vẻ đẹp đầy sang trọng.
+
+![Minigame Demo](./minigame-audio-2-1.png)
+
+![Minigame Demo](./minigame-audio-2-2.png)
+
+![Minigame Demo](./minigame-audio-2-3.png)
+
+![Minigame Demo](./minigame-audio-2-4.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=Nf7XskVqwz)**
+
+:::

adman/blog/minigame-dem-xanh-1/index.md

@@ -0,0 +1,20 @@
+---
+slug: vong-quay-dem-xanh-1
+title: Vòng quay Đệm xanh 1
+authors: [nguyen_an]
+tags: [minigame, vòng quay, vòng quay 8]
+---
+
+**Mẫu đệm xanh 1** vô cùng đẹp mắt với màu **Đỏ** là chủ đạo, ảnh nền tạo không khí Tết cổ truyền đặc chưng của người Việt.
+
+![Minigame Demo](./minigame-dem-xanh-1-2.png)
+
+![Minigame Demo](./minigame-dem-xanh-1-1.png)
+
+![Minigame Demo](./minigame-dem-xanh-1-3.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=nkCYmz23v6)**
+
+:::

adman/blog/minigame-dem-xanh-2/index.md

@@ -0,0 +1,22 @@
+---
+slug: vong-quay-dem-xanh-2
+title: Vòng quay Đệm xanh 2
+authors: [duc_quan]
+tags: [minigame, vòng quay, vòng quay 8]
+---
+
+**Mẫu đệm xanh 2** vô cùng đẹp mắt với màu **Xanh** là chủ đạo. Có ảnh banner đầu trang tạo điểm nhấn, ảnh nền **Xanh biếc** tạo ra cảm giác thoải mái dễ chịu như đi biển vậy.
+
+![Minigame Demo](./minigame-dem-xanh-2-1.png)
+
+![Minigame Demo](./minigame-dem-xanh-2-2.png)
+
+![Minigame Demo](./minigame-dem-xanh-2-3.png)
+
+![Minigame Demo](./minigame-dem-xanh-2-4.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=O4z25JLzP9)**
+
+:::

adman/blog/minigame-hacom-1/index.md

@@ -0,0 +1,22 @@
+---
+slug: vong-quay-hacom-1
+title: Vòng quay Hacom 1
+authors: [van_tiep]
+tags: [minigame, vòng quay, vòng quay 8]
+---
+
+**Mẫu Hacom 1** vô cùng đẹp mắt với màu **Xanh nước biển** là chủ đạo. Có ảnh nền **Góc phố Hồng Kông về đêm** vô cùng bắt mắt, vô cùng sống động, tràn đầy sức sống.
+
+![Minigame Demo](./minigame-hacom-1-1.png)
+
+![Minigame Demo](./minigame-hacom-1-2.png)
+
+![Minigame Demo](./minigame-hacom-1-3.png)
+
+![Minigame Demo](./minigame-hacom-1-4.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=ewhCcHFcs0)**
+
+:::

adman/blog/minigame-hacom-2/index.md

@@ -0,0 +1,22 @@
+---
+slug: vong-quay-hacom-2
+title: Vòng quay Hacom 2
+authors: [van_tiep]
+tags: [minigame, vòng quay, vòng quay 8]
+---
+
+**Mẫu Hacom 2** vô cùng đẹp mắt với màu **Đỏ** là chủ đạo. Có ảnh banner đầu trang tạo điểm nhấn, ảnh nền **Hồng cá tính** tạo ra cảm giác thoải mái dễ thương như các bé xinh xắn đáng yêu vậy.
+
+![Minigame Demo](./minigame-hacom-2-1.png)
+
+![Minigame Demo](./minigame-hacom-2-2.png)
+
+![Minigame Demo](./minigame-hacom-2-3.png)
+
+![Minigame Demo](./minigame-hacom-2-4.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=e7e3PBA4MQ)**
+
+:::

adman/blog/minigame-tuticare-1/index.md

@@ -0,0 +1,20 @@
+---
+slug: vong-quay-tuiticare-1
+title: Vòng quay Tuiticare 1
+authors: [dao_duc]
+tags: [minigame, vòng quay, vòng quay 6]
+---
+
+**Mẫu Tuiticare 1** vô cùng đẹp mắt với màu **Hồng** là chủ đạo. Có ảnh banner đầu trang tạo điểm nhấn, ảnh nền **Hồng cá tính** tạo ra cảm giác thoải mái dễ thương như các bé xinh xắn đáng yêu vậy.
+
+![Minigame Demo](./minigame-tuiticare-1-1.png)
+
+![Minigame Demo](./minigame-tuiticare-1-2.png)
+
+![Minigame Demo](./minigame-tuiticare-1-3.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=3iVqW4zSNu)**
+
+:::

adman/blog/minigame-tuticare-2/index.md

@@ -0,0 +1,24 @@
+---
+slug: vong-quay-tuiticare-2
+title: Vòng quay Tuiticare 2
+authors: [dao_duc]
+tags: [minigame, vòng quay, vòng quay 8]
+---
+
+**Mẫu Tuiticare 2** vô cùng đẹp mắt với màu **Hồng nhạt** là chủ đạo. Có ảnh banner đầu trang tạo điểm nhấn, ảnh nền **Hồng nhạt êm dịu** tạo ra cảm giác thoải mái dễ thương như các bé xinh xắn đáng yêu vậy.
+
+![Minigame Demo](./minigame-tuticare-2-1.png)
+
+![Minigame Demo](./minigame-tuticare-2-2.png)
+
+![Minigame Demo](./minigame-tuticare-2-3.png)
+
+![Minigame Demo](./minigame-tuticare-2-4.png)
+
+![Minigame Demo](./minigame-tuticare-2-5.png)
+
+:::tip
+
+Bạn có thể tham khảo thêm tại **[Đây](https://app.adman.vn/api/preview/minigame.php?id=fTD2cqGSa0)**
+
+:::

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 />

adman/docusaurus.config.js

@@ -0,0 +1,173 @@
+// @ts-check
+// Note: type annotations allow type checking and IDEs autocompletion
+
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+
+const currentVersionName = '1.1.0';
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+  title: 'Adman',
+  tagline: 'Quản trị marketing hiệu quả cao, chi phí thấp.',
+  favicon: 'img/favicon.ico',
+
+  // Set the production url of your site here
+  url: 'https://adman-docs-project-site.com',
+  // Set the /<baseUrl>/ pathname under which your site is served
+  // For GitHub pages deployment, it is often '/<projectName>/'
+  baseUrl: '/',
+
+  // GitHub pages deployment config.
+  // If you aren't using GitHub pages, you don't need these.
+  organizationName: 'quan@hura', // Usually your GitHub org/user name.
+  projectName: 'adman-docs', // Usually your repo name.
+
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+
+  // Even if you don't use internalization, you can use this field to set useful
+  // metadata like html lang. For example, if your site is Chinese, you may want
+  // to replace "en" with "zh-Hans".
+  i18n: {
+    defaultLocale: 'en',
+    locales: ['en'],
+  },
+
+  noIndex: true,
+
+  presets: [
+    [
+      'classic',
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          lastVersion: 'current',
+          versions: {
+            current: {
+              label: currentVersionName,
+            },
+          },
+          sidebarPath: require.resolve('./sidebars.js'),
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          // editUrl:
+          //   'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+        },
+        blog: {
+          showReadingTime: true,
+          // Please change this to your repo.
+          // Remove this to remove the "edit this page" links.
+          editUrl:
+            'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      }),
+    ],
+  ],
+
+  plugins: [
+    ['@docusaurus/theme-live-codeblock', {
+      id: 'plugin-1',
+    }],
+    [
+      require.resolve("@easyops-cn/docusaurus-search-local"),
+      /* @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
+      ({
+        // ... Your options.
+        // `hashed` is recommended as long-term-cache of index file is possible.
+        hashed: true,
+        indexBlog: false,
+      }),
+    ],
+  ],
+
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      // Replace with your project's social card
+      image: 'img/docusaurus-social-card.jpg',
+      navbar: {
+        title: 'Adman',
+        logo: {
+          alt: 'Logo',
+          src: 'img/logo.svg',
+        },
+        items: [
+          {
+            type: 'docSidebar',
+            sidebarId: 'tutorialSidebar',
+            position: 'left',
+            label: 'Hướng dẫn',
+          },
+          { to: '/blog', label: 'Sản phẩm', position: 'left' },
+          {
+            type: 'docsVersionDropdown',
+            position: 'right',
+            dropdownActiveClassDisabled: true,
+          },
+          {
+            href: 'https://github.com/facebook/docusaurus',
+            label: 'GitHub',
+            position: 'right',
+          },
+        ],
+      },
+      footer: {
+        style: 'dark',
+        links: [
+          {
+            title: 'Tài liệu',
+            items: [
+              {
+                label: 'Hướng dẫn',
+                to: '/docs/intro',
+              },
+            ],
+          },
+          {
+            title: 'Cộng đồng',
+            items: [
+              {
+                label: 'Stack Overflow',
+                href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+              },
+              {
+                label: 'Discord',
+                href: 'https://discordapp.com/invite/docusaurus',
+              },
+              {
+                label: 'Twitter',
+                href: 'https://twitter.com/docusaurus',
+              },
+            ],
+          },
+          {
+            title: 'Tiện ích',
+            items: [
+              {
+                label: 'Sản phẩm',
+                to: '/blog',
+              },
+              {
+                label: 'GitHub',
+                href: 'https://github.com/facebook/docusaurus',
+              },
+            ],
+          },
+        ],
+        copyright: `Copyright © ${new Date().getFullYear()} Adman Hurasoft Project, Inc. Built with Docusaurus.`,
+      },
+      prism: {
+        theme: lightCodeTheme,
+        darkTheme: darkCodeTheme,
+      },
+      liveCodeBlock: {
+        playgroundPosition: 'bottom',
+      },
+    }),
+};
+
+module.exports = config;

adman/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "adman-docs",
+  "version": "1.1.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.4.0",
+    "@docusaurus/plugin-content-docs": "^2.4.0",
+    "@docusaurus/preset-classic": "2.4.0",
+    "@docusaurus/theme-live-codeblock": "^2.4.0",
+    "@easyops-cn/docusaurus-search-local": "^0.35.0",
+    "@mdx-js/react": "^1.6.22",
+    "clsx": "^1.2.1",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@docusaurus/module-type-aliases": "2.4.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "engines": {
+    "node": ">=16.14"
+  }
+}

adman/sidebars.js

@@ -0,0 +1,33 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+// @ts-check
+
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  // By default, Docusaurus generates a sidebar from the docs folder structure
+  tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
+
+  // But you can create a sidebar manually
+  /*
+  tutorialSidebar: [
+    'intro',
+    'hello',
+    {
+      type: 'category',
+      label: 'Tutorial',
+      items: ['tutorial-basics/create-a-document'],
+    },
+  ],
+   */
+};
+
+module.exports = sidebars;

adman/src/components/HomepageFeatures/index.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+const FeatureList = [
+  {
+    title: 'Dễ sử dụng',
+    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    description: (
+      <>
+        Adman được thiết kế để dễ dàng cài đặt và sử dụng
+        tạo Minigame hoạt động và chạy một cách nhanh chóng.
+      </>
+    ),
+  },
+  {
+    title: 'Tập trung UX / UI và Marketing',
+    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    description: (
+      <>
+        Thu thập thông tin khách hàng tiềm năng.
+        Tăng tương tác với thương hiệu, tăng lượng truy cập vào website, kích thích mua sắm ...
+      </>
+    ),
+  },
+  {
+    title: 'Cung cấp bởi Hurasoft',
+    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    description: (
+      <>
+        Hurasoft chuyên tư vấn và triển khai các giải pháp thương mại điện tử tổng thể
+        cho các doanh nghiệp từ khởi đầu kinh doanh đến quy mô lớn.
+      </>
+    ),
+  },
+];
+
+function Feature({ Svg, title, description }) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} role="img" />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

adman/src/components/HomepageFeatures/styles.module.css

@@ -0,0 +1,11 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

adman/src/css/custom.css

@@ -0,0 +1,65 @@
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-lightest: #4fddbf;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+.img_node_modules-\@docusaurus-theme-classic-lib-theme-MDXComponents-Img-styles-module {
+  display: flex;
+  margin: 0 auto;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+}
+
+.btn {
+  height: 32px;
+  border: 0;
+  outline: 0;
+  font-size: 15px;
+  padding: 0 10px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.045);
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+  margin: 4px 8px;
+}
+
+.btn-submit {
+  background: #1890ff;
+  color: #fff;
+}
+
+.btn-add {
+  background: #fff;
+  color: #1890ff;
+}
+
+.btn-tab {
+  text-decoration: underline;
+}
+
+.btn-figpie {
+  background: #b3467f;
+}

adman/src/pages/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import HomepageFeatures from '@site/src/components/HomepageFeatures';
+
+import styles from './index.module.css';
+
+const homepageHeaderData = {
+  title: 'Minigame',
+  tagline: 'Minigame siêu hay',
+  description: 'Hướng dẫn Minigame - 5 phút ⏱️'
+}
+
+function HomepageHeader() {
+  return (
+    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{homepageHeaderData.title}</h1>
+        <p className="hero__subtitle">{homepageHeaderData.tagline}</p>
+        <div className={styles.buttons}>
+          <Link className="button button--secondary button--lg" to="/docs/intro">
+            {homepageHeaderData.description}
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={`${siteConfig.title}`}
+      description="Hướng dẫn tạo Minigame trong quản trị Adman Hurasoft">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}

adman/src/pages/index.module.css

@@ -0,0 +1,23 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

adman/src/pages/markdown-page.md

@@ -0,0 +1,7 @@
+---
+title: Markdown page example
+---
+
+# Markdown page example
+
+You don't need React to write simple standalone pages.