/**
 * player-choi-native.css — U12.9bp
 * Skin for host-page native Chơi (NOT the iframe document).
 * All rules scoped under .hah-choi-native.
 * CẤM html,body { overflow:hidden } — phá trang cha.
 */
.hah-choi-native {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--hah-ink, #1a1c1e);
    background: var(--hah-surface, #fff);
    box-sizing: border-box;
}
.hah-choi-native .practice-main-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}
.hah-choi-native #lyrics-container-choi {
    flex: 1 1 0%;
    min-height: 120px;
    overflow: auto;
}
.hah-choi-native #hah-player-dock,
.hah-choi-native .practice-player-footer {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 12;
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/**
 * player-choi.css — skin + layout for tab Chơi iframe.
 * Extracted from player-choi-template.php (U12.9s). Template stays HTML/PHP only.
 *//* Enhanced CSS with better SVG jtab handling */.hah-choi-native .highlight-line{ background-color: #f6eef1; transition: background-color 0.3s ease-in-out; }.hah-choi-native #lyrics-container-choi > div{ border-radius: 0.5rem; padding: 0.25rem 0.5rem; margin-bottom: 0.15rem; }/* U12.9t — skin + cuộn thuộc CSS, không hardcode Tailwind trên HTML.
   overflow-y: auto = thanh dọc chỉ khi scrollHeight > clientHeight.
   KHÔNG dùng overflow-y: scroll (luôn vẽ rail) hay scrollbar-gutter: stable. */.hah-choi-native #lyrics-container-choi{
    background-color: #f9fafb;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0 0 0.5rem 0.5rem;
    font-size: 1.125rem;
    line-height: 1.625;
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
}.hah-choi-native .lyrics-placeholder{
    color: #9ca3af;
    text-align: center;
    margin: 0;
}/* =========================================================================
 * U12.9u — SHELL (không Tailwind). HTML chỉ id / class ngữ nghĩa / state.
 * Utility trên markup đánh nhau với rule layout (overflow, flex, min-height)
 * → U12.9m–t: scrollbar chết, stage tràn, Blink nuốt cuộn dọc.
 * ========================================================================= */.hah-choi-native .hidden{ display: none !important; }@keyframes choi-spin { to { transform: rotate(360deg); } }.hah-choi-native .animate-spin{ animation: choi-spin 1s linear infinite; }.hah-choi-native .spin-track{ opacity: 0.25; }.hah-choi-native .spin-head{ opacity: 0.75; }.hah-choi-native .is-seekable{ cursor: pointer; }.hah-choi-native .is-seekable:hover{ opacity: 0.75; }.hah-choi-native .choi-frame{
    width: 100%;
    height: 100vh;
    background: #fff;
}.hah-choi-native .choi-layout{
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}@media (min-width: 768px)  {
.hah-choi-native .choi-layout{ flex-direction: row; }}
.hah-choi-native .practice-main-col,
.hah-choi-native .practice-side-col{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 1rem;
    box-sizing: border-box;
}.hah-choi-native .practice-side-col{ margin-top: 1.5rem; }@media (min-width: 768px)  {
.hah-choi-native body:not(.ui-practice) .practice-main-col{ width: 66.666%; }.hah-choi-native body:not(.ui-practice) .practice-side-col{ width: 33.333%; margin-top: 0; }}
.hah-choi-native .player-toolbar-block{
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
    flex-shrink: 0;
}.hah-choi-native .player-toolbar-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}.hah-choi-native .toolbar-label{
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}.hah-choi-native .toolbar-label .practice-ico{
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    color: #6b7280;
    flex: 0 0 auto;
}.hah-choi-native #transpose-display{ font-weight: 700; margin-left: 0.25rem; }.hah-choi-native .toolbar-select{
    margin-top: 0.25rem;
    display: block;
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    box-sizing: border-box;
}.hah-choi-native .toolbar-select:focus{
    outline: none;
    border-color: #d83030;
    box-shadow: 0 0 0 1px #d83030;
}.hah-choi-native .toolbar-transpose-row{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}.hah-choi-native .control-btn{
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border: 0;
    border-radius: 9999px;
    cursor: pointer;
    font-family: serif;
}.hah-choi-native .control-btn:hover{ background: #d1d5db; }.hah-choi-native .control-btn.is-flat{ font-style: italic; }.hah-choi-native .practice-toggle-row{
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
}.hah-choi-native .practice-toggle-row label{
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.75rem;
    color: #374151;
    gap: 0.25rem;
}.hah-choi-native .toggle-check{
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.25rem;
    accent-color: #d83030;
}.hah-choi-native #play-btn{
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    background: #d83030;
    color: #fff;
    border: 0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}.hah-choi-native #play-btn:hover{ background: #b82525; transform: scale(1.05); }.hah-choi-native #play-btn:disabled{ background: #9ca3af; cursor: not-allowed; transform: none; }.hah-choi-native #play-btn svg{ width: 1.5rem; height: 1.5rem; }.hah-choi-native .practice-transport-card{
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    overflow: visible;
}.hah-choi-native .range-slider{
    width: 100%;
    height: 0.5rem;
    background: #e5e7eb;
    border-radius: 0.5rem;
    appearance: none;
    cursor: pointer;
    accent-color: #d83030;
}.hah-choi-native #status{
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    min-height: 1rem;
    height: auto;
    margin-top: 0.5rem;
}.hah-choi-native .editor-transport{
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0.5rem 0.5rem 0 0;
    flex-shrink: 0;
}.hah-choi-native .editor-transport-row{
    display: flex;
    align-items: center;
    gap: 1rem;
}.hah-choi-native .tempo-field{
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}.hah-choi-native .tempo-field .practice-tempo-toggle{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0 0 0.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    color: #64748b;
    cursor: pointer;
}.hah-choi-native .tempo-field .practice-tempo-toggle #tempo-value{
    font-weight: 800;
    color: #1a1c1e;
    font-variant-numeric: tabular-nums;
}.hah-choi-native .tempo-field .practice-tempo-panel{
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.35rem);
    z-index: 12;
    width: min(14rem, 100%);
    padding: 0.45rem 0.65rem;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 20px -10px rgba(26, 28, 30, 0.35);
}.hah-choi-native .tempo-field .practice-tempo-panel[hidden]{
    display: none !important;
}.hah-choi-native .tempo-field #tempo-slider{
    width: 100%;
    display: block;
    accent-color: #d83030;
}.hah-choi-native #chord-preview-container{
    margin-bottom: 1rem;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #f9fafb;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow-x: auto;
}.hah-choi-native .muted{ color: #9ca3af; margin: 0; }.hah-choi-native .editor-label{
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.25rem;
}.hah-choi-native .save-song-wrap{ margin-top: 0.5rem; }.hah-choi-native #save-song-btn{
    width: 100%;
    background: #16a34a;
    color: #fff;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}.hah-choi-native #save-song-btn:hover{ background: #15803d; }.hah-choi-native #save-song-btn:disabled{ background: #9ca3af; cursor: not-allowed; }.hah-choi-native .save-ico{
    width: 1rem;
    height: 1rem;
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: -0.15em;
}.hah-choi-native #save-status{
    margin-top: 0.25rem;
    font-size: 0.875rem;
    text-align: center;
}.hah-choi-native #save-status.is-ok{ color: #16a34a; }.hah-choi-native #save-status.is-err{ color: #dc2626; }/* Improved lyric items layout */.hah-choi-native .lyric-item{ 
    transition: all 0.2s ease-in-out; 
    display: inline-block; 
    vertical-align: top;
    line-height: 1.5;
    min-height: 45px;
    margin-right: 2px;
}/* Enhanced chord item positioning */.hah-choi-native .chord-item{ 
    color: #a83d5c; 
    font-weight: 500; 
    display: inline-block; 
    position: relative; 
    top: -0.3em; 
    margin: 0 0.2em;
    vertical-align: top;
    line-height: 1;
}/* Better SVG jtab positioning and spacing - scale 0.5 mặc định */.hah-choi-native .jtab-in-lyrics{ 
    transform: scale(0.5); 
    transform-origin: top left; 
    margin: 0px 5px 5px -5px; 
    padding: 0; 
    display: inline-block;
    vertical-align: top;
    position: relative;
    z-index: 1;
    height: 40px;
    min-height: 40px;
    margin-top: -20px;
}/* Ensure SVG doesn't overlap text and shows completely */.hah-choi-native .jtab-in-lyrics svg{
    overflow: visible !important;
    max-width: none;
    max-height: none;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    position: static !important;
    left: 0 !important;
    top: 0 !important;
}/* Force override inline SVG container styles */.hah-choi-native .jtab-in-lyrics div[id*="builder_"]{
    height: auto !important;
    max-height: 60px !important;
    /* overflow: hidden !important; */
}.hah-choi-native .jtab-in-lyrics div[id*="builder_"] svg{
    transform: none !important;
    transition: none !important;
    animation: none !important;
    max-height: 60px !important;
    overflow: visible !important;
}.hah-choi-native .highlight{ 
    color: #dc2626 !important; 
    font-weight: 700;
    background-color: rgba(220, 53, 69, 0.1);
    /* KHÔNG thay đổi kích thước khi highlight */
}/* KHÔNG scale khi highlight */.hah-choi-native .highlight.jtab-in-lyrics{ 
    /* transform: scale(0.5) !important;  */
}/* Force override highlight inline styles */.hah-choi-native .highlight.jtab-in-lyrics div[id*="builder_"]{
    height: auto !important;
    max-height: 60px !important;
}.hah-choi-native .highlight.jtab-in-lyrics div[id*="builder_"] svg{
    transform: scale(0.5) !important;
    transition: none !important;
    animation: none !important;
    max-height: 60px !important;
    margin-top: -30px;
}.hah-choi-native .highlight.jtab-in-lyrics svg text,
.hah-choi-native .highlight.jtab-in-lyrics svg path,
.hah-choi-native .highlight.jtab-in-lyrics svg circle{ 
    fill: #dc2626 !important; 
    stroke: #dc2626 !important; 
}.hah-choi-native .highlight.jtab-in-lyrics svg circle + text{ 
    fill: #ffffff !important; 
    stroke: #ffffff !important; 
}.hah-choi-native #editor-container{ position: relative; flex: 1 1 auto; min-height: 400px; font-family: monospace; font-size: 1rem; line-height: 1.5; }.hah-choi-native #editor-overlay{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0.75rem; border: 1px solid transparent; pointer-events: none; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; }.hah-choi-native #song-content{ width: 100%; height: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 0.375rem; resize: none; background-color: transparent; color: transparent; caret-color: #1f2937; font-family: monospace; font-size: 1rem; line-height: 1.5; min-height: 400px; box-sizing: border-box; }.hah-choi-native #song-content:focus{ outline: none; border-color: #d83030; box-shadow: 0 0 0 1px #d83030; }.hah-choi-native .overlay-chord{ color: #1d4ed8; font-weight: inherit; background: rgba(29, 78, 216, 0.1); border-radius: 2px; }.hah-choi-native .overlay-chord--pluck{ color: #0f766e; background: rgba(15, 118, 110, 0.12); }.hah-choi-native .overlay-chord--pluck-sticky{
    color: #0f766e;
    background: rgba(15, 118, 110, 0.2);
    box-shadow: inset 0 -2px 0 rgba(15, 118, 110, 0.55);
}.hah-choi-native #autocomplete-container{ display: none; position: absolute; z-index: 10; background-color: white; border: 1px solid #d1d5db; border-radius: 0.375rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); max-height: 150px; overflow-y: auto; font-family: sans-serif; font-size: 0.875rem; }.hah-choi-native .autocomplete-item{ padding: 0.5rem 0.75rem; cursor: pointer; }.hah-choi-native .autocomplete-item:hover,
.hah-choi-native .autocomplete-item.selected{ background-color: #eff6ff; }.hah-choi-native #chord-preview-container .jtab-chord{ cursor: pointer; transition: transform 0.1s ease-in-out; }.hah-choi-native #chord-preview-container .jtab-chord:hover{ transform: scale(1.05); }/* U12.9bp — dropped html,body{overflow:hidden} (would kill host page) *//* Enhanced Mobile Responsive Styles */@media (max-width: 768px)  {
/* MOBILE: Ẩn JTab SVG, chỉ hiển thị text hợp âm */.hah-choi-native .jtab-in-lyrics svg,
.hah-choi-native .jtab-in-lyrics div[id*="builder_"]{
        display: none !important;
    }/* MOBILE: Style cho text hợp âm thay vì SVG */.hah-choi-native .jtab-in-lyrics{ 
        transform: none !important;
        margin: 0 3px 0 0 !important;
        height: auto !important;
        min-height: auto !important;
        display: inline-block !important;
        font-size: 0.85em !important;
        color: #1d4ed8 !important;
        font-weight: 600 !important;
        background-color: #eff6ff !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        border: 1px solid #d83030 !important;
        vertical-align: baseline !important;
    }/* MOBILE: Thêm text content từ attribute hoặc fallback */.hah-choi-native .jtab-in-lyrics::before{
        content: attr(data-chord-name) !important;
    }/* MOBILE: Fallback nếu không có data-chord-name */.hah-choi-native .jtab-in-lyrics:not([data-chord-name])::before{
        content: "[Chord]" !important;
    }/* Compact mobile typography - TIGHTER LINE HEIGHT */.hah-choi-native #lyrics-container-choi{ 
        font-size: 0.8rem; 
        line-height: 1.3; 
        padding: 0.5rem;
    }/* Compact text visibility on mobile - REDUCED MIN-HEIGHT */.hah-choi-native .lyric-item{
        line-height: 1.4;
        word-spacing: 0.05em;
        min-height: 35px;
    }/* MOBILE: Highlight style cho text hợp âm - ĐỎ và ĐẬM */.hah-choi-native .highlight.jtab-in-lyrics{ 
        color: #dc2626 !important;
        font-weight: 700 !important;
        background-color: rgba(220, 38, 38, 0.15) !important;
        border-color: #dc2626 !important;
        transform: none !important;
    }/* MOBILE: Force override mọi SVG trong highlight */.hah-choi-native .highlight.jtab-in-lyrics svg,
