*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} button,a,input,textarea,select,div{ -webkit-tap-highlight-color:transparent; } button:active,a:active{background-image:none!important;filter:none!important;outline:none!important} :root{ --bg:#080810;--glass:rgba(255,255,255,.055);--border:rgba(255,255,255,.09); --text:#fff;--muted:#9998aa;--purple:#8b4dff;--purple2:#bd70ff; --card-bg:rgba(255,255,255,.025);--radial1:rgba(116,55,255,.18);--radial2:rgba(255,55,170,.08); } /* Light theme — toggled via data-theme="light" on , set by the sun/moon button in the header. Values chosen to mirror the same glass/ purple look as dark mode, just inverted, rather than a plain white page. */ html[data-theme="light"]{ --bg:#f2f1f7;--glass:rgba(20,15,35,.045);--border:rgba(20,15,35,.09); --text:#15121f;--muted:#6b6878;--purple:#8b4dff;--purple2:#8f3fe0; --card-bg:rgba(20,15,35,.02);--radial1:rgba(116,55,255,.10);--radial2:rgba(255,55,170,.05); } body{ min-height:100vh;background: radial-gradient(circle at 80% 0%,var(--radial1),transparent 30%), radial-gradient(circle at 10% 40%,var(--radial2),transparent 28%),var(--bg); color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; padding-bottom:95px; transition:background-color .25s ease,color .25s ease; } button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} .app{max-width:650px;margin:auto;padding:18px 16px 0} .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px} .brand{font-size:23px;font-weight:800;letter-spacing:-.7px}.brand span{color:#9b55ff} .icon{width:42px;height:42px;border-radius:14px;background:var(--glass);border:1px solid var(--border);display:grid;place-items:center;font-size:21px} .top-left{display:flex;align-items:center;gap:12px} .search{width:42px;height:42px;border-radius:14px;background:var(--glass);border:1px solid var(--border);display:grid;place-items:center;font-size:20px} .hero{ position:relative;overflow:hidden;border:1px solid var(--border);border-radius:25px; min-height:215px;padding:24px;margin-bottom:25px; background:linear-gradient(110deg,rgba(70,28,110,.92),rgba(24,20,45,.65)); } .hero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 40%,rgba(174,93,255,.35),transparent 38%)} .hero>*{position:relative;z-index:1} .badge{display:inline-block;background:rgba(255,255,255,.1);border:1px solid var(--border);padding:7px 11px;border-radius:12px;font-size:12px;color:#ddd} h1{font-size:31px;margin:12px 0 7px;letter-spacing:-1px}.hero p{color:#c0bdca;max-width:270px;line-height:1.5} .play{margin-top:18px;background:linear-gradient(135deg,#8641ff,#bd5cff);padding:11px 18px;border-radius:14px;font-weight:700;box-shadow:0 8px 25px rgba(133,57,255,.28)} .hero-art{ display:none;position:absolute;right:20px;top:50%;transform:translateY(-50%); width:104px;height:104px;border-radius:20px;overflow:hidden; background:linear-gradient(145deg,#c56a8f,#4e2e88); place-items:center;font-size:36px; border:1px solid rgba(255,255,255,.18); box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.16); } .hero.is-playing .hero-art{display:grid} .hero.is-playing h1,.hero.is-playing p{max-width:calc(100% - 130px)} .hero.is-playing p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px} .quick button{padding:14px 5px;border-radius:18px;background:var(--glass);border:1px solid var(--border);font-size:12px;color:#d8d5df} .quick i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;margin:0 auto 8px;font-style:normal;font-size:20px;background:rgba(139,77,255,.13)} .section-head{display:flex;justify-content:space-between;align-items:center;margin:0 2px 13px} .section-head h2{font-size:19px}.see{font-size:13px;color:#a866ff} .cards{display:flex;gap:12px;overflow:auto;padding-bottom:5px;margin-bottom:27px;scrollbar-width:none}.cards::-webkit-scrollbar{display:none} .card{flex:0 0 135px;background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:8px;overflow:hidden} .cover{height:119px;border-radius:13px;display:grid;place-items:end end;padding:8px;font-size:17px} .c1{background:linear-gradient(145deg,#c56a8f,#4e2e88)}.c2{background:linear-gradient(145deg,#162e5e,#5363ba)}.c3{background:linear-gradient(145deg,#d84bc0,#39216c)}.c4{background:linear-gradient(145deg,#806044,#202536)} .card b{display:block;margin-top:9px;font-size:14px}.card small{display:block;color:var(--muted);margin-top:3px} .tracks{background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:20px;padding:5px} .track{display:flex;align-items:center;gap:11px;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.055)} .track:last-child{border-bottom:0}.thumb{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;font-size:18px} .track-info{min-width:0;flex:1}.track-info b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-info span{font-size:12px;color:var(--muted)} .more{font-size:20px;color:#aaa;background:transparent;border:0;min-width:44px;min-height:44px;padding:0 8px;position:relative;z-index:5;cursor:pointer;-webkit-tap-highlight-color:transparent} .player{ position:fixed;z-index:20;left:10px;right:10px;bottom:10px;max-width:630px;margin:auto; background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03) 40%,rgba(20,16,32,.55)); backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%); border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:10px 12px; box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.03); position:fixed; } .player-main{display:flex;align-items:center;gap:10px} .pcover{ width:48px;height:48px;border-radius:13px;background:linear-gradient(145deg,#c56a8f,#4e2e88); display:grid;place-items:center;border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2); } .pinfo{flex:1;min-width:0}.pinfo b{font-size:13px;display:block}.pinfo span{font-size:11px;color:var(--muted)} .pbtn{ width:40px;height:40px;border-radius:50%; background:linear-gradient(160deg,#fff,#e8e6ef);color:#111;display:grid;place-items:center;font-size:16px; box-shadow:0 6px 16px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.5); } .progress{height:4px;background:rgba(255,255,255,.10);border-radius:10px;margin:9px 4px 0;overflow:hidden;border:1px solid rgba(255,255,255,.06)} .progress i{display:block;width:38%;height:100%;background:linear-gradient(90deg,#8845ff,#bd68ff);box-shadow:0 0 8px rgba(189,104,255,.6)} .nav{display:flex;justify-content:space-around;margin-top:16px;padding:8px 0 2px;color:#8f8d9a} .nav button{font-size:11px;display:flex;flex-direction:column;align-items:center;gap:5px}.nav b{font-size:20px;font-weight:400}.nav .active{color:#a55cff} @media(min-width:700px){.app{padding-top:28px}.player{bottom:18px}.quick{gap:14px}} /* ===== Desktop / PC layout ===== Bố cục gốc là mobile-first, bó hẹp trong .app{max-width:650px}. Trên màn hình PC rộng, nới container ra để dùng hết không gian ngang thay vì để một cột hẹp trôi nổi giữa nền trống — đồng thời nới sheet Now Playing thành khung nổi (không còn full-bleed sát viền màn hình). */ @media(min-width:1000px){ body{padding-bottom:110px} .app{max-width:1180px;padding:32px 40px 0} .top{margin-bottom:28px} /* Chia thành lưới 2 cột: hero bên trái, thư viện nhạc bên phải — tránh việc thư viện bị đẩy xuống dưới một khối hero cao, để trống nhiều khoảng thừa hai bên như trên màn hình rộng. */ .app{display:grid;grid-template-columns:1fr;grid-template-areas:"top" "hero" "sectionhead" "tracks"} .app{grid-template-columns:minmax(0,420px) 1fr;column-gap:32px;align-items:start} .app{grid-template-areas:"top top" "hero tracks-wrap" "hero tracks-wrap"} .top{grid-area:top} /* Hero co theo nội dung thay vì chiều cao cố định 420px — trước đây với bài hát không có cover, phần dưới hero để trống rất nhiều vì nội dung (badge + tiêu đề + nút) chỉ chiếm một phần nhỏ của khối cao 420px. */ .hero{grid-area:hero;padding:30px 32px;display:flex;flex-direction:column;justify-content:center; gap:2px;position:sticky;top:32px;min-height:260px} .hero h1{font-size:28px} .hero p{max-width:280px} /* Ảnh bìa làm nền lớn phía sau góc dưới-phải thay vì ô nhỏ 120px trơ trọi góc trên — lấp khoảng trống và trông chủ động hơn khi hero cao hơn. */ .hero-art{ right:-10px;top:auto;bottom:-10px;transform:none; width:190px;height:190px;opacity:.9; -webkit-mask-image:linear-gradient(115deg,transparent 0%,#000 38%); mask-image:linear-gradient(115deg,transparent 0%,#000 38%); } .hero.is-playing .hero-art{top:auto;bottom:-10px;transform:none} .hero.is-playing h1,.hero.is-playing p{max-width:calc(100% - 40px)} .tracks-wrap{grid-area:tracks-wrap;min-width:0} .section-head{margin-top:0} .tracks{padding:8px;max-height:none} .player{left:50%;right:auto;bottom:22px;width:min(94vw,760px);transform:translateX(-50%);padding:12px 18px} .now-playing-backdrop{background:rgba(5,4,12,.62)} .side-menu{width:300px} } .now-playing-modal{display:none;position:fixed;inset:0;z-index:300} .now-playing-modal.open{display:block} .now-playing-backdrop{position:absolute;inset:0;background:rgba(5,4,12,.55);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)} .now-playing-sheet{ position:absolute;left:10px;right:10px;bottom:10px;max-width:630px;margin:auto; min-height:min(780px,calc(100vh - 20px));padding:16px 18px 22px;border-radius:30px; background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 35%,rgba(20,16,34,.62) 70%,rgba(9,8,16,.72)); backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%); border:1px solid rgba(255,255,255,.16); box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 40px rgba(139,77,255,.05); display:flex;flex-direction:column;position:absolute;overflow:hidden; } .now-playing-sheet:before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:radial-gradient(circle at 18% 0%,rgba(180,100,255,.16),transparent 40%); } .now-playing-sheet>*{position:relative;z-index:1} .np-top{display:flex;align-items:center;justify-content:space-between;color:#fff;margin-bottom:20px} .np-top strong{font-size:14px} .np-icon{ width:38px;height:38px;border-radius:13px;background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);color:#fff;font-size:18px; backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } .np-art{ width:min(82vw,520px);aspect-ratio:1/1;max-height:52vh;margin:4px auto 24px;border-radius:26px; display:grid;place-items:center;font-size:80px;background:linear-gradient(145deg,#cc6a98,#4e2e8a); border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px rgba(111,47,190,.32),inset 0 1px 0 rgba(255,255,255,.16);overflow:hidden } /* Desktop: canh giữa hẳn khung Now Playing (trước đây lệch trái vì quy tắc mobile left:10px/right:10px nằm SAU rule desktop trong file nên đè mất — đặt lại ở đây, sau mọi rule mobile liên quan, để chắc chắn thắng cascade) và thu nhỏ khung lại một chút theo yêu cầu. */ @media(min-width:1000px){ .now-playing-sheet{ left:50%;right:auto;top:50%;bottom:auto; transform:translate(-50%,-50%); width:min(86vw,440px);max-width:440px; min-height:auto;max-height:calc(100vh - 64px); padding:14px 16px 18px; } .np-art{width:min(70vw,300px);max-height:32vh;margin:4px auto 18px} } .np-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px}.np-title-wrap{min-width:0;flex:1}.np-title-wrap h2{font-size:24px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-title-wrap p{margin-top:7px;color:#9996a5;font-size:14px} #npLyricsToggle{font-size:13px;font-weight:600;flex-shrink:0} #npLyricsToggle.is-active{background:rgba(165,92,255,.28);border-color:rgba(165,92,255,.5);color:#fff} /* Khung lyrics đồng bộ — thay thế .np-art + .np-visualizer khi bật, kiểu Spotify: dòng đang hát to/trắng/đậm, các dòng khác mờ dần theo khoảng cách, tự cuộn mượt để dòng active luôn nằm giữa khung. Ẩn theo mặc định (display:none), JS chỉ bật display:flex khi người dùng bấm nút Aa. */ .np-lyrics{ display:none;width:min(82vw,520px);max-height:52vh;margin:4px auto 24px; overflow-y:auto;-webkit-overflow-scrolling:touch; mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 8%,#000 92%,transparent); scrollbar-width:none; } .np-lyrics::-webkit-scrollbar{display:none} .np-lyrics.is-active{display:flex;flex-direction:column} .np-lyrics-lines{margin:auto 0;padding:18vh 4px} .np-lyrics-line{ color:rgba(255,255,255,.38);font-size:19px;font-weight:600;line-height:1.5; padding:9px 2px;text-align:center;transition:color .35s ease,transform .35s ease,opacity .35s ease; transform-origin:center;cursor:pointer; } .np-lyrics-line.is-current{ color:#fff;font-size:23px;transform:scale(1.04); } .np-lyrics-line.is-past{opacity:.55} .np-lyrics-empty{ display:none;margin:auto;color:#8e8a99;font-size:14px;text-align:center;padding:0 20px; } .np-lyrics.is-empty .np-lyrics-empty{display:block} .np-lyrics.is-empty .np-lyrics-lines{display:none} /* Thanh sóng nhạc — cột nhảy theo dữ liệu tần số thật lấy từ Web Audio API (AnalyserNode), không phải animation giả lập. Vẽ bằng (fillRect mỗi frame) thay vì DOM div — mượt hơn, ít reflow hơn 40 div riêng lẻ. Ẩn theo mặc định (display:none) và JS chỉ bật display:block khi AudioContext khởi tạo thành công — tránh 1 hàng cột phẳng lì nếu trình duyệt chặn. */ .np-visualizer{ display:none;width:100%;height:44px;margin:2px auto 22px; } .np-visualizer.is-active{display:block} .np-progress-wrap input{width:100%}.np-times{display:flex;justify-content:space-between;color:#8e8a99;font-size:11px;margin-top:4px} .np-controls{display:flex;align-items:center;justify-content:space-between;margin:28px 2px 22px} .np-control{ width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);color:#f4f2fa;font-size:22px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); display:grid;place-items:center; } .np-control.small{ width:34px;height:34px;color:#aaa6b2;font-size:16px; background:transparent;border-color:transparent; } .np-big-play{ width:86px;height:86px;border-radius:50%;border:1px solid rgba(255,255,255,.55); background:linear-gradient(160deg,#fff,#e8e6ef);color:#111;font-size:28px; box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.85); display:grid;place-items:center; } #progress,#npProgress{accent-color:#9d54ff} .player{cursor:pointer} .player button,.player input{cursor:pointer} @media(max-height:700px) and (max-width:999px){.now-playing-sheet{min-height:calc(100vh - 20px);padding-top:11px}.np-art{max-height:42vh;margin-bottom:15px}.np-controls{margin:18px 4px 14px}} @media(max-height:700px) and (min-width:1000px){.now-playing-sheet{max-height:calc(100vh - 24px);padding-top:11px}.np-art{max-height:28vh;margin-bottom:12px}} /* ===== Light theme overrides ===== Panels above (hero, cards, side-menu, now-playing sheet, search dialog) hard-code dark glass colors (white-on-near-black) instead of the --bg/ --text variables, so they stayed dark and glaring even after switching to light mode. This block re-skins each one for [data-theme="light"] specifically, keeping the same glass/blur look but light-on-white instead of white-on-dark. Kept as one block (not mixed into the rules above) so it's easy to find and adjust together. */ html[data-theme="light"] .icon, html[data-theme="light"] .search{ background:rgba(20,15,35,.05);border-color:rgba(20,15,35,.10);color:#3a3547; } html[data-theme="light"] .quick button{ background:rgba(20,15,35,.04);border-color:rgba(20,15,35,.09);color:#4a4557; } html[data-theme="light"] .quick i{background:rgba(139,77,255,.10)} html[data-theme="light"] .card{background:rgba(20,15,35,.035);border-color:rgba(20,15,35,.09)} html[data-theme="light"] .card small{color:#6b6878} html[data-theme="light"] .tracks{background:rgba(20,15,35,.02);border-color:rgba(20,15,35,.09)} html[data-theme="light"] .track{border-bottom-color:rgba(20,15,35,.06)} html[data-theme="light"] .track-info span{color:#6b6878} html[data-theme="light"] .more{color:#6b6878} html[data-theme="light"] .player{ background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.55) 40%,rgba(255,255,255,.92)); border-color:rgba(20,15,35,.10); box-shadow:0 18px 50px rgba(20,15,35,.10),inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="light"] .pinfo span{color:#6b6878} html[data-theme="light"] .progress{background:rgba(20,15,35,.08);border-color:rgba(20,15,35,.06)} /* Now Playing full-screen sheet */ html[data-theme="light"] .now-playing-backdrop{background:rgba(20,15,35,.25)} html[data-theme="light"] .now-playing-sheet{ background:linear-gradient(165deg,rgba(255,255,255,.95),rgba(255,255,255,.85) 35%,rgba(240,238,247,.9) 70%,rgba(232,229,242,.95)); border-color:rgba(20,15,35,.10); box-shadow:0 30px 90px rgba(20,15,35,.16),inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 40px rgba(139,77,255,.04); } html[data-theme="light"] .now-playing-sheet:before{background:radial-gradient(circle at 18% 0%,rgba(139,77,255,.08),transparent 40%)} html[data-theme="light"] .np-top{color:#15121f} html[data-theme="light"] .np-icon{ background:rgba(20,15,35,.045);border-color:rgba(20,15,35,.10);color:#3a3547; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } html[data-theme="light"] .np-title-wrap p{color:#6b6878} html[data-theme="light"] .np-times{color:#6b6878} html[data-theme="light"] .np-control{ background:rgba(20,15,35,.04);border-color:rgba(20,15,35,.08);color:#2a2534; } html[data-theme="light"] .np-control.small{color:#847f90} html[data-theme="light"] #npLyricsToggle.is-active{background:rgba(139,77,255,.14);border-color:rgba(139,77,255,.3);color:#5b2fbf} html[data-theme="light"] .np-lyrics-line{color:rgba(20,15,35,.35)} html[data-theme="light"] .np-lyrics-line.is-current{color:#15121f} html[data-theme="light"] .np-lyrics-empty{color:#6b6878} /* Side menu */ html[data-theme="light"] .side-menu{ background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(245,243,250,.97)); border-color:rgba(20,15,35,.09); box-shadow:18px 0 65px rgba(20,15,35,.12),inset 1px 0 rgba(255,255,255,.5); } html[data-theme="light"] .side-menu:before{ background:radial-gradient(circle at 15% 8%,rgba(139,77,255,.08),transparent 28%), linear-gradient(180deg,rgba(20,15,35,.02),transparent 30%); } html[data-theme="light"] .menu-section-title{color:rgba(20,15,35,.4);border-top-color:rgba(20,15,35,.08)} html[data-theme="light"] .menu-item{color:#2a2534;background:rgba(20,15,35,.02)} html[data-theme="light"] .menu-item:hover{background:rgba(20,15,35,.05);border-color:rgba(20,15,35,.08)} html[data-theme="light"] .menu-item.is-active{ color:#15121f; background:linear-gradient(135deg,rgba(139,77,255,.14),rgba(139,77,255,.05)); border-color:rgba(139,77,255,.25); } html[data-theme="light"] .menu-icon{ color:#5a5566;background:rgba(20,15,35,.03);border-color:rgba(20,15,35,.06); } html[data-theme="light"] .menu-item.is-active .menu-icon{ color:#7a3fe0;background:rgba(139,77,255,.12);border-color:rgba(139,77,255,.2); } html[data-theme="light"] .menu-text small{color:#847f90} html[data-theme="light"] #menuOverlay{background:rgba(20,15,35,.15)} /* Search dialog */ html[data-theme="light"] .search-modal{background:rgba(20,15,35,.22)} html[data-theme="light"] .search-dialog{ background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(248,247,252,.98)); border-color:rgba(20,15,35,.10); box-shadow:0 25px 80px rgba(20,15,35,.18),inset 0 1px 0 rgba(255,255,255,.7); } html[data-theme="light"] .search-dialog-head h3{color:#15121f} html[data-theme="light"] .search-close{background:rgba(20,15,35,.05);border-color:rgba(20,15,35,.1);color:#3a3547} html[data-theme="light"] .search-sub{color:#6b6878} html[data-theme="light"] .search-input-wrap{background:rgba(20,15,35,.035);border-color:rgba(20,15,35,.1)} html[data-theme="light"] .search-field{color:#15121f} html[data-theme="light"] .search-field::placeholder{color:#9a95a5} html[data-theme="light"] .search-action{background:rgba(20,15,35,.04);border-color:rgba(20,15,35,.1);color:#3a3547} /* Information / Terms / Privacy / Profile pages */ html[data-theme="light"] .information-row, html[data-theme="light"] .information-hero, html[data-theme="light"] .simple-info-section{ background:rgba(20,15,35,.025);border-color:rgba(20,15,35,.08); } html[data-theme="light"] .simple-info-head{border-bottom-color:rgba(20,15,35,.08)} html[data-theme="light"] .simple-info-head h3, html[data-theme="light"] .simple-info-section h4, html[data-theme="light"] .information-hero h3, html[data-theme="light"] .information-row b{color:#15121f} html[data-theme="light"] .simple-info-head p, html[data-theme="light"] .simple-info-section p, html[data-theme="light"] .information-hero p, html[data-theme="light"] .information-row span{color:#6b6878} /* Main section label */ .menu-section-title{ position:relative; z-index:1; margin:28px 12px 14px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.48); font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; } /* Dedicated Information page */ .information-page{ display:grid; gap:12px; margin-top:14px; } .information-hero, .information-row{ border:1px solid rgba(255,255,255,.09); background:linear-gradient(135deg,rgba(145,70,255,.13),rgba(255,255,255,.025)); box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 14px 35px rgba(0,0,0,.16); backdrop-filter:blur(20px) saturate(145%); -webkit-backdrop-filter:blur(20px) saturate(145%); } .information-hero{ padding:24px; border-radius:24px; } .information-logo{ font-size:25px; font-weight:800; color:#fff; } .information-logo span{color:#a65cff} .information-label{ display:inline-flex; margin-top:18px; padding:6px 10px; border-radius:999px; font-size:10px; letter-spacing:1.5px; color:#c28aff; background:rgba(166,92,255,.10); border:1px solid rgba(184,111,255,.18); } .information-hero h3{ margin:14px 0 6px; font-size:21px; } .information-hero p{ margin:0; color:#aaa5b5; font-size:13px; line-height:1.6; } .information-row{ display:flex; align-items:center; gap:14px; padding:15px; border-radius:18px; } .information-icon{ width:42px;height:42px;flex:none; display:grid;place-items:center; border-radius:13px; color:#c17aff; background:rgba(166,92,255,.10); border:1px solid rgba(184,111,255,.16); font-size:18px; } .information-row b{display:block;color:#fff;font-size:14px} .information-row span{display:block;margin-top:4px;color:#92909c;font-size:12px} /* Minimal information pages */ .simple-info-page{ max-width:760px; margin:12px auto 80px; } .simple-info-head{ padding:4px 2px 18px; border-bottom:1px solid rgba(255,255,255,.08); } .simple-info-head h3{ margin:0 0 6px; font-size:24px; color:#fff; } .simple-info-head p{ margin:0; color:#918d99; font-size:13px; line-height:1.55; } .simple-info-section{ margin-top:12px; padding:16px 15px; border:1px solid rgba(255,255,255,.07); border-radius:15px; background:rgba(255,255,255,.025); } .simple-info-section h4{ margin:0 0 7px; font-size:15px; font-weight:600; color:#eeeaf2; } .simple-info-section p{ margin:0; color:#96919f; font-size:13px; line-height:1.65; } .single-page-text{border-bottom:0} /* Glass side menu */ .side-menu{ position:fixed;z-index:110;left:0;top:0;bottom:0; width:min(320px,84vw);padding:22px 14px; transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1); border-radius:0 26px 26px 0; background:linear-gradient(160deg,rgba(23,20,36,.92),rgba(10,9,18,.94)); border:1px solid rgba(255,255,255,.10); border-left:0; box-shadow:18px 0 65px rgba(0,0,0,.42),inset 1px 0 rgba(255,255,255,.035); backdrop-filter:blur(30px) saturate(145%); -webkit-backdrop-filter:blur(30px) saturate(145%); overflow:hidden; } .side-menu:before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle at 15% 8%,rgba(177,82,255,.16),transparent 28%), linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%); } .side-head,.menu-item{position:relative;z-index:1} .side-head{ display:flex;align-items:center;justify-content:space-between; margin-bottom:24px;padding:0 1px 0 4px; } .side-head .brand{font-size:23px} .menu-item{ width:100%;min-height:58px; display:flex;align-items:center;gap:13px; text-align:left;padding:8px 12px; margin:6px 0;border-radius:17px; color:#e8e5ee; border:1px solid transparent; background:rgba(255,255,255,.018); transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease; } .menu-item:hover{ background:rgba(255,255,255,.065); border-color:rgba(255,255,255,.10); } .menu-item:active{transform:scale(.985)} .menu-item.is-active{ color:#fff; background:linear-gradient(135deg,rgba(145,70,255,.25),rgba(187,91,255,.10)); border-color:rgba(176,100,255,.30); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 25px rgba(115,45,190,.10); } .menu-item.is-active .menu-icon{ color:#c17aff; background:rgba(173,91,255,.15); border-color:rgba(181,101,255,.18); } .menu-icon{ width:38px;height:38px;flex:none; display:grid;place-items:center; border-radius:12px; color:#d8d4df; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.055); font-size:20px; transition:.18s ease; } .menu-text{font-size:16px;line-height:1.2;min-width:0} .menu-text b{display:block;font-size:16px} .menu-text small{display:block;color:#9793a3;font-size:11px;margin-top:4px} #menuOverlay{ backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); } /* Glass search dialog */ .search-modal{display:none;position:fixed;inset:0;z-index:500;align-items:center;justify-content:center;padding:20px;background:rgba(4,3,10,.48);backdrop-filter:blur(14px) saturate(135%);-webkit-backdrop-filter:blur(14px) saturate(135%)} .search-modal.open{display:flex;animation:searchBackdropIn .22s ease-out both} .search-modal,.search-dialog,.search-dialog *{-webkit-tap-highlight-color:transparent;touch-action:manipulation} .search-dialog button:active,.search-close:active,.search-action:active{opacity:1;transform:none;filter:none} .search-dialog{width:min(92vw,430px);border:1px solid rgba(255,255,255,.18);border-radius:26px;padding:20px;background:linear-gradient(145deg,rgba(38,28,58,.72),rgba(12,10,23,.78));box-shadow:0 25px 80px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);animation:searchSlideIn .28s cubic-bezier(.2,.8,.2,1) both;transform-origin:center bottom} .search-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.search-dialog-head h3{font-size:20px;letter-spacing:-.3px}.search-close{width:36px;height:36px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);font-size:22px;color:#ddd}.search-sub{font-size:12px;color:#aaa6b5;margin-bottom:9px}.search-input-wrap{display:flex;align-items:center;gap:10px;height:52px;padding:0 14px;border-radius:16px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.13);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.2s}.search-input-wrap:focus-within{border-color:rgba(174,91,255,.75);box-shadow:0 0 0 4px rgba(153,76,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}.search-input-icon{font-size:19px;color:#b765ff}.search-field{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:15px}.search-field::placeholder{color:#777381}.search-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:15px}.search-action{min-width:82px;height:42px;padding:0 15px;border-radius:13px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.06);color:#c9c5d0}.search-action.primary{border-color:rgba(181,91,255,.5);background:linear-gradient(135deg,#8641ff,#bd5cff);color:#fff;box-shadow:0 8px 25px rgba(133,57,255,.2)} @keyframes searchSlideIn{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes searchBackdropIn{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.search-dialog,.search-modal{animation:none}} /* Màn hình chờ hiện trong lúc app khởi động — ẩn ngay khi thư viện nhạc sẵn sàng, tránh flash nội dung chưa dựng xong lúc tải trang lần đầu. */ .boot-loading{ min-height:100vh;display:flex;align-items:center;justify-content:center; background: radial-gradient(circle at 80% 0%,rgba(116,55,255,.28),transparent 40%), radial-gradient(circle at 10% 100%,rgba(255,55,170,.14),transparent 35%),var(--bg); } .boot-spinner{ width:34px;height:34px;border-radius:50%; border:3px solid rgba(255,255,255,.15);border-top-color:#bd5cff; animation:boot-spin .7s linear infinite; } @keyframes boot-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.boot-spinner{animation:none}}