<?php
error_reporting(E_ALL);
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);

require_once($_SERVER['DOCUMENT_ROOT'] . '/hethong/config.php');
require_once($_SERVER['DOCUMENT_ROOT'] . '/hethong/ketnoi.php');

// ============================================================
// XU LY AJAX KIEM TRA COUPON (PHAI DAT TRUOC TAT CA)
// ============================================================
if(isset($_GET['check_coupon'])) {
    header('Content-Type: application/json; charset=utf-8');

    if(!isset($_SESSION['session'])) {
        echo json_encode(['status' => 'error', 'message' => 'Vui long dang nhap!']);
        exit();
    }

    $code = strtoupper(trim($_GET['code'] ?? ''));
    if(empty($code)) {
        echo json_encode(['status' => 'error', 'message' => 'Vui long nhap ma!']);
        exit();
    }

    $tbl = $ketnoi->query("SHOW TABLES LIKE 'coupons'");
    if($tbl->num_rows == 0) {
        echo json_encode(['status' => 'error', 'message' => 'Chua co bang coupons!']);
        exit();
    }

    $today = date('Y-m-d');
    $coupon = $ketnoi->query("SELECT * FROM coupons WHERE code='$code' AND status=1")->fetch_assoc();

    if(!$coupon) {
        echo json_encode(['status' => 'error', 'message' => 'Ma khong ton tai hoac da bi vo hieu!']);
        exit();
    }

    if(!empty($coupon['expire_date']) && $coupon['expire_date'] < $today) {
        echo json_encode(['status' => 'error', 'message' => 'Ma da het han!']);
        exit();
    }

    if($coupon['used'] >= $coupon['max_use']) {
        echo json_encode(['status' => 'error', 'message' => 'Ma da het luot su dung!']);
        exit();
    }

    echo json_encode([
        'status' => 'success',
        'discount' => (int)$coupon['discount'],
        'type' => $coupon['type']
    ]);
    exit();
}

