/* =========================================================
       1. CORE VARIABLES & THEMES (LIGHT / DARK MODE)
    ========================================================= */
    :root, :root[data-theme="light"] {
       color-scheme: light;
      --bg-color: #f8fafc; 
      --surface-color: #ffffff;
      --primary: #2563eb; 
      --primary-hover: #1d4ed8;
      --secondary: #f1f5f9; 
      --text-main: #0f172a; 
      --text-muted: #64748b;
      --border-color: #e2e8f0; 
      --success: #10b981; 
      --danger: #ef4444; 
      --warning: #f59e0b;
      --radius-lg: 20px; 
      --radius-md: 14px;
      --radius-sm: 8px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.02), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
      --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.02);
      --gold: #fbbf24; 
      --silver: #94a3b8; 
      --bronze: #b45309;
      --glow-primary: rgba(37, 99, 235, 0.15);
      
      --pastel-pink: #f472b6;
      --glow-pink: rgba(244, 114, 182, 0.25);
    }
    :root[data-theme="dark"] {
       color-scheme: dark;
      --bg-color: #090d16; 
      --surface-color: #111827;
      --primary: #3b82f6; 
      --primary-hover: #2563eb;
      --secondary: #1f2937; 
      --text-main: #f9fafb; 
      --text-muted: #9ca3af;
      --border-color: #374151; 
      --success: #34d399; 
      --danger: #f87171; 
      --warning: #fbbf24;
      --radius-lg: 20px; 
      --radius-md: 14px;
      --radius-sm: 8px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); 
      --shadow-md: 0 10px 20px rgba(0,0,0,0.3); 
      --shadow-lg: 0 20px 40px rgba(0,0,0,0.4);
      --glow-primary: rgba(59, 130, 246, 0.25);
    }
    
    * { box-sizing:border-box; margin:0; padding:0; font-family:'Inter',sans-serif; transition:background-color .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease; }
