/* ====== MAIN LAYOUT ====== */

.chordsMain { padding: 24px 0 48px;
    margin: 0 auto;
    color: #191818;
}

.chordsLayout {
  display: grid;
  grid-template-columns: 660px 1fr;
  gap: 18px;
  align-items: start;
 
}

/* responsive */
@media (max-width: 980px) {
  .chordsLayout { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .chordsLayout { gap: 0px; }
}

/* ====== PANELS ====== */

.panelCard {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
 
}
.faqCard{
  height: 300px;
}
.panelvideoyt{
  width: min(var(--container), calc(100% - 40px));
  margin:0 auto ;
}
.panelHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.panelTitle {
  font-size: 16px;
  margin: 0;
}

.small { font-size: 12px;color: #000;}
/* .muted { opacity: 1; } */

/* ====== SEARCH ====== */
.searchRow {
  display: flex;
  gap: 10px;
  align-items: center;
}

.input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  outline: none;
}
 /* card 
 .card-media {
    width: 200px;
    height: 90px;
    margin: 0 auto 12px;
  }
  
  .card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  } */

/* ====== SONG LIST ====== */
.list{
  display: flex;          /* bỏ grid 3 cột */
  flex-direction: column;
  gap: 6px;
}
 
/* item chỉ còn text */

/* hover/active */
.listItem:hover { background: #f3f3f3; }
.listItem.is-active { background: #fff; border-color: rgba(0,0,0,0.18); }

/* ẩn meta nếu anh không cần */
.listItemMeta { display: none; }
/* .listItemTitle { font-weight: 700; } */


/* ====== TOOLS ====== */
.toolGrid { display: grid; gap: 10px; }
.toolCard {
  display: block;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fafafa;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.toolCard:hover { background: #f3f3f3; }
.toolTitle { font-weight: 700; margin-bottom: 6px; }
.toolDesc { line-height: 1.4; }
.toolChip {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
}

/* ====== RIGHT SIDE ====== */
.rightPanel { display: grid; grid-template-rows: repeat(3,1fr); }

.needHelpRow {
  display: grid;
  /* grid-template-columns: 1fr 1fr; */
  /* gap: 18px; */
  height: 320px;
}
@media (max-width: 980px) {
  .needHelpRow { grid-template-columns: 1fr; }
}

/* ====== ALBUMS ====== */
/* ALBUM: 1 card / row */
.albumGrid{
    display: grid;
    /* grid-template-columns: 1fr; */
    /* gap: 12px; */
  }
@media (max-width: 1200px) {
  .albumGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .albumGrid { grid-template-columns: 1fr; }
}

/* ====== FAQ ====== */
.faqList { display: grid; gap: 8px; }
.faqItem {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 5px 5px;
  background: #fafafa;
}
.faqItem summary { cursor: pointer; font-weight: 600; }
.faqBody { margin-top: 8px; line-height: 1.5; }

/* ====== CHAT PLACEHOLDER ====== */
.chatCard { min-height: 250px; }
.chatBox { display: grid; gap: 10px; }
.chatMessages {
  min-height: 150px;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,0.2);
  padding: 12px;
  background: #fff;
}
.chatComposer { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

/* ====== VIDEOS ====== */
.videoGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px) {
  .videoGrid { grid-template-columns: 1fr; }
}
.videoFrame {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
  background: #000;
  aspect-ratio: 16 / 9;
}
.videoFrame iframe.video {
  width: 100%;
  height: 100%;
  border: 0;
}
/* ===== SONG LIST: fixed height + internal scroll ===== */
/* ===== SONG PANEL: fixed height + internal scroll (stable) ===== */
.songPanel{
  height: 420px;              /* chỉnh tuỳ ý */
  display: flex;
  flex-direction: column;
  overflow: hidden;           /* QUAN TRỌNG: chặn list đẩy panel */
}

/* header của panel không co giãn */
.songPanel .panelHead{
  flex: 0 0 auto;
}

/* list chiếm phần còn lại và scroll */
.songPanel #songsList{
  flex: 1 1 auto;
  min-height: 0;              /* QUAN TRỌNG: để overflow hoạt động trong flex */
  overflow-y: auto;
  padding-right: 6px;
}

/* list dạng text */
.songPanel #songsList.list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* item 1 dòng */
.songPanel .listItem{
  display: block;
  /* padding: 8px 10px; */
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: #566dbe;

}

/* scrollbar đẹp */
.songPanel #songsList::-webkit-scrollbar{ width: 8px; }
.songPanel #songsList::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}
.songPanel #songsList::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
}