div.vextab-auto > .vf-stavenote:hover{stroke:#009900; fill:#009900}
.vf-stavenote-selected{stroke:#ff0000; fill:#ff0000}
.vf-stavechord-selected{stroke:#ff0000; fill:#ff0000}

div.vextab-auto > .vf-notehead:hover{stroke:#ff00ff; fill:#ff00ff}
.vf-notehead-selected{stroke:#ff0000; fill:#ff0000}
#vf_status{position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background: #006699; color:#ffffff}

/* music */
#Div_Sheets {
  width: 100%;
  max-width: 100%;
  overflow: hidden;   /* nếu có float hoặc svg gây tràn */
}
.stave_line{}
.stave_line:hover{stroke:#006699;}
.vf-stavenote path{stroke:#000000; fill:#000000}
.vf-stavenote:hover path{stroke:#009900; fill:#009900}
.vf-stavenote-selected path{stroke:#ff0000; fill:#ff0000; stroke-width: 5px;}
.vf-stavechord-selected path{stroke:#ff0000; fill:#ff0000; stroke-width: 5px;}


.divLyric {
    transform-origin: left top;
}

/* Nếu width dưới 500px: scale 0.8 (hoặc tùy bạn) */
@media (max-width: 500px) {
    .divLyric {
        transform: scale(0.7);
        font-size: 70%;
    }
}

#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 */
}

.text_lyric{
  stroke-width:0.3;
 fill:#000000; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:12pt;
 font-weight:normal; font-style:normal; color:#000000;
}

.text_lyric2{
  stroke-width:0.3;
 fill:#81230e; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:12pt;
 font-weight:normal; font-style:normal; color:#81230e;
}

.text_lyric3{
  stroke-width:0.3;
 fill:#000000; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:12pt;
 font-weight:normal; font-style:normal; color:#000000;
}

.lyric-selected{
  color: #ff0000;
  font-weight: bold;
  font-size: 13pt;
  transform: scale(1.35);
  filter: blur(0.5px) drop-shadow(0 0 0px #ff2222);
  transition: all 0.15s ease-out;
}
.text_chord{
   stroke-width:0.3;
    fill:#ff00ff; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:14pt;
    font-weight:bold; font-style:normal; color:#FF00ff;
}
.vextab-auto.playing {
  outline: 2px solid #ff9800;
  box-shadow: 0 0 10px rgba(255,152,0,.6);
  transition: box-shadow .3s;
}

#Div_Karaoke span{}
.kara-container {
  text-align: center;
  font-family: HHH;
  color:#666; font-size: 18px;
}

/* Mỗi dòng lyric */
.kara-line {
  margin: 4px 0;
  line-height: 1.4;
}

/* Dòng hiện tại & dòng kế tiếp (2-line karaoke style) */
.kara-line.current {
  font-size: 28px;
  font-weight: 600;
}

.kara-line.next {
  font-size: 24px;
  opacity: 0.9;
}

/* Từ bình thường */
.kara-word {
  padding: 0 3px;
  color: #888;
  transition:
    color 0.15s linear,
    text-shadow 0.15s linear,
    transform 0.15s linear,
    opacity 0.15s linear;
}

/* Từ đã hát qua rồi */
.kara-word.passed {
  color: #666;
  opacity: 1;
}

/* Từ đang hát */
.kara-word.active {
  color: #eb03fc;
  text-shadow:
    0 0 2px #fff,
    0 0 2px #ccc,
    0 0 2px #eb03fc;
  transform: scale(1.2);
}


/* --- KHUNG PIANO --- */
  :root{
    --white-w: 54px;     /* chiều rộng phím trắng */
    --white-h: 220px;    /* chiều cao phím trắng  */
    --black-w: 34px;     /* chiều rộng phím đen   */
    --black-h: 140px;    /* chiều cao phím đen    */
    --gap: 2px;          /* khe giữa các phím     */
    --radius: 8px;
    --face: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Segoe UI Emoji";


    --white-w: 40px;     /* chiều rộng phím trắng */
    --white-h: 70px;    /* chiều cao phím trắng  */
    --black-w: 27px;     /* chiều rộng phím đen   */
    --black-h: 40px;    /* chiều cao phím đen    */

  }
  *{box-sizing:border-box}

  .controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .btn{appearance:none; border:1px solid #33406e; background:#16214a; color:#e6ebff; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600}
  .btn:active{transform:translateY(1px)}
  .row{display:flex; gap:10px; align-items:center}
  label{opacity:.9; font-size:14px}
  input[type="range"]{width:180px}

  /* Vùng piano */
  .stage{padding:0px;}
  .piano-wrap{
    position:relative;
    width:max-content;
    margin:0;
  }

  #pianoKeys{
    width:max-content;
  }

  /* Hàng phím trắng */
  .whites{display:flex; gap:var(--gap);}
  .key.white{
    width:var(--white-w); height:var(--white-h);
    background:linear-gradient(#fff, #e9eef7);
    border:1px solid #c9d4eb; border-bottom:4px solid #b7c6e6;
    border-radius:0 0 var(--radius) var(--radius);
    position:relative; user-select:none;
    box-shadow:inset 0 -8px 0 rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.35);
  }
  .key.white .label{position:absolute; bottom:8px; left:0; right:0; text-align:center; font-size:10px; color:#666666; font-weight:700}
  .key.white:hover{filter:brightness(.95); }
  /* Hàng phím đen (nằm đè lên) */
  .blacks{position:absolute; left:0; top:0; height:var(--black-h); pointer-events:none}
  .key.black{
    width:var(--black-w); height:var(--black-h);

    background:linear-gradient(#1c2446, #0e1329);
    border:1px solid #0a0f22; border-bottom:3px solid #050816;
    border-radius:0 0 8px 8px; position:absolute; z-index:5; pointer-events:auto;
    box-shadow:0 8px 18px rgba(0,0,0,.6), inset 0 -6px 0 rgba(255,255,255,.05);
  }
  .key.black .label{position:absolute; bottom:6px; left:0; right:0; text-align:center; font-size:9px; color:#9db2ff; font-weight:700}
  .key.black:hover{filter:brightness(2); }

  /* Trạng thái nhấn */
  .key.active.white{filter:brightness(.7); transform:translateY(1px); border-bottom-color:#91a6d9}
  .key.active.white  .label{color:#000000}

  .key.active.black{filter:brightness(2.2)}

  /* Hỗ trợ responsive: scale nhỏ lại khi cửa sổ hẹp */
  .piano-zoom{width:100%; overflow:auto; height: calc(var(--white-h) + 10px);}
  .piano-wrap.scale-90{transform:scale(.9); transform-origin:left top}
  .piano-wrap.scale-80{transform:scale(.8); transform-origin:left top}

  .help{max-width:980px; margin:0 auto 24px; padding:0 24px; opacity:.9; font-size:14px}
  .kbd{display:inline-block; padding:2px 6px; border:1px solid #32407a; border-radius:6px; background:#12193a; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;}
  .btn.active { outline: 2px solid #5b7cff; box-shadow: 0 0 0 2px rgba(91,124,255,.25) inset; }

  /* NỐT ĐƠN (melody) */
.key.active-note.white  { background: linear-gradient(to bottom, #fff 0%, #6d93ff 100%); box-shadow: 0 0 0 2px rgba(80,140,255,.35) inset, 0 6px 14px rgba(80,140,255,.25); border-bottom-color:#6d93ff; }
.key.active-note.black  { filter: brightness(2.25); box-shadow: 0 0 0 2px rgba(80,140,255,.55) inset, 0 10px 20px rgba(80,140,255,.5); }

/* HỢP ÂM (chord) */
.key.active-chord.white { background: linear-gradient(to bottom, #fff 0%, #e3b14c 100%);  box-shadow: 0 0 0 2px rgba(250,168,26,.35) inset, 0 6px 14px rgba(250,168,26,.25); border-bottom-color:#e3b14c; }
.key.active-chord.black { filter: brightness(2.25); box-shadow: 0 0 0 2px rgba(250,168,26,.55) inset, 0 10px 20px rgba(250,168,26,.5); }

.key.active-bass.white {
  background: linear-gradient(to bottom, #d8b4fe 50%, #c084fc 100%); /* tím nhạt → tím trung */
  box-shadow:
    0 0 0 2px rgba(147, 51, 234, 0.35) inset,  /* viền tím */
    0 6px 14px rgba(168, 85, 247, 0.25),        /* đổ bóng tím nhẹ */
    0 0 10px rgba(192, 132, 252, 0.5);          /* ánh sáng tím */
  border-bottom-color: #a855f7;                 /* tím đậm */
  transform: translateY(1px);
  transition: all 0.15s ease-out;
}

.key.active-bass.black {
  background: linear-gradient(to bottom, #c084fc 50%, #6b21a8 100%); /* tím sáng → tím đậm */
  filter: brightness(1.25);
  box-shadow:
    0 0 0 2px rgba(147, 51, 234, 0.35) inset,  /* viền tím */
    0 10px 20px rgba(147, 51, 234, 0.3),
    0 0 12px rgba(168, 85, 247, 0.5);
  transform: translateY(1px);
  transition: all 0.15s ease-out;
}


#visualPiano{
  position:fixed;
  bottom:0;

  overflow-x:auto;
  overflow-y:hidden;

  white-space:nowrap;

  width:100%;
  max-width:100vw;

  -webkit-overflow-scrolling:touch;
}

.finger {
  position: fixed;   /* thay vì absolute */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 200, 0, 0.9);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 99999; color:#FFFFFF;
  transform: translate(-50%, -50%);
}

.finger.L{
  background: rgba(46, 125, 50, .85);
}
.finger.R{
  background: rgba(255,120,0,.85);
}

.finger.down{
  transform: translate(-50%, -50%) translateY(4px) scale(.96);
}

/* ===== Tay trái ===== */
.key.active-left.white{
  background: linear-gradient(to bottom, #fff 0%, #66bb6a 100%);
  border-bottom-color: #4caf50;
  box-shadow:
    0 0 0 2px rgba(102,187,106,.35) inset,
    0 6px 14px rgba(102,187,106,.35);
}

.key.active-left.black{
  filter: brightness(2.2);
  box-shadow:
    0 0 0 2px rgba(102,187,106,.55) inset,
    0 10px 20px rgba(102,187,106,.45);
}


/* ===== Tay phải ===== */
.key.active-right.white{
  background: linear-gradient(to bottom, #fff 0%, #f97316 100%);
  border-bottom-color:#ea580c;
  box-shadow:
    0 0 0 2px rgba(249,115,22,.35) inset,
    0 6px 14px rgba(249,115,22,.35);
}

.key.active-right.black{
  filter: brightness(2.2);
  box-shadow:
    0 0 0 2px rgba(249,115,22,.55) inset,
    0 10px 20px rgba(249,115,22,.45);
}


/* --- KHUNG TRỐNG --- */
#visualDrum{ height: 90px; position: fixed; bottom: 60px; width:100%; border: 0px solid #000; padding: 0px; margin: 0; display: none}
.drum-stage {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px; margin: 0;
  overflow: hidden;
  left: 0;
}


/* --- VÙNG BỐ TRÍ CÁC PAD --- */
.drum-kit {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0px; margin: 0;
}

/* --- PAD CHUNG --- */
.drum-pad {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(circle at 30% 30%, #555 0%, #222 50%, #000 100%);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  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;
  padding: 0px; margin: 0;
  transition:
    transform 0.07s ease-out,
    box-shadow 0.07s ease-out,
    background 0.15s ease-out;
}

.drum-pad span.label-main {
  font-size: 12px;
}
.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(0.97);
  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 30% 30%, #888 0%, #333 55%, #050505 100%);
}

/* --- CYMBAL MỎNG HƠN --- */
.drum-pad.cymbal {
  transform: translateY(3px) scale(0.97);
  background: radial-gradient(circle at 30% 20%, #bfb26a 0%, #7d713c 45%, #3b3418 100%);
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.drum-pad.cymbal:active,
.drum-pad.cymbal.is-active {
  transform: translateY(3px) scale(1.03);
  background: radial-gradient(circle at 30% 20%, #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);
}

/* --- KICK (TRỐNG ĐẠI) --- */
.drum-pad.kick {
  width: 150px;
  height: 90px;

}
.drum-pad.kick:active,
.drum-pad.kick.is-active {
  transform: translateY(3px) scale(0.97);
}


/* --- SNARE --- */
.drum-pad.snare {
  width: 130px;
  height: 70px;
}
.drum-pad.snare:active,
.drum-pad.snare.is-active {
  transform: translateY(3px) scale(0.97);
  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 30% 30%, #888 0%, #333 55%, #050505 100%);
}


/* --- FLOOR TOM --- */
.drum-pad.floor-tom {
  width: 130px;
  height: 70px;
}


/* --- RACK TOMS (TRÊN KICK) --- */
.drum-pad.tom-left {
  width: 130px;
  height: 70px;
}
.drum-pad.tom-right {
  width: 130px;
  height: 70px;
}

/* --- HI-HAT (TRÁI TRÊN) --- */
.drum-pad.hihat {
  width: 130px;
  height: 70px;
}

/* --- CRASH & RIDE (PHẢI TRÊN) --- */
.drum-pad.crash {
  width: 130px;
  height: 70px;
}

.drum-pad.ride {
  width: 130px;
  height: 70px;
}


/* 1. Drum-kit thành hàng ngang */
.drum-kit {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

/* 2. Pad nhỏ lại (~50%), hình tròn */
.drum-pad {
  position: relative;          /* bỏ absolute cũ */
}

/* 3. Reset các vị trí đặc biệt để không còn chồng chéo */
.drum-pad.kick,
.drum-pad.snare,
.drum-pad.floor-tom,
.drum-pad.tom-left,
.drum-pad.tom-right,
.drum-pad.hihat,
.drum-pad.crash,
.drum-pad.ride {
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  transform: none;             /* bỏ translateX(-50%) của kick cũ */

}
@media (max-width: 500px) {
  .drum-pad {
    transform: scale(0.8);        /* 40% */
  }
  .drum-pad.kick,
  .drum-pad.snare,
  .drum-pad.floor-tom,
  .drum-pad.tom-left,
  .drum-pad.tom-right,
  .drum-pad.hihat,
  .drum-pad.crash,
  .drum-pad.ride {
    transform: scale(0.85);        /* 40% */
  }
}


/*--------*/
div.div_sheet{border-left:5px solid #4198ba; }
div.vextab-auto{border-left: 0px solid #4198ba; }
div.divLyric{border-left: 0px solid #4198ba; }

div.vextab-auto > .vf-stavenote:hover{stroke:#009900; fill:#009900}
.vf-stavenote-selected{stroke:#ff0000; fill:#ff0000}
.vf-stavechord-selected{stroke:#ff0000; fill:#ff0000}

div.vextab-auto > .vf-notehead:hover{stroke:#ff00ff; fill:#ff00ff}
.vf-notehead-selected{stroke:#ff0000; fill:#ff0000}
#vf_status{position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; background: #006699; color:#ffffff}

/* music */
.stave_line{}
.stave_line:hover{stroke:#006699;}
.vf-stavenote path{stroke:#000000; fill:#000000}
.vf-stavenote:hover path{stroke:#009900; fill:#009900}
.vf-stavenote-selected path{stroke:#ff0000; fill:#ff0000; stroke-width: 3px;}
.vf-stavechord-selected path{stroke:#ff00ff; fill:#ff00ff; stroke-width: 3px;}

.text_lyric{
  stroke-width:0.3;
 fill:#000000; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:12pt;
 font-weight:normal; font-style:normal; color:#000000; min-height: 10px; min-width: 10px;
}
.text_lyric2{
  stroke-width:0.3;
 fill:#81230e; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:12pt;
 font-weight:normal; font-style:normal; color:#81230e;
}

.text_lyric3{
  stroke-width:0.3;
 fill:#000000; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:12pt;
 font-weight:normal; font-style:normal; color:#000000;
}

.lyric-selected{stroke:#ff00ff; fill:#ff00ff; font-weight: bold; font-size: 14pt}


.text_chord{
   stroke-width:0.3;
    fill:#ff00ff; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:14pt;
    font-weight:bold; font-style:normal; color:#FF00ff;
}
.chord-selected{stroke:#000000; fill:#000000; color:#000000; font-weight: bold; font-size: 120%}

.text_VoltaBrackets{
  fill:#000000; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:12pt;
}
.text_VoltaBrackets_number{
  fill:#000000; stroke:none; stroke-dasharray:none; font-family:hhh; font-size:9pt; font-weight: bold;
}

.VoltaBrackets {
  pointer-events: none;
}

.text_VoltaBrackets_number {
  font-size: 12px;
  user-select: none;
}


.addLyricByPart{cursor: pointer; border: 2px solid #000}
.addLyricByPart:hover{border: 2px solid #CCC}
.btnlyric{
  background-color: #009900; color:#FFFFFF; padding: 3px;
}
.btnlyric2{
  background-color: #ff0000; color:#FFFFFF; padding: 3px;
}
.btnlyric3{
  background-color: #0000ff; color:#FFFFFF; padding: 3px;
}
.lyric_current_edit{background-color: #eeeeee; color:#000; padding:3px 5px; border-bottom: 1px solid #999; font-size: 120%}
</style>

<style>
.tool_music {
  display: flex;
  gap: 8px;
}

.tool {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fafafa;
  border: 1px solid #999;
  cursor: pointer;
  position: relative;
  user-select: none;
  transition: all 0.15s ease;
}

.tool:hover {
  background: #ccc;
}

/* Biểu tượng nốt */
.note_icon {
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.note_symbol {
  margin-top: 5px;
  font-size: 32px;
  pointer-events: none;
}

/* Hiển thị số phím tắt */
.brief_note_number {
  position: absolute;
  bottom: 0px;
  right: 2px;
  color: #ff0000;
  opacity: 0.9;
  pointer-events: none;
  font-size: 11px;
  font-weight: bold;
}

/* ======= Trạng thái được chọn (bị nhấn xuống) ======= */
.tool_selected {
  background: #00ff00; color: #000;
  border-color: #888;
  transform: translateY(1px);
}

@keyframes sheetCursorBlink {
  0%   { opacity: 0.6; }
  50%  { opacity: 0.1; }
  100% { opacity: 0.6; }
}

#sheet-cursor {
  animation: sheetCursorBlink 1s infinite;
}

.drumPattern{
  font-size:80%;
  position:absolute;
  transition: all 0.15s ease;
}

.drumPattern.active{
  color:#ff0000;
  transform: scale(1.1);
}