:root {
    /* Maroon HANU gần với logo */
    --hanu-maroon-100: #f7e5e8;
    --hanu-maroon-200: #f0cbd3;
    --hanu-maroon-300: #da8a98;
    --hanu-maroon-400: #b93c4f;
    --hanu-maroon-500: #8c111f; /* màu chính header/menu */
    --hanu-maroon-600: #770c19; /* menu, button chính */
    --hanu-maroon-700: #5a0913; /* footer */
    --hanu-maroon-800: #3b050c;
    --hanu-maroon-900: #260309;
    /* Vàng logo HANU */
    --hanu-gold-soft: #fff3cf;
    --hanu-gold: #f1c857; /* accent chính (border, icon, active) */
    --hanu-gold-deep: #c79a29;
    /* Màu dùng riêng cho header & menu */
    --hanu-header-bg: #7a0e18; /* banner/logo – sáng hơn footer một chút */
    --hanu-navbar-bg: #5a0913; /* menu – đậm hơn header, nhạt hơn footer */
    /* Nền & text */
    --hanu-bg-page: #f5f5f7; /* nền trang */
    --hanu-body-top-padding: 0px; /* set 50px if you use fixed-top navbar */
    --hanu-bg-header-light: #b93c4f; /* header trên cùng */
    --hanu-gray-700: #333642;
    --text-light: #ffffff;
    --text-muted-archive: #ced3e0;
    /* Card nền kiểu NTU Archives vẫn giữ – dùng cho box content */
    --ntu-arch-card-bg1: #f5f3ed;
    --ntu-arch-card-bg2: #e9e4d7;
    --ntu-arch-card-bg-hover1: #f2eee6;
    --ntu-arch-card-bg-hover2: #e4ddcc;

    --archive-brown-dark: var(--hanu-maroon-700);
    --archive-brown: var(--hanu-maroon-600);
    --archive-gold: var(--hanu-gold);
    --archive-gold-deep: var(--hanu-gold-deep);
    /* Z-index cho các phần sticky (navbar, header…) */
    --z-sticky: 1000;
}

/* Background utilities (dùng cho banner + body + footer) */
.bg-header {
    background: linear-gradient( 135deg, var(--hanu-maroon-500) 0%, var(--hanu-maroon-600) 45%, var(--hanu-maroon-700) 100% ) !important;
    color: #fff;
}


.bg-body {
    background-color: var(--hanu-bg-page) !important;
}

/* Footer – nền đậm, chữ sáng như Olympia */
.bg-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    background-color: var(--hanu-maroon-800);
    color: #f8f7f3;
}

    .bg-footer h4,
    .bg-footer h5,
    .bg-footer h6 {
        color: var(--hanu-gold-soft);
    }

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

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

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

.container-footer {
    color: #fff;
}

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

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

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

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

/* Hover màu nhấn chính (thay archive-gold-*) */
.hover-primary:hover {
    transition: all 0.3s ease;
    background-color: var(--hanu-gold-deep);
    color: var(--hanu-gold-soft);
}

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

body {
    padding-top: 50px; /* vì navbar fixed-top */
    padding-bottom: 20px;
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.4rem;
    background-color: var(--hanu-bg-page);
    color: var(--hanu-gray-700);
}

/* Sticky helper */
.fixed-element {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: var(--z-sticky);
}

/* ASP.NET validator */
.invalid-feedback {
    display: none;
}

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

/* Tooltip wide for help */
.tooltip {
    --bs-tooltip-max-width: 420px; /* 360–480px tùy bạn */
}

.tooltip-inner {
    text-align: left;
    line-height: 1.45;
}
    .tooltip-inner b {
        color: #8c6c29; /* tone HANU */
    }

    .tooltip-inner i {
        color: #555;
    }



/* ---------------------------------------------------------
   3. HEADER TOP BAR (logo + language)
   --------------------------------------------------------- */

.header-top-bar {
    background-color: var(--hanu-header-bg);
    border-bottom: 2px solid var(--hanu-navbar-bg);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    color: #fff; /* cho text trong header-top-bar dùng trắng */
}
.header-top-bar .navbar-brand{ margin: 0; padding: 0; }
.header-top-bar .navbar-brand .navbar-brand{ margin: 0; padding: 0; }


    .header-top-bar .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap; /* giữ logo + cờ trên 1 dòng */
    }

    /* Logo */
    .header-top-bar .navbar-brand img {
        max-height: 72px;
        width: auto;
    }

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

    .language-flag img:hover {
        opacity: 1;
        transform: scale(1.05);
    }

.btn-flag {
    text-decoration: underline;
    color: var(--hanu-maroon-600);
    outline: none;
    border: none;
    border-radius: 0;
    background: transparent;
}

    .btn-flag:hover {
        color: var(--hanu-maroon-700) !important;
        outline: none;
        border: none;
        box-shadow: none;
    }


/* ========== NAVIGATION (HANU) – HEADER TOP BAR + NAVBAR (Bootstrap 5) ========== */
/*  Notes:
    - BannerNavbar.ascx renders 2 brands: one in .header-top-bar and one inside navbar for mobile.
    - Navbar uses navbar-expand-md (breakpoint 768px), so we switch visibility at md.
    - Multi-level submenu relies on JS toggling `.show` on nested `.dropdown-menu`.
*/

/* ----- TOP BAR visibility (desktop) / NAVBAR brand visibility (mobile) ----- */
.container-navbar .navbar > .navbar-brand { display: none; margin: 0; padding: 0; } /* hide mobile-brand on md+ */
.container-navbar .navbar-collapse-header { display: none; }  /* show only on <md */

@media (max-width: 767.98px){
  .header-top-bar { display: none; } /* hide top bar on mobile */
  .container-navbar .navbar > .navbar-brand { display: flex; align-items: center; }
  .container-navbar .navbar-collapse-header { display: flex; }
}

