/* ===========================================================================
   NAL 会社概要 (About.html) — redesign 2026-09-27
   Hero A (masthead + marquee anh) + thanh muc luc dinh + 4 muc 01–04.
   Nguon thiet ke: artboard Main.dc.html (1440) / Mobile.dc.html (390), style
   inline o do duoc doi thanh class o day.

   VI SAO FILE RIENG: home-prototype.css dung chung cho Home va 27 trang khac;
   sua o do la dung vao Home. File nay CHI them class moi tien to "ab-", chi
   DUNG lai .wrap va bien CSS (--navy, --blue, --line, --hdr-h...) cua
   home-prototype.css, KHONG dinh nghia lai class dung chung (.hdr*, .ftr*,
   .cta-band*, .btn, .sec, .h2...). Phai nap SAU home-prototype.css.

   Bo cuc: >=1024 = artboard Desktop · 768–1023 = trung gian · <=767 = artboard
   Mobile. Viet desktop truoc roi ha dan bang max-width (giong home-prototype).
   =========================================================================== */

/* Vung bi che o dau man = header dinh + thanh muc luc dinh. Khai o html (khong
   phai .ab-main) vi scroll-padding-top phai dat tren html moi co tac dung cho
   cuon cua trang. File nay chi nap o About.html nen rule html khong lan sang Home.
   VI SAO scroll-padding chu khong chi scroll-margin: scroll-margin chi dung khi
   nhay toi anchor; con khi Tab/Shift+Tab, Chrome chi cuon neu phan tu nam NGOAI
   viewport -> link nam o 0–132px (duoi 2 thanh dinh) bi che kin, mat vong focus
   (WCAG 2.4.11). scroll-padding bao cho trinh duyet vung nay khong "nhin thay". */
html {
  /* Thanh muc luc = .lnav dung chung voi Home (home-prototype.css), cao
     --lnav-h = 41px o MOI kho — khong con bien rieng --ab-toc-h.
     Cho phu thuoc duy nhat con lai: top cua cot dinh 03 (.ab-culture__head). */
  scroll-padding-top: calc(var(--hdr-h) + var(--lnav-h));
}
.ab-main {
  /* khoang ho giua mep duoi thanh muc luc va cot tieu de 03 khi dinh. */
  --ab-stick-gap: 18px;
  --ab-jp: 'Noto Sans JP', sans-serif;
}

/* Reset nhe trong pham vi trang. :where() de specificity = 0 (+ .ab-main),
   moi rule class ben duoi deu thang ma khong can !important. */
.ab-main :where(h1, h2, h3, h4, p, dl, dt, dd, figure, ul, ol) { margin: 0; padding: 0; }

.ab-num    { font-variant-numeric: tabular-nums; }
.ab-nowrap { white-space: nowrap; }
.ab-pretty { text-wrap: pretty; }

/* Focus ro rang cho moi link/nut trong trang (header/footer da co style rieng). */
.ab-main :is(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* link gach chan dung trong bang + the エコシステム */
.ab-ulink { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; transition: color var(--dur-3) var(--ease-soft); }
.ab-ulink:hover { color: var(--blue); }

/* =========================================================================
   #intro — HERO A
   ========================================================================= */
.ab-hero { padding-bottom: 48px; }

.ab-bc { padding-top: 22px; }
.ab-bc__list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; list-style: none; font: 400 14px/20px var(--ab-jp); color: var(--muted); }
.ab-bc__item { display: flex; }
/* tap target 44: "ホーム" 14px chi rong 42 -> dem ngang 4px (= 50px) o MOI be
   rong (768–1023 la may tinh bang cam ung); margin-left -4 de chu van thang mep .wrap */
.ab-bc__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-left: -4px; color: var(--muted); text-decoration: none; }
.ab-bc__link:hover { color: var(--blue); }
.ab-bc__here { color: var(--ink); }

.ab-hero__eyebrow { margin-top: 48px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.24em; color: var(--blue); }

