::-webkit-scrollbar { width: 0px; height: 0px; }
        .custom-scrollbar::-webkit-scrollbar { height: 0px; }

        ::-webkit-scrollbar { width: 0px; height: 0px; }
.custom-scrollbar::-webkit-scrollbar { height: 0px; }

/* MÔI TRƯỜNG GIẢ LẬP ANDROID (ĐÃ ĐƯỢC LƯỢC BỎ ĐỂ LÊN APP THẬT) */
body {
    background-color: #f8fafc;
    width: 100vw; height: 100vh; margin: 0; padding: 0; overflow: hidden;
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

#device-toolbar {
    display: none !important;
}

#simulator-container {
    width: 100%; height: 100%; margin: 0; padding: 0; 
    display: flex; align-items: center; justify-content: center; 
    overflow: hidden; background-color: transparent;
}

/* KHUNG APP CHÍNH - ĐÃ SỬA ĐỂ BUNG FULL MÀN HÌNH ĐIỆN THOẠI THẬT */
#app-wrapper {
    background-color: #f8fafc; position: relative;
    display: flex; flex-direction: column; overflow: hidden;
    width: 100%; height: 100%; max-width: 100%;
    border-radius: 0px; border: none; box-shadow: none;
}

.dark #simulator-container { background: transparent; }
.dark #app-wrapper { background-color: #0f172a; border: none; }

/* THEME & COMPONENTS */
.app-card {
    background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s ease;
}
.dark .app-card {
    background: #1e293b; border-color: #334155; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* GIẢI QUYẾT LỖI HIỆU ỨNG NHẤN CHÙM: CHỈ DÙNG CHO PHẦN TỬ CÓ CLASS .click-scale */
.click-scale { transition: transform 0.1s ease; }
.click-scale:active { transform: scale(0.92); }

/* HIỆU ỨNG KARAOKE (Đã tối ưu) */
.char-span { transition: color 0.1s, transform 0.1s; display: inline-block; }
.karaoke-active { color: #f59e0b !important; transform: scale(1.15) translateY(-2px); text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3); font-weight: 900;}

.drag-over { border: 2px dashed #4f46e5 !important; background: rgba(79, 70, 229, 0.1) !important; }

.bottom-nav { background: rgba(255, 255, 255, 0.98); border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom); }
.dark .bottom-nav { background: rgba(30, 41, 59, 0.98); border-top: 1px solid #334155; }

.nav-item { color: #94a3b8; transition: all 0.2s ease; }
.nav-item.active { color: #4f46e5; }
.dark .nav-item.active { color: #818cf8; }
.nav-item.active i { transform: translateY(-2px) scale(1.1); }

.app-input {
    width: 100%; padding: 0.8rem 1rem; border-radius: 0.75rem;
    background: #f1f5f9; border: 1px solid transparent; color: #1e293b; outline: none;
}
.app-input:focus { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,0.1); }
.dark .app-input { background: #0f172a; color: #f8fafc; border-color: #334155; }
.dark .app-input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129,140,248,0.1); }

.btn-primary { background-color: #4f46e5; color: white; font-weight: 600; border-radius: 0.75rem; transition: all 0.2s; }
.btn-secondary { background-color: #f1f5f9; color: #475569; font-weight: 600; border-radius: 0.75rem; transition: all 0.2s; }
.dark .btn-secondary { background-color: #334155; color: #e2e8f0; }

.slide-in-right { animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
#app-wrapper {
    background-color: #f8fafc; 
    position: relative;
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
    width: 100%; 
    height: 100%;
    max-width: 100%;
    border-radius: 0px; 
    border: none;
    box-shadow: none;
}

.dark #app-wrapper { 
    background-color: #0f172a; 
    border: none; 
}

        /* THEME & COMPONENTS */
        .app-card {
            background: #ffffff; border: 1px solid #f1f5f9; border-radius: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02); transition: all 0.2s ease;
        }
        .dark .app-card {
            background: #1e293b; border-color: #334155; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        /* GIẢI QUYẾT LỖI HIỆU ỨNG NHẤN CHÙM: CHỈ DÙNG CHO PHẦN TỬ CÓ CLASS .click-scale */
        .click-scale { transition: transform 0.1s ease; }
        .click-scale:active { transform: scale(0.92); }

        /* HIỆU ỨNG KARAOKE (Đã tối ưu) */
        .char-span { transition: color 0.1s, transform 0.1s; display: inline-block; }
        .karaoke-active { color: #f59e0b !important; transform: scale(1.15) translateY(-2px); text-shadow: 0 2px 4px rgba(245, 158, 11, 0.3); font-weight: 900;}
        
        .drag-over { border: 2px dashed #4f46e5 !important; background: rgba(79, 70, 229, 0.1) !important; }

        .bottom-nav { background: rgba(255, 255, 255, 0.98); border-top: 1px solid #e2e8f0; padding-bottom: env(safe-area-inset-bottom); }
        .dark .bottom-nav { background: rgba(30, 41, 59, 0.98); border-top: 1px solid #334155; }
        
        .nav-item { color: #94a3b8; transition: all 0.2s ease; }
        .nav-item.active { color: #4f46e5; }
        .dark .nav-item.active { color: #818cf8; }
        .nav-item.active i { transform: translateY(-2px) scale(1.1); }
        
        .app-input {
            width: 100%; padding: 0.8rem 1rem; border-radius: 0.75rem;
            background: #f1f5f9; border: 1px solid transparent; color: #1e293b; outline: none;
        }
        .app-input:focus { border-color: #4f46e5; background: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,0.1); }
        .dark .app-input { background: #0f172a; color: #f8fafc; border-color: #334155; }
        .dark .app-input:focus { border-color: #818cf8; box-shadow: 0 0 0 4px rgba(129,140,248,0.1); }

        .btn-primary { background-color: #4f46e5; color: white; font-weight: 600; border-radius: 0.75rem; transition: all 0.2s; }
        .btn-secondary { background-color: #f1f5f9; color: #475569; font-weight: 600; border-radius: 0.75rem; transition: all 0.2s; }
        .dark .btn-secondary { background-color: #334155; color: #e2e8f0; }

        .slide-in-right { animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
        @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }