/* music.css — phần BỔ TRỢ cho template nkl.

   Giao diện chính là CSS GỐC của nhackhongloi.vn, nạp trước file này:
     /images/nkl/css/style.css              (khung trang)
     /images/nkl/public/css/lad-common.css
     /images/nkl/public/lad-player/lad-player.css   (player)
   File này chỉ thêm những gì bản gốc để trong JS/inline hoặc do AngularJS lo,
   và CỐ Ý không đè lên class nào của CSS gốc. */

/* ── Dòng bài đang phát ──────────────────────────────────────────────────────
   Bản gốc tô sáng bằng cách gán style trực tiếp trong ClassPlayer; ở đây dùng
   class .playing cho gọn. */
#tbl_play_list tr { transition: background .12s ease; }
#tbl_play_list tr:hover { background: rgba(255, 255, 255, .10); }
#tbl_play_list tr.playing { background: rgba(193, 39, 45, .35); }
#tbl_play_list tr.playing .td_row_music { font-weight: 700; color: #ffd479 !important; }

/* Danh sách dài thì cuộn trong khung, không kéo dài cả trang (giống bản gốc) */
.playlist_scrollbar {
  max-height: 420px;
  overflow-y: auto;
  overflow-x: hidden;
}
.playlist_scrollbar::-webkit-scrollbar { width: 8px; }
.playlist_scrollbar::-webkit-scrollbar-thumb { background: #666; border-radius: 4px; }
.playlist_scrollbar::-webkit-scrollbar-track { background: #2b2b2b; }

/* ── Con trỏ cho các nút điều khiển ── */
#btnPrev, #btnPlay, #btnNext, #volume_id,
#btnRandom, #btnLoopAll, #btnLoopOne,
#mediaProgress, #volumeProgress, #btnLimitTimeOff { cursor: pointer; }

/* Vùng bấm của thanh tua rộng hơn một chút cho dễ trúng trên điện thoại */
#cover_mediaProgress { padding: 4px 0; }

/* ── Hộp thoại hẹn giờ tắt ───────────────────────────────────────────────────
   Bản gốc dùng modal của Bootstrap 3 + jQuery; ở đây tự vẽ để khỏi kéo jQuery. */
.nkl-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, .55);
}
.nkl-modal-box {
  max-width: 400px; margin: 10vh auto 0;
  background: #fff; color: #333; border-radius: 4px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .4);
}
.nkl-modal-head {
  padding: 10px 14px; border-bottom: 1px solid #e5e5e5; font-size: 15px;
}
.nkl-modal-body { padding: 14px; font-size: 14px; line-height: 1.9; }
.nkl-modal-body label { font-weight: 400; cursor: pointer; }

/* ── Player rộng ở trang tìm kiếm ────────────────────────────────────────────
   Trang album chia 2 cột (.wp-dtleft 49%) nên player hẹp là đúng. Trang tìm
   kiếm không chia cột -> cho player chiếm hết khung, canh giữa, danh sách kết
   quả cao gấp đôi. CSS gốc khoá .player_section ở max-width 500px nên phải nới. */
.nkl-wide { width: 100%; float: none; margin: 0 auto; clear: both; }
.nkl-wide .wp-player { float: none; width: 100%; }
.nkl-wide .player_section {
  /* CSS gốc khoá .player_section ở max-width 500px (vừa cột 49% của trang album).
     Trang tìm không chia cột nên nới hết khung. min-width phải bỏ luôn kẻo trên
     màn hẹp nó đẩy ngang. */
  max-width: 100% !important;
  min-width: 0 !important;
  width: 100%;
  margin: 0 auto;
  background-image: none;      /* trang tìm không có ảnh bìa -> không dùng ảnh nền */
}
.nkl-wide #cover_mediaProgress,
.nkl-wide #mediaProgress { max-width: 100% !important; width: 100%; }
.nkl-wide .playlist_scrollbar {
  float: none;
  max-height: 840px;          /* gấp đôi trang album (420px) */
}
.nkl-wide #tbl_play_list { width: 100%; }

/* ── Điện thoại ──────────────────────────────────────────────────────────────
   CSS gốc (lad-player.css) đã tự đổi giữa #tbl_control_desktop và
   #tbl_control_mobi ở mốc 500px, nên ở đây chỉ chỉnh cho gọn thêm:
   ảnh bìa thấp lại (bản gốc đóng cứng 258px, trên màn hẹp bị thừa/hụt),
   2 cột player xếp dọc, và danh sách thấp hơn cho vừa màn hình. */
@media (max-width: 700px) {
  .wp-dtleft, .wp-dtright { width: 100%; float: none; }
  #_player_section {
    padding-top: 56% !important;      /* theo tỉ lệ ảnh bìa, không đóng cứng px */
    background-size: cover !important;
    background-position: center !important;
  }
  .playlist_scrollbar, .nkl-wide .playlist_scrollbar { max-height: 60vh; float: none; }
  #playingName { font-size: 13px !important; }
  .icon_control { font-size: 28px; }
  #tbl_control_mobi .playing_pos, #tbl_control_mobi .duration1 { font-size: 12px; color: #ddd; }
}