/* =========================================================
   tbump-home.css — Style RIÊNG cho TRANG CHỦ tbump (redesign theo UNETI)
   - Scope: MỌI rule bọc trong .tbump-home → chỉ ăn trang chủ, không rò trang khác.
   - KHÔNG đổi nghĩa class lgw-* dùng chung; chỉ thêm/đè trong phạm vi .tbump-home.
   - Chrome global (header trắng / footer / chat / back-to-top) nằm ở lgw-tbump.css, không ở đây.

   REFACTOR NOTE: file này đã được rút gọn — những gì Bootstrap 5 có sẵn utility class
   (flex, gap, rounded, shadow, fw-bold, text-white, position...) đã CHUYỂN sang markup
   (OpacQuickSearchBox.ascx) thay vì viết CSS riêng ở đây. CSS ở đây chỉ còn giữ lại những
   thứ Bootstrap KHÔNG có class dựng sẵn: màu thương hiệu, backdrop-blur, gradient overlay
   nhiều lớp, text-shadow, line-clamp, các ::before/::after đặc thù, hover riêng...
   ========================================================= */

/* ===== Biến màu (scope trang chủ) ===== */
.tbump-home {
    --tb-blue: #1775BF;
    --tb-blue-deep: #143f8c;
    --tb-navy: #16236e;
    --tb-gold: #f6b400;
    --tb-soft: #f4f7fb;
    --tb-ink: #21303a;
}
#tbump-sec-1 {
    margin: 0;
    padding: 0;
    border: none;
}
@media (max-width: 575.98px) {
    #tbump-sec-1 {
        margin: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 767.98px) {
    #tbump-sec-1 {
        border-radius: 0;
        border: none;
    }
}

