/* News Featured Section */
.news-featured {
  padding: 80px 0;
  background-color: #fff;
}

.news-featured-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 40px;
}

/* Main featured news - spans 2 columns */
.news-featured-main {
  grid-column: span 2;
  grid-row: span 1;
}

.news-featured-card-main {
  display: block;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.news-featured-card-main:hover {
  transform: translateY(-4px);
}

.news-featured-main-image {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 400px;
  border-radius: 8px;
}

.news-featured-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-featured-card-main:hover .news-featured-main-image img {
  transform: scale(1.05);
}

.news-featured-date {
  position: absolute;
  top: 24px;
  left: 24px;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 12px 20px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.date-day {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
}

.date-location {
  font-size: 11px;
  font-weight: 600;
  color: #757575;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Main content - right column */
.news-featured-main-content {
  grid-column: span 1;
  grid-row: span 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 40px 0;
}

.news-featured-main-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1.4;
  transition: color 0.3s ease;
}

.news-featured-main-content:hover h3 {
  color: #d85f1a;
}

.news-featured-main-content p {
  font-size: 16px;
  color: #707070;
  line-height: 1.6;
}

/* Bottom row - 3 smaller cards */
.news-featured-card-small {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.news-featured-card-small:hover {
  transform: translateY(-4px);
}

.news-featured-small-image {
  position: relative;
  overflow: hidden;
  height: 200px;
  border-radius: 8px 8px 0 0;
}

.news-featured-small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-featured-card-small:hover .news-featured-small-image img {
  transform: scale(1.05);
}

.news-featured-small-content {
  padding: 20px 0;
  flex: 1;
}

.news-featured-small-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.news-featured-card-small:hover .news-featured-small-content h3 {
  color: var(--cl-primary);
}

/* View more button */
.news-featured-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
}

.btn-view-more img {
  width: 16px;
  height: 16px;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .news-featured-wrapper {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .news-featured-main,
  .news-featured-main-content {
    grid-column: span 1;
  }

  .news-featured-main-image {
    min-height: 300px;
  }

  .news-featured-main-content {
    padding: 12px 0;
  }
}

@media screen and (max-width: 767px) {
  .news-featured {
    padding: 40px 0;
  }

  .news-featured-wrapper {
    gap: 8px;
    margin-top: 24px;
  }

  /* Main card on mobile */
  .news-featured-card-main {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }

  .news-featured-main-image {
    min-height: 180px;
    height: 180px;
    border-radius: 8px 8px 0 0;
  }

  .news-featured-date {
    top: 12px;
    left: 12px;
    padding: 6px 12px;
  }

  .date-day {
    font-size: 12px;
  }

  .date-location {
    font-size: 8px;
  }

  /* Main content on mobile */
  .news-featured-main-content {
    gap: 8px;
  }

  .news-featured-main-content h3 {
    font-size: 14px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .news-featured-main-content p {
    font-size: 12px;
    color: #707070;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .overview-detail-banner h1 {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    max-width: 1252px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    color: var(--cl-primary);
    font-size: 54px;
    font-weight: 700;
  }

  /* Small cards on mobile */
  .news-featured-card-small {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
    border-radius: 0;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
  }

  .news-featured-card-small:last-child {
    border-bottom: none;
  }

  .news-featured-small-image {
    height: 80px;
    border-radius: 4px;
  }

  .news-featured-small-content {
    padding: 0;
    display: flex;
    align-items: center;
  }

  .news-featured-small-content h3 {
    font-size: 14px;
    font-weight: 700;
    -webkit-line-clamp: 3;
    line-height: 1.4;
  }

  .news-featured-footer {
    margin-top: 20px;
  }

  .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 10px 24px;
    font-size: 14px;
  }

  .btn-view-more img {
    width: 14px;
    height: 14px;
  }

  .school-activities::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    background-image: url("../images/major-detail-feature-decor.svg");
    background-size: cover;
    /* Đổi từ contain sang cover */
    background-position: top center;
    /* Thêm center */
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    z-index: 1;
    /* Giống major-detail */
    pointer-events: none;
  }
}

/* Admission News Section */
.admission-news {
  padding: 80px 0;
  background-color: #fafafa;
  position: relative;
  overflow: hidden;
  /* Thêm để control decoration */
}

.admission-news::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-image: url("../images/major-detail-feature-decor.svg");
  background-size: contain;
  /* Đổi từ contain sang cover */
  background-position: top center;
  /* Thêm center */
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Giống major-detail */
  pointer-events: none;
}

.admission-news .container {
  position: relative;
  z-index: 10;
}

/* Đảm bảo tất cả content có z-index cao hơn decoration */
.admission-news .intro-title,
.admission-news-wrapper,
.admission-news-footer {
  position: relative;
  z-index: 10;
}

.admission-news .intro-title {
  margin-bottom: 40px;
}

.admission-news-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 32px;
  margin-bottom: 40px;
}

/* Left sidebar - 2 small cards */
.admission-news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admission-news-small-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* Thêm shadow nhẹ */
}

.admission-news-small-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.admission-news-small-image {
  position: relative;
  overflow: hidden;
  height: 180px;
  border-radius: 8px 8px 0 0;
}

.admission-news-small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.admission-news-small-card:hover .admission-news-small-image img {
  transform: scale(1.05);
}

.admission-news-small-content {
  padding: 16px;
  background: #fafafa;
}

.admission-news-small-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.admission-news-small-card:hover .admission-news-small-content h3 {
  color: var(--cl-primary);
}

/* Right side - Main featured card */
.admission-news-main {
  display: flex;
}

.admission-news-main-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.admission-news-main-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.admission-news-main-image {
  position: relative;
  overflow: hidden;
  height: 320px;
  border-radius: 8px 8px 0 0;
}

.admission-news-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.admission-news-main-card:hover .admission-news-main-image img {
  transform: scale(1.05);
}

.admission-news-main-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
}

.admission-news-main-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1.4;
  transition: color 0.3s ease;
}

.admission-news-main-card:hover .admission-news-main-content h3 {
  color: #d85f1a;
}

.admission-news-main-content p {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* View more button */
.admission-news-footer {
  display: flex;
  justify-content: center;
}

.admission-news .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
}

.admission-news .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}

.admission-news .btn-view-more img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.admission-news .btn-view-more:hover img {
  transform: translateY(2px);
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .admission-news {
    padding: 60px 0;
  }

  .overview-detail-banner h1 {
    font-size: 36px;
  }

  .admission-news-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .admission-news-main-image {
    height: 260px;
  }

  .admission-news-small-image {
    height: 160px;
  }
}

@media screen and (max-width: 767px) {
  .admission-news {
    padding: 40px 0;
  }

  .overview-detail-banner h1 {
    font-size: 18px;
  }

  .admission-news::before {
    background-size: contain;
    /* Mobile dùng contain để không bị crop */
    background-position: top center;
  }

  .admission-news .intro-title {
    margin-bottom: 24px;
  }

  .admission-news-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
  }

  /* Change order: main card first on mobile */
  .admission-news-main {
    order: -1;
  }

  .admission-news-sidebar {
    gap: 20px;
  }

  /* Main card styling on mobile */
  .admission-news-main-card {
    border-radius: 8px;
    overflow: hidden;
  }

  .admission-news-main-image {
    height: 200px;
    border-radius: 8px 8px 0 0;
  }

  .admission-news-main-content {
    padding: 16px;
    gap: 8px;
    background: #fff;
  }

  .admission-news-main-content h3 {
    font-size: 16px;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .admission-news-main-content p {
    font-size: 13px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }

  /* Small cards styling on mobile */
  .admission-news-small-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    border-radius: 0;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
    background: transparent;
    box-shadow: none;
  }

  .admission-news-small-card:last-child {
    border-bottom: none;
  }

  .admission-news-small-card:hover {
    transform: none;
    box-shadow: none;
  }

  .admission-news-small-image {
    height: 90px;
    border-radius: 4px;
  }

  .admission-news-small-content {
    padding: 0;
    display: flex;
    align-items: center;
    background: transparent;
  }

  .admission-news-small-content h3 {
    font-size: 14px;
    font-weight: 700;
    -webkit-line-clamp: 3;
    line-height: 1.4;
  }

  .admission-news .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }

  .admission-news .btn-view-more img {
    width: 16px;
    height: 16px;
  }
}

/* School Activities Section */
.school-activities {
  padding: 80px 0;
  background-color: #fff;
}

.school-activities-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  gap: 15px;
}

.school-activities-title {
  font-size: 44px;
  font-weight: 700;
  color: #242424;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.school-activities-title strong {
  color: var(--cl-primary);
  font-weight: 700;
}

.school-activities-title .title-common-decor-right {
  margin-left: auto;
}

.school-activities-tabs {
  display: flex;
  gap: 12px;
}

.activity-tab {
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  color: #242424;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.activity-tab.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.activity-tab:hover:not(.active) {
  opacity: 0.8;
}

/* Tab Content */
.activity-tab-content {
  display: none;
}

