/* ============================================================
   WiHub — pages/about.css
   Values extracted from src/Wihub-v1.1/src/about.html Desktop frame
   ============================================================ */

/* ── Local section spacing (v1.1: padding 120px 48px) ───── */

/* =========================================================
   1. Hero — Về WiHub
   v1.1: #Background_Image_1 padding 320px 48px 60px
         overlay linear-gradient(88deg, #17144db3 35.7%, #11054300 99.3%)
         image opacity:.5; #Highlight_Title_1 font 46px/130% w800 white
   ========================================================= */
.about-hero {
  position: relative;
  width: 100%;
  min-height: 460px;
  padding: 320px 0 60px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-brand-dark);
}
.about-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  z-index: 0;
}
.about-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(88deg, rgba(23, 20, 77, .7) 35.7%, rgba(17, 5, 67, 0) 99.3%);
  z-index: 1;
}
.about-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.about-hero__breadcrumb {
  display: inline-flex;
}
.about-hero__breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
  transition: opacity var(--transition-base);
  &:hover { opacity: .8; }
}
.about-hero__breadcrumb-icon {
  transform: rotate(180deg);
  color: var(--color-white);
}
.about-hero__title {
  color: var(--color-white);
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 130%;
  margin: 0;
}

@media (max-width: 991.98px) {
  .about-hero { padding: 220px 0 48px; min-height: 380px; }
}
@media (max-width: 575.98px) {
  .about-hero { padding: 160px 0 36px; min-height: 320px; }
}

/* =========================================================
   2. Vision — Tầm Nhìn
   v1.1: #_About_Vision_1 bg white, padding 120px 48px
         #Title_39 gradient(91.6deg, #6598ea 29.5%, #1b5bd2 70.7%)
         font 46px/130% w800
         #Description_25/26 color var(--Text-Secondary)=#4e517a 18px/160% w400
         #Divider_9 bg --Border-Divider-Border=#c8d2e1 height 1px
         #Image_Group_Desktop height 700px, border-radius 4px
   ========================================================= */
.about-vision {
  background-color: var(--color-white);
  padding: 120px 0;
  overflow: hidden;
}
.about-vision__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 450px;
}
.about-vision__title {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 130%;
  margin: 0;
}
.about-vision__title--blue {
  background-image: linear-gradient(91.6deg, #6598ea 29.5%, #1b5bd2 70.7%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  width: max-content;
  max-width: 100%;
}
.about-vision__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  margin: 0;
}
.about-vision__divider {
  margin: 0;
  border: 0;
  height: 1px;
  background-color: var(--color-border-divider);
  width: 100%;
  opacity: 1;
}
.about-vision__image {
  display: block;
  width: 100%;
  height: 700px;
  border-radius: 4px;
  overflow: hidden;
}
.about-vision__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

@media (max-width: 991.98px) {
  .about-vision { padding: 80px 0; }
  .about-vision__image { height: 420px; }
}
@media (max-width: 575.98px) {
  .about-vision { padding: 60px 0; }
  .about-vision__image { height: auto; }
  .about-vision__img { height: auto; aspect-ratio: 4/3; }
}

/* =========================================================
   3. Mission — Sứ Mệnh
   v1.1: #_About_Mission_1 bg image (dark farm at night), padding 120px 48px
         #Card_7 bg --Black-20=rgba(0,0,0,.2), backdrop-filter blur(25px)
                 border-radius 16px, padding 24px, max-width 450px
         #Title_40 gradient(91.5deg, #6597e9, #91b0eb)
         #Mission_description_1 color var(--White-80)=rgba(255,255,255,.8)
                 18px/160% w400
         #Commitment_item icon 24px, gap 15px
         #Commitment_text 16px/150% w500 white-80
   ========================================================= */
.about-mission {
  position: relative;
  background-image: url("../../images/content/about-mission.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 120px 0;
  overflow: hidden;
}
.about-mission__card {
  background-color: rgba(0, 0, 0, .2);
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 450px;
  margin-left: auto;
}
.about-mission__title {
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 130%;
  margin: 0;
  width: max-content;
  max-width: 100%;
}
.about-mission__title--blue {
  background-image: linear-gradient(91.5deg, #6597e9 29.5%, #91b0eb 65.7%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.about-mission__desc {
  color: var(--color-white-80);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  margin: 0;
}
.about-mission__divider {
  margin: 0;
  border: 0;
  height: 1px;
  width: 100%;
  background-color: var(--color-border-divider);
  opacity: .2;
}
.about-mission__commitment {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-mission__commitment-title {
  color: var(--color-white-80);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  margin: 0;
}
.about-mission__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.about-mission__item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--color-white-80);
  font-size: 16px;
  font-weight: 500;
  line-height: 150%;
}
.about-mission__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white-80);
  & svg {
    width: 19.5px;
    height: 19.5px;
  }
}

