:root {
            --pink-gradient: linear-gradient(90deg, #ff85c0, #f759ab);
            --blue-gradient: linear-gradient(90deg, #70d6ff, #1890ff);
            --glass: rgba(255, 255, 255, 0.85);
        }

        body, html {
            margin: 0; padding: 0; width: 100%; height: 100%;
            font-family: 'Kanit', sans-serif; overflow-x: hidden;
        }

        .bg-layer {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: url('/Jobs/Gem.png') no-repeat center center;
            background-size: cover; z-index: -1;
        }

        /* Navbar */
        .navbar {
            position: sticky; top: 20px; width: fit-content; margin: 20px auto;
            background: #fff; padding: 10px 30px; border-radius: 50px;
            display: flex; align-items: center; gap: 25px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15); z-index: 1000;
        }

        .nav-item { text-decoration: none; color: #444; font-weight: bold; font-size: 14px; transition: 0.3s; }
        .nav-item:hover { color: #f759ab; }
        .nav-home { background: var(--pink-gradient); color: white !important; padding: 5px 20px; border-radius: 20px; }

        .logo-center { text-align: center; font-weight: bold; }
        .logo-main { color: #f759ab; font-size: 20px; display: block; line-height: 1; }
        .logo-sub { color: #1890ff; font-size: 10px; text-transform: uppercase; }

        /* Jobs Layout */
        .jobs-container {
            max-width: 1200px; margin: 50px auto; padding: 40px;
            background: var(--glass); backdrop-filter: blur(15px);
            border-radius: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.2);
            animation: fadeIn 0.8s ease;
        }

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

        .jobs-header { text-align: center; margin-bottom: 50px; }
        .jobs-header h1 { color: #f759ab; font-size: 40px; margin: 0; }
        .jobs-header p { color: #555; font-size: 18px; }

        .job-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

        .job-card {
            background: white; padding: 30px 20px; border-radius: 20px;
            text-align: center; transition: 0.4s; border: 2px solid transparent;
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .job-card:hover {
            transform: translateY(-10px); border-color: #f759ab;
            box-shadow: 0 15px 35px rgba(247, 89, 171, 0.2);
        }

        .job-card img { width: 80px; height: 80px; margin-bottom: 20px; }
        .job-card h3 { color: #333; font-size: 24px; margin: 10px 0; }
        .job-card p { color: #666; font-size: 14px; line-height: 1.6; min-height: 70px; }

        .class-list {
            margin-top: 20px; padding-top: 15px; border-top: 1px dashed #eee;
            display: flex; justify-content: center; gap: 10px;
        }

        .badge {
            background: #f0f2f5; color: #1890ff; padding: 5px 12px;
            border-radius: 12px; font-size: 12px; font-weight: bold;
        }

        .footer {
            text-align: center; padding: 40px 0; color: white;
            font-size: 12px; text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
        }
         /* กล่องควบคุมขนาดรูปภาพ */
        .logo-animation-box {
            height: 55px; /* ปรับขนาดความสูงของรูปบน Navbar ได้ที่นี่ */
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 2px 0; /* เว้นระยะห่างบน-ล่าง */
        }

        .nav-logo-char {
            height: 100%;
            width: auto;
            filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2));
            /* เรียกใช้แอนิเมชันขยับ */
            animation: logoBounce 3s infinite ease-in-out; 
            transform-origin: bottom center; /* ให้ฐานของรูปเป็นจุดหมุน/ยืด */
        }

        /* โค้ดแอนิเมชันขยับเด้งเบาๆ แบบนุ่มนวล (Squash and Stretch) */
        @keyframes logoBounce {
            0%, 100% {
                transform: scale(1) translateY(0);
            }
            30% {
                transform: scale(1.08, 0.92) translateY(0); /* ยุบตัวลงเล็กน้อย */
            }
            50% {
                transform: scale(0.95, 1.05) translateY(-6px); /* ยืดตัวขึ้นและลอยขึ้น */
            }
            70% {
                transform: scale(1.02, 0.98) translateY(0); /* ย่อตัวตอนตกลงมา */
            }
        }