/* Utility Classes */
.text-orange {
  color: #F37021;
}

/* Brand Story Section */
.brand-story {
  padding: 80px 0;
}

.brand-story-main {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

.brand-story-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brand-story-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.brand-story-content p {
  line-height: 1.7;
  text-align: justify;
}

.brand-story-slogan {
  font-weight: 700;
  margin-top: 8px;
  font-size: 15px;
}

.brand-story-gallery {
  position: relative;
  height: 100%;
}

.brand-story-gallery-decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.brand-story-gallery-decor-top {
  top: -30px;
  left: -50px;
}

.brand-story-gallery-decor-top img {
  width: 120px;
  height: auto;
}

.brand-story-gallery-decor-bottom {
  bottom: -20px;
  right: -40px;
}

.brand-story-gallery-decor-bottom img {
  width: 140px;
  height: auto;
}

.brand-story-gallery-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  height: 100%;
  align-items: center;
}

.gallery-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: -50px;
}

.gallery-item {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-item-top {
  width: 100%;
  height: 220px;
}

.gallery-bottom-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.gallery-item-small {
  width: 100%;
  height: 220px;
}

.gallery-right {
  height: 100%;
  display: flex;
  align-items: center;
  margin-top: 50px;
}

.gallery-item-large {
  width: 100%;
  height: 420px;
}

/* Responsive - iPad và Mobile dùng layout mobile */
@media (max-width: 1024px) {
  .brand-story {
    padding: 60px 0 80px;
  }
  
  .brand-story-main {
    gap: 32px;
    display: flex;
    flex-direction: column-reverse;
  }
  
  .brand-story-title {
    font-size: 20px;
  }
  
  .brand-story-slogan {
    font-size: 13px;
  }
  
  .brand-story-gallery {
    position: relative;
    min-height: 350px;
    padding: 20px 10px;
  }
  
  .brand-story-gallery-decor-top {
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  
  .brand-story-gallery-decor-top img {
    width: 80px;
  }
  
  .brand-story-gallery-decor-bottom {
    display: block;
    bottom: 0;
    right: 0;
    z-index: 3;
  }
  
  .brand-story-gallery-decor-bottom img {
    width: 90px;
  }
  
  .brand-story-gallery-grid {
    display: block;
    position: relative;
    height: auto;
  }
  
  .gallery-left {
    margin-top: 0;
    gap: 8px;
    position: relative;
    z-index: 1;
  }
  
  .gallery-item-top {
    width: 165px;
    height: 130px;
    margin-left: 10px;
  }
  
  .gallery-bottom-group {
    display: flex;
    gap: 8px;
    margin-left: 10px;
  }
  
  .gallery-item-small {
    width: 78px;
    height: 110px;
  }
  
  .gallery-right {
    margin-top: -220px;
    margin-left: auto;
    margin-right: 10px;
    width: 150px;
    position: relative;
    z-index: 2;
  }
  
  .gallery-item-large {
    width: 200px;
    height: 280px;
  }
}

/* iPad specific - Gallery items lớn hơn mobile */
@media (min-width: 768px) and (max-width: 1024px) {
  .gallery-item-top {
    width: 400px;
    height: 150px;
    margin-left: 10px;
  }

  .gallery-item-small {
    width: 200px;
    height: 130px;
  }

  .gallery-item-large {
    width: 340px;
    height: 320px;
  }

  .gallery-right {
    width: 250px;
  }
}

.core-values {
  padding: 80px 0;
}

.core-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.core-value-card {
  background-image: url('./images/background-thuonghieu-1.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 32px 24px;
  filter: drop-shadow(0 4px 20px rgba(255, 102, 0, 0.15));
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  transition: transform 0.3s ease, filter 0.3s ease;
  min-height: 280px;
}

.core-value-card:hover {
  transform: translateY(-8px);
  filter: drop-shadow(0 8px 30px rgba(255, 102, 0, 0.25));
}

.core-value-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.core-value-title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.core-value-desc {
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .core-values {
    padding: 60px 0;
  }
  
  .core-values-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .core-value-card {
    padding: 28px 20px;
    min-height: 240px;
  }
  
  .core-value-icon {
    width: 48px;
    height: 48px;
  }
  
  .core-value-title {
    font-size: 18px;
  }
  
  .core-value-desc {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .core-values {
    padding: 50px 0;
  }
  
  .core-values-grid {
    gap: 20px;
  }
  
  .core-value-card {
    padding: 24px 20px;
    gap: 12px;
    min-height: 220px;
  }
  
  .core-value-icon {
    width: 44px;
    height: 44px;
  }
  
  .core-value-title {
    font-size: 17px;
  }
  
  .core-value-desc {
    font-size: 14px;
    line-height: 1.5;
  }

  .core-nav-buttons {
    justify-content: center;
  }
}

.leadership {
  padding: 80px 0;
  position: relative;
  background: #fafafa;
}

.leadership::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8%;
  height: 100%;
  background-size: auto 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.leadership::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8%;
  height: 100%;
  background-size: auto 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(-1);
}

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

.leadership h2 {
  margin-bottom: 32px;
}

.leadership-tabs {
  margin-bottom: 40px;
}

.leadership-tab {
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: 700;
  color: #1e1e1e;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
}

.leadership-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.leadership-card-main {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 40px 40px;
  position: relative;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

.leadership-card-decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.leadership-card-decor-top {
  top: -30px;
  left: -50px;
}

.leadership-card-decor-top img {
  width: 120px;
  height: auto;
}

.leadership-card-decor-bottom {
  bottom: -20px;
  right: -40px;
}

.leadership-card-decor-bottom img {
  width: 140px;
  height: auto;
}

.leadership-card-overlay {
  position: absolute;
  top: 10px;
  left: 40px;
  z-index: 1;
  pointer-events: none;
}

.leadership-card-overlay img {
  width: auto;
  height: 23px;
  transform: scale(2);
  transform-origin: top left;
}

/* LINE DECORATION CHO MOBILE - ẨN Ở DESKTOP */
.leadership-card-line-mobi {
  display: none;
  text-align: center;
  margin: 16px 0;
  position: relative;
  z-index: 2;
}

.leadership-card-line-mobi img {
  width: auto;
  height: 40px;
}

.leadership-card-main-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}

.leadership-card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.leadership-card-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.leadership-card-name {
  font-size: 22px;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0;
}

.leadership-card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #666;
  margin: 0;
  text-align: justify;
}

/* Grid 4 cột - 2 cards Phó Chủ tịch */
.leadership-grid-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* Grid 4 cột */
.leadership-grid-bottom {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.leadership-card-small {
  background: transparent;
  transition: transform 0.3s ease;
}

.leadership-card-small:hover {
  transform: translateY(-8px);
}

.leadership-card-small .leadership-card-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 12px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

.leadership-card-small:hover .leadership-card-image {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.leadership-card-small .leadership-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leadership-card-small .leadership-card-info {
  padding: 20px;
  text-align: center;
  gap: 4px;
  background: white;
  border-radius: 0 0 12px 12px;
}

.leadership-card-small .leadership-card-name {
  font-size: 16px;
}

.leadership-card-title {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .leadership {
    padding: 60px 0;
  }

  /* Ẩn background decor */
  .leadership::before,
  .leadership::after {
    display: none;
  }

  /* Chỉ ẩn decor-bottom và overlay */
  .leadership-card-decor-bottom,
  .leadership-card-overlay {
    display: none;
  }

  /* DECOR-TOP NẰM BÊN TRONG CARD - ĐIỀU CHỈNH VỊ TRÍ */
  .leadership-card-decor-top {
    top: 10px;      /* Nằm bên trong, cách top 10px */
    left: 10px;     /* Nằm bên trong, cách left 10px */
  }

  .leadership-card-decor-top img {
    width: 60px;
  }

  /* HIỂN THỊ line-mobi */
  .leadership-card-line-mobi {
    display: block;
  }

  .leadership-card-line-mobi img {
    height: 30px;
  }

  .leadership-card-main-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .leadership-card-main-inner .leadership-card-image {
    max-width: 300px;
    margin: 0 auto;
  }

  .leadership-card-main-inner .leadership-card-info {
    background: white;
    padding: 24px;
    border-radius: 8px;
  }

  .leadership-grid-top,
  .leadership-grid-bottom {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .leadership-card-small .leadership-card-image {
    height: 300px;
  }
}

@media (max-width: 576px) {
  .leadership {
    padding: 40px 0;
  }

  /* Ẩn background decor */
  .leadership::before,
  .leadership::after {
    display: none;
  }

  .leadership h2 {
    margin-bottom: 24px;
  }

  .leadership-tab {
    font-size: 16px;
  }

  .leadership-tabs {
    margin-bottom: 24px;
  }

  .leadership-content {
    gap: 20px;
  }

  /* Chỉ ẩn decor-bottom và overlay */
  .leadership-card-decor-bottom,
  .leadership-card-overlay {
    display: none;
  }

  /* DECOR-TOP NẰM BÊN TRONG CARD */
  .leadership-card-decor-top {
    top: 8px;      /* Nằm bên trong */
    left: 8px;     /* Nằm bên trong */
  }

  .leadership-card-decor-top img {
    width: 50px;
  }

  /* HIỂN THỊ line-mobi */
  .leadership-card-line-mobi {
    display: block;
  }

  .leadership-card-line-mobi img {
    height: 25px;
  }

  .leadership-card-main-inner {
    gap: 0;
  }

  .leadership-card-main-inner .leadership-card-image {
    max-width: 300px;
  }

  .leadership-card-main-inner .leadership-card-info {
    padding: 20px;
  }

  .leadership-card-name {
    font-size: 16px;
  }

  .leadership-card-desc {
    font-size: 13px;
    line-height: 1.6;
  }

  .leadership-grid-top,
  .leadership-grid-bottom {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .leadership-card-small .leadership-card-image {
    height: 160px;
  }

  .leadership-card-small .leadership-card-info {
    padding: 12px;
  }

  .leadership-card-small .leadership-card-name {
    font-size: 14px;
  }

  .leadership-card-title {
    font-size: 12px;
  }
}

.management {
  padding: 80px 0;
  position: relative;
  background: #ffffff;
  overflow: hidden;
}

.management::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8%;
  height: 100%;
  background-size: auto 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}

.management::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8%;
  height: 100%;
  background-size: auto 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(-1);
}

.management .container {
  position: relative;
  z-index: 1;
  width: 1200px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  overflow: hidden;
}

.management h2 {
  margin-bottom: 32px;
}

.management-tabs {
  margin-bottom: 40px;
}

.management-tab {
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: 700;
  color: #1e1e1e;
  padding: 12px 0;
  cursor: pointer;
  position: relative;
}

.management-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  overflow: hidden;
}

.management-card-main {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 40px 40px;
  position: relative;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
  overflow: hidden;
  margin: 0;
}

.management-card-decor {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.management-card-decor-top {
  top: -30px;
  left: -50px;
}

.management-card-decor-top img {
  width: 120px;
  height: auto;
  display: block;
}

.management-card-decor-bottom {
  bottom: -20px;
  right: -40px;
}

.management-card-decor-bottom img {
  width: 140px;
  height: auto;
  display: block;
}

.management-card-overlay {
  position: absolute;
  top: 10px;
  left: 40px;
  z-index: 1;
  pointer-events: none;
}

.management-card-overlay img {
  width: auto;
  height: 23px;
  transform: scale(2);
  transform-origin: top left;
  display: block;
}

/* LINE DECORATION CHO MOBILE - ẨN Ở DESKTOP */
.management-card-line-mobi {
  display: none;
  text-align: center;
  margin: 16px 0;
  position: relative;
  z-index: 2;
}

.management-card-line-mobi img {
  width: auto;
  height: 40px;
}

.management-card-main-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}

.management-card-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.management-card-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.management-card-name {
  font-size: 22px;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0;
}

.management-card-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #666;
  margin: 0;
  text-align: justify;
}

/* Grid 4 cột cho Phó Hiệu trưởng */
.management-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.management-card-small {
  background: transparent;
  transition: transform 0.3s ease;
}

.management-card-small:hover {
  transform: translateY(-8px);
}

.management-card-small .management-card-image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  border-radius: 12px;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.08));
}