.activity-tab-content.active {
  display: block;
}

/* Activity Slider */
.activity-slider {
  margin-bottom: 40px;
  padding-bottom: 60px;
}

.activity-slider .swiper-wrapper {
  display: flex;
}

.activity-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-bottom: 24px;
}

.activity-image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 320px;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.activity-card:hover .activity-image img {
  transform: scale(1.05);
}

.activity-content {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.activity-card:hover .activity-content h3 {
  color: var(--cl-primary);
}

.activity-content p {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Swiper Navigation */
.activity-slider .swiper-button-next,
.activity-slider .swiper-button-prev {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  top: 40%;
}

.activity-slider .swiper-button-next:after,
.activity-slider .swiper-button-prev:after {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
}

.activity-slider .swiper-button-next:hover,
.activity-slider .swiper-button-prev:hover {
  background-color: var(--cl-primary);
}

.activity-slider .swiper-button-next:hover:after,
.activity-slider .swiper-button-prev:hover:after {
  color: #fff;
}

.activity-slider .swiper-pagination {
  bottom: 0 !important;
}

.activity-slider .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #d9d9d9;
  opacity: 1;
}

.activity-slider .swiper-pagination-bullet-active {
  background-color: var(--cl-primary);
  width: 32px;
  border-radius: 6px;
}

/* Footer */
.activity-footer {
  display: flex;
  justify-content: center;
}

.activity-footer .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.activity-footer .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
}

.activity-footer .btn-view-more img {
  width: 16px;
  height: 16px;
}

/* Mobile only utility class */
.mobile-only {
  display: none;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .school-activities-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .title-common-decor-right {
    width: 100%;
  }

  .school-activities-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .activity-tab {
    padding: 10px 24px;
    font-size: 14px;
    white-space: nowrap;
  }
}

@media screen and (max-width: 767px) {
  .school-activities {
    padding: 40px 0;
  }

  .school-activities-title {
    font-size: 24px;
    width: 100%;
  }

  .school-activities-header {
    margin-bottom: 24px;
    margin-top: 30px;
  }

  /* Show mobile-only elements on mobile */
  .mobile-only {
    display: flex;
  }

  .activity-tab {
    padding: 8px 20px;
    font-size: 14px;
  }

  .activity-slider {
    margin-bottom: 24px;
    padding-bottom: 50px;
  }

  .activity-image {
    height: 200px;
  }

  .activity-content {
    padding: 16px 0;
    gap: 8px;
  }

  .activity-content h3 {
    font-size: 16px;
  }

  .activity-content p {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }

  .activity-slider .swiper-button-next,
  .activity-slider .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  .activity-slider .swiper-button-next:after,
  .activity-slider .swiper-button-prev:after {
    font-size: 16px;
  }

  .activity-footer .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* Events Section */
.events-section {
  padding: 80px 0;
  background-color: #fafafa;
}

.events-wrapper {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 40px;
  margin-top: 40px;
}

/* Featured Event - Left (7fr) */
.events-featured {
  order: 1;
}

.events-featured-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.events-featured-image {
  position: relative;
  overflow: hidden;
  height: 420px;
}

.events-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.events-featured-card:hover .events-featured-image img {
  transform: scale(1.05);
}

.events-featured-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.events-featured-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  line-height: 1.4;
}

.events-featured-content p {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
}

.events-featured-meta {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}
.event-time img {
  object-fit: contain;
}
.event-location img {
  object-fit: contain;
}
.event-time,
.event-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #707070;
}

.event-time img,
.event-location img {
  width: 16px;
  height: 16px;
}

/* Calendar and Events List - Right (3fr) */
.events-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  order: 2;
}

.events-calendar-wrapper {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
}

.calendar-title {
  font-size: 18px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 16px;
}

/* Vanilla Calendar Styling */
#eventsCalendar {
  width: 100%;
}

.vanilla-calendar {
  width: 100%;
  font-family: 'Roboto', sans-serif;
}

.vanilla-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.vanilla-calendar-header__label {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
}

.vanilla-calendar-header__button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 18px;
  color: #707070;
  transition: color 0.3s ease;
}

.vanilla-calendar-header__button:hover {
  color: var(--cl-primary);
}

.vanilla-calendar-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}

.vanilla-calendar-week__day {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: #707070;
  padding: 8px 0;
  text-transform: uppercase;
}

.vanilla-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.vanilla-calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  color: #242424;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: #fff;
  border: 1px solid #e5e5e5;
}

.vanilla-calendar-day:hover:not(.is-other-month) {
  background-color: #fff9f6;
  border-color: var(--cl-primary);
}

.vanilla-calendar-day.is-today {
  background-color: var(--cl-primary);
  color: #fff;
  font-weight: 700;
  border-color: var(--cl-primary);
}

.vanilla-calendar-day.is-selected {
  background-color: var(--cl-primary);
  color: #fff;
  border-color: var(--cl-primary);
}

/* Ngày highlight (sự kiện mới nhất) - chỉ tô màu cam nếu không phải ngày hiện tại */
.vanilla-calendar-day.is-highlighted:not(.is-today) {
  background-color: #ff6b35;
  color: #fff;
  font-weight: 700;
  border-color: #ff6b35;
}

/* Nếu ngày highlight trùng ngày hiện tại, chỉ thêm chấm nhỏ màu cam */
.vanilla-calendar-day.is-today.is-highlighted {
  background-color: var(--cl-primary);
  color: #fff;
  font-weight: 700;
  border-color: var(--cl-primary);
}

.vanilla-calendar-day.is-today.is-highlighted::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background-color: #ff6b35;
  border-radius: 50%;
}

.vanilla-calendar-day.is-highlighted.has-event::after {
  background-color: #fff;
}

.vanilla-calendar-day.is-highlighted:not(.is-today).has-event::after {
  background-color: #fff;
}

.vanilla-calendar-day.has-event::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: var(--cl-primary);
  border-radius: 50%;
}

.vanilla-calendar-day.is-today.has-event::after,
.vanilla-calendar-day.is-selected.has-event::after {
  background-color: #fff;
}

.vanilla-calendar-day.is-other-month {
  color: #d9d9d9;
  background: transparent;
  border-color: transparent;
  cursor: default;
}

/* Events List */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.event-item:hover {
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--cl-primary);
  border-radius: 4px;
  padding: 8px 12px;
  min-width: 60px;
  flex-shrink: 0;
}

.event-month {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
}

.event-day {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.event-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: #242424;
  line-height: 1.3;
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-meta .event-time,
.event-meta .event-location {
  font-size: 12px;
  color: #707070;
}

.event-meta img {
  width: 14px;
  height: 14px;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .events-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .events-featured-image {
    height: 300px;
  }
}

@media screen and (max-width: 767px) {
  .events-section {
    padding: 40px 0;
  }

  .events-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
  }

  /* Change order on mobile: Calendar -> Event List -> Featured Event */
  .events-sidebar {
    order: 1;
    gap: 20px;
  }

  .events-featured {
    order: 2;
  }

  /* Calendar wrapper on mobile */
  .events-calendar-wrapper {
    padding: 16px;
  }

  .calendar-title {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .vanilla-calendar-header__label {
    font-size: 14px;
  }

  .vanilla-calendar-header__button {
    font-size: 16px;
    padding: 4px;
  }

  .vanilla-calendar-week__day {
    font-size: 11px;
    padding: 6px 0;
  }

  .vanilla-calendar-days {
    gap: 4px;
  }

  .vanilla-calendar-day {
    font-size: 13px;
  }

  /* Event list on mobile */
  .events-list {
    gap: 12px;
  }

  .event-item {
    padding: 12px;
    gap: 12px;
  }

  .event-date {
    min-width: 55px;
    padding: 8px 10px;
  }

  .event-month {
    font-size: 10px;
  }

  .event-day {
    font-size: 20px;
  }

  .event-info h4 {
    font-size: 14px;
    line-height: 1.4;
  }

  .event-meta .event-time,
  .event-meta .event-location {
    font-size: 11px;
  }

  .event-meta img {
    width: 12px;
    height: 12px;
  }

  /* Featured event on mobile */
  .events-featured-image {
    height: 200px;
    border-radius: 8px 8px 0 0;
  }

  .events-featured-content {
    padding: 16px;
  }

  .events-featured-content h3 {
    font-size: 16px;
  }

  .events-featured-content p {
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .events-featured-meta {
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }

  .event-time,
  .event-location {
    font-size: 12px;
  }

  .event-time img,
  .event-location img {
    width: 14px;
    height: 14px;
  }
}

/* All Events Section */
.all-events-section {
  padding: 80px 0;
  background-color: #fff;
}

/* Event Tabs */
.event-tabs {
  display: flex;
  gap: 12px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.event-tab {
  padding: 12px 24px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #242424;
}

.event-tab.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.event-tab:hover:not(.active) {
  opacity: 0.8;
}

/* Events Grid */
.all-events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

/* Event Card */
.all-event-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e5e5;
  transition: all 0.3s ease;
}

.all-event-card.hidden {
  display: none;
}

.all-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.all-event-image {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.all-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.all-event-card:hover .all-event-image img {
  transform: scale(1.05);
}

.all-event-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.all-event-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.all-event-card:hover .all-event-content h3 {
  color: var(--cl-primary);
}

.all-event-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.all-event-time,
.all-event-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #707070;
}

.all-event-time img,
.all-event-location img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
}

/* View More Button */
.all-events-footer {
  display: flex;
  justify-content: center;
}

.all-events-footer .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.all-events-footer .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
}

