/* Giao diện cổng thông tin theo mẫu site Joomla cũ (template softdaklak). Nạp sau site.css; không dùng style nội tuyến. */
:root {
  --portal-blue: #033e7a;
  --portal-nav: #1a4a87;
  --portal-nav-active: #f7a21b;
  --portal-red: #b92525;
  --portal-link: #182045;
  --portal-text: #333;
  --portal-line: #ddd;
}

body.site {
  background: #f2f2f2;
  color: var(--portal-text);
  font-size: 14px;
}

.site-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ===== Header ===== */
.site-header__band {
  background: #2a7bc4 url("../img/theme/bg-header.png") center top no-repeat;
  padding: 10px 0 8px;
}

.site-header__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
}

.site-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 72px;
}

.site-header__tools {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .6rem;
}

.site-header__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  white-space: nowrap;
}

.site-header__account { display: inline-flex; align-items: center; }
.site-header__account .navbar-nav { margin: 0; padding: 0; }

.site-header__links > span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 13px;
  margin: 0 10px -2px;
  background: #fff;
}

.site-header__links a,
.site-header__links .nav-link,
.site-header__links .btn-link {
  color: #fff !important;
  text-decoration: none;
  padding: 0;
  font-size: inherit;
}

.site-header__links a:hover,
.site-header__links .btn-link:hover { text-decoration: underline; }
.site-header__links .fa { color: #ffe5b2; }
.site-header__account .navbar-nav { flex-direction: row; align-items: center; }
.site-header__account .nav-item + .nav-item::before { content: "|"; margin: 0 8px; color: #fff; }
.site-header__account .nav-item { display: inline-flex; }

.site-search {
  display: flex;
  background: #fff;
  width: 225px;
  max-width: 100%;
}

.site-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 7px 12px;
  font-style: italic;
  outline-offset: 0;
}

.site-search button {
  border: 0;
  background: #fff;
  color: #222;
  padding: 0 12px;
}

/* ===== Menu chính ===== */
.site-nav {
  background: var(--portal-nav);
  padding: 0;
}

.site-nav .navbar-nav { flex-wrap: wrap; }

.site-nav .nav-link {
  color: #fff;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 13px;
  padding: 12px 10px;
  white-space: nowrap;
  border-bottom: 0;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible,
.site-nav .nav-link.show { color: var(--portal-nav-active); }

.site-nav .nav-link.active,
.site-nav .navbar-nav > .nav-item:first-child > .nav-link {
  color: var(--portal-nav-active);
  border-bottom: 0;
}

.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .6); margin: 6px 0; }
.site-nav .navbar-toggler-icon { filter: invert(1); }

.site-nav .dropdown-menu {
  border: 0;
  border-radius: 0;
  padding: 0;
  min-width: 250px;
  margin-top: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
}