.management-card-small:hover .management-card-image {
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.12));
}

.management-card-small .management-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.management-card-small .management-card-info {
  padding: 20px;
  text-align: center;
  gap: 4px;
  background: white;
  border-radius: 0 0 12px 12px;
}

.management-card-small .management-card-name {
  font-size: 16px;
}

.management-card-title {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
  .management {
    padding: 60px 0;
  }

  /* ẨN BACKGROUND DECOR Ở TABLET */
  .management::before,
  .management::after {
    display: none;
  }

  .management .container {
    padding: 0 20px;
  }

  /* THAY BACKGROUND CHO MOBILE */
  .management-card-main {
    background-image: url('<?php echo $tpl_url; ?>/thuonghieu-bg-mobi.png');
    padding: 40px 20px 32px;
  }

  /* ẨN DECOR-BOTTOM VÀ OVERLAY Ở TABLET */
  .management-card-decor-bottom,
  .management-card-overlay {
    display: none;
  }

  /* DECOR-TOP NẰM BÊN TRONG CARD */
  .management-card-decor-top {
    top: 10px;
    left: 10px;
  }

  .management-card-decor-top img {
    width: 60px;
  }

  /* HIỂN THỊ line-mobi */
  .management-card-line-mobi {
    display: block;
    order: 2; /* Nằm giữa ảnh và text */
  }

  .management-card-line-mobi img {
    height: 30px;
  }

  .management-card-main-inner {
    grid-template-columns: 1fr;
    gap: 0;
    display: flex; /* Đổi từ grid sang flex để dùng order */
    flex-direction: column;
  }

  .management-card-main-inner .management-card-image {
    max-width: 300px;
    margin: 0 auto;
    order: 1; /* Ảnh lên đầu */
  }

  .management-card-main-inner .management-card-info {
    background: white;
    padding: 24px;
    border-radius: 8px;
    order: 3; /* Text xuống dưới */
  }

  /* Grid 2 cột cho tablet */
  .management-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .management-card-small .management-card-image {
    height: 300px;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .management {
    padding: 40px 0;
  }

  /* ẨN BACKGROUND DECOR */
  .management::before,
  .management::after {
    display: none;
  }

  .management .container {
    padding: 0 16px;
  }

  .management h2 {
    margin-bottom: 24px;
  }

  .management-tab {
    font-size: 16px;
    padding: 10px 0;
  }

  .management-tabs {
    margin-bottom: 24px;
  }

  .management-content {
    gap: 20px;
  }

  /* THAY BACKGROUND */
  .management-card-main {
    background-image: url('<?php echo $tpl_url; ?>/thuonghieu-bg-mobi.png');
    padding: 32px 16px 24px;
  }

  /* ẨN DECOR-BOTTOM VÀ OVERLAY */
  .management-card-decor-bottom,
  .management-card-overlay {
    display: none;
  }

  /* DECOR-TOP NẰM BÊN TRONG CARD */
  .management-card-decor-top {
    top: 8px;
    left: 8px;
  }

  .management-card-decor-top img {
    width: 50px;
  }

  /* HIỂN THỊ line-mobi */
  .management-card-line-mobi {
    display: block;
    order: 2;
  }

  .management-card-line-mobi img {
    height: 25px;
  }

  .management-card-main-inner {
    gap: 0;
    display: flex;
    flex-direction: column;
  }

  .management-card-main-inner .management-card-image {
    max-width: 300px;
    order: 1;
  }

  .management-card-main-inner .management-card-info {
    padding: 20px;
    order: 3;
  }

  .management-card-name {
    font-size: 16px;
  }

  .management-card-desc {
    font-size: 13px;
    line-height: 1.6;
  }

  /* Grid 2 cột cho mobile */
  .management-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .management-card-small .management-card-image {
    height: 160px;
  }

  .management-card-small .management-card-info {
    padding: 12px;
  }

  .management-card-small .management-card-name {
    font-size: 14px;
  }

  .management-card-title {
    font-size: 12px;
  }
}

.history {
  padding: 80px 0;
  position: relative;
  background: #fafafa;
  overflow: hidden;
}

/* Desktop layout: 5-5 */
.history-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start; /* Layout tự nhiên, ảnh ngắn hơn content */
}

