/* ========== BUTTON (Figma: BUTTON 3:84) ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-13) var(--space-24);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-xl);
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: opacity var(--transition);
  cursor: pointer;
}

/* Hover tối thiểu (Figma không có state hover) */
.btn:hover {
  opacity: 0.85;
}

/* Figma mobile (BUTTON_mobile): cao 38px — giữ đúng Figma, vùng bấm nới tới 44px bằng ::before trong suốt */
@media (max-width: 767px) {
  .btn {
    position: relative;
    height: var(--btn-h-mobile);
    padding: 0 var(--space-14);
    font-size: var(--fs-body-m);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body-m);
  }

  .btn::before {
    content: '';
    position: absolute;
    inset: calc((var(--btn-h-mobile) - var(--space-44)) / 2) 0;
  }
}

.btn--primary {
  color: var(--color-black);
  background-color: var(--color-primary);
}

.btn--secondary {
  color: var(--color-white);
  background-color: var(--color-secondary);
}

.btn--light {
  color: var(--color-dark);
  background-color: var(--color-neutral);
}

.btn--dark {
  color: var(--color-white);
  background-color: var(--color-dark);
}

/* Nút nhỏ 48px có icon (Figma: BUTTON 278:2344) */
.btn--sm {
  gap: var(--space-8);
  padding: var(--space-12) var(--space-24);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
}

.btn--wide {
  padding-right: var(--space-32);
  padding-left: var(--space-32);
}

.btn--compact {
  padding: var(--space-11) var(--space-32);
}

/* Chữ gradient (nút "Gửi yêu cầu") */
.btn__text--gradient {
  color: transparent;
  background-image: var(--gradient-blue);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ========== SECTION TITLE (Figma: heading 10:1897) ========== */
.section-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
}

.section-title--center {
  align-items: center;
  text-align: center;
}

.section-title__label {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label-auto);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-dark);
}

.section-title--center .section-title__label {
  flex-direction: column;
}

/* Gạch 52×3 phía trên/trước nhãn — chiếm 0px chiều cao như Figma */
.section-title__label::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 52px;
  margin-top: calc(var(--space-3) * -1);
  border-top: var(--space-3) solid var(--color-secondary);
}

.section-title--on-dark .section-title__label {
  color: var(--color-gray-200);
}

.section-title--on-dark .section-title__label::before {
  border-top-color: var(--color-primary);
}

.section-title__label--white {
  color: var(--color-white);
}

/* Gạch 52×3 đứng riêng khi Figma ẩn nhãn — chiếm 0px chiều cao */
.section-title__rule {
  display: block;
  width: 52px;
  margin-top: calc(var(--space-3) * -1);
  border-top: var(--space-3) solid var(--color-secondary);
}

.section-title--on-dark .section-title__rule {
  border-top-color: var(--color-primary);
}

/* Nền sáng nhưng gạch vàng (Figma: "Câu chuyện thương hiệu") */
.section-title--rule-primary .section-title__label::before,
.section-title--rule-primary .section-title__rule {
  border-top-color: var(--color-primary);
}

.section-title__heading {
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-dark);
}

.section-title__line {
  display: block;
}

.section-title__text--primary { color: var(--color-primary); }
.section-title__text--secondary { color: var(--color-secondary); }
.section-title__text--dark { color: var(--color-dark); }
.section-title__text--neutral { color: var(--color-neutral); }
.section-title__text--white { color: var(--color-white); }

@media (max-width: 1279px) {
  .section-title__heading {
    white-space: normal;
  }
}

/* Figma mobile (heading_mobile): nhãn 14px, gạch 46px, tiêu đề 28px được xuống dòng */
@media (max-width: 767px) {
  .section-title {
    gap: var(--space-7);
  }

  .section-title__label {
    font-size: var(--fs-body-m);
  }

  .section-title__label::before,
  .section-title__rule {
    width: var(--section-rule-w-mobile);
  }

  .section-title__heading {
    white-space: normal;
  }
}

/* ========== EYEBROW (Figma: Eyebrow 10:57) — ô vuông vàng 6px + nhãn giãn chữ ========== */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: var(--fs-body-l);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.eyebrow::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  background-color: var(--color-cta-yellow);
}

