{"id":4888,"date":"2025-12-21T16:23:54","date_gmt":"2025-12-21T09:23:54","guid":{"rendered":"https:\/\/phanthanhtuonghuan.id.vn\/?page_id=4888"},"modified":"2025-12-23T08:15:25","modified_gmt":"2025-12-23T01:15:25","slug":"uii-merry-bright-2026","status":"publish","type":"page","link":"https:\/\/uii.ueh.edu.vn\/vi\/uii-merry-bright-2026\/","title":{"rendered":"UII Merry &amp; Bright 2026"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4888\" class=\"elementor elementor-4888\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ab6b226 e-flex e-con-boxed e-con e-parent\" data-id=\"ab6b226\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0bfce6a elementor-widget elementor-widget-html\" data-id=\"0bfce6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"vi\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\r\n    <title>UII Season's Greetings<\/title>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600&display=swap\" rel=\"stylesheet\">\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/canvas-confetti@1.6.0\/dist\/confetti.browser.min.js\"><\/script>\r\n\r\n    <style>\r\n        \/* --- 1. RESET --- *\/\r\n        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }\r\n        body { overflow: hidden; background-color: #000; }\r\n\r\n        \/* --- 2. FULLSCREEN OVERLAY --- *\/\r\n        .fullscreen-overlay {\r\n            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;\r\n            z-index: 9999999; \r\n            background: radial-gradient(circle at center, #1a2b4a 0%, #000000 100%);\r\n            display: flex; justify-content: center; align-items: center;\r\n            perspective: 1500px; overflow: hidden;\r\n        }\r\n\r\n        \/* --- 3. BACKGROUND EFFECTS --- *\/\r\n        .stars {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;\r\n            background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(rgba(255,255,255,0.5) 2px, transparent 2px);\r\n            background-size: 50px 50px, 100px 100px;\r\n            animation: twinkle 4s infinite alternate; opacity: 0.3; z-index: 0;\r\n        }\r\n        @keyframes twinkle { 0% { opacity: 0.3; transform: scale(1); } 100% { opacity: 0.6; transform: scale(1.1); } }\r\n\r\n        .snow-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }\r\n        .snowflake { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; opacity: 0.8; animation: fall linear infinite; }\r\n        @keyframes fall { to { transform: translateY(110vh); } }\r\n\r\n        \/* --- 4. CARD WRAPPER --- *\/\r\n        .card-wrapper {\r\n            position: relative; height: 80vh; aspect-ratio: 5\/7; max-width: 90vw;\r\n            transform-style: preserve-3d; transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n            cursor: pointer; z-index: 10;\r\n        }\r\n        .card-wrapper.flipped { transform: rotateY(-180deg); }\r\n\r\n        \/* --- 5. CARD FACES --- *\/\r\n        .card-face {\r\n            position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n            backface-visibility: hidden; border-radius: 15px; background: transparent;\r\n            box-shadow: 0 20px 50px rgba(0,0,0,0.6);\r\n        }\r\n        .card-img { width: 100%; height: 100%; object-fit: fill; display: block; border-radius: 15px; }\r\n        .face-front { z-index: 2; transform: rotateY(0deg); }\r\n        .face-back { transform: rotateY(180deg); }\r\n\r\n        \/* --- 6. UI ELEMENTS --- *\/\r\n        .tap-hint {\r\n            position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);\r\n            display: flex; flex-direction: column; align-items: center; z-index: 20; pointer-events: none;\r\n            animation: float 2s ease-in-out infinite; transition: opacity 0.5s;\r\n        }\r\n        .hand-icon {\r\n            font-size: 24px; width: 50px; height: 50px; background: rgba(238, 111, 53, 0.9);\r\n            border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white;\r\n            box-shadow: 0 0 20px rgba(238, 111, 53, 0.6); border: 2px solid rgba(255,255,255,0.5);\r\n        }\r\n        .hint-text {\r\n            margin-top: 8px; color: white; font-size: 11px; font-weight: 700; letter-spacing: 1px;\r\n            text-shadow: 0 2px 4px rgba(0,0,0,0.8); font-family: 'Montserrat', sans-serif;\r\n        }\r\n        @keyframes float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }\r\n\r\n        .web-link { position: absolute; bottom: 0; left: 0; width: 100%; height: 100px; z-index: 30; cursor: pointer; }\r\n        .close-btn { position: absolute; top: 20px; right: 20px; color: rgba(255,255,255,0.5); font-size: 30px; cursor: pointer; z-index: 100; }\r\n        .close-btn:hover { color: white; }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <div class=\"fullscreen-overlay\" id=\"scene\">\r\n        <div class=\"close-btn\" onclick=\"closeOverlay()\">\u00d7<\/div>\r\n        <div class=\"stars\"><\/div>\r\n        <div class=\"snow-container\" id=\"snow-container\"><\/div>\r\n\r\n        <div class=\"card-wrapper\" onclick=\"toggleCard()\">\r\n            <div class=\"card-face face-front\">\r\n                <img decoding=\"async\" src=\"http:\/\/phanthanhtuonghuan.id.vn\/wp-content\/uploads\/2025\/12\/Red-And-White-Traditional-Christmas-Event-Instagram-Post.png\" class=\"card-img\" alt=\"Front\">\r\n                <div class=\"tap-hint\" id=\"hint\">\r\n                    <div class=\"hand-icon\">\ud83d\udc46<\/div>\r\n                    <span class=\"hint-text\">CH\u1ea0M \u0110\u1ec2 M\u1ede<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            <div class=\"card-face face-back\">\r\n                <img decoding=\"async\" src=\"http:\/\/phanthanhtuonghuan.id.vn\/wp-content\/uploads\/2025\/12\/2-1.png\" class=\"card-img\" alt=\"Back\">\r\n                <a href=\"https:\/\/uii.ueh.edu.vn\" target=\"_blank\" class=\"web-link\"><\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n        const card = document.querySelector('.card-wrapper');\r\n        const hint = document.getElementById('hint');\r\n        const overlay = document.getElementById('scene');\r\n        let isOpened = false;\r\n        \r\n        \/\/ --- C\u1ea4U H\u00ccNH NH\u1ea0C ---\r\n        \/\/ \u0110\u00e3 c\u1eadp nh\u1eadt link nh\u1ea1c .m4a c\u1ee7a b\u1ea1n\r\n        \/\/ L\u01afU \u00dd: N\u1ebfu web c\u1ee7a b\u1ea1n ch\u1ea1y HTTPS m\u00e0 nh\u1ea1c kh\u00f4ng ph\u00e1t, h\u00e3y \u0111\u1ed5i 'http' th\u00e0nh 'https' \u1edf d\u00f2ng d\u01b0\u1edbi:\r\n        const musicUrl = \"http:\/\/phanthanhtuonghuan.id.vn\/wp-content\/uploads\/2025\/12\/We-wish-you-a-merry-christmas-w_Sheet-Music-Piano-cover-Iso-Piano-mp3cut.net_.m4a\"; \r\n        \r\n        \/\/ T\u1ea1o Audio Object\r\n        let bgAudio = new Audio(musicUrl);\r\n        bgAudio.loop = true;\r\n        bgAudio.preload = 'auto'; \/\/ T\u1ea3i tr\u01b0\u1edbc t\u1ed1i \u0111a\r\n        \r\n        \/\/ Y\u00eau c\u1ea7u tr\u00ecnh duy\u1ec7t t\u1ea3i nh\u1ea1c ngay khi v\u00e0o trang\r\n        bgAudio.load();\r\n\r\n        function toggleCard() {\r\n            card.classList.toggle('flipped');\r\n\r\n            if (card.classList.contains('flipped')) {\r\n                \/\/ M\u1ede THI\u1ec6P\r\n                if(hint) hint.style.opacity = '0';\r\n                fireConfetti();\r\n                \r\n                if (!isOpened) {\r\n                    \/\/ Ph\u00e1t ngay l\u1eadp t\u1ee9c\r\n                    bgAudio.volume = 0.5;\r\n                    var playPromise = bgAudio.play();\r\n                    \r\n                    if (playPromise !== undefined) {\r\n                        playPromise\r\n                        .then(_ => console.log(\"Nh\u1ea1c \u0111ang ph\u00e1t!\"))\r\n                        .catch(error => console.log(\"L\u1ed7i ph\u00e1t nh\u1ea1c (C\u00f3 th\u1ec3 do Mixed Content http\/https): \" + error));\r\n                    }\r\n                    isOpened = true;\r\n                }\r\n            } else {\r\n                \/\/ \u0110\u00d3NG THI\u1ec6P\r\n                if(hint) hint.style.opacity = '1';\r\n                \/\/ bgAudio.pause(); \/\/ B\u1ecf comment n\u1ebfu mu\u1ed1n \u0111\u00f3ng thi\u1ec7p th\u00ec t\u1eaft nh\u1ea1c\r\n            }\r\n        }\r\n\r\n        function closeOverlay() {\r\n            overlay.style.display = 'none';\r\n            document.body.style.overflow = 'auto';\r\n            bgAudio.pause();\r\n            bgAudio.currentTime = 0; \/\/ Tua l\u1ea1i t\u1eeb \u0111\u1ea7u\r\n        }\r\n\r\n        function fireConfetti() {\r\n            var duration = 2000;\r\n            var animationEnd = Date.now() + duration;\r\n            var colors = ['#ee6f35', '#254385', '#ffffff'];\r\n\r\n            (function frame() {\r\n                var timeLeft = animationEnd - Date.now();\r\n                if (timeLeft <= 0) return;\r\n                var particleCount = 50 * (timeLeft \/ duration);\r\n                confetti({\r\n                    particleCount: particleCount, startVelocity: 30, spread: 360,\r\n                    ticks: 60, zIndex: 99999999,\r\n                    origin: { x: Math.random(), y: Math.random() - 0.2 },\r\n                    colors: colors\r\n                });\r\n                requestAnimationFrame(frame);\r\n            }());\r\n        }\r\n\r\n        \/\/ T\u1ea1o tuy\u1ebft r\u01a1i\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const snowContainer = document.getElementById('snow-container');\r\n            const numberOfSnowflakes = 40;\r\n            for (let i = 0; i < numberOfSnowflakes; i++) {\r\n                const snowflake = document.createElement('div');\r\n                snowflake.classList.add('snowflake');\r\n                snowflake.style.left = Math.random() * 100 + 'vw';\r\n                snowflake.style.animationDuration = Math.random() * 5 + 5 + 's';\r\n                snowflake.style.animationDelay = -Math.random() * 5 + 's';\r\n                snowflake.style.width = snowflake.style.height = Math.random() * 5 + 3 + 'px';\r\n                snowContainer.appendChild(snowflake);\r\n            }\r\n        });\r\n    <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>UII Season&#8217;s Greetings \u00d7 \ud83d\udc46 CH\u1ea0M \u0110\u1ec2 M\u1ede<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-4888","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages\/4888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/comments?post=4888"}],"version-history":[{"count":49,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages\/4888\/revisions"}],"predecessor-version":[{"id":5330,"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/pages\/4888\/revisions\/5330"}],"wp:attachment":[{"href":"https:\/\/uii.ueh.edu.vn\/vi\/wp-json\/wp\/v2\/media?parent=4888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}