.site-nav .dropdown-item {
  color: #333;
  text-transform: uppercase;
  font-size: 11px;
  padding: 10px 20px;
  white-space: normal;
  border-bottom: 1px dotted var(--portal-line);
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus { background: #f5f5f5; color: #000; }
.site-nav .dropdown-header { text-transform: uppercase; font-size: 11px; padding: 10px 20px; }
.site-nav .dropdown-divider { display: none; }

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

/* ===== Khung nội dung ===== */
.site-main {
  background: #fff;
  padding-top: 15px;
  padding-bottom: 25px;
  flex: 1 0 auto;
}

.site-content { min-width: 0; }
.site-content:focus { outline: none; }

/* ===== Cột bên ===== */
.side { overflow: hidden; }
.side img { max-width: 100%; height: auto; }

.about-menu { margin: 0 0 10px; }

.about-menu li {
  height: 29px;
  line-height: 29px;
  padding-left: 23px;
  background: #d8e1eb url("../img/theme/lmenu-bg.png") left no-repeat;
  border-top: 1px solid #e2e9f0;
  border-bottom: 1px solid #c0c8d1;
}

.about-menu a {
  display: block;
  padding-left: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #2d2d2d;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.about-menu li:hover a { background: #b7cadc; }

.side-panel { margin-bottom: 10px; border: 1px solid #ddd; background: #fff; }

.side-panel__title {
  margin: 0;
  padding: 10px 15px;
  background: var(--portal-red);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

.side-panel__title a { color: #fff; text-decoration: none; }
.side-panel__body { background: #f9f9f9; padding: 20px 15px 10px; }
.side-panel__body--plain { background: #fff; padding: 12px 10px 4px; }

.side-block { margin-bottom: 10px; }
.side-block a { display: block; }
.side-block img { display: block; width: 100%; }
.side-block__html { overflow: hidden; }
.side-block__html p { margin: 0 0 6px; }

.side-links { margin: 25px 0; }

.side-links__title {
  margin: 0 0 10px;
  padding-left: 10px;
  border-left: 7px solid #ff9314;
  color: #010101;
  font: 700 14px/1.2 Arial, sans-serif;
}

.side-links__select { background-color: #e6e6e6; color: #555; border: 0; border-radius: 0; padding: 10px; font-size: 12px; }

.dot-list { margin: 0; padding: 0; }

.dot-list li {
  padding-left: 10px;
  margin-bottom: 10px;
  background: url("../img/theme/blue-dot.png") left 5px no-repeat;
  line-height: 1.35;
}

.dot-list a { color: var(--portal-link); text-decoration: none; }
.dot-list a:hover { color: var(--portal-blue); text-decoration: underline; }

.notice-list { max-height: 340px; overflow-y: auto; font-size: 13px; text-align: justify; }

/* ===== Trang chủ: băng chuyền, ảnh nhỏ, khối chuyên mục ===== */
.home-slider { margin-bottom: 15px; }

.home-slide { display: flex; gap: 15px; align-items: flex-start; padding-bottom: 26px; }
.home-slide__image { flex: 0 0 50%; max-width: 50%; display: block; }
.home-slide__image img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.home-slide__text { flex: 1 1 auto; min-width: 0; }
.home-slide__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.home-slide__title a { color: #111; text-decoration: none; }
.home-slide__title a:hover { color: var(--portal-blue); }
.home-slide__excerpt { margin: 0; font-size: 13px; text-align: justify; color: #555; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }

.home-slider .carousel-indicators { margin: 0; bottom: 0; justify-content: flex-start; margin-left: calc(50% + 15px); }

.home-slider .carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  border: 1px solid var(--portal-blue);
  border-radius: 50%;
  background: var(--portal-blue);
  opacity: .35;
  margin: 0 3px;
}

.home-slider .carousel-indicators .active { opacity: 1; }

.home-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 20px; }
.home-thumbs__image { display: block; border: 1px solid #ddd; }
.home-thumbs__image img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.home-thumbs__title { margin: 8px 0 0; font-size: 12px; font-weight: 700; line-height: 1.3; }
.home-thumbs__title a { color: var(--portal-link); text-decoration: none; }
.home-thumbs__title a:hover { text-decoration: underline; }

.home-section { margin-bottom: 22px; border-top: 1px solid var(--portal-line); }

.home-section__title { margin: 0 0 12px; font-size: 18px; font-weight: 700; }

.home-section__title a {
  display: inline-block;
  padding-top: 8px;
  border-top: 3px solid #2a6db5;
  margin-top: -2px;
  color: #033e7a;
  text-decoration: none;
}

.home-section__lead { display: flex; gap: 14px; margin-bottom: 12px; align-items: flex-start; }
.home-section__image { flex: 0 0 38%; max-width: 38%; border: 1px solid #ddd; display: block; }
.home-section__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-section__text { min-width: 0; flex: 1 1 auto; }
.home-section__lead-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.home-section__lead-title a { color: #111; text-decoration: none; }
.home-section__lead-title a:hover { color: var(--portal-blue); }
.home-section__excerpt { margin: 0; font-size: 12px; color: #666; text-align: justify; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

.home-section .dot-list { font-size: 13px; border-top: 1px dotted var(--portal-line); padding-top: 10px; }

/* ===== Chân trang ===== */
.site-footer { background: #033e7a; color: #fff; padding: 15px 0; font-size: 12px; }
.site-footer a { color: #fff; }
.site-footer__vnpt { display: inline-block; margin-top: 12px; }

@media (max-width: 767.98px) {
  .home-slide { flex-direction: column; }
  .home-slide__image { flex-basis: auto; max-width: 100%; }
  .home-slider .carousel-indicators { margin-left: 0; justify-content: center; }
  .home-thumbs { grid-template-columns: 1fr; }
  .site-header__tools { align-items: flex-start; }
}