<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>VIAGIATOT — Hỗ trợ khách hàng</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  .glass { background: rgba(255,255,255,.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.6); }
  .gradient { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%); }
</style>
</head>
<body class="min-h-screen bg-slate-50">

<header class="gradient text-white">
  <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
    <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center text-xl">💬</div>
      <div>
        <div class="font-bold text-lg">VIAGIATOT SUPPORT</div>
        <div class="text-xs opacity-80">Hệ thống CSKH Live Chat</div>
      </div>
    </div>
    <nav class="hidden md:flex gap-6 text-sm">
      <a href="#features" class="hover:underline">Tính năng</a>
      <a href="#how" class="hover:underline">Cách dùng</a>
      <a href="admin/" class="bg-white/20 hover:bg-white/30 px-4 py-2 rounded-lg font-semibold transition">
        🖥️ Vào Dashboard CSKH
      </a>
    </nav>
  </div>
</header>

<section class="gradient text-white pb-24 pt-10">
  <div class="max-w-4xl mx-auto px-6 text-center">
    <h1 class="text-4xl md:text-5xl font-bold mb-4">
      Hỗ trợ khách hàng <span class="text-yellow-300">tức thì</span>
    </h1>
    <p class="text-lg opacity-90 mb-8">
      Live Chat + Ticket + Quản lý khách hàng — tất cả trong một hệ thống
    </p>
    <div class="flex flex-wrap justify-center gap-3">
      <button onclick="document.querySelector('button[title=\'Hỗ trợ khách hàng\']').click()"
        class="bg-white text-violet-700 font-bold px-8 py-3 rounded-xl shadow-lg hover:scale-105 transition">
        💬 Thử chat ngay
      </button>
      <a href="admin/"
        class="bg-white/20 hover:bg-white/30 font-semibold px-8 py-3 rounded-xl transition">
        🖥️ Dashboard CSKH
      </a>
    </div>
  </div>
</section>

<section class="max-w-6xl mx-auto px-6 -mt-16 mb-12">
  <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
    <div class="glass rounded-2xl p-5 text-center shadow-lg">
      <div class="text-3xl font-bold text-violet-700">0</div>
      <div class="text-xs text-slate-600 mt-1">💬 Cuộc chat</div>
    </div>
    <div class="glass rounded-2xl p-5 text-center shadow-lg">
      <div class="text-3xl font-bold text-violet-700">0</div>
      <div class="text-xs text-slate-600 mt-1">👥 Khách hàng</div>
    </div>
    <div class="glass rounded-2xl p-5 text-center shadow-lg">
      <div class="text-3xl font-bold text-violet-700">0</div>
      <div class="text-xs text-slate-600 mt-1">📨 Tin nhắn</div>
    </div>
    <div class="glass rounded-2xl p-5 text-center shadow-lg">
      <div class="text-3xl font-bold text-violet-700">0</div>
      <div class="text-xs text-slate-600 mt-1">🎫 Ticket</div>
    </div>
    <div class="glass rounded-2xl p-5 text-center shadow-lg">
      <div class="text-3xl font-bold text-emerald-600">0</div>
      <div class="text-xs text-slate-600 mt-1">🔥 Hôm nay</div>
    </div>
  </div>
</section>