#tbump-sec-1 > .container {
    padding: 0;
    margin: 0;
    display: inline;
}
    /* =========================================================
   PHASE 1 — HERO (restyle SearchZone .image-onesearch)
   Layout (flex/gap/rounded/shadow/spacing) đã chuyển sang utility class trong
   OpacQuickSearchBox.ascx. CSS dưới đây chỉ còn phần Bootstrap không có sẵn.
   ========================================================= */

    /* .image-onesearch giờ chỉ là khung chứa định vị (Zone wrapper) — không còn tự set
   background-image/padding, vì ảnh nền đã chuyển sang carousel bên trong .qs-main-layout. */
    .tbump-home .image-onesearch {
        position: relative;
        overflow: hidden;
    }
    /* tắt lớp pattern mờ mặc định (nó làm sáng nền tối) */
    .tbump-home .lgw-zone--image.image-onesearch::before {
        background: none;
        opacity: 1;
    }

    /* Carousel nền: vị trí/kích thước (position-absolute top-0 start-0 w-100 h-100) đã là utility
   trong markup. Chỉ còn 2 việc Bootstrap không tự làm: z-index (nằm dưới cùng) và object-fit
   cho ảnh bên trong carousel-item (Bootstrap 5.3+ có .object-fit-cover, nhưng để chắc chắn
   tương thích với bản Bootstrap đang dùng, viết riêng ở đây cho an toàn). */
    .tbump-home .qs-hero-carousel {
        z-index: 0;
    }

    .tbump-home .qs-hero-slide-img {
        object-fit: cover;
    }

    /* Overlay tối phủ trên carousel — Bootstrap không có utility cho gradient nhiều điểm dừng */
    .tbump-home .qs-hero-overlay {
        z-index: 1;
        background: linear-gradient(rgba(10,26,54,.16), rgba(10,26,54,.24));
        pointer-events: none;
    }

    /* Nội dung (search card + resource pill): đứng yên, luôn nổi trên carousel + overlay.
   Padding 11rem 0 quyết định chiều cao hero — dời từ .image-onesearch cũ sang đây, vì
   carousel/overlay dùng position:absolute nên tự chúng không tạo chiều cao cho .qs-main-layout. */
    .tbump-home .qs-hero-content {
        z-index: 2;
        padding: 11rem 0;
    }

    /* Dots chỉ báo carousel — Bootstrap mặc định vẽ vạch ngang (dash), đổi sang chấm tròn nhỏ cho gọn */
    .tbump-home .qs-hero-indicators {
        z-index: 2;
        margin-bottom: 0.75rem;
    }

        .tbump-home .qs-hero-indicators button {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255,255,255,.55);
            border: 0;
            opacity: 1;
        }

            .tbump-home .qs-hero-indicators button.active {
                background-color: #fff;
            }

    /* Panel tìm kiếm: nền kính mờ tối (backdrop-filter) — Bootstrap không có utility cho blur */
    .tbump-home .qs-search-card {
        max-width: 1060px !important; /* override inline style="max-width:900px" trong markup */
        border-radius: 14px !important; /* số đo riêng, khác rounded-4 mặc định (~12px) của BS */
        background: rgba(15,28,54,.55) !important; /* override .bg-white (!important của BS) */
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        border: 1px solid rgba(255,255,255,.18) !important;
        box-shadow: none !important;
    }

    /* Tiêu đề: font-weight/color/text-align/margin đã chuyển sang utility (fw-bold text-white text-center mb-3 fs-4)
   chỉ còn text-shadow — Bootstrap không có utility cho text-shadow */
    .tbump-home .qs-search-heading {
        text-shadow: 0 2px 10px rgba(0,0,0,.4);
    }

    /* 3 link tài nguyên: layout (d-flex/gap/rounded-pill/bg-white) đã chuyển sang utility.
   Chỉ còn: kích thước riêng (height 42px không có utility tương ứng), màu chữ thương hiệu,
   và transition hover — Bootstrap có class hover đổi opacity/shadow nhưng không đổi màu nền tùy ý. */
    .tbump-home .qs-resource-link {
        height: 42px;
        color: var(--tb-blue-deep);
        font-weight: 500;
        transition: background .15s ease;
    }

        .tbump-home .qs-resource-link:hover {
            background: #f2f2f2;
            color: var(--tb-blue-deep);
        }

    /* Dropdown chọn phạm vi tìm kiếm: nền xanh brand — không phải màu theme Bootstrap (primary/secondary...)
   nên vẫn cần CSS riêng thay vì utility bg-primary. List KHI MỞ ép nền trắng/chữ tối để Chrome không
   kéo nền xanh vào từng option (khó đọc). */
    .tbump-home .qs-search-card select.form-select {
        background-color: var(--tb-blue) !important;
        color: #fff !important;
        border: 0 !important;
        font-weight: 700;
        border-radius: 8px;
    }

        .tbump-home .qs-search-card select.form-select option {
            background-color: #fff !important;
            color: #212529 !important;
            font-weight: 400;
        }

    .tbump-home .qs-search-card input.form-control {
        border: 0;
        border-radius: 8px;
    }

    /* Nút tìm kiếm: icon kính lúp là SVG nền custom (không phải icon Bootstrap có sẵn) nên giữ nguyên CSS riêng */
    .tbump-home .qs-search-card .btn-primary {
        width: 48px !important;
        min-width: 48px;
        height: 48px;
        padding: 0 !important;
        border-radius: 50% !important;
        color: transparent !important;
        font-size: 0 !important;
        border: 0 !important;
        background: var(--tb-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/18px no-repeat !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.22);
    }

        .tbump-home .qs-search-card .btn-primary:hover {
            background-color: var(--tb-blue-deep) !important;
        }

/* MOBILE (<768px): nút search trả về kiểu chữ nhật full-width mặc định của Bootstrap (bỏ icon tròn),
   và 3 pill tài nguyên xếp dọc — flex-column đã tự động qua class "flex-md-row" trong markup nên
   phần layout dọc/ngang KHÔNG cần media query riêng nữa. Chỉ còn 2 việc Bootstrap không tự làm:
   reset icon-tròn của nút search về mặc định, và chiều cao tối thiểu hero. */
@media (max-width: 767.98px) {
    .tbump-home .qs-main-layout {
        min-height: 620px;
    }

    .tbump-home .qs-hero-content {
        padding-top: 1rem;
        padding-bottom: 7.5rem;
    }

    .tbump-home .qs-search-heading {
        font-size: 1.35rem; /* override fs-4 utility cho vừa mobile hơn */
    }

    .tbump-home .qs-search-card .btn-primary {
        width: 100% !important;
        min-width: 0;
        height: 48px !important;
        border-radius: 8px !important;
        color: #fff !important;
        font-size: 1rem !important;
        background: var(--tb-blue) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
    }
}

