ul{
  list-style: none; padding:0; margin:0;
}
div.vextab-auto > .vf-stavenote:hover{stroke:#009900; fill:#009900}
.vf-stavenote-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;}
.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;
}
.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%}
.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);
}