/* Trang Giới thiệu — HZ Group (Figma 199-11976 / 199-13171 / 200-16470) */

.page--gioi-thieu { --about-overlap: 240px; --about-tabs-h: 64px; }
@media (min-width: 1180px) {
  html { scroll-padding-top: calc(var(--header-h) + var(--about-tabs-h) + 16px); }
}

/* ---------- tiêu đề dùng chung trong trang ---------- */
.about-h2 { margin-top: 21px; padding-bottom: .8px; font: 500 48px/57.6px var(--font-head); letter-spacing: -.04em; color: var(--navy); }
.about-head { display: flex; align-items: flex-end; gap: 50px; }
.about-head__main { flex: 0 1 910px; min-width: 0; }
.about-head__desc { flex: 0 1 320px; margin-left: auto; padding-bottom: 4px; font: 400 16px/26.4px var(--font); color: var(--slate); }

/* ---------- hero ---------- */
.about-hero { position: relative; height: 1000px; overflow: hidden; background: var(--white); color: var(--white); }
.about-hero__media, .about-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-hero__media img { object-fit: cover; object-position: center top; }
.about-hero__inner { position: relative; padding-top: 324px; }
.about-hero__crumb { gap: 12px; color: var(--white); }
.about-hero__crumb span[aria-hidden] { opacity: 1; }
.about-hero__eyebrow { margin-top: 40px; color: #75c9ff; }
.about-hero__title { margin-top: 22px; font: 500 64px/76.8px var(--font-head); letter-spacing: -.03em; color: var(--white); }
.about-hero__lead { max-width: 510px; margin-top: 24px; font: 400 18px/28.8px var(--font); color: var(--white); }
.about-hero__cta { margin-top: 30px; min-height: 48px; padding: 10px 12px; font-size: 16px; line-height: 22.4px; }
.about-hero__cta:hover { font-weight: 500; }

/* phần nội dung trượt lên che hero (sticky scroll + gradient) */
.about-body { margin-top: calc(var(--about-overlap) * -1); padding-top: var(--about-overlap); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 45%, var(--white) var(--about-overlap)); }
.about-hero__caption { position: absolute; top: calc(var(--about-overlap) - 31px); right: 29px; font: 400 12px/19.2px var(--font); color: var(--slate-2); pointer-events: none; }
.page--gioi-thieu .contact-cta { position: relative; z-index: 1; }