/* ========== NAVBAR CONTAINER ========== */
.container-navbar{
  background-color: var(--hanu-navbar-bg);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* base colors */
.container-navbar .navbar,
.container-navbar .navbar .nav-link{ color: #fff; }

/* Navbar toggler */
.container-navbar .navbar-toggler{
  padding: .15rem .45rem;
  border-color: rgba(255,255,255,.70);
}
.container-navbar .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(241,200,87,.35); }

/* Navbar brand (mobile) */
.container-navbar .navbar > .navbar-brand .link-logo{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
}
.container-navbar .navbar > .navbar-brand .hanu-logo{ max-height: 42px; width: auto; display: block; }
.container-navbar .navbar > .navbar-brand .lgw-brand-line1{
  font-weight: 700;
  letter-spacing: .02em;
  font-size: .92rem;
  color: #fff;
}
.container-navbar .navbar > .navbar-brand .lgw-brand-line2{
  font-weight: 600;
  font-size: .82rem;
  color: rgba(255,255,255,.85);
}

/* Navbar items container */
.container-navbar .navbar-nav{ text-align: center; }

/* BannerNavbar renders `div.nav-item` inside `ul.navbar-nav` */
.container-navbar .navbar-nav > .nav-item{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ========== ROOT ITEMS (level 0) ========== */
.container-navbar .navbar-nav > .nav-item > .nav-link{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding-top: .75rem;
  padding-bottom: .65rem;
}
.container-navbar .navbar-nav > .nav-item > .nav-link:hover,
.container-navbar .navbar-nav > .nav-item > .nav-link:focus{
  color: var(--hanu-gold-soft);
}
.container-navbar .navbar-nav > .nav-item > .nav-link.active{
  color: var(--hanu-gold);
  border-bottom: 3px solid var(--hanu-gold);
}

/* Split caret (<a class="nav-link dropdown-toggle dropdown-toggle-split">) */
.container-navbar .navbar-nav > .dropdown > a.dropdown-toggle-split{
  padding-inline: .35rem;
}
.container-navbar .navbar-nav > .dropdown > a.dropdown-toggle-split:focus{
  box-shadow: 0 0 0 .2rem rgba(241,200,87,.35);
  border-radius: .5rem;
}

/* ========== DROPDOWN MENUS (level 1+) ========== */
    /* ===== FIX: Dropdown width + position (Desktop) ===== */

    /* đảm bảo dropdown menu neo theo từng <li.dropdown> */
    .container-navbar .navbar-nav > li.dropdown {
        position: relative;
    }

/* dropdown cấp 1: rộng hơn + nằm đúng dưới item */
@media (min-width: 992px) {
    .container-navbar .navbar-nav > li.dropdown > .dropdown-menu {
        top: 100%;
        left: 0;
        margin-top: .35rem;
        /* làm menu đủ rộng để không wrap */
        min-width: 18rem; /* ~288px */
        width: max-content; /* tự nở theo chữ */
        max-width: min(92vw, 28rem); /* chống tràn màn hình */
    }
}

/* item trong dropdown: đồng bộ chữ hoa + giảm wrap */
.container-navbar .dropdown-menu .dropdown-item {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 400;
    font-size: .92rem;
    padding: .65rem 1.1rem;
    line-height: 1.2;
    white-space: normal; /* vẫn cho xuống dòng nếu quá dài, nhưng ít xảy ra vì menu đã rộng */
}

/* link bên trong submenu row (cấp 2+) cũng uppercase đồng bộ */
.container-navbar .dropdown-submenu > .dropdown-item > a {
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: 300;
    font-size: .92rem;
}

.container-navbar .dropdown-menu .dropdown-item:hover,
.container-navbar .dropdown-menu .dropdown-item:focus{
  background: rgba(123,17,31,.06);
  color: var(--hanu-maroon-700);
}
.container-navbar .dropdown-menu .dropdown-item:active{
  background: var(--hanu-maroon-600);
  color: #fff;
}
.container-navbar .dropdown-menu .dropdown-divider{
  border-color: rgba(0,0,0,.08);
  margin: .25rem 0;
}
/* Code-behind appends a divider after every item -> hide trailing one */
.container-navbar .dropdown-menu > .dropdown-divider:last-child{ display: none; }


/* Desktop hover-open (keep JS click working too) */
@media (min-width: 992px){
  /* Open level-1 dropdown on hover */
  .container-navbar .navbar .dropdown:hover > .dropdown-menu{
    display: block;
  }
  /* Open flyout submenu on hover */
  .container-navbar .dropdown-submenu:hover > .dropdown-menu{
    display: block;
  }
  /* Small gap fix so menu sits tight under navbar */
  .container-navbar .navbar-nav > li.dropdown > .dropdown-menu{
    margin-top: 0 !important;
  }
}

/* ========== MULTI-LEVEL SUBMENU ========== */
.container-navbar .dropdown-submenu{ position: relative; }

/* Submenu row: <div class="dropdown-item p-0"> <a ...>..</a> <span class="js-submenu-toggle">..</span> </div> */
.container-navbar .dropdown-submenu > .dropdown-item{ padding: 0; }
.container-navbar .dropdown-submenu > .dropdown-item > a{
  display: block;
  padding: .55rem 1rem;
  color: rgba(0,0,0,.86);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 400;
  font-size: .92rem;
}
.container-navbar .dropdown-submenu > .dropdown-item > a:hover,
.container-navbar .dropdown-submenu > .dropdown-item > a:focus{
  background: rgba(123,17,31,.06);
  color: var(--hanu-maroon-700);
  text-decoration: none;
}

/* Toggle area */
.container-navbar .js-submenu-toggle{
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .9rem;
  color: rgba(123,17,31,.75);
}
.container-navbar .js-submenu-toggle:focus{
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(241,200,87,.35);
  border-radius: .5rem;
}
.container-navbar .js-submenu-toggle i{ transition: transform .15s ease; }
.container-navbar .js-submenu-toggle[aria-expanded="true"] i{ transform: rotate(90deg); }

/* Desktop flyout */
@media (min-width: 768px){
  .container-navbar .dropdown-submenu > .dropdown-menu{
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: .15rem;
    margin-top: -.25rem;
    min-width: 240px;
    display: none;
  }
  .container-navbar .dropdown-submenu > .dropdown-menu.show{ display: block; }

  /* Hover buffer to prevent accidental close when moving mouse */
  .container-navbar .dropdown-submenu::after{
    content: "";
    position: absolute;
    top: 0;
    right: -14px;
    width: 14px;
    height: 100%;
  }
}

/* Mobile: dropdowns in-flow (no absolute flyout) */
@media (max-width: 767.98px){
  .container-navbar .navbar-collapse .dropdown-menu{
    position: static !important;
    transform: none !important;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    border-radius: 0;
  }

  .container-navbar .navbar-nav{ text-align: left; }
  .container-navbar .navbar-nav > .nav-item{ width: 100%; justify-content: flex-start; }

  .container-navbar .navbar-nav > .nav-item > .nav-link{
    padding: .85rem 1.15rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .container-navbar .dropdown-menu .dropdown-item{
    padding: .75rem 1.15rem;
    border-bottom: 1px solid rgba(0,0,0,.04);
  }

  /* Submenu indentation + open by JS (.show) */
  .container-navbar .dropdown-submenu > .dropdown-menu{
    display: none;
    border-left: 2px solid rgba(123,17,31,.18);
    margin-left: .25rem;
    padding-left: .25rem;
  }
  .container-navbar .dropdown-submenu > .dropdown-menu.show{ display: block; }

  /* Submenu row layout (a | toggle) */
  .container-navbar .dropdown-submenu > .dropdown-item{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: stretch;
  }
  .container-navbar .dropdown-submenu > .dropdown-item > a{ padding: .75rem 1.15rem; }
  .container-navbar .dropdown-submenu > .dropdown-item > .js-submenu-toggle{
    border-left: 1px solid rgba(0,0,0,.04);
  }

  /* Collapse header (MENU + close) */
  .container-navbar .navbar-collapse-header{
    padding: .9rem 1.15rem;
    background: rgba(0,0,0,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: #fff;
  }
  .container-navbar .navbar-collapse-title{
    font-weight: 700;
    letter-spacing: .06em;
  }
  .container-navbar .btn-close{
    filter: invert(1) grayscale(1);
    opacity: .9;
  }
  .container-navbar .btn-close:focus{ box-shadow: 0 0 0 .2rem rgba(241,200,87,.35); }
}

/* ========== UTILITY (cart + login) ========== */
.container-navbar .navbar-utility a{
  color: #fff;
  text-decoration: none;
}
.container-navbar .navbar-utility a:hover,
.container-navbar .navbar-utility a:focus{ color: var(--hanu-gold-soft); }

.container-navbar .cart-btn{ position: relative; }
.container-navbar .cart-badge{
  position: absolute;
  top: 0;
  inset-inline-start: 100%;
  transform: translate(-50%, -40%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  border-radius: 999px;
  font-size: .7rem;
  line-height: 1;
  background: #dc3545;
  color: #fff;
}
.container-navbar .navbar-utility i{
  font-size: 1rem;
  line-height: 1;
}

@media (min-width: 992px) {
    .container-navbar .navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .container-navbar .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* =========================================================
   LGW – Login Dropdown (Scoped, không phá navbar dropdown)
   Prefix: lgw-login-dropdown
   ========================================================= */

/* Wrapper */
.lgw-login-dropdown {
    position: relative;
}

    /* Toggle button – đồng bộ tone navbar */
    .lgw-login-dropdown > .dropdown-toggle {
        border-color: rgba(255,255,255,.65);
        color: #fff;
        gap: .35rem;
    }

        .lgw-login-dropdown > .dropdown-toggle:hover,
        .lgw-login-dropdown > .dropdown-toggle:focus {
            color: var(--hanu-gold-soft);
            border-color: rgba(241,200,87,.55);
            box-shadow: 0 0 0 .2rem rgba(241,200,87,.25);
        }

    /* Menu – fix “trắng chữ” + fix gap (thay mt-2) */
    .lgw-login-dropdown > .dropdown-menu {
        margin-top: .35rem !important; /* kiểm soát gap tại CSS */
        min-width: 14.5rem;
        padding: .35rem;
        border-radius: .75rem;
        border: 1px solid rgba(0,0,0,.08);
        background: #fff;
        color: rgba(0,0,0,.86);
        box-shadow: 0 12px 28px rgba(0,0,0,.18);
    }

    /* Item: KHÔNG uppercase như menu chính */
    .lgw-login-dropdown .dropdown-item {
        border-radius: .55rem;
        padding: .6rem .85rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        white-space: nowrap;
        color: rgba(0,0,0,.85) !important; /* chống bị “kế thừa trắng” */
        background: transparent;
    }

        /* ===== LGW login dropdown: hover rõ hơn (maroon tint) ===== */
        .lgw-login-dropdown .dropdown-item:hover,
        .lgw-login-dropdown .dropdown-item:focus {
            background: rgba(140, 17, 31, .14); /* maroon-500 tint */
            color: var(--hanu-maroon-700) !important;
        }

        /*.lgw-login-dropdown .dropdown-item:hover {
            box-shadow: inset 3px 0 0 rgba(140, 17, 31, .45);*/ /* vạch trái nhẹ cho dễ nhận */
        /*}*/

        .lgw-login-dropdown .dropdown-item:active {
            background: var(--hanu-maroon-600);
            color: #fff !important;
        }

    .lgw-login-dropdown .dropdown-divider {
        margin: .35rem .25rem;
        border-color: rgba(0,0,0,.08);
    }

/* Mobile: menu full width theo nút */
@media (max-width: 767.98px) {
    .lgw-login-dropdown {
        width: 100%;
    }

        .lgw-login-dropdown > .dropdown-toggle {
            width: 100%;
            justify-content: center;
        }

        .lgw-login-dropdown > .dropdown-menu {
            width: 100%;
            min-width: 0;
        }

        .lgw-login-dropdown .dropdown-item {
            white-space: normal;
        }
}
/* ===== LGW login dropdown: hover buffer chống rớt menu (desktop) ===== */
@media (min-width: 992px) {

    /* Giảm khoảng hở thực tế giữa nút và menu */
    .lgw-login-dropdown > .dropdown-menu {
        margin-top: .12rem !important;
    }

    /* Tạo vùng hover vô hình nối từ nút xuống menu */
    .lgw-login-dropdown::after {
        content: "";
        position: absolute;
        left: -8px;
        right: -8px;
        top: 100%;
        height: 14px; /* “cầu” nối */
        background: transparent;
    }

    /* Nếu navbar của bạn đang bật hover-open cho .dropdown,
     thì cho login dropdown mở mượt theo hover luôn (không phụ thuộc show) */
    .container-navbar .navbar .lgw-login-dropdown:hover > .dropdown-menu {
        display: block;
    }
}

/* =========================================================
   LGW – Fix btn-outline-light hover (login only)
   ========================================================= */

/* Hover / Focus: KHÔNG chuyển sang trắng */
.lgw-login-dropdown > .dropdown-toggle.btn-outline-light:hover,
.lgw-login-dropdown > .dropdown-toggle.btn-outline-light:focus,
.lgw-login-dropdown > .dropdown-toggle.btn-outline-light.show {
    background-color: rgba(241, 200, 87, 0.12); /* gold tint rất nhẹ */
    color: var(--hanu-gold-soft);
    border-color: rgba(241, 200, 87, 0.65);
    box-shadow: 0 0 0 .2rem rgba(241, 200, 87, .25);
}

/* Icon trong nút theo chữ */
.lgw-login-dropdown > .dropdown-toggle i {
    color: currentColor;
}

/* Trạng thái active (click giữ) */
.lgw-login-dropdown > .dropdown-toggle.btn-outline-light:active {
    background-color: rgba(140, 17, 31, .22); /* maroon đậm hơn hover */
    border-color: rgba(140, 17, 31, .6);
    color: #fff;
}



/* ---------------------------------------------------------
   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;
}

/* Logo */
.hanu-logo {
    height: 64px;
    width: auto;
}

/* Text bên phải logo */
.lgw-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;/*1.1*/
    color: #fff; /* chữ trên nền đỏ */

    white-space: normal !important; /* CHO PHÉP WRAP */
    min-width: 0; /* CẦN THIẾT cho flex item để được xuống dòng */
    overflow-wrap: break-word; /* phòng trường hợp từ quá dài */
}

.lgw-brand-line1 {
    font-size: 1.05rem; /*0.95*/
    font-weight: 600;
    letter-spacing: 0.5px;
}

.lgw-brand-line2 {
    font-size: 0.95rem;
    opacity: 0.9;
}

@media (max-width: 576px) {
    .lgw-brand-line1 {
        font-size: 0.85rem;
    }

    .lgw-brand-line2 {
        font-size: 0.7rem;
    }
}

/* Loại bỏ underline của LinkButton */
.link-logo {
    text-decoration: none !important;
    color: inherit !important;
}

/* ---------------------------------------------------------
   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%;
}

/* Fulltext highlight */
.searchterm {
    background: #fff3cd;
    padding: 0 .12rem;
    border-radius: .2rem;
    font-weight: 700;
}

/* =========================================================
   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: 0; /*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-onesearch::before {
        background-image: url('/Content/Images/zone-bg-onesearch.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);
    }

/* Header của webpart (không có link) giữ nguyên màu nâu */
.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;
}

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

    /* Header có link – khác màu + có mũi tên nhỏ */
    .lgw-card-header a.lgw-card-header-link {
        color: var(--hanu-maroon-700); /* đậm hơn header thường */
        text-decoration: none;
        font-weight: inherit;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
    }

        /* Icon mũi tên chỉ xuất hiện khi có link */
        .lgw-card-header a.lgw-card-header-link::after {
            content: "↗"; /* mũi tên đơn giản */
            font-size: 0.85rem;
            opacity: 0.7;
            transform: translateY(-1px);
            transition: opacity 0.15s ease, transform 0.15s ease;
        }

        /* Hover: đổi màu rõ rệt + gạch chân, icon sáng hơn */
        .lgw-card-header a.lgw-card-header-link:hover {
            color: var(--hanu-gold); /* vàng nổi bật */
            text-decoration: underline;
        }

            .lgw-card-header a.lgw-card-header-link:hover::after {
                opacity: 1;
                transform: translateY(-2px);
            }

    /* Text trong header (nếu có span .lgw-card-header-text) */
    .lgw-card-header .lgw-card-header-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }





/* 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
-----------------------------------------*/
/* ==========================================
   Support area (Facebook – Messenger – Zalo – Map)
   ========================================== */

.library-support-row {
    margin-top: .5rem;
}

/* --- Social icons --- */

.library-support-social-img {
    width: 2.4rem; /* icon size đồng nhất */
    height: 2.4rem;
    object-fit: contain; /* giữ nguyên tỷ lệ ảnh */
    display: inline-block;
}

.library-support-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 999px;
    background: rgba(0,0,0,0.15);
    transition: 0.2s;
}

    .library-support-social a:hover {
        background: rgba(255,255,255,0.25);
        transform: translateY(-1px);
    }

/* --- Map --- */

.library-support-map {
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}

.library-support-map-frame {
    border: 0 !important;
    width: 100%;
    height: 100%;
}

/* --- QR Zalo --- */

.library-support-qr-img {
    max-width: 130px;
    border-radius: .4rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12);
}

.library-support-qr-label {
    color: #ffffff;
    font-weight: 600;
    font-size: .9rem;
}

/* Mobile spacing */
@media (max-width: 575.98px) {
    .library-support-row > [class*="col-"] {
        margin-bottom: .75rem;
    }
}









/*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 MiniView (Bootstrap 5 friendly)
   - Works with legacy JS: show(divID)/hide(divID) toggling visibility
   - Desktop: popover anchored to cell
   - Mobile/WebView: fixed floating card (wide, readable)
   ========================================================= */

/* Header */
#calendar-miniview.calendar-header {
    border-radius: .75rem .75rem 0 0;
    background: linear-gradient(90deg, rgba(123,17,31,.95), rgba(123,17,31,.78));
}