.hah-choi-native .highlight.jtab-in-lyrics div[id*="builder_"]{
        display: none !important;
    }/* Mobile: Force override highlight inline styles */.hah-choi-native .highlight.jtab-in-lyrics div[id*="builder_"]{
        height: auto !important;
        max-height: 50px !important;
    }.hah-choi-native .highlight.jtab-in-lyrics div[id*="builder_"] svg{
        transform: scale(0.5) !important;
        max-height: 50px !important;
    }/* Better mobile layout — editor only; practice keeps 100% viewport (U12.7m) */.hah-choi-native body:not(.ui-practice) .choi-layout{ height: auto; }.hah-choi-native body:not(.ui-practice) .choi-frame{ height: auto; min-height: 100vh; }.hah-choi-native #editor-container{ min-height: 250px; }.hah-choi-native #song-content{ min-height: 250px; }/* Improve chord visibility on mobile - CLOSER TO TEXT */.hah-choi-native .chord-item{
        font-size: 0.75em;
        font-weight: 600;
        top: 0.1em;
        margin: 0 0.1em;
    }/* Compact spacing for mobile lyrics container - REDUCED MARGINS */.hah-choi-native #lyrics-container-choi > div{
        margin-bottom: 0.1rem;
        padding: 0.25rem 0.4rem;
        min-height: 38px;
    }/* MOBILE CONTROLS OPTIMIZATION - COMPACT LAYOUT */.hah-choi-native .player-toolbar-block{
        margin-bottom: 0.75rem !important;
        padding: 0.75rem !important;
    }.hah-choi-native .player-toolbar-grid{
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }/* Bigger controls for better mobile usability */.hah-choi-native select,
.hah-choi-native .control-btn{
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
        min-height: 44px !important;
    }.hah-choi-native .control-btn{
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
    }/* Compact checkboxes section */.hah-choi-native .practice-toggle-row{
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: space-between !important;
    }.hah-choi-native .practice-toggle-row label{
        font-size: 0.9rem !important;
        flex: 1;
        min-width: auto;
    }/* COMPACT PLAYER CONTROLS */.hah-choi-native .editor-transport{
        padding: 0.5rem !important;
    }.hah-choi-native .editor-transport-row{
        flex-wrap: wrap;
        gap: 0.5rem;
    }.hah-choi-native #play-btn{
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0;
    }.hah-choi-native #play-btn svg{
        width: 20px !important;
        height: 20px !important;
    }/* COMPACT TEMPO SLIDER */.hah-choi-native .tempo-field label{
        font-size: 0.8rem !important;
        margin-bottom: 0.25rem;
    }.hah-choi-native #tempo-slider{
        height: 6px !important;
        margin-top: 0.25rem;
    }.hah-choi-native #status{
        font-size: 0.75rem !important;
        margin-top: 0.5rem !important;
        height: auto !important;
    }}
