/** * ===================================================== * AUDIO TRUYỆN - MAIN STYLES * ===================================================== */ /* ===================== THEME TOGGLE ===================== * Theme is controlled via class on : .theme-light / .theme-dark. * `.light` on body is kept as a legacy alias used elsewhere on the site. */ html, body { background: #0f172a; color: rgba(255, 255, 255, 0.92); } html.theme-light, html.theme-light body { background: #f8fafc; color: #0f172a; } /* Ensure smooth transitions when switching themes. */ body, .site-header, .site-footer, .card, .detail-card, .ep-item, .comment-item, .sidebar-card, .related-cover-wrap, .story-title, .player-track-title, .player-track-story, .ep-title, .audio-player { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } /* ===================== CSS VARIABLES ===================== */ :root { --primary: #6366f1; --secondary: #8b5cf6; --accent: #ec4899; --dark-900: #0f0f1a; --dark-850: #161627; --dark-800: #1e1e35; } /* ===================== RESET & BASE ===================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; background-color: var(--dark-900); color: #e5e7eb; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; display: block; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input { font-family: inherit; } /* ===================== UTILITIES ===================== */ .container { max-width: 1280px; margin: 0 auto; padding: 0 1rem; } @media (max-width: 768px) { .container { padding: 0 0.75rem; } } /* ===================== HEADER ===================== */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(15, 15, 26, 0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .header-logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; } .logo-img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; flex-shrink: 0; } .logo-text { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: 0.2px; } .text-accent { color: var(--primary); } .header-search { flex: 1; max-width: 520px; } .search-form { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; transition: all 0.2s ease; } .search-form:focus-within { border-color: rgba(99, 102, 241, 0.5); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); } .search-icon { color: #6b7280; flex-shrink: 0; } .search-input { flex: 1; background: transparent; border: none; outline: none; color: #e5e7eb; font-size: 14px; } .search-input::placeholder { color: #6b7280; } .search-btn { padding: 8px 14px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .search-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(99, 102, 241, 0.35); } .header-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #e5e7eb; cursor: pointer; transition: all 0.2s ease; } .icon-btn:hover { border-color: rgba(99, 102, 241, 0.5); color: #fff; } .login-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #e5e7eb; text-decoration: none; font-size: 13px; font-weight: 600; transition: all 0.2s ease; } .login-link:hover { border-color: rgba(99, 102, 241, 0.5); color: #fff; } /* User menu in header */ .user-menu-wrap { position: relative; } .user-menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 24px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s ease; } .user-menu-btn:hover { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.08); } .user-avatar, .user-avatar-lg { border-radius: 50%; object-fit: cover; } .user-avatar { width: 28px; height: 28px; } .user-name { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-menu-btn .dropdown-arrow { transition: transform 0.2s ease; } .user-menu-wrap:hover .user-menu-btn .dropdown-arrow { transform: rotate(180deg); } .user-dropdown { position: absolute; top: calc(100% + 10px); right: 0; width: 240px; background: rgba(15,15,30,0.97); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; pointer-events: none; z-index: 9999; } .user-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; } .user-dropdown-header { padding: 8px 10px; } .user-info-row { display: flex; align-items: center; gap: 10px; } .user-avatar-lg { width: 40px; height: 40px; flex-shrink: 0; } .user-display-name { font-size: 14px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-username { font-size: 12px; color: #6b7280; margin-top: 2px; } .user-dropdown-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 4px 0; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #9ca3af; text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.15s ease; cursor: pointer; } .user-dropdown-item:hover { background: rgba(255,255,255,0.06); color: #fff; } .user-dropdown-item--danger:hover { background: rgba(239,68,68,0.1); color: #fca5a5; } .main-nav { display: flex; align-items: center; gap: 6px; overflow: visible; } .nav-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; color: #9ca3af; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: all 0.2s ease; } .nav-link:hover { color: #e5e7eb; background: rgba(255, 255, 255, 0.05); } .nav-link.active { color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); } .nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #e5e7eb; } .nav-dropdown-wrap { position: relative; } .nav-dropdown-toggle { cursor: pointer; background: none; border: none; font-family: inherit; } .nav-dropdown-toggle .dropdown-arrow { transition: transform 0.2s ease; } .nav-dropdown-wrap:hover .dropdown-arrow, .nav-dropdown.open ~ .nav-dropdown-toggle .dropdown-arrow { transform: rotate(180deg); } .genre-dropdown { position: absolute; top: calc(100% + 8px); left: 0; z-index: 9999; min-width: 560px; background: rgba(15, 15, 30, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) inset, -20px -10px 60px -10px rgba(99, 102, 241, 0.15) inset, 20px 10px 60px -10px rgba(236, 72, 153, 0.08) inset; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s ease; pointer-events: none; } .genre-dropdown::before { content: ''; position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(99, 102, 241, 0.12) 0%, transparent 60%), radial-gradient(ellipse 50% 35% at 80% 100%, rgba(236, 72, 153, 0.08) 0%, transparent 55%); pointer-events: none; z-index: -1; } .genre-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all; } .genre-dropdown-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .genre-col { display: flex; flex-direction: column; gap: 4px; } .genre-item { display: block; padding: 9px 14px; border-radius: 8px; color: #9ca3af; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.15s ease; white-space: nowrap; } .genre-item:hover { background: rgba(255,255,255,0.06); color: #fff; } @media (max-width: 768px) { .genre-dropdown { min-width: 300px; left: -20px; } } .nav-category-wrap { position: relative; } .nav-category-toggle { display: inline-flex; align-items: center; gap: 8px; user-select: none; } .nav-category-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.18); color: #fff; } .nav-category-dropdown { position: absolute; top: calc(100% + 6px); left: 0; width: 520px; max-width: 92vw; max-height: 340px; overflow-y: auto; background: rgba(22, 22, 39, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; padding: 10px; z-index: 100; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .nav-category-wrap.open .nav-category-dropdown { visibility: visible; opacity: 1; pointer-events: auto; } .nav-category-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; color: #cbd5e1; font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: all 0.2s ease; } .nav-category-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; } .nav-category-item.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; } @media (max-width: 768px) { .header-inner { flex-wrap: wrap; } .header-search { max-width: 100%; order: 3; flex-basis: 100%; } .nav-toggle { display: inline-flex; } .main-nav { display: none; width: 100%; order: 4; flex-direction: column; background: rgba(15, 15, 26, 0.95); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 8px; margin-top: 10px; overflow: visible; } .main-nav.open { display: flex; } .nav-link { width: 100%; padding: 12px 14px; border-radius: 10px; } .nav-category-wrap { position: static; } .nav-category-toggle { width: 100%; justify-content: space-between; } .nav-category-dropdown { position: static; width: 100%; max-width: none; max-height: none; background: transparent; border: none; border-radius: 0; padding: 0; margin-top: 6px; box-shadow: none; display: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav-category-wrap.open .nav-category-dropdown { display: grid; } .nav-category-item { padding: 10px 14px; } } /* ===================== HERO SECTION ===================== */ .hero-section { padding: 20px 0 0; } .hero-container { max-width: 1280px; margin: 0 auto; padding: 0 16px; } @media (max-width: 1024px) { .hero-container { } } .hero-slider-wrap { position: relative; border-radius: 16px; overflow: hidden; } .hero-slider { position: relative; height: 400px; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; } .hero-slide.active { opacity: 1; } .hero-slide .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .hero-slide .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 15, 26, 0.95) 0%, rgba(15, 15, 26, 0.7) 50%, rgba(15, 15, 26, 0.3) 100%); } .hero-slide .hero-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40px; max-width: 600px; } .hero-badges { margin-bottom: 16px; } .hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; } .hero-title { font-size: 32px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 8px; } .hero-author { font-size: 14px; color: #9ca3af; margin-bottom: 16px; } .hero-meta { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; } .hero-rating, .hero-views, .hero-eps { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #d1d5db; } .hero-rating svg { color: #fbbf24; } .hero-actions { display: flex; gap: 12px; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border: none; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4); } .slider-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .slider-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); border: none; cursor: pointer; transition: all 0.3s ease; } .slider-dot.active { background: #fff; width: 30px; border-radius: 5px; } /* ===================== HERO SIDEBAR ===================== */ .hero-container { display: flex; gap: 16px; align-items: flex-start; } .hero-slider-wrap { flex: 1; min-width: 0; } .hero-sidebar { flex-shrink: 0; width: 280px; display: flex; flex-direction: column; gap: 8px; } .hero-sidebar-header { display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 13px; font-weight: 700; color: #fbbf24; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid rgba(255,255,255,0.06); } .hero-sidebar-header svg { color: #fbbf24; } .hero-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-decoration: none; transition: all 0.2s ease; border: 1px solid transparent; } .hero-sidebar-item:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); } .hero-sidebar-item.active { background: rgba(99, 102, 241, 0.08); border-color: rgba(99, 102, 241, 0.2); } .hs-item-num { width: 20px; height: 20px; border-radius: 6px; background: rgba(255,255,255,0.06); color: #9ca3af; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-sidebar-item.active .hs-item-num { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; } .hs-item-cover { width: 36px; height: 48px; border-radius: 6px; overflow: hidden; flex-shrink: 0; background: rgba(255,255,255,0.05); } .hs-item-cover img { width: 100%; height: 100%; object-fit: cover; } .hs-item-info { flex: 1; min-width: 0; } .hs-item-title { font-size: 13px; font-weight: 600; color: #e5e7eb; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hs-item-meta { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #94a3b8; margin-top: 3px; } .hs-item-meta svg { color: #94a3b8; } @media (max-width: 1024px) { .hero-sidebar { display: none; } .hero-container { flex-direction: column; } .hero-slider-wrap { width: 100%; } } /* Quick Links */ .hero-quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .quick-link-card { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: all 0.25s ease; position: relative; overflow: hidden; } .quick-link-card::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease; } .quick-link-audio { background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); } .quick-link-audio::before { background: linear-gradient(135deg, rgba(99,102,241,0.1), transparent); } .quick-link-audio .quick-link-icon { color: #818cf8; } .quick-link-audio:hover { border-color: rgba(99, 102, 241, 0.6); transform: translateY(-1px); } .quick-link-list { background: rgba(236, 72, 153, 0.12); border: 1px solid rgba(236, 72, 153, 0.25); } .quick-link-list::before { background: linear-gradient(135deg, rgba(236,72,153,0.1), transparent); } .quick-link-list .quick-link-icon { color: #f472b6; } .quick-link-list:hover { border-color: rgba(236, 72, 153, 0.5); transform: translateY(-1px); } .quick-link-tags { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.25); } .quick-link-tags::before { background: linear-gradient(135deg, rgba(245,158,11,0.1), transparent); } .quick-link-tags .quick-link-icon { color: #fbbf24; } .quick-link-tags:hover { border-color: rgba(245, 158, 11, 0.5); transform: translateY(-1px); } .quick-link-top { background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.25); } .quick-link-top::before { background: linear-gradient(135deg, rgba(16,185,129,0.1), transparent); } .quick-link-top .quick-link-icon { color: #34d399; } .quick-link-top:hover { border-color: rgba(16, 185, 129, 0.5); transform: translateY(-1px); } .quick-link-card:hover::before { opacity: 1; } .quick-link-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .quick-link-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .quick-link-title { font-size: 13px; font-weight: 600; color: #f1f5f9; line-height: 1.3; } .quick-link-sub { font-size: 11px; color: #6b7280; line-height: 1.3; } .quick-link-arrow { color: #4b5563; flex-shrink: 0; } /* Tabbed Sidebar Block */ .sidebar-tab-block { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; overflow: hidden; } .sidebar-tabs { display: flex; border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .sidebar-tab { flex: 1; padding: 11px 16px; font-size: 13px; font-weight: 600; color: #6b7280; background: transparent; border: none; cursor: pointer; transition: all 0.2s ease; border-bottom: 2px solid transparent; margin-bottom: -1px; } .sidebar-tab:hover { color: #e5e7eb; background: rgba(255, 255, 255, 0.03); } .sidebar-tab.active { color: #fff; border-bottom-color: #6366f1; background: rgba(99, 102, 241, 0.06); } .sidebar-tab-content { display: none; padding: 12px; } .sidebar-tab-content.active { display: block; } /* Sidebar story items */ .sidebar-stories { display: flex; flex-direction: column; gap: 10px; } .sidebar-story-item { display: flex; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; text-decoration: none; transition: all 0.2s ease; } .sidebar-story-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); } .sidebar-story-cover { width: 52px; height: 70px; border-radius: 6px; overflow: hidden; flex-shrink: 0; } .sidebar-story-cover img { width: 100%; height: 100%; object-fit: cover; } .sidebar-story-info { display: flex; flex-direction: column; gap: 4px; justify-content: center; min-width: 0; } .sidebar-story-info h4 { font-size: 13px; font-weight: 600; color: #e5e7eb; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sidebar-story-info span { font-size: 12px; color: #6b7280; } /* Rankings */ .sidebar-rankings { display: flex; flex-direction: column; gap: 8px; } .ranking-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; text-decoration: none; transition: all 0.2s ease; } .ranking-item:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); transform: translateX(2px); } .ranking-num { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.06); color: #9ca3af; flex-shrink: 0; } .ranking-num.top-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1c1917; } .ranking-num.top-2 { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; } .ranking-num.top-3 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; } .ranking-cover { width: 36px; height: 48px; border-radius: 5px; overflow: hidden; flex-shrink: 0; } .ranking-cover img { width: 100%; height: 100%; object-fit: cover; } .ranking-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; } .ranking-info h4 { font-size: 13px; font-weight: 600; color: #e5e7eb; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .ranking-info span { font-size: 11px; color: #94a3b8; } /* ===================== LIVE FEED SECTION ===================== */ .live-section { padding: 20px 0; background: linear-gradient(135deg, rgba(15,15,26,0.8) 0%, rgba(20,20,35,0.8) 100%); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } .live-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .live-title-group { display: flex; align-items: center; gap: 10px; } .live-pulse { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: livePulse 1.5s ease-in-out infinite; position: relative; } .live-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: rgba(239, 68, 68, 0.3); animation: livePulseRing 1.5s ease-in-out infinite; } @keyframes livePulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } } @keyframes livePulseRing { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.8); opacity: 0; } } .live-title-group h3 { font-size: 16px; font-weight: 700; color: #fff; } .live-count-badge { display: flex; align-items: center; gap: 6px; padding: 5px 12px; background: linear-gradient(135deg, rgba(239,68,68,0.2) 0%, rgba(239,68,68,0.1) 100%); border: 1px solid rgba(239,68,68,0.3); border-radius: 20px; font-size: 12px; font-weight: 600; color: #fca5a5; } .live-count-badge span { color: #ef4444; } .live-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } /* Live item card */ .live-item { display: flex; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; transition: all 0.3s ease; } .live-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .live-item-enter { animation: liveItemEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .live-item-leave { animation: liveItemLeave 0.4s ease forwards; } @keyframes liveItemEnter { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes liveItemLeave { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-20px); } } .live-avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; } .live-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; } .live-top { display: flex; align-items: center; gap: 8px; } .live-name { font-size: 13px; font-weight: 600; color: #f1f5f9; } .live-city { font-size: 11px; color: #6b7280; background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 4px; } .live-story-line { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #9ca3af; overflow: hidden; } .live-story-line svg { color: #6366f1; flex-shrink: 0; } .live-story-line span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .live-progress { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; } .live-progress-bar { height: 100%; width: 30%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 2px; animation: liveProgress 8s ease-in-out infinite; } @keyframes liveProgress { 0% { width: 5%; } 50% { width: 85%; } 100% { width: 100%; } } /* ===================== CONTENT + SIDEBAR LAYOUT ===================== */ .content-with-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; margin-bottom: 40px; } .content-col { min-width: 0; } .content-sidebar { position: sticky; top: 80px; } @media (max-width: 1024px) { .content-with-sidebar { grid-template-columns: 1fr; gap: 16px; } .content-sidebar { position: static; order: -1; } } /* ===================== LIVE SIDEBAR ===================== */ .live-sidebar-block { background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; padding: 16px; } .live-sidebar-block .sidebar-block-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .live-sidebar-block .sidebar-block-header h3 { font-size: 14px; font-weight: 700; color: #fff; flex: 1; } .live-pulse-sm { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: livePulse 1.5s ease-in-out infinite; position: relative; flex-shrink: 0; } .live-pulse-sm::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(239, 68, 68, 0.3); animation: livePulseRing 1.5s ease-in-out infinite; } .live-count-sm { font-size: 11px; font-weight: 600; color: #ef4444; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); padding: 2px 8px; border-radius: 20px; } .live-sidebar-feed { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow: hidden; } .live-sidebar-item { display: flex; gap: 10px; padding: 9px 11px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px; transition: all 0.3s ease; animation: liveItemEnter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .live-sidebar-item:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.09); } @keyframes liveItemEnter { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .live-sb-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; } .live-sb-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; } .live-sb-top { display: flex; align-items: center; gap: 6px; } .live-sb-name { font-size: 12px; font-weight: 600; color: #f1f5f9; } .live-sb-city { font-size: 10px; color: #6b7280; background: rgba(255, 255, 255, 0.05); padding: 1px 5px; border-radius: 4px; } .live-sb-story { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #9ca3af; } .live-sb-story svg { color: #6366f1; flex-shrink: 0; } .live-sb-story span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .live-sb-progress { height: 2px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; } .live-sb-bar { height: 100%; width: 30%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 2px; animation: liveProgress 8s ease-in-out infinite; } /* ===================== HOME MAIN ===================== */ .home-main { padding: 24px 0; flex: 1; } .category-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .category-btn { padding: 8px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; color: #9ca3af; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .category-btn:hover { color: #e5e7eb; border-color: rgba(255, 255, 255, 0.2); } .category-btn.active { color: #fff; background: var(--primary); border-color: var(--primary); } .story-section { margin-bottom: 32px; } .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .section-title-wrap { display: flex; align-items: center; gap: 12px; } .section-title-wrap svg { color: var(--primary); } .section-title-wrap h2 { font-size: 20px; font-weight: 700; color: #fff; } .section-viewall { display: inline-flex; align-items: center; gap: 4px; color: #a5b4fc; font-size: 13px; font-weight: 600; text-decoration: none; transition: color 0.2s ease; } .section-viewall:hover { color: #c7d2fe; } .story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 20px; } .author-header { display: flex; gap: 20px; align-items: flex-start; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 20px; margin-bottom: 24px; } .author-avatar-wrap { flex-shrink: 0; } .author-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.1); } .author-avatar-placeholder { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; } .author-info { flex: 1; min-width: 0; } .author-name { font-size: 22px; font-weight: 700; color: #f8fafc; margin-bottom: 10px; } .author-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .author-stat { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); padding: 6px 10px; border-radius: 999px; font-size: 13px; } .author-description { color: #cbd5e1; font-size: 14px; line-height: 1.7; margin-bottom: 10px; } .author-source-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: none; } .author-source-link:hover { text-decoration: underline; } @media (max-width: 640px) { .story-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .story-card { position: relative; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); transition: all 0.3s ease; } .story-card:hover { transform: translateY(-4px); border-color: rgba(99, 102, 241, 0.35); box-shadow: 0 8px 30px rgba(99, 102, 241, 0.18); } .story-cover-link { display: block; text-decoration: none; } .story-cover-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 10px; } .story-cover-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .story-card:hover .story-cover-img { transform: scale(1.05); } /* Rating & Episodes chips — bottom of cover image */ .cover-stats { position: absolute; bottom: 8px; left: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; z-index: 5; pointer-events: none; } .cover-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cover-chip--rating { background: rgba(0, 0, 0, 0.75); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } .cover-chip--eps { background: rgba(0, 0, 0, 0.75); color: #c4b5fd; border: 1px solid rgba(167, 139, 250, 0.3); } .cover-chip--listeners { background: rgba(0, 0, 0, 0.75); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); } .cover-chip--listeners .listener-count { font-size: 10px; font-weight: 700; } .badge-full, .badge-new { position: absolute; top: 8px; right: 8px; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 800; z-index: 6; text-transform: uppercase; letter-spacing: 0.3px; } .badge-full { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; } .badge-new { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; } .source-badge { position: absolute; bottom: 8px; right: 8px; padding: 2px 7px; border-radius: 20px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); color: #fff; font-size: 10px; font-weight: 700; z-index: 6; border: 1px solid rgba(255, 255, 255, 0.15); } .source-audio { bottom: 8px; left: 8px; right: auto; background: rgba(79, 70, 229, 0.85); } .story-cover-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .story-card:hover .story-cover-overlay { opacity: 1; } .play-btn { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); display: flex; align-items: center; justify-content: center; color: #fff; transform: scale(0.8); transition: transform 0.3s ease; } .story-card:hover .play-btn { transform: scale(1); } .story-info { padding: 10px 2px 2px; } .story-card-title { font-size: 13px; font-weight: 600; color: #e5e7eb; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .story-card:hover .story-card-title { color: var(--primary); } .story-meta { display: flex; align-items: center; gap: 12px; } .story-rating, .story-eps { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #94a3b8; } .story-rating svg { color: #fbbf24; } /* Pagination */ .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 32px; } .page-btn { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: #9ca3af; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.2s ease; } .page-btn:hover { border-color: rgba(99, 102, 241, 0.5); color: #e5e7eb; } .page-btn.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-color: transparent; color: #fff; } .empty-state { text-align: center; padding: 60px 20px; color: #6b7280; } .empty-state svg { margin-bottom: 16px; opacity: 0.5; } .empty-state h3 { color: #e5e7eb; margin-bottom: 8px; } .empty-state p { font-size: 14px; } /* ===================== RELATED CATEGORIES (Internal Links) ===================== */ .related-categories { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .related-title { font-size: 14px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } .related-links { display: flex; flex-wrap: wrap; gap: 8px; } .related-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 20px; color: #a5b4fc; font-size: 13px; text-decoration: none; transition: all 0.2s; } .related-chip:hover { background: rgba(99, 102, 241, 0.2); border-color: rgba(99, 102, 241, 0.4); color: #c7d2fe; transform: translateY(-1px); } .related-chip svg { flex-shrink: 0; } /* ===================== LIST BANNER ===================== */ .list-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); border-radius: 8px; color: #6ee7b7; font-size: 14px; margin-bottom: 16px; } .list-banner svg { flex-shrink: 0; } /* ===================== SIDEBAR BLOCKS ===================== */ .sidebar-block { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 20px; } .sidebar-block-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-block-header svg { color: var(--primary); } .sidebar-block-header h3 { font-size: 16px; font-weight: 700; color: #fff; } .ranking-list { display: flex; flex-direction: column; gap: 12px; } .ranking-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; text-decoration: none; transition: all 0.2s ease; } .ranking-item:hover { background: rgba(255, 255, 255, 0.05); } .ranking-num { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: #9ca3af; font-size: 12px; font-weight: 700; flex-shrink: 0; } .ranking-num.top-1 { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); color: #fff; } .ranking-num.top-2 { background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%); color: #fff; } .ranking-num.top-3 { background: linear-gradient(135deg, #b45309 0%, #78350f 100%); color: #fff; } .ranking-cover { width: 44px; height: 58px; border-radius: 8px; object-fit: cover; flex-shrink: 0; } .ranking-info { min-width: 0; } .ranking-info h4 { font-size: 14px; font-weight: 600; color: #e5e7eb; line-height: 1.4; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ranking-info span { font-size: 12px; color: #6b7280; } /* ===================== FOOTER ===================== */ .site-footer { padding: 48px 0 24px; color: #9ca3af; font-size: 13px; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 40px; background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0) 100%), rgba(15, 15, 26, 0.4); } .footer-main { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 28px; text-align: left; } .footer-heading { color: #f1f5f9; font-size: 13px; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.4px; } .footer-legal { margin-bottom: 8px; } .footer-legal p { margin: 4px 0; } .footer-disclaimer { color: #6b7280; font-size: 12px; line-height: 1.7; margin-top: 8px; } .footer-made { margin-top: 14px; font-size: 12px; color: #6b7280; } @media (max-width: 1024px) { .footer-main { grid-template-columns: 1fr 1fr; gap: 24px; } } @media (max-width: 640px) { .site-footer { padding: 32px 0 80px; } .footer-main { grid-template-columns: 1fr; gap: 22px; } } .footer-brand { display: flex; flex-direction: column; gap: 12px; } .footer-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; } .footer-logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; } .footer-desc { color: #cbd5e1; font-size: 14px; line-height: 1.7; } .footer-meta { color: #9ca3af; font-size: 13px; line-height: 1.6; } .social-links { display: flex; gap: 10px; flex-wrap: wrap; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #e5e7eb; text-decoration: none; transition: all 0.2s ease; } .social-link:hover { border-color: rgba(99, 102, 241, 0.5); color: #fff; transform: translateY(-1px); } .footer-links ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-links a { color: #9ca3af; text-decoration: none; font-size: 14px; transition: color 0.2s ease; } .footer-links a:hover { color: #fff; } .footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.07); color: #6b7280; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer-copy { margin: 0; color: #cbd5e1; font-weight: 500; } .footer-made { margin: 0; font-size: 12px; } .toast { position: fixed; right: 16px; bottom: 16px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: rgba(15, 15, 26, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); color: #e5e7eb; font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(10px); transition: all 0.3s ease; backdrop-filter: blur(10px); } .toast.show { opacity: 1; transform: translateY(0); } .toast.success { border-color: rgba(16, 185, 129, 0.4); color: #6ee7b7; } .toast.error { border-color: rgba(239, 68, 68, 0.4); color: #fca5a5; } /* ===================== DETAIL PAGE ===================== */ .detail-main { padding: 24px 0 120px; flex: 1; } .detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; margin-top: 24px; } .detail-col-main { min-width: 0; } .detail-col-sidebar { min-width: 0; } @media (max-width: 1024px) { .detail-grid { grid-template-columns: 1fr; } .detail-col-sidebar { display: none; } } /* Hero */ .story-hero-section { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); } .story-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(18px) brightness(0.55); transform: scale(1.05); } .story-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,15,26,0.95) 0%, rgba(15,15,26,0.45) 60%, rgba(15,15,26,0.25) 100%); } .story-hero-inner { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 24px; z-index: 2; } @media (max-width: 768px) { .story-hero-inner { grid-template-columns: 1fr; } } .story-cover-wrap { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 3/4; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .story-cover-img { width: 100%; height: 100%; object-fit: cover; } .cover-play-btn { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,0.2); transition: background 0.2s ease; } .cover-play-btn:hover { background: rgba(0,0,0,0.35); } .story-meta-wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cat-tags { display: flex; flex-wrap: wrap; gap: 8px; } .cat-tag { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #e5e7eb; font-size: 13px; font-weight: 500; } .cat-tag-more { background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.2); cursor: default; } .story-title { font-size: 28px; font-weight: 800; color: #fff; line-height: 1.25; } .story-author { display: inline-flex; align-items: center; gap: 8px; color: #cbd5e1; font-size: 14px; } .story-info-right { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .info-right-item { padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; } .info-right-item-full { grid-column: 1 / -1; } .info-right-label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 6px; font-weight: 500; } .info-right-value { display: block; font-size: 14px; color: #f1f5f9; font-weight: 600; word-break: break-word; } .status-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .status-badge.ongoing { background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.35); } .status-badge.completed { background: rgba(16,185,129,0.15); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.35); } .info-right-tags { display: flex; flex-wrap: wrap; gap: 8px; } .info-right-tag { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; font-size: 12px; font-weight: 500; } .cat-link { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; font-size: 12px; font-weight: 500; text-decoration: none; margin: 0 4px 4px 0; } .cat-link:hover { color: #fff; border-color: rgba(255,255,255,0.25); } .story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); color: #e5e7eb; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .btn:hover { border-color: rgba(99,102,241,0.45); transform: translateY(-1px); } .btn-play { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-color: transparent; color: #fff; } .btn-play:hover { box-shadow: 0 10px 30px rgba(99,102,241,0.35); } .btn-play-large { padding: 14px 22px; font-size: 15px; border-radius: 16px; } .btn-outline { background: rgba(255,255,255,0.05); } .btn-sm { padding: 8px 12px; font-size: 13px; border-radius: 10px; } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-color: transparent; color: #fff; } /* Blocks */ .detail-block { margin-bottom: 24px; } .detail-block-header { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #f1f5f9; } .detail-block-header h2 { font-size: 18px; font-weight: 700; } .detail-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; } .desc-text { color: #cbd5e1; font-size: 14px; line-height: 1.7; overflow: hidden; } .vpn-notice-detail { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; border-radius: 8px; padding: 14px; margin-bottom: 14px; line-height: 1.7; font-size: 15px; } .text-link { margin-top: 10px; color: var(--primary); font-size: 13px; font-weight: 600; } /* Episodes */ .server-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .server-label { color: #94a3b8; font-size: 13px; font-weight: 600; } .server-btns { display: inline-flex; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; } .server-btn { padding: 8px 12px; color: #9ca3af; font-size: 13px; font-weight: 600; background: transparent; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .server-btn.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; } .episodes-wrap { display: flex; flex-direction: column; gap: 8px; } .episodes-grid { display: grid; grid-template-columns: 1fr; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 6px; } .ep-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; cursor: pointer; transition: all 0.2s ease; } .ep-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(99,102,241,0.35); } .ep-item.active { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.45); } .ep-play { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: inline-flex; align-items: center; justify-content: center; color: #e5e7eb; flex-shrink: 0; } .ep-info { flex: 1; min-width: 0; } .ep-title { font-size: 14px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ep-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #94a3b8; font-size: 12px; } .ep-dur { display: inline-flex; align-items: center; gap: 4px; } .ep-actions { flex-shrink: 0; } .ep-btn { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .ep-btn:hover { border-color: rgba(99,102,241,0.45); color: #fff; } .ep-count-badge { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; font-size: 12px; font-weight: 700; } /* Episode cards */ .ep-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; cursor: pointer; transition: all 0.2s ease; } .ep-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(99,102,241,0.35); transform: translateY(-1px); } .ep-card.active { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.45); } .ep-card-num { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: inline-flex; align-items: center; justify-content: center; color: #e5e7eb; font-size: 13px; font-weight: 700; flex-shrink: 0; } .ep-card.active .ep-card-num { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-color: transparent; color: #fff; } .ep-card-body { flex: 1; min-width: 0; } .ep-card-title { font-size: 14px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ep-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; color: #94a3b8; font-size: 12px; } .ep-card-dl { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; flex-shrink: 0; } .ep-card-dl:hover { border-color: rgba(99,102,241,0.45); color: #fff; } /* Comments */ .comment-form { display: flex; gap: 12px; margin-bottom: 18px; } .comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .comment-input-wrap { flex: 1; min-width: 0; } .comment-input { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #f1f5f9; resize: vertical; font-family: inherit; } .comment-form-actions { display: flex; justify-content: flex-end; margin-top: 8px; } .comments-list { display: flex; flex-direction: column; gap: 12px; } .comment-empty { text-align: center; padding: 28px 10px; color: #64748b; } .comment-empty svg { opacity: 0.6; margin-bottom: 10px; } .comment-empty p { font-size: 14px; } .comment-item { display: flex; gap: 12px; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; } .comment-avatar-sm { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #e5e7eb; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .comment-body { flex: 1; min-width: 0; } .comment-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .comment-author { font-size: 13px; font-weight: 700; color: #f1f5f9; } .comment-time { font-size: 12px; color: #64748b; } .comment-content { font-size: 14px; color: #cbd5e1; line-height: 1.6; word-break: break-word; } .comment-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .comment-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: #cbd5e1; font-size: 12px; font-weight: 600; } .comment-action-btn:hover { border-color: rgba(99,102,241,0.4); color: #fff; } /* Sidebar related */ .sidebar-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; } .sidebar-card-header { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: #f1f5f9; } .sidebar-card-header svg { color: var(--primary); } .sidebar-card-header h3 { font-size: 16px; font-weight: 700; } .related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .related-card { text-decoration: none; color: inherit; } .related-cover-wrap { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3/4; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); } .related-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .related-card:hover .related-cover { transform: scale(1.05); } .related-overlay { position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.2s ease; } .related-card:hover .related-overlay { opacity: 1; } .related-info { padding: 10px 2px 0; } .related-title { font-size: 13px; font-weight: 600; color: #e5e7eb; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .related-meta { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: #64748b; font-size: 12px; } /* Audio player */ .audio-player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(15, 15, 26, 0.92); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,0.08); padding: 14px 0; } .player-inner { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 18px; align-items: center; } .player-mobile-controls { display: none; } @media (max-width: 900px) { .player-inner { grid-template-columns: 1fr; gap: 12px; } .player-mobile-controls { display: flex; flex-direction: column; gap: 10px; } } .player-track-info { display: flex; align-items: center; gap: 14px; min-width: 0; } .player-cover-wrap { position: relative; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex-shrink: 0; } .player-cover { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .player-cover.spinning { animation: coverSpin 20s linear infinite; } @keyframes coverSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .player-cover-wrap.playing { box-shadow: 0 0 20px 4px rgba(139, 92, 246, 0.4), 0 0 40px 8px rgba(139, 92, 246, 0.15); } .player-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 8px; background: rgba(0,0,0,0.35); opacity: 0; } .player-bars.active { opacity: 1; } .player-bars span { width: 3px; background: linear-gradient(to top, var(--primary), var(--secondary)); border-radius: 3px; animation: barBounce 1s ease-in-out infinite; } .player-bars span:nth-child(2) { animation-delay: 0.15s; } .player-bars span:nth-child(3) { animation-delay: 0.3s; } @keyframes barBounce { 0%, 100% { height: 6px; } 50% { height: 16px; } } /* Loading spinner for buffering/retry */ .player-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); border-radius: inherit; z-index: 2; } .player-loading::after { content: ''; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.2); border-top-color: #fff; border-radius: 50%; animation: spinLoader 0.8s linear infinite; } @keyframes spinLoader { to { transform: rotate(360deg); } } /* Retry feedback toast */ .retry-toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: rgba(30, 20, 60, 0.95); border: 1px solid rgba(139, 92, 246, 0.5); color: #e5e7eb; padding: 10px 20px; border-radius: 12px; font-size: 13px; font-weight: 600; z-index: 9999; display: flex; align-items: center; gap: 8px; backdrop-filter: blur(8px); animation: slideDownFade 0.3s ease; } @keyframes slideDownFade { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .player-text { min-width: 0; } .player-track-title { font-size: 14px; font-weight: 700; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-track-story { font-size: 12px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-center { min-width: 0; } .player-ctrls { display: flex; align-items: center; justify-content: center; gap: 10px; } .ctrl-btn { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .ctrl-btn:hover { border-color: rgba(99,102,241,0.45); color: #fff; } .ctrl-btn.active { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-color: transparent; color: #fff; } .ctrl-btn-main { width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(99,102,241,0.35); } .player-seekbar { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .time-label { font-size: 12px; color: #94a3b8; min-width: 38px; text-align: center; } .seekbar-track { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 999px; position: relative; overflow: hidden; } .seekbar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 999px; transition: width 0.1s linear; box-shadow: 0 0 8px 2px rgba(139, 92, 246, 0.3); } .seekbar-input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .player-extras { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .extra-btn { height: 40px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; transition: all 0.2s ease; } .extra-btn:hover { border-color: rgba(99,102,241,0.45); color: #fff; } .vol-wrap { display: inline-flex; align-items: center; gap: 8px; } .vol-slider { width: 90px; accent-color: var(--primary); } .hidden { display: none !important; } .repeat-one-badge { position: absolute; top: -4px; right: -4px; width: 18px; height: 18px; border-radius: 50%; background: #ef4444; color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #0f0f1a; } /* Playlist panel */ .playlist-panel { position: fixed; right: 0; top: 0; bottom: 0; width: 360px; max-width: 90vw; background: rgba(22,22,39,0.97); backdrop-filter: blur(14px); border-left: 1px solid rgba(255,255,255,0.08); z-index: 70; display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,0.5); } .playlist-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); } .playlist-header h3 { color: #f1f5f9; font-size: 16px; font-weight: 700; } .playlist-close { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; display: inline-flex; align-items: center; justify-content: center; } .playlist-info { display: flex; gap: 12px; padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.08); } .playlist-cover { width: 52px; height: 72px; border-radius: 10px; object-fit: cover; } .playlist-meta { display: flex; flex-direction: column; justify-content: center; gap: 4px; } .playlist-title { color: #f1f5f9; font-weight: 700; font-size: 14px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .playlist-count { color: #94a3b8; font-size: 12px; font-weight: 600; } .playlist-tracks { flex: 1; overflow-y: auto; padding: 10px; } .playlist-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; cursor: pointer; transition: all 0.2s ease; } .playlist-item:hover { background: rgba(255,255,255,0.05); } .playlist-item.active { background: rgba(99,102,241,0.12); } .playlist-item-num { width: 28px; color: #94a3b8; font-size: 13px; font-weight: 700; text-align: center; flex-shrink: 0; } .playlist-item-info { flex: 1; min-width: 0; } .playlist-item-title { color: #e5e7eb; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .playlist-item-play { color: #e5e7eb; flex-shrink: 0; } /* YouTube player */ .yt-player-container { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,0.8); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .yt-player-inner { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16/9; background: #000; border-radius: 16px; overflow: hidden; } .yt-close-btn { position: absolute; top: 10px; right: 10px; z-index: 10; width: 40px; height: 40px; border-radius: 10px; background: rgba(0,0,0,0.6); color: #fff; border: 1px solid rgba(255,255,255,0.15); display: inline-flex; align-items: center; justify-content: center; } #ytPlayer { width: 100%; height: 100%; } /* Sleep dropdown */ .sleep-timer-wrap { position: relative; } .sleep-timer-dropdown { position: absolute; right: 0; bottom: 48px; width: 220px; background: rgba(22,22,39,0.98); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .sleep-timer-title { color: #94a3b8; font-size: 12px; font-weight: 700; padding: 6px 10px; } .sleep-timer-option { width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; background: transparent; border: none; color: #e5e7eb; font-size: 13px; font-weight: 600; } .sleep-timer-option:hover { background: rgba(255,255,255,0.05); } .sleep-cancel { color: #fca5a5; } /* Utilities */ .light body, body.light { background-color: #f3f4f6; color: #111827; } .light .detail-card, body.light .detail-card, body.light .ep-item, body.light .ep-item, body.light .comment-item, body.light .comment-item, body.light .sidebar-card, body.light .sidebar-card, body.light .related-cover-wrap, body.light .related-cover-wrap { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); } .light .story-title, body.light .story-title, .light .player-track-title, body.light .player-track-title { color: #111827; } .light .player-track-story, body.light .player-track-story, .light .ep-title, body.light .ep-title { color: #374151; } .light .audio-player, body.light .audio-player { background: rgba(255,255,255,0.82); border-top-color: rgba(0,0,0,0.08); } /* Breadcrumb */ .detail-breadcrumb { padding: 12px 0; } .detail-breadcrumb ol { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 13px; color: #94a3b8; } .detail-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; } .detail-breadcrumb li + li::before { content: '/'; color: #64748b; } .detail-breadcrumb a { color: #cbd5e1; text-decoration: none; } .detail-breadcrumb a:hover { color: #fff; } .detail-breadcrumb [aria-current="page"] { color: #f1f5f9; font-weight: 600; } /* Rating */ .story-rating-wrap { display: inline-flex; align-items: center; gap: 10px; margin-top: 4px; } .story-rating-stars { display: inline-flex; align-items: center; gap: 4px; color: #fbbf24; } .star-btn { background: transparent; border: none; padding: 2px; cursor: pointer; color: #fbbf24; display: inline-flex; align-items: center; justify-content: center; transition: transform 0.15s ease; } .star-btn:hover { transform: scale(1.1); } .star-btn:active { transform: scale(0.95); } .star-btn:not(.active) { color: rgba(255,255,255,0.25); } .story-rating-value { font-size: 14px; font-weight: 700; color: #f1f5f9; } .story-rating-count { font-size: 12px; color: #94a3b8; } /* ===================== AUTHORS & NARRATORS ===================== */ .page-header { padding: 28px 0 20px; margin-bottom: 8px; } .page-header-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .page-title { font-size: 26px; font-weight: 800; color: #f8fafc; margin-bottom: 6px; letter-spacing: -0.2px; } .page-subtitle { font-size: 14px; color: #6b7280; } .page-header-action { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #e5e7eb; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.2s ease; } .page-header-action:hover { border-color: rgba(99, 102, 241, 0.5); color: #fff; transform: translateY(-1px); } .authors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .author-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 16px; text-decoration: none; transition: all 0.25s ease; position: relative; overflow: hidden; } .author-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.04)); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .author-card:hover { border-color: rgba(99, 102, 241, 0.35); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(99, 102, 241, 0.08) inset; } .author-card:hover::before { opacity: 1; } .author-card .author-avatar-wrap { position: relative; flex-shrink: 0; } .author-card .author-avatar { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); } .author-card .author-avatar-placeholder { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.25); } .author-card .author-info { flex: 1; min-width: 0; position: relative; z-index: 1; } .author-card .author-name { font-size: 13px; font-weight: 700; color: #f1f5f9; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .author-card:hover .author-name { color: #fff; } .author-card .author-meta { display: flex; align-items: center; gap: 8px; } .author-card .author-meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; font-weight: 500; } .author-card .author-meta-item svg { flex-shrink: 0; opacity: 0.8; } .author-card .author-badge { margin-left: auto; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #94a3b8; font-size: 11px; font-weight: 700; flex-shrink: 0; } /* Author / Narrator Detail Header */ .author-header .author-avatar-wrap { position: relative; flex-shrink: 0; } .author-header .author-avatar { width: 96px; height: 96px; border-radius: 20px; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.15); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); } .author-header .author-avatar-placeholder { width: 96px; height: 96px; border-radius: 20px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 800; border: 2px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 50px rgba(99, 102, 241, 0.3); } .author-header .author-info { flex: 1; min-width: 0; position: relative; z-index: 1; } .author-header .author-name { font-size: 24px; font-weight: 800; color: #f8fafc; margin-bottom: 12px; letter-spacing: -0.2px; } .author-header .author-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .author-header .author-stat { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); } .author-header .author-stat svg { opacity: 0.9; } .author-header .author-description { color: #cbd5e1; font-size: 14px; line-height: 1.7; margin-bottom: 12px; } .author-header .author-source-link { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: none; padding: 6px 12px; border-radius: 10px; background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); transition: all 0.2s ease; } .author-header .author-source-link:hover { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.35); color: #fff; } .author-header .author-section-title { font-size: 18px; font-weight: 700; color: #f1f5f9; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; } .author-header .author-section-title svg { color: var(--primary); } /* Author / Narrator list variants */ .authors-grid--list { grid-template-columns: 1fr; } .authors-grid--list .author-card { padding: 12px 16px; } .authors-grid--list .author-avatar, .authors-grid--list .author-avatar-placeholder { width: 48px; height: 48px; border-radius: 14px; font-size: 18px; } /* Mobile */ @media (max-width: 640px) { .authors-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .author-card { padding: 12px; gap: 10px; border-radius: 14px; } .author-avatar, .author-avatar-placeholder { width: 44px; height: 44px; border-radius: 12px; font-size: 16px; } .author-name { font-size: 13px; } .author-meta-item { font-size: 11px; } .author-header { flex-direction: column; align-items: center; text-align: center; padding: 20px; gap: 16px; } .author-avatar, .author-avatar-placeholder { width: 80px; height: 80px; border-radius: 18px; font-size: 30px; } .author-name { font-size: 20px; } .author-stats { justify-content: center; } .page-title { font-size: 22px; } .page-header-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 380px) { .authors-grid { grid-template-columns: 1fr; } } .list-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding: 12px 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; } .filter-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filter-label { font-size: 13px; color: #6b7280; font-weight: 500; } .filter-btn { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: #9ca3af; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); text-decoration: none; transition: all 0.2s ease; } .filter-btn:hover { color: #e5e7eb; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); } .filter-btn.active { color: #fff; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-color: transparent; } .clear-tag { margin-left: auto; font-size: 13px; color: #6b7280; text-decoration: none; padding: 6px 12px; border-radius: 8px; transition: all 0.2s ease; } .clear-tag:hover { color: #e5e7eb; background: rgba(255, 255, 255, 0.05); } .search-page-form { margin-bottom: 32px; } .search-form-large .search-input { height: 48px; font-size: 15px; } .search-form-large .search-btn { height: 48px; padding: 0 24px; font-size: 15px; } .tags-section { margin-bottom: 40px; } .tags-section-title { font-size: 18px; font-weight: 600; color: #e5e7eb; margin-bottom: 16px; } .tags-cloud { display: flex; flex-wrap: wrap; gap: 10px; } .tag-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: #cbd5e1; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; transition: all 0.2s ease; } .tag-chip:hover { color: #fff; background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.4); } .tag-count { font-size: 11px; color: #6b7280; background: rgba(255, 255, 255, 0.06); padding: 2px 6px; border-radius: 10px; } .tag-chip:hover .tag-count { color: #a5b4fc; } @media (max-width: 640px) { .page-title { font-size: 22px; } .list-filters { flex-direction: column; align-items: flex-start; } .clear-tag { margin-left: 0; } } /* ===================== MOBILE OPTIMIZATION ===================== */ @media (max-width: 768px) { /* Hide sidebar on mobile - BXH and live feed not needed */ .content-sidebar { display: none !important; } .content-with-sidebar { display: block; } /* Hide hero sidebar */ .hero-sidebar { display: none !important; } .hero-container { flex-direction: column; } .hero-slider-wrap { width: 100%; } /* Header */ .logo-text { font-size: 16px; } .header-actions .login-link { padding: 6px 10px; font-size: 12px; } .header-actions .login-link span { display: none; } /* Hero */ .hero-slider { height: 280px; } .hero-slide .hero-content { padding: 20px; } .hero-title { font-size: 20px; line-height: 1.3; } .hero-author { font-size: 12px; } .hero-meta { gap: 12px; flex-wrap: wrap; } .hero-badge { font-size: 10px; padding: 4px 8px; } .hero-actions { flex-wrap: wrap; } .btn-primary, .btn { padding: 10px 16px; font-size: 13px; } /* Quick Links */ .hero-quick-links { grid-template-columns: 1fr 1fr; gap: 6px; } .quick-link-card { padding: 8px 10px; } .quick-link-title { font-size: 12px; } .quick-link-sub { font-size: 10px; } /* Live Section */ .live-feed { grid-template-columns: 1fr; } /* Story Grid */ .story-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .story-card { border-radius: 8px; } .story-cover-wrap { border-radius: 8px; } .story-info { padding: 8px 2px 4px; } .story-card-title { font-size: 12px; -webkit-line-clamp: 2; } .cover-chip { font-size: 9px; padding: 2px 5px; } /* Section Headers */ .section-title-wrap h2 { font-size: 16px; } .section-viewall { font-size: 12px; } /* Pagination */ .pagination { margin-top: 20px; } .page-btn { min-width: 36px; height: 36px; font-size: 13px; } /* Detail Page */ .detail-grid { grid-template-columns: 1fr; gap: 16px; } .detail-col-sidebar { display: none; } .story-hero-inner { padding: 16px; } .story-title { font-size: 20px; } .cat-tag { font-size: 11px; padding: 4px 10px; } .story-info-right { grid-template-columns: 1fr; } .info-right-item { padding: 10px 12px; } .story-actions { flex-direction: column; } .story-actions .btn { width: 100%; justify-content: center; } /* Episodes */ .episodes-grid { max-height: 50vh; } .ep-item { padding: 12px; } .ep-title { font-size: 13px; } /* Sidebar Related */ .related-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; } .related-title { font-size: 11px; -webkit-line-clamp: 2; } /* Audio Player */ .audio-player { padding: 10px 0; } .player-inner { grid-template-columns: 1fr; gap: 10px; } .player-track-info { gap: 10px; } .player-cover-wrap { width: 44px; height: 44px; } .player-track-title { font-size: 13px; } .player-track-story { font-size: 11px; } .player-center { min-width: 0; } .player-extras { gap: 8px; flex-wrap: wrap; } .extra-btn { height: 36px; padding: 0 10px; font-size: 12px; } .extra-btn span { display: none; } .vol-wrap { display: none; } .player-mobile-controls { display: flex; flex-direction: column; gap: 10px; } .player-center { display: none; } .player-extras { display: none; } .player-mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .player-mobile-actions { display: flex; align-items: center; gap: 8px; } .player-mobile-controls .player-seekbar { margin-top: 2px; } .player-mobile-actions--row { flex-wrap: wrap; justify-content: space-between; } .player-mobile-controls .ctrl-btn { width: 36px; height: 36px; border-radius: 10px; } .player-mobile-controls .ctrl-btn-main { width: 48px; height: 48px; border-radius: 14px; } .sleep-timer-dropdown-mobile { background: rgba(22,22,39,0.98); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .sleep-timer-dropdown-mobile .sleep-timer-title { color: #94a3b8; font-size: 12px; font-weight: 700; padding: 6px 10px; } .sleep-timer-dropdown-mobile .sleep-timer-option { width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; background: transparent; border: none; color: #e5e7eb; font-size: 13px; font-weight: 600; } .sleep-timer-dropdown-mobile .sleep-timer-option:hover { background: rgba(255,255,255,0.05); } .sleep-timer-dropdown-mobile .sleep-cancel { color: #fca5a5; } .yt-inline-wrap { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; } .yt-inline-wrap.hidden { display: none !important; } #ytInlinePlayer { width: 100%; height: 100%; } /* Sidebar Blocks */ .sidebar-block { padding: 14px; } .sidebar-block-header { padding-bottom: 10px; margin-bottom: 12px; } .sidebar-block-header h3 { font-size: 14px; } /* Category Filter */ .category-filter { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -12px 16px; padding: 0 12px; } .category-filter::-webkit-scrollbar { display: none; } .category-btn { flex-shrink: 0; padding: 6px 12px; font-size: 12px; } /* Footer */ .site-footer { padding: 32px 0 80px; } .footer-grid { gap: 20px; } .footer-heading { font-size: 13px; } .footer-desc { font-size: 13px; } .footer-links a { font-size: 13px; } /* Breadcrumb */ .detail-breadcrumb { padding: 8px 0; } .detail-breadcrumb ol { font-size: 12px; gap: 6px; } /* Story Rating */ .story-rating-wrap { flex-wrap: wrap; } .story-rating-value { font-size: 13px; } .story-rating-count { display: none; } /* Comments */ .comment-form { flex-direction: column; gap: 8px; } .comment-avatar { width: 36px; height: 36px; } .comment-input { min-height: 80px; } /* Page Header */ .page-header { padding: 20px 0 16px; } .page-subtitle { font-size: 13px; } /* Tags Cloud */ .tags-cloud { gap: 8px; } .tag-chip { padding: 6px 12px; font-size: 12px; } } @media (max-width: 480px) { /* Even smaller screens */ .story-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .story-card-title { font-size: 11px; } .hero-slider { height: 240px; } .hero-title { font-size: 18px; } .btn-primary, .btn { padding: 10px 14px; font-size: 13px; border-radius: 10px; } .detail-block-header h2 { font-size: 16px; } .ep-card { padding: 10px 12px; } .ep-card-num { width: 36px; height: 36px; font-size: 12px; } } /* Comment login prompt */ .comment-login-prompt { display: flex; align-items: center; gap: 16px; padding: 20px; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); border-radius: 14px; text-align: left; } .comment-login-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(99,102,241,0.12); display: flex; align-items: center; justify-content: center; color: #818cf8; flex-shrink: 0; } .comment-login-text { flex: 1; } .comment-login-text p { font-size: 14px; color: #9ca3af; margin-bottom: 10px; } .comment-login-btns { display: flex; gap: 8px; } .btn-outline { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #e5e7eb; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.2s; } .btn-outline:hover { border-color: rgba(99,102,241,0.5); color: #fff; background: rgba(99,102,241,0.08); } .comment-avatar-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } /* ===================== LEGAL / PAGE CONTENT ===================== */ .page-main { padding: 28px 0 120px; } .page-card { max-width: 860px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 24px; } .page-card h1 { font-size: 26px; font-weight: 800; color: #f8fafc; margin-bottom: 16px; } .page-card h2 { font-size: 18px; font-weight: 700; color: #f1f5f9; margin: 22px 0 10px; } .page-card p { color: #cbd5e1; font-size: 15px; line-height: 1.75; margin: 10px 0; } .page-card ul, .page-card ol { padding-left: 20px; margin: 10px 0; color: #cbd5e1; font-size: 15px; line-height: 1.75; } .page-card li + li { margin-top: 6px; } .page-card a { color: var(--primary); text-decoration: none; font-weight: 600; } .page-card a:hover { text-decoration: underline; } .contact-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; } .contact-meta-item { padding: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; } .contact-meta-item strong { display: block; font-size: 12px; color: #94a3b8; font-weight: 600; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.4px; } .contact-meta-item span { display: block; color: #e5e7eb; font-size: 14px; font-weight: 600; } .contact-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .form-row { display: flex; flex-direction: column; gap: 6px; } .form-row label { font-size: 14px; font-weight: 600; color: #e5e7eb; } .form-row label span { color: #ef4444; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #f1f5f9; font-size: 14px; outline: none; transition: all 0.2s ease; font-family: inherit; } .contact-form textarea { resize: vertical; min-height: 140px; } .contact-form input:focus, .contact-form textarea:focus { border-color: rgba(99,102,241,0.5); box-shadow: 0 0 0 3px rgba(99,102,241,0.12); } .alert { padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; } .alert.success { background: rgba(16,185,129,0.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.35); } .alert.error { background: rgba(239,68,68,0.12); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); } @media (max-width: 640px) { .page-main { padding: 20px 0 100px; } .page-card { padding: 16px; border-radius: 16px; } .page-card h1 { font-size: 22px; } .page-card h2 { font-size: 17px; } .page-card p, .page-card ul, .page-card ol { font-size: 14px; } .contact-meta { grid-template-columns: 1fr; } } /* ===================== HOME SECTION: THỂ LOẠI NỔI BẬT ===================== */ .home-categories { margin-top: 36px; } .category-tabs { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 6px; } .category-tabs::-webkit-scrollbar { display: none; } .category-tab { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #e5e7eb; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: all 0.2s ease; } .category-tab:hover { border-color: rgba(99,102,241,0.5); color: #fff; background: rgba(99,102,241,0.1); } .category-tab.active { border-color: var(--primary); color: #fff; background: rgba(99,102,241,0.2); } .cat-tab-icon { font-size: 16px; line-height: 1; } /* Category Panels */ .category-panels { margin-top: 20px; } .category-panel { display: none; } .category-panel.active { display: block; } .cat-viewall-wrap { display: flex; justify-content: flex-end; margin-top: 16px; } /* ===================== HOME SECTION: ĐANG NGHE DỞ ===================== */ .listening-section { margin-top: 36px; } .listening-scroll { display: flex; gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .listening-scroll::-webkit-scrollbar { display: none; } .listening-card { flex: 0 0 180px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 12px; transition: all 0.2s ease; } .listening-card:hover { border-color: rgba(99,102,241,0.4); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.35); } .listening-cover-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: 12px; } .listening-cover { width: 100%; height: 100%; object-fit: cover; display: block; } .listening-cover-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; } .listening-card:hover .listening-cover-overlay { opacity: 1; } .listening-info { display: flex; flex-direction: column; gap: 4px; } .listening-title { font-size: 13px; font-weight: 600; color: #e5e7eb; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .listening-meta { font-size: 12px; color: #94a3b8; } @media (max-width: 640px) { .listening-card { flex: 0 0 156px; padding: 10px; } } /* ===================== PWA bars ===================== */ .pwa-install-bar, .pwa-update-bar { position: fixed; left: 16px; right: 16px; bottom: 96px; z-index: 80; background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: #fff; padding: 12px 16px; border-radius: 14px; display: flex; align-items: center; gap: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 14px; line-height: 1.4; } .pwa-update-bar { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); bottom: 160px; } .pwa-install-bar span, .pwa-update-bar span { flex: 1; } .pwa-install-btn { background: rgba(255, 255, 255, 0.95); color: #4f46e5; border: none; padding: 7px 16px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px; transition: background 0.2s; } .pwa-install-btn:hover { background: #fff; } .pwa-install-close { background: transparent; color: #fff; border: none; cursor: pointer; font-size: 22px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; opacity: 0.8; } .pwa-install-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.15); } @media (max-width: 640px) { .pwa-install-bar, .pwa-update-bar { flex-wrap: wrap; bottom: 88px; font-size: 13px; } .pwa-update-bar { bottom: 152px; } } /* ===================== History page ===================== */ .history-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } .history-tab { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .history-tab:hover { background: rgba(99, 102, 241, 0.1); border-color: rgba(99, 102, 241, 0.3); } .history-tab.active { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-color: transparent; } .history-section { margin-bottom: 32px; } .history-section .section-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; color: rgba(255, 255, 255, 0.95); display: flex; align-items: center; gap: 8px; } .history-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .history-grid .story-card .story-cover { position: relative; } .history-grid .story-cover .badge-progress { position: absolute; top: 8px; right: 8px; background: linear-gradient(135deg, #f59e0b, #ea580c); color: #fff; padding: 3px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .continue-card { display: flex; gap: 18px; padding: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(99, 102, 241, 0.25); border-radius: 16px; align-items: center; } .continue-cover { width: 110px; flex-shrink: 0; border-radius: 10px; overflow: hidden; } .continue-cover img { width: 100%; height: 150px; object-fit: cover; display: block; } .continue-info { flex: 1; min-width: 0; } .continue-info h3 { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .continue-info p { font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; } .continue-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .continue-progress .progress-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; } .continue-progress .progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width 0.4s; } .continue-progress .progress-text { font-size: 12px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } .continue-info .btn-primary { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 10px; font-weight: 600; font-size: 14px; text-decoration: none; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; } .continue-info .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); } @media (max-width: 640px) { .history-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .continue-card { flex-direction: column; align-items: stretch; } .continue-cover { width: 100%; } .continue-cover img { height: 200px; } } .muted { color: rgba(255, 255, 255, 0.55); font-size: 14px; } /* Comment pending moderation */ .comment-pending { opacity: 0.7; background: rgba(245, 158, 11, 0.06); border-left: 2px solid rgba(245, 158, 11, 0.4); } .comment-pending-badge { background: rgba(245, 158, 11, 0.18); color: #fbbf24; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 8px; } .comment-action-btn { transition: background 0.15s, color 0.15s; color: rgba(255, 255, 255, 0.6); font-weight: 500; } .comment-action-btn:hover { color: #fff; background: rgba(99, 102, 241, 0.15); } .comment-action-btn.active { color: #f472b6; } /* Star buttons — high contrast active state */ .star-btn { cursor: pointer; transition: transform 0.15s, color 0.2s; } .star-btn:hover { transform: scale(1.15); } .star-btn.active { color: #f59e0b; } /* Sidebar "Tiếp tục nghe" widget */ .sidebar-continue-body { padding: 14px 16px 16px; } .sidebar-continue-main { display: block; position: relative; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)); border: 1px solid rgba(99, 102, 241, 0.3); text-decoration: none; color: inherit; margin-bottom: 14px; transition: transform 0.2s, border-color 0.2s; } .sidebar-continue-main:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, 0.6); } .sidebar-continue-main img { width: 100%; height: 130px; object-fit: cover; display: block; } .sidebar-continue-main .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); color: #fff; opacity: 0; transition: opacity 0.2s; } .sidebar-continue-main:hover .play-overlay { opacity: 1; } .sidebar-continue-progress { padding: 8px 12px 0; } .sidebar-continue-progress .bar { height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; margin-bottom: 4px; } .sidebar-continue-progress .fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); } .sidebar-continue-progress span { font-size: 11px; color: rgba(255, 255, 255, 0.6); } .sidebar-continue-title { padding: 8px 12px 0; font-size: 14px; font-weight: 700; line-height: 1.3; color: rgba(255, 255, 255, 0.95); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sidebar-continue-meta { padding: 4px 12px 12px; font-size: 11px; color: rgba(99, 102, 241, 0.95); font-weight: 600; } .sidebar-continue-subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); margin: 12px 0 8px; font-weight: 600; } .sidebar-recent { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; margin-bottom: 6px; text-decoration: none; color: inherit; transition: background 0.15s; } .sidebar-recent:hover { background: rgba(99, 102, 241, 0.1); } .sidebar-recent img { width: 38px; height: 50px; object-fit: cover; border-radius: 6px; flex-shrink: 0; } .sidebar-recent .rec-title { flex: 1; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-recent .rec-progress { font-size: 11px; font-weight: 700; color: #f59e0b; } /* Quality dropdown (audio player) */ .quality-dropdown { position: absolute; right: 130px; bottom: 76px; background: rgba(20, 25, 40, 0.96); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 8px; min-width: 200px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); z-index: 100; } .quality-dropdown-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: rgba(255, 255, 255, 0.5); padding: 6px 12px 8px; font-weight: 600; } .quality-option { display: block; width: 100%; text-align: left; background: transparent; border: none; color: rgba(255, 255, 255, 0.85); padding: 10px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: background 0.15s; } .quality-option:hover { background: rgba(99, 102, 241, 0.2); color: #fff; } .quality-option.active { background: rgba(99, 102, 241, 0.18); color: #c7d2fe; } #qualityBtn, #qualityBtnMobile { min-width: 50px; font-weight: 700; font-size: 12px; } @media (max-width: 768px) { .quality-dropdown { right: 16px; bottom: 70px; left: auto; min-width: 180px; } } .archive-header { margin-bottom: 24px; padding: 24px; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 16px; color: #fff; } .archive-header-inner { display: flex; align-items: flex-start; gap: 20px; } .arc-icon-wrap { flex-shrink: 0; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 12px; } .arc-icon { width: 32px; height: 32px; stroke: #f39c12; } .arc-info { flex: 1; } .archive-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px 0; } .archive-desc { color: rgba(255,255,255,0.8); line-height: 1.6; } /* ===================== SEARCH AUTOCOMPLETE ===================== */ .search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; margin-top: 6px; background: rgba(22, 22, 39, 0.98); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(20px); max-height: 420px; overflow-y: auto; display: none; } .search-results.active { display: block; } .search-result-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; transition: background 0.15s ease; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: rgba(99, 102, 241, 0.12); } .search-result-cover { flex-shrink: 0; width: 40px; height: 56px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.05); } .search-result-cover img { width: 100%; height: 100%; object-fit: cover; } .search-result-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); opacity: 0.5; } .search-result-info { flex: 1; min-width: 0; } .search-result-title { font-size: 14px; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-result-meta { font-size: 12px; color: #94a3b8; margin-top: 2px; } #headerSearchWrap { position: relative; } @media (max-width: 768px) { .search-results { position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin-top: 0; border-radius: 14px 14px 0 0; max-height: 60vh; } }