<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Quiz/Poll Tâm Lý Học</title>
    
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <script src="https://unpkg.com/lucide@latest"></script>

    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-white text-black h-[100dvh] w-full overflow-hidden">

    <div id="root" class="h-full w-full"></div>

    <script type="text/babel" data-type="module" src="script.js"></script>

    <script>
        (function() {
            var resized = false;
            var maxAttempts = 3;
            var attempts = 0;
            
            function calculateHeight() {
                try {
                    var heights = [];
                    if (document.body) {
                        heights.push(document.body.scrollHeight);
                        heights.push(document.body.offsetHeight);
                    }
                    if (document.documentElement) {
                        heights.push(document.documentElement.scrollHeight);
                        heights.push(document.documentElement.offsetHeight);
                    }
                    
                    var importantElements = document.querySelectorAll('.quiz-cta-button, .quiz-cta-container, .quiz-question:last-child, body > *:last-child');
                    var maxBottom = 0;
                    
                    if (importantElements.length > 0) {
                        for (var i = 0; i < importantElements.length; i++) {
                            var rect = importantElements[i].getBoundingClientRect();
                            var bottom = rect.bottom + window.pageYOffset;
                            if (bottom > maxBottom) maxBottom = bottom;
                        }
                    } else {
                        var lastElements = document.querySelectorAll('body > *:nth-last-child(-n+3)');
                        for (var j = 0; j < lastElements.length; j++) {
                            var rect = lastElements[j].getBoundingClientRect();
                            var bottom = rect.bottom + window.pageYOffset;
                            if (bottom > maxBottom) maxBottom = bottom;
                        }
                    }
                    heights.push(maxBottom);
                    
                    var maxHeight = Math.max.apply(Math, heights.filter(function(h) { return h > 0; }));
                    return maxHeight > 100 ? maxHeight : 600; 
                } catch (e) {
                    return 600; 
                }
            }
            
            function sendResizeMessage(forceResize) {
                if (!forceResize && resized && attempts >= maxAttempts) return;
                
                var height = calculateHeight();
                if (height > 0) {
                    if (!forceResize) attempts++;
                    var buffer = 0; 
                    
                    if (height < 500) buffer = -10;
                    else if (height > 1500) buffer = 0;
                    
                    var finalHeight = height + buffer;
                    
                    var currentIframe = window.frameElement;
                    if (currentIframe) {
                        currentIframe.style.height = finalHeight + 'px';
                    }
                    
                    if (window.parent && window.parent !== window) {
                        window.parent.postMessage({
                            type: 'resize-iframe',
                            height: finalHeight
                        }, '*');
                        
                        if (!forceResize && attempts >= maxAttempts) {
                            resized = true;
                        }
                    }
                }
            }
            
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', sendResizeMessage);
            } else {
                sendResizeMessage();
            }
            
            window.addEventListener('load', function() {
                setTimeout(sendResizeMessage, 100);
                setTimeout(sendResizeMessage, 500);
                setTimeout(sendResizeMessage, 1000);
            });
            
            var userInteractionEvents = ['click', 'change', 'input', 'keyup', 'mouseup', 'touchend'];
            userInteractionEvents.forEach(function(eventType) {
                document.addEventListener(eventType, function() {
                    setTimeout(function() {
                        sendResizeMessage(true); 
                    }, 100);
                }, true);
            });
            
            document.addEventListener('change', function(event) {
                if (event.target && (event.target.type === 'radio' || event.target.type === 'checkbox')) {
                    setTimeout(function() {
                        sendResizeMessage(true); 
                    }, 150);
                    setTimeout(function() {
                        sendResizeMessage(true); 
                    }, 300);
                }
            });
            
            if (window.MutationObserver && attempts < maxAttempts) {
                var observer = new MutationObserver(function(mutations) {
                    var shouldResize = false;
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            shouldResize = true;
                        }
                        if (mutation.type === 'childList' && (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)) {
                            shouldResize = true;
                        }
                    });
                    
                    if (shouldResize) {
                        setTimeout(function() {
                            sendResizeMessage(true);
                        }, 200);
                    }
                });
                
                observer.observe(document.body || document.documentElement, {
                    childList: true,
                    subtree: true,
                    attributes: true,
                    attributeFilter: ['class', 'style', 'hidden']
                });
                
                setTimeout(function() {
                    observer.disconnect();
                }, 30000);
            }
        })();
    </script>
</body>
</html>