/* ========== TEXT LINK + MŨI TÊN (Figma: text btn 10:1932) ========== */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-l);
  white-space: nowrap;
  color: var(--color-primary);
  transition: opacity var(--transition);
}

.link-arrow:hover {
  opacity: 0.8;
}

/* Link "Xem chi tiết" xanh 18px (Figma: card trang Kiến thức 394:4340) */
.link-arrow--blue {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-xl);
  color: var(--color-secondary);
}

/* Figma dùng icon bi:arrow-down (9.6×14.6 trong khung 16px) xoay -90° */
.link-arrow__icon {
  flex-shrink: 0;
  width: 9.6px;
  height: 14.6px;
  margin: 0.7px 3.2px;
  transform: rotate(-90deg);
}

/* ========== SERVICE CARD (Figma: Service 167:2110) ========== */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 379px;
  height: 340px;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.service-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__caption {
  position: relative;
  padding: var(--space-32) var(--space-20) var(--space-20);
  background-image: var(--gradient-service-caption);
}

.service-card__title {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Figma (trang Dịch vụ): card có thêm lớp gradient đen 60% → 0 ở 59% chiều cao, nằm dưới caption */
.service-card--shade::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gradient-card-overlay);
}

.service-card--shade .service-card__caption {
  z-index: var(--z-base);
}

/* Card cao 379×450 (Figma: DV cấp 2 — 273:1236): chữ trái 24px, không có dải caption xanh */
.service-card--tall {
  height: 450px;
}

.service-card--tall .service-card__caption {
  padding: var(--space-24);
  background-image: none;
}

.service-card--tall .service-card__title {
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  text-align: left;
}

/* Mobile: chiều cao Figma thành tối thiểu — tiêu đề xuống dòng thêm thì card cao theo */
@media (max-width: 767px) {
  .service-card {
    height: auto;
    min-height: 340px;
  }

  .service-card--tall {
    min-height: 450px;
  }
}

/* ========== EQUIPMENT CARD (Figma: Thiết bị 273:1880) ========== */
.equipment-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 276px;
}

.equipment-card__image {
  width: 276px;
  height: 276px;
  object-fit: cover;
  border-radius: var(--radius-md);
  transition: opacity var(--transition);
}

.equipment-card:hover .equipment-card__image {
  opacity: 0.9;
}

/* Figma (STRETCH): khung vuông lấy từ 8.1% chiều ngang ảnh thay vì căn giữa */
.equipment-card__image--shift {
  object-position: 25.7% center;
}

/* <picture> khi card có ảnh riêng cho mobile: bọc img, giữ đúng bề rộng ảnh */
.equipment-card__picture {
  display: block;
  width: 100%;
}

.equipment-card__title {
  padding: 0 var(--space-12);
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-dark);
}

/* ========== VALUE TILE (Figma: Feature 468:7489) ========== */
.value-tile {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  min-width: 1px;
  aspect-ratio: 148 / 170;
  padding: var(--space-20);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background-image: var(--gradient-tile);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
}

.value-tile__letter {
  font-size: var(--fs-letter);
  font-weight: var(--fw-xbold);
  line-height: normal;
  color: var(--color-primary);
}

.value-tile__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-tile__en {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body-xl-14);
  color: var(--color-primary);
}

.value-tile__vi {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h6);
  color: var(--color-gray-100);
}

/* Lật thẻ khi hover (theo video tham khảo screenshots/core-values-tham-khao.mp4):
   mặt trước = chữ cái + tên, mặt sau = tên + mô tả */
.value-tile--flip {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  perspective: 1000px;
}

.value-tile__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--transition-flip);
}

.value-tile--flip:hover .value-tile__inner {
  transform: rotateY(180deg);
}

.value-tile__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: var(--space-20);
  background-image: var(--gradient-tile);
  border: 1px solid var(--color-secondary);
  border-radius: var(--radius-md);
  backface-visibility: hidden;
}

.value-tile__face--back {
  gap: var(--space-16);
  padding: var(--space-16);
  white-space: normal;
  background-image: var(--gradient-tile-back);
  transform: rotateY(180deg);
}

.value-tile__desc {
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-m);
  text-transform: none;
  color: var(--color-gray-200);
}

