/* =========================================================
   NTU Archives Theme - Layout & Components
   - Palette: Orange / Classic Gold-Brown
   - Bootstrap 5 compatible
   - Clean, grouped, and production-ready
   ========================================================= */

/* ---------------------------------------------------------
   1. COLOR SYSTEM
   --------------------------------------------------------- */

:root {
    /* Orange scale (Bootstrap-like) */
    --orange-100: #ffe5cc;
    --orange-200: #ffcc99;
    --orange-300: #ffb366;
    --orange-400: #ff9933;
    --orange-500: #fd7e14; /* Bootstrap orange */
    --orange-600: #cc6510;
    --orange-700: #994c0c;
    --orange-800: #663308;
    --orange-900: #331904;
    --orange: var(--orange-500);
    /* Archive “classic” accents */
    --archive-gold-soft: #FAF6EA; /* trắng ngà */
    --archive-gold: #D9C180;
    --archive-gold-deep: #8B6F3D;
    --archive-brown: #705B2E;
    --archive-brown-dark: #3D2A14;
    /* Text */
    --text-light: #FAF6EA;
    --text-muted-archive: #E0D6B8;
    /* Z-index cho các phần sticky (navbar, header…) */
    --z-sticky: 1000;
}

/* Background utilities */
.bg-header {
    background-color: var(--orange-600) !important;
}

.bg-body {
    background-color: var(--orange-100) !important;
}

/* Footer dùng tông nâu cam đậm */
.bg-footer {
    border-top: 1px solid rgba(112, 91, 46, 0.4);
    background-color: var(--orange-800);
    color: var(--archive-gold-soft);
}

/* Text utilities */
.text-orange {
    color: var(--orange) !important;
}

/* Border utilities */
.border-orange {
    border-color: var(--orange) !important;
}

/* Hover helpers */
.hover-orange:hover {
    background-color: var(--orange-500) !important;
    color: #fff !important;
}

.hover-orange-700:hover {
    background-color: var(--orange-600) !important;
    color: #fff !important;
}

/* Footer specifics */
.bg-footer h5,
.bg-footer h6 {
    color: #F5EED2;
}

.bg-footer a {
    color: #F5EED2;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .bg-footer a:hover {
        color: var(--archive-gold);
    }

.bg-footer small,
.bg-footer .text-muted {
    color: var(--text-muted-archive);
}

.container-footer {
    color: #fff;
}

.mail-phone-style {
    color: #fff !important;
}

/* ---------------------------------------------------------
   2. TYPOGRAPHY & BASE LAYOUT
   --------------------------------------------------------- */

/* @font-face placeholder (nếu cần thêm font tuỳ chỉnh) */
@font-face {
    /* 
    font-family: 'Roboto';
    src: url('/fonts/Roboto/Roboto-Black.ttf') format('truetype');
    */
}

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.4rem;
}

/*.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}*/

/* Sticky helper (dùng cho bất kỳ khối nào cần sticky top) */
.fixed-element {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1000;
}
/*--------------------------------------------------
    For ASP.NET FORM Validator BS 5 
    Ẩn khi không cần thiết ví dụ:
                            <asp:RequiredFieldValidator ID="UserNameRequired"
                            runat="server"
                            ControlToValidate="UserName"
                            ValidationGroup="LoginGroup"
                            Display="Dynamic"
                            CssClass="invalid-feedback"
                            ErrorMessage="<%$ Resources:strings, UserNameRequired %>" />
----------------------------------------------------*/
.invalid-feedback {
    display: none;
}

input.input-validation-error + .invalid-feedback {
    display: block;
}

/* ---------------------------------------------------------
   3. HEADER TOP BAR
   --------------------------------------------------------- */
.header-top-bar {
    background-color: var(--orange-600);
    padding-top: 0;
}

    .header-top-bar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap; /* quan trọng để không vỡ dòng logo + utility */
    }

/* Ngôn ngữ / cờ */
.language-flag img {
    width: 26px;
    height: auto;
    opacity: 0.6;
    filter: saturate(70%) brightness(95%);
    transition: all 0.2s ease;
    border-radius: 2px;
}

    .language-flag img:hover {
        opacity: 0.9;
        filter: saturate(100%) brightness(100%);
        transform: scale(1.05);
    }

