/* ===== Nhạc nền (chỉ PC) ===== */
.bgm{--p:0;--th:22px;margin-left:auto;align-self:center;display:flex;align-items:center;gap:14px}
.bgm-panel{display:flex;align-items:center;gap:16px;overflow:hidden;max-width:0;opacity:0;visibility:hidden;transition:max-width .45s ease,opacity .3s ease,visibility 0s linear .45s}
.bgm.open .bgm-panel{max-width:480px;opacity:1;visibility:visible;transition:max-width .45s ease,opacity .35s ease .05s,visibility 0s}
.bgm-pp{flex:none;display:flex;align-items:center;justify-content:center;width:30px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.bgm-pp img{display:block;height:26px;width:auto}
.bgm-bar{position:relative;flex:none;width:clamp(180px,22vw,306px);height:var(--th)}
.bgm-bar .trk,.bgm-bar .fill{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px}
.bgm-bar .trk{background:rgba(255,255,255,.42)}
.bgm-bar .fill{background:linear-gradient(90deg,#ff5f6d,#ffa45b,#ffe45e,#7bed9f,#4cc9f0,#7b6cff,#e56bff);clip-path:inset(0 calc(100% - (var(--p) * (100% - var(--th)) + var(--th) / 2)) 0 0)}
.bgm-seek{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.bgm-seek:disabled{cursor:default}
.bgm-seek::-webkit-slider-runnable-track{height:var(--th);background:transparent}
.bgm-seek::-moz-range-track{height:var(--th);background:transparent}
.bgm-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--th);height:var(--th);border:0;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(4,30,56,.5)}
.bgm-seek::-moz-range-thumb{width:var(--th);height:var(--th);border:0;border-radius:50%;background:#fff;box-shadow:0 1px 6px rgba(4,30,56,.5)}
.bgm-toggle{position:relative;flex:none;padding:0;border:0;background:none;cursor:pointer;transition:transform .25s}
@media (hover:hover){.bgm-toggle:hover{transform:scale(1.08)}}
.bgm-toggle:focus-visible,.bgm-pp:focus-visible,.bgm-seek:focus-visible{outline:2px solid var(--c,#0ff);outline-offset:3px}
.note-fx{position:relative;display:block;width:clamp(36px,3.4vw,46px);height:clamp(36px,3.4vw,46px)}
.note-fx .part{position:absolute;inset:0}
.note-fx .part img{position:absolute;inset:0;width:100%;height:100%;display:block}
.note-fx .main{transform-origin:var(--o);animation:nbeat 3.4s ease-in-out infinite}
.note-fx .ghost{opacity:0;transform-origin:var(--o);animation:nfly 3.4s ease-out infinite;animation-delay:var(--dl,0s)}
@keyframes nbeat{0%,100%{transform:scale(1);opacity:1}5%{transform:scale(1.22)}10%{transform:scale(1)}15%{transform:scale(1.22)}20%{transform:scale(1)}28%{opacity:.5}34%{opacity:1}42%{opacity:.5}48%{opacity:1;transform:scale(1.1)}58%{transform:scale(1)}}
@keyframes nfly{0%,52%{opacity:0;transform:translate(0,0) rotate(0) scale(1)}58%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6)}}
@media (prefers-reduced-motion:reduce){.note-fx .main,.note-fx .ghost{animation:none}.note-fx .ghost{display:none}.bgm-panel{transition:none}}
@media (orientation:portrait),(max-width:768px){.bgm:not(.bgm-m){display:none!important}}
.bgm-home{margin-left:auto;align-self:center;min-height:clamp(36px,3.4vw,46px);display:flex;align-items:center}
.bgm-slot{flex:1 1 0;min-width:0;display:flex;justify-content:center;align-items:center;height:30px}
.bgm-slot .bgm{margin:0;--th:16px;gap:10px;animation:bgmIn .35s ease}
.bgm-slot .bgm-panel{gap:10px}
.bgm-slot .bgm-pp{width:22px;height:24px}
.bgm-slot .bgm-pp img{height:20px}
.bgm-slot .bgm-bar{width:clamp(130px,14vw,210px)}
.bgm-slot .note-fx{width:30px;height:30px}
@keyframes bgmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (orientation:portrait),(max-width:768px){.bgm-slot{display:none}}

/* Nốt nhạc: khi nhấp nháy sẽ ánh gradient cầu vồng chuyển động (cùng dải màu với thanh tiến trình) */
.note-fx .part::after{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:var(--o);background:linear-gradient(90deg,#ff5f6d,#ffa45b,#ffe45e,#7bed9f,#4cc9f0,#7b6cff,#e56bff,#ff5f6d);background-size:200% 100%;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;animation:nrain 3.4s ease-in-out infinite,nflow 1.1s linear infinite}
.note-fx .part:nth-child(1)::after{--m:url("../buttons/function%20buttons/btn-musicplayer-bolt1.webp")}
.note-fx .part:nth-child(2)::after{--m:url("../buttons/function%20buttons/btn-musicplayer-bolt2.webp")}
.note-fx .part:nth-child(3)::after{--m:url("../buttons/function%20buttons/btn-musicplayer-note.webp")}
@keyframes nrain{0%,100%{opacity:0;transform:scale(1)}5%{transform:scale(1.22)}10%{transform:scale(1)}15%{transform:scale(1.22)}20%{transform:scale(1)}26%{opacity:0}30%,34%{opacity:1}38%{opacity:.35}42%,46%{opacity:1}50%{opacity:0;transform:scale(1.1)}58%{transform:scale(1)}}
@keyframes nflow{from{background-position:0 0}to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.note-fx .part::after{animation:none;opacity:0}}

/* Mobile: chỉ hiện nút nốt nhạc (bật/tắt nhạc, không xổ player) */
.bgm-m{gap:0}
.bgm-m .bgm-panel{display:none}
.bgm-m .bgm-toggle{display:block;width:100%;height:100%}
.bgm-m .note-fx{width:100%;height:100%}
.bgm-m .note-fx{transition:opacity .3s ease}
/* đã bỏ: nút nhạc mobile không còn mờ riêng 50% khi tạm dừng, đồng bộ độ mờ với nút switch */

/* Đang phát: thanh tiến trình chạy gradient cầu vồng chuyển động (vòng lặp liền mạch) */
.bgm.is-playing .bgm-bar .fill{background:linear-gradient(90deg,#ff5f6d,#ffa45b,#ffe45e,#7bed9f,#4cc9f0,#7b6cff,#e56bff,#ff5f6d);background-size:200% 100%;animation:nflow 2.4s linear infinite}
@media (prefers-reduced-motion:reduce){.bgm.is-playing .bgm-bar .fill{animation:none}}