html{background:var(--bg-color);scroll-behavior:smooth}
html[data-theme="dark"] body{background:radial-gradient(circle at 15% 0%,rgba(37,99,235,.08),transparent 32%),var(--bg-color)}
    body { background-color: var(--bg-color); color: var(--text-main); line-height: 1.5; padding-bottom: 80px; overflow-x: hidden; }
    button { cursor: pointer; outline: none; border: none; font-family: inherit; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; align-items: center; justify-content: center; }
    button:active { transform: scale(0.96) !important; } 
    input, textarea, select { font-family: inherit; outline: none; color: var(--text-main); transition: all 0.25s ease; }
    input:focus, textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--glow-primary); }
    .container { max-width: 1400px; margin: 0 auto; padding: 24px; }
    
    header { background: var(--surface-color); padding: 15px 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; border: 1px solid var(--border-color); animation: slideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; position: relative; z-index: 2000; }
    .brand { display: flex; align-items: center; gap: 14px; font-size: 1.4rem; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; }
    .header-actions { display: flex; gap: 12px; align-items: center; }

    .user-chip { display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--secondary); border: 1.5px solid var(--border-color); position: relative; cursor: pointer; transition: all 0.2s; }
    .user-chip:hover { border-color: var(--primary); }
    .avatar-wrapper { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--border-color); display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface-color); }
    .avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; }
    .avatar-wrapper span { font-weight: 800; color: var(--text-muted); font-size: 0.9rem; }
    .user-chip-name { font-size: 0.9rem; font-weight: 700; color: var(--text-main); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .user-chip-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 230px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; display: none; flex-direction: column; gap: 4px; z-index: 2001 !important; animation: popIn 0.2s ease; }
    .user-chip-menu.open { display: flex; }
    .user-chip-menu button { width: 100%; justify-content: flex-start; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; color: var(--text-main); background: transparent; }
    .user-chip-menu button:hover:not(.profile-btn-decor) { background: var(--secondary); }
    .user-chip-menu button.danger { color: var(--danger); }
    .user-chip-menu button.danger:hover { background: #fee2e2; }

    .profile-btn-decor { background: var(--glow-primary) !important; color: var(--primary) !important; font-weight: 800 !important; padding: 12px 14px !important; border: 1px solid rgba(37, 99, 235, 0.2) !important; margin-bottom: 5px; transition: all 0.3s ease; }
    .profile-btn-decor:hover { background: var(--primary) !important; color: white !important; transform: translateY(-2px); box-shadow: 0 4px 12px var(--glow-primary); }

    .btn-icon { position: relative; width: 42px; height: 42px; border-radius: 10px; background: var(--secondary); color: var(--text-main); font-size: 1.15rem; }
    .noti-badge { position: absolute; top: -4px; right: -4px; background: var(--danger); color: white; border-radius: 50%; padding: 2px 6px; font-size: 0.7rem; font-weight: 800; border: 2px solid var(--surface-color); display: none; animation: popIn 0.3s ease; }

    /* Thông báo nhanh ở góc phải dưới: chỉ hiển thị một lần cho mỗi mã học viên. */
    #notificationToastArea { position: fixed; right: 22px; bottom: 22px; z-index: 20020; width: min(360px, calc(100vw - 32px)); pointer-events: none; }
    .notification-toast { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: start; padding: 14px; color: var(--text-main); background: var(--surface-color); border: 1px solid var(--border-color); border-left: 4px solid var(--primary); border-radius: 14px; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22); pointer-events: auto; animation: notificationToastIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
    .notification-toast.hiding { opacity: 0; transform: translateY(12px); transition: opacity 0.22s ease, transform 0.22s ease; }
    .notification-toast-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: var(--glow-primary); font-size: 1rem; }
    .notification-toast-title { margin-bottom: 4px; font-size: 0.9rem; font-weight: 800; color: var(--text-main); }
    .notification-toast-message { display: -webkit-box; overflow: hidden; color: var(--text-muted); font-size: 0.82rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .notification-toast-actions { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
    .notification-toast-actions button { padding: 6px 10px; border-radius: 8px; font-size: 0.78rem; font-weight: 700; }
    .notification-toast-close { width: 24px; height: 24px; padding: 0; border-radius: 7px; color: var(--text-muted); background: transparent; font-size: 1rem; }
    .notification-toast-close:hover { color: var(--text-main); background: var(--secondary); }
    @keyframes notificationToastIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

    .btn { padding: 11px 20px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; gap: 8px; border: 1px solid transparent; box-shadow: var(--shadow-sm); }
    .btn:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 8px 20px var(--glow-primary); }
    .btn-success { background: var(--success); color: white; border-color: var(--success); }
    .btn-success:hover { background: #059669; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.2); }
    .btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); }
    .btn-outline:hover { background: var(--secondary); }
    .btn-danger { background: #fee2e2; color: var(--danger); border-color: #fca5a5; }
    .btn-danger:hover { background: #fecaca; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.15); }
    .btn-icon:hover { background: var(--border-color); transform: rotate(15deg); }
    .hidden { display: none !important; }

    /* =========================================================
       PHẦN MỚI: BỘ ĐẾM NGƯỢC THI V-ACT & DAILY STREAK
    ========================================================= */
    .dashboard-panel-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
    @media (max-width: 768px) { .dashboard-panel-top { grid-template-columns: 1fr; } }
    
    .countdown-widget { background: linear-gradient(135deg, #1e3a8a, #3b82f6); color: white; border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
    .countdown-widget::after { content: '\f017'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: -20px; bottom: -20px; font-size: 8rem; opacity: 0.1; pointer-events: none; }
    .countdown-title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
    .countdown-timer-box { display: flex; gap: 12px; }
    .time-segment { background: rgba(255, 255, 255, 0.15); padding: 10px 14px; border-radius: 10px; min-width: 65px; text-align: center; backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.1); }
    .time-num { font-size: 1.8rem; font-weight: 800; display: block; line-height: 1.2; }
    .time-lbl { font-size: 0.7rem; text-transform: uppercase; font-weight: 600; opacity: 0.8; }

    .streak-widget { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 24px; display: flex; align-items: center; gap: 20px; box-shadow: var(--shadow-sm); position: relative; }
    .streak-fire { font-size: 3.5rem; color: #f97316; filter: drop-shadow(0 4px 10px rgba(249, 115, 22, 0.2)); animation: firePulse 2s infinite; }
    @keyframes firePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
    .streak-info h3 { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
    .streak-info p { font-size: 0.9rem; color: var(--text-muted); }

    .course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-bottom: 32px; }
    .course-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 36px 28px; text-align: center; box-shadow: var(--shadow-sm); cursor: pointer; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); animation: zoomIn 0.5s ease backwards; will-change: transform, box-shadow; }
    .course-card:nth-child(1) { animation-delay: 0.1s; } .course-card:nth-child(2) { animation-delay: 0.2s; } .course-card:nth-child(3) { animation-delay: 0.3s; } .course-card:nth-child(4) { animation-delay: 0.4s; }
    .course-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), #60a5fa); opacity: 0; transition: opacity 0.3s; }
    .course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
    .course-card:hover::before { opacity: 1; }
    .course-icon { font-size: 3rem; color: var(--primary); margin-bottom: 22px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    .course-card:hover .course-icon { transform: scale(1.18) rotate(-5deg); }
    .course-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; }
    .course-desc { color: var(--text-muted); font-size: 0.9rem; }
    .date-updated { display: inline-block; font-size: 0.75rem; color: var(--primary); background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.15); padding: 4px 12px; border-radius: 8px; margin-top: 12px; font-weight: 600; transition: all 0.3s ease; }
    :root[data-theme="dark"] .date-updated { background: rgba(59, 130, 246, 0.15); border-color: rgba(59, 130, 246, 0.3); color: #93c5fd; }

    .leaderboard-section { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-md); margin-bottom: 32px; position: relative; animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .leaderboard-header { display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
    .leaderboard-title { font-size: 1.65rem; font-weight: 800; display: flex; align-items: center; gap: 12px; text-transform: uppercase; color: var(--text-main); }
    .vinh-danh-container { display: flex; justify-content: center; align-items: flex-end; gap: 28px; padding: 30px 0 10px 0; flex-wrap: wrap; }
    .vinh-danh-card { background: var(--surface-color); padding: 40px 24px 28px 24px; border-radius: 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); text-align: center; width: 290px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s; position: relative; will-change: transform; }
    .vinh-danh-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
    
    .champion { transform: scale(1.1); z-index: 2; border: 2px solid var(--gold) !important; box-shadow: 0 12px 30px rgba(251, 191, 36, 0.18) !important; animation: float 6s ease-in-out infinite; }
    .champion:hover { transform: scale(1.1) translateY(-8px); animation-play-state: paused; }
    .vinh-danh-card.pink-theme { border: 2px solid var(--pastel-pink); box-shadow: 0 8px 25px rgba(244, 114, 182, 0.1); }
    .vinh-danh-card.pink-theme:hover { transform: translateY(-12px); box-shadow: 0 20px 40px var(--glow-pink); border-color: var(--pastel-pink); }
    
    .avatar { width: 96px; height: 96px; border-radius: 50%; border: 4px solid var(--border-color); margin: 0 auto 16px auto; object-fit: cover; background: var(--secondary); transition: transform 0.3s; }
    .vinh-danh-card:hover .avatar { transform: scale(1.05); }
    .champion .avatar { border-color: var(--gold); width: 110px; height: 110px; border-width: 5px; }
    .vinh-danh-card.pink-theme .avatar { border-color: var(--pastel-pink); border-width: 4px; }
    
    .vd-badge { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 6px 20px; border-radius: 30px; font-weight: 800; color: white; font-size: 0.85rem; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .badge-champ { background: linear-gradient(135deg, #f59e0b, #d97706); } 
    .badge-pink { background: linear-gradient(135deg, #f472b6, #db2777); }
    
    .vd-name { font-size: 1.18rem; font-weight: 800; color: var(--text-main); margin-bottom: 5px; }
    .school-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; }
    .school-gold { background: rgba(251, 191, 36, 0.1); color: var(--gold); border: 1px solid rgba(251, 191, 36, 0.3); }
    .school-pink { background: rgba(244, 114, 182, 0.1); color: var(--pastel-pink); border: 1px solid rgba(244, 114, 182, 0.3); }

    .vd-title { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; font-weight: 600; }
    .vd-score-box { background: var(--secondary); padding: 16px; border-radius: 14px; display: flex; flex-direction: column; transition: background 0.3s; }
    .vinh-danh-card:hover .vd-score-box { background: rgba(37, 99, 235, 0.05); }
    .vinh-danh-card.pink-theme:hover .vd-score-box { background: rgba(244, 114, 182, 0.05); }
    :root[data-theme="dark"] .vinh-danh-card:hover .vd-score-box { background: rgba(59, 130, 246, 0.1); }
    .vd-score-box span { font-size: 0.75rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
    .vd-score-box h2 { font-size: 2.3rem; color: var(--text-main); margin: 6px 0; font-weight: 800; line-height: 1; }
    .champion .vd-score-box h2 { color: var(--warning); }
    .vinh-danh-card.pink-theme .vd-score-box h2 { color: var(--pastel-pink); }

    #courseDetailScreen { display: none; animation: fadeIn 0.4s ease; }
    .course-header { display: flex; align-items: center; gap: 20px; margin-bottom: 28px; }
    .layout-grid { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
    @media (max-width: 992px) { .layout-grid { grid-template-columns: 1fr; } }
    .sidebar-panel { background: var(--surface-color); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 24px; box-shadow: var(--shadow-sm); position: sticky; top: 24px; }
    
    .subject-btn { width: 100%; text-align: left; padding: 14px 18px; background: transparent; border: 1px solid transparent; border-radius: 12px; font-weight: 600; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; transition: all 0.3s; }
    .subject-btn:hover { background: var(--secondary); padding-left: 22px; }
    .subject-btn.active { background: var(--glow-primary); color: var(--primary); border-color: rgba(37, 99, 235, 0.25); box-shadow: 0 4px 12px var(--glow-primary); }
    :root[data-theme="dark"] .subject-btn.active { background: rgba(59, 130, 246, 0.15); border-color: var(--primary); color: var(--primary); }
    
    .subject-group { border: 1px solid var(--border-color); border-radius: 16px; margin-bottom: 8px; overflow: hidden; transition: all 0.3s; }
    .subject-group:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
    .subject-group-header { width: 100%; padding: 16px 20px; background: var(--secondary); font-weight: 700; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; border-radius: 16px; cursor: pointer;}
    .subject-group-content { display: none; background: var(--surface-color); }
    .subject-group.expanded .subject-group-content { display: block; border-top: 1px solid var(--border-color); }
    .subject-group.expanded .subject-group-header { border-radius: 16px 16px 0 0; background: var(--primary); color: white; }
    
    .horizontal-scroll-wrapper { position: relative; padding: 4px; }
    .horizontal-scroll-container { display: flex; overflow-x: auto; gap: 12px; padding: 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-width: thin; scrollbar-color: var(--primary) var(--secondary); }
    .horizontal-scroll-container:active { cursor: grabbing; }
    .horizontal-scroll-container::-webkit-scrollbar { height: 6px; }
    .horizontal-scroll-container::-webkit-scrollbar-track { background: var(--secondary); border-radius: 10px; }
    .horizontal-scroll-container::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; opacity: 0.6; }
    .horizontal-scroll-container .subject-btn { white-space: nowrap; flex-shrink: 0; width: auto; scroll-snap-align: start; border-radius: 30px; border: 1px solid var(--border-color); padding: 10px 22px; margin-bottom: 0; background: var(--surface-color); box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
    .horizontal-scroll-container .subject-btn:hover { background: var(--secondary); transform: translateY(-2px); padding-left: 22px; }
    .horizontal-scroll-container .subject-btn.active { background: var(--primary); color: white; border-color: var(--primary); box-shadow: 0 4px 12px var(--glow-primary); transform: translateY(-2px); }

    .lesson-container { background: var(--surface-color); border-radius: var(--radius-lg); border: 1px solid var(--border-color); padding: 32px; box-shadow: var(--shadow-sm); }
    .lesson-header { font-size: 1.35rem; font-weight: 700; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
    .search-wrapper { position: relative; flex-grow: 1; max-width: 400px; min-width: 250px; animation: fadeIn 0.5s ease; }
    .search-input { width: 100%; padding: 12px 16px 12px 46px; border-radius: 24px; border: 1px solid var(--border-color); background: var(--secondary); font-size: 0.95rem; font-weight: 500; }
    .search-input:focus { background: var(--surface-color); }
    .search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.15rem; }

    .lesson-list { display: flex; flex-direction: column; gap: 14px; }
    .lesson-item { border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; background: var(--surface-color); transition: all 0.3s; animation: fadeUpStagger 0.5s ease-out backwards; }
    .lesson-item:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
    .lesson-main { padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background 0.2s; }
    .lesson-main:hover { background: var(--secondary); }
    .lesson-info { display: flex; align-items: center; gap: 16px; }
    .lesson-idx { width: 38px; height: 38px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-muted); font-size: 0.9rem; transition: all 0.3s; }
    .lesson-item:hover .lesson-idx { background: var(--primary); color: white; transform: rotate(360deg); }
    .sub-lessons { background: var(--secondary); border-top: 1px solid var(--border-color); padding: 16px 24px 16px 64px; display: none; flex-direction: column; gap: 10px; animation: slideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    .lesson-item.expanded .sub-lessons { display: flex; }
    .sub-lesson-row { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.2s; }
    .sub-lesson-row:hover { border-color: var(--primary); transform: translateX(5px); }
    
    .action-btns { display: flex; gap: 8px; align-items: center; }
    .icon-btn { width: 38px; height: 38px; border-radius: 10px; background: var(--secondary); color: var(--text-muted); border: 1px solid var(--border-color); transition: all 0.2s; }
    .icon-btn:hover { background: var(--border-color); color: var(--text-main); transform: scale(1.1); }
    .icon-btn.play { color: var(--primary); background: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.15); }
    .icon-btn.play:hover { background: var(--primary); color: white; box-shadow: 0 4px 10px var(--glow-primary); }
    .icon-btn.edit { color: var(--warning); background: #fffbeb; border-color: #fde68a; }
    .icon-btn.edit:hover { background: var(--warning); color: white; }

    .question-block img, .option-label img, .explain-box img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 12px 0;
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-sm);
    }

    #mockExamWorkspace { display: none; }
    .mock-toolbar { display: flex; justify-content: space-between; align-items: center; background: var(--surface-color); padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--border-color); margin-bottom: 28px; box-shadow: var(--shadow-sm); }
    .exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
    .exam-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 30px; position: relative; box-shadow: var(--shadow-sm); transition: all 0.3s; animation: zoomIn 0.4s ease backwards; }
    .exam-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-6px); }
    .exam-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; padding-right: 24px; line-height: 1.4; }
    .btn-delete-exam { position: absolute; top: 16px; right: 16px; background: #fee2e2; color: var(--danger); width: 34px; height: 34px; border-radius: 10px; border: 1px solid #fca5a5; transition: all 0.2s; }
    .btn-delete-exam:hover { background: var(--danger); color: white; transform: rotate(10deg); }

    .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 20px; transition: opacity 0.3s; }
    .modal-box { background: var(--surface-color); border-radius: var(--radius-lg); width: 100%; max-width: 750px; max-height: 85vh; overflow-y: auto; padding: 36px; box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; position: relative; }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }
    .modal-header h2 { font-size: 1.4rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
    
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
    @media (max-width: 576px) { .form-grid { grid-template-columns: 1fr; } }
    .form-group { display: flex; flex-direction: column; gap: 8px; position: relative; }
    .form-group label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
    .form-group input, .form-group textarea, .form-group select { padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--secondary); font-size: 0.95rem; }
    .form-group textarea { min-height: 120px; resize: vertical; }
    
    .ai-status-box { margin-top: 20px; padding: 18px; border-radius: 10px; background: var(--secondary); border: 1px solid var(--border-color); font-family: monospace; font-size: 0.88rem; white-space: pre-wrap; color: var(--text-muted); }

    .profile-avatar-large { width: 120px; height: 120px; border-radius: 50%; border: 4px solid var(--surface-color); box-shadow: var(--shadow-md), 0 0 0 2px var(--primary); overflow: hidden; margin: 0 auto 20px auto; position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; background: var(--secondary); }
    .profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
    .profile-avatar-large:hover::after { content: '\f030'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; transition: all 0.2s; }
    .profile-avatar-large input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 10; }
    .autocomplete-list { position: absolute; top: 100%; left: 0; width: 100%; background: var(--surface-color); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-lg); z-index: 200; max-height: 200px; overflow-y: auto; display: none; }
    .autocomplete-item { padding: 12px 16px; cursor: pointer; font-size: 0.92rem; font-weight: 500; }
    .autocomplete-item:hover { background: var(--secondary); color: var(--primary); }

    #modalTesting { padding: 0; background: var(--bg-color); }
    #modalTesting .modal-box { max-width: 100%; max-height: 100vh; width: 100%; height: 100vh; border-radius: 0; border: none; padding: 0; display: flex; flex-direction: column; }
    .exam-header-bar { display: flex; justify-content: space-between; align-items: center; background: var(--surface-color); padding: 16px 32px; border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-sm); z-index: 100; }
    .exam-layout { display: grid; grid-template-columns: 1fr 360px; height: calc(100vh - 81px); overflow: hidden; }
    @media (max-width: 1024px) { .exam-layout { grid-template-columns: 1fr; } .exam-sidebar { display: none !important; } }
    .exam-questions-area { padding: 40px; overflow-y: auto; background: var(--bg-color); scroll-behavior: smooth; }
    .exam-sidebar { background: var(--surface-color); border-left: 1px solid var(--border-color); padding: 28px; display: flex; flex-direction: column; gap: 24px; overflow-y: auto; }
    .exam-grid-navigation { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
    .nav-btn { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-color); font-weight: 700; color: var(--text-muted); font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }
    .nav-btn.answered { background: var(--glow-primary); border-color: var(--primary); color: var(--primary); }
    .nav-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
    .question-block { margin-bottom: 28px; padding: 30px; background: var(--surface-color); border-radius: 16px; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); transition: all 0.3s ease; }
    .question-block:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
    .question-block h4 { margin-bottom: 20px; font-size: 1.1rem; font-weight: 700; line-height: 1.6; }
    .options-group { display: flex; flex-direction: column; gap: 12px; }
    .option-label { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px solid var(--border-color); border-radius: 12px; cursor: pointer; font-weight: 500; font-size: 0.95rem; transition: all 0.2s; }
    .option-label:hover { border-color: var(--primary); background: var(--secondary); transform: translateX(5px); }
    .option-label input[type="radio"] { width: 18px; height: 18px; accent-color: var(--primary); }
    .correct-ans { background: rgba(16, 185, 129, 0.08) !important; border-color: var(--success) !important; color: #047857 !important; font-weight: 600; animation: pulseSuccess 1s; }
    .wrong-ans { background: rgba(239, 68, 68, 0.08) !important; border-color: var(--danger) !important; color: #b91c1c !important; font-weight: 600; animation: shake 0.5s; }
    .explain-box { margin-top: 18px; padding: 18px 22px; background: var(--surface-color); border-radius: 10px; font-size: 0.95rem; line-height: 1.6; color: var(--text-main); animation: slideDown 0.4s ease; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }

    #vact-lock-screen {
        position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; min-height: 100vh;
        display: flex; flex-direction: row; align-items: stretch; z-index: 999999;
        background: var(--bg-color); transition: opacity 0.5s ease;
        overflow: hidden;
    }
    .lock-left {
        flex: 1; background: #1e3a8a; 
        color: white; padding: 40px 60px;
        display: flex; flex-direction: column; justify-content: space-between;
    }
    .lock-left .brand-logo { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; font-weight: 800; }
    .lock-left-content { margin-top: auto; margin-bottom: auto; }
    .lock-left-content h1 { font-size: 3.2rem; font-weight: 800; line-height: 1.25; margin-bottom: 24px; animation: slideDown 0.6s ease; }
    .lock-left-content p { font-size: 1.15rem; color: #cbd5e1; margin-bottom: 45px; max-width: 90%; line-height: 1.6; animation: slideDown 0.8s ease; }
    .feature-list { display: flex; flex-direction: column; gap: 24px; animation: fadeUp 1s ease; }
    .feature-item { display: flex; align-items: center; gap: 18px; }
    .feature-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
    .feature-text { font-size: 1.05rem; font-weight: 600; color: #f8fafc; }

    .lock-right {
        flex: 1; display: flex; justify-content: center; align-items: center; background: #f8fafc; position: relative;
    }
    .auth-box-modern {
        width: 100%; max-width: 420px; padding: 40px; text-align: center; animation: popIn 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .auth-box-modern h2 { color: var(--primary); font-size: 26px; font-weight: 800; margin-bottom: 12px; }
    .auth-box-modern p { color: var(--text-muted); font-size: 0.95rem; margin-bottom: 35px; line-height: 1.5; }
    .input-group-modern { position: relative; margin-bottom: 24px; }
    .input-group-modern i { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 1.1rem;}
    .input-group-modern input { width: 100%; padding: 18px 18px 18px 50px; border: 2px solid var(--border-color); border-radius: 12px; font-size: 1.05rem; font-weight: 700; background: var(--surface-color); transition: all 0.3s; color: var(--text-main); }
    .input-group-modern input:focus { border-color: var(--primary); box-shadow: 0 0 15px var(--glow-primary); outline: none; }
    .input-group-modern input::placeholder { font-weight: 500; color: #94a3b8; }
    .btn-modern-submit { width: 100%; padding: 18px; background: var(--primary); color: white; border: none; border-radius: 12px; font-size: 1.05rem; font-weight: 800; cursor: pointer; transition: all 0.3s; display: flex; justify-content: center; align-items: center; gap: 10px; }
    .btn-modern-submit:hover { background: var(--primary-hover); transform: translateY(-3px); box-shadow: 0 10px 25px var(--glow-primary); }

    @media (max-width: 900px) { .lock-left { display: none; } } 

    /* =========================================================
       CẢM NHẬN HỌC VIÊN NGOÀI MÀN HÌNH ĐĂNG NHẬP
       - Nằm dưới màn hình đăng nhập, kéo trang xuống mới thấy
       - Không xuất hiện trong giao diện sau khi đăng nhập
       - Không thay đổi logic học tập/đăng nhập cũ
    ========================================================= */
    html[data-vact-auth="locked"] body {
      background: #ffffff;
      padding-bottom: 0 !important;
      overflow-x: hidden !important;
    }
    html[data-vact-auth="locked"] .container {
      display: none !important;
    }
    html[data-vact-auth="unlocked"] .vact-public-testimonials {
      display: none !important;
    }
    html[data-vact-auth="locked"] #footer-schedule {
      display: none !important;
    }
    html[data-vact-auth="locked"] .modal-overlay {
      display: none !important;
    }

    html[data-vact-auth="locked"] .vact-public-testimonials {
      display: block;
      visibility: visible;
    }

    .vact-public-testimonials {
      position: relative;
      width: 100%;
      margin-top: 100svh;
      background:
        radial-gradient(900px 180px at 50% 0%, rgba(37, 99, 235, 0.12), transparent 70%),
        linear-gradient(180deg, #f3f8ff 0%, #ffffff 150px, #ffffff 100%);
      border-top: 0;
      border-radius: 42px 42px 0 0;
      padding: 34px 24px 58px;
      overflow: hidden;
      isolation: isolate;
      box-shadow: 0 -18px 50px rgba(37, 99, 235, 0.07);
      scroll-margin-top: 0;
    }
    .vact-public-testimonials::before,
    .vact-public-testimonials::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: -1;
    }
    .vact-public-testimonials::before {
      width: min(780px, 86vw);
      height: 120px;
      top: -68px;
      left: 50%;
      transform: translateX(-50%);
      background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.12) 0%, rgba(37, 99, 235, 0.04) 38%, transparent 72%);
      filter: blur(0.2px);
    }
    .vact-public-testimonials::after {
      width: 250px;
      height: 250px;
      right: -115px;
      bottom: -145px;
      background: rgba(37, 99, 235, 0.035);
    }
    .vact-public-testimonials-inner {
      width: min(1180px, 100%);
      margin: 0 auto;
    }
    .vact-public-title {
      text-align: center;
      margin: 0 auto 24px;
      position: relative;
      z-index: 1;
    }
    .vact-public-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 11px;
      margin-bottom: 8px;
      border-radius: 999px;
      background: rgba(37, 99, 235, 0.07);
      border: 1px solid rgba(37, 99, 235, 0.12);
      color: var(--primary);
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 0.7px;
      text-transform: uppercase;
    }
    .vact-public-title h2 {
      margin: 0;
      color: #0f172a;
      font-size: clamp(1.55rem, 2.7vw, 2rem);
      line-height: 1.25;
      font-weight: 800;
    }
    .vact-public-title h2 span { color: var(--primary); }
    .vact-public-title p {
      margin: 7px auto 0;
      max-width: 680px;
      color: #64748b;
      font-size: 0.86rem;
      line-height: 1.55;
    }
    .vact-public-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }
    .vact-public-card {
      min-height: 190px;
      padding: 17px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 15px;
      box-shadow: 0 7px 22px rgba(15, 23, 42, 0.055);
      display: flex;
      flex-direction: column;
      transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
    }
    .vact-public-card:hover {
      transform: translateY(-4px);
      border-color: rgba(37, 99, 235, 0.28);
      box-shadow: 0 14px 28px rgba(37, 99, 235, 0.09);
    }
    .vact-public-stars {
      color: #f59e0b;
      font-size: 0.78rem;
      letter-spacing: 1.6px;
      margin-bottom: 8px;
      line-height: 1;
    }
    .vact-public-text {
      flex: 1;
      margin: 0 0 14px;
      color: #475569;
      font-size: 0.79rem;
      line-height: 1.62;
    }
    .vact-public-user {
      display: flex;
      align-items: center;
      gap: 9px;
      padding-top: 11px;
      border-top: 1px solid #eef2f7;
    }
    .vact-public-avatar {
      width: 36px;
      height: 36px;
      flex: 0 0 36px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #ffffff;
      background: linear-gradient(135deg, #1d4ed8, #60a5fa);
      font-size: 0.74rem;
      font-weight: 800;
    }
    .vact-public-name {
      color: #0f172a;
      font-size: 0.8rem;
      line-height: 1.3;
      font-weight: 800;
    }
    .vact-public-school {
      margin-top: 2px;
      color: var(--primary);
      font-size: 0.7rem;
      font-weight: 700;
    }
    .vact-public-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 28px;
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
      color: #64748b;
      font-size: 0.76rem;
    }
    .vact-public-footer strong { color: #0f172a; }
    .vact-public-footer a {
      color: var(--primary);
      font-weight: 700;
      text-decoration: none;
    }
    .vact-public-footer a:hover { text-decoration: underline; }

    @media (max-width: 1080px) {
      .vact-public-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 900px) {
      .vact-public-testimonials { padding: 44px 16px 50px; }
    }
    @media (max-width: 620px) {
      .vact-public-testimonials { margin-top: 100svh; border-radius: 28px 28px 0 0; }
      .vact-public-grid { grid-template-columns: 1fr; }
      .vact-public-card { min-height: 175px; padding: 15px; }
      .vact-public-footer { align-items: flex-start; flex-direction: column; }
    }
    
    .welcome-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px); z-index: 100000; display: none; justify-content: center; align-items: center; text-align: center; flex-direction: column; opacity: 1; transition: opacity 0.5s ease; }
    :root[data-theme="dark"] .welcome-overlay { background: rgba(9, 13, 22, 0.98); }
    .welcome-content { animation: bounceInDown 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
    .welcome-content h1 { font-size: 3.5rem; color: var(--primary); margin-bottom: 15px; font-weight: 800; text-shadow: 0 4px 15px var(--glow-primary); }
    .welcome-content p { font-size: 1.25rem; color: var(--text-muted); margin-bottom: 30px; }

    .footer-schedule { position: fixed; bottom: 0; left: 0; width: 100%; height: 45px; background: var(--surface-color); border-top: 3px solid var(--primary); box-shadow: 0 -5px 25px rgba(0,0,0,0.12); z-index: 9999; display: flex; flex-direction: column; transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden; }
    .toggle-btn { height: 45px; display: flex; align-items: center; justify-content: flex-start; padding-left: 24px; background: var(--primary); color: white; font-weight: 700; cursor: pointer; font-size: 0.95rem; gap: 10px; transition: background 0.2s; white-space: nowrap; }
    .toggle-btn:hover { background: var(--primary-hover); }
    .schedule-content { flex-grow: 1; width: 100%; height: calc(100% - 45px); background: var(--bg-color); }
    .schedule-content iframe { width: 100%; height: 100%; border: none; }

    @keyframes popIn { 0% { transform: scale(0.9); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeUpStagger { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes zoomIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes float { 0% { transform: scale(1.1) translateY(0); } 50% { transform: scale(1.1) translateY(-8px); } 100% { transform: scale(1.1) translateY(0); } }
    @keyframes pulseSuccess { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
    @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
    @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-500px); } 60% { opacity: 1; transform: translateY(20px); } 80% { transform: translateY(-6px); } 100% { transform: translateY(0); } }

    #modalVideo { padding: 0; background: var(--bg-color); }
    #modalVideo .modal-box { max-width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; border: none; display: flex; flex-direction: column; background: var(--bg-color); padding: 0; }
    .live-header-bar { display: flex; justify-content: space-between; align-items: center; background: var(--surface-color); padding: 15px 30px; border-bottom: 1px solid var(--border-color); z-index: 100; }
    .live-layout { display: grid; grid-template-columns: 1fr 380px; flex-grow: 1; overflow: hidden; transition: grid-template-columns 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
    @media (max-width: 992px) { .live-layout { grid-template-columns: 1fr; overflow-y: auto; } .live-video-area { min-height: 40vh; } }
    .live-video-area { background: #000; position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden;}
    .live-sidebar { background: var(--bg-color); padding: 24px; overflow-y: auto; border-left: 1px solid var(--border-color); }
    .live-indicators { position: absolute; top: 20px; left: 20px; display: flex; gap: 12px; z-index: 10; pointer-events: none; }
    .live-badge { background: #ef4444; color: white; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 800; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 10px rgba(239, 68, 68, 0.4); text-transform: uppercase; letter-spacing: 0.5px; }
    .live-dot { width: 8px; height: 8px; background: white; border-radius: 50%; animation: blink 1.5s infinite; }
    .view-count { background: rgba(0,0,0,0.5); color: white; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; display: flex; align-items: center; gap: 6px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
    .doc-card-premium { background: var(--surface-color); border-radius: 16px; padding: 30px 20px; text-align: center; border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); margin-bottom: 24px; position: relative; overflow: hidden; }
    .doc-card-premium::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ef4444, #f87171); }
    .doc-icon-big { font-size: 4rem; color: #ef4444; margin-bottom: 18px; filter: drop-shadow(0 4px 6px rgba(239, 68, 68, 0.2)); }
    .server-tabs { display: flex; gap: 10px; margin-bottom: 18px; background: var(--secondary); padding: 6px; border-radius: 10px; border: 1px solid var(--border-color); }
    .server-tab-btn { flex: 1; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; background: transparent; color: var(--text-muted); transition: all 0.3s; }
    .server-tab-btn.active { background: var(--primary); color: white; box-shadow: 0 4px 10px var(--glow-primary); transform: translateY(-2px); }
    .live-video-area .video-container-box { margin: 0; border-radius: 0; border: none; height: 100%; padding-top: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; }
    .live-video-area #ytPlayerContainer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

    /* =========================================================
       CSS MỚI: PHẦN THƯ VIỆN TÀI LIỆU (DOCUMENT LIBRARY)
    ========================================================= */
    .library-section { margin-top: 50px; margin-bottom: 30px; animation: fadeUp 0.6s ease; }
    .library-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 15px; border-bottom: 2px solid var(--border-color); }
    .library-title { font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; gap: 12px; color: var(--text-main); text-transform: uppercase; }
    .library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
    
    .lib-card { background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; cursor: pointer; display: flex; flex-direction: column; height: 100%; }
    .lib-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
    
    .lib-img-wrap { width: 100%; height: 180px; background: var(--secondary); overflow: hidden; position: relative; border-bottom: 1px solid var(--border-color); }
    .lib-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
    .lib-card:hover .lib-img-wrap img { transform: scale(1.08); }
    
    .lib-info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
    .lib-name { font-size: 1.05rem; font-weight: 700; color: var(--text-main); margin-bottom: 12px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .lib-date-badge { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--primary); background: var(--glow-primary); padding: 6px 12px; border-radius: 30px; font-weight: 700; align-self: flex-start; }
    
    .btn-delete-lib { position: absolute; top: 12px; right: 12px; background: rgba(239, 68, 68, 0.9); color: white; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.2s; backdrop-filter: blur(4px); z-index: 10; border: 1px solid #fca5a5; }
    .lib-card:hover .btn-delete-lib { opacity: 1; transform: scale(1); }
    .btn-delete-lib:hover { background: var(--danger); transform: scale(1.1) !important; }

    /* =========================================================
       VAC STUDY PUBLIC LANDING — POLISHED BLUE / WHITE
       Chỉ thay đổi phần giao diện công khai, không đổi logic hệ thống.
    ========================================================= */
    html[data-vact-auth="locked"],
    html[data-vact-auth="locked"] body {
      background: #f5f9ff !important;
    }

    html[data-vact-auth="locked"] body {
      padding-bottom: 0 !important;
      min-height: 100vh;
    }

    html[data-vact-auth="locked"] #vact-lock-screen {
      position: relative !important;
      width: 100% !important;
      height: 100vh !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      background: #f7faff !important;
      box-shadow: 0 18px 55px rgba(30, 64, 175, 0.08);
    }

    html[data-vact-auth="locked"] #vact-lock-screen::before,
    html[data-vact-auth="locked"] #vact-lock-screen::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }

    html[data-vact-auth="locked"] #vact-lock-screen::before {
      width: 380px;
      height: 380px;
      right: 31%;
      top: -210px;
      background: rgba(59, 130, 246, 0.08);
      filter: blur(1px);
    }

    html[data-vact-auth="locked"] #vact-lock-screen::after {
      width: 280px;
      height: 280px;
      left: 41%;
      bottom: -170px;
      background: rgba(37, 99, 235, 0.045);
    }

    html[data-vact-auth="locked"] .lock-left,
    html[data-vact-auth="locked"] .lock-right {
      position: relative;
      z-index: 1;
    }

    html[data-vact-auth="locked"] .lock-left {
      flex: 0 0 52%;
      background:
        radial-gradient(circle at 82% 12%, rgba(147, 197, 253, 0.18) 0 16%, transparent 17%),
        radial-gradient(circle at 6% 94%, rgba(147, 197, 253, 0.12) 0 10%, transparent 11%),
        linear-gradient(145deg, #173b93 0%, #245bc7 46%, #3876ea 100%);
      padding: 46px clamp(42px, 5vw, 76px);
      overflow: hidden;
      box-shadow: inset -1px 0 rgba(255,255,255,0.14);
    }

    html[data-vact-auth="locked"] .lock-left::before {
      content: '';
      position: absolute;
      width: 230px;
      height: 230px;
      border-radius: 50%;
      right: -95px;
      top: 38px;
      background: rgba(255,255,255,0.07);
    }

    html[data-vact-auth="locked"] .lock-left::after {
      content: '';
      position: absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      left: -85px;
      bottom: -80px;
      border: 34px solid rgba(255,255,255,0.05);
    }

    html[data-vact-auth="locked"] .lock-left .brand-logo {
      position: relative;
      z-index: 2;
      display: inline-flex;
      width: fit-content;
      padding: 9px 14px 9px 10px;
      gap: 10px;
      border-radius: 14px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.13);
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 25px rgba(15, 23, 42, 0.08);
      letter-spacing: 0.5px;
    }

    html[data-vact-auth="locked"] .lock-left .brand-logo::before {
      content: '\f19d';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,0.14);
      color: white;
      font-size: 0.95rem;
    }

    html[data-vact-auth="locked"] .lock-left-content {
      position: relative;
      z-index: 2;
      max-width: 650px;
    }

    html[data-vact-auth="locked"] .lock-left-content h1 {
      font-size: clamp(2.45rem, 4vw, 4.25rem);
      line-height: 1.09;
      letter-spacing: -1.8px;
      margin-bottom: 22px;
      text-shadow: 0 12px 30px rgba(15,23,42,0.12);
    }

    html[data-vact-auth="locked"] .lock-left-content p {
      max-width: 600px;
      margin-bottom: 34px;
      color: rgba(255,255,255,0.83);
      font-size: clamp(1rem, 1.25vw, 1.13rem);
    }

    html[data-vact-auth="locked"] .feature-list {
      gap: 13px;
      max-width: 610px;
    }

    html[data-vact-auth="locked"] .feature-item {
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 15px;
      background: rgba(255,255,255,0.065);
      backdrop-filter: blur(8px);
      box-shadow: 0 9px 25px rgba(15,23,42,0.05);
    }

    html[data-vact-auth="locked"] .feature-icon {
      width: 42px;
      height: 42px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px;
    }

    html[data-vact-auth="locked"] .feature-text {
      font-size: 0.98rem;
      color: rgba(255,255,255,0.93);
    }

    html[data-vact-auth="locked"] .lock-right {
      flex: 1;
      background:
        linear-gradient(rgba(255,255,255,0.86), rgba(247,250,255,0.96)),
        radial-gradient(circle at 85% 20%, rgba(59,130,246,0.08), transparent 30%);
      padding: 30px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(37,99,235,0.25) transparent;
    }

    html[data-vact-auth="locked"] .auth-box-modern {
      max-width: 470px;
      padding: 34px;
      border: 1px solid rgba(148,163,184,0.20);
      border-radius: 28px;
      background: rgba(255,255,255,0.86);
      box-shadow: 0 22px 60px rgba(15,23,42,0.10);
      backdrop-filter: blur(18px);
    }

    html[data-vact-auth="locked"] .auth-box-modern::before {
      content: 'V-ACT';
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 34px;
      padding: 0 13px;
      margin-bottom: 16px;
      border-radius: 999px;
      color: #2563eb;
      background: rgba(37,99,235,0.08);
      border: 1px solid rgba(37,99,235,0.10);
      font-size: 0.74rem;
      font-weight: 800;
      letter-spacing: 1px;
    }

    html[data-vact-auth="locked"] .auth-box-modern h2 {
      font-size: 2rem;
      letter-spacing: -0.5px;
      margin-bottom: 9px;
    }

    html[data-vact-auth="locked"] .auth-box-modern p {
      margin-bottom: 25px;
    }

    html[data-vact-auth="locked"] .input-group-modern {
      margin-bottom: 16px;
    }

    html[data-vact-auth="locked"] .input-group-modern input {
      padding: 17px 17px 17px 50px;
      background: #fbfdff;
      border-color: #dbe5f3;
      box-shadow: inset 0 1px 1px rgba(15,23,42,0.02);
    }

    html[data-vact-auth="locked"] .input-group-modern input:hover {
      border-color: #b9cef5;
    }

    html[data-vact-auth="locked"] .btn-modern-submit {
      padding: 17px;
      border-radius: 13px;
      background: linear-gradient(135deg, #2563eb, #3b82f6);
      box-shadow: 0 12px 25px rgba(37,99,235,0.19);
    }

    html[data-vact-auth="locked"] .btn-modern-submit:hover {
      box-shadow: 0 16px 30px rgba(37,99,235,0.24);
    }

    html[data-vact-auth="locked"] .footer-text {
      margin-top: 20px !important;
    }

    /* Public testimonials */
    .vact-public-testimonials {
      background:
        radial-gradient(circle at 10% 20%, rgba(37,99,235,0.06) 0 11%, transparent 12%),
        radial-gradient(circle at 93% 76%, rgba(59,130,246,0.07) 0 14%, transparent 15%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 52%, #f7fbff 100%) !important;
      border-top: 1px solid rgba(37,99,235,0.08);
      padding: 58px 24px 52px !important;
    }

    .vact-public-testimonials::before {
      width: 420px !important;
      height: 180px !important;
      top: -115px !important;
      left: 50% !important;
      transform: translateX(-50%) !important;
      border-radius: 0 0 50% 50% !important;
      background: rgba(37,99,235,0.05) !important;
    }

    .vact-public-testimonials::after {
      width: 250px !important;
      height: 250px !important;
      right: -115px !important;
      bottom: -145px !important;
      background: rgba(37,99,235,0.045) !important;
    }

    .vact-public-title {
      position: relative;
      max-width: 850px;
      margin-bottom: 30px !important;
    }

    .vact-public-title::after {
      content: '';
      display: block;
      width: 62px;
      height: 4px;
      margin: 16px auto 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #2563eb, #60a5fa);
      opacity: 0.85;
    }

    .vact-public-eyebrow {
      background: rgba(37,99,235,0.06) !important;
      border-color: rgba(37,99,235,0.10) !important;
    }

    .vact-public-title h2 {
      font-size: clamp(1.55rem, 2.6vw, 2.15rem) !important;
      color: #10224d !important;
    }

    .vact-public-title p {
      color: #6b7b93 !important;
    }

    .vact-public-grid {
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 16px !important;
    }

    .vact-public-card {
      min-height: 205px !important;
      padding: 18px !important;
      background: rgba(255,255,255,0.94) !important;
      border-color: #e6edf7 !important;
      border-radius: 18px !important;
      box-shadow: 0 10px 28px rgba(15,23,42,0.045) !important;
    }

    .vact-public-card:hover {
      transform: translateY(-5px) !important;
      box-shadow: 0 16px 34px rgba(37,99,235,0.08) !important;
    }

    .vact-public-stars {
      color: #f0a51a !important;
      font-size: 0.75rem !important;
    }

    .vact-public-text {
      color: #4f6079 !important;
      font-size: 0.80rem !important;
      line-height: 1.68 !important;
    }

    .vact-public-avatar {
      background: linear-gradient(135deg, #2563eb, #76aafc) !important;
      box-shadow: 0 5px 12px rgba(37,99,235,0.15);
    }

    .vact-public-footer {
      max-width: 1180px;
      margin-left: auto;
      margin-right: auto;
      color: #718198 !important;
      border-top-color: #e5edf7 !important;
    }

    @media (max-width: 1080px) {
      html[data-vact-auth="locked"] .lock-left { flex-basis: 50%; padding-left: 40px; padding-right: 40px; }
      .vact-public-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    }

    @media (max-width: 900px) {
      html[data-vact-auth="locked"] #vact-lock-screen {
        height: 100vh !important;
        min-height: 100vh !important;
      }
      html[data-vact-auth="locked"] .lock-right {
        min-height: 100vh;
        padding: 20px;
      }
      html[data-vact-auth="locked"] .auth-box-modern {
        max-width: 440px;
      }
    }

    @media (max-width: 620px) {
      .vact-public-testimonials { padding: 44px 16px 42px !important; }
      .vact-public-grid { grid-template-columns: 1fr !important; }
      .vact-public-card { min-height: 0 !important; }
      .vact-public-footer { align-items: flex-start !important; flex-direction: column !important; }
    }

    /* =========================================================
       FINAL POLISH PATCH — public login + testimonials
       - Không thay đổi logic đăng nhập / Firebase / dữ liệu học tập.
       - Loại bỏ khoảng trắng dư do spacer cũ.
       - Đảm bảo ô nhập mã luôn nhìn rõ ở dark mode.
    ========================================================= */
    html[data-vact-auth="locked"] body {
      overflow-x: hidden !important;
    }

    html[data-vact-auth="locked"] #vact-lock-screen {
      height: 100dvh !important;
      min-height: 100vh !important;
      box-sizing: border-box !important;
    }

    html[data-vact-auth="locked"] .lock-right {
      overflow: hidden !important;
    }

    /* Input public login: luôn tương phản tốt ở cả sáng/tối */
    html[data-vact-auth="locked"] .input-group-modern input,
    html[data-vact-auth="locked"] .input-group-modern input:focus {
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a !important;
      background: #ffffff !important;
      caret-color: #2563eb !important;
      border-color: #d5e2f5 !important;
    }

    html[data-vact-auth="locked"] .input-group-modern input::placeholder {
      color: #7d8da6 !important;
      opacity: 1 !important;
      -webkit-text-fill-color: #7d8da6 !important;
    }

    html[data-vact-auth="locked"] .input-group-modern i {
      color: #55708f !important;
    }

    /* Dark mode cho toàn bộ landing: vẫn xanh chủ đạo nhưng dịu mắt */
    html[data-theme="dark"][data-vact-auth="locked"] body {
      background: #08111f !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] #vact-lock-screen {
      background: #0b1424 !important;
      box-shadow: 0 18px 55px rgba(0,0,0,0.35);
    }

    html[data-theme="dark"][data-vact-auth="locked"] .lock-right {
      background:
        radial-gradient(circle at 82% 18%, rgba(59,130,246,0.12), transparent 32%),
        linear-gradient(180deg, #0c1626 0%, #0a1321 100%) !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .auth-box-modern {
      background: rgba(17, 29, 47, 0.88) !important;
      border-color: rgba(96,165,250,0.18) !important;
      box-shadow: 0 22px 60px rgba(0,0,0,0.28) !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .auth-box-modern h2 {
      color: #60a5fa !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .auth-box-modern p,
    html[data-theme="dark"][data-vact-auth="locked"] .footer-text span {
      color: #a8b7ca !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .auth-box-modern::before {
      color: #7db6ff !important;
      background: rgba(59,130,246,0.14) !important;
      border-color: rgba(96,165,250,0.18) !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .input-group-modern input,
    html[data-theme="dark"][data-vact-auth="locked"] .input-group-modern input:focus {
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a !important;
      background: #ffffff !important;
      border-color: #82a7d8 !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .input-group-modern i {
      color: #41617f !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-testimonials {
      background:
        radial-gradient(900px 180px at 50% 0%, rgba(59,130,246,0.16), transparent 70%),
        linear-gradient(180deg, #0e1b2f 0%, #0b1626 150px, #09131f 100%) !important;
      border-top-color: rgba(96,165,250,0.08) !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-title h2 {
      color: #eef5ff !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-title p {
      color: #94a8c1 !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-card {
      background: rgba(17,29,47,0.86) !important;
      border-color: rgba(148,163,184,0.13) !important;
      box-shadow: 0 10px 28px rgba(0,0,0,0.18) !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-text {
      color: #b4c2d4 !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-name {
      color: #eef5ff !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-school {
      color: #70aaff !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-user {
      border-top-color: rgba(148,163,184,0.10) !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-footer {
      color: #8ea1b8 !important;
      border-top-color: rgba(148,163,184,0.10) !important;
    }

    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-footer strong {
      color: #edf5ff !important;
    }

    /* Mobile: tránh tràn ngang và giữ login gọn */
    @media (max-width: 900px) {
      html[data-vact-auth="locked"] #vact-lock-screen {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
      }
      html[data-vact-auth="locked"] .lock-right {
        min-height: 100dvh !important;
        overflow: visible !important;
      }
      html[data-vact-auth="locked"] .auth-box-modern {
        margin: 0 auto;
      }
    }


    /* =========================================================
       VACSTUDY MASTER LANDING POLISH — CLEAN SINGLE SOURCE
       Chỉ làm việc với giao diện công khai khi chưa đăng nhập.
    ========================================================= */
    html[data-vact-auth="locked"] {
      background: #ffffff !important;
      scroll-behavior: smooth;
    }

    html[data-vact-auth="locked"] body {
      margin: 0 !important;
      padding: 0 !important;
      min-height: 100vh;
      background: #ffffff !important;
      overflow-x: hidden !important;
    }

    html[data-vact-auth="locked"] #vact-lock-screen {
      position: relative !important;
      inset: auto !important;
      width: 100% !important;
      height: 100svh !important;
      min-height: 680px !important;
      display: flex !important;
      overflow: hidden !important;
      background: #ffffff !important;
      isolation: isolate;
    }

    html[data-vact-auth="locked"] #vact-lock-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 3;
      background: linear-gradient(90deg, transparent 0 47%, rgba(255,255,255,0.12) 50%, transparent 53%);
      opacity: .5;
    }

    html[data-vact-auth="locked"] .lock-left {
      position: relative;
      flex: 1.03 1 0;
      min-width: 0;
      padding: clamp(34px, 5vw, 72px) clamp(34px, 5vw, 76px);
      justify-content: center;
      overflow: hidden;
      background:
        radial-gradient(580px 420px at 90% 8%, rgba(96,165,250,.26), transparent 62%),
        radial-gradient(420px 340px at 10% 92%, rgba(125,211,252,.18), transparent 62%),
        linear-gradient(145deg, #17358d 0%, #2051cf 42%, #2f7bf0 100%) !important;
    }

    html[data-vact-auth="locked"] .lock-left::before,
    html[data-vact-auth="locked"] .lock-left::after {
      content: '';
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }

    html[data-vact-auth="locked"] .lock-left::before {
      width: 430px; height: 430px;
      right: -155px; top: -145px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.08);
    }

    html[data-vact-auth="locked"] .lock-left::after {
      width: 310px; height: 310px;
      left: -165px; bottom: -155px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.06);
    }

    html[data-vact-auth="locked"] .lock-left > * {
      position: relative;
      z-index: 1;
    }

    html[data-vact-auth="locked"] .lock-left .brand-logo {
      position: absolute;
      top: clamp(28px, 4vw, 52px);
      left: clamp(34px, 5vw, 76px);
      font-size: clamp(1.2rem, 1.6vw, 1.55rem);
      letter-spacing: .2px;
      text-shadow: 0 3px 18px rgba(0,0,0,.12);
    }

    html[data-vact-auth="locked"] .lock-left-content {
      width: min(630px, 100%);
      margin: 0;
      transform: translateY(3vh);
    }

    html[data-vact-auth="locked"] .lock-left-content h1 {
      margin-bottom: 20px;
      font-size: clamp(2.55rem, 4.6vw, 4.6rem);
      line-height: 1.04;
      letter-spacing: -1.8px;
      text-wrap: balance;
      text-shadow: 0 10px 28px rgba(0,0,0,.12);
    }

    html[data-vact-auth="locked"] .lock-left-content p {
      max-width: 600px;
      margin-bottom: 34px;
      color: rgba(239,246,255,.86);
      font-size: clamp(.98rem, 1.25vw, 1.12rem);
      line-height: 1.72;
    }

    html[data-vact-auth="locked"] .feature-list {
      gap: 14px;
    }

    html[data-vact-auth="locked"] .feature-item {
      width: min(580px, 100%);
      padding: 10px 14px 10px 10px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 16px;
      background: rgba(255,255,255,.075);
      backdrop-filter: blur(8px);
      box-shadow: 0 12px 25px rgba(13,39,110,.10);
    }

    html[data-vact-auth="locked"] .feature-icon {
      width: 42px; height: 42px;
      flex: 0 0 42px;
      border-radius: 13px;
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.10);
    }

    html[data-vact-auth="locked"] .feature-text {
      font-size: .98rem;
      color: #f8fbff;
    }

    html[data-vact-auth="locked"] .lock-right {
      position: relative;
      flex: .97 1 0;
      min-width: 0;
      padding: 36px;
      background:
        radial-gradient(520px 420px at 95% 6%, rgba(37,99,235,.09), transparent 65%),
        radial-gradient(420px 340px at 10% 92%, rgba(96,165,250,.07), transparent 68%),
        #fbfdff !important;
      overflow: visible !important;
    }

    html[data-vact-auth="locked"] .lock-right::before {
      content: '';
      position: absolute;
      width: 460px; height: 460px;
      top: -310px; right: -220px;
      border-radius: 50%;
      border: 1px solid rgba(37,99,235,.08);
      box-shadow: inset 0 0 0 32px rgba(37,99,235,.025);
      pointer-events: none;
    }

    html[data-vact-auth="locked"] .auth-box-modern {
      position: relative;
      z-index: 1;
      max-width: 430px;
      padding: 34px 34px 30px;
      border: 1px solid rgba(37,99,235,.10);
      border-radius: 26px;
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow:
        0 30px 70px rgba(37,99,235,.10),
        0 10px 22px rgba(15,23,42,.04),
        inset 0 1px 0 rgba(255,255,255,.8);
    }

    html[data-vact-auth="locked"] .auth-box-modern::before {
      content: '';
      width: 46px; height: 4px;
      position: absolute;
      top: 18px; left: 50%;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(90deg, #2563eb, #60a5fa);
      opacity: .72;
    }

    html[data-vact-auth="locked"] .auth-box-modern h2 {
      margin-top: 8px;
      margin-bottom: 8px;
      font-size: clamp(1.6rem, 2.5vw, 2rem);
      letter-spacing: -.5px;
    }

    html[data-vact-auth="locked"] .auth-box-modern > p {
      margin-bottom: 24px;
      color: #72829a;
    }

    html[data-vact-auth="locked"] .input-group-modern {
      margin-bottom: 14px;
    }

    html[data-vact-auth="locked"] .input-group-modern input,
    html[data-vact-auth="locked"] .input-group-modern input:focus {
      color: #14223a !important;
      -webkit-text-fill-color: #14223a !important;
      background: #ffffff !important;
      caret-color: #2563eb !important;
      border-color: #d8e4f5 !important;
      box-shadow: none !important;
    }

    html[data-vact-auth="locked"] .input-group-modern input:focus {
      border-color: #6fa2f3 !important;
      box-shadow: 0 0 0 4px rgba(37,99,235,.10) !important;
    }

    html[data-vact-auth="locked"] .input-group-modern input::placeholder {
      color: #8494a9 !important;
      opacity: 1 !important;
      -webkit-text-fill-color: #8494a9 !important;
    }

    html[data-vact-auth="locked"] .input-group-modern i {
      color: #5a7496 !important;
    }

    html[data-vact-auth="locked"] .btn-modern-submit {
      position: relative;
      overflow: hidden;
      margin-top: 2px;
      padding: 16px 18px;
      border-radius: 14px;
      background: linear-gradient(135deg, #2459dd 0%, #3b82f6 100%);
      box-shadow: 0 14px 26px rgba(37,99,235,.18);
    }

    html[data-vact-auth="locked"] .btn-modern-submit::after {
      content: '';
      position: absolute;
      top: -100%; left: -35%;
      width: 28%; height: 300%;
      transform: rotate(18deg);
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
      transition: left .55s ease;
    }

    html[data-vact-auth="locked"] .btn-modern-submit:hover::after {
      left: 110%;
    }

    html[data-vact-auth="locked"] .footer-text {
      margin-top: 16px !important;
    }

    /* Liền mạch: section đánh giá ôm nhẹ vào chân hero */
    html[data-vact-auth="locked"] .vact-public-testimonials {
      position: relative;
      z-index: 4;
      width: 100%;
      margin: -36px 0 0 !important;
      padding: 82px 24px 46px !important;
      border-radius: 38px 38px 0 0 !important;
      border-top: 1px solid rgba(37,99,235,.08) !important;
      background:
        radial-gradient(900px 260px at 50% -20%, rgba(37,99,235,.15), transparent 62%),
        radial-gradient(480px 240px at 4% 30%, rgba(96,165,250,.07), transparent 62%),
        linear-gradient(180deg, #f4f8ff 0%, #fbfdff 32%, #ffffff 100%) !important;
      box-shadow: 0 -22px 48px rgba(37,99,235,.08);
      overflow: hidden;
    }

    html[data-vact-auth="locked"] .vact-public-testimonials::before {
      width: 620px !important; height: 180px !important;
      top: -110px !important; left: 50% !important;
      transform: translateX(-50%) !important;
      background: radial-gradient(ellipse at center, rgba(37,99,235,.12) 0%, rgba(37,99,235,.04) 38%, transparent 74%) !important;
      border-radius: 50% !important;
    }

    html[data-vact-auth="locked"] .vact-public-testimonials::after {
      width: 300px !important; height: 300px !important;
      right: -150px !important; bottom: -170px !important;
      background: rgba(37,99,235,.045) !important;
      border-radius: 50% !important;
    }

    html[data-vact-auth="locked"] .vact-public-testimonials-inner {
      width: min(1220px, 100%);
    }

    html[data-vact-auth="locked"] .vact-public-title {
      max-width: 760px;
      margin: 0 auto 28px !important;
    }

    html[data-vact-auth="locked"] .vact-public-eyebrow {
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(37,99,235,.07) !important;
      border-color: rgba(37,99,235,.10) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
    }

    html[data-vact-auth="locked"] .vact-public-title h2 {
      margin-top: 4px;
      font-size: clamp(1.8rem, 3vw, 2.55rem) !important;
      letter-spacing: -1px;
      color: #122446 !important;
    }

    html[data-vact-auth="locked"] .vact-public-title p {
      max-width: 640px;
      margin-top: 9px;
      color: #708096 !important;
      font-size: .9rem;
    }

    html[data-vact-auth="locked"] .vact-public-title::after {
      width: 74px;
      height: 4px;
      margin-top: 15px;
      background: linear-gradient(90deg, #2563eb, #60a5fa);
      box-shadow: 0 4px 12px rgba(37,99,235,.16);
    }

    html[data-vact-auth="locked"] .vact-public-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 16px !important;
    }

    html[data-vact-auth="locked"] .vact-public-card {
      min-height: 208px !important;
      padding: 18px !important;
      border-radius: 18px !important;
      background: rgba(255,255,255,.90) !important;
      border: 1px solid #e4ebf5 !important;
      box-shadow: 0 12px 28px rgba(15,23,42,.045), inset 0 1px 0 rgba(255,255,255,.9) !important;
    }

    html[data-vact-auth="locked"] .vact-public-card:hover {
      transform: translateY(-5px) !important;
      border-color: rgba(37,99,235,.22) !important;
      box-shadow: 0 18px 34px rgba(37,99,235,.09) !important;
    }

    html[data-vact-auth="locked"] .vact-public-stars {
      color: #f3ad25 !important;
      margin-bottom: 9px;
    }

    html[data-vact-auth="locked"] .vact-public-text {
      margin-bottom: 14px;
      color: #52627a !important;
      font-size: .81rem !important;
      line-height: 1.65 !important;
    }

    html[data-vact-auth="locked"] .vact-public-user {
      border-top: 1px solid #edf2f8 !important;
    }

    html[data-vact-auth="locked"] .vact-public-avatar {
      background: linear-gradient(135deg, #2255cf, #66a7ff) !important;
      box-shadow: 0 6px 14px rgba(37,99,235,.16);
    }

    html[data-vact-auth="locked"] .vact-public-name {
      color: #1b2a43 !important;
    }

    html[data-vact-auth="locked"] .vact-public-school {
      color: #5b84ca !important;
    }

    html[data-vact-auth="locked"] .vact-public-footer {
      max-width: 1180px;
      margin: 24px auto 0;
      padding-top: 18px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      color: #718198 !important;
      border-top: 1px solid #e6edf6 !important;
      font-size: .78rem;
    }

    html[data-vact-auth="locked"] .vact-public-footer strong { color: #1f3f81 !important; }
    html[data-vact-auth="locked"] .vact-public-footer a { color: #2563eb !important; }

    /* Khi đã đăng nhập: tuyệt đối không chiếm chỗ công khai */
    html[data-vact-auth="unlocked"] #vact-lock-screen,
    html[data-vact-auth="unlocked"] .vact-public-testimonials {
      display: none !important;
    }

    /* DARK MODE — landing vẫn dịu mắt, ô nhập luôn rõ chữ */
    html[data-theme="dark"][data-vact-auth="locked"] body {
      background: #08111e !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .lock-right {
      background:
        radial-gradient(520px 420px at 95% 6%, rgba(59,130,246,.13), transparent 65%),
        #0d1726 !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .auth-box-modern {
      background: rgba(17,29,47,.90) !important;
      border-color: rgba(112,166,244,.16) !important;
      box-shadow: 0 28px 65px rgba(0,0,0,.28) !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .auth-box-modern h2 { color: #66a6ff !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .auth-box-modern > p,
    html[data-theme="dark"][data-vact-auth="locked"] .footer-text span { color: #9fb0c7 !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .input-group-modern input,
    html[data-theme="dark"][data-vact-auth="locked"] .input-group-modern input:focus {
      color: #10213c !important;
      -webkit-text-fill-color: #10213c !important;
      background: #ffffff !important;
      border-color: #7fa5d9 !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .input-group-modern input::placeholder {
      color: #7b8ca5 !important;
      -webkit-text-fill-color: #7b8ca5 !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-testimonials {
      background:
        radial-gradient(900px 260px at 50% -20%, rgba(59,130,246,.18), transparent 62%),
        linear-gradient(180deg, #0d1a2d 0%, #0b1524 34%, #0a121e 100%) !important;
      border-top-color: rgba(96,165,250,.08) !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-title h2 { color: #eef5ff !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-title p { color: #9aadc6 !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-card {
      background: rgba(17,29,47,.90) !important;
      border-color: rgba(148,163,184,.13) !important;
      box-shadow: 0 14px 30px rgba(0,0,0,.20) !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-text { color: #b5c4d7 !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-name { color: #f0f6ff !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-school { color: #7eb3ff !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-user { border-top-color: rgba(148,163,184,.11) !important; }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-footer {
      color: #8ea3bd !important;
      border-top-color: rgba(148,163,184,.10) !important;
    }
    html[data-theme="dark"][data-vact-auth="locked"] .vact-public-footer strong { color: #edf5ff !important; }

    @media (max-width: 1080px) {
      html[data-vact-auth="locked"] .lock-left { padding-left: 42px; padding-right: 42px; }
      html[data-vact-auth="locked"] .vact-public-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }

    @media (max-width: 900px) {
      html[data-vact-auth="locked"] #vact-lock-screen {
        height: auto !important;
        min-height: 100dvh !important;
        flex-direction: column !important;
      }
      html[data-vact-auth="locked"] .lock-left {
        min-height: 58dvh;
        padding: 34px 24px 40px;
      }
      html[data-vact-auth="locked"] .lock-left .brand-logo {
        left: 24px; top: 28px;
      }
      html[data-vact-auth="locked"] .lock-left-content {
        transform: none;
        padding-top: 60px;
      }
      html[data-vact-auth="locked"] .lock-right {
        min-height: 52dvh;
        padding: 22px 16px 52px;
      }
      html[data-vact-auth="locked"] .auth-box-modern {
        max-width: 500px;
      }
      html[data-vact-auth="locked"] .vact-public-testimonials {
        margin-top: -22px !important;
        padding: 68px 16px 38px !important;
        border-radius: 28px 28px 0 0 !important;
      }
      html[data-vact-auth="locked"] .vact-public-footer {
        flex-direction: column;
        align-items: flex-start;
      }
    }

    @media (max-width: 620px) {
      html[data-vact-auth="locked"] .lock-left-content h1 {
        font-size: 2.4rem;
        letter-spacing: -1px;
      }
      html[data-vact-auth="locked"] .lock-left-content p {
        font-size: .95rem;
      }
      html[data-vact-auth="locked"] .feature-text {
        font-size: .9rem;
      }
      html[data-vact-auth="locked"] .auth-box-modern {
        padding: 30px 20px 24px;
        border-radius: 22px;
      }
      html[data-vact-auth="locked"] .vact-public-grid { grid-template-columns: 1fr; }
      html[data-vact-auth="locked"] .vact-public-card { min-height: 0 !important; }
    }


/* =========================================================
   VISUAL REFERENCE: giao diện giống mẫu VACSTUDY người dùng gửi
========================================================= */
#vact-lock-screen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: block !important;
  background: #ffffff !important;
  color: #111827 !important;
  z-index: 999999 !important;
}
.guest-shell { min-height: 100vh; background: #fff; }
.guest-nav {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid #e5e7eb;
}
.guest-brand {
  display: inline-flex; align-items: center; gap: 10px; background: transparent; color: #111827;
  font-size: 1rem; font-weight: 800; padding: 8px 0;
}
.guest-brand-mark {
  width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  background: #fff7ed; color: #f97316; border: 1px solid #fed7aa;
}
.guest-nav-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.guest-nav-link {
  background: transparent; color: #374151; padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem;
}
.guest-nav-link:hover { background: #f8fafc; color: #111827; }
.guest-nav-link.active { background: #fff7ed; color: #b45309; }
.guest-nav-link i { margin-right: 6px; font-size: .84rem; }
.guest-main {
  width: min(1280px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 110px;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .8fr); gap: 72px; align-items: center;
}
.guest-copy { max-width: 760px; }
.guest-kicker { display:flex; align-items:center; gap:8px; color:#64748b; font-size:.86rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.guest-kicker-dot { width:8px; height:8px; border-radius:50%; background:#f97316; box-shadow:0 0 0 5px #fff7ed; }
.guest-copy h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.05; letter-spacing: -.04em; margin: 0 0 24px; color: #111827; font-weight: 800; }
.guest-copy h1 span { color: #b45309; }
.guest-copy > p { max-width: 700px; color:#64748b; font-size:1.08rem; line-height:1.8; margin-bottom:34px; }
.guest-features { display:grid; gap:16px; max-width:680px; }
.guest-feature { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border:1px solid #e5e7eb; border-radius:16px; background:#fff; box-shadow:0 8px 24px rgba(15,23,42,.035); }
.guest-feature-icon { width:42px; height:42px; flex:0 0 42px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#fef3c7; color:#b45309; }
.guest-feature strong { display:block; color:#1f2937; font-size:.98rem; margin-bottom:4px; }
.guest-feature span { display:block; color:#64748b; font-size:.9rem; line-height:1.5; }
.guest-auth-column { width:100%; max-width:440px; justify-self:end; }
.auth-box-modern {
  width:100%; max-width:none; padding:34px; text-align:center; background:#fff; border:1px solid #e5e7eb; border-radius:24px;
  box-shadow: 0 20px 50px rgba(15,23,42,.08); animation: popIn .5s ease;
}
.guest-auth-icon { width:54px; height:54px; margin:0 auto 14px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:#fff7ed; color:#ea580c; font-size:1.35rem; border:1px solid #fed7aa; }
.auth-box-modern h2 { color:#111827; font-size:1.55rem; font-weight:800; margin-bottom:8px; }
.auth-box-modern > p { color:#64748b; font-size:.94rem; margin-bottom:24px; }
.input-group-modern { position:relative; margin-bottom:14px; }
.input-group-modern input { background:#fff; border:1px solid #cbd5e1; border-radius:12px; color:#111827; padding:15px 16px 15px 46px; font-size:.98rem; }
.input-group-modern input:focus { border-color:#f59e0b !important; box-shadow:0 0 0 4px rgba(245,158,11,.12) !important; }
.input-group-modern i { color:#94a3b8; left:16px; }
.btn-modern-submit { background:#ea580c; border-radius:12px; padding:15px 18px; font-size:.98rem; }
.btn-modern-submit:hover { background:#c2410c; box-shadow:0 10px 24px rgba(234,88,12,.2); }
.guest-register { margin-top:18px; font-size:.88rem; color:#64748b; }
.guest-register a { color:#c2410c !important; font-weight:800 !important; text-decoration:none !important; margin-left:4px; }
.guest-quote { margin-top:14px; padding:18px 20px; display:flex; gap:12px; border-radius:16px; border:1px solid #e5e7eb; background:#fafafa; color:#64748b; }
.guest-quote i { color:#f59e0b; padding-top:2px; }
.guest-quote strong { display:block; color:#374151; font-size:.92rem; margin-bottom:3px; }
.guest-quote span { display:block; font-size:.82rem; line-height:1.5; }
.app-nav { display:flex; align-items:center; gap:4px; margin-left:auto; margin-right:18px; }
.app-nav-link { background:transparent; color:var(--text-muted); padding:9px 12px; border-radius:10px; font-weight:700; font-size:.9rem; }
.app-nav-link:hover { background:var(--secondary); color:var(--text-main); }
.app-nav-link.active { background:var(--glow-primary); color:var(--primary); }
.community-placeholder { min-height:55vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px dashed var(--border-color); border-radius:24px; background:var(--surface-color); }
.community-placeholder-icon { width:72px; height:72px; display:flex; align-items:center; justify-content:center; border-radius:20px; background:var(--secondary); color:var(--primary); font-size:1.6rem; margin-bottom:18px; }
.community-placeholder h2 { font-size:1.8rem; margin-bottom:8px; }
.community-placeholder p { color:var(--text-muted); max-width:520px; }
@media (max-width: 980px) {
  .guest-nav { width:min(100% - 28px, 1280px); min-height:64px; }
  .guest-nav-links { gap:1px; }
  .guest-nav-link { padding:8px 9px; font-size:.8rem; }
  .guest-main { width:min(100% - 28px, 1280px); grid-template-columns:1fr; gap:34px; padding:44px 0 72px; }
  .guest-auth-column { justify-self:start; max-width:560px; }
  .guest-copy h1 { font-size: clamp(2.4rem, 12vw, 4rem); }
  .app-nav { order:3; width:100%; margin:8px 0 0; overflow:auto; }
  header { flex-wrap:wrap; }
}
@media (max-width: 640px) {
  .guest-nav { flex-direction:column; align-items:flex-start; padding:12px 0; gap:10px; }
  .guest-nav-links { width:100%; justify-content:flex-start; overflow:auto; flex-wrap:nowrap; }
  .guest-main { padding-top:34px; }
  .auth-box-modern { padding:24px 18px; border-radius:20px; }
}
html[data-vact-auth="locked"] body { background:#fff !important; padding-bottom:0 !important; }
html[data-vact-auth="locked"] .container { display:none !important; }
html[data-vact-auth="locked"] .vact-public-testimonials { display:block !important; }


/* =========================================================
   VACSTUDY POLISHED APP SHELL — THEME SAFE
   Fix: không còn hard-code màu Light Mode vào shell/card/navbar.
   ========================================================= */

html,
body {
  background: var(--bg-color);
  color: var(--text-main);
}

body {
  min-height: 100vh;
  padding-bottom: 80px;
  transition: background-color .28s ease, color .28s ease;
}

.container {
  width: min(100% - 48px, 1480px);
  margin: 0 auto;
  padding-bottom: 60px;
}

header {
  padding: 10px 18px;
  border-radius: 18px;
  margin: 16px auto 24px;
  max-width: 1480px;
  min-height: 62px;
  gap: 14px;
  background: var(--surface-color);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2000;
}

.brand {
  font-size: 1.18rem;
  gap: 9px;
  letter-spacing: .4px;
  white-space: nowrap;
  color: var(--primary);
}
.brand i { font-size: 1.7rem; }

.app-nav {
  display: flex;
  align-items: center;
  background: var(--secondary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 4px;
  margin: 0 auto;
  gap: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 14px;
  background: transparent;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 800;
  box-shadow: none;
}

.app-nav-link i { font-size: .82rem; opacity: .9; }

.app-nav-link:hover {
  background: var(--surface-color);
  color: var(--text-main);
  border-color: var(--border-color);
  transform: translateY(-1px);
}

.app-nav-link.active {
  background: var(--surface-color);
  color: var(--primary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

.header-actions {
  gap: 7px;
  display: flex;
  align-items: center;
}

.header-actions > .btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.header-actions > .btn-icon:hover {
  background: var(--surface-color);
  color: var(--primary);
  border-color: var(--primary);
}

.user-chip {
  padding: 4px 11px 4px 4px;
  background: var(--secondary);
  color: var(--text-main);
  border: 1px solid var(--border-color);
}

.user-chip-name { color: var(--text-main); max-width: 105px; }
.avatar-wrapper { width: 32px; height: 32px; }

#sysModeSwitcher {
  background: var(--glow-primary) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

#homeScreen .dashboard-panel-top,
#homeScreen .leaderboard-section,
#homeScreen .library-section {
  display: none !important;
}

.home-course-showcase { padding: 18px 4px 10px; }

.home-course-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin: 0 0 18px;
}

.home-eyebrow {
  font-size: .7rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.home-course-heading h2 {
  font-size: 2rem;
  letter-spacing: -.03em;
  margin: 0;
  color: var(--text-main);
}

.home-course-heading h2 span { color: var(--primary); }

.home-course-heading p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: .88rem;
}

.home-outline-btn {
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--text-main);
  padding: 10px 14px;
  border-radius: 11px;
  font-weight: 800;
}

.home-outline-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--glow-primary);
}

.vac-course-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 0;
}

.vac-course-card {
  background: var(--surface-color);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease;
}

.vac-course-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.vac-course-cover {
  height: 190px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
}

.vac-course-cover:before {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.82), transparent 35%),
              linear-gradient(135deg, rgba(255,255,255,.35), transparent 55%);
  transform: rotate(-8deg);
}

.vac-course-card-1 .vac-course-cover { background: linear-gradient(135deg,#fff1cf,#ffd77e); }
.vac-course-card-2 .vac-course-cover { background: linear-gradient(135deg,#e5f1ff,#8dc1ff); }
.vac-course-card-3 .vac-course-cover { background: linear-gradient(135deg,#fff3d6,#ffd25c); }

.cover-pill {
  position: absolute;
  top: 14px;
  left: 16px;
  background: rgba(255,255,255,.82);
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .63rem;
  font-weight: 900;
  color: #1e3a8a;
  z-index: 2;
}

.cover-symbol {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: rgba(255,255,255,.74);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: #2563eb;
  box-shadow: 0 8px 20px rgba(37,99,235,.12);
  margin-bottom: 8px;
}

.vac-course-card-1 .cover-symbol,
.vac-course-card-3 .cover-symbol { color: #f59e0b; }

.vac-course-cover strong {
  position: relative;
  z-index: 2;
  font-size: 1.75rem;
  letter-spacing: .04em;
  color: #0f2b5b;
  text-shadow: 0 2px 0 rgba(255,255,255,.65);
}

.vac-course-cover small {
  position: relative;
  z-index: 2;
  font-size: .68rem;
  font-weight: 900;
  color: #42536f;
  margin-top: 4px;
  letter-spacing: .08em;
}

.vac-course-body {
  padding: 14px 16px 15px;
  background: var(--surface-color);
  color: var(--text-main);
}

.vac-course-tag {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--glow-primary);
  color: var(--primary);
  font-size: .64rem;
  font-weight: 900;
}

.vac-course-tag-green {
  background: rgba(16,185,129,.12);
  color: var(--success);
}

.vac-course-body h3 {
  font-size: 1.02rem;
  line-height: 1.4;
  margin: 9px 0 14px;
  color: var(--text-main);
}

.vac-course-meta {
  border-top: 1px solid var(--border-color);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--primary);
  font-size: .75rem;
  font-weight: 850;
}

.vac-course-meta span:first-child {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Route khóa học */
body[data-route="/khoa-hoc"] .home-course-showcase { padding-top: 6px; }
body[data-route="/khoa-hoc"] .home-course-heading h2 { font-size: 1.8rem; }
body[data-route="/khoa-hoc"] #homeScreen .home-course-showcase { display: block; }

/* Thư viện */
body[data-route="/thu-vien"] #homeScreen .home-course-showcase { display: none !important; }
body[data-route="/thu-vien"] #homeScreen .library-section {
  display: block !important;
  margin-top: 6px;
}
body[data-route="/thu-vien"] #homeScreen { padding-top: 4px; }

.library-section { background: transparent; }
.library-header { border-bottom: 0; margin-bottom: 14px; }
.library-title { text-transform: none; font-size: 1.7rem; }
.lib-card { border-radius: 18px; }

/* Phòng thi */
body[data-route="/phong-thi"] #homeScreen { display: none !important; }
body[data-route="/phong-thi"] #courseDetailScreen { display: block !important; }
body[data-route="/phong-thi"] #standardWorkspace { display: none !important; }
body[data-route="/phong-thi"] #mockExamWorkspace { display: block !important; }
body[data-route="/phong-thi"] .course-header { display: flex; }

#courseDetailScreen { background: transparent; }

.course-header {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.vac-course-card .price,
.vac-course-card .course-price { display: none !important; }

/* Dark mode: giữ cover sáng như thiết kế, nhưng phần shell/card luôn theo theme. */
:root[data-theme="dark"] .app-nav {
  background: #1b2536;
  border-color: #334155;
}

:root[data-theme="dark"] .app-nav-link {
  color: #cbd5e1;
}

:root[data-theme="dark"] .app-nav-link:hover,
:root[data-theme="dark"] .app-nav-link.active {
  background: #0f172a;
  color: #f8fafc;
  border-color: #475569;
}

:root[data-theme="dark"] .vac-course-card {
  border-color: #334155;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
}

:root[data-theme="dark"] .vac-course-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 18px 40px rgba(0,0,0,.34);
}

:root[data-theme="dark"] .vac-course-body {
  background: #111827;
  color: #f9fafb;
}

:root[data-theme="dark"] .vac-course-body h3 {
  color: #f9fafb;
}

:root[data-theme="dark"] .user-chip,
:root[data-theme="dark"] .header-actions > .btn-icon {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

:root[data-theme="dark"] .home-outline-btn {
  background: #111827;
  border-color: #374151;
  color: #f9fafb;
}

@media (max-width: 1050px) {
  .vac-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-nav-link span { display: none; }
  .app-nav-link { padding: 10px 12px; }
  .container { width: min(100% - 28px, 1480px); }
}

@media (max-width: 700px) {
  header {
    margin: 8px auto 14px;
    padding: 8px 10px;
    flex-wrap: wrap;
  }
  .brand { font-size: 1rem; }
  .app-nav {
    order: 3;
    width: 100%;
    overflow: auto;
    justify-content: flex-start;
  }
  .app-nav-link span { display: inline; }
  .header-actions { margin-left: auto; }
  .user-chip-name { display: none; }
  .vac-course-grid { grid-template-columns: 1fr; }
  .vac-course-cover { height: 175px; }
  .home-course-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .home-outline-btn { width: 100%; }
}


/* =========================================================
   VACSTUDY PREMIUM THEME V3 — TRUE LIGHT / TRUE DARK
   ========================================================= */
html,body{background:var(--bg-color)!important;color:var(--text-main)!important}
:root[data-theme="light"]{
  color-scheme:light;
  --bg-color:#ffffff;
  --surface-color:#ffffff;
  --secondary:#f5f7fa;
  --text-main:#101828;
  --text-muted:#667085;
  --border-color:#e4e7ec;
  --glow-primary:rgba(37,99,235,.10);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg-color:#000000;
  --surface-color:#0a0a0a;
  --secondary:#111111;
  --text-main:#f5f7fa;
  --text-muted:#a7adb7;
  --border-color:#252525;
  --glow-primary:rgba(59,130,246,.16);
}
html[data-theme="dark"] body{background:#000!important}
html[data-theme="dark"] .guest-shell,
html[data-theme="dark"] .guest-main,
html[data-theme="dark"] .guest-nav,
html[data-theme="dark"] .community-shell,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .community-sidebar,
html[data-theme="dark"] .community-widget,
html[data-theme="dark"] .community-stories-panel,
html[data-theme="dark"] .community-post,
html[data-theme="dark"] .community-composer,
html[data-theme="dark"] .community-story-composer,
html[data-theme="dark"] .community-story-viewer,
html[data-theme="dark"] .community-group-strip,
html[data-theme="dark"] .profile-page-card,
html[data-theme="dark"] .friend-page-card{background:#0a0a0a!important;color:#f5f7fa!important}
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{background:#050505!important;color:#f5f7fa!important;border-color:#292929!important}
html[data-theme="dark"] .guest-nav,
html[data-theme="dark"] header{background:#050505!important;border-color:#252525!important}
html[data-theme="dark"] .guest-copy h1,
html[data-theme="dark"] .guest-copy p,
html[data-theme="dark"] .guest-feature-card,
html[data-theme="dark"] .guest-quote-card{color:#f5f7fa}
html[data-theme="dark"] .guest-feature-card,
html[data-theme="dark"] .guest-quote-card{background:#0a0a0a!important;border-color:#252525!important}
html[data-theme="light"] .guest-shell,
html[data-theme="light"] .guest-main{background:#fff!important}
html[data-theme="light"] .guest-feature-card,
html[data-theme="light"] .guest-quote-card{background:#fff!important;border-color:#e4e7ec!important}
html[data-theme="light"] .community-post,
html[data-theme="light"] .community-sidebar,
html[data-theme="light"] .community-widget,
html[data-theme="light"] .community-stories-panel,
html[data-theme="light"] .profile-page-card,
html[data-theme="light"] .friend-page-card{background:#fff!important}

html[data-theme="dark"] .guest-shell{background:#000!important}
html[data-theme="dark"] .guest-nav{border-color:#252525!important}
html[data-theme="dark"] .guest-brand{color:#f5f7fa!important}
html[data-theme="dark"] .guest-nav-link{color:#a7adb7!important}
html[data-theme="dark"] .guest-nav-link.active{color:#fff!important;background:#111!important}
html[data-theme="dark"] .guest-kicker{color:#a7adb7!important}
html[data-theme="dark"] .guest-copy h1{color:#f5f7fa!important}
html[data-theme="dark"] .guest-copy p{color:#b7bdc7!important}
html[data-theme="dark"] .guest-feature-card,
html[data-theme="dark"] .guest-feature,
html[data-theme="dark"] .guest-quote-card,
html[data-theme="dark"] .auth-box-modern{background:#0a0a0a!important;color:#f5f7fa!important;border-color:#252525!important}
html[data-theme="dark"] .guest-feature-card *,
html[data-theme="dark"] .guest-quote-card *{color:inherit}
html[data-theme="light"] .guest-shell{background:#fff!important}

/* =========================================================
   VACSTUDY APP HEADER FINAL — compact pill navigation
   Inspired by the supplied reference layout, without copying branding.
   ========================================================= */
header{padding:8px 12px!important;min-height:64px!important;border-radius:20px!important;gap:10px!important;}
.brand{flex:0 0 auto;font-size:1.08rem!important;gap:8px!important;}
.brand i{font-size:1.55rem!important;}
.app-nav{margin:0 auto!important;max-width:760px;min-width:0;padding:4px!important;gap:2px!important;border-radius:999px!important;}
.app-nav-link{padding:9px 12px!important;font-size:.78rem!important;border-radius:999px!important;white-space:nowrap;}
.app-nav-link i{font-size:.78rem!important;}
.header-actions{flex:0 0 auto;gap:6px!important;}
.header-actions>.btn-icon{width:38px!important;height:38px!important;border-radius:12px!important;}
.vac-search-header-btn{order:-1;}
.user-chip{min-width:0;padding:4px 9px 4px 4px!important;border-radius:999px!important;}
.user-chip-name{max-width:105px!important;font-size:.78rem!important;}
.user-chip .avatar-wrapper{width:32px;height:32px;}

@media (max-width:1050px){
  header{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;}
  .app-nav{min-width:0;max-width:none;overflow:auto;justify-content:center;scrollbar-width:none;}
  .app-nav::-webkit-scrollbar{display:none;}
  .app-nav-link{padding:9px 10px!important;}
  .app-nav-link span{display:none;}
}

@media (max-width:700px){
  header{grid-template-columns:auto 1fr auto!important;margin:6px auto 12px!important;padding:7px 8px!important;border-radius:17px!important;min-height:56px!important;}
  .brand{font-size:.95rem!important;}
  .brand i{font-size:1.3rem!important;}
  .app-nav{grid-column:1/-1;grid-row:2;width:100%;justify-content:flex-start;margin:2px 0 0!important;}
  .app-nav-link{padding:8px 11px!important;font-size:.68rem!important;gap:5px!important;}
  .app-nav-link span{display:inline!important;}
  .header-actions{margin-left:auto!important;gap:4px!important;}
  .header-actions>.btn-icon{width:34px!important;height:34px!important;border-radius:10px!important;}
  .header-actions>#sysModeSwitcher,#btnSyncDatabase{display:none!important;}
  .user-chip{padding-right:5px!important;}
  .user-chip-name{display:none!important;}
}

@media (max-width:430px){
  .brand span{display:none;}
  .app-nav-link{padding:8px 9px!important;}
  .app-nav-link i{font-size:.74rem!important;}
  .header-actions>.btn-icon{width:32px!important;height:32px!important;}
}

/* Responsive guardrails: desktop and mobile use independent proportions. */
@media (max-width:700px){
  body{padding-bottom:62px;overflow-x:hidden;}
  .container{width:100%!important;padding:0 8px 38px!important;}
  main,.screen,.route-root{max-width:100%;min-width:0;}
  img,video,iframe{max-width:100%;}
  input,textarea,select,button{max-width:100%;}
}

/* VACSTUDY V5 header polish — compact grouped utility rail, responsive-first */
header{gap:12px;}
header .brand{flex:0 0 auto;white-space:nowrap;}
.header-actions{flex-wrap:nowrap;min-width:0;}
.header-actions>.btn-icon{position:relative;}
#messagingHeaderButton{order:0;}
@media(max-width:800px){
  header{position:sticky!important;top:6px;z-index:4000!important;backdrop-filter:blur(14px);}
  .header-actions{overflow:visible;}
  .user-chip-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
@media(max-width:560px){
  header .brand span{display:none;}
  header .brand i{font-size:1.25rem;}
  .header-actions>.btn-icon{width:34px!important;height:34px!important;}
  .user-chip{max-width:120px;}
  .user-chip-name{max-width:60px;}
}

/* VACSTUDY LOGIN V5.1 — trạng thái xác thực rõ ràng */
#submit-btn:disabled {
  cursor: wait;
  opacity: .78;
  filter: saturate(.92);
}
#submit-btn:disabled .fa-spinner {
  margin-left: .35rem;
}
#error-msg {
  line-height: 1.45;
  min-height: 0;
}