<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>404 - Trang không tìm thấy</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes  pokemon-bounce {
            0% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-15px) scale(1.05); }
            100% { transform: translateY(0px) scale(1); }
        }
        .pokemon-bounce {
            animation: pokemon-bounce 3s ease-in-out infinite;
        }
        @keyframes  pokemon-glow {
            0% { box-shadow: 0 0 5px #fbbf24, 0 0 10px #f59e0b; }
            50% { box-shadow: 0 0 10px #fbbf24, 0 0 20px #f59e0b, 0 0 30px #f59e0b; }
            100% { box-shadow: 0 0 5px #fbbf24, 0 0 10px #f59e0b; }
        }
        @keyframes  fade-in-up {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes  scale-in {
            0% {
                opacity: 0;
                transform: scale(0.8);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        @keyframes  wave-scroll {
            0% { background-position: 0% 0%; }
            100% { background-position: 100% 100%; }
        }
        @keyframes  button-pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        .fade-in-up {
            animation: fade-in-up 0.8s ease-out forwards;
        }
        .scale-in {
            animation: scale-in 0.8s ease-out forwards;
        }
        .animate-delay-1 {
            animation-delay: 0.2s;
        }
        .animate-delay-2 {
            animation-delay: 0.4s;
        }
        .animate-delay-3 {
            animation-delay: 0.6s;
        }
        .button-pulse:hover {
            animation: button-pulse 1s ease-in-out infinite;
        }
        .bg-scroll {
            background-image: url('data:image/svg+xml,%3Csvg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="20" cy="20" r="3" fill="%23fbbf2420"/%3E%3Ccircle cx="50" cy="30" r="2" fill="%23ef444420"/%3E%3Ccircle cx="80" cy="25" r="3" fill="%233b82f620"/%3E%3Ccircle cx="30" cy="60" r="2" fill="%23fbbf2420"/%3E%3Ccircle cx="70" cy="70" r="3" fill="%23ef444420"/%3E%3C/svg%3E');
            animation: wave-scroll 20s linear infinite;
        }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-yellow-100 via-red-50 to-blue-100 flex items-center justify-center p-4 bg-scroll">
    <div class="max-w-4xl w-full text-center opacity-0 scale-in">
        <div class="bg-white/80 backdrop-blur-sm rounded-3xl p-8 shadow-xl border border-yellow-200">
            <div class="pokemon-bounce mb-8">
                <img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png" alt="Pikachu" class="w-40 h-40 mx-auto object-contain opacity-90">
            </div>
            
            <h1 class="text-5xl font-bold text-yellow-600 mb-4 pokemon-glow opacity-0 fade-in-up">404</h1>
            
            <p class="text-xl text-red-600/90 mb-6 font-medium opacity-0 fade-in-up animate-delay-1">
                "Pokemon này không tồn tại trong Pokedex!"
            </p>

            <div class="space-y-4">
                <p class="text-lg text-blue-600/80 opacity-0 fade-in-up animate-delay-2">
                    Trang bạn đang tìm kiếm đã biến mất như một Pokemon hoang dã trong cỏ.
                </p>
                
                <div class="flex justify-center space-x-4 opacity-0 fade-in-up animate-delay-3">
                    <a href="https://baoboilienminh.online" 
                       class="px-6 py-2.5 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-full hover:from-red-600 hover:to-red-700 transition-all duration-300 shadow-md hover:shadow-lg button-pulse">
                        Về trang chủ
                    </a>
                    
                    <button onclick="window.history.back()" 
                            class="px-6 py-2.5 bg-white/50 backdrop-blur-sm border border-yellow-200 text-yellow-700 rounded-full hover:bg-white/70 transition-all duration-300 button-pulse">
                        Quay lại
                    </button>
                </div>
            </div>

            <div class="mt-8 text-blue-600/60 text-sm italic opacity-0 fade-in-up animate-delay-3">
                "Gotta catch 'em all! Hãy tiếp tục hành trình của bạn!"
            </div>
        </div>
    </div>

    <script>
        document.querySelector('.pokemon-glow').style.animation = 'pokemon-glow 3s ease-in-out infinite';
        
        document.addEventListener('DOMContentLoaded', function() {
            const elements = document.querySelectorAll('.fade-in-up, .scale-in');
            elements.forEach(el => {
                el.addEventListener('animationend', function() {
                    el.style.opacity = '1';
                });
            });
        });
    </script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8c78df7c7c0f484497ecbca7046644da1771523124516" integrity="sha512-8DS7rgIrAmghBFwoOTujcf6D9rXvH8xm8JQ1Ja01h9QX8EzXldiszufYa4IFfKdLUKTTrnSFXLDkUEOTrZQ8Qg==" data-cf-beacon='{"version":"2024.11.0","token":"3a2b94c606974e18a5873c0d0e1b1223","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>