// ============================================================
// TU DONG TAO BANG COUPONS NEU CHUA CO
// ============================================================
$ketnoi->query("CREATE TABLE IF NOT EXISTS `coupons` (
  `id` int NOT NULL AUTO_INCREMENT,
  `code` varchar(50) NOT NULL,
  `discount` int NOT NULL DEFAULT 0,
  `type` enum('percent','fixed') NOT NULL DEFAULT 'percent',
  `min_amount` int NOT NULL DEFAULT 0,
  `max_discount` int NOT NULL DEFAULT 0,
  `max_use` int NOT NULL DEFAULT 1,
  `used` int NOT NULL DEFAULT 0,
  `expire_date` date DEFAULT NULL,
  `status` tinyint(1) NOT NULL DEFAULT 1,
  `description` varchar(255) DEFAULT NULL,
  `created_at` datetime DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`id`),
  UNIQUE KEY `code` (`code`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4");

// ============================================================
// CODE BINH THUONG
// ============================================================
if(!isset($_SESSION['session'])) { 
    header('location: /landing-page'); 
    exit(); 
}

$session = $_SESSION['session'];
$check_user = $ketnoi->query("SELECT * FROM users WHERE session='$session'")->fetch_array();
if(empty($check_user['id'])) { 
    header('location: /landing-page'); 
    exit(); 
}
$user = $check_user;

$check_id = antixss($_GET['id']);
$api_checkid = $ketnoi->query("SELECT * FROM list_mau_web WHERE id='$check_id' AND status='ON'")->fetch_array();
if(!$api_checkid) {
    header("Location: /tao-web");
    exit();
} else {
    $id = antixss($_GET['id']);
    $api_code = $ketnoi->query("SELECT * FROM list_mau_web WHERE id='$id' AND status='ON'")->fetch_array();
    mysqli_query($ketnoi, "UPDATE list_mau_web SET view=view+1 WHERE id='$id'");
}
?>
<!DOCTYPE html>
<html lang="vi" <?php if(isset($_COOKIE['data-bs-theme']) && $_COOKIE['data-bs-theme'] == 'dark') { echo 'data-bs-theme="dark"'; } else { echo 'data-bs-theme="light"'; } ?>>
<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Cau Hinh Khoi Tao Web | <?=$chinhapi['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <style>
        /* ============================================
           BASE & RESET
           ============================================ */
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { 
            font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; 
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ============================================
           ANIMATED GRADIENT BACKGROUND
           ============================================ */
        .animated-bg {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            z-index: -1;
            background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 25%, #f5f0ff 50%, #fff0f5 75%, #f0f8ff 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
        }
        [data-bs-theme="dark"] .animated-bg {
            background: linear-gradient(135deg, #0a0e27 0%, #0f1535 25%, #1a0a2e 50%, #0d1b2a 75%, #0a1628 100%);
            background-size: 400% 400%;
        }
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* ============================================
           FLOATING PARTICLES
           ============================================ */
        .particles-container {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.15;
            animation: floatUp linear infinite;
        }
        [data-bs-theme="dark"] .particle { opacity: 0.08; }
        @keyframes floatUp {
            0% { transform: translateY(100vh) rotate(0deg) scale(0); opacity: 0; }
            10% { opacity: 0.3; }
            90% { opacity: 0.3; }
            100% { transform: translateY(-10vh) rotate(720deg) scale(1.5); opacity: 0; }
        }

        /* ============================================
           GLASSMORPHISM CARDS
           ============================================ */
        .glass-card {
            background: rgba(255, 255, 255, 0.72) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.5) !important;
            border-radius: 24px !important;
            box-shadow: 
                0 4px 6px -1px rgba(0, 0, 0, 0.02),
                0 10px 15px -3px rgba(0, 0, 0, 0.03),
                0 20px 25px -5px rgba(0, 0, 0, 0.02),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.6) !important;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
        }
        .glass-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
        }
        .glass-card:hover {
            transform: translateY(-6px) scale(1.005);
            box-shadow: 
                0 10px 15px -3px rgba(0, 0, 0, 0.04),
                0 20px 25px -5px rgba(0, 0, 0, 0.03),
                0 40px 50px -12px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.8) !important;
        }
        [data-bs-theme="dark"] .glass-card {
            background: rgba(20, 22, 40, 0.75) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 
                0 4px 6px -1px rgba(0, 0, 0, 0.3),
                0 10px 15px -3px rgba(0, 0, 0, 0.2),
                0 20px 25px -5px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
        }
        [data-bs-theme="dark"] .glass-card:hover {
            box-shadow: 
                0 10px 15px -3px rgba(0, 0, 0, 0.4),
                0 20px 25px -5px rgba(0, 0, 0, 0.3),
                0 40px 50px -12px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.08) !important;
        }

        /* ============================================
           PREVIEW BOX WITH SHINE EFFECT
           ============================================ */
        .web-preview-box {
            border-radius: 20px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.08);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(0,0,0,0.04);
        }
        .web-preview-box::after {
            content: '';
            position: absolute;
            top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: linear-gradient(
                45deg,
                transparent 30%,
                rgba(255,255,255,0.15) 50%,
                transparent 70%
            );
            transform: rotate(45deg) translateX(-100%);
            transition: transform 0.8s ease;
        }
        .web-preview-box:hover::after {
            transform: rotate(45deg) translateX(100%);
        }
        .web-preview-box:hover { 
            transform: translateY(-8px) scale(1.02); 
            box-shadow: 0 20px 40px rgba(0,0,0,0.12); 
        }

        /* ============================================
           PREMIUM INPUTS
           ============================================ */
        .premium-input {
            border-radius: 14px !important;
            padding: 14px 18px !important;
            border: 2px solid rgba(0,0,0,0.06) !important;
            background: rgba(255,255,255,0.9) !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            font-size: 0.95rem;
            font-weight: 500;
        }
        [data-bs-theme="dark"] .premium-input {
            border: 2px solid rgba(255,255,255,0.08) !important;
            background: rgba(15, 17, 28, 0.7) !important;
            color: #f1f5f9 !important;
        }
        .premium-input:focus { 
            border-color: #6366f1 !important; 
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(99, 102, 241, 0.08) !important; 
            background: #ffffff !important;
            transform: translateY(-1px);
        }
        [data-bs-theme="dark"] .premium-input:focus {
            background: rgba(25, 27, 45, 0.9) !important;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15), 0 4px 12px rgba(99, 102, 241, 0.1) !important;
        }
        .premium-input::placeholder {
            color: #94a3b8;
            font-weight: 400;
        }

        /* ============================================
           GLOWING GRADIENT BUTTON
           ============================================ */
        .btn-glow {
            background: linear-gradient(135deg, #6366f1, #8b5cf6, #a855f7) !important;
            background-size: 200% 200% !important;
            color: #fff !important;
            border: none !important;
            border-radius: 14px !important;
            padding: 14px 32px !important;
            font-weight: 700 !important;
            font-size: 0.95rem;
            letter-spacing: 0.02em;
            box-shadow: 
                0 4px 15px rgba(99, 102, 241, 0.3),
                0 8px 30px rgba(139, 92, 246, 0.2) !important;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
            position: relative;
            overflow: hidden;
        }
        .btn-glow::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        .btn-glow:hover:not(:disabled)::before {
            left: 100%;
        }
        .btn-glow:hover:not(:disabled) { 
            transform: translateY(-3px) scale(1.02); 
            box-shadow: 
                0 8px 25px rgba(99, 102, 241, 0.4),
                0 15px 40px rgba(139, 92, 246, 0.25) !important;
            background-position: 100% 100% !important;
        }
        .btn-glow:active:not(:disabled) {
            transform: translateY(-1px) scale(0.98);
        }
        .btn-glow:disabled { 
            opacity: 0.6; 
            cursor: not-allowed;
            filter: grayscale(0.3);
        }

        /* ============================================
           DEMO SCREENSHOTS WITH 3D TILT
           ============================================ */
        .demo-screenshot { 
            border-radius: 20px; 
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        .demo-screenshot:hover { 
            transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); 
            box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important; 
        }
        .demo-screenshot img {
            transition: transform 0.5s ease;
        }
        .demo-screenshot:hover img {
            transform: scale(1.05);
        }

        /* ============================================
           ZOOM IMAGE OVERLAY
           ============================================ */
        .zoomed-image {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(15, 23, 42, 0.92);
            backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
            display: flex; align-items: center; justify-content: center;
            z-index: 10005; cursor: zoom-out;
            animation: fadeIn 0.3s ease-out;
        }
        .zoomed-image img {
            max-width: 90%; max-height: 85%; border-radius: 16px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.5);
            transform: scale(0.9); 
            animation: zoomIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes zoomIn { to { transform: scale(1); } }

        /* ============================================
           COUPON SECTION
           ============================================ */
        .coupon-box {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(139, 92, 246, 0.04));
            border: 2px dashed rgba(99, 102, 241, 0.25);
            border-radius: 16px;
            padding: 20px;
            transition: all 0.4s ease;
            position: relative;
        }
        .coupon-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }
        .coupon-box:focus-within { 
            border-color: #6366f1; 
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.08);
            transform: translateY(-2px);
        }
        .coupon-box:focus-within::before { opacity: 1; }
        .btn-apply-coupon {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed, #6366f1);
            background-size: 200% 200%;
            color: #fff;
            border: none;
            border-radius: 12px;
            padding: 12px 24px;
            font-weight: 700;
            font-size: 0.9rem;
            white-space: nowrap;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.25);
        }
        .btn-apply-coupon:hover:not(:disabled) { 
            transform: translateY(-2px); 
            box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
            background-position: 100% 100%;
        }
        .btn-apply-coupon:disabled { opacity: 0.5; cursor: not-allowed; }
        .btn-remove-coupon {
            background: linear-gradient(135deg, #fee2e2, #fecaca);
            color: #dc2626;
            border: 1px solid #fecaca;
            border-radius: 10px;
            padding: 5px 12px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .btn-remove-coupon:hover { 
            background: linear-gradient(135deg, #fecaca, #fca5a5);
            transform: scale(1.05);
        }
        .coupon-applied-badge {
            background: linear-gradient(135deg, #d1fae5, #a7f3d0);
            color: #059669;
            border: 1px solid #a7f3d0;
            border-radius: 24px;
            padding: 10px 20px;
            font-weight: 700;
            font-size: 0.85rem;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 10px rgba(5, 150, 105, 0.1);
            animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes badgePop {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* ============================================
           PRICE ANIMATION
           ============================================ */
        .price-tag {
            display: inline-block;
            padding: 10px 24px;
            border-radius: 14px;
            font-weight: 800;
            font-size: 1.1rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            animation: pricePulse 2s ease infinite;
        }
        @keyframes pricePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.02); }
        }

        /* ============================================
           DNS INFO CARD
           ============================================ */
        .dns-info-card {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(99, 102, 241, 0.04));
            border-left: 4px solid #6366f1;
            border-radius: 16px;
            position: relative;
            overflow: hidden;
        }
        .dns-info-card::before {
            content: '';
            position: absolute;
            top: -50%; right: -50%;
            width: 200px; height: 200px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.08), transparent);
            border-radius: 50%;
        }
        .dns-code {
            background: rgba(255,255,255,0.9) !important;
            border: 1px solid rgba(0,0,0,0.06);
            border-radius: 8px;
            padding: 4px 10px;
            font-family: 'SF Mono', 'Fira Code', monospace;
            font-size: 0.8rem;
            transition: all 0.2s ease;
        }
        .dns-code:hover {
            background: #ffffff !important;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            transform: translateY(-1px);
        }
        [data-bs-theme="dark"] .dns-code {
            background: rgba(30, 32, 50, 0.9) !important;
            border-color: rgba(255,255,255,0.08);
            color: #e2e8f0;
        }

        /* ============================================
           DESCRIPTION BOX
           ============================================ */
        .desc-box {
            background: linear-gradient(135deg, rgba(248, 250, 252, 0.9), rgba(241, 245, 249, 0.9));
            border: 1px solid rgba(0,0,0,0.04);
            border-radius: 16px;
            max-height: 200px;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #cbd5e1 transparent;
        }
        .desc-box::-webkit-scrollbar { width: 6px; }
        .desc-box::-webkit-scrollbar-track { background: transparent; }
        .desc-box::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        .desc-box::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        [data-bs-theme="dark"] .desc-box {
            background: linear-gradient(135deg, rgba(20, 22, 40, 0.8), rgba(15, 17, 28, 0.8));
            border-color: rgba(255,255,255,0.05);
        }

        /* ============================================
           FORM LABELS WITH ICON
           ============================================ */
        .form-label-enhanced {
            font-weight: 700;
            color: #1e293b;
            font-size: 0.9rem;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        [data-bs-theme="dark"] .form-label-enhanced {
            color: #e2e8f0;
        }
        .form-label-enhanced i {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            border-radius: 6px;
            font-size: 0.75rem;
        }

        /* ============================================
           SECTION TITLE
           ============================================ */
        .section-title {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 12px;
        }
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            border-radius: 2px;
            transition: width 0.3s ease;
        }
        .section-title:hover::after {
            width: 80px;
        }

        /* ============================================
           STICKY SIDEBAR
           ============================================ */
        .sticky-sidebar {
            position: sticky;
            top: 90px;
        }
        @media (max-width: 991.98px) {
            .sticky-sidebar {
                position: relative;
                top: 0;
                margin-bottom: 1.5rem;
            }
        }

        /* ============================================
           WALLET BADGE
           ============================================ */
        .wallet-badge {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.08));
            border: 1px solid rgba(16, 185, 129, 0.2);
            border-radius: 12px;
            padding: 10px 20px;
            transition: all 0.3s ease;
            animation: walletGlow 3s ease infinite;
        }
        @keyframes walletGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.1); }
            50% { box-shadow: 0 0 20px 4px rgba(16, 185, 129, 0.08); }
        }
        .wallet-badge:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
        }

        /* ============================================
           LOADING SPINNER
           ============================================ */
        .spinner-enhanced {
            width: 18px;
            height: 18px;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: #fff;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ============================================
           RESPONSIVE BREAKPOINTS
           ============================================ */
        @media (max-width: 575.98px) {
            .glass-card { border-radius: 16px !important; padding: 1rem !important; }
            .premium-input { padding: 12px 14px !important; font-size: 0.9rem; }
            .btn-glow { padding: 12px 20px !important; font-size: 0.85rem; }
            .web-preview-box { height: 140px !important; }
            .section-title { font-size: 1.1rem; }
            .coupon-box { padding: 14px; }
            .btn-apply-coupon { padding: 10px 16px; font-size: 0.8rem; }
            .dns-info-card { padding: 1rem !important; }
            .demo-screenshot img { height: 140px !important; }
            .app-toolbar h1 { font-size: 1.1rem !important; }
            .wallet-badge { padding: 8px 14px; font-size: 0.8rem; }
        }

        @media (min-width: 576px) and (max-width: 767.98px) {
            .glass-card { border-radius: 20px !important; }
            .web-preview-box { height: 160px !important; }
            .demo-screenshot img { height: 160px !important; }
        }

        @media (min-width: 768px) and (max-width: 991.98px) {
            .sticky-sidebar { position: relative; top: 0; }
            .web-preview-box { height: 180px !important; }
        }

        @media (min-width: 992px) and (max-width: 1199.98px) {
            .sticky-sidebar { top: 80px; }
        }

        @media (min-width: 1200px) {
            .sticky-sidebar { top: 90px; }
        }

        /* ============================================
           SCROLLBAR CUSTOM
           ============================================ */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; }
        [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }

        /* ============================================
           INPUT GROUP ENHANCED
           ============================================ */
        .input-group-enhanced .input-group-text {
            background: linear-gradient(135deg, #1e293b, #334155);
            color: white;
            border: none;
            border-radius: 0 14px 14px 0;
            font-weight: 600;
            font-size: 0.85rem;
            padding: 14px 16px;
        }
        .input-group-enhanced .premium-input {
            border-radius: 14px 0 0 14px !important;
        }

        /* ============================================
           CANCEL BUTTON
           ============================================ */
        .btn-cancel {
            background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
            color: #475569;
            border: none;
            border-radius: 14px;
            padding: 14px 28px;
            font-weight: 700;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }
        .btn-cancel:hover {
            background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        [data-bs-theme="dark"] .btn-cancel {
            background: linear-gradient(135deg, #1e293b, #334155);
            color: #cbd5e1;
        }
        [data-bs-theme="dark"] .btn-cancel:hover {
            background: linear-gradient(135deg, #334155, #475569);
        }

        /* ============================================
           FORM ROW GAP
           ============================================ */
        .form-row-gap { gap: 1.5rem; }
        @media (max-width: 767.98px) {
            .form-row-gap { gap: 1rem; }
        }

        /* ============================================
           BREADCRUMB ENHANCED
           ============================================ */
        .breadcrumb-item a {
            transition: color 0.2s ease;
            position: relative;
        }
        .breadcrumb-item a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: #6366f1;
            transition: width 0.2s ease;
        }
        .breadcrumb-item a:hover::after {
            width: 100%;
        }

        /* ============================================
           STAGGER ANIMATION FOR GALLERY
           ============================================ */
        .gallery-item {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.6s ease forwards;
        }
        @keyframes fadeInUp {
            to { opacity: 1; transform: translateY(0); }
        }

        /* ============================================
           FOCUS RING
           ============================================ */
        .focus-ring:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
        }

        /* ============================================
           SELECT DROPDOWN ENHANCED
           ============================================ */
        select.premium-input {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 40px !important;
        }

        /* ============================================
           SUCCESS/ERROR MESSAGE ANIMATIONS
           ============================================ */
        .msg-appear {
            animation: msgSlideIn 0.3s ease;
        }
        @keyframes msgSlideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ============================================
           PULSE DOT
           ============================================ */
        .pulse-dot {
            width: 8px;
            height: 8px;
            background: #10b981;
            border-radius: 50%;
            display: inline-block;
            animation: pulseDot 2s ease infinite;
        }
        @keyframes pulseDot {
            0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
            50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
        }
    </style>
</head>

<body id="kt_app_body" data-kt-app-layout="light-sidebar" data-kt-app-header-fixed="true"
    data-kt-app-sidebar-enabled="true" data-kt-app-sidebar-fixed="true" data-kt-app-sidebar-hoverable="true"
    data-kt-app-sidebar-push-header="true" data-kt-app-sidebar-push-toolbar="true"
    data-kt-app-sidebar-push-footer="true" data-kt-app-toolbar-enabled="true" class="app-default">

    <!-- Animated Background -->
    <div class="animated-bg"></div>

    <!-- Floating Particles -->
    <div class="particles-container" id="particles"></div>

    <div class="d-flex flex-column flex-root app-root" id="kt_app_root">
        <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
            <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
                <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/sider.php';?>

                <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                    <div class="d-flex flex-column flex-column-fluid">

                        <!-- TOOLBAR -->
                        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-4">
                            <div id="kt_app_toolbar_container" class="app-container container-fluid d-flex flex-stack">
                                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                                       <i class="fa-solid fa-square-sliders text-primary fs-4 mb-1 me-2"></i> Thiet Lap Kich Hoat Du An
                                    </h1>
                                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                                        <li class="breadcrumb-item text-muted">
                                            <a href="/" class="text-muted text-hover-primary">Trang chu</a>
                                        </li>
                                        <li class="breadcrumb-item">
                                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                                        </li>
                                        <li class="breadcrumb-item text-muted">Khoi tao ung dung</li>
                                    </ul>
                                </div>
                                <div class="d-flex align-items-center gap-2 gap-lg-3">
                                    <div class="wallet-badge">
                                        <span class="fs-7 text-success fw-bold"><i class="fa-solid fa-wallet me-2"></i> Vi: <?=tien($user['money']);?>d</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- CONTENT -->
                        <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                            <div class="container-fluid" id="kt_content_container">

                                <div class="row g-5 g-lg-7 flex-column flex-lg-row align-items-start">

                                    <!-- SIDEBAR PREVIEW -->
                                    <div class="col-12 col-lg-4 col-xl-3 sticky-sidebar">
                                        <div class="card glass-card">
                                            <div class="card-body p-4 p-lg-5 text-center">
                                                <div class="web-preview-box mb-4 mb-lg-5 mx-auto" style="background-image: url(<?=$api_code['img'];?>); background-size: cover; background-position: center; width: 100%; height: 170px;"></div>
                                                <h4 class="text-gray-900 fw-bolder mb-2 fs-5"><?=$api_code['title'];?></h4>
                                                <div class="price-tag badge badge-light-danger border border-danger-subtle fs-6 fw-bold px-4 py-2 mb-3 mb-lg-4 rounded-3" id="priceDisplay">
                                                    Gia khoi tao: <?=tien($api_code['gia']);?>d
                                                </div>
                                                <div class="separator separator-dashed my-3 my-lg-4"></div>
                                                <div class="d-flex align-items-center justify-content-center text-gray-700 fs-7 fw-semibold flex-wrap gap-1">
                                                    <i class="fa-regular fa-repeat text-primary me-1"></i> 
                                                    Phi du tri: <b class="text-primary ms-1"><?=tien($api_code['gia_han']);?>d</b> / thang
                                                </div>
                                                <div id="couponAppliedDisplay" class="mt-3" style="display:none;"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- MAIN FORM -->
                                    <div class="col-12 col-lg-8 col-xl-9 flex-row-fluid">
                                        <div class="card glass-card p-4 p-lg-6">
                                            <div class="card-header border-0 p-0 mb-5 mb-lg-6">
                                                <div class="card-title m-0">
                                                    <h3 class="fw-bolder text-gray-900 m-0 section-title fs-4 fs-lg-3">
                                                        <i class="fa-solid fa-sliders text-primary me-2"></i>Cau Hinh Khoi Tao He Thong
                                                    </h3>
                                                </div>
                                            </div>

                                            <div class="card-body p-0">
                                                <!-- Template Name -->
                                                <div class="mb-4 mb-lg-5">
                                                    <label class="form-label-enhanced">
                                                        <i class="fa-solid fa-code"></i> Mau ma nguon da chon
                                                    </label>
                                                    <input type="text" class="form-control premium-input text-muted" readonly value="<?=$api_code['title'];?>" />
                                                </div>

                                                <!-- Domain Type -->
                                                <div class="mb-4 mb-lg-5">
                                                    <label class="form-label-enhanced">
                                                        <i class="fa-solid fa-globe"></i> Hinh thuc cau hinh ten mien
                                                    </label>
                                                    <select id="domain_type" class="form-select premium-input fw-semibold text-gray-700" onchange="toggleDomainInput()">
                                                        <option value="custom" selected>Su dung ten mien rieng doc lap cua ban</option>
                                                        <option value="subdomain">Su dung Subdomain he thong (Cap phat mien phi)</option>
                                                    </select>
                                                </div>

                                                <!-- Domain Input -->
                                                <div class="mb-4 mb-lg-5">
                                                    <label class="required form-label-enhanced" id="domain_label">
                                                        <i class="fa-solid fa-link"></i> Dia chi ten mien cua ban
                                                    </label>
                                                    <div class="d-flex align-items-center" id="domain_input_wrapper">
                                                        <input type="text" id="domain" name="domain" class="form-control premium-input w-100" placeholder="Vi du: mien-cua-ban.com" required />
                                                    </div>
                                                    <div id="domain_help_text" class="form-text text-warning mt-2 fw-semibold fs-8 msg-appear">
                                                        <i class="fa-solid fa-triangle-exclamation text-warning me-1"></i> Neu chua so huu ten mien, ban co the mua ten mien gia re <a href="/reg-mien" target="_blank" class="text-primary text-decoration-underline">tai day</a>.
                                                    </div>
                                                </div>

                                                <!-- COUPON -->
                                                <div class="mb-4 mb-lg-5 coupon-box">
                                                    <label class="form-label-enhanced mb-3">
                                                        <i class="fa-solid fa-ticket"></i> Ma giam gia / Khuyen mai
                                                    </label>
                                                    <div class="d-flex align-items-center gap-2 gap-sm-3 flex-wrap flex-sm-nowrap" id="couponInputGroup">
                                                        <input type="text" id="coupon_code" class="form-control premium-input" placeholder="Nhap ma giam gia (neu co)" style="flex: 1;">
                                                        <button type="button" id="btnApplyCoupon" class="btn-apply-coupon" onclick="applyCoupon()">
                                                            <i class="fa-solid fa-check me-1"></i> Ap dung
                                                        </button>
                                                    </div>
                                                    <div id="coupon_msg" class="mt-2 fs-8 fw-semibold msg-appear"></div>
                                                    <div id="couponAppliedGroup" style="display:none;" class="mt-2">
                                                        <div class="coupon-applied-badge">
                                                            <i class="fa-solid fa-circle-check"></i>
                                                            <span id="couponAppliedCode"></span>
                                                            <span id="couponAppliedDiscount"></span>
                                                            <button type="button" class="btn-remove-coupon" onclick="removeCoupon()">
                                                                <i class="fa-solid fa-xmark"></i> Go
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Admin Credentials -->
                                                <div class="row g-3 g-lg-4 mb-4 mb-lg-5 form-row-gap">
                                                    <div class="col-12 col-md-6">
                                                        <label class="required form-label-enhanced">
                                                            <i class="fa-solid fa-user-shield"></i> Tai khoan quan tri (Admin)
                                                        </label>
                                                        <input type="text" id="user_admin" class="form-control premium-input" placeholder="Nhap ten dang nhap quan tri" required />
                                                    </div>
                                                    <div class="col-12 col-md-6">
                                                        <label class="required form-label-enhanced">
                                                            <i class="fa-solid fa-key"></i> Mat khau quan tri (Admin)
                                                        </label>
                                                        <input type="text" id="pass_admin" class="form-control premium-input" placeholder="Nhap mat khau quan tri" required />
                                                    </div>
                                                </div>

                                                <!-- DNS Info -->
                                                <div class="p-4 p-lg-5 rounded-3 mb-4 mb-lg-6 dns-info-card">
                                                    <h5 class="text-primary fw-bolder mb-3 fs-6">
                                                        <i class="fa-solid fa-server me-2"></i>Huong dan cau hinh DNS ten mien
                                                    </h5>
                                                    <div class="text-gray-700 fs-7 fw-bold lh-lg">
                                                        <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                                                            <span class="text-muted">NameServer 1:</span> 
                                                            <code class="dns-code"><?=$api_code['ns1'];?></code>
                                                        </div>
                                                        <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                                                            <span class="text-muted">NameServer 2:</span> 
                                                            <code class="dns-code"><?=$api_code['ns2'];?></code>
                                                        </div>
                                                        <div class="d-flex align-items-center flex-wrap gap-2">
                                                            <span class="text-muted">Hoac cau hinh Record A tro IP:</span> 
                                                            <code class="dns-code text-danger"><?=$api_code['ip'];?></code>
                                                        </div>
                                                    </div>
                                                </div>

                                                <!-- Description -->
                                                <div class="mb-4 mb-lg-6">
                                                    <label class="form-label-enhanced">
                                                        <i class="fa-solid fa-circle-info"></i> Mo ta thong tin & chuc nang tich hop
                                                    </label>
                                                    <div class="desc-box p-3 p-lg-4 text-gray-600 fs-7">
                                                        <?=$api_code['mo_ta'];?>
                                                    </div>
                                                </div>

                                                <!-- Action Buttons -->
                                                <div class="d-flex flex-column flex-sm-row justify-content-end gap-2 gap-sm-3 pt-2">
                                                    <a href="/tao-web" class="btn btn-cancel fw-bold px-4 px-lg-5 rounded-3 fs-7 text-center">
                                                        <i class="fa-solid fa-arrow-left me-1"></i> Huy bo
                                                    </a>
                                                    <button type="button" id="btnSubmitPayment" onclick="thanhtoan()" class="btn btn-glow fs-7">
                                                        <span id="label-normal"><i class="fa-solid fa-circle-check me-1"></i> Xac Nhan Kich Hoat</span>
                                                        <span id="label-loading" style="display: none;">
                                                            <span class="d-flex align-items-center gap-2">
                                                                <span class="spinner-enhanced"></span>
                                                                Dang xu ly thiet lap...
                                                            </span>
                                                        </span>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                                <!-- GALLERY -->
                                <div class="mt-8 mt-lg-10">
                                    <h4 class="fw-bolder text-gray-900 mb-4 mb-lg-5 section-title fs-5 fs-lg-4">
                                        <i class="fa-regular fa-images text-primary me-2"></i>Thu Vien Anh Giao Dien Thuc Te
                                    </h4>
                                    <div class="row g-3 g-lg-5">
                                        <?php
                                        $lines = explode("\n", $api_code['list_img']); 
                                        $delay = 0;
                                        if (!empty($lines)) {
                                            foreach ($lines as $index => $line) {
                                                if(trim($line) == "") continue;
                                                $delay = $index * 0.1;
                                        ?>
                                                <div class="col-6 col-sm-6 col-md-4 gallery-item" style="animation-delay: <?=$delay;?>s;">
                                                    <div class="card glass-card p-2 p-lg-2.5 demo-screenshot">
                                                        <img class="img-fluid rounded-3" src="<?=trim($line);?>" alt="Giao dien mau" style="width: 100%; height: 180px; object-fit: cover; cursor: pointer;" loading="lazy" onclick="zoomImage(this);">
                                                    </div>
                                                </div>
                                        <?php
                                            }
                                        }
                                        ?>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/foot.php';?>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    // ============================================
    // FLOATING PARTICLES
    // ============================================
    (function() {
        const container = document.getElementById('particles');
        const colors = ['#6366f1', '#8b5cf6', '#a855f7', '#ec4899', '#3b82f6'];
        const particleCount = window.innerWidth < 768 ? 8 : 15;

        for (let i = 0; i < particleCount; i++) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            const size = Math.random() * 20 + 5;
            particle.style.width = size + 'px';
            particle.style.height = size + 'px';
            particle.style.left = Math.random() * 100 + '%';
            particle.style.background = colors[Math.floor(Math.random() * colors.length)];
            particle.style.animationDuration = (Math.random() * 15 + 10) + 's';
            particle.style.animationDelay = (Math.random() * 10) + 's';
            container.appendChild(particle);
        }
    })();

    let currentDiscount = 0;
    let originalPrice = <?=$api_code['gia'];?>;

    // ============================================
    // TOGGLE DOMAIN INPUT
    // ============================================
    function toggleDomainInput() {
        const type = document.getElementById('domain_type').value;
        const wrapper = document.getElementById('domain_input_wrapper');
        const label = document.getElementById('domain_label');
        const helpText = document.getElementById('domain_help_text');

        if (type === 'custom') {
            label.innerHTML = '<i class="fa-solid fa-link"></i> Dia chi ten mien cua ban';
            wrapper.innerHTML = '<input type="text" id="domain" name="domain" class="form-control premium-input w-100" placeholder="Vi du: mien-cua-ban.com" required />';
            helpText.innerHTML = '<i class="fa-solid fa-triangle-exclamation text-warning me-1"></i> Neu chua so huu ten mien, ban co the mua ten mien gia re <a href="/reg-mien" target="_blank" class="text-primary text-decoration-underline">tai day</a>.';
        } else {
            label.innerHTML = '<i class="fa-solid fa-link"></i> Nhap tien to ten mien con mien phi';
            wrapper.innerHTML = '<div class="input-group input-group-enhanced"><input type="text" id="domain" class="form-control premium-input" placeholder="nhap-ten-web" required /><span class="input-group-text">.duckdns.org</span></div>';
            helpText.innerHTML = '<i class="fa-solid fa-circle-check text-success me-1"></i> He thong cap phat mien phi.';
        }
        helpText.classList.remove('msg-appear');
        void helpText.offsetWidth;
        helpText.classList.add('msg-appear');
    }

    // ============================================
    // APPLY COUPON
    // ============================================
    function applyCoupon() {
        var code = $('#coupon_code').val().trim();
        var btn = $('#btnApplyCoupon');
        var msg = $('#coupon_msg');

        if (!code) {
            msg.html('<span class="text-danger msg-appear"><i class="fa-solid fa-circle-xmark me-1"></i> Vui long nhap ma!</span>');
            return;
        }

        btn.prop('disabled', true).html('<span class="d-flex align-items-center gap-2"><span class="spinner-enhanced"></span> Dang kiem tra...</span>');
        msg.html('');

        $.ajax({
            url: '/pages/taoweb/taoweb.php',
            type: 'GET',
            data: { check_coupon: 1, code: code },
            dataType: 'json',
            success: function(data) {
                btn.prop('disabled', false).html('<i class="fa-solid fa-check me-1"></i> Ap dung');

                if (data.status === 'success') {
                    currentDiscount = data.discount;
                    $('#couponInputGroup').hide();
                    $('#couponAppliedGroup').show();
                    $('#couponAppliedCode').text('Ma: ' + code.toUpperCase());
                    $('#couponAppliedDiscount').text('(-' + data.discount + '%)');

                    var discountedPrice = originalPrice - (originalPrice * data.discount / 100);
                    $('#priceDisplay').html(
                        '<s class="text-muted fs-7">' + formatMoney(originalPrice) + 'd</s> ' +
                        '<span class="text-success fw-bold fs-5">' + formatMoney(discountedPrice) + 'd</span>'
                    );

                    $('#couponAppliedDisplay').show().html('<span class="badge bg-success px-3 py-2"><i class="fa-solid fa-tag me-1"></i> Giam ' + data.discount + '%</span>');

                    msg.html('<span class="text-success msg-appear"><i class="fa-solid fa-circle-check me-1"></i> Ap dung ma thanh cong!</span>');
                } else {
                    currentDiscount = 0;
                    msg.html('<span class="text-danger msg-appear"><i class="fa-solid fa-circle-xmark me-1"></i> ' + (data.message || 'Ma khong hop le!') + '</span>');
                }
            },
            error: function(xhr, status, error) {
                btn.prop('disabled', false).html('<i class="fa-solid fa-check me-1"></i> Ap dung');
                msg.html('<span class="text-danger msg-appear"><i class="fa-solid fa-circle-xmark me-1"></i> Loi ' + status + ': ' + error + '</span>');
            }
        });
    }

    // ============================================
    // REMOVE COUPON
    // ============================================
    function removeCoupon() {
        currentDiscount = 0;
        $('#couponInputGroup').show();
        $('#couponAppliedGroup').hide();
        $('#coupon_code').val('');
        $('#coupon_msg').html('');
        $('#couponAppliedDisplay').hide();
        $('#priceDisplay').html('Gia khoi tao: ' + formatMoney(originalPrice) + 'd');
    }

    // ============================================
    // FORMAT MONEY
    // ============================================
    function formatMoney(n) {
        return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }

    // ============================================
    // THANH TOAN
    // ============================================
    function thanhtoan() {
        const domain = $('#domain').val().trim();
        const user = $('#user_admin').val().trim();
        const pass = $('#pass_admin').val().trim();

        if (!domain || !user || !pass) {
            Swal.fire({ 
                icon: 'warning', 
                title: 'Thieu thong tin',
                text: 'Vui long dien day du thong tin!', 
                confirmButtonText: 'OK',
                confirmButtonColor: '#6366f1',
                showClass: { popup: 'animate__animated animate__fadeInUp animate__faster' },
                hideClass: { popup: 'animate__animated animate__fadeOutDown animate__faster' }
            });
            return;
        }

        Swal.fire({
            title: 'Xac nhan tao Website',
            text: "Xac nhan thanh toan va khoi tao?",
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#6366f1',
            cancelButtonColor: '#94a3b8',
            confirmButtonText: '<i class="fa-solid fa-check me-1"></i> Dong y',
            cancelButtonText: '<i class="fa-solid fa-xmark me-1"></i> Huy',
            reverseButtons: true,
            showClass: { popup: 'animate__animated animate__zoomIn animate__faster' },
            hideClass: { popup: 'animate__animated animate__zoomOut animate__faster' }
        }).then((result) => {
            if (result.isConfirmed) {
                $('#label-normal').hide();
                $('#label-loading').show();
                $('#btnSubmitPayment').prop('disabled', true);

                $.ajax({
                    url: '/ajax/taoweb/xulytaoweb',
                    type: 'POST',
                    data: {
                        username: '<?=$username?>',
                        id_web: '<?=$_GET['id']?>',
                        domain: domain,
                        user_admin: user,
                        pass_admin: pass,
                        coupon_code: currentDiscount > 0 ? $('#coupon_code').val().trim() : '',
                        discount: currentDiscount
                    },
                    dataType: 'json',
                    success: function(data) {
                        if (data.success) {
                            Swal.fire({ 
                                icon: 'success', 
                                title: 'Thanh cong!', 
                                text: 'Website dang duoc khoi tao.',
                                confirmButtonColor: '#10b981',
                                showClass: { popup: 'animate__animated animate__fadeInUp animate__faster' },
                                hideClass: { popup: 'animate__animated animate__fadeOutDown animate__faster' }
                            }).then(() => { window.location.href = '/history-tao-web'; });
                        } else {
                            Swal.fire({ 
                                icon: 'error', 
                                title: 'That bai', 
                                text: data.message,
                                confirmButtonColor: '#ef4444',
                                showClass: { popup: 'animate__animated animate__shakeX animate__faster' },
                                hideClass: { popup: 'animate__animated animate__fadeOutDown animate__faster' }
                            });
                            $('#label-normal').show();
                            $('#label-loading').hide();
                            $('#btnSubmitPayment').prop('disabled', false);
                        }
                    },
                    error: function() {
                        Swal.fire({ 
                            icon: 'error', 
                            title: 'Loi ket noi', 
                            text: 'Khong ket noi duoc server. Vui long thu lai.',
                            confirmButtonColor: '#ef4444',
                            showClass: { popup: 'animate__animated animate__shakeX animate__faster' },
                            hideClass: { popup: 'animate__animated animate__fadeOutDown animate__faster' }
                        });
                        $('#label-normal').show();
                        $('#label-loading').hide();
                        $('#btnSubmitPayment').prop('disabled', false);
                    }
                });
            }
        });
    }

    // ============================================
    // ZOOM IMAGE
    // ============================================
    function zoomImage(image) {
        const div = document.createElement('div');
        div.className = 'zoomed-image';
        div.onclick = function(e) { if (e.target === div) { div.style.opacity = '0'; setTimeout(() => div.remove(), 300); } };
        const img = document.createElement('img');
        img.src = image.src;
        img.alt = image.alt || 'Xem anh';
        div.appendChild(img);
        document.body.appendChild(div);
    }

    // ============================================
    // SCROLL REVEAL
    // ============================================
    (function() {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, { threshold: 0.1 });

        document.querySelectorAll('.glass-card').forEach(card => {
            card.style.opacity = '0';
            card.style.transform = 'translateY(20px)';
            card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(card);
        });
    })();

    // ============================================
    // ENTER KEY FOR COUPON
    // ============================================
    $('#coupon_code').on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            applyCoupon();
        }
    });
    </script>
</body>
</html>