body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at top, #222 0, #000 60%);
  color: #eee;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}
.vf-stavenote-selected path{stroke:#ff0000; fill:#ff0000}
.vf-notehead path { fill: currentColor !important; stroke: currentColor !important; }
/* Đảm bảo container có position: relative */
#VexTabDiv_0 {
  position: relative;
}

/* Thanh timeline chạy trên sheet */
#sheetTimeline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  opacity: 0.1;
  padding:15px;
  margin-left: -10px;
  background: red;        /* tuỳ bạn */
  pointer-events: none;
  /* quan trọng: chuyển động mượt */
  transition: transform 0.10s linear;
  will-change: transform;
  display: none;          /* ban đầu ẩn */
}
/* 📱 Mobile */
@media (max-width: 768px) {
  #sheetTimeline {
    padding: 6px;
      margin-left: -7px;
  }
}

/* --- RESET NHẸ --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* --- KHUNG TRỐNG --- */
.drum-stage {
  position: relative;
  width: min(900px, 100vw);
  aspect-ratio: 16 / 9;
  padding: 16px;
  border-radius: 24px;
  overflow: hidden;
}

.drum-stage::after {
  content: "DRUM KIT";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.2);
  transition: opacity 0.25s ease;

}


/* --- VÙNG BỐ TRÍ CÁC PAD --- */
.drum-kit {
  position: relative;
  width: 95%;
  height: 95%;
  background: #222;
  padding:5px;
}

