body {
            font-family: 'Quicksand', sans-serif;
            overflow: hidden;
        }

        .font-dancing {
            font-family: 'Dancing Script', cursive;
        }

        .gradient-overlay {
            background: radial-gradient(circle at 50% 50%, rgba(29, 3, 40, 0.5) 0%, rgba(136, 45, 128, 0.7) 40%, rgba(41, 1, 32, 0.9) 100%);
        }

        .animated-letter {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px) scale(0.8);
            animation: fadeInLetter 0.5s forwards;
        }

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

        .heart {
            position: absolute;
            width: 20px;
            height: 20px;
            opacity: 0;
            animation: floatUp 5s ease-in-out infinite;
        }
        
        .heart::before,
        .heart::after {
            content: '';
            position: absolute;
            top: 0;
            left: 10px;
            width: 10px;
            height: 16px;
            background: #ff69b4;
            border-radius: 10px 10px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }

        .heart::after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }

        @keyframes floatUp {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh);
                opacity: 0;
            }
        }

        #hoa-roi-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        .shake {
            animation: shake 0.5s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
            20%, 40%, 60%, 80% { transform: translateX(8px); }
        }