@media (max-width: 991.98px) {
  .about-mission { padding: 80px 0; }
  .about-mission__card { max-width: 100%; margin: 0; }
}
@media (max-width: 575.98px) {
  .about-mission { padding: 60px 0; }
}

/* =========================================================
   4. Core Value — Giá Trị Cốt Lõi
   v1.1: #_About_CoreValue_1 bg white, padding 120px 48px, row-gap 60px
         #Title_41 46px/130% w800 — "Giá Trị" #141240 + " Cốt Lõi" gradient(94.1deg,#6598ea,#1b5bd2)
         #Description_27 18px/160% w400 --Text-Secondary
         #Image_13 height 550px, border-radius 24px
         #Metric_Image_Section_5 bg white, padding 20px, border-radius 16px, gap 24px
         #Metric_Icon_7 size 50x50
         #Metric_Title_7 20px/150% w700 --Text-Main
         #Metric_Description_7 18px/160% w400 --Text-Draft-Secondary
   ========================================================= */
.about-corevalue {
  background-color: var(--color-white);
  padding: 120px 0;
  overflow: hidden;
}
.about-corevalue__header {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 40px;
}
.about-corevalue__title {
  flex: 1 1 0;
  min-width: 250px;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 130%;
  margin: 0;
}
.about-corevalue__title-main {
  color: var(--color-text-main);
}
.about-corevalue__title-accent {
  background-image: linear-gradient(94.1deg, #6598ea 29.5%, #1b5bd2 70.7%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.about-corevalue__desc {
  flex: 1 1 300px;
  min-width: 300px;
  max-width: 700px;
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  margin: 0;
}
.about-corevalue__image-wrap {
  width: 100%;
  height: 550px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 16px;
}
.about-corevalue__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-corevalue__metrics {
  margin-top: 0;
}

/* Metric card */
.metric-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  height: 100%;
}
.metric-card__icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.metric-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.metric-card__title {
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}
.metric-card__desc {
  color: var(--color-text-tertiary);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  margin: 0;
}

@media (max-width: 991.98px) {
  .about-corevalue { padding: 80px 0; }
  .about-corevalue__image-wrap { height: 380px; }
}
@media (max-width: 575.98px) {
  .about-corevalue { padding: 60px 0; }
  .about-corevalue__image-wrap { height: 220px; border-radius: 16px; }
  .metric-card__desc { font-size: 16px; }
}

/* =========================================================
   5. WiHub Ecosystems — Header
   v1.1: #_About_WiHubEcosystems_Header_1 bg --Section-Background-Blue=#f6f9fc
         padding 120px 48px 60px, row-gap 60px
         #Title_42 text-align right, 46px/130% w800
                   "Giá Trị cộng hưởng" #141240 + "từ hệ sinh thái WiHub" gradient(91.8deg,#6598ea,#1b5bd2)
   ========================================================= */