/* Image Desktop */
.history-image-desk {
  position: relative;
}

.history-image-desk img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Image Mobile - ẩn ở desktop */
.history-image-mobi {
  display: none;
}

/* Content */
.history-content {
  position: relative;
}

/* Title Desktop - "Lịch sử" trên, "hình thành + icon" dưới */
.history-title-desk {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 44px;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0 0 24px 0;
  line-height: 1.3;
}

.history-title-desk > span:first-child {
  display: block;
}

.history-title-desk > span:last-child {
  display: flex;
  align-items: center;
  gap: 16px;
}

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

.history-title-desk .history-title-decor img {
  height: 30px;
  width: auto;
  display: block;
}

/* Title Mobile - ẩn ở desktop */
.history-title-mobi {
  display: none;
}

/* Subtitle */
.history-subtitle {
  margin-bottom: 32px;
}

.history-subtitle h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1e1e1e;
  margin: 0 0 8px 0;
}

.history-subtitle p {
  font-size: 15px;
  color: #666;
  margin: 0;
}

/* Quote box */
.history-quote {
  position: relative;
  padding: 30px 40px;
  background-image: url('./images/brand-history-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  margin-bottom: 40px;
  min-height: 140px;
}

.history-quote-icon {
  position: absolute;
  top: -40px;
  right: 20px;
  z-index: 2;
  pointer-events: none;
}

.history-quote-icon img {
  width: 80px;
  height: auto;
}

.history-quote-content {
  position: relative;
  z-index: 1;
}

.history-quote-year {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 12px;
}

.history-quote-text {
  font-size: 20px;
  color: var(--cl-primary);
  font-weight: 500;
  margin: 0;
  line-height: 1.6;
}

/* Timeline desktop - bung ra full width */
.history-milestones {
  margin: 0 -40px;
  padding: 0 40px;
}

.history-timeline {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  justify-content: space-between;
}

.history-timeline-item {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.history-timeline-year {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #666;
  padding: 8px 0;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.history-timeline-year::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: #e0e0e0;
  transition: all 0.3s ease;
}

.history-timeline-year::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background: #e0e0e0;
  transition: all 0.3s ease;
}

.history-timeline-item.active .history-timeline-year {
  color: var(--cl-primary);
}

.history-timeline-item.active .history-timeline-year::before,
.history-timeline-item.active .history-timeline-year::after {
  background: var(--cl-primary);
  height: 8px;
}

.history-timeline-item:hover .history-timeline-year {
  color: var(--cl-primary);
  transform: translateY(-2px);
}

.history-timeline-item:hover .history-timeline-year::before,
.history-timeline-item:hover .history-timeline-year::after {
  background: var(--cl-primary);
  height: 8px;
}

/* RESPONSIVE - MOBILE */
@media (max-width: 991px) {
  .history {
    padding: 40px 0;
    background: #fff;
  }

  /* Layout 1 cột */
  .history-wrapper {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Ẩn image desktop */
  .history-image-desk {
    display: none;
  }

  /* Ẩn title desktop */
  .history-title-desk {
    display: none;
  }

  /* Hiện title mobile - "Lịch sử hình thành" cùng dòng, icon bên phải */
  .history-title-mobi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 700;
    color: #1e1e1e;
    margin: 0 0 8px 0;
    line-height: 1.3;
    gap: 12px;
  }

  .history-title-mobi > span:first-child {
    white-space: nowrap;
  }

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

  .history-title-mobi .history-title-decor {
    flex-shrink: 0;
    margin-top: 8px;
  }

  .history-title-mobi .history-title-decor img {
    height: 15px;
    width: auto;
    display: block;
  }

  /* Hiện image mobile - đặt sau timeline */
  .history-image-mobi {
    display: block;
    margin-top: 24px;
  }

  .history-image-mobi img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }

  /* Subtitle */
  .history-subtitle {
    margin-bottom: 24px;
  }

  .history-subtitle h3 {
    font-size: 16px;
  }

  .history-subtitle p {
    font-size: 13px;
  }

  /* Quote mobile */
  .history-quote {
    margin-top: 20px;
    padding: 20px;
    min-height: 100px;
    margin-bottom: 24px;
  }

  .history-quote-icon {
    top: -25px;
    right: 16px;
  }

  .history-quote-icon img {
    width: 50px;
  }

  .history-quote-year {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .history-quote-text {
    font-size: 13px;
  }

  /* Timeline mobile với nền xám */
  .history-milestones {
    background: #f5f5f5;
    padding: 20px 16px;
    border-radius: 12px;
    margin: 0 -16px;
  }

  .history-timeline {
    gap: 16px;
    overflow-x: auto;
    padding: 16px 0;
    justify-content: center;
  }

  .history-timeline-year {
    font-size: 14px;
    color: #999;
  }

  .history-timeline-year::before {
    top: -12px;
    height: 8px;
    background: #ddd;
  }

  .history-timeline-year::after {
    bottom: -12px;
    height: 8px;
    background: #ddd;
  }

  .history-timeline-item.active .history-timeline-year {
    font-size: 16px;
  }

  .history-timeline-item.active .history-timeline-year::before,
  .history-timeline-item.active .history-timeline-year::after {
    height: 10px;
  }
}

@media (max-width: 576px) {
  .history-title-mobi {
    font-size: 24px;
  }

  .history-title-mobi .history-title-decor img {
    height: 15px;
  }

  .history-subtitle h3 {
    font-size: 16px;
  }

  .history-subtitle p {
    font-size: 14px;
  }

  .history-timeline-year {
    font-size: 14px;
  }
}


/* ====================================
   Outstanding Position Section
   ==================================== */

.outstanding-position {
  padding: 80px 0;
  background-color: #fff;
  position: relative;
}

/* Background Decoration */
.outstanding-position::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8%;
  height: 100%;
  background-size: auto 100%;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transform: none;
}

