/* =========================================================
   LEGO WEB – CAROUSEL (CLEAN)
   - lgw-carousel                       : wrapper chung
   - content-carousel / content_carousel: bài viết (CMS)
   - bib-carousel / bib_carousel        : biểu ghi thư mục (Catalog)
   ========================================================= */

/* =========================
   ROOT + GRID
   ========================= */
.lgw-carousel {
    position: relative;
}

    /* Gutter mặc định (desktop/tablet) */
    .lgw-carousel .carousel-inner .row {
        --bs-gutter-x: .5rem;
        --bs-gutter-y: .5rem;
        align-items: stretch; /* Thêm dòng này để các card căn đều */
    }

    /* Fallback nếu markup có m-0 và/hoặc custom margin/padding */
    .lgw-carousel .carousel-inner .row {
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }

        .lgw-carousel .carousel-inner .row > [class*="col-"] {
            padding-left: 0.25rem;
            padding-right: 0.25rem;
        }

    /* Bib: gọn hơn (đỡ “rỗng”) */
    .lgw-carousel.bib-carousel .carousel-inner .row,
    .lgw-carousel.bib_carousel .carousel-inner .row {
        --bs-gutter-x: .4rem;
        --bs-gutter-y: .45rem;
    }

    /* =========================
   CARD (CHUNG)
   ========================= */
    .lgw-carousel .lgw-carousel-card,
    .lgw-carousel .card.carousel-scroller,
    .lgw-carousel .card.catalog-scroller {
        position: relative;
        overflow: hidden;
        border-radius: .8rem;
        border: 1px solid rgba(0,0,0,.06);
        background: #fff;
        height: 100%;
        display: flex; /* THÊM */
        flex-direction: column; /* THÊM */
    }

        /* Body spacing chung */
        .lgw-carousel .lgw-carousel-card .card-body,
        .lgw-carousel .card.carousel-scroller .card-body,
        .lgw-carousel .card.catalog-scroller .card-body {
            padding-top: .45rem;
            padding-bottom: .65rem;
            flex-grow: 1; /* THÊM - để card-body tự động chiếm hết phần còn lại */
            display: flex; /* THÊM */
            flex-direction: column; /* THÊM */
            justify-content: center; /* THÊM - căn giữa title theo chiều dọc */
        }

    /* =========================
   MEDIA – CONTENT (ảnh ngang)
   ========================= */
    .lgw-carousel .lgw-carousel-thumb-img {
        display: block;
        width: 100%;
        height: 180px; /* ĐỔI từ max-height thành height cố định */
        object-fit: cover;
        border-radius: .6rem .6rem 0 0;
    }

    /* Icon fallback chung */
    .lgw-carousel .lgw-carousel-icon-img,
    .lgw-carousel .catalog-icon-img {
        display: block;
        width: 120px;
        height: 120px;
        margin: 14px auto 6px;
        padding: 10px;
        box-sizing: content-box;
        border-radius: .9rem;
        background: rgba(0,0,0,.02);
        object-fit: contain;
        border: 0;
    }

    /* Hover icon */
    .lgw-carousel a:hover .lgw-carousel-icon-img,
    .lgw-carousel a:hover .catalog-icon-img {
        background: rgba(217,193,128,.12);
        transform: translateY(-2px);
        transition: all .2s ease;
    }

    /* =========================
   MEDIA – BIB (bìa sách)
   ========================= */
    /* Card bib: cân lại cảm giác “thư viện”, bớt rỗng */
    .lgw-carousel.bib-carousel .card.catalog-scroller,
    .lgw-carousel.bib_carousel .card.catalog-scroller {
        border-radius: .75rem;
    }

    /* Ảnh bìa: dùng aspect-ratio để KHÔNG bị dài/lùn theo màn hình */
    .lgw-carousel.bib-carousel .catalog-thumb-img,
    .lgw-carousel.bib_carousel .catalog-thumb-img {
        display: block;
        width: 100%;
        height: 180px;
        aspect-ratio: 2 / 3; /* tỷ lệ bìa phổ biến */
        object-fit: cover; /* đầy khung, nhìn “chắc” */
        padding: 0; /* tránh “lọt thỏm” */
        background: transparent;
        border-radius: 0; /* card đã clip */
    }

    /* Nếu anh muốn “không crop” (giữ nguyên bìa), đổi cover -> contain và bật nền */
    /*
.lgw-carousel.bib-carousel .catalog-thumb-img,
.lgw-carousel.bib_carousel .catalog-thumb-img{
  object-fit: contain;
  background:#f6f6f6;
}
*/

    /* Icon fallback bib: dáng bìa */
    .lgw-carousel.bib-carousel .catalog-icon-img,
    .lgw-carousel.bib_carousel .catalog-icon-img {
        width: 96px;
        height: 140px;
        margin: 10px auto 6px;
        padding: 8px;
    }

    /* Bib title spacing */
    .lgw-carousel.bib-carousel .card.catalog-scroller .card-body,
    .lgw-carousel.bib_carousel .card.catalog-scroller .card-body {
        padding: .55rem .65rem .7rem;
    }

    /* =========================
   TITLE (CHUNG)
   ========================= */
    .lgw-carousel .card-title,
    .lgw-carousel .title-scroller,
    .lgw-carousel .lgw-carousel-title,
    .lgw-carousel .catalog-title-text {
        writing-mode: horizontal-tb;
        white-space: normal !important;
        word-break: break-word;
        text-align: center;
    }

    /* Clamp 2 dòng (chung) */
    .lgw-carousel .lgw-carousel-title,
    .lgw-carousel .catalog-title-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .9rem;
        line-height: 1.3;
        min-height: calc(1.3em * 2);
    }

    /* =========================
   NAVIGATOR
   ========================= */
    .lgw-carousel .lgw-carousel-nav {
        width: 2.4rem;
        height: 2.4rem;
        top: 50%;
        transform: translateY(-50%);
        background-color: #fff; /* Đổi từ var(--hanu-gold-soft) sang trắng */
        border-radius: 999px;
        border: 1px solid rgba(0,0,0,.15); /* Đổi từ var(--hanu-gold-deep) sang border xám nhẹ */
        opacity: .96;
        transition: opacity .15s ease, transform .15s ease;
        z-index: 2;
    }

    .lgw-carousel .lgw-carousel-nav--prev {
        left: -0.25rem;
    }

    .lgw-carousel .lgw-carousel-nav--next {
        right: -0.25rem;
    }

    .lgw-carousel .lgw-carousel-nav:hover {
        opacity: 1;
        transform: translateY(-50%) scale(1.04);
    }

    /* Giữ icon Bootstrap */
    .lgw-carousel .carousel-control-prev-icon,
    .lgw-carousel .carousel-control-next-icon {
        filter: invert(0.5); /* Thêm để icon tối màu hơn trên nền trắng */
    }

    /* =========================
   INDICATORS
   ========================= */
    .lgw-carousel .lgw-carousel-indicators {
        margin-bottom: .15rem;
    }

        .lgw-carousel .lgw-carousel-indicators button {
            width: .5rem;
            height: .5rem;
            border-radius: 999px;
            background-color: rgba(0,0,0,.22);
            margin: 0 .12rem;
        }

        .lgw-carousel .lgw-carousel-indicators .active {
            background-color: var(--hanu-gold-deep);
        }

    /* =========================
   VARIANT HOOKS (để trống)
   ========================= */
    .lgw-carousel.content-carousel .card.carousel-scroller,
    .lgw-carousel.content_carousel .card.carousel-scroller {
    }

    .lgw-carousel.bib-carousel .card.catalog-scroller,
    .lgw-carousel.bib_carousel .card.catalog-scroller {
    }

/* =========================================================
   MOBILE SMALL (≤ 575.98px)
   - content: 1 cột
   - bib    : 2 cột
   ========================================================= */
@media (max-width:575.98px) {
    /* content 1 cột */
    .lgw-carousel.content-carousel .carousel-inner .row > [class*="col-"],
    .lgw-carousel.content_carousel .carousel-inner .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* bib 2 cột */
    .lgw-carousel.bib-carousel .carousel-inner .row > [class*="col-"],
    .lgw-carousel.bib_carousel .carousel-inner .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .lgw-carousel .card {
        margin-bottom: .5rem;
    }

    /* content thumb nhỏ hơn chút */
    .lgw-carousel .lgw-carousel-thumb-img {
        max-height: 150px;
    }
}