/* Trang người dùng: ba phong cách (dark, pastel, glass), mobile-first */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
html.lock{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);overflow-x:hidden;transition:background .6s}
a{color:inherit}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
[data-style=dark]{--bg:#0b0a0f;--bg2:#15121c;--text:#f3ecdc;--mute:#a89f8c;--accent:#e6c27a;--accent2:#ffdf9e;--accent-a:rgba(230,194,122,.28);--card:#15121c;--line:rgba(230,194,122,.28);--shadow:0 22px 50px rgba(0,0,0,.55);--radius:16px;--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ft:"Playfair Display",Georgia,"Times New Roman",serif;--ov:linear-gradient(180deg,rgba(11,10,15,.35),rgba(11,10,15,.9))}
[data-style=pastel]{--bg:#fff6f3;--bg2:#ffe9ef;--text:#4a3340;--mute:#8b7482;--accent:#e4799c;--accent2:#ffb38a;--accent-a:rgba(228,121,156,.28);--card:#ffffff;--line:rgba(228,121,156,.4);--shadow:0 16px 40px rgba(228,121,156,.22);--radius:28px;--font:ui-rounded,"Segoe UI",system-ui,sans-serif;--ft:"Dancing Script","Segoe Script",cursive;--ov:linear-gradient(180deg,rgba(255,240,244,.25),rgba(255,246,243,.92))}
[data-style=glass]{--bg:#0e1230;--bg2:#1c1346;--text:#f4f6ff;--mute:#a9b0d6;--accent:#7cc4ff;--accent2:#c08bff;--accent-a:rgba(124,196,255,.3);--card:rgba(255,255,255,.09);--line:rgba(160,190,255,.35);--shadow:0 22px 60px rgba(8,8,48,.55);--radius:24px;--font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--ft:"Montserrat",system-ui,sans-serif;--ov:linear-gradient(180deg,rgba(14,18,48,.3),rgba(14,18,48,.9))}
[data-style=glass] body,body[data-style=glass]{background:linear-gradient(135deg,#0e1230,#2a1658,#0b3a66,#0e1230);background-size:300% 300%;animation:flow 24s ease infinite}
@keyframes flow{50%{background-position:100% 50%}}
#progress{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:50}
/* Phần đầu trang */
.hero{position:relative;min-height:520px;height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:24px;isolation:isolate}
.hero-bg{position:absolute;inset:-6%;background:linear-gradient(135deg,var(--bg2),var(--bg)) center/cover;z-index:-3;animation:kb 26s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
.hero::after{content:"";position:absolute;inset:0;background:var(--ov);z-index:-2}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero-in{max-width:880px;will-change:transform,opacity}
.hero h1{margin:0 0 12px;font:700 clamp(2rem,7.4vw,5.2rem)/1.1 var(--ft);letter-spacing:.01em;text-wrap:balance;text-shadow:0 6px 40px rgba(0,0,0,.35)}
[data-style=pastel] .hero h1{color:var(--accent);text-shadow:0 6px 30px rgba(255,255,255,.7)}
.hero h1 .w{display:inline-block;white-space:nowrap}
.hero h1 .c{display:inline-block;opacity:0;transform:translateY(.6em) rotateX(60deg);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.25s + var(--i)*.045s)}
@keyframes rise{to{opacity:1;transform:none}}
.hero p{margin:0 auto 28px;max-width:34em;font-size:clamp(1rem,2.6vw,1.3rem);color:var(--mute);opacity:0;animation:fade 1s .9s forwards}
[data-style=pastel] .hero p{color:var(--text)}
@keyframes fade{to{opacity:1}}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fade 1s 1.2s forwards}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1a1408;font-weight:700;text-decoration:none;box-shadow:0 10px 30px var(--accent-a);transition:transform .2s,box-shadow .2s}
[data-style=pastel] .btn{color:#fff}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.96)}
.btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--line);box-shadow:none;backdrop-filter:blur(8px)}
.cue{position:absolute;bottom:22px;left:50%;width:26px;height:42px;margin-left:-13px;border:2px solid var(--line);border-radius:14px}
.cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--accent);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:1;transform:translateY(0)}80%{opacity:0;transform:translateY(16px)}100%{opacity:0}}
/* Dòng thời gian */
#tl{position:relative;max-width:1100px;margin:0 auto;padding:70px 18px 40px 52px}
#tl::before,#tl .fill{content:"";position:absolute;left:24px;top:30px;bottom:0;width:2px;background:var(--line)}
#tl .fill{bottom:auto;height:0;background:linear-gradient(var(--accent),var(--accent2));box-shadow:0 0 14px var(--accent)}
.empty{text-align:center;color:var(--mute);padding:80px 0}
.yr{margin:30px 0 28px -52px;padding-left:2px}
.yr h2{display:inline-block;margin:0;padding:4px 22px;border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1a1408;font:700 1.4rem var(--ft);box-shadow:0 8px 24px var(--accent-a)}
[data-style=pastel] .yr h2{color:#fff}
.ev{position:relative;margin:0 0 48px}
.dot{position:absolute;left:-36px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px var(--accent-a);z-index:1}
.dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ping 2.6s infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.8);opacity:0}}
.ev time{display:block;margin-bottom:10px;color:var(--accent);font-weight:700;letter-spacing:.04em;font-size:.95rem}
.card{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;cursor:pointer;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));outline:0}
[data-style=glass] .card{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.card:hover,.card:focus-visible{box-shadow:var(--shadow),0 0 0 2px var(--accent-a)}
.media{position:relative;overflow:hidden;background:var(--c,#888);max-height:88dvh}
.media img{width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(1.06);transition:opacity .8s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.media img.ld{opacity:1;transform:none}
.card:hover .media img.ld{transform:scale(1.02)}
.media .vp{width:100%;height:100%;object-fit:contain}
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);transition:transform .9s}
.card:hover .media::after{transform:translateX(120%)}
.play{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:#fff;font-size:26px;padding-left:4px;z-index:2;transition:transform .3s}
.play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:ping 2.2s infinite}
.card:hover .play{transform:scale(1.12)}
.dur{position:absolute;right:10px;bottom:10px;padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.6);color:#fff;font-size:.78rem;z-index:2}
.txt{padding:16px 18px 18px}
.txt h3{margin:0 0 6px;font:700 1.25rem/1.3 var(--ft)}
.txt p{margin:0;color:var(--mute);white-space:pre-line;font-size:.97rem}
.txt:empty{display:none}
/* Hiệu ứng xuất hiện khi cuộn */
.rv{opacity:0;transform:translateY(46px) scale(.97);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
#mus{position:fixed;right:16px;bottom:calc(76px + env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--accent);font-size:22px;box-shadow:var(--shadow);z-index:40;display:grid;place-items:center;transition:transform .2s}
#mus[hidden]{display:none}#mus:active{transform:scale(.92)}[data-style=glass] #mus{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
#mus.wait::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:ping 2.2s infinite}
#top{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#1a1408;font-size:22px;font-weight:700;box-shadow:0 10px 30px var(--accent-a);opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;transition:.3s;z-index:40}
#top.on{opacity:1;transform:none;pointer-events:auto}
.credit{padding:34px 16px calc(34px + env(safe-area-inset-bottom));text-align:center;font-size:.85rem;color:var(--mute)}
@media (min-width:820px){
  #tl{padding:90px 24px 50px}
  #tl::before,#tl .fill{left:50%;margin-left:-1px}
  .yr{margin:30px 0 34px;text-align:center}
  .ev{width:50%}
  .ev.l{padding-right:56px;text-align:right}
  .ev.r{margin-left:50%;padding-left:56px}
  .ev.l .dot{left:auto;right:-8px}.ev.r .dot{left:-8px}
  .rv.l{transform:translate(-60px,30px) scale(.97)}.rv.r{transform:translate(60px,30px) scale(.97)}
  .rv.in{transform:none}
  .ev.l .txt{text-align:right}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}.hero h1 .c,.hero p,.cta{opacity:1;transform:none}.media img{opacity:1;transform:none}
}
/* Xem ảnh, video toàn màn hình và trình chiếu */
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,5,10,.94);display:flex;flex-direction:column;opacity:0;transition:opacity .3s;touch-action:none}
.lb[hidden]{display:none}
.lb:not(.on){pointer-events:none}
.lb.on{opacity:1}
.lb-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}
/* Chuyển ảnh: ảnh cũ mờ dần, ảnh mới hiện dần (nhiều kiểu nhẹ nhàng), xếp chồng cùng một ô */
.lb-stage .m{grid-area:1/1;max-width:100%;max-height:100%;object-fit:contain;--d:.4s;animation:fxFade var(--d) ease both}
.lb-stage .m.out{animation:fxOut var(--d) ease forwards;pointer-events:none}
.lb.auto .lb-stage{--d:1.2s}.lb.auto .lb-stage .m{--d:1.2s}
.lb.auto .lb-stage .fx-zoom{animation-name:fxZoom}.lb.auto .lb-stage .fx-slide{animation-name:fxSlide}.lb.auto .lb-stage .fx-slideR{animation-name:fxSlideR}
.lb.auto .lb-stage .fx-rise{animation-name:fxRise}.lb.auto .lb-stage .fx-blur{animation-name:fxBlur}.lb.auto .lb-stage .m.out{animation-name:fxOut}
.lb.auto .lb-stage img.m:not(.out){animation-timing-function:ease}
.lb.auto .lb-stage img.m:not(.out){scale:1;transition:scale 6s ease-out}.lb.auto .lb-stage img.m.kb{scale:1.07}
@keyframes fxFade{from{opacity:0}to{opacity:1}}
@keyframes fxOut{to{opacity:0}}
@keyframes fxZoom{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes fxSlide{from{opacity:0;transform:translateX(6%)}to{opacity:1;transform:none}}
@keyframes fxSlideR{from{opacity:0;transform:translateX(-6%)}to{opacity:1;transform:none}}
@keyframes fxRise{from{opacity:0;transform:translateY(5%)}to{opacity:1;transform:none}}
@keyframes fxBlur{from{opacity:0;filter:blur(18px)}to{opacity:1;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){.lb.auto .lb-stage .m{animation:fxFade .4s both!important}.lb.auto .lb-stage img.m{transition:none}.lb.auto .lb-stage img.m.kb{scale:1}}
.lb-bar{display:flex;align-items:center;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent)}
.lb-cap{flex:1;min-width:0}
.lb-cap b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-cap small{color:#cbbfa8}
.lb button,.lb a{min-width:44px;min-height:44px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;background:rgba(255,255,255,.12);text-decoration:none;font-size:20px;backdrop-filter:blur(6px);transition:background .2s,transform .15s}
.lb button:active{transform:scale(.9)}
.lb button:hover,.lb a:hover{background:rgba(255,255,255,.25)}
.lb-x{position:absolute;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:3}
.lb-prev,.lb-next{position:absolute;top:50%;margin-top:-22px;z-index:3}
.lb-prev{left:10px}.lb-next{right:10px}
.lb-prog{position:absolute;left:0;top:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0;z-index:3}
.lb-prog.run{animation:prog var(--t,4.5s) linear forwards}
@keyframes prog{to{width:100%}}
@media (max-width:600px){.lb-prev,.lb-next{display:none}}
.rx{display:flex;gap:8px;padding:0 14px 14px}
.rx button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--text);font:600 1rem var(--font);transition:transform .15s,background .2s,border-color .2s}
.rx button i{font-style:normal;font-size:1.15rem}
.rx button.on{border-color:var(--accent);background:var(--accent-a)}
.rx button:active{transform:scale(.92)}.rx button.pop i{animation:pop .35s}
.lb-rx{margin-left:auto}.lb-rx .rx{padding:0}.lb-rx button{color:#fff;border-color:rgba(255,255,255,.35)}
.fly{position:fixed;z-index:80;pointer-events:none;font-size:1.6rem;transform:translate(-50%,0) scale(var(--s,1));animation:fly 1.1s ease-out forwards}
@keyframes fly{to{transform:translate(calc(-50% + var(--dx)),-130px) scale(calc(var(--s,1)*1.3));opacity:0}}
@keyframes pop{40%{transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){.rx button.pop i{animation:none}}
@media (min-width:820px){.ev.l .rx{justify-content:flex-end}}
.lb [hidden]{display:none}
#albums{position:sticky;top:0;z-index:30;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 16px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
#albums::-webkit-scrollbar{display:none}#albums[hidden]{display:none}
#albums button{flex:none;min-height:44px;padding:0 18px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--text);font:600 1rem var(--font);transition:background .2s,transform .15s,border-color .2s}
#albums button small{color:var(--mute);font-weight:500;margin-left:4px}
#albums button.on{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#1a1408}[data-style=pastel] #albums button.on{color:#fff}
#albums button.on small{color:inherit;opacity:.75}#albums button:active{transform:scale(.95)}
@media (min-width:820px){#albums{justify-content:center}}
.txt p.cl{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.txt .more{display:block;min-height:44px;margin:0 0 -8px;padding:0 2px;background:none;border:0;color:var(--accent);font:600 .95rem var(--font);cursor:pointer}
.ev.l .more{margin-left:auto}
@media (max-width:819px){.ev.l .more{margin-left:0}}
.lb-toast{position:absolute;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;max-width:88vw;padding:10px 18px;border-radius:99px;background:rgba(0,0,0,.78);color:#fff;font-size:.95rem;animation:fxFade .25s both}
#tfx{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:150}
#albums .sb{padding:0;min-width:44px;font-size:1.1rem}
#sbox{display:none;flex:1;align-items:center;gap:8px;min-width:0}
#sq{flex:1;min-width:0;min-height:44px;padding:0 16px;border-radius:99px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 80%,transparent);color:var(--text);font:500 1rem var(--font);outline:0}
#sq:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-a)}
#albums.searching>:not(#sbox){display:none}#albums.searching #sbox{display:flex}
#albums.searching{overflow:visible}
.srn{margin:0 0 18px;text-align:center;color:var(--mute)}.srn b{color:var(--accent)}
#sq::-webkit-search-cancel-button{-webkit-appearance:none;display:none}