/* Extra small screens (phones in portrait) */@media (max-width: 480px)  {
/* EXTRA SMALL: Cũng ẩn JTab SVG, chỉ hiển thị text hợp âm */.hah-choi-native .jtab-in-lyrics svg,
.hah-choi-native .jtab-in-lyrics div[id*="builder_"]{
        display: none !important;
    }/* EXTRA SMALL: Style nhỏ hơn cho text hợp âm */.hah-choi-native .jtab-in-lyrics{ 
        font-size: 0.8em !important;
        padding: 1px 4px !important;
        margin: 0 2px 0 0 !important;
    }/* EXTRA SMALL: Highlight đỏ và đậm */.hah-choi-native .highlight.jtab-in-lyrics{ 
        color: #dc2626 !important;
        font-weight: 700 !important;
        background-color: rgba(220, 38, 38, 0.15) !important;
        border-color: #dc2626 !important;
    }/* Tighter typography */.hah-choi-native #lyrics-container-choi{ 
        font-size: 0.75rem; 
        line-height: 1.25;
        padding: 0.4rem;
    }.hah-choi-native .chord-item{
        font-size: 0.7em;
        top: -0.85em;
        margin: 0 0.05em;
    }.hah-choi-native .lyric-item{
        min-height: 30px;
        line-height: 1.3;
    }/* EXTRA SMALL: giữ nguyên kích thước khi highlight */.hah-choi-native .highlight.jtab-in-lyrics{ 
        transform: scale(0.3) !important; 
    }/* Extra Small: Force override highlight inline styles */.hah-choi-native .highlight.jtab-in-lyrics div[id*="builder_"]{
        height: auto !important;
        max-height: 40px !important;
    }.hah-choi-native .highlight.jtab-in-lyrics div[id*="builder_"] svg{
        transform: scale(0.5) !important;
        max-height: 40px !important;
    }/* EXTRA COMPACT CONTROLS */.hah-choi-native .player-toolbar-block{
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }.hah-choi-native select,
.hah-choi-native .control-btn{
        padding: 0.375rem 0.5rem !important;
        font-size: 0.8rem !important;
        min-height: 40px !important;
    }.hah-choi-native .control-btn{
        width: 40px !important;
        height: 40px !important;
    }.hah-choi-native .editor-transport{
        padding: 0.375rem !important;
    }.hah-choi-native #play-btn{
        width: 36px !important;
        height: 36px !important;
    }.hah-choi-native #play-btn svg{
        width: 18px !important;
        height: 18px !important;
    }.hah-choi-native .tempo-field label{
        font-size: 0.75rem !important;
    }.hah-choi-native #tempo-slider{
        height: 5px !important;
    }}
/* =========================================================================
 * BOOTSTRAP LYRIC TOOLBAR RESPONSIVE CSS
 * For external Bootstrap components used in other parts of the site
 * ========================================================================= */.hah-choi-native .lyric_toolbar{
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}.hah-choi-native .lyric_toolbar .btn{
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}.hah-choi-native .lyric_toolbar .btn-sm{
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}/* Override any inherited large font sizes */.hah-choi-native .content-area,
.hah-choi-native .entry-content,
.hah-choi-native .post-content{
    font-size: 1rem !important;
    line-height: 1.6 !important;
}.hah-choi-native .content-area *,
.hah-choi-native .entry-content *,
.hah-choi-native .post-content *{
    font-size: inherit !important;
    line-height: inherit !important;
}/* Enhanced Mobile Responsive for Toolbar */@media (max-width: 768px)  {
.hah-choi-native .lyric_toolbar{
        padding: 0.75rem !important;
        margin-bottom: 1rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }.hah-choi-native .lyric_toolbar .btn-group{
        margin-bottom: 0.75rem !important;
        margin-right: 0 !important;
        flex-wrap: wrap;
        justify-content: center;
    }.hah-choi-native .lyric_toolbar .btn-group label{
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        width: 100%;
        text-align: center;
        font-weight: 600;
    }.hah-choi-native .lyric_toolbar .btn{
        margin: 0.125rem;
        flex: 1;
        min-width: auto;
    }.hah-choi-native .lyric_toolbar .btn-sm{
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }.hah-choi-native .lyric_toolbar .dropdown-toggle{
        min-width: 50px !important;
    }/* Action buttons container */.hah-choi-native .lyric_toolbar .ms-auto{
        margin-left: 0 !important;
        margin-top: 0.5rem;
        display: flex !important;
        flex-direction: column;
        gap: 0.5rem;
    }.hah-choi-native .lyric_toolbar .ms-auto .btn{
        width: 100%;
        margin-left: 0 !important;
        margin-bottom: 0;
        justify-content: center;
    }}
/* Extra Small Mobile - Portrait phones */@media (max-width: 480px)  {
.hah-choi-native .lyric_toolbar{
        padding: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }.hah-choi-native .lyric_toolbar .btn-group{
        margin-bottom: 0.5rem !important;
    }.hah-choi-native .lyric_toolbar .btn-group label{
        font-size: 0.8rem;
        margin-bottom: 0.375rem;
    }.hah-choi-native .lyric_toolbar .btn{
        font-size: 0.7rem;
        padding: 0.25rem 0.375rem;
        margin: 0.1rem;
    }.hah-choi-native .lyric_toolbar .dropdown-toggle{
        min-width: 45px !important;
        font-size: 0.7rem;
    }.hah-choi-native .lyric_toolbar .ms-auto{
        gap: 0.375rem;
    }.hah-choi-native .lyric_toolbar .ms-auto .btn{
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
    }}
/* Landscape phones and small tablets */@media (max-width: 991px) and (min-width: 769px)  {
.hah-choi-native .lyric_toolbar .btn-group{
        margin-right: 1rem !important;
    }.hah-choi-native .lyric_toolbar .ms-auto .btn{
        margin-left: 0.25rem !important;
    }}
/* Dropdown menu improvements for mobile */@media (max-width: 768px)  {
.hah-choi-native .lyric_toolbar .dropdown-menu{
        font-size: 0.875rem;
        max-height: 200px;
        overflow-y: auto;
    }.hah-choi-native .lyric_toolbar .dropdown-item{
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }}
/* Icon improvements */.hah-choi-native .lyric_toolbar .fas{
    margin-right: 0.25rem;
}@media (max-width: 480px)  {
.hah-choi-native .lyric_toolbar .fas{
        margin-right: 0.125rem;
    }}
/* CRITICAL: Force prevent SVG scaling during highlight - override all rules */.hah-choi-native .chord-item.highlight svg,
.hah-choi-native .chord-item:hover svg,
.hah-choi-native .chord-item svg.highlighted,
.hah-choi-native .chord-item svg:hover,
.hah-choi-native .highlight svg,
.hah-choi-native svg.highlight,
.hah-choi-native .chord-item.highlight svg *,
.hah-choi-native .chord-item:hover svg *,
.hah-choi-native .highlight .chord-diagram svg,
.hah-choi-native .chord-item.highlight .chord-diagram svg{
    transform: scale(0.7) !important;
    max-width: none !important;
    max-height: none !important;
    transition: none !important;
    animation: none !important;
}/* Ensure highlight class doesn't change size */.hah-choi-native .highlight,
.hah-choi-native .chord-item.highlight,
.hah-choi-native .lyric-item.highlight{
    transform: none !important;
    scale: none !important;
    animation: none !important;
    transition: none !important;
}/* U12.6 practice — chord bar ngang; lời full width */.hah-choi-native{
    overflow-x: hidden !important;
    max-width: 100%;
}.hah-choi-native{
    background: #fff;
}.hah-choi-native .practice-shell,
.hah-choi-native .choi-frame{
    max-width: 100% !important;
    min-width: 0 !important;
    /* U12.9r — `clip` chứ KHÔNG `hidden`. Spec CSS Overflow: một trục là
       `visible` còn trục kia không → `visible` bị tính thành `auto`. Đặt
       `overflow-x: hidden` mà bỏ trống `overflow-y` khiến phần tử này âm thầm
       thành VÙNG CUỘN DỌC, nuốt mất cuộn của #lyrics-container-choi.
       `clip` được phép đi cùng `visible` nên không sinh scroll container. */
    overflow-x: clip !important;
}.hah-choi-native .practice-shell{
    flex-direction: column !important;
}.hah-choi-native .practice-editor-block{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}/* Guest host: ẩn save/label. Admin modal tự hiện khi .is-open. */.hah-choi-native .practice-editor-block #save-song-btn,
.hah-choi-native .practice-editor-block #save-status,
.hah-choi-native .practice-editor-block label[for="song-content"]{
    display: none !important;
}/* U12.9ae — nút Sửa bài đã lên tab cha; bỏ style chrome thô trong iframe */.hah-choi-native .practice-edit-open{
    display: none !important;
}.hah-choi-native .practice-editor-modal{
    display: none;
    position: fixed;
    inset: 0;
    z-index: 80;
    align-items: stretch;
    justify-content: center;
    padding: 0.75rem;
    box-sizing: border-box;
}.hah-choi-native .practice-editor-modal.is-open{
    display: flex;
}.hah-choi-native .practice-editor-modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
}.hah-choi-native .practice-editor-modal__panel{
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    max-height: min(92vh, 900px);
    margin: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}.hah-choi-native .practice-editor-modal__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    flex: 0 0 auto;
}.hah-choi-native .practice-editor-modal__title{
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}.hah-choi-native .practice-editor-modal__close{
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}.hah-choi-native .practice-editor-modal__close:hover{
    background: #f3f4f6;
    color: #111827;
}.hah-choi-native .practice-editor-modal__body{
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
}.hah-choi-native .practice-editor-modal.is-open #editor-container{
    flex: 1 1 auto;
    min-height: 280px;
}.hah-choi-native .practice-editor-modal.is-open #song-content{
    min-height: 280px;
}.hah-choi-native .practice-editor-modal.is-open #autocomplete-container{
    z-index: 40;
}.hah-choi-native .practice-editor-modal__foot{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid #e5e7eb;
    background: #fafbfc;
    flex: 0 0 auto;
}.hah-choi-native .practice-editor-modal__foot .save-song-wrap{
    flex: 1 1 12rem;
    margin-top: 0;
}.hah-choi-native .practice-editor-modal__foot #save-song-btn{
    width: 100%;
}.hah-choi-native .practice-editor-apply{
    flex: 0 0 auto;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}.hah-choi-native .practice-editor-apply:hover{
    border-color: #d83030;
    color: #d83030;
}@media (max-width: 768px)  {
.hah-choi-native .practice-editor-modal{
        padding: 0;
    }.hah-choi-native .practice-editor-modal__panel{
        width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }}
