/* ============================================================
   about.css — Chỉ dùng cho gioi-thieu.html (trang 16 file thiết kế)
   Section: banner · số liệu · tầm nhìn/sứ mệnh/giá trị · lịch sử
            · hạ tầng vận tải · môi trường · đối tác chiến lược
   Nạp SAU common.css. Component dùng chung (.stat, .sec-title,
   .grid-3, .nav-btn…) nằm ở common.css §15 — ở đây chỉ bổ sung
   phần riêng của trang Giới thiệu.
   ============================================================ */

/* ===== Ô chờ ảnh (assets chưa có ảnh hạ tầng / kho / logo đối tác) ===== */
/* Ảnh hạ tầng / kho vận: tỉ lệ khung đổi theo breakpoint nên phải cover. */
.about-ph {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-grey-light);
  border-radius: var(--r-sm);
  object-fit: cover;
}

/* ===== 1 · BANNER "VỀ CHÚNG TÔI" ===== */
/* Ảnh banner giữ đúng chiều cao của .page-banner__img */
.about-banner__ph {
  display: block;
  width: 100%;
  height: var(--h-page-banner);
  background: var(--c-grey-light);
  object-fit: cover;
}

/* Breadcrumb nằm đè lên banner: phải vượt lên trên lớp phủ .page-banner::after */
.about-banner__crumb {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--header-h) + 14px);
  z-index: 3;
}
.breadcrumb--on-banner { color: rgba(255, 255, 255, .8); padding: 0; }
.breadcrumb--on-banner a:hover { color: #fff; }
.breadcrumb--on-banner li + li::before { background: rgba(255, 255, 255, .8); }
.breadcrumb--on-banner [aria-current="page"] { color: #fff; }

/* Chừa chỗ cho header nổi + breadcrumb ở đỉnh banner, phần chữ vẫn căn giữa
   trong khoảng còn lại (quan trọng ở khổ hẹp — đoạn mô tả rất dài) */
/* Đệm DƯỚI lấy --banner-base như mọi banner trang con — chữ ở đây từng dừng ở
   36px trong khi các trang khác ở 48px, và vì trang này không có cụm mũi tên
   để so nên độ lệch chỉ lộ ra khi bấm qua lại giữa các trang. */
.about-banner .page-banner__body {
  padding-block: calc(var(--header-h) + 46px) var(--banner-base);
}
.about-banner .page-banner__title { margin-bottom: 14px; }
.about-banner .page-banner__desc { line-height: 1.75; }

/* ===== 2 · SỐ LIỆU ===== */
.about-stats-sec { padding-block: clamp(40px, 5.4vw, 68px); }
.about-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
  align-items: start;
}
.about-stats .stat b { line-height: 1.1; margin-bottom: 6px; }
.about-stats .stat span { display: block; max-width: 20ch; margin-inline: auto; }

/* ===== 3 · TẦM NHÌN · SỨ MỆNH · GIÁ TRỊ CỐT LÕI ===== */
.about-values-sec { padding-bottom: var(--sp-section); }
.about-value {
  background: var(--c-grey-light);
  border-radius: var(--r-md);
  padding: clamp(22px, 2.6vw, 32px);
}
.about-value h2 {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: var(--fw-title);
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.about-value p,
.about-value__list { font-size: var(--fs-body); color: var(--c-body); }
.about-value__list li { position: relative; padding-left: 16px; }
.about-value__list li + li { margin-top: 8px; }
.about-value__list li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-body);
}