.calendar-week__icon {
    width: 22px;
    height: auto;
    display: block;
}

/* Calendar table (layout + rounded bottom) */
.mini-calendar-table {
    table-layout: fixed;
    /* rounded bottom corners */
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 0 0 .75rem .75rem;
}

    /* Cells */
    .mini-calendar-table th,
    .mini-calendar-table td {
        padding: .35rem .25rem;
        vertical-align: top;
    }

    /* Make each day cell a positioning context for desktop tooltip */
    .mini-calendar-table td {
        position: relative;
        overflow: visible; /* important: don't clip popover */
    }

    /* Re-draw borders so it still looks like table-bordered */
    .mini-calendar-table > tbody > tr > td,
    .mini-calendar-table > tbody > tr > th,
    .mini-calendar-table > tr > td,
    .mini-calendar-table > tr > th {
        border-right: 1px solid var(--bs-border-color, #dee2e6);
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

        .mini-calendar-table > tbody > tr > td:first-child,
        .mini-calendar-table > tbody > tr > th:first-child,
        .mini-calendar-table > tr > td:first-child,
        .mini-calendar-table > tr > th:first-child {
            border-left: 1px solid var(--bs-border-color, #dee2e6);
        }

    .mini-calendar-table > tbody > tr:first-child > td,
    .mini-calendar-table > tbody > tr:first-child > th,
    .mini-calendar-table > tr:first-child > td,
    .mini-calendar-table > tr:first-child > th {
        border-top: 1px solid var(--bs-border-color, #dee2e6);
    }

    /* Bottom corner rounding on last row cells */
    .mini-calendar-table > tbody > tr:last-child > td:first-child,
    .mini-calendar-table > tr:last-child > td:first-child {
        border-bottom-left-radius: .75rem;
    }

    .mini-calendar-table > tbody > tr:last-child > td:last-child,
    .mini-calendar-table > tr:last-child > td:last-child {
        border-bottom-right-radius: .75rem;
    }

    /* Day number pill */
    .mini-calendar-table .calendar-day-link {
        width: 1.9rem;
        height: 1.9rem;
        border-radius: .5rem;
        font-weight: 600;
        color: inherit;
    }

        .mini-calendar-table .calendar-day-link:hover {
            background: rgba(0,0,0,.06);
        }

    /* Weekday header row */
    .mini-calendar-table .CalendarWeekdayName {
        background-color: #f8f9fa;
        font-weight: 600;
    }

    /* Weekend header (T7/CN) */
    .mini-calendar-table .CalendarWeekendName {
        background-color: #fff3cd;
        color: #b02a37;
        font-weight: 600;
    }

    /* Normal day cells */
    .mini-calendar-table .CalendarDay,
    .mini-calendar-table .CalendarOtherMonthDay {
        background-color: #fff;
    }

    /* Weekend day cells */
    .mini-calendar-table .CalendarWeekend,
    .mini-calendar-table .CalendarOtherMonthWeekend {
        background-color: #fff8e1;
    }

    /* Today highlight */
    .mini-calendar-table .CalendarToday,
    .mini-calendar-table .CalendarWeekendToday {
        background-color: #ffe9b0;
        border: 1px solid #ffc107;
        font-weight: 600;
    }

    .mini-calendar-table .CalendarWeekendToday {
        color: #b02a37;
    }

/* =========================================================
   Event tooltip / popover
   IMPORTANT: compatible with legacy JS toggling visibility inline:
     show(divID) => element.style.visibility="visible"
     hide(divID) => element.style.visibility="hidden"
   So we DO NOT rely on .is-open class.
   ========================================================= */

.event-popup {
    --ev-radius: .75rem;
    --ev-border: rgba(0,0,0,.12);
    --ev-shadow: 0 12px 30px rgba(0,0,0,.18);
    background: #fff;
    border: 1px solid var(--ev-border);
    border-radius: var(--ev-radius);
    box-shadow: var(--ev-shadow);
    padding: .6rem .7rem;
    z-index: 40;
    /* legacy JS controls visibility */
    visibility: hidden;
    /* allow a soft animation BUT still work with visibility-only JS */
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .12s ease, transform .12s ease;
    max-width: 360px;
    min-width: 240px;
}

    /* When JS sets inline style visibility: visible => style attribute contains "visible" */
    .event-popup[style*="visible"] {
        opacity: 1;
        transform: translateY(0);
    }

    /* Content */
    .event-popup .CalendarEvent {
        text-align: left;
        line-height: 1.35;
        white-space: normal;
        word-break: break-word;
    }

/* Desktop: popover anchored to cell + arrow */
@media (min-width: 576px) {
    .event-popup {
        position: absolute;
        left: .25rem;
        top: 2.25rem;
        width: max-content;
    }

        .event-popup::before {
            content: "";
            position: absolute;
            top: -7px;
            left: 1.1rem;
            width: 12px;
            height: 12px;
            background: #fff;
            border-left: 1px solid var(--ev-border);
            border-top: 1px solid var(--ev-border);
            transform: rotate(45deg);
        }
}

/* Mobile/WebView: fixed floating card (wide & readable) */
@media (max-width: 575.98px) {
    .event-popup {
        position: fixed; /* not constrained by td */
        left: 50%;
        bottom: .75rem;
        top: auto;
        width: min(92vw, 420px);
        max-width: none;
        min-width: 0;
        max-height: 55vh;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: .75rem .85rem;
        font-size: .95rem;
        line-height: 1.45;
        /* override base transform (keep smooth, centered) */
        transform: translateX(-50%) translateY(8px);
    }

        .event-popup[style*="visible"] {
            transform: translateX(-50%) translateY(0);
        }

        .event-popup::before {
            display: none;
        }
}



/* =======================================================
   LegoWeb - MenuListView (HANU)
   List liên kết trong card – dùng icon chevron
   ======================================================= */

.lgw-menu-list {
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem 1rem;
}

    /* Reset UL/LI bên trong */
    .lgw-menu-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Item – KHÔNG chừa chỗ cho bullet nữa */
    .lgw-menu-list .nav-item {
        position: relative;
        padding-left: 0; /* không cần lùi vào */
    }

        .lgw-menu-list .nav-item + .nav-item {
            margin-top: 0.3rem;
        }

    /* Link: hiển thị theo hàng ngang (icon + text) */
    .lgw-menu-list .nav-link {
        display: flex; /* để icon + text thẳng hàng */
        align-items: center;
        padding: 0;
        font-size: 0.95rem;
        font-weight: 500;
        line-height: 1.4;
        color: var(--hanu-maroon-700) !important;
        text-decoration: none;
        text-transform: none !important;
        background: transparent;
    }

        /* Hover: chữ vàng HANU */
        .lgw-menu-list .nav-link:hover {
            color: var(--hanu-gold-deep) !important;
            text-decoration: underline;
        }

        /* Active */
        .lgw-menu-list .nav-link.active {
            color: var(--hanu-gold-deep) !important;
            font-weight: 600;
        }

    /* ICON: luôn hiển thị – override mọi rule cũ */
    .lgw-menu-list .lgw-menu-list__icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-right: 0.5rem;
        font-size: 0.75rem; /* kích thước icon */
        color: var(--hanu-gold-deep); /* icon vàng, chữ maroon */
    }

        /* Bản thân <i class="bi ..."> kế thừa màu từ span */
        .lgw-menu-list .lgw-menu-list__icon i {
            line-height: 1;
        }

    /* Label giữ nguyên */
    .lgw-menu-list .lgw-menu-list__label {
        display: inline;
    }

    /* Sub-level (nếu có) – thụt nhẹ */
    .lgw-menu-list ul ul .nav-item {
        padding-left: 1rem;
    }

/* Mobile */
@media (max-width: 767.98px) {
    .lgw-menu-list {
        padding: 0.5rem 0.8rem 0.85rem;
    }

        .lgw-menu-list .nav-link {
            font-size: 0.94rem;
        }
}




/*---------------------------------------------------------------------
  LegoWeb – MARC Content List Item (lgw-content-list-item)
  Dùng cho XSLT hiển thị danh sách bài viết (MARCXML 245/001/856...)
---------------------------------------------------------------------*/

/* Container từng bản ghi */
.lgw-content-list-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    align-items: flex-start;
}

/* Link bọc thumbnail bên trái */
.lgw-content-thumb-link {
    text-decoration: none;
    color: inherit;
}

    .lgw-content-thumb-link:hover .lgw-content-thumb-img {
        opacity: 0.9;
        transition: opacity 0.2s ease-in-out;
    }

/* Thumbnail ngang cho content list */
.lgw-content-thumb {
    width: 150px; /* chiều ngang */
    min-width: 150px;
    height: 90px; /* chiều cao (16:9) */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f3f0e8;
}

.lgw-content-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* scale đúng tỉ lệ, fill khung */
}

/* Nếu không có ảnh -> để contain */
.lgw-content-noimage {
    object-fit: contain !important;
    padding: 6px;
}

/* Cột phải: text */
.lgw-content-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Link tiêu đề – chỉ áp dụng trong LegoWeb content list */
.lgw-content-title-link {
    font-weight: 600;
    color: var(--hanu-maroon-700);
    text-decoration: none;
    line-height: 1.35;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
}

    .lgw-content-title-link:hover {
        color: var(--hanu-gold-deep);
    }

/* Fix title wrapping in LegoWeb content list */
.lgw-content-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Cho tiêu đề tối đa 2 dòng */
    -webkit-box-orient: vertical;
    white-space: normal !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

/* Chấm nhỏ / badge bên cạnh tiêu đề (có thể dùng làm icon “mới”) */
.lgw-content-title-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--hanu-gold);
    margin-top: 2px;
}

