/* ==========================================================================
   MODERN THEME OVERRIDE — Trường Đại học Y - Dược, Đại học Huế (HueUMP)
   Lớp CSS này được nạp SAU CÙNG (sau style.css, addition.css, shortcodes.css,
   responsive.css) để hiện đại hoá giao diện mà KHÔNG cần đổi cấu trúc HTML/PHP
   hiện có. Toàn bộ selector bên dưới dùng đúng class/id đã tồn tại trong
   theme.php, navibar.php và các file CSS gốc.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap");

:root {
  /* Brand — giữ đúng tông xanh y tế hiện có, làm sâu & sạch hơn */
  --brand-blue: #0b6fad;
  --brand-blue-dark: #0a4f7c;
  --brand-blue-darker: #073a5c;
  --brand-blue-light: #eaf4fb;
  --brand-blue-soft: #d7ecf9;

  /* Accent — sắc xanh lá/teal đại diện cho Dược, dùng làm điểm nhấn */
  --brand-teal: #0f9d78;
  --brand-teal-dark: #0b7d5f;
  --brand-teal-light: #e4f7f1;

  /* Neutral */
  --ink: #172530;
  --ink-soft: #46586b;
  --muted: #71818f;
  --border: #e6edf2;
  --bg-soft: #f4f8fb;
  --white: #ffffff;

  /* Layout */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(11, 61, 92, 0.07);
  --shadow-md: 0 12px 32px rgba(11, 61, 92, 0.12);
  --shadow-lg: 0 24px 60px rgba(11, 61, 92, 0.18);

  --font-sans: "Be Vietnam Pro", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   0. Typography & base
   -------------------------------------------------------------------------- */
html, body {
  font-family: var(--font-sans) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background: #fbfcfd;
}

h1, h2, h3, h4, h5, h6,
.page-title-heading h2,
.widget-title,
.heading_blue {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: #fff;
  letter-spacing: -0.01em;
}

a { transition: color .2s ease, background-color .2s ease, opacity .2s ease; }

::selection { background: var(--brand-blue-soft); color: var(--brand-blue-darker); }

/* Scrollbar polish (desktop webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: #c3d7e4; border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--brand-blue); }

/* --------------------------------------------------------------------------
   1. Topbar (.header-inner-pages) — thanh tiện ích trên cùng
   -------------------------------------------------------------------------- */
.header-inner-pages {
  background: var(--brand-blue-darker) !important;
  border-bottom: none !important;
}

.header-inner-pages .top {
  background: transparent !important;
  
  font-size: 12.5px;
}

.header-inner-pages .menu-top > .menu > li > a,
.header-inner-pages .topnav-sidebar a,
.header-inner-pages .textwidget a {
  color: rgba(255, 255, 255, 0.82) !important;
  font-weight: 500;
}

.header-inner-pages .menu-top > .menu > li > a:hover,
.header-inner-pages .topnav-sidebar a:hover {
  color: #ffffff !important;
}

.header-inner-pages .menu-top > .menu > li {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.search-toggle i,
.header-inner-pages .fa {
  color: rgba(255, 255, 255, 0.85) !important;
}

.search-toggle:hover i { color: #fff !important; }

/* --------------------------------------------------------------------------
   2. Header chính — logo + menu
   -------------------------------------------------------------------------- */
.header,
.header.header-sticky,
header#header {
  background: #ffffff !important;
  box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border);
}

.header .header-wrap {
  padding-top: 0;
  padding-bottom: 0;
}

/* Container thật sự chứa logo + nav-wrap là div.header-wrap.clearfix (lồng
   bên trong div.header-wrap ngoài) — ép nó thành flex-row để logo và menu
   LUÔN nằm cùng một hàng, không phụ thuộc vào float cũ (dễ vỡ ở một số độ
   rộng màn hình). */
.header .header-wrap .header-wrap.clearfix {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap;
  gap: 24px;
  min-height: 84px;
  padding: 12px 0;
}

.header .logo {
  float: none !important;
  line-height: normal !important;
  flex: 0 0 auto;
}

.header .logo a {
  display: flex !important;
  align-items: center;
  height: auto !important;
}

.header .logo img,
.header .logo picture img {
  max-height: 70px;
  width: auto;
  display: block;
}

.header .nav-wrap {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0;
  display: flex !important;
}

#mainnav.mainnav {
  float: none !important;
  display: block !important;
  width: 100% !important;
}

#mainnav.mainnav > ul.menu {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

#mainnav.mainnav > ul.menu > li {
  float: none !important;
  height: auto !important;
  display: flex;
  align-items: center;
}

#mainnav.mainnav > ul.menu > li > a {
  position: relative;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink) !important;
  padding: 10px 5px !important;
  margin: 0 1px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

#mainnav.mainnav > ul.menu > li > a:before { display: none !important; }

/* Vô hiệu hoá gạch chân kiểu cũ (gắn trên <li>, dễ bị nội dung mới che mất)
   và tự dựng gạch chân mới gắn trực tiếp trên <a> — luôn hiển thị rõ. */
#mainnav.mainnav > ul.menu > li:after {
  display: none !important;
}

#mainnav.mainnav > ul.menu > li.active {
  border-bottom: none !important;
}

#mainnav.mainnav > ul.menu > li > a:after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 3px;
  border-radius: var(--radius-pill);

  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s ease;
}

#mainnav.mainnav > ul.menu > li:hover > a,
#mainnav.mainnav > ul.menu > li.active > a {
  color: var(--brand-blue) !important;
  background: var(--brand-blue-light) !important;
}

#mainnav.mainnav > ul.menu > li:hover > a:after,
#mainnav.mainnav > ul.menu > li.active > a:after {
  transform: scaleX(1);
}

#mainnav.mainnav > ul.menu > li.home > a {
  color: var(--brand-blue) !important;
}

/* Dropdown submenu */
#mainnav .submenu,
#mainnav .submenu.submenu-right {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-top: 3px solid var(--brand-blue) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-md) !important;
  padding: 8px 10px !important;
  
}

#mainnav .submenu li a {
  color: var(--ink-soft) !important;
  font-size: 13.5px;
  padding: 9px 20px !important;
}

#mainnav .submenu li a:hover {
  background: var(--brand-blue-light) !important;
  color: var(--brand-blue-dark) !important;
  padding-left: 24px !important;
}

/* Mobile menu button */
.btn-menu span,
.btn-menu span:before,
.btn-menu span:after {
  background: var(--brand-blue) !important;
}

