/* ===== EduHub – CSS bổ trợ (những gì Tailwind CDN không có sẵn) =====
   Bản sao của assets/css/style.css trong template tĩnh; reset cơ bản do preflight
   của Tailwind đảm nhiệm. */

/* Nền lưới mờ cho hero */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(99,102,241,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99,102,241,.08) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

/* Nền chấm bi cho section tối */
.bg-dots {
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Thanh cuộn mảnh (sidebar khoá học, danh sách bài giảng) */
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Chữ gradient */
.text-gradient {
  background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 50%, #db2777 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hiệu ứng nổi cho card */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-4px); }

/* Accordion: xoay icon khi mở */
[data-accordion-toggle][aria-expanded="true"] .acc-icon { transform: rotate(180deg); }
.acc-icon { transition: transform .2s ease; }

/* Nội dung HTML từ CMS (bài viết, mô tả khóa học, bài giảng văn bản): preflight đã
   xoá style mặc định của h1-h6/ul/ol/p nên khôi phục lại trong phạm vi khối này. */
.rich-content { line-height: 1.75; }
.rich-content > * + * { margin-top: .75rem; }
.rich-content h1, .rich-content h2, .rich-content h3, .rich-content h4 { color: #0f172a; font-weight: 700; line-height: 1.3; margin-top: 1.5rem; }
.rich-content h1 { font-size: 1.5rem; }
.rich-content h2 { font-size: 1.25rem; }
.rich-content h3 { font-size: 1.125rem; }
.rich-content h4 { font-size: 1rem; }
.rich-content ul { list-style: disc; padding-left: 1.5rem; }
.rich-content ol { list-style: decimal; padding-left: 1.5rem; }
.rich-content li + li { margin-top: .25rem; }
.rich-content a { color: #4f46e5; text-decoration: underline; }
.rich-content img { max-width: 100%; border-radius: .75rem; margin: 1rem 0; }
.rich-content blockquote { border-left: 3px solid #c7d2fe; padding-left: 1rem; color: #475569; font-style: italic; }
.rich-content table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.rich-content th, .rich-content td { border: 1px solid #e2e8f0; padding: .5rem .75rem; text-align: left; }
.rich-content th { background: #f8fafc; font-weight: 600; }
.rich-content pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: .75rem; overflow-x: auto; font-size: .8125rem; }
.rich-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .875em; }
.rich-content iframe, .rich-content video { max-width: 100%; }

/* Delay cho animation fade-up */
.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }