/* ============================================================
   VietGuitar v6 — song page CSS (song.css)
   Covers the v6-specific classes NOT in style.css / vg-widgets.css:
   .vg-site-header, .vg-song-hero, .vg-breadcrumb, .vg-meta-badge,
   .vg-related, body.dark-mode, print-only, etc.
   Uses Guitar Wood Palette design tokens (defined inline in the
   song page Function's <style>, matching site/pages/index.html).
   ============================================================ */

/* ─── Site Header (base; wood-palette overrides live in the Function) ─── */
.vg-site-header {
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #e9ecef);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.vg-site-header .wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.logo-group { display: flex; align-items: center; gap: 12px; }
/* .search-trigger-btn / .dm-toggle / .menu-toggle / .header-actions:
   toàn bộ style + breakpoint nằm trong inline CSS của Function (load sau) */

/* Mobile Drawer (positioning only; colors from Function wood palette) */
.mobile-nav { display: none; position: absolute; top: 56px; left: 0; right: 0; background: var(--surface, #fff); border-bottom: 1px solid var(--border, #e9ecef); box-shadow: 0 4px 12px rgba(0,0,0,.08); flex-direction: column; padding: 8px 0; }

/* ─── Breadcrumb ─── */
.vg-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 16px 0; color: var(--muted); }
.vg-breadcrumb a { color: var(--muted); text-decoration: none; }
.vg-breadcrumb a:hover { color: var(--wood-700); }
.vg-breadcrumb__sep { color: var(--border); }
.vg-breadcrumb__current { color: var(--foreground); font-weight: 600; }

/* ─── Song Hero ─── */
/* Mobile-first fullwidth: bỏ trần 800px cũ (2026-10-25). Lề ngang co giãn
   theo bề rộng màn hình; nội dung (lời bài hát) dùng hết chiều ngang. */
.vg-song-page { width: 100%; max-width: none; margin: 0 auto; padding: 0 8px 32px; }
@media (min-width: 600px)  { .vg-song-page { padding-inline: 16px; } }
@media (min-width: 1200px) { .vg-song-page { padding-inline: 24px; padding-bottom: 40px; } }
.vg-song-hero { background: var(--surface); border-radius: 12px; padding: 20px 24px; margin: 16px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.vg-song-hero__header { margin-bottom: 12px; }
.vg-song-hero__title { font-size: 22px; font-weight: 700; color: var(--foreground); margin: 0; line-height: 1.3; }
.vg-song-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.vg-meta-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.vg-meta-badge--artist { background: var(--wood-100); color: var(--wood-700); }
.vg-meta-badge--genre { background: var(--surface-2); color: var(--muted); }
.vg-meta-badge--hits { background: hsl(25,60%,94%); color: hsl(25,55%,40%); }

/* ─── Sticky Control Bar ─── */
.vgo-control-bar { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 12px; padding: 6px 12px; margin: 16px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border); overflow-x: auto; min-height: 44px; }
.vgo-control-bar.is-sticky { position: sticky; top: 56px; z-index: 999; box-shadow: var(--shadow-md); }
.vgo-control-item { display: flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-700); white-space: nowrap; transition: all .15s; }
.vgo-control-item:hover { background: var(--wood-100); color: var(--wood-700); }
.vgo-control-item .vgo-text { font-size: 13px; }
.vgo-control-item .up, .vgo-control-item .down { font-size: 14px; }
.vgo-control-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.vgo-btn-trans { min-width: 90px; justify-content: center; }
/* Nút +/− đổi tông: nền nâu gỗ ĐẬM + chữ trắng — không thể không thấy ở
   cả light lẫn dark mode. Ký tự +/− thuần (không phụ thuộc icon font) */
.vgo-btn-trans .up, .vgo-btn-trans .down,
.vgo-btn-fontsize .up, .vgo-btn-fontsize .down {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--wood-700); color: #fff;
  font-size: 17px; font-weight: 800; line-height: 1;
  cursor: pointer; flex-shrink: 0; user-select: none;
  transition: background var(--transition), transform var(--transition);
}
.vgo-btn-trans .up:hover, .vgo-btn-trans .down:hover,
.vgo-btn-fontsize .up:hover, .vgo-btn-fontsize .down:hover {
  background: var(--amber-500); transform: scale(1.08);
}
.vgo-btn-thetay.on { background: var(--wood-100); color: var(--wood-700); }
body.dark-mode .vgo-btn-thetay.on { background: var(--surface-2); color: var(--wood-300); }
.vgo-btn-fontsize { min-width: 80px; justify-content: center; }
.vgo-btn-scroll { min-width: 110px; justify-content: center; }
.vgo-btn-easy { min-width: 80px; justify-content: center; }
.vgo-btn-hide-chords { min-width: 60px; justify-content: center; }
.vgo-btn-fullscreen { width: 40px; justify-content: center; }

