[v-cloak] {
    display: none !important;
}

body { 
    background-color: #111827; 
    color: #e5e7eb;
    scroll-behavior: smooth; 
}

/* Scrollbar đẹp */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1f2937; } 
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #6b7280; }

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #4b5563 #1f2937;
}

/* Background Pattern cho Preview */
.bg-dots-pattern {
    background-image: radial-gradient(#4b5563 1px, transparent 1px);
    background-size: 20px 20px;
}

.bg-pattern {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPgo8cGF0aCBkPSJNMCAwTDggOFpNOCAwTDAgOFoiIHN0cm9rZT0ibm9uZSIvPgo8L3N2Zz4=');
    opacity: 0.1; 
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.2s ease-out; }

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
.animate-zoom-in { animation: zoomIn 0.2s ease-out; }

@keyframes bounceCustom {
    0%, 100% { transform: translateY(-5%); }
    50% { transform: translateY(5%); }
}
.animate-bounce-custom { animation: bounceCustom 2s infinite; }

/* Font cho toán trong Editor (giống VSCode) */
textarea {
    font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
    line-height: 1.6;
}

/* MathJax output size */
mjx-container {
    font-size: 110% !important;
}