/* =====================================================================
   F2Tech Asia — About page
   Hero (statement + vision/mission/values) · History (sticky horizontal)
   · Stats carousel + CEO quote · Rewards grid · Gallery (kept)
   Reuses .stats / .round-btn / trust-scroll pattern from site.css.
   Scroll effects live in js/about.js.
   ===================================================================== */

/* shared media block */
.media { position: relative; overflow: hidden; border-radius: 1.4rem; background: var(--gray); }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media[data-parallax] img { height: 118%; will-change: transform; }

/* generic section head (gallery) */
.about-head { grid-column: 1 / -1; margin-bottom: 5rem; }
.about-head .tagline { margin-bottom: 1rem; }
.about-head h2 { font-size: 4rem; font-weight: 500; line-height: 1.1; letter-spacing: -.1rem; }

/* ============================= HERO ============================= */
.ab-hero { padding: 17rem 0 8rem; }
.ab-hero-label { align-self: start; padding-top: 1.4rem; }
.ab-hero-statement { font-size: 6.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -4px; }

.ab-hero-showcase { margin-top: 9rem; align-items: stretch; }
.ab-hero-media { grid-column: 1 / 8; aspect-ratio: 16 / 12; }
/* khoảng cách giữa Tầm nhìn / Sứ mệnh / Giá trị cốt lõi = chỉnh `gap` bên dưới */
.ab-hero-vm { grid-column: 9 / 11; display: flex; flex-direction: column; justify-content: flex-start; gap: 5rem; }
.ab-vm-item h3 { font-size: 2.4rem; font-weight: 500; line-height: 1.2; margin-bottom: 1.2rem; letter-spacing: -.02rem; }
.ab-vm-item p { font-size: 1.6rem; line-height: 1.65; color: var(--fg-muted); }