/* Summary tối đa 4 dòng cho content list bài viết */
.lgw-content-summary {
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--hanu-gray-700, #555);
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Giới hạn 4 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin-top: 0.35rem;
}

/* Responsive – màn nhỏ thu thumbnail & font lại chút */
@media (max-width: 576px) {
    .lgw-content-list-item {
        gap: 0.6rem;
    }

    .lgw-content-thumb,
    .lgw-content-thumb-img {
        width: 120px;
        min-width: 120px;
        height: 72px;
    }

    .lgw-content-title-link {
        font-size: 0.92rem;
    }
    .lgw-content-summary {
        -webkit-line-clamp: 3;
    }
}

/*----------------------------------------
    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;
}

/* =========================================
   Bài viết – vùng content CKEditor (520)
   ========================================= */

.lgw-article__content--html {
    position: relative; /* giữ absolute/relative nằm trong khung */
    overflow: hidden; /* chặn tràn nội dung ra ngoài */
    font-size: 0.96rem;
    line-height: 1.7;
    color: #333333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

    /* clearfix cho mọi float bên trong 520 */
    .lgw-article__content--html::after {
        content: "";
        display: block;
        clear: both;
    }

/* Inner cho phép scroll nếu nội dung cao quá */
.lgw-article__content-inner {
    width: 100%;
    box-sizing: border-box;
}

/* Reset “an toàn” cho mọi phần tử bên trong 520 */
.lgw-article__content--html * {
    box-sizing: border-box;
    max-width: 100%; /* mọi thứ không vượt quá khung */
}

/* Ảnh, video, iframe – không tràn, mặc định căn giữa */
.lgw-article__content--html img,
.lgw-article__content--html video,
.lgw-article__content--html iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Bảng trong bài viết – full width trong khung, không phá layout chung */
.lgw-article__content--html table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

    /* Nếu bảng có width rất lớn, ép co lại trong khung */
    .lgw-article__content--html table[style*="width"] {
        width: 100% !important;
    }

/* Khoảng cách đoạn văn */
.lgw-article__content--html p {
    margin-bottom: 0.75rem;
}

/* Danh sách */
.lgw-article__content--html ul,
.lgw-article__content--html ol {
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
}

/* Heading trong bài – scale lại cho hợp layout chung */
.lgw-article__content--html h1 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.lgw-article__content--html h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
}

.lgw-article__content--html h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.lgw-article__content--html h4,
.lgw-article__content--html h5,
.lgw-article__content--html h6 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

/* Hình căn giữa kiểu CKEditor (text-align:center) trông gọn hơn */
.lgw-article__content--html p[style*="text-align:center"] img {
    margin-left: auto;
    margin-right: auto;
}

/* div clear:both chỉ clear trong khối này */
.lgw-article__content--html div[style*="clear:both"] {
    clear: both;
}

/* ==========================================
   ẢNH TRONG NỘI DUNG 520 (HANU ARTICLE)
   ========================================== */

/* Mặc định: ảnh không tràn khung, căn giữa, bỏ height "cứng" */
.lgw-article__content--html img {
    max-width: 100%; /* co lại vừa khung cha */
    height: auto !important; /* bỏ chiều cao cố định 433px */
    display: block; /* cho dễ căn giữa */
    margin: 0.75rem auto; /* cách trên/dưới, căn giữa ngang */
}

/* Khoảng cách giữa các block ảnh */
.lgw-article__content--html div[dir="auto"] {
    margin-bottom: 0.75rem;
}

/* Trên mobile: cho ảnh full chiều ngang nội dung */
@media (max-width: 767.98px) {
    .lgw-article__content--html img {
        width: 100%; /* full bề ngang khối bài viết */
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Iframe trong nội dung bài viết – mặc định full width, cao vừa phải */
.lgw-article__content-inner iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    height: auto; /* bỏ mọi height fix trước đó nếu có */
    min-height: 280px; /* cho đỡ lùn trên mobile */
}

    /* Video YouTube: ưu tiên tỉ lệ 16:9 */
    .lgw-article__content-inner iframe[src*="youtube.com"],
    .lgw-article__content-inner iframe[src*="youtu.be"] {
        aspect-ratio: 16 / 9; /* trình duyệt mới hỗ trợ tốt */
        height: auto;
        min-height: 240px;
    }

    /* PDF: thường nên cao hơn */
    .lgw-article__content-inner iframe[src$=".pdf"],
    .lgw-article__content-inner iframe[src*=".pdf#"] {
        min-height: 600px;
    }


/* Khung tổng Photo Gallery */
.lgw-photogallery {
    width: 100%;
}

/* Viewer – ảnh lớn */
.lgw-photogallery-viewer .lgw-photoviewer-img {
    border-radius: 0.5rem;
}

/* Caption của viewer */
.lgw-photoviewer-caption {
    background: rgba(0,0,0,0.55);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
}

/* Dải thumbnail phía dưới */
.lgw-photogallery-thumbs .lgw-photo-thumb-wrapper {
    flex: 0 0 auto; /* để không co lại trong flex-row */
}

.lgw-photogallery-thumbs .lgw-photo-thumb {
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.25rem;
    cursor: pointer;
}

/* Có thể thêm hiệu ứng hover / active */
.lgw-photogallery-thumbs .lgw-photo-thumb-wrapper:hover .lgw-photo-thumb {
    outline: 2px solid var(--bs-primary);
}







/*---------------------------------------------------------------------
  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);
    }


/*-----------------------------------
    BrowseByCollection.ascx (HANU)
------------------------------------*/

/* HANU palette (tận dụng tone ấm nhẹ, không quá vàng) */
:root {
    --hanu-card-bg1: #f7f6f2;
    --hanu-card-bg2: #f0ede6;
    --hanu-card-bg-hover1: #fbfaf6;
    --hanu-card-bg-hover2: #f3efe7;
    --hanu-border: rgba(140,108,41,.14);
    --hanu-border-hover: rgba(140,108,41,.22);
    --hanu-thumb-bg: #f4f1ea;
    --hanu-thumb-bg-hover: #efe9dd;
    --hanu-text: rgba(64,45,24,.88); /* nâu đậm nhẹ */
    --hanu-meta: rgba(64,45,24,.62); /* meta nhạt */
    --hanu-icon: rgba(64,45,24,.55);
}

/* =========================
   CARD (nhẹ, thoáng, ổn định chiều cao)
   ========================= */
.kps-browse-card {
    position: relative;
    background: linear-gradient(135deg,var(--hanu-card-bg1),var(--hanu-card-bg2));
    border-radius: .875rem;
    border: 1px solid var(--hanu-border);
    box-shadow: 0 1px 10px rgba(0,0,0,.035);
    padding: .6rem .8rem;
    transition: background .18s ease-out, border-color .18s ease-out, box-shadow .18s ease-out;
}

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

    .kps-browse-card:hover {
        background: linear-gradient(135deg,var(--hanu-card-bg-hover1),var(--hanu-card-bg-hover2));
        border-color: var(--hanu-border-hover);
        box-shadow: 0 4px 16px rgba(0,0,0,.06);
    }

    /* =========================
   TEXT
   ========================= */
    .kps-browse-card,
    .kps-browse-card p,
    .kps-browse-card span {
        color: var(--hanu-text);
    }

/* Title */
.kps-card-title-link {
    color: var(--hanu-text);
    text-decoration: none;
}
.kps-card-title-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .kps-card-title-link:hover {
        text-decoration: underline;
    }

/* Meta lines (tác giả / NXB / phân loại / ISBN) */
.kps-card-meta {
    font-size: .875rem;
    line-height: 1.35;
    color: var(--hanu-meta) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .kps-card-meta.isbn {
        opacity: .75;
        font-size: .82rem;
    }
    .kps-card-meta i {
        opacity: .85;
        color: var(--hanu-icon);
    }

/* =========================
   THUMB LEFT
   ========================= */
.kps-browse-card .col-auto {
    padding-right: .75rem;
}

.kps-card-thumb-left {
    width: 106px;
    height: 146px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--hanu-thumb-bg);
    display: block;
    border: 1px solid rgba(140,108,41,.18);
}

.kps-card-thumb-left-icon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    padding: 6px;
    border-radius: 8px;
    background: var(--hanu-thumb-bg);
    border: 1px solid rgba(140,108,41,.18);
}

