/* Music Player Styling */
.music-player-container {
    position: fixed; /* Cố định vị trí */
    bottom: 0;      /* Ở cuối trang */
   border-radius: 0px;
    right:0;
    width: 100%; 
    height:1px;   /* Chiều rộng 100% */
    background-color: #f1f1f1; /* Màu nền giống Google */
     display: none;
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 1; /* Đảm bảo nằm trên các thanh menu khác */
  
    align-items: center;
    justify-content: center; /* Căn giữa nội dung */
    
    transition: all 0.3s ease-in-out; /* Thêm transition cho mọi thuộc tính */
  }
  
  .player-controls {
    display: flex;
    align-items: center;
    gap: 15px; /* Khoảng cách giữa các nút */
    width: 100%;
    max-width: 800px; /* Giới hạn chiều rộng tối đa */
  }
  
  .control-button {
    background: none;
    border: none;
    font-size: 1.2em; /* Kích thước icon */
    cursor: pointer;
    color: #5f6368; /* Màu icon xám giống Google */
    padding: 5px;
  }
  
  .control-button:hover {
    color: #000;
  }
  
  .track-info {
      flex-grow: 1; /* Cho phép phần thông tin bài hát chiếm không gian */
      text-align: center;
      font-size: 0.8em;
      color: #3c4043;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      min-width: 200px; /* Chiều rộng tối thiểu */
  }
  
  #seekBar {
    flex-grow: 2; /* Thanh seek chiếm nhiều không gian hơn */
    height: 2.5px;
    cursor: pointer;
    appearance: none; /* Xóa giao diện mặc định */
    width: 100%;
    background: #d3d3d3;
    border-radius: 5px;
    outline: none;
  }
  
  /* Kiểu cho thumb (con chạy) của thanh seek */
  #seekBar::-webkit-slider-thumb {
    appearance: none;
    width: 9px;
    height: 9px;
    background: #5f6368; /* Màu thumb */
    border-radius: 50%;
    cursor: pointer;
  }
  
  #seekBar::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #5f6368;
    border-radius: 50%;
    cursor: pointer;
    border: none;
  }
  
  
  .time-display {
      font-size: 0.8em;
      color: #5f6368;
      min-width: 80px; /* Đảm bảo đủ chỗ hiển thị thời gian */
      text-align: right;
  }
  
  #volumeBar {
      width: 80px; /* Chiều rộng thanh volume */
      height: 1.5px;
      cursor: pointer;
      appearance: none;
      background: #d3d3d3;
      border-radius: 5px;
      outline: none;
  }
  #volumeBar::-webkit-slider-thumb {
    appearance: none;
    width: 8px;
    height: 8px;
    background: #5f6368;
    border-radius: 50%;
    cursor: pointer;
  }
  #volumeBar::-moz-range-thumb {
      width: 10px;
      height: 10px;
      background: #5f6368;
      border-radius: 50%;
      cursor: pointer;
      border: none;
  }
  
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
      .music-player-container {
          padding: 8px 10px;
      }
      .player-controls {
          gap: 8px;
          flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
          justify-content: center;
      }
      .track-info {
         order: -1; /* Đẩy thông tin bài hát lên đầu */
         width: 100%;
         text-align: center;
         margin-bottom: 5px;
      }
      #seekBar {
          width: calc(100% - 100px); /* Điều chỉnh chiều rộng thanh seek */
          order: 1; /* Đặt thứ tự hiển thị */
      }
      .time-display {
          order: 2;
          min-width: auto;
      }
      .control-button {
          font-size: 1.3em;
      }
       #prevButton, #playPauseButton, #nextButton {
         order: 3;
       }
       #volumeButton, #volumeBar {
         order: 4;
       }
       #volumeBar{
          width: 60px;
       }
  }