@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

        body {
            font-family: 'Sarabun', 'Inter', sans-serif;
            background-color: #eef2f7;
        }
        .glass-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 20px 50px rgba(0, 50, 150, 0.08);
        }
        .btn-gradient {
            background: linear-gradient(135deg, #2563eb, #1d4ed8);
            transition: all 0.3s ease;
        }
        .btn-gradient:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }
        .background {
        position: fixed;
        inset: 0;
        background: radial-gradient(circle at 20% 20%, #eef2f7 0%, transparent 35%),
                    radial-gradient(circle at 80% 80%, #a5d1ff 0%, transparent 40%),
                    #c2daff;   
        filter: blur(40px);
        transform: scale(1.1);
        z-index: -1;
        }

        /*index.php*/
        .text-psu-blue {
            color: #1a56b8;
        }
        .bg-psu-blue {
            background-color: #1a56b8;
        }
        .bg-psu-hover {
            background-color: #144493;
        }
        /* แอนิเมชันสำหรับโหลดหน้าเว็บแบบเนียนๆ */
        .fade-in-up {
            animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }