/* 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.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".
   Màu đi theo --ao-nen-am, nay là #F2EBDC (bằng đúng paper-dim) sau khi chủ dự án chốt giữ tone
   kem 25/08. Dùng biến chứ không ghi cứng để lần chỉnh tone sau chỉ phải sửa một chỗ trong
   theme.css — chính lần này đã chứng minh vì sao. */
.preview-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(242, 235, 220, 0), var(--ao-nen-am, #F2EBDC));
    pointer-events: none;
}

/* Thẻ khóa học theo áo mới 25/08: bo góc thẻ + overflow hidden để ảnh bìa ôm theo góc tròn.
   Hover nhấc lên với bóng mềm — chép đúng hiệu ứng a.bg-white.border:hover của theme.css để
   thẻ <div> (bản Vue) và thẻ <a> (bản prerender cho bot) trông y hệt nhau. */
.course-card {
    border-radius: var(--ao-r-the, 16px);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
/* Đổi màu viền và đổi bóng để NGOÀI khối @media: máy cảm ứng vẫn cần một phản hồi khi chạm,
   chỉ có phần nhấc thẻ mới phải chặn. */
.course-card:hover {
    border-color: transparent;
    box-shadow: var(--ao-bong-cao);
}
/* Đợt 1 mục 1.3: luật hover CÓ TRANSFORM phải bọc trong @media (hover: hover) and (pointer: fine).
   Trên điện thoại, một cú chạm sinh ra trạng thái :hover giả rồi TREO ở đó cho tới khi người dùng
   chạm chỗ khác, nên thẻ bị nhấc lên 3px và nằm luôn như vậy. Khối này khóa việc nhấc thẻ lại cho
   thiết bị thật sự có con trỏ. Giữ đúng -3px, đây là biên độ nhấc THẺ dùng chung của cả hệ. */
@media (hover: hover) and (pointer: fine) {
    .course-card:hover {
        transform: translateY(-3px);
    }
}

/* Gạch chân vàng dưới tiêu đề thẻ khóa học, đợt 3 mục 3.1.
   theme.css đã có sẵn luật này nhưng nó bắt selector a.bg-white.border, tức chỉ trúng lưới
   prerender (khối sinh tự động giữa hai mốc PRERENDER, không sửa tay được). Thẻ khóa học mà
   người dùng thật nhìn thấy là <div class="course-card"> do Vue dựng, nên phải có luật song song
   ở đây, đúng cách .course-card:hover phía trên đang chép lại a.bg-white.border:hover của theme.css.
   BẮT BUỘC bọc chữ trong <span class="gach-vang">: h2 là phần tử KHỐI chiếm hết bề ngang thẻ, đặt
   nền thẳng lên nó sẽ vẽ ra một vạch chạy suốt thẻ chứ không nằm dưới chữ.
   box-decoration-break:clone để tên môn dài nhất (A-Level Computer Science) xuống hai dòng vẫn
   được gạch đúng từng dòng chứ không chỉ dòng cuối.

   KIỂU NỀN của .gach-vang KHÔNG còn nằm ở đây nữa (28/08/2026, lượt gộp sau thẩm tra). Nó đã được
   chuyển thành luật chung `span.gach-vang` trong theme.css, không ràng buộc ngữ cảnh, nên mọi nơi
   dùng lại chỉ tốn đúng một dòng kích hoạt như dòng dưới. Trước lượt gộp có HAI bản khai y hệt
   nhau ở hai file, tức hai nguồn sự thật cho cùng một hiệu ứng. */
@media (hover: hover) and (pointer: fine) {
    .course-card:hover span.gach-vang {
        background-size: 100% 2px;
    }
}

/* Đợt 4 mục 4.1: ô ảnh bìa trong khung chờ phải vuông đáy để trùng khít ảnh thật.
   .vp-khung-cho bo cả bốn góc, còn ảnh bìa thật nằm trong ô .h-40 vuông đáy (chỉ hai góc trên
   được .course-card{overflow:hidden} bo hộ), nên không trả góc dưới về 0 thì khung chờ lộ ra
   hai góc tròn mà thẻ thật không có. */
.course-card > .vp-khung-cho.h-40 {
    border-radius: 0;
}

/* Đợt 4 mục 4.1: thẻ khung chờ mượn class .course-card để lấy bo góc và overflow, nhưng nó KHÔNG
   phải thẻ bấm được, nên phải chặn lại phần hover thừa hưởng ở trên (nhấc lên 3px, đổi viền, đổi
   bóng). pointer-events:none là cách gọn nhất và cũng đúng ngữ nghĩa: cả vùng này đã mang
   aria-hidden="true", tức nó vô hình với trình đọc màn hình thì cũng nên trơ với con trỏ. */
.course-card--cho {
    pointer-events: none;
}