.kps-card-thumb-left,
.kps-card-thumb-left-icon {
    flex-shrink: 0;
}

.kps-browse-card:hover .kps-card-thumb-left,
.kps-browse-card:hover .kps-card-thumb-left-icon {
    background: var(--hanu-thumb-bg-hover);
}

/* =========================
   STATS BADGES (890)
   - nhẹ, 1 hàng, không làm card cao thất thường
   ========================= */
.kps-card-stats {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: .35rem;
    margin-top: .35rem;
}

    .kps-card-stats .badge {
        border: 0 !important;
        background: rgba(64,45,24,.06) !important;
        color: rgba(64,45,24,.78);
        font-weight: 600;
        padding: .22rem .5rem;
        border-radius: 999px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .kps-card-stats .badge {
        background: rgba(64,45,24,.05) !important;
        color: rgba(64,45,24,.70);
        padding: .18rem .45rem;
        font-weight: 600;
    }
        .kps-card-stats .badge i {
            opacity: .7;
            color: var(--hanu-icon);
        }


/* ===========================
   KPS Bib Card – Mobile fix
   =========================== */

/* Cốt lõi: cho cột text co lại được, không ép rớt xuống dưới */
.kps-browse-card .col {
    min-width: 0; /* QUAN TRỌNG */
}

/* Cho text meta wrap đẹp khi gặp chuỗi dài */
.kps-browse-card .kps-card-meta {
    white-space: normal;
    overflow-wrap: anywhere; /* bẻ từ dài kiểu "Công ty CP..." */
    word-break: break-word;
}

/* Publisher: cho phép truncate + không phá layout */
.kps-browse-card .kps-card-publisher {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
}

/* Mobile: giữ layout ngang (ảnh trái - text phải) thay vì rớt xuống */
@media (max-width: 575.98px) {
    /* Ép row không wrap để text không rớt xuống dưới ảnh */
    .kps-browse-card > .row {
        flex-wrap: nowrap;
    }

    /* Thu nhỏ thumb để đủ chỗ cho text */
    .kps-card-thumb-left {
        width: 88px;
        height: 120px; /* tuỳ bạn, có thể bỏ nếu bạn muốn auto */
        object-fit: cover;
    }

    .kps-card-thumb-left-icon {
        width: 64px;
        height: 64px;
    }

    /* Card body đỡ chật */
    .kps-browse-card .card-body {
        padding: .5rem .5rem;
    }
}



/* =========================================================
   KPS – BibCart (BS5 + HANU) – CLEAN
   - Full-width content on mobile
   - Index (STT) top-left overlay (always visible)
   - Remove button top-right overlay (icon-only on all sizes)
   - Does NOT block clicks inside card
   ========================================================= */

.kps-bibcart-item {
    background: transparent;
    border: 0;
    padding: .5rem 0; /* spacing between items */
}

.kps-bibcart-shell {
    position: relative;
    border-radius: .85rem;
}

/* ---- Overlay: Index (STT) ---- */
.kps-bibcart-index {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 5; /* above card */
    pointer-events: none; /* never blocks clicks */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 .55rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .9rem;
    background: rgba(123, 17, 17, .12);
    border: 1px solid rgba(123, 17, 17, .28);
    color: var(--hanu-maroon-700, #7b1111);
}

/* ---- Overlay: Remove ---- */
.kps-bibcart-remove {
    position: absolute;
    top: .45rem;
    right: .45rem;
    z-index: 6;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0 !important;
    border-radius: .65rem;
    line-height: 1;
    white-space: nowrap;
}

    /* icon inside remove button */
    .kps-bibcart-remove i {
        font-size: 1rem;
    }

/* ---- Content area (room for overlays) ---- */
.kps-bibcart-content {
    padding-top: 0; /* no need to push down */
    padding-right: 2.6rem; /* room for remove button */
}

    /* Ensure inner XSLT card behaves */
    .kps-bibcart-content .kps-browse-card {
        width: 100%;
    }

/* Mobile tweaks: keep bib_card look */
@media (max-width: 575.98px) {
    .kps-bibcart-item {
        padding: .35rem 0;
    }

    .kps-bibcart-content {
        padding-right: 2.4rem;
    }

        .kps-bibcart-content .kps-card-thumb-left {
            width: 72px;
            height: 96px;
            object-fit: cover;
            border-radius: .65rem;
        }

        .kps-bibcart-content .card-body {
            padding: .5rem .5rem .5rem .6rem !important;
        }

        .kps-bibcart-content .card-title {
            margin-bottom: .25rem !important;
        }
}
/* Mobile-first: X button overlays top-right, content gets full width */
.kps-bibcart-shell {
    position: relative;
}

/* Default: content full width (no reserved space) */
.kps-bibcart-content {
    padding-right: 0; /* IMPORTANT: do not reserve space */
}

/* Mobile overlay remove button */
@media (max-width: 575.98px) {
    .kps-bibcart-remove {
        position: absolute;
        top: .45rem;
        right: .45rem;
        z-index: 6;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 2.1rem;
        height: 2.1rem;
        padding: 0 !important;
        border-radius: .65rem;
        line-height: 1;
        white-space: nowrap;
    }

        .kps-bibcart-remove i {
            font-size: 1rem;
        }

    /* Make sure remove button doesn't block content clicks outside itself */
    .kps-bibcart-remove {
        pointer-events: auto;
    }

    /* Keep STT non-blocking */
    .kps-bibcart-index {
        pointer-events: none;
    }
}


/* ===== KPS breadcrumb ===== */
.kps-nav .kps-breadcrumb {
    font-size: .875rem;
    margin-bottom: .5rem;
}

.kps-nav .breadcrumb-item + .breadcrumb-item::before {
    opacity: .55;
}

@media (max-width: 576px) {
    .kps-nav .kps-breadcrumb {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

        .kps-nav .kps-breadcrumb::-webkit-scrollbar {
            height: 4px;
        }
}


/* =========================================================
   KPS – BibInfo (Top Header Card) — BS5 + HANU
   Fix: balanced title + keep cover LEFT on small screens
   ========================================================= */

/* --- Critical: prevent vertical text when flex item is squeezed --- */
.kps-bibinfo-card .col,
.kps-bibinfo-card .card-body,
.kps-bibinfo-title,
.kps-bibinfo-meta,
.kps-bibinfo-isbd,
.kps-bibinfo-keywords,
.kps-bibinfo-class {
    min-width: 0;
}

    .kps-bibinfo-title,
    .kps-bibinfo-meta span,
    .kps-bibinfo-isbd span {
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
    }

/* 1) Cover (LEFT) */
.kps-bibinfo-cover {
    width: 150px;
    max-width: 100%;
    height: auto;
    border-radius: 0.65rem;
    border: 1px solid rgba(140,108,41,.18);
    background: var(--hanu-thumb-bg, #f4f1ea);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    display: block;
}

.kps-bibinfo-cover--icon {
    width: 150px;
    min-height: 210px;
    border-radius: 0.65rem;
    border: 1px solid rgba(140,108,41,.18);
    background: var(--hanu-thumb-bg, #f4f1ea);
}

    .kps-bibinfo-cover--icon img {
        max-width: 120px;
        max-height: 120px;
        opacity: 0.95;
    }

/* 2) Classification line */
.kps-bibinfo-class {
    color: var(--hanu-meta, rgba(64,45,24,.62));
    line-height: 1.25;
}

    .kps-bibinfo-class .text-muted {
        color: var(--hanu-meta, rgba(64,45,24,.62)) !important;
    }

    .kps-bibinfo-class .bi,
    .kps-bibinfo-class [class^="bi-"],
    .kps-bibinfo-class [class*=" bi-"] {
        color: rgba(64,45,24,.50);
    }

/* 3) Title (balanced) */
.kps-bibinfo-title {
    color: var(--hanu-text, rgba(64,45,24,.88));
    font-weight: 630;
    font-size: 1.30rem; /* giảm title (vì thẻ h4 đang to) */
    line-height: 1.28;
    margin-bottom: .25rem;
}

    .kps-bibinfo-title .fw-normal {
        color: rgba(64,45,24,.74);
    }

/* 4) Meta / ISBD */
.kps-bibinfo-meta,
.kps-bibinfo-isbd {
    row-gap: 0.35rem;
    column-gap: 0.75rem;
    opacity: .98;
}

    .kps-bibinfo-meta i,
    .kps-bibinfo-isbd i {
        color: rgba(64,45,24,.52);
    }

    /* Desktop: gọn 1 dòng, nhưng vẫn an toàn */
    .kps-bibinfo-meta span,
    .kps-bibinfo-isbd span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

/* 5) Keywords */
.kps-bibinfo-keywords {
    margin-top: .5rem;
}

    .kps-bibinfo-keywords a {
        text-decoration: none;
        cursor: pointer;
        transition: all 0.18s ease;
        user-select: none;
    }

        .kps-bibinfo-keywords a.badge {
            padding: .35rem .65rem;
            font-weight: 600;
            letter-spacing: .01em;
        }

        .kps-bibinfo-keywords a.text-bg-light {
            background-color: rgba(140, 17, 31, 0.04);
            border: 1px solid rgba(140, 17, 31, 0.18) !important;
            color: var(--hanu-maroon-700);
        }

            .kps-bibinfo-keywords a.text-bg-light:hover {
                background-color: rgba(140, 17, 31, 0.12);
                border-color: var(--hanu-maroon-500) !important;
                color: var(--hanu-maroon-700);
                box-shadow: 0 2px 6px rgba(140, 17, 31, 0.18);
                transform: translateY(-1px);
            }

        .kps-bibinfo-keywords a.text-bg-secondary {
            background-color: rgba(0, 0, 0, 0.08) !important;
            border: 1px solid rgba(0, 0, 0, 0.18) !important;
            color: #333 !important;
        }

            .kps-bibinfo-keywords a.text-bg-secondary:hover {
                background-color: rgba(241, 200, 87, 0.35) !important;
                border-color: var(--hanu-gold) !important;
                color: var(--hanu-maroon-700) !important;
            }

/* =========================
   Mobile (keep cover LEFT)
   ========================= */
@media (max-width: 575.98px) {

    /* Make cover smaller but keep LEFT */
    .kps-bibinfo-cover,
    .kps-bibinfo-cover--icon {
        width: 92px;
        flex: 0 0 92px;
    }

    .kps-bibinfo-cover--icon {
        min-height: 130px;
    }

        .kps-bibinfo-cover--icon img {
            max-width: 74px;
            max-height: 74px;
        }

    /* Title scales nicely */
    .kps-bibinfo-title {
        font-size: clamp(1.00rem, 4.1vw, 1.12rem);
        line-height: 1.28;
    }

    /* Allow wrapping for meta/isbd */
    .kps-bibinfo-meta span,
    .kps-bibinfo-isbd span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .kps-bibinfo-keywords a.badge {
        padding: .28rem .55rem;
        font-size: .82rem;
    }
}

@media (max-width: 360px) {
    .kps-bibinfo-cover,
    .kps-bibinfo-cover--icon {
        width: 80px;
        flex: 0 0 80px;
    }

    .kps-bibinfo-cover--icon {
        min-height: 118px;
    }
}

/* =========================================================
   KPS – Item card (theme-able)
   Prefix: kps-item-
   ========================================================= */

/* ---------- Theme tokens (override per site) ---------- */
:root {
    --kps-accent: rgba(140, 17, 31, .65); /* thanh trái */
    --kps-border: rgba(0, 0, 0, .10);
    --kps-surface: #fff;
    --kps-surface-soft: rgba(255,255,255,.92);
    --kps-ink: rgba(0,0,0,.82);
    --kps-muted: rgba(0,0,0,.55);
    --kps-link: rgba(140, 17, 31, .92);
    --kps-link-hover: rgba(140, 17, 31, 1);
    --kps-shadow: 0 2px 12px rgba(0,0,0,.08);
    --kps-radius: .9rem;
    --kps-gap: .75rem;
}

/* ---------- Card shell ---------- */
.kps-item-card {
    position: relative;
    margin: .6rem .75rem .8rem;
    padding: .65rem .75rem .7rem;
    border-radius: var(--kps-radius);
    background: linear-gradient(135deg, rgba(255,255,255,.78), var(--kps-surface-soft));
    border: 1px solid var(--kps-border);
    box-shadow: var(--kps-shadow);
    overflow: hidden;
}

    /* Accent bar */
    .kps-item-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: var(--kps-accent);
    }

/* Top row */
.kps-item-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kps-gap);
    padding-bottom: .45rem;
    margin-bottom: .55rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Index pill */
.kps-item-card__idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 1.6rem;
    padding: 0 .55rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: .82rem;
    color: var(--kps-link);
    background: color-mix(in srgb, var(--kps-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--kps-accent) 30%, transparent);
}

/* Barcode (GetBarcodeViewText thường trả <a>) */
.kps-item-card__barcode {
    min-width: 0;
    overflow-wrap: anywhere;
}

    .kps-item-card__barcode a {
        font-weight: 800;
        color: var(--kps-link);
        text-decoration: none;
    }

        .kps-item-card__barcode a:hover {
            color: var(--kps-link-hover);
            text-decoration: underline;
        }

/* Grid rows */
.kps-item-card__grid {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.kps-item-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--kps-gap);
}

.kps-item-card__label {
    font-size: .85rem;
    color: var(--kps-muted);
    white-space: nowrap;
}

.kps-item-card__value {
    font-size: .92rem;
    font-weight: 600;
    color: var(--kps-ink);
    min-width: 0;
    overflow-wrap: anywhere;
}

.kps-item-card__value--right {
    text-align: right;
}

/* Badge (trạng thái) */
.kps-item-badge {
    display: inline-flex;
    align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--kps-link) 88%, #000);
    background: color-mix(in srgb, var(--kps-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--kps-accent) 22%, transparent);
}

