/* ===== Tấm hình lưu ý (hiện khi mở trang Bài học / Bài hát) ===== */
.notice{margin:auto;width:min(94vw,900px);max-width:none;padding:0;overflow:visible;text-align:center;background:none;border:0}
.notice::backdrop{background:rgba(43,27,90,.65)}
.notice[open]{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.notice__img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;max-height:78vh;border:var(--line);border-radius:24px;box-shadow:var(--shadow)}
.notice__ok{margin-top:18px}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-4deg)}to{opacity:1;transform:none}}

/* ===== Trang Bài hát ===== */
button.song{display:flex;flex-direction:column;align-items:center;gap:6px;font:inherit;color:inherit;text-align:center;cursor:pointer;transition:transform .15s}
button.song:hover{transform:translateY(-4px) rotate(-1.5deg)}
.song__play{padding:2px 16px;font-weight:800;color:#fff;background:var(--pink);border:3px solid var(--ink);border-radius:999px}

.songbox{margin:auto;width:min(94vw,760px);max-height:92vh;padding:18px 18px 22px;overflow:auto;color:var(--ink);background:#fff;border:var(--line);border-radius:28px;box-shadow:var(--shadow)}
.songbox::backdrop{background:rgba(43,27,90,.6)}
.songbox[open]{animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.songbox[data-theme="0"]{background:#ffe3ef}
.songbox[data-theme="1"]{background:#d9f2ff}
.songbox[data-theme="2"]{background:#fff3b8}
.songbox[data-theme="3"]{background:#d8f8e1}
.songbox__close{position:absolute;top:12px;right:12px;width:38px;height:38px;font:inherit;font-weight:800;color:var(--ink);background:#fff;border:3px solid var(--ink);border-radius:50%;cursor:pointer}
.songbox__title{margin:0 48px 12px 0;font-size:1.6rem;line-height:1.1}

/* màn hình */
.songbox__screen{position:relative;display:grid;place-items:center;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#6a4cff,#ff5fa2);border:6px solid var(--ink);border-radius:22px}
.songbox__art{font-size:clamp(4rem,18vw,7rem);line-height:1}
.songbox--playing .songbox__art{animation:bounce 1s ease-in-out infinite}
.songbox__eq{position:absolute;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;height:44px;padding-bottom:8px}
.songbox__eq i{width:10px;height:6px;background:#fff;border-radius:4px}
.songbox--playing .songbox__eq i{animation:eq .8s ease-in-out infinite alternate}
.songbox__eq i:nth-child(2){animation-delay:-.2s}
.songbox__eq i:nth-child(3){animation-delay:-.4s}
.songbox__eq i:nth-child(4){animation-delay:-.6s}
.songbox__eq i:nth-child(5){animation-delay:-.1s}
@keyframes eq{to{height:30px}}
.songbox__note{position:absolute;bottom:22%;font-size:2rem;color:#fff;opacity:0}
.songbox__note--1{left:16%}
.songbox__note--2{right:16%}
.songbox--playing .songbox__note{animation:rise 2.4s ease-in infinite}
.songbox--playing .songbox__note--2{animation-delay:-1.2s}
@keyframes rise{from{opacity:.9;transform:translateY(0) rotate(-10deg)}to{opacity:0;transform:translateY(-110px) rotate(14deg)}}

.songbox__audio{display:block;width:100%;margin:14px 0 6px}
.songbox__hint{margin-bottom:6px;font-weight:700}

/* lời bài hát */
.songbox__lyrics{margin-top:10px;padding:0;text-align:center;list-style:none}
.songbox__line{margin-bottom:4px;padding:4px 14px;font-size:1.25rem;font-weight:700;border-radius:999px;animation:lineIn .5s ease both;animation-delay:calc(var(--i) * .15s + .3s);transition:background .25s,color .25s,scale .25s}
.songbox__line--on{color:#fff;background:var(--pink);scale:1.06}
@keyframes lineIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.songbox__video{display:block;width:100%;aspect-ratio:16/9;background:#000;border:6px solid var(--ink);border-radius:22px}