/* H1 co y lon — chu la visual chinh cua Hero A, khong co anh hero. Tran ha
   96 -> 72px (Phong chot 28/9: 96 gap hon 2 lan H1 trang chu, choi mat).
   Giu nguyen he so 6.7vw nen kho 320–1074 khong doi, chi cat phan tren.
   clamp theo vw de dong 2 (nowrap) KHONG tran o 1024/768. */
.ab-hero__h1 {
  margin-top: 20px;
  font-size: clamp(40px, 6.7vw, 72px);
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0.02em;
  font-feature-settings: 'palt';
  color: var(--navy);
}
.ab-hero__l { display: block; }
.ab-hero__l--2 { white-space: nowrap; }
.ab-amp { color: var(--blue); }

/* duong ke navy + lead (6 cot trai) + 3 du kien (5 cot phai, bat dau cot 8) */
.ab-hero__meta {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--navy);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.ab-hero__lead { grid-column: 1 / span 6; font: 400 16px/32px var(--ab-jp); letter-spacing: 0.02em; text-wrap: pretty; color: var(--muted); }
/* gap co gian: o 1024 cot phai chi ~386px ma 3 du kien + 2 gap 32 = ~390px
   -> tran 4px. Ha gap xuong 20px o kho hep, 1440 van dung 32 nhu artboard. */
.ab-facts { grid-column: 8 / span 5; display: flex; justify-content: space-between; gap: clamp(20px, 2.2vw, 32px); }
.ab-facts__item { display: flex; flex-direction: column; gap: 6px; }
.ab-facts dt { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.ab-facts dd { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; color: var(--navy); }

/* =========================================================================
   MARQUEE anh — tran vien, chay ngang vo han
   Vong lap khop nho: track = 2 bo anh GIONG HET nhau, chay translateX(0 -> -50%)
   = dung chieu dai 1 bo. Khoang cach giua anh PHAI la margin-right tren tung o
   (khong dung gap): gap chi nam GIUA cac o nen bo 1 ngan hon bo 2 dung 1 gap
   -> -50% lech 8px, moi vong giat mot cai.
   ========================================================================= */
.ab-mq {
  /* Only the HEIGHT is fixed; each photo keeps its own ratio so widths vary
     453-676px on their own. That is where the rhythm comes from now - all 12
     source photos are landscape, so alternating portrait cells would mean
     cropping faces. */
  --ab-mq-h: 380px;
  --ab-mq-gap: 16px;
  /* One set is 6535px wide at this height; 142s keeps the old ~46px/s, slow
     enough to actually look at a photo without making anyone dizzy. */
  --ab-mq-dur: 142s;
  margin-top: 64px;
}
/* overflow:hidden o khung nay la thu chan cuon ngang ca trang (track rong ~10.000px) */
.ab-mq__view { overflow: hidden; width: 100%; }
.ab-mq__track { display: flex; width: max-content; }
/* Chi chay khi script da gan .is-ready: nut tam dung chi hien khi co JS, nen
   khong JS ma van chay thi khong co cach dung bang ban phim/cam ung (WCAG 2.2.2)
   -> khong JS = anh dung yen. Boc trong no-preference = reduced-motion tu khong chay. */
@media (prefers-reduced-motion: no-preference) {
  .ab-mq.is-ready .ab-mq__track { animation: ab-mq var(--ab-mq-dur) linear infinite; will-change: transform; }
}
.ab-mq__set { display: flex; flex: 0 0 auto; }
.ab-mq__img {
  flex: 0 0 auto;
  display: block;
  width: auto;              /* intrinsic ratio from the width/height attributes */
  height: var(--ab-mq-h);
  max-width: none;          /* huy img{max-width:100%} chung: % trong track max-content la vong lap kich thuoc */
  margin-right: var(--ab-mq-gap);
  background: var(--surface-2);   /* o cho anh lazy chua tai: xam nhat thay vi lo trang */
}

@keyframes ab-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* CHI dung bang nut (WCAG 2.2.2). Da bo dung-khi-re-chuot 28/9 cho khop Home
   (Home go 27/9, §4i): bang dung dot ngot luc luot chuot qua doc ra nhu loi.
   Specificity PHAI cao hon rule animation o tren (0,3,0): shorthand animation
   dat lai play-state = running, bang specificity thi thu tu nguon quyet dinh. */
.ab-mq.is-ready.is-paused .ab-mq__track { animation-play-state: paused; }

.ab-mq__ctrl { display: flex; justify-content: flex-end; padding-top: 12px; }
.ab-mq__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  transition: background var(--dur-3) var(--ease-soft), color var(--dur-3) var(--ease-soft);
}
/* display:inline-flex o tren de len [hidden] cua trinh duyet -> phai tra lai.
   Nut an khi chua co JS (bam khong co tac dung) va khi reduced-motion. */