@media (max-width: 1199px) {
  #mainnav.mainnav > ul.menu > li > a { padding: 10px 10px !important; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   3. Page title / Breadcrumbs (banner mỗi trang con)
   -------------------------------------------------------------------------- */
.page-title {
  /* Dùng 2 lớp gradient trong cùng 1 khai báo background thay vì pseudo-
     element, để KHÔNG cần overflow:hidden (tránh cắt chữ khi tiêu đề dài /
     xuống dòng — lỗi đã gặp ở bản trước). */
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(120deg, var(--brand-blue-darker) 0%, var(--brand-blue) 100%) !important;
  padding: 28px 0 !important;
  position: relative;
}

.page-title .row {

  flex-wrap: wrap;
}

.page-title .col-md-12 {
  /* .page-title-heading (h2) và .breadcrumbs vốn dùng float left/right mà
     không có clearfix — khiến chiều cao khối cha bị co về gần 0 và (khi có
     overflow:hidden) làm mất/chèn chữ. display:flow-root tạo block mới bao
     trọn các phần tử float bên trong mà KHÔNG cắt nội dung. */
  display: flow-root !important;
  min-height: 1px;
}

.page-title .page-title-heading,
.breadcrumbs {
  float: none !important;
}

.page-title .page-title-heading {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breadcrumbs {
  display: flex !important;
  align-items: center;
  margin-top: 6px;
}

.page-title .page-title-heading h2,
.page-title .page-title-heading h1 {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.breadcrumbs ul li,
.breadcrumbs ul li a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 12.5px;
}

.breadcrumbs ul li a:hover { color: #fff !important; }

.tentrang-mobile a { color: rgba(255,255,255,0.85) !important; }

/* Banner ảnh module (nếu có banner_photo) */
.banner_module {
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. Khối "TIN TỨC / THÔNG BÁO" (blocknews, blocknews_topic)
   -------------------------------------------------------------------------- */
#news_annoucement {
  padding: 48px 0;
  background: var(--bg-soft);
}

.heading_blue {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--brand-blue-darker) !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--brand-teal);
  margin-bottom: 6px;
}

/* Thẻ tin tức */


.item-thumbnail {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.item-thumbnail img {
  border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.thumbnail-overlay {
  background: var(--brand-blue-darker) !important;
  color: #fff !important;
  border-radius: var(--radius-pill);
  font-size: 11.5px;
  padding: 4px 12px !important;
  font-weight: 600;
}

.item-content .item-title a {
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 16px;
  line-height: 1.4;
}

.item-content .item-title a:hover,
.main-color-1-hover:hover {
  color: var(--brand-blue) !important;
}

.shortcode-blog-excerpt {
  color: var(--muted) !important;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Accordion "Thông báo" */
.flat-accordion { background: transparent; }

.flat-accordion .flat-toggle {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm) !important;
  margin-bottom: 10px !important;
  overflow: hidden;
}

.flat-accordion .toggle-title {
  background: #fff !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 14px;
  padding: 14px 40px 14px 16px !important;
  border: none !important;
}

.flat-accordion .toggle-title:hover,
.flat-accordion .toggle-title.active {
  background: var(--brand-blue-light) !important;
  color: var(--brand-blue-dark) !important;
}

.flat-accordion .toggle-title:after {
  color: var(--brand-teal) !important;
}

.flat-accordion .toggle-content {
  background: #fff !important;
  border-top: 1px solid var(--border) !important;
  padding: 4px 16px 16px !important;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.flat-accordion .toggle-content a {
  color: var(--brand-blue) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn,
.button-button_67,
a.btn {
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: all .2s ease !important;
}

.btn-info,
.btn.btn-info,
.button-button_67.btn-info {
  background: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}

.btn-info:hover { background: var(--brand-blue-dark) !important; }

.btn-warning,
.button-button_67.btn-warning {
  background: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  color: #fff !important;
}

.btn-warning:hover { background: var(--brand-teal-dark) !important; }

.btn-default {
  background: #fff !important;
  color: var(--brand-blue-dark) !important;
  border: 2px solid #fff !important;
}

.btn-default:hover {
  background: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   6. Ô "Hỗ trợ trực tuyến" (box_support) — parallax7
   -------------------------------------------------------------------------- */
.page-title.parallax7 {
  background: linear-gradient(120deg, var(--brand-blue-darker), var(--brand-teal-dark)) !important;
}

/* --------------------------------------------------------------------------
   7. Khối tiện ích 5 ô (khcn_box)
   -------------------------------------------------------------------------- */
.shadow.fadein {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border);
  transition: transform .2s ease, box-shadow .2s ease;
}

.shadow.fadein:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md) !important;
}

.shadow.fadein .title2 a {
  color: var(--brand-blue-dark) !important;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.footer.full-color,
footer.footer {
  background: var(--brand-blue-darker) !important;
}

#bottom .section-inner {
  background: linear-gradient(135deg, var(--brand-blue-darker) 0%, #0a4a72 100%) !important;
  padding: 50px 0 30px !important;
}

.footer .widget-title,
.footer h2.widget-title.maincolor1 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 16px !important;
  position: relative;
  padding-bottom: 10px;
}

.footer .widget-title:after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 36px; height: 3px;
  background: var(--brand-teal);
  border-radius: var(--radius-pill);
}

.footer .textwidget,
.footer .widget-inner,
#bottom .widget-recent-entries .textwidget {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13.5px;
  line-height: 1.9;
}

.footer a { color: rgba(255, 255, 255, 0.78) !important; }
.footer a:hover { color: #ffffff !important; }

.footer .menu-others-container .menu li a {
  padding: 4px 0;
  display: inline-block;
}

.footer .widget.divider-widget .flat-button.style1,
#bottom .divider-widget .un-heading-wrap .flat-button.style1 {
  background: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  border-radius: var(--radius-pill) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 12px 32px !important;
}

.footer .widget.divider-widget .flat-button.style1:hover {
  background: var(--brand-teal-dark) !important;
}

#bottom-nav {
  background: var(--brand-blue-darker) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 16px 0 !important;
}

#bottom-nav .copyright,
#bottom-nav .footer-social a {
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 12.5px;
}

#bottom-nav .footer-social a:hover { color: #fff !important; }

.cd-top {
  /* Chỉ đổi background-color, KHÔNG dùng shorthand "background" — theme gốc
     dùng background-image (mũi tên cd-top-arrow.svg) để thể hiện icon, chữ
     "Top" đã bị ẩn qua text-indent. Dùng shorthand sẽ xoá mất ảnh mũi tên. */
  background-color: var(--brand-blue) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-md);
}