.about-ecosystem-header {
  background-color: var(--color-bg-blue);
  padding: 120px 0 60px;
}
.about-ecosystem-header__title {
  text-align: right;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 800;
  line-height: 130%;
  margin: 0;
  max-width: 1170px;
  margin-left: auto;
}
.about-ecosystem-header__title-main {
  color: var(--color-text-main);
}
.about-ecosystem-header__title-accent {
  background-image: linear-gradient(91.8deg, #6598ea 29.5%, #1b5bd2 70.7%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 991.98px) {
  .about-ecosystem-header { padding: 80px 0 40px; }
}
@media (max-width: 575.98px) {
  .about-ecosystem-header { padding: 60px 0 32px; }
  .about-ecosystem-header__title { text-align: left; }
}

/* =========================================================
   6. Ecosystem Section 1 — Đối với cộng đồng
   v1.1: #_About_WiHubEcosystems_Section1_1 bg image, padding 40px 48px
         #Small_container_1 bg #061b311a, backdrop blur(50px), border-radius 24px,
                            padding 16px, max-width 550px, gap 24px row, flex-row
         #Feature_card_3 bg #ffffffe6, backdrop blur(50px), border-radius 16px, padding 24px
         #Icon_container_12 size 80x80
         #Highlight_title_3 20px/150% w700 --Text-Main
         #Highlight_description_3 16px/150% w400 --Text-Draft-Secondary
   ========================================================= */
.about-ecosystem-s1 {
  position: relative;
  background-image: url("../../images/content/about-ecosystem-s1.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px 0;
  overflow: hidden;
}
.about-ecosystem-s1__panel {
  background-color: rgba(6, 27, 49, .1);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border-radius: 24px;
  padding: 16px;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.about-ecosystem-s1__title {
  color: var(--color-text-main);
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}

/* Feature card — Ecosystem S1 + reused */
.eco-feature-card {
  background-color: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}
.eco-feature-card__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.eco-feature-card__body {
  flex: 1 1 250px;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eco-feature-card__title {
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}
.eco-feature-card__desc {
  color: var(--color-text-tertiary);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

@media (max-width: 575.98px) {
  .about-ecosystem-s1__panel { max-width: 100%; }
}

/* =========================================================
   7. Ecosystem Section 2 — Đối với mạng lưới đối tác chuyên môn
   v1.1: #_About_WiHubEcosystems_Section2_1 bg white, padding 80px 48px
         #Title_43 26px/150% w700 --Text-Main
         #Description_28 18px/160% w400 --Text-Secondary
         #Image_Container_1 border-radius 16px, height 354px
         #Icon_23 border 1px --Border-Divider-Border, bg white, border-radius 40px,
                  shadow, size 40x40
         #Text_7 18px/140% w600 --Text-Main
         #Description_29 16px/150% w400 --Text-Secondary
         #Divider_11 bg --Border-Divider-Border 1px
   ========================================================= */
.about-ecosystem-s2 {
  background-color: var(--color-white);
  padding: 80px 0;
  overflow: hidden;
}
.about-ecosystem-s2__title {
  color: var(--color-text-main);
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  margin: 0 0 40px;
}
.about-ecosystem-s2__row {
  --bs-gutter-x: 48px;
}
.about-ecosystem-s2__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  margin: 0 0 24px;
}
.about-ecosystem-s2__image-wrap {
  border-radius: 16px;
  overflow: hidden;
  height: 354px;
}
.about-ecosystem-s2__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eco table */
.eco-table {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.eco-table__row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-divider);
}
.eco-table__row--last {
  border-bottom: 0;
  padding-bottom: 0;
}
.eco-table__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.eco-table__icon-circle {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid var(--color-border-divider);
  background-color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
  overflow: hidden;
  & img {
    width: 70%;
    height: 70%;
    object-fit: contain;
  }
}
.eco-table__title {
  color: var(--color-text-main);
  font-size: 18px;
  font-weight: 600;
  line-height: 140%;
}
.eco-table__desc {
  color: var(--color-text-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

@media (max-width: 991.98px) {
  .about-ecosystem-s2 { padding: 60px 0; }
  .about-ecosystem-s2__image-wrap { height: 260px; }
}
@media (max-width: 575.98px) {
  .about-ecosystem-s2 { padding: 48px 0; }
}

/* =========================================================
   8. Ecosystem Section 3 — Đối với đối tác trang trại
   v1.1: #_About_WiHubEcosystems_Section3_1 bg --Section-Background-Blue=#f6f9fc
         padding 80px 48px, row-gap 60px
         #Title_44 26px/150% w700 --Text-Main
         #Description_33 18px/160% w400 --Text-Secondary, max-width 700px
         #Image_19 border-radius 24px, height 646px
         #Icon_27/Feature_Card_5 padding 20px, border-radius 16px, row-gap 24px
         (no bg per v1.1 — Cards transparent on light blue)
   ========================================================= */
.about-ecosystem-s3 {
  background-color: var(--color-bg-blue);
  padding: 80px 0;
  overflow: hidden;
}
.about-ecosystem-s3__header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.about-ecosystem-s3__title {
  color: var(--color-text-main);
  font-size: 26px;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}
.about-ecosystem-s3__desc {
  color: var(--color-text-secondary);
  font-size: 18px;
  font-weight: 400;
  line-height: 160%;
  max-width: 700px;
  margin: 0;
}
.about-ecosystem-s3__image-wrap {
  width: 100%;
  height: 646px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 16px;
}
.about-ecosystem-s3__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Eco stat card */
.eco-stat-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
  border-radius: 16px;
  height: 100%;
}
.eco-stat-card__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.eco-stat-card__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eco-stat-card__title {
  color: var(--color-text-main);
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  margin: 0;
}
.eco-stat-card__desc {
  color: var(--color-text-secondary);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin: 0;
}

@media (max-width: 991.98px) {
  .about-ecosystem-s3 { padding: 60px 0; }
  .about-ecosystem-s3__image-wrap { height: 380px; }
}
@media (max-width: 575.98px) {
  .about-ecosystem-s3 { padding: 48px 0; }
  .about-ecosystem-s3__image-wrap { height: 240px; border-radius: 16px; }
}

/* =========================================================
   Shared utility: gradient title text helper
   ========================================================= */
.section-title-gradient {
  display: inline-block;
}


/* Contact section CSS → main.css (shared, 1 nguồn) */