.hah-choi-native .practice-main-col{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.45rem 0.55rem 0.5rem !important;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0 !important;
    /* U12.9r — `clip` chứ KHÔNG `hidden`: đây là cha trực tiếp của
       #lyrics-container-choi; `hidden` một trục biến nó thành vùng cuộn dọc
       (xem ghi chú ở .practice-shell). */
    overflow-x: clip;
}.hah-choi-native .practice-side-col{
    display: none !important;
}.hah-choi-native .chord-item{
    color: #c0264b;
    background: #fff1f2;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.78em;
    font-weight: 800;
    vertical-align: 0.35em;
    margin-right: 2px;
    display: inline;
}.hah-choi-native .jtab-in-lyrics{
    display: inline !important;
    transform: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 2px !important;
}.hah-choi-native .jtab-in-lyrics svg,
.hah-choi-native .jtab-in-lyrics div[id*="builder_"]{
    display: none !important;
}.hah-choi-native .jtab-in-lyrics::before{
    content: attr(data-chord-name);
    color: #c0264b;
    background: #fff1f2;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 0.85em;
    font-weight: 800;
}.hah-choi-native .highlight-line{
    background: #fff7ed;
    box-shadow: inset 3px 0 0 #fb923c;
}.hah-choi-native .practice-top-chrome{
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
}/* U12.9bm — bánh răng Công cụ luôn hiện (dock footer). Không ẩn khi màn cao. */.hah-choi-native .practice-settings-toggle{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    flex: 0 0 auto;
    align-self: stretch;
    width: 2.65rem;
    min-width: 2.65rem;
    max-width: 2.65rem;
    margin: 0;
    padding: 0.35rem 0;
    border: 1px solid var(--hah-border, #e3e6ea);
    border-radius: var(--hah-radius, 10px);
    background: #fff;
    color: var(--hah-ink-muted, #5c636a);
    box-shadow: 0 1px 2px rgba(26, 28, 30, 0.04);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}.hah-choi-native .practice-settings-toggle:hover,
.hah-choi-native .practice-settings-toggle:focus-visible{
    border-color: rgba(var(--hah-brand-rgb, 216, 48, 48), 0.4);
    color: var(--hah-brand, #d83030);
    background: #fff8f8;
    outline: none;
}.hah-choi-native .practice-settings-toggle .practice-ico{
    width: 1.2rem;
    height: 1.2rem;
}.hah-choi-native .practice-settings-toggle__chev{
    display: block;
    width: 0.45rem;
    height: 0.45rem;
    margin: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.15s ease;
    opacity: 0.7;
}.hah-choi-native .player-toolbar-block.is-open .practice-settings-toggle__chev{
    transform: rotate(-135deg);
}.hah-choi-native .player-toolbar-block.is-open .practice-settings-toggle{
    border-color: var(--hah-brand, #d83030);
    background: #fff1f2;
    color: var(--hah-brand, #d83030);
}.hah-choi-native .practice-chord-bar{
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    margin: 0;
    padding: 0.2rem 0.3rem;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden; /* strip scroll; chip ring vẫn trong bar */
}.hah-choi-native .practice-chord-strip{
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 0.2rem 0.1rem;
    touch-action: pan-x;
}/* Tile strip: cùng cỡ. U12.9p — KHÔNG dùng CSS zoom (Safari hỗ trợ nửa vời
   → jtab lệch lên/trái, tràn card). Dùng transform:scale + kích thước gốc
   + margin âm trên MỌI trình duyệt. */.hah-choi-native .practice-chord-chip{
    flex: 0 0 auto;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    width: 72px;
    height: 78px;
    padding: 0.22rem 0.18rem;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fff;
    color: #5c636a;
    overflow: hidden;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}.hah-choi-native .practice-chord-chip .chip-name{
    display: none !important;
}.hah-choi-native .practice-chord-chip .chip-jtab{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
    overflow: hidden;
    filter: grayscale(0.4);
    opacity: 0.72;
}.hah-choi-native .practice-chord-chip .chip-jtab .practice-jtab-host,
.hah-choi-native .practice-chord-chip .chip-jtab .jtab,
.hah-choi-native .practice-chord-chip .chip-jtab .rendered{
    display: block !important;
    margin: -31px -36px !important;
    line-height: 0 !important;
    overflow: hidden !important;
    width: 138px !important;
    height: 118px !important;
    zoom: normal;
    transform: scale(0.48) !important;
    transform-origin: center center !important;
    -webkit-transform: scale(0.48) !important;
    -webkit-transform-origin: center center !important;
}.hah-choi-native .practice-chord-chip .chip-jtab .practice-jtab-host > div,
.hah-choi-native .practice-chord-chip .chip-jtab .jtab > div,
.hah-choi-native .practice-chord-chip .chip-jtab .rendered > div{
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
}.hah-choi-native .practice-chord-chip .chip-jtab svg{
    display: block !important;
    margin: 0 auto !important;
    transform: none !important;
    max-width: none !important;
    height: auto !important;
    width: auto !important;
}.hah-choi-native .practice-chord-chip.is-active{
    background: #fffbeb;
    border-color: #b45309;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28);
    z-index: 1;
}.hah-choi-native .practice-chord-chip.is-active .chip-jtab{
    filter: none;
    opacity: 1;
}.hah-choi-native .practice-chord-bar .label-ico{
    display: none;
}.hah-choi-native .practice-player-footer{
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 0 0 auto;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 12;
    background: #fff;
    padding-top: 0.2rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 18px -14px rgba(26, 28, 30, 0.22);
}.hah-choi-native .song-line{
    display: block;
    margin-bottom: 0.65rem;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    overflow: visible;
    transition: background-color 0.2s ease;
}.hah-choi-native .chord-line,
.hah-choi-native .lyric-line{
    display: block;
    font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0;
    letter-spacing: 0;
    tab-size: 4;
    line-height: 1.4;
}/* Hợp âm: giữ sheet ngang (căn cột trên lời).
   U12.9r — U12.9n từng ẩn thanh cuộn dòng hợp âm → người dùng báo "overflow
   hợp âm không hiện". Cho hiện lại, mảnh (6px) và chỉ khi dòng thật sự tràn.
   Vẫn KHÔNG đặt scrollbar-width ở đây (xem ghi chú #lyrics-container-choi:
   Chromium ≥121 sẽ bỏ qua ::-webkit-scrollbar nếu thấy thuộc tính chuẩn). */.hah-choi-native .chord-line{
    white-space: pre;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    max-width: 100%;
}.hah-choi-native .chord-line::-webkit-scrollbar{
    height: 6px;
}.hah-choi-native .chord-line::-webkit-scrollbar-thumb{
    background: #b8c0c9;
    border-radius: 3px;
}.hah-choi-native .chord-line::-webkit-scrollbar-track{
    background: transparent;
}@supports (-moz-appearance: none)  {
.hah-choi-native .chord-line{
        scrollbar-width: thin;
        scrollbar-color: #b8c0c9 transparent;
    }}
/* Lời: luôn dọc, xuống dòng tự nhiên */.hah-choi-native .lyric-line{
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}.hah-choi-native .chord-line{
    color: #9f1239;
    font-weight: 700;
    font-size: 0.95em;
    min-height: 1.2em;
}.hah-choi-native .lyric-line{
    color: #1a1c1e;
    font-weight: 500;
    font-size: 0.95em;
}.hah-choi-native .song-line.is-active{
    background: #fff8d6;
    box-shadow: inset 3px 0 0 #f59e0b;
}/* Hợp âm đang phát: đổi màu/đậm nền — không đổi font-weight (giữ cột monospace) */.hah-choi-native .chord{
    color: #be123c;
    font-weight: 700;
    font-family: inherit;
    border-radius: 3px;
    transition: color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}.hah-choi-native .song-line.is-active .chord:not(.is-active){
    color: #9f1239;
    opacity: 0.45;
}.hah-choi-native .chord.is-active{
    color: #7f1d1d !important;
    background: #fbbf24;
    box-shadow: 0 0 0 2px #b45309;
    opacity: 1 !important;
    text-decoration: none;
    font-weight: 700;
}.hah-choi-native .practice-jtab.is-active-chord{
    border-color: #b45309;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.45);
    background: #fffbeb;
}.hah-choi-native .practice-ico{
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.15em;
}.hah-choi-native .practice-ico--toggle{
    display: none;
}.hah-choi-native .practice-transport{
    display: flex;
    align-items: center;
    gap: 0.65rem;
}.hah-choi-native .practice-sliders{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}.hah-choi-native .practice-progress-wrap,
.hah-choi-native .practice-tempo-wrap{
    position: relative;
    width: 100%;
    min-width: 0;
}.hah-choi-native .practice-tempo-toggle{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
    color: #64748b;
    cursor: pointer;
}.hah-choi-native .practice-tempo-toggle #tempo-value{
    font-weight: 800;
    color: #1a1c1e;
    font-variant-numeric: tabular-nums;
    min-width: 1.75rem;
    text-align: right;
}.hah-choi-native .practice-tempo-panel{
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.35rem);
    z-index: 12;
    width: min(14rem, 100%);
    padding: 0.45rem 0.65rem;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 8px 20px -10px rgba(26, 28, 30, 0.35);
}.hah-choi-native .practice-tempo-panel[hidden]{
    display: none !important;
}.hah-choi-native #practice-seek,
.hah-choi-native #tempo-slider{
    width: 100%;
    display: block;
}.hah-choi-native .practice-chord-bar .name,
.hah-choi-native .practice-chord-bar .practice-next-name{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}.hah-choi-native .practice-jtab[hidden]{
    display: none !important;
}.hah-choi-native .practice-jtab-empty{
    font-size: 1.1rem;
    font-weight: 800;
    color: #94a3b8;
}.hah-choi-native #lyrics-container-choi{
    /* U12.9w — không multi-column. U12.9aa — flex leftover trong iframe;
       sàn 120px. KHÔNG height:90vh (che toolbar/footer — nhầm với chiều cao iframe). */
    width: 100%;
    border-radius: 10px 10px 0 0;
    flex: 1 1 0% !important;
    min-height: 120px !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto;
    padding-right: 0.15rem !important;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    padding: 1rem;
    font-size: 1.125rem;
    line-height: 1.625;
}/* Firefox mới nhận 2 thuộc tính chuẩn này; Chromium/WebKit không match khối
   @supports nên không bao giờ thấy chúng → ::-webkit-scrollbar sống. */@supports (-moz-appearance: none)  {
.hah-choi-native #lyrics-container-choi{
        scrollbar-width: auto;
        scrollbar-color: #8b949e #e8ebef;
    }}
