:root { --primary-color: #1b4d3e; --secondary-color: #ffca28; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #eceff1; margin: 0; padding: 0; }
        
        /* Header Section */
        .header { 
            background: white; 
            padding: 30px 0; 
            text-align: center; 
            border-bottom: 4px solid var(--primary-color); 
            box-shadow: 0 2px 15px rgba(0,0,0,0.1); 
        }

        /* Container สำหรับโลโก้สลับภาพและแสงเงา */
        .logo-container {
            position: relative;
            display: inline-block;
            width: 160px;
            height: 160px;
            overflow: hidden;
            border-radius: 50%; /* ทรงวงกลมตามโลโก้ */
            background: #fff;
            box-shadow: 0 0 20px rgba(27, 77, 62, 0.2);
            transition: transform 0.3s ease;
        }

        .logo-container:hover { transform: scale(1.05); }

        .logo-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* อนิเมชั่นสลับภาพ (Crossfade) */
        .logo-top {
            z-index: 2;
            animation: crossfade 6s infinite ease-in-out;
        }

        @keyframes crossfade {
            0%, 45% { opacity: 1; }
            55%, 100% { opacity: 0; }
        }

        /* เอฟเฟกต์แสงเปล่งประกายวิ่งผ่าน */
        .logo-container::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -150%;
            width: 50%;
            height: 200%;
            background: linear-gradient(
                to right, 
                rgba(255,255,255,0) 0%, 
                rgba(255,255,255,0.7) 50%, 
                rgba(255,255,255,0) 100%
            );
            transform: rotate(30deg);
            animation: shine 4s infinite;
            z-index: 3;
        }

        @keyframes shine {
            0% { left: -150%; }
            20% { left: 150%; }
            100% { left: 150%; }
        }

        .header h1 { margin-top: 15px; color: var(--primary-color); font-size: 24px; font-weight: 800; }
        .header p { color: #666; margin: 5px 0 0 0; }

        /* Main Content UI */
        .container { max-width: 900px; margin: 30px auto; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        .breadcrumb { background: #f8f9fa; padding: 12px 20px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; color: #555; }
        .breadcrumb a { color: var(--primary-color); text-decoration: none; font-weight: bold; }
        
        .item { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #f0f0f0; transition: 0.2s; }
        .item:hover { background: #f1f8e9; }
        .info { flex-grow: 1; cursor: pointer; display: flex; align-items: center; font-size: 16px; color: #333; }
        .folder-icon { color: var(--secondary-color); font-size: 24px; margin-right: 15px; }
        .file-icon { color: #90a4ae; font-size: 24px; margin-right: 15px; }
        
        .actions { display: flex; gap: 8px; }
        .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 5px; color: white; transition: 0.3s; }
        .btn-zip { background: #ff9800; }
        .btn-dl { background: var(--primary-color); }
        .btn:hover { opacity: 0.8; }

        .loading-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; }