.cd-top:hover { background-color: var(--brand-teal) !important; }

/* --------------------------------------------------------------------------
   9. Slider / Landingpage caption polish (slider_section)
   -------------------------------------------------------------------------- */
.carousel-caption .super-heading {
  font-weight: 500 !important;
  text-shadow: 0 4px 24px rgba(0,0,0,0.35);
}

.carousel-caption .btn.btn-default {
  background: var(--brand-teal) !important;
  border-color: var(--brand-teal) !important;
  color: #fff !important;
}

.carousel-caption .btn.btn-default:hover {
  background: var(--brand-teal-dark) !important;
}

/* --------------------------------------------------------------------------
   10. Loader
   -------------------------------------------------------------------------- */
#loader.loader {
  background: var(--brand-blue-darker) !important;
}

/* --------------------------------------------------------------------------
   11. Responsive polish
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .page-title { padding: 32px 0 !important; }
  .page-title .page-title-heading h2 { font-size: 22px !important; }
  #news_annoucement { padding: 30px 0; }
}

@media (max-width: 767px) {
  .header .logo img { max-height: 42px; }
  .heading_blue { font-size: 16px !important; }
  #bottom .section-inner { padding: 34px 0 20px !important; }
}

@media (max-width: 991px) {
  /* Ở breakpoint này #mainnav bị ẩn (display:none, xem responsive.css) và
     thay bằng menu hamburger (.btn-menu) nằm ngoài header, nên chỉ còn logo
     trong hàng — canh giữa cho gọn thay vì lệch trái. */
  .header .header-wrap .header-wrap.clearfix {
    justify-content: center !important;
    min-height: 70px;
  }
}

@media (max-width: 1300px) {
  /* Menu desktop (6-7 mục) dễ bị tràn xuống dòng 2 ở độ rộng 1000-1300px —
     thu gọn khoảng cách/padding để cố gắng vừa 1 hàng hơn. */
  .header .header-wrap .header-wrap.clearfix { gap: 10px; min-height: 72px; }
  .header .logo img { max-height: 44px; }
  #mainnav.mainnav > ul.menu > li > a { padding: 8px 8px !important; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   12. Trang chủ — Tin tức nổi bật (news_inform.php) D& Sự kiện (events.php)
   -------------------------------------------------------------------------- */

/* Khối tin "Tiêu điểm" bên trái trang chủ */
.member-item-inner {
  position: relative !important;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  background: #fff;
}

/* Nhãn "Tiêu điểm": chuyển từ ribbon dọc thò ra ngoài mép (dễ vỡ layout)
   sang thẻ bo góc nằm gọn trong góc ảnh — hiện đại & không phụ thuộc vào
   việc phần tử cha có position:relative đúng chỗ hay không. */
.spotlight_label {
  left: 16px !important;
  top: 16px !important;
  right: auto;
  bottom: auto;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
  background-color: var(--brand-teal) !important;
  color: #fff !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-sm);
  z-index: 20 !important;
}

.spotlight_cat {
  background-color: var(--brand-blue-darker) !important;
  border-radius: var(--radius-pill);
  font-size: 12.5px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  bottom: 14px !important;
  left: 14px !important;
}

.member-item-inner .item-content {
  padding: 18px 22px 24px;
}

.member-item-inner .item-content .item-title a {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink) !important;
}

.member-item-inner .item-content p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
  margin-top: 8px;
}

/* Thông báo nổi bật đầu tiên (hiệu ứng viền chạy) — chỉnh màu chữ cho tương
   phản tốt trên nền xanh, đồng bộ token thương hiệu mới */
.animation_box {
  background: var(--brand-blue) !important;
}

.animation_box::after {
  background: var(--brand-blue) !important;
}

.animation_box > span,
.animation_box > p {
  color: #ffffff !important;
}

.flat-toggle > .toggle-title p {
  color: var(--brand-blue-dark) !important;
}

/* Ảnh sự kiện (poster/flyer) — ưu tiên hiện phần trên ảnh (thường chứa tiêu
   đề) thay vì crop giữa gây mất chữ */
.event-thumbnail {
  background-position: top center !important;
  border-radius: var(--radius) var(--radius) 0 0;
}