.outstanding-position::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8%;
  height: 100%;
  background-size: auto 100%;
  background-position: 0% 50%;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(-1);
}

.outstanding-position .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* ====================================
   Header
   ==================================== */

.outstanding-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.outstanding-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1.2;
}

.title-decor-left img,
.title-decor-right img {
  height: 24px;
  width: auto;
}

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

.outstanding-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden; /* CRITICAL: Clip overflow */
  margin-top: 24px;
}

/* ====================================
   Featured Card (Left)
   ==================================== */

.outstanding-featured {
  background: #fff;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid #e5e5e5;
  overflow: hidden; /* CRITICAL: Clip sphere overflow */
  isolation: isolate; /* Create stacking context */
}

/* Background Sphere - Only shows in left card */
.featured-bg-sphere {
  position: absolute;
  right: -150px;
  bottom: -130px;
  width: 400px;
  height: 400px;
  z-index: 1;
  pointer-events: none;
}

.featured-bg-sphere img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Content */
.featured-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 32px;
}

.featured-number {
  font-size: 154px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1;
  flex-shrink: 0;
}

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

.featured-rank {
  font-size: 16px;
  color: #707070;
  margin: 0;
}

.featured-title {
  font-size: 28px;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

.featured-desc {
  font-size: 16px;
  color: #707070;
  line-height: 1.6;
  margin: 0;
}

/* Badge */
.featured-badge {
  position: relative;
  z-index: 2;
  max-width: 220px;
}

.featured-badge img {
  width: 100%;
  height: auto;
}

/* ====================================
   Right Side - 3 Cards
   ==================================== */

.outstanding-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  overflow: hidden; /* Ensure nothing bleeds into right side */
}

/* Card Base Style */
.outstanding-card {
  background: #fff;
  padding: 24px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative; /* Create positioning context */
  z-index: 2; /* Above any background elements */
}

