<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="keywords" content="hackerteam,virusteam,trickerteam,AnonymousTeam!">
    <link rel="shortcut icon" href="https://i.imgur.com/UDfPcUH.png" type="image/x-icon">
    <title>Dang Khoi - Home V21 Cosmic Overlord</title>
    <link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@400;700;900&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
    
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Exo 2', 'Noto Sans SC', sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            background: #000;
            overflow-x: hidden;
            padding: 20px 10px;
        }

        #bg-video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -3;
            filter: brightness(0.85) contrast(2);
        }

        #particles-js {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }

        .gradient-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(255, 0, 255, 0.35), rgba(0, 255, 255, 0.35), rgba(255, 153, 0, 0.35), rgba(0, 255, 0, 0.35));
            background-size: 700%;
            animation: gradientShift 9s ease infinite;
            z-index: -2;
            opacity: 0.65;
        }

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

        .starfield {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent);
            animation: starTwinkle 12s ease-in-out infinite;
            z-index: -2;
        }

        @keyframes starTwinkle {
            0% { opacity: 0.6; }
            50% { opacity: 0.9; }
            100% { opacity: 0.6; }
        }

        .glowing-orb {
            position: fixed;
            width: 50px;
            height: 50px;
            background: radial-gradient(circle, rgba(255, 0, 255, 0.85), transparent);
            border-radius: 50%;
            animation: floatOrb 5s ease-in-out infinite;
            z-index: -1;
            box-shadow: 0 0 20px rgba(255, 0, 255, 1);
        }

        .glowing-orb:nth-child(1) { top: 10%; left: 15%; animation-delay: 0s; }
        .glowing-orb:nth-child(2) { top: 60%; left: 80%; animation-delay: 1s; }
        .glowing-orb:nth-child(3) { top: 80%; left: 30%; animation-delay: 2s; }

        @keyframes floatOrb {
            0% { transform: translateY(0); opacity: 0.85; }
            50% { transform: translateY(-20px); opacity: 1; }
            100% { transform: translateY(0); opacity: 0.85; }
        }

        .loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(0, 0, 50, 0.9), rgba(0, 0, 0, 1));
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            color: #fff;
            animation: pulseGalaxy 1.5s infinite;
            border: 5px solid transparent;
            border-image: linear-gradient(45deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00) 1;
        }

        .loading-screen.hidden {
            display: none;
        }

        .loading-avatar-container {
            position: relative;
            width: 120px;
            height: 120px;
            animation: fallAvatar 1.2s ease-out forwards;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 0, 255, 0.6), transparent);
            overflow: hidden;
        }

        .loading-avatar-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00);
            background-size: 500%;
            opacity: 0.9;
            animation: auroraFlow 2.5s ease-in-out infinite;
            z-index: 0;
        }

        @keyframes auroraFlow {
            0% { background-position: 0% 50%; opacity: 0.9; }
            50% { background-position: 100% 50%; opacity: 0.7; }
            100% { background-position: 0% 50%; opacity: 0.9; }
        }

        .loading-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 5px solid #fff;
            box-shadow: 0 0 30px rgba(255, 0, 255, 1.3);
            animation: pulseAvatar 1.5s infinite;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2;
        }

        .loading-particle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #ff00ff;
            border-radius: 50%;
            opacity: 0.9;
            z-index: 1;
            box-shadow: 0 0 15px rgba(255, 0, 255, 0.9);
        }

        .loading-particle:nth-child(1) { animation: fallParticle 1.6s linear infinite; left: 0%; background: #ff00ff; }
        .loading-particle:nth-child(2) { animation: fallParticle 1.7s linear infinite 0.2s; left: 20%; background: #00ffff; }
        .loading-particle:nth-child(3) { animation: fallParticle 1.8s linear infinite 0.4s; left: 40%; background: #ff9900; }
        .loading-particle:nth-child(4) { animation: fallParticle 1.65s linear infinite 0.6s; left: 60%; background: #ff00cc; }
        .loading-particle:nth-child(5) { animation: fallParticle 1.75s linear infinite 0.8s; left: 80%; background: #00ff00; }

        @keyframes fallParticle {
            0% { transform: translateY(-60px); opacity: 0.9; scale: 1; }
            50% { transform: translateY(80px) translateX(8px); opacity: 0.7; scale: 0.7; }
            100% { transform: translateY(140px) translateX(-8px); opacity: 0; scale: 0.4; }
        }

        @keyframes fallAvatar {
            0% { transform: translateY(-100vh); }
            50% { transform: translateY(30px); }
            100% { transform: translateY(0); }
        }

        @keyframes pulseAvatar {
            0% { box-shadow: 0 0 25px rgba(255, 0, 255, 1.2); }
            50% { box-shadow: 0 0 35px rgba(255, 0, 255, 1.4); }
            100% { box-shadow: 0 0 25px rgba(255, 0, 255, 1.2); }
        }

        .loading-text {
            font-size: 1.5em;
            text-shadow: 0 0 15px rgba(255, 0, 255, 1.3);
            margin-top: 30px;
            animation: glitchText 0.4s infinite alternate;
        }

        @keyframes glitchText {
            0% { transform: translate(0, 0); text-shadow: 0 0 15px rgba(255, 0, 255, 1.3), 2px 0 #00ffff, -2px 0 #ff00ff; }
            50% { transform: translate(2px, -2px); text-shadow: 0 0 15px rgba(255, 0, 255, 1.3), -2px 0 #00ffff, 2px 0 #ff00ff; }
            100% { transform: translate(-2px, 2px); text-shadow: 0 0 15px rgba(255, 0, 255, 1.3), 2px 0 #00ffff, -2px 0 #ff00ff; }
        }

        .loading-progress {
            width: 200px;
            height: 12px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 6px;
            margin-top: 15px;
            overflow: hidden;
            box-shadow: 0 0 25px rgba(0, 255, 255, 1.2);
            position: relative;
        }

        .loading-progress-bar {
            width: 0;
            height: 100%;
            background: linear-gradient(90deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00);
            box-shadow: 0 0 15px rgba(255, 0, 255, 1.3);
            transition: width 0.1s linear;
        }

        .loading-progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.9em;
            text-shadow: 0 0 10px rgba(255, 0, 255, 1.2);
            color: #fff;
        }

        @keyframes pulseGalaxy {
            0% { opacity: 0.9; }
            50% { opacity: 1; }
            100% { opacity: 0.9; }
        }

        @keyframes completeShake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-3px); }
            50% { transform: translateX(3px); }
            75% { transform: translateX(-3px); }
            100% { transform: translateX(0); }
        }

        .profile {
            text-align: center;
            z-index: 2;
            color: #fff;
            width: 100%;
            padding: 20px;
            background: linear-gradient(45deg, rgba(0, 0, 50, 0.95), rgba(50, 0, 50, 0.95));
            border-radius: 15px;
            box-shadow: 0 0 100px rgba(0, 255, 255, 1.3), inset 0 0 15px rgba(255, 0, 255, 1.1);
            animation: cosmicFadeIn 1.2s ease;
            border: 5px solid transparent;
            border-image: linear-gradient(45deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00) 1;
            margin: 20px auto;
        }

        @keyframes cosmicFadeIn {
            0% { opacity: 0; transform: scale(0.8); }
            100% { opacity: 1; transform: scale(1); }
        }

        .ip-display, .ping-display, .location-display {
            font-size: 0.9em;
            margin-bottom: 12px;
            padding: 8px 15px;
            background: linear-gradient(90deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00);
            background-size: 500%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 12px rgba(255, 0, 255, 1.3);
            border: 3px solid transparent;
            border-image: linear-gradient(90deg, #ff00ff, #00ffff, #ff9900, #ff00cc) 1;
            border-radius: 10px;
            animation: cosmicGlow 1.5s ease-in-out infinite;
        }

        @keyframes cosmicGlow {
            0% { box-shadow: 0 0 10px rgba(0, 255, 255, 1.3); }
            50% { box-shadow: 0 0 25px rgba(255, 0, 255, 1.5); }
            100% { box-shadow: 0 0 10px rgba(0, 255, 255, 1.3); }
        }

        .avatar-container {
            position: relative;
            display: inline-block;
            margin-bottom: 15px;
            width: 130px;
            height: 130px;
            border-radius: 50%;
            animation: cosmicAura 2.5s infinite;
            overflow: hidden;
            background: radial-gradient(circle, rgba(255, 0, 255, 0.5), transparent);
            box-shadow: 0 0 25px #ff00ff, 0 0 35px #00ffff, 0 0 45px #ff9900;
        }

        .avatar-container::before {
            content: '';
            position: absolute;
            top: -20px;
            left: -20px;
            width: 170px;
            height: 170px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 0, 255, 0.3), transparent);
            animation: cosmicRing 4s linear infinite;
            z-index: 1;
        }

        .avatar-container::after {
            content: '';
            position: absolute;
            top: -40px;
            left: -40px;
            width: 210px;
            height: 210px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 255, 255, 0.2), transparent);
            animation: cosmicRing 6s linear infinite reverse;
            z-index: 0;
        }

        @keyframes cosmicRing {
            0% { transform: rotate(0deg); opacity: 0.7; }
            50% { transform: rotate(180deg); opacity: 0.9; }
            100% { transform: rotate(360deg); opacity: 0.7; }
        }

        @keyframes cosmicAura {
            0% { box-shadow: 0 0 25px #ff00ff, 0 0 35px #00ffff, 0 0 45px #ff9900; }
            50% { box-shadow: 0 0 35px #ff00ff, 0 0 45px #00ffff, 0 0 55px #ff9900; }
            100% { box-shadow: 0 0 25px #ff00ff, 0 0 35px #00ffff, 0 0 45px #ff9900; }
        }

        .avatar-particle {
            position: absolute;
            width: 7px;
            height: 7px;
            background: #ff00ff;
            border-radius: 50%;
            opacity: 0.9;
            z-index: 1;
            box-shadow: 0 0 12px rgba(255, 0, 255, 0.9);
        }

        .avatar-particle:nth-child(1) { animation: explodeParticle 2s linear infinite; left: 10%; background: #ff00ff; }
        .avatar-particle:nth-child(2) { animation: explodeParticle 2.2s linear infinite 0.4s; left: 30%; background: #00ffff; }
        .avatar-particle:nth-child(3) { animation: explodeParticle 2.4s linear infinite 0.8s; left: 50%; background: #ff9900; }
        .avatar-particle:nth-child(4) { animation: explodeParticle 2.1s linear infinite 1.2s; left: 70%; background: #ff00cc; }
        .avatar-particle:nth-child(5) { animation: explodeParticle 2.3s linear infinite 1.6s; left: 20%; background: #00ff00; }

        @keyframes explodeParticle {
            0% { transform: translateY(0) translateX(0); opacity: 0.9; scale: 1; }
            50% { transform: translateY(-70px) translateX(6px); opacity: 0.7; scale: 0.7; }
            100% { transform: translateY(-120px) translateX(-6px); opacity: 0; scale: 0.4; }
        }

        .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 5px solid #fff;
            z-index: 2;
            object-fit: cover;
        }

        .holographic-badge {
            position: absolute;
            bottom: 10px;
            right: 10px;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 18px;
            border: 4px solid #fff;
            animation: cosmicStar 1.2s infinite;
            z-index: 3;
            box-shadow: 0 0 15px rgba(255, 0, 255, 1.3);
        }

        @keyframes cosmicStar {
            0% { transform: rotate(0deg); box-shadow: 0 0 15px rgba(255, 0, 255, 1.3); }
            50% { transform: rotate(180deg); box-shadow: 0 0 25px rgba(255, 0, 255, 1.5); }
            100% { transform: rotate(360deg); box-shadow: 0 0 15px rgba(255, 0, 255, 1.3); }
        }

        .name {
            font-size: 2.5em;
            font-weight: 900;
            text-shadow: 0 0 30px rgba(255, 0, 255, 1.3);
            margin-bottom: 15px;
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00, #ff00ff);
            background-size: 600%;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: cosmicFlow 3s ease infinite, glitchText 0.4s infinite alternate;
            letter-spacing: 1px;
        }

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

        .name::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 4px;
            background: linear-gradient(90deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00);
            box-shadow: 0 0 15px rgba(0, 255, 255, 1.3);
            animation: cosmicLaser 1.5s infinite;
        }

        @keyframes cosmicLaser {
            0% { opacity: 1; transform: translateX(-50%) scaleX(0.9); }
            50% { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
            100% { opacity: 1; transform: translateX(-50%) scaleX(0.9); }
        }

        .bio {
            font-size: 1.2em;
            line-height: 1.6;
            text-shadow: 0 0 12px rgba(255, 0, 255, 1.3);
            margin-bottom: 15px;
            background: linear-gradient(45deg, #ffffff, #00ffcc, #ff00ff, #ff9900, #ff00cc, #00ff00);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            padding: 8px;
            border-radius: 10px;
            box-shadow: 0 0 30px rgba(0, 255, 255, 1.2);
            animation: cosmicHologram 1.5s infinite alternate;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .bio::before {
            content: '🌌';
            font-size: 1.3em;
            margin-right: 8px;
            animation: cosmicSpin 2.5s linear infinite;
        }

        .bio::after {
            content: '⚡️';
            font-size: 1.3em;
            margin-left: 8px;
            animation: cosmicSpin 2.5s linear infinite reverse;
        }

        @keyframes cosmicSpin {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        @keyframes cosmicHologram {
            0% { box-shadow: 0 0 30px rgba(0, 255, 255, 1.2); }
            100% { box-shadow: 0 0 40px rgba(255, 0, 255, 1.4); }
        }

        .skills {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .skill {
            background: linear-gradient(45deg, #1e1e2f, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.8em;
            text-transform: uppercase;
            box-shadow: 0 0 25px rgba(255, 0, 255, 1.3);
            transition: transform 0.5s ease;
        }

        .skill:hover {
            transform: rotateY(360deg);
            box-shadow: 0 0 35px rgba(255, 0, 255, 1.5);
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .social-links a {
            color: #fff;
            font-size: 1.8em;
            text-shadow: 0 0 12px rgba(0, 255, 255, 1.3);
            transition: all 0.5s ease;
            animation: neonPulse 1.5s infinite;
        }

        .social-links a:hover {
            color: #ff00ff;
            transform: scale(1.5);
            text-shadow: 0 0 25px rgba(255, 0, 255, 1.5);
        }

        @keyframes neonPulse {
            0% { text-shadow: 0 0 10px rgba(0, 255, 255, 1.2); }
            50% { text-shadow: 0 0 20px rgba(255, 0, 255, 1.4); }
            100% { text-shadow: 0 0 10px rgba(0, 255, 255, 1.2); }
        }

        .clock {
            font-size: 1.1em;
            text-shadow: 0 0 12px rgba(255, 0, 255, 1.3);
            margin-bottom: 15px;
            background: linear-gradient(90deg, #00ffff, #ff00ff, #ff9900, #ff00cc, #00ff00);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: glitchText 0.4s infinite alternate;
        }

        .clock::before {
            content: '⏳';
            margin-right: 8px;
        }

        .copyright {
            font-size: 0.9em;
            text-shadow: 0 0 10px rgba(0, 255, 255, 1.2);
        }

        .copyright a {
            color: #00ffff;
            text-decoration: none;
            transition: all 0.5s ease;
        }

        .copyright a:hover {
            color: #ff00ff;
            text-shadow: 0 0 20px rgba(255, 0, 255, 1.4);
        }

        .music-control {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 3;
        }

        #music-toggle {
            background: linear-gradient(45deg, #ff00ff, #00ffff, #ff9900, #ff00cc, #00ff00);
            border: none;
            color: #fff;
            font-size: 1.8em;
            padding: 12px;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 30px rgba(255, 0, 255, 1.3);
            transition: all 0.5s ease;
            animation: rotateButton 3.5s linear infinite;
        }

        #music-toggle:hover {
            transform: scale(1.5);
            box-shadow: 0 0 40px rgba(255, 0, 255, 1.5);
        }

        @keyframes rotateButton {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .cursor-trail {
            position: fixed;
            width: 10px;
            height: 10px;
            background: radial-gradient(circle, rgba(255, 0, 255, 0.8), transparent);
            border-radius: 50%;
            pointer-events: none;
            z-index: 999;
            animation: fadeTrail 0.5s ease-out forwards;
        }

        @keyframes fadeTrail {
            0% { opacity: 0.8; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.3); }
        }

        .click-burst {
            position: fixed;
            width: 15px;
            height: 15px;
            background: radial-gradient(circle, rgba(0, 255, 255, 0.8), transparent);
            border-radius: 50%;
            animation: burst 0.5s ease-out forwards;
            pointer-events: none;
            z-index: 999;
        }

        @keyframes burst {
            0% { transform: scale(0.5); opacity: 0.8; }
            100% { transform: scale(2); opacity: 0; }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            body {
                padding: 15px 8px;
            }

            .profile {
                max-width: 95%;
                padding: 15px;
                margin: 15px auto;
            }

            .ip-display, .ping-display, .location-display {
                font-size: 0.8em;
                padding: 6px 12px;
                margin-bottom: 10px;
            }

            .avatar-container {
                width: 110px;
                height: 110px;
            }

            .holographic-badge {
                width: 25px;
                height: 25px;
                font-size: 16px;
                bottom: 8px;
                right: 8px;
            }

            .name {
                font-size: 2em;
                margin-bottom: 12px;
            }

            .bio {
                font-size: 1em;
                padding: 6px;
                margin-bottom: 12px;
            }

            .bio::before, .bio::after {
                font-size: 1.1em;
                margin: 0 6px;
            }

            .skills {
                gap: 12px;
            }

            .skill {
                font-size: 0.7em;
                padding: 6px 12px;
            }

            .social-links a {
                font-size: 1.5em;
            }

            .clock {
                font-size: 1em;
                margin-bottom: 12px;
            }

            .copyright {
                font-size: 0.8em;
            }

            .music-control {
                bottom: 20px;
                right: 20px;
            }

            #music-toggle {
                font-size: 1.5em;
                padding: 10px;
            }

            .loading-text {
                font-size: 1.3em;
                margin-top: 25px;
            }

            .loading-avatar-container {
                width: 100px;
                height: 100px;
            }

            .loading-avatar {
                width: 80px;
                height: 80px;
            }

            .loading-particle {
                width: 6px;
                height: 6px;
            }

            .loading-progress {
                width: 180px;
                height: 10px;
                margin-top: 12px;
            }

            .glowing-orb {
                width: 30px;
                height: 30px;
                animation: none;
            }
        }

        @media (max-width: 480px) {
            body {
                padding: 12px 5px;
            }

            .profile {
                max-width: 98%;
                padding: 12px;
                margin: 10px auto;
            }

            .ip-display, .ping-display, .location-display {
                font-size: 0.75em;
                padding: 5px 10px;
                margin-bottom: 8px;
            }

            .avatar-container {
                width: 100px;
                height: 100px;
            }

            .holographic-badge {
                width: 22px;
                height: 22px;
                font-size: 14px;
                bottom: 6px;
                right: 6px;
            }

            .name {
                font-size: 1.8em;
                margin-bottom: 10px;
            }

            .bio {
                font-size: 0.9em;
                padding: 5px;
                margin-bottom: 10px;
            }

            .bio::before, .bio::after {
                font-size: 1em;
                margin: 0 5px;
            }

            .skills {
                gap: 10px;
            }

            .skill {
                font-size: 0.65em;
                padding: 5px 10px;
            }

            .social-links a {
                font-size: 1.4em;
            }

            .clock {
                font-size: 0.9em;
                margin-bottom: 10px;
            }

            .copyright {
                font-size: 0.75em;
            }

            .music-control {
                bottom: 15px;
                right: 15px;
            }

            .music-toggle {
                font-size: 1.4em;
                padding: 8px;
            }

            .loading-text {
                font-size: 1.2em;
                margin-top: 20px;
            }

            .loading-avatar-container {
                width: 90px;
                height: 90px;
            }

            .loading-avatar {
                width: 70px;
                height: 70px;
            }

            .loading-particle {
                width: 5px;
                height: 5px;
            }

            .loading-progress {
                width: 160px;
                height: 8px;
                margin-top: 10px;
            }

            .glowing-orb {
                width: 20px;
                height: 20px;
                animation: none;
            }
        }

        @media (min-width: 769px) {
            body {
                padding: 20px 12px;
            }

            .profile {
                max-width: 500px;
                padding: 18px;
                margin: 20px auto;
            }

            .ip-display, .ping-display, .location-display {
                font-size: 0.85em;
                padding: 8px 15px;
                margin-bottom: 12px;
            }

            .avatar-container {
                width: 120px;
                height: 120px;
            }

            .holographic-badge {
                width: 28px;
                height: 28px;
                font-size: 18px;
                bottom: 8px;
                right: 8px;
            }

            .name {
                font-size: 2.2em;
                margin-bottom: 15px;
            }

            .bio {
                font-size: 1.1em;
                padding: 8px;
                margin-bottom: 15px;
            }

            .bio::before, .bio::after {
                font-size: 1.2em;
                margin: 0 8px;
            }

            .skills {
                gap: 15px;
            }

            .skill {
                font-size: 0.8em;
                padding: 8px 15px;
            }

            .social-links a {
                font-size: 1.8em;
            }

            .clock {
                font-size: 1em;
                margin-bottom: 12px;
            }

            .copyright {
                font-size: 0.9em;
            }

            .music-control {
                bottom: 30px;
                right: 30px;
            }

            #music-toggle {
                font-size: 1.8em;
                padding: 12px;
            }
        }
    
</head>
<body>
    <div class="loading-screen" id="loading-screen">
        <div class="loading-avatar-container">
            <div class="loading-particle"></div>
            <div class="loading-particle"></div>
            <div class="loading-particle"></div>
            <div class="loading-particle"></div>
            <div class="loading-particle"></div>
            <img src="https://i.imgur.com/sqjjLlg.jpeg" alt="Loading Avatar" class="loading-avatar">
        </div>
        <div class="loading-text" id="loading-text">Đang Kết Nối Vũ Trụ Cosmic Overlord...</div>
        <div class="loading-progress">
            <div class="loading-progress-bar" id="loading-progress-bar"></div>
            <div class="loading-progress-text" id="loading-progress-text">0%</div>
        </div>
    </div>
    <video autoplay muted loop id="bg-video" poster="https://via.placeholder.com/1920x1080?text=Cosmic+Background" preload="auto">
        <source src="https://files.catbox.moe/0tyjpt.mp4" type="video/mp4" media="(min-width: 769px)">
        <source src="https://files.catbox.moe/0tyjpt.mp4" type="video/mp4" media="(max-width: 768px)">
    </video>
    <div class="gradient-overlay"></div>
    <div class="starfield"></div>
    <div class="glowing-orb"></div>
    <div class="glowing-orb"></div>
    <div class="glowing-orb"></div>
    <div id="particles-js"></div>
    <div class="profile">
        <div class="ip-display" id="ip-display">IP Của Bạn: Đang Tải...</div>
        <div class="ping-display" id="ping-display">Ping: Đang Đo...</div>
        <div class="location-display" id="location-display">Vị Trí: Đang Tải...</div>
        <div class="avatar-container">
            <div class="avatar-particle"></div>
            <div class="avatar-particle"></div>
            <div class="avatar-particle"></div>
            <div class="avatar-particle"></div>
            <div class="avatar-particle"></div>
            <img src="https://i.imgur.com/sqjjLlg.jpeg" alt="Avatar" class="avatar">
            <span class="holographic-badge"><i class="fas fa-crown"></i></span>
        </div>
        <h1 class="name">Nguyễn Cao Đăng Khôi</h1>
        <p class="bio">Nhà Phát Triển Full-Stack Vũ Trụ | Chúa Tể Thiên Hà Cosmic Overlord</p>
        <div class="skills">
            <span class="skill">JavaScript</span>
            <span class="skill">Python</span>
            <span class="skill">React</span>
            <span class="skill">Node.js</span>
            <span class="skill">Huyền Thoại FPS</span>
            <span class="skill">AI Vũ Trụ</span>
            <span class="skill">Blockchain</span>
            <span class="skill">Quantum Coding</span>
        </div>
        <div class="social-links">
            <a href="https://facebook.com/dangkhoiuytin1" target="_blank"><i class="fab fa-facebook-f"></i></a>
            <a href="https://instagram.com" target="_blank"><i class="fab fa-instagram"></i></a>
            <a href="https://tiktok.com/@rep_tee" target="_blank"><i class="fab fa-tiktok"></i></a>
        </div>
        <div class="clock" id="clock">00:00:00</div>
        <div class="copyright">© Bản Quyền <a href="https://nguyencaodangkhoi.pro.vn/" target="_blank">Nguyễn Cao Đăng Khôi</a></div>
    </div>
    <div class="music-control">
        <button id="music-toggle"><i class="fas fa-volume-up"></i></button>
    </div>
    <audio id="background-music" autoplay loop preload="auto">
        <source src="https://files.catbox.moe/7ng8wg.m4a" type="audio/mpeg">
    </audio>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js" defer></script>
    <script>
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 768;
        const loadingScreen = document.getElementById("loading-screen");
        const loadingText = document.getElementById("loading-text");
        const loadingProgressBar = document.getElementById("loading-progress-bar");
        const loadingProgressText = document.getElementById("loading-progress-text");

        // Anti-DDoS: Proof-of-Work (Increased Difficulty)
        function proofOfWork(difficulty = 8) {
            let nonce = 0;
            const start = Date.now();
            while (true) {
                const hash = btoa(String(nonce) + Date.now() + navigator.userAgent);
                if (hash.startsWith("0".repeat(difficulty))) {
                    return { nonce, time: Date.now() - start };
                }
                nonce++;
                if (Date.now() - start > 10000) break;
            }
            return null;
        }

        // Anti-DDoS: Advanced Bot Detection (Stricter)
        function isSuspiciousBot() {
            const userAgent = navigator.userAgent.toLowerCase();
            const isHeadless = /headless/i.test(userAgent) || !navigator.webdriver;
            const hasMouseMovement = localStorage.getItem("mouse_moved");
            const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
            const mouseEntropy = parseInt(localStorage.getItem("mouse_entropy")) || 0;
            const plugins = navigator.plugins.length;
            const mimeTypes = navigator.mimeTypes.length;
            const touchPattern = localStorage.getItem("touch_pattern") || "";
            return (
                !userAgent ||
                userAgent.includes('bot') ||
                userAgent.includes('crawler') ||
                isHeadless ||
                (!hasMouseMovement && !hasTouch) ||
                mouseEntropy < 50 || // Stricter threshold
                plugins === 0 ||
                mimeTypes === 0 ||
                (hasTouch && touchPattern.length < 10)
            );
        }

        // Track User Interactions with Entropy
        let mouseMoved = false;
        let mouseEntropy = 0;
        let lastMousePosition = { x: 0, y: 0 };
        let lastTouchTime = 0;
        let touchPattern = "";
        document.addEventListener("mousemove", (e) => {
            if (!mouseMoved) {
                mouseMoved = true;
                localStorage.setItem("mouse_moved", "true");
                attemptMusicPlayback();
            }
            const deltaX = Math.abs(e.clientX - lastMousePosition.x);
            const deltaY = Math.abs(e.clientY - lastMousePosition.y);
            mouseEntropy += deltaX + deltaY;
            localStorage.setItem("mouse_entropy", mouseEntropy);
            lastMousePosition = { x: e.clientX, y: e.clientY };
            if (!isMobile) createCursorTrail(e);
        });
        document.addEventListener("touchstart", (e) => {
            localStorage.setItem("mouse_moved", "true");
            const now = Date.now();
            if (now - lastTouchTime > 100) {
                mouseEntropy += 10;
                touchPattern += `T${now}`;
                localStorage.setItem("mouse_entropy", mouseEntropy);
                localStorage.setItem("touch_pattern", touchPattern);
                lastTouchTime = now;
            }
            attemptMusicPlayback();
        });
        document.addEventListener("click", (e) => {
            if (!isMobile) createClickBurst(e);
        });

        // Cursor Trail Effect
        function createCursorTrail(e) {
            const colors = ["#ff00ff", "#00ffff", "#ff9900", "#ff00cc", "#00ff00"];
            const trail = document.createElement("div");
            trail.className = "cursor-trail";
            trail.style.background = `radial-gradient(circle, ${colors[Math.floor(Math.random() * colors.length)]}, transparent)`;
            trail.style.left = `${e.clientX}px`;
            trail.style.top = `${e.clientY}px`;
            document.body.appendChild(trail);
            setTimeout(() => trail.remove(), 500);
        }

        // Click Burst Effect
        function createClickBurst(e) {
            for (let i = 0; i < 4; i++) {
                const burst = document.createElement("div");
                burst.className = "click-burst";
                burst.style.left = `${e.clientX + (Math.random() - 0.5) * 20}px`;
                burst.style.top = `${e.clientY + (Math.random() - 0.5) * 20}px`;
                document.body.appendChild(burst);
                setTimeout(() => burst.remove(), 500);
            }
        }

        // Anti-DDoS: Rate Limiter with Session Persistence (Stricter)
        const rateLimit = {
            lastCall: parseInt(localStorage.getItem("rate_limit_last_call")) || 0,
            minInterval: 3000, // Reduced from 5000ms
            reloadCount: parseInt(localStorage.getItem("rate_limit_reload_count")) || 0,
            maxReloads: 2, // Reduced from 3
            isAllowed() {
                const now = Date.now();
                if (now - this.lastCall < this.minInterval) {
                    this.reloadCount++;
                    localStorage.setItem("rate_limit_reload_count", this.reloadCount);
                    if (this.reloadCount > this.maxReloads) {
                        alert("Quá Nhiều Yêu Cầu! Vui Lòng Chờ.");
                        return false;
                    }
                    return false;
                }
                this.lastCall = now;
                this.reloadCount = 0;
                localStorage.setItem("rate_limit_last_call", this.lastCall);
                localStorage.setItem("rate_limit_reload_count", this.reloadCount);
                return true;
            }
        };

        // Anti-DDoS: Session-Based Request Throttling
        const sessionThrottle = {
            requests: parseInt(localStorage.getItem("session_requests")) || 0,
            maxRequests: 10,
            window: 60000, // 1 minute
            lastReset: parseInt(localStorage.getItem("session_last_reset")) || Date.now(),
            check() {
                const now = Date.now();
                if (now - this.lastReset > this.window) {
                    this.requests = 0;
                    this.lastReset = now;
                    localStorage.setItem("session_requests", this.requests);
                    localStorage.setItem("session_last_reset", this.lastReset);
                }
                this.requests++;
                localStorage.setItem("session_requests", this.requests);
                return this.requests <= this.maxRequests;
            }
        };

        // Anti-DDoS: Client-Side IP Blocklist Simulation
        const blocklist = {
            blocked: JSON.parse(localStorage.getItem("ip_blocklist")) || [],
            add(ip) {
                if (!this.blocked.includes(ip)) {
                    this.blocked.push(ip);
                    localStorage.setItem("ip_blocklist", JSON.stringify(this.blocked));
                }
            },
            isBlocked(ip) {
                return this.blocked.includes(ip);
            }
        };

        // Cache Management
        const cache = {
            get(key) {
                const data = localStorage.getItem(key);
                if (!data) return null;
                const { value, expiry } = JSON.parse(data);
                if (Date.now() > expiry) {
                    localStorage.removeItem(key);
                    return null;
                }
                return value;
            },
            set(key, value, ttl) {
                localStorage.setItem(key, JSON.stringify({
                    value,
                    expiry: Date.now() + ttl
                }));
            }
        };

        // CSRF Token Simulation
        const csrfToken = btoa(Math.random().toString(36).substring(2));

        // Check Network Type and Speed
        function getNetworkInfo() {
            const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
            return connection ? {
                type: connection.effectiveType || "unknown",
                speed: connection.downlink || 1
            } : { type: "unknown", speed: 1 };
        }

        // Simulate Loading Progress with Network Awareness
        function simulateLoadingProgress() {
            let progress = 0;
            const { type, speed } = getNetworkInfo();
            let intervalTime;
            if (type.includes("5g")) {
                intervalTime = 5; // Faster for 5G
            } else if (type.includes("4g")) {
                intervalTime = 20; // Moderate for 4G
            } else if (type.includes("wifi")) {
                intervalTime = 10; // Fast for WiFi
            } else {
                intervalTime = 40; // Slower for others
            }
            const speedFactor = Math.min(Math.max(speed / 10, 0.5), 2);
            const interval = setInterval(() => {
                progress += (Math.random() * 5 * speedFactor);
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    loadingProgressBar.style.width = "100%";
                    loadingProgressText.textContent = "100%";
                    loadingProgressBar.style.animation = "completeShake 0.4s";
                    loadingText.textContent = "Kết Nối Thành Công! Đang Tải Vũ Trụ Cosmic Overlord...";
                    setTimeout(loadAssets, 600);
                }
                loadingProgressBar.style.width = `${progress}%`;
                loadingProgressText.textContent = `${Math.round(progress)}%`;
            }, intervalTime / speedFactor);
        }

        // Loading Screen Logic
        async function initLoadingScreen() {
            const { type } = getNetworkInfo();
            const networkDisplay = type.includes("wifi") ? "WiFi" : type.toUpperCase();
            loadingText.textContent = `Đang Kết Nối Vũ Trụ Cosmic Overlord (${networkDisplay})...`;
            const powResult = proofOfWork();
            if (!powResult || isSuspiciousBot() || !sessionThrottle.check()) {
                let ip = cache.get("user_ip");
                if (!ip) {
                    try {
                        const data = await fetchWithBackoff('https://api.ipify.org?format=json');
                        ip = data.ip;
                        cache.set("user_ip", ip, 1800000);
                    } catch {
                        ip = "unknown";
                    }
                }
                blocklist.add(ip);
                loadingText.textContent = "Truy Cập Bị Chặn: Hành Vi Đáng Nghi!";
                loadingProgressBar.style.width = "0%";
                loadingProgressText.textContent = "0%";
                setTimeout(() => loadingScreen.classList.add("hidden"), 1500);
                return;
            }
            let ip = cache.get("user_ip");
            if (!ip) {
                try {
                    const data = await fetchWithBackoff('https://api.ipify.org?format=json');
                    ip = data.ip;
                    cache.set("user_ip", ip, 1800000);
                } catch {
                    ip = "unknown";
                }
            }
            if (blocklist.isBlocked(ip)) {
                loadingText.textContent = "IP Bị Chặn: Hành Vi Đáng Nghi!";
                loadingProgressBar.style.width = "0%";
                loadingProgressText.textContent = "0%";
                setTimeout(() => loadingScreen.classList.add("hidden"), 1500);
                return;
            }
            simulateLoadingProgress();
        }

        // Load Assets and Hide Loading Screen
        function loadAssets() {
            const video = document.getElementById("bg-video");
            video.load();
            Promise.all([
                new Promise(resolve => video.onloadeddata = resolve),
                new Promise(resolve => window.onload = resolve)
            ]).then(() => {
                loadingScreen.classList.add("hidden");
                initParticles();
                attemptMusicPlayback();
            }).catch(() => {
                loadingScreen.classList.add("hidden");
                initParticles();
                attemptMusicPlayback();
            });
        }

        // Initialize Particles.js (Optimized for Mobile)
        function initParticles() {
            particlesJS("particles-js", {
                particles: {
                    number: { value: isMobile ? 50 : 120, density: { enable: true, value_area: 800 } },
                    color: { value: ["#ff00ff", "#00ffff", "#ff9900", "#ff00cc", "#00ff00"] },
                    shape: { type: ["circle"], polygon: { nb_sides: 5 } },
                    opacity: { value: 0.8, random: true },
                    size: { value: 8, random: true },
                    line_linked: { enable: true, distance: 100, color: "#ffffff", opacity: 0.6, width: 1 },
                    move: { enable: true, speed: isMobile ? 3 : 5, direction: "none", random: true, straight: false, out_mode: "out" }
                },
                interactivity: {
                    detect_on: "canvas",
                    events: { onhover: { enable: !isMobile, mode: "grab" }, onclick: { enable: true, mode: "push" }, resize: true },
                    modes: { grab: { distance: 150, line_linked: { opacity: 0.6 } }, push: { particles_nb: 3 } }
                },
                retina_detect: true
            });
        }

        // Fetch with Backoff
        async function fetchWithBackoff(url, options = {}, retries = 3, delay = 1000) {
            for (let i = 0; i < retries; i++) {
                try {
                    const response = await fetch(url, {
                        ...options,
                        headers: { ...options.headers, 'X-CSRF-Token': csrfToken }
                    });
                    if (response.status === 429) throw new Error('Rate limit exceeded');
                    return await response.json();
                } catch (error) {
                    if (i === retries - 1) throw error;
                    await new Promise(resolve => setTimeout(resolve, delay * Math.pow(2, i)));
                }
            }
        }

        // Get IP and Location
        async function getIPAndLocation() {
            if (isSuspiciousBot() || !rateLimit.isAllowed() || !sessionThrottle.check()) {
                document.getElementById("ip-display").textContent = "IP Của Bạn: Bị Chặn";
                document.getElementById("location-display").textContent = "Vị Trí: Bị Chặn";
                return;
            }
            let ip = cache.get("user_ip");
            if (!ip && rateLimit.isAllowed()) {
                try {
                    const data = await fetchWithBackoff('https://api.ipify.org?format=json');
                    ip = data.ip;
                    cache.set("user_ip", ip, 1800000);
                } catch {
                    document.getElementById("ip-display").textContent = "IP Của Bạn: Lỗi";
                    return;
                }
            }
            if (blocklist.isBlocked(ip)) {
                document.getElementById("ip-display").textContent = "IP Của Bạn: Bị Chặn";
                document.getElementById("location-display").textContent = "Vị Trí: Bị Chặn";
                return;
            }
            document.getElementById("ip-display").textContent = `IP Của Bạn: ${ip || 'Đã Lưu'}`;
            let location = cache.get("user_location");
            if (!location && ip && rateLimit.isAllowed()) {
                try {
                    const locationData = await fetchWithBackoff(`https://ipapi.co/${ip}/json/`);
                    location = locationData.region || 'Không Xác Định';
                    cache.set("user_location", location, 1800000);
                } catch {
                    document.getElementById("location-display").textContent = "Vị Trí: Lỗi";
                    return;
                }
            }
            document.getElementById("location-display").textContent = `Vị Trí: ${location || 'Đã Lưu'}`;
        }

        // Measure Ping
        async function measurePing() {
            if (isSuspiciousBot() || !rateLimit.isAllowed() || !sessionThrottle.check()) {
                document.getElementById("ping-display").textContent = "Ping: Bị Chặn";
                return;
            }
            try {
                const startTime = performance.now();
                await fetch('https://www.google.com', { mode: 'no-cors' });
                const ping = Math.round(performance.now() - startTime);
                document.getElementById("ping-display").textContent = `Ping: ${ping} ms`;
            } catch {
                document.getElementById("ping-display").textContent = "Ping: Lỗi";
            }
        }

        // Music Autoplay Logic
        const music = document.getElementById("background-music");
        const musicToggle = document.getElementById("music-toggle");
        let isPlaying = true;

        function attemptMusicPlayback() {
            if (isPlaying) {
                const playPromise = music.play();
                if (playPromise !== undefined) {
                    playPromise.catch(() => setTimeout(attemptMusicPlayback, 1000));
                }
            }
        }

        musicToggle.addEventListener("click", () => {
            if (isPlaying) {
                music.pause();
                musicToggle.innerHTML = '<i class="fas fa-volume-mute"></i>';
            } else {
                music.play();
                musicToggle.innerHTML = '<i class="fas fa-volume-up"></i>';
            }
            isPlaying = !isPlaying;
        });

        // Initialize
        initLoadingScreen();
        getIPAndLocation();
        measurePing();
        setInterval(measurePing, 10000);

        // Real-time Clock
        function updateClock() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            document.getElementById("clock").textContent = `${hours}:${minutes}:${seconds}`;
            requestAnimationFrame(updateClock);
        }
        requestAnimationFrame(updateClock);
    </script>
</body>
</html>