.grid-item .event-item {
  border-radius: var(--radius);
}

.flat-events .grid-item.color-full {
  background: linear-gradient(135deg, var(--brand-blue-darker), var(--brand-teal-dark)) !important;
  border-radius: var(--radius);
}

.flat-events .grid-item .grid-item-content .flat-button {
  border-radius: var(--radius-pill) !important;
}

.date-block {
  background: var(--brand-blue-darker) !important;
  border-radius: var(--radius-sm);
  top: 12px !important;
  right: 12px !important;
}

/* Logo trong footer — giữ kích thước tối thiểu để không bị bóp quá nhỏ khi
   cột hẹp */
.footer .widget-text img {
  width: 150px !important;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   13. Sidebar danh mục (blocks/block-Categories.php)
   -------------------------------------------------------------------------- */
.cat-sidebar {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.cat-sidebar__title {
  margin: 0;
  padding: 13px 16px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff !important;
  background: var(--brand-blue-dark);
}

.cat-sidebar__item {
  border-bottom: 1px solid var(--border);
}

.cat-sidebar__item:last-child {
  border-bottom: none;
}

.cat-sidebar__item > a {
  display: block;
  padding: 10px 16px;
  background: #fff;
  color: var(--ink) !important;
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}

.cat-sidebar__item > a:hover,
.cat-sidebar__item.is-active > a {
  background: var(--brand-blue-light);
  color: var(--brand-blue-dark) !important;
  padding-left: 22px;
}

.cat-sidebar__item--sub > a {
  padding-left: 30px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft) !important;
}

.cat-sidebar__item--sub > a:hover,
.cat-sidebar__item--sub.is-active > a {
  color: var(--brand-blue-dark) !important;
  padding-left: 34px;
}

.cat-sidebar__item--sub > a .fa {
  font-size: 10.5px;
  margin-right: 4px;
  color: var(--muted);
}

.cat-sidebar__item--sub.is-active > a .fa {
  color: var(--brand-teal);
}

/* --------------------------------------------------------------------------
   14. Trang "Sinh viên" (modules/Congtacsinhvien) & sidebar list-group dùng chung
   -------------------------------------------------------------------------- */

/* 14.1 — Khối 6 ô icon (Quản lý học vụ, E-Learning...). CSS gốc
   (.flat-icon .icon-post .box-title a / .box-content p) đặt màu chữ TRẮNG
   nhưng khối này không có nền tối phía sau — chữ tiêu đề & mô tả gần như vô
   hình trên nền trắng. Đóng khung lại thành thẻ (card) rõ ràng, có bóng đổ,
   dùng đúng tông thương hiệu.

   Lưu ý: các thẻ vốn dùng float (.iconbox{float:left}, col-md-4) — khi mô tả
   dài ngắn khác nhau, các thẻ cao thấp không đều khiến float xếp lệch hàng
   (3+2+1 thay vì 3+3, xem ảnh người dùng chụp thực tế). Đổi container sang
   flexbox để các thẻ trong cùng 1 hàng luôn cao bằng nhau, xếp đúng lưới. */
.flat-icon {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;
}

.flat-icon .iconbox.left.v1 {
  float: none !important;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: calc((100% - 48px) / 3);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px 22px !important;
  margin: 0 !important;
  box-sizing: border-box;
  transition: box-shadow .2s ease, transform .2s ease;
}

@media (max-width: 991px) {
  .flat-icon .iconbox.left.v1 { width: calc((100% - 24px) / 2); }
}

@media (max-width: 767px) {
  .flat-icon .iconbox.left.v1 { width: 100%; }
}

.flat-icon .iconbox.left.v1:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.flat-icon .iconbox.left .box-header {
  float: none !important;
  flex-shrink: 0;
  margin-right: 0 !important;
  background: var(--brand-blue-dark) !important;
  border-radius: var(--radius-sm);
  width: 56px !important;
  height: 56px !important;
  line-height: 56px !important;
  font-size: 24px !important;
}

.flat-icon .iconbox.left .box-header:hover {
  background: var(--brand-teal-dark) !important;
}

.flat-icon .icon-post {
  flex: 1;
  min-width: 0;
}

.flat-icon .icon-post .box-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-bottom: 6px !important;
}

.flat-icon .icon-post .box-title a {
  color: var(--ink) !important;
}

