/* ===== Banner đầu trang danh mục (vị trí category_top) =====
   Render qua _CategoryTopBanner.cshtml. Hiển thị GIỐNG Hero trang chủ:
   Mô tả phụ (eyebrow) + Tiêu đề lớn + nút CTA, phủ trên ảnh.
   Nút CTA dùng class chung .oe-cta-btn (common.css); file này lo khung + overlay chữ. */

.oe-cat-banner {
    position: relative;
    margin: 0 0 28px;
    border-radius: 12px;
    overflow: hidden;
}

.oe-cat-banner__media { display: block; line-height: 0; }
.oe-cat-banner__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* Lớp phủ tối để chữ trắng nổi trên ảnh — chỉ thêm khi banner có nội dung chữ/nút. */
.oe-cat-banner.has-content::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(13, 15, 20, .72) 0%, rgba(13, 15, 20, .45) 38%, rgba(13, 15, 20, .12) 64%, rgba(13, 15, 20, 0) 100%);
}
@media (max-width: 767px) {
    /* Mobile: phủ tối từ dưới lên cho chữ căn đáy. */
    .oe-cat-banner.has-content::before {
        background: linear-gradient(180deg, rgba(13, 15, 20, .12) 0%, rgba(13, 15, 20, .38) 48%, rgba(13, 15, 20, .82) 100%);
    }
}

/* Khối nội dung phủ trên ảnh, neo đáy-trái như hero. */
.oe-cat-banner__content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    pointer-events: none; /* chữ không chặn click; nút bật lại pointer-events bên dưới */
}
.oe-cat-banner__inner {
    max-width: 600px;
    padding: clamp(20px, 4vw, 48px);
}

/* Eyebrow = Mô tả phụ (giống .aq-section-subtitle ở hero). */
.oe-cat-banner__eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* Tiêu đề lớn (giống .aq-section-title.fs-84 ở hero) — co giãn theo màn. */
.oe-cat-banner__title {
    margin: 0;
    font-size: clamp(22px, 5vw, 56px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.8px;
    color: #fff;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .4);
}

/* Nút CTA: cách tiêu đề một khoảng; bật lại pointer-events (cha đã tắt). */
.oe-cat-banner__cta {
    margin-top: clamp(18px, 3vw, 28px);
    pointer-events: auto;
}

/* Không có "Chữ nút": link trong suốt trùm cả banner → bấm đâu cũng tới Link. */
.oe-cat-banner__cover {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
}

@media (max-width: 575px) {
    .oe-cat-banner { margin-bottom: 18px; border-radius: 8px; }
}