/* ====================================================================== */
/* 0. BỨC TƯỜNG CÁCH LY THEME (WORDPRESS ISOLATION)
/* ====================================================================== */
/* Ép buộc ẩn các thành phần Bootstrap nếu chưa load kịp */
.at-wrap .d-none {
    display: none !important;
}

/* Chống theme tác động vào các thẻ link và list bên trong Player */
.at-wrap a, 
.at-wrap button, 
.at-wrap ul, 
.at-wrap li {
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    list-style: none !important;
}

.at-wrap a:hover {
    text-decoration: none !important;
}

/* Ép chiều cao tối thiểu cho Player để không bị bẹp */
.imusic-player-wrapper.at-wrap {
    /* 1. Thiết lập tỷ lệ khung hình chuẩn 16:9 */
    aspect-ratio: 16 / 9;
    
    /* 2. Giới hạn kích thước để không bị quá to hoặc quá bé */
    width: 100%;
    max-height: 85vh; /* Không cho phép cao quá 85% chiều cao màn hình */
    min-height: 450px; /* Luôn cao ít nhất 450px để dễ dùng trên mobile */

    box-sizing: border-box;
}

.at-wrap * {
    box-sizing: border-box;
}
/* ====================================================================== */
/* 1. CORE LAYOUT & STRUCTURE
/* ====================================================================== */
.at-wrap {
    position: relative;
    width: 100%;
    height: 100%; 
    margin: 0 auto;
    border: none !important;
    box-shadow: none !important;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none !important;
    z-index: 1; 
    isolation: isolate; 
    
    /* Chặn bôi đen văn bản */
    -webkit-user-select: none !important; 
    -moz-user-select: none !important;    
    -ms-user-select: none !important;     
    user-select: none !important;         

    /* BỔ SUNG CHO ĐIỆN THOẠI: Chặn popup Copy/Paste và hiệu ứng nháy xanh khi chạm */
    -webkit-touch-callout: none !important; 
    -webkit-tap-highlight-color: transparent !important;
}

/* Ép thêm cho vùng chứa bản nhạc (đề phòng AlphaTab tự ghi đè) */
.at-wrap .at-viewport, .at-wrap .at-canvas {
    -webkit-touch-callout: none !important;
    user-select: none !important;
}

/* MỞ KHÓA LẠI cho ô nhập liệu */
.at-wrap input,
.at-wrap textarea,
.at-wrap select {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important; /* Mở lại popup copy paste cho input */
}