.all-events-footer .btn-view-more img {
  width: 16px;
  height: 16px;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .all-events-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .event-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .event-tab {
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .all-events-section {
    padding: 40px 0;
  }

  .event-tabs {
    margin: 24px 0;
    gap: 8px;
  }

  .event-tab {
    padding: 8px 16px;
    font-size: 13px;
  }

  .all-events-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 24px;
  }

  /* Mobile: Ảnh bên trái, text bên phải */
  .all-event-card {
    flex-direction: row;
    align-items: stretch;
  }

  .all-event-image {
    order: 1;
    width: 120px;
    min-width: 120px;
    height: 100%;
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
  }

  .all-event-image img {
    height: 100%;
    object-fit: cover;
    border-radius: 8px 0 0 8px;
  }

  .all-event-content {
    order: 2;
    flex: 1;
    padding: 16px;
    display: flex;
    flex-direction: column;
  }

  .all-event-content h3 {
    font-size: 14px;
  }

  .all-event-time,
  .all-event-location {
    font-size: 12px;
  }

  .all-event-time img,
  .all-event-location img {
    width: 12px;
    height: 12px;
  }

  .all-events-footer .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* TRANG EVENT */

/* Featured News Section */
.featured-news {
  padding: 80px 0;
  background-color: #fff;
  position: relative;
  overflow: visible;
}

.featured-news::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  max-height: 450px;
  background-image: url("../images/intro-decor.svg");
  background-size: 100% auto;
  /* Thay đổi: width 100%, height tự động */
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.featured-news .container {
  position: relative;
  z-index: 1;
}

.featured-news-wrapper {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 32px;
  margin-top: 40px;
}

/* Main Featured Card - Left (7fr) */
.featured-news-main-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.featured-news-main-card:hover {
  transform: translateY(-4px);
}

.featured-news-main-image {
  position: relative;
  overflow: hidden;
  height: 380px;
}

.featured-news-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-news-main-card:hover .featured-news-main-image img {
  transform: scale(1.05);
}

.featured-news-main-content {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.featured-news-main-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.featured-news-main-card:hover .featured-news-main-content h3 {
  color: var(--cl-primary);
}

.featured-news-main-content p {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sidebar - Right (3fr) */
.featured-news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.featured-news-small-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.3s ease;
}

.featured-news-small-card:hover {
  transform: translateY(-4px);
}

.featured-news-small-image {
  position: relative;
  overflow: hidden;
  height: 178px;
  border-radius: 8px 8px 0 0;
}

.featured-news-small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-news-small-card:hover .featured-news-small-image img {
  transform: scale(1.05);
}

.featured-news-small-content {
  padding: 16px 0;
}

.featured-news-small-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.featured-news-small-card:hover .featured-news-small-content h3 {
  color: var(--cl-primary);
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .featured-news-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .featured-news-main-image {
    height: 300px;
  }

  .featured-news-small-image {
    height: 200px;
  }
}

@media screen and (max-width: 767px) {
  .featured-news {
    padding: 40px 0;
  }

  .featured-news-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 24px;
  }

  /* Main card on mobile */
  .featured-news-main-image {
    height: 200px;
    border-radius: 8px 8px 0 0;
  }

  .featured-news-main-content {
    padding: 16px 0;
    gap: 8px;
  }

  .featured-news-main-content h3 {
    font-size: 16px;
  }

  .featured-news-main-content p {
    font-size: 13px;
    -webkit-line-clamp: 3;
  }

  /* Sidebar on mobile - grid 2 columns */
  .featured-news-sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .featured-news-small-card {
    border-radius: 8px;
  }

  .featured-news-small-image {
    height: 120px;
    border-radius: 8px 8px 0 0;
  }

  .featured-news-small-content {
    padding: 12px 8px;
  }

  .featured-news-small-content h3 {
    font-size: 13px;
    line-height: 1.4;
    -webkit-line-clamp: 3;
  }
}

/* News List Section */
.news-list-section {
  padding: 80px 0;
  background-color: #fafafa;

}

.news-list-wrapper {
  display: grid;
  grid-template-columns: 1fr 345px;
  gap: 40px;
}

/* News List Main */
.news-list-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* News Item */
.news-list-item {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.news-list-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.news-list-link {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 20px;
}

.news-list-thumb {
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 8px;
  height: 120px;
}

.news-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.news-list-item:hover .news-list-thumb img {
  transform: scale(1.05);
}

.news-list-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-list-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: #242424;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.news-list-item:hover .news-list-title {
  color: var(--cl-primary);
}

.news-list-excerpt {
  font-size: 13px;
  color: var(--cl-text-light);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pagination */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.news-pagination ul {
  display: flex !important;
  /* Sửa từ block thành flex */
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 20px 0;
}

.news-pagination li {
  margin: 0;
}

/* Styling cho page numbers */
.news-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  min-width: 40px;
  text-align: center;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: normal;
}

/* Current page highlight */
.news-pagination .current {
  background-color: #FF6633 !important;
  color: white !important;
  font-weight: bold;
  border-radius: 4px;
}

/* Previous & Next buttons */
.news-pagination .prev,
.news-pagination .next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
}

/* Fix Font Awesome icons */
.news-pagination i {
  font-weight: 900;
  font-size: 14px;
}

/* Dots styling */
.news-pagination .dots {
  padding: 8px 4px;
  color: #999;
  cursor: default;
}

/* Hover effect */
.news-pagination a:hover:not(.current) {
  background-color: #f0f0f0;
}

.pagination-btn,
.pagination-num {
  min-width: 40px;
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--cl-border);
  background: #fff;
  color: #242424;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.pagination-btn:hover:not(:disabled),
.pagination-num:hover {
  background-color: #fff9f6;
  border-color: var(--cl-primary);
  color: var(--cl-primary);
}