/* Figma mobile: thẻ ngang — chữ cái trái, tên + mô tả phải; bỏ hiệu ứng lật (2 mặt gộp thành 1 lưới) */
@media (max-width: 767px) {
  /* min-height: màn hẹp hơn 440 mô tả xuống dòng thêm → thẻ cao theo nội dung
     (đệm đáy 18: ở 440 nội dung vẫn thấp hơn 117.8 của Figma) */
  .value-tile--flip {
    display: flex;
    min-height: var(--value-tile-h-mobile);
    aspect-ratio: auto;
    perspective: none;
  }

  .value-tile__inner,
  .value-tile--flip:hover .value-tile__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    flex: 1;
    column-gap: var(--space-20);
    height: auto;
    padding: var(--space-20) var(--space-24) var(--space-18);
    text-align: left;
    white-space: normal;
    background-image: var(--gradient-tile);
    border: 1px solid var(--color-secondary);
    border-radius: var(--radius-md);
    transform: none;
  }

  .value-tile__face {
    display: contents;
  }

  /* Thẻ không lật (trang Giới thiệu): cùng lưới chữ cái trái + tên phải */
  .value-tile:not(.value-tile--flip) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-20);
    min-height: var(--value-tile-h-about-mobile);
    aspect-ratio: auto;
    padding: var(--space-20) var(--space-24);
    text-align: left;
    white-space: normal;
  }

  .value-tile__letter {
    grid-row: 1 / span 2;
    font-size: var(--fs-letter-mobile);
  }

  .value-tile__body {
    align-items: flex-start;
  }

  .value-tile__face--back .value-tile__body {
    display: none;
  }

  .value-tile__desc {
    grid-column: 2;
    margin-top: var(--space-8);
    font-size: var(--fs-body-s);
    line-height: var(--lh-body-s);
  }
}

/* ========== PROJECT CARD (Figma: Dự án 41:2332) ========== */
.project-card {
  position: relative;
  display: flex !important; /* slick gán display:block cho slide */
  flex-direction: column;
  justify-content: flex-end;
  width: 320px;
  height: 366px;
  padding: var(--space-24);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.project-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--gradient-card-overlay);
}

.project-card__body {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.project-card__title {
  font-family: var(--font-montserrat);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h6);
  color: var(--color-white);
}

.project-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-family: var(--font-montserrat);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-l-14);
  color: var(--color-primary);
}

/* ========== MEMBER CARD (Figma: member 167:2233) ========== */
.member-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 352px;
  text-align: center;
}

.member-card__avatar {
  width: 240px;
  height: 240px;
}

.member-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}

.member-card__name {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h4);
  color: var(--color-primary);
}

.member-card__role {
  font-size: var(--fs-h6);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-50);
}

/* ========== TESTIMONIAL CARD (Figma: feedback 167:2922) ========== */
.testimonial-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 379px;
  padding: var(--space-24);
  text-align: center;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: inset 6px 0 0 var(--color-secondary); /* viền trái Figma (stroke inside, không chiếm layout) */
}

.testimonial-card__quote {
  width: 24px;
  height: 16px;
}

.testimonial-card__text {
  font-size: var(--fs-body-xl);
  line-height: var(--lh-body-xl);
  color: var(--color-gray-700);
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  text-align: left;
}

.testimonial-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
}

.testimonial-card__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-card__name {
  font-size: var(--fs-body-l);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body-l);
  color: var(--color-gray-700);
}

.testimonial-card__role {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-gray-500);
}

/* ========== POST CARD (Figma: Blogs 167:2840) ========== */
.post-card {
  display: flex !important;
  flex-direction: column;
  gap: var(--space-20);
  width: 276px;
}

.post-card__image {
  width: 100%;
  height: auto;
  aspect-ratio: 276 / 208;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
}

.post-card__title {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-xl);
  color: var(--color-neutral);
}

/* ========== VIDEO ITEM (Figma: Video thumnail 94:1155) ========== */
.video-item {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  width: 100%;
  text-align: left;
}

.video-item__thumb {
  flex-shrink: 0;
  width: 118px;
  height: 85px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.video-item__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--space-5);
  min-width: 1px;
}

.video-item__title {
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-body-xl);
  color: var(--color-white);
}

.video-item__date {
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-gray-400);
}