/* Nút chuyển cờ dạng text */
.btn-flag {
    text-decoration: underline;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

    .btn-flag:hover {
        color: #fff !important;
        outline: none;
        border: none;
        box-shadow: none;
    }

/* ---------------------------------------------------------
   4. NAVBAR & TOP MENU
   --------------------------------------------------------- */

.container-navbar {
    background-color: var(--orange-800);
}

/* Dropdown nổi trên sticky + bám sát nút, không khe hở – CHỈ desktop */
@media (min-width: 992px) {
    .container-navbar .dropdown-menu {
        z-index: calc(var(--z-sticky, 1000) + 10);
        margin-top: 0 !important;
        top: 100% !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
        border: 1px solid rgba(0, 0, 0, .08);
    }
}


    /* 4.1 Brand hiển thị khác nhau theo kích thước màn hình */
    .container-navbar .navbar .navbar-brand {
        display: none;
    }

/* Mobile: brand trong navbar */
@media (max-width: 576px) {
    .container-navbar .navbar .navbar-brand {
        display: block;
    }

    .header-top-bar .navbar-brand {
        display: none;
    }
}

/* 4.2 Nav items & dropdowns */

.main-menu .navbar-nav {
    text-align: center;
}

.navbar-nav a {
    font-size: 1em;
    font-weight: 550;
}

.nav-item a {
    font-size: 16px !important;
    text-transform: uppercase;
    text-decoration: none;
}
/* Giảm padding dưới để không tạo khoảng hở giữa text và dropdown */
.navbar-nav .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.4rem; /* đừng để quá dày, tránh tạo gap */
}

/* Dropdown items */
.navbar-nav .dropdown-menu > li a {
    font-size: 1em;
    font-weight: 400;
    transition: all 0.2s ease;
}

    /* Hover */
    .navbar-nav .dropdown-menu > li a:hover {
        color: var(--archive-gold-deep); /* Nâu vàng sáng - nổi nhẹ */
        background-color: rgba(255, 255, 255, 0.08);
    }

    /* Active / clicked */
    .navbar-nav .dropdown-menu > li a:active,
    .navbar-nav .dropdown-menu > li.active > a {
        background-color: var(--archive-brown);
        color: var(--archive-gold-soft);
    }

/* Divider */
.navbar-nav .dropdown-menu .dropdown-divider {
    border-color: rgba(138, 109, 59, 0.4); /* #8A6D3B66 */
}

    .navbar-nav .dropdown-menu .dropdown-divider:last-child {
        display: none;
    }

/* Khoảng cách nav-item */
.nav-item {
    transition: 0.4s;
}

/* 4.3 Responsive padding cho menu */

@media (max-width: 1199px) {
    .nav-item-navbar {
        padding-left: 0;
        padding-right: 0;
    }

    .navbar-nav .nav-item.nav-item-navbar > div,
    .navbar-nav .nav-item > a {
        padding: 0 10px;
    }
}

@media (min-width: 1200px) {
    .nav-item-navbar,
    .nav-item > .nav-link {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* 4.4 Toggler & dropdown định hướng */

.btn-dropdown {
    padding-left: 4px;
    padding-right: 0;
}

.navbar-toggler {
    padding: 1px 5px;
    font-size: 15px;
    line-height: 0.3;
}

.navbar-light .navbar-nav .dropdown:focus,
.navbar-light .navbar-nav .dropdown:hover {
    cursor: pointer;
}

/* Định dạng menu xổ xuống full-left (nếu cần) */
.dropdown-menu-navbar {
    border-radius: 0;
    left: 0;
}

/* 4.5 Hover dropdown – CHỈ DESKTOP ≥ 992px */
@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
}


/* Mobile dropdown: hiển thị như danh sách dọc, full width */
@media (max-width: 991.98px) {
    .container-navbar .navbar-collapse .dropdown-menu {
        position: static;
        float: none;
        transform: none !important;
        box-shadow: none;
        border: 0;
        margin: 0;
        width: 100%;
    }

    .container-navbar .navbar-collapse .dropdown-item {
        padding: 0.5rem 1rem;
        font-size: 0.95rem;
    }
}



/* ---------------------------------------------------------
   5. NAVBAR UTILITY (Cart + Login)
   --------------------------------------------------------- */

/* Chỉ style tầng ngoài utility (không lan vào dropdown-item) */
.container-navbar .navbar .navbar-utility > a,
.container-navbar .navbar .navbar-utility > .btn,
.container-navbar .navbar .navbar-utility > .dropdown > a,
.container-navbar .navbar .navbar-utility > .dropdown > .btn {
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    background-color: transparent;
}

    .container-navbar .navbar .navbar-utility > a:hover,
    .container-navbar .navbar .navbar-utility > .btn:hover,
    .container-navbar .navbar .navbar-utility > .dropdown > a:hover,
    .container-navbar .navbar .navbar-utility > .dropdown > .btn:hover {
        border-color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.12);
    }