/* ===== 4 · LỊCH SỬ HÌNH THÀNH (nền tối) ===== */
.about-history { background: var(--c-dark); color: rgba(255, 255, 255, .82); }
.about-history__title {
  color: #fff;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}
.about-timeline { padding-bottom: 4px; }
.about-tl { height: 100%; }
.about-tl__year {
  display: block;
  font-size: var(--fs-h1);
  font-weight: var(--fw-title);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 16px;
}
.about-tl p { font-size: var(--fs-body); line-height: 1.7; color: rgba(255, 255, 255, .82); }

.about-history__nav { margin-top: clamp(26px, 3.4vw, 40px); }
/* Nút tròn điều hướng đặt trên nền tối */
.nav-group--on-dark .nav-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.nav-group--on-dark .nav-btn:hover {
  background: #fff;
  border-color: #fff;
  color: var(--c-ink);
}
.nav-group--on-dark .nav-btn.swiper-button-disabled { opacity: .4; }

/* ===== 5 · HẠ TẦNG VÀ HỆ THỐNG VẬN TẢI ===== */
.about-infra__title { margin-bottom: clamp(26px, 3.4vw, 40px); }
.about-ph--infra { aspect-ratio: 2 / 1; border-radius: var(--r-md); }
/* Hai đoạn mô tả dài nhất của site. Ở 1440 chúng từng chạy ~150 ký tự/dòng
   (ngưỡng dễ đọc 45–75) vì không có trần nào; sau khi nới body 1280 → 1440 thì
   thành ~170. --maxw-text chặn lại, và vì tính bằng `ch` nên trần co theo cỡ
   chữ chứ không theo bề rộng màn hình. */
/* `margin-inline: auto` BẮT BUỘC đi kèm --maxw-text ở đây: tiêu đề của hai mục
   này căn giữa trọn 1360px, mà đoạn văn bị chặn còn 643px lại bám mép trái —
   nhìn ra một khối chữ lệch hẳn về trái dưới một tiêu đề cân giữa. Thiết kế
   trang 16 không có mâu thuẫn đó vì đoạn văn bên đó chạy hết bề ngang cột.
   Giữ trần đọc (quyết định có chủ ý ở pass 31/07) NHƯNG canh giữa khối.
   Từ pass 30/07 canh giữa cả CHỮ (không chỉ khối) ở mọi bề rộng theo yêu cầu
   client — trước đó `text-align: center` chỉ có ở breakpoint ≤720. */
.about-infra__text {
  margin-top: clamp(24px, 3vw, 36px);
  margin-inline: auto;
  max-width: var(--maxw-text);
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-body);
}

/* ===== 6 · MÔI TRƯỜNG & HỆ SINH THÁI BỀN VỮNG ===== */
.about-eco { padding-bottom: var(--sp-section); }
/* Ảnh tràn viền: bỏ bo góc, cao theo tỷ lệ thiết kế nhưng không quá cao */
.about-ph--full {
  border-radius: 0;
  aspect-ratio: 5 / 2;
  max-height: 560px;
}
.about-eco__body { padding-top: clamp(30px, 4vw, 48px); }
.about-eco__title { margin-bottom: clamp(18px, 2.2vw, 26px); }
/* Canh giữa khối chữ dưới tiêu đề căn giữa — cùng lý do với .about-infra__text. */
.about-eco__text {
  margin-inline: auto;
  max-width: var(--maxw-text);
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-body);
}

/* ===== 7 · ĐỐI TÁC CHIẾN LƯỢC ===== */
.about-partners__title { margin-bottom: clamp(26px, 3.4vw, 40px); }
.about-partners__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
/* Note client: "Logo chạy tự động" — dải logo tự trôi ngang, liền mạch.
   JS nhân đôi danh sách rồi trôi -50% nên điểm nối không nhìn thấy.
   Dừng khi trỏ chuột vào để người dùng đọc kịp tên đối tác. */
.about-partners__grid.is-marquee {
  display: flex;
  grid-template-columns: none;
  width: max-content;
  animation: about-partners-scroll 28s linear infinite;
}
.about-partners__grid.is-marquee > .about-partner {
  flex: 0 0 clamp(140px, 15vw, 210px);
}
.about-partners__grid.is-marquee:hover { animation-play-state: paused; }
/* Khung cắt để dải trôi không làm trang tràn ngang */
.about-partners .container { overflow: hidden; }
@keyframes about-partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .about-partners__grid.is-marquee { animation: none; }
}

/* Ô logo đối tác — note client: "mỗi logo không có border".
   Bỏ luôn nền trắng và đổ bóng: file logo đã là PNG nền trong suốt, chuẩn hoá
   sẵn trên khung 520x260 nên tự nó đã đều nhau, không cần khung để gom nhóm. */
.about-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Ô grid mặc định có min-width:auto = min-content. WebKit không tính
     overflow-wrap:anywhere vào min-content nên tên đối tác dài đẩy track rộng hơn
     cột, làm tràn ngang ở 721px và 320px. min-width:0 cho track co lại đúng. */
  min-width: 0;
  aspect-ratio: 2 / 1;
  padding: 6px clamp(8px, 1vw, 16px);
  text-align: center;
}
.about-partner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Không còn viền nên mất luôn tín hiệu hover cũ (đổi màu border).
     Thay bằng: nghỉ thì hạ bão hoà cho cả dải nhìn đồng đều, rê chuột thì trả
     đủ màu + nhích to — tín hiệu nằm ngay trên chính logo. */
  filter: saturate(.85);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.about-partner:hover img { filter: saturate(1); transform: scale(1.06); }

