:root { 
            --primary: #0f172a; --primary-light: #1e293b; 
            --accent: #f43f5e; --accent-gradient: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
            --bg: #f8fafc; --text: #334155; --text-light: #64748b; --white: #ffffff; 
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem;
        }
        
        html, body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; touch-action: pan-x pan-y; overscroll-behavior-x: none; overscroll-behavior-y: auto; }
        body { font-family: 'Montserrat', sans-serif; background: var(--bg); color: var(--text); margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
        .navbar, .page-header, .container { width: 100%; box-sizing: border-box; }
        a { text-decoration: none; color: inherit; transition: 0.3s; }
        ul { list-style: none; padding: 0; margin: 0; }

        /* HEADER & CONTAINER */
        .page-header { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); color: white; padding: 50px 20px; text-align: center; margin-bottom: -30px; border-radius: 0 0 40px 40px; position: relative; overflow: hidden; }
        .page-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(244,63,94,0.1) 0%, transparent 60%); pointer-events: none; }
        .page-header h1 { margin: 0; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.5px; position: relative; z-index: 1; }

        .container { max-width: 1050px; margin: 0 auto; padding: 20px; flex: 1; position: relative; z-index: 2; }
        
        /* PROMO BANNER */
        .promo-banner { background: var(--accent-gradient); color: white; padding: 30px 40px; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 15px 30px -5px rgba(244, 63, 94, 0.4); margin-bottom: 50px; position: relative; overflow: hidden; }
        .promo-banner::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1)); transform: skewX(-20deg); pointer-events: none; }
        .promo-content { position: relative; z-index: 1; }
        .promo-content h2 { margin: 0 0 10px 0; font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
        .promo-content h2 i { color: #ffe4e6; }
        .promo-content p { margin: 0; font-size: 1rem; opacity: 0.95; line-height: 1.5; }
        
        .btn-facebook { background: white; color: var(--accent); padding: 12px 25px; border-radius: 50px; font-weight: 700; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-md); position: relative; z-index: 1; transition: all 0.3s ease; }
        .btn-facebook:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); background: #fff5f5; }

        /* SECTIONS & FILES */
        .section-title { font-size: 1.4rem; font-weight: 800; color: var(--primary); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; margin-top: 40px; }
        .section-title i { background: #e2e8f0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--primary-light); font-size: 1.1rem; }
        
        .file-list { display: grid; grid-template-columns: 1fr; gap: 16px; }
        .file-item { background: white; padding: 20px 24px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); border: 1px solid rgba(0,0,0,0.03); transition: all 0.3s ease; gap: 15px;}
        .file-item:hover { transform: translateY(-3px); border-color: rgba(244,63,94,0.1); box-shadow: var(--shadow-hover); }
        
        .file-info { display: flex; align-items: center; gap: 18px; flex-grow: 1; overflow: hidden;}
        
        .icon-container { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
        .icon-container.pdf { background: #ffe4e6; color: #e11d48; }
        .icon-container.audio { background: #fef08a; color: #ca8a04; }
        .icon-container.word { background: #dbeafe; color: #2563eb; }
        .icon-container.excel { background: #dcfce3; color: #16a34a; }
        .icon-container.folder { background: #ffedd5; color: #ea580c; }
        .icon-container.pptx { background: #ffedd5; color: #ea580c; }

        .file-name { font-weight: 700; font-size: 1.05rem; color: var(--primary); display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .file-desc { font-size: 0.85rem; color: var(--text-light); margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
        
        .btn-dl { background: #f1f5f9; color: var(--primary); padding: 10px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; border: none; cursor: pointer; text-decoration: none;}
        .btn-dl i { font-size: 1rem; }
        .btn-dl:hover { background: var(--primary); color: white; transform: translateY(-1px); box-shadow: var(--shadow-sm);}

        .file-item.locked { opacity: 0.75; background: #f8fafc; border: 1px dashed #cbd5e1; }
        .file-item.locked:hover { transform: none; box-shadow: none; border-color: #cbd5e1; }
        .btn-dl.locked { background: #e2e8f0; color: #94a3b8; /* Bỏ pointer-events: none để bấm được vào link /upgrade */ }
        .btn-dl.locked:hover { background: var(--accent); color: white; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
        
        .badge { font-size: 0.65rem; padding: 4px 8px; border-radius: 50px; font-weight: 800; letter-spacing: 0.5px; }
        .file-list .badge-free { background: #10b981; color: white; }
        .file-list .badge-vip { background: var(--accent-gradient); color: white; box-shadow: 0 2px 4px rgba(244,63,94,0.2); }
        
        .back-btn-row { cursor: pointer; background-color: #f1f5f9; color: var(--primary); font-weight: 700; border: none; justify-content: flex-start; }
        .back-btn-row:hover { background-color: #e2e8f0; }

        /* MODAL */
        
        .modal-unlock { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.8); align-items:center; justify-content:center; z-index: 1100; opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(4px); }
        .modal-unlock.active { display: flex; opacity: 1; }
        .modal-unlock-content { background: white; padding: 35px 25px; border-radius: 20px; width: 90%; max-width: 420px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); text-align: center; transform: scale(0.95); transition: transform 0.3s; }
        .modal-unlock.active .modal-unlock-content { transform: scale(1); }
        
        /* RESPONSIVE */
        @media (max-width: 1100px) {
            .nav-links { gap: 15px; flex-wrap: wrap; justify-content: center; }
            .promo-banner { flex-direction: column; gap: 20px; text-align: center; }
        }
        @media (max-width: 600px) {
            .file-item { flex-direction: column; align-items: stretch; text-align: center; }
            .file-info { flex-direction: column; text-align: center; }
            .file-name { justify-content: center; white-space: normal; }
            .btn-dl { justify-content: center; }
        }