/*
 * site.css — Custom styles bổ sung cho Tailwind.
 * Tailwind CDN handles most styling, đây chỉ là utility bổ sung.
 */

/* ===== LINE CLAMP (cho trình duyệt cũ) ===== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== PROSE — format HTML content ===== */
.prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p  { margin-bottom: 1rem; line-height: 1.75; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1rem; }
.prose li { margin-bottom: 0.25rem; }
.prose img { border-radius: 0.5rem; margin: 1rem 0; }
.prose a { color: #55B3D9; text-decoration: underline; }
.prose blockquote {
    border-left: 4px solid #55B3D9;
    padding-left: 1rem;
    color: #6b7280;
    font-style: italic;
    margin: 1rem 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.prose th, .prose td { border: 1px solid #e5e7eb; padding: 0.5rem 1rem; text-align: left; }
.prose th { background-color: #f9fafb; font-weight: 600; }

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.3s ease-out; }

/* ===== SPINNER ===== */
.spinner {
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== TOAST ===== */
.toast {
    position: fixed; top: 1rem; right: 1rem; z-index: 9999;
    padding: 0.75rem 1.25rem; border-radius: 0.5rem;
    color: #fff; font-size: 0.875rem; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateX(120%); transition: transform 0.3s ease;
}
.toast.show { transform: translateX(0); }
.toast-success { background-color: #22c55e; }
.toast-error { background-color: #ef4444; }
.toast-info { background-color: #55B3D9; }