.flat-icon .iconbox.left.v1:hover .icon-post .box-title a {
  color: var(--brand-blue-dark) !important;
}

.flat-icon .icon-post .box-content p {
  color: var(--muted) !important;
  font-size: 13px !important;
  line-height: 1.6;
}

/* 14.2 — Khối video giới thiệu (.parallax8): trước đây không có nền (div
   trống, chỉ có nút play nổi trên nền trắng) — thêm nền gradient thương hiệu
   để có điểm nhấn thị giác thay vì khoảng trắng trống. */
.page-title.parallax8 {
  background: linear-gradient(135deg, var(--brand-blue-darker) 0%, var(--brand-blue-dark) 55%, var(--brand-teal-dark) 100%) !important;
  border-radius: var(--radius);
}

.page-title.parallax8 .flat-video-fancybox .overlay-inner i {
  border-color: rgba(255, 255, 255, 0.85);
}

.page-title.parallax8 .flat-video-fancybox .overlay-inner i:hover {
  background: rgba(255, 255, 255, 0.15);
}

.page-title.parallax8 h1 {
  color: #fff !important;
  font-size: 26px;
  margin-top: 16px;
}

/* 14.3 — Nút CTA cuối trang (flat-university), đồng bộ token thương hiệu
   thay vì màu xanh cũ #179bd7/#0b85c2 */
.flat-university .button-university a.color-v1,
.flat-university .button-university a.color-v2 {
  background-color: var(--brand-blue-dark) !important;
  border-color: var(--brand-blue-dark) !important;
  color: #fff !important;
}

.flat-university .button-university a.color-v1:hover,
.flat-university .button-university a.color-v2:hover {
  background-color: var(--brand-teal-dark) !important;
  border-color: var(--brand-teal-dark) !important;
}

.brand-accent {
  color: var(--brand-teal-light);
}

/* 14.4 — Sidebar dạng list-group (dùng ở Congtacsinhvien, Csvc, Donvi,
   Support...) — Bootstrap mặc định không có màu thương hiệu, thêm ở đây để
   dùng chung cho mọi module có cùng cấu trúc .sidebar .list-group. */
.sidebar .list-group {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

.sidebar .list-group-item {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 13.5px;
  transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}

.sidebar .list-group-item:last-child {
  border-bottom: none !important;
}

.sidebar .list-group-item.sidebar_header {
  background: var(--brand-blue-dark) !important;
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: .03em;
}

.sidebar .list-group-item:not(.sidebar_header) {
  background: #fff;
  color: var(--ink) !important;
}

.sidebar .list-group-item:not(.sidebar_header):hover {
  background: var(--brand-blue-light);
  color: var(--brand-blue-dark) !important;
  padding-left: 22px !important;
}

/* 14.5 — Thanh tiêu đề bài viết đè trên ảnh ở trang chi tiết (thongtin())
   trước đây là khối xám phẳng (rgba(222,222,222,.95)) — đổi sang dải
   gradient tối để chữ trắng luôn rõ và đồng bộ thương hiệu hơn. */
.congtacsinhvien-title-overlay {
  padding: 16px 20px !important;
  color: #fff !important;
  background: linear-gradient(0deg, rgba(7, 58, 92, 0.92) 0%, rgba(7, 58, 92, 0.15) 100%) !important;
  width: 100% !important;
  font-size: 19px !important;
  font-weight: 700;
  position: absolute;
  margin: auto;
  bottom: 0;
}

/* --------------------------------------------------------------------------
   15. Nút điều hướng carousel #main_slides (theme.php slider_section() &
   modules/Landingpage/slider.php) — trước đây dùng
   glyphicon-chevron-left/right nhưng font glyphicons-halflings-regular.*
   không tồn tại trong themes/university/fonts/ (chỉ có file .html thay cho
   .eot/.woff/.ttf) nên icon vỡ/ẩn. Đã đổi markup sang Font Awesome
   (<i class="fa fa-angle-left/right">).

   Thiết kế lại toàn bộ nút (không chỉ phóng to icon): CSS gốc của Bootstrap
   cho .carousel-control có opacity:.5 mặc định + dải gradient đen phủ 15%
   hai bên slide (xem .carousel-control.left/.right trong bootstrap.css) —
   khiến nút mờ nhạt, kém nổi bật dù đã phóng to icon. Đổi sang nút tròn nền
   tối trong suốt, luôn hiển thị rõ (opacity:1), canh giữa theo chiều dọc
   slide bằng top:50%+transform (ổn định hơn margin-top âm vì không phụ
   thuộc kích thước icon cụ thể), có hiệu ứng hover đổi màu thương hiệu. */
#main_slides .carousel-control {
  width: 90px;
  opacity: 1;
  background-image: none !important;
  text-shadow: none;
}