/* ---------- thanh tab trong trang ---------- */
.about-tabs { position: sticky; top: var(--header-h); z-index: 30; height: var(--about-tabs-h); background: var(--white); border-bottom: 1px solid var(--line); }
.about-tabs__inner { display: flex; justify-content: space-between; gap: 24px; }
.about-tabs__link { display: block; height: 63px; padding: 20px 0; border-bottom: 2px solid transparent; font: 500 14px/21px var(--font); letter-spacing: .1px; color: var(--slate); white-space: nowrap; transition: color .2s, border-color .25s; }
.about-tabs__link:hover { color: var(--blue); }
.about-tabs__link.is-active { color: var(--blue); border-bottom-color: #7fc343; }

/* ---------- tổng quan ---------- */
.about-overview { padding: 120px 0 64px; background: linear-gradient(180deg, #ffffff 0%, #ffffff 22%, #e8f3fb 100%); }
.about-overview__grid { display: grid; grid-template-columns: minmax(0, 637fr) minmax(0, 579fr); column-gap: 64px; align-items: start; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 21.5px; row-gap: 28px; margin-top: 34px; }
.about-stat__num { display: block; height: 53px; font: 700 48px/52.8px var(--font); letter-spacing: 0; color: var(--blue); white-space: nowrap; }
.about-stat__num span { position: relative; top: -3px; margin-left: 2px; font: 500 16px/25.6px var(--font); letter-spacing: 0; }
.about-stat:nth-child(6) .about-stat__num span { margin-left: -3px; }
.about-stat__label { display: block; padding-top: 8px; font: 500 16px/24px var(--font); color: var(--navy); }
.about-overview__copy { padding-bottom: 22px; }
.about-overview__copy p { margin-top: 22px; font: 400 16px/26.4px var(--font); color: var(--slate); }
.about-overview__copy .about-overview__lead { margin-top: 0; font: 600 20px/32px var(--font); color: var(--navy); }

/* ---------- tầm nhìn & sứ mệnh ---------- */
.about-vision { padding: 64px 0; background: #e8f3fb; }
.about-vision__grid { display: grid; grid-template-columns: minmax(0, 411fr) minmax(0, 772fr); column-gap: 97px; align-items: start; }
.about-vision__title { margin-top: 20px; font: 500 36px/46.8px var(--font-head); letter-spacing: -.035em; color: var(--navy); }
.about-vision__item { padding-top: 32px; }
.about-vision__item + .about-vision__item { padding-top: 34px; }
.about-vision__label { padding: 3px 0 5px; font: 600 12px/18px var(--font); letter-spacing: .08em; color: var(--blue); }
.about-vision__item p { font: 400 16px/26.4px var(--font); color: #47677d; }

/* ---------- định hướng phát triển (4 thẻ + vòng tròn trung tâm) ---------- */
.about-values { position: relative; }
.about-values__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.about-value { position: relative; display: flex; flex-direction: column; min-height: 330px; padding: 26px 22px 82px; background: var(--white); border: 6px solid #f3f8fc; border-radius: 22px; box-shadow: 0 10px 28px rgba(24, 63, 89, .10); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.about-value:hover { box-shadow: 0 16px 36px rgba(24, 63, 89, .14); }
.about-value--3, .about-value--4 { justify-content: flex-end; padding: 82px 22px 26px; }
.about-value::after { content: ''; position: absolute; width: 56%; height: 48%; border: 0 solid #0877d3; pointer-events: none; }
.about-value--1::after { top: -6px; left: -6px; border-top-width: 6px; border-left-width: 6px; border-top-left-radius: 22px; }
.about-value--2::after { top: -6px; right: -6px; border-top-width: 6px; border-right-width: 6px; border-top-right-radius: 22px; }
.about-value--3::after { bottom: -6px; left: -6px; border-bottom-width: 6px; border-left-width: 6px; border-bottom-left-radius: 22px; border-color: #10ade4; }
.about-value--4::after { bottom: -6px; right: -6px; border-bottom-width: 6px; border-right-width: 6px; border-bottom-right-radius: 22px; border-color: #10ade4; }
.about-value__title { font: 500 20px/28px var(--font-head); letter-spacing: -.025em; color: var(--navy); }
.about-value__body p { margin-top: 16px; font: 400 16px/26.4px var(--font); color: #47677d; }
.about-value__num { position: absolute; font: 600 28px/28px var(--font); color: #168fe2; }
.about-value__icon { position: absolute; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #eaf7ff; color: #0878cb; }
.about-value__icon svg { width: 25px; height: 25px; }
.about-value--1 .about-value__num { left: 24px; bottom: 20px; }
.about-value--2 .about-value__num { right: 22px; bottom: 20px; }
.about-value--3 .about-value__num { left: 24px; top: 22px; }
.about-value--4 .about-value__num { right: 22px; top: 22px; }
.about-value--1 .about-value__icon { right: 108px; bottom: 15px; }
.about-value--2 .about-value__icon { left: 108px; bottom: 15px; }
.about-value--3 .about-value__icon { right: 108px; top: 17px; }
.about-value--4 .about-value__icon { left: 108px; top: 17px; }

.about-values__hub { --ring: 10px; position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 180px; height: 180px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--white); box-shadow: 0 0 0 5px #fff, 0 0 0 9px #e6edf3, 0 10px 25px rgba(18, 58, 85, .12); }
.about-values__hub::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#17b8e8 0 25%, #0879d4 0 50%, #17b8e8 0 75%, #07589f 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - .5px), #000 calc(100% - var(--ring))); mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring) - .5px), #000 calc(100% - var(--ring))); }
.about-values__hub-title { position: relative; font: 500 16px/20.8px var(--font-head); letter-spacing: -.04em; text-transform: uppercase; text-align: center; color: var(--navy); }

/* ---------- hệ sinh thái ---------- */
.about-eco { padding: 64px 0; background: #e8f3fb; overflow-x: clip; }
.about-eco__body { --about-eco-s: 1; position: relative; height: calc(874px * var(--about-eco-s)); }
.about-eco__stage { position: absolute; top: 0; left: 50%; width: 1260px; height: 874px; transform: translateX(-50%) scale(var(--about-eco-s)); transform-origin: 50% 0; }
.about-eco__rings { position: absolute; left: 80px; top: 155px; width: 1100px; height: 760px; overflow: visible; pointer-events: none; }
.about-eco__rings > circle { fill: none; stroke: #83b7d7; stroke-width: 1; }
.about-eco__dots { transform-box: view-box; transform-origin: 550px 340px; animation: about-orbit 80s linear infinite; animation-play-state: paused; }
.about-eco.is-in-view .about-eco__dots { animation-play-state: running; }
.about-eco__dots .halo { fill: rgba(255, 255, 255, .75); stroke: rgba(75, 155, 207, .22); stroke-width: 1; }
.about-eco__dots .dot { fill: #2f83c4; }
@keyframes about-orbit { to { transform: rotate(360deg); } }
.about-eco__figure { position: absolute; left: 420px; top: 285px; width: 420px; }
.about-eco__figure img { width: 420px; height: 420px; border-radius: 50%; object-fit: contain; }
.about-eco__figure figcaption { position: absolute; left: 50%; top: 506px; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 194px; transform: translateX(-50%); text-align: center; }
.about-eco__figure figcaption span { font: 500 14px/21px var(--font); letter-spacing: .08em; color: #5c7f96; }
.about-eco__figure figcaption b { font: 700 38px/41.8px var(--font-head); letter-spacing: -.035em; color: var(--blue); white-space: nowrap; }
.about-eco__card { position: absolute; z-index: 1; display: flex; align-items: center; gap: 16px; width: 340px; min-height: 178px; padding: 20px; background: var(--white); border-radius: 14px; box-shadow: 0 8px 25px rgba(25, 110, 172, .04); transition: box-shadow .3s var(--ease); }
.about-eco__card:hover { box-shadow: 0 14px 34px rgba(25, 110, 172, .12); }
.about-eco__card--parks { left: 460px; top: 36px; }
.about-eco__card--construction { left: 915px; top: 241px; }
.about-eco__card--logistics { left: 5px; top: 233px; }
.about-eco__card--agri { left: 70px; top: 580px; }
.about-eco__card--housing { left: 850px; top: 570px; }
.about-eco__icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; }
.about-eco__icon img { width: 54px; height: 54px; transition: transform .3s var(--ease); }
.about-eco__card:hover .about-eco__icon img { transform: scale(1.06); }
.about-eco__text { flex: 1; min-width: 0; }
.about-eco__text h3 { font: 500 20px/27px var(--font-head); letter-spacing: -.02em; color: var(--blue); }
.about-eco__text p { padding: 8px 0 6px; font: 400 14px/21px var(--font); color: #526675; }
.about-eco__more { gap: 16px; padding-top: 4px; font-size: 14px; line-height: 19.6px; }

/* ---------- công ty thành viên ---------- */
.about-members { padding: 64px 0; background: var(--white); }
.about-members__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 45px; }
.about-member { position: relative; display: flex; flex-direction: column; background: var(--surface-2); border-radius: 10px; transition: box-shadow .3s var(--ease); }
.about-member:hover { box-shadow: 0 14px 34px rgba(18, 50, 74, .08); }
.about-member__logo { display: flex; align-items: center; justify-content: center; height: 190px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 6px; transition: border-color .3s; }
.about-member:hover .about-member__logo { border-color: #c4d8e6; }
.about-member__logo img { flex: none; width: 180px; height: 140px; object-fit: contain; transition: transform .4s var(--ease); }
.about-member:hover .about-member__logo img { transform: scale(1.04); }
.about-member--ductan .about-member__logo img { width: 225px; height: 166px; }
.about-member--wamico .about-member__logo img { width: 190px; height: 160px; }
.about-member__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px; }
.about-member__cat { margin-bottom: 12px; font: 500 12px/19.2px var(--font); letter-spacing: .06em; color: #548c2f; }
.about-member__title { margin-bottom: 14px; font: 500 24px/33.6px var(--font-head); letter-spacing: -.025em; color: var(--navy); }
.about-member__desc { margin-bottom: 22px; font: 400 16px/26.4px var(--font); color: var(--slate); }
.about-member__more { gap: 16px; margin-top: auto; padding-top: 8px; }
.about-member__more::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }

/* ================= TABLET (640–1179, thiết kế 834) ================= */
@media (max-width: 1179px) {
  html { scroll-padding-top: calc(var(--header-h) + 16px); }
  .about-h2 { font-size: 36px; line-height: 43.2px; }

  .about-hero { height: 1194px; }
  .about-hero__inner { padding-top: 440px; }
  .about-hero__title { font-size: 48px; line-height: 57.6px; }
  .about-hero__cta { padding: 10px 14px; }
  .about-hero__cta .direction-icon { width: 22px; height: 22px; }

  .about-tabs { display: none; }

  .about-overview__grid { grid-template-columns: minmax(0, 1fr); }
  .about-stat__num { height: 40px; font-size: 36px; line-height: 39.6px; }
  .about-stat__num span { top: -4px; margin-left: 2px; }
  .about-stat:nth-child(6) .about-stat__num span { margin-left: -1px; }
  .about-overview__copy { margin-top: 34px; }

  .about-vision__grid { grid-template-columns: minmax(0, 1fr); }
  .about-vision__title { margin-top: 24px; font-size: 36px; line-height: 43.2px; }
  .about-vision__items { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 24px; }
  .about-vision__item, .about-vision__item + .about-vision__item { padding-top: 0; }

  .about-values { width: 100%; max-width: 709px; margin: 80px auto 0; }
  .about-values__grid { gap: 20px; }
  .about-value { min-height: 340px; padding: 28px 28px 96px; border-width: 10px; border-radius: 34px; }
  .about-value--3, .about-value--4 { padding: 96px 28px 28px; }
  .about-value::after { width: 56%; height: 48%; }
  .about-value--1::after { top: -10px; left: -10px; border-top-width: 10px; border-left-width: 10px; border-top-left-radius: 34px; }
  .about-value--2::after { top: -10px; right: -10px; border-top-width: 10px; border-right-width: 10px; border-top-right-radius: 34px; }
  .about-value--3::after { bottom: -10px; left: -10px; border-bottom-width: 10px; border-left-width: 10px; border-bottom-left-radius: 34px; }
  .about-value--4::after { bottom: -10px; right: -10px; border-bottom-width: 10px; border-right-width: 10px; border-bottom-right-radius: 34px; }
  .about-value__title { font-size: 24px; line-height: 33.6px; }
  .about-value__num { font-size: 40px; line-height: 40px; }
  .about-value__icon { width: 48px; height: 48px; }
  .about-value__icon svg { width: 30px; height: 30px; }
  .about-value--1 .about-value__num { left: 24px; bottom: 24px; }
  .about-value--2 .about-value__num { right: 21px; bottom: 24px; }
  .about-value--3 .about-value__num { left: 24px; top: 24px; }
  .about-value--4 .about-value__num { right: 21px; top: 24px; }
  .about-value--1 .about-value__icon { right: 108px; bottom: 20px; }
  .about-value--2 .about-value__icon { left: 108px; bottom: 20px; }
  .about-value--3 .about-value__icon { right: 108px; top: 20px; }
  .about-value--4 .about-value__icon { left: 108px; top: 20px; }
  .about-values__hub { --ring: 14px; box-shadow: 0 0 0 7px #fff, 0 0 0 13px #e6edf3, 0 10px 25px rgba(18, 58, 85, .12); }
  .about-values__hub-title { font-size: 20px; line-height: 26px; }

  .about-head__main { flex-basis: 516px; }
  .about-head__desc { flex: 0 0 188px; }
  .about-eco__body { height: auto; margin-top: 30px; }
  .about-eco__stage { position: static; display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: auto; height: auto; transform: none; }
  .about-eco__rings { display: none; }
  .about-eco__figure { position: static; grid-column: 1 / -1; justify-self: center; width: 420px; max-width: 100%; margin-bottom: 12px; }
  .about-eco__figure img { width: 100%; height: auto; aspect-ratio: 1; }
  .about-eco__figure figcaption { position: static; width: auto; margin-top: 15px; transform: none; }
  .about-eco__card { position: static; width: auto; }
  .about-eco__card--parks { grid-column: 1 / -1; justify-self: center; width: 420px; max-width: 100%; }

  .about-members__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================= MOBILE (< 640, thiết kế 390) ================= */
@media (max-width: 639px) {
  .about-h2 { margin-top: 17px; }

  .about-hero { height: 844px; }
  .about-hero__inner { padding-top: 270px; }
  .about-hero__eyebrow { font-size: 12px; line-height: 16.8px; }
  .about-hero__title { font-size: 36px; line-height: 43.2px; }
  .about-hero__lead { font-size: 16px; line-height: 25.6px; }
  .about-hero__cta { min-height: 40px; padding: 8px 10px; }
  .about-hero__cta .direction-icon { display: none; }
  .about-hero__caption { right: 21px; }

  .about-overview { padding: 80px 0 44px; }
  .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 26px; }
  .about-stat__num span { top: -2.5px; }
  .about-overview__copy { margin-top: 35px; }

  .about-vision { padding: 44px 0; }
  .about-vision__title { margin-top: 23px; }
  .about-vision__items { grid-template-columns: minmax(0, 1fr); row-gap: 23px; }

  .about-values { margin-top: 48px; max-width: none; }
  .about-values__hub { position: relative; left: auto; top: auto; width: 220px; height: 220px; margin: 0 auto 36px; transform: none; }
  .about-values__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .about-value, .about-value--3, .about-value--4 { justify-content: flex-start; min-height: 0; padding: 74px 24px 28px; border-width: 6px; border-radius: 24px; }
  .about-value--1::after { top: -6px; left: -6px; border-top-width: 6px; border-left-width: 6px; border-radius: 24px 0 0 0; }
  .about-value--2::after { top: -6px; right: -6px; border-top-width: 6px; border-right-width: 6px; border-radius: 0 24px 0 0; }
  .about-value--3::after { bottom: -6px; left: -6px; border-bottom-width: 6px; border-left-width: 6px; border-radius: 0 0 0 24px; }
  .about-value--4::after { bottom: -6px; right: -6px; border-bottom-width: 6px; border-right-width: 6px; border-radius: 0 0 24px 0; }
  .about-value__title { font-size: 20px; line-height: 28px; }
  .about-value__num { font-size: 32px; line-height: 32px; }
  .about-value--1 .about-value__num, .about-value--2 .about-value__num, .about-value--3 .about-value__num, .about-value--4 .about-value__num { left: 24px; right: auto; top: 22px; bottom: auto; }
  .about-value--1 .about-value__icon, .about-value--2 .about-value__icon, .about-value--3 .about-value__icon, .about-value--4 .about-value__icon { left: auto; right: 20px; top: 14px; bottom: auto; }
  .about-value__icon svg { width: 32px; height: 32px; }

  .about-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .about-head__main, .about-head__desc { flex: none; margin-left: 0; padding-bottom: 0; }
  .about-eco__stage { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .about-eco__figure { width: 350px; margin-bottom: 19px; }
  .about-eco__figure figcaption span { font-size: 13px; line-height: 19.5px; }
  .about-eco__figure figcaption b { font-size: 32px; line-height: 35.2px; }
  .about-eco__card--parks { width: auto; justify-self: stretch; }

  .about-members { padding: 44px 0; }
  .about-members__grid { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
}

/* ---------- ngắt dòng khớp Figma (font web hẹp hơn bản capture) ---------- */
@media (min-width: 1180px) {
  .about-overview__copy p:nth-child(2) { max-width: 570px; }
  .about-vision__item:first-child p { max-width: 405px; }
  .about-value--1 .about-value__body p { max-width: 318px; }
  .about-eco__card--logistics p { max-width: 218px; }
  .about-eco .about-head__desc { max-width: 317.75px; }
  .about-eco__card--agri h3 { max-width: 150px; }
  .about-eco__card--housing h3 { max-width: 192px; }
  .about-member--honai .about-member__desc { max-width: 240px; }
  .about-member--hamkiem .about-member__desc { max-width: 246px; }
  .about-member--lamson .about-member__title { max-width: 175px; }
  .about-member--ductan .about-member__desc { max-width: 228px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .about-stat:nth-child(2) .about-stat__label { max-width: 190px; }
  .about-overview__copy .about-overview__lead { max-width: 660px; }
  .about-overview__copy p:nth-child(2) { max-width: 737px; }
  .about-vision__item:first-child p { max-width: 352px; }
  .about-value--2 .about-value__title, .about-value--3 .about-value__title { max-width: 240px; }
  .about-value--2 .about-value__body p { max-width: 258px; }
  .about-value--3 .about-value__body p { max-width: 259px; }
  .about-eco .about-head__desc { padding-right: 13px; }
  .about-member--honai .about-member__desc { max-width: 305px; }
}
@media (max-width: 639px) {
  .about-h2__line { display: inline-block; max-width: 210px; }
  .about-overview__copy .about-overview__lead { max-width: 325px; }
  .about-overview__copy p:nth-child(3) { max-width: 339px; }
  .about-overview__copy p:nth-child(4) { max-width: 346.5px; }
  .about-vision__item:first-child p { letter-spacing: .1px; }
  .about-value--1 .about-value__body p { max-width: 276px; }
  .about-eco__card--agri h3 { max-width: 150px; }
  .about-member--tamthang .about-member__desc { max-width: 268px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-eco__dots { animation: none; }
}