<section id="features" class="max-w-6xl mx-auto px-6 py-12">
  <h2 class="text-3xl font-bold text-center mb-10 text-slate-800">✨ Tính năng nổi bật</h2>
  <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-white rounded-2xl p-6 shadow hover:shadow-lg transition border border-slate-100">
      <div class="text-4xl mb-3">💬</div>
      <h3 class="font-bold text-lg mb-2 text-slate-800">Live Chat Realtime</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Khách nhắn tin, CSKH phản hồi trong vài giây.</p>
    </div>
        <div class="bg-white rounded-2xl p-6 shadow hover:shadow-lg transition border border-slate-100">
      <div class="text-4xl mb-3">🎫</div>
      <h3 class="font-bold text-lg mb-2 text-slate-800">Hệ thống Ticket</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Vấn đề phức tạp chuyển thành ticket, theo dõi đến khi xong.</p>
    </div>
        <div class="bg-white rounded-2xl p-6 shadow hover:shadow-lg transition border border-slate-100">
      <div class="text-4xl mb-3">👥</div>
      <h3 class="font-bold text-lg mb-2 text-slate-800">Hồ sơ khách hàng</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Lịch sử chat, đơn hàng, nạp tiền — tất cả 1 nơi.</p>
    </div>
        <div class="bg-white rounded-2xl p-6 shadow hover:shadow-lg transition border border-slate-100">
      <div class="text-4xl mb-3">⚡</div>
      <h3 class="font-bold text-lg mb-2 text-slate-800">Câu trả lời nhanh</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Gõ /nap /baohanh — tự động chèn mẫu có sẵn.</p>
    </div>
        <div class="bg-white rounded-2xl p-6 shadow hover:shadow-lg transition border border-slate-100">
      <div class="text-4xl mb-3">🔔</div>
      <h3 class="font-bold text-lg mb-2 text-slate-800">Thông báo tức thì</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Âm thanh + popup khi có khách mới.</p>
    </div>
        <div class="bg-white rounded-2xl p-6 shadow hover:shadow-lg transition border border-slate-100">
      <div class="text-4xl mb-3">📱</div>
      <h3 class="font-bold text-lg mb-2 text-slate-800">Responsive</h3>
      <p class="text-sm text-slate-600 leading-relaxed">Chạy tốt trên điện thoại, tablet và desktop.</p>
    </div>
      </div>
</section>

<section id="how" class="bg-white py-16">
  <div class="max-w-4xl mx-auto px-6">
    <h2 class="text-3xl font-bold text-center mb-10 text-slate-800">🚀 Bắt đầu trong 3 bước</h2>
    <div class="space-y-6">
            <div class="flex gap-4 items-start">
        <div class="w-12 h-12 rounded-full gradient text-white flex items-center justify-center font-bold text-lg shrink-0">1</div>
        <div class="flex-1 pt-1">
          <h3 class="font-bold text-lg text-slate-800">Khách mở chat</h3>
          <p class="text-slate-600 text-sm mt-1">Bấm nút 💬 góc phải → chọn loại vấn đề → điền tên → bắt đầu chat.</p>
        </div>
      </div>
            <div class="flex gap-4 items-start">
        <div class="w-12 h-12 rounded-full gradient text-white flex items-center justify-center font-bold text-lg shrink-0">2</div>
        <div class="flex-1 pt-1">
          <h3 class="font-bold text-lg text-slate-800">CSKH tiếp nhận</h3>
          <p class="text-slate-600 text-sm mt-1">Vào Dashboard → thấy chat mới → nhấn vào → trả lời trực tiếp.</p>
        </div>
      </div>
            <div class="flex gap-4 items-start">
        <div class="w-12 h-12 rounded-full gradient text-white flex items-center justify-center font-bold text-lg shrink-0">3</div>
        <div class="flex-1 pt-1">
          <h3 class="font-bold text-lg text-slate-800">Kết thúc & đánh giá</h3>
          <p class="text-slate-600 text-sm mt-1">Vấn đề xong → đóng chat → khách đánh giá trải nghiệm.</p>
        </div>
      </div>
          </div>
  </div>
</section>

<section class="max-w-4xl mx-auto px-6 py-16">
  <div class="bg-gradient-to-br from-violet-50 to-pink-50 border border-violet-200 rounded-2xl p-8">
    <h2 class="text-2xl font-bold mb-4 text-slate-800">🔌 Nhúng vào website của bạn</h2>
    <p class="text-slate-600 mb-4 text-sm">
      Dán đoạn code sau vào trước <code class="bg-white px-2 py-0.5 rounded">&lt;/body&gt;</code>:
    </p>
    <pre class="bg-slate-900 text-emerald-300 p-4 rounded-xl text-xs overflow-x-auto"><code>&lt;script src="https://hotro.j2code.site/chat-widget.js"&gt;&lt;/script&gt;</code></pre>
  </div>
</section>

<footer class="bg-slate-900 text-slate-400 py-8 text-center text-sm">
  <div class="mb-2"><span class="font-bold text-white">VIAGIATOT SUPPORT</span> © 2026</div>
  <div class="flex justify-center gap-6">
    <a href="admin/" class="hover:text-white transition">🖥️ Dashboard</a>
    <a href="api/hash.php?p=admin123" class="hover:text-white transition">🔑 Tạo hash</a>
  </div>
</footer>

<script src="chat-widget.js"></script>
</body>
</html>