/* ========================================================================
   THIRSTY FOX — ABOUT V2  (prefix: aboutv2 / av2)
   Layout BÌNH THƯỜNG: các section xếp dọc tự nhiên (flow), position:relative.
   Absolute chỉ dùng cho phần tử chồng lớp TRONG section (watermark, ảnh rải, sóng).
   Đơn vị vw theo base 1920 (đồng nhất app.css/app-v2.css live).
   Font: DM Sans (100/300/400/500) + Playfair italic. Màu brand #003AAE.
   ======================================================================== */

@font-face{font-family:'DM Sans';src:url('../font/DMSans-Thin.woff2') format('woff2'),url('../font/DMSans-Thin.ttf') format('truetype');font-weight:100;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('../font/DMSans-ExtraLight.woff2') format('woff2'),url('../font/DMSans-ExtraLight.ttf') format('truetype');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('https://media.thethirstyfox.com/2025/06/DMSans-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('https://media.thethirstyfox.com/2025/06/DMSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'DM Sans';src:url('https://media.thethirstyfox.com/2025/06/DMSans-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}

/* Lenis smooth scroll — CSS khuyến nghị (giống site live).
   Nếu live đã có sẵn các rule này thì trùng cũng không sao. */
html.lenis,html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}

/* reset margin mặc định của browser (body 8px) — chỉ cần cho DEMO cục bộ;
   trên live app.css đã có body{margin:0} nên trùng cũng không sao. */
html,body{margin:0;padding:0;}

.aboutv2 *,.aboutv2 *::before,.aboutv2 *::after{box-sizing:border-box;}
.aboutv2{
  --blue:#003AAE;
  --serif:"Playfair Display",Georgia,serif;
  --sans:"DM Sans",system-ui,sans-serif;
  --pad:2.39vw;                /* lề trang (page-padding-leftright live) */
  font-family:var(--sans) !important; color:#000; background:#fff;
  overflow-x:clip;
}
.aboutv2 img{display:block; max-width:100%;}

/* ---- MARQUEE (Why us / Founders) ---- */
.av2-mq{ width:100%; pointer-events:none; }
.av2-mq__track{ display:flex; width:max-content; white-space:nowrap; will-change:transform; }
.av2-mq__track span{ display:inline-block; line-height:1; font-family:var(--serif) !important; font-style:italic; }


/* ================== 1. HERO ================== */
.av2-hero{
  position:relative;
  width:100%;
  aspect-ratio:1920 / 691;     /* ảnh hero-banner.png 1920x691 */
  overflow:hidden;
  margin-top: 7vw;
}
/* ảnh hero-banner.png ĐÃ duotone xanh sẵn -> không cần filter/blend */
.av2-hero__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
/* lớp màu nền chèn TRÊN hình hero (DESKTOP): bg-herobanner.svg (gradient + noise) */
.av2-hero__overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url('../images/about/bg-herobanner.webp') center / cover no-repeat;
}
/* "Meet the Team": mép trái, nằm trong nửa dưới ảnh */
.av2-hero__title{
  position:absolute; left:-1.4%; bottom: -0.18em; margin:0;
  font-family:var(--sans) !important; font-weight:100;
  font-size:16.82vw; line-height:1; letter-spacing: -.32vw;
  color:#fff; white-space:nowrap;
  z-index:2;                         /* trên lớp overlay (z1) */
  /* chữ to (~323px) răng cưa do bị scale trong GPU layer chung (Lenis transform).
     -> đẩy title lên LAYER RIÊNG (translateZ + will-change) để render full-res.
     GIỮ weight 100 đúng design. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  transform:translateZ(0);
  will-change:transform;
}
.av2-hero__title em{ font-family:var(--serif) !important; font-style:italic; font-weight:400; }


/* ================== 2. ONE TEAM ================== */
/* Figma: ảnh trái y986..1601, text phải y1072.. ; section cao ~ 841px+padding */
.av2-oneteam{
  position:relative;
  /* lề trái = lề phải = 204px = 10.625vw (CÂN như Figma: ảnh x204, text hết x1716) */
  padding:4.4vw 10.625vw 3.6vw;
  display:grid;
  /* cột trái 741 / gap 184 / cột phải 587 (trên tổng 1512 giữa 2 lề) */
  grid-template-columns:741fr 587fr;
  column-gap:9.583vw;                /* 184/1920 */
  align-items:start;
  overflow:hidden;
}
/* "Why us?" full-width, chạy NGANG QUA cả 2 cột, nằm GIỮA khoảng trống
   heading->paragraph, và ĐÈ LÊN TRÊN ảnh trái (z-index cao nhất). */
.av2-oneteam__mq{
  position:absolute; left:0; top:25.5vw; transform:translateY(-50%);
  z-index:2;                         /* TRÊN ảnh trái (z1), DƯỚI text phải (z4) */
}
.av2-oneteam__mq .av2-mq__track span{
  font-family:var(--serif) !important; font-style:italic;
  font-size:15.625vw; letter-spacing:-.3125vw;   /* 300px, tracking -6px */
  color:rgba(0,58,174,.10);
}

/* khung ảnh trái = group Figma 741 x 842 (x204..945, y986..1828).
   Toạ độ % tính trong khung này: gốc x' = x_figma - 204 ; y' = y_figma - 986. */
.av2-oneteam__photos{
  position:relative;
  z-index:1;                         /* dưới watermark -> chữ "Why us?" đè lên ảnh */
  aspect-ratio:741 / 842;
      margin-top: 3vw;
}
.av2-ot-bag,.av2-ot-study,.av2-ot-box{
  position:absolute; margin:0; border-radius:1.56vw; overflow:hidden;
  box-shadow:0 1vw 3vw rgba(0,0,0,.14);
}
/* 3 ảnh đã crop sẵn đúng tỉ lệ -> object-fit cover bình thường, KHÔNG ghép crop */
.av2-ot-bag img,.av2-ot-study img,.av2-ot-box img{
  width:100%; height:100%; object-fit:cover;
}

/* HÌNH 1 — túi đỏ (z THẤP NHẤT, bị 2 hình sau đè). Figma x446 y986 w306.5 h452.8 */
.av2-ot-bag{ left:32.66%; top:0; width:41.36%; height:53.78%; z-index:1; }
/* HÌNH 2 — study (đè lên túi đỏ). x204 y1375 w306.5 h452.8 */
.av2-ot-study{ left:0; top:46.20%; width:41.36%; height:53.78%; z-index:2; }
/* HÌNH 3 — champagne (đè lên túi đỏ). x674 y1337 w271 h264.3 */
.av2-ot-box{ left:63.43%; top:41.69%; width:36.57%; height:31.39%; z-index:3; }

/* text canh TRÊN cùng (không center), đẩy xuống thêm 8vw (chỉ cột phải;
   cột trái ảnh giữ nguyên) -> tạo khoảng trống lớn cho "Why us?" */
.av2-oneteam__text{ position:relative; z-index:4; align-self:start; padding-top:8vw; }
.av2-oneteam__heading{
  margin:0 0 16.5vw; max-width:95%;     /* khoảng trống heading->paragraph (~220px) */
  font-family:var(--sans) !important; font-weight:400;                  /* DM Sans Regular */
  font-size:2.404vw; line-height:1.2; letter-spacing: -1.4px;  /* 50px, tracking -2px */
}
.av2-oneteam__body{ max-width:587px; max-width:31vw; }
.av2-oneteam__body p{
  font-family:var(--sans) !important; font-weight:400;                  /* DM Sans Regular */
  font-size:1.302vw; line-height:1.2; letter-spacing:-.052vw;  /* 25px, tracking -1px */
  margin:0 0 1.1vw;
}
.av2-oneteam__body p:last-child{ margin:0; }


/* ================== 3. CAROUSEL ================== */
/* cách top & bottom thêm 5vw (2.6 + 5 = 7.6vw mỗi đầu) */
.av2-carousel{ position:relative; padding:7.6vw 0; overflow:hidden; }
/* Swiper core tối thiểu (phòng khi live KHÔNG nạp swiper-bundle.css globally) */
.av2-carousel .swiper{ overflow:hidden; padding-left:var(--pad); position:relative; }
.av2-carousel .swiper-wrapper{
  display:flex; box-sizing:content-box; position:relative;
  transition-timing-function:linear!important; align-items:center;
}
.av2-carousel .swiper-slide{ flex-shrink:0; position:relative; }
.av2-slide{ width:auto; border-radius:.6vw; overflow:hidden; }
.av2-slide img{ height:100%; width:auto; object-fit:cover; }
.av2-slide--lg{ height:14.58vw; }   /* 280px */
.av2-slide--sm{ height:10.31vw; }   /* 198px */


/* ===== NỀN XANH CHUNG (bg-section.svg từ Figma) phủ FOUNDERS + HELP =====
   SVG = gradient có alpha (trắng -> #003AAE 0.7 -> trắng) + noise, đặt trên nền trắng.
   background-size 100% covers chiều rộng; gradient tự bắt đầu từ ~2/3 founders. */
.av2-bluewrap{ position:relative; background:#ffffff; }
/* nền bg-section.svg bắt đầu từ ~50% (GIỮA) section carousel.
   carousel cao ≈ 29.78vw (padding 2*7.6 + slide 14.58) -> 50% ≈ 14.9vw từ đỉnh wrapper. */
.av2-bluewrap::before{
  content:""; position:absolute; left:0; right:0;
  top:14.9vw; bottom:0; z-index:0; pointer-events:none;
  /* PNG/WebP raster -> noise KHÔNG bị bể khi scale (an toàn hơn SVG feTurbulence) */
  background:url('../images/about/bg-section.webp') top center / cover no-repeat;
}
.av2-bluewrap > *{ position:relative; z-index:1; }

/* ================== 4+5. FOX + FOUNDERS ================== */
/* con cáo: x767 y2696 w386 h280. Đặt absolute trong section founders, vắt qua
   mép trên box -> nửa dưới cáo bị box (z cao hơn) che. */
.av2-fox{
  position:absolute;
  left:39.95%;                 /* 767/1920 */
  top:6vw;                     /* cách carousel ~ Figma (carousel hết y2459, cáo y2696) */
  width:20.1%;                 /* 386px */
  z-index:1;                   /* DƯỚI box glass (z2) -> box che nửa dưới cáo */
  will-change:transform;
}
/* cũ (tilt ảnh) — giữ phòng khi cần */
.av2-fox__tilt{ transform-style:preserve-3d; perspective:900px; will-change:transform; }
.av2-fox__tilt img{ width:100%; }

/* khung 3D: tỉ lệ giống ảnh cáo cũ (386x280) -> canvas WebGL lấp đầy */
.av2-fox__3d{ position:relative; width:100%; aspect-ratio:386/280; }
.av2-fox__3d canvas{ width:100%; height:100%; display:block; }
/* ảnh fallback hiện cho tới khi 3D sẵn sàng, rồi ẩn */
.av2-fox__fallback{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.av2-fox__3d.is-3d-ready .av2-fox__fallback{ display:none; }

.av2-founders{
  position:relative;
  /* box rộng 1820px -> lề section = (1920-1820)/2 = 50px = 2.6vw mỗi bên */
  padding: 5vw 2.6vw 4vw;
  background:transparent;            /* nền do .av2-bluewrap lo (bg-section.svg) */
  overflow:hidden;
}
/* WRAPPER box: định kích thước; 3 layer con xếp chồng theo z-index */
.av2-founders__box{ position:relative; width:100%; }

/* LAYER 1 (dưới cùng) — box glass: nền + viền. fill 5% + blur 8px.
   Box bắt đầu cao hơn content (Figma y2863 vs text y3005) -> kéo lên trên. */
.av2-founders__glass{
  position:absolute; inset:-2.6vw 0 0;   /* nhô lên trên content ~ phần đầu box */
  z-index:1;
  border-radius:2.083vw;                 /* 40px */
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
/* viền GRADIENT DỌC trắng->#4C69A4 (pseudo-element + mask, không tô nền) */
.av2-founders__glass::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:linear-gradient(180deg, #ffffff 0%, #4C69A4 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}

/* LAYER 2 — "Founders" chạy ngang, GIỮA BOX theo chiều dọc, TRÊN box, DƯỚI content.
   Box (glass) nhô lên -2.6vw -> tâm box lệch lên 1.3vw so với tâm __box. */
.av2-founders__mq{ position:absolute; top:calc(50% - 1.3vw); left:0; transform:translateY(-50%); z-index:2; }
.av2-founders__mq .av2-mq__track span{
  font-size:15.625vw; letter-spacing:-.3125vw;   /* 300px, tracking -6px */
  color:rgba(0,58,174,.10);
}

/* LAYER 3 (trên cùng) — content: text + portraits */
.av2-founders__inner{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns:1fr auto;    /* text | portraits (canh phải) */
  align-items:center;
  padding:3.6vw 6.1vw 6.2vw;               /* padding nội dung trong box */
}
.av2-founders__heading{
  margin:0 0 4.1vw;   /* khoảng cách heading->paragraph ~79px theo Figma (y3113->y3192) */
  font-family:var(--sans) !important; font-weight:300;                  /* DM Sans Light */
  font-size:2.604vw; line-height:1.1; letter-spacing:-.052vw; color:var(--blue);  /* 50px */
}
.av2-founders__heading em{ font-family:var(--serif) !important; font-style:italic; font-weight:400; }
.av2-founders__body{ max-width:39vw; }
.av2-founders__body p{
  font-family:var(--sans) !important; font-weight:400;                  /* DM Sans Regular */
  font-size:1.302vw; line-height:1.2; letter-spacing:-.052vw; color:#000;   /* 25px, tracking -1px */
  margin:0 0 1.1vw;
}
.av2-founders__body p:last-child{ margin:0; }
/* 2 chân dung sát nhau, canh PHẢI cột; cách mép phải box theo Figma (~ padding box) */
.av2-founders__portraits{ display:flex; gap:.9vw; justify-content:flex-end; }
.av2-founders__portraits figure{
  margin:0; width:14.74vw; aspect-ratio:283/417;
  border-radius:.52vw; overflow:hidden;
  background:#6e6e6e;          /* nền xám như Figma -> lấp vùng trong suốt của ảnh founder 1 */
}
.av2-founders__portraits img{
  width:100%; height:100%;
  object-fit:cover; object-position:center bottom;   /* canh đáy như Figma */
}


/* ================== 6. HELP ================== */
.av2-help{
  position:relative;
  padding:5vw var(--pad) 8vw;
  text-align:center;
  overflow:hidden;
  background:transparent;            /* nền do .av2-bluewrap lo (bg-section.svg) */
}
/* 2 sóng = 2 file SVG KHÁC nhau (img-01 ≠ img-02), KHÔNG lật.
   Figma: img-01 x1308 y3323 w1457 ; img-02 x-811 y4096 w1457 (đều w=75.9vw). */
.av2-help__wave{ position:absolute;width: 33%;height:auto; z-index:9; pointer-events:none; will-change:transform; }
/* img-01: phải, hơi trên (x1308=68.1%) */
.av2-help__wave--r{ right: -10px; top: -23%; }
/* img-02: trái, thấp hơn (x-811=-42.2%), KHÔNG scaleX */
.av2-help__wave--l{ left:0; top:34%; }
.av2-help__kicker{
  position:relative; z-index:1; margin:0 0 2.4vw;
  font-family:var(--sans) !important; font-weight:300;                  /* DM Sans Light */
  font-size:2.604vw; line-height:1.1; letter-spacing:-.052vw; color:var(--blue);  /* 50px, tracking -1px */
}
.av2-help__block{ position:relative; z-index:1; margin-bottom:1.4vw; }
.av2-help__word{
  margin:0;
  font-family:var(--serif) !important; font-style:italic; font-weight:400;
  font-size:13.02vw; line-height:1; letter-spacing:-.26vw; color:#fff;  /* 250px */
  white-space:nowrap;
}
.av2-help__desc{
  margin:.5vw auto 0; max-width:32.45vw;
  font-family:var(--sans) !important; font-weight:300;                  /* DM Sans Light */
  font-size:1.5625vw; line-height:1.2; letter-spacing:-.0625vw; color:#000;  /* 30px, tracking -1.2px */
  margin-left: auto !important;
  margin-right: auto !important;
}
/* desc của Refresh (item 2) & Go global (item 3) cách chữ thêm 3vw (desktop) */
.av2-help__block:nth-of-type(2) .av2-help__desc,
.av2-help__block:nth-of-type(3) .av2-help__desc{ margin-top:2vw; }


/* ================== 7. SERVICES ================== */
.av2-services{
  position:relative;
  width:100%;
  aspect-ratio:1920 / 1007;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:7%;
  /* overflow VISIBLE -> pill "Our Services" vắt lên trên mép panel */
  overflow:visible; color:#fff;
  background-color: #000;
  border-radius: 2.1vw 2.1vw 0 0;
}
/* bg + scrim bo góc trên + tự clip ảnh (vì section đã overflow visible) */
.av2-services__bg{ position:absolute; inset:0; overflow:hidden; border-radius:2.1vw 2.1vw 0 0; }
.av2-services__bg .av2-bg-layer{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .45s ease;
  will-change:opacity;
}
.av2-services__bg .av2-bg-layer.is-active{ opacity:1; }
.av2-services__scrim{ position:absolute; inset:0; border-radius:2.1vw 2.1vw 0 0; background:rgba(0,0,0,.16); }
.av2-services__inner{
  position:relative; z-index:1; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* pill VẮT QUA mép trên panel: đặt absolute ở mép trên, dịch lên nửa pill
   (Figma: pill y5145, panel y5189 -> pill nhô lên ~44px = nửa h88) */
.av2-services__title{
  position:absolute; left:50%; top:0;
  transform:translate(-50%,-50%);    /* nửa trên pill ở help, nửa dưới trong panel */
  z-index:2;
  margin:0; padding:.18em 1.1em;
  border-radius:999px;
  /* đúng SVG pill (node 1235:750): fill trắng + viền GRADIENT DỌC trắng->#4C69A4 */
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(180deg,#ffffff 0%,#4C69A4 100%) border-box;
  font-family:var(--serif) !important; font-style:italic; font-weight:400;
  font-size:2.604vw; color:var(--blue);   /* 50px, tracking -1px */
  white-space:nowrap;
      letter-spacing: -2%;
    line-height: 150%;
}
.av2-services__list{ list-style:none; margin:0; padding:0; margin-top: 1vw;}
/* Figma: pill cao 117px, khoảng cách dòng (top->top) 94px -> CHỒNG nhau ~23px.
   margin-top âm 23px = -1.2vw cho mọi li trừ li đầu. */
.av2-services__list li{ line-height:1; }
.av2-services__list li + li{ margin-top:-1.2vw; }
.av2-services__list a{
  display:inline-block; text-decoration:none !important;
  font-family:var(--sans) !important; font-weight:300;                       /* DM Sans ExtraLight (giữa 100 và 300) */
  font-size:4.291vw; line-height:1; letter-spacing:2px; color:#fff;   /* 82.38px, tracking -1.65px */
}
/* DESKTOP: <br> trong span service ẩn -> còn space giữa 2 chữ (wrap tự nhiên).
   MOBILE: hiện -> xuống dòng (xem media query). */
.av2-br-m{ display:none; }
/* pill glass theo SVG Figma (node 1304:5) — GIỐNG box founders:
   fill rgba(255,255,255,0.05) + blur 18.31px + viền GRADIENT DỌC trắng->#4C69A4 */
.av2-services__list a span{
  position:relative;
  display:inline-block; padding:.91vw 2.5vw; border-radius:999px;
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(18.31px); backdrop-filter:blur(18.31px);
  transition:background-color .3s,color .3s,box-shadow .3s;
}
/* viền gradient dọc trắng->#4C69A4 (pseudo + mask, không tô nền) */
.av2-services__list a span::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:inherit; padding:1px;
  background:linear-gradient(180deg,#ffffff 0%,#4C69A4 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
}
.av2-services__list a{ position:relative; }   /* để z-index hover hoạt động */
/* .av2-services__list:hover a{ color:rgba(255,255,255,.5); } */
/* dòng hover: chữ XANH, pill nền TRẮNG đặc, NỔI LÊN TRƯỚC (vì pill chồng nhau) */
.av2-services__list:hover a:hover,
.av2-services__list a:focus-visible{ color:var(--blue); z-index:2; }
.av2-services__list a:hover span,
.av2-services__list a:focus-visible span{
  background:#fff; box-shadow:0 .5vw 1.6vw rgba(0,0,0,.25);
}
/* hover: viền gradient đổi sang trắng đặc (pill trắng sạch) */
.av2-services__list a:hover span::before,
.av2-services__list a:focus-visible span::before{
  background:#fff;
}


/* ================================================================== */
/* MOBILE (<=1023px)                                                  */
/* ================================================================== */
@media (max-width:1023px){
  .aboutv2{ --pad:5.12vw; }

  /* ---- 1. HERO: ảnh portrait cao, "Meet the Team" tràn nhiều dòng ---- */
  .av2-hero{ aspect-ratio:3/4; }
  /* mobile: ảnh hero-banner-mobile.png đã duotone sẵn */
  .av2-hero{ aspect-ratio:430/354; background:transparent; margin-top: 16vw;}
  .av2-hero__img{ object-fit:cover; object-position:center; filter:none; mix-blend-mode:normal; }
  /* lớp màu nền chèn trên hình hero (MOBILE) = gradient CSS bạn cấp (0deg = dưới lên) */
  .av2-hero__overlay{
    display:block;
    /* background:linear-gradient(0deg,
      rgba(255,255,255,0.17) 27.8%,
      rgba(0,58,174,0.70) 84.98%,
      rgba(255,255,255,0.00) 84.99%); */
      background: url(../images/about/bg-herobanner-mobile.webp) center / cover no-repeat;
  }
  /* "Meet the Team" canh CHÍNH GIỮA hero (ngang + dọc) như mobile design */
  .av2-hero__title{
    left:4%; right:4%; top:4%; bottom:auto;
    /* transform:translateY(-50%); */
    text-align:center;
    font-size:30vw; line-height:90%; letter-spacing:-.6vw;   /* vừa hero ngang 430/354 */
    white-space:normal;                /* xuống dòng: Meet / the / Team */
  }

  /* ---- 2. ONE TEAM: 1 cột -> ảnh (chồng) trên, text dưới ---- */
  .av2-oneteam{
    display:block;                     /* bỏ grid 2 cột */
    padding:8vw var(--pad);
  }
  /* cụm ảnh FULL-BLEED (huỷ lề section) để study sát mép trái, box tràn mép phải */
  .av2-oneteam__photos{
    width:100vw; margin-left:calc(-1 * var(--pad));
    aspect-ratio:390/470; margin-bottom:8vw;
    margin-top: 5vw;
    display: none;
  }
  /* túi đỏ: trên, hơi phải-giữa */
  .av2-ot-bag, .av2-ot-study, .av2-ot-box {
    border-radius: 7.56vw;
  }
  .av2-ot-bag{ left: 27%;
        top: 0;
        width: 49%;
        height: 60%; }
  /* study: SÁT MÉP TRÁI */
  .av2-ot-study{ left: -6px;
        top: 50%;
        width: 42%;
        height: auto; }
  /* champagne: TRÀN ÂM MÉP PHẢI 1 chút */
  .av2-ot-box{ left:auto; right:-4%; top:46%; width:42%; height:38%; }
  /* watermark "Why us?" nằm sau text (giữa body) */
  .av2-oneteam__mq{ top:auto; bottom:21%; transform:none; }
  .av2-oneteam__mq .av2-mq__track span{ font-size:40vw; }
  .av2-oneteam__text{ padding-top:0; }
  .av2-oneteam__heading{ margin:0 0 6vw; max-width:100%; font-size:9vw; margin-top: 5vw;/*old: 15vw*/}
  .av2-oneteam__body{ max-width:100%; }
  .av2-oneteam__body p{ font-size:5.4vw; margin-bottom:5vw; }

  /* ---- 3. CAROUSEL ---- */
  .av2-slide--lg{ height:50vw; } .av2-slide--sm{ height:36vw; }
  
  /* nền xanh bắt đầu sớm hơn trên mobile (carousel thấp hơn) */
  .av2-bluewrap::before{ top: 0vw; }

  /* ---- 4+5. FOX + FOUNDERS: box dọc, portraits 2 ảnh 1 hàng dưới ---- */
  .av2-founders{ padding:18vw var(--pad) 10vw; padding-top: 5vw;}   /* box bắt đầu ~18vw từ section top */
  /* cáo CENTER ở ĐẦU section; box (top ~18vw - inset 6vw = 12vw) che nửa dưới cáo */
  .av2-fox{
    left:24%; right:auto;
    top:-5vw; width:46%; z-index:1;          /* nhô lên cao hơn khi chưa scroll */
    padding-top: 34vw;
  }
  .av2-founders__glass{ inset:-6vw 0 0; border-radius: 8.083vw;}    /* box nhô lên 6vw -> ôm nửa dưới cáo */
  .av2-founders__mq{ top:50%; }
  .av2-founders__mq .av2-mq__track span{ font-size:40vw; }
  .av2-founders__inner{ display:block; padding:8vw 7vw; }   /* bỏ grid -> dọc */
  .av2-founders__heading{ font-size:8.5vw; margin:0 0 6vw; }
  .av2-founders__body{ max-width:100%; }
  .av2-founders__body p{ font-size:5vw; margin-bottom:5vw; }
  .av2-founders__portraits{ justify-content:flex-start; gap:4vw; margin-top:2vw; padding-top: 9vw;
        padding-bottom: 9vw;}
  /* border-radius desktop .52vw ~ 2px trên mobile (gần như ko thấy) -> tăng lên */
  .av2-founders__portraits figure{ width:42vw; border-radius:2.6vw; }
  .av2-founders__glass{ inset:-6vw 0 0; }
  .av2-founders__box{margin-top:6vw} /*old 34*/

  /* ---- 6. HELP: chữ to căn giữa, desc dưới ---- */
  .av2-help{ padding:10vw var(--pad) 12vw; padding-top: 5vw;}
  .av2-help__kicker{ font-size:8vw; margin:0 0 6vw; }
  .av2-help__word{ font-size:24vw; letter-spacing: -.36vw;}
  .av2-help__desc{ font-size:5.2vw; max-width:90%; margin:2vw auto 10vw; }
  .av2-help__block{ margin-bottom:0; }
  .av2-help__wave{ width:23vw; }
  .av2-help__wave--r{ right: -17px;left: auto;top: -10%;}
  .av2-help__wave--l{ left:0; top:44%; }
  .av2-help__block:nth-of-type(2) .av2-help__desc, .av2-help__block:nth-of-type(3) .av2-help__desc {
    margin-top: 5vw;
}
  /* ---- 7. SERVICES: panel ôm nội dung, list chồng (chữ wrap 2 dòng) ---- */
  .av2-services{ aspect-ratio:auto; min-height:0; padding-top:0; display:block;background-color: unset; }
  .av2-services__inner{
    position:relative; padding:26vw 0 22vw;
    display:flex; flex-direction:column; align-items:center;
  }
  /* bg + scrim BO GÓC BẰNG NHAU -> scrim không lú xám ra góc */
  .av2-services__bg,
  .av2-services__scrim{ border-radius:14.1vw 14.1vw 0 0; }
  .av2-services__title{ font-size:7vw; }
  .av2-services__list{ width:100%; }
  .av2-services__list li{ text-align:center; }
  .av2-services__list a{ font-size:7vw; line-height:1.02; white-space:normal; text-align:center; letter-spacing: 1px;}
  /* MOBILE: hiện <br> -> chữ xuống dòng đúng chỗ */
  .av2-br-m{ display:inline; }
  .av2-services__list a span{ padding:2.2vw 7vw; }
  .av2-services__list li + li{ margin-top:-1.5vw; }
  .av2-services__list li:last-child{ padding-bottom:9vw; }
  .av2-bluewrap::before {
    background: url(../images/about/bg-section-mobile.webp) top center / cover no-repeat;
  }
}

@media (prefers-reduced-motion:reduce){
  .av2-mq__track{ transform:none!important; }
  .av2-services__bg{ transition:opacity .3s; transform:none; }
}


/* ================================================================== */
/* OVERRIDE FONT — thắng "Font Fix" của app-v2.css (h1..h6 ép Playfair)*/
/* Specificity cao (.aboutv2 .xxx) + !important -> luôn thắng h1..h6.  */
/* ================================================================== */
.aboutv2 .av2-hero__title{ font-family:var(--sans) !important; font-weight:100 !important; }
.aboutv2 .av2-hero__title em{ font-family:var(--serif) !important; font-weight:400 !important; }
.aboutv2 .av2-oneteam__heading{ font-family:var(--sans) !important; font-weight:400 !important; }
.aboutv2 .av2-founders__heading{ font-family:var(--sans) !important; font-weight:300 !important; }
.aboutv2 .av2-founders__heading em{ font-family:var(--serif) !important; font-weight:400 !important; }
.aboutv2 .av2-help__kicker{ font-family:var(--sans) !important; font-weight:500 !important; }
.aboutv2 .av2-help__word{ font-family:var(--serif) !important; font-weight:400 !important; }
.aboutv2 .av2-services__title{ font-family:var(--serif) !important; font-weight:400 !important; }
footer{margin-top:-43px}