/* Card Top - Number + Label/Total (Side by Side) */
.card-top {
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-top .card-number {
  flex-shrink: 0;
}

.card-info-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

/* Mobile-only card - Hidden on desktop */
.outstanding-card-mobile-only {
  display: none;
}

/* ISO Card Title - Specific styling */
.card-title-iso {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  margin: 0;
  line-height: 1.3;
}

/* Remove borders on edges */
/* .outstanding-card:nth-child(2) {
  border-right: none;
} */

/* .outstanding-card:last-child {
  border-right: none;
  border-bottom: none;
} */

.outstanding-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

/* Card Number */
.card-number {
  font-size: 60px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1;
}

.card-label {
  font-size: 16px;
  color: #707070;
  margin: 0;
}

.card-label-mobile {
  display: none;
}

.card-label-desktop {
  display: block;
}

.card-total {
  font-size: 18px;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

.card-desc {
  font-size: 14px;
  color: #707070;
  line-height: 1.6;
  margin: 0;
}

/* ====================================
   Wide Card (Bottom - Spans 2 Columns)
   ==================================== */

.outstanding-card-wide {
  grid-column: span 2;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 32px;
  background: #fafafa;
}

.card-number-large {
  font-size: 60px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1;
  flex-shrink: 0;
}

.card-info-wide {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-info-wide .card-title {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

/* ====================================
   RESPONSIVE - TABLET
   ==================================== */

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

  .outstanding-title {
    font-size: 36px;
  }

  .outstanding-grid {
    grid-template-columns: 1fr;
  }

  .outstanding-featured {
    border-right: none;
    border-bottom: 1px solid #e5e5e5;
  }

  .featured-number {
    font-size: 100px;
  }

  .featured-bg-sphere {
    width: 300px;
    height: 300px;
    right: -100px;
    bottom: -100px;
  }

  .card-number {
    font-size: 48px;
  }

  .card-number-large {
    font-size: 60px;
  }
}

/* ====================================
   RESPONSIVE - MOBILE
   ==================================== */

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

  .outstanding-position::before,
  .outstanding-position::after {
    display: none;
  }

  .outstanding-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }

  .outstanding-title {
    font-size: 28px;
  }

  .title-decor-left img,
  .title-decor-right img {
    height: 18px;
  }

  .outstanding-grid {
    display: flex;
    flex-direction: column;
    border: none;
    border-radius: 0;
  }

  .outstanding-featured {
    border: 1px solid #e5e5e5;
    border-radius: 0px;
    padding: 24px;
    gap: 20px;
  }

  .featured-number {
    font-size: 80px;
  }

  .featured-title {
    font-size: 24px;
  }

  .featured-desc {
    font-size: 14px;
  }

  .featured-bg-sphere {
    width: 200px;
    height: 200px;
    right: -60px;
    bottom: -60px;
  }

  .featured-badge {
    max-width: 180px;
  }

  .outstanding-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .outstanding-card {
    border: 1px solid #e5e5e5;
    border-radius: 0px;
    padding: 12px;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
  }

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

  .card-label-mobile {
    display: block;
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 12px 0;
    color: #242424;
  }

  .card-label-desktop {
    display: none;
  }

  .card-top {
    flex-direction: row;
    align-items: center;
    gap: 0px;
  }

  .outstanding-card:hover {
    transform: none;
  }

  .featured-content {
    align-items: flex-start;
    gap: 16px;
  }

  .card-number {
    font-size: 40px;
  }

  .card-total {
    font-size: 14px;
  }

  .card-desc {
    font-size: 13px;
  }

  .outstanding-card-wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 12px;
    grid-column: span 2; /* Span 2 columns on mobile */
  }

  .card-number-large {
    font-size: 50px;
  }

  .card-info-wide .card-title {
    font-size: 18px;
  }

  .card-title-iso{
    padding-top: 10px;
    font-size: 14px;
  }

  .featured-rank{
    font-weight: 700;
  }
}

/* ====================================
   Achievements Section
   ==================================== */

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

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

/* ====================================
   Header
   ==================================== */

.achievements-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.achievements-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1.2;
}

.title-decor-left img,
.title-decor-right img {
  height: 24px;
  width: auto;
}

/* ====================================
   Grid - 4 Columns
   ==================================== */

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ====================================
   Achievement Card (Background Image Cover)
   ==================================== */

.achievement-card {
  position: relative;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  min-height: 350px;
  display: flex;
  flex-direction: column;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}

.achievement-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: var(--cl-primary);
}

/* Overlay for better text readability */
.achievement-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

/* Content */
.achievement-content {
  position: relative;
  z-index: 2;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Number */
.achievement-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1;
}

.achievement-number .counter {
  font-family: inherit;
}

/* Description */
.achievement-desc {
  font-size: 14px;
  color: #242424;
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

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

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

  .achievements-title {
    font-size: 36px;
  }

  /* 2 columns on tablet */
  .achievements-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .achievement-card {
    min-height: 320px;
  }

  .achievement-number {
    font-size: 42px;
  }

  .achievement-desc {
    font-size: 13px;
  }
}

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

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

  /* Header */
  .achievements-header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }

  .achievements-title {
    font-size: 28px;
  }

  .title-decor-left img,
  .title-decor-right img {
    height: 18px;
  }

  /* 2x2 Grid on mobile (like image 2) */
  .achievements-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .achievement-card {
    min-height: 240px;
  }

  .achievement-content {
    padding: 16px;
    gap: 12px;
  }

  .achievement-number {
    font-size: 32px;
  }

  .achievement-desc {
    font-size: 12px;
    line-height: 1.5;
  }

  /* Remove hover effect on mobile */
  .achievement-card:hover {
    transform: none;
  }
}

/* ====================================
   RESPONSIVE - Small Mobile (< 480px)
   ==================================== */

@media screen and (max-width: 480px) {
  .achievements {
    padding: 32px 0;
  }

  .achievements-title {
    font-size: 24px;
  }

  .achievements-grid {
    gap: 12px;
  }

  .achievement-card {
    min-height: 200px;
  }

  .achievement-content {
    padding: 12px;
    gap: 8px;
  }

  .achievement-number {
    font-size: 28px;
  }

  .achievement-desc {
    font-size: 11px;
  }
}

/* ====================================
   Quality Standards Section
   ==================================== */

.quality-standards {
  padding: 80px 0;
  background-color: #fff;
}

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

/* ====================================
   Header
   ==================================== */

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

.quality-title {
  font-size: 44px;
  font-weight: 700;
  color: var(--cl-primary);
  line-height: 1.2;
}

.title-decor-right {
  flex: 1;
}

.title-decor-right img {
  height: 24px;
  width: auto;
}