/* =========================================================
   PHASE 6 — DẢI THỐNG KÊ (webpart TbumpLibraryStats)
   4 chỉ số về KHO TÀI LIỆU (khác thống kê traffic ở footer/WebsiteInfo).
   KHÔNG full-bleed: nền nhạt bo góc nằm gọn trong .container, khớp nhịp với các section card khác.
   Số cột do webpart tự tính theo số mục đang bật (4→col-md-3, 3→col-md-4...).
   ========================================================= */

.tbump-stats-zone > .container {
   /* padding: 0;
    margin: 0;
    display: inline;*/
}

.tbump-home .tbump-stats-zone {
    padding: .5rem 0;
    overflow: hidden;
    background-color: #f4f7fb;
}

.tbump-home .tbump-stats {
    background: var(--tb-soft);
    border-radius: 16px;
    padding: 2rem 1rem;
}

.tbump-home .tbump-stats .n {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--tb-blue);
    line-height: 1.15;
}

.tbump-home .tbump-stats .l {
    color: #5a6b78;
    font-weight: 600;
}

/* Mobile: markup dùng col-6 → tự xếp 2×2, chỉ cần giảm cỡ số */
@media (max-width: 767.98px) {
    .tbump-home .tbump-stats {
        padding: 1.5rem .5rem;
    }

    .tbump-home .tbump-stats .n {
        font-size: 1.6rem;
    }

    .tbump-home .tbump-stats .l {
        font-size: .85rem;
    }
}

/* =========================================================
   PHASE 3 — "TÀI NGUYÊN" (REUSE CatalogCarousel + restyle kệ sách)
   Giữ nguyên — markup Phase 3 nằm trong Default.aspx (không có trong phạm vi refactor lần này),
   nên chưa chuyển utility class. Khi sửa Default.aspx có thể áp dụng tương tự: .tbump-tabs (flex/gap)
   và .lgw-bib-grid (rounded/padding) đều có thể thay bằng d-flex gap-3 / rounded-4 p-3 trực tiếp
   trên thẻ HTML, chỉ giữ lại phần ::before (kệ gỗ), line-clamp, và box-shadow riêng ở đây.
   ========================================================= */
.tbump-home .tbump-resources {
    background: url('/Content/Images/bg-resource.svg') no-repeat 100% 50% / 48% 100%, var(--tb-soft);
    /*padding: 2.6rem 0 3rem;*/
}

.tbump-home .tbump-tabs {
    display: flex;
    gap: 2.2rem;
    justify-content: center;
    align-items: center;
    margin: .2rem 0 1.4rem;
}

    .tbump-home .tbump-tabs a {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        color: #8a97a3;
        font-weight: 700;
        font-size: 1.05rem;
        text-decoration: none;
    }

        .tbump-home .tbump-tabs a.active {
            color: var(--tb-blue-deep);
        }

    .tbump-home .tbump-tabs .plus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border: 1px solid #cdd6e0;
        border-radius: 6px;
        color: #9aa6b2;
        font-weight: 700;
    }

.tbump-home .tbump-resources::before {
    display: block;
    text-align: center;
    font-weight: 900;
    color: var(--tb-blue-deep);
    font-size: 1.7rem;
    margin-bottom: 1.3rem;
}

.tbump-home .tbump-resources .lgw-bib-grid {
    background: #eef2f7;
    border-radius: 16px;
    padding: 1rem 1.2rem;
    position: relative;
}