.hah-choi-native #lyrics-container-choi::-webkit-scrollbar{
    width: 12px;
    background: #e8ebef;
}.hah-choi-native #lyrics-container-choi::-webkit-scrollbar-thumb{
    background: #8b949e;
    border-radius: 6px;
    border: 2px solid #e8ebef;
    background-clip: padding-box;
    min-height: 40px;
}.hah-choi-native #lyrics-container-choi::-webkit-scrollbar-thumb:hover{
    background: #6b7280;
}.hah-choi-native #lyrics-container-choi::-webkit-scrollbar-track{
    background: #e8ebef;
    border-radius: 6px;
}.hah-choi-native .practice-main-col{
    min-height: 0 !important;
    height: 100% !important;
}.hah-choi-native .player-toolbar-block{
    margin-bottom: 0.45rem !important;
    padding: 0.65rem 0.75rem !important;
    /* Chrome co trước khi lời bị ép dưới sàn 120px */
    flex: 0 1 auto;
    min-height: 0;
}/* U12.9bm — Config + dải hợp âm nằm trong footer, cùng thanh Play */.hah-choi-native .practice-player-footer .player-toolbar-block{
    display: flex;
    flex-direction: column;
    margin-bottom: 0 !important;
    padding: 0.15rem 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    flex: 0 0 auto;
    min-height: 0;
}.hah-choi-native .practice-player-footer .player-toolbar-block.is-collapsed{
    padding: 0.15rem 0 0 !important;
    border: 0 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}.hah-choi-native .practice-player-footer .player-toolbar-block.is-open{
    padding: 0.4rem 0.5rem !important;
    border: 1px solid #e3e6ea !important;
    border-radius: 10px;
    background: #f8fafc !important;
}.hah-choi-native .practice-player-footer .practice-top-chrome{
    margin-bottom: 0.2rem;
}.hah-choi-native .practice-player-footer .player-toolbar-block.is-open .player-toolbar-body{
    order: -1;
    margin-top: 0;
    margin-bottom: 0.4rem;
}.hah-choi-native .practice-player-footer{
    flex: 0 0 auto !important;
    margin-top: auto;
}.hah-choi-native #tempo-slider,
.hah-choi-native #practice-seek{
    accent-color: #d83030;
}.hah-choi-native .practice-progress-wrap{
    flex: 1;
    min-width: 0;
}.hah-choi-native .practice-time-row{
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.15rem;
    font-variant-numeric: tabular-nums;
}.hah-choi-native #practice-seek,
.hah-choi-native #tempo-slider{
    height: 0.4rem;
    accent-color: #d83030;
}/* U12.7m — mobile practice: giữ flex height, footer gọn, không cắt iframe */@media (max-width: 768px)  {
.hah-choi-native,
.hah-choi-native html{
        height: 100% !important;
        overflow: hidden !important;
    }.hah-choi-native .choi-frame{
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }.hah-choi-native .practice-shell,
.hah-choi-native .practice-main-col{
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
    }.hah-choi-native .practice-main-col{
        padding: 0.3rem !important;
        box-sizing: border-box;
    }.hah-choi-native .practice-player-footer{
        flex: 0 0 auto !important;
        margin-top: auto;
        position: sticky;
        bottom: 0;
    }/* Label → icon trên mobile */.hah-choi-native .label-text{
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }.hah-choi-native .practice-ico--toggle{
        display: inline-block;
        width: 1rem;
        height: 1rem;
        color: #475569;
    }.hah-choi-native .practice-settings-toggle{
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        flex: 0 0 auto;
        align-self: stretch;
        width: 2.65rem;
        min-width: 2.65rem;
        max-width: 2.65rem;
        margin: 0;
        padding: 0.35rem 0;
        border: 1px solid var(--hah-border, #e3e6ea);
        border-radius: var(--hah-radius, 10px);
        background: #fff;
        color: var(--hah-ink-muted, #5c636a);
        box-shadow: 0 1px 2px rgba(26, 28, 30, 0.04);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }.hah-choi-native .practice-settings-toggle:hover,
.hah-choi-native .practice-settings-toggle:focus-visible{
        border-color: rgba(var(--hah-brand-rgb, 216, 48, 48), 0.4);
        color: var(--hah-brand, #d83030);
        background: #fff8f8;
        outline: none;
    }.hah-choi-native .practice-settings-toggle .practice-ico{
        width: 1.2rem;
        height: 1.2rem;
    }.hah-choi-native .practice-settings-toggle__label,
.hah-choi-native .practice-settings-toggle__hint{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }.hah-choi-native .practice-settings-toggle__chev{
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        margin: 0;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        transform-origin: center;
        transition: transform 0.15s ease;
        opacity: 0.7;
    }.hah-choi-native .player-toolbar-block.is-open .practice-settings-toggle__chev{
        transform: rotate(-135deg);
    }.hah-choi-native .player-toolbar-block.is-open .practice-settings-toggle{
        max-width: 2.65rem;
        width: 2.65rem;
        border-color: var(--hah-brand, #d83030);
        background: #fff1f2;
        color: var(--hah-brand, #d83030);
    }.hah-choi-native .player-toolbar-block.is-open .practice-top-chrome{
        flex-wrap: wrap;
    }.hah-choi-native .player-toolbar-block.is-open .practice-chord-bar{
        flex: 1 1 100%;
        order: -1;
    }.hah-choi-native .practice-chord-bar{
        display: flex !important;
        padding: 0.12rem 0.25rem;
        gap: 0.25rem;
        min-height: 0;
        align-items: center;
    }.hah-choi-native .practice-chord-chip{
        width: 66px;
        height: 72px;
        padding: 0.18rem 0.14rem;
    }.hah-choi-native .practice-chord-chip .chip-jtab .jtab,
.hah-choi-native .practice-chord-chip .chip-jtab .rendered,
.hah-choi-native .practice-chord-chip .chip-jtab .practice-jtab-host{
        zoom: normal;
        transform: scale(0.44) !important;
        -webkit-transform: scale(0.44) !important;
        transform-origin: center center !important;
        -webkit-transform-origin: center center !important;
        width: 138px !important;
        height: 118px !important;
        margin: -33px -38px !important;
    }.hah-choi-native .player-toolbar-block{
        flex: 0 0 auto !important;
        margin-bottom: 0.3rem !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }.hah-choi-native .player-toolbar-block.is-collapsed .player-toolbar-body{
        display: none !important;
    }.hah-choi-native .player-toolbar-block.is-open{
        padding: 0.35rem !important;
        border: 1px solid #e3e6ea !important;
        border-radius: 10px;
        background: #f8fafc !important;
    }.hah-choi-native .player-toolbar-block.is-open .practice-settings-toggle{
        margin-bottom: 0;
    }.hah-choi-native .player-toolbar-block.is-open .player-toolbar-body{
        margin-top: 0.4rem;
    }/* Mobile practice: typography; sàn lời 120px (không co về 0) */.hah-choi-native #lyrics-container-choi{
        flex: 1 1 0% !important;
        min-height: 120px !important;
        padding: 0.4rem 0.45rem !important;
        font-size: 0.9rem !important;
        border-radius: 10px;
    }.hah-choi-native .player-toolbar-grid{
        grid-template-columns: 1fr 1fr !important;
        gap: 0.4rem 0.55rem !important;
    }.hah-choi-native .player-toolbar-block select,
.hah-choi-native .player-toolbar-block .control-btn{
        min-height: 36px !important;
        padding: 0.3rem 0.45rem !important;
        font-size: 0.82rem !important;
    }.hah-choi-native .player-toolbar-block .control-btn{
        width: 36px !important;
        height: 36px !important;
    }.hah-choi-native .player-toolbar-block label,
.hah-choi-native .player-toolbar-block .toolbar-label,
.hah-choi-native .practice-toggle-row label{
        font-size: 0.72rem !important;
    }/* U12.9x — Mobile: KHÔNG tách/wrap dòng lời.
       Lyric wrap mà chord-line vẫn `pre` → hợp âm sau lệch/bị che.
       Cuộn ngang cả `.song-line` để chord + lyric giữ cùng cột monospace. */.hah-choi-native .song-line{
        overflow-x: auto;
        overflow-y: visible;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 0.4rem;
        padding: 0.12rem 0.15rem;
    }.hah-choi-native .chord-line,
.hah-choi-native .lyric-line{
        font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
        font-size: 0.82rem;
        line-height: 1.35;
        white-space: pre !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        overflow-x: visible !important;
        max-width: none !important;
    }.hah-choi-native .practice-transport-card{
        padding: 0.4rem 0.5rem !important;
        border-radius: 10px;
        border: 1px solid #e3e6ea;
    }.hah-choi-native .practice-transport{
        gap: 0.45rem !important;
        align-items: stretch;
    }.hah-choi-native .practice-sliders{
        gap: 0.35rem;
    }.hah-choi-native .practice-player-footer #play-btn{
        width: 44px !important;
        height: 44px !important;
        align-self: center;
    }.hah-choi-native .practice-time-row,
.hah-choi-native .practice-tempo-toggle{
        font-size: 0.68rem !important;
    }.hah-choi-native #practice-seek,
.hah-choi-native #tempo-slider{
        width: 100% !important;
        height: 0.45rem !important;
    }.hah-choi-native #status{
        font-size: 0.68rem;
        margin-top: 0.15rem !important;
        height: auto !important;
        min-height: 0;
    }.hah-choi-native #status:empty{
        display: none;
    }}