/* Badge giỏ hàng */
.container-navbar .navbar .cart-btn {
    position: relative;
}

.container-navbar .navbar .cart-badge {
    position: absolute;
    top: 0;
    inset-inline-start: 100%;
    transform: translate(-50%, -40%);
    display: inline-block;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    font-size: 0.7rem;
    line-height: 1.1rem;
    text-align: center;
    background: #dc3545;
    color: #fff;
}

/* Icon utility cỡ vừa */
.container-navbar .navbar .navbar-utility i {
    font-size: 1rem;
    line-height: 1;
}

/* ---------------------------------------------------------
   6. ICON BAR (sidebar icons)
   --------------------------------------------------------- */

.icon-bar {
    background-color: #311562;
    height: 100%;
    align-items: center;
    font-size: 24px;
    display: flex;
}

    .icon-bar a {
        display: block;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        transition: all 0.3s ease;
        color: #fff;
        font-size: 18px;
        height: 100%;
        display: flex;
        text-decoration: none;
        align-items: center;
        justify-content: center;
    }

        .icon-bar a:hover {
            background-color: #1b483a;
        }

/* icon plus/minus tree view padding */
.fa.fa-plus:before,
.fa.fa-minus:before {
    padding: 10px;
}




/* ---------------------------------------------------------
   7. SMALL UTILITIES
   --------------------------------------------------------- */

.separator {
    margin: 0 5px;
    transform: translateY(3px);
}

.search-input {
    width: 250px;
}

.btn-circle {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    padding: 0;
    line-height: 30%;
}

/* Hover màu nhấn chính */
.hover-primary:hover {
    transition: all 0.3s ease;
    background-color: var(--archive-gold-deep);
    color: var(--archive-gold-soft);
}
/* =========================================================
   LGW BUTTON SYSTEM (NTU Archives UI)
   ========================================================= */

/* 1) CAM THƯƠNG HIỆU – nút chính */
.lgw-btn-primary {
    background-color: var(--orange-600);
    border-color: var(--orange-700);
    color: #fff;
    font-weight: 600;
    border-radius: 0.45rem;
    transition: all 0.2s ease-in-out;
}

    .lgw-btn-primary:hover {
        background-color: var(--orange-700);
        border-color: var(--orange-800);
        box-shadow: 0 0 0 0.18rem rgba(255,140,0,0.35);
    }

