/* =============================================================
   Hợp Ă‚m Việt — app.css
   CSS dĂ¹ng chung toĂ n site (load qua base.php)
   ============================================================= */

/* ── Chống trĂ n ngang trĂªn mobile ── */
/* overflow-x: clip (há»— trợ Safari 15.4+, 2022+) khĂ´ng lĂ m vĂ´ hiệu
   position:sticky/fixed nhÆ° overflow-x: hidden.
   Nếu cần há»— trợ Safari cÅ© hÆ¡n, dĂ¹ng giải phĂ¡p wrapper riĂªng. */
   html { overflow-x: clip; }
   body { overflow-x: clip; }

   
   /* ── Thin scrollbar (custom-scrollbar) ── */
   #searchSuggestions, #homeSearchSuggestions, .custom-scrollbar {
       scrollbar-width: thin;
       scrollbar-color: #D0D5DD transparent;
   }
   #searchSuggestions::-webkit-scrollbar,
   #homeSearchSuggestions::-webkit-scrollbar,
   .custom-scrollbar::-webkit-scrollbar {
       width: 4px;
   }
   #searchSuggestions::-webkit-scrollbar-track,
   #homeSearchSuggestions::-webkit-scrollbar-track,
   .custom-scrollbar::-webkit-scrollbar-track {
       background: transparent;
   }
   #searchSuggestions::-webkit-scrollbar-thumb,
   #homeSearchSuggestions::-webkit-scrollbar-thumb,
   .custom-scrollbar::-webkit-scrollbar-thumb {
       background: #D0D5DD;
       border-radius: 4px;
   }
   #searchSuggestions::-webkit-scrollbar-thumb:hover,
   #homeSearchSuggestions::-webkit-scrollbar-thumb:hover,
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
       background: #98A2B3;
   }
   
   /* ── Hợp Ă¢m highlight — [Am], [C], [G]... ── */
   .chord { color: #dc2626; font-weight: 700; font-size: 0.95em; }
   
   /* ── Lyrics block ── */
   .lyric-block {
       font-size: 16px;
       line-height: 2.0;
       white-space: pre-wrap;
       font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
       letter-spacing: 0.01em;
   }
   
   /* ── Nav dropdown ── */
   .has-dropdown:hover .dropdown-menu { display: block; }
   .dropdown-menu { display: none; }
   
   /* ── Active page link ── */
   a.active { color: #0d6efd; }
   
   /* ── Search clear button ── */
   #clearSearch { display: none; }
   
   /* ── Toolbar buttons (dĂ¹ng trong trang chi tiết bĂ i hĂ¡t) ── */
   .toolbar-btn {
       display: inline-flex; align-items: center; justify-content: center;
       height: 38px; min-width: 38px; padding: 0 12px;
       border: 1px solid #E9ECEF; border-radius: 10px;
       font-size: 13px; cursor: pointer; background: white;
       color: #495057;
       transition: all 0.2s ease;
       /* Safari fix: loại bỏ 300ms tap delay vĂ  đảm bảo click hoạt Ä‘á»™ng Ä‘Ăºng */
       touch-action: manipulation;
       -webkit-tap-highlight-color: transparent;
       user-select: none;
       -webkit-user-select: none;
   }
   .toolbar-btn:hover { background: #E0F7FA; border-color: #17A2B8; color: #0B7285; }
   .toolbar-btn.active { background: #0B7285; border-color: #0B7285; color: white; font-weight: 600; }
   
   /* ── Song Info collapse/expand transition (mobile) ── */
   .song-info-detail {
       transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease, padding 0.3s ease;
   }
   
   /* ── Pagination ── */
   .page-item { display: inline-flex; }
   .page-link {
       padding: 6px 14px; border: 1px solid #E9ECEF;
       color: #0B7285; background: white; margin: 0 2px;
       border-radius: 8px; text-decoration: none; font-size: 13px;
       font-weight: 500; transition: all 0.2s;
   }
   .page-link:hover { background: #E0F7FA; border-color: #17A2B8; }
   .page-link.active { background: #0B7285; color: white; border-color: #0B7285; }
   
   /* ── Song card hover ── */
   .song-card { transition: all 0.2s ease; }
   .song-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
   
   /* ── Scrollbar ẩn (dĂ¹ng class .hide-scrollbar) ── */
   .hide-scrollbar::-webkit-scrollbar { display: none; }
   .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
   
   /* =============================================================
      Delete Confirm Modal
      ============================================================= */
   #deleteModal {
       display: none;
       position: fixed;
       inset: 0;
       z-index: 9999;
       align-items: center;
       justify-content: center;
   }
   #deleteModalBackdrop {
       position: absolute;
       inset: 0;
       background: rgba(15, 23, 42, 0.55);
       backdrop-filter: blur(4px);
       -webkit-backdrop-filter: blur(4px);
       transition: opacity 0.25s;
   }
   #deleteModalPanel {
       position: relative;
       background: #fff;
       border-radius: 20px;
       padding: 32px 28px 24px;
       width: 90%;
       max-width: 400px;
       box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);
       transform: scale(0.92) translateY(16px);
       transition: transform 0.25s cubic-bezier(.34, 1.56, .64, 1), opacity 0.2s;
       opacity: 0;
       text-align: center;
   }
   #deleteModalIcon {
       width: 64px; height: 64px; border-radius: 50%;
       background: linear-gradient(135deg, #fee2e2, #fecaca);
       display: flex; align-items: center; justify-content: center;
       margin: 0 auto 18px;
   }
   #deleteModalTitle {
       font-size: 18px; font-weight: 800; color: #1a1a1a; margin: 0 0 8px;
   }
   #deleteModalDesc {
       font-size: 14px; color: #6b7280; margin: 0 0 24px; line-height: 1.6;
   }
   .delete-modal-actions {
       display: flex; gap: 10px; justify-content: center;
   }
   .delete-modal-cancel {
       flex: 1; padding: 10px 0; border-radius: 12px;
       border: 1.5px solid #e5e7eb; background: #f9fafb;
       color: #374151; font-size: 14px; font-weight: 600;
       cursor: pointer; transition: background 0.15s;
   }
   .delete-modal-cancel:hover { background: #f3f4f6; }
   .delete-modal-confirm {
       flex: 1; padding: 10px 0; border-radius: 12px; border: none;
       background: linear-gradient(135deg, #ef4444, #dc2626);
       color: #fff; font-size: 14px; font-weight: 700;
       cursor: pointer; text-decoration: none;
       display: flex; align-items: center; justify-content: center; gap: 6px;
       transition: opacity 0.15s;
   }
   .delete-modal-confirm:hover { opacity: 0.9; }
   
   /* =============================================================
      DataTables Custom Theme
      ============================================================= */
   .dataTables_wrapper .dataTables_filter input {
       border: 1px solid #E9ECEF; border-radius: 12px; padding: 6px 12px;
       outline: none; font-size: 14px; background: #F8F9FA;
       transition: border-color 0.2s, box-shadow 0.2s;
   }
   .dataTables_wrapper .dataTables_filter input:focus {
       border-color: #17A2B8; box-shadow: 0 0 0 3px rgba(23,162,184,0.15);
   }
   .dataTables_wrapper .dataTables_length select {
       border: 1px solid #E9ECEF; border-radius: 8px; padding: 4px 24px 4px 8px;
       outline: none; font-size: 14px; background: #F8F9FA;
   }
   .dataTables_wrapper .dataTables_paginate .paginate_button {
       padding: 4px 12px !important; border-radius: 8px !important;
       border: 1px solid #E9ECEF !important; background: #fff !important;
       font-size: 13px !important;
   }
   .dataTables_wrapper .dataTables_paginate .paginate_button.current,
   .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
       background: #17A2B8 !important; color: #fff !important;
       border-color: #17A2B8 !important; font-weight: 600;
   }
   .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
       background: #E0F7FA !important; color: #0B7285 !important;
       border-color: #B2EBF2 !important;
   }
   table.dataTable tbody tr:hover { background-color: #F8F9FA; }
   table.dataTable.no-footer { border-bottom: 1px solid #E9ECEF; }
   
   /* ── Ad containers ── */
   .ad-container {
       overflow: hidden;
       max-width: 100%;
       margin-left: auto;
       margin-right: auto;
   }
   .ad-container ins { max-width: 100%; }
   /* TrĂ¡nh CLS (Cumulative Layout Shift) */
   .ad-banner { min-height: 90px; }
   .ad-middle { min-height: 280px; max-width: 336px; }
   .ad-mobile { min-height: 250px; max-width: 300px; }
   .ad-responsive { min-height: 100px; }
   
   
   /* =============================================================
      Song Detail — Comment, Print, Fullscreen (chord/song)
      ============================================================= */
   
   @keyframes fadeIn {
       from { opacity: 0; transform: translateY(-8px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   .comment-collapsed { max-height: 11em; overflow: hidden; position: relative; }
   .comment-collapsed::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2em; background: linear-gradient(transparent, white); }
   #comment-list .text-gray-600 a { color: #17A2B8; text-decoration: underline; word-break: break-all; }
   #comment-list .text-gray-600 a:hover { color: #0B7285; }
   
   @media screen { #print-area { display: none !important; } }
   @media print {
       body > *:not(#print-area) { display: none !important; }
       body { background: #fff !important; margin: 0; padding: 0; }
       #print-area { display: block !important; position: static; font-family: 'Palatino Linotype', Palatino, Georgia, serif; font-size: 13px; line-height: 1.8; color: #111; }
       #print-area * { visibility: visible; }
       #print-area h1 { font-size: 20px; margin-bottom: 4px; }
       #print-area .print-meta { font-size: 12px; color: #555; margin-bottom: 12px; }
       #print-area .print-lyric { white-space: pre-wrap; font-size: 13px; }
       #print-area .print-footer { margin-top: 16px; border-top: 1px solid #ccc; padding-top: 10px; font-size: 12px; color: #555; }
       #print-area .chord-span { color: #dc2626; font-weight: bold; }
       @page { margin: 1.5cm 2cm; }
   }
   
   #song-content-wrapper.is-fullscreen { background-color: #ffffff !important; color: #333333 !important; padding: 5vh 8vw !important; box-sizing: border-box; width: 100vw !important; height: 100vh !important; display: flex; flex-direction: column; z-index: 9999; }
   #song-content-wrapper.is-fullscreen::backdrop { background-color: #ffffff !important; }
   #song-content-wrapper.is-fullscreen > div:not(#toolbar-wrapper):not(#lyricBox):not(.fullscreen-header) { display: none !important; }
   #song-content-wrapper.is-fullscreen #toolbar-wrapper { margin: 0 0 24px 0 !important; padding: 0 !important; background: transparent !important; flex-shrink: 0 !important; width: 100%; }
   #song-content-wrapper.is-fullscreen .fullscreen-toggle-btn { display: none !important; }
   #song-content-wrapper.is-fullscreen #lyricBox { border: none !important; box-shadow: none !important; margin-bottom: 0 !important; padding: 0 !important; background-color: transparent !important; }
   #song-content-wrapper.is-fullscreen #toolbar { margin: 0 auto !important; width: fit-content !important; max-width: 100% !important; justify-content: center; overflow-x: auto; overflow-y: visible !important; }
   #song-content-wrapper.is-fullscreen .fullscreen-header { border: none !important; border-radius: 0 !important; overflow: visible !important; box-shadow: none !important; margin-bottom: 12px !important; }
   #song-content-wrapper.is-fullscreen .fullscreen-header > div { background: none !important; padding: 6px 0 !important; }
   #song-content-wrapper.is-fullscreen .fullscreen-header .absolute { display: none !important; }
   #song-content-wrapper.is-fullscreen #song-header-badges, #song-content-wrapper.is-fullscreen #song-header-actions, #song-content-wrapper.is-fullscreen .fullscreen-header p { display: none !important; }
   #song-content-wrapper.is-fullscreen h1 { font-size: 42px !important; line-height: 1.3 !important; color: #111 !important; text-align: center; justify-content: center; margin: 0 auto 12px auto !important; }
   #song-content-wrapper.is-fullscreen #lyricBox { flex-grow: 1; overflow-x: scroll !important; overflow-y: hidden !important; height: 100%; }
   #song-content-wrapper.is-fullscreen .lyric-block { column-count: 2 !important; column-gap: 4vw; column-rule: 1px dashed #e5e7eb; column-fill: auto; height: 100%; white-space: pre-line; padding-bottom: 20px; }
   #song-content-wrapper.is-fullscreen.fs-vertical #lyricBox { overflow-x: hidden !important; overflow-y: auto !important; }
   #song-content-wrapper.is-fullscreen.fs-vertical .lyric-block { column-count: 1 !important; height: auto !important; }
   #song-content-wrapper.is-fullscreen .lyric-block br { display: block; margin-bottom: 4px; }
   #song-content-wrapper.is-fullscreen #lyricBox::-webkit-scrollbar { height: 12px; }
   #song-content-wrapper.is-fullscreen #lyricBox::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 6px; }
   #song-content-wrapper.is-fullscreen #lyricBox::-webkit-scrollbar-thumb { background: #bbb; border-radius: 6px; }
   
   /* ================================================================
      CHORD HIGHLIGHT EDITOR (add.php / edit.php)
      ================================================================ */
   .chord-editor-wrap {
       position: relative;
       overflow: hidden;
   }
   .chord-backdrop,
   .chord-textarea {
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
       font-size: 0.875rem;
       line-height: 1.6;
       padding: 0.5rem 0.75rem;
       width: 100%;
       box-sizing: border-box;
       white-space: pre-wrap;
       word-wrap: break-word;
       overflow-wrap: break-word;
   }
   .chord-backdrop {
       position: absolute;
       top: 0; left: 0;
       height: 100%;
       pointer-events: none;
       z-index: 0;
       color: #374151;
       overflow: hidden;
       border: 2px solid transparent;
   }
   .dark .chord-backdrop {
       color: #f3f4f6;
   }
   .chord-backdrop .ck {
       color: #0891b2;
       background: #cffafe;
       border-radius: 2px;
   }
   .dark .chord-backdrop .ck {
       color: #22d3ee;
       background: rgba(8, 145, 178, 0.4);
   }
   .chord-textarea {
       position: relative;
       z-index: 1;
       background: transparent !important;
       color: transparent !important;
       caret-color: #111827;
       resize: vertical;
       border: none !important;
       outline: none !important;
       box-shadow: none !important;
       display: block;
   }
   .dark .chord-textarea {
       caret-color: #f3f4f6;
   }
   .chord-textarea::selection {
       background: rgba(14,165,233,0.3);
       color: #111827;
   }
   .dark .chord-textarea::selection {
       background: rgba(34, 211, 238, 0.4);
       color: #ffffff;
   }
   
   /* ================================================================
      [SONG DETAIL] Mobile Toolbar Scroll Docking
      ================================================================ */
   .toolbar-fixed-bottom {
       position: fixed !important;
       bottom: 0 !important;
       left: 0 !important;
       width: 100% !important;
       z-index: 60 !important;
       border-radius: 16px 16px 0 0 !important;
       border-bottom: none !important;
       border-left: none !important;
       border-right: none !important;
       border-top: 1px solid #E9ECEF !important;
       box-shadow: 0 -10px 40px rgba(0,0,0,0.08) !important;
       padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
       margin-bottom: 0 !important;
       animation: slideUpTbar 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
   @keyframes slideUpTbar {
       from { transform: translateY(100%); opacity: 0; }
       to { transform: translateY(0); opacity: 1; }
   }
   
   /* =============================================================
      DARK MODE
      ============================================================= */
   
   /* ── Tổng thể ── */
   html.dark { background-color: #0f172a; color-scheme: dark; }
   html.dark body { background-color: #0f172a; color: #e2e8f0; }
   
   /* ── Header ── */
   html.dark header { background: rgba(15, 23, 42, 0.85) !important; border-color: #1e293b !important; }
   html.dark header a, html.dark header button { color: #cbd5e1; }
   html.dark header .dropdown-menu { background: #1e293b; border-color: #334155; }
   html.dark header .dropdown-menu a { color: #cbd5e1; }
   html.dark header .dropdown-menu a:hover { background: #334155; color: #38bdf8; }
   
   /* ── Nội dung chính ── */
   html.dark .bg-white { background-color: #1e293b !important; }
   html.dark .bg-slate-50, html.dark .bg-gray-50 { background-color: #0f172a !important; }
   html.dark .border-\[#E9ECEF\], html.dark .border-slate-200, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-slate-100 { border-color: #334155 !important; }
   html.dark .text-\[#1A1A1A\], html.dark .text-slate-800 { color: #f1f5f9 !important; }
   html.dark .text-\[#4A4A4A\], html.dark .text-slate-700, html.dark .text-gray-700 { color: #cbd5e1 !important; }
   html.dark .text-\[#7A7A7A\], html.dark .text-slate-500, html.dark .text-gray-400 { color: #94a3b8 !important; }
   
   /* ── Search input ── */
   html.dark #searchInput, html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark textarea, html.dark select {
       background-color: #1e293b !important; color: #e2e8f0 !important;
       border-color: #334155 !important;
   }
   html.dark #searchInput::placeholder { color: #64748b !important; }
   html.dark #searchSuggestions, html.dark #homeSearchSuggestions { background: #1e293b !important; border-color: #334155 !important; }
   html.dark #searchSuggestions a:hover, html.dark #homeSearchSuggestions a:hover { background: #334155 !important; }
   
   /* ── Cards, song-card ── */
   html.dark .song-card { background-color: #1e293b; border-color: #334155; }
   html.dark .song-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
   
   /* ── Toolbar & Buttons ── */
   html.dark .toolbar-btn { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
   html.dark .toolbar-btn:hover { background: #334155 !important; border-color: #38bdf8 !important; color: #38bdf8 !important; }
   html.dark .toolbar-btn.active { background: #0c4a6e !important; border-color: #0ea5e9 !important; color: #fff !important; }
   
   /* ── Pagination ── */
   html.dark .page-link { background: #1e293b; border-color: #334155; color: #38bdf8; }
   html.dark .page-link:hover { background: #334155; border-color: #38bdf8; }
   html.dark .page-link.active { background: #0c4a6e; color: #fff; border-color: #0ea5e9; }
   
   /* ── Chords ── */
   html.dark .chord { color: #f87171; }
   html.dark .lyric-block { color: #e2e8f0; }
   
   /* ── Comments ── */
   html.dark .comment-collapsed::after { background: linear-gradient(transparent, #1e293b); }
   
   /* ── Mobile Menu ── */
   html.dark #mobileMenuPanel { background: #1e293b; }
   html.dark #mobileMenuPanel a { color: #cbd5e1; }
   html.dark #mobileMenuPanel a:hover { background: #334155; }
   html.dark #mobileMenuPanel .border-slate-100 { border-color: #334155; }
   
   /* ── Delete Modal ── */
   html.dark #deleteModalPanel { background: #1e293b; }
   html.dark #deleteModalTitle { color: #f1f5f9; }
   html.dark #deleteModalDesc { color: #94a3b8; }
   html.dark .delete-modal-cancel { background: #334155; border-color: #475569; color: #cbd5e1; }
   html.dark .delete-modal-cancel:hover { background: #475569; }
   
   /* ── Pastel bg overrides (feature cards, stat cards) ── */
   html.dark .bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; }
   html.dark .bg-purple-50 { background-color: rgba(168,85,247,0.12) !important; }
   html.dark .bg-pink-50 { background-color: rgba(236,72,153,0.12) !important; }
   html.dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
   html.dark .bg-amber-50 { background-color: rgba(245,158,11,0.12) !important; }
   html.dark .bg-cyan-50 { background-color: rgba(6,182,212,0.12) !important; }
   html.dark .bg-indigo-50 { background-color: rgba(99,102,241,0.12) !important; }
   html.dark .bg-teal-50 { background-color: rgba(20,184,166,0.12) !important; }
   html.dark .bg-red-50 { background-color: rgba(239,68,68,0.12) !important; }
   html.dark .bg-gray-100 { background-color: #334155 !important; }
   
   /* ── Fullscreen song mode ── */
   html.dark #song-content-wrapper.is-fullscreen { background-color: #0f172a !important; color: #e2e8f0 !important; }
   html.dark #song-content-wrapper.is-fullscreen h1 { color: #f1f5f9 !important; }
   html.dark #song-content-wrapper.is-fullscreen #lyricBox::-webkit-scrollbar-track { background: #1e293b !important; }
   html.dark #song-content-wrapper.is-fullscreen #lyricBox::-webkit-scrollbar-thumb { background: #475569 !important; }
   html.dark #song-content-wrapper.is-fullscreen .lyric-block { column-rule-color: #334155 !important; }
   
   /* ── Print: always light ── */
   @media print { html.dark body { background: #fff !important; color: #111 !important; } }
   
   /* ── Song page — Comment form background FAFAFA ── */
   html.dark .bg-\[\#FAFAFA\] { background-color: #1a2537 !important; }
   
   /* ── Song page — Guitar chord diagrams (jTab/Raphael SVG) ── */
   /* Raphael.js set mĂ u qua presentation attributes → CSS cĂ³ thể override trá»±c tiếp.
      KhĂ´ng dĂ¹ng filter:invert vì lĂ m mĂ u chấm bấm bị sai (nĂ¢u/vĂ ng khĂ³ đọc). */
   
   /* Nền SVG → trong suốt, để container dark handle */
   html.dark #show_tab svg { background: transparent; }
   html.dark #show_tab svg > rect:first-child,
   html.dark #show_tab .chord > rect:first-child { fill: transparent !important; }
   
   /* NĂ©t lÆ°á»›i Ä‘Ă n (fret lines, nut bar) */
   html.dark #show_tab svg rect { fill: rgba(148,163,184,0.25) !important; stroke: rgba(148,163,184,0.4) !important; }
   html.dark #show_tab svg path { fill: rgba(148,163,184,0.5) !important; stroke: rgba(148,163,184,0.5) !important; }
   
   /* Chấm bấm (finger dots) → mĂ u teal chủ đạo của site */
   html.dark #show_tab svg circle {
       fill: #17A2B8 !important;
       stroke: #0B7285 !important;
   }
   /* Số ngĂ³n tay bĂªn trong chấm bấm */
   html.dark #show_tab svg text {
       fill: #f1f5f9 !important;
       stroke: none !important;
   }
   /* Marker vị trĂ­ thế (III, V...) */
   html.dark #show_tab .chord-name,
   html.dark #show_tab .position { color: #94a3b8 !important; }
   
   /* NĂºt "thế bấm" bĂªn dÆ°á»›i biểu đồ */
   html.dark #show_tab a { color: #64748b !important; }
   html.dark #show_tab a:hover { color: #38bdf8 !important; }
   
   /* NĂºt toggle "Xem tất cả hợp Ă¢m" */
   html.dark #btn_toggle_tab {
       background-color: #1e293b !important;
       border-color: #334155 !important;
       color: #94a3b8 !important;
   }
   
   /* ── Song page — Play icon wrapper (playlist) ── */
   html.dark .play-icon-wrapper { background-color: #334155 !important; color: #94a3b8 !important; }
   html.dark .group:hover .play-icon-wrapper { background-color: #17A2B8 !important; color: #fff !important; }
   
   /* ── Song page — Song list item hover (indigo-50) ── */
   html.dark .hover\:bg-indigo-50:hover { background-color: rgba(99,102,241,0.12) !important; }
   
   /* ── Song page — Header badges (category, composer, etc.) trĂªn nền gradient ── */
   /* Tất cả phần tá»­ (span, a, button) trong #song-header-badges phải giữ mĂ u
      transparent-white trĂªn nền gradient teal, khĂ´ng bị override bởi dark mode CSS */
   html.dark #song-header-badges > span,
   html.dark #song-header-badges > a,
   html.dark #song-header-badges > button {
       background-color: rgba(255,255,255,0.10) !important;
       border-color: rgba(255,255,255,0.20) !important;
       color: rgba(255,255,255,0.90) !important;
       backdrop-filter: blur(4px) !important;
       -webkit-backdrop-filter: blur(4px) !important;
   }
   html.dark #song-header-badges > span:hover,
   html.dark #song-header-badges > a:hover,
   html.dark #song-header-badges > button:hover {
       background-color: rgba(255,255,255,0.20) !important;
       border-color: rgba(255,255,255,0.30) !important;
   }
   /* Văn bản vĂ  icon bĂªn trong má»—i nhĂ£n */
   html.dark #song-header-badges > span > a,
   html.dark #song-header-badges > span > span {
       color: rgba(255,255,255,0.90) !important;
       background-color: transparent !important;
       border: none !important;
   }
   
   /* ── Song page — Header actions (Sheet, ThĂ­ch, Chia sẻ) ── */
   html.dark #song-header-actions a,
   html.dark #song-header-actions button {
       background-color: rgba(255,255,255,0.15) !important;
       border-color: rgba(255,255,255,0.20) !important;
       color: rgba(255,255,255,1) !important;
   }
   html.dark #song-header-actions a:hover,
   html.dark #song-header-actions button:hover {
       background-color: rgba(255,255,255,0.25) !important;
   }
   
   
   /* ── Homepage specific ── */
   html.dark .bg-\[#F8F9FA\] { background-color: #0f172a !important; }
   html.dark .bg-\[#FAFBFC\] { background-color: #1e293b !important; }
   html.dark .bg-\[#E0F7FA\] { background-color: rgba(6,182,212,0.12) !important; }
   html.dark .bg-\[#F0FEFF\] { background-color: rgba(6,182,212,0.08) !important; }
   html.dark .border-\[#F0F0F0\] { border-color: #334155 !important; }
   
   /* ── Song card ── */
   html.dark .song-card:hover { background-color: #334155 !important; }
   html.dark .song-card .bg-\[#F8F9FA\] { background-color: #334155 !important; }
   html.dark .song-card .bg-black\/5, html.dark .bg-black\/5 { background-color: rgba(255,255,255,0.08) !important; }
   
   /* ── Featured card & category pills ── */
   html.dark .bg-\[#E9ECEF\] { background-color: #334155 !important; }
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-2xl"]:hover { background-color: #334155 !important; }
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-full"]:hover { background-color: #334155 !important; }
   
   /* ── Quảng cĂ¡o placeholder ── */
   html.dark .border-dashed { border-color: #475569 !important; }
   html.dark .bg-gray-50.border-dashed { background: #1e293b !important; }
   
   /* ── Stats divider ── */
   html.dark .divide-\[#E9ECEF\] > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }
   html.dark .divide-x > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }
   
   /* ── Logo text in header (gradient stays visible) ── */
   html.dark header .font-extrabold[style*="background-clip"] {
       background: linear-gradient(135deg, #38bdf8, #67e8f9) !important;
       -webkit-background-clip: text !important;
       -webkit-text-fill-color: transparent !important;
       background-clip: text !important;
   }
   
   /* ── Logo image in dark mode — brighten so navy becomes visible ── */
   html.dark header img[alt="Hợp Ă‚m Việt"] {
       filter: brightness(1.8) saturate(1.3) !important;
       border-color: #38bdf8 !important;
   }
   /* ── Footer logo image ── */
   html.dark footer img[alt="Hợp Ă‚m Việt"] {
       filter: brightness(1.8) saturate(1.3) !important;
   }
   
   /* ── Highlight mark ── */
   html.dark mark { background: rgba(6,182,212,0.25) !important; color: #38bdf8 !important; }
   
   /* ── Section headings — ALL inline hex text colors ── */
   html.dark h2.text-\[\#1A1A1A\], html.dark h3.text-\[\#1A1A1A\], html.dark h4.text-\[\#1A1A1A\] { color: #f1f5f9 !important; }
   html.dark .text-\[\#1A1A1A\] { color: #f1f5f9 !important; }
   html.dark .text-\[\#4A4A4A\] { color: #cbd5e1 !important; }
   html.dark .text-\[\#7A7A7A\] { color: #94a3b8 !important; }
   html.dark .text-\[\#A0A0A0\] { color: #64748b !important; }
   html.dark .text-\[\#8A8A8A\] { color: #64748b !important; }
   
   /* ── Border separator lines ── */
   html.dark .border-b.border-\[\#E9ECEF\] { border-color: #334155 !important; }
   html.dark .border-t.border-gray-100 { border-color: #334155 !important; }
   html.dark .border-\[\#E9ECEF\] { border-color: #334155 !important; }
   html.dark .border-\[\#F0F0F0\] { border-color: #334155 !important; }
   
   /* ── Divider lines (h-px, w-px used as separators) ── */
   html.dark .bg-\[\#E9ECEF\] { background-color: #334155 !important; }
   
   /* ── Featured song cards (Nổi bật hĂ´m nay) ── */
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-2xl"] { background-color: #1e293b !important; border-color: #334155 !important; }
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-2xl"]:hover { background-color: #273548 !important; border-color: rgba(23,162,184,0.4) !important; }
   
   /* ── Featured card music icon background ── */
   html.dark .bg-gradient-to-br.from-\[\#E0F7FA\].to-\[\#B2EBF2\] { background: linear-gradient(to bottom right, rgba(6,182,212,0.2), rgba(6,182,212,0.12)) !important; }
   
   /* ── Category & rhythm pills ── */
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-full"] { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-full"]:hover { background-color: rgba(6,182,212,0.15) !important; border-color: #17A2B8 !important; color: #17A2B8 !important; }
   
   /* ── Song card rank badges ── */
   html.dark .song-card .bg-white.border.border-\[\#E9ECEF\] { background-color: #1e293b !important; }
   html.dark .song-card .bg-\[\#F8F9FA\] { background-color: #273548 !important; }
   
   /* ── Song card hover state ── */
   html.dark .song-card:hover { background-color: #273548 !important; }
   
   /* ── Song card icon backgrounds ── */
   html.dark .bg-black\/5 { background-color: rgba(255,255,255,0.08) !important; }
   
   /* ── Ad placeholder boxes ── */
   html.dark .bg-gray-50.border-dashed { background: #1e293b !important; border-color: #475569 !important; color: #64748b !important; }
   html.dark .border-dashed.border-gray-300 { border-color: #475569 !important; }
   
   /* ── Tư liệu cards ── */
   html.dark .bg-\[\#F8F9FA\].border.border-gray-100 { background-color: #273548 !important; border-color: #334155 !important; }
   
   /* ── Comment cards ── */
   html.dark div[class*="bg-white"][class*="rounded-2xl"][class*="border"][class*="shadow-sm"] { background-color: #1e293b !important; border-color: #334155 !important; }
   
   /* ── Sheet nhạc link tags ── */
   html.dark a[class*="bg-\[#FAFBFC\]"] { background-color: #273548 !important; border-color: #334155 !important; }
   html.dark a[class*="bg-\[#FAFBFC\]"]:hover { background-color: #334155 !important; border-color: #17A2B8 !important; }
   
   /* ── Hero search input dark mode ── */
   html.dark #homeSearchInput {
       background-color: #1e293b !important;
       color: #e2e8f0 !important;
       box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
   }
   html.dark #homeSearchInput::placeholder { color: #64748b !important; }
   
   /* ── Btn/tag hover states ── */
   html.dark .hover\:bg-\[\#E0F7FA\]:hover { background-color: rgba(6,182,212,0.15) !important; }
   html.dark .hover\:bg-\[\#F0FEFF\]:hover { background-color: rgba(6,182,212,0.1) !important; }
   html.dark .hover\:bg-slate-50:hover { background-color: #334155 !important; }
   html.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; }
   html.dark .hover\:bg-slate-100:hover { background-color: #475569 !important; }
   
   /* ── Mobile menu dark mode ── */
   html.dark #mobileMenuPanel .bg-\[\#F8F9FA\] { background-color: #273548 !important; }
   html.dark #mobileMenuPanel .bg-slate-50 { background-color: #1a2536 !important; }
   html.dark #mobileMenuPanel .text-slate-800 { color: #f1f5f9 !important; }
   html.dark #mobileMenuPanel summary { color: #cbd5e1 !important; }
   html.dark #mobileMenuPanel .text-slate-600 { color: #94a3b8 !important; }
   html.dark #mobileMenuPanel details .bg-white { background-color: #1e293b !important; }
   
   /* ── DataTables dark ── */
   html.dark .dataTables_wrapper .dataTables_filter input { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
   html.dark .dataTables_wrapper .dataTables_length select { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }
   html.dark .dataTables_wrapper .dataTables_paginate .paginate_button { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
   html.dark table.dataTable tbody tr:hover { background-color: #334155 !important; }
   html.dark table.dataTable.no-footer { border-color: #334155 !important; }
   
   /* ── Category/Rhythm page — sort tabs ── */
   html.dark .bg-\[\#F8F9FA\].border.border-\[\#E9ECEF\] { background-color: #0f172a !important; border-color: #334155 !important; }
   html.dark .bg-\[\#F8F9FA\] { background-color: #0f172a !important; }
   
   /* ── Category active sidebar item ── */
   html.dark .bg-\[\#E0F7FA\] { background-color: rgba(6,182,212,0.15) !important; }
   html.dark .text-\[\#0B7285\] { color: #38bdf8 !important; }
   
   /* ── Sidebar dividers (divide-[#F1F3F5]) ── */
   html.dark .divide-\[\#F1F3F5\] > :not([hidden]) ~ :not([hidden]) { border-color: #334155 !important; }
   
   /* ── Category/Rhythm page — pagination buttons with bg-white ── */
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-lg"] { background-color: #1e293b !important; border-color: #334155 !important; }
   html.dark a[class*="bg-white"][class*="border"][class*="rounded-lg"]:hover { background-color: #273548 !important; border-color: #17A2B8 !important; }
   
   /* ── Sort tab — active tab (bg-white text-[#0B7285] shadow-sm border) ── */
   html.dark a.bg-white.shadow-sm { background-color: #1e293b !important; border-color: #475569 !important; }
   
   /* ── Sidebar card containers (bg-white rounded-2xl border shadow-sm) ── */
   html.dark .bg-white.rounded-2xl { background-color: #1e293b !important; }
   html.dark .bg-white.rounded-2xl .border-b { border-color: #334155 !important; }
   
   /* ── Generic bg-white override for card containers ── */
   html.dark .bg-white.border { background-color: #1e293b !important; border-color: #334155 !important; }
   
   /* ── Hover states for sidebar links ── */
   html.dark .hover\:bg-\[\#F8F9FA\]:hover { background-color: #273548 !important; }
   
   /* ── Muted text (views count, etc.) ── */
   html.dark .text-\[\#9CA3AF\] { color: #64748b !important; }
   
   /* ── Pastel icon backgrounds (KhĂ¡m phĂ¡ thĂªm) ── */
   html.dark [style*="background:#FFF5F5"],
   html.dark [style*="background: #FFF5F5"] { background: rgba(239,68,68,0.15) !important; }
   html.dark [style*="background:#FFFBEB"],
   html.dark [style*="background: #FFFBEB"] { background: rgba(245,158,11,0.15) !important; }
   html.dark [style*="background:#F5F3FF"],
   html.dark [style*="background: #F5F3FF"] { background: rgba(124,58,237,0.15) !important; }
   
   /* ── Global Tailwind gray utility overrides for dark mode ── */
   html.dark .text-gray-800 { color: #f1f5f9 !important; }
   html.dark .text-gray-700 { color: #cbd5e1 !important; }
   html.dark .text-gray-600 { color: #94a3b8 !important; }
   html.dark .text-gray-500 { color: #64748b !important; }
   html.dark .text-gray-400 { color: #64748b !important; }
   html.dark .border-gray-200 { border-color: #334155 !important; }
   html.dark .border-gray-100 { border-color: #1e293b !important; }
   html.dark .border-t { border-color: #334155 !important; }
   html.dark .border-b { border-color: #334155 !important; }
   html.dark .bg-gray-50 { background-color: #1e293b !important; }
   html.dark input::placeholder, html.dark textarea::placeholder { color: #475569 !important; }
   
   /* ── Page link pagination (used in info pages) ── */
   .page-link {
       padding: 7px 13px;
       border-radius: 10px;
       font-size: 13px;
       font-weight: 600;
       border: 1px solid #E9ECEF;
       text-decoration: none;
       transition: all .2s;
       background: #fff;
       color: #4A4A4A;
   }
   .page-link:hover { border-color: #17A2B8; color: #17A2B8; }
   .page-link.active { border-color: #17A2B8; background: #17A2B8; color: #fff; }
   html.dark .page-link { background: #1e293b; border-color: #334155; color: #cbd5e1; }
   html.dark .page-link:hover { border-color: #17A2B8; color: #17A2B8; }
   html.dark .page-link.active { background: #17A2B8; border-color: #17A2B8; color: #fff; }

   /* =============================================================
   HERO BANNER — Category / Rhythm pages
   ============================================================= */
.hero-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    min-height: 140px;
    display: flex;
    align-items: center;
    padding: 28px 32px;
}
.hero-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
/* SVG pattern overlay — subtle music wave */
.hero-banner-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}
.hero-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.hero-banner-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.25);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.hero-banner-text h1 {
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 4px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.hero-banner-text .hero-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 8px;
    line-height: 1.5;
    max-width: 440px;
}
.hero-banner-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-banner-stats .stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
}

/* Floating music notes animation */
.hero-banner-floats {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.hero-banner-floats .note {
    position: absolute;
    font-size: 18px;
    opacity: 0.12;
    animation: floatNote 6s ease-in-out infinite;
}
.hero-banner-floats .note:nth-child(1) { top: 15%; right: 8%; animation-delay: 0s; }
.hero-banner-floats .note:nth-child(2) { top: 60%; right: 15%; animation-delay: 1.5s; font-size: 14px; }
.hero-banner-floats .note:nth-child(3) { top: 30%; right: 25%; animation-delay: 3s; font-size: 22px; }
.hero-banner-floats .note:nth-child(4) { top: 70%; right: 5%; animation-delay: 4.5s; font-size: 16px; }
.hero-banner-floats .note:nth-child(5) { top: 10%; right: 35%; animation-delay: 2s; font-size: 12px; }

@keyframes floatNote {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.12; }
    50% { transform: translateY(-12px) rotate(10deg); opacity: 0.22; }
}

/* Mobile responsive */
@media (max-width: 640px) {
    .hero-banner { min-height: 120px; padding: 20px 18px; border-radius: 12px; }
    .hero-banner-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
    .hero-banner-text h1 { font-size: 17px; }
    .hero-banner-text .hero-desc { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .hero-banner-content { gap: 14px; }
}

/* Dark mode refinements */
html.dark .hero-banner { box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
html.dark .hero-banner-icon { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.15); }
html.dark .hero-banner-stats .stat-pill { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.12); }