/* ─── Scroll Panel ─── */
#scroll_panel { background: var(--surface); border-radius: 12px; padding: 12px 20px; margin: 12px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: none; }
#scroll_panel.show { display: block; }
#speed { display: flex; gap: 4px; }
#speed .hover { cursor: pointer; padding: 4px 8px; border-radius: 4px; color: var(--muted); }
#speed .hover.color, #speed .hover.color:hover { color: var(--wood-700); font-weight: 700; }

/* ─── Transpose Bar ─── */
.trans_bar { background: var(--surface); border-radius: 12px; padding: 10px 16px; margin: 12px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border); display: none; }
.trans_bar.show { display: block; }
.trans_list { display: flex; gap: 4px; flex-wrap: wrap; }
.chord_inline { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-700); }
.chord_inline.selected { background: var(--amber-500); color: #fff; }

/* ─── Song Content & Lyrics (Default Vietnamese Subset Typography) ─── */
#song_text,
.hopam_content {
  background: var(--surface);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  line-height: 1;
  font-size: 15.5px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
#song_text pre,
.hopam_content pre {
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: normal;
  margin: 0;
  color: var(--foreground);
  white-space: pre-wrap;
  word-break: break-word;
}
.vgo-line {
  /* display: block; */
  margin-bottom: 0px !important;
}
.vgo-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  vertical-align: bottom;
  margin-right: 0px;
}
.vgo-text {
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.15;
  color: var(--foreground);
  white-space: pre;
}
.hopam_chord {
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wood-700);
  background: rgba(200, 100, 0, 0.09);
  padding: 1px 4px;
  border-radius: 4px;
  line-height: 1.15;
  margin-bottom: 2px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.hopam_chord:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
.hopam_chord:hover {
  background: var(--amber-500);
  color: #fff;
  transform: translateY(-1px);
}
body.dark-mode .hopam_chord {
  color: var(--amber-400, #fbbf24);
  background: rgba(251, 191, 36, 0.15);
}
body.dark-mode .hopam_chord:hover {
  background: var(--amber-500);
  color: #fff;
}

/* ─── Chord Diagrams (bottom) ─── */
.vgo-chords-bottom { background: var(--surface); border-radius: 12px; padding: 20px 24px; margin: 24px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
/* Hàng công cụ trong section chord: đổi tông −1/+1 + nút Thế tay */
.vgo-chords-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.vgo-chords-head .vgo-chords-title { margin: 0; }
.vgo-chords-hint { font-size: 12px; color: var(--muted); margin: -8px 0 12px; }
.vgo-chords-hint b { color: var(--wood-700); }
/* Hàng nút chip hợp âm — một nút cho mỗi hợp âm, bấm xem thế tay */
.vgo-chord-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.vgo-chord-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 38px; padding: 0 14px;
  background: var(--wood-700); color: #fff;
  border: 1px solid var(--wood-600); border-radius: var(--radius-full);
  font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 700;
  cursor: pointer; user-select: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.vgo-chord-chip:hover { background: var(--amber-500); border-color: var(--amber-600); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(200,100,0,.3); }
body.dark-mode .vgo-chord-chip { background: var(--wood-800); border-color: var(--wood-600); color: var(--wood-100); }
body.dark-mode .vgo-chord-chip:hover { background: var(--amber-500); color: #fff; }
/* Sơ đồ thế tay bấm được → chuyển thế tay */
.sidebarchord { cursor: pointer; display: inline-block; margin: 4px; }

/* ─── Chord Box Transpose & Shape Sub-controls (jTab generated) ─── */
.trans_ {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0;
  user-select: none;
}
.trans_space {
  font-family: 'Roboto', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-700, #4b3621);
  min-width: 52px;
  text-align: center;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background var(--transition), color var(--transition);
}
.trans_space:hover {
  background: var(--wood-100);
  color: var(--wood-700);
}
.trans_back, .trans_next {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--wood-700, #6d3a18) !important;
  color: #fff !important;
  border: 1px solid var(--wood-600, #552d12) !important;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1;
  flex-shrink: 0;
  text-align: center;
}
.trans_back:hover, .trans_next:hover {
  background: var(--amber-500, #f59e0b) !important;
  border-color: var(--amber-600, #d97706) !important;
  color: #fff !important;
  transform: scale(1.08);
}
/* Ký tự ‹/› (Thế tay) và −/+ (Đổi tông) — chỉ dùng ::before khi element rỗng (chưa có text) */
.trans_back:empty::before,
.trans_back[onclick*="trans_back"]:empty::before,
.trans_back[onclick*="jtab.trans_back"]:empty::before {
  content: '‹';
  font-size: 16px;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.trans_next:empty::before,
.trans_next[onclick*="trans_next"]:empty::before,
.trans_next[onclick*="jtab.trans_next"]:empty::before {
  content: '›';
  font-size: 16px;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.trans_back[onclick*="changeAllChord"]:empty::before {
  content: '−';
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: block;
}
.trans_next[onclick*="changeAllChord"]:empty::before {
  content: '+';
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: block;
}
body.dark-mode .trans_space {
  color: var(--wood-200, #e8d7c3);
}
body.dark-mode .trans_space:hover {
  background: var(--surface-2);
  color: var(--wood-100);
}
body.dark-mode .trans_back, body.dark-mode .trans_next {
  background: var(--wood-800, #3d2210) !important;
  border-color: var(--wood-600, #552d12) !important;
  color: var(--wood-100, #f5efe6) !important;
}
body.dark-mode .trans_back:hover, body.dark-mode .trans_next:hover {
  background: var(--amber-500) !important;
  border-color: var(--amber-400) !important;
  color: #fff !important;
}

.vgo-chords-tools { display: flex; align-items: center; gap: 6px; }
.vgo-chords-trans, .vgo-chords-thetay {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 38px; height: 34px; padding: 0 10px; border-radius: var(--radius-full);
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--wood-700);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.vgo-chords-trans:hover, .vgo-chords-thetay:hover { background: var(--wood-100); border-color: var(--wood-400); }
.vgo-chords-thetay.on { background: var(--wood-100); color: var(--wood-700); }
body.dark-mode .vgo-chords-trans, body.dark-mode .vgo-chords-thetay { color: var(--wood-300); }
body.dark-mode .vgo-chords-trans:hover, body.dark-mode .vgo-chords-thetay:hover { background: var(--surface-2); }
@media (max-width: 576px) {
  .vgo-chords-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.vgo-chords-bottom .vgo-chords-title { font-size: 16px; font-weight: 600; color: var(--wood-700); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.chord_container { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sidebarchord { display: inline-block; margin: 4px; }

/* ─── Print Bar ─── */
/* ─── Nút In / Xuất PDF trong hero (2026-10-02 — .vg-print-bar đã bỏ) ─── */
.vg-meta-badge--print { cursor: pointer; background: var(--amber-500); color: #fff; border: 1px solid transparent; }
.vg-meta-badge--print:hover { background: var(--amber-600); }

/* ─── Chord Dialog ─── */
.chord_dialog { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.12); padding: 12px; z-index: 2000; transform: translateY(100%); transition: transform .2s ease; display: none; }
.chord_dialog.show { transform: translateY(0); display: block; }
.chord_dialog .previous, .chord_dialog .next { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; font-size: 30px; line-height: 1; color: var(--muted); user-select: none; font-family: 'Inter', sans-serif; }
.chord_dialog .previous::before { content: '‹'; }
.chord_dialog .next::before { content: '›'; }
.chord_dialog .previous:hover, .chord_dialog .next:hover { color: var(--wood-700); }
.chord_dialog .wrapper { display: flex; overflow-x: auto; gap: 8px; padding: 8px; }

/* ─── Media Box (YouTube) — port từ style.css cũ, aspect-ratio chuẩn ─── */
.mediaBox { background: #000; padding: 15px 0; margin: 0 auto 30px; font-size: 16px; color: #fff; }
.responsive-video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.responsive-video iframe, .responsive-video object, .responsive-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ─── Video section (YouTube dời xuống sau box "Hợp âm guitar sử dụng") ─── */
.vg-video { background: var(--surface); border-radius: 12px; padding: 20px 24px; margin: 24px 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.vg-video .vg-video__title { font-size: 16px; font-weight: 600; color: var(--wood-700); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.vg-video .responsive-video { border-radius: 8px; }

/* ─── Chord View (popup "thế tay" khi hover hợp âm — vg-custom.js tự đặt
   position absolute theo vị trí hợp âm; bản cũ fullscreen tối màu mâu
   thuẫn với JS định vị → đổi thành floating panel) ─── */
#chord_view { display: none; position: absolute; z-index: 3000; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-lg); }
#chord_view.show { display: block; }
#chord_view .closebutton { position: absolute; top: 2px; right: 8px; font-size: 20px; color: var(--muted); cursor: pointer; text-decoration: none; line-height: 1; }
#chord_view #draw_chord { }
#inline_chordview { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top-left-radius: 16px; border-top-right-radius: 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.12); z-index: 2000; padding: 12px 16px; max-height: 62vh; overflow-y: auto; }
#inline_chordview.show, #inline_chordview.on { display: block; }
#inline_chordview .closebutton { text-align: center; font-size: 20px; cursor: pointer; color: var(--muted); }

/* ─── Related Songs ─── */
.vg-related { margin: 24px 0; }
.vg-related.hide-in-print { }
.vg-related__title { font-size: 16px; font-weight: 600; color: var(--wood-700); margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.vg-related__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 576px) { .vg-related__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .vg-related__grid { grid-template-columns: repeat(6, 1fr); } }
.vg-related__card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; background: var(--surface-2); border-radius: 8px; text-decoration: none; color: var(--foreground); transition: background .15s; }
.vg-related__card:hover { background: var(--border); }
.vg-related__card-icon { font-size: 20px; color: var(--wood-700); }
.vg-related__card-text { text-align: center; }
.vg-related__card-title { font-size: 13px; font-weight: 700; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vg-related__card-sub { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Print-only footer ─── */
.print-only { display: none; }
@media print {
  .print-only { display: block; text-align: center; padding: 16px; font-size: 12px; color: #666; }
  .hide-in-print { display: none !important; }
  body { background: #fff; color: #000; }
  .hopam_content { box-shadow: none; border: none; padding: 0; margin: 0; break-inside: avoid; }
  .vg-song-hero, .vgo-control-bar, .vgo-chords-bottom { display: none; }
  #chord_view, #inline_chordview { display: none; }
}

/* ─── Dark Mode ─── */
body.dark-mode .vg-site-header { border-bottom-color: var(--border); }
body.dark-mode .vg-song-hero,
body.dark-mode .vgo-control-bar,
body.dark-mode #scroll_panel,
body.dark-mode .trans_bar,
body.dark-mode .hopam_content,
body.dark-mode .vgo-chords-bottom,
body.dark-mode .vg-video,
body.dark-mode #inline_chordview,
body.dark-mode .chord_dialog { background: var(--surface); border-color: var(--border); }
body.dark-mode .vg-related__card { background: var(--surface-2); }
body.dark-mode .vg-meta-badge--artist { background: hsl(25,25%,22%); color: var(--wood-300); }
body.dark-mode .vg-meta-badge--genre { background: var(--surface-2); color: var(--muted); }
body.dark-mode .vg-meta-badge--hits { background: hsl(25,25%,22%); color: hsl(28,60%,70%); }
body.dark-mode .vgo-control-item { color: hsl(30,20%,75%); }
body.dark-mode .vgo-control-item:hover { background: var(--surface-2); color: var(--wood-300); }
body.dark-mode .chord_inline { color: hsl(30,20%,75%); }
body.dark-mode .chord_inline.selected { background: var(--amber-500); color: #fff; }
body.dark-mode .hopam_chord { color: var(--wood-300); }
body.dark-mode .vg-related__card-title { color: hsl(38,35%,88%); }

/* ─── Chế độ "Lời" (nút btn_hide_chords — chỉ xem lời) ───
   visibility:hidden giữ nguyên layout: lời vẫn căn đúng vị trí trên hợp âm */
body.lyrics-only .hopam_content span.hopam_chord { visibility: hidden; }
body.lyrics-only .vgo-chords-bottom { display: none; }
body.lyrics-only #chord_view, body.lyrics-only #inline_chordview { display: none !important; }
.vgo-btn-hide-chords.on { background: var(--wood-100); color: var(--wood-700); }
body.dark-mode .vgo-btn-hide-chords.on { background: var(--surface-2); color: var(--wood-300); }

/* ─── Mobile-First Enhancements ─── */
@media (max-width: 600px) {
  .vg-song-page { padding: 0 6px 30px; }
  .vg-breadcrumb { margin: 10px 0 6px; font-size: 12px; }
  .vg-song-hero { padding: 12px 12px; margin: 8px 0; border-radius: 10px; }
  .vg-song-hero__title { font-size: 18.5px; line-height: 1.25; }
  .vg-meta-badge { font-size: 11px; padding: 2px 7px; }
  .vgo-control-bar { padding: 4px 6px; margin: 8px 0; border-radius: 10px; min-height: 38px; gap: 3px; -webkit-overflow-scrolling: touch; }
  .vgo-control-item { padding: 4px 6px; font-size: 12px; }
  .vgo-btn-trans .up, .vgo-btn-trans .down,
  .vgo-btn-fontsize .up, .vgo-btn-fontsize .down { width: 24px; height: 24px; font-size: 15px; border-radius: 6px; }
  #song_text, .hopam_content { padding: 10px 8px; margin: 8px 0; border-radius: 10px; line-height: 1; }
  #song_text pre, .hopam_content pre { font-size: 14px; line-height: 1.15; letter-spacing: normal; }
  .vgo-text { font-size: 14px; letter-spacing: normal; line-height: 1.15; }
  .hopam_chord { font-size: 12px; padding: 0 3px; margin-bottom: 1px; border-radius: 3px; }
  .vgo-line { margin-bottom: 0px !important; }
  .vgo-chords-bottom { padding: 12px 10px; margin: 14px 0; border-radius: 10px; }
  .vgo-chord-chips { gap: 5px; margin-bottom: 8px; }
  .vgo-chord-chip { min-width: 34px; height: 30px; padding: 0 8px; font-size: 12.5px; }
  .chord_container { gap: 4px; }
  .sidebarchord { margin: 2px 1px; }
  .trans_ { gap: 4px; margin: 3px 0; }
  .trans_space { font-size: 11.5px; min-width: 46px; padding: 1px 3px; }
  .trans_back, .trans_next { width: 20px; height: 20px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHẾ ĐỘ TẬP TRUNG (nút #btn_fullscreen)
   Chỉ giữ: #vgo_control_bar · #song_text · .vgo-chords-head
   Toàn bộ hero, breadcrumb, quảng cáo, video, share, related, footer, panel
   phụ đều ẩn — kể cả khi trình duyệt không hỗ trợ Fullscreen API (iPhone).
   Body class do vg-custom.js bật/tắt; Esc / thoát fullscreen tự gỡ class.
   ═══════════════════════════════════════════════════════════════════════════ */
body.vg-focus .site-header,
body.vg-focus .vg-breadcrumb,
body.vg-focus .vg-song-hero,
body.vg-focus .vg-ad,
body.vg-focus .vg-video,
body.vg-focus .vg-share,
body.vg-focus .vg-related,
body.vg-focus .vg-site-footer,
body.vg-focus #scroll_panel,
body.vg-focus .trans_bar,
body.vg-focus .print-only,
body.vg-focus .admin-edit-btn,
body.vg-focus .vgo-chords-bottom > :not(.vgo-chords-head) {
  display: none !important;
}
body.vg-focus .vg-song-page {
  padding: 8px 8px 40px;
  min-height: 100dvh;
}
body.vg-focus .vgo-control-bar,
body.vg-focus .vgo-control-bar.is-sticky {
  position: sticky;
  top: 0;
  margin: 0 0 8px;
  border-radius: 0 0 12px 12px;
  z-index: 1000;
}
body.vg-focus #song_text,
body.vg-focus .hopam_content {
  margin: 0;
  min-height: calc(100dvh - 110px);
  border-radius: 12px;
}
body.vg-focus .vgo-chords-bottom {
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
body.vg-focus .vgo-chords-head {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLET / IPAD NẰM NGANG — rail hợp âm neo bên phải
   Điều kiện: màn hình ngang ≥900px, cao ≥500px, con trỏ thô (touch) → iPad và
   tablet, KHÔNG áp cho điện thoại xoay ngang (cao <500) hay desktop chuột.
   .vgo-chords-head rời dòng chảy → panel nổi cạnh phải; nút tab dọc ở mép
   phải để ẩn/hiện (mặc định hiện). #song_text chừa lề phải để chữ không bị
   panel che; khi ẩn rail, lời bài hát trải hết chiều ngang.
   ═══════════════════════════════════════════════════════════════════════════ */
.chords-rail-toggle { display: none; }

@media (min-width: 900px) and (min-height: 500px) and (orientation: landscape) and (any-pointer: coarse) {
  .chords-rail-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1002;
    padding: 14px 7px;
    background: var(--surface);
    color: var(--wood-700);
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 12px 0 0 12px;
    box-shadow: var(--shadow-md);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition), color var(--transition);
  }
  .chords-rail-toggle:hover { background: var(--wood-100); }
  .chords-rail-toggle i { font-size: 17px; }
  .chords-rail-toggle .chords-rail-label { writing-mode: vertical-rl; letter-spacing: .5px; }
  body.dark-mode .chords-rail-toggle { background: var(--surface-2); color: var(--wood-300); }
  body.dark-mode .chords-rail-toggle:hover { background: var(--wood-800); }

  .vgo-chords-bottom .vgo-chords-head {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    width: 224px;
    max-width: 224px;
    margin: 0;
    padding: 14px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
  }
  .vgo-chords-bottom .vgo-chords-head .vgo-chords-title {
    font-size: 14px;
    line-height: 1.35;
    margin: 0;
  }
  .vgo-chords-bottom .vgo-chords-head .vgo-chords-title i { color: var(--wood-700); }
  .vgo-chords-bottom .vgo-chords-head .vgo-chords-tools { flex-wrap: wrap; gap: 6px; }
  .vgo-chords-bottom .vgo-chords-head .vgo-chords-trans,
  .vgo-chords-bottom .vgo-chords-head .vgo-chords-thetay { flex: 1 1 auto; }

  /* Chừa lề phải cho panel — chữ không bị che; ẩn rail thì trải fullwidth */
  #song_text { padding-right: 292px; }
  body.vg-rail-hidden #song_text { padding-right: 24px; }
  body.vg-rail-hidden .vgo-chords-bottom .vgo-chords-head { display: none; }
  body.vg-rail-hidden .chords-rail-toggle { background: var(--wood-100); }
  body.dark-mode.vg-rail-hidden .chords-rail-toggle { background: var(--wood-800); }
}

@media print {
  .chords-rail-toggle { display: none !important; }
}