.at-wrap .at-content {
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

.at-wrap .at-viewport {
    position: absolute;
    top: 0;
    left: 0; /* ĐÃ SỬA THÀNH 0 ĐỂ FULL MÀN HÌNH */
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-right: 20px;
    padding-bottom: 60px; 
    scroll-behavior: auto !important;
    transition: bottom 0.3s ease;
}

.at-wrap .at-song-title {
    font-weight: 500;
}


/* ====================================================================== */
/* 2. ALPHATAB PLAYER CURSORS & HIGHLIGHTS (FIX LỖI BIẾN CSS)
/* ====================================================================== */

/* 
 * Sử dụng hàm var() để lấy màu động từ JavaScript.
 * Giá trị thứ hai là màu mặc định (fallback) khớp với CSS gốc của bạn.
*/

.at-wrap .at-cursor-bar {
    /* 
     * SỬA LỖI TẠI ĐÂY:
     * Dùng đúng biến --at-cursor-bar-bg cho thanh chạy ô nhịp.
    */
    background: var(--at-cursor-bar-bg, rgba(64, 64, 255, 0.2));
}

.at-wrap .at-selection div {
    /* Vùng chọn loop vẫn dùng biến --at-selection-bg là đúng */
    background: var(--at-selection-bg, rgba(64, 64, 255, 0.2));
}

.at-wrap .at-cursor-beat {
    /* Mặc định là màu cam, có thể thay đổi trong Settings */
    background: var(--at-cursor-beat-bg, rgba(251, 146, 60, 0.75));
    width: 3px;
}

.at-wrap .at-highlight * {
    /* Mặc định là màu cam đậm, có thể thay đổi trong Settings */
    fill: var(--at-highlight-color, #FB923C);
    stroke: var(--at-highlight-color, #FB923C);
}


/* ====================================================================== */
/* 3. SIDEBAR (TRACK SELECTOR) - DẠNG NGĂN KÉO DÙNG CHUNG MỌI THIẾT BỊ
/* ====================================================================== */

/* 1. NÚT MŨI TÊN (Mỏng, tự động đẩy ra/thu vào) */
.at-wrap .sidebar-toggle-handle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px; 
    height: 50px; 
    transform: translate(0, -50%); 
    
    background-color: rgba(28, 28, 28, 0.75) !important; 
    backdrop-filter: blur(12px) !important; 
    -webkit-backdrop-filter: blur(12px) !important;
    
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-left: none !important;
    border-radius: 0 6px 6px 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1002;
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
    
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease;
}

/* HIỆN NÚT KHI TƯƠNG TÁC */
.at-wrap:not(.user-inactive) .sidebar-toggle-handle {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* KHI MỞ NGĂN KÉO: Đẩy nút ra đúng 310px */
.at-wrap .sidebar-toggle-handle.is-open {
    transform: translate(310px, -50%) !important;
}

.at-wrap .sidebar-toggle-handle i {
    font-size: 12px;
}

/* 2. CỬA SỔ SIDEBAR (ẨN HOÀN TOÀN TRÁI) */
.at-wrap .at-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 310px !important; /* Tăng lên 310px để không bị lẹm thanh âm lượng */
    max-width: 310px !important;
    background: rgba(28, 28, 28, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 1001; 
    display: flex;
    flex-direction: column;
    
    /* Mặc định giấu kín */
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

/* KHI MỞ SIDEBAR */
.at-wrap .at-sidebar.is-open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}

/* Cấu trúc track list */
.at-wrap .at-sidebar-content { flex: 1; overflow-y: auto; width: 100%; display: flex; flex-direction: column; padding-bottom: 60px;}
.at-wrap .at-track-list { width: 100%; display: flex; flex-direction: column; }
.at-wrap .at-track {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
    grid-template-areas: 'icon title' 'icon controls'; padding: 8px 10px;
    transition: background 0.2s; grid-gap: 5px; cursor: pointer; color: #eee; 
    width: 100%; box-sizing: border-box;
}
.at-wrap .at-track:hover, .at-wrap .at-track.active { background: rgba(255, 255, 255, 0.15); }
.at-wrap .at-track > .at-track-icon { grid-area: icon; font-size: 32px; display: flex; justify-content: center; align-items: center; opacity: 0.7; width: 50px; height: 50px; }
.at-wrap .at-track:hover > .at-track-icon, .at-wrap .at-track.active > .at-track-icon { opacity: 1; color: #fff; }
.at-wrap .at-track > .at-track-name { grid-area: title; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-wrap .at-track > .at-track-controls { grid-area: controls; display: flex; align-items: center; }
.at-wrap .at-track > .at-track-controls > * { margin: 0 2px; }
.at-wrap .at-track > .at-track-controls > button {
    background: transparent !important; 
    color: #b3b3b3 !important; 
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px !important; 
    transition: all 0.15s ease-in-out !important; 
    width: 38px !important; 
    height: 24px !important;
    padding: 0 !important; 
    display: inline-flex !important; 
    justify-content: center !important; 
    align-items: center !important;
    font-size: 11px !important; 
    font-weight: bold !important; 
    text-transform: uppercase; 
    cursor: pointer;
}
.at-wrap .at-track > .at-track-controls > button.at-track-mute:hover:not(.active) { background-color: rgba(220, 53, 69, 0.3) !important; border-color: rgba(220, 53, 69, 0.6) !important; color: #fff !important; }
.at-wrap .at-track > .at-track-controls > button.at-track-solo:hover:not(.active) { background-color: rgba(25, 135, 84, 0.3) !important; border-color: rgba(25, 135, 84, 0.6) !important; color: #fff !important; }
.at-wrap .at-track > .at-track-controls > button.at-track-mute.active { background-color: #dc3545 !important; border-color: #dc3545 !important; color: #fff !important; }
.at-wrap .at-track > .at-track-controls > button.at-track-solo.active { background-color: #198754 !important; border-color: #198754 !important; color: #fff !important; }
/* ====================================================================== */
/* 4. FOOTER & PLAYER CONTROLS
/* ====================================================================== */
.at-wrap .at-footer {
    flex: 0 0 auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    color: #fff;
    transition: opacity 0.3s ease;
}

/* Tự ẩn footer khi không dùng */
.at-wrap.user-inactive .at-footer,
.at-wrap.user-inactive .sidebar-toggle-handle {
    opacity: 0;
    pointer-events: none;
    visibility: hidden; /* Thêm visibility để đảm bảo ẩn hoàn toàn */
}

/* KHÓA FOOTER: Luôn hiện khi đang mở bảng Media Sync */
.at-wrap:has(.media-sync-panel.open) .at-footer {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.at-wrap .at-player {
    display: flex;
    justify-content: space-between;
}

.at-wrap .at-player > div {
    padding: 3px;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
}

.at-wrap .at-player-left > *,
.at-wrap .at-player-right > * {
    margin-right: 4px;
}

.at-wrap .at-player-left > a.disabled,
.at-wrap .at-player-left > a.disabled:hover,
.at-wrap .at-player-left > a.disabled:active {
    color: rgba(255, 255, 255, 0.4);
}

.at-wrap .at-footer a {
    color: #fff;
    text-decoration: none;
    display: flex;
    width: 40px;
    height: 40px;
    text-align: center;
    box-sizing: content-box;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    transition: all 0.2s ease;
}

.at-wrap .at-footer a > i {
    vertical-align: top;
    font-size: 18px;
}

.at-wrap .at-footer .btn {
    padding: 4px 12px;
    color: #fff;
    border-radius: 4px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    border: none;
    background: transparent;
}

.at-wrap .at-footer a:hover,
.at-wrap .at-footer .btn:hover {
    background: rgba(255, 255, 255, 0.15);
    text-decoration: none;
}

.at-wrap .at-footer a.active {
    color: #FB923C;
    background: transparent;
}

/* Dropdown (Bản an toàn - Cách ly 100% khỏi Theme) */
/* GỘP CHUNG CHO CẢ FOOTER VÀ MEDIA SYNC TOOLBAR */
.at-wrap .at-footer .btn-group, 
.at-wrap .at-footer .dropup, 
.at-wrap .at-footer .dropdown,
.at-wrap .ms-toolbar .dropdown {
    position: relative !important; /* Điểm neo cho menu */
    display: inline-flex !important;
    align-items: center;
}

/* Kiểu dáng chung của Menu */
.at-wrap .at-footer .dropdown-menu,
.at-wrap .ms-toolbar .dropdown-menu {
    display: none !important; 
    position: absolute !important;
    left: 0 !important;
    z-index: 2147483647 !important; 
    min-width: 160px;
    background: rgba(28, 28, 28, 0.95) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 6px 0 !important;
}

/* ĐIỀU HƯỚNG RIÊNG: Footer thì xổ lên trên, Media Sync thì xổ xuống dưới */
.at-wrap .at-footer .dropdown-menu {
    bottom: 100% !important;
    top: auto !important;   
    margin: 0 0 2px 0 !important; 
}

.at-wrap .ms-toolbar .dropdown-menu {
    top: 100% !important;
    bottom: auto !important;
    margin: 4px 0 0 0 !important; 
}

/* Giao diện từng dòng chữ trong Dropdown */
.at-wrap .at-footer .dropdown-item,
.at-wrap .ms-toolbar .dropdown-item {
    border-radius: 0 !important;     
    width: 100% !important;          
    height: auto !important;         
    justify-content: flex-start !important; 
    padding: 6px 16px !important;    
    margin: 0 !important;            
    display: flex !important;
    color: #eee !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    border: none !important;
    font-size: 13px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Hiệu ứng khi rê chuột vào */
.at-wrap .at-footer .dropdown-item:hover,
.at-wrap .ms-toolbar .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Căn phải cho menu (Nếu cần) */
.at-wrap .at-footer .dropdown-menu-end {
    left: auto !important;
    right: 0 !important;
}

/* Animation khi hiển thị */
.at-wrap .at-footer .dropdown-menu.show,
.at-wrap .ms-toolbar .dropdown-menu.show {
    display: block !important;
    animation: fadeInMenu 0.15s ease-out forwards;
}

@keyframes fadeInMenu {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Giao diện từng dòng chữ trong Dropdown */
.at-wrap .at-footer .dropdown-item {
    /* 1. GHI ĐÈ LỆNH VẼ HÌNH TRÒN BỊ LỖI TỪ NÚT BẤM BÊN NGOÀI */
    border-radius: 0 !important;     /* Xóa viền tròn, biến thành hình chữ nhật */
    width: 100% !important;          /* Chiếm toàn bộ chiều ngang menu */
    height: auto !important;         /* Xóa chiều cao cố định 40px */
    justify-content: flex-start !important; /* Căn lề trái thay vì căn giữa */
    
    /* 2. CHỈNH LẠI KHOẢNG CÁCH (THU HẸP LẠI) */
    padding: 6px 16px !important;    /* Giảm padding dọc từ 8px xuống 6px cho đỡ thưa */
    margin: 0 !important;            /* Xóa các margin thừa */
    
    /* 3. MÀU SẮC & FONT CHỮ */
    display: flex !important;
    color: #eee;
    text-decoration: none !important;
    white-space: nowrap;
    background: transparent;
    border: none;
    font-size: 13px;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    box-sizing: border-box;
}

/* Hiệu ứng khi rê chuột vào: Sáng nguyên cả 1 dòng chữ nhật ngang */
.at-wrap .at-footer .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

/* Đảm bảo icon bên trong menu (nếu có) căn chỉnh đẹp */
.at-wrap .at-footer .dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
    font-size: 14px;
    color: #aaa;
}

.at-wrap .at-footer .dropdown-item:hover i {
    color: #FB923C;
}

/* Timeline & Slider */
.at-wrap .at-time-position {
    font-weight: bold;
}

.at-wrap .at-time-slider {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: height 0.1s ease;
}

.at-wrap .at-time-slider:hover {
    height: 6px;
}

.at-wrap .at-time-slider-value {
    height: 100%;
    background: #FB923C;
    width: 0;
    position: relative;
}

.at-wrap .at-time-slider:hover .at-time-slider-value::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #FB923C;
    border-radius: 50%;
}

.at-wrap .at-speed-value {
    font-size: 0.8rem;
    margin: 0 0.5em;
}

/* ĐIỀU CHỈNH LOGO iMUSIC */
.at-wrap .at-logo {
    background-color: #fff !important;
    height: 30px !important;
    padding: 0 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    margin: 0 5px 0 0px !important;
    align-self: center !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.at-wrap .at-logo img {
    height: 25px !important;
    width: auto !important;
    display: block !important;
    mix-blend-mode: multiply;
}


/* ====================================================================== */
/* 5. PANELS (SETTINGS, TRACKS)
/* ====================================================================== */
/* ----- 5.1 SETTINGS PANEL (RIGHT) ----- */
.at-wrap .at-settings-panel {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    color: #fff !important; 
    
    background: rgba(28, 28, 28, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    position: absolute;
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 380px; 
    max-width: 90vw;
    z-index: 1002;
    display: flex; 
    flex-direction: column; 
    overflow: hidden;

    /* Trạng thái mặc định: Ẩn đi */
    visibility: hidden !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
}

/* KHÔI PHỤC CLASS QUAN TRỌNG NHẤT: TRẠNG THÁI MỞ CỬA SỔ */
.at-wrap .at-settings-panel.open { 
    transform: translateX(0) !important; 
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5) !important;
    visibility: visible !important;
}

.at-wrap .at-panel-header {
    padding: 9px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #fff;
    font-weight: bold; 
    font-size: 15px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    flex-shrink: 0;
}

.at-wrap .btn-close { 
    background: transparent; 
    border: none; 
    font-size: 22px; 
    line-height: 1; 
    cursor: pointer; 
    opacity: 0.8; 
    color: #fff;
}

.at-wrap .btn-close:hover { 
    opacity: 1; 
    color: #FB923C; 
}

.at-wrap .at-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: transparent;
    color: #fff;
    padding-bottom: 60px; 
}

.at-wrap .at-settings-group {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.at-wrap .at-settings-group:last-child { 
    border-bottom: none; 
}

.at-wrap .at-settings-group h4 {
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #ccc !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
}

.at-wrap .setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px !important;
    font-size: 13px !important;
}

.at-wrap .setting-label { 
    flex: 1; 
    padding-right: 10px; 
    color: #fff !important; 
    font-weight: 400 !important; 
}

.at-wrap .setting-control {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}

/* ----- 5.2 TRACKS PANEL (RIGHT) ----- */
.at-wrap .tracks-panel { 
    right: 0; 
    width: 400px; 
}

.at-wrap .tracks-panel .at-panel-header { 
    padding-left: 15px !important; 
}

.at-wrap .tracks-content { 
    padding: 0; 
}

.at-wrap .track-item-advanced {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 15px;
    margin-bottom: 0;
}

.at-wrap .track-item-advanced:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

.at-wrap .track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 8px;
    color: #fff;
}

.at-wrap .track-header label,
.at-wrap .all-tracks-label { 
    cursor: pointer; 
    margin: 0; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: #fff !important;
}

.at-wrap .track-setting-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 5px; 
    font-size: 13px; 
    color: #fff;
}

.at-wrap .staff-row { 
    margin-top: 10px; 
    padding-top: 10px; 
    border-top: 1px dashed rgba(255,255,255,0.2); 
}

.at-wrap .all-tracks-label { 
    margin: 0 !important; 
    padding: 0 !important; 
    display: flex !important; 
    font-weight: normal !important; 
    color: #fff; 
}

.at-wrap .all-tracks-label input[type="checkbox"] { 
    margin: 0 !important; 
}


/* ====================================================================== */
/* 6. MEDIA SYNC PANEL & COMPONENTS
/* ====================================================================== */
/* ----- 6.1 MEDIA SYNC PANEL (BOTTOM) ----- */
.at-wrap .media-sync-panel {
    background: rgba(28, 28, 28, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    display: flex; 
    flex-direction: column;
    height: 25vh; 
    position: absolute;
    /* Đẩy panel lên 46px để chừa chỗ cho Footer hiển thị */
    bottom: 46px; 
    left: 0px;
    right: 0;
    z-index: 1000;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
    
    visibility: hidden;
    transform: translateY(100%);
    /* Thêm transition cho thuộc tính 'bottom' */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s, bottom 0.3s ease;
}

.at-wrap .media-sync-panel.open {
    visibility: visible;
    transform: translateY(0);
}
/* GẮN "TẤM RÈM" VÀO ĐÁY PANEL ĐỂ CHE KHUẤT KHOẢNG TRẮNG CỦA FOOTER */
.at-wrap .media-sync-panel::after {
    content: '';
    position: absolute;
    top: 100%; /* Treo ngay sát bên dưới đáy của panel */
    left: 0;
    right: 0;
    height: 60px; /* Độ dài dư dả để che kín vùng Footer 46px */
    background: rgba(28, 28, 28, 0.75); /* Khớp với màu nền panel mặc định */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none; /* Đảm bảo không cản trở click chuột vào Footer */
    z-index: -1; 
}

/* Đảm bảo tấm rèm cũng đổi màu khi bật Dark Mode */
html[data-theme="dark"] .at-wrap .media-sync-panel::after {
    background-color: #242526;
}

/* -----------------------------------------------------------
   LOGIC NÂNG HẠ PANEL & VIEWPORT ĐỒNG BỘ VỚI FOOTER
----------------------------------------------------------- */

/* TRẠNG THÁI 1: Khi Footer đang HIỆN (Chuột đang cử động) */
.at-wrap .at-content:has(.media-sync-panel.open) .at-viewport {
    /* Bản nhạc bị đẩy lên 25vh (panel) + 46px (footer) */
    bottom: calc(25vh + 46px); 
}

.at-wrap .at-content:has(.media-sync-panel.open) .ms-youtube-popup {
    /* Đẩy Youtube Popup lên theo */
    bottom: calc(25vh + 66px); 
}

/* ----- 6.2 MEDIA SYNC TOOLBAR ----- */
.at-wrap .ms-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #fff;
    
    /* SỬA LỖI ẨN MENU: Tuyệt đối KHÔNG dùng overflow, thay vào đó cho phép rớt dòng nếu màn hình hẹp */
    flex-wrap: wrap !important;
    gap: 10px;
    overflow: visible !important;
}

.at-wrap .ms-toolbar-left, .at-wrap .ms-toolbar-right, .at-wrap .ms-button-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0 !important; /* ÉP TUYỆT ĐỐI KHÔNG BỊ BÓP MÉO NHÓM */
}

/* Đồng bộ nút bấm */
.at-wrap .ms-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important; /* Tách biệt Icon và Chữ */
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    height: 30px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    
    /* ÉP TUYỆT ĐỐI NÚT PHẢI ÔM TRỌN CHỮ BÊN TRONG */
    width: auto !important;
    min-width: max-content !important; 
    flex-shrink: 0 !important; 
    box-sizing: border-box !important;
    
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.at-wrap .ms-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.at-wrap .ms-btn:hover:not(:disabled) { 
    background: rgba(255, 255, 255, 0.2) !important; 
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.at-wrap .ms-btn-primary { 
    background: rgba(255, 255, 255, 0.3) !important; 
    border-color: rgba(255, 255, 255, 0.5) !important; 
}

/* Kiểu dáng cho nhóm nút gộp chung */
.at-wrap .ms-button-group {
    border-radius: 4px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
    gap: 0 !important; /* Bỏ khoảng cách trong nhóm */
}

.at-wrap .ms-button-group .ms-btn {
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.at-wrap .ms-button-group .ms-btn:last-child {
    border-right: none !important;
}

/* Hình tam giác cho nút Dropdown (Cờ lê) */
.at-wrap .ms-btn.dropdown-toggle::after {
    content: "";
    margin-left: 6px;
    vertical-align: middle;
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* ----- 6.3 MEDIA SYNC CANVAS & MARKERS ----- */
.at-wrap .ms-sync-area {
    flex-grow: 1;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent;
    touch-action: pan-x; /* Gộp luôn vào class này cho gọn */
}

.at-wrap .ms-canvas-wrap {
    position: sticky; 
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1; 
}

.at-wrap .ms-canvas-wrap canvas {
    height: 100%;
    display: block;
}

.at-wrap .ms-marker-wrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2; 
    pointer-events: none; 
}

.at-wrap .ms-playback-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #ff4d4d; /* Màu đỏ nổi bật trên nền xám/trắng để phân biệt với Marker */
    pointer-events: none;
    z-index: 10;
    transition: transform 0.1s linear;
}

.at-wrap .masterbar-marker {
    position: absolute;
    top: 0;
    bottom: 20px;
    width: 20px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    user-select: none;
    cursor: col-resize;
    pointer-events: auto; 
    touch-action: none;
    will-change: transform;
}

/* Đổi màu chữ sang trắng để nổi bật trên nền tối */
.at-wrap .marker-label {
    height: 20px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    color: #ffffff !important; 
    font-weight: bold;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.8); 
}

.at-wrap .marker-head {
    width: 20px;
    height: 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
}

.at-wrap .marker-arrow {
    grid-area: 1 / 1 / 2 / 2;
    width: 20px;
    height: 20px;
    position: relative;
}

.at-wrap .marker-arrow::after {
    content: ' ';
    display: block;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3) !important; /* Trắng rất mờ */
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.at-wrap .marker-tempo {
    grid-area: 1 / 1 / 2 / 2;
    background: transparent;
    font-size: 10px;
    font-weight: 500;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(20px);
    color: rgba(255, 255, 255, 0.7) !important; /* Trắng mờ */
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}

.at-wrap .marker-line {
    flex-grow: 1;
    width: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important; 
}

.at-wrap .masterbar-marker-startmarker .marker-line,
.at-wrap .masterbar-marker-endmarker .marker-line { border-right-width: 2px; }
.at-wrap .masterbar-marker-masterbar .marker-line { border-right-style: solid; }
.at-wrap .masterbar-marker-intermediate .marker-line { border-right-style: dashed; }
.at-wrap .masterbar-marker-intermediate .marker-arrow,
.at-wrap .masterbar-marker-intermediate .marker-tempo { display: none; }

/* Trạng thái đã Sync (Dùng màu cam chủ đạo) */
.at-wrap .has-sync-point .marker-arrow::after { 
    background: #ffffff !important; /* Mũi tên trắng tinh */
}
.at-wrap .has-sync-point .marker-line { 
    border-right-color: rgba(255, 255, 255, 0.6) !important; /* Đường kẻ trắng mờ 60% */
}

.at-wrap .masterbar-marker-intermediate.has-sync-point .marker-arrow,
.at-wrap .masterbar-marker-intermediate.has-sync-point .marker-tempo { display: block; }

.at-wrap .masterbar-marker:hover .marker-arrow::after { 
    background: #426d9d !important; /* Nổi màu xanh dương nhẹ để biết đang hover */
}
.at-wrap .masterbar-marker:hover .marker-line { 
    border-right-color: #ffffff !important; /* Hover thì đường kẻ sáng hẳn lên */
}

/* Trạng thái khi đang kéo thả (Dragging States) */
body.marker-dragging .at-wrap *,
.at-wrap.marker-dragging * {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

body.marker-dragging .at-wrap .at-player,
body.marker-dragging .at-wrap .at-sidebar,
body.marker-dragging .at-wrap .at-settings {
    pointer-events: none !important; 
    opacity: 0.8; 
}

body.marker-dragging .at-wrap .ms-sync-area,
body.marker-dragging .at-wrap .ms-sync-area * {
    pointer-events: auto !important;
}

/* ====================================================================== */
/* 6.4 YOUTUBE POPUP
/* ====================================================================== */
.at-wrap .ms-youtube-popup {
    position: absolute;
    right: 20px;
    /* 1. Mặc định: Nằm cách đáy 66px (46px Footer + 20px Padding) để không đè Footer khi Footer đang hiển thị */
    bottom: 66px; 
    width: 400px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    z-index: 1010;
    overflow: hidden;
    transition: bottom 0.3s ease;
}

.at-wrap .ms-youtube-popup iframe { 
    width: 100%; 
    height: 100%; 
    border: none; 
}

/* 2. Khi Footer tự động ẨN (không hover hoặc user-inactive) -> Hạ video xuống sát đáy (cách 20px) */
.at-wrap:not(:hover) .ms-youtube-popup,
.at-wrap.user-inactive .ms-youtube-popup {
    bottom: 20px;
}

/* 3. Khi mở bảng Media Sync -> Đẩy video lên cao nhất (Trên Media Sync 25vh + Footer 46px + Padding 20px) */
.at-wrap:has(.media-sync-panel.open) .ms-youtube-popup,
.at-wrap .at-content:has(.media-sync-panel.open) .ms-youtube-popup {
    bottom: calc(25vh + 66px) !important;
}

.at-wrap .yt-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 8px;
    z-index: 1020;
}

.at-wrap .yt-control-btn {
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: none;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.at-wrap .yt-control-btn:hover { 
    background: rgba(0, 0, 0, 0.9); 
}

.at-wrap .btn-close-yt:hover { 
    background: rgba(220, 53, 69, 0.9); 
}

/* Trạng thái thu nhỏ của YouTube Popup */
.at-wrap .ms-youtube-popup.minimized {
    width: 90px;
    height: 44px;
    aspect-ratio: auto;
}

.at-wrap .ms-youtube-popup.minimized .yt-controls {
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
}

.at-wrap .ms-youtube-popup.minimized iframe {
    opacity: 0;
    pointer-events: none;
}

/* Thanh để người dùng bấm vào kéo đi */
.at-wrap .yt-drag-handle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    cursor: grab;
    z-index: 1015; /* Nằm trên video nhưng dưới nút close */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

.at-wrap .yt-drag-handle:hover {
    color: rgba(255, 255, 255, 0.9);
}

.at-wrap .yt-drag-handle:active {
    cursor: grabbing;
}

/* KHI CỬA SỔ ĐÃ BỊ NGƯỜI DÙNG KÉO ĐI */
.at-wrap .ms-youtube-popup.is-dragged {
    /* Hủy bỏ hoàn toàn các thuộc tính bottom/right cố định ban đầu */
    bottom: auto !important;
    right: auto !important;
    /* Tắt hiệu ứng transition để khi kéo chuột không bị lag/delay */
    transition: none !important; 
}

/* ====================================================================== */
/* 7. OVERLAYS & MODALS
/* ====================================================================== */
/* ----- 7.1 LOADING/DRAGGING OVERLAY ----- */
.at-wrap .at-overlay {
    display: flex;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1002;
    background: rgba(0, 0, 0, 0.6); /* Đổ nền đen mờ giống áo choàng ngoài */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center; /* Căn giữa hoàn toàn */
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
}

/* Ẩn triệt để cái hộp trắng của Bootstrap (nếu còn sót) */
.at-wrap .at-overlay-content { 
    display: none !important; 
}

/* CHỈ HIỆN OVERLAY KHI: Đã Boot xong (Áo choàng đã mất) VÀ có lệnh loading/dragging */
/* Điều này triệt tiêu hoàn toàn lỗi 2 cái loading hiện cùng lúc lúc mới mở nhạc */
.at-wrap.is-booted.loading .at-overlay,
.at-wrap.is-booted.dragging .at-overlay {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.1s;
}

/* Riêng ở chế độ Admin (Edit Mode) không có áo choàng, nên luôn cho phép hiện */
.at-wrap[data-mode="edit"].loading .at-overlay,
.at-wrap[data-mode="edit"].dragging .at-overlay {
    visibility: visible;
    opacity: 1;
}
/* ====================================================================== */
/* 7.2 CỬA SỔ POPUP (MODALS YOUTUBE / SYNC CODE) - GIAO DIỆN SAAS TỐI ƯU
/* ====================================================================== */
.at-wrap .custom-modal {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.at-wrap .custom-modal.d-none { display: none !important; opacity: 0; }

/* Box hiển thị trung tâm */
.at-wrap .custom-modal-body {
    background: #ffffff !important;
    border-radius: 12px !important; /* Bo góc mềm mại hơn */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;
    color: #212529 !important;
    width: 450px !important; /* Chiều ngang cố định */
    max-width: 90vw !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* Ẩn cuộn ngang tuyệt đối */
    transform: translateY(0);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.at-wrap .custom-modal-large { width: 600px !important; }

@keyframes modalSlideUp {
    from { transform: translateY(20px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Phần Header */
.at-wrap .custom-modal-header {
    padding: 20px 24px 15px !important;
    border-bottom: 1px solid #eaeaea !important;
}
.at-wrap .custom-modal-header h5 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
}

/* Phần Content (Cho phép cuộn dọc mượt mà) */
.at-wrap .custom-modal-content {
    padding: 20px 24px !important;
    overflow-y: auto !important; /* Chỉ cuộn dọc */
    overflow-x: hidden !important; /* Ép không bao giờ xuất hiện cuộn ngang */
    max-height: 60vh !important; /* Chiều cao tối đa an toàn */
}

/* Các thẻ trong content */
.at-wrap .custom-modal-content label {
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    display: block !important;
}
.at-wrap .custom-modal-content .form-control {
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    transition: all 0.2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.at-wrap .custom-modal-content .form-control:focus {
    border-color: #FB923C !important;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2) !important;
}
.at-wrap .custom-modal-content textarea {
    font-family: monospace !important;
    font-size: 12px !important;
    resize: none !important;
    background: #f8f9fa !important;
}

/* Khung lưu ý của Youtube */
.at-wrap .modal-notice {
    background: #f8f9fa !important;
    border-left: 3px solid #6c757d !important;
    padding: 12px 15px !important;
    border-radius: 4px !important;
    margin-top: 15px !important;
}
.at-wrap .modal-notice p { margin: 0 0 8px 0 !important; font-size: 12px !important; color: #555 !important; line-height: 1.5 !important; }
.at-wrap .modal-notice ul { margin: 0 !important; padding-left: 15px !important; }
.at-wrap .modal-notice li { font-size: 12px !important; }
.at-wrap .modal-notice a { color: #0d6efd !important; text-decoration: none !important; }
.at-wrap .modal-notice a:hover { text-decoration: underline !important; }

/* Phần Footer */
.at-wrap .custom-modal-footer {
    padding: 15px 24px !important;
    background: #f8f9fa !important;
    border-top: 1px solid #eaeaea !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* --- HỖ TRỢ DARK MODE --- */
html[data-theme="dark"] .at-wrap .custom-modal-body {
    background: #1e1e1e !important;
    border: 1px solid #444 !important;
}
html[data-theme="dark"] .at-wrap .custom-modal-header,
html[data-theme="dark"] .at-wrap .custom-modal-footer {
    border-color: #333 !important;
    background: #252526 !important;
}
html[data-theme="dark"] .at-wrap .custom-modal-content .form-control,
html[data-theme="dark"] .at-wrap .modal-notice {
    background: #2d2d2d !important;
    border-color: #444 !important;
    color: #eee !important;
}
html[data-theme="dark"] .at-wrap .modal-notice p { color: #ccc !important; }
html[data-theme="dark"] .at-wrap .modal-notice a { color: #66b2ff !important; }

/* ====================================================================== */
/* 8. GENERIC UI COMPONENTS & FORMS
/* ====================================================================== */
/* ----- 8.1 TOOLTIP ----- */
.at-wrap .tooltip {
    z-index: 10000 !important;
}

/* ----- 8.2 INPUT RANGE SLIDER ----- */
.at-wrap input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    background: #d3d3d3;
    height: 4px;
    border-radius: 2px;
    outline: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    width: 110px;
}

.at-wrap input[type='range']:hover { opacity: 1; }

.at-wrap input[type='range']::-webkit-slider-thumb { 
    -webkit-appearance: none !important; 
    appearance: none !important; 
    width: 14px !important; 
    height: 14px !important; 
    border-radius: 50% !important; 
    background: #FB923C !important; /* ĐỔI SANG MÀU CAM */
    cursor: pointer !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important; 
}

.at-wrap input[type='range']::-moz-range-thumb { 
    width: 16px !important; 
    height: 16px !important; 
    border-radius: 50% !important; 
    background: #FB923C !important; /* ĐỔI SANG MÀU CAM */
    cursor: pointer !important; 
}

.at-wrap .range-wrap { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    justify-content: flex-end; 
}
.at-wrap .range-val { 
    font-weight: bold; 
    width: 40px !important; /* Tăng từ 30px lên 40px để số chứa dấu phẩy không bị rớt dòng */
    text-align: right; 
    font-size: 12px; 
    color: #ccc; /* Đổi thành màu xám sáng để nổi bật trên nền tối */
    font-variant-numeric: tabular-nums; /* Giúp các con số không bị giật lề khi kéo */
}

/* ====================================================================== */
/* SCROLLBAR CUSTOMIZATION (TƯƠNG PHẢN CAO & ÉP BUỘC HIỂN THỊ)
/* ====================================================================== */

/* 1. Kích thước chung cho mọi thanh cuộn trong app */
.at-wrap *::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

.at-wrap *::-webkit-scrollbar-track {
    background: transparent !important;
}

/* 2. Thanh cuộn MẶC ĐỊNH (Dành cho bản nhạc ở giao diện Sáng - Light Mode) */
/* Bản nhạc nền trắng nên thanh cuộn phải là màu xám đen để nhìn thấy */
.at-wrap *::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    border: 3px solid transparent !important;
    background-clip: padding-box !important;
}
.at-wrap *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* 3. Thanh cuộn cho các Panel nền Tối (Settings, Tracks, Sidebar) */
/* Dù web ở Light Mode, các panel này vẫn màu tối, nên thanh cuộn phải MÀU TRẮNG SÁNG */
.at-wrap .at-settings-panel::-webkit-scrollbar-thumb,
.at-wrap .at-panel-content::-webkit-scrollbar-thumb,
.at-wrap .at-sidebar:hover::-webkit-scrollbar-thumb,
.at-wrap .ms-sync-area::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5) !important; /* Trắng sáng 50% nổi bật trên nền */
}
.at-wrap .at-settings-panel::-webkit-scrollbar-thumb:hover,
.at-wrap .at-panel-content::-webkit-scrollbar-thumb:hover,
.at-wrap .at-sidebar:hover::-webkit-scrollbar-thumb:hover,
.at-wrap .ms-sync-area::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.9) !important; /* Sáng rực rỡ lên 90% khi Hover */
}

/* ====================================================================== */
/* CÁC COMPONENT BÓC TÁCH TỪ JAVASCRIPT
/* ====================================================================== */

/* 1. Vòng xoay Loading (SVG Progress) */
.at-wrap .at-player-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px; /* Giữ khoảng cách với các nút bên cạnh */
}
.at-wrap .at-progress-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}
.at-wrap .at-progress-svg {
    transform: rotate(-90deg);
    position: absolute;
    top: 0;
    left: 0;
}
.at-wrap .at-progress-svg circle {
    fill: none;
    stroke-width: 3;
}
.at-wrap .at-progress-svg circle.bg {
    stroke: rgba(255, 255, 255, 0.2); /* Footer luôn tối nên để viền sáng mờ */
}
.at-wrap .at-progress-svg circle.value {
    stroke: #FB923C; /* Đổi sang màu cam chủ đạo của Player */
    stroke-dasharray: 87.96;
    stroke-dashoffset: 87.96;
    transition: stroke-dashoffset 0.1s linear;
}
.at-wrap .progress-text-wrap {
    font-size: 11px;
    font-weight: bold;
    z-index: 2;
    display: flex;
    align-items: baseline;
    color: #fff;
}
.at-wrap .progress-text-wrap .percent-sign {
    font-size: 9px;
    margin-left: 1px;
}

/* 2. Hybrid Color Picker */
.at-wrap .color-picker-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}
.at-wrap .color-picker-input {
    width: 30px; /* Trả về 30px gốc */
    height: 30px; /* Trả về 30px gốc */
    padding: 0;
    border: none !important; /* Xóa viền */
    cursor: pointer;
    background: transparent;
    border-radius: 0 !important; /* Xóa bo góc */
}
.at-wrap .color-opacity-slider {
    width: 60px;
}
.at-wrap .color-text-input {
    width: 110px !important;
    flex: none !important;
}

/* 3. Nút Reset Settings (Trải dài hết chiều ngang) */
.at-wrap .btn-full-width {
    grid-column: 1 / -1;
}

/* 4. Trạng thái Disabled của các nút Staff (Mờ đi) */
.at-wrap .settings-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 5. Trạng thái Validate (Đúng/Sai) khi nhập Font */
.at-wrap .input-error {
    background-color: #ffe6e6 !important;
    border-color: red !important;
}
.at-wrap .input-success {
    background-color: #e6ffe6 !important;
    border-color: green !important;
}

/* --- TÙY CHỈNH DARK MODE CHO NHỮNG TRẠNG THÁI NÀY --- */
html[data-theme="dark"] .at-wrap .input-error {
    background-color: #4a1919 !important; /* Đỏ sẫm cho nền tối */
    border-color: #ff4d4d !important;
}
html[data-theme="dark"] .at-wrap .input-success {
    background-color: #194a20 !important; /* Xanh sẫm cho nền tối */
    border-color: #4dff62 !important;
}

/* ----- 8.4 SETTINGS & PANEL FORM ELEMENTS ----- */

/* 1. KIỂU DÁNG CHO INPUT TEXT & NUMBER (Width cố định 110px) */
.at-wrap .at-settings-panel input[type="text"],
.at-wrap .at-settings-panel input[type="number"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    color: #fff !important;
    display: inline-block !important;
    font-family: inherit !important; 
    font-size: 13px !important;
    height: 26px !important;
    line-height: normal !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s, border-color 0.2s !important;
    text-align: center !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: text !important;
    width: 110px !important; 
    min-width: 110px !important;
    max-width: 110px !important;
}

/* 2. KIỂU DÁNG RIÊNG CHO SELECT (Width tự động co giãn) */
.at-wrap .at-settings-panel select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    color: #fff !important;
    display: inline-block !important;
    font-family: inherit !important; 
    font-size: 13px !important;
    height: 26px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s, border-color 0.2s !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    text-align: left !important;
    width: auto !important; 
    min-width: 110px !important;
    max-width: 190px !important;
    padding-left: 6px !important;
    padding-right: 24px !important; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23eee"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 16px !important;
}

/* 3. KIỂU DÁNG CHO OPTION BÊN TRONG SELECT */
.at-wrap .at-settings-panel select option { 
    background: #2c2c2c !important; 
    color: #fff !important; 
    font-family: inherit !important;
}

/* 4. HIỆU ỨNG FOCUS (VIỀN CAM) ÁP DỤNG CHUNG */
.at-wrap .at-settings-panel input[type="text"]:focus,
.at-wrap .at-settings-panel input[type="number"]:focus,
.at-wrap .at-settings-panel select:focus { 
    background-color: rgba(255, 255, 255, 0.2) !important; 
    border-color: #FB923C !important;
    outline: none !important;
}

/* Toggles */
.at-wrap .toggle { display: grid; height: 1.2rem; width: 2rem; margin: 0; align-items: center; }
.at-wrap .toggle input, .at-wrap .toggle span { grid-area: 1/1/2/2; }
.at-wrap .toggle input { height: 0; opacity: 0; width: 0; margin: 0; }
.at-wrap .toggle-slider {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 1rem; cursor: pointer; position: relative; transition: background-color 0.3s; height: 100%; width: 100%;
}
.at-wrap .toggle-slider:before {
    aspect-ratio: 1/1; background-color: #fff; border-radius: 50%; bottom: 0.2rem; content: ""; left: 0.2rem; position: absolute; top: 0.2rem; transition: transform 0.3s; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
/* Khi công tắc được bật (checked) -> Chuyển nền sang màu cam */
.at-wrap .toggle input:checked + .toggle-slider { 
    background-color: #FB923C !important; /* ĐỔI SANG MÀU CAM */
}

.at-wrap .toggle input:checked + .toggle-slider:before { 
    transform: translateX(0.8rem); 
    background-color: #fff; 
}

/* Button Groups (Cụm nút gộp chung) */
.at-wrap .settings-btn-group { 
    display: flex; 
    border-radius: 4px; 
    overflow: hidden; 
    box-shadow: 0 1px 2px rgba(0,0,0,0.08); 
    border: 1px solid rgba(255, 255, 255, 0.2); /* Viền bao ngoài mặc định */
    transition: border-color 0.15s ease; /* Thêm hiệu ứng chuyển màu viền */
}
.at-wrap .settings-btn-group .settings-btn { 
    background: rgba(255, 255, 255, 0.1); 
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff !important; 
    padding: 4px 12px !important; 
    cursor: pointer; 
    transition: all 0.15s ease;
    font-family: "Segoe UI Symbol", Arial, sans-serif !important; 
}
.at-wrap .settings-btn-group .settings-btn:last-child { 
    border-right: none;
}

/* HIỆU ỨNG KHI RÊ CHUỘT (Hover) */
.at-wrap .settings-btn-group:not(:has(.settings-btn-primary)) .settings-btn:hover { 
    background: rgba(255, 255, 255, 0.2);
}

/* TRẠNG THÁI KHI NÚT ĐƯỢC BẬT (ACTIVE) - MÀU CAM */
.at-wrap .settings-btn-group .settings-btn.settings-btn-primary, 
.at-wrap .settings-btn-group .settings-btn.active { 
    background: #FB923C !important; 
    color: #fff !important; 
    border-right-color: #ea580c !important; /* Đổi màu đường phân cách sang cam đậm */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* ⭐ PHẦN SỬA LỖI QUAN TRỌNG NHẤT: ĐỔI MÀU VIỀN CỦA CẢ CỤM NÚT ⭐ */
/* Nếu .settings-btn-group chứa một nút .settings-btn-primary bên trong... */
.at-wrap .settings-btn-group:has(.settings-btn-primary) {
    border-color: #ea580c !important; /* ...thì đổi viền bao ngoài sang màu cam đậm! */
}

.at-wrap .tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.at-wrap .tools-grid button { width: 100%; padding: 7px 12px; font-size: 13px; font-weight: 500; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; }
.at-wrap .tools-grid button:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }

/* Icons Buttons (Tracks Panel) */
.at-wrap .icon-btn {
    width: 28px; height: 28px; padding: 0; display: inline-flex; justify-content: center; align-items: center; border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; transition: 0.2s;
}
.at-wrap .icon-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.2); }
/* Tách riêng nút Active chung (màu trắng mờ) */
.at-wrap .icon-btn.active {
    background: rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Nút Solo khi bật (Xanh lá) */
.at-wrap .icon-btn.active-success {
    background-color: #2e7d32 !important; 
    color: #fff !important;
    border-color: #1b5e20 !important;
}

/* Nút Mute khi bật (Đỏ) */
.at-wrap .icon-btn.active-danger {
    background-color: #d32f2f !important; 
    color: #fff !important;
    border-color: #b71c1c !important;
}


/* ====================================================================== */
/* 9. FULLSCREEN OVERRIDES & CSS FALLBACK
/* ====================================================================== */
/* Khi dùng API Chuẩn */
.at-wrap:fullscreen,
.at-wrap:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
}

/* Khi dùng CSS Giả lập (Fallback) để đè lên website */
.at-wrap.css-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important; 
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
}

/* --- PHÂN CHIA LẠI LỚP (Z-INDEX) KHI FULLSCREEN --- */

/* 1. Modal thông báo và Youtube Popup nổi cao nhất */
.at-wrap:fullscreen .custom-modal,
.at-wrap:fullscreen .ms-youtube-popup,
.at-wrap.css-fullscreen .custom-modal,
.at-wrap.css-fullscreen .ms-youtube-popup {
    z-index: 2147483647 !important;
}

/* 2. Footer xếp thứ 2 (Nằm trên Panel nhưng dưới Modal) */
.at-wrap:fullscreen .at-footer,
.at-wrap.css-fullscreen .at-footer {
    z-index: 2147483646 !important;
}

/* 3. Settings / Tracks Panel xếp thứ 3 (Nằm dưới Footer) */
.at-wrap:fullscreen .at-settings-panel,
.at-wrap.css-fullscreen .at-settings-panel {
    z-index: 2147483645 !important;
}


/* ====================================================================== */
/* 10. DARK MODE THEME
/* ====================================================================== */
html[data-theme="dark"] .at-wrap {
    background-color: #1b1b1d;
    border-color: rgba(255, 255, 255, 0.12);
    color: #e3e3e3;
}

/* --- AlphaTab Player --- */
html[data-theme="dark"] .at-wrap .at-cursor-bar { background: rgba(0, 120, 255, 0.2); }
html[data-theme="dark"] .at-wrap .at-cursor-beat { background: rgba(82, 146, 247, 0.8); }
html[data-theme="dark"] .at-wrap .at-selection div { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .at-wrap .at-highlight * { fill: #5292f7; stroke: #5292f7; }

/* --- Sidebar --- */
html[data-theme="dark"] .at-wrap .at-sidebar {
    background-color: #18191a;
    border-right-color: rgba(255, 255, 255, 0.12);
    color: #e3e3e3;
}
html[data-theme="dark"] .at-wrap .at-track:hover { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .at-wrap .at-track.active { background: rgba(255, 255, 255, 0.05); }

/* --- Footer & Logo --- */
html[data-theme="dark"] .at-wrap .at-footer {
    background-color: #242526;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .at-wrap .at-logo {
    background-color: #ffffff !important;
    opacity: 0.9;
}
html[data-theme="dark"] .at-wrap .at-footer a:hover,
html[data-theme="dark"] .at-wrap .at-footer a.active,
html[data-theme="dark"] .at-wrap .at-footer .btn:hover,
html[data-theme="dark"] .at-wrap .at-footer .btn:focus,
html[data-theme="dark"] .at-wrap .at-footer .btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
    outline: none;
}
html[data-theme="dark"] .at-wrap .at-footer .dropdown-menu { background-color: #242526; border: 1px solid #444; }
html[data-theme="dark"] .at-wrap .at-footer .dropdown-item { color: #e3e3e3; }
html[data-theme="dark"] .at-wrap .at-footer .dropdown-item:hover,
html[data-theme="dark"] .at-wrap .at-footer .dropdown-item:focus { background-color: #3a3b3c; color: #fff; outline: none; }

/* --- Panels --- */
html[data-theme="dark"] .at-wrap .at-settings-panel {
    background-color: #242526;
    border-left-color: rgba(255, 255, 255, 0.1);
    color: #e3e3e3;
}
html[data-theme="dark"] .at-wrap .at-panel-header {
    background-color: #1b1b1d;
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .at-wrap .at-panel-content { background-color: #242526; }
html[data-theme="dark"] .at-wrap .at-settings-group h4 { color: #aaa; }
html[data-theme="dark"] .at-wrap .at-settings-group { border-bottom-color: #444; }
html[data-theme="dark"] .at-wrap .track-item-advanced { border-bottom-color: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .at-wrap .track-item-advanced:nth-child(even) { background-color: #1e1e1e; }
html[data-theme="dark"] .at-wrap .staff-row { border-top-color: #444; }

/* --- Media Sync Panel --- */
html[data-theme="dark"] .at-wrap .media-sync-panel {
    background-color: #242526; /* Chuyển thành đen đặc như Settings Panel */
    border-top-color: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .at-wrap .ms-toolbar { 
    background-color: transparent !important; 
    border-bottom-color: rgba(255, 255, 255, 0.1) !important; 
}
html[data-theme="dark"] .at-wrap .ms-sync-area {
    background-color: #1b1b1d; /* Làm nền của canvas sẫm lại một chút */
}
html[data-theme="dark"] .at-wrap .ms-btn { 
    background-color: #3a3b3c !important; 
    color: #e3e3e3 !important; 
    border-color: #555 !important; 
}
html[data-theme="dark"] .at-wrap .ms-btn:hover:not(:disabled) { 
    background-color: #4e4f50 !important; 
    color: #fff !important; 
}
html[data-theme="dark"] .at-wrap .ms-btn-primary { 
    background-color: #426d9d !important; 
    color: #fff !important; 
    border-color: #426d9d !important; 
}
html[data-theme="dark"] .at-wrap .ms-btn-secondary { background-color: #3a3b3c !important; color: #e3e3e3 !important; border-color: #555 !important; }
html[data-theme="dark"] .at-wrap .ms-btn-secondary:hover:not(:disabled) { background-color: #4e4f50 !important; color: #fff !important; }
html[data-theme="dark"] .at-wrap .ms-button-group { border-color: #555 !important; }
html[data-theme="dark"] .at-wrap .ms-button-group .ms-btn { border-right-color: #555 !important; }

/* --- Modals --- */
html[data-theme="dark"] .at-wrap .custom-modal-body { background-color: #242526; color: #e3e3e3; }

/* --- Form Elements & Components --- */
html[data-theme="dark"] .at-wrap .at-settings-panel input[type="text"],
html[data-theme="dark"] .at-wrap .at-settings-panel input[type="number"],
html[data-theme="dark"] .at-wrap .at-settings-panel select,
html[data-theme="dark"] .at-wrap .icon-btn {
    background-color: #3a3b3c !important; color: #e3e3e3 !important; border-color: #555 !important;
}
html[data-theme="dark"] .at-wrap .icon-btn.active-danger { background-color: #d32f2f !important; color: #fff !important; border-color: #b71c1c !important; }
html[data-theme="dark"] .at-wrap .icon-btn.active-success { background-color: #2e7d32 !important; color: #fff !important; border-color: #1b5e20 !important; }
html[data-theme="dark"] .at-wrap .settings-btn-group {
    border-color: #555;
}
html[data-theme="dark"] .at-wrap .settings-btn-group .settings-btn {
    border-right-color: #555;
}
html[data-theme="dark"] .at-wrap .settings-btn-group .settings-btn.settings-btn-primary,
html[data-theme="dark"] .at-wrap .settings-btn-group .settings-btn.active { 
    border-right-color: #ea580c !important;
}
html[data-theme="dark"] .at-wrap .settings-btn-group:has(.settings-btn-primary) {
    border-color: #ea580c !important; 
}

/* --- Scrollbar --- */
/* Khi bật Dark Mode, bản nhạc cũng thành màu Đen -> MỌI THANH CUỘN đều thành MÀU TRẮNG SÁNG */
html[data-theme="dark"] .at-wrap *::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

html[data-theme="dark"] .at-wrap *::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Cấu hình cho Firefox (Không hỗ trợ Webkit) */
.at-wrap * { scrollbar-width: auto; scrollbar-color: rgba(0, 0, 0, 0.3) transparent; }
.at-wrap .at-settings-panel, .at-wrap .at-panel-content, .at-wrap .ms-sync-area { scrollbar-color: rgba(255, 255, 255, 0.5) transparent !important; }
html[data-theme="dark"] .at-wrap * { scrollbar-color: rgba(255, 255, 255, 0.5) transparent !important; }

/* ====================================================================== */
/* INSTRUMENT RACK (TỰ ĐỘNG NÂNG HẠ THEO FOOTER)
/* ====================================================================== */

/* 1. Trạng thái mặc định: Nằm trên Footer (Footer cao 46px) */
.at-wrap .instrument-rack {
    position: absolute;
    bottom: 46px; 
    left: 0px; 
    right: 0;
    z-index: 900;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: rgba(28, 28, 28, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, max-height 0.3s ease;
    overflow: visible !important;
}

/* ⭐ LỚP 1: NỀN TRẮNG PHÍA SAU ⭐ */
.at-wrap .instrument-rack:not(:empty)::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 60px;
    background: #fff; 
    z-index: -2; 
    pointer-events: none;
}

/* ⭐ LỚP 2: RÈM CHE MỜ ⭐ */
.at-wrap .instrument-rack:not(:empty)::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(28, 28, 28, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    pointer-events: none;
    z-index: -1; 
}

/* TÙY CHỈNH DARK MODE */
html[data-theme="dark"] .at-wrap .instrument-rack:not(:empty)::before {
    background: #1b1b1d; 
}
html[data-theme="dark"] .at-wrap .instrument-rack:not(:empty)::after {
    background: #242526;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* 2. Khi Footer ẨN -> Hạ nhạc cụ xuống sát đáy */
.at-wrap:not(:hover) .instrument-rack,
.at-wrap.user-inactive .instrument-rack {
    bottom: 0px;
}

/* 3. Tương thích với Media Sync */
.at-wrap:has(.media-sync-panel.open) .instrument-rack {
    bottom: calc(25vh + 46px) !important;
}

/* 4. Đẩy bản nhạc (Viewport) lên */
.at-wrap .at-content:has(.instrument-rack > *) .at-viewport {
    padding-bottom: calc(var(--key-height, 150px) + 50px);
}

/* ====================================================================== */
/* 12. BOOTSTRAP REPLACEMENT (Tránh xung đột Theme WordPress)
/* ====================================================================== */

/* --- 1. CHUẨN HÓA FONT CHỮ VÀ KÍCH THƯỚC (TYPOGRAPHY RESET) --- */
.at-wrap {
    /* Ép sử dụng Font không chân chuẩn của Bootstrap / Hệ điều hành */
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important; /* Fix lỗi chữ bị to đùng */
    line-height: 1.5 !important;
    color: #212529; /* Màu chữ đen xám chuẩn Bootstrap */
}

/* SỬA LỖI ICON: Kế thừa font chữ hệ thống nhưng TRỪ các thẻ i và class của FontAwesome */
.at-wrap *:not(i):not([class*="fa-"]), 
.at-wrap h4, .at-wrap h5, .at-wrap p, 
.at-wrap span:not([class*="fa-"]), 
.at-wrap div, .at-wrap button, .at-wrap input {
    font-family: inherit;
}

/* Đảm bảo thẻ i của Font Awesome không bao giờ bị ghi đè font */
.at-wrap i[class*="fa-"], .at-wrap span[class*="fa-"] {
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome", sans-serif !important;
}

/* --- 2. CÁC CLASS TIỆN ÍCH (UTILITIES) --- */
/* Hiển thị & Căn chỉnh (Flexbox) */
.at-wrap .d-none { display: none !important; }
.at-wrap .d-flex { display: flex !important; }
.at-wrap .align-items-center { align-items: center !important; }
.at-wrap .justify-content-center { justify-content: center !important; }
.at-wrap .justify-content-between { justify-content: space-between !important; }

/* Kích thước & Bo góc */
.at-wrap .w-100 { width: 100% !important; }
.at-wrap .h-100 { height: 100% !important; }
.at-wrap .rounded-circle { border-radius: 50% !important; }

/* In đậm & Màu chữ */
.at-wrap .font-weight-bold { font-weight: 700 !important; }
.at-wrap .text-success { color: #198754 !important; }
.at-wrap .text-danger { color: #dc3545 !important; }

/* Khoảng cách (Margins & Paddings) */
.at-wrap .mb-2 { margin-bottom: 0.5rem !important; }
.at-wrap .mb-3 { margin-bottom: 1rem !important; }
.at-wrap .mt-3 { margin-top: 1rem !important; }
.at-wrap .ms-2 { margin-left: 0.5rem !important; }


/* --- 3. INPUT VÀ FORM (FORM CONTROLS) --- */
.at-wrap .form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-sizing: border-box !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.at-wrap .form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.at-wrap .form-control-sm {
    padding: 0.25rem 0.5rem;
    font-size: 12px !important;
    border-radius: 0.2rem;
}


/* --- 4. NÚT BẤM (BUTTONS) --- */
.at-wrap .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 14px !important; /* Fix chữ trong nút bị to */
    border-radius: 0.25rem;
    transition: all .15s ease-in-out;
    box-sizing: border-box !important;
}
.at-wrap .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 12px !important;
    border-radius: 0.2rem;
}

/* Màu sắc nút bấm */
.at-wrap .btn-primary {
    color: #fff !important;
    background-color: #FB923C !important;
    border-color: #f97316 !important;
}
.at-wrap .btn-primary:hover {
    background-color: #ea580c !important;
    border-color: #c2410c !important;
}
.at-wrap .btn-secondary {
    color: #fff !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
}
.at-wrap .btn-secondary:hover {
    background-color: #5c636a !important;
    border-color: #565e64 !important;
}

/* Nút viền (Dùng cho Mute / Solo trong Tracks Panel) */
.at-wrap .btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
    background-color: transparent !important;
}
.at-wrap .btn-outline-danger:hover, .at-wrap .btn-outline-danger.active {
    color: #fff !important;
    background-color: #dc3545 !important;
}
.at-wrap .btn-outline-success {
    color: #198754 !important;
    border-color: #198754 !important;
    background-color: transparent !important;
}
.at-wrap .btn-outline-success:hover, .at-wrap .btn-outline-success.active {
    color: #fff !important;
    background-color: #198754 !important;
}


/* --- 5. HIỆU ỨNG LOADING SPINNER (Vòng tròn xoay) --- */
/* Cứu lại vòng xoay lúc mới tải nhạc do mất Bootstrap JS/CSS */
.at-wrap .spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: at-spinner-border .75s linear infinite;
}
@keyframes at-spinner-border {
    to { transform: rotate(360deg); }
}


/* --- 6. TOOLTIP (Của hệ thống Tooltip thuần CSS) --- */
.at-wrap .tooltip {
    position: absolute;
    z-index: 1080;
    display: block;
    margin: 0;
    font-family: inherit;
    font-size: 12px !important;
    opacity: 0;
}
.at-wrap .tooltip.show { opacity: 0.9; }
.at-wrap .tooltip .tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0.25rem;
}

/* ====================================================================== */
/* LAZY LOAD COVER (THUMBNAIL + YOUTUBE STYLE)
/* ====================================================================== */
.at-wrap .imusic-lazy-cover {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
    cursor: pointer; /* Toàn bộ vùng này là con trỏ chuột bấm được */
}

/* Lớp phủ làm tối ảnh nền */
.at-wrap .imusic-lazy-cover .lazy-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    transition: background 0.3s ease;
}

/* Hover vào BẤT CỨ ĐÂU trên ảnh -> Nút play to lên, ảnh sáng lên */
.at-wrap .imusic-lazy-cover:hover .lazy-overlay { background: rgba(0, 0, 0, 0.3); }
.at-wrap .imusic-lazy-cover:hover .btn-icon-play { 
    transform: scale(1.15); 
    color: #FB923C; /* Đổi màu cam khi hover */
    text-shadow: 0 0 20px rgba(251, 146, 60, 0.6);
}

.at-wrap .imusic-lazy-cover .lazy-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Trình bày Icon Play */
.at-wrap .lazy-play-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px; /* Cố định chiều cao để khi đổi sang icon xoay không bị giật */
}

.at-wrap .btn-icon-play {
    font-size: 72px; /* Kích thước siêu to */
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); /* Đổ bóng mượt */
}

/* Icon lúc Loading */
.at-wrap .btn-icon-spin {
    font-size: 50px;
    color: #FB923C;
}

/* Text thông báo Đang tải */
.at-wrap .lazy-loading-text {
    color: #fff;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 500;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
}

/* Ẩn đi khi Player đã Boot xong */
.at-wrap.is-booted .imusic-lazy-cover {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Tooltip CSS Thuần */
.at-wrap [data-tooltip] {
    position: relative;
    cursor: pointer;
}
.at-wrap [data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 9999;
    pointer-events: none;
}
.at-wrap [data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px); /* Nổi lên trên 1 chút */
}
/* ====================================================================== */
/* RESPONSIVE FOOTER - BẢO TOÀN KÍCH THƯỚC NÚT & ẨN THÔNG MINH
/* ====================================================================== */

/* 1. Thiết lập Container Query (Thước đo) */
.at-wrap {
    container-type: inline-size;
    container-name: imusic-player;
}

/* 2. ÉP KHU VỰC CHỨA NÚT THÀNH 1 HÀNG NGANG, KHÔNG RỚT DÒNG */
.at-wrap .at-player-left, .at-wrap .at-player-right {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* SỬA TẠI ĐÂY: Dùng 0 1 auto để khu vực bên trái không phình to bừa bãi */
.at-wrap .at-player-left {
    flex: 0 0 auto !important;
    min-width: 0;
}

/* 3. BẢO TOÀN TUYỆT ĐỐI KÍCH THƯỚC CÁC NÚT BẤM (KHÔNG ĐƯỢC MÉO, KHÔNG ĐƯỢC ÉP DÍNH) */
.at-wrap .at-footer a, 
.at-wrap .at-footer .btn, 
.at-wrap .at-footer .btn-group {
    flex-shrink: 0 !important; /* Lệnh cấm các nút bị thu nhỏ / bóp méo */
}

/* 4. XỬ LÝ RIÊNG TÊN BẢN NHẠC (Được phép co giãn và biến thành ...) */
.at-wrap .at-song-details {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Sửa thành 1 1 auto để nó co giãn và chiếm không gian thừa */
    flex: 1 1 auto !important; 
    min-width: 30px; 
    padding: 0 8px;
}

/* Thời gian không bị cắt chữ */
.at-wrap .at-time-display {
    white-space: nowrap;
    flex-shrink: 0 !important;
}

/* ====================================================================== */
/* 5. THỨ TỰ ẨN NÚT (Đã tính toán độ rộng chuẩn xác của từng nút cộng dồn)
/* Không ép margin, giữ nguyên khoảng cách gốc, thiếu chỗ thì tự động ẩn
/* ====================================================================== */

/* 1. Ẩn Tên bản nhạc (khi khung hẹp dưới 1280px) */
@container imusic-player (max-width: 1280px) {
    .at-wrap .at-song-details { display: none !important; }
}

/* 2. Ẩn Thời gian (khi khung hẹp dưới 1000px) */
@container imusic-player (max-width: 1000px) {
    .at-wrap .at-time-display { display: none !important; }
}

/* 3. [MỚI BỔ SUNG] Ẩn nút Media Sync (khi khung hẹp dưới 900px vì nút này rất dài) */
@container imusic-player (max-width: 900px) {
    .at-wrap .btn-media-sync { display: none !important; }
}

/* 4. Ẩn nút Máy in (khi khung hẹp dưới 800px) */
@container imusic-player (max-width: 800px) {
    .at-wrap .at-print { display: none !important; }
}

/* 5. Ẩn Logo (khi khung hẹp dưới 730px) */
@container imusic-player (max-width: 730px) {
    .at-wrap .at-logo { display: none !important; }
}

/* 6. [MỚI BỔ SUNG] Ẩn nút Tải xuống (Download) (khi khung hẹp dưới 690px) */
@container imusic-player (max-width: 690px) {
    .at-wrap .at-download { display: none !important; }
}

/* 7. Ẩn nút Nhạc cụ ảo & Nút Zoom (khi khung hẹp dưới 650px) */
@container imusic-player (max-width: 650px) {
    .at-wrap #btn-toggle-instrument,
    .at-wrap #zoom-controls { display: none !important; }
}

/* 8. Ẩn nút Chế độ Sáng/Tối (khi khung hẹp dưới 570px) */
@container imusic-player (max-width: 570px) {
    .at-wrap #btn-toggle-theme { display: none !important; }
}

/* 9. Ẩn nút Tracks (khi khung hẹp dưới 520px) */
@container imusic-player (max-width: 520px) {
    .at-wrap #btn-tracks { display: none !important; }
}

/* 10. Ẩn nút Speed (khi khung hẹp dưới 470px) */
@container imusic-player (max-width: 470px) {
    .at-wrap #speed-controls { display: none !important; }
}

/* 11. Ẩn nút Settings (khi khung hẹp dưới 410px) */
@container imusic-player (max-width: 410px) {
    .at-wrap #btn-settings { display: none !important; }
}

/* 12. Ẩn nút Count-in (khi khung hẹp dưới 360px) */
@container imusic-player (max-width: 360px) {
    .at-wrap .at-count-in { display: none !important; }
}

/* 13. Ẩn nút Metronome (khi khung hẹp dưới 320px) */
@container imusic-player (max-width: 320px) {
    .at-wrap .at-metronome { display: none !important; }
}
/* ====================================================================== */
/* 14. TRẠNG THÁI TRỐNG (EMPTY STATE) & TÌM KIẾM
/* ====================================================================== */
.at-wrap .at-empty-state {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--bg-body, #fff); /* Tự động đổi màu Dark/Light */
    z-index: 50;
    user-select: none;
    padding: 20px;
}

.at-wrap .empty-state-content {
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.at-wrap .empty-state-icon {
    font-size: 50px;
    margin-bottom: 20px;
    color: #cbd5e1;
}

.at-wrap .empty-state-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--text-color, #64748b);
}

.at-wrap .empty-state-desc {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* Khu vực thanh tìm kiếm */
.at-wrap .imusic-internal-search {
    position: relative;
    text-align: left;
}

.at-wrap .search-input-wrap {
    position: relative;
}

.at-wrap .search-input-wrap .search-icon {
    position: absolute;
    left: 15px;
    top: 14px;
    color: #888;
}

.at-wrap .imusic-ajax-search-input {
    width: 100%;
    padding: 12px 15px 12px 40px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: var(--bg-body, #fff);
    color: var(--text-color, #333);
    font-size: 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Hiệu ứng khi click vào ô tìm kiếm (Không cần dùng JS nữa) */
.at-wrap .imusic-ajax-search-input:focus {
    border-color: #FB923C;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2);
}

.at-wrap .search-input-wrap .imusic-search-spinner {
    position: absolute;
    right: 15px;
    top: 14px;
    color: #888;
}

/* Hộp kết quả tìm kiếm */
.at-wrap .imusic-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bg-body, #fff);
    border: 1px solid var(--border-color, #ddd);
    border-radius: 0 0 8px 8px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 0;
    box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

/* Từng dòng kết quả (Item) */
.at-wrap .imusic-search-item {
    padding: 10px 15px;
    border-bottom: 1px solid var(--border-color, #eee);
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-color, #333);
    display: flex;
    align-items: center;
}

/* Hiệu ứng rê chuột vào kết quả (Không cần dùng JS onmouseenter nữa) */
.at-wrap .imusic-search-item:hover {
    background: rgba(128, 128, 128, 0.1);
}

.at-wrap .imusic-search-item:last-child {
    border-bottom: none;
}

.at-wrap .imusic-search-item i {
    color: #aaa;
    margin-right: 10px;
}
/* Đường gạch ngang chữ HOẶC */
.at-wrap .empty-state-divider {
    margin: 20px 0;
    color: #94a3b8;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.at-wrap .empty-state-divider::before,
.at-wrap .empty-state-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #e2e8f0);
}

.at-wrap .empty-state-divider span {
    padding: 0 15px;
    font-weight: 500;
}

/* Nút Mở file to đùng ở giữa màn hình */
.at-wrap .imusic-center-open-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px !important;
    border-radius: 8px;
    background-color: transparent !important;
    color: var(--text-color, #333) !important;
    border: 1px dashed #ccc !important;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    cursor: pointer;
}

.at-wrap .imusic-center-open-btn:hover {
    background-color: rgba(128, 128, 128, 0.05) !important;
    border-color: #FB923C !important;
    color: #FB923C !important;
}

html[data-theme="dark"] .at-wrap .imusic-center-open-btn {
    border-color: #555 !important;
    color: #e3e3e3 !important;
}
html[data-theme="dark"] .at-wrap .imusic-center-open-btn:hover {
    border-color: #FB923C !important;
    color: #FB923C !important;
}
/* ====================================================================== */
/* ẨN THANH CUỘN CỦA RIÊNG VÙNG BẢN NHẠC (IMMERSIVE LAYOUT)
/* ====================================================================== */

/* 1. Chỉ ẩn thanh cuộn ngang trên Chrome, Safari, Edge */
.at-wrap .at-viewport::-webkit-scrollbar:horizontal {
    display: none !important;
}

/* 2. Đảm bảo thanh cuộn dọc vẫn hiển thị (đặt độ rộng cố định) */
.at-wrap .at-viewport::-webkit-scrollbar:vertical {
    display: block !important;
    width: 12px !important;
}

/* 3. Đối với Firefox: Ẩn thanh cuộn ngang (auto) nhưng giữ thanh dọc */
.at-wrap .at-viewport {
    overflow-x: hidden !important; /* Chặn thanh cuộn ngang */
    overflow-y: auto !important;   /* Cho phép thanh cuộn dọc */
    scrollbar-width: thin !important; /* Dùng bản mỏng cho thanh dọc */
}
/* ====================================================================== */
/* RESPONSIVE: GIỮ NGUYÊN TỶ LỆ KHUNG HÌNH (ASPECT RATIO) TRÊN DI ĐỘNG
/* ====================================================================== */

/* Áp dụng cho các màn hình có chiều ngang nhỏ hơn 992px (Tablet & Mobile) */
@media (max-width: 992px) {
    
    /* 1. Ghi đè các thẻ style="..." viết cứng trong file PHP */
    .imusic-block-container,
    #imusic_sync_editor_metabox .inside {
        height: auto !important;
        min-height: 0 !important;
        /* Giữ tỷ lệ khung hình 16:9 (giống video YouTube) */
        aspect-ratio: 16 / 9 !important; 
    }

    /* 2. Xóa bỏ min-height 450px của Player gây ra lỗi dài loằng ngoằng */
    .imusic-player-wrapper.at-wrap {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 16 / 9 !important;
    }
}