/* Desktop practice — U12.9aa: lời = flex leftover (không 90vh).
   Iframe cha (fitChoiStage) quyết định chiều cao tổng.
   Màn thấp / is-choi-tight: gập settings để nhường chỗ lời. */@media (min-width: 769px)  {
.hah-choi-native #lyrics-container-choi{
        flex: 1 1 0% !important;
        min-height: 120px !important;
        height: auto !important;
        max-height: none !important;
    }.hah-choi-native .practice-top-chrome{
        display: flex;
        align-items: stretch;
        gap: 0.45rem;
        margin-bottom: 0.55rem;
    }.hah-choi-native .practice-chord-bar{
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        padding: 0.45rem 0.75rem;
    }.hah-choi-native .practice-chord-chip{
        width: 72px;
        height: 80px;
    }.hah-choi-native .practice-chord-chip .chip-jtab .jtab,
.hah-choi-native .practice-chord-chip .chip-jtab .rendered,
.hah-choi-native .practice-chord-chip .chip-jtab .practice-jtab-host{
        zoom: normal;
        transform: scale(0.5) !important;
        -webkit-transform: scale(0.5) !important;
        transform-origin: center center !important;
        -webkit-transform-origin: center center !important;
        width: 138px !important;
        height: 118px !important;
        margin: -29px -34px !important;
    }.hah-choi-native .player-toolbar-block{
        margin-bottom: 0.45rem !important;
        padding: 0.65rem 0.75rem !important;
    }.hah-choi-native .player-toolbar-block.is-collapsed{
        padding: 0.65rem 0.75rem !important;
    }.hah-choi-native .practice-settings-toggle{
        width: 2.75rem;
        min-width: 2.75rem;
        max-width: 2.75rem;
        padding: 0.4rem 0;
    }.hah-choi-native .player-toolbar-block.is-collapsed .player-toolbar-body{
        display: none !important;
    }.hah-choi-native .player-toolbar-block.is-open .player-toolbar-body{
        display: block !important;
        margin-top: 0.4rem;
    }.hah-choi-native .practice-player-footer .player-toolbar-block.is-open .player-toolbar-body{
        margin-top: 0;
        margin-bottom: 0.4rem;
    }}
