/* 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: 500px;
  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: 1000px;         /* trang tìm kiếm: gấp đôi trang album */
}

/* lad-player.css (bản gốc) đặt #list_media_div{height:300px}. Đó là selector ID
   nên thắng mọi luật .playlist_scrollbar ở trên bất kể thứ tự nạp — muốn đổi
   chiều cao playlist thì phải ghi đè cũng bằng ID, không phải bằng max-height. */
#list_media_div { height: 500px; }
.nkl-wide #list_media_div { height: 1000px; }
.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; }
}

/* ── MENU TRÊN ĐIỆN THOẠI ────────────────────────────────────────────────────
   Menu gốc là float ngang, cao cố định 36px, dropdown mở khi RÊ CHUỘT — trên
   điện thoại vừa tràn ngang vừa không rê được. Dưới 700px chuyển sang kiểu
   Bootstrap navbar: hamburger mở/đóng, bấm mục cha để xổ mục con.
   Trên màn rộng nút bị ẩn nên desktop giữ nguyên 100% như bản gốc. */
.nkl-menu-btn { display: none; }

@media (max-width: 700px) {
  /* Nút hamburger — đặt BÊN TRÁI logo */
  .nkl-menu-btn {
    display: block;
    position: absolute; top: 10px; left: 8px; z-index: 20;
    width: 42px; height: 38px;
    background: rgba(0,0,0,.35); border: 1px solid #666; border-radius: 4px;
    padding: 8px; cursor: pointer;
  }
  .nkl-menu-btn span {
    display: block; height: 2px; margin: 4px 0; background: #eee; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nkl-menu-btn.nkl-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nkl-menu-btn.nkl-active span:nth-child(2) { opacity: 0; }
  .nkl-menu-btn.nkl-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* Logo dịch sang phải để chừa chỗ cho nút hamburger bên trái */
  #header-content > div:first-of-type { display: block !important; padding-left: 58px; }
  /* CSS gốc có @media(max-width:500px){ .img_logo{width:40%} } — chỉ đặt max-width
     thì không thắng được, phải ghi đè chính thuộc tính width. Ảnh gốc rộng 225px
     nên width:auto cho ra đúng cỡ thật, to hơn hẳn 40% (=133px). */
  .img_logo {
    width: auto !important; max-width: 240px; height: auto;
    display: block; padding-top: 6px; margin-top: 0 !important;
  }
  #header-content { min-height: 0; background-image: none; padding-bottom: 4px; }

  /* Ô tìm + nút Tìm phải NẰM CÙNG HÀNG. Bản gốc dùng float nên khi ép input rộng
     100% thì nút bị đẩy xuống dòng — chuyển sang flex và huỷ float bằng !important. */
  #header-content form {
    float: none !important; clear: both;
    display: flex !important; gap: 6px;
    margin: 8px 10px 6px 8px !important;
  }
  #header-content form input[type=text] {
    float: none !important; flex: 1 1 auto; width: auto !important;
    min-width: 0; padding: 7px 9px !important; box-sizing: border-box;
  }
  #header-content form input[type=submit] {
    float: none !important; flex: 0 0 auto; padding: 7px 16px !important;
  }

  /* Thanh menu: bỏ định vị tuyệt đối + chiều cao cứng của bản gốc */
  .wp-topmenu {
    position: static !important; height: auto !important;
    background: #1b1b1b !important; padding: 0 !important; width: 100%;
  }
  .wp-topmenu .topmenu { display: none; float: none; height: auto; }
  .wp-topmenu.nkl-open .topmenu { display: block; }

  .topmenu > li {
    float: none !important; display: block; margin: 0 !important;
    border-bottom: 1px solid #333;
  }
  .topmenu > li > a {
    display: block; padding: 11px 14px; color: #ddd !important;
    font-size: 15px; line-height: 1.2;
  }
  .topmenu > li.cosubmenu > a::after { content: " ▾"; color: #888; }
  .topmenu > li.nkl-sub-open > a::after { content: " ▴"; }

  /* Dropdown: mặc định đóng, mở khi bấm mục cha. Bỏ định vị tuyệt đối + cột. */
  .threecol, .albumcol {
    display: none !important; position: static !important;
    width: 100% !important; float: none !important;
    background: #262626 !important; border: 0 !important;
    box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  }
  .topmenu > li.nkl-sub-open .threecol,
  .topmenu > li.nkl-sub-open .albumcol { display: block !important; }
  .threecol ul, .albumcol ul, .mnalbum {
    float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
  }
  .threecol li, .albumcol li, .mnalbum li {
    float: none !important; display: block; width: 100% !important;
    margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #333 !important;
    height: auto !important;
  }
  .threecol li a, .albumcol li a, .mnalbum li a, .mnalbum li h2 a {
    display: block; padding: 9px 14px 9px 26px; color: #bbb !important; font-size: 14px;
  }
  /* Bản gốc dùng thủ thuật full-bleed .wptopalbum{width:200%;margin:0 -50%} nên
     nội dung tràn ngang 5px và lưới album lệch trái. Trên điện thoại bỏ thủ thuật
     đó đi cho các thẻ album thẳng hàng; desktop vẫn giữ nguyên như bản gốc. */
  .wptopalbum { width: 100% !important; margin: 0 0 10px !important; }
  /* .sltopalbum là ẢNH NỀN xanh tím (slide-4.jpg) phủ sau khối Top album, KHÔNG
     phải slide trang trí. Bản gốc để ảnh ở cỡ thật (500px) rồi cắt bằng
     overflow:hidden — ép co/object-fit sẽ làm méo màu. Không đụng vào nữa. */
  #page-content, #page-music, #page-music1 { padding-left: 6px; padding-right: 6px; }
  .other-album { margin: 10px 0 0 !important; }
  body { overflow-x: hidden; }

  /* Ảnh bìa trong dropdown "Album tuyển chọn" chiếm chỗ trên màn hẹp */
  .mnalbum li img { display: none !important; }
  .mnalbum li h2 { margin: 0 !important; font-size: 14px !important; }
  .mnalbum li p { display: none !important; }
}