#main_slides .carousel-control .fa {
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  line-height: 52px;
  font-size: 22px;
  text-align: center;
  border-radius: var(--radius-pill, 50%);
  background: rgba(7, 58, 92, 0.55);
  color: #fff;
  transition: background-color .2s ease, transform .2s ease;
}

#main_slides .carousel-control.right .fa {
  left: auto;
  right: 30px;
}

#main_slides .carousel-control:hover .fa {
  background: var(--brand-teal, #0f9d78);
  transform: translateY(-50%) scale(1.08);
}

#main_slides .carousel-indicators li {
  border-color: rgba(255, 255, 255, 0.7);
}

#main_slides .carousel-indicators .active {
  background-color: var(--brand-teal, #0f9d78);
  border-color: var(--brand-teal, #0f9d78);
}

@media (max-width: 767px) {
  #main_slides .carousel-control {
    width: 60px;
  }
  #main_slides .carousel-control .fa {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 17px;
    left: 14px;
  }
  #main_slides .carousel-control.right .fa {
    left: auto;
    right: 14px;
  }
}

/* --------------------------------------------------------------------------
   16. Trang chủ — Khối "ĐÀO TẠO / NCKH / KHÁM CHỮA BỆNH" (#gioi-thieu) &
   khối "HOẠT ĐỘNG ĐÀO TẠO - TUYỂN SINH" (#dao-tao, modules/Landingpage/daotao.php)
   -------------------------------------------------------------------------- */

/* 16.1 — 3 ô giới thiệu (.bigblock) trước đây chỉ là khối màu xanh phẳng
   (#3dc1ff) đồng nhất, icon FontAwesome vẽ thẳng bằng ::before khá trơ.
   Đổi sang nền gradient thương hiệu, bo góc lớn hơn, thêm hiệu ứng nhấc lên
   khi hover, và bọc icon trong 1 khối tròn mờ để có chiều sâu thay vì icon
   nổi trần trên nền. */
#gioi-thieu .bigblock {
  background-color: transparent;
  background-image: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-dark) 100%);
  border-radius: var(--radius);
  padding: 18px 16px 54px 16px;
  box-shadow: var(--shadow-md);
  transition: box-shadow .25s ease, transform .25s ease;
}

#gioi-thieu .bigblock:hover {
  box-shadow: 0 20px 40px rgba(7, 58, 92, 0.35);
  transform: translateY(-6px);
}

#gioi-thieu .bigblock.block2 {
  background-image: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-teal-dark) 100%);
}

#gioi-thieu .bigblock.block3 {
  background-image: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-blue-darker) 100%);
}

#gioi-thieu .bigblock .title {
  font-weight: 800;
  letter-spacing: .03em;
}

#gioi-thieu .number-box-line {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

#gioi-thieu .number-box-line:before {
  border-color: #fff;
  background: transparent;
}

/* Bọc icon (::before của .block1/2/3, xem addition.css) trong khối tròn mờ
   để có chiều sâu thay vì icon trắng nổi trần trên nền màu. */
#gioi-thieu .bigblock:after {
  content: '';
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  z-index: 0;
}

#gioi-thieu .block1:before,
#gioi-thieu .block2:before,
#gioi-thieu .block3:before {
  z-index: 1;
  right: 32px;
  margin-bottom: 32px;
  font-size: 40px;
}

/* 16.2 — Carousel "HOẠT ĐỘNG ĐÀO TẠO - TUYỂN SINH": trước đây ảnh cao thấp
   phụ thuộc kích thước gốc (height:auto), dải overlay chỉ là 1 màu đen phẳng
   (rgba(0,0,0,.5)) cao bằng đúng vùng chữ. Đổi sang chiều cao ảnh cố định
   (đồng đều mọi thẻ), lớp gradient phủ toàn bộ nửa dưới ảnh cho chữ luôn rõ,
   bo góc + đổ bóng cho thẻ, icon mũi tên trượt sang phải khi hover. */
