body { margin: 0; padding: 0; overflow: hidden; background-color: #000; }
        
        #interactive-wrapper { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; background-color: #000; font-family: 'Roboto', sans-serif; color: white; }
        .font-title { font-family: 'Montserrat', sans-serif; }
        
        .glass-panel { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6); }
        .animate-fade-in { animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        
        .tab-active-blue { background-color: rgba(56, 189, 248, 0.3); border-color: #38bdf8; color: #fff; box-shadow: 0 0 10px rgba(56, 189, 248, 0.5); }
        .tab-active-pink { background-color: rgba(236, 72, 153, 0.3); border-color: #ec4899; color: #fff; box-shadow: 0 0 10px rgba(236, 72, 153, 0.5); }
        .tab-active-yellow { background-color: rgba(234, 179, 8, 0.3); border-color: #eab308; color: #fff; box-shadow: 0 0 10px rgba(234, 179, 8, 0.5); }
        .tab-inactive { background-color: rgba(255, 255, 255, 0.1); border-color: transparent; color: #9ca3af; }
        
        .progress-bar-bg { background-color: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; height: 12px; flex-grow: 1; margin: 0 15px; }
        .progress-bar-fill { height: 100%; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
        
        .custom-scrollbar::-webkit-scrollbar { display: block; width: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 10px; }

        /* Scroll Mobile Setup */
        #main-ui-layer {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; display: flex; flex-direction: column; justify-content: flex-start; padding: 20px;
            overflow-y: auto; overflow-x: hidden; 
        }
        #main-ui-layer::-webkit-scrollbar { display: none; } 
        #main-ui-layer { -ms-overflow-style: none; scrollbar-width: none; } 

        #cards-container {
            pointer-events: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; 
            width: 100%; max-width: 1152px; margin: 0 auto; gap: 12px; margin-top: 16px; margin-bottom: 40px; transition: all 0.3s;
            flex-grow: 1;
        }
        
        #header-group {
            pointer-events: auto; margin-top: 55px; /* Lề an toàn Mobile */
        }

        /* Chỉnh lại layout trên PC */
        @media (min-width: 768px) {
            #header-group { margin-top: 60px; }
            #main-ui-layer { justify-content: space-between; overflow: hidden; } 
            #cards-container { flex-direction: row; align-items: center; justify-content: space-between; margin-top: 0; gap: 0; flex-grow: 0; }
        }

        #btn-export-zip {
            position: absolute; top: 15px; right: 15px; z-index: 9999; background: rgba(15, 23, 42, 0.85);
            border: 1px solid #38bdf8; color: #38bdf8; padding: 10px 20px; font-weight: bold; border-radius: 8px;
            cursor: pointer; pointer-events: auto; transition: all 0.3s;
        }
        #btn-export-zip:hover { background: #38bdf8; color: #fff; box-shadow: 0 0 15px rgba(56,189,248,0.5); }