/* ========== SLIDER DOTS (Figma: dot 44:2372) ========== */
.slider-dots .slick-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
}

.slider-dots .slick-dots li {
  display: block;
}

.slider-dots .slick-dots button {
  display: block;
  width: 10px;
  height: 10px;
  font-size: 0;
  background-color: var(--color-gray-200);
  border-radius: var(--radius-full);
  transition: width var(--transition), background-color var(--transition);
}

.slider-dots .slick-dots .slick-active button {
  width: 22px;
  background-color: var(--color-secondary);
  border-radius: 5px;
}

/* ========== SLIDER ARROW (Figma: arrow 167:2974) ========== */
.slider-arrow {
  position: absolute;
  z-index: var(--z-overlay);
  width: 50px;
  height: 100px;
  transition: opacity var(--transition);
}

.slider-arrow:hover {
  opacity: 0.85;
}

.slider-arrow--prev {
  left: 0;
}

.slider-arrow--next {
  right: 0;
}

/* ========== TABS (Figma: TAB 108:1542) ========== */
.tabs {
  position: relative;
  width: 100%;
}

.tabs__list {
  display: flex;
  overflow: hidden;
  scroll-behavior: smooth;
}

.tabs__item {
  flex-shrink: 0;
  padding: 0 var(--space-24) var(--space-14) 0;
  font-size: var(--fs-body-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body-l);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-gray-200);
  border-bottom: 1px solid var(--color-secondary);
  transition: color var(--transition), border-color var(--transition);
}

.tabs__item.is-active {
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.tabs__next {
  position: absolute;
  top: 0;
  left: 1188px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23.782px;
  height: 24px;
  padding: var(--space-3);
  background-color: var(--color-secondary);
}

@media (max-width: 1279px) {
  .tabs__list {
    margin-right: calc(var(--container-padding) * -1);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tabs__list::-webkit-scrollbar {
    display: none;
  }

  .tabs__next {
    display: none;
  }
}

/* ========== FORM (Figma: Section 4 — 278:2292) ========== */
.form-field {
  position: relative;
  display: block;
  width: 100%;
}

.form-field__control {
  display: block;
  width: 100%;
  height: 31px;
  padding: 0 0 var(--space-7);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-gray-200);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 0 var(--color-line-form); /* line 1px nằm ngay dưới ô cao 31px như Figma */
  outline: none;
  appearance: none;
  transition: box-shadow var(--transition);
}

.form-field__control::placeholder {
  color: var(--color-gray-200);
  opacity: 1;
}

.form-field__control:focus {
  box-shadow: 0 1px 0 var(--color-primary);
}

.form-field__control--select {
  padding-right: var(--space-24);
  cursor: pointer;
}

.form-field__control--select option {
  color: var(--color-gray-700);
}

.form-field__control--textarea {
  resize: none;
}

.form-field__icon {
  position: absolute;
  pointer-events: none;
}

.form-field__icon--select {
  top: 9px;
  left: 299px;
}

.form-field__icon--textarea {
  top: 6px;
  left: 297px;
}

.form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body-l);
  color: var(--color-gray-200);
  cursor: pointer;
}

.form-check__input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-xs);
  appearance: none;
  cursor: pointer;
}

/* Figma Check Box Checked=ON: nền #F1F4FF, viền vàng, ô vuông vàng 10×10 ở giữa */
.form-check__input:checked {
  padding: var(--space-4);
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) content-box,
    var(--color-check-bg) padding-box;
  border-color: var(--color-primary);
}

/* ========== SOCIAL BUTTON (Figma: Utility/Social Link 500:8198) ========== */
.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: var(--color-glass);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-social);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  transition: border-color var(--transition);
}

.social-btn:hover {
  border-color: var(--color-text-muted);
}

/* ========== VIDEO MODAL ========== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  background-color: var(--color-overlay-modal);
  opacity: 0;
  transition: opacity var(--transition), visibility var(--transition);
}

.video-modal.is-open {
  visibility: visible;
  opacity: 1;
}

.video-modal__dialog {
  position: relative;
  width: 960px;
  aspect-ratio: 16 / 9;
  background-color: var(--color-black);
}

.video-modal__frame {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  font-size: 32px;
  line-height: 36px;
  color: var(--color-white);
}

/* Card trên nền xanh (Figma: "Các thiết bị nổi bật" 305:2952) — chữ trắng */
.equipment-card--on-dark .equipment-card__title {
  color: var(--color-white);
}