#dao-tao .grid-item .event-item {
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: box-shadow .25s ease, transform .25s ease;
}

#dao-tao .grid-item .event-item:hover {
  box-shadow: 0 20px 40px rgba(7, 58, 92, 0.3);
  transform: translateY(-4px);
}

#dao-tao .event-thumbnail {
  position: relative;
  height: 260px;
  overflow: hidden;
}

#dao-tao .event-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#dao-tao .event-thumbnail:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 58, 92, 0.92) 0%, rgba(7, 58, 92, 0.05) 55%, rgba(7, 58, 92, 0) 100%);
  pointer-events: none;
}

#dao-tao .event-overlay {
  background: transparent;
}

#dao-tao .event-item:hover .event-overlay {
  background: transparent;
}

#dao-tao .overlay-top {
  padding: 18px 44px 18px 22px;
  border-bottom: none;
}

#dao-tao .overlay-top h4 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

#dao-tao .overlay-top:after {
  transition: transform .2s ease;
}

#dao-tao .grid-item:hover .overlay-top:after {
  transform: translateX(5px);
}

@media (max-width: 767px) {
  #dao-tao .event-thumbnail {
    height: 200px;
  }
  #gioi-thieu .bigblock {
    padding: 24px 22px 64px 22px;
  }
}

/* --------------------------------------------------------------------------
   17. Khối "NHÀ TRƯỜNG QUA NHỮNG CON SỐ" (modules/About/index.php)
   -------------------------------------------------------------------------- */
/* Trước đây khối này dùng chung "page-title" (banner) + "flat-icon"/.iconbox
   (dùng khắp site) nên bị vỡ layout khi các phần khác của theme được chỉnh
   sửa. Đã tách class riêng (stats-counter*), dùng CSS Grid thay vì
   Bootstrap col + flex để không phụ thuộc/xung đột nơi khác. */
.stats-counter {
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, var(--brand-blue-darker) 0%, var(--brand-blue-dark) 100%);
  border-radius: var(--radius);
  padding: 48px 40px;
  box-shadow: var(--shadow-md);
}

.stats-counter__heading {
  text-align: center;
  color: #fff !important;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 40px 0;
  padding: 0 !important;
  position: relative;
}

.stats-counter__heading:after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin: 16px auto 0;
  background: var(--brand-teal);
  border-radius: var(--radius-pill, 3px);
}

.stats-counter__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 24px;
}

.stats-counter__item {
  text-align: center;
  padding: 20px 12px;
  border-radius: var(--radius-sm);
  transition: background-color .2s ease, transform .2s ease;
}

.stats-counter__item:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-4px);
}

.stats-counter__icon {
  width: 64px;
  height: 64px;
  line-height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 26px;
  color: var(--brand-teal-light, #e4f7f1);
}

.stats-counter__number {
  font-size: 34px;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.stats-counter__label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
}

@media (max-width: 991px) {
  .stats-counter__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-counter {
    padding: 36px 20px;
  }
  .stats-counter__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* --------------------------------------------------------------------------
   18. Slider trang chủ nằm trong container (modules/Landingpage/slider.php)
   -------------------------------------------------------------------------- */
/* Trước đây slider tràn hết bề ngang màn hình (theme.php cố tình không bọc
   .container cho module Landingpage). Nay bọc trong .container
   (.main-slider-contained, thêm ở slider.php) nên cần: khoảng cách trên/dưới
   thay cho việc dính sát mép trước đây, bo góc + đổ bóng cho có dạng "thẻ",
   và giảm chiều cao 85vh gốc (thiết kế cho full-bleed) xuống mức vừa phải
   hơn để tỉ lệ đẹp khi đã thu hẹp theo container thay vì tràn viewport. */
.main-slider-contained {
  margin-top: 28px;
  margin-bottom: 28px;
}

.main-slider-contained #main_slides {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.main-slider-contained #main_slides .carousel-inner .item {
  height: 60vh;
  min-height: 420px;
  max-height: 620px;
}

@media (max-width: 991px) {
  .main-slider-contained {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .main-slider-contained #main_slides {
    border-radius: var(--radius-sm);
  }
}

@media (max-width: 767px) {
  .main-slider-contained #main_slides .carousel-inner .item {
    height: auto;
    min-height: 320px;
    max-height: none;
  }
}