.pagination-num.active {
  background-color: var(--cl-primary);
  border-color: var(--cl-primary);
  color: #fff;
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination-dots {
  padding: 0 8px;
  color: var(--cl-text-light);
  font-weight: 500;
}

/* Sidebar */
.news-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

.sidebar-banner {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sidebar-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background-color: var(--cl-primary);
  /* Background chuyển sang cam khi hover */
}

.sidebar-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 345 / 200;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

.sidebar-banner-label {
  position: static;
  display: block;
  padding: 16px;
  padding-left: 24px;
  /* Thêm padding-left để tạo khoảng cách cho border */
  background: #fff;
  border-radius: 0 0 8px 8px;
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  text-align: center;
  border-left: 4px solid var(--cl-primary);
  /* Border bên trái màu cam */
  transition: all 0.3s ease;
}

/* Hover effect - text chuyển trắng */
.sidebar-banner:hover .sidebar-banner-label {
  color: #fff;
  background-color: var(--cl-primary);
  border-left-color: #fff;
  /* Border chuyển sang trắng khi hover */
}

/* Responsive Design */
@media screen and (max-width: 1023px) {
  .news-list-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .news-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .sidebar-banner img {
    aspect-ratio: 16 / 9;
  }

  .sidebar-banner-label {
    padding: 12px;
    padding-left: 20px;
    font-size: 14px;
  }
}

@media screen and (max-width: 767px) {
  .news-list-section {
    padding: 40px 0;
  }

  .news-list-wrapper {
    gap: 24px;
  }

  .news-list-main {
    gap: 16px;
  }

  .news-list-link {
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 12px;
  }

  .news-list-thumb {
    height: 80px;
  }

  .news-list-title {
    font-size: 14px;
  }

  .news-list-excerpt {
    font-size: 12px;
    -webkit-line-clamp: 2;
  }

  .news-sidebar {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .sidebar-banner img {
    aspect-ratio: 16 / 9;
  }

  .sidebar-banner-label {
    padding: 12px;
    padding-left: 20px;
    font-size: 14px;
  }

  .pagination-btn,
  .pagination-num {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
  }

  .pagination-btn span {
    display: none;
  }

  .pagination-btn {
    padding: 0 12px;
  }
}

@media screen and (max-width: 480px) {
  .news-list-link {
    grid-template-columns: 90px 1fr;
    gap: 10px;
    padding: 10px;
  }

  .news-list-thumb {
    height: 70px;
  }

  .pagination-num {
    display: none;
  }

  .pagination-num.active {
    display: flex;
  }

  .pagination-dots {
    display: none;
  }
}

/* Major News Section */
.major-news-section {
  padding: 80px 0;
  background-color: #fff;
}

/* Category Tabs */
.major-news-tabs {
  display: flex;
  gap: 12px;
  margin: 40px 0 32px;
  overflow-x: auto;
  scrollbar-width: none;
  border: none !important;
}

.major-news-tabs::-webkit-scrollbar {
  display: none;
}

.major-news-tab {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.3s ease;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  border: none;
  outline: none;
  cursor: pointer;
}

.major-news-tab.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.major-news-tab:hover:not(.active) {
  opacity: 0.8;
}

/* News Slider */
.major-news-slider {
  position: relative;
  padding: 0 50px;
  margin-bottom: 40px;
}

.major-news-slider .swiper-wrapper {
  display: flex;
}

.major-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.major-news-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
}

.major-news-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.major-news-image {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.major-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.major-news-link:hover .major-news-image img {
  transform: scale(1.05);
}

.major-news-content {
  padding: 20px;
  flex: 1;
  display: flex;
  align-items: center;
}

.major-news-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.major-news-link:hover .major-news-content h3 {
  color: var(--cl-primary);
}

/* Swiper Navigation */
.major-news-slider .swiper-button-prev,
.major-news-slider .swiper-button-next {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  top: 40%;
}

.major-news-slider .swiper-button-prev {
  left: 0;
}

.major-news-slider .swiper-button-next {
  right: 0;
}

.major-news-slider .swiper-button-prev:after,
.major-news-slider .swiper-button-next:after {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
}

.major-news-slider .swiper-button-prev:hover,
.major-news-slider .swiper-button-next:hover {
  background-color: var(--cl-primary);
}

.major-news-slider .swiper-button-prev:hover:after,
.major-news-slider .swiper-button-next:hover:after {
  color: #fff;
}

/* View More Button */
.major-news-footer {
  display: flex;
  justify-content: center;
}

.major-news-footer .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.major-news-footer .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
}

.major-news-footer .btn-view-more img {
  width: 16px;
  height: 16px;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .major-news-tabs {
    margin: 32px 0 24px;
  }

  .major-news-tab {
    padding: 10px 20px;
    font-size: 14px;
  }

  .major-news-slider {
    padding: 0 40px;
  }
}

@media screen and (max-width: 767px) {
  .major-news-section {
    padding: 40px 0;
  }

  .major-news-tabs {
    margin: 24px 0 20px;
    gap: 8px;
  }

  .major-news-tab {
    padding: 8px 16px;
    font-size: 13px;
  }

  .major-news-slider {
    padding: 0;
    margin-bottom: 24px;
  }

  .major-news-image {
    height: 180px;
  }

  .major-news-content {
    padding: 16px;
  }

  .major-news-content h3 {
    font-size: 14px;
  }

  .major-news-slider .swiper-button-prev,
  .major-news-slider .swiper-button-next {
    width: 40px;
    height: 40px;
    display: none;
  }

  .major-news-slider .swiper-button-prev:after,
  .major-news-slider .swiper-button-next:after {
    font-size: 16px;
  }

  .major-news-footer .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }
}


/* Campus Tabs Section */
.campus-tabs-section {
  padding: 80px 0;
  background-color: #fff;
}

/* Category Tabs */
.campus-tabs-list {
  display: flex;
  gap: 12px;
  margin: 40px 0 32px;
  overflow-x: auto;
  scrollbar-width: none;
  border: none !important;
}

.campus-tabs-list::-webkit-scrollbar {
  display: none;
}

.campus-tab-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.3s ease;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  border: none;
  outline: none;
  cursor: pointer;
}

.campus-tab-btn.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.campus-tab-btn:hover:not(.active) {
  opacity: 0.8;
}

/* News Slider */
.campus-tabs-slider {
  position: relative;
  padding: 0 50px;
  margin-bottom: 40px;
}

.campus-tabs-slider .swiper-wrapper {
  display: flex;
}

.campus-tabs-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.campus-tabs-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
}

.campus-tabs-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.campus-tabs-image {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.campus-tabs-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.campus-tabs-link:hover .campus-tabs-image img {
  transform: scale(1.05);
}

.campus-tabs-content {
  padding: 20px;
  flex: 1;
  display: flex;
  align-items: center;
}

.campus-tabs-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.campus-tabs-link:hover .campus-tabs-content h3 {
  color: var(--cl-primary);
}

/* Swiper Navigation */
.campus-tabs-slider .swiper-button-prev,
.campus-tabs-slider .swiper-button-next {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  top: 40%;
}

.campus-tabs-slider .swiper-button-prev {
  left: 0;
}

.campus-tabs-slider .swiper-button-next {
  right: 0;
}

.campus-tabs-slider .swiper-button-prev:after,
.campus-tabs-slider .swiper-button-next:after {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
}

.campus-tabs-slider .swiper-button-prev:hover,
.campus-tabs-slider .swiper-button-next:hover {
  background-color: var(--cl-primary);
}

.campus-tabs-slider .swiper-button-prev:hover:after,
.campus-tabs-slider .swiper-button-next:hover:after {
  color: #fff;
}

/* View More Button */
.campus-tabs-footer {
  display: flex;
  justify-content: center;
}

.campus-tabs-footer .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.campus-tabs-footer .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
}

.campus-tabs-footer .btn-view-more img {
  width: 16px;
  height: 16px;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .campus-tabs-list {
    margin: 32px 0 24px;
  }

  .campus-tab-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .campus-tabs-slider {
    padding: 0 40px;
  }
}

@media screen and (max-width: 767px) {
  .campus-tabs-section {
    padding: 40px 0;
  }

  .campus-tabs-list {
    margin: 24px 0 20px;
    gap: 8px;
  }

  .campus-tab-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .campus-tabs-slider {
    padding: 0;
    margin-bottom: 24px;
  }

  .campus-tabs-image {
    height: 180px;
  }

  .campus-tabs-content {
    padding: 16px;
  }

  .campus-tabs-content h3 {
    font-size: 14px;
  }

  .campus-tabs-slider .swiper-button-prev,
  .campus-tabs-slider .swiper-button-next {
    width: 40px;
    height: 40px;
    display: none;
  }

  .campus-tabs-slider .swiper-button-prev:after,
  .campus-tabs-slider .swiper-button-next:after {
    font-size: 16px;
  }

  .campus-tabs-footer .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }
}


/* Article Detail Section */
.article-detail-section {
  padding: 80px 0;
  background-color: var(--cl-bg-light);
}

.article-detail-wrapper {
  display: grid;
  grid-template-columns: 1fr 345px;
  gap: 40px;
}

/* Article Main Content */
.article-detail-main {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
}

/* Article Header */
.article-header {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--cl-border);
}

.article-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  color: #242424;
  margin-bottom: 16px;
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cl-primary);
  font-size: 14px;
  font-weight: 500;
}

.article-meta .meta-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Article Quote */
.article-quote {
  background: #fff3f0;
  border-radius: 8px;
  padding: 48px 32px 28px 32px;
  margin: 32px 0;
  position: relative;
}

.quote-icon {
  position: absolute;
  top: -28px;
  left: 32px;
  width: 56px;
  height: 56px;
}

.quote-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.article-quote p {
  font-size: 16px;
  line-height: 1.8;
  color: #1a1a1a;
  font-weight: 600;
  margin: 0;
  text-align: left;
}

/* Responsive */
@media screen and (max-width: 767px) {
  .article-quote {
    padding: 40px 20px 24px 20px;
    margin: 24px 0;
  }

  .quote-icon {
    top: -22px;
    left: 20px;
    width: 44px;
    height: 44px;
  }

  .article-quote p {
    font-size: 15px;
    line-height: 1.7;
  }
}

@media screen and (max-width: 480px) {
  .article-quote {
    padding: 36px 16px 20px 16px;
  }

  .quote-icon {
    top: -20px;
    left: 16px;
    width: 40px;
    height: 40px;
  }

  .article-quote p {
    font-size: 14px;
    line-height: 1.6;
  }
}

/* Article Section */
.article-section {
  margin: 32px 0;
}

.section-title {
  font-size: 24px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 16px;
  line-height: 1.3;
}

.section-text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
  text-align: justify;
}

/* Article Figure */
.article-figure {
  margin: 32px 0;
}

.article-figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.article-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: #777;
  font-style: italic;
  text-align: center;
  padding: 0 20px;
}

/* Sidebar */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 20px;
  height: fit-content;
}

/* Sidebar Widget */
.sidebar-widget {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.widget-title {
  font-size: 18px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cl-primary);
}

/* Latest Posts */
.latest-posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.latest-post-item {
  transition: transform 0.3s ease;
}

.latest-post-item:hover {
  transform: translateX(4px);
}

.latest-post-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.latest-post-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
}

.latest-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.latest-post-item:hover .latest-post-thumb img {
  transform: scale(1.1);
}

.latest-post-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #242424;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.latest-post-item:hover .latest-post-title {
  color: var(--cl-primary);
}

/* Sidebar Banners Slider */
.sidebar-banners-slider {
  position: relative;
}