/* U12.9bm — không tự mở Config khi màn cao: dock footer phải gọn;
   bánh răng luôn hiện, body chỉ mở khi bấm Công cụ. *//* U12.9bf — nhúng tab Sửa bài: chrome Chơi đầy đủ, ẩn lời, height theo nội dung */html[data-song-mode="sua-bai"] .hah-choi-native,
.hah-choi-native html[data-song-mode="sua-bai"]{
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #fff;
}html[data-song-mode="sua-bai"] .hah-choi-native .choi-frame,
html[data-song-mode="sua-bai"] .hah-choi-native .practice-shell,
html[data-song-mode="sua-bai"] .hah-choi-native .practice-main-col{
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
}html[data-song-mode="sua-bai"] .hah-choi-native .practice-main-col{
    padding: 0.3rem 0.45rem 0.35rem !important;
}html[data-song-mode="sua-bai"] .hah-choi-native #lyrics-container-choi{
    display: none !important;
}html[data-song-mode="sua-bai"] .hah-choi-native .practice-player-footer{
    margin-top: 0.2rem;
}html[data-song-mode="sua-bai"] .hah-choi-native .practice-settings-toggle{
    display: inline-flex !important;
}html[data-song-mode="sua-bai"] .hah-choi-native .player-toolbar-block.is-collapsed .player-toolbar-body{
    display: none !important;
}html[data-song-mode="sua-bai"] .hah-choi-native .player-toolbar-block.is-open .player-toolbar-body{
    display: block !important;
}/* ==========================================================================
   U12.9bh — EQ 6 dải
   Thanh trượt dọc dựng bằng CSS (writing-mode), KHÔNG style="" trong JS.
   ========================================================================== */.hah-choi-native .tone-eq-block{
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}.hah-choi-native .tone-eq-head{
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}.hah-choi-native .tone-eq-head .toolbar-label{ margin-bottom: 0; }.hah-choi-native .tone-eq-head .toolbar-select{
    margin-top: 0;
    width: auto;
    flex: 1 1 9rem;
    min-width: 0;
}.hah-choi-native .tone-eq-head .control-btn{
    width: auto;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    flex: 0 0 auto;
}.hah-choi-native .tone-eq{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.25rem;
    margin-top: 0.75rem;
    /* Màn hẹp: cuộn TRONG chính nó — không đẩy tràn stage (luật u129r/u129u) */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}.hah-choi-native .tone-eq__band{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 0;
    min-width: 2.75rem;
}.hah-choi-native .tone-eq__slider{
    writing-mode: vertical-lr;
    direction: rtl;
    width: 1.5rem;
    height: 6.5rem;
    accent-color: #d83030;
    cursor: ns-resize;
}.hah-choi-native .tone-eq__label{
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}.hah-choi-native .tone-eq__value{
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    white-space: nowrap;
}.hah-choi-native .tone-eq__band.is-changed .tone-eq__value{ color: #d83030; }/* Mobile / stage thấp: EQ gập lại cho lời còn chỗ */@media (max-width: 768px)  {
.hah-choi-native .tone-eq__slider{ height: 5rem; }.hah-choi-native .tone-eq__band{ min-width: 2.5rem; }}
/* U12.9bj — Chơi: KHÔNG ẩn EQ nữa (trước đây is-choi-tight cho display:none nên
   laptop < 960px cao không hề thấy EQ ở tab Chơi). Thay bằng: hàng đầu luôn hiện
   (chọn bộ tiếng = 90% nhu cầu), 6 thanh trượt gập sau nút Tinh chỉnh. */.hah-choi-native .tone-eq-toggle{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    cursor: pointer;
    flex: 0 0 auto;
}.hah-choi-native .tone-eq-toggle:hover{ background: #e5e7eb; }.hah-choi-native .tone-eq-toggle__chev{
    width: 0;
    height: 0;
    border-left: 0.3rem solid transparent;
    border-right: 0.3rem solid transparent;
    border-top: 0.35rem solid currentColor;
    transition: transform 0.15s ease;
}.hah-choi-native .tone-eq-toggle[aria-expanded="true"] .tone-eq-toggle__chev{ transform: rotate(180deg); }/* Chơi màn thấp: bóp gọn để không nuốt chỗ của lời */.hah-choi-native.is-choi-tight .tone-eq-block{
    margin-top: 0.6rem;
    padding-top: 0.5rem;
}.hah-choi-native.is-choi-tight .tone-eq__slider{ height: 4.25rem; }

/* U12.9bq — Native: lời full height theo trang, không khung overflow leftover. */
html[data-hah-player="native"] .hah-choi-native,
html[data-hah-player="native"] .hah-choi-native .practice-main-col {
    display: block;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}
html[data-hah-player="native"] .hah-choi-native #lyrics-container-choi {
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}
html[data-hah-player="native"]:not([data-song-mode="choi"]):not([data-song-mode="sua-bai"]) .hah-choi-native #hah-player-dock,
html[data-hah-player="native"]:not([data-song-mode="choi"]):not([data-song-mode="sua-bai"]) .hah-choi-native .practice-player-footer {
    position: relative;
}

/* U12.9br — Trước Play: ẩn bánh răng + dải hợp âm. */
html[data-hah-player="native"] #hah-player-dock.is-idle .player-toolbar-block {
    display: none;
}