/* Home hero overrides for static layout */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap');

.slider-static {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 8vh 10vw;
  gap: 3.5rem;
}

.slider-static__item {
  position: relative;
  max-width: 40rem;
}

.slider-static__item .slider-content {
  position: relative;
}

.slider-static .slider-h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  color: #fff;
}

.slider-static .slider-des {
  max-width: 34rem;
  width: 100%;
  line-height: 1.7;
  font-size: 1.05rem;
}

/* compact side drawer menu */
.overlay-dark {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 43, 69, 0.45);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: opacity 0.4s ease;
  cursor: pointer;
}

.overlay-dark.show {
  opacity: 1;
  pointer-events: auto;
}

.menu2 {
  position: fixed;
  left: auto;
  right: 0;
  top: 0;
  width: min(100vw, 340px);
  height: 100vh;
  background: #fff;
  padding: 7rem 3rem 3rem;
  box-shadow: -20px 0 45px rgba(0, 0, 0, 0.15);
  z-index: 99999;
  display: none;
  overflow-y: auto;
}

.menu2.active {
  display: block;
}

.menu2 ul {
  width: 100%;
  margin: 0;
  color: #0d2b45;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 150px;
}

.menu2 li {
  margin-bottom: 0.8rem;
  display: block;
}

.menu2 li .num {
  display: none;
}

.menu2 li a {
  font-size: 1.5rem;
  color: #19191b;
  position: relative;
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
}

.menu2 li a::before {
  display: none;
}

.menu2 li a:hover {
  color: #ca8423;
}

.menu2 .menu-close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0d2b45;
  font-size: 1.6rem;
  transition: color 0.2s ease;
}

.menu2 .menu-close:hover {
  color: #ca8423;
}

/* partner logos grid */
.partner-grid {
  padding: 10px 0;
  background: #fff;
}

.partner-grid__list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
}

.partner-grid__item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.partner-grid .item_doitac {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  position: relative;
}

.partner-grid .item_doitac .item_img {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 72px;
  width: 100%;
}

.partner-grid .item_doitac img {
  max-height: 48px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  transform: scale(2.5);
  transition: filter 0.4s ease;
  filter: brightness(10%);
}

@media (max-width: 1400px) {
  .partner-grid__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1200px) {
  .partner-grid__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem 2rem;
  }
}

@media (max-width: 992px) {
  .partner-grid {
    padding: 3rem 6vw 4rem;
  }

  .partner-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }

  .partner-grid .item_doitac .item_img {
    min-height: 64px;
  }
}

@media (max-width: 600px) {
  .partner-grid {
    padding: 2.5rem 1.5rem 3rem;
  }

  .partner-grid__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }

  .partner-grid .item_doitac .item_img {
    min-height: 56px;
  }

  .partner-grid .item_doitac img {
    max-height: 42px;
  }
}

/* service list */
.service-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.service-list__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 1.5rem;
}

.service-list__item:last-child {
  border-bottom: none;
}

.service-list__link {
  display: flex;
  align-items: flex-start;
  gap: 6rem;
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.service-list__index {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.35);
  min-width: 3rem;
  display: inline-block;
}

.service-list__content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: #fff;
  transition: color 0.2s ease;
}

.service-list__content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  max-width: 48rem;
}

.service-list__link:hover .service-list__content h3 {
  color: #ca8423;
}

.service-list__link:hover .service-list__index {
  color: rgba(202, 132, 35, 0.85);
}

@media (max-width: 768px) {
  .service-list {
    margin-top: 1.5rem;
  }

  .service-list__link {
    gap: 1rem;
  }

  .service-list__content h3 {
    font-size: 1.35rem;
  }
}

.k-h {
  display: flex;
  align-items: center;
}

.k-h a {
  margin: 0 8px !important;
  font-size: 16px;
}

.gallery {
  column-count: 4;
  column-gap: 2px;
}

/* Làm tối các item khác khi hover vào một item */
.menu-filter-gallery {
}