.sidebar-banners-slider .swiper-wrapper {
  display: flex;
}

.sidebar-banner {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.sidebar-banner a {
  display: block;
}

.sidebar-banner:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar-banner img {
  width: 100%;
  height: auto;
  aspect-ratio: 345 / 200;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
}

.sidebar-banner-label {
  position: static;
  display: block;
  padding: 16px;
  background: #fff;
  border-radius: 0 0 8px 8px;
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  text-align: center;
  border-top: 3px solid var(--cl-primary);
}

/* Swiper Pagination */
.sidebar-banners-slider .swiper-pagination {
  position: relative;
  margin-top: 16px;
  bottom: 0;
}

.sidebar-banners-slider .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #ddd;
  opacity: 1;
  margin: 0 4px;
}

.sidebar-banners-slider .swiper-pagination-bullet-active {
  background: var(--cl-primary);
  width: 24px;
  border-radius: 4px;
}

/* Responsive Design */
@media screen and (max-width: 1023px) {
  .article-detail-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .article-sidebar {
    position: static;
  }

  .latest-posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .latest-post-link {
    flex-direction: column;
  }

  .latest-post-thumb {
    width: 100%;
    height: 120px;
  }
}

@media screen and (max-width: 767px) {
  .article-detail-section {
    padding: 40px 0;
  }

  .article-detail-main {
    padding: 24px 16px;
    border-radius: 8px;
  }

  .article-title {
    font-size: 20px;
  }

  .article-meta {
    font-size: 13px;
  }

  .article-meta .meta-icon {
    width: 14px;
    height: 14px;
  }

  .section-title {
    font-size: 18px;
  }

  .section-text {
    font-size: 15px;
    line-height: 1.7;
  }

  .article-sidebar {
    gap: 20px;
  }

  .sidebar-widget {
    padding: 20px 16px;
  }

  .widget-title {
    font-size: 16px;
    margin-bottom: 16px;
  }

  .latest-posts {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .latest-post-link {
    flex-direction: row;
  }

  .latest-post-thumb {
    width: 80px;
    height: 60px;
  }

  .latest-post-title {
    font-size: 13px;
  }

  .sidebar-banner img {
    aspect-ratio: 16 / 9;
  }

  .sidebar-banner-label {
    padding: 12px;
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .article-detail-main {
    padding: 20px 12px;
  }

  .article-title {
    font-size: 18px;
  }

  .section-title {
    font-size: 16px;
  }

  .section-text {
    font-size: 14px;
  }

  .sidebar-widget {
    padding: 16px 12px;
  }
}

.article-detail-section {
  padding: 0 !important;
  background-color: var(--cl-bg-light);
}

/* Article Content Group */
.article-content-group {
  margin: 32px 0;
  padding: 0;
}

.article-content-group:first-of-type {
  margin-top: 0;
}

.article-content-group:last-of-type {
  margin-bottom: 0;
}

.article-content-group .section-title {
  font-size: 24px;
  font-weight: 700;
  color: #242424;
  margin-bottom: 16px;
  line-height: 1.3;
}

.article-content-group .section-text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 16px;
  text-align: justify;
}

.article-content-group .section-text:last-of-type {
  margin-bottom: 20px;
}

.article-content-group .article-figure {
  margin: 20px 0 0 0;
}

/* Responsive */
@media screen and (max-width: 767px) {
  .article-content-group {
    margin: 24px 0;
  }

  .article-content-group .section-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .article-content-group .section-text {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 12px;
  }

  .article-content-group .section-text:last-of-type {
    margin-bottom: 16px;
  }

  .article-content-group .article-figure {
    margin: 16px 0 0 0;
  }
}

@media screen and (max-width: 480px) {
  .article-content-group .section-title {
    font-size: 16px;
  }

  .article-content-group .section-text {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .article-content-group .section-text:last-of-type {
    margin-bottom: 12px;
  }
}

/* Article Author */
.article-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--cl-border);
}

.author-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  color: var(--cl-primary);
}

.author-name {
  font-size: 15px;
  font-weight: 600;
  color: #242424;
}

/* Responsive */
@media screen and (max-width: 767px) {
  .article-author {
    margin-top: 32px;
    padding-top: 20px;
  }

  .author-icon {
    width: 16px;
    height: 16px;
  }

  .author-name {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .article-author {
    margin-top: 24px;
    padding-top: 16px;
  }

  .author-icon {
    width: 15px;
    height: 15px;
  }

  .author-name {
    font-size: 13px;
  }
}

/* ====================================
   CAMPUS NEWS SECTION - POLAROID STYLE
   ==================================== */

.campus-news {
  padding: 80px 0;
  background-image: url("../images/info-img.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* Header */
.campus-news-header {
  text-align: center;
  margin-bottom: 60px;
}

.campus-news-title {
  font-size: 40px;
  font-weight: 700;
  color: #242424;
  line-height: 1.3;
}

.campus-news-title strong {
  font-weight: 700;
  color: var(--cl-primary);
}

/* News Grid Layout */
.campus-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 60px;
  align-items: center;
  justify-items: center;
}

/* News Card - Polaroid Style */
.campus-news-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Card rotation - nghiêng như polaroid */
.campus-news-card:nth-child(1) {
  transform: rotate(-6deg) translateY(40px);
}

.campus-news-card:nth-child(2) {
  transform: rotate(0deg) translateY(-20px);
  /* Card giữa cao hơn */
}

.campus-news-card:nth-child(3) {
  transform: rotate(6deg) translateY(40px);
}

.campus-news-card:hover {
  transform: rotate(0deg) translateY(-30px) scale(1.05);
  z-index: 10;
}

.campus-news-card-link {
  display: block;
  text-decoration: none;
  background: white;
  border-radius: 12px;
  padding: 16px 16px 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.4s ease;
}

.campus-news-card:hover .campus-news-card-link {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Card Image Container */
.campus-news-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: #f5f5f5;
  margin-bottom: 16px;
}

.campus-news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.campus-news-card:hover .campus-news-card-image img {
  transform: scale(1.1);
}

/* Card Content - Text bên dưới như polaroid */
.campus-news-card-content {
  padding: 0 8px;
}

.campus-news-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.campus-news-card:hover .campus-news-card-title {
  color: var(--cl-primary);
}

/* Footer - View More Button */
.campus-news-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.campus-news-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 36px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(255, 106, 0, 0.25);
}

.campus-news-btn:hover {
  background-color: #d85f1a;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(255, 106, 0, 0.4);
  gap: 16px;
}

.campus-news-btn img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.campus-news-btn:hover img {
  transform: translateX(4px);
}

/* ====================================
   RESPONSIVE DESIGN
   ==================================== */

/* Tablet Large */
@media screen and (max-width: 1200px) {
  .campus-news-grid {
    gap: 32px;
  }

  .campus-news-card {
    max-width: 340px;
  }

  /* Adjust translateY for smaller screens */
  .campus-news-card:nth-child(1),
  .campus-news-card:nth-child(3) {
    transform: rotate(-6deg) translateY(30px);
  }

  .campus-news-card:nth-child(1) {
    transform: rotate(-6deg) translateY(30px);
  }

  .campus-news-card:nth-child(2) {
    transform: rotate(0deg) translateY(-15px);
  }

  .campus-news-card:nth-child(3) {
    transform: rotate(6deg) translateY(30px);
  }
}

/* Tablet - 2 columns */
@media screen and (max-width: 1024px) {
  .campus-news {
    padding: 60px 0;
  }

  .campus-news-header {
    margin-bottom: 48px;
  }

  .campus-news-title {
    font-size: 36px;
  }

  .campus-news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 48px;
  }

  /* Hide 3rd card on tablet */
  .campus-news-card:nth-child(3) {
    display: none;
  }

  /* Adjust rotation for 2 cards - same height */
  .campus-news-card:nth-child(1) {
    transform: rotate(-5deg) translateY(0);
  }

  .campus-news-card:nth-child(2) {
    transform: rotate(5deg) translateY(0);
  }

  .campus-news-card {
    max-width: 100%;
  }

  .campus-news-card-title {
    font-size: 15px;
  }
}

/* Mobile - Stack to 1 column */
@media screen and (max-width: 768px) {
  .campus-news {
    padding: 40px 0;
  }

  .campus-news-header {
    margin-bottom: 32px;
  }

  .campus-news-title {
    font-size: 28px;
  }

  .campus-news-title br {
    display: none;
  }

  .campus-news-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 40px;
  }

  /* Show all 3 cards on mobile */
  .campus-news-card:nth-child(3) {
    display: block;
  }

  /* Reset height difference on mobile */
  .campus-news-card:nth-child(1) {
    transform: rotate(-3deg) translateY(0);
  }

  .campus-news-card:nth-child(2) {
    transform: rotate(0deg) translateY(0);
  }

  .campus-news-card:nth-child(3) {
    transform: rotate(3deg) translateY(0);
  }

  .campus-news-card:hover {
    transform: rotate(0deg) translateY(-10px) scale(1.02);
  }

  .campus-news-card {
    max-width: 100%;
  }

  .campus-news-card-link {
    padding: 12px 12px 20px;
  }

  .campus-news-card-image {
    margin-bottom: 12px;
  }

  .campus-news-card-content {
    padding: 0 4px;
  }

  .campus-news-card-title {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }

  .campus-news-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }

  .campus-news-btn img {
    width: 16px;
    height: 16px;
  }
}

/* Mobile Small */
@media screen and (max-width: 480px) {
  .campus-news-title {
    font-size: 24px;
  }

  .campus-news-grid {
    gap: 24px;
  }

  .campus-news-card-link {
    padding: 10px 10px 16px;
  }

  .campus-news-card-title {
    font-size: 13px;
  }
}

/* Related News Section - Tin cùng chuyên mục */
.related-news {
  padding: 80px 0;
  background-color: #fff;
}

.related-news .title-common {
  margin-bottom: 40px;
}

/* Grid layout - 3 columns */
.related-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Card styling */
.related-news-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.related-news-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Image container */
.related-news-image {
  position: relative;
  overflow: hidden;
  height: 240px;
  border-radius: 8px 8px 0 0;
}

.related-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related-news-card:hover .related-news-image img {
  transform: scale(1.05);
}

/* Content area */
.related-news-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.related-news-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.related-news-card:hover .related-news-content h3 {
  color: var(--cl-primary);
}

/* Footer with view more button */
.related-news-footer {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background-color: var(--cl-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-view-more:hover {
  background-color: #e65a00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.btn-view-more img {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.btn-view-more:hover img {
  transform: translateX(4px);
}

/* Responsive Design */
@media screen and (max-width: 1023px) {
  .related-news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .related-news-image {
    height: 200px;
  }
}

@media screen and (max-width: 767px) {
  .related-news {
    padding: 40px 0;
  }

  .related-news .title-common {
    margin-bottom: 24px;
  }

  .related-news-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .related-news-image {
    height: 200px;
  }

  .related-news-content {
    padding: 16px;
  }

  .related-news-content h3 {
    font-size: 14px;
    -webkit-line-clamp: 3;
  }

  .related-news-footer {
    margin-top: 24px;
  }

  .btn-view-more {
    padding: 12px 24px;
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .related-news-image {
    height: 180px;
  }

  .related-news-content {
    padding: 12px;
  }

  .related-news-content h3 {
    font-size: 13px;
  }

  .btn-view-more {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================= CSS TIN TUC TRANG HCM=========== */
/* Student Life Section */
.student-life {
  padding: 80px 0;
  background-color: #fff;
}

.student-life-title {
  font-size: 44px;
  font-weight: 700;
  color: #242424;
  line-height: 1.2;
  margin-bottom: 32px;
}

.student-life-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
}

.student-tab {
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  color: #242424;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.student-tab.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.student-tab:hover:not(.active) {
  opacity: 0.8;
}

/* Tab Content */
.student-tab-content {
  display: none;
}

.student-tab-content.active {
  display: block;
}

/* Grid Layout - 7:3 ratio */
.student-content-grid {
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 32px;
  margin-bottom: 40px;
}

/* Main Featured Card - Left Side (70%) */
.student-featured-main {
  grid-column: span 1;
}

.student-card-large {
  display: block;
  height: 100%;
  transition: transform 0.3s ease;
}

.student-card-large:hover {
  transform: translateY(-4px);
}

.student-card-large .student-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 400px;
}

.student-card-large .student-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.student-card-large:hover .student-card-image img {
  transform: scale(1.05);
}

.student-card-large .student-card-content {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.student-card-large .student-card-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #242424;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.student-card-large:hover .student-card-content h3 {
  color: var(--cl-primary);
}

.student-card-large .student-card-content p {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
}

/* Right Side - 2 Smaller Cards (30%) */
.student-featured-side {
  grid-column: span 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.student-card-small {
  display: block;
  transition: transform 0.3s ease;
  flex: 1;
}

.student-card-small:hover {
  transform: translateY(-4px);
}

.student-card-small .student-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 200px;
}

.student-card-small .student-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.student-card-small:hover .student-card-image img {
  transform: scale(1.05);
}

.student-card-small .student-card-content {
  padding: 16px 0;
}

.student-card-small .student-card-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.student-card-small:hover .student-card-content h3 {
  color: var(--cl-primary);
}

/* Footer */
.student-life-footer {
  display: flex;
  justify-content: center;
}

.btn-view-more-student {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.btn-view-more-student:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
}

.btn-view-more-student img {
  width: 16px;
  height: 16px;
}

/* Responsive */
@media screen and (max-width: 1023px) {
  .student-life-tabs {
    overflow-x: auto;
  }

  .student-tab {
    padding: 10px 24px;
    font-size: 14px;
    white-space: nowrap;
  }

  .student-content-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .student-card-large .student-card-image {
    height: 300px;
  }

  .student-card-small .student-card-image {
    height: 180px;
  }
}

@media screen and (max-width: 767px) {
  .student-life {
    padding: 40px 0;
  }

  .student-life-title {
    font-size: 24px;
    margin-bottom: 16px;
  }

  .student-life-tabs {
    margin-bottom: 24px;
    gap: 8px;
  }

  .student-tab {
    padding: 8px 20px;
    font-size: 14px;
  }

  .student-content-grid {
    gap: 16px;
    margin-bottom: 24px;
  }

  /* Main card on mobile - Keep full layout */
  .student-card-large {
    display: flex;
    flex-direction: column;
  }

  .student-card-large .student-card-image {
    height: 200px;
    border-radius: 8px;
  }

  .student-card-large .student-card-content {
    padding: 16px 0;
    gap: 8px;
  }

  .student-card-large .student-card-content h3 {
    font-size: 16px;
    font-weight: 700;
  }

  .student-card-large .student-card-content p {
    font-size: 13px;
    color: #707070;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Small cards on mobile - Display as a single row with 2 columns */
  .student-featured-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .student-card-small {
    display: flex;
    flex-direction: column;
  }

  .student-card-small .student-card-image {
    height: 120px;
    border-radius: 8px;
    margin-bottom: 8px;
  }

  .student-card-small .student-card-content {
    padding: 0;
  }

  .student-card-small .student-card-content h3 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    -webkit-line-clamp: 3;
  }

  .btn-view-more-student {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }
}

/* ====================================
   FTPU Students Section
   ==================================== */

.ftpu-students {
  padding: 80px 0;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

/* Background Decoration */
.ftpu-students::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-image: url("../images/major-detail-feature-decor.svg");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

.ftpu-students .container {
  position: relative;
  z-index: 10;
}

/* ====================================
   Section Title
   ==================================== */

.ftpu-students .intro-title {
  margin-bottom: 32px;
}

/* ====================================
   Tabs Navigation
   ==================================== */

.ftpu-students-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.ftpu-tab-btn {
  padding: 12px 32px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  color: #242424;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease;
}

.ftpu-tab-btn.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.ftpu-tab-btn:hover:not(.active) {
  opacity: 0.8;
}

/* ====================================
   Tab Content
   ==================================== */

.ftpu-tab-content {
  display: none;
}

.ftpu-tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ====================================
   Content Grid Layout
   ==================================== */

.ftpu-students-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

/* ====================================
   Main Card (Featured - Left Side)
   ==================================== */

.ftpu-students-main-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ftpu-students-main-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.ftpu-students-main-image {
  position: relative;
  overflow: hidden;
  height: 320px;
}

.ftpu-students-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ftpu-students-main-card:hover .ftpu-students-main-image img {
  transform: scale(1.05);
}

.ftpu-students-main-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fafafa;
}

.ftpu-students-main-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.ftpu-students-main-card:hover .ftpu-students-main-content h3 {
  color: var(--cl-primary);
}

.ftpu-students-main-content p {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====================================
   Small Cards Sidebar (Right Side)
   ==================================== */

.ftpu-students-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ftpu-students-small-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ftpu-students-small-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.ftpu-students-small-image {
  position: relative;
  overflow: hidden;
  height: 180px;
}

.ftpu-students-small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.ftpu-students-small-card:hover .ftpu-students-small-image img {
  transform: scale(1.05);
}

.ftpu-students-small-content {
  padding: 16px;
  background: #fafafa;
}

.ftpu-students-small-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.ftpu-students-small-card:hover .ftpu-students-small-content h3 {
  color: var(--cl-primary);
}

/* ====================================
   View More Button
   ==================================== */

.ftpu-students-footer {
  display: flex;
  justify-content: center;
}

.ftpu-students .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.3s ease;
}

.ftpu-students .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}

.ftpu-students .btn-view-more img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.ftpu-students .btn-view-more:hover img {
  transform: translateX(4px);
}

/* ====================================
   RESPONSIVE - TABLET (768px - 1023px)
   ==================================== */

@media screen and (max-width: 1023px) {
  .ftpu-students {
    padding: 60px 0;
  }

  .ftpu-students .intro-title {
    margin-bottom: 24px;
  }

  /* Tabs - Horizontal scroll */
  .ftpu-students-tabs {
    justify-content: flex-start;
    margin-bottom: 32px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .ftpu-students-tabs::-webkit-scrollbar {
    display: none;
  }

  .ftpu-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Single column layout */
  .ftpu-students-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Adjust image heights */
  .ftpu-students-main-image {
    height: 260px;
  }

  .ftpu-students-small-image {
    height: 160px;
  }
}

/* ====================================
   RESPONSIVE - MOBILE (Max 767px)
   ==================================== */

@media screen and (max-width: 767px) {
  .ftpu-students {
    padding: 40px 0;
  }

  .ftpu-students::before {
    background-size: contain;
  }

  .ftpu-students .intro-title {
    margin-bottom: 24px;
  }

  /* Tabs - Mobile */
  .ftpu-students-tabs {
    gap: 8px;
    margin-bottom: 24px;
  }

  .ftpu-tab-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  /* Single column layout */
  .ftpu-students-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
  }

  /* Main card appears first */
  .ftpu-students-main {
    order: -1;
  }

  /* Main card - Mobile styling */
  .ftpu-students-main-image {
    height: 200px;
  }

  .ftpu-students-main-content {
    padding: 16px;
    gap: 8px;
  }

  .ftpu-students-main-content h3 {
    font-size: 16px;
    -webkit-line-clamp: 2;
  }

  .ftpu-students-main-content p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Small cards - 2 columns grid on mobile */
  .ftpu-students-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .ftpu-students-small-card {
    border-radius: 8px;
  }

  .ftpu-students-small-image {
    height: 120px;
  }

  .ftpu-students-small-content {
    padding: 12px;
  }

  .ftpu-students-small-content h3 {
    font-size: 13px;
    -webkit-line-clamp: 3;
    line-height: 1.4;
  }

  /* View More Button - Full width on mobile */
  .ftpu-students .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }

  .ftpu-students .btn-view-more img {
    width: 16px;
    height: 16px;
  }
}


/* ====================================
   Campus Experience Section
   ==================================== */

.campus-experience {
  padding: 80px 0;
  background-color: #fff;
}

.campus-experience .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ====================================
   Title with Right-Aligned Border
   ==================================== */

.campus-experience-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}