/* --- PAD CHUNG --- */
.drum-pad {
  position: absolute;
  border-radius: 50%;
  border: 5px solid #444;
  background: radial-gradient(circle at 30% 30%, #555 0%, #222 50%, #000 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.07s ease-out,
    box-shadow 0.07s ease-out,
    background 0.15s ease-out;
}

.drum-pad span.label-main {
  font-size: 10px;
}
.drum-pad span.label-key {
  font-size: 10px;
  opacity: 0.5;
  margin-top: 2px;
  display: block;
}

.drum-pad:active,
.drum-pad.is-active {
  transform: translateY(3px) scale(1.1);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.7),
    0 0 15px rgba(0, 200, 255, 0.5);
  background: radial-gradient(circle at 45% 45%, #888 0%, #333 55%, #050505 100%);
}

/* --- CYMBAL MỎNG HƠN --- */
.drum-pad.cymbal {
  background: radial-gradient(circle at 30% 20%, #f5e38a 0%, #a38e46 45%, #3b3418 100%);
  border: 3px solid #a38e46;
}
.drum-pad.cymbal:active,
.drum-pad.cymbal.is-active {
  background: radial-gradient(circle at 45% 45%, #f5e38a 0%, #a38e46 45%, #3b3418 100%);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.7),
    0 0 16px rgba(255, 225, 120, 0.6);
}

.drum-pad.pedal {
  background: radial-gradient(circle at 30% 20%, #ccc 0%, #666 45%, #ccc 100%);
  border: 3px solid #666;
}


/* --- KICK (TRỐNG ĐẠI) --- */
.drum-pad.kick {
  width: 30%;
  height: 30%;
  left: 37%;
  bottom: 7%;
  border-width: 10px;
}

/* --- SNARE --- */
.drum-pad.snare {
  width: 22%;
  height: 22%;
  left: 18%;
  bottom: 25%;
}


.drum-pad.hightom {
  width: 18%;
  height: 18%;
  left: 37%;
  bottom: 43%;
}
.drum-pad.midtom {
  width: 18%;
  height: 18%;
  left: 55%;
  bottom: 37%;
}
.drum-pad.lowtom {
  width: 18%;
  height: 18%;
  left: 67%;
  bottom: 21%;
}


/* --- HI-HAT (TRÁI TRÊN) --- */
.drum-pad.hihat_pedal {
  width: 15%;
  height: 10%;
  left: 15%;
  bottom: 7%;
}

.drum-pad.hihat{
  width: 22%;
  height: 22%;
  left: 6%;
  top: 20%;
}
.drum-pad.hihat_open {
  width: 15%;
  height: 15%;
  left: 18%;
  top: 15%;
}
.drum-pad.hihat_close {
  width: 15%;
  height: 15%;
  left: 15%;
  top: 35%;
}




/* --- CRASH & RIDE (PHẢI TRÊN) --- */
.drum-pad.crash {
  width: 26%;
  height: 26%;
  left: 40%;
  top: 5%;
}

.drum-pad.crash2 {
  width: 16%;
  height: 16%;
  left: 30%;
  top: 15%;
}

.drum-pad.ride {
  width: 26%;
  height: 26%;
  left: 70%;
  top: 20%;
}


/* RESPONSIVE MOBILE */
@media (max-width: 700px) {
  .drum-stage {
    border-radius: 16px;
  }
  .drum-pad span.label-main {
    font-size: 10px;
  }
  .drum-pad span.label-key {
    font-size: 9px;
  }
}
.drum-controls {
  position: ;
  top: 10px;
  left: 16px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.6);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  z-index: 9999999
}

.drum-controls label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: #ccc;
}

.drum-controls select,
.drum-controls input {
  font-size: 11px;
  padding: 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(10,10,10,0.8);
  color: #eee;
}

.drum-controls button {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,200,255,0.5);
  background: rgba(0,0,0,0.85);
  color: #e8fbff;
  cursor: pointer;
}
.drum-controls button:hover {
  background: rgba(0,200,255,0.15);
}
/* === LAYOUT: TABLE TRÁI + DRUM STAGE PHẢI === */
.drum-layout {
  align-items: stretch;
  width: 100%;

}

/* Lúc trước body đang center .drum-stage,
   giờ center .drum-layout thay cho .drum-stage */

/* === TABLE PATTERN 16 STEP === */
.pattern-grid {
  border-collapse: collapse;
  font-size: 11px;
  background: rgba(10, 10, 10, 0.9);
  border-radius: 10px;
  overflow: hidden;
  width:100%;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    transition: width 0.25s ease;

}

.pattern-grid th,
.pattern-grid td {
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  padding: 4px;
  min-width: 20px;
  color: #ccc;
}

.pattern-grid thead th {
  background: linear-gradient(135deg, #202020, #111);
  font-weight: 600;
  color: #eee;
}

.pattern-grid tbody th {
  background: linear-gradient(135deg, #262626, #151515);
  text-align: left;
  padding-inline: 6px;
  font-weight: 600;
}

/* Ô step bình thường */
.pattern-grid td.step {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

/* Hover */
.pattern-grid td.step:hover {
  background: rgba(0, 200, 255, 0.15);
}

/* Ô step được chọn (sáng lên) */
.pattern-grid td.step.on {
  background: rgba(0, 200, 255, 0.4);
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.9) inset;
  color: #fff;
}

/* Nhóm 4 bước cho dễ nhìn (1–4 | 5–8 | 9–12 | 13–16) */
.pattern-grid td.step.bar-border-right {
  /*border-right-color: rgba(0, 200, 255, 0.6);*/
  border-right-color: #FFF;
}
/* ====== FULL-WIDTH SEQUENCER GRID ====== */
#patternGrid {
  width: 100%;
  padding: 3px;
  margin: 0;
}

.pattern-grid-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: #1a2438;
  border-radius: 1px;
  overflow: hidden;
}
/* Beat shading đúng nhịp */
.pattern-grid-table td.step.beat-even {
  background: rgba(255,255,255,0.05);
}

.pattern-grid-table td.step.beat-odd {
  background: rgba(255,255,255,0.09);
}

/* ON giữ highlight mạnh */
.pattern-grid-table td.step.on {
  background: rgba(0,200,255,0.55) !important;
}

/* ON + beat */
.pattern-grid-table td.step.on.beat-odd {
  background: rgba(0,200,255,0.65) !important;
}

.pattern-grid-table th,
.pattern-grid-table td {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px;         /* Ô lớn hơn */
  text-align: center;
  color: #d7e0f0;
  cursor: pointer;
  font-size: 100%;
  font-weight: normal;
}

.pattern-grid-table th:first-child {
  width: 110px;          /* Cột tên trống */
  text-align: left;
  padding-left: 10px;
}

.pattern-grid-table td.step {
  background: rgba(255,255,255,0.05);
  transition: background 0.12s;
}

.pattern-grid-table td.step:hover {
  background: rgba(0,200,255,0.22);
}

.pattern-grid-table td.step.on {
  background: rgba(0,200,255,0.55);
  box-shadow: inset 0 0 8px rgb(0 200 255 / 0.9);
  color: #fff;
  font-weight: bold;
}

/* beat */
.pattern-grid-table .bar-border-right {
  border-right: 1px solid rgba(0,200,255,0.6);
}

/* 🔥 bar (dày hơn) */
.pattern-grid-table .bar-border-strong {
  border-right: 3px solid #ffffff;
}

/* Ô đang được play (cursor chạy) */
.pattern-grid-table td.step.playing {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.95);
}
.pattern-grid-table td.step:nth-child(even) {
  background: rgba(255,255,255,0.09);   /* sáng nhẹ hơn */
}
.pattern-grid-table td.step.on:nth-child(even) {
  background: rgba(0,200,255,0.65);      /* sáng mạnh hơn ô ON lẻ */
  box-shadow: inset 0 0 10px rgba(0,200,255,1);
}
.selected-row {
  background: #333333 !important;  /* xanh dịu */
  transition: background 0.15s ease;
}


.liLesson{color:#000; font-weight: 100;}
.liLesson:hover{color:#006699; font-weight: 100; text-decoration: underline;}
.ulLessons{
  margin: 10px;
  padding-left: 18px;
  columns: 4;
}

/* Mobile */
@media (max-width: 768px){
  .ulLessons{
    columns: 2;
  }
}

.text_lyric{color:#000; font-size: 120%; font-weight: bold}