/* CSS riêng cho trang Danh Mục Khóa Học (courses.html).
   Chỉ chứa những gì không dùng lại được ở trang khác — phần dùng chung nằm ở assets/css/theme.c142105d.css. */

.search-dropdown-enter-active { transition: opacity 0.12s ease-out, transform 0.12s ease-out; }
.search-dropdown-leave-active { transition: opacity 0.08s ease-in, transform 0.08s ease-in; }
.search-dropdown-enter-from, .search-dropdown-leave-to { opacity: 0; transform: translateY(-6px); }

/* Trích đoạn học liệu trong khung xem thử: mờ dần ở đáy để thấy rõ "còn nữa, phần sau đang khóa". */
.preview-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(242, 235, 220, 0), #F2EBDC);
    pointer-events: none;
}

/* Thẻ khóa học: giữ góc vuông + viền mảnh, khi hover chỉ đậm viền và nhấc nhẹ —
   không dùng bóng đổ lớn kiểu SaaS. */
.course-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.course-card:hover {
    border-color: #8FA4BB;
    box-shadow: 0 12px 28px -18px rgba(13, 31, 51, 0.45);
    transform: translateY(-2px);
}