/* ===== 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; }


/* ===== Noi dung trang Huong dan (soan bang CKEditor o Trung tam dieu hanh) =====
   Phai tu dinh nghia, khong dua vao mac dinh cua trinh duyet: site Hoc vien dung
   Tailwind - lop reset cua no xoa co danh sach, co tieu de va duong ke bang, nen
   HTML soan ra hien thanh mot khoi chu phang neu khong co day style nay.
   Rieng anh PHAI co max-width: anh chup man hinh rong 2000-2400px, de nguyen thi
   trang bi cuon ngang. (16/09/2026) */
.hd-noi-dung {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #334155;
    overflow-wrap: break-word;
}

.hd-noi-dung h2 {
    margin: 1.8rem 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
}

.hd-noi-dung h3 {
    margin: 1.25rem 0 0.35rem;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.hd-noi-dung p {
    margin: 0.6rem 0;
}

.hd-noi-dung ul {
    list-style: disc;
    padding-left: 1.4rem;
    margin: 0.6rem 0;
}

.hd-noi-dung ol {
    list-style: decimal;
    padding-left: 1.4rem;
    margin: 0.6rem 0;
}

.hd-noi-dung li {
    margin: 0.25rem 0;
}

.hd-noi-dung strong {
    color: #0f172a;
    font-weight: 700;
}

.hd-noi-dung a {
    color: #2563eb;
}

.hd-noi-dung code {
    background: #f1f5f9;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    font-size: 0.85em;
}

.hd-noi-dung figure {
    margin: 1.1rem 0;
    max-width: 100%;
}

.hd-noi-dung img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.1rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
}

.hd-noi-dung table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.85rem;
}

.hd-noi-dung th,
.hd-noi-dung td {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
}

.hd-noi-dung th {
    background: #f8fafc;
    font-weight: 700;
    color: #0f172a;
}

/* ----- Bo cuc muc: huy hieu so + the tung muc (giu lai tu ban trang tinh cu) ----- */
.hd-so {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.hd-mo-dau p {
    margin: 0.35rem 0;
}

.hd-muc {
    scroll-margin-top: 88px;
}

/* Anh chup man hinh rong 2000-2400px. Chan o 760px va can giua: de tran ca khung thi
   chu quanh no bi day ra, doc mat mach, ma chi tiet trong anh cung khong ro hon.
   Bam vao anh mo ban day du o tab moi - xem ghi chu trong trang huong dan. */
.hd-noi-dung img {
    max-width: min(100%, 760px);
    margin-left: auto;
    margin-right: auto;
    cursor: zoom-in;
}

.hd-noi-dung figure {
    text-align: center;
}

.hd-noi-dung figcaption {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    color: #64748b;
}

/* ----- Lop phu phong to anh (js/hd-zoom-anh.js) ----- */
.hd-zoom-lop {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.92);
    overflow: hidden;
    overscroll-behavior: contain;
}

.hd-zoom-lop.hien {
    display: flex;
}

.hd-zoom-anh {
    max-width: 92vw;
    max-height: 88vh;
    transform-origin: center center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

.hd-zoom-lop.dang-keo .hd-zoom-anh {
    cursor: grabbing;
}

.hd-zoom-thanh {
    position: absolute;
    top: 1rem;
    right: 1rem;
    /* Anh duoc scale() nen tao tang xep chong rieng va ve de len phan tu dung truoc no
       trong DOM. Khong khai z-index o day thi phong to len la thanh dieu khien bi anh
       che mat. */
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    /* Nen TOI DAC chu khong phai trang mo: anh chup man hinh phan lon la nen trang, phong
       to len la no nam ngay sau thanh nay - nen mo thi cac nut bien mat. */
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.hd-zoom-thanh button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.hd-zoom-thanh button:hover {
    background: rgba(255, 255, 255, 0.18);
}

.hd-zoom-thanh button[data-hd="goc"] {
    width: auto;
    padding: 0 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
}

.hd-zoom-muc {
    min-width: 3.2rem;
    text-align: center;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

body.hd-zoom-khoa-cuon {
    overflow: hidden;
}

/* Bao cho nguoi dung biet anh bam duoc */
.hd-noi-dung img:hover {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}