.campus-experience-title {
  font-size: 32px;
  font-weight: 700;
  color: #242424;
  line-height: 1.3;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Border line bên phải title */
.campus-experience-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #e5e5e5;
}

/* ====================================
   Content Grid Layout - 7:3 Ratio
   ==================================== */

.campus-experience-wrapper {
  display: grid;
  grid-template-columns: 7fr 3fr;
  /* 70% : 30% */
  gap: 32px;
  margin-bottom: 40px;
}

/* ====================================
   Main Card (Featured - Left Side)
   ==================================== */

.campus-experience-main-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.campus-experience-main-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.campus-experience-main-image {
  position: relative;
  overflow: hidden;
  height: 450px;
  /* Cao hơn vì card lớn hơn */
  border-radius: 8px;
}

.campus-experience-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.campus-experience-main-card:hover .campus-experience-main-image img {
  transform: scale(1.05);
}

.campus-experience-main-content {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.campus-experience-main-content h3 {
  font-size: 22px;
  /* Lớn hơn một chút */
  font-weight: 700;
  color: #242424;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.campus-experience-main-card:hover .campus-experience-main-content h3 {
  color: var(--cl-primary);
}

.campus-experience-main-content p {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ====================================
   Small Cards Sidebar (Right Side - 30%)
   ==================================== */

.campus-experience-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.campus-experience-small-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.campus-experience-small-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.campus-experience-small-image {
  position: relative;
  overflow: hidden;
  height: 200px;
  /* Cao hơn để cân đối */
  border-radius: 8px;
}

.campus-experience-small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.campus-experience-small-card:hover .campus-experience-small-image img {
  transform: scale(1.05);
}

.campus-experience-small-content {
  padding: 16px 0;
}

.campus-experience-small-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.campus-experience-small-card:hover .campus-experience-small-content h3 {
  color: var(--cl-primary);
}

/* ====================================
   View More Button
   ==================================== */

.campus-experience-footer {
  display: flex;
  justify-content: center;
}

.campus-experience .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease;
}

.campus-experience .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}

.campus-experience .btn-view-more img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.campus-experience .btn-view-more:hover img {
  transform: translateX(4px);
}

/* ====================================
   RESPONSIVE - TABLET (768px - 1023px)
   ==================================== */

@media screen and (max-width: 1023px) {
  .campus-experience {
    padding: 60px 0;
  }

  .campus-experience-header {
    margin-bottom: 32px;
  }

  .campus-experience-title {
    font-size: 28px;
  }

  /* Single column layout */
  .campus-experience-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Adjust image heights */
  .campus-experience-main-image {
    height: 300px;
  }

  .campus-experience-small-image {
    height: 180px;
  }

  .campus-experience-main-content h3 {
    font-size: 20px;
  }
}

/* ====================================
   RESPONSIVE - MOBILE (Max 767px)
   ==================================== */

@media screen and (max-width: 767px) {
  .campus-experience {
    padding: 40px 0;
  }

  .campus-experience-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }

  .campus-experience-title {
    font-size: 20px;
    white-space: normal;
  }

  /* Border full width on mobile */
  .campus-experience-header::after {
    width: 100%;
  }

  /* Single column layout */
  .campus-experience-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
  }

  /* Main card appears first */
  .campus-experience-main {
    order: -1;
  }

  /* Main card - Mobile styling */
  .campus-experience-main-image {
    height: 220px;
  }

  .campus-experience-main-content {
    padding: 16px 0;
    gap: 8px;
  }

  .campus-experience-main-content h3 {
    font-size: 16px;
    -webkit-line-clamp: 2;
  }

  .campus-experience-main-content p {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Small cards - 2 columns grid on mobile */
  .campus-experience-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .campus-experience-small-image {
    height: 120px;
  }

  .campus-experience-small-content {
    padding: 12px 0;
  }

  .campus-experience-small-content h3 {
    font-size: 13px;
    -webkit-line-clamp: 3;
    line-height: 1.4;
  }

  /* View More Button - Full width on mobile */
  .campus-experience .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }

  .campus-experience .btn-view-more img {
    width: 16px;
    height: 16px;
  }
}


/* ======================================= TRANG HCM 3 =========  */
/* ====================================
   Career & Orientation Section
   ==================================== */

.career-orientation {
  padding: 80px 0;
  background-color: #fff;
}

/* Header with right decoration */
.career-orientation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.career-orientation-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1.3;
}

.title-decor-right {
  flex-shrink: 0;
}

.title-decor-right img {
  height: 24px;
  width: auto;
}

/* Category Tabs */
.career-orientation-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.career-orientation-tabs::-webkit-scrollbar {
  display: none;
}

.career-tab {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #242424;
}

.career-tab.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.career-tab:hover:not(.active) {
  opacity: 0.8;
}

/* Slider */
.career-slider {
  position: relative;
  padding: 0 50px;
  margin-bottom: 40px;
}

.career-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.career-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.career-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.career-image {
  position: relative;
  overflow: hidden;
  height: 220px;
  border-radius: 8px 8px 0 0;
}

.career-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.career-link:hover .career-image img {
  transform: scale(1.05);
}

.career-content {
  padding: 20px;
  flex: 1;
  display: flex;
  align-items: center;
  background: #fafafa;
}

.career-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.career-link:hover .career-content h3 {
  color: var(--cl-primary);
}

/* Swiper Navigation */
.career-slider .swiper-button-prev,
.career-slider .swiper-button-next {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  top: 40%;
  transition: all 0.3s ease;
}

.career-slider .swiper-button-prev {
  left: 0;
}

.career-slider .swiper-button-next {
  right: 0;
}

.career-slider .swiper-button-prev:after,
.career-slider .swiper-button-next:after {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
}

.career-slider .swiper-button-prev:hover,
.career-slider .swiper-button-next:hover {
  background-color: var(--cl-primary);
}

.career-slider .swiper-button-prev:hover:after,
.career-slider .swiper-button-next:hover:after {
  color: #fff;
}

/* View More Button */
.career-orientation-footer {
  display: flex;
  justify-content: center;
}

.career-orientation-footer .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.career-orientation-footer .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}

.career-orientation-footer .btn-view-more img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.career-orientation-footer .btn-view-more:hover img {
  transform: translateX(4px);
}

/* ====================================
   Business Partnership Section
   ==================================== */

.business-partnership {
  padding: 80px 0;
  background-color: #fff;
}

/* Header with right decoration */
.business-partnership-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.business-partnership-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1.3;
}

/* Category Tabs */
.business-partnership-tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.business-partnership-tabs::-webkit-scrollbar {
  display: none;
}