/* Actions */
.kps-item-card__actions {
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px dashed rgba(0,0,0,.12);
    text-align: right;
}

    .kps-item-card__actions a {
        font-weight: 700;
        color: var(--kps-link);
        text-decoration: none;
    }

        .kps-item-card__actions a:hover {
            color: var(--kps-link-hover);
            text-decoration: underline;
        }




/* =========================
   KPS – METS links (Level B)
   Prefix: kps-mets-
   ========================= */

.kps-mets__list .list-group-item {
    border-radius: .75rem;
    border: 1px solid rgba(0,0,0,.08);
    margin-bottom: .5rem;
}

    .kps-mets__list .list-group-item:last-child {
        margin-bottom: 0;
    }

.kps-mets__bullet {
    width: .6rem;
    height: .6rem;
    border-radius: 999px;
    background: rgba(13,110,253,.35);
    flex: 0 0 .6rem;
}

.kps-mets__list .list-group-item:hover .kps-mets__bullet {
    background: rgba(13,110,253,.7);
}

/* =========================
   KPS – Serials (Level B)
   Prefix: kps-serials-
   ========================= */

.kps-serials__sub {
    border-radius: .75rem;
}

.kps-serials__table thead th {
    white-space: nowrap;
}

/* =========================================================
   Full record description (kpsdata_book1.xsl) – BS5 + HANU
   ========================================================= */

.kps-desc-card {
    border: 1px solid rgba(140,17,31,.16);
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(247,229,232,.55), rgba(255,255,255,.85));
    box-shadow: 0 1px 10px rgba(38,3,9,.06);
    overflow: hidden;
}

.kps-desc-card__header {
    padding: .65rem .85rem;
    background: linear-gradient(135deg, rgba(140,17,31,.10), rgba(140,17,31,.04));
    border-bottom: 1px solid rgba(140,17,31,.12);
}

.kps-desc-card__title {
    font-weight: 700;
    color: var(--hanu-maroon-700);
}

.kps-desc-card__body {
    padding: .5rem .75rem .75rem;
}

.kps-desc-table {
    border-color: rgba(140,17,31,.10);
}

.kps-desc-table__col-label {
    width: 180px;
}

.kps-desc__label {
    color: rgba(33,37,41,.72);
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
}

.kps-desc__value {
    color: rgba(33,37,41,.95);
    word-break: break-word;
}

.kps-desc-table tr:hover .kps-desc__label {
    color: var(--hanu-maroon-700);
}

@media (max-width: 576px) {
    .kps-desc-table__col-label {
        width: 130px;
    }

    .kps-desc__label {
        font-size: .85rem;
    }

    .kps-desc-card__header {
        padding: .55rem .7rem;
    }

    .kps-desc-card__body {
        padding: .45rem .6rem .65rem;
    }
}

/* ===============================
   KIPOS MARC table (BS5 + HANU)
   - nhẹ, rõ, không cắt dữ liệu
   =============================== */

.kps-marc__title {
    letter-spacing: .2px;
}

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

