/* Tabs Section */
.about-tabs-section {
   background: #fff;
   border-bottom: 2px solid #e0e0e0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-section::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('../images/organ-bg.png');
   /* Link ảnh nền sóng */
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center bottom;
   z-index: 1;
}

.about-tabs {
   display: flex;
   list-style: none;
   padding: 0;
   margin: 0;
   justify-content: center;
   flex-wrap: wrap;
}

.about-tab-item {
   flex: 1;
   min-width: 200px;
}

.about-tab-link {
   display: block;
   padding: 20px 30px;
   text-align: center;
   color: #333;
   text-decoration: none;
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.9rem;
   letter-spacing: 0.5px;
   transition: all 0.3s ease;
   border-bottom: 2px solid transparent;
}

.about-tab-item.active .about-tab-link,
.about-tab-link:hover {
   color: #00C4CD;
   border-bottom-color: #00C4CD;
}

/* About Sections */
.about-section {
   padding: 80px 0;
}

.about-section:nth-child(even) {
   background: #f8f9fa;
}

.about-section-title {
   font-size: 2.5rem;
   font-weight: 700;
   color: #00C4CD;
   text-transform: uppercase;
   margin-bottom: 30px;
   letter-spacing: 2px;
}

/* Lời Ngỏ Section */
.loi-ngo-section {
   min-height: 600px;
}

.about-text-large {
   font-size: 8rem;
   font-weight: 900;
   line-height: 1;
   margin-bottom: 30px;
}

.text-highlight {
   color: #00C4CD;
   display: block;
   position: absolute;
   top: 60px;
   left: 50px;
}

.text-highlight1 {
   color: #00C4CD;
   display: block;
   opacity: 0.3;
}

.quality-section {
   padding: 6rem 0;
   overflow-x: hidden;
   /* Tránh cuộn ngang trên di động */
}

/* 1. Tiêu đề "CHẤT LƯỢNG" bên trái */
.quality-title {
   font-size: 2.5rem;
   font-weight: 900;
   color: #00C4CD;
   /* Màu cam giống trong ảnh */
   text-transform: uppercase;
   line-height: 1.2;
}

/* 2. Tùy chỉnh danh sách các mục (Bootstrap Nav-pills) */
.quality-steps .nav-link {
   /* Xóa giao diện "viên thuốc" mặc định */
   background-color: transparent !important;
   border: 0;
   border-radius: 0;

   /* Căn chỉnh và font chữ */
   padding: 0.25rem 0;
   /* Giảm padding */
   margin-bottom: 1.25rem;
   text-align: left;
   font-size: 1.15rem;
   text-transform: uppercase;

   /* Màu chữ cho mục không được chọn */
   color: #AEB6BF;
   /* Màu xám nhạt */
   font-weight: 500;
}

/* 3. Tùy chỉnh mục đang được chọn (active) */
.quality-steps .nav-link.active {
   /* Màu chữ cho mục được chọn */
   color: #212529;
   /* Màu đen/xám đậm */
   font-weight: 700;
}

/* 4. Tùy chỉnh nội dung mô tả bên phải */
.quality-content .tab-pane {
   padding-left: 1rem;
   /* Tạo khoảng cách với danh sách */
}

.quality-content p {
   font-size: 1rem;
   color: #343A40;
   line-height: 1.7;
}

/* Điều chỉnh responsive cho màn hình nhỏ */
@media (max-width: 991.98px) {
   .quality-title {
      text-align: center;
      margin-bottom: 3rem;
   }

   .quality-steps-wrapper {
      /* Dùng flex-column để xếp chồng trên di động */
      flex-direction: column;
   }

   .quality-steps .nav-link {
      text-align: center;
      /* Căn giữa các mục trên di động */
   }

   .quality-content .tab-pane {
      padding-left: 0;
      padding-top: 1rem;
      text-align: center;
      /* Căn giữa nội dung trên di động */
   }
}

.service-section {
   padding: 6rem 0;
   overflow-x: hidden;
}

/* 1. Tiêu đề "DỊCH VỤ" bên trái */
.service-title {
   font-size: 2.5rem;
   font-weight: 900;
   color: #00C4CD;
   /* Màu cam */
   text-transform: uppercase;
   line-height: 1.2;
}

/* 2. Tùy chỉnh danh sách các mục (Bootstrap Nav-pills) */
.service-steps .nav-link {
   background-color: transparent !important;
   border: 0;
   border-radius: 0;
   padding: 0.25rem 0;
   margin-bottom: 1.25rem;
   text-align: left;
   font-size: 1.15rem;
   text-transform: uppercase;

   /* Màu chữ cho mục không được chọn */
   color: #AEB6BF;
   /* Màu xám nhạt */
   font-weight: 500;
}

/* 3. Tùy chỉnh mục đang được chọn (active) */
.service-steps .nav-link.active {
   /* Màu chữ cho mục được chọn */
   color: #2c3e50;
   /* Màu xanh đen */
   font-weight: 700;
}

