/* พื้นหลังไล่สีเคลื่อนช้า ๆ */
        .bg-gradient-animated {
            background: radial-gradient(circle at 0% 0%, rgba(236, 72, 153, 0.25), transparent 55%),
                        radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.18), transparent 55%);
            background-size: 140% 140%;
            animation: bgMove 16s ease-in-out infinite alternate;
        }

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

        /* fade-in เลื่อนขึ้นนิดหน่อยตอนโผล่มา */
        .fade-in-up {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease-out forwards;
        }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ใช้กับ element ที่จะให้ลอยขึ้นลงเบา ๆ */
        .float-y {
            animation: floatY 6s ease-in-out infinite;
        }

        @keyframes floatY {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-10px); }
        }

        /* glow รอบกรอบ/ปุ่มแบบจังหวะช้า ๆ */
        .glow-pulse {
            box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.7);
            animation: glowPulse 2.4s ease-out infinite;
        }

        @keyframes glowPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.6);
            }
            70% {
                box-shadow: 0 0 30px 12px rgba(236, 72, 153, 0.15);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(236, 72, 153, 0);
            }
        }

        /* สำหรับ element ที่อยากให้ reveal ตอนเลื่อนเจอ (ใช้คู่กับ JS ด้านล่าง) */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .star-filled { 
            color: rgba(236, 72, 153, 0.95);
        }
        .star-empty { 
            color: rgba(236, 72, 153, 0.20); 
        }

        .lang-btn{
  display:inline-block;
  font-size:0.875rem;
  padding:0.25rem 0.75rem;
  border-radius:9999px;
  border:1px solid rgba(236,72,153,0.4); /* pink-500/40 */
  color: rgba(251,207,232,0.9); /* pink-200 */
  transition: 0.2s ease;
  text-decoration:none;
}

/* hover เฉพาะปุ่มที่กดได้ */
.lang-btn:not(.lang-active):hover{
  background: rgba(236,72,153,0.1);
  transform: translateY(-1px);
}

/* ปุ่มภาษาที่อยู่หน้าเดียวกัน (active) */
.lang-active{
  background: rgba(236,72,153,0.95);
  border-color: rgba(236,72,153,1);
  color: #000;
  cursor: default;
  pointer-events: none; /* ✅ สำคัญ: กดไม่ได้ */
  transform: none;
}