/* 2) NÚT HOÀNG KIM – sang trọng */
.lgw-btn-gold {
    background: linear-gradient(135deg, #D9C180, #BFA060);
    border: 1px solid #A68B44;
    color: #3D2A14;
    font-weight: 600;
    border-radius: 0.45rem;
    transition: all 0.25s ease;
}

    .lgw-btn-gold:hover {
        background: linear-gradient(135deg, #E8D49A, #C9A96C);
        border-color: #8B6F3D;
        box-shadow: 0 0 0 0.18rem rgba(217,193,128,0.35);
    }

/* 3) NÚT VIỀN CAM – nền trong suốt */
.lgw-btn-outline {
    background: transparent;
    border: 2px solid var(--orange-600);
    color: var(--orange-700);
    font-weight: 600;
    border-radius: 0.45rem;
    transition: all 0.25s ease;
}

    .lgw-btn-outline:hover {
        background: var(--orange-600);
        color: #fff;
        box-shadow: 0 0 0 0.18rem rgba(255,157,67,0.35);
    }

/* 4) NÚT TÔNG NÂU ĐẬM – dùng trong nền vàng/ sáng */
.lgw-btn-dark {
    background: var(--archive-brown-dark);
    border: 1px solid var(--archive-brown);
    color: #fff;
    font-weight: 600;
    border-radius: 0.45rem;
    transition: all 0.25s ease;
}

    .lgw-btn-dark:hover {
        background: #2b1b0c;
        border-color: #3D2A14;
        box-shadow: 0 0 0 0.18rem rgba(61,42,20,0.35);
    }

/* 5) NÚT NỀN SÁNG – dùng trên nền ảnh tối hoặc gradient */
.lgw-btn-light {
    background-color: #FAF6EA;
    border: 1px solid #D9C180;
    color: #3D2A14;
    font-weight: 600;
    border-radius: 0.45rem;
    transition: all 0.2s ease;
}

    .lgw-btn-light:hover {
        background-color: #FFF8E4;
        border-color: #C9B270;
        color: #3D2A14;
        box-shadow: 0 0 0 0.18rem rgba(217,193,128,0.35);
    }

/* 6) NÚT TRẮNG – tinh gọn, hiện đại */
.lgw-btn-white {
    background-color: #fff;
    border: 1px solid var(--orange-600);
    color: var(--orange-700);
    font-weight: 600;
    border-radius: 0.45rem;
    transition: all 0.2s ease;
}

    .lgw-btn-white:hover {
        background-color: var(--orange-600);
        color: #fff;
    }



/* ---------------------------------------------------------
   7.1 WEBPART ZONES (lgw-zone*)
   --------------------------------------------------------- */

/* Khối zone bao ngoài 1 cụm webparts */
.lgw-zone {
    margin-block: 2rem;
    padding: 1.5rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Biến thể “glass” dùng nhiều ở trang chủ */
.lgw-zone--glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Zone nhấn mạnh (ví dụ khu catalog) */
.lgw-zone--accent {
    border-color: rgba(255, 255, 255, 0.25);
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02) );
}


/* ---------------------------------------------------------
   7.3 WEBPART ZONE WITH IMAGE BACKGROUND (lgw-zone--image)
   --------------------------------------------------------- */

/* Zone */
.lgw-zone--image {
    position: relative;
    border-radius: 0;
    padding-top: 3rem;
    padding-bottom: 3rem;
    overflow: hidden;
    z-index: 0; /* tạo stacking context */
}

    /* Ảnh nền + blur */
    .lgw-zone--image::before {
        content: "";
        position: absolute;
        inset: 0;
/*        background-size: cover;
        background-position: center;
        background-repeat: repeat;*/
        /* làm mờ + làm dịu */
/*        filter: blur(1px);*/
        opacity: 0.18;
        /* màu nền trung tính, sẽ blend với ảnh */
        background-color: rgba(255, 255, 255, 0.7);
        z-index: 0;
    }

    /* Nội dung luôn nằm trên */
    .lgw-zone--image > * {
        position: relative;
        z-index: 1;
    }

    /* ----------------- BIẾN THỂ ẢNH ----------------- */

    /* Ảnh nền số 1 */
    .lgw-zone--image.image-law::before {
        background-image: url('/Content/Images/zone-bg-law.jpg');
    }

    /* Ảnh nền số 2 */
    .lgw-zone--image.image-archive-gpt::before {
        background-image: url('/Content/Images/zone-bg-archive-gpt.png');
    }

    /* Ảnh nền số 3 */
    .lgw-zone--image.image-archive-gemini::before {
        background-image: url('/Content/Images/zone-bg-archive-gemini.jpg');
    }

    /* ----------------- BIẾN THỂ OVERLAY ----------------- */

    /* Overlay sáng: chỉ đổi màu, KHÔNG ghi đè ảnh */
    .lgw-zone--image.lgw-image-light::before {
        background-color: rgba(255, 255, 255, 0.35);
    }

    /* Overlay vàng hoàng gia: chỉ thêm màu vàng */
    .lgw-zone--image.lgw-image-gold::before {
        background-color: rgba(217, 193, 128, 0.35);
    }

    /* Overlay đậm */
    .lgw-zone--image.lgw-image-dark::before {
        background-color: rgba(0, 0, 0, 0.55);
    }




/* ---------------------------------------------------------
   7.2 WEBPART CARDS (lgw-card*)
   --------------------------------------------------------- */

/* Khối card chung cho mọi WebPart */
.lgw-card {
    background-color: #fff;    
    border-radius: 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* CLIP mọi thứ theo bo góc card */
}

/* Header của webpart */
.lgw-card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--archive-brown-dark);
    background: linear-gradient( 135deg, rgba(255, 255, 255, 0.8), rgba(250, 246, 234, 0.9) );    
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

    /* Icon trong header (nếu dùng HeaderIconCss) */
    .lgw-card-header i {
        margin-right: 0.5rem;
        font-size: 1.1rem;
        color: var(--orange-600);
    }

/* Body của webpart */
.lgw-card-body {
    padding: 1rem 1rem 1.1rem;
    flex: 1 1 auto;
}

.lgw-card-footer {
    padding: 0.5rem 1rem 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    background-color: rgba(250, 246, 234, 0.8);
    font-size: 0.9rem;
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}