.ab-mq__btn[hidden] { display: none; }
.ab-mq__btn:hover { background: var(--navy); color: var(--white); }
.ab-mq__ico { display: block; }
.ab-mq__ico--play,
.ab-mq.is-paused .ab-mq__ico--pause { display: none; }
.ab-mq.is-paused .ab-mq__ico--play { display: block; }

/* reduced-motion: KHONG chay. Thay vao do an bo ban sao va cho cuon ngang
   TRONG khung (script gan tabindex=0 de cuon duoc bang ban phim) -> van xem
   duoc du 10 anh, trang van khong cuon ngang. */
@media (prefers-reduced-motion: reduce) {
  .ab-mq__set[aria-hidden="true"] { display: none; }
  .ab-mq__view { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
}
/* KHONG JS = khong co .is-ready = bang dung yen. Truoc 28/9 khung van
   overflow:hidden nen chi thay ~3,5 anh dau, 7 anh con lai khong cach nao toi.
   Dung dung loi thoat nhu reduced-motion: an ban nhan doi + cho keo ngang. */
.ab-mq:not(.is-ready) .ab-mq__set[aria-hidden="true"] { display: none; }
.ab-mq:not(.is-ready) .ab-mq__view { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* khung cuon (chi focus duoc khi reduced-motion) tran vien: vong mac dinh cua
   trinh duyet (auto 1px) nam sat/ngoai mep man -> gan nhu vo hinh. Offset am
   de vong nam TRONG khung. */
.ab-mq__view:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }

/* THANH MUC LUC TRONG TRANG: da go het rule .ab-toc (28/9) — trang dung chung
   .lnav voi Home, style nam o home-prototype.css. */

/* =========================================================================
   SECTION CHUNG 01–04
   ========================================================================= */
/* scroll-margin-top 0: phan bu header + muc luc da nam o html{scroll-padding-top};
   [id]{scroll-margin-top} chung cua home-prototype.css (tru header) se CONG
   THEM len do -> phai ha ve 0 trong trang (.ab-main [id] specificity cao hon).
   KHONG cong them khoang ho (artboard ghi 150 = +18): #profile nam sat duoi
   thanh muc luc, +18 thi khi bam 01 thanh muc luc dung o vi tri thuong, cach
   header 18px, chua dinh -> hero lo 1 dai, scrollspy khong sang. Dau section da
   co padding-top 60/48 nen chu khong dinh sat thanh. */
.ab-main [id] { scroll-margin-top: 0; }
.ab-sec { padding: 60px 0; }
.ab-sec--tint { background: var(--surface); border-top: 1px solid var(--line); }
.ab-sec--line { border-top: 1px solid var(--line); }
.ab-sec--last { padding-bottom: 98px; }   /* muc cuoi, ngay truoc CTA navy: can tho hon */

/* "01 — PROFILE ／ 会社概要": so + gach + nhan. Phan EN aria-hidden (trinh doc
   man hinh chi doc nhan tieng Nhat), an han o mobile theo artboard. */
.ab-kicker { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.24em; color: var(--blue); }
/* so + gach KHONG co lai: o cot tieu de 03 (304px o 1024) nhan dai phai xuong
   dong, neu khong chan thi overflow-wrap:anywhere cua body cat "0|3". */
.ab-kicker__no { flex: 0 0 auto; white-space: nowrap; color: var(--navy); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.ab-kicker__rule { flex: 0 0 24px; width: 24px; height: 1px; background: var(--navy); }
.ab-h2 {
  margin-top: 14px;
  font-size: clamp(23px, 2.6vw, 34px);   /* cung thang voi .h2 cua Home */
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-feature-settings: 'palt';
  color: var(--navy);
}

/* =========================================================================
   01 会社概要 — bang 8 dong ‖ cot phai 420
   ========================================================================= */
.ab-profile { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 56px; align-items: start; }

.ab-dl { border-top: 2px solid var(--navy); }
/* cot nhan co gian 140→200: o 1024 bang chi con ~484px, nhan 200 lam cot noi dung qua hep */
.ab-dl__row { display: grid; grid-template-columns: clamp(140px, 14vw, 200px) minmax(0, 1fr); border-bottom: 1px solid var(--line-strong); }
.ab-dl dt { padding: 20px 24px 20px 0; font-size: 14px; line-height: 28.8px; font-weight: 700; letter-spacing: 0.06em; color: var(--navy); }
.ab-dl dd { padding: 20px 0; font: 400 16px/28.8px var(--ab-jp); letter-spacing: 0.02em; color: var(--ink); }
/* dong 電話: link cao 44 (tap target) + dem 12 = 68px, bang dong thuong 68.8 */
.ab-dl .ab-dl__tel { padding: 12px 0; display: flex; align-items: center; }
/* ten tieng Anh phap nhan: dong phu duoi 会社名 */
.ab-dl__en { display: block; margin-top: 2px; font-size: 14px; line-height: 24px; letter-spacing: 0.04em; color: var(--muted); }
.ab-dl__tel a { display: inline-flex; align-items: center; min-height: 44px; }

.ab-biz { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ab-biz li { display: flex; gap: 12px; align-items: flex-start; }
/* cham vuong 6px, margin-top 11 = canh giua dong 28.8px */
.ab-biz__dot { flex: 0 0 6px; height: 6px; margin-top: 11px; background: var(--blue); }

/* No aspect-ratio and no object-fit on purpose: the photo is the whole company
   in one wide row (1200x630). Forcing it into a 4:3 box would crop ~30% of the
   width, i.e. cut people off both ends - the one thing a group photo must not do. */
.ab-aside__fig img { width: 100%; height: auto; }
.ab-access { margin-top: 40px; }
.ab-access__label { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.24em; color: var(--blue); }
.ab-access__h3 { margin-top: 10px; font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: 0.04em; font-feature-settings: 'palt'; color: var(--navy); }
/* ban do that (iframe Google Maps). Nen xam nhat = o cho khi iframe lazy chua tai. */
.ab-map { margin-top: 16px; height: 240px; background: var(--surface-2); border: 1px solid var(--line-strong); overflow: hidden; }
.ab-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.ab-btn-o {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background var(--dur-3) var(--ease-soft), color var(--dur-3) var(--ease-soft);
}
.ab-btn-o:hover { background: var(--navy); color: var(--white); }
.ab-ico { flex: 0 0 auto; display: block; }

/* =========================================================================
   02 役員一覧 — the ngang: anh 4:5 ‖ chuc danh + ten
   ========================================================================= */
.ab-leaders { margin-top: 32px; }
.ab-group + .ab-group { margin-top: 60px; }
.ab-group__head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.ab-group__h3 { font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing: 0.04em; font-feature-settings: 'palt'; color: var(--navy); white-space: nowrap; }
.ab-group__rule { flex: 1 1 auto; height: 1px; background: var(--line-strong); }

.ab-group__list { list-style: none; display: grid; gap: 24px; }
/* be ngang anh co gian (200/144 o 1440, ty le 1,4 — truoc la 240/144 = 1,7 nen
   取締役員 to hon han 執行役員): o 1024 giu 200 thi ten "Le Hoang Nam" 26px con
   ~170px -> xuong dong. 執行役員 4 nguoi xep luoi 2x2 cung 2 cot voi 取締役員
   (hai nhom thang mep cot). */
.ab-group__list--board { grid-template-columns: repeat(2, minmax(0, 1fr)); --ab-fig-w: clamp(150px, 13.9vw, 200px); }
.ab-group__list--exec  { grid-template-columns: repeat(2, minmax(0, 1fr)); --ab-fig-w: clamp(112px, 10vw, 144px); }

.ab-leader { display: grid; grid-template-columns: var(--ab-fig-w) minmax(0, 1fr); background: var(--white); border: 1px solid var(--line); }
/* O anh VUONG, hien tron anh (khong cat): 6 anh bod-*.webp cat lai 13/10 tu anh goc
   NAL-picture/BOD theo cung 1 luat — vuong 700, dau rong ~35% canh, dinh toc 12%,
   tam ngang = tam THAN o tam vai -> du 2 vai. Truoc day o 4:5 cat 20% be ngang anh
   vuong (moi nguoi mat 1 ben vai tuy --ab-focus). Thay anh moi: cat dung luat tren,
   khong chinh bang --ab-focus. align-self:start: the cao hon anh (chu 3 dong o mobile)
   thi anh van vuong, khong bi keo dai. */
.ab-leader__fig { aspect-ratio: 1 / 1; align-self: start; overflow: hidden; background: var(--white); }
.ab-leader__fig img { width: 100%; height: 100%; object-fit: cover; }
/* ten nam DUOI chuc danh ve mat thi giac, nhung h4 dung truoc trong DOM
   (order:-1 cho chuc danh) -> trinh doc man hinh gap ten nguoi truoc. */
.ab-leader__body { display: flex; flex-direction: column; justify-content: flex-end; padding: 32px 28px; }
.ab-leader__name { margin-top: 8px; font-size: clamp(22px, 1.8vw, 26px); line-height: 1.3; font-weight: 700; letter-spacing: 0.04em; font-feature-settings: 'palt'; color: var(--navy); }
/* Chua san CHO 2 DONG: 「CPO（Chief Product Officer）」 xuong 2 dong trong khi
   「Vice Director」 chi 1 -> khong chua thi dong chuc danh lech 22,4px giua cac
   the cung hang (cum chu canh day). align-items:flex-end de chu 1 dong nam sat
   ten, phan du don len tren -> cap chuc danh↔ten van dinh nhau. */
.ab-leader__role { order: -1; display: flex; align-items: flex-end; min-height: 3.2em; font-size: 14px; line-height: 1.6; font-weight: 700; letter-spacing: 0.04em; color: var(--navy-mid); }
/* Khong de cum trong ngoac vo thanh 2 manh (vd "Officer)" rot dong le) - ca
   cum phai di cung nhau, thieu cho thi roi nguyen khoi xuong dong 2.
   .ab-leader__role-txt BAT BUOC boc chung "CPO"+span lam MOT flex item duy
   nhat: tach "CPO" thanh item rieng ben canh span nowrap se khien flex-shrink
   don het ap luc thu hep sang "CPO", cong voi overflow-wrap:anywhere toan site
   -> "CPO" vo thanh tung chu C/P/O xep doc (da an ra luc test o kho 3 cot desktop). */
.ab-leader__role-paren { white-space: nowrap; }
.ab-leader__school { margin-top: 8px; font: 400 14px/25.2px var(--ab-jp); letter-spacing: 0.02em; color: var(--muted); }
.ab-group__list--exec .ab-leader__body { padding: 24px clamp(14px, 1.4vw, 20px); }
/* 12,5px la cho ca 4 chuc danh (CPO/CBO/CAIO/Vice Director) gon dung 1 dong o kho
   hep nhat (tablet 768, luoi 2 cot, o ~344px, cho chu ~200px) - dong nhip ca hang,
   khoi phai xuong 2 dong (do da tung gay bug vo chu, xem comment o .ab-leader__role-paren). */
.ab-group__list--exec .ab-leader__role { font-size: 12.5px; }
.ab-group__list--exec .ab-leader__name { margin-top: 6px; font-size: clamp(18px, 1.39vw, 20px); line-height: 1.4; }

/* =========================================================================
   03 組織文化 — cot tieu de 4/12 (dinh khi cuon) ‖ ol 8/12
   ========================================================================= */
.ab-culture { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.ab-culture__head { grid-column: 1 / span 4; }
.ab-culture__lead { margin-top: 16px; font: 400 15px/28px var(--ab-jp); letter-spacing: 0.02em; text-wrap: pretty; color: var(--muted); }
/* cot tieu de dinh khi doc 3 muc ben phai (ghi chu "production: sticky" cua
   artboard). Chi bat khi man du cao: cot cao ~400px + 150px phan dinh. */
@media (min-width: 1024px) and (min-height: 640px) {
  .ab-culture__head { position: sticky; top: calc(var(--hdr-h) + var(--lnav-h) + var(--ab-stick-gap)); }
}

.ab-values { grid-column: 5 / span 8; list-style: none; border-top: 2px solid var(--navy); }
.ab-value {
  display: grid;
  /* cot minh hoa co gian 200→280 (280 = artboard A o 1440): o 1024 cot ol chi
     632px, 280 se ep doan mo ta con ~230px -> 5 dong */
  grid-template-columns: 56px minmax(0, 1fr) clamp(200px, 19.5vw, 280px);
  grid-template-areas: "no txt img";
  column-gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--line-strong);
}
.ab-value__no { grid-area: no; font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--blue); }
.ab-value__txt { grid-area: txt; }
.ab-value__h3 { font-size: 20px; line-height: 30px; font-weight: 700; letter-spacing: 0.04em; font-feature-settings: 'palt'; color: var(--navy); }
.ab-value__p { margin-top: 12px; font: 400 16px/30.4px var(--ab-jp); letter-spacing: 0.02em; text-wrap: pretty; color: var(--ink); }
/* minh hoa SVG isometric 4:3 tren nen nhat. contain (khong cover): khung mobile
   16:9 khac ti le SVG, cover se cat mat be isometric -> contain + nen lap 2 ben */
.ab-value__img { grid-area: img; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); }

/* =========================================================================
   04 関連事業・エコシステム — luoi 4 o, vach 1px = nen ul lo qua gap
   ========================================================================= */
.ab-eco { margin-top: 32px; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); }
.ab-eco__item { background: var(--white); padding: 28px 24px; display: flex; flex-direction: column; }
.ab-eco__logo-box { height: 80px; display: flex; align-items: center; }
/* 4 logo khac ty le -> dat be ngang rieng de "nang" thi giac ngang nhau (so do artboard) */
.ab-eco__logo { height: auto; object-fit: contain; }
.ab-eco__logo--agile   { width: 115px; }
.ab-eco__logo--codegym { width: 166px; }
.ab-eco__logo--nix     { width: 98px; }
.ab-eco__logo--terran  { width: 128px; }
/* text-wrap: wrap — huy balance chung cua h3 (home-prototype.css): balance cat
   "Agile / Academy HVA" o o hep 2 cot, artboard la "Agile Academy / HVA". */