/* ============================= HISTORY — sticky + horizontal timeline ============================= */
/* --hg = khoảng cách title→ray và ray→card (bằng nhau); chỉnh 1 chỗ này */
.ab-history { background: var(--trust-bg); color: #fff; position: relative; }
.ab-history-pin { --hg: 13rem; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 6rem 0; overflow: hidden; }
.ab-history-head .tagline { align-self: start; }
.ab-history-title { font-size: 4.6rem; font-weight: 500; line-height: 1.1; letter-spacing: -.2rem; }
.ab-history-intro p { margin-top: 1.8rem; font-size: 1.6rem; line-height: 1.7; color: rgba(255,255,255,.6); max-width: 56rem; }

/* middle zone: horizontal rail at the top, cards below */
.ab-history-mid { position: relative; margin-top: var(--hg); }
.ab-history-rail { position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: rgba(255,255,255,.4); }
.ab-history-railfill { position: absolute; top: 0; left: 0; height: 2px; width: 0; background: var(--primary); transform: translateY(-.5px); will-change: width; }

.ab-history-track { display: flex; gap: 8rem; width: max-content; padding: var(--hg) var(--grid-margin, 4rem) 0; }
.hist-card { position: relative; display: flex; flex-direction: column; width: 32rem; gap: 2.5rem; }
/* dot sits on the rail, a thin stem connects it down to the card */
.hist-dot { position: absolute; top: calc(-1 * var(--hg)); left: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: rgb(255,255,255); transform: translate(-50%, -50%); z-index: 2; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
/* .hist-dot::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translateX(-50%);
  width: 1px; height: var(--hg); background: rgba(255,255,255,.18); transition: background .3s var(--ease); } */
.hist-card.is-active .hist-dot { background: var(--primary); box-shadow: 0 0 0 .5rem rgba(232,38,45,.18); }
.hist-card.is-active .hist-dot::after { background: var(--primary); }
.hist-year { font-size: 5.6rem; font-weight: 600; color: var(--primary); line-height: 1; margin-bottom: 1.8rem; letter-spacing: -.2rem; }
.hist-card h3 { font-size: 2.2rem; font-weight: 500; color: #fff; margin-bottom: 1rem; }
.hist-card p { font-size: 1.5rem; line-height: 1.6; color: rgba(255,255,255,.55); }
.hist-card--next .hist-year { color: #fff; }
.hist-flow { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; margin-top: 1rem; }
.hist-flow span { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 600; color: rgba(255,255,255,.6); }
.hist-flow .hist-flow-accent { color: var(--primary); }
.hist-flow i { width: 2rem; height: 1px; background: rgba(255,255,255,.3); display: inline-block; }

/* ============================= STATS carousel + CEO QUOTE ============================= */
.ab-voice { padding: 13rem 0; }
.ab-voice .container { align-items: center; }
.ab-voice .stats { align-self: center; }
/* .ab-quote { } */
.ab-quote-text { font-size: 6.4rem; font-weight: 500; line-height: 1.2; letter-spacing: -.2rem; }
.ab-quote-author { display: flex; align-items: center; gap: 1.4rem; margin-top: 4rem; }
.ab-quote-avatar { width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--primary); flex: none; }
.ab-quote-name { font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.ab-quote-role { font-size: 1.3rem; color: var(--fg-muted); margin-top: .2rem; }

/* ============================= GIẢI THƯỞNG VINH DANH (v17.7) =============================
   Hiệu ứng kéo rèm (chỉ CSS, position: sticky):
   1) .ab-awards-bg  : ảnh cao 1 màn hình, dính top:0 suốt chiều cao section (nằm dưới cùng).
   2) .ab-awards-panel: tấm nền trắng chứa danh sách, kéo lên che ảnh (margin-top:-100svh), cao tối thiểu 1 màn hình.
      Khi cuộn, tấm trắng trượt lên → ảnh lộ dần như rèm được kéo lên.
   3) .ab-awards-hold : khoảng trống trong suốt (100svh + --awards-pause): rèm kéo hết, dừng xem trọn ảnh, rồi cả section cuộn đi.
   Chỉnh: --awards-pause (thời gian dừng xem ảnh) · độ tối ảnh ở .ab-awards-bg::after.
   ============================================================================================ */
.ab-awards { position: relative; --awards-pause: 45svh; }
.ab-awards-bg { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; background: #2a1d14; }
.ab-awards-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.ab-awards-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,0) 40%); pointer-events: none; }
.ab-awards-panel { position: relative; z-index: 1; margin-top: -100svh; min-height: 100svh; background: var(--bg, #fff);
  padding: 10rem 0 12rem; box-shadow: 0 4rem 6rem -3rem rgba(15, 27, 45, .35); display: flex; flex-direction: column; justify-content: center; }
.ab-awards-hold { position: relative; height: calc(100svh + var(--awards-pause)); }   /* 100svh để rèm kéo hết + khoảng dừng xem ảnh */
.award-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.award-item { display: grid; grid-template-columns: 5fr 3fr; column-gap: var(--grid-gutter); align-items: baseline;
  padding: 3.6rem 0; border-bottom: 1px solid var(--border); }
.award-name { font-size: 3.2rem; font-weight: 500; line-height: 1.2; letter-spacing: -.06rem; }
.award-desc { font-size: 1.6rem; line-height: 1.6; color: var(--fg-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================= GALLERY (KEPT — 2 opposite marquees) ============================= */
.about-gallery { padding: 8rem 0 12rem; overflow: hidden; }
.about-gallery .about-head { padding-inline: var(--grid-margin, 4rem); }
.gallery-row { margin-bottom: 2.4rem; }
.gallery-row .marquee-track { gap: 2.4rem; }
.gallery-item { flex: none; width: 42rem; aspect-ratio: 3 / 2; background: var(--gray); border-radius: 1.2rem; overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* ============================= TABLET (641–1199) ============================= */


/* ============================= MOBILE ============================= */
@media (max-width: 1199px) {
  .ab-hero { padding: 12rem 0 5rem; }
  .ab-hero-label { grid-column: 1 / -1; padding-top: 0; margin-bottom: 1.6rem; }
  .ab-hero-statement { grid-column: 1 / -1; font-size: 3.2rem; letter-spacing: -.08rem; }
  .ab-hero-showcase { margin-top: 4rem; }
  .ab-hero-media { grid-column: 1 / -1; aspect-ratio: 4 / 3; margin-bottom: 3rem; }
  .ab-hero-vm { grid-column: 1 / -1; gap: 3rem; }

  /* history becomes a normal vertical list (horizontal scroll disabled < 1200) */
  .ab-history-pin { --hg: 0rem; height: auto; padding: 8rem 0; gap: 4rem; }
  .ab-history-head .tagline, .ab-history-intro { grid-column: 1 / -1; }
  .ab-history-title { font-size: 3rem; }
  .ab-history-mid { margin-top: 4rem; }
  .ab-history-rail, .ab-history-railfill, .hist-dot { display: none; }
  .ab-history-track { flex-direction: column; width: 100%; gap: 0; padding: 0 var(--grid-margin, 1.6rem); }
  .hist-card { width: 100%; border-top: 1px solid rgba(255,255,255,.16); padding: 2.4rem 0; }
  .hist-card:first-child { border-top: none; }
  .hist-year { font-size: 4.4rem; margin-bottom: 1.6rem; }

  .ab-voice { padding: 7rem 0; }
  .ab-voice .stats { grid-column: 1 / -1; margin-bottom: 4rem; }
  .ab-quote { grid-column: 1 / -1; }
  .ab-quote-text { font-size: 2.6rem; letter-spacing: -.06rem; }

  .ab-awards { --awards-pause: 25svh; }
  .ab-awards-panel { padding: 7rem 0 8rem; }
  .ab-awards-panel .tagline { grid-column: 1 / -1; margin-bottom: 2.4rem; }
  .award-list { grid-column: 1 / -1; }
  .award-item { grid-template-columns: 1fr; row-gap: .8rem; padding: 2.4rem 0; }
  .award-name { font-size: 2.4rem; }

  .gallery-item { width: 28rem; }
}



/* ============================= DESKTOP (≥1200) ============================= */
@media (min-width: 1200px) {
  /* ab-voice cao 80vh, canh giữa nội dung → tạo khoảng thở lớn phía dưới */
  .ab-voice { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; padding: 8rem 0; }
  /* khoảng cách giữa section giải thưởng và section bên trên = chỉnh `padding-top` của .ab-awards-panel */
}

/* v2.48 · 08/10/2026 — Giải thưởng (mobile + tablet < 1200px): cuộn bình thường, ảnh full width theo đúng tỉ lệ ảnh (không dính, không cao 100vh) */
@media (max-width: 1199px) {
  .ab-awards { display: flex; flex-direction: column; }
  .ab-awards-panel { order: 1; margin-top: 0; min-height: 0; }
  .ab-awards-bg { order: 2; position: relative; top: auto; height: auto; background: none; }
  .ab-awards-bg img { height: auto; object-fit: initial; }
  .ab-awards-bg::after { display: none; }
  .ab-awards-hold { order: 3; height: 0; overflow: hidden; }
}