.hero{min-height:680px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;overflow:hidden;padding:125px clamp(20px,8vw,120px) 72px;background:radial-gradient(ellipse at 78% 45%,#682635 0%,#321820 26%,#160d11 62%)}
/* 20 năm ca hát của Hà Anh Tuấn; cú pháp "/ ''" giấu số khỏi trình đọc màn hình (dòng trước là fallback). */
.hero:before{content:"20";content:"20"/"";position:absolute;right:12%;top:50%;transform:translateY(-61%);opacity:.5;font:italic 600 clamp(300px,46vw,680px)/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:-.06em;color:#f28a9c12;-webkit-text-stroke:1.5px #f28a9c59;pointer-events:none;user-select:none}
.hero-copy{position:relative;z-index:2;max-width:590px}
.hero h1{letter-spacing:-.045em;font-size:clamp(50px,7.4vw,100px);line-height:1.08;margin:24px 0}
.hero-copy p{color:#d7c4c8;max-width:420px;font-size:15px;line-height:1.9}
.cta{margin-top:26px}
.hero-art{position:relative;z-index:1;min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.hero-collage{position:relative;width:100%;display:flex;justify-content:center;padding:4% 0}
.portrait-frame{position:relative;z-index:1;width:min(330px,70%);aspect-ratio:3/4;overflow:hidden;border-radius:6px;transform:rotate(2deg);box-shadow:0 30px 80px #000c}
.photo-back{position:absolute;z-index:0;margin:0;width:min(230px,44%);overflow:hidden;border-radius:6px;box-shadow:0 24px 60px #000b;filter:brightness(.82)}
.photo-back picture{display:block;height:100%}
.photo-back img{display:block;width:100%;height:100%;object-fit:cover}
.photo-left{aspect-ratio:4/5;left:calc(50% - var(--spread));top:4%;transform:rotate(-9deg)}
.photo-right{aspect-ratio:1;right:calc(50% - var(--spread));bottom:6%;transform:rotate(8deg)}
.portrait-frame picture{display:block;width:100%;height:100%}
.portrait{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.art-caption{position:absolute;bottom:18px;left:8%;margin:0;font:italic 500 18px var(--serif);color:#f1c2ca;transform:rotate(-8deg);z-index:3}
.hero-art{--spread:350px}
.rose-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(16px,3vw,30px);margin-top:clamp(18px,3vw,30px)}
.rose-deco{width:clamp(38px,4.5vw,54px);height:clamp(42px,5vw,60px);filter:drop-shadow(0 10px 16px #000a);transform:rotate(var(--r,0deg))}
.rose-red{--r:-10deg;color:#e0313f}
.rose-pink{--r:6deg;color:var(--rose2)}
.rose-silver{--r:-6deg;fill:url(#rose-silver)}
.rose-gold{--r:10deg;fill:url(#rose-gold)}

.intro{padding:76px 20px 35px;text-align:center}
.intro h2{font-size:clamp(34px,4.5vw,54px);line-height:1.12;margin:12px 0}
.intro p{color:var(--muted);font-size:14px;margin:0 auto;max-width:550px}
.content{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:24px clamp(16px,5vw,54px) 90px}
.side-rose{position:fixed;z-index:0;top:50%;width:min(22vw,245px);height:min(25vw,272px);color:var(--rose);opacity:0;pointer-events:none;transition:transform 1s cubic-bezier(.22,.8,.3,1),opacity 1s ease}
.side-rose-left{left:-4vw;transform:translate(-130%,-50%) rotate(-18deg)}
.side-rose-right{right:-4vw;transform:translate(130%,-50%) rotate(18deg) scaleX(-1)}
.side-roses.is-in .side-rose{opacity:.07}
.side-roses.is-in .side-rose-left{transform:translate(0,-50%) rotate(-18deg)}
.side-roses.is-in .side-rose-right{transform:translate(0,-50%) rotate(18deg) scaleX(-1)}
.toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:16px 0 26px}
.toolbar h3{font:500 28px var(--serif);margin:0}
.toolbar p{font-size:12px;color:var(--muted);margin:6px 0 0}
.sort{background:#211419;border:1px solid var(--line);color:var(--cream);border-radius:10px;padding:10px 12px;font-size:12px;min-height:44px}
.empty-state{text-align:center;color:var(--muted);padding:40px 0}

.song-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.song-card{overflow:hidden;background:linear-gradient(145deg,#26171c,#1b1115);border:1px solid #4a3038;border-radius:16px;transition:transform .25s,border-color .25s}
.song-card:hover{transform:translateY(-4px);border-color:#b85a70}
.cover-wrap{position:relative;aspect-ratio:4/3;overflow:hidden;background:#382029}
.cover-wrap img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;transition:transform .5s;filter:saturate(.85)}
.song-card:hover .cover-wrap img{transform:scale(1.04)}
.rank{position:absolute;top:12px;left:12px;background:#160d11d9;border:1px solid #ffffff25;border-radius:7px;padding:5px 9px;font-size:10px;letter-spacing:.08em;color:#f5d7dc}
.song-info{padding:17px}
.song-title{font:600 16px/1.25 var(--serif);margin:0 0 6px}
.song-sub{font-size:11px;color:var(--muted);margin:0 0 18px}
.song-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vote-count{font-size:12px;color:#d7c2c7;white-space:nowrap}
.vote-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;border:1px solid #70404c;background:#341a23;color:#f7c1cb;border-radius:999px;padding:9px 14px;font-size:12px;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.vote-btn:hover{background:#54212e;border-color:var(--rose)}
.vote-btn:active{transform:scale(.96)}
.vote-btn.voted{background:var(--rose);color:#fff;border-color:var(--rose)}
.vote-btn[aria-busy=true]{opacity:.65;cursor:progress}
.vote-btn .flower{width:16px;height:18px;flex-shrink:0;color:#e0313f}
.vote-btn.voted .flower{color:#fff}

.ranking{margin-top:82px;display:grid;grid-template-columns:.8fr 1.2fr;gap:45px;align-items:start}
.ranking-copy h2{font-size:clamp(34px,4vw,48px);line-height:1.12;margin:12px 0}
.ranking-copy p{font-size:13px;color:var(--muted);max-width:340px}
.ranking-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rank-row{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid var(--line)}
.rank-num{font:italic 500 24px var(--serif);font-variant-numeric:lining-nums;color:var(--rose2)}
.rank-name{font:500 18px var(--serif)}
.rank-artist{font-size:11px;color:var(--muted);margin-top:3px}
.rank-score{font-size:12px;color:#f1b8c3;white-space:nowrap}

.content .quote{position:relative;margin-top:70px;min-height:clamp(320px,38vw,460px);display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.quote-bg{position:absolute;inset:0;display:block}
.quote-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.content .quote:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 75% at 0% 0%,#24131ad9 0%,#24131a73 55%,transparent 100%)}
.quote-mark{font:500 54px var(--serif);color:var(--rose);line-height:1}
.content .quote p{position:relative;z-index:1;max-width:48%;margin:0;padding:clamp(24px,4vw,44px) clamp(24px,4vw,48px);font:italic 500 22px/1.55 var(--serif);color:#f7eee8;text-shadow:0 2px 14px #000a}

@media(max-width:800px){.content .quote{flex-direction:column;align-items:stretch;min-height:0}.quote-bg{position:relative;aspect-ratio:16/10}.quote-bg img{object-position:center}.content .quote:after{display:none}.content .quote p{max-width:none;padding:22px 22px 26px;font-size:20px;text-align:center;text-shadow:none}.hero:before{right:50%;top:auto;bottom:2%;transform:translateX(50%);font-size:clamp(260px,92vw,520px)}.hero{grid-template-columns:1fr;min-height:auto;padding-top:145px;text-align:center}.hero-copy{margin:auto}.hero-copy p{margin-left:auto;margin-right:auto}.hero-art{min-height:360px;margin-top:20px}.portrait-frame{width:245px}.photo-back{width:170px}.hero-art{--spread:215px;min-height:400px}.art-caption{left:13%}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ranking{grid-template-columns:1fr;gap:22px}.ranking-copy p{max-width:550px}}
@media(max-width:520px){.hero-eyebrow span{display:block}.hero-eyebrow .eyebrow-sep{display:none}.hero{padding-left:20px;padding-right:20px;padding-top: 120px;}.hero-art{min-height:320px}.portrait-frame{width:200px}.photo-back{width:130px}.hero-art{--spread:170px;min-height:340px}.intro{padding-top:55px}.song-grid{gap:11px}.song-info{padding:12px}.song-title{font-size:17px}.song-sub{margin-bottom:14px}.song-bottom{align-items:stretch;flex-direction:column;gap:8px}.vote-btn{justify-content:center;padding:8px 11px}.toolbar{align-items:stretch;flex-direction:column}.sort{width:100%}.rank-row{grid-template-columns:28px 1fr auto;gap:9px}.rank-name{font-size:16px}.rank-score{font-size:11px}}

.music-toggle{position:fixed;left:18px;bottom:18px;z-index:9;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid #70404c;background:#1b1115e6;color:var(--rose2);cursor:pointer;box-shadow:0 10px 30px #0008;backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.music-toggle:hover{border-color:var(--rose);background:#341a23}
.music-note{font-size:20px;line-height:1}
.music-bars{display:none;align-items:flex-end;gap:3px;height:18px}
.music-bars i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;animation:music-bar 1s ease-in-out infinite alternate}
.music-bars i:nth-child(2){animation-delay:-.4s}
.music-bars i:nth-child(3){animation-delay:-.7s}
.music-toggle.is-playing{border-color:var(--rose);color:#fff;background:var(--rose)}
.music-toggle.is-playing .music-note{display:none}
.music-toggle.is-playing .music-bars{display:flex}
@keyframes music-bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}