.ab-eco__h3 { text-wrap: wrap; margin-top: 20px; font-size: 16px; line-height: 1.6; font-weight: 700; letter-spacing: 0.04em; font-feature-settings: 'palt'; color: var(--navy); }
.ab-eco__p { margin-top: 6px; font: 400 15px/27px var(--ab-jp); letter-spacing: 0.02em; text-wrap: pretty; color: var(--muted); }
/* margin-top:auto day link xuong day o -> 4 link thang hang du mo ta dai ngan khac nhau */
.ab-eco__more { margin-top: auto; padding-top: 12px; display: flex; }
.ab-eco__link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: 0.02em; }

/* =========================================================================
   TABLET 768–1023 — bo cuc trung gian (khong co artboard rieng)
   ========================================================================= */
@media (max-width: 1023px) {
  /* lead full ngang, 3 du kien xuong 1 hang ben duoi: 5/12 cot qua hep cho
     "Ha Noi・Tokyo・Da Nang" nowrap */
  .ab-hero__meta { display: block; }
  .ab-hero__lead { max-width: 44em; }
  .ab-facts { margin-top: 24px; justify-content: flex-start; gap: 48px; }

  .ab-mq { --ab-mq-h: 300px; --ab-mq-gap: 12px; --ab-mq-dur: 120s; margin-top: 52px; }

  /* bang full ngang; cot phai xuong duoi thanh 2 cot anh ‖ ACCESS */
  .ab-profile { display: block; }
  .ab-aside { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .ab-access { margin-top: 0; }
  .ab-map { height: 200px; }

  /* Thu bac: anh 取締役員 luon >= anh 執行役員 (nhu 2 artboard).
     取締役員: 2 cot, anh 128 (768) → 150 (1023) — noi lien muc 150 cua desktop o
     1024, khong nhay. O 768 the ~340px: anh 128 + dem 16 con ~180px cho chu ->
     ten dai nhat "Pham Manh Lan" (~166px o 22px) phai ha con 20px o 768. */
  .ab-group__list--board { --ab-fig-w: clamp(128px, 14.7vw, 150px); }
  .ab-group__list--board .ab-leader__body { padding: 20px 16px; }
  .ab-group__list--board .ab-leader__name { font-size: clamp(20px, 2.6vw, 22px); }
  /* 執行役員: luoi 2x2 giu nguyen o tablet (cung 2 cot voi 取締役員), anh 112 = dung
     co cua desktop o 1024 (qua nguong khong doi co anh). O 768 the ~344px: anh 112 +
     dem 16 con ~200px cho chu — du cho cum nowrap 「（Chief Business Officer）」. */
  .ab-group__list--exec { --ab-fig-w: 112px; gap: 16px; }
  .ab-group__list--exec .ab-leader__body { padding: 16px; }

  /* tieu de len tren, 3 muc ben duoi */
  .ab-culture { display: block; }
  .ab-values { margin-top: 28px; }
  .ab-value { grid-template-columns: 48px minmax(0, 1fr) 200px; column-gap: 24px; }

  .ab-eco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   MOBILE <=767 — artboard Mobile 390
   ========================================================================= */
@media (max-width: 767px) {
  .ab-en { display: none; }

  .ab-hero { padding-bottom: 36px; }
  .ab-hero__eyebrow { margin-top: 28px; }
  /* 3 dong: "AI & Digital" nowrap, "パートナー" tach xuong dong rieng. Co chu
     giu 40px (san cua clamp): do duoc "AI & Digital" 40px = 213px, vua ca kho 320. */
  .ab-hero__h1 { margin-top: 14px; line-height: 1.3; }
  .ab-hero__tail { display: block; }
  .ab-hero__meta { margin-top: 28px; padding-top: 20px; }
  /* luoi 2 cot: 設立 | 社員数, 拠点 chiem ca hang duoi (order dua xuong cuoi,
     DOM giu thu tu desktop 設立 → 拠点 → 社員数) */
  .ab-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; column-gap: 16px; }
  .ab-facts__item--wide { grid-column: 1 / -1; order: 1; }

  .ab-mq { --ab-mq-h: 220px; --ab-mq-gap: 10px; --ab-mq-dur: 100s; margin-top: 36px; }

  /* muc luc: .lnav tu cuon ngang TRONG thanh o man hep (home-prototype.css),
     khong con luoi 2x2 rieng cua .ab-toc. */

  .ab-sec { padding: 48px 0 56px; }
  .ab-sec--last { padding-bottom: 56px; }

  .ab-profile { margin-top: 20px; }
  .ab-dl__row { display: block; padding: 14px 0; }
  .ab-dl dt { padding: 0; line-height: 20px; }
  .ab-dl dd { margin-top: 4px; padding: 0; }
  .ab-dl .ab-dl__tel { padding: 0; display: block; }
  .ab-aside { margin-top: 24px; display: block; }
  .ab-access { margin-top: 32px; }
  /* artboard Mobile khong hien dong "Ha Noi オフィス（本社）" (dia chi da co ngay
     tren bang). An bang mat nhung GIU cho trinh doc man hinh: nhan ACCESS
     aria-hidden, nen h3 nay la nhan duy nhat cua khoi ban do. */
  .ab-access__h3 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .ab-map { height: 200px; }

  .ab-leaders { margin-top: 20px; }
  .ab-group + .ab-group { margin-top: 40px; }
  .ab-group__head { margin-bottom: 16px; }
  .ab-group__h3 { font-size: 18px; line-height: 27px; }
  .ab-group__list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-group__list--board { --ab-fig-w: 128px; grid-template-columns: minmax(0, 1fr); }
  .ab-group__list--exec  { --ab-fig-w: 96px; grid-template-columns: minmax(0, 1fr); }
  .ab-group__list--board .ab-leader__body { padding: 16px; }
  .ab-group__list--exec .ab-leader__body { padding: 12px 16px; }
  .ab-leader__name { margin-top: 6px; }
  /* co ten noi suy tuyen tinh 320 → 390 (390 = dung artboard: 22 / 18px): giu
     nguyen 22/18 thi o 360 tro xuong ten 3 tu xuong dong, mo coi 1 tu
     ("Pham Manh / Lan"). Specificity 2 class de thang rule tablet o tren. */
  .ab-group__list--board .ab-leader__name { font-size: clamp(17px, 7.14vw - 5.86px, 22px); }
  .ab-group__list--exec .ab-leader__name { font-size: clamp(16px, 2.86vw + 6.86px, 18px); }
  .ab-leader__school { margin-top: 6px; }

  .ab-values { margin-top: 20px; }
  /* 1 cot: anh 16:9 len dau, so + tieu de + mo ta ben duoi */
  .ab-value { grid-template-columns: minmax(0, 1fr); grid-template-areas: "img" "no" "txt"; padding: 24px 0; }
  .ab-value__img { aspect-ratio: 16 / 9; }
  .ab-value__no { margin-top: 16px; font-size: 14px; line-height: 20px; letter-spacing: 0; }
  .ab-value__h3 { margin-top: 6px; font-size: 18px; line-height: 27px; }
  .ab-value__p { margin-top: 8px; font-size: 15px; line-height: 27px; }

  .ab-eco { margin-top: 20px; }
  .ab-eco__item { padding: 20px 16px; }
  .ab-eco__logo-box { height: 64px; }
  .ab-eco__logo--agile   { width: 98px; }
  .ab-eco__logo--codegym { width: 126px; }
  .ab-eco__logo--nix     { width: 92px; }
  .ab-eco__logo--terran  { width: 120px; }
  /* o hep 2 cot: "Agile Academy HVA" xuong 2 dong, "CodeGym" 1 dong -> khong
     chua cho thi dong mo ta lech 25,6px. Chua san 2 dong, chu bam tren. */
  .ab-eco__h3 { margin-top: 16px; min-height: 3.2em; }
  .ab-eco__p { font-size: 14px; line-height: 25.2px; }
  .ab-eco__link { color: var(--blue); line-height: 1.5; }
}

/* kho hep (<375, gom ca 360 — be ngang Android pho bien): o エコシステム 2 cot
   chi con ~127px chu, link "hocvienagile.com↗" (127px) va "デジタルネイティブ"
   (~128px) bi overflow-wrap:anywhere cat giua chu -> 1 cot. Anh 取締役員 ha 112
   (van > 96 cua 執行役員) de ten con ~170px o 360. */
@media (max-width: 374px) {
  .ab-eco { grid-template-columns: minmax(0, 1fr); }
  .ab-group__list--board { --ab-fig-w: 112px; }
}

/* man thap (dien thoai xoay ngang, cua so laptop thap): truoc day header 76 +
   muc luc 56–99px an mat 1/3–1/2 man nen phai tha muc luc ve vi tri thuong.
   .lnav chi 41px (tong 117px) va Home da chay nhu vay tu dau -> bo ngoai le
   nay de 2 tab hanh xu giong het nhau. */