/* Biến thể nhấn mạnh (áp thêm vào CardClass nếu cần) */
.lgw-card--accent {
    border-color: var(--archive-gold);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.lgw-card--glass {
    background: rgba(255, 255, 255, 0.88);    
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lgw-card--glass-deep {
    background-color: transparent; /* để lộ pattern phía sau */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* ---------------------------------------------------------
   8. ANIMATIONS (safe & accessible)
   --------------------------------------------------------- */
@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Lớp dùng chung cho animation */
.animate {
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

/* Slide-in từ dưới lên */
.slideIn {
    animation-name: slideIn;
}

/* Tôn trọng prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   LegoWeb CMS – Pagination Component
   Prefix: lgw-pagination
   Dùng chung cho mọi màn hình phân trang trong hệ thống
   ========================================================= */

.lgw-pagination {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

    /* Bootstrap pagination wrapper */
    .lgw-pagination .pagination {
        font-size: 0.85rem;
        gap: 0.1rem;
    }

    /* Nút trang bình thường */
    .lgw-pagination .page-link {
        min-width: 2rem;
        padding: 0.25rem 0.55rem;
        border-radius: 0.45rem;
        border: 1px solid transparent;
        background-color: transparent;
        color: var(--lgw-arch-text, #3d2a14); /* màu nâu đặc trưng Archives */
        box-shadow: none;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

        /* Hover */
        .lgw-pagination .page-link:hover {
            background-color: rgba(140, 108, 41, 0.08);
            border-color: rgba(140, 108, 41, 0.25);
            color: var(--lgw-arch-text, #3d2a14);
        }

    /* Active (trang hiện tại) */
    .lgw-pagination .page-item.active .page-link,
    .lgw-pagination .page-item.active .page-link:hover {
        background-color: var(--lgw-arch-gold, #8c6c29);
        border-color: var(--lgw-arch-gold, #8c6c29);
        color: #fff;
    }

    /* Disabled (of 2800, hoặc button Off) */
    .lgw-pagination .page-item.disabled .page-link {
        border: none;
        background-color: transparent;
        color: rgba(0, 0, 0, 0.35);
    }

    /* Icons: << < > >> */
    .lgw-pagination .page-link .fa {
        font-size: 0.75rem;
        line-height: 1;
    }







/*---------------------------------------------------------------------
  lgw-: LEGOWEB DISPLAY CONTENT Styles nội dung bên trong các webparts của LegoWeb ở đây
-----------------------------------------*/
/*lgw-ContentTab01Styles - ContentTab01 WebPart (NTU Archives) */

/* Vùng chứa toàn bộ tab-content (bên trong WebPart) */
.lgw-content-tabs01 {
    background: #faf3de;
    border-radius: 10px;
    position: relative;
    /* Giới hạn chiều cao, cuộn dọc nếu dài hơn */
    max-height: 785px;
    overflow-y: auto;
}
    /* Làm tab mượt – bỏ đường kẻ dưới nav-tabs */
    .lgw-content-tabs01 .nav-tabs {
        border-bottom: none !important;
    }
        /* Active tab – bỏ border-bottom trắng để khỏi bị gãy */
        .lgw-content-tabs01 .nav-tabs .nav-link.active {
            border-bottom-color: transparent !important;
        }
        .lgw-content-tabs01 .nav-tabs .nav-link {
            border-radius: 0.5rem 0.5rem 0 0; /* bo góc đẹp hơn */
        }
    .lgw-content-tabs01 .tab-content {
        margin-top: 0.5rem;
    }
    .lgw-content-tabs01 .nav-tabs .nav-link {
        padding: 0.75rem 1.25rem;
        font-weight: 600;
        color: #555;
    }

        .lgw-content-tabs01 .nav-tabs .nav-link.active {
            color: #0056b3 !important;
            background-color: #fff !important;
            border-color: #ddd #ddd transparent;
        }

    /* ---------------------------------------------------------
   Tabs của ContentTab01: dùng nền giống header lgw-card
   ------------------------------------------------------ */

    /* Thanh tabs (header) của ContentTab01 */
    .lgw-content-tabs01 .nav-tabs {
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.8), rgba(250, 246, 234, 0.9) ); /* giống .lgw-card-header */
        border-radius: 0.75rem 0.75rem 0 0;
        border-bottom: none; /* bỏ đường gạch xám mặc định */
        margin-bottom: 0;
    }

        /* Từng tab */
        .lgw-content-tabs01 .nav-tabs .nav-link {
            padding: 0.75rem 1.25rem;
            border: none;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--archive-brown-dark);
        }

            /* Tab active */
            .lgw-content-tabs01 .nav-tabs .nav-link.active {
                background-color: transparent; /* dùng chung nền gradient */
                color: #0056b3; /* hoặc var(--archive-blue) nếu bạn có biến này */
            }

    /* Tạo khoảng cách nhẹ giữa tabs và nội dung */
    .lgw-content-tabs01 .tab-content {
        margin-top: 0.25rem;
    }

/* Tinh chỉnh max-height theo breakpoint nếu muốn */
@media (min-width: 1000px) and (max-width: 1199px) {
    .lgw-content-tabs01 {
        max-height: 680px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .lgw-content-tabs01 {
        max-height: 735px;
    }
}

@media (min-width: 1400px) {
    .lgw-content-tabs01 {
        max-height: 785px;
    }
}

/* Mỗi item trong danh sách Tab01 - li.list-group-item */
.list-group-tab01style {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Link tiêu đề bài viết */
.a-custom {
    display: inline-block; /* mobile: inline-block, trên md sẽ là block */
    color: #222;
    text-decoration: none;
}

    .a-custom:hover {
        color: var(--orange-700);
        text-decoration: underline;
    }

@media (min-width: 768px) {
    .a-custom {
        display: block;
    }
}

/* Ảnh thumb trong Tab01 */
.figure-custom {
    width: 100%;
    height: 100px; /* cố định chiều cao để layout đồng đều */
    object-fit: cover; /* crop cho đẹp, không méo ảnh */
    display: block;
}

/* Đoạn tóm tắt Summary bên dưới tiêu đề */
.list-group-tab01style .summary {
    font-size: 0.9rem;
    color: #555;
}

/*LegoWeb Calendar*/
/* Hàng tiêu đề thứ trong tuần (T2–T6) */
.mini-calendar-table .CalendarWeekdayName {
    background-color: #f8f9fa; /* xám nhạt chuẩn BS */
    font-weight: 600;
}

/* Header cuối tuần (T7, CN) – CCCalendar sẽ gán class CalendarWeekendName */
.mini-calendar-table .CalendarWeekendName {
    background-color: #fff3cd; /* vàng nhạt kiểu bg-warning */
    color: #b02a37; /* đỏ đậm một chút */
    font-weight: 600;
}

/* Ô ngày thường */
.mini-calendar-table .CalendarDay,
.mini-calendar-table .CalendarOtherMonthDay {
    background-color: #ffffff;
}

/* Ô cuối tuần T7, CN (cột) */
.mini-calendar-table .CalendarWeekend,
.mini-calendar-table .CalendarOtherMonthWeekend {
    background-color: #fff8e1; /* vàng rất nhẹ cho cuối tuần */
}

/* Hôm nay – nổi bật hơn một chút */
.mini-calendar-table .CalendarToday,
.mini-calendar-table .CalendarWeekendToday {
    background-color: #ffe9b0;
    border: 1px solid #ffc107;
    font-weight: 600;
}

/* Ngày cuối tuần hôm nay (hôm nay rơi vào T7/CN) */
.mini-calendar-table .CalendarWeekendToday {
    color: #b02a37;
}

/*----------------------------------------
    LegoWeb - ContentBrowser.ascx
-----------------------------------------*/
.lgw-content-browser__nav {
    font-size: .9rem;
}

.lgw-content-browser__content {
    /* Bài viết chính – để trống cho XSLT chủ động style.
       Có thể thêm padding-top nếu muốn. */
}

.lgw-content-browser__related {
    font-size: .9rem;
}

.lgw-content-browser__related-list > * + * {
    margin-top: .5rem; /* giữa các item liên quan */
}

/* Mỗi item liên quan */
.lgw-related-item:last-child {
    border-bottom: none;
}

.lgw-related-item__icon {
    /* Nếu bạn chưa dùng Bootstrap Icons
       có thể map sang font khác ở đây */
    font-size: 0.8rem;
}

.lgw-related-item__link {
    max-width: 100%;
    display: inline-block;
}
    .lgw-related-item__link:hover {
        color: #8C6C29; /* vàng kim của bạn */
    }



/* Khối bài viết chính */
.lgw-article {
    /* nền kiểu “giấy cũ” nhẹ */
    background-color: #FAF9F4;
    padding: 1.5rem;
    border-radius: 0.75rem;
}

/* Đường kẻ header / footer */
.lgw-article__header,
.lgw-article__footer,
.lgw-article__links {
    border-color: #E0D4B8;
}

/* Tiêu đề chính */
.lgw-article__heading {
    color: #4A3B1A; /* nâu đậm */
}

/* Subtitle / tóm tắt */
.lgw-article__subtitle {
    color: #7A6B46;
}

/* Nội dung */
.lgw-article__content {
    line-height: 1.75;
    color: #3a3a3a;
}

/* Link bài liên quan + share */
.lgw-article__link,
.lgw-article__share-btn {
    color: #5C4A1C;
}

    .lgw-article__link:hover,
    .lgw-article__share-btn:hover {
        color: #8C6C29; /* vàng kim NTU Archives */
    }

/* Nút chia sẻ */
.lgw-article__share-btn--facebook {
    border-color: transparent;
    background-color: #0d6efd0d;
}

.lgw-article__share-btn--link {
    border-color: transparent;
    background-color: #8C6C2914;
}








/*---------------------------------------------------------------------
  kps-: Styles nội dung bên trong các webparts của KIPOS(X) ở đây
-----------------------------------------------------------------------*/
/*DmdCollection.ascx: Tạo mới không ổn giữ lại treecontrol và dùng style từ Olympia của Hiệp */
/*=== Dropdown (collection-tree) ==================*/
/*---------------------------------------------------------------------
  kps-collection-tree (NTU Archives palette)
-----------------------------------------------------------------------*/
/* Vùng tree tổng thể */
.kps-collection-tree {
    background-color:transparent; 
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
}

    /* Bảng cấp 1, cấp 2, cấp 3 */
    .kps-collection-tree > div > table,
    .kps-collection-tree > div > div > table,
    .kps-collection-tree > div > div > div > table {
        width: 100%;
        transition: 0.3s;
        padding-top: 8px;
        padding-bottom: 8px;
        cursor: pointer;
        border-width: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; /* line rất nhẹ */
        background-color: transparent;
    }

        /* Link ở các cấp */
        .kps-collection-tree > div > table a,
        .kps-collection-tree > div > div > table a {
            color: var(--archive-brown-dark); /* nâu đậm, đồng bộ heading */
            transition: color 0.2s ease;
            align-items: center;
            white-space: nowrap;
            display: flex;
        }

    /* Cột icon (+/-) */
    .kps-collection-tree table tbody tr > td:first-child {
        width: 20px;
    }

    /* Cột text */
    .kps-collection-tree table tbody tr > td:nth-child(2) a {
        display: block;
    }

    /* Ô cuối cùng (hiển thị text dài) */
    .kps-collection-tree table tbody tr > td:last-child {
        display: block;
        padding-left: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

        .kps-collection-tree table tbody tr > td:last-child a {
            color: var(--archive-brown-dark);
            white-space: pre-wrap;
        }

            /* Hover link: cam đậm */
            .kps-collection-tree table tbody tr > td:last-child a:hover {
                color: var(--orange-700);
            }

    /* Không tô màu nền cứng cho container con */
    .kps-collection-tree > div > div {
        background-color: transparent;
    }

    /* Hover hàng – cấp 1: vàng ngà nhẹ */
    .kps-collection-tree > div > table:hover {
        border-radius: 0.45rem;
        background-color: rgba(250, 246, 234, 0.8); /* gần archive-gold-soft */
    }

    /* Hover hàng – cấp 2, 3: vàng hoàng kim nhấn hơn một chút */
    .kps-collection-tree > div > div > table:hover,
    .kps-collection-tree > div > div > div > table:hover {
        background-color: rgba(217, 193, 128, 0.35); /* archive-gold */
    }

    /* Padding hàng cấp 1 */
    .kps-collection-tree > div > table > tbody > tr > td {
        padding-left: 0;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Text dài trong cấp 3 vẫn được xuống dòng */
    .kps-collection-tree > div > div > div > table > tbody > tr > td {
        white-space: pre-wrap !important;
    }

    /* Icon + / - trong tree: dùng cam thương hiệu */
    .kps-collection-tree .fa.fa-plus:before,
    .kps-collection-tree .fa.fa-minus:before {
        padding: 6px;
        color: var(--orange-600);
    }

/* ============================
   Carousel scroller – thumbs
   ============================ */

/* Ảnh thật 856: full chiều ngang, crop đẹp */
.carousel-scroller .kps-carousel-thumb-img {
    display: block;
    width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 0.5rem 0.5rem 0 0; /* bo góc trên giống card-img-top */
}

/* ICON đại diện: thu nhỏ + có khoảng đệm đều xung quanh */
.carousel-scroller .kps-carousel-icon-img {
    display: block;
    width: 120px;
    height: 120px;
    /* khoảng cách đều xung quanh icon */
    margin: 14px auto 6px; /* auto để căn giữa ngang */
    padding: 10px;
    box-sizing: content-box;
    border-radius: 0.9rem;
    background: rgba(0, 0, 0, 0.02);
    border: 0px solid rgba(140, 108, 41, 0.15);
    object-fit: contain; /* không méo icon */
}

/* Nếu muốn hover icon nổi nhẹ lên */
.carousel-scroller a:hover .kps-carousel-icon-img {
    background: rgba(217, 193, 128, 0.12); /* vàng kim nhạt */
    border-color: rgba(140, 108, 41, 0.35);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}


/*-----------------------------------
    BrowseByCollection.ascx
------------------------------------*/

:root {
    --ntu-arch-card-bg1: #f5f3ed;
    --ntu-arch-card-bg2: #e9e4d7;
    --ntu-arch-card-bg-hover1: #f2eee6;
    --ntu-arch-card-bg-hover2: #e4ddcc;
}

/* CARD BROWSE – flat, nền xám ấm */
.kps-browse-card {
    position: relative; /* để sau này nếu có stretched-link thì cũng không tràn ra ngoài */
    background: linear-gradient(135deg, var(--ntu-arch-card-bg1), var(--ntu-arch-card-bg2));
    border-radius: 0.75rem;
    border: 1px solid rgba(140, 108, 41, 0.18);
    box-shadow: none;
    padding: 0.6rem 0.8rem;
    transition: background 0.18s ease-out, border-color 0.18s ease-out, transform 0.12s ease-out;
}

    .kps-browse-card .card-body {
        padding: 0;
    }

    .kps-browse-card:hover {
        background: linear-gradient(135deg, var(--ntu-arch-card-bg-hover1), var(--ntu-arch-card-bg-hover2));
        border-color: rgba(140, 108, 41, 0.45);
        transform: translateY(-1px);
    }

/* Title */
.kps-card-title-link {
    color: var(--archive-brown-dark);
    text-decoration: none;
}

    .kps-card-title-link:hover {
        color: var(--archive-gold-deep);
        text-decoration: underline;
    }

.kps-browse-card,
.kps-browse-card p,
.kps-browse-card span {
    color: var(--archive-brown);
}

/* ===============================================
   THUMBNAIL LEFT – NTU Archives Card
   =============================================== */

/* Ảnh thật (có 856) – luôn cố định 60px chiều ngang */
.kps-card-thumb-left {
    width: 80px;
    height: 110px; /* hình sách thường đứng */
    object-fit: cover; /* cắt nhẹ cho đẹp, không méo */
    border-radius: 6px;
    background-color: #f3f0e8; /* nền xám ấm để tránh khung trống */
    display: block;
}

/* Icon khi không có ảnh */
.kps-card-thumb-left-icon {
    width: 80px;
    height: 80px;
    object-fit: contain; /* icon phải hiển thị đủ */
    padding: 6px; /* icon nhìn thoáng */
    border-radius: 6px;
    background-color: #f3f0e8;
}

/* Container ô trái trong row */
.kps-browse-card .col-auto {
    padding-right: 0.75rem;
}

/* Card tổng thể cho cân */
.kps-browse-card {
    gap: 0.75rem;
}

    /* Khi hover card → border vàng kim đậm hơn (đã có nhưng thêm cho chắc) */
    .kps-browse-card:hover .kps-card-thumb-left,
    .kps-browse-card:hover .kps-card-thumb-left-icon {
        background-color: #ece5d8;
    }

/* Đảm bảo ảnh/ICON không bị tràn */
.kps-card-thumb-left,
.kps-card-thumb-left-icon {
    flex-shrink: 0;
}
/*hiệu ứng bo viền rất nhẹ (0.5px vàng kim):*/
.kps-card-thumb-left,
.kps-card-thumb-left-icon {
    border: 1px solid rgba(140,108,41,0.25); /* vàng kim + alpha */
}


/*-----------------------------------
    DmdInfo.ascx
------------------------------------*/

.kps-bibfull-thumb-wrapper {
    min-width: 120px;
}

.kps-bibfull-thumb {
    max-width: 132px;
    max-height: 180px;
    object-fit: cover;
}

.kps-bibfull-title {
    line-height: 1.3;
}

.kps-bibfull-file-link .icon-download::before {
    /* nếu bạn đang dùng icon font có lớp .icon-download thì giữ;
       không thì bỏ, hoặc thay bằng Font Awesome */
}

.kps-marc-tag-col {
    width: 70px;
}

.kps-marc-tag {
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.kps-marc-value {
    word-break: break-word;
}

.kps-marc-subfield-text {
    white-space: nowrap;
}