/* HZ Group v2 — Trang chủ (Figma 195-4265 / 195-5335 / 195-6336) */

.home .home-h2 { margin-top: 21px; text-wrap: balance; }

/* ---------- section head dùng chung trong trang ---------- */
.home-head { display: flex; align-items: flex-end; gap: 50px; }
.home-head__main { display: flex; flex-direction: column; flex: 0 1 auto; }
.home-head__aside { flex: 0 0 320px; margin-left: auto; padding-bottom: 4px; font: 400 16px/26.4px var(--font); color: var(--slate); }

/* =========================================================
   HERO
   ========================================================= */
.home-hero { top: min(0px, calc(100vh - 1000px)); height: 1000px; overflow: hidden; background: #e8f3fb; color: var(--white); }
.home-hero__media, .home-hero__media img, .home-hero__video, .home-hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero__media img, .home-hero__video { object-fit: cover; object-position: center center; }
.home-hero__video { opacity: 0; transition: opacity .6s ease; }
.home-hero__video.is-playing { opacity: 1; }
/* lớp phủ đo từ khung hình Figma: tối nhẹ bên trái cho chữ + mờ trắng ở đáy */
.home-hero__veil { pointer-events: none; background:
  linear-gradient(180deg, rgba(255,255,255,0) 76%, rgba(255,255,255,.37) 85%, rgba(255,255,255,.6) 90%, rgba(255,255,255,.82) 95%, #fff 100%),
  linear-gradient(90deg, rgba(6,32,54,.32) 0%, rgba(6,32,54,.2) 28%, rgba(6,32,54,.06) 50%, rgba(6,32,54,0) 76%); }
.home-hero__pause { position: absolute; right: 92px; bottom: 32px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); color: var(--navy); font: 400 18px/1 var(--font); transition: background-color .2s; }
.home-hero__pause[hidden] { display: none; }
.home-hero__pause:hover { background: rgba(255, 255, 255, .3); }
@media (max-width: 639px) { .home-hero__pause { right: 80px; bottom: 26px; } }
.home-hero__inner { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; padding-top: 100px; padding-bottom: 110px; }
.home-hero__kicker { margin-bottom: 20px; font: 500 14px/23.1px var(--font); letter-spacing: .035em; color: #75c9ff; }
.home-hero__title { margin-bottom: 30px; font: 500 64px/76.8px var(--font-head); letter-spacing: -.03em; color: var(--white); }
.home-hero__title span { display: block; }
.home-hero__title span + span { padding-top: 7px; }
.home-hero__lead { max-width: 625px; font: 400 18px/28.8px var(--font); color: var(--white); }
.home-hero__stats { display: flex; gap: 48px; margin: 24px 0 32px; }
.home-hero__stats li { display: flex; flex-direction: column; gap: 7px; width: 175px; }
.home-hero__stats b { font: 700 48px/52.8px var(--font); letter-spacing: -.035em; color: var(--white); }
.home-hero__stats span { font: 500 16px/24px var(--font); color: rgba(255, 255, 255, .8); }
.home-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-top: 2px; }
.home-hero__actions .btn { min-height: 48px; padding: 10px 12px; font-size: 16px; line-height: 22.4px; }
.home-hero__actions .btn--outline { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.home-hero__actions .direction-icon { width: 24px; height: 24px; }
.home-hero__scroll { position: absolute; left: 50%; bottom: 95px; display: grid; place-items: center; width: 44px; height: 44px; margin-left: -22px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); box-shadow: 0 5px 22px rgba(10, 41, 66, .09), inset 0 1px 0 rgba(255, 255, 255, .33); color: var(--white); transition: background-color .2s, transform .2s; }
.home-hero__scroll svg { width: 20px; height: 20px; animation: home-nudge 2.2s var(--ease) infinite; }
.home-hero__scroll:hover { background: rgba(255, 255, 255, .24); }
@keyframes home-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* =========================================================
   VỮNG NỀN TẢNG + BẢN ĐỒ (section trượt lên trên hero)
   ========================================================= */
.home-found { position: relative; overflow-x: clip; margin-top: -120px; padding: 200px 0 64px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, #fff 120px, #f4f9fd 100%); }
.home-found::before { content: ''; position: absolute; inset: 120px 0 0; background: url('../../../southeast-asia.svg') center / contain no-repeat; opacity: .18; pointer-events: none; }
.home-found__grid { position: relative; display: grid; grid-template-columns: minmax(0, 547fr) minmax(0, 669fr); column-gap: 64px; align-items: start; }
.home-found__lead { max-width: 460px; margin-top: 22px; font: 400 16px/26.4px var(--font); color: var(--slate); }
.home-found__stats { display: grid; grid-template-columns: repeat(2, 256px); gap: 30px 36px; margin-top: 32px; }
.home-found__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.home-found__stats dt { font: 500 16px/24px var(--font); color: var(--navy); }
.home-found__stats dd { position: relative; display: block; }
.home-found__stats b { font: 700 48px/52.8px var(--font); letter-spacing: -.03em; color: var(--blue); }
.home-found__stats b { display: block; }
.home-found__stats dd span { position: absolute; left: var(--ux); top: 24px; font: 500 16px/26.4px var(--font); color: var(--blue); white-space: nowrap; }

.home-found__mapcol { position: relative; padding-top: 20px; }
.home-map { position: relative; width: 100%; max-width: 650px; aspect-ratio: 650 / 752; margin-inline: auto; }
.home-map__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.home-map__labels { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; font-family: var(--font); font-size: 12px; }
.home-map__labels text { fill: #12324a; }
.home-map__labels .prov { fill: #67869b; }
.home-map__labels path { fill: none; stroke: rgba(123, 167, 192, .8); stroke-width: .9; }
.home-map__sea text { fill: #789aae; }
.home-map__callout { transition: opacity .25s; }
.home-map__callout--ls-right { display: none; }

.home-map__marker { position: absolute; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; }
.home-map__marker i { position: relative; width: 17px; height: 17px; border: 3px solid var(--white); border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 1px #5a9dc6, 0 0 0 7px rgba(23, 114, 184, .07); transition: background-color .25s, box-shadow .25s, transform .25s var(--ease); }
.home-map__marker:hover i, .home-map__marker:focus-visible i { transform: scale(1.15); }
.home-map__marker.is-active i { background: #7fc343; box-shadow: 0 0 0 1px #6aab35, 0 0 0 9px rgba(127, 195, 67, .12); }
.home-map__marker.is-active i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(127, 195, 67, .55); animation: home-pulse 2.4s ease-out infinite; }
@keyframes home-pulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }

.home-map__caption { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.home-map__caption h3 { font: 500 20px/28px var(--font-head); letter-spacing: -.02em; text-transform: uppercase; color: var(--navy); }
.home-map__caption p { font: 400 12px/19.2px var(--font); letter-spacing: .015em; color: #6c8a9e; }

/* thẻ thông tin KCN */
.home-park { position: absolute; z-index: 5; left: 0; top: 0; width: 360px; padding: 16px; background: var(--white); border: 1px solid #d6e6ef; border-radius: 12px; box-shadow: 0 20px 60px rgba(18, 50, 74, .14); }
.home-park[hidden] { display: none; }
.home-park.is-in { animation: home-card-in .32s var(--ease); }
@keyframes home-card-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.home-park__img { width: 100%; height: 150px; border-radius: 6px; object-fit: cover; }
.home-park__credit { padding-top: 7px; text-align: right; font: 400 12px/18px var(--font); color: #678093; }
.home-park__head { display: flex; justify-content: space-between; gap: 12px; min-height: 74px; margin-top: 12px; border-bottom: 1px solid #dde7ee; }
.home-park__prov { font: 600 12px/16.8px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--green-text); }
.home-park__name { margin-top: 8px; font: 500 20px/28px var(--font-head); letter-spacing: -.02em; color: #0c304a; }
.home-park__area { flex: none; text-align: right; }
.home-park__area p { display: flex; align-items: baseline; justify-content: flex-end; gap: 3px; margin-top: -6px; }
.home-park__area b { font: 700 32px/35.2px var(--font); letter-spacing: -1px; color: #2872a7; }
.home-park__area span { font: 400 14px/23.1px var(--font); color: #37556b; }
.home-park__area small { display: block; padding-top: 4px; font: 400 12px/16.8px var(--font); color: #678093; }
.home-park__desc { margin-top: 14px; font: 400 16px/25.6px var(--font); color: #486c85; }
.home-park__facts { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; }
.home-park__facts dt { font: 400 11px/17.6px var(--font); color: #678093; white-space: nowrap; }
.home-park__facts dd { font: 500 13px/19.5px var(--font); color: #123d56; text-align: right; }
.home-park__btn { width: 100%; min-height: 52px; margin-top: 12px; padding: 10px 16px; box-shadow: 0 3px 8px rgba(15, 78, 136, .06); }
.home-park__btn .direction-icon { width: 24px; height: 24px; }

/* =========================================================
   GIỚI THIỆU
   ========================================================= */
.home-intro { padding: 64px 0; background: linear-gradient(180deg, #f4f9fd, #edf5fb); }
.home-intro__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 72px; }
.home-intro__media { position: relative; min-height: 300px; border-radius: 10px; overflow: hidden; background: #dfe9f1; box-shadow: 0 22px 60px rgba(18, 50, 74, .04); }
.home-intro__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-intro__media::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, rgba(8, 44, 70, 0), rgba(8, 44, 70, .75)); }
.home-intro__media figcaption { position: absolute; z-index: 1; left: 30px; right: 30px; bottom: 30px; font: 500 11px/17.6px var(--font); letter-spacing: .1em; color: var(--white); }
.home-intro__text > p:not(.eyebrow) { margin-top: 18px; font: 400 16px/26.4px var(--font); color: var(--slate); }
.home-intro__text > p.home-intro__lead { margin-top: 28px; font: 500 20px/32px var(--font); color: var(--navy); }
.home-intro__lead b { font-weight: 600; letter-spacing: .012em; }

.home-intro__text .btn { margin-top: 30px; margin-bottom: -2px; padding-inline: 22px; box-shadow: 0 3px 8px rgba(15, 78, 136, .06); }

/* =========================================================
   HỆ SINH THÁI
   ========================================================= */
.home-eco { padding: 64px 0; background: linear-gradient(180deg, #edf5fb, #e8f3fb); overflow-x: clip; }
.home-eco .home-head__main { flex-basis: 910px; }
.home-eco__stage { position: relative; height: 874px; }
.home-eco__orbits { position: absolute; left: calc(50% - 550px); top: 155px; width: 1100px; height: 760px; overflow: visible; pointer-events: none; }
.home-eco__orbits > circle { fill: none; stroke: #83b7d7; stroke-width: 1; }
.home-eco__dot { fill: #1772b8; transform-box: view-box; transform-origin: 550px 340px; animation: home-orbit 60s linear infinite; }
.home-eco__dot .halo { fill: rgba(23, 114, 184, .1); }
.home-eco__dot--2 { animation-duration: 80s; }
.home-eco__dot--3 { animation-duration: 100s; animation-direction: reverse; }
@keyframes home-orbit { to { transform: rotate(360deg); } }
.home-eco__figure { position: absolute; left: calc(50% - 210px); top: 285px; width: 420px; }
.home-eco__figure img { width: 420px; height: 420px; border-radius: 50%; object-fit: contain; }
.home-eco__figure figcaption { position: absolute; left: 50%; top: 506px; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translateX(-50%); white-space: nowrap; }
.home-eco__figure figcaption span { font: 500 14px/21px var(--font); letter-spacing: .08em; color: #5c7f96; }
.home-eco__figure figcaption b { font: 700 38px/41.8px var(--font-head); letter-spacing: -.035em; color: var(--blue); }
.home-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 .25s, transform .25s var(--ease); }
.home-eco__card:hover { box-shadow: 0 14px 34px rgba(25, 110, 172, .1); transform: translateY(-3px); }
.home-eco__icon { flex: none; width: 54px; height: 54px; }
.home-eco__card h3 { font: 500 20px/27px var(--font-head); letter-spacing: -.02em; color: var(--blue); }
.home-eco__card p { padding: 8px 0 6px; font: 400 14px/21px var(--font); color: #526675; }
.home-eco__card .link-detail { gap: 16px; padding: 4px 0 1px; }
.home-eco__card--kcn { left: calc(50% - 170px); top: 36px; }
.home-eco__card--build { right: 15px; top: 241px; }
.home-eco__card--port { left: 15px; top: 233px; }
.home-eco__card--agri { left: 80px; top: 580px; }
.home-eco__card--home { right: 80px; top: 570px; }

/* =========================================================
   NĂNG LỰC THỰC TẾ — accordion + ảnh
   ========================================================= */
.home-adv { padding: 64px 0; background: var(--white); }
.home-adv__grid { display: grid; grid-template-columns: minmax(0, 650fr) minmax(0, 566fr); column-gap: 64px; margin-top: 48px; }
.home-adv__media { position: relative; min-height: 620px; border-radius: 12px; overflow: hidden; background: #eaf3f8; }
.home-adv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.home-adv__media img.is-active { opacity: 1; transform: none; }
.home-adv__media::after { content: ''; position: absolute; inset: auto 0 0; height: 55%; background: linear-gradient(180deg, rgba(11, 48, 74, 0), rgba(11, 48, 74, .85)); pointer-events: none; }
.home-adv__media figcaption { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 31px; }
.home-adv__count { display: block; font: 400 13px/20.8px var(--font); letter-spacing: .12em; color: #d6eaf7; }
.home-adv__caption { display: block; max-width: 360px; margin-top: 16px; font: 500 24px/33.6px var(--font-head); letter-spacing: -.025em; color: var(--white); }
.home-adv__caption.is-swap, .home-adv__count.is-swap { animation: home-fade .45s var(--ease); }
@keyframes home-fade { from { opacity: 0; transform: translateY(8px); } }
.home-adv__intro { font: 400 16px/26.4px var(--font); color: #587080; }
.home-acc { margin-top: 28px; }
.home-acc__item { padding: 34px 0; border-bottom: 1px solid #cddfe9; }
.home-acc__item:first-child { border-top: 1px solid #cddfe9; }
.home-acc__btn { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; align-items: center; column-gap: 18px; width: 100%; padding-right: 4px; text-align: left; color: var(--navy); transition: color .2s; }
.home-acc__btn:hover, .home-acc__item.is-open .home-acc__btn { color: var(--blue); }
.home-acc__num { font: 500 13px/19.5px var(--font); }
.home-acc__title { font: 500 20px/28px var(--font-head); letter-spacing: -.025em; text-wrap: balance; }
.home-acc__icon { position: relative; width: 16px; height: 16px; }
.home-acc__icon::before, .home-acc__icon::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: currentColor; transition: transform .3s var(--ease); }
.home-acc__icon::after { transform: rotate(90deg); }
.home-acc__item.is-open .home-acc__icon::after { transform: rotate(0deg); }
.home-acc__panel p { padding: 16px 36px 2px 46px; font: 400 16px/26.4px var(--font); color: #47677d; }
.home-adv__foot { padding-top: 32px; font: 400 16px/26.4px var(--font); color: var(--slate); }

/* =========================================================
   KHÁCH HÀNG
   ========================================================= */
.home-clients { padding: 96px 0; background: var(--white); }
.home-clients .home-head { gap: 70px; }
.home-clients .home-h2 { margin-top: 22px; letter-spacing: -.035em; }
.home-clients__aside { flex-basis: 280px; padding-bottom: 0; color: var(--slate-2); }
.home-clients__aside b { font-weight: 700; color: var(--blue); }
.home-clients__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 229px)); justify-content: center; gap: 8px 28px; margin-top: 44px; }
.home-clients__grid li { display: flex; align-items: center; justify-content: center; height: 112px; padding: 22px 16px; }
.home-clients__grid img { width: 100%; max-width: 170px; height: 76px; object-fit: contain; transform: scale(var(--s, 1)); transition: transform .3s var(--ease); }
.home-clients__grid li:hover img { transform: scale(calc(var(--s, 1) * 1.06)); }

/* =========================================================
   TIN TỨC
   ========================================================= */
.home-news { padding: 64px 0; background: var(--white); }
.home-news__head { justify-content: space-between; gap: 40px; }
.home-news__head .link-all { flex: none; gap: 16px; padding: 8px 4px 9px 0; }
.home-news__grid { display: grid; grid-template-columns: minmax(0, 643fr) minmax(0, 613fr); grid-template-rows: auto auto; gap: 24px; margin-top: 36px; }
.home-news__card { position: relative; display: flex; overflow: hidden; background: var(--white); border-radius: var(--radius-lg); transition: box-shadow .25s; }
.home-news__card::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid var(--line); border-radius: inherit; pointer-events: none; }
.home-news__card:hover { box-shadow: 0 14px 40px rgba(18, 50, 74, .07); }
.home-news__card--lead { grid-row: span 2; flex-direction: column; }
.home-news__img { position: relative; display: block; flex: none; width: 170px; overflow: hidden; background: #dfe9f1; }
.home-news__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.home-news__card:hover .home-news__img img { transform: scale(1.04); }
.home-news__card--lead .home-news__img { width: 100%; height: 361px; }
.home-news__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; flex: 1; min-width: 0; padding: 24px; }
.home-news__card--lead .home-news__body { gap: 16px; padding: 28px; }
.home-news__meta { display: flex; justify-content: space-between; gap: 12px; width: 100%; font: 600 14px/22.4px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.home-news__meta span { color: var(--blue); }
.home-news__body h3 { font: 500 24px/33.6px var(--font-head); letter-spacing: -.02em; color: var(--navy); text-wrap: balance; }
.home-news__body h3 a { transition: color .2s; }
.home-news__body h3 a:hover { color: var(--blue); }
.home-news__excerpt { font: 400 16px/26.4px var(--font); color: var(--slate); }
.home-news__body .link-detail { gap: 16px; min-height: 47px; padding: 8px 4px 9px 0; margin-top: auto; }
.home-news__card--lead .link-detail { margin-top: 0; }
.home-news__note { padding-top: 22px; font: 400 12px/19.2px var(--font); color: #768e9f; }

/* =========================================================
   DESKTOP hẹp (1180–1439): giữ bố cục, co giãn
   ========================================================= */
@media (max-width: 1439px) and (min-width: 1180px) {
  .home-found__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-eco__card--agri { left: 30px; }
  .home-eco__card--home { right: 30px; }
}

/* =========================================================
   TABLET 640–1179 (thiết kế 834)
   ========================================================= */
@media (max-width: 1179px) {
  .home-head__aside { flex-basis: 188px; }

  .home-hero { top: min(0px, calc(100vh - 1194px)); height: 1194px; }
  .home-hero__inner { padding-inline: 56px; }
  .home-hero__title { font-size: 48px; line-height: 57.6px; }
  .home-hero__stats b { font-size: 36px; line-height: 39.6px; }
  .home-hero__actions .btn { padding: 10px 14px; }
  .home-hero__actions .direction-icon { width: 22px; height: 22px; }

  .home-found { padding: 180px 0 45px; }
  .home-found__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
  .home-found__stats { grid-template-columns: minmax(0, 163fr) minmax(0, 175fr); gap: 28px 24px; }
  .home-found__stats b { font-size: 36px; line-height: 39.6px; }
  .home-found__stats dd span { left: var(--ux-t); top: 13px; }
  .home-map { max-width: 362px; }
  .home-map__callout--ls-left { display: none; }
  .home-map__callout--ls-right { display: inline; }
  .home-map__caption h3 { font-size: 14px; line-height: 19.6px; }

  .home-intro { padding: 48px 0; }
  .home-intro__grid { column-gap: 36px; }

  .home-eco { padding: 48px 0; }
  .home-eco .home-head__main { flex-basis: 516px; }
  .home-eco__stage { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 32px; height: auto; padding-top: 30px; }
  .home-eco__orbits { display: none; }
  .home-eco__figure { position: relative; left: auto; top: auto; display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 515px; }
  .home-eco__figure figcaption { top: 435px; }
  .home-eco__card { position: relative; inset: auto; width: calc(50% - 16px); }
  .home-eco__card--kcn { width: 420px; }
  .home-eco__card--kcn { left: auto; top: auto; margin-inline: calc((100% - 420px) / 2); }

  .home-adv { padding: 48px 0; }
  .home-adv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .home-adv__caption { max-width: 297px; }
  .home-acc__btn { column-gap: 12px; }
  .home-acc__panel p { padding: 16px 0 2px 40px; }

  .home-clients { padding: 80px 0; }
  .home-clients .home-head { gap: 36px; }
  .home-clients__aside { flex-basis: 280px; }
  .home-clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 27px; }

  .home-news { padding: 48px 0; }
  .home-news__head { gap: 25px; }
  .home-news__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .home-news__card--lead { grid-row: auto; }
  .home-news__card--lead .home-news__img { height: 320px; }
  .home-news__img { width: 220px; }
  .home-news__body { padding: 20px; }
  .home-news__card:not(.home-news__card--lead) { min-height: 242px; }
}

/* =========================================================
   MOBILE < 640 (thiết kế 390)
   ========================================================= */
@media (max-width: 639px) {
  .home .h-section { font-size: 36px; line-height: 43.2px; }
  .home .home-h2 { margin-top: 17px; }
  .home-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .home-head__aside { flex: none; margin-left: 0; padding-bottom: 0; }

  .home-hero { top: 0; height: auto; min-height: 844px; }
  .home-hero__inner { min-height: 844px; padding: 100px var(--gutter) 120px; }
  .home-hero__kicker { max-width: 320px; margin-bottom: 16px; font-size: 12px; line-height: 19.8px; }
  .home-hero__title { margin-bottom: 24px; font-size: 36px; line-height: 43.2px; }
  .home-hero__lead { font-size: 16px; line-height: 25.6px; }
  .home-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; margin: 22px 0 28px; }
  .home-hero__stats li { width: auto; gap: 6px; }
  .home-hero__actions { gap: 12px; }
  .home-hero__actions .btn { min-height: 40px; padding: 8px 10px; }
  .home-hero__actions .direction-icon { display: none; }
  .home-hero__scroll { bottom: 70px; }

  .home-found { margin-top: 0; padding: 45px 0 40px; background: linear-gradient(180deg, #fff, #f4f9fd); }
  .home-found::before { inset: 0; }
  .home-found__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .home-found__stats { grid-template-columns: minmax(0, 153fr) minmax(0, 175fr); gap: 28px 22px; margin-top: 28px; }
  .home-found__mapcol { padding: 16px 8px 0; }
  .home-map { max-width: none; transform: translateX(18px); }
  .home-map__caption { gap: 6px; }
  .home-map__caption h3 { font-size: 12px; line-height: 16.8px; letter-spacing: -.04em; }
  .home-park { left: 8px !important; right: 8px; width: auto; border-radius: 10px; }
  .home-park__img { height: 125px; }
  .home-park__name { padding-bottom: 12px; border-bottom: 1px solid #dde7ee; }
  .home-park__facts dt, .home-park__facts dd { font-size: 12px; line-height: 16.8px; }
  .home-park__btn { min-height: 46px; }

  .home-intro { padding: 40px 0; }
  .home-intro__grid { grid-template-columns: minmax(0, 1fr); row-gap: 30px; }
  .home-intro__media { height: 300px; }
  .home-intro__media figcaption { bottom: 29px; }
  .home-intro__text .btn { min-height: 58px; padding: 13px 19px; }

  .home-eco { padding: 40px 0; }
  .home-eco .home-head__main { flex-basis: auto; }
  .home-eco__stage { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 28px; }
  .home-eco__figure { height: auto; aspect-ratio: 350 / 445; }
  .home-eco__figure img { width: 100%; height: auto; aspect-ratio: 1; }
  .home-eco__figure figcaption { top: auto; bottom: 19px; }
  .home-eco__figure figcaption span { font-size: 13px; line-height: 19.5px; }
  .home-eco__figure figcaption b { font-size: 32px; line-height: 35.2px; }
  .home-eco__card, .home-eco__card--kcn { width: 100%; margin-inline: 0; }

  .home-adv { padding: 40px 0; }
  .home-adv__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; margin-top: 30px; }
  .home-adv__media { min-height: 360px; }
  .home-adv__media figcaption { left: 24px; right: 24px; bottom: 23px; }
  .home-acc__item { padding: 28px 0; }

  .home-clients { padding: 64px 0; }
  .home-clients .home-head { gap: 0; }
  .home-clients .home-h2 { margin-top: 22px; }
  .home-clients__aside { padding-top: 22px; }
  .home-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin-top: 28px; }
  .home-clients__grid li { height: 100px; padding: 20px 12px; }
  .home-clients__grid img { max-width: none; }

  .home-news { padding: 40px 0; }
  .home-news__head { gap: 20px; }
  .home-news__head .link-all { align-self: flex-start; }
  .home-news__grid { margin-top: 28px; }
  .home-news__card { flex-direction: column; }
  .home-news__img, .home-news__card--lead .home-news__img { width: 100%; height: 220px; }
  .home-news__body, .home-news__card--lead .home-news__body { gap: 14px; padding: 22px; }
  .home-news__body .link-detail { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero__scroll svg, .home-eco__dot, .home-map__marker.is-active i::after { animation: none; }
  .home-adv__media img { transition: none; }
}

/* ---------- căn ngắt dòng giống Figma (font web hẹp hơn bản capture ~1–2%) ---------- */
@media (min-width: 1180px) {
  .home-intro__text > p:nth-of-type(3) { max-width: 585px; }
  .home-intro__text > p:nth-of-type(4) { max-width: 588px; }
  .home-eco__aside { padding-right: 2px; }
  .home-eco__card--port p { max-width: 218px; }
  .home-eco__card--agri h3 { max-width: 150px; }
  .home-eco__card--home h3 { max-width: 200px; }
  .home-acc__panel p { max-width: 541px; }
}

/* ---------- chiều cao dòng làm tròn như khung text Figma (tránh lệch tích lũy) ---------- */
.home .eyebrow { line-height: 20px; }
.home .home-h2 { line-height: 58px; }
.home-found__lead, .home-intro__text > p:not(.eyebrow):not(.home-intro__lead), .home-head__aside, .home-adv__intro,
.home-acc__panel p, .home-news__excerpt, .home-adv__foot { line-height: 26.5px; }
.home-news__meta { line-height: 23px; }
.home-news__body h3, .home-adv__caption { line-height: 34px; }
.home-acc__num { line-height: 20px; }
.home-adv__count { line-height: 21px; }
.home-hero__stats b, .home-found__stats b { line-height: 53px; }
@media (max-width: 1179px) {
  .home .home-h2 { line-height: 43.5px; }
  .home-hero__stats b, .home-found__stats b { line-height: 40px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .home-found__lead { max-width: 350px; }
  .home-found__stats > div:nth-child(4) dt, .home-found__stats > div:nth-child(5) dt { max-width: 140px; }
  .home-found__stats > div:nth-child(6) dt { max-width: 130px; }
  .home-map__caption p { max-width: 235px; }
  .home-intro__text > p:nth-of-type(3) { max-width: 354px; }
  .home-eco__aside { padding-right: 12px; }
  .home-adv__intro { max-width: 350px; }
  .home-news__card:not(.home-news__card--lead) h3 { margin-right: -10px; }
}
.home .home-h2 > span { display: block; text-wrap: balance; }
@media (max-width: 639px) {
  .home-hero__kicker { max-width: 290px; }
  .home-hero__lead { max-width: 282px; }
  .home-found__stats > div:nth-child(1) dt { max-width: 115px; }
  .home-found__stats > div:nth-child(4) dt { max-width: 140px; }
  .home-found__stats > div:nth-child(6) dt { max-width: 130px; }
  .home-map__caption p { max-width: 235px; }
  .home-intro__text > p:nth-of-type(3) { max-width: 332px; }
  .home-eco__card--agri h3 { max-width: 150px; }
  .home-news__card:nth-child(3) .home-news__excerpt { max-width: 285px; }
}