.tbump-home .tbump-resources .catalog-scroller {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .tbump-home .tbump-resources .catalog-scroller .card-body {
        background: transparent;
        padding: 0;
        margin-top: .6rem;
    }

@media (min-width: 992px) {
    .tbump-home .tbump-resources .lgw-bib-grid::before {
        content: "";
        position: absolute;
        left: 1.4rem;
        right: 1.4rem;
        bottom: calc(1.2rem + 54px);
        height: 40px;
        background: url('/Content/Images/shelf.png') 50%/100% 100% no-repeat;
        z-index: 1;
        pointer-events: none;
    }

    .tbump-home .tbump-resources .catalog-scroller .card-body {
        margin-top: 44px;
        height: 50px;
        overflow: hidden;
    }
}

.tbump-home .tbump-resources .catalog-thumb-wrap,
.tbump-home .tbump-resources .catalog-thumb-wrap--fallback,
.tbump-home .tbump-resources .catalog-thumb-img {
    background: transparent !important;
    padding: 0 !important;
}

.tbump-home .tbump-resources .catalog-thumb-wrap--fallback {
    background: linear-gradient(180deg,#fbfcfe,#eef2f7) !important;
    border: 1px solid rgba(20,63,140,.08);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbump-home .tbump-resources .catalog-icon-img {
    width: 56%;
    height: 56%;
    opacity: .85;
}

.tbump-home .tbump-resources .catalog-thumb-img {
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0,0,0,.14);
}

.tbump-home .tbump-resources .catalog-scroller img {
    border-radius: 2px;
}

.tbump-home .tbump-resources .lgw-bib-col {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.tbump-home .tbump-resources .card-title {
    text-align: center;
    line-height: 21px;
    margin-bottom: 8px !important;
}

.tbump-home .tbump-resources .catalog-title-text {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tbump-home .tbump-resources .lgw-card-header {
    display: none;
}

.tbump-home .tbump-resources .lgw-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.tbump-home .tbump-resources .lgw-card-body {
    padding: 0;
}

/* =========================================================
   PHASE 8 — FLOATING (scrollspy phải + chat + back-to-top)
   Tương tự Phase 3: markup nằm ngoài phạm vi refactor lần này (Default.aspx), giữ nguyên.
   Có thể rút gọn thêm bằng utility "position-fixed rounded-circle shadow d-flex align-items-center
   justify-content-center" khi sửa markup — chỉ giữ transition/opacity riêng ở CSS.
   ========================================================= */
.tbump-home .tbump-sectionnav {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    display: flex;
    flex-direction: column;
    gap: .85rem;
/*    tạm thời ẩn*/
    display: none; 
}

    .tbump-home .tbump-sectionnav a {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .55rem;
        text-decoration: none;
        color: #8a97a3;
        font-size: .8rem;
        font-weight: 600;
    }

        .tbump-home .tbump-sectionnav a .lbl {
            background: rgba(255,255,255,.92);
            box-shadow: 0 2px 8px rgba(20,63,140,.12);
            padding: .16rem .6rem;
            border-radius: 20px;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(8px);
            transition: opacity .18s ease, transform .18s ease;
            pointer-events: none;
        }

        .tbump-home .tbump-sectionnav a:hover .lbl,
        .tbump-home .tbump-sectionnav a.on .lbl {
            opacity: 1;
            transform: translateX(0);
        }

        .tbump-home .tbump-sectionnav a .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid #c2ccd6;
            background: #fff;
            flex: none;
            transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }

        .tbump-home .tbump-sectionnav a:hover .dot {
            border-color: var(--tb-blue);
        }

        .tbump-home .tbump-sectionnav a.on {
            color: var(--tb-blue-deep);
        }

            .tbump-home .tbump-sectionnav a.on .dot {
                border-color: var(--tb-gold);
                background: var(--tb-gold);
                box-shadow: 0 0 0 4px rgba(246,180,0,.22);
            }

@media (max-width: 991.98px) {
    .tbump-home .tbump-sectionnav {
        display: none;
    }
}

.tbump-home .tbump-fab {
    position: fixed;
    right: 24px;
    z-index: 45;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.26);
    text-decoration: none;
    transition: transform .15s ease, opacity .2s ease, visibility .2s ease;
}

    .tbump-home .tbump-fab:hover {
        transform: translateY(-3px);
    }

    .tbump-home .tbump-fab svg {
        width: 24px;
        height: 24px;
    }

.tbump-home .tbump-chatfab {
    bottom: 88px;
    background: var(--tb-navy,#16236e);
    color: #fff;
}

.tbump-home .tbump-totop {
    bottom: 24px;
    background: #fff;
    color: var(--tb-blue-deep,#143f8c);
    border: 1px solid #dbe3ec;
    opacity: 0;
    visibility: hidden;
}

    .tbump-home .tbump-totop.show {
        opacity: 1;
        visibility: visible;
    }

@media (max-width: 575.98px) {
    .tbump-home .tbump-fab {
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .tbump-home .tbump-chatfab {
        bottom: 78px;
    }
}