/* player gốc */
.audio-player-bar {
  position: relative; /* mặc định nằm trong flow */
  background: #fff;
  border-top: 1px solid #ccc;
}

/* player khi sticky */
.audio-player-bar.sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.15);
}

/* Speed bar mặc định */
#tts-speed-bar {
  background: #fff;
  padding: 0px 5px;
  transition: box-shadow 0.2s ease;
}


/* Sticky scroll speed */
#tts-scroll-speed-bar {
    width: 100%;
    background: #fff;
    padding: 0px 5px;
    transition: all 0.2s ease;
}

#tts-get-audio.sticky-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9999;
    padding: 10px 15px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
}


/* ================== PLAYER BUTTONS ================== */

/* Nút chung */
.audio-player-bar button {
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 3px 3px;
  cursor: pointer;
  transition: all 0.1s ease;
  color: #333;
}

/* Hover */
.audio-player-bar button:hover {
  background: #e9ecef;
  border-color: #999;
  color: #000;
}

/* Khi nhấn giữ (active) */
.audio-player-bar button:active {
  background: #0073aa;       /* xanh WordPress */
  border-color: #005f8d;
  color: #fff;
  transform: scale(0.95);    /* hiệu ứng nhấn */
}

/* Khi đang ở trạng thái "pause" hoặc đang bật */
.audio-player-bar button.active {
  background: #28a745;       /* xanh lá */
  border-color: #1e7e34;
  color: #fff;
}

/* ================== SELECT DROPDOWN ================== */
.audio-player-bar select {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 4px 8px;
  transition: all 0.1s ease;
}

.audio-player-bar select:hover {
  border-color: #666;
}

.audio-player-bar select:focus {
  border-color: #0073aa;
  box-shadow: 0 0 3px rgba(0, 115, 170, 0.5);
  outline: none;
}

/* ================== Player - playlist ================== */
#playlist-scroll {
  max-height: 300px;
  overflow-y: auto;
  background: #fdfdfd;
  border: 1px solid #eee;
  padding: 5px;
}
.tts-chapter-btn {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fafafa;
  color: #222;
  cursor: pointer;
  margin-bottom: 3px;
  padding: 2px 8px;
  transition: background 0.1s;
}
.tts-chapter-btn.active {
  background: #0073aa;
  color: #fff;
  border-color: #0073aa;
}