/* GH services: one editorial image paired with six interactive service cards. */
.services-ecosystem {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(44px, 7vw, 104px);
  align-items: center;
}

.services-ecosystem__visual { min-width: 0; }

.services-ecosystem__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 20px;
  background: var(--navy);
  box-shadow: 0 24px 60px rgba(9, 38, 82, .16);
  isolation: isolate;
}

.services-ecosystem__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 38, 82, 0) 35%, rgba(9, 38, 82, .8) 100%);
  pointer-events: none;
}

.services-ecosystem__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.88) contrast(1.02);
  transition: opacity .28s ease, transform .9s var(--ease-primary), filter .35s ease;
}

.services-ecosystem__media.is-swapping img { opacity: .35; }
.services-ecosystem__media:hover img { filter: saturate(1) contrast(1.04); transform: scale(1.035); }

.services-ecosystem__media-caption {
  position: absolute;
  z-index: 1;
  left: clamp(20px, 3vw, 38px);
  right: 20px;
  bottom: clamp(20px, 3vw, 34px);
  display: grid;
  gap: 8px;
  color: #fff;
}

.services-ecosystem__media-caption span {
  color: var(--gold-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
}

.services-ecosystem__media-caption strong {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -.025em;
}

.services-ecosystem__media-index {
  position: absolute;
  z-index: 1;
  top: 22px;
  right: 24px;
  color: #fff;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .1em;
}

.services-ecosystem__copy { min-width: 0; }
.services-ecosystem__accent { display: block; width: 86px; height: 4px; margin-bottom: 23px; background: var(--magenta); }
.services-ecosystem__copy .eyebrow { margin-bottom: 14px; }
.services-ecosystem__copy h2 { margin: 0 0 18px; max-width: 460px; font-size: clamp(31px, 3.2vw, 43px); line-height: 1.08; text-wrap: balance; }
.services-ecosystem__lead { max-width: 540px; margin: 0 0 27px; color: var(--muted); font-size: 14px; line-height: 1.72; }

.services-ecosystem__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.services-ecosystem__item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  gap: 10px;
  align-items: start;
  min-height: 126px;
  padding: 17px 15px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .7);
  transition: transform .28s var(--ease-primary), background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.services-ecosystem__item:hover,
.services-ecosystem__item:focus-visible,
.services-ecosystem__item.is-active {
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 14px 30px rgba(9, 38, 82, .09);
  transform: translateY(-3px);
}

.services-ecosystem__index { color: var(--gold); font-family: var(--display); font-size: 13px; font-weight: 500; }
.services-ecosystem__item strong { display: block; color: var(--navy); font-family: var(--display); font-size: 15px; font-weight: 500; line-height: 1.3; }
.services-ecosystem__item small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.services-ecosystem__item b { color: var(--magenta); font-size: 18px; font-weight: 500; text-align: right; transition: transform .25s ease; }
.services-ecosystem__item:hover b, .services-ecosystem__item:focus-visible b, .services-ecosystem__item.is-active b { transform: translate(3px, -3px); }

@media (max-width: 1050px) {
  .services-ecosystem { gap: 34px; }
  .services-ecosystem__item { min-height: 140px; }
  .services-ecosystem__item small { font-size: 11px; }
}

@media (max-width: 760px) {
  .services-ecosystem { display: flex; flex-direction: column; gap: 33px; align-items: stretch; }
  .services-ecosystem__media { aspect-ratio: 3 / 4; border-radius: 15px; }
  .services-ecosystem__copy h2 { font-size: 32px; }
  .services-ecosystem__list { grid-template-columns: 1fr; gap: 10px; }
  .services-ecosystem__item { min-height: 0; padding: 15px 14px; }
  .services-ecosystem__item strong { font-size: 15px; }
  .services-ecosystem__item small { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .services-ecosystem__media img, .services-ecosystem__item, .services-ecosystem__item b { transition: none; }
}

/* ── Đổi ảnh dịch vụ: hai lớp chồng nhau, hoà tan ────────────────────────────
   Trước đây chỉ có một thẻ <img>: nó mờ xuống rồi bị đổi src ngay tại chỗ nên
   thấy rõ cú "cắt", lại hay chớp vì ảnh mới chưa kịp giải mã. Nay ảnh mới được
   nạp và decode xong ở lớp ẩn, rồi mới hoà vào — không còn khoảnh khắc trống. */
.svc-layer{position:absolute;inset:0;opacity:0;
  transform:scale(1.055);transform-origin:52% 50%;
  transition:opacity .62s ease,transform 1.15s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform}
.svc-layer.is-on{opacity:1;transform:scale(1)}
/* Lớp đang lui ra: đẩy nhẹ ra xa để hai ảnh không "dính" vào nhau khi chồng. */
.svc-layer.is-out{opacity:0;transform:scale(1.02);transition:opacity .45s ease,transform 1.15s cubic-bezier(.16,1,.3,1)}
.svc-layer picture{position:absolute;inset:0;display:block}
.services-ecosystem__media .svc-layer img{
  width:100%;height:100%;display:block;object-fit:cover;
  filter:saturate(.88) contrast(1.02);transition:filter .45s ease}
.services-ecosystem__media:hover .svc-layer.is-on img{filter:saturate(1) contrast(1.04)}
/* Lớp cũ .is-swapping không còn dùng tới nữa. */
.services-ecosystem__media.is-swapping img{opacity:1}

/* Nhãn và số thứ tự đổi theo, lệch pha một nhịp cho đỡ khô. */
.services-ecosystem__media-caption strong,
.services-ecosystem__media-index{
  display:inline-block;
  transition:opacity .34s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.services-ecosystem__media.is-label-out .services-ecosystem__media-caption strong{opacity:0;transform:translateY(9px)}
.services-ecosystem__media.is-label-out .services-ecosystem__media-index{opacity:0;transform:translateY(-6px)}