.business-tab {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background-image: url('../images/Background.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: #242424;
}

.business-tab.active {
  background-image: url('../images/Background-orang.png');
  color: #fff;
}

.business-tab:hover:not(.active) {
  opacity: 0.8;
}

/* Slider */
.business-slider {
  position: relative;
  padding: 0 50px;
  margin-bottom: 40px;
}

.business-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.business-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.business-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.business-image {
  position: relative;
  overflow: hidden;
  height: 220px;
  border-radius: 8px 8px 0 0;
}

.business-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.business-link:hover .business-image img {
  transform: scale(1.05);
}

.business-content {
  padding: 20px;
  flex: 1;
  display: flex;
  align-items: center;
  background: #fafafa;
}

.business-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.business-link:hover .business-content h3 {
  color: var(--cl-primary);
}

/* Swiper Navigation */
.business-slider .swiper-button-prev,
.business-slider .swiper-button-next {
  width: 48px;
  height: 48px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  top: 40%;
  transition: all 0.3s ease;
}

.business-slider .swiper-button-prev {
  left: 0;
}

.business-slider .swiper-button-next {
  right: 0;
}

.business-slider .swiper-button-prev:after,
.business-slider .swiper-button-next:after {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
}

.business-slider .swiper-button-prev:hover,
.business-slider .swiper-button-next:hover {
  background-color: var(--cl-primary);
}

.business-slider .swiper-button-prev:hover:after,
.business-slider .swiper-button-next:hover:after {
  color: #fff;
}

/* View More Button */
.business-partnership-footer {
  display: flex;
  justify-content: center;
}

.business-partnership-footer .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  background-color: var(--cl-primary);
  color: white;
  font-weight: 700;
  font-size: 16px;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.business-partnership-footer .btn-view-more:hover {
  background-color: #d85f1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);
}

.business-partnership-footer .btn-view-more img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.business-partnership-footer .btn-view-more:hover img {
  transform: translateX(4px);
}

/* ====================================
   RESPONSIVE - TABLET
   ==================================== */

@media screen and (max-width: 1023px) {

  .career-orientation,
  .business-partnership {
    padding: 60px 0;
  }

  .career-orientation-title,
  .business-partnership-title {
    font-size: 28px;
  }

  .career-orientation-tabs,
  .business-partnership-tabs {
    margin-bottom: 24px;
  }

  .career-tab,
  .business-tab {
    padding: 10px 20px;
    font-size: 14px;
  }

  .career-slider,
  .business-slider {
    padding: 0 40px;
  }
}

/* ====================================
   RESPONSIVE - MOBILE
   ==================================== */

@media screen and (max-width: 767px) {

  .career-orientation,
  .business-partnership {
    padding: 40px 0;
  }

  .career-orientation-header,
  .business-partnership-header {
    margin-bottom: 24px;
  }

  .career-orientation-title,
  .business-partnership-title {
    font-size: 22px;
  }

  .title-decor-right img {
    height: 18px;
  }

  .career-orientation-tabs,
  .business-partnership-tabs {
    margin-bottom: 20px;
    gap: 8px;
  }

  .career-tab,
  .business-tab {
    padding: 8px 16px;
    font-size: 13px;
  }

  .career-slider,
  .business-slider {
    padding: 0;
    margin-bottom: 24px;
  }

  .career-image,
  .business-image {
    height: 180px;
  }

  .career-content,
  .business-content {
    padding: 16px;
  }

  .career-content h3,
  .business-content h3 {
    font-size: 14px;
  }

  .career-slider .swiper-button-prev,
  .career-slider .swiper-button-next,
  .business-slider .swiper-button-prev,
  .business-slider .swiper-button-next {
    display: none;
  }

  .career-orientation-footer .btn-view-more,
  .business-partnership-footer .btn-view-more {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }

  .career-orientation-footer .btn-view-more img,
  .business-partnership-footer .btn-view-more img {
    width: 16px;
    height: 16px;
  }
}

/* =============================================================================
   ARTICLE DETAIL – CONTENT AREA 
   duongnv
============================================================================= */

.article-detail-main {
  width: 100%;
  /* max-width: 760px; */
}

/* Title */
.article-title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
  color: #222;
}

/* Meta */
.article-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #666;
  margin-bottom: 24px;
}

.article-meta img.meta-icon {
  width: 18px;
}

/* =============================================================================
   QUOTE (article-quote)
============================================================================= */

.article-quote {
  position: relative;
  padding: 20px 24px 20px 60px;
  background: #F7F8FA;
  border-left: 4px solid #FF6D00;
  margin-bottom: 32px;
  border-radius: 6px;
}

.article-quote .quote-icon img {
  width: 28px;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 0.4;
}

.article-quote p {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #222;
  font-style: italic;
}

/* =============================================================================
   GENERAL CONTENT TYPOGRAPHY
============================================================================= */

.article-content-group {
  font-size: 17px;
  line-height: 1.75;
  color: #333;
}

/* Paragraphs */
.article-content-group p {
  margin: 16px 0;
}

/* Headings */
.article-content-group h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 32px 0 16px;
  color: #222;
}

.article-content-group h3 {
  font-size: 20px;
  margin: 28px 0 12px;
  font-weight: 600;
  color: #222;
}

.article-content-group h4,
.article-content-group h5,
.article-content-group h6 {
  margin: 20px 0 12px;
  font-weight: 600;
}

/* Lists */
.article-content-group ul,
.article-content-group ol {
  margin: 16px 0 16px 24px;
}

.article-content-group li {
  margin-bottom: 8px;
}

/* Links */
.article-content-group a {
  color: #FF6D00;
  text-decoration: underline;
}

.article-content-group a:hover {
  opacity: .85;
}

/* =============================================================================
   IMAGES & FIGURES
============================================================================= */

.article-content-group img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.article-content-group figure {
  margin: 24px 0;
  text-align: center;
}

.article-content-group figure img {
  border-radius: 8px;
}

.article-content-group figure figcaption {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
  font-style: italic;
}

/* Prevent wide/aligned images from overflowing the content */
.article-content-group .wp-block-image,
.article-content-group .wp-block-image figure,
.article-content-group .wp-block-image img,
.article-content-group figure,
.article-content-group img {
  max-width: 100%;
  height: auto;
}

.article-content-group .wp-block-image img {
  display: block;
}

.article-content-group .alignwide,
.article-content-group .alignfull,
.article-content-group .wp-block-image.alignwide,
.article-content-group .wp-block-image.alignfull {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.article-content-group .wp-caption {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

.article-content-group .wp-caption img {
  width: 100% !important;
  height: auto !important;
}

.article-content-group .wp-caption.aligncenter {
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================================
   MEDIA EMBEDS
============================================================================= */

.article-content-group iframe,
.article-content-group video,
.article-content-group embed,
.article-content-group object {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
}

.article-content-group iframe {
  aspect-ratio: 16 / 9;
  height: auto;
}

.article-content-group video {
  height: auto;
}

.article-content-group .wp-block-embed,
.article-content-group .wp-block-video {
  margin: 24px 0;
}

.article-content-group .wp-block-embed__wrapper {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.article-content-group .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.article-content-group .alignleft {
  float: left;
  margin: 8px 24px 16px 0;
}

.article-content-group .alignright {
  float: right;
  margin: 8px 0 16px 24px;
}

.article-content-group .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .article-content-group .alignleft,
  .article-content-group .alignright {
    float: none;
    margin: 16px auto;
    display: block;
  }
}

/* =============================================================================
   TABLES
============================================================================= */

.article-content-group table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.article-content-group table th,
.article-content-group table td {
  border: 1px solid #ddd;
  padding: 10px 12px;
}

.article-content-group table th {
  background: #f5f5f5;
  font-weight: 600;
}

/* =============================================================================
   BLOCKQUOTE STANDARD (Gutenberg)
============================================================================= */

.article-content-group blockquote {
  border-left: 4px solid #FF6D00;
  padding-left: 16px;
  margin: 24px 0;
  font-style: italic;
  color: #444;
}

/* =============================================================================
   SEARCH RESULTS
============================================================================= */

.search-results {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.search-result-item {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
}

.search-result-thumb {
  display: block;
  width: 160px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
}

.search-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.search-result-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: #242424;
}

.search-result-title a:hover {
  color: var(--cl-primary);
}

.search-result-meta {
  font-size: 13px;
  color: #707070;
  margin-bottom: 8px;
}

.search-result-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}

@media (max-width: 768px) {
  .search-result-item {
    grid-template-columns: 1fr;
  }

  .search-result-thumb {
    width: 100%;
    height: 200px;
  }
}

/* =============================================================================
   AUTHOR BOX
============================================================================= */

.article-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

.article-author img.author-icon {
  width: 24px;
  opacity: 0.8;
}

.article-author .author-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* =============================================================================
   RESPONSIVE
============================================================================= */

@media (max-width: 991px) {
  .article-title {
    font-size: 28px;
  }

  .article-content-group {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .article-title {
    font-size: 24px;
  }

  .article-quote {
    padding: 16px 20px 16px 52px;
  }

  .article-quote .quote-icon img {
    width: 24px;
  }
}