/* * CSS Dành riêng cho giao diện Portal (Frontend) AffiliateViet 
 */

body { font-family: 'Inter', sans-serif; } 
.hide-scrollbar::-webkit-scrollbar { display: none; } 
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } 
.tab-anim { animation: fadeIn 0.3s ease-in-out; } 

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

.auth-slide { transition: all 0.3s ease-in-out; }

/* Hiệu ứng bục vinh quang (Podium) */
.podium-up { animation: slideUp 0.8s ease-out forwards; opacity: 0; transform: translateY(20px); }
@keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Hiệu ứng bóng đổ */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

@keyframes shimmer {
    0% { transform: translateY(100%) skewY(12deg); }
    100% { transform: translateY(-100%) skewY(12deg); }
}

/* ==========================================================================
   TYPOGRAPHY - CSS CHUẨN HÓA NỘI DUNG BÀI HỌC (LMS CONTENT)
   ========================================================================== */

/* Định dạng chung cho văn bản */
.prose {
    color: #334155;
    line-height: 1.75;
    font-size: 15px; /* Tăng nhẹ size chữ để dễ đọc hơn trên màn hình */
}
.dark .dark\:prose-invert {
    color: #cbd5e1;
}

/* Khoảng cách các đoạn văn (Enter xuống dòng) */
.prose p { 
    margin-top: 0; 
    margin-bottom: 1.25em; 
}

/* Định dạng các thẻ Tiêu đề H1, H2, H3, H4... */
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5 {
    color: #0f172a;
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}
.dark .dark\:prose-invert h1, 
.dark .dark\:prose-invert h2, 
.dark .dark\:prose-invert h3, 
.dark .dark\:prose-invert h4,
.dark .dark\:prose-invert h5 {
    color: #f8fafc;
}

.prose h1 { font-size: 1.875em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1.125em; }

/* Danh sách gạch đầu dòng (Ul, Ol) */
.prose ul { 
    list-style-type: disc; 
    padding-left: 1.625em; 
    margin-top: 0;
    margin-bottom: 1.25em; 
}
.prose ol { 
    list-style-type: decimal; 
    padding-left: 1.625em; 
    margin-top: 0;
    margin-bottom: 1.25em; 
}
.prose li { 
    margin-bottom: 0.375em; 
}
.prose li::marker { 
    color: #94a3b8; 
}
.dark .dark\:prose-invert li::marker { 
    color: #64748b; 
}

/* Chữ in đậm */
.prose strong, .prose b { 
    font-weight: 600; 
    color: #0f172a; 
}
.dark .dark\:prose-invert strong, .dark .dark\:prose-invert b { 
    color: #ffffff; 
}

/* Link liên kết trong nội dung */
.prose a { 
    color: #14b8a6; 
    text-decoration: none; 
    font-weight: 500; 
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}
.prose a:hover { 
    border-bottom-color: #14b8a6; 
}

/* Trích dẫn (Blockquote) */
.prose blockquote {
    font-style: italic;
    border-left: 4px solid #e2e8f0;
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    color: #64748b;
    background: #f8fafc;
    padding: 1em;
    border-radius: 0 0.5rem 0.5rem 0;
}
.dark .dark\:prose-invert blockquote {
    border-left-color: #334155;
    color: #94a3b8;
    background: #1e293b;
}

/* Hình ảnh trong bài viết */
.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5em auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    display: block;
}