@charset "utf-8";
/* CSS Document */

/* การตั้งค่าสำหรับคลาส hide-scrollbar */
/* สำหรับ Chrome, Safari, และ Opera (เบราว์เซอร์ที่ใช้ Webkit) */
.hide-scrollbar::-webkit-scrollbar {
    display: none; 
    width: 0; 
    height: 0; 
}
/* สำหรับ IE และ Edge */
.hide-scrollbar {
    -ms-overflow-style: none;
}
/* สำหรับ Firefox */
.hide-scrollbar {
    scrollbar-width: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.animate-float {
    animation: float 3s ease-in-out infinite;
}

	.border-l-blue-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
	.border-l-yellow-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(255, 255, 0 / var(--tw-border-opacity, 1));
}
	.border-l-purple-500 {
    --tw-border-opacity: 1;
    border-left-color: rgb(255, 22, 244 / var(--tw-border-opacity, 1));
}

.content-box {
    border-left: 4px solid #ff16f4;
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

.active-method { border-color: rebeccapurple !important; background-color: #f5f3ff !important; color: rebeccapurple; }

        /* กำหนดสีหลักที่กำหนดเองสำหรับ Tailwind (โทนสีม่วง) */
        /* และกำหนดแอนิเมชันสำหรับ QR Code */
        .qr-code-bounce {
            animation: bounce-in 1.5s infinite;
        }

        @keyframes bounce-in {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
            60% {
                transform: translateY(-5px);
            }
        }

        /* แอนิเมชันสำหรับการสั่นของปุ่ม (Call to Action) */
        .cta-shake {
            animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both infinite;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            perspective: 1000px;
        }

        @keyframes shake {
            10%, 90% {
                transform: translate3d(-1px, 0, 0);
            }
            
            20%, 80% {
                transform: translate3d(2px, 0, 0);
            }
            30%, 50%, 70% {
                transform: translate3d(-4px, 0, 0);
            }
            40%, 60% {
                transform: translate3d(4px, 0, 0);
            }
        }
	.pt-0 {
		padding-top: 0px !important;
	}