<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title') - GMO-Z.com RUNSYSTEM</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-[#f8fafc] text-text-dark font-sans antialiased min-h-screen flex items-center justify-center p-0 m-0">
    <div class="w-full max-w-[480px] sm:w-[480px] bg-white border border-[#e2e8f0] p-6 sm:p-10 text-center transition-all duration-300 mx-4 my-auto sm:mx-0"
         style="box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); border-radius: 24px;">
        <!-- Logo -->
        <div class="mb-6 sm:mb-8 flex justify-center">
            <img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-8 sm:h-10 w-auto object-contain">
        </div>
        
        <!-- Illustration -->
        @yield('illustration')

        <!-- Error Code -->
        <div class="mb-2 sm:mb-4">
            <span class="text-[80px] sm:text-[110px] font-[900] text-primary leading-none tracking-tighter block select-none">
                @yield('code')
            </span>
        </div>
        
        <!-- Error Title -->
        <h1 class="text-[14px] sm:text-[16px] font-[700] text-text-dark mb-3 sm:mb-4 uppercase tracking-wider">
            @yield('title')
        </h1>
        
        <!-- Error Message -->
        <div class="text-[12px] sm:text-[13px] text-text-medium mb-6 sm:mb-8 leading-relaxed max-w-[360px] mx-auto">
            @yield('message')
        </div>
        
        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-center items-center gap-3">
            @yield('action')
        </div>
        
        <!-- Copyright Footer -->
        <div class="mt-8 sm:mt-12 pt-5 border-t border-[#f1f5f9]">
            <span class="text-[10px] text-text-muted font-semibold">&copy; 2026 GMO-Z.com RUNSYSTEM. All rights reserved.</span>
        </div>
    </div>
</body>
</html>
