/* TứCaTrảiNghiệm Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: #111827; /* Gray 900 */
    color: #f3f4f6; /* Gray 100 */
}

/* Hiệu ứng Rung (Shake) cho Nút CTA */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    85% { transform: translateX(0); }
    88% { transform: translateX(-5px) rotate(-2deg); }
    91% { transform: translateX(5px) rotate(2deg); }
    94% { transform: translateX(-5px) rotate(-2deg); }
    97% { transform: translateX(5px) rotate(2deg); }
}

.shake-btn {
    animation: shake 4s cubic-bezier(.36,.07,.19,.97) infinite;
}

/* Hiệu ứng Nhiễu Sóng (Glitch) khi Hover */
.glitch-hover {
    transition: all 0.2s ease;
    display: inline-block;
}

.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
    color: #ef4444; /* Red 500 */
    text-shadow: 2px 2px 0px #facc15, -2px -2px 0px #0ea5e9;
}

@keyframes glitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}

/* Tuỳ chỉnh Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1f2937; 
}
::-webkit-scrollbar-thumb {
    background: #4b5563; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #facc15; 
}

/* Glassmorphism cho thẻ (Card) */
.glass-card {
    background: rgba(31, 41, 55, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(75, 85, 99, 0.4);
}