.gallery:hover .gallery-item:not(:hover) {
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.gallery-item:hover {
  opacity: 1;
  z-index: 10;
  position: relative;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gallery-item:hover img {
  transform: scale(1.04);
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: all ease 0.4s;
}
/* Overlay fade */
.gallery-info-item {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 130px;
  padding: 1.3rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(8px)  saturate(120%);
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.gallery-info-item p {
  font-size: 0.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hover effect */
.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item:hover .gallery-info-item {
  opacity: 1;
}

.gallery-item .item_name {
  font-size: 1.1rem;
  font-weight: 550;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.date span {
  font-size: 0.8rem;
  color: #ccc;
}

.slider-video {
  position: relative;
}

.text-vid {
  position: absolute;
  bottom: 2%; /* canh giữa theo chiều dọc */
  left: 50px; /* khoảng cách từ mép trái */
  transform: translateY(-50%);
  z-index: 5; /* cao hơn video */
  color: #fff;
  max-width: 800px;
}

/* tiêu đề chính */
.text-vid h1 {
  font-size: clamp(40px, 8vw, 88px);
  font-weight: 800;
  line-height: 1;
  margin: 0 0 15px;
  text-transform: uppercase;
  text-shadow: 0 2px 25px rgba(0, 0, 0, 0.4);
}

/* đoạn mô tả */
.text-vid p {
  font-size: clamp(16px, 2vw, 26px);
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.45);
  margin: 0;
}

.text-date {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 15px;
}

.text-date span:nth-child(2) {
  font-size: 3.5rem;
}

.text-date span {
  font-family: 'Poppins', sans-serif;

  font-weight: 900;
  font-size: 4.4rem;
  color: transparent;
  -webkit-text-stroke: 2px #ffffff;
  text-transform: uppercase;
}

.slider-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(40deg, #09090980, transparent 90%);
  z-index: 2;
  pointer-events: none;
}

.show_menu2.is-active {
  filter: invert(1);
}

#header:has(~ .menu2.active) .menu_lang a {
  filter: invert(1);
}

/* Ẩn SVG mặc định */
.fancybox-button--arrow_left svg,
.fancybox-button--arrow_right svg {
  display: none;
}

/* Nút mũi tên phải */
.fancybox-button--arrow_right::before {
  content: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M9.71069 18.2929C10.1012 18.6834 10.7344 18.6834 11.1249 18.2929L16.0123 13.4006C16.7927 12.6195 16.7924 11.3537 16.0117 10.5729L11.1213 5.68254C10.7308 5.29202 10.0976 5.29202 9.70708 5.68254C9.31655 6.07307 9.31655 6.70623 9.70708 7.09676L13.8927 11.2824C14.2833 11.6729 14.2833 12.3061 13.8927 12.6966L9.71069 16.8787C9.32016 17.2692 9.32016 17.9023 9.71069 18.2929Z' fill='%23ffffff'/></svg>");
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* Nút mũi tên trái */
.fancybox-button--arrow_left::before {
  content: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M14.2893 5.70708C13.8988 5.31655 13.2657 5.31655 12.8751 5.70708L7.98768 10.5993C7.20729 11.3805 7.2076 12.6463 7.98837 13.427L12.8787 18.3174C13.2693 18.7079 13.9024 18.7079 14.293 18.3174C14.6835 17.9269 14.6835 17.2937 14.293 16.9032L10.1073 12.7175C9.71678 12.327 9.71678 11.6939 10.1073 11.3033L14.2893 7.12129C14.6799 6.73077 14.6799 6.0976 14.2893 5.70708Z' fill='%23ffffff'/></svg>");
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* Nếu cần căn giữa icon */
.fancybox-button--arrow_left::before,
.fancybox-button--arrow_right::before {
  position: relative;
}


.sub-menu {
}

.teams {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.teams .team-item {
  flex: 0 1 calc(20% - 10px);
  box-sizing: border-box;
}

.w_leader .item_name,
.teams .item_name {
  font-weight: 550;
}

@media (max-width: 1200px) {
  .gallery {
    column-count: 3;
  }
}

@media (max-width: 992px) {
  .gallery-info-item {
    height: 100px;
  }
}

@media (max-width: 768px) {
  .gallery {
    column-count: 3;
  }

  .gallery-item .item_name {
    font-size: 1rem;
  }

  .gallery-info-item p {
    font-size: 0.75rem;
  }

  .text-vid {
    left: 16px;
  }
}

@media (max-width: 600px) {
  .gallery {
    column-count: 2;
  }
}

@media only screen and (max-width: 992px) {
  .teams .team-item {
    flex: 0 1 calc(25% - 10px);
    box-sizing: border-box;
  }
}

@media only screen and (max-width: 600px) {
  .teams .team-item {
    flex: 0 1 calc(33% - 10px);
    box-sizing: border-box;
  }

  .date svg {
    width: 30px !important;
  }
}

@media only screen and (max-width: 512px) {
  .text-vid {
    bottom: -16%;
  }
}

@media only screen and (max-width: 450px) {
  .teams .team-item {
    flex: 0 1 calc(50% - 10px);
  }
}

@media only screen and (max-width: 380px) {
  .k-h {
    display: none;
  }
}