/* ===== RESPONSIVE (1024 / 720 / 640) ===== */
@media (max-width: 1024px) {
  .about-stats { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .about-banner__crumb { top: calc(var(--header-h) + 10px); }
  .about-ph--infra { aspect-ratio: 16 / 9; }
  .about-ph--full { aspect-ratio: 2 / 1; }
  /* 5 logo trên một hàng quá hẹp ở khổ tablet → xuống 3 cột */
  .about-partners__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .about-ph--full { aspect-ratio: 3 / 2; }

  /* Banner trang Giới thiệu CAO HƠN các trang con khác. common.css §16 hạ
     --h-page-banner xuống 46vh/420px cho mọi banner trang trong — hợp lý với
     những trang chỉ có một dòng tiêu đề, nhưng banner này còn mang cả breadcrumb
     đè lên đỉnh VÀ một đoạn mô tả dài mấy dòng; ở 420px chữ bị nén sát đáy.
     Chỉ nới riêng trang này, không đụng biến dùng chung. */
  .about-banner__ph { height: clamp(400px, 66vh, 560px); }
  /* Đệm DƯỚI vẫn là --banner-base (§17 common.css hạ xuống 18–28px ở khổ này),
     KHÔNG nới riêng: chỗ cần cho đoạn mô tả dài đã lấy từ banner cao hơn ngay
     trên, không phải từ việc kê chữ lên khỏi mốc chung. Chỉ đệm TRÊN là số
     riêng — nó chừa chỗ cho header nổi + breadcrumb, việc khác hẳn. */
  .about-banner .page-banner__body {
    padding-block: calc(var(--header-h) + 52px) var(--banner-base);
  }

  /* ---- Canh giữa các cụm chữ (đồng bộ với common.css §16/720) ----
     Ở một cột, ba thẻ TẦM NHÌN / SỨ MỆNH / GIÁ TRỊ CỐT LÕI và các mốc thời gian
     dồn trái trong khung rộng trông như chữ bị đẩy lệch; canh giữa cho cân với
     tiêu đề section vốn đã ở giữa. */
  /* .about-infra__text / .about-eco__text đã canh giữa (chữ + khối) ngay ở rule
     gốc từ pass 30/07, không cần lặp lại ở breakpoint này. */
  .about-value, .about-tl { text-align: center; }

  /* Danh sách gạch đầu dòng KHÔNG canh giữa từng dòng: chấm tròn ::before neo ở
     `left: 0` của <li>, mà <li> rộng bằng cả thẻ — canh giữa chữ thì chấm nằm
     lại tít bên trái, cách chữ cả chục pixel. Thay vào đó giữ chữ canh trái rồi
     canh giữa CẢ KHỐI bằng width:max-content + margin auto: chấm luôn dính sát
     dòng đầu, mà cả cụm vẫn nằm giữa thẻ. */
  .about-value__list {
    /* `fit-content` chứ KHÔNG phải `max-content`: max-content lấy bề rộng của
       dòng dài nhất khi KHÔNG xuống dòng, mà `max-width: 100%` không cứu được —
       thẻ .about-value là ô grid mang `min-width: auto` nên chính nó nở theo
       danh sách, rồi 100% lại tính trên bề rộng vừa nở ra. Đo ở khổ 320px: thẻ
       phình tới 607px, trang tràn ngang 291px.
       `fit-content` = min(max-content, chỗ còn trống) nên vẫn ôm sát chữ khi
       ngắn, mà không bao giờ vượt khung. `min-width: 0` chặn nốt đường nở của
       ô grid — cùng cách đã dùng cho .about-partner và .footer__col. */
    width: fit-content; max-width: 100%;
    margin-inline: auto; text-align: left;
  }
  .about-value { min-width: 0; }
}
@media (max-width: 640px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); }
  .about-stats .stat:last-child { grid-column: 1 / -1; }
  .about-partners__grid { grid-template-columns: repeat(2, 1fr); }
  .about-partner:last-child { grid-column: 1 / -1; }
  /* Chiều cao riêng cho khổ điện thoại ĐÃ BỎ ở pass 30/07/2026: common.css §16
     hạ --h-page-banner xuống 60vh/560px từ 1024px trở xuống, ra 487px ở khổ
     375×812 — tức là CAO HƠN con số 420px mà rule này từng ép, nên đoạn mô tả
     dài của trang Giới thiệu càng thoáng chứ không chật thêm. */
}