/* ====================================
   2 Columns Grid
   ==================================== */

.quality-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 20px;;
}

.quality-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* ====================================
   Quality Item
   ==================================== */

.quality-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Icon - Larger & No Background Color */
.quality-icon {
  flex-shrink: 0;
  width: 80px; /* Larger */
  height: 80px; /* Larger */
  display: flex;
  align-items: center;
  justify-content: center;
}

.quality-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Preserve aspect ratio */
}

/* Content */
.quality-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quality-item-title {
  font-size: 20px;
  font-weight: 700;
  color: #242424;
  margin: 0;
}

.quality-desc {
  font-size: 14px;
  color: #707070;
  line-height: 1.8;
  margin: 0;
  text-align: justify;
}

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

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

  .quality-title {
    font-size: 36px;
  }

  /* Single column on tablet */
  .quality-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .quality-column {
    gap: 28px;
  }

  .quality-item-title {
    font-size: 18px;
  }

  .quality-desc {
    font-size: 13px;
  }

  .quality-icon {
    width: 72px;
    height: 72px;
  }
}

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

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

  /* Header */
  .quality-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 24px;
  }

  .quality-title {
    font-size: 28px;
  }

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

  .title-decor-right img {
    height: 18px;
  }

  /* Single column on mobile */
  .quality-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .quality-column {
    gap: 24px;
  }

  /* Keep horizontal layout on mobile (don't stack) */
  .quality-item {
    gap: 16px;
  }

  .quality-icon {
    width: 64px;
    height: 64px;
  }

  .quality-item-title {
    font-size: 16px;
  }

  .quality-desc {
    font-size: 13px;
    line-height: 1.7;
  }
}

/* ====================================
   RESPONSIVE - Small Mobile (< 480px)
   ==================================== */

@media screen and (max-width: 480px) {
  .quality-standards {
    padding: 32px 0;
  }

  .quality-title {
    font-size: 24px;
  }

  .quality-grid {
    gap: 20px;
  }

  .quality-column {
    gap: 20px;
  }

  .quality-icon {
    width: 56px;
    height: 56px;
  }

  .quality-item-title {
    font-size: 15px;
  }

  .quality-desc {
    font-size: 12px;
  }
}


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

.vefptu-campus-section {
  padding: 80px 0;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}

.vefptu-campus-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

/* ====================================
   Title Common
   ==================================== */

.vefptu-campus-section .title-common {
  margin-bottom: 24px;
}

/* ====================================
   Intro Text
   ==================================== */

.vefptu-campus-intro {
  font-size: 15px;
  color: #707070;
  line-height: 1.8;
  margin: 0 0 40px 0;
  max-width: 100%;
}

/* ====================================
   Background Decoration
   ==================================== */

.vefptu-campus-background-decor {
  position: absolute;
  right: -100px;
  top: 50%;
  transform: translateY(-50%);
  width: 600px;
  height: 600px;
  z-index: 1;
  opacity: 0.3;
  pointer-events: none;
}

.vefptu-campus-background-decor img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ====================================
   DESKTOP VERSION - Show / Hide
   ==================================== */

.vefptu-campus-desktop {
  display: flex;
}

.vefptu-campus-mobile {
  display: none;
}

/* ====================================
   Campus Grid - Desktop
   ==================================== */

.vefptu-campus-grid {
  position: relative;
  z-index: 2;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.vefptu-campus-card {
  flex: 1;
  min-width: 200px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  border-right: 1px solid #e5e5e5;
}

.vefptu-campus-card:last-child {
  border-right: none;
}

.vefptu-campus-card:hover,
.vefptu-campus-card.active {
  flex: 2.5;
}

.vefptu-campus-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.vefptu-campus-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.vefptu-campus-card:hover .vefptu-campus-image img,
.vefptu-campus-card.active .vefptu-campus-image img {
  transform: scale(1.08);
}

.vefptu-campus-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  min-height: 160px;
  background: #fff;
}

.vefptu-campus-decorations {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.vefptu-campus-card:hover .vefptu-campus-decorations,
.vefptu-campus-card.active .vefptu-campus-decorations {
  opacity: 0.7;
}

.vefptu-campus-decorations .decor-top {
  position: absolute;
  top: -10px;
  right: 10px;
  width: 170px;
  height: 80px;
  object-fit: contain;
}

.vefptu-campus-decorations .decor-bottom {
  position: absolute;
  bottom: -10px;
  right: 50px;
  width: 300px;
  height: 80px;
  object-fit: contain;
}

.vefptu-campus-location {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}

.vefptu-campus-location img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.vefptu-campus-card:hover .vefptu-campus-location img,
.vefptu-campus-card.active .vefptu-campus-location img {
  transform: scale(1.1);
}

.vefptu-campus-location h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  margin: 0;
  transition: all 0.3s ease;
}

.vefptu-campus-card:hover .vefptu-campus-location h3,
.vefptu-campus-card.active .vefptu-campus-location h3 {
  font-size: 18px;
  color: var(--cl-primary);
}