/* ========== BACK TO TOP (không có trong Figma — style tối giản theo màu thương hiệu) ========== */
.to-top {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-48);
  height: var(--space-48);
  color: var(--color-dark);
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  cursor: pointer;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.to-top:hover {
  opacity: 0.85;
}

/* ========== FILTER TABS (Figma: thanh danh mục trang Dự án 368:3708) ========== */
/* Nút mũi tên 20×20 nằm đè lên 2 đầu danh sách (lệch ra ngoài container ~10px) */
.filter-tabs {
  position: relative;
  width: 100%;
}

/* Figma: đường kẻ chạy x=121–1318 (thụt 1px mỗi bên so với container) */
.filter-tabs__list {
  display: flex;
  margin: 0 1px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-gray-100);
  scroll-behavior: smooth;
}

.filter-tabs__tab {
  flex-shrink: 0;
  margin-bottom: -1px;
  padding: 0 var(--space-13) var(--space-11) var(--space-12);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tab-auto);
  white-space: nowrap;
  color: var(--color-gray-500);
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  cursor: pointer;
}

.filter-tabs__tab.is-active {
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

.filter-tabs__arrow {
  position: absolute;
  top: 0;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-20);
  height: var(--space-20);
  color: var(--color-gray-500);
  background-color: var(--color-gray-100);
  cursor: pointer;
}

.filter-tabs__arrow--prev {
  left: calc(var(--space-11) * -1);
}

.filter-tabs__arrow--next {
  right: calc(var(--space-10) * -1);
}

/* Tablet: mũi tên đè lên mép container → thu vào trong, chừa chỗ để không che chữ tab */
@media (max-width: 1279px) {
  .filter-tabs__list {
    margin: 0 var(--space-20);
  }

  .filter-tabs__arrow--prev {
    left: 0;
  }

  .filter-tabs__arrow--next {
    right: 0;
  }
}

/* Figma mobile: không có mũi tên, dải tab cuộn ngang chạy tới mép phải màn hình */
@media (max-width: 767px) {
  .filter-tabs__arrow {
    display: none;
  }

  .filter-tabs__list {
    margin: 0 calc(var(--container-padding) * -1) 0 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .filter-tabs__list::-webkit-scrollbar {
    display: none;
  }
}

/* ========== PAGINATION (Figma: phân trang trang Dự án) ========== */
.pagination {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-11);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
}

.pagination__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-34);
  height: var(--space-34);
  font-size: var(--fs-body-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-label-auto);
  color: var(--color-gray-500);
  background-color: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-pagination);
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.pagination__item:hover {
  color: var(--color-secondary);
}

.pagination__item.is-active {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ========== UNDERLINE TABS (Figma: thanh chủ đề trang Kiến thức 394:4340) ========== */
/* Figma: 5 tab độ rộng cố định, cách nhau 10px, mỗi tab có gạch dưới 1px riêng */
.underline-tabs {
  display: grid;
  grid-template-columns: 206px 281px 306px 218px 149px;
  column-gap: var(--space-10);
  width: 100%;
}

.underline-tabs__tab {
  padding-bottom: var(--space-11);
  font-size: var(--fs-body-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tab-auto);
  text-align: center;
  white-space: nowrap;
  color: var(--color-gray-500);
  border-bottom: 1px solid var(--color-gray-100);
  transition: color var(--transition), border-color var(--transition);
  cursor: pointer;
}

.underline-tabs__tab:hover {
  color: var(--color-secondary);
}

.underline-tabs__tab.is-active {
  font-weight: var(--fw-semibold);
  color: var(--color-secondary);
  border-bottom-color: var(--color-secondary);
}

/* ========== BLOG CARD (Figma: card "Kiến thức nổi bật" 394:4340) ========== */
.blog-card {
  display: flex;
  flex-direction: column;
  width: 379px;
}

.blog-card__media {
  display: block;
  height: 310px;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.blog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card__title {
  margin-top: var(--space-20);
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h5);
  color: var(--color-gray-700);
}

.blog-card__title a {
  transition: color var(--transition);
}

.blog-card__title a:hover {
  color: var(--color-secondary);
}

/* Figma: ngày | giờ — Montserrat 14px, vạch ngăn 1px cách 2 bên 14px */
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  margin-top: var(--space-6);
  font-family: var(--font-montserrat);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-gray-500);
}

