.music-wrap{
  width: min(var(--page-w, 800px), calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  display: grid;
  place-items: center;

  /* gọn để không kéo trang dài */
  padding: 0.6rem 0 1.1rem;
}

:root{
  --player-w: 430px;
  --album-size: 104px;
  --album-left: 34px;
  --track-pad-left: 170px;
}

/* ✅ đẩy player xuống thêm 20px */
#player-container{
  position: relative;
  width: min(var(--player-w), calc(100vw - 2rem));
  height: 190px;            /* đủ headroom cho track trượt lên -102px */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;

  margin-top: 20px;         /* NEW: đẩy xuống */
}

#player{
  position: relative;
  width: min(var(--player-w), calc(100vw - 2rem));
  height: 100px;
  z-index: 3;
}

/* ✅ trạng thái bình thường nằm -6px (không hở) */
#player-track{
  position: absolute;
  top: -6px;                /* NEW */
  right: 15px;
  left: 15px;
  padding: 12px 18px 10px var(--track-pad-left);
  background-color: #fff7f7;
  border-radius: 15px 15px 0 0;

  /* ✅ giữ hiệu ứng trượt */
  transition: top 0.28s cubic-bezier(.2,.8,.2,1);
  z-index: 1;
}

/* ✅ khi play trượt lên */
#player-track.active{
  top: -102px;              /* NEW */
}

#album-name{
  color:#54576f;
  font-size:16px;
  font-weight:800;
}
#track-name{
  color:#acaebd;
  font-size:12px;
  margin:2px 0 10px 0;
}

#track-time{ height:12px; margin-bottom:3px; overflow:hidden; }
#current-time{ float:left; }
#track-length{ float:right; }

#current-time,#track-length{
  color: transparent;
  font-size: 11px;
  background-color: #ffe8ee;
  border-radius: 10px;
  transition: 0.22s ease all;
}
#track-time.active #current-time,
#track-time.active #track-length{
  color:#f86d92;
  background-color: transparent;
}

#seek-bar-container,#seek-bar{ position:relative; height:4px; border-radius:4px; }
#seek-bar-container{ background-color:#ffe8ee; cursor:pointer; }

#seek-time{
  position:absolute;
  top:-29px;
  color:#fff;
  font-size:12px;
  white-space:pre;
  padding:5px 6px;
  border-radius:4px;
  display:none;
  background-color:#3b3d50;
}
#s-hover{
  position:absolute;
  top:0; bottom:0; left:0;
  opacity:.2;
  z-index:2;
  background-color:#3b3d50;
}
#seek-bar{
  position:absolute;
  top:0; bottom:0; left:0;
  width:0;
  background-color:#fd6d94;
  transition:0.2s ease width;
  z-index:1;
}

#player-content{
  position:relative;
  height:100%;
  background-color:#fff;
  box-shadow:0 24px 60px #656565;
  border-radius:15px;
  z-index:2;
}

/* album art cũng trượt mượt theo play/pause */
#album-art{
  position:absolute;
  top:-36px;
  width: var(--album-size);
  height: var(--album-size);
  margin-left: var(--album-left);

  transition: top 0.28s cubic-bezier(.2,.8,.2,1), box-shadow 0.28s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 0 10px #fff;
  border-radius:50%;
  overflow:hidden;
}
#album-art.active{
  top:-54px;
  box-shadow:0 0 0 4px #fff7f7, 0 22px 44px -14px #afb7c1;
}

#album-art:before{
  content:"";
  position:absolute;
  top:50%;
  right:0; left:0;
  width:18px;
  height:18px;
  margin:-9px auto 0 auto;
  background-color:#d6dee7;
  border-radius:50%;
  box-shadow:inset 0 0 0 2px #fff;
  z-index:2;
}
#album-art img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* quay chỉ khi active */
#album-art.active img{
  animation: rotateAlbumArt 3s linear infinite;
}
@keyframes rotateAlbumArt{
  0%{transform:rotateZ(0)}
  100%{transform:rotateZ(360deg)}
}

#buffer-box{
  position:absolute;
  top:50%;
  right:0; left:0;
  height:13px;
  color:#1f1f1f;
  font-size:12px;
  text-align:center;
  font-weight:800;
  line-height:1;
  padding:6px;
  margin:-12px auto 0 auto;
  background-color: rgba(255,255,255,0.19);
  opacity:0;
  z-index:2;
  transition:0.1s linear all;
}
#album-art.buffering #buffer-box{ opacity:1; }

#player-controls{
  /* ✅ responsive: bỏ float để không bị đè khi màn hẹp */
  height: 100%;
  margin-left: calc(var(--album-left) + var(--album-size) + 18px);
  width: calc(100% - (var(--album-left) + var(--album-size) + 18px));
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow: visible;
}
.control{ width:auto; float:none; padding: 12px 0; flex: 1; display:flex; justify-content:center; }

.button{
  width: clamp(46px, 14vw, 56px);
  height: clamp(46px, 14vw, 56px);
  padding: 0;
  background-color:#b8b1bb;
  border-radius: 10px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 0;
  color:#000000;
  transition:0.2s ease all;
}

.button svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.button:hover{ background-color:#d6d6de; color:#fff; }

/* màn thấp -> co chút để đỡ scroll */
@media (max-height: 740px) {
  #player-container{ height: 175px; margin-top: 14px; }
  #player-track.active{ top: -96px; }
}

/* ✅ phone portrait / cửa sổ hẹp */
@media (max-width: 520px) {
  :root{ --album-size: 92px; --album-left: 18px; --track-pad-left: 145px; }
  #player-container{ height: 182px; margin-top: 16px; }
  #player-track.active{ top: -96px; }
  #album-art{ top: -32px; }
}

@media (max-width: 380px) {
  :root{ --album-size: 78px; --album-left: 14px; --track-pad-left: 125px; }
  #album-name{ font-size: 14px; }
  #track-name{ font-size: 11px; }
}