.vefptu-campus-desc {
  font-size: 13px;
  color: #707070;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}

.vefptu-campus-card:hover .vefptu-campus-desc,
.vefptu-campus-card.active .vefptu-campus-desc {
  color: #242424;
}

/* ====================================
   MOBILE VERSION - Accordion
   ==================================== */

.vefptu-campus-accordion-item {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.vefptu-campus-accordion-item:last-child {
  margin-bottom: 0;
}

/* Accordion Header */
.vefptu-campus-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  transition: background 0.3s ease;
}

.vefptu-campus-accordion-item.active .vefptu-campus-accordion-header {
  background: #fff;
}

.vefptu-campus-accordion-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.vefptu-campus-accordion-title img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.vefptu-campus-accordion-title h3 {
  font-size: 16px;
  font-weight: 700;
  color: #242424;
  margin: 0;
  transition: color 0.3s ease;
}

.vefptu-campus-accordion-item.active .vefptu-campus-accordion-title h3 {
  color: var(--cl-primary);
}

/* Toggle Button */
.vefptu-campus-accordion-toggle {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  padding: 0;
}

.vefptu-campus-accordion-toggle .toggle-icon {
  width: 20px;
  height: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vefptu-campus-accordion-toggle .toggle-icon::before,
.vefptu-campus-accordion-toggle .toggle-icon::after {
  content: "";
  position: absolute;
  background: var(--cl-primary);
  transition: all 0.3s ease;
}

.vefptu-campus-accordion-toggle .toggle-icon::before {
  width: 20px;
  height: 2px;
}

.vefptu-campus-accordion-toggle .toggle-icon::after {
  width: 2px;
  height: 20px;
}

.vefptu-campus-accordion-item.active .vefptu-campus-accordion-toggle .toggle-icon::after {
  opacity: 0;
  transform: rotate(90deg);
}

/* Accordion Content */
.vefptu-campus-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
  padding: 0 16px;
  position: relative;
}

.vefptu-campus-accordion-item.active .vefptu-campus-accordion-content {
  max-height: 800px;
  padding: 0 16px 16px;
}

/* Decorations in Accordion */
.vefptu-campus-accordion-decorations {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

.vefptu-campus-accordion-decorations .decor-top {
  position: absolute;
  top: -5px;
  right: 5px;
  width: 100px;
  height: 50px;
  object-fit: contain;
}

.vefptu-campus-accordion-decorations .decor-bottom {
  position: absolute;
  bottom: 50px;
  right: 20px;
  width: 150px;
  height: 50px;
  object-fit: contain;
}

.vefptu-campus-accordion-desc {
  font-size: 13px;
  color: #707070;
  line-height: 1.6;
  margin: 0 0 16px 0;
  position: relative;
  z-index: 2;
}

.vefptu-campus-accordion-image {
  width: 100%;
  height: 200px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.vefptu-campus-accordion-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ====================================
   RESPONSIVE - TABLET
   ==================================== */

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

  .vefptu-campus-section .title-common h2 {
    font-size: 36px;
  }

  .vefptu-campus-intro {
    font-size: 14px;
    margin-bottom: 32px;
  }

  .vefptu-campus-background-decor {
    width: 450px;
    height: 450px;
    right: -80px;
  }

  .vefptu-campus-card {
    min-width: 160px;
  }

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

  .vefptu-campus-content {
    padding: 16px;
    min-height: 140px;
  }

  .vefptu-campus-decorations .decor-top {
    width: 120px;
    height: 60px;
  }

  .vefptu-campus-decorations .decor-bottom {
    width: 200px;
    height: 60px;
    right: 30px;
  }
}

/* ====================================
   RESPONSIVE - MOBILE (Switch to Accordion)
   ==================================== */

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

  .vefptu-campus-section .title-common {
    margin-bottom: 20px;
  }

  .vefptu-campus-section .title-common h2 {
    font-size: 28px;
  }

  .vefptu-campus-section .title-common-decor-right img {
    max-width: 100px;
  }

  .vefptu-campus-intro {
    font-size: 13px;
    margin-bottom: 24px;
  }

  .vefptu-campus-background-decor {
    display: none;
  }

  /* HIDE DESKTOP, SHOW MOBILE */
  .vefptu-campus-desktop {
    display: none !important;
  }

  .vefptu-campus-mobile {
    display: block;
  }
}

/* ====================================
   RESPONSIVE - Small Mobile
   ==================================== */

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

  .vefptu-campus-section .title-common h2 {
    font-size: 24px;
  }

  .vefptu-campus-section .title-common-decor-right img {
    max-width: 80px;
  }

  .vefptu-campus-accordion-header {
    padding: 14px;
  }

  .vefptu-campus-accordion-title h3 {
    font-size: 15px;
  }

  .vefptu-campus-accordion-desc {
    font-size: 12px;
  }

  .vefptu-campus-accordion-image {
    height: 180px;
  }

  .vefptu-campus-accordion-decorations .decor-top {
    width: 70px;
    height: 35px;
  }

  .vefptu-campus-accordion-decorations .decor-bottom {
    width: 100px;
    height: 35px;
  }
}

/* ===== PARTNERS SECTION ===== */
.partners {
  padding: 80px 0;
  position: relative;
  background: #ffffff;
}

.partners::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

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

.partners-desc {
  margin-top: 16px;
  color: #707070;
  font-size: 15px;
  line-height: 1.6;
  max-width: 900px;
}

.partners-section {
  margin-top: 60px;
}

.partners-section-title {
  font-size: 20px;
  font-weight: 700;
  color: #1e1e1e;
  margin-bottom: 32px;
}

/* ===== DESKTOP & TABLET - GRID LAYOUT ===== */
.partners-slider-wrapper {
  position: relative;
}

/* Default: Show desktop grid, hide mobile swiper */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: grid !important;
}

/* Desktop Grid */
.partners-grid-education,
.partners-grid-business {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 40px 24px;
  align-items: center;
}

.partners-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.partners-item:hover {
  transform: translateY(-4px);
}

.partners-item img {
  width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(0%);
  transition: filter 0.3s ease;
}

.partners-item:hover img {
  filter: grayscale(0%) brightness(1.1);
}

/* Hide navigation buttons on desktop */
.partners-next-education,
.partners-prev-education,
.partners-next-business,
.partners-prev-business {
  display: none !important;
}

/* ===== TABLET (768px - 991px) ===== */
@media (max-width: 991px) {
  .partners {
    padding: 60px 0;
  }

  .partners::before {
    height: 60%;
  }

  .partners-desc {
    font-size: 14px;
  }

  .partners-section {
    margin-top: 50px;
  }

  .partners-section-title {
    font-size: 18px;
    margin-bottom: 24px;
  }

  /* 5 columns for tablet */
  .partners-grid-education,
  .partners-grid-business {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 32px 20px;
  }

  .partners-item img {
    max-height: 50px;
  }
}