/* 4. Tùy chỉnh nội dung mô tả bên phải */
.service-content .tab-pane {
   padding-left: 1rem;
}

.service-content p {
   font-size: 1rem;
   color: #343A40;
   line-height: 1.7;
}

/* Điều chỉnh responsive cho màn hình nhỏ */
@media (max-width: 991.98px) {
   .service-title {
      text-align: center;
      margin-bottom: 3rem;
   }

   .service-steps-wrapper {
      flex-direction: column;
   }

   .service-steps .nav-link {
      text-align: center;
   }

   .service-content .tab-pane {
      padding-left: 0;
      padding-top: 1rem;
      text-align: center;
   }
}

.facilities-section {
   padding: 6rem 0;
   overflow-x: hidden;
}

/* Tiêu đề "CƠ SỞ VẬT CHẤT" */
.facilities-title {
   font-size: 2.5rem;
   /* Kích thước nhỏ hơn tiêu đề chính "DỊCH VỤ" */
   font-weight: 900;
   color: #00C4CD;
   /* Màu cam */
   text-transform: uppercase;
}

/* Đoạn văn mô tả */
.facilities-description {
   font-size: 1rem;
   color: #343A40;
   line-height: 1.7;
}

/* Tùy chỉnh 4 ảnh nhỏ bên dưới */
.small-gallery-img {
   width: 100%;
   height: 120px;
   /* Đặt chiều cao cố định */
   object-fit: cover;
   /* Đảm bảo ảnh lấp đầy khung mà không bị méo */
}

/* Ảnnh lớn bên trái */
.large-facility-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* Đảm bảo 2 cột có chiều cao bằng nhau trên desktop */
@media (min-width: 992px) {
   .facilities-row {
      display: flex;
   }

   .facilities-col-left,
   .facilities-col-right {
      display: flex;
      flex-direction: column;
   }

   .facilities-col-right {
      justify-content: center;
      /* Canh giữa nội dung cột phải theo chiều dọc */
   }
}

/* Responsive cho mobile */
@media (max-width: 991.98px) {

   .facilities-title,
   .facilities-description {
      text-align: center;
      /* Căn giữa chữ trên mobile */
   }
}

.sustainability-section {
   padding: 6rem 0;
   overflow-x: hidden;
   position: relative;
}

/* Hiệu ứng sóng lượn ở background */
.sustainability-section::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: url('../images/organ-bg.png');
   /* Link ảnh nền sóng */
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center bottom;
   z-index: 1;
}

.sustainability-section .container {
   position: relative;
   z-index: 2;
}

/* Tiêu đề chính */
.sustainability-title {
   font-size: 2.5rem;
   font-weight: 900;
   color: #00C4CD;
   /* Màu cam */
   text-transform: uppercase;
}

.sustainability-subtitle {
   color: #6c757d;
}

/* Lưới chứa 17 ảnh mục tiêu */
.sdg-grid {
   display: grid;
   /* 6 cột trên màn hình lớn, 4 trên tablet, 3 trên mobile */
   grid-template-columns: repeat(6, 1fr);
   gap: 0.75rem;
}

@media (max-width: 991.98px) {
   .sdg-grid {
      grid-template-columns: repeat(4, 1fr);
   }
}

@media (max-width: 575.98px) {
   .sdg-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Tùy chỉnh các nút bấm (là các ảnh) */
.sdg-grid .nav-link {
   padding: 0;
   border: 2px solid transparent;
   border-radius: 8px;
   /* Bo góc nhẹ */
   transition: all 0.3s ease-in-out;
   opacity: 0.7;
   /* Làm mờ các mục không được chọn */
   transform: scale(0.95);
}

/* Hiệu ứng khi mục được chọn (active) */
.sdg-grid .nav-link.active {
   opacity: 1;
   transform: scale(1.05);
   border-color: #D9531E;
   /* Viền cam khi được chọn */
   box-shadow: 0 4px 15px rgba(217, 83, 30, 0.4);
}

.sdg-grid .nav-link img {
   border-radius: 6px;
}

/* Nội dung bên phải */
.sdg-content-wrapper {
   position: sticky;
   top: 100px;
   /* Giữ nội dung cố định khi cuộn */
}

.sdg-content-wrapper h3 {
   font-weight: 700;
   text-transform: uppercase;
   color: #212529;
}

.sdg-content-wrapper p {
   font-size: 1.1rem;
   color: #495057;
}

@media (max-width: 991.98px) {

   .sustainability-title,
   .sustainability-subtitle {
      text-align: center;
   }

   .sdg-content-wrapper {
      position: static;
      /* Bỏ sticky trên mobile */
      margin-top: 2rem;
      text-align: center;
   }

   .about-text-large {
      font-size: 4rem;
   }

   .about-section-title {
      font-size: 2rem;
   }

   .about-content {
      position: relative;
      top: 60px;
   }
}