<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->

<head>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/head2.php';?>
    <title>Kho Code | <?=$chinhapi['ten_web'];?></title>
    <?php require $_SERVER['DOCUMENT_ROOT'].'/hethong/nav.php';?>

    <!-- Đảm bảo liên kết FontAwesome cho các icon hoạt động mượt mà -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* ========== CSS NÂNG CẤP GIAO DIỆN RESPONSIVE + HIỆU ỨNG ĐẸP NHẤT THẾ GIỚI ========== */

        /* === ANIMATIONS === */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeInLeft {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes fadeInRight {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes scaleIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 5px rgba(48, 133, 214, 0.3); }
            50% { box-shadow: 0 0 20px rgba(48, 133, 214, 0.6); }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }

        @keyframes slideInRow {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes borderGlow {
            0%, 100% { border-color: rgba(48, 133, 214, 0.3); }
            50% { border-color: rgba(48, 133, 214, 0.8); }
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes ripple {
            0% { transform: scale(0); opacity: 1; }
            100% { transform: scale(4); opacity: 0; }
        }

        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }

        @keyframes blink {
            50% { border-color: transparent; }
        }

        @keyframes rotateIn {
            from { transform: rotate(-180deg); opacity: 0; }
            to { transform: rotate(0deg); opacity: 1; }
        }

        @keyframes countUp {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* === ROOT VARIABLES === */
        :root {
            --primary-color: #3085d6;
            --primary-light: rgba(48, 133, 214, 0.1);
            --primary-glow: rgba(48, 133, 214, 0.4);
            --success-color: #50cd89;
            --warning-color: #ffc700;
            --danger-color: #f1416c;
            --info-color: #00b2ff;
            --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(255, 255, 255, 0.3);
            --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.05);
            --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.08);
            --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.12);
            --shadow-glow: 0 0 30px rgba(48, 133, 214, 0.15);
        }

        [data-bs-theme="dark"] {
            --glass-bg: rgba(30, 30, 45, 0.7);
            --glass-border: rgba(255, 255, 255, 0.05);
            --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.2);
            --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.3);
            --shadow-heavy: 0 20px 60px rgba(0, 0, 0, 0.4);
            --shadow-glow: 0 0 30px rgba(48, 133, 214, 0.2);
        }

        /* === PREMIUM DATA CARD === */
        .premium-data-card {
            border: 1px solid rgba(0, 0, 0, 0.05) !important;
            border-radius: 24px !important;
            box-shadow: var(--shadow-medium) !important;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            overflow: hidden;
            animation: scaleIn 0.6s ease-out;
            transition: var(--transition-smooth);
            position: relative;
        }

        .premium-data-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
            transition: left 0.7s ease;
            pointer-events: none;
        }

        .premium-data-card:hover::before {
            left: 100%;
        }

        .premium-data-card:hover {
            box-shadow: var(--shadow-heavy), var(--shadow-glow) !important;
            transform: translateY(-4px);
        }

        [data-bs-theme="dark"] .premium-data-card {
            background: rgba(30, 30, 45, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
        }

        /* === CARD HEADER === */
        .premium-data-card .card-header {
            position: relative;
            overflow: hidden;
        }

        .premium-data-card .card-header::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
            opacity: 0.3;
        }

        /* === CUSTOM PREMIUM TABLE === */
        .custom-premium-table {
            border-collapse: separate;
            border-spacing: 0 8px;
        }

        .custom-premium-table thead tr {
            background: linear-gradient(135deg, rgba(48, 133, 214, 0.06), rgba(48, 133, 214, 0.02)) !important;
            border-bottom: 2px solid rgba(48, 133, 214, 0.15) !important;
            animation: fadeInDown 0.5s ease-out;
        }

        [data-bs-theme="dark"] .custom-premium-table thead tr {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)) !important;
            border-bottom: 2px solid rgba(255, 255, 255, 0.08) !important;
        }

        .custom-premium-table th {
            padding: 18px 14px !important;
            font-size: 0.8rem !important;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--primary-color);
            position: relative;
            white-space: nowrap;
        }

        .custom-premium-table th::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--primary-color);
            transition: var(--transition-smooth);
            transform: translateX(-50%);
        }

        .custom-premium-table th:hover::after {
            width: 60%;
        }

        .custom-premium-table td {
            padding: 18px 14px !important;
            vertical-align: middle !important;
            font-size: 0.92rem;
            transition: var(--transition-fast);
        }

        .custom-premium-table tbody tr {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            animation: slideInRow 0.4s ease-out forwards;
            opacity: 0;
            position: relative;
            overflow: hidden;
        }

        .custom-premium-table tbody tr::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: linear-gradient(to bottom, var(--primary-color), var(--info-color));
            opacity: 0;
            transition: var(--transition-smooth);
            border-radius: 12px 0 0 12px;
        }

        .custom-premium-table tbody tr:hover {
            background: rgba(48, 133, 214, 0.04) !important;
            transform: translateX(8px) scale(1.005);
            box-shadow: 0 4px 20px rgba(48, 133, 214, 0.1);
        }

        .custom-premium-table tbody tr:hover::before {
            opacity: 1;
        }

        [data-bs-theme="dark"] .custom-premium-table tbody tr {
            background: rgba(255, 255, 255, 0.02);
        }

        [data-bs-theme="dark"] .custom-premium-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.04) !important;
        }

        /* Stagger animation for rows */
        .custom-premium-table tbody tr:nth-child(1) { animation-delay: 0.05s; }
        .custom-premium-table tbody tr:nth-child(2) { animation-delay: 0.1s; }
        .custom-premium-table tbody tr:nth-child(3) { animation-delay: 0.15s; }
        .custom-premium-table tbody tr:nth-child(4) { animation-delay: 0.2s; }
        .custom-premium-table tbody tr:nth-child(5) { animation-delay: 0.25s; }
        .custom-premium-table tbody tr:nth-child(6) { animation-delay: 0.3s; }
        .custom-premium-table tbody tr:nth-child(7) { animation-delay: 0.35s; }
        .custom-premium-table tbody tr:nth-child(8) { animation-delay: 0.4s; }
        .custom-premium-table tbody tr:nth-child(9) { animation-delay: 0.45s; }
        .custom-premium-table tbody tr:nth-child(10) { animation-delay: 0.5s; }

        /* === BADGE DOMAIN === */
        .badge-domain {
            background: linear-gradient(135deg, rgba(48, 133, 214, 0.1), rgba(48, 133, 214, 0.05));
            color: var(--primary-color);
            padding: 8px 16px;
            border-radius: 12px;
            font-weight: 700;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            border: 1px solid rgba(48, 133, 214, 0.15);
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

        .badge-domain::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            transition: left 0.5s ease;
        }

        .badge-domain:hover::before {
            left: 100%;
        }

        .badge-domain:hover {
            background: linear-gradient(135deg, #2e86de, #3085d6);
            color: #ffffff !important;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 8px 25px rgba(48, 133, 214, 0.35);
            border-color: transparent;
        }

        .badge-domain i {
            transition: transform 0.3s ease;
        }

        .badge-domain:hover i {
            transform: rotate(360deg);
        }

        /* === ACTION MANAGE BUTTON === */
        .action-manage-btn {
            background: linear-gradient(135deg, #f1f3f9, #e8eaf0) !important;
            color: #464e5f !important;
            border-radius: 12px !important;
            font-weight: 600 !important;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
            border: none !important;
            position: relative;
            overflow: hidden;
            padding: 10px 18px !important;
        }

        .action-manage-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }

        .action-manage-btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .action-manage-btn:hover {
            background: linear-gradient(135deg, #2e86de, #3085d6) !important;
            color: white !important;
            box-shadow: 0 8px 25px rgba(48, 133, 214, 0.35);
            transform: translateY(-2px) scale(1.05);
        }

        .action-manage-btn:active {
            transform: translateY(0) scale(0.98);
        }

        [data-bs-theme="dark"] .action-manage-btn {
            background: linear-gradient(135deg, #2b2b40, #252538) !important;
            color: #cdcdde !important;
        }

        [data-bs-theme="dark"] .action-manage-btn:hover {
            color: white !important;
        }

        .action-manage-btn i {
            transition: transform 0.4s ease;
        }

        .action-manage-btn:hover i {
            transform: rotate(180deg);
        }

        /* === STATUS BADGES === */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .status-badge::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: currentColor;
            animation: pulseGlow 2s infinite;
        }

        .status-badge.active {
            background: rgba(80, 205, 137, 0.12);
            color: var(--success-color);
            border: 1px solid rgba(80, 205, 137, 0.2);
        }

        .status-badge.pending {
            background: rgba(255, 199, 0, 0.12);
            color: var(--warning-color);
            border: 1px solid rgba(255, 199, 0, 0.2);
        }

        .status-badge.expired {
            background: rgba(241, 65, 108, 0.12);
            color: var(--danger-color);
            border: 1px solid rgba(241, 65, 108, 0.2);
        }

        .status-badge:hover {
            transform: scale(1.08);
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* === TOOLBAR ENHANCEMENTS === */
        #kt_app_toolbar {
            position: relative;
            overflow: hidden;
        }

        #kt_app_toolbar::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(48, 133, 214, 0.05), transparent 70%);
            animation: float 6s ease-in-out infinite;
            pointer-events: none;
        }

        .page-heading {
            animation: fadeInLeft 0.6s ease-out;
        }

        .page-heading i {
            animation: rotateIn 0.8s ease-out;
            display: inline-block;
        }

        .breadcrumb {
            animation: fadeInLeft 0.7s ease-out;
        }

        /* === WALLET BUTTON === */
        .btn-light-success {
            background: linear-gradient(135deg, rgba(80, 205, 137, 0.15), rgba(80, 205, 137, 0.05)) !important;
            border: 1px solid rgba(80, 205, 137, 0.2) !important;
            color: var(--success-color) !important;
            border-radius: 14px !important;
            transition: all 0.3s ease !important;
            position: relative;
            overflow: hidden;
        }

        .btn-light-success:hover {
            background: linear-gradient(135deg, #50cd89, #3aad6f) !important;
            color: white !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(80, 205, 137, 0.3);
        }

        .btn-light-success i {
            animation: float 3s ease-in-out infinite;
        }

        /* === REFRESH BUTTON === */
        .btn-light-primary {
            background: linear-gradient(135deg, rgba(48, 133, 214, 0.1), rgba(48, 133, 214, 0.02)) !important;
            border: 1px solid rgba(48, 133, 214, 0.15) !important;
            color: var(--primary-color) !important;
            border-radius: 12px !important;
            transition: all 0.3s ease !important;
        }

        .btn-light-primary:hover {
            background: linear-gradient(135deg, var(--primary-color), #2e86de) !important;
            color: white !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(48, 133, 214, 0.3);
        }

        .btn-light-primary:hover i {
            animation: rotateIn 0.5s ease-out;
        }

        /* === CHECKBOX ENHANCEMENTS === */
        .form-check-input {
            width: 20px;
            height: 20px;
            border-radius: 6px !important;
            border: 2px solid rgba(48, 133, 214, 0.3);
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .form-check-input:checked {
            background: linear-gradient(135deg, var(--primary-color), #2e86de);
            border-color: var(--primary-color);
            box-shadow: 0 0 10px rgba(48, 133, 214, 0.3);
            animation: bounceIn 0.4s ease-out;
        }

        .form-check-input:hover {
            border-color: var(--primary-color);
            box-shadow: 0 0 8px rgba(48, 133, 214, 0.2);
        }

        /* === TABLE RESPONSIVE === */
        @media (max-width: 1199px) {
            .custom-premium-table th,
            .custom-premium-table td {
                padding: 14px 10px !important;
                font-size: 0.85rem !important;
            }
        }

        /* === MOBILE RESPONSIVE (< 768px) === */
        @media (max-width: 767px) {
            .premium-data-card {
                border-radius: 16px !important;
                margin: 0 8px;
            }

            .custom-premium-table {
                border-spacing: 0 6px;
            }

            .custom-premium-table thead {
                display: none;
            }

            .custom-premium-table tbody tr {
                display: block;
                margin-bottom: 16px;
                border-radius: 16px;
                padding: 16px;
                background: var(--glass-bg);
                border: 1px solid rgba(48, 133, 214, 0.1);
                box-shadow: var(--shadow-soft);
                animation: fadeInUp 0.5s ease-out forwards;
            }

            .custom-premium-table tbody tr::before {
                display: none;
            }

            .custom-premium-table tbody tr:hover {
                transform: translateY(-4px) scale(1.01);
                box-shadow: var(--shadow-medium);
            }

            .custom-premium-table td {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10px 0 !important;
                border-bottom: 1px solid rgba(0,0,0,0.05);
                text-align: right !important;
            }

            .custom-premium-table td:last-child {
                border-bottom: none;
            }

            .custom-premium-table td::before {
                content: attr(data-label);
                font-weight: 700;
                color: var(--primary-color);
                font-size: 0.8rem;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                text-align: left;
            }

            .custom-premium-table td[data-label="STT"] {
                justify-content: center;
                font-size: 1.2rem;
                color: var(--primary-color);
            }

            .custom-premium-table td[data-label="STT"]::before {
                display: none;
            }

            .custom-premium-table td .form-check {
                margin: 0;
            }

            .custom-premium-table td .badge-domain {
                font-size: 0.85rem;
            }

            .custom-premium-table td .action-manage-btn {
                width: 100%;
                justify-content: center;
            }

            /* Card header mobile */
            .premium-data-card .card-header {
                flex-direction: column;
                gap: 12px;
                padding: 20px !important;
            }

            .premium-data-card .card-title {
                text-align: center;
            }

            .premium-data-card .card-toolbar {
                width: 100%;
                justify-content: center;
            }

            /* Toolbar mobile */
            #kt_app_toolbar_container {
                flex-direction: column;
                gap: 16px;
                text-align: center;
            }

            .page-title {
                align-items: center !important;
            }

            /* Breadcrumb hide on very small screens */
            .breadcrumb {
                display: none;
            }
        }

        /* === TABLET RESPONSIVE (768px - 991px) === */
        @media (min-width: 768px) and (max-width: 991px) {
            .custom-premium-table th,
            .custom-premium-table td {
                padding: 12px 8px !important;
                font-size: 0.8rem !important;
            }

            .badge-domain {
                padding: 6px 10px;
                font-size: 0.8rem;
            }

            .action-manage-btn {
                padding: 8px 12px !important;
                font-size: 0.8rem !important;
            }
        }

        /* === SCROLLBAR CUSTOM === */
        .table-responsive::-webkit-scrollbar {
            height: 8px;
            width: 8px;
        }

        .table-responsive::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.03);
            border-radius: 10px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, var(--primary-color), #2e86de);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .table-responsive::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #2e86de, var(--primary-color));
            box-shadow: 0 0 10px rgba(48, 133, 214, 0.3);
        }

        /* === EMPTY STATE === */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            animation: fadeInUp 0.6s ease-out;
        }

        .empty-state i {
            font-size: 4rem;
            color: rgba(48, 133, 214, 0.2);
            margin-bottom: 20px;
            animation: float 3s ease-in-out infinite;
        }

        .empty-state h4 {
            color: var(--primary-color);
            margin-bottom: 8px;
        }

        .empty-state p {
            color: #999;
        }

        /* === LOADING SKELETON === */
        .skeleton-row td {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            border-radius: 8px;
            height: 40px;
        }

        [data-bs-theme="dark"] .skeleton-row td {
            background: linear-gradient(90deg, #2a2a3a 25%, #333344 50%, #2a2a3a 75%);
            background-size: 200% 100%;
        }

        /* === TOOLTIP ENHANCEMENTS === */
        [data-bs-toggle="tooltip"] {
            position: relative;
        }

        /* === PAGE TRANSITION === */
        .content {
            animation: fadeInUp 0.5s ease-out;
        }

        /* === STAT CARDS (optional enhancement) === */
        .stat-card {
            background: linear-gradient(135deg, var(--primary-color), #2e86de);
            border-radius: 16px;
            padding: 20px;
            color: white;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 150px;
            height: 150px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 15px 40px rgba(48, 133, 214, 0.3);
        }

        .stat-card .stat-number {
            font-size: 2rem;
            font-weight: 800;
            animation: countUp 0.6s ease-out;
        }

        /* === FLOATING ACTION BUTTON (mobile) === */
        @media (max-width: 767px) {
            .fab-mobile {
                position: fixed;
                bottom: 20px;
                right: 20px;
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: linear-gradient(135deg, var(--primary-color), #2e86de);
                color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 20px rgba(48, 133, 214, 0.4);
                z-index: 1000;
                animation: bounceIn 0.6s ease-out;
                transition: all 0.3s ease;
            }

            .fab-mobile:hover {
                transform: scale(1.1) rotate(90deg);
                box-shadow: 0 6px 30px rgba(48, 133, 214, 0.5);
            }
        }

        /* === PARALLAX BACKGROUND EFFECT === */
        .app-main {
            position: relative;
        }

        /* === SMOOTH SCROLL === */
        html {
            scroll-behavior: smooth;
        }

        /* === SELECTION COLOR === */
        ::selection {
            background: rgba(48, 133, 214, 0.3);
            color: inherit;
        }

        /* === FOCUS STYLES === */
        *:focus-visible {
            outline: 2px solid var(--primary-color);
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* === TEXT GRADIENT === */
        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color), #00b2ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* === CARD TITLE ANIMATION === */
        .card-title span:first-child {
            background: linear-gradient(135deg, #1a1a2e, var(--primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 200% 200%;
            animation: gradientShift 5s ease infinite;
        }

        [data-bs-theme="dark"] .card-title span:first-child {
            background: linear-gradient(135deg, #ffffff, var(--primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* === RESPONSIVE FONT SIZES === */
        @media (max-width: 576px) {
            .fs-4 { font-size: 1.1rem !important; }
            .fs-3 { font-size: 1.3rem !important; }
            .fs-7 { font-size: 0.75rem !important; }
            .fw-bold { font-weight: 600 !important; }
        }
    </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">

    <script>var defaultThemeMode = "light"; var themeMode; if (document.documentElement) { if (document.documentElement.hasAttribute("data-bs-theme-mode")) { themeMode = document.documentElement.getAttribute("data-bs-theme-mode"); } else { if (localStorage.getItem("data-bs-theme") !== null) { themeMode = localStorage.getItem("data-bs-theme"); } else { themeMode = defaultThemeMode; } } if (themeMode === "system") { themeMode = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"; } document.documentElement.setAttribute("data-bs-theme", themeMode); }</script>

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

            <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-6">
                        <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-clock-history text-primary fs-4 mb-1"></i> Lịch Sử Khởi Tạo Web
                                </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">Home</a></li>
                                    <li class="breadcrumb-item"><span class="bullet bg-gray-400 w-5px h-2px"></span></li>
                                    <li class="breadcrumb-item text-muted">Bảng Tính</li>
                                </ul>
                            </div>
                            <div class="d-flex align-items-center gap-2 gap-lg-3">
                                <a href="#" class="btn btn-sm fw-bold btn-light-success px-4 py-3" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">
                                    <i class="fa-solid fa-wallet me-1"></i> <?=tien($user['money']);?>đ
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- BẢNG DỮ LIỆU LỊCH SỬ -->
                    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
                        <div class="container-xxl" id="kt_content_container">
                            <div class="row g-10">
                                <div class="col-xl-12">

                                    <div class="card premium-data-card mb-5">
                                        <!-- Header Bảng -->
                                        <div class="card-header border-0 pt-6 bg-transparent d-flex flex-wrap justify-content-between align-items-center">
                                            <div class="card-title">
                                                <div class="d-flex flex-column">
                                                    <span class="fw-black text-dark fs-4 mb-1">Danh sách dịch vụ đang chạy</span>
                                                    <span class="text-muted fw-semibold fs-7"><i class="fa-regular fa-clock me-1"></i> Hệ thống đồng bộ lúc: <?=$time;?></span>
                                                </div>
                                            </div>
                                            <div class="card-toolbar">
                                                <a href="" class="btn btn-sm btn-light-primary fw-bold px-4 py-2" data-bs-toggle="tooltip" title="Làm mới bảng dữ liệu">
                                                    <i class="fa-solid fa-rotate me-1"></i> Tải lại trang
                                                </a>
                                            </div>
                                        </div>

                                        <!-- Thân Bảng -->
                                        <div class="card-body py-4">
                                            <div class="table-responsive">
                                                <table class="table custom-premium-table table-row-dashed align-middle gs-0 gy-4">
                                                    <thead>
                                                        <tr class="fw-bolder text-muted text-uppercase fs-8">
                                                            <th class="w-25px ps-3">
                                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input" type="checkbox" value="1" data-kt-check="true" data-kt-check-target=".widget-9-check" />
                                                                </div>
                                                            </th>
                                                            <th class="min-w-40px text-center">STT</th>
                                                            <th class="min-w-180px">Tên Miền Hệ Thống</th>
                                                            <th class="min-w-140px text-center">Loại Mã Nguồn</th>
                                                            <th class="min-w-150px text-center">Ngày Kích Hoạt</th>
                                                            <th class="min-w-150px text-center">Ngày Hết Hạn</th>
                                                            <th class="min-w-130px text-center">Trạng Thái</th>
                                                            <th class="min-w-100px text-end pe-3">Quản Lý</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>
                                                        <?php
                                                        $i = 1;
                                                        $result = mysqli_query($ketnoi, "SELECT * FROM `lich_su_tao_web` WHERE `username` = '$username' ORDER BY id desc");
                                                        $hasData = mysqli_num_rows($result) > 0;

                                                        if (!$hasData) {
                                                        ?>
                                                        <tr>
                                                            <td colspan="8">
                                                                <div class="empty-state">
                                                                    <i class="fa-solid fa-box-open"></i>
                                                                    <h4>Chưa có dữ liệu</h4>
                                                                    <p>Bạn chưa có dịch vụ nào đang chạy. Hãy khởi tạo ngay!</p>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <?php
                                                        } else {
                                                            while($row = mysqli_fetch_assoc($result)) { 
                                                                $site = $ketnoi->query("SELECT * FROM `list_mau_web` WHERE `id` = '".$row['loaiweb']."' ")->fetch_array();
                                                                $statusClass = '';
                                                                $statusText = '';

                                                                // Xác định class status dựa trên giá trị status
                                                                $rawStatus = strtolower(trim($row['status'] ?? ''));
                                                                if ($rawStatus == 'active' || $rawStatus == 'hoạt động' || $rawStatus == '1' || $rawStatus == 'running') {
                                                                    $statusClass = 'active';
                                                                    $statusText = 'Hoạt động';
                                                                } elseif ($rawStatus == 'pending' || $rawStatus == 'chờ xử lý' || $rawStatus == '0') {
                                                                    $statusClass = 'pending';
                                                                    $statusText = 'Chờ xử lý';
                                                                } elseif ($rawStatus == 'expired' || $rawStatus == 'hết hạn' || $rawStatus == '2') {
                                                                    $statusClass = 'expired';
                                                                    $statusText = 'Hết hạn';
                                                                } else {
                                                                    $statusClass = 'active';
                                                                    $statusText = $row['status'];
                                                                }
                                                        ?>
                                                        <tr>
                                                            <td class="ps-3" data-label="">
                                                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                                                    <input class="form-check-input widget-9-check" type="checkbox" value="1" />
                                                                </div>
                                                            </td>

                                                            <td class="text-center fw-bold text-gray-600" data-label="STT">
                                                                <?=$i++;?>
                                                            </td>

                                                            <td data-label="Tên Miền">
                                                                <a href="https://<?=$row['domain'];?>/" target="_blank" class="badge-domain">
                                                                    <i class="fa-solid fa-globe me-1"></i> <?=$row['domain'];?>
                                                                </a>
                                                            </td>

                                                            <td class="text-center" data-label="Loại Mã Nguồn">
                                                                <span class="text-dark fw-bold text-hover-primary fs-6">
                                                                    <?=isset($site['title']) ? $site['title'] : 'Không xác định';?>
                                                                </span>
                                                            </td>

                                                            <td class="text-center" data-label="Ngày Kích Hoạt">
                                                                <span class="text-gray-800 fw-semibold fs-7">
                                                                    <i class="fa-regular fa-calendar-check text-muted me-1"></i> <?=ngay($row['ngay_mua']); ?>
                                                                </span>
                                                            </td>

                                                            <td class="text-center" data-label="Ngày Hết Hạn">
                                                                <span class="text-gray-800 fw-semibold fs-7">
                                                                    <i class="fa-regular fa-calendar-times text-muted me-1"></i> <?=ngay($row['ngay_het']); ?>
                                                                </span>
                                                            </td>

                                                            <td class="text-center" data-label="Trạng Thái">
                                                                <span class="status-badge <?=htmlspecialchars($statusClass);?>">
                                                                    <?=htmlspecialchars($statusText);?>
                                                                </span>
                                                            </td>

                                                            <td class="text-end pe-3" data-label="Quản Lý">
                                                                <a href="/history-reg-web/<?=$row['id'];?>" class="btn btn-sm action-manage-btn px-3 py-2 d-inline-flex align-items-center gap-1" data-bs-toggle="tooltip" title="Đi tới trang quản lý chi tiết">
                                                                    <i class="fa-solid fa-sliders fs-7"></i> Cài đặt
                                                                </a>
                                                            </td>
                                                        </tr>
                                                        <?php 
                                                            } 
                                                        }
                                                        ?>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

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

    <script>
    // ========== JAVASCRIPT NÂNG CẤP HIỆU ỨNG ==========
    document.addEventListener('DOMContentLoaded', function() {

        // === HOVER EFFECT CHO TABLE ROWS ===
        const tableRows = document.querySelectorAll('.custom-premium-table tbody tr');
        tableRows.forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.style.zIndex = '10';
            });
            row.addEventListener('mouseleave', function() {
                this.style.zIndex = '1';
            });
        });

        // === RIPPLE EFFECT CHO BUTTONS ===
        const buttons = document.querySelectorAll('.action-manage-btn, .btn-light-primary, .btn-light-success');
        buttons.forEach(btn => {
            btn.addEventListener('click', function(e) {
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = e.clientX - rect.left - size / 2;
                const y = e.clientY - rect.top - size / 2;

                ripple.style.cssText = `
                    position: absolute;
                    width: ${size}px;
                    height: ${size}px;
                    left: ${x}px;
                    top: ${y}px;
                    background: rgba(255,255,255,0.4);
                    border-radius: 50%;
                    transform: scale(0);
                    animation: ripple 0.6s ease-out;
                    pointer-events: none;
                `;

                this.style.position = 'relative';
                this.style.overflow = 'hidden';
                this.appendChild(ripple);

                setTimeout(() => ripple.remove(), 600);
            });
        });

        // === PARALLAX SCROLL EFFECT ===
        let ticking = false;
        window.addEventListener('scroll', function() {
            if (!ticking) {
                window.requestAnimationFrame(function() {
                    const scrolled = window.pageYOffset;
                    const parallax = document.querySelector('#kt_app_toolbar');
                    if (parallax) {
                        parallax.style.transform = 'translateY(' + (scrolled * 0.1) + 'px)';
                    }
                    ticking = false;
                });
                ticking = true;
            }
        });

        // === INTERSECTION OBSERVER CHO ANIMATIONS ===
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        document.querySelectorAll('.premium-data-card, .custom-premium-table tbody tr').forEach(el => {
            observer.observe(el);
        });

        // === CHECKBOX SELECT ALL ===
        const selectAllCheckbox = document.querySelector('[data-kt-check="true"]');
        const rowCheckboxes = document.querySelectorAll('.widget-9-check');

        if (selectAllCheckbox) {
            selectAllCheckbox.addEventListener('change', function() {
                rowCheckboxes.forEach(cb => {
                    cb.checked = this.checked;
                    if (this.checked) {
                        cb.closest('tr').style.background = 'rgba(48, 133, 214, 0.06)';
                    } else {
                        cb.closest('tr').style.background = '';
                    }
                });
            });
        }

        rowCheckboxes.forEach(cb => {
            cb.addEventListener('change', function() {
                if (this.checked) {
                    this.closest('tr').style.background = 'rgba(48, 133, 214, 0.06)';
                } else {
                    this.closest('tr').style.background = '';
                }
            });
        });

        // === TOOLTIP INIT (nếu Bootstrap tooltip chưa init) ===
        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
            tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el));
        }

        // === SMOOTH SCROLL TO TOP ===
        const scrollToTopBtn = document.createElement('button');
        scrollToTopBtn.innerHTML = '<i class="fa-solid fa-arrow-up"></i>';
        scrollToTopBtn.className = 'btn btn-primary btn-sm position-fixed';
        scrollToTopBtn.style.cssText = 'bottom: 20px; right: 20px; z-index: 9999; border-radius: 50%; width: 45px; height: 45px; display: none; box-shadow: 0 4px 15px rgba(48,133,214,0.4); transition: all 0.3s ease;';
        document.body.appendChild(scrollToTopBtn);

        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                scrollToTopBtn.style.display = 'flex';
                scrollToTopBtn.style.alignItems = 'center';
                scrollToTopBtn.style.justifyContent = 'center';
                scrollToTopBtn.style.animation = 'bounceIn 0.4s ease-out';
            } else {
                scrollToTopBtn.style.display = 'none';
            }
        });

        scrollToTopBtn.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });

        // === LOADING STATE KHI CLICK REFRESH ===
        const refreshBtn = document.querySelector('.btn-light-primary');
        if (refreshBtn) {
            refreshBtn.addEventListener('click', function(e) {
                e.preventDefault();
                const icon = this.querySelector('i');
                icon.style.animation = 'rotateIn 1s linear infinite';
                this.style.pointerEvents = 'none';
                this.style.opacity = '0.7';

                setTimeout(() => {
                    window.location.reload();
                }, 800);
            });
        }

        // === COUNT UP ANIMATION CHO STT ===
        const sttCells = document.querySelectorAll('td[data-label="STT"]');
        sttCells.forEach((cell, index) => {
            const finalNum = parseInt(cell.textContent);
            let current = 0;
            const duration = 500;
            const step = finalNum / (duration / 16);

            const counter = setInterval(() => {
                current += step;
                if (current >= finalNum) {
                    cell.textContent = finalNum;
                    clearInterval(counter);
                } else {
                    cell.textContent = Math.floor(current);
                }
            }, 16);
        });

    });
    </script>
</body>
</html>