/* Ambient Music - nút bật/tắt nhạc
   Đổi màu bằng cách ghi đè trong CSS của theme, ví dụ: #vm-player{--vm-gold:#b89455;--vm-bg:rgba(36,24,16,.9)} */
.vm{
  --vm-gold:#C9A865;--vm-bg:rgba(36,24,16,.86);
  position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:9990;
  display:flex;align-items:center;gap:12px;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.vm--none{display:none}
.vm--left{left:calc(20px + env(safe-area-inset-left,0px))}
.vm--right{right:calc(20px + env(safe-area-inset-right,0px));flex-direction:row-reverse}

.vm-btn{
  display:grid;place-items:center;width:44px;height:44px;padding:0;cursor:pointer;
  border:1px solid rgba(201,168,101,.7);border-radius:50%;
  background:var(--vm-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .4s,background .4s,transform .4s;
}
.vm-btn:hover{border-color:var(--vm-gold);transform:scale(1.06)}
.vm-btn:focus-visible{outline:2px solid var(--vm-gold);outline-offset:3px}

.vm-bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.vm-bars i{display:block;width:2px;height:100%;background:var(--vm-gold);transform-origin:bottom;transform:scaleY(.25);transition:opacity .4s}
.vm[data-state="paused"] .vm-bars i{opacity:.55}
.vm[data-state="playing"] .vm-bars i{animation:vm-eq 1.2s ease-in-out infinite}
.vm[data-state="playing"] .vm-bars i:nth-child(2){animation-delay:.2s;animation-duration:1s}
.vm[data-state="playing"] .vm-bars i:nth-child(3){animation-delay:.45s;animation-duration:1.4s}
.vm[data-state="playing"] .vm-bars i:nth-child(4){animation-delay:.1s;animation-duration:1.1s}

/* Trình duyệt chặn tự phát: vòng sáng nhẹ nhắc khách nhấn */
.vm[data-state="blocked"] .vm-btn{animation:vm-ring 2.4s ease-out infinite}

.vm-hint{
  padding:8px 14px;border:1px solid rgba(201,168,101,.4);background:var(--vm-bg);
  color:#F1E7D3;font-size:12px;letter-spacing:.08em;white-space:nowrap;pointer-events:none;
  opacity:0;transform:translateX(-6px);transition:opacity .6s,transform .6s;
}
.vm--right .vm-hint{transform:translateX(6px)}
.vm-hint.is-on{opacity:1;transform:none}

@keyframes vm-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes vm-ring{0%{box-shadow:0 0 0 0 rgba(201,168,101,.5)}100%{box-shadow:0 0 0 14px rgba(201,168,101,0)}}

@media (max-width:599px){
  .vm{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .vm--left{left:calc(16px + env(safe-area-inset-left,0px))}
  .vm--right{right:calc(16px + env(safe-area-inset-right,0px))}
  .vm-btn{width:40px;height:40px}
  .vm-hint{padding:7px 12px;font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .vm *,.vm-btn{animation:none!important;transition:none!important}
  .vm[data-state="playing"] .vm-bars i{transform:scaleY(.7)}
}