.kps-marc-tag {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

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

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

.kps-marc-subfield {
    display: inline;
}

.kps-marc-code {
    opacity: .85;
}

/* Mobile: giữ bảng gọn, dễ cuộn ngang nếu cần */
@media (max-width: 576px) {
    .kps-marc-table {
        font-size: .9rem;
    }

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


/* ===========================
   KPS Heading Browse (HANU)
   HITCODE style like .cart-badge
   Prefix: kps-heading-
   =========================== */

.kps-heading-list {
    border: 1px solid rgba(140,17,31,.18); /* maroon nhẹ */
    border-radius: .75rem;
    overflow: hidden;
    background: #fff;
}

/* Header desktop (Hanu nhẹ, không phá theme) */
.kps-heading-head {
    display: none;
}

@media (min-width:768px) {
    .kps-heading-head {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: .75rem;
        padding: .55rem .75rem;
        background: var(--hanu-gold-soft);
        border-bottom: 1px solid rgba(140,17,31,.15);
    }
}

/* Row: CHỈ 2 cột => không còn cột HIT riêng */
.kps-heading-item {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: .75rem;
    padding: .6rem .75rem;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: #fff;
}

    .kps-heading-item:last-child {
        border-bottom: 0;
    }

.kps-heading-line {
    color: var(--hanu-gray-700);
}

.kps-heading-link:hover {
    color: var(--hanu-gold-deep);
    text-decoration: underline;
}

/* HITCODE dính liền cuối CONTENT (không thành cột) */
.kps-heading-content {
    display: inline-flex; /* thay vì flex full width */
    align-items: baseline;
    gap: .35rem;
    min-width: 0;
}

.kps-heading-link {
    flex: 0 1 auto; /* không chiếm hết hàng */
    min-width: 0;
    overflow-wrap: anywhere;
}

.kps-heading-link {
    color: var(--hanu-text);
    text-decoration: none;
}

.kps-heading-link {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

    .kps-heading-link:hover {
        text-decoration: underline;
    }

.kps-heading-hit {
    margin-left: 0 !important; /* QUAN TRỌNG: bỏ đẩy sang phải */
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* giống cart-badge */
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-size: .72rem;
    line-height: 1;
    font-weight: 600;
    /*background: linear-gradient(135deg, rgba(140,17,31,.10), rgba(140,17,31,.04));*/    
    background: rgba(140,17,31,.06); /* maroon rất nhạt */
    color: rgba(140,17,31,.75); /* chữ đậm vừa đủ */
    border: 1px solid rgba(140,17,31,.12);
}


/* Mobile: stack */
@media (max-width:767.98px) {
    /* Item chỉ còn 1 cột (content) */
    .kps-heading-item {
        grid-template-columns: 1fr !important;
        gap: .35rem;
        align-items: start;
    }    
    /* Ẩn cột "Dòng" */
    .kps-heading-line {
        display: none !important;
    }
    .kps-heading-content {
        flex-wrap: wrap;
    }
    .kps-heading-hit {
        margin-left: 0;
    }
}


/* Filter notice – HANU (ivory + maroon soft) */
.kps-filter-notice {
    background: #fff9ec; /* ivory / parchment */
    border: 1px solid rgba(140,17,31,.18);
    border-radius: .75rem;
    padding: .85rem 1rem;
    color: #5b4636;
}

.kps-filter-title {
    color: var(--hanu-maroon-700, #6f0d16);
    font-weight: 600;
    letter-spacing: .2px;
}

.kps-filter-icon {
    color: rgba(140,17,31,.75);
    line-height: 1;
}

.kps-filter-text {
    font-size: .9rem;
    color: #5b4636;
}

.kps-filter-close {
    opacity: .55;
}

    .kps-filter-close:hover {
        opacity: 1;
    }


/* =====================================================
   KPS – Fulltext Search Results (Light / Flat)
   ===================================================== */

.kps-fulltext-results {
    border-top: 1px solid rgba(0,0,0,.08);
}

/* One result item */
.kps-fulltext-result {
    padding: .85rem .25rem .95rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

/* TITLE */
.kps-fulltext-result__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: .25rem;
}

    .kps-fulltext-result__title a {
        color: var(--hanu-maroon-700, #6f0d16);
        text-decoration: none;
    }

        .kps-fulltext-result__title a:hover {
            text-decoration: underline;
        }

/* QUOTE */
.kps-fulltext-result__quote {
    font-size: .95rem;
    line-height: 1.55;
    color: var(--hanu-text); /* #495057;*/
    margin-bottom: .45rem;
}

    /* highlight term */
    .kps-fulltext-result__quote mark,
    .kps-fulltext-result__quote .searchterm {
        background: #fff3cd;
        padding: 0 .12em;
        border-radius: .15rem;
        font-weight: 600;
    }

/* META */
.kps-fulltext-result__meta {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: .8rem;
    color: #6c757d;
}

/* badge */
.kps-fulltext-result__badge {
    padding: .1rem .45rem;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    background: #f8f9fa;
}

/* score on the right */
.kps-fulltext-result__score {
    margin-left: auto;
    opacity: .7;
}





/* =========================================================
   MOBILE TWEAKS (HANU) – CLEAN (final)
   - ≤767.98px: zone/card/article gọn & thoáng
   - ≤575.98px: iPhone mini: full width, hết cộng dồn lề
   DOM: main#site-main > section.lgw-zone > .container > .row
   ========================================================= */

/* ---------- Mobile chung (≤ 767.98px) ---------- */
@media (max-width: 767.98px) {

    /* Zone */
    .lgw-zone {
        margin: 0.35rem 0.1rem;
        padding: 0.45rem 0.5rem;
        border-radius: 0.6rem;
    }

    .lgw-zone--image {
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }

    /* Tránh cộng dồn: container ngay dưới zone không có padding ngang */
    .lgw-zone > .container,
    .lgw-zone > .container-sm,
    .lgw-zone > .container-md,
    .lgw-zone > .container-lg,
    .lgw-zone > .container-xl,
    .lgw-zone > .container-xxl {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Gutter nội bộ zone */
    .lgw-zone .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }

    /* Card */
    .lgw-card {
        border-radius: 0.75rem;
    }

    .lgw-card-header {
        padding: 0.45rem 0.6rem;
        font-size: 0.92rem;
    }

    .lgw-card-body {
        padding: 0.55rem 0.6rem;
    }

    .lgw-card-footer {
        padding: 0.45rem 0.6rem;
        font-size: 0.88rem;
    }

    /* Article */
    .lgw-article {
        padding: 0.6rem 0.6rem;
        border-radius: 0.85rem;
    }
}


/* ---------- iPhone mini / mobile nhỏ (≤ 575.98px) ---------- */
@media (max-width: 575.98px) {

    /* Main không pad ngang (tránh cộng dồn với zone) */
    main#site-main {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

        /* Zone: ăn sát hơn + bỏ border ngang nếu gây “dày khung” */
        main#site-main > section.lgw-zone {
            margin-left: 0 !important;
            margin-right: 0 !important;
            padding-left: 8px !important;
            padding-right: 8px !important;
            border-left-width: 0 !important;
            border-right-width: 0 !important;
            border-radius: 0.75rem !important;
        }

            /* Container trong zone giữ 0 padding ngang */
            main#site-main > section.lgw-zone > .container,
            main#site-main > section.lgw-zone > .container-sm,
            main#site-main > section.lgw-zone > .container-md,
            main#site-main > section.lgw-zone > .container-lg,
            main#site-main > section.lgw-zone > .container-xl,
            main#site-main > section.lgw-zone > .container-xxl {
                padding-left: 0 !important;
                padding-right: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
            }

    /* Gutter nhỏ hơn chút cho iPhone mini */
    .lgw-zone .row {
        --bs-gutter-x: 0.45rem;
        --bs-gutter-y: 0.45rem;
    }

    /* Zone/Card/Article: tinh chỉnh nhẹ cho màn rất nhỏ */
    .lgw-zone {
        margin: 0.3rem 0 !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

    .lgw-card {
        border-radius: 0.85rem !important;
    }

    .lgw-card-header {
        padding: 0.45rem 0.55rem !important;
    }

    .lgw-card-body {
        padding: 0.55rem 0.55rem !important;
    }

    .lgw-card-footer {
        padding: 0.45rem 0.55rem !important;
    }

    .lgw-article {
        padding: 0.55rem 0.55rem !important;
        border-radius: 0.9rem !important;
    }
}