/* ===== MOBILE (<= 767px) - SWIPER SLIDER ===== */
@media (max-width: 767px) {
  .partners {
    padding: 50px 0;
  }

  .partners::before {
    height: 50%;
  }

  .partners-desc {
    font-size: 13px;
    line-height: 1.5;
  }

  .partners-section {
    margin-top: 40px;
  }

  .partners-section-title {
    font-size: 16px;
    margin-bottom: 20px;
  }

  /* Show mobile swiper, hide desktop grid */
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
  }

  /* Slider wrapper - BỎ PADDING (không cần chỗ cho buttons) */
  .partners-slider-wrapper {
    position: relative;
    padding: 0; /* ✅ Bỏ padding */
  }

  /* Swiper container */
  .partners-swiper-education,
  .partners-swiper-business {
    width: 100%;
    height: auto;
    overflow: hidden; /* ✅ Ẩn overflow */
  }

  /* Swiper wrapper */
  .partners-swiper-education .swiper-wrapper,
  .partners-swiper-business .swiper-wrapper {
    align-items: center;
  }

  /* Swiper slide */
  .partners-swiper-education .swiper-slide,
  .partners-swiper-business .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
  }

  /* Partners item in mobile - 3 logos */
  .mobile-only .partners-item {
    width: 100%;
    padding: 15px 5px;
  }

  .mobile-only .partners-item img {
    width: 100%;
    max-width: 90px; /* ✅ Nhỏ hơn vì hiện 3 logo */
    height: auto;
    max-height: 50px;
    object-fit: contain;
  }

  /* ✅ ẨN HOÀN TOÀN NAVIGATION BUTTONS */
  .partners-next-education,
  .partners-prev-education,
  .partners-next-business,
  .partners-prev-business {
    display: none !important;
  }
}

/* Small mobile */
@media (max-width: 375px) {
  .partners-slider-wrapper {
    padding: 0;
  }

  .mobile-only .partners-item img {
    max-width: 70px; /* ✅ Còn nhỏ hơn cho màn nhỏ */
    max-height: 40px;
  }
}


/* ====================================
   CAMPUS BASE - Sử dụng imgfacilitiesModal
   ==================================== */

/* Facility Trigger */
.facility-trigger {
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.facility-trigger:hover {
  opacity: 0.8;
}

/* ====================================
   CORE COMPETENCIES - 4 COLUMNS SLIDING
   ==================================== */

.core-competencies {
  padding: 80px 0;
  background: #fff;
}

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

/* Title */
.core-competencies .intro-title {
  margin-bottom: 60px;
}

/* Main Container */
/* Navigation Buttons */
.core-nav-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.core-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #ff6b00;
  background: #fff;
  color: #ff6b00;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.core-nav-btn:hover {
  background: #ff6b00;
  color: #fff;
  transform: scale(1.1);
}

.core-nav-btn svg {
  width: 20px;
  height: 20px;
}

.core-main {
  display: flex;
  /* gap: 40px; */
  align-items: stretch;
  flex-wrap: wrap;
}

.core-main .core-nav-buttons {
  width: 100%;
  order: -1;
}

.core-main .core-columns-wrapper {
  flex: 3;
}

.core-main .core-content-panel {
  flex: 6;
}

/* Columns Wrapper */
.core-columns-wrapper {
  display: flex;
  align-items: flex-end; /* Căn đáy để tạo bậc thang */
  gap: 0;
  flex-shrink: 0;
}

/* Single Column */
.core-column {
  width: 120px;
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
  overflow: hidden;
}

/* Chiều cao bậc thang: trái thấp → phải cao */
.core-column[data-column="1"] {
  height: 300px;
  background: #ffd4b3;
}

.core-column[data-column="2"] {
  height: 350px;
  background: #ffb380;
}

.core-column[data-column="3"] {
  height: 400px;
  background: var(--cl-primary);
}

.core-column[data-column="4"] {
  height: 450px;
  background: #ff8533;
}

/* Hover effect */
.core-column:hover {
  transform: translateY(-5%);
}

/* Active column */
.core-column.active {
  width: 140px;
  height: 450px !important;
}

/* Background Image */
.core-column-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 1;
}

.core-column-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.core-column.active .core-column-bg {
  opacity: 1;
}

/* Labels */
.core-label {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 10px;
  z-index: 2;
}

.core-label span {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: white;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Content Panel */
.core-content-panel {
  flex: 1;
  background: #fff;
  padding: 40px;
  position: relative;
}

.core-content-item {
  display: none;
  opacity: 0;
  animation: fadeInSlide 0.6s ease forwards;
}

.core-content-item.active {
  display: block;
}

@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.core-content-item h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--cl-primary);
  margin: 0 0 20px 0;
}

.core-content-text {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
}

.core-content-text p {
  margin: 0 0 15px 0;
}

/* ===== RESPONSIVE ===== */
/* iPad và Mobile - Dùng layout dọc */
@media (max-width: 1024px) {
  .core-competencies {
    padding: 60px 0;
  }

  .core-competencies .intro-title {
    margin-bottom: 40px;
  }

  .core-main {
    flex-direction: column;
    /* gap: 20px; */
  }

  /* Layout dọc cho mobile */
  .core-columns-wrapper {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  /* Chiều cao đồng nhất, width ngắn dài */
  .core-column[data-column="1"] {
    width: 50%;
    height: 65px;
  }

  .core-column[data-column="2"] {
    width: 65%;
    height: 65px;
  }

  .core-column[data-column="3"] {
    width: 80%;
    height: 65px;
  }

  .core-column[data-column="4"] {
    width: 100%;
    height: 65px;
  }

  .core-column.active {
    width: 100%;
    height: 65px !important;
  }

  /* Labels nằm ngang */
  .core-label {
    flex-direction: row;
    justify-content: center;
    gap: 4px;
    padding: 15px 10px;
  }

  .core-label span {
    font-size: 16px;
    letter-spacing: 1px;
  }

  /* Background mobile */
  .core-column-bg img {
    object-fit: contain;
  }

  .core-content-panel {
    padding: 25px;
  }

  .core-content-item h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }

  .core-content-text {
    font-size: 14px;
  }

  .core-column:hover {
  transform: translateY(0%);
  }

}

/* ============================================
   Card Total - Desktop/Mobile Separation
   ============================================ */

/* Desktop: Ẩn card-total-mobile */
.card-total-mobile {
  display: none;
}

/* Mobile: Ẩn card-total-desktop, hiện card-total-mobile */
@media (max-width: 767px) {
  .card-total-desktop {
    display: none;
  }
  .card-total-mobile {
    display: block;
    padding-top: 10px;
  }
}