Spaces:

vipsphi
/

luadao

Sleeping

App Files Files Community

vipsphi commited on 26 days ago

Commit

c135c3c

verified ·

1 Parent(s): 2ce98e2

Upload 2 files

Browse files

Files changed (2) hide show

public/docs.html +395 -0
public/index.html +960 -0

public/docs.html ADDED Viewed

	@@ -0,0 +1,395 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>API Documentation - Professional Captcha Solver</title>
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
+  <link rel="stylesheet"
+    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" />
+  <style>
+    body {
+      background-color: #0d1117;
+      color: #c9d1d9;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
+        Arial, sans-serif;
+    }
+    .sidebar {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      z-index: 100;
+      padding: 48px 0 0;
+      box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.1);
+      width: 280px;
+      background-color: #161b22;
+    }
+    .sidebar-sticky {
+      position: relative;
+      top: 0;
+      height: calc(100vh - 48px);
+      padding-top: 0.5rem;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+    .nav-link {
+      font-weight: 500;
+      color: #8b949e;
+      margin-bottom: 5px;
+    }
+    .nav-link:hover,
+    .nav-link.active {
+      color: #58a6ff;
+      background-color: rgba(255, 255, 255, 0.05);
+      border-radius: 6px;
+    }
+    main {
+      margin-left: 280px;
+      padding: 40px;
+    }
+    h1,
+    h2,
+    h3 {
+      color: #ffffff;
+      margin-top: 40px;
+      margin-bottom: 20px;
+      border-bottom: 1px solid #30363d;
+      padding-bottom: 10px;
+    }
+    h1 {
+      margin-top: 0;
+      border: none;
+    }
+    .card {
+      background-color: #161b22;
+      border: 1px solid #30363d;
+      margin-bottom: 20px;
+    }
+    .card-header {
+      background-color: #21262d;
+      border-bottom: 1px solid #30363d;
+      font-weight: bold;
+      color: #fff;
+    }
+    code {
+      color: #ff7b72;
+      word-wrap: break-word;
+    }
+    pre {
+      background-color: #0d1117;
+      border-radius: 6px;
+      padding: 15px;
+      border: 1px solid #30363d;
+    }
+    .badge-method {
+      background: #238636;
+      color: white;
+      padding: 5px 10px;
+      border-radius: 4px;
+      font-weight: bold;
+    }
+    .table {
+      color: #c9d1d9;
+    }
+    .table-dark {
+      --bs-table-bg: #161b22;
+    }
+    .api-endpoint {
+      background: #161b22;
+      padding: 15px;
+      border-radius: 6px;
+      border: 1px solid #30363d;
+      font-family: monospace;
+      font-size: 1.1em;
+      color: #a5d6ff;
+    }
+    .highlight-box {
+      background: rgba(56, 139, 253, 0.1);
+      border-left: 4px solid #58a6ff;
+      padding: 15px;
+      margin: 20px 0;
+      border-radius: 0 6px 6px 0;
+    }
+    .step-badge {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      background: #58a6ff;
+      color: #0d1117;
+      border-radius: 50%;
+      text-align: center;
+      line-height: 24px;
+      font-weight: bold;
+      margin-right: 10px;
+    }
+  </style>
+</head>
+<body>
+  <nav class="sidebar">
+    <div class="position-sticky sidebar-sticky px-3">
+      <h4 class="text-white px-3 mb-4">📚 API Docs</h4>
+      <ul class="nav flex-column">
+        <li class="nav-item">
+          <a class="nav-link active" href="#intro">Giới thiệu</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#auth">Xác thực (Auth)</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#endpoint">API Endpoint</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#proxy">Cấu hình Proxy</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#integration">Quy trình Tích hợp</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#nodejs">Code mẫu: Node.js</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#python">Code mẫu: Python</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#csharp">Code mẫu: C#</a>
+        </li>
+      </ul>
+      <div class="mt-5 px-3">
+        <a href="/" class="btn btn-outline-primary w-100">← Quay lại Dashboard</a>
+      </div>
+    </div>
+  </nav>
+  <main>
+    <section id="intro">
+      <h1>Giới thiệu</h1>
+      <p class="lead">
+        Enterprise Captcha Solver cung cấp giải pháp tự động vượt qua các hệ thống bảo mật captcha tiên tiến nhất hiện
+        nay.
+      </p>
+      <div class="highlight-box">
+        <strong>Smart Config Implementation:</strong> Hệ thống của chúng tôi sử dụng công nghệ "Smart Selection".
+      </div>
+    </section>
+    <section id="auth">
+      <h2>�� Xác thực (Authentication)</h2>
+      <p>
+        Mọi request gửi đến API đều cần phải có
+        <strong>x-api-key</strong> trong Header.
+      </p>
+      <pre><code class="language-http">x-api-key: YOUR_API_KEY_HERE</code></pre>
+    </section>
+    <section id="endpoint">
+      <h2>📡 API Endpoint</h2>
+      <p>Gửi yêu cầu POST đến địa chỉ sau để nhận Token:</p>
+      <div class="api-endpoint mb-4">
+        <span class="badge-method me-2">POST</span>
+        https://kinxsoftware.online/api/solve
+      </div>
+      <pre><code class="language-json">{
+  "action": "FLOW_GENERATION",
+  "proxy": "http://user:pass@ip:port"
+}</code></pre>
+    </section>
+    <section id="proxy">
+      <h2>🌐 Cấu hình Proxy</h2>
+      <p>Hệ thống hỗ trợ truyền Proxy riêng biệt cho mỗi yêu cầu. Khi được truyền vào, trình duyệt giải captcha sẽ sử
+        dụng Proxy này để tránh bị Google chặn IP.</p>
+      <div class="card">
+        <div class="card-header">Định dạng Proxy hỗ trợ</div>
+        <div class="card-body text-light">
+          <ul>
+            <li><strong>Không xác thực:</strong> <code>http://host:port</code></li>
+            <li><strong>Có xác thực:</strong> <code>http://username:password@host:port</code></li>
+          </ul>
+          <p class="mb-0 text-warning"><i class="bi bi-exclamation-triangle"></i> Lưu ý: Hiện tại hệ thống hỗ trợ tốt
+            nhất cho HTTP Proxy.</p>
+        </div>
+      </div>
+    </section>
+    <section id="integration">
+      <h2>⚙️ Quy trình Tích hợp Chuẩn</h2>
+      <p>
+        Sau khi nhận được <code>token</code> thành công, hãy thực hiện tích hợp vào Request mục tiêu theo các bước sau:
+      </p>
+      <h3><span class="step-badge">1</span> Chèn vào Headers</h3>
+      <p>Thêm các header sau để xác thực Token với máy chủ mục tiêu:</p>
+      <pre><code class="language-http">x-goog-recaptcha-token: [CAPTCHA_TOKEN]
+x-recaptcha-token: [CAPTCHA_TOKEN]</code></pre>
+      <h3><span class="step-badge">2</span> Chèn vào Body (Context)</h3>
+      <p>
+        Trong Payload của request chính, hãy đảm bảo cấu trúc <code>clientContext</code> được thiết lập đúng:
+      </p>
+      <pre><code class="language-json">{
+  "clientContext": {
+    "recaptchaToken": "[CAPTCHA_TOKEN]",
+    "userPaygateTier": "PAYGATE_TIER_TWO",
+    "tool": "PINHOLE"
+  }
+}</code></pre>
+      <h3><span class="step-badge">3</span> Đồng bộ User-Agent</h3>
+      <p>
+        <strong>Quan trọng:</strong> Bạn phải sử dụng đúng User-Agent dưới đây để đảm bảo Token được chấp nhận:
+      </p>
+      <pre><code class="language-text">Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36</code></pre>
+    </section>
+    <section id="nodejs">
+      <h2>🟩 Code mẫu: Node.js (Built-in)</h2>
+      <pre><code class="language-javascript">const http = require('http');
+const https = require('https');
+/**
+ * Script kiểm tra API giải captcha với Proxy
+ * Hỗ trợ cả HTTP và HTTPS, tự động chọn module phù hợp
+ */
+async function testCaptchaWithProxy() {
+    const API_URL = 'https://kinxsoftware.online/api/solve';
+    const API_KEY = 'YOUR_API_KEY_HERE';
+    const PROXY = 'http://user:pass@ip:port';
+    const postData = JSON.stringify({
+        action: 'FLOW_GENERATION',
+        proxy: PROXY
+    });
+    const url = new URL(API_URL);
+    const isHttps = url.protocol === 'https:';
+    const transport = isHttps ? https : http;
+    const options = {
+        hostname: url.hostname,
+        port: url.port || (isHttps ? 443 : 80),
+        path: url.pathname,
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': API_KEY,
+            'Content-Length': Buffer.byteLength(postData)
+        },
+        // Bỏ qua kiểm tra SSL nếu là localhost hoặc server tự cấp chứng chỉ
+        rejectUnauthorized: false
+    };
+    console.log('--- Đang gửi yêu cầu giải captcha với Proxy ---');
+    console.log('URL:', API_URL);
+    console.log('Proxy:', PROXY);
+    const req = transport.request(options, (res) => {
+        let data = '';
+        res.on('data', (chunk) => {
+            data += chunk;
+        });
+        res.on('end', () => {
+            console.log('Phản hồi từ Server:', res.statusCode);
+            try {
+                const jsonResponse = JSON.parse(data);
+                console.log('Kết quả:', JSON.stringify(jsonResponse, null, 2));
+            } catch (e) {
+                console.log('Phản hồi không phải JSON:', data);
+            }
+        });
+    });
+    req.on('error', (e) => {
+        console.error('Lỗi kết nối:', e.message);
+    });
+    req.write(postData);
+    req.end();
+}
+testCaptchaWithProxy();</code></pre>
+    </section>
+    <section id="python">
+      <h2>🐍 Code mẫu: Python (Requests)</h2>
+      <pre><code class="language-python">import requests
+def solve_and_run():
+    # BƯỚC 1: Lấy Token từ API
+    url = "https://kinxsoftware.online/api/solve"
+    payload = {
+        "action": "FLOW_GENERATION",
+        "proxy": "http://user:pass@ip:port" # <-- Thêm proxy tại đây
+    }
+    headers = {"x-api-key": "YOUR_API_KEY_HERE"}
+    res = requests.post(url, json=payload, headers=headers, verify=False)
+    data = res.json()
+    token = data.get("token")
+    print(f"Token: {token}")
+    # BƯỚC 2: Tích hợp vào request mục tiêu (giữ nguyên User-Agent)
+    # ... code tích hợp tiếp theo
+</code></pre>
+    </section>
+    <section id="csharp">
+      <h2>🔷 Code mẫu: C# (HttpClient)</h2>
+      <pre><code class="language-csharp">using System.Net.Http.Json;
+// BƯỚC 1: Lấy Token
+var client = new HttpClient();
+client.DefaultRequestHeaders.Add("x-api-key", "YOUR_API_KEY_HERE");
+var payloadSolver = new {
+    action = "FLOW_GENERATION",
+    proxy = "http://user:pass@ip:port" // <-- Thêm proxy tại đây
+};
+// Gửi yêu cầu giải captcha
+var solverRes = await client.PostAsJsonAsync("https://kinxsoftware.online/api/solve", payloadSolver);
+var solverData = await solverRes.Content.ReadFromJsonAsync&lt;dynamic&gt;();
+string token = solverData.token;
+Console.WriteLine($"Token: {token}");
+</code></pre>
+    </section>
+    <footer class="mt-5 text-center text-muted border-top pt-4">
+      <p>&copy; 2024 Captcha Solver Professional Service.</p>
+    </footer>
+  </main>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+  <script>
+    hljs.highlightAll();
+  </script>
+</body>
+</html>

public/index.html ADDED Viewed

	@@ -0,0 +1,960 @@

+<!DOCTYPE html>
+<html lang="vi">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pro Captcha Solver - Dashboard</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="/socket.io/socket.io.js"></script>
+  <!-- Font Inter for modern look -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+  <style>
+    body {
+      font-family: "Inter", sans-serif;
+    }
+    .modal-enter {
+      animation: fadeIn 0.3s ease-out;
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: scale(0.95);
+      }
+      to {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+    .scrollbar-hide::-webkit-scrollbar {
+      display: none;
+    }
+    .scrollbar-hide {
+      -ms-overflow-style: none;
+      scrollbar-width: none;
+    }
+    /* Sidebar active link style */
+    .nav-item.active {
+      background-color: #f3f4f6;
+      color: #4f46e5;
+      border-right: 3px solid #4f46e5;
+    }
+  </style>
+</head>
+<body class="bg-gray-50 text-gray-800 h-screen overflow-hidden">
+  <!-- AUTH SCREEN (Keep Centered) -->
+  <div id="auth-screen" class="fixed inset-0 z-50 bg-gray-50 flex justify-center items-center">
+    <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md border border-gray-100">
+      <h4 class="text-3xl font-bold text-center mb-2 text-indigo-600">
+        🚀 CaptchaPro
+      </h4>
+      <p class="text-center text-gray-400 mb-8 text-sm">
+        Automated Solver Service
+      </p>
+      <div class="flex border-b border-gray-100 mb-6">
+        <button onclick="switchAuthTab('login')" id="tab-login"
+          class="w-1/2 pb-3 text-center font-bold border-b-2 border-indigo-600 text-indigo-600 transition">
+          Đăng nhập
+        </button>
+        <button onclick="switchAuthTab('register')" id="tab-register"
+          class="w-1/2 pb-3 text-center font-bold text-gray-400 border-b-2 border-transparent hover:text-indigo-500 transition">
+          Đăng ký
+        </button>
+      </div>
+      <div id="login-form">
+        <input type="text" id="l_user"
+          class="w-full p-3 mb-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 transition"
+          placeholder="Username" />
+        <input type="password" id="l_pass"
+          class="w-full p-3 mb-6 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 transition"
+          placeholder="Password" />
+        <button onclick="login()"
+          class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition shadow-lg shadow-indigo-200">
+          ĐĂNG NHẬP
+        </button>
+      </div>
+      <div id="register-form" class="hidden">
+        <input type="text" id="r_user"
+          class="w-full p-3 mb-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 transition"
+          placeholder="New Username" />
+        <input type="password" id="r_pass"
+          class="w-full p-3 mb-6 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 transition"
+          placeholder="New Password" />
+        <button onclick="register()"
+          class="w-full bg-green-500 text-white py-3 rounded-lg font-bold hover:bg-green-600 transition shadow-lg shadow-green-200">
+          ĐĂNG KÝ NGAY
+        </button>
+      </div>
+      <p id="auth-msg" class="text-red-500 text-center mt-4 text-sm font-medium h-5"></p>
+    </div>
+  </div>
+  <!-- MAIN DASHBOARD LAYOUT -->
+  <div id="dashboard" class="flex h-screen hidden">
+    <!-- SIDEBAR -->
+    <aside class="w-64 bg-white border-r border-gray-200 flex flex-col shadow-sm z-20">
+      <div class="h-16 flex items-center px-6 border-b border-gray-100">
+        <span class="text-2xl font-bold text-indigo-600 tracking-tight">🚀 CaptchaPro</span>
+      </div>
+      <div class="p-4">
+        <div class="flex items-center gap-3 p-3 bg-indigo-50 rounded-xl mb-4">
+          <div
+            class="w-10 h-10 rounded-full bg-indigo-200 flex items-center justify-center text-indigo-700 font-bold text-lg">
+            <span id="avatar-char">U</span>
+          </div>
+          <div class="overflow-hidden">
+            <div id="display-name" class="font-bold text-gray-800 truncate">
+              User
+            </div>
+            <div id="user-role" class="text-xs text-indigo-600 font-medium">
+              Member
+            </div>
+          </div>
+        </div>
+      </div>
+      <nav class="flex-1 px-4 space-y-1">
+        <button onclick="showPage('dashboard')" id="nav-dashboard"
+          class="nav-item active w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-50 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
+            </path>
+          </svg>
+          Dashboard
+        </button>
+        <button onclick="showPage('history')" id="nav-history"
+          class="nav-item w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-50 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          Lịch sử
+        </button>
+        <a href="/docs.html" target="_blank"
+          class="nav-item w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-gray-600 rounded-lg hover:bg-gray-50 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 4.168 6.253v13C4.168 19.977 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 19.977 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
+            </path>
+          </svg>
+          Tài liệu API
+        </a>
+      </nav>
+      <div id="sidebar-admin" class="px-4 py-2 hidden mt-2">
+        <div class="text-xs font-bold text-gray-400 uppercase px-2 mb-2 tracking-wider">
+          Admin Control
+        </div>
+        <button onclick="showPage('admin')" id="nav-admin"
+          class="nav-item w-full flex items-center gap-3 px-3 py-3 text-sm font-medium text-red-600 rounded-lg hover:bg-red-50 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
+            </path>
+          </svg>
+          Quản lý hệ thống
+        </button>
+      </div>
+      <div class="p-4 border-t border-gray-100">
+        <button onclick="logout()"
+          class="w-full flex items-center justify-center gap-2 px-4 py-2 text-sm font-bold text-red-500 border border-red-200 rounded-lg hover:bg-red-50 transition">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+              d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
+          </svg>
+          Đăng xuất
+        </button>
+      </div>
+    </aside>
+    <!-- MAIN CONTENT -->
+    <main class="flex-1 overflow-y-auto bg-gray-50 p-8">
+      <!-- PAGE: MAIN DASHBOARD -->
+      <div id="page-dashboard" class="animate-fade-in space-y-6">
+        <!-- Header Mobile (only text) -->
+        <h1 class="text-2xl font-bold text-gray-800 mb-6">Tổng quan</h1>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <!-- Left Column -->
+          <div class="md:col-span-1 space-y-6">
+            <!-- Credit Card -->
+            <div
+              class="bg-gradient-to-br from-indigo-600 to-violet-600 text-white rounded-2xl p-6 shadow-lg shadow-indigo-100 relative overflow-hidden">
+              <div class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-white opacity-10 rounded-full blur-xl"></div>
+              <div class="relative z-10">
+                <p class="text-indigo-100 text-sm font-medium mb-1">
+                  Số dư khả dụng
+                </p>
+                <h1 class="text-5xl font-bold tracking-tight" id="credits">
+                  0
+                </h1>
+                <div class="mt-4 flex items-center gap-2 text-xs font-mono bg-black/20 p-2 rounded-lg truncate">
+                  <span class="text-gray-300">KEY:</span>
+                  <span id="api-key" class="text-white select-all">...</span>
+                </div>
+              </div>
+            </div>
+            <!-- Deposit Options -->
+            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
+              <h5 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
+                <span class="bg-green-100 text-green-600 p-1.5 rounded-lg text-xs">💎</span>
+                Nạp thêm Credits
+              </h5>
+              <div class="space-y-3">
+                <button onclick="openDepositModal(1)"
+                  class="w-full flex justify-between items-center p-3 border border-gray-100 rounded-xl hover:border-blue-500 hover:bg-blue-50 transition group">
+                  <span class="text-gray-600 font-medium group-hover:text-blue-600">Gói $1</span>
+                  <span
+                    class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-bold group-hover:bg-blue-200 group-hover:text-blue-800">1,000
+                    Cre</span>
+                </button>
+                <button onclick="openDepositModal(5)"
+                  class="w-full flex justify-between items-center p-3 border border-gray-100 rounded-xl hover:border-green-500 hover:bg-green-50 transition group">
+                  <span class="text-gray-600 font-medium group-hover:text-green-600">Gói $5</span>
+                  <span
+                    class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-bold group-hover:bg-green-200 group-hover:text-green-800">5,000
+                    Cre</span>
+                </button>
+                <button onclick="openDepositModal(10)"
+                  class="w-full flex justify-between items-center p-3 border border-gray-100 rounded-xl hover:border-yellow-500 hover:bg-yellow-50 transition group">
+                  <span class="text-gray-600 font-medium group-hover:text-yellow-600">Gói $10</span>
+                  <span
+                    class="bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-bold group-hover:bg-yellow-200 group-hover:text-yellow-800">10,000
+                    Cre</span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <!-- Right Column: Test API -->
+          <div class="md:col-span-2">
+            <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 h-full flex flex-col">
+              <h5 class="font-bold text-gray-700 mb-4 flex items-center gap-2">
+                <span class="bg-indigo-100 text-indigo-600 p-1.5 rounded-lg text-xs">⚡</span>
+                Test Solver API
+              </h5>
+              <div class="space-y-4 flex-1">
+                <div class="bg-indigo-50/50 rounded-2xl p-6 border border-indigo-100/50">
+                  <div class="flex items-center gap-4 mb-5">
+                    <div class="w-12 h-12 bg-white rounded-xl shadow-sm flex items-center justify-center text-2xl">
+                      🌐
+                    </div>
+                    <div>
+                      <h6 class="font-bold text-gray-800">
+                        Cấu hình tự động
+                      </h6>
+                      <p class="text-xs text-gray-500">
+                        Hệ thống đã tối ưu cho môi trường Google Labs
+                      </p>
+                    </div>
+                  </div>
+                  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div class="bg-white/80 p-3 rounded-xl border border-indigo-100/30">
+                      <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1">
+                        Dịch vụ
+                      </p>
+                      <p class="text-xs font-bold text-indigo-600 truncate">
+                        Sẵn sàng (High Trust)
+                      </p>
+                    </div>
+                    <div class="bg-white/80 p-3 rounded-xl border border-indigo-100/30 text-right">
+                      <p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1 text-right">
+                        Trạng thái cổng
+                      </p>
+                      <div class="flex items-center justify-end gap-1.5">
+                        <span
+                          class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
+                        <span class="text-xs font-bold text-gray-700">HTTPS (443)</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex items-start gap-2 px-2">
+                  <span class="text-indigo-400 text-xs">🛡️</span>
+                  <p class="text-[11px] text-gray-400 leading-relaxed italic">
+                    Hệ thống đã được thiết lập bảo mật đa lớp. Mọi tham số cấu
+                    hình đã được mã hóa và cố định trong lõi xử lý.
+                  </p>
+                </div>
+              </div>
+              <button onclick="solve()" id="btn-solve"
+                class="w-full mt-6 bg-gray-900 text-white py-3 rounded-xl font-bold hover:bg-black transition shadow-lg hover:shadow-xl flex justify-center items-center gap-2">
+                <span>🚀</span> Giải Captcha (-1 Credit)
+              </button>
+              <div class="mt-6">
+                <label class="block text-xs font-bold text-gray-400 mb-1 uppercase">Terminal Output</label>
+                <textarea id="result-log"
+                  class="w-full bg-gray-900 text-green-400 font-mono text-xs p-3 rounded-xl h-32 focus:outline-none resize-none"
+                  readonly placeholder="Waiting for command..."></textarea>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- PAGE: HISTORY -->
+      <div id="page-history" class="hidden animate-fade-in">
+        <div class="flex justify-between items-center mb-6">
+          <h1 class="text-2xl font-bold text-gray-800">Lịch sử hoạt động</h1>
+        </div>
+        <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
+          <div class="px-6 py-4 border-b border-gray-100 flex gap-6">
+            <button onclick="switchHistoryTab('usage')" id="tab-hist-usage"
+              class="pb-2 font-bold text-sm text-indigo-600 border-b-2 border-indigo-600 transition">
+              ⚡ Captcha Logs
+            </button>
+            <button onclick="switchHistoryTab('deposit')" id="tab-hist-deposit"
+              class="pb-2 font-bold text-sm text-gray-400 hover:text-gray-600 transition">
+              💰 Transaction Logs
+            </button>
+          </div>
+          <div class="p-0">
+            <div id="hist-usage-content">
+              <div class="overflow-auto max-h-[600px] scrollbar-hide">
+                <table class="w-full text-sm text-left">
+                  <thead class="bg-gray-50 text-gray-500 font-medium">
+                    <tr>
+                      <th class="p-4 pl-6">Thời gian</th>
+                      <th class="p-4">Hành động</th>
+                      <th class="p-4">Chi tiết</th>
+                    </tr>
+                  </thead>
+                  <tbody id="table-usage-body" class="divide-y divide-gray-50"></tbody>
+                </table>
+              </div>
+            </div>
+            <div id="hist-deposit-content" class="hidden">
+              <div class="overflow-auto max-h-[600px] scrollbar-hide">
+                <table class="w-full text-sm text-left">
+                  <thead class="bg-gray-50 text-gray-500 font-medium">
+                    <tr>
+                      <th class="p-4 pl-6">Thời gian</th>
+                      <th class="p-4">Số tiền</th>
+                      <th class="p-4">Phương thức</th>
+                      <th class="p-4">Trạng thái</th>
+                    </tr>
+                  </thead>
+                  <tbody id="table-deposit-body" class="divide-y divide-gray-50"></tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- PAGE: ADMIN -->
+      <div id="page-admin" class="hidden animate-fade-in">
+        <div class="flex justify-between items-center mb-6">
+          <h1 class="text-2xl font-bold text-red-600 flex items-center gap-2">
+            🛡️ Admin Dashboard
+          </h1>
+          <button onclick="loadAdminData()"
+            class="text-sm bg-white border border-gray-200 text-gray-600 px-3 py-1.5 rounded-lg hover:bg-gray-50 font-medium shadow-sm">
+            Làm mới dữ liệu
+          </button>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <!-- Transactions -->
+          <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-[500px]">
+            <div class="p-4 border-b border-gray-100 bg-yellow-50/50">
+              <h3 class="font-bold text-yellow-700">
+                ⌛ Yêu cầu nạp chờ duyệt
+              </h3>
+            </div>
+            <div class="overflow-auto flex-1 scrollbar-hide">
+              <table class="w-full text-sm text-left">
+                <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
+                  <tr>
+                    <th class="p-3 pl-4">User</th>
+                    <th class="p-3">Amount</th>
+                    <th class="p-3">Method</th>
+                    <th class="p-3 text-right pr-4">Action</th>
+                  </tr>
+                </thead>
+                <tbody id="admin-trans-list" class="divide-y divide-gray-50"></tbody>
+              </table>
+            </div>
+          </div>
+          <!-- Users -->
+          <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden flex flex-col h-[500px]">
+            <div class="p-4 border-b border-gray-100 bg-indigo-50/50">
+              <h3 class="font-bold text-indigo-700">
+                👥 Danh sách người dùng
+              </h3>
+            </div>
+            <div class="overflow-auto flex-1 scrollbar-hide">
+              <table class="w-full text-sm text-left">
+                <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
+                  <tr>
+                    <th class="p-3 pl-4">User</th>
+                    <th class="p-3">Credits</th>
+                    <th class="p-3">Role</th>
+                    <th class="p-3 text-right pr-4">Hành động</th>
+                  </tr>
+                </thead>
+                <tbody id="admin-user-list" class="divide-y divide-gray-50"></tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <!-- MODALS (Deposit & Success) - SAME LOGIC, UPDATED STYLES -->
+  <div id="depositModal"
+    class="fixed inset-0 bg-gray-900/50 z-50 hidden flex items-center justify-center backdrop-blur-sm transition-all">
+    <div class="bg-white w-full max-w-md rounded-2xl shadow-2xl transform scale-100 modal-enter mx-4 overflow-hidden">
+      <div class="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
+        <h5 class="font-bold text-lg text-gray-800">
+          Thanh toán
+          <span id="modal-amount-display" class="text-indigo-600">$0</span>
+        </h5>
+        <button onclick="closeModal('depositModal')"
+          class="text-gray-400 hover:text-gray-600 bg-gray-200 rounded-full w-8 h-8 flex items-center justify-center font-bold transition">
+          &times;
+        </button>
+      </div>
+      <div class="p-6">
+        <div class="flex p-1 bg-gray-100 rounded-xl mb-6">
+          <button onclick="switchPaymentMethod('mb')" id="btn-tab-mb"
+            class="flex-1 py-2 rounded-lg text-sm font-bold bg-white text-indigo-600 shadow-sm transition">
+            MBBank
+          </button>
+          <button onclick="switchPaymentMethod('binance')" id="btn-tab-binance"
+            class="flex-1 py-2 rounded-lg text-sm font-bold text-gray-500 hover:text-gray-700 transition">
+            Binance
+          </button>
+        </div>
+        <!-- Content logic remains similar -->
+        <div id="content-mb" class="text-center">
+          <img id="mb-qr-img" src="" class="w-48 h-auto mx-auto border-4 border-white shadow-lg rounded-xl mb-4" />
+          <div class="bg-indigo-50 p-4 rounded-xl text-sm space-y-2 border border-indigo-100 text-left">
+            <div class="flex justify-between">
+              <span class="text-gray-500">Bank</span>
+              <span class="font-bold text-gray-800">MBBank</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-500">Account</span>
+              <span class="font-bold text-indigo-600 select-all">0972121082000</span>
+            </div>
+            <div class="flex justify-between">
+              <span class="text-gray-500">Name</span>
+              <span class="font-bold text-gray-800">NGUYEN NGOC NEN</span>
+            </div>
+            <div class="pt-2 border-t border-indigo-200 flex justify-between">
+              <span class="text-gray-500">Memo</span>
+              <span id="mb-memo" class="font-bold text-red-500 select-all">...</span>
+            </div>
+          </div>
+        </div>
+        <div id="content-binance" class="hidden text-center py-6">
+          <img id="binance-qr-img"
+            src="https://img.upanh.moe/svG8VPr7/z7378722800950-37af8ee1f0cd5dafae8366cb441490ed-jpg.jpg"
+            class="w-48 h-auto mx-auto border-4 border-white shadow-lg rounded-xl mb-4" />
+          <p class="text-sm text-gray-500 mb-2">Binance Pay / Wallet</p>
+          <div class="bg-yellow-50 text-yellow-800 p-3 rounded-xl text-sm font-medium border border-yellow-100">
+            Memo: <span id="bn-memo" class="font-bold">...</span>
+          </div>
+        </div>
+      </div>
+      <div class="p-4 bg-gray-50 border-t border-gray-100 flex justify-end gap-3">
+        <button onclick="closeModal('depositModal')"
+          class="px-4 py-2 text-gray-500 font-bold hover:bg-gray-200 rounded-lg transition">
+          Hủy
+        </button>
+        <button onclick="confirmDeposit()" id="btn-confirm-deposit"
+          class="px-6 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 shadow-lg shadow-indigo-200 transition">
+          ✅ Đã chuyển tiền
+        </button>
+      </div>
+    </div>
+  </div>
+  <!-- Success Modal -->
+  <div id="successModal"
+    class="fixed inset-0 bg-gray-900/60 z-60 hidden flex items-center justify-center backdrop-blur-sm">
+    <div class="bg-white rounded-3xl shadow-2xl p-8 w-full max-w-sm text-center modal-enter mx-4">
+      <div class="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
+        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path>
+        </svg>
+      </div>
+      <h2 class="text-2xl font-bold text-gray-800 mb-2">Thành công!</h2>
+      <p id="success-msg" class="text-gray-500 mb-6">Yêu cầu đã được gửi.</p>
+      <button onclick="closeModal('successModal')"
+        class="w-full py-3 bg-green-600 text-white rounded-xl font-bold hover:bg-green-700 transition">
+        OK
+      </button>
+    </div>
+  </div>
+  <script>
+    const API = "/api";
+    const socket = io();
+    let userKey = localStorage.getItem("apiKey");
+    let currentAmount = 0;
+    let currentMethod = "MBBank";
+    // --- HWID / FINGERPRINT ---
+    function getHWID() {
+      let id = localStorage.getItem("hwid");
+      if (!id) {
+        id =
+          "hw-" + Math.random().toString(36).substr(2, 9) + "-" + Date.now();
+        localStorage.setItem("hwid", id);
+      }
+      return id;
+    }
+    // --- AUTH & INIT ---
+    if (userKey) {
+      refreshMe();
+    } else {
+      document.getElementById("auth-screen").classList.remove("hidden");
+    }
+    function switchAuthTab(tab) {
+      const login = document.getElementById("login-form");
+      const reg = document.getElementById("register-form");
+      const tLog = document.getElementById("tab-login");
+      const tReg = document.getElementById("tab-register");
+      if (tab === "login") {
+        login.classList.remove("hidden");
+        reg.classList.add("hidden");
+        tLog.className =
+          "w-1/2 pb-3 text-center font-bold border-b-2 border-indigo-600 text-indigo-600 transition";
+        tReg.className =
+          "w-1/2 pb-3 text-center font-bold text-gray-400 border-b-2 border-transparent hover:text-indigo-500 transition";
+      } else {
+        login.classList.add("hidden");
+        reg.classList.remove("hidden");
+        tReg.className =
+          "w-1/2 pb-3 text-center font-bold border-b-2 border-green-500 text-green-500 transition";
+        tLog.className =
+          "w-1/2 pb-3 text-center font-bold text-gray-400 border-b-2 border-transparent hover:text-indigo-500 transition";
+      }
+    }
+    async function login() {
+      const u = document.getElementById("l_user").value;
+      const p = document.getElementById("l_pass").value;
+      try {
+        const res = await fetch(`${API}/login`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username: u, password: p }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          localStorage.setItem("apiKey", data.user.api_key);
+          userKey = data.user.api_key;
+          loadUser(data.user);
+        } else document.getElementById("auth-msg").innerText = data.error;
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    async function register() {
+      const u = document.getElementById("r_user").value;
+      const p = document.getElementById("r_pass").value;
+      const hwid = getHWID();
+      const res = await fetch(`${API}/register`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username: u, password: p, hwid: hwid }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        alert(data.message);
+        switchAuthTab("login");
+      } else alert(data.error);
+    }
+    function loadUser(user) {
+      document.getElementById("auth-screen").classList.add("hidden");
+      document.getElementById("dashboard").classList.remove("hidden");
+      document.getElementById("display-name").innerText = user.username;
+      document.getElementById("avatar-char").innerText = user.username
+        .charAt(0)
+        .toUpperCase(); // New Avatar logic
+      document.getElementById("credits").innerText = user.credits;
+      document.getElementById("api-key").innerText = user.api_key;
+      document.getElementById("user-role").innerText =
+        user.role === "admin" ? "Administrator" : "Member";
+      if (user.role === "admin") {
+        document.getElementById("sidebar-admin").classList.remove("hidden");
+      } else {
+        document.getElementById("sidebar-admin").classList.add("hidden");
+      }
+      // Default View
+      showPage("dashboard");
+    }
+    function logout() {
+      localStorage.removeItem("apiKey");
+      location.reload();
+    }
+    // --- NAVIGATION ---
+    function showPage(pageId) {
+      // Hide all
+      document.getElementById("page-dashboard").classList.add("hidden");
+      document.getElementById("page-history").classList.add("hidden");
+      document.getElementById("page-admin").classList.add("hidden");
+      // Remove active styles
+      document
+        .querySelectorAll(".nav-item")
+        .forEach((el) =>
+          el.classList.remove(
+            "active",
+            "bg-indigo-50",
+            "text-indigo-600",
+            "border-r-4",
+            "border-indigo-600"
+          )
+        );
+      // Show Target
+      const target = document.getElementById(`page-${pageId}`);
+      if (target) target.classList.remove("hidden");
+      // Add active style to nav
+      const nav = document.getElementById(`nav-${pageId}`);
+      if (nav) {
+        nav.classList.add("active", "bg-indigo-50", "text-indigo-600");
+      }
+      if (pageId === "history") loadHistoryData();
+      if (pageId === "admin") loadAdminData();
+    }
+    // --- DASHBOARD ACTIONS ---
+    async function solve() {
+      const btn = document.getElementById("btn-solve");
+      const log = document.getElementById("result-log");
+      btn.disabled = true;
+      btn.innerHTML = `<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg> Processing...`;
+      try {
+        const res = await fetch(`${API}/solve`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": userKey,
+          },
+          body: JSON.stringify({ action: "default" }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          log.value = `[SUCCESS] Token received:\n${data.token}`;
+          refreshMe();
+        } else {
+          log.value = `[FAILED] Error: ${data.error}`;
+        }
+      } catch (e) {
+        log.value = `[ERROR] Connection failed: ${e}`;
+      }
+      btn.disabled = false;
+      btn.innerHTML = `<span>🚀</span> Giải Captcha (-1 Credit)`;
+    }
+    // --- DEPOSIT ---
+    function openDepositModal(amount) {
+      currentAmount = amount;
+      const user = document.getElementById("display-name").innerText;
+      const memo = `NAP ${user}`.toUpperCase();
+      const vnd = amount * 25000;
+      document.getElementById(
+        "modal-amount-display"
+      ).innerText = `$${amount}`;
+      document.getElementById(
+        "mb-qr-img"
+      ).src = `https://img.vietqr.io/image/MB-0972121082000-compact2.jpg?amount=${vnd}&addInfo=${encodeURIComponent(
+        memo
+      )}`;
+      document.getElementById("mb-memo").innerText = memo;
+      document.getElementById("bn-memo").innerText = memo;
+      switchPaymentMethod("mb");
+      openModal("depositModal");
+    }
+    function switchPaymentMethod(method) {
+      currentMethod = method === "mb" ? "MBBank" : "Binance";
+      if (method === "mb") {
+        document.getElementById("content-mb").classList.remove("hidden");
+        document.getElementById("content-binance").classList.add("hidden");
+        document.getElementById("btn-tab-mb").className =
+          "flex-1 py-2 rounded-lg text-sm font-bold bg-white text-indigo-600 shadow-sm transition";
+        document.getElementById("btn-tab-binance").className =
+          "flex-1 py-2 rounded-lg text-sm font-bold text-gray-500 hover:text-gray-700 transition";
+      } else {
+        document.getElementById("content-mb").classList.add("hidden");
+        document.getElementById("content-binance").classList.remove("hidden");
+        document.getElementById("btn-tab-binance").className =
+          "flex-1 py-2 rounded-lg text-sm font-bold bg-white text-yellow-600 shadow-sm transition";
+        document.getElementById("btn-tab-mb").className =
+          "flex-1 py-2 rounded-lg text-sm font-bold text-gray-500 hover:text-gray-700 transition";
+      }
+    }
+    async function confirmDeposit() {
+      const btn = document.getElementById("btn-confirm-deposit");
+      const old = btn.innerText;
+      btn.disabled = true;
+      btn.innerText = "...";
+      try {
+        const res = await fetch(`${API}/deposit`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": userKey,
+          },
+          body: JSON.stringify({
+            amount: currentAmount,
+            method: currentMethod,
+          }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          closeModal("depositModal");
+          openModal("successModal");
+        } else alert(data.error);
+      } catch (e) {
+        alert(e.message);
+      }
+      btn.disabled = false;
+      btn.innerText = old;
+    }
+    // --- HISTORY UI ---
+    async function loadHistoryData() {
+      const resU = await fetch(`${API}/history/usage`, {
+        headers: { "x-api-key": userKey },
+      });
+      const dataU = await resU.json();
+      document.getElementById("table-usage-body").innerHTML =
+        dataU
+          .map(
+            (u) => `
+            <tr class="bg-white hover:bg-gray-50 transition border-b border-gray-50/50">
+                <td class="p-4 pl-6 text-xs text-gray-400 font-mono">${new Date(
+              u.timestamp
+            ).toLocaleString()}</td>
+                <td class="p-4 font-bold text-gray-700 text-sm">${u.action}</td>
+                <td class="p-4 text-xs text-gray-400 font-mono truncate max-w-xs" title="${u.details
+              }">${u.details.includes("labs.google") ? "[HIDDEN]" : u.details
+              }</td>
+            </tr>
+         `
+          )
+          .join("") ||
+        '<tr><td colspan="3" class="p-4 text-center text-gray-400 text-sm">Chưa có dữ liệu</td></tr>';
+      const resT = await fetch(`${API}/history/transactions`, {
+        headers: { "x-api-key": userKey },
+      });
+      const dataT = await resT.json();
+      document.getElementById("table-deposit-body").innerHTML =
+        dataT
+          .map((t) => {
+            let color =
+              t.status === "approved"
+                ? "text-green-600 bg-green-50"
+                : t.status === "rejected"
+                  ? "text-red-600 bg-red-50"
+                  : "text-yellow-600 bg-yellow-50";
+            return `
+               <tr class="bg-white hover:bg-gray-50 transition border-b border-gray-50/50">
+                   <td class="p-4 pl-6 text-xs text-gray-400 font-mono">${new Date(
+              t.created_at
+            ).toLocaleString()}</td>
+                   <td class="p-4 font-bold text-gray-800">$${t.amount}</td>
+                   <td class="p-4 text-sm text-gray-500">${t.method}</td>
+                   <td class="p-4"><span class="px-2.5 py-1 rounded-lg text-xs font-bold uppercase ${color}">${t.status
+              }</span></td>
+               </tr>
+             `;
+          })
+          .join("") ||
+        '<tr><td colspan="4" class="p-4 text-center text-gray-400 text-sm">Chưa có dữ liệu</td></tr>';
+    }
+    function switchHistoryTab(tab) {
+      if (tab === "usage") {
+        document
+          .getElementById("hist-usage-content")
+          .classList.remove("hidden");
+        document
+          .getElementById("hist-deposit-content")
+          .classList.add("hidden");
+        document.getElementById("tab-hist-usage").className =
+          "pb-2 font-bold text-sm text-indigo-600 border-b-2 border-indigo-600 transition";
+        document.getElementById("tab-hist-deposit").className =
+          "pb-2 font-bold text-sm text-gray-400 hover:text-gray-600 transition";
+      } else {
+        document.getElementById("hist-usage-content").classList.add("hidden");
+        document
+          .getElementById("hist-deposit-content")
+          .classList.remove("hidden");
+        document.getElementById("tab-hist-deposit").className =
+          "pb-2 font-bold text-sm text-indigo-600 border-b-2 border-indigo-600 transition";
+        document.getElementById("tab-hist-usage").className =
+          "pb-2 font-bold text-sm text-gray-400 hover:text-gray-600 transition";
+      }
+    }
+    // --- ADMIN ---
+    async function loadAdminData() {
+      const resT = await fetch(`${API}/admin/transactions`, {
+        headers: { "x-api-key": userKey },
+      });
+      const dataT = await resT.json();
+      document.getElementById("admin-trans-list").innerHTML =
+        dataT
+          .filter((t) => t.status === "pending")
+          .map(
+            (t) => `
+             <tr class="bg-white hover:bg-yellow-50/30 transition border-b border-gray-50">
+                 <td class="p-3 pl-4 font-bold text-gray-700">${t.username}</td>
+                 <td class="p-3 font-mono text-indigo-600">$${t.amount}</td>
+                 <td class="p-3 text-xs text-gray-400">${t.method}</td>
+                 <td class="p-3 pr-4 text-right flex justify-end gap-1">
+                     <button onclick="processTrans(${t.id}, 'approve')" class="p-1 px-2 rounded bg-green-100 text-green-600 hover:bg-green-200 font-bold text-xs">✔</button>
+                     <button onclick="processTrans(${t.id}, 'reject')" class="p-1 px-2 rounded bg-red-100 text-red-600 hover:bg-red-200 font-bold text-xs">✘</button>
+                 </td>
+             </tr>
+          `
+          )
+          .join("") ||
+        '<tr><td colspan="4" class="p-6 text-center text-gray-300 text-sm italic">Không có yêu cầu nào</td></tr>';
+      const resU = await fetch(`${API}/admin/users`, {
+        headers: { "x-api-key": userKey },
+      });
+      const dataU = await resU.json();
+      document.getElementById("admin-user-list").innerHTML = dataU
+        .map(
+          (u) => `
+              <tr class="bg-white hover:bg-indigo-50/30 transition border-b border-gray-50">
+                  <td class="p-3 pl-4 font-medium text-gray-700">${u.username
+            }</td>
+                  <td class="p-3 font-bold text-gray-800">${u.credits}</td>
+                  <td class="p-3"><span class="px-2 py-0.5 rounded text-[10px] font-bold uppercase ${u.role === "admin"
+              ? "bg-red-100 text-red-600"
+              : "bg-gray-100 text-gray-500"
+            }">${u.role}</span></td>
+                  <td class="p-3 pr-4 text-right">
+                    <button onclick="deleteUser(${u.id}, '${u.username
+            }')" class="text-red-400 hover:text-red-600 transition p-1">
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                      </svg>
+                    </button>
+                  </td>
+              </tr>
+          `
+        )
+        .join("");
+    }
+    async function processTrans(id, act) {
+      if (!confirm(`Xác nhận ${act}?`)) return;
+      await fetch(`${API}/admin/approve`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", "x-api-key": userKey },
+        body: JSON.stringify({ transId: id, action: act }),
+      });
+      loadAdminData();
+      refreshMe();
+    }
+    async function deleteUser(id, name) {
+      if (
+        !confirm(
+          `Bạn có chắc chắn muốn xóa user "${name}"? Thao tác này không thể hoàn tác.`
+        )
+      )
+        return;
+      try {
+        const res = await fetch(`${API}/admin/delete-user`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "x-api-key": userKey,
+          },
+          body: JSON.stringify({ userId: id }),
+        });
+        const data = await res.json();
+        if (data.success) {
+          loadAdminData();
+        } else alert(data.error);
+      } catch (e) {
+        alert(e.message);
+      }
+    }
+    async function refreshMe() {
+      const res = await fetch(`${API}/me`, {
+        headers: { "x-api-key": userKey },
+      });
+      const data = await res.json();
+      if (data.username) loadUser(data);
+      else {
+        localStorage.removeItem("apiKey");
+        location.reload();
+      }
+    }
+    // --- HELPERS ---
+    function openModal(id) {
+      document.getElementById(id).classList.remove("hidden");
+    }
+    function closeModal(id) {
+      document.getElementById(id).classList.add("hidden");
+    }
+    // Socket
+    socket.on("user:credit-update", () => refreshMe());
+    socket.on("transaction-updated", () => loadAdminData());
+    socket.on("admin:new-transaction", () => loadAdminData());
+  </script>
+</body>
+</html>