.blog-card__divider {
  width: 1px;
  height: 19px;
  background-color: var(--color-gray-500);
}

/* ========== TAG BADGE (Figma: nhãn chủ đề "Góc chuyên gia" — Chi tiết kiến thức) ========== */
.tag-badge {
  display: inline-flex;
  align-items: center;
  height: 31px;
  padding: 0 var(--space-16);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body-m);
  color: var(--color-teal);
  background-color: var(--color-teal-light);
  border-radius: var(--radius-xs);
}

/* ========== ẢNH ZOOM KHI HOVER (mọi ảnh nội dung, trừ page-banner) ==========
   Ảnh phóng to quanh tâm, clip-path cắt bù đúng phần phóng ra nên khung ảnh giữ nguyên
   (không cần thẻ bọc overflow: hidden). --zoom-radius = bo góc của khung ảnh.
   Hover đặt trên card chứa ảnh để lớp phủ/caption phía trên không chặn hiệu ứng. */
.service-card__image,
.project-card__image,
.about-intro__media img,
.about-hero__image,
.blog-card__image,
.quote-service__image,
.video-events__poster,
.member-card__avatar,
.video-item__thumb,
.knowledge-card__image,
.detail-gallery__thumb img,
.equipment-gallery__thumb img,
.post-card__image,
.equipment-card__image,
.detail-gallery__main,
.equipment-gallery__main,
.contact-form__image,
.scope-item__image,
.testimonial-card__avatar {
  --zoom-radius: 0px;
  clip-path: inset(0 round var(--zoom-radius));
  transition: transform var(--transition-zoom), clip-path var(--transition-zoom), opacity var(--transition);
}

.video-item__thumb,
.knowledge-card__image,
.detail-gallery__thumb img,
.equipment-gallery__thumb img {
  --zoom-radius: var(--radius-sm);
}

.post-card__image,
.equipment-card__image {
  --zoom-radius: var(--radius-md);
}

.detail-gallery__main,
.equipment-gallery__main,
.contact-form__image {
  --zoom-radius: var(--radius-lg);
}

.scope-item__image,
.testimonial-card__avatar {
  --zoom-radius: var(--radius-full);
}

.service-card:hover .service-card__image,
.project-card:hover .project-card__image,
.about-intro__media:hover img,
.about-hero__media:hover .about-hero__image,
.blog-card__media:hover .blog-card__image,
.quote-service:hover .quote-service__image,
.video-events__player:hover .video-events__poster,
.member-card:hover .member-card__avatar,
.video-item:hover .video-item__thumb,
.knowledge-card:hover .knowledge-card__image,
.detail-gallery__thumb:hover img,
.equipment-gallery__thumb:hover img,
.post-card:hover .post-card__image,
.equipment-card:hover .equipment-card__image,
.detail-gallery__main:hover,
.equipment-gallery__main:hover,
.contact-form__image:hover,
.scope-item:hover .scope-item__image,
.testimonial-card__avatar:hover {
  transform: scale(var(--zoom-scale));
  clip-path: inset(var(--zoom-inset) round calc(var(--zoom-radius) / var(--zoom-scale)));
}

/* Logo đối tác (nền trong suốt): phóng to nguyên logo, không cắt */
.partners__logo {
  transition: transform var(--transition-zoom);
}

.partners__logo:hover {
  transform: scale(var(--zoom-scale));
}

@media (prefers-reduced-motion: reduce) {
  .service-card__image,
  .project-card__image,
  .about-intro__media img,
  .about-hero__image,
  .blog-card__image,
  .quote-service__image,
  .video-events__poster,
  .member-card__avatar,
  .video-item__thumb,
  .knowledge-card__image,
  .detail-gallery__thumb img,
  .equipment-gallery__thumb img,
  .post-card__image,
  .equipment-card__image,
  .detail-gallery__main,
  .equipment-gallery__main,
  .contact-form__image,
  .scope-item__image,
  .testimonial-card__avatar,
  .partners__logo {
    transition: none;
  }
}