/* Sản phẩm & Dịch vụ — Figma 200-17564 (1440) · 200-19080 (834) · 200-20578 (390) */

.page--san-pham-dich-vu { --spd-hero-h: 1000px; --spd-overlap: 240px; }
@media (max-width: 1179px) { .page--san-pham-dich-vu { --spd-hero-h: 1194px; } }
@media (max-width: 639px)  { .page--san-pham-dich-vu { --spd-hero-h: 844px; } }

/* ---------- hero ---------- */
.spd-hero { height: var(--spd-hero-h); overflow: hidden; background: #fff; color: #fff; }
/* hero cao hơn màn hình: cuộn tới đáy hero rồi mới ghim (section sau trượt lên che) */
.spd-hero.hero-sticky { top: min(0px, calc(100vh - var(--spd-hero-h))); }
.spd-hero__media, .spd-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.spd-hero__media img { object-fit: cover; object-position: center; }
.spd-hero__inner { position: relative; padding-top: 203px; }
.spd-hero__crumb { gap: 12px; color: #fff; }
.spd-hero__crumb span[aria-hidden] { opacity: 1; }
.spd-hero__eyebrow { margin-top: 45px; color: #75c9ff; }
.spd-hero__title { margin-top: 21px; max-width: 1100px; font: 500 64px/76.8px var(--font-head); letter-spacing: -.03em; color: #fff; }
.spd-hero__lead { max-width: 740px; /* Figma 760 — Inter web hơi hẹp hơn, 740 cho cùng chỗ xuống dòng */ margin-top: 24px; font: 400 18px/28.8px var(--font); color: #fff; }
.spd-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.spd-hero__tags li { display: flex; align-items: center; min-height: 34px; padding: 6px 10px; border: 1px solid rgba(175, 222, 125, .7); border-radius: 3px; background: rgba(127, 195, 67, .23); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 14px/19.6px var(--font); color: #d2efb2; }
.spd-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.spd-hero__actions .btn { font-size: 16px; line-height: 22.4px; }
.spd-hero__actions .btn--outline { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* chú thích ảnh hero: nằm trong section sau (để không bị lớp gradient che) */
.spd-hero__caption { position: absolute; top: calc(var(--spd-overlap) - 37px); right: 25px; z-index: 1; font: 400 12px/19.2px var(--font); color: var(--slate-2); pointer-events: none; }

/* ---------- vùng nội dung trượt lên hero ---------- */
.spd-body {
  margin-top: calc(var(--spd-overlap) * -1);
  padding-top: var(--spd-overlap);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .85) 80%, #fff 100%) top / 100% var(--spd-overlap) no-repeat,
    linear-gradient(180deg, #fff 0%, #f7fbfe 24%, #eff7fc 54%, #e8f3fb 100%) 0 var(--spd-overlap) / 100% calc(100% - var(--spd-overlap)) no-repeat;
}

.spd-head .eyebrow { display: block; }
.spd-h2 { margin-top: 21px; font: 500 48px/57.6px var(--font-head); letter-spacing: -.035em; color: var(--navy); }

/* ---------- lĩnh vực hoạt động ---------- */
.spd-fields { padding: 96px 0; }
.spd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 45px; }
.spd-card { overflow: hidden; border-radius: var(--radius-lg); background: #fff; }
.spd-card__media { height: 380px; overflow: hidden; background: #dfe9f1; }
.spd-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.spd-card:hover .spd-card__media img { transform: scale(1.03); }
.spd-card__body { padding: 30px 32px; }
.spd-card__title { padding-bottom: 14px; font: 500 24px/33.6px var(--font-head); letter-spacing: -.025em; color: var(--navy); }
.spd-card__text { padding-bottom: 22px; font: 400 16px/26.4px var(--font); color: var(--slate); }

/* ---------- quy trình đầu tư ---------- */
.spd-process { padding: 96px 0 160px; }
.spd-process__figure { width: 100%; max-width: 960px; margin: 0 auto; }
.spd-process__svg { width: 100%; height: auto; aspect-ratio: 521.6 / 715.9; overflow: visible; }
.spd-process__svg text { font-family: var(--font); }

/* contact section — Figma trang này: padding-top 72 / 72 / 55 */
.page--san-pham-dich-vu .contact-cta { padding-top: 72px; }

/* ---------- tablet 834 ---------- */
@media (max-width: 1179px) {
  .spd-hero__inner { padding-top: 314px; }
  .spd-hero__title { font-size: 48px; line-height: 57.6px; }
  .spd-hero__lead { max-width: none; }
  .spd-hero__actions .btn { padding-inline: 14px; }
  .spd-hero__actions .direction-icon { width: 22px; height: 22px; }

  .spd-h2 { font-size: 36px; line-height: 43.2px; }
  .spd-card__media { height: 320px; }
  .spd-card__body { padding: 26px; }
  .spd-process__figure { max-width: none; }
}

/* ---------- mobile 390 ---------- */
@media (max-width: 639px) {
  .spd-hero__inner { padding-top: 124px; }
  .spd-hero__eyebrow { font-size: 12px; line-height: 16.8px; }
  .spd-hero__title { margin-top: 17px; font-size: 36px; line-height: 43.2px; }
  .spd-hero__lead { font-size: 16px; line-height: 25.6px; }
  .spd-hero__actions { gap: 12px; }
  .spd-hero__actions .btn { min-height: 46px; padding: 12px 14px; font-size: 14px; line-height: 19.6px; }
  .spd-hero__actions .direction-icon { display: none; }

  .spd-body { --spd-overlap: 0px; margin-top: 0; padding-top: 0; }
  .spd-hero__caption { top: -37px; }

  .spd-fields { padding: 64px 0; }
  .spd-h2 { margin-top: 17px; }
  #spd-process-title { max-width: 320px; }
  .spd-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 30px; }
  .spd-card__media { height: 300px; }
  .spd-card__body { padding: 26px 24px; }
  .spd-process { padding: 64px 0 104px; }
  .page--san-pham-dich-vu .contact-cta { padding-top: 55px; }
}