/* AIA 2026 — main.css — ported from AIA/html/option1/index.html (Ivory) */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Sprint 3 (2026-07-21) — Skip link (WCAG 2.4.1, item #14 audit). Ẩn hẳn ngoài màn hình mặc
   định (left:-9999px, không dùng display:none — vì display:none khiến screen reader/keyboard
   không bao giờ focus tới được); khi nhận focus (Tab đầu tiên từ đầu trang) mới đưa vào khung
   hình ở góc trên-trái, nổi trên mọi thứ (z-index cao) để không bị nav che. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--black, #111827);
  color: var(--white, #fff);
  padding: 14px 22px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — AIA 2026 · token dùng chung cho TẤT CẢ các trang.
   Xem tài liệu đầy đủ (bảng màu, ví dụ, hướng dẫn dùng): AIA/STYLEGUIDE_aiavatar_2026.md
   Nguyên tắc: mọi màu/font-size/khoảng cách mới thêm ở bất kỳ trang/section nào
   PHẢI tham chiếu var() ở đây — không hard-code số mới, để đổi 1 chỗ áp dụng toàn site.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* ── MÀU SẮC ── */
  --red: #F12E11;
  --gold: #F5AA19;
  --grad: linear-gradient(135deg, #F12E11 0%, #F5AA19 100%);
  --black: #0A0A08;
  --dark: #1A1A16;
  --gray-8: #141412;
  --gray-6: #4A4A44;
  --gray-4: #9A9A92;
  --gray-2: #E4E4DC;
  --gray-1: #F9F8F6;
  --white: #FFFFFF;

  /* Chữ/icon đặt trên nền tối (thay cho rgba(255,255,255,x) rải rác từng nơi) */
  --on-dark-100: #ffffff;
  --on-dark-75: rgba(255,255,255,.75);
  --on-dark-65: rgba(255,255,255,.65);
  --on-dark-55: rgba(255,255,255,.55);
  --on-dark-45: rgba(255,255,255,.45);
  --on-dark-35: rgba(255,255,255,.35);
  --on-dark-25: rgba(255,255,255,.25);

  /* ── FONT CHỮ ── */
  /* JP: dùng cho html[lang^="ja"] (và các ngôn ngữ CJK khác khi có bản dịch — xem TODO Task #5) */
  --font-jp: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  /* EN: dùng cho html[lang^="en"] + các ngôn ngữ Latin khác (VI/ES/PT/ID).
     ĐỔI 2026-07-17: Segoe UI → Noto Sans (chị Hoa báo bug dấu tiếng Việt — Segoe UI là font
     hệ thống Windows, máy không có (macOS/Linux/mobile) rơi xuống Arial, thiếu/lệch dấu thanh
     tiếng Việt). Noto Sans là Google Font (đã enqueue ở functions.php), phủ đầy đủ Latin
     Extended tiếng Việt, và cùng họ Noto với Noto Sans JP/SC/KR/Bengali... — thuận tiện khi
     bổ sung ZH/BN thật ở Task #10. */
  --font-en: 'Noto Sans', system-ui, Arial, sans-serif;
  /* ZH (zh-hans): thêm 2026-07-20 (Sprint 2) — trước đây zh-hans không có font riêng nên rơi
     nhầm vào --font-jp (Zen Kaku Gothic New = nét chữ Hán kiểu Nhật, sai vùng miền so với chữ
     Hán giản thể TQ). Noto Sans SC = Google Font, cùng họ Noto với --font-en, đúng glyph giản
     thể chuẩn. PingFang SC/Microsoft YaHei = fallback hệ thống (Mac/Windows bản TQ) nếu Google
     Fonts không tải được (vd bị chặn ở TQ) — vẫn đọc được bình thường, không vỡ chữ. */
  --font-zh: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* ── CỠ CHỮ NỘI DUNG (body copy — đoạn mô tả dài) ──
     Yêu cầu: tiếng Nhật 15px, tiếng Anh 16px. Áp dụng qua selector :lang() bên dưới. */
  --body-size-ja: 15px;  --body-line-ja: 2;
  --body-size-en: 16px;  --body-line-en: 1.7;

  /* ── TYPE SCALE — H1-H6, dùng chung mọi trang (responsive qua clamp) ── */
  --display-size: clamp(40px, 5.5vw, 70px);  /* chỉ dùng cho Hero headline, 1 lần/trang */
  --display-line: 1.15;

  --h1-size: clamp(36px, 4.5vw, 64px);  --h1-line: 1.15;  --h1-tracking: -0.01em;
  --h2-size: clamp(26px, 3vw, 40px);    --h2-line: 1.25;  --h2-tracking: 0.01em;
  --h3-size: clamp(20px, 1.8vw, 28px);  --h3-line: 1.3;
  --h4-size: clamp(18px, 1.4vw, 22px);  --h4-line: 1.35;
  --h5-size: 16px;                      --h5-line: 1.4;
  --h6-size: 14px;                      --h6-line: 1.4;   --h6-tracking: 0.02em;
  --heading-weight: 700;

  /* Nhãn nhỏ viết hoa kiểu "— OUR MISSION —" / "TECHNOLOGY" */
  --eyebrow-size: 12.5px; --eyebrow-weight: 800; --eyebrow-tracking: 0.12em;
  /* Chữ chú thích nhỏ (caption, số liệu phụ) */
  --caption-size: 13px; --caption-line: 1.5;

  /* ── KHOẢNG CÁCH (lưới 8px) ── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;  --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  /* Padding chuẩn cho mọi section full-width */
  --section-py: 140px;        --section-py-mobile: 80px;
  --section-px: 60px;         --section-px-mobile: 20px;

  /* ── BO GÓC / ĐỔ BÓNG ── */
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 32px rgba(0,0,0,.12);

  /* ── HEADER ── */
  --nav-height: 68px;
}

html { scroll-behavior: smooth; overflow-x: hidden; }
/* 2026-07-23 — ĐÃ THỬ thêm overflow-x:hidden ở <body> làm lớp chặn thứ 2 chống kéo ngang,
   nhưng gây lỗi NẶNG: mọi section dùng position:sticky để pin-scroll (Showcase, Feature
   phone panels, Ecosystem/Dr. Avatar, Trust/Efforts...) bị mất pin — sticky KHÔNG hoạt động
   nếu có bất kỳ ancestor nào (kể cả <body>) đặt overflow khác "visible" nằm giữa phần tử
   sticky và scrolling container thật (ở đây là <html>) — đây là hành vi chuẩn của trình
   duyệt, không phải bug riêng. ĐÃ BỎ overflow-x ở <body> (rollback). Lỗi kéo/vuốt ngang lộ
   khoảng trắng phải đã được xử lý tại GỐC qua fix .dl-marquee (100vw → biến --vw100, xem
   phía dưới) — không cần thêm lớp chặn ở <body> nữa. */
body {
  /* Font THÂN chữ (body/tag/label/nút...) — GIỮ NGUYÊN 1 stack trung tính cho mọi ngôn ngữ,
     đúng như bản HTML gốc. KHÔNG đổi theo :lang() ở đây — chỉ heading (h1-h6) mới đổi font
     theo ngôn ngữ (xem khối "HEADING SYSTEM" bên dưới). Lý do: nếu đổi font-family ở body
     theo :lang(ja) thì MỌI chữ thường/nhãn (kể cả chữ La-tinh viết hoa như "TECHNOLOGY",
     "PRODUCTS & SERVICES") cũng bị kéo sang Zen Kaku Gothic New — vốn có nét La-tinh MẢNH
     hơn hẳn Hiragino Sans/Noto Sans ở cùng độ đậm → tag/label bị "mảnh" đi ngoài ý muốn.
     ĐỔI 2026-07-17: Segoe UI → Noto Sans (đồng bộ với --font-en — xem giải thích đầy đủ ở
     khối :root phía trên, lý do: bug dấu tiếng Việt khi rơi xuống Arial). */
  /* Thêm 'Noto Sans SC' ngay sau 'Noto Sans' (2026-07-20, Sprint 2): chữ La-tinh vẫn hiển thị
     bằng Noto Sans như cũ (font này đã có đủ glyph Latin); chỉ ký tự Hán (Noto Sans không có)
     mới tự động rơi xuống Noto Sans SC — đúng glyph giản thể TQ thay vì lệch sang Hiragino
     Sans/Noto Sans JP (nét kiểu Nhật). Giữ nguyên triết lý "1 stack trung tính cho mọi ngôn
     ngữ" — không cần rẽ nhánh :lang(zh-hans) riêng ở đây. */
  font-family: 'Noto Sans', 'Noto Sans SC', 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif;
  font-size: var(--body-size-en); /* fallback trước khi biết ngôn ngữ trang (xem :lang() bên dưới) */
  line-height: var(--body-line-en);
  font-weight: 400;
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}

/* Cỡ chữ/line-height nội dung theo ngôn ngữ thật của trang (html[lang], WP tự in ra) — chỉ
   đổi size/line-height, KHÔNG đổi font-family ở cấp body (xem giải thích ở trên).
   ZH (zh-hans) gộp chung nhóm với JA (2026-07-20, Sprint 2) — chữ Hán dày như JP nên dùng
   cùng size/line-height 15px/2, không dùng cỡ EN 16px. BN (chữ Bengali) vẫn TODO — chưa có
   font/size riêng, tạm rơi fallback EN. */
body:lang(ja), body:lang(zh-hans) { font-size: var(--body-size-ja); line-height: var(--body-line-ja); }
body:lang(en), body:lang(vi), body:lang(es), body:lang(pt), body:lang(id) {
  font-size: var(--body-size-en); line-height: var(--body-line-en);
}

/* Font riêng cho HEADING theo ngôn ngữ — chỉ áp dụng qua biến --heading-font, chỉ heading
   (h1-h6/.h1-.h6) tham chiếu biến này, không ảnh hưởng chữ thường/tag/label xung quanh. */
:lang(ja) { --heading-font: var(--font-jp); }
:lang(zh-hans) { --heading-font: var(--font-zh); } /* thêm 2026-07-20 — trước đây rơi nhầm vào --font-jp */
:lang(en), :lang(vi), :lang(es), :lang(pt), :lang(id) { --heading-font: var(--font-en); }

/* ── HEADING SYSTEM — h1-h6 thật + class .h1-.h6 dùng khi cần khác thẻ ngữ nghĩa ── */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0; color: var(--black); font-weight: var(--heading-weight);
  font-family: var(--heading-font, var(--font-jp));
}
h1, .h1 { font-size: var(--h1-size); line-height: var(--h1-line); letter-spacing: var(--h1-tracking); }
h2, .h2 { font-size: var(--h2-size); line-height: var(--h2-line); letter-spacing: var(--h2-tracking); }
h3, .h3 { font-size: var(--h3-size); line-height: var(--h3-line); }
h4, .h4 { font-size: var(--h4-size); line-height: var(--h4-line); }
h5, .h5 { font-size: var(--h5-size); line-height: var(--h5-line); }
h6, .h6 { font-size: var(--h6-size); line-height: var(--h6-line); letter-spacing: var(--h6-tracking); text-transform: uppercase; }
.on-dark { color: var(--on-dark-100); }

/* H1 — line-height:1 + capitalize cho MỌI ngôn ngữ TRỪ tiếng Nhật (ja) và tiếng Trung (zh-hans),
   theo yêu cầu 2026-07-16. Dùng "html:lang(xx) h1" (thay vì "h1:lang(xx)" hay ":lang(xx) h1") để
   có độ đặc hiệu (specificity) CAO HƠN mọi rule h1 theo section khác trong file này (vd
   .story-hero h1, .company-hero h1, .contact-hero h1... đều chỉ (0,1,1)) — đảm bảo line-height/
   text-transform ở đây LUÔN thắng bất kể khai báo trước/sau trong file, mà không cần !important.
   KHÔNG liệt kê ja/zh-hans ở đây — 2 ngôn ngữ này giữ nguyên line-height gốc (1.15/1.06/1.3...)
   theo từng section, vì chữ Hán/Kana đặc hơn cần dòng cao hơn mới không dính chữ khi xuống dòng.
   text-transform:capitalize không có tác dụng thị giác với BN (chữ Bengali không phân biệt hoa/
   thường) nhưng không gây lỗi gì — vẫn liệt kê để nhất quán "mọi ngôn ngữ trừ ja/zh". */
html:lang(es) h1, html:lang(es) .h1,
html:lang(pt) h1, html:lang(pt) .h1,
html:lang(id) h1, html:lang(id) .h1,
html:lang(bn) h1, html:lang(bn) .h1 {
  line-height: 1;
  text-transform: capitalize;
}

/* Tiếng Việt + tiếng Anh — riêng: vẫn capitalize như các ngôn ngữ Latin khác, nhưng
   line-height = 1.2 (thay vì 1). VI theo yêu cầu 2026-07-17 (dấu thanh tiếng Việt — ví dụ ề,
   ạ, ỗ... — cần khoảng cách dòng rộng hơn để không bị dính/cắt dấu khi line-height quá sát =1).
   EN gộp chung nhóm này cùng ngày theo yêu cầu chị Hoa (đồng bộ line-height với VI). */
html:lang(vi) h1, html:lang(vi) .h1,
html:lang(en) h1, html:lang(en) .h1 {
  line-height: 1.2;
  text-transform: capitalize;
}

/* H2 — line-height:1.2 cho TẤT CẢ ngôn ngữ (kể cả tiếng Nhật), theo yêu cầu 2026-07-17 (lần 3).
   Lịch sử: ban đầu set 1.1 cho mọi ngôn ngữ trừ ja (lần 1); sau đó tách riêng EN+JA=1.2 (lần 2);
   chị Hoa xác nhận muốn ĐỒNG NHẤT toàn bộ H2 (trừ ja về mặt yêu cầu, nhưng ja vốn đã là 1.2 từ
   lần 2 nên gộp chung luôn cho đơn giản, không có ngôn ngữ nào còn ở 1.1 nữa) — gộp 2 rule cũ
   thành 1 rule duy nhất.
   Dùng "html:lang(xx) h2" (specificity 0,1,2) để thắng mọi rule h2 theo section khác trong file
   này (vd .nsg-body h2, h2.philo-h2, .terms-section h2... đều chỉ 0,1,1) mà không cần !important.
   ".trust-hl" nằm trong danh sách vì đây là DIV dùng làm heading cấp H2 thật (font-size
   var(--h2-size), dùng ở front-page.php "TECHNOLOGY" teaser + page-company.php "Technical Moat"),
   nhưng KHÔNG phải thẻ <h2> và cũng không có class ".h2" nên rule h2/.h2 gốc không chạm tới được. */
html:lang(en) h2, html:lang(en) .h2, html:lang(en) .trust-hl,
html:lang(vi) h2, html:lang(vi) .h2, html:lang(vi) .trust-hl,
html:lang(ja) h2, html:lang(ja) .h2, html:lang(ja) .trust-hl,
html:lang(es) h2, html:lang(es) .h2, html:lang(es) .trust-hl,
html:lang(pt) h2, html:lang(pt) .h2, html:lang(pt) .trust-hl,
html:lang(id) h2, html:lang(id) .h2, html:lang(id) .trust-hl,
html:lang(bn) h2, html:lang(bn) .h2, html:lang(bn) .trust-hl,
html:lang(zh-hans) h2, html:lang(zh-hans) .h2, html:lang(zh-hans) .trust-hl {
  line-height: 1.2;
}

/* br.br-mobile-only — NGƯỢC LẠI với br.dl-br-desktop (ẩn desktop, chỉ hiện mobile). Dùng để
   ngắt dòng thủ công CHỈ trên mobile (≤768px, xem override trong khối MOBILE bên dưới) mà
   không ảnh hưởng desktop — ẩn mặc định ở đây, override display lại trong @media mobile.
   Theo yêu cầu 2026-07-17 (chị Hoa): Home/"OUR MISSION" (philo_h2/philo_subhead) và
   Home/"PRODUCTS & SERVICES" (feat_nav_h2) bản EN cần ngắt dòng đúng vị trí trên mobile,
   khác với ngắt tự nhiên (word-wrap) đang bị lệch chỗ hoặc tràn dòng (h2.philo-h2 có
   white-space:nowrap nên trước đây bị cắt chữ trên mobile thay vì xuống dòng). */
br.br-mobile-only { display: none; }
/* br.br-desktop-only — ngược lại br.br-mobile-only: hiện mặc định (desktop/laptop), ẩn trên
   mobile (override display:none trong khối MOBILE bên dưới). Dùng khi 1 vị trí ngắt dòng
   CHỈ đúng cho desktop, còn mobile cần ngắt ở chỗ khác hẳn (không phải word-wrap tự nhiên).
   Theo yêu cầu 2026-07-17 (chị Hoa): hero H1 trang Our Promise (EN + VI) cần layout ngắt dòng
   khác nhau giữa desktop và mobile. */
br.br-desktop-only { display: inline; }

/* Nhãn nhỏ viết hoa dùng chung (đã có nhiều class riêng như .sec-tag/.ftr-tag/.cta-tag/.t-tag
   dùng đúng giá trị này rải rác — .eyebrow là lối vào chung cho section mới sau này) */
.eyebrow {
  font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--gray-4);
}

/* ── OPTION TAG ── */
.opt-tag { position:fixed; top:76px; right:16px; z-index:999;
  background: var(--grad); color:white; padding:6px 14px;
  border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.06em;
  pointer-events:none; box-shadow:0 4px 16px rgba(241,46,17,.25); }

/* Task #11 (tiếp, 2026-07-17) — banner xanh "This site is registered on wpml.org as a
   development site..." mà chị Hoa thấy KHÔNG phải nằm ở wp-admin (2 fix trước ở functions.php chỉ
   xử lý phần wp-admin: banner to trong admin_notices + nhãn cam "Development Site" ở toolbar) —
   đây là 1 CƠ CHẾ KHÁC HẲN nằm trong vendor/otgs/installer/loader.php, tự in ra qua hook
   'wp_footer' (priority 999) cho MỌI trang FRONTEND, hiện cho CẢ khách truy cập bình thường (không
   riêng admin) mỗi khi site key WPML đang ở chế độ "development" (đúng vì site còn ở localhost,
   chưa live — không đổi sang production key). Class `.otgs-development-site-front-end` do JS/PHP
   plugin tự echo trực tiếp trong <body>, không đi qua filter nào ta có thể can thiệp gọn từ
   functions.php (closure cục bộ trong loader.php, không remove_action được) — ẩn thẳng bằng CSS
   là cách an toàn nhất, không đụng file plugin, không mất khi WPML update. */
.otgs-development-site-front-end { display: none !important; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent;
  padding:0 60px; height:68px;
  display:flex; align-items:center;
}
/* nav.nav-theme-light: dùng cho trang có phần đầu nền trắng/sáng (không phải hero tối/ảnh/video)
   — nav hiện SẴN ở trạng thái "đã cuộn" (nền trắng/chữ đen) ngay từ đầu, không chờ cuộn mới đổi.
   Set qua $aia_header_theme = 'light'; trước get_header() — xem STYLEGUIDE_aiavatar_2026.md.
   nav.nav-theme-light-transparent: hero full-bleed nền sáng — nav TRONG SUỐT/không viền khi
   CHƯA cuộn (chỉ chữ/logo/nav-cta đổi đen ngay từ đầu), cuộn qua khỏi hero mới hiện nền trắng
   giống bình thường (:not(.scrolled) để nav.scrolled ở trên vẫn thắng khi đã cuộn thật). */
nav.scrolled, nav.nav-theme-light {
  background:rgba(255,255,255,.94); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--gray-2);
}
nav.nav-theme-light-transparent:not(.scrolled) { background:transparent; backdrop-filter:none; border-bottom:none; }
nav { transition:background .3s, backdrop-filter .3s, transform .35s cubic-bezier(.4,0,.2,1); }
nav.hidden { transform:translateY(-100%); }
.nav-logo img { height:36px; display:block; }
.nav-links { display:flex; gap:50px; list-style:none; position:absolute; left:50%; transform:translateX(-50%); }
.nav-links a { text-decoration:none; font-size:15px; font-weight:500; color:white; transition:color .15s; letter-spacing:.01em; }
.nav-links a:hover { color:rgba(255,255,255,.7); }
nav.scrolled .nav-links a, nav.nav-theme-light .nav-links a, nav.nav-theme-light-transparent .nav-links a { color:var(--gray-6); }
nav.scrolled .nav-links a:hover, nav.nav-theme-light .nav-links a:hover, nav.nav-theme-light-transparent .nav-links a:hover { color:var(--black); }
.nav-right { display:flex; align-items:center; gap:12px; margin-left:auto; }

/* Language dropdown (agoodday style) */
.lang-select {
  position:relative; display:flex; align-items:center; gap:6px;
  cursor:pointer; padding:4px 0;
  border:none; border-bottom:1.5px solid rgba(255,255,255,.7); color:white;
  font-size:12.5px; font-weight:500; letter-spacing:.03em;
  transition:border-color .2s, color .2s;
  user-select:none; background:none;
}
.lang-select:hover { border-bottom-color:white; }
nav.scrolled .lang-select, nav.nav-theme-light .lang-select, nav.nav-theme-light-transparent .lang-select { border-bottom-color:var(--gray-4); color:var(--black); }
nav.scrolled .lang-select:hover, nav.nav-theme-light .lang-select:hover, nav.nav-theme-light-transparent .lang-select:hover { border-bottom-color:var(--black); }
.lang-chevron { transition:transform .2s; flex-shrink:0; }
.lang-select.open .lang-chevron { transform:rotate(180deg); }
.lang-dropdown {
  display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:white; border-radius:12px; padding:6px;
  box-shadow:0 8px 32px rgba(0,0,0,.12); min-width:160px;
  max-height:min(360px, calc(100vh - 100px)); overflow-y:auto;
  z-index:200;
}
.lang-select.open .lang-dropdown { display:block; }
.lang-dropdown a {
  display:block; padding:7px 16px; font-size:12.5px; font-weight:500;
  color:var(--gray-6); text-decoration:none; border-radius:8px;
  transition:background .15s, color .15s; white-space:nowrap; letter-spacing:.03em;
}
.lang-dropdown a:hover { background:var(--gray-1); color:var(--black); }
.lang-dropdown a.active { color:var(--black); font-weight:700; }
.nav-cta {
  background:white; color:var(--black); padding:10px 22px; border-radius:22px;
  font-size:12.5px; font-weight:700; text-decoration:none; letter-spacing:.03em;
  transition:all .3s;
}
.nav-cta:hover { opacity:.85; }
nav.scrolled .nav-cta, nav.nav-theme-light .nav-cta, nav.nav-theme-light-transparent .nav-cta { background:var(--black); color:white; }

/* ── HERO ── */
.hero { position:relative; height:100vh; overflow:hidden; }
/* full-screen background image */
.hero-right {
  position:absolute; inset:0; z-index:0;
}
.hero-right img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.hero-right video {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center top;
}
.hero-right::after { display:none; }
.hero-video-mb { display:none; }
/* text layer on top */
.hero-left {
  position:absolute; z-index:1;
  bottom:50px; left:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 40px 0 70px;
  max-width:1100px;
}
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.8); margin-bottom:28px;
}
.hero-badge::before { content:'★'; }
.hero-badge-sep { color:rgba(255,255,255,.4); }
.hero-h1 {
  font-size:clamp(30px,3.6vw,52px); font-weight:900;
  line-height:1.06; letter-spacing:-.025em; color:var(--black);
  margin-bottom:12px;
}
.hero-h1-ja span {
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-h1-ja {
  font-family:var(--heading-font);
  font-size:70px; font-weight:700; color:white;
  line-height:1.3; margin-bottom:24px; letter-spacing:-.01em;
}
.hero-divider { width:44px; height:3px; background:var(--grad); border-radius:2px; margin-bottom:20px; }
.hero-sub { font-size:15px; font-weight:400; line-height:1.85; color:rgba(255,255,255,.85); max-width:480px; margin-bottom:36px; }
.hero-cta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.hero-store-btn { display:inline-block; transition:transform .2s, opacity .2s; }
.hero-store-btn:hover { transform:translateY(-2px); opacity:.85; }
.hero-store-btn img { height:50px; width:auto; display:block; }

/* 2026-07-22 — Hero banner slider (CHỈ áp dụng khi có class .hero-slider, tức chỉ tiếng Nhật —
   xem front-page.php). Ngôn ngữ khác không render các class dưới đây nên không bị ảnh hưởng. */
.hero-banner { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; z-index:0; pointer-events:none; }
.hero-banner.active { opacity:1; z-index:1; pointer-events:auto; }
.hero-slider .hero-left { transition:opacity .5s ease; }
.hero-slider .hero-left.hero-left-hidden { opacity:0; pointer-events:none; }
/* Progress bar dưới 2 nút download app (thay cho dots tròn) — CÙNG phong cách với progress
   bar ở section PRODUCTS & SERVICES (.feat-progress-bar/.feat-pb-item/.feat-pb-seg/.feat-pb-fill
   trong main.css) — mục active giãn rộng ra (flex:8), có vạch fill đỏ chạy theo tiến độ video.
   Đặt NGOÀI .hero-left (position:absolute riêng, canh theo padding-left/bottom của .hero-left)
   để KHÔNG bị ẩn theo khi banner 2 kích hoạt .hero-left-hidden — luôn hiện + bấm chuyển được
   ở cả 2 banner. */
/* 2026-07-23 — Ẩn tạm thanh progress hero theo yêu cầu chị Hoa (banner 2 đã ẩn qua main.js). */
.hero-progress { display:none; position:absolute; z-index:5; left:70px; bottom:50px; gap:4px; width:100%; max-width:405px; }
.hero-progress-item { flex:1; height:24px; display:flex; align-items:center; cursor:pointer; }
.hero-progress-item.active { flex:8; }
.hero-progress-seg { width:100%; height:3px; border-radius:0; background:rgba(255,255,255,.35); position:relative; overflow:hidden; }
.hero-progress-fill { position:absolute; left:0; top:0; height:100%; width:0%; background:var(--red); transition:none; }

/* Banner 2 (data-slide="1") — nền ảnh bg_bn2.webp (đã tối ưu từ bg_bn2.png gốc, xem
   assets/images/), màu #E1DDD2 giữ làm nền dự phòng nếu ảnh chưa load xong. Video thu nhỏ +
   bo góc 30px, canh giữa — áp dụng cho cả .hero-video-pc (PC/laptop) và .hero-video-mb (mobile,
   2026-07-22 v4: chị Hoa yêu cầu thêm, trước đó mobile giữ full-bleed). */
.hero-banner[data-slide="1"] { background:#E1DDD2 url('../images/bg_bn2.webp') center/cover no-repeat; }
.hero-banner[data-slide="1"] .hero-video-pc {
  top:50%; left:50%; right:auto; bottom:auto;
  transform:translate(-50%, -50%);
  width:1200px; max-width:calc(100% - 60px);
  height:auto; /* height:auto giữ đúng tỷ lệ gốc video — thu nhỏ đều cả 2 chiều theo width */
  border-radius:30px;
}
@media (min-width:1024px) and (max-width:1600px) {
  .hero-banner[data-slide="1"] .hero-video-pc { width:1000px; }
}
.hero-banner[data-slide="1"] .hero-video-mb {
  top:50%; left:50%; right:auto; bottom:auto;
  transform:translate(-50%, -50%);
  width:390px; max-width:calc(100% - 40px);
  height:auto; /* thu nhỏ đều cả 2 chiều theo tỷ lệ gốc, giống cách làm ở .hero-video-pc */
  border-radius:30px;
}

.btn-primary {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--black); color:white;
  padding:13px 24px; border-radius:10px; font-size:13px; font-weight:700;
  text-decoration:none; transition:all .2s; letter-spacing:.02em;
}
.btn-primary:hover { background:var(--dark); transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.18); }
.btn-secondary {
  display:inline-flex; align-items:center; gap:9px;
  background:var(--white); color:var(--black);
  border:2px solid var(--gray-2); padding:13px 24px; border-radius:10px;
  font-size:13px; font-weight:700; text-decoration:none; transition:all .2s;
}
.btn-secondary:hover { border-color:var(--red); color:var(--red); transform:translateY(-1px); }
.btn-icon { font-size:18px; }
.btn-txt { display:flex; flex-direction:column; line-height:1.2; }
.btn-txt-s { font-size:9px; font-weight:400; opacity:.55; letter-spacing:.08em; text-transform:uppercase; }
.btn-txt-m { font-size:13px; font-weight:800; }

/* ════════════════════════════════════
   MŨI TÊN CTA (<span class="arr">→</span>) — QUY TẮC DÙNG CHUNG
   ════════════════════════════════════
   - Mặc định LUÔN màu cam gold (var(--gold)), áp dụng tự động cho MỌI
     link/button có class="arr" — không cần khai báo lại màu mỗi khi thêm
     nút mới.
   - Lý do: trước đây mỗi nút phải tự set `.ten-class .arr { color:var(--gold); }`,
     ai quên set thì mũi tên bị lấy theo màu chữ của link cha (đen/trắng) —
     đây chính là lỗi từng xảy ra ở .tech-bridge-link (mũi tên ra màu đen
     trên nút nền trắng). Từ nay chỉ override màu khi thực sự cần khác gold
     (ví dụ .news-more dùng đỏ vì thuộc section News — xem class đó).
   - Hover: mũi tên trượt sang phải 4px, giữ nguyên màu. */
.arr { display:inline-block; color:var(--gold); transition:transform .25s cubic-bezier(.4,0,.2,1); }
a:hover .arr { transform:translateX(4px); }
/* SHOWCASE STATS (reused inside outro scene) */
.stats-bar-inner {
  display:grid; grid-template-columns:repeat(3,1fr);
  max-width:1200px; margin:0 auto;
  border-top:1px solid var(--gray-2);
  border-bottom:1px solid var(--gray-2);
}
.sbar-item {
  padding:52px 56px;
  border-right:1px solid var(--gray-2);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.sbar-item:last-child { border-right:none; }
.sbar-tag {
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray-4); margin-bottom:16px;
}
.sbar-val {
  font-size:58px; font-weight:600;
  color:var(--black); letter-spacing:-.03em; line-height:1;
  margin-bottom:10px;
}
.sbar-desc {
  font-size:13px; font-weight:400; color:var(--gray-6);
}

/* ══ SHOWCASE (post-hero collage reveal, replaces old static Stats Bar) ══ */
.showcase-sec { position:relative; height:280vh; background:#fff; }
.showcase-viewport { position:sticky; top:0; height:100vh; overflow:hidden; background:#fff; }
.showcase-viewport video, .showcase-viewport img { width:100%; height:100%; object-fit:cover; display:block; }
/* 2026-07-23 — Banner Showcase JA đổi sang ảnh tĩnh PC/MB (thay video) — toggle hiện/ẩn theo
   breakpoint chuẩn max-width:768px của site (xem @media bên dưới).
   Selector có ancestor ".sc-banner" (thay vì chỉ ".sc-banner-img-mb") để thắng specificity so
   với ".showcase-viewport img" (dòng ~480, cũng set display:block, specificity 0,1,1 > 0,1,0
   của class đơn) — nếu không, display:none bị đè mất, ảnh MB không bao giờ ẩn được và (do 2 ảnh
   cùng stack trong 1 khối overflow:hidden) luôn chỉ thấy ảnh PC kể cả trên mobile. */
.sc-banner .sc-banner-img-mb { display:none; }

.showcase-progress { display:none; position:absolute; left:60px; right:60px; bottom:28px; height:2px; background:var(--gray-2); z-index:5; }
.showcase-progress-fill { position:absolute; left:0; top:0; height:100%; background:var(--grad); width:0%; }

.sc-collage { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.sc-tile { position:absolute; top:50%; left:50%; z-index:0; border-radius:22px; overflow:hidden; box-shadow:0 24px 50px rgba(0,0,0,.16); }
.sc-tile video, .sc-tile img { width:100%; height:100%; object-fit:cover; }

.sc-banner { position:absolute; left:50%; top:50%; z-index:1;
  transform:translate(-50%,-50%); opacity:0; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.18); }

.sc-center { position:relative; z-index:2; text-align:center; }
.sc-stats { display:flex; }
.sc-stats .sbar-item { padding:0 60px; border-right:1px solid var(--gray-2); }
.sc-stats .sbar-item:last-child { border-right:none; }
.sc-stats .sbar-tag { color:var(--gray-4); }
.sc-stats .sbar-val { color:var(--black); font-size:clamp(48px,6vw,80px); margin-bottom:14px; }
.sc-stats .sbar-desc { color:var(--gray-6); font-size:14px; }

/* 2026-07-23 — Ảnh aiavatar_cardHobby thay thế stats bar, JA only (xem front-page.php).
   Selector cụ thể hoá thành ".sc-stats-img .sc-stats-image" (thay vì chỉ ".sc-stats-image")
   để thắng specificity so với ".showcase-viewport img" (dòng 480, width/height:100%+object-fit:cover
   dùng chung cho video/ảnh trong collage) — nếu không, ảnh banner mỏng (1000x145) bị ép cao gần
   bằng chiều cao viewport rồi cover-crop, gây hiện tượng giãn to/vỡ hình như báo cáo. */
.sc-stats-img { justify-content:center; }
/* KHÔNG đặt display ở đây — để nguyên cho .sc-stats-image-pc/-mb (bên dưới + @media) tự
   quyết định ẩn/hiện theo breakpoint. Đặt display:block ở rule này (đã xảy ra ở bản sửa trước)
   sẽ đè mất display:none của bản MB do cùng thắng specificity, khiến cả 2 ảnh PC+MB hiện song song. */
.sc-stats-img .sc-stats-image { max-width:840px; width:100%; height:auto; object-fit:contain; }
/* PC/Mobile riêng — mặc định hiện bản PC, ẩn bản MB; đảo lại dưới 768px (breakpoint chuẩn site).
   Selector có ancestor ".sc-stats-img" để thắng specificity so với ".showcase-viewport img"
   (dòng ~480 cũng set display:block, specificity 0,1,1 > 0,1,0 của class đơn) — nếu không, PC
   và MB cùng hiện song song vì display:none bị đè mất. */
.sc-stats-img .sc-stats-image-mb { display:none; }

/* ── SECTION SHARED ── */
.sec { padding:96px 60px; }
.sec-alt { background:var(--gray-1); }
.sec-in { max-width:1280px; margin:0 auto; }
.sec-in.narrow { max-width:1220px; }
.sec-tag {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; color:var(--gray-4); letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:12px;
}
.sec-tag::before { content:'—'; }
.sec-tag.no-dash::before { content:none; }
.sec-tag.on-dark { color:rgba(255,255,255,.5); }
h2.sh { font-family:var(--heading-font); font-size:var(--h2-size); font-weight:var(--heading-weight); color:var(--black); margin-bottom:8px; letter-spacing:var(--h2-tracking); line-height:1.2; }
h2.sh.on-dark { color:#fff; }
.sh-sub { font-size:15px; font-weight:400; color:var(--gray-4); line-height:1.8; max-width:560px; margin-bottom:52px; }
.sh-sub.on-dark { color:rgba(255,255,255,.7); }
.body-copy { font-size:15px; font-weight:400; color:var(--gray-6); line-height:2; max-width:640px; }
.body-copy.on-dark { color:rgba(255,255,255,.72); }
.body-copy + .body-copy { margin-top:22px; }

/* ── FEATURES: full-screen sticky (1 feature at a time) ── */
.feat-sticky-sec { position:relative; height:400vh; background:#f5f5f5; }
.feat-sticky-viewport {
  position:sticky; top:0; height:100vh; overflow:hidden; background:#f5f5f5;
}
.feat-bg-video {
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  pointer-events:none;
}
.feat-bg-mb { display:none; }

/* COL 1: nav — anchored to left edge */
.feat-nav-col {
  position:absolute; left:0; top:0; bottom:0; width:670px;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 24px 0 150px; z-index:1;
}
.feat-nav-tag { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:rgba(255,255,255,.65); letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; }
.feat-nav-tag::before { content:'—'; }
.feat-nav-tag.no-dash::before { content:none; }
.feat-nav-h2 { font-family:var(--heading-font); font-size:var(--h2-size); font-weight:var(--heading-weight); color:#fff; line-height:1.4; letter-spacing:var(--h2-tracking); margin-bottom:24px; }
.feat-nav-sub { font-size:15px; font-weight:400; color:rgba(255,255,255,1); line-height:1.7; margin-bottom:28px; }
.feat-nav-list { list-style:none; }
.feat-nav-store { display:flex; gap:10px; flex-wrap:wrap; margin-top:28px; }
.feat-store-mobile { display:none; }
.feat-store-btn { display:inline-block; transition:transform .2s, opacity .2s; }
.feat-store-btn:hover { transform:translateY(-2px); opacity:.8; }
.feat-store-btn img { height:40px; width:auto; display:block; }
.feat-nav-item {
  display:flex; align-items:center; gap:12px; padding:8px 0; cursor:pointer;
  position:relative; transition:all .2s; white-space:nowrap;
}
.feat-nav-item::before {
  content:''; position:absolute; left:-24px; top:0; bottom:0; width:3px;
  background:var(--grad); border-radius:0 2px 2px 0; opacity:0; transition:opacity .25s;
}
.feat-nav-item.active::before { opacity:1; }
.fni-num { font-size:10px; font-weight:700; color:rgba(255,255,255,.45); letter-spacing:.1em; width:22px; flex-shrink:0; transition:color .2s; }
.fni-title { font-size:20px; font-weight:500; color:rgba(255,255,255,.55); transition:all .2s; }
.feat-nav-item.active .fni-num { color:#fff; }
.feat-nav-item.active .fni-title { color:#fff; font-weight:800; }
.feat-nav-item:hover .fni-title { color:#fff; }

.feat-mobile-content { display:contents; }

/* COL 2: phone — truly centered on full page */
.feat-phone-col {
  position:absolute;
  left:50%; top:0; bottom:0;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; z-index:1;
}
.feat-phone-wrap {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  pointer-events:auto;
}
.feat-phone-frame {
  height: min(720px, calc(100vh - 100px));
  aspect-ratio: 405 / 720;
  width: auto;
  border-radius:36px; overflow:hidden; position:relative; flex-shrink:0;
  box-shadow:0 40px 100px rgba(0,0,0,.18), 0 8px 28px rgba(0,0,0,.08);
  pointer-events:auto;
}
.feat-phone-frame img,
.feat-phone-frame video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center top;
}
.fp-poster { z-index:1; opacity:1; transition:opacity .2s ease; pointer-events:none; }
.fp-chip {
  position:absolute; bottom:16px; left:12px; right:12px; z-index:2;
  background:rgba(0,0,0,.32); backdrop-filter:blur(12px);
  border-radius:20px; padding:8px 14px; font-size:11px; font-weight:700; color:white;
  display:flex; align-items:center; gap:7px; box-shadow:0 4px 16px rgba(0,0,0,.12);
}
.fp-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--grad); }
.fp-dot.g { background:#22c55e; }
.fp-dot.p { background:#f43f5e; }
.fp-dot.y { background:#f59e0b; }

/* COL 3: text — 100px to the right of the phone */
.feat-text-col {
  position:absolute;
  left:calc(50% + 302px); right:0; top:0; bottom:0;
  display:flex; align-items:center; padding-right:60px; z-index:1;
}
.ftr-panel {
  position:absolute; left:0; right:0;
  opacity:0; transform:translateY(28px);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none; max-width:420px;
}
.ftr-panel.active {
  opacity:1; transform:translateY(0);
  pointer-events:auto;
}
.ftr-tag { font-size:13px; font-weight:800; color:rgba(255,255,255,.65); letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px; }
.ftr-title { font-family:var(--heading-font); font-size:clamp(18px,1.6vw,24px); font-weight:700; color:#fff; line-height:1.3; letter-spacing:.01em; margin-bottom:16px; }
.ftr-desc { font-size:15px; font-weight:400; color:rgba(255,255,255,.8); line-height:2; }
.ftr-cta-mobile {
  display:inline-flex; margin-top:24px;
}
/* mũi tên dùng màu gold mặc định từ .arr — không cần khai báo riêng */

/* progress bar under phone */
.feat-progress-bar {
  display:flex; gap:4px; margin-top:16px;
  width:405px;
}
.feat-pb-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  gap:6px; cursor:pointer;
}
.feat-pb-item.active { flex:8; }
.feat-pb-seg {
  width:100%; height:3px; border-radius:0;
  background:rgba(255,255,255,.35);
  position:relative; overflow:hidden;
}
.feat-pb-fill {
  position:absolute; left:0; top:0; height:100%;
  width:0%; background:var(--red);
  transition:none;
}
.feat-pb-num {
  display:none;
  font-size:10px; line-height:1; font-weight:700;
  letter-spacing:.02em; font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.38);
  transition:color .25s ease;
}
.feat-pb-item.active .feat-pb-num { color:var(--red); }

.feat-dots { display:none !important; }

/* ── ECOSYSTEM ── */
.eco-title-row {
  position:absolute; top:0; left:0; right:0; z-index:1;
  padding:56px 60px 0;
  text-align:center;
}
.eco-title-row .sec-tag { color:rgba(255,255,255,.75); justify-content:center; }
.eco-title-row .sh {
  font-family:var(--heading-font);
  font-weight:700; color:#fff; margin-bottom:28px;
}
.eco-title-row .btn-primary { background:#fff; color:var(--black); }
.eco-title-row .btn-primary:hover { background:#fff; opacity:.9; }
.eco-title-row .btn-primary span { color:var(--gold); }
.eco-sec {
  position:relative; height:750px;
  overflow:hidden;
  width:1350px; margin:100px auto;
  border-radius:16px;
}
.eco-bg-wrap {
  position:absolute; inset:0; z-index:0;
}
.eco-bg-img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:opacity .6s ease;
  opacity:0;
}
.eco-bg-overlay {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.82) 100%);
}
.eco-top-label {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.7); padding:32px 60px 0;
}
.eco-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--red); flex-shrink:0;
}
.eco-desc-area {
  padding:0 24px 32px;
  max-width:1350px; margin:0 auto; width:100%;
  position:relative; min-height:100px;
}
.eco-desc-text {
  opacity:0; transition:opacity .4s ease;
  pointer-events:none; max-width:1040px; width:90%;
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  text-align:center;
}
.eco-desc-text.active { opacity:1; pointer-events:auto; }
.eco-desc-text p { font-size:15px; font-weight:400; color:rgba(255,255,255,.8); line-height:1.7; margin:4px 0 10px; }
.eco-desc-logo { width:100px; height:auto; display:block; margin:0 auto 16px; }
.eco-desc-type { font-size:22px; font-weight:700; letter-spacing:.02em; text-transform:none; color:#fff; margin-bottom:8px; }
.eco-desc-link { font-size:15px; font-weight:700; color:white; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:1px; transition:border-color .2s; }
.eco-desc-link:hover { border-bottom-color:white; }

/* 2026-07-22 — Ad banner section (CHỈ tiếng Nhật, xem front-page.php), nằm giữa Ecosystem
   và Technology (trust-sec). Nền màu #F5F5F5, ảnh new_banner.webp (đã tối ưu từ .png gốc)
   canh giữa, giữ đúng padding nhịp section chuẩn của site (96px 60px, xem ".sec"). */
.ad-banner-sec { background:#F5F5F5; padding:96px 60px; display:flex; justify-content:center; }
.ad-banner-in { width:100%; max-width:900px; }
.ad-banner-img { width:100%; height:auto; display:block; border-radius:20px; }
.eco-tabs-wrap {
  position:absolute; bottom:0; left:0; right:0; z-index:1;
  padding-bottom:40px;
}
.eco-tabs {
  display:grid; grid-template-columns:repeat(6,1fr);
  max-width:1350px; margin:0 auto;
}
.eco-tab {
  padding:20px 24px 0;
  border-right:1px solid rgba(255,255,255,.1);
  cursor:pointer; transition:background .2s;
}
.eco-tab:last-child { border-right:none; }
.eco-tab:hover { background:rgba(255,255,255,.05); }
.eco-tab-cat {
  font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-bottom:6px; line-height:1.3; white-space:nowrap;
}
.eco-tab-name {
  font-size:15px; font-weight:700; color:rgba(255,255,255,.55);
  margin-bottom:16px; transition:color .2s;
}
.eco-tab.active .eco-tab-name { color:white; }
.eco-tab-bar { height:2px; background:rgba(255,255,255,.2); position:relative; overflow:hidden; }
.eco-tab-fill { position:absolute; left:0; top:0; height:100%; width:0%; background:white; }

/* ── PHILOSOPHY / OUR MISSION ── */
.philo-sec { position:relative; overflow:hidden; padding:100px 0; display:flex; align-items:center; min-height:100vh; background:#fff; }
.philo-bg { position:relative; flex-shrink:0; width:600px; height:750px; margin-left:200px; border-radius:30px; overflow:hidden; }
.philo-bg video { width:100%; height:100%; object-fit:cover; display:block; }
.philo-left { position:relative; z-index:1; }
.philo-in { position:relative; z-index:1; width:100%; margin-left:100px; }
.philo-col-single { max-width:520px; margin:0; text-align:left; }
.philo-col-single .body-copy { max-width:none; margin:0; }
h2.philo-h2 { font-size:22px; margin-bottom:28px; line-height:1.35; white-space:nowrap; }
.philo-subhead {
  font-family:var(--heading-font);
  font-size:22px; font-weight:700; color:var(--black); letter-spacing:.01em;
  margin:44px 0 16px; line-height:1.5;
}
.philo-cta { margin-top:32px; }

/* ── TRUST DARK ── */
.trust-sec { position:relative; }
.trust-viewport {
  position:sticky; top:0; height:100vh; min-height:640px;
  display:flex; align-items:center;
  padding:60px;
  background:#0a0603; overflow:hidden;
  background-image: url('../images/bg1.webp');
  background-size: cover;
  background-position: center;
}
.trust-in {
  max-width:1280px; margin:0 auto; position:relative; z-index:1; width:100%;
  display:flex; align-items:center; gap:64px;
}
.trust-left { flex:0 0 420px; }
.trust-hl { font-family:var(--heading-font); font-size:var(--h2-size); font-weight:var(--heading-weight); color:white; letter-spacing:var(--h2-tracking); line-height:1.2; max-width:none; }
.trust-desc { font-size:15px; font-weight:400; color:rgba(255,255,255,1); line-height:2; margin-top:10px; max-width:400px; }

.trust-right-mask {
  flex:1; position:relative; overflow:hidden; height:calc(100vh - 120px);
}
.trust-right-track {
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
  will-change:transform;
}
.trust-card {
  display:flex; align-items:flex-start; gap:24px;
  flex-shrink:0; width:680px; max-width:100%;
  background:rgba(0,0,0,.25); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-radius:24px; padding:32px; transition:background .25s;
}
.t-icon { flex-shrink:0; line-height:0; position:relative; }
.t-icon svg { position:relative; z-index:1; }
.t-icon::before {
  content:''; position:absolute; top:50%; left:50%;
  width:132px; height:132px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.92);
  background:radial-gradient(circle, rgba(245,90,33,.4) 0%, rgba(245,90,33,0) 70%);
  animation:tcardGlow 4s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
.t-icon svg circle[stroke="rgba(255,255,255,.28)"] {
  stroke-dasharray:2 7;
  transform-box:fill-box; transform-origin:50% 50%;
  animation:tcardRingSpin 14s linear infinite;
}
.t-icon svg circle[fill="#F5AA19"] {
  transform-box:fill-box; transform-origin:50% 50%;
  animation:tcardDotPulse 2.2s ease-in-out infinite;
}
@keyframes tcardGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.55; }
  50% { transform:translate(-50%,-50%) scale(1.14); opacity:.95; }
}
@keyframes tcardRingSpin { to { transform:rotate(360deg); } }
@keyframes tcardDotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.4; transform:scale(1.3); }
}
.t-content { flex:1; min-width:0; }
.t-tag { font-size:11px; font-weight:700; color:rgba(255,255,255,.45); letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; }
.t-title { font-size:16px; font-weight:800; color:white; margin-bottom:10px; line-height:1.3; }
.t-body { font-size:15px; font-weight:400; color:rgba(255,255,255,1); line-height:2; margin-bottom:14px; }
.t-link { font-size:12.5px; font-weight:700; color:rgba(255,255,255,.75); text-decoration:none; }

.trust-stat-card {
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.2); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  border-radius:16px; padding:16px 20px; width:auto; max-width:100%; margin-top:28px;
}
.tsc-star { font-size:18px; color:var(--gold); flex-shrink:0; }
.tsc-title { font-size:11.5px; font-weight:800; color:#fff; letter-spacing:.04em; white-space:nowrap; }
.tsc-sub { font-size:10px; color:rgba(255,255,255,.65); margin-top:2px; }

.trust-cta-btn {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:20px; padding:13px 22px; border-radius:10px;
  background:var(--black); border:1px solid transparent; color:#fff;
  font-size:13px; font-weight:700; text-decoration:none; transition:all .2s;
}
.trust-cta-btn:hover { background:var(--dark); transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.3); }

/* ── GLOBAL GLOBE ── */
.ag-sec {
  position:relative; background:#f3f2ec; overflow:hidden; padding:0;
  height:100vh; min-height:680px;
}
.ag-globe-wrap {
  position:absolute;
  left:150px; right:150px;
  top:50%; transform:translateY(-50%);
  z-index:2;
}
#agCanvas { display:block; width:100%; cursor:grab; }
#agCanvas:active { cursor:grabbing; }
.ag-header {
  position:absolute; top:60px; left:0; right:0;
  z-index:10; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 20px;
}
.ag-header .sec-tag { display:flex; justify-content:center; margin-bottom:8px; color:var(--black); }
.ag-header h2.sh {
  color:var(--black); margin:0 auto 6px;
  font-family:var(--heading-font);
  font-size:var(--h2-size); font-weight:var(--heading-weight); letter-spacing:var(--h2-tracking);
  text-align:center;
}
.ag-header .sh-sub { font-size:13px; font-weight:600; color:var(--black); margin:30px 0 10px; text-align:center; }
.ag-regions {
  display:inline-flex; align-items:center; gap:12px;
  white-space:nowrap; margin-top:28px;
}
.ag-regions-label {
  font-size:13px; font-weight:700; letter-spacing:.04em;
  color:var(--black); opacity:.75; white-space:nowrap; flex-shrink:0;
}
.ag-regions-list {
  font-size:13px; font-weight:600; color:var(--black);
  letter-spacing:.02em; line-height:1; white-space:nowrap;
}
.ag-info {
  position:absolute; bottom:0; left:0; right:0;
  background:transparent;
  z-index:11; pointer-events:none;
  padding:0 0 122px;
  display:flex; justify-content:center; align-items:flex-end;
}
.ag-info-inner {
  width:min(560px, 88vw);
  text-align:left;
  background:transparent;
  padding:16px 0 0;
}
.agi-detail { transition:opacity .45s ease; }
.agi-detail.hidden { opacity:0; }
.ag-dots-inline {
  display:flex; justify-content:flex-start; gap:10px;
  margin-bottom:16px; pointer-events:all;
}
.agi-country {
  display:inline-block;
  background:#F5AA19; color:var(--black);
  font-size:10.5px; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 14px; border-radius:4px;
  margin-bottom:10px;
}
.agi-name { font-size:13px; color:var(--black); margin-bottom:4px; font-weight:600; opacity:.7; }
.agi-name span, .agi-jp span, .agi-desc span {
  display:inline;
  background:#f3f2ec;
  padding:1px 6px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  line-height:1.8;
}
.agi-jp {
  font-size:24px; font-weight:700; color:var(--black);
  font-family:var(--heading-font); line-height:1.8; margin-bottom:8px;
}
.agi-desc { font-size:15px; font-weight:400; color:var(--black); line-height:2; max-width:100%; margin:0; opacity:.75; }
.ag-dots { display:none; }
.ag-dot {
  width:14px; height:14px; border-radius:50%;
  background:rgba(0,0,0,0.2); border:none; cursor:pointer; padding:0;
  transition:all .3s; flex-shrink:0;
}
.ag-dot.active { background:var(--black); width:32px; height:14px; border-radius:7px; }

/* ── NEWSROOM ── */
.news-table { width:100%; border-collapse:collapse; }
.news-table th { font-size:10px; font-weight:700; color:var(--gray-4); text-transform:uppercase; letter-spacing:.1em; padding:10px 0; border-bottom:4px solid var(--gray-2); text-align:left; }
.news-table td { padding:20px 0; border-bottom:2px solid var(--gray-1); vertical-align:top; }
.news-table tbody tr:first-child td { border-top:2px solid var(--gray-1); }
.news-date { font-size:12px; color:var(--gray-4); width:110px; }
.news-title { font-size:15px; color:var(--black); line-height:2; font-weight:400; }
/* Tiêu đề news trên trang chủ giờ là link thật (trỏ vào bài viết) — giữ nguyên màu/size như
   .news-title cũ, chỉ đổi màu khi hover để báo hiệu có thể bấm. */
.news-title-link { color:inherit; text-decoration:none; transition:color .15s; }
.news-title-link:hover { color:var(--red); }
.news-src { width:130px; text-align:right; padding-top:2px; }
.ntag { display:inline-block; font-size:9px; font-weight:400; padding:3px 10px; border-radius:20px; letter-spacing:.04em; text-transform:uppercase; }
.nt-r { background:rgba(241,46,17,.08); color:rgba(241,46,17,.75); }
.nt-m { background:rgba(245,170,25,.12); color:rgba(180,110,0,.8); }
.nt-l { background:rgba(243,108,14,.1); color:rgba(200,85,0,.75); }
.news-more { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--black); text-decoration:none; margin-top:22px; }
/* NGOẠI LỆ có chủ đích: mũi tên News dùng màu đỏ brand thay vì gold mặc định
   (đồng bộ với tag màu đỏ của section News). Nếu cần đổi lại gold, xoá dòng
   dưới — mặc định .arr sẽ tự áp dụng lại. */
.news-more .arr { color:var(--red); }

/* ── CTA BANNER ── */
.cta-banner {
  margin:0 60px 96px; border-radius:20px;
  background:var(--dark); padding:72px 80px;
  display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center;
  position:relative; overflow:hidden;
}
.cta-banner::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 80% at 20% 50%, rgba(241,46,17,.08) 0%, transparent 55%);
}
.cta-copy { position:relative; z-index:1; }
.cta-tag { font-size:10px; font-weight:800; color:rgba(255,255,255,.35); letter-spacing:.14em; text-transform:uppercase; margin-bottom:12px; }
.cta-title { font-family:var(--heading-font); font-size:clamp(24px,2.8vw,36px); font-weight:700; color:white; line-height:1.2; margin-bottom:10px; letter-spacing:.01em; }
.cta-sub { font-size:14px; font-weight:400; color:rgba(255,255,255,.45); margin-bottom:32px; }
.cta-btns { display:flex; gap:12px; }
.cta-w { background:white; color:var(--dark); padding:13px 26px; border-radius:10px; font-size:13px; font-weight:800; text-decoration:none; transition:all .2s; }
.cta-w:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.25); }
.cta-g { background:var(--grad); color:white; padding:13px 26px; border-radius:10px; font-size:13px; font-weight:800; text-decoration:none; transition:all .2s; box-shadow:0 4px 16px rgba(241,46,17,.3); }
.cta-g:hover { opacity:.9; transform:translateY(-1px); }
.cta-right { position:relative; z-index:1; flex-shrink:0; }
.cta-stat-box { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:28px 32px; text-align:center; }
.cta-stat-num { font-size:40px; font-weight:900; background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cta-stat-lbl { font-size:12px; color:rgba(255,255,255,.45); margin-top:4px; font-weight:500; }

/* ── DOWNLOAD APP ── */
.dl-sec {
  position:relative;
  background:#fff;
  margin:0; padding:100px 80px 30px;
}
.dl-in {
  position:relative; z-index:1; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; gap:40px; align-items:center;
}
.dl-copy { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.dl-title { font-family:var(--heading-font); font-size:var(--h2-size); font-weight:var(--heading-weight); color:var(--black); line-height:1.3; margin:14px 0 32px; letter-spacing:var(--h2-tracking); }
.dl-sub { font-size:15px; font-weight:400; color:var(--gray-4); line-height:1.9; max-width:440px; margin-bottom:40px; }
.dl-btns { display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-start; }
.dl-btns-mobile { display:none; }
.dl-center { position:relative; display:flex; align-items:center; justify-content:center; }
.dl-phone-wrap { position:relative; z-index:2; flex-shrink:0; }
.dl-phone-frame {
  height:500px; width:232px;
  border-radius:32px; overflow:hidden; position:relative;
}
.dl-phone-frame video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.dl-deco {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1;
  height:680px; width:680px; display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.dl-deco-glow {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:var(--grad); opacity:.4; filter:blur(90px);
  animation: dlDecoBreathe 4s ease-in-out infinite;
}
.dl-deco-ring,
.dl-deco-ring2,
.dl-deco-ring3,
.dl-deco-ring4 {
  position:absolute; width:420px; height:420px; border-radius:50%;
  border:1px solid #fff;
  opacity:0;
  animation: dlDecoRipple 4.5s ease-out infinite;
  animation-fill-mode: backwards;
}
.dl-deco-ring2 { animation-delay:1.125s; }
.dl-deco-ring3 { animation-delay:2.25s; }
.dl-deco-ring4 { animation-delay:3.375s; }
.dl-deco-mark {
  position:relative; width:88px; height:auto; z-index:1;
  filter:drop-shadow(0 8px 20px rgba(241,46,17,.18));
  animation: dlDecoFloat 3.6s ease-in-out infinite;
}

.dl-stats { display:flex; flex-direction:column; margin-left:120px; }
.dl-stats .sbar-item {
  position:relative;
  padding:22px 0; border-right:none; border-bottom:none;
  align-items:flex-start; text-align:left;
}
.dl-stats .sbar-item::after {
  content:''; position:absolute; left:0; bottom:0; width:220px; height:1px;
  background:var(--gray-2);
}
.dl-stats .sbar-item:first-child { padding-top:0; }
.dl-stats .sbar-item:last-child { padding-bottom:0; }
.dl-stats .sbar-item:last-child::after { display:none; }
.dl-stats .sbar-val { font-size:clamp(32px,3vw,44px); }
@keyframes dlDecoBreathe {
  0%,100% { transform:scale(1); opacity:.16; }
  50%     { transform:scale(1.14); opacity:.3; }
}
@keyframes dlDecoRipple {
  0%   { transform:scale(.1); opacity:1; }
  100% { transform:scale(1.4); opacity:0; }
}
@keyframes dlDecoFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-10px); }
}

.dl-marquee {
  grid-column:1 / -1;
  /* 2026-07-23 — Fix lỗi lệch/tràn ngang bên phải trên một số device + khi chuyển
     PC/Mobile trong trình duyệt: "100vw" tính CẢ độ rộng thanh scrollbar (nơi trình
     duyệt có scrollbar chiếm chỗ), trong khi "%" không tính — khiến full-bleed marquee
     rộng hơn khung nhìn thực tế đúng bằng độ rộng scrollbar, đẩy trang lệch/tràn phải.
     Dùng biến --vw100 (đo bằng document.documentElement.clientWidth, xem main.js đầu
     file) làm giá trị "vw" chính xác, không tính scrollbar; fallback 100vw nếu JS
     chưa kịp chạy. */
  width:var(--vw100, 100vw); margin:70px calc(50% - (var(--vw100, 100vw) / 2)) 0; overflow:hidden;
  height:225px; display:flex; align-items:center;
}
.dl-marquee-track {
  display:flex; align-items:center; width:max-content;
  animation: dlMarqueeScroll 22s linear infinite;
}
.dl-marquee-track span {
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-size:225px; line-height:1; font-weight:800;
  color:transparent; -webkit-text-stroke:0.5px var(--black); text-stroke:0.5px var(--black);
  letter-spacing:.02em; white-space:nowrap; padding:0 40px;
  opacity:.6;
}
@keyframes dlMarqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── FOOTER ── */
footer { background:var(--dark); padding:56px 60px 32px; }
.foot-in { max-width:1280px; margin:0 auto; }
.foot-top { margin-bottom:44px; }
.foot-logo img { height:32px; display:block; }
.foot-tagline { font-size:11.5px; color:rgba(255,255,255,.25); margin-top:7px; }
.foot-links { display:grid; grid-template-columns:repeat(4,1fr); gap:36px; margin-bottom:44px; }
.foot-col-t { font-size:12px; font-weight:700; color:rgba(255,255,255,.25); text-transform:uppercase; letter-spacing:.12em; margin-bottom:14px; }
.foot-link { display:block; font-size:15px; color:rgba(255,255,255,.45); text-decoration:none; margin-bottom:15px; transition:color .15s; }
.foot-link:hover { color:white; }
.foot-bottom { display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,.12); padding-top:20px; }
.foot-copy { font-size:15px; font-weight:400; color:rgba(255,255,255,.2); white-space:nowrap; }
.foot-social { display:flex; align-items:center; gap:16px; }
.foot-social a { display:flex; color:rgba(255,255,255,.4); transition:color .15s; }
.foot-social a:hover { color:var(--gold); }
br.mob-br { display:none; }
br.laptop-br { display:none; }

/* ════════════════════════════════════
   HAMBURGER (desktop: hidden)
   ════════════════════════════════════ */
.nav-hamburger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; cursor:pointer; padding:6px; margin-left:8px;
  background:none; border:none;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:white; border-radius:2px; transition:all .3s;
}
nav.scrolled .nav-hamburger span, nav.nav-theme-light .nav-hamburger span, nav.nav-theme-light-transparent .nav-hamburger span { background:var(--black); }
.nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile slide-in menu */
.mobile-menu {
  position:fixed; inset:0; z-index:99;
  background:rgba(255,255,255,.97); backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  padding:88px 32px 48px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.mobile-menu.open { transform:translateX(0); pointer-events:auto; }
.mobile-menu nav-link-m {
  font-size:26px; font-weight:700; color:var(--black);
  text-decoration:none; padding:18px 0;
  border-bottom:1px solid var(--gray-2); display:block;
  letter-spacing:.01em;
}
.mobile-menu a {
  font-size:15px; font-weight:600; color:var(--black);
  text-decoration:none; padding:16px 0;
  border-bottom:1px solid var(--gray-2); display:block;
  letter-spacing:.01em; transition:color .15s;
}
.mobile-menu a:hover { color:var(--red); }
.mobile-menu a:last-of-type { border-bottom:none; }
.mobile-menu-cta {
  margin-top:0 !important; border-top:1px solid var(--gray-2);
  padding-top:50px !important;
}
.mobile-menu-cta a {
  display:block; background:var(--black); color:white !important;
  padding:16px 24px; border-radius:12px; text-align:center;
  font-size:15px; font-weight:800; border-bottom:none !important;
  letter-spacing:.04em;
}
.mobile-menu-social {
  display:flex; align-items:center; justify-content:center;
  gap:22px; margin-top:24px;
}
.mobile-menu-social a { color:var(--black); display:flex; padding:0; border-bottom:none !important; transition:color .15s; }
.mobile-menu-social a:hover { color:var(--red); }

/* ════════════════════════════════════
   STORY PAGE (page-story.php) — dải nền tối liên tục, dùng lại token/class chung
   (.sec-tag/.eyebrow/h2.sh/.body-copy/.btn-primary/.arr...) + vài class riêng layout
   dưới đây. Xem STYLEGUIDE_aiavatar_2026.md — không hard-code màu/size mới ở đây.
   ════════════════════════════════════ */

/* Section 1 — Page Hero (video nền, giống cách làm .eco-sec/.eco-bg-wrap+overlay)
   Căn trái, dồn xuống đáy màn hình — theo đúng layout .hero-left của trang chủ. */
.story-hero {
  position:relative; overflow:hidden; background:var(--black);
  padding:0 40px 60px 70px; text-align:left;
  min-height:100vh; display:flex; align-items:flex-end; justify-content:flex-start;
}
.story-hero-bg { position:absolute; inset:0; z-index:0; }
.story-hero-bg video { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.story-hero-in { position:relative; z-index:2; max-width:1100px; margin:0 0 130px; }
.story-hero .sec-tag { justify-content:flex-start; color:var(--on-dark-100); }
.story-hero h1 {
  /* Nhỏ hơn 10px so với --display-size gốc (token dùng chung, chỉ giảm riêng ở đây,
     không đụng --display-size để không ảnh hưởng h1 trang chủ). */
  font-size:calc(var(--display-size) - 10px); line-height:var(--display-line);
  letter-spacing:var(--h1-tracking); margin:var(--space-5) 0;
}
/* Từ trọng tâm — đổ gradient giống logo, cùng cách làm .hero-h1-ja span ở trang chủ (パートナー。) */
.story-hero h1 span {
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.story-hero-sub {
  font-size:16px; font-weight:400; line-height:1.9; color:var(--on-dark-100);
  max-width:560px; margin:0;
}

/* Section 2 — The Genesis (split layout: narrative trái + timeline panel phải) */
.genesis-sec { background:var(--white); padding:var(--section-py) var(--section-px); }
.genesis-in {
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-8);
  align-items:start;
}
.genesis-text .eyebrow { display:block; margin-bottom:var(--space-3); }
.genesis-text h2 { margin-bottom:var(--space-5); }
.genesis-quote {
  position:relative; padding-left:var(--space-4);
  margin-top:var(--space-5); font-size:15px; line-height:1.9;
  font-style:italic;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.genesis-quote::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad); border-radius:2px;
}
.genesis-panel {
  background:var(--gray-1); border:1px solid rgba(0,0,0,.08);
  border-radius:var(--radius); padding:var(--space-6);
}
.genesis-panel-label {
  font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray-4); margin-bottom:var(--space-3);
}
.genesis-node {
  display:flex; align-items:center; gap:var(--space-3);
  font-size:13px; color:var(--gray-6); line-height:1.6;
  padding:var(--space-3) 0; border-bottom:1px solid rgba(0,0,0,.08);
}
.genesis-node:last-of-type { border-bottom:none; }
.genesis-dot { width:7px; height:7px; border-radius:50%; background:var(--gray-4); flex-shrink:0; }
.genesis-dot.gold { background:var(--gold); }
.genesis-note {
  margin-top:var(--space-4); padding-top:var(--space-4);
  border-top:1px solid rgba(0,0,0,.08);
  font-size:12px; line-height:1.8; color:var(--gray-4);
}
.genesis-note strong { color:var(--gray-6); font-weight:600; }

/* Section 3 — The Silent Efforts (intro + 3 hàng text/video, nền ảnh bg3.png — url set inline
   qua custom property --efforts-bg-pc/--efforts-bg-mb trên thẻ section, xem page-story.php) */
/* .efforts-pin: wrapper "ghim" section — chiều cao được JS (main.js) set = tổng chiều cao
   nội dung thật (>= 100vh), để trang phải cuộn qua đúng từng đó mới nhả section đi tiếp.
   .efforts-sec dùng position:sticky top:0 bên trong wrapper này — đây là cách ghim chuẩn
   bằng trình duyệt (không hack preventDefault trên wheel), nên hoạt động đúng với mọi kiểu
   cuộn (chuột, trackpad, chạm, phím, kéo thanh cuộn) và không bị "trôi sớm". */
.efforts-pin { position:relative; min-height:100vh; }
.efforts-sec {
  position:sticky; top:0; overflow:hidden; height:100vh;
  background-color:var(--black);
}
.efforts-scroll {
  /* CHỦ Ý dùng overflow:hidden (không phải auto) — không để trình duyệt cho phép cuộn chuột
     trực tiếp vào div này. Nếu để overflow-y:auto, khi con trỏ chuột đang ở trong vùng section
     (rất thường xuyên vì section chiếm cả màn hình), trình duyệt sẽ ưu tiên cuộn NGUYÊN SINH
     bên trong div này trước, giành mất wheel event khỏi trang ngoài — gây đúng lỗi đã gặp
     (nội dung "dùng hết" sớm trước khi section thật sự được ghim, hoặc kẹt cứng không nhả).
     Với overflow:hidden, mọi thao tác cuộn luôn tác động lên trang ngoài (nơi có sticky thật
     của trình duyệt lo việc ghim) — JS (main.js) chỉ set scrollTop bằng code theo đúng tiến độ
     cuộn trang ngoài để "lộ" nội dung, scrollTop vẫn hoạt động bình thường dù overflow:hidden. */
  position:absolute; inset:0; overflow:hidden;
  background-image:var(--efforts-bg-pc); background-size:cover; background-position:center;
  /* Padding đặt ở đây (trên .efforts-scroll — phần tử rộng full section), giống hệt cách
     .genesis-sec làm với .genesis-in — để .efforts-in bên trong CHỈ lo việc căn giữa max-width,
     không cộng dồn thêm padding riêng → mép trái text 2 section luôn thẳng hàng nhau. */
  padding:var(--section-py) var(--section-px);
}
.efforts-in { max-width:1280px; margin:0 auto; width:100%; }
.efforts-intro { margin-bottom:var(--space-7); }
.efforts-grid { display:flex; flex-direction:column; gap:var(--space-7); }
.effort-card {
  display:flex; align-items:center; justify-content:space-between; gap:40px;
  width:100%;
  background:transparent; border:none; border-radius:0; overflow:visible;
}
.effort-text { flex:0 0 370px; max-width:370px; padding:0; }
.effort-media {
  /* Video căn phải, thẳng mép với cột TIMELINE (.genesis-panel) — cùng dùng max-width:1280px
     margin:0 auto như .genesis-in nên mép phải 2 container luôn trùng nhau. */
  flex:0 0 800px; width:800px; height:500px; margin-left:auto; position:relative;
  border-radius:24px; overflow:hidden;
}
.effort-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* PC/laptop dùng bản PC, ẩn bản MB (đảo lại trong @media 768px) */
.effort-media .effort-video-mb { display:none; }
.effort-icon { display:none; }
.effort-title { font-size:var(--h5-size); font-weight:700; color:var(--on-dark-100); margin-bottom:var(--space-3); line-height:1.5; }
.effort-body { font-size:15px; color:var(--on-dark-100); line-height:1.9; }
/* .efforts-intro dùng chung cho cả 2 section (Efforts + Mission Approach, xem page-story.php)
   — cho tag/heading/đoạn intro trắng 100% opacity thay vì mờ (.5/.72 mặc định của .sec-tag.on-dark
   /.body-copy.on-dark), theo yêu cầu riêng cho 2 section này. */
.efforts-intro .sec-tag.on-dark { color:var(--on-dark-100); }
.efforts-intro .body-copy.on-dark { color:var(--on-dark-100); }

/* Section 4 — The Mission Approach (đơn giản hoá: 1 màn hình tĩnh, không ghim/cuộn) — chia 2 cột
   bằng .action-split: trái .action-text-col (intro + list 3 ý, vùng text rộng ra), phải
   .action-media — video kích thước CỐ ĐỊNH đúng bằng .philo-bg (section OUR MISSION ở
   front-page.php: 600x750, radius 30px), cách text đúng 100px. Đã bỏ ảnh nền bg1.png → nền
   trắng, text đen (override .on-dark bên dưới — CHỈ áp dụng trong phạm vi .action-sec, các
   section khác dùng chung class .efforts-intro/.sh.on-dark/.body-copy.on-dark ở nơi khác trên
   trang vẫn giữ nguyên chữ trắng). */
.action-sec {
  min-height:100vh; display:flex; align-items:center;
  background-color:var(--white);
  padding:var(--section-py) var(--section-px);
}
.action-in { max-width:1280px; margin:0 auto; width:100%; }
.action-split { display:flex; align-items:center; gap:100px; }
.action-text-col {
  flex:0 0 580px; max-width:580px;
  display:flex; flex-direction:column; justify-content:center; gap:var(--space-7);
}
.action-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-5); }
.action-list li { display:flex; align-items:flex-start; gap:14px; }
.action-check {
  width:28px; height:28px; border-radius:50%; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,170,25,.12); border:1px solid rgba(245,170,25,.5);
}
.action-list li span:last-child { font-size:15px; color:var(--on-dark-100); line-height:1.9; }
.action-media {
  flex:0 0 600px; width:600px; height:750px; margin-left:auto; position:relative;
  border-radius:30px; overflow:hidden;
}
.action-media video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Nền trắng → chữ đen, chỉ scope trong .action-sec (không đụng section khác dùng chung class) */
.action-sec .efforts-intro .sec-tag.on-dark,
.action-sec h2.sh.on-dark,
.action-sec .body-copy.on-dark,
.action-sec .mission-subhead,
.action-sec .action-list li span:last-child {
  color: var(--black);
}

/* Section 4b — The Mission & Action (center, mission statement + bullets + 2 CTA, video nền) —
   cao đúng 1 màn hình, nội dung căn giữa theo chiều dọc; vùng text nới rộng hơn bản trước. */
.mission-sec {
  position:relative; overflow:hidden; background:var(--black);
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:var(--section-py) var(--section-px); text-align:center;
}
.mission-bg { position:absolute; inset:0; z-index:0; }
.mission-bg video { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* Lớp phủ đen 20% trên video để tăng tương phản cho text */
.mission-bg::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,.2); }
.mission-in { position:relative; z-index:2; max-width:900px; margin:0 auto; width:100%; }
.mission-sec .sec-tag { justify-content:center; }
.mission-sec h2 { margin-bottom:var(--space-6); }
/* Text trong section này opacity 100% (thay vì mờ 72%/75% mặc định của .on-dark/.mission-closer) */
.mission-sec .body-copy.on-dark,
.mission-sec .mission-closer {
  color: var(--on-dark-100);
}
.mission-sec .body-copy { max-width:none; margin:0 auto var(--space-5); text-align:center; }
.mission-subhead {
  font-family:var(--heading-font);
  font-size:22px; font-weight:700; color:var(--on-dark-100);
  letter-spacing:.01em; margin-bottom:var(--space-4);
}
.mission-list {
  list-style:none; text-align:left; max-width:600px; margin:0 auto var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-3);
}
.mission-list li { font-size:14px; color:var(--on-dark-65); line-height:1.9; padding-left:20px; position:relative; }
.mission-list li::before { content:'—'; position:absolute; left:0; color:var(--gold); }
.mission-closer { font-size:14px; color:var(--on-dark-75); margin-top:var(--space-6); margin-bottom:var(--space-2); }
.mission-brand { font-size:17px; font-weight:700; color:var(--on-dark-100); letter-spacing:.02em; margin-bottom:var(--space-6); }
/* Ngắt dòng chỉ hiện trên mobile (xem override trong @media 768px) — desktop/laptop vẫn 1 dòng */
.mission-brand br.mission-br-mobile { display:none; }
.mission-cta { display:flex; justify-content:center; gap:var(--space-4); flex-wrap:wrap; }

/* Section 5 — Tech Discovery (cầu nối cuối trang → /technology/) — cao cố định 500px, khớp đúng
   chiều cao ảnh nền, liền mạch với section trên/dưới (không còn khoảng trắng đệm). Nền bg1.png
   phủ full-bleed edge-to-edge, không lớp phủ tối — hiển thị ảnh gốc. */
.tech-bridge {
  position:relative; overflow:hidden;
  height:500px; display:flex; align-items:center; justify-content:center;
  padding:0 var(--section-px); text-align:center;
}
.tech-bridge-bg {
  position:absolute; inset:0;
  width:100%; height:100%;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.tech-bridge-in { position:relative; z-index:2; max-width:640px; margin:0 auto; }
.tech-bridge-in p { font-size:15px; color:var(--on-dark-100); line-height:1.9; margin-bottom:50px; }
.tech-bridge-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--black); text-decoration:none;
  background:var(--white); border:1px solid var(--white); padding:10px 20px; border-radius:var(--radius-sm);
  transition:all .2s;
}
/* Hover giống pattern nút top page (.btn-primary/.trust-cta-btn): nhô lên + đổ bóng,
   KHÔNG đổi màu chữ sang vàng, chỉ bỏ border (border-color:transparent). */
.tech-bridge-link:hover {
  border-color: transparent;
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* ════════════════════════════════════
   PRODUCTS PAGE (page-products.php) — dải nền tối liên tục, dùng lại token/class chung
   (.sec-tag/h2.sh/.sh-sub/.body-copy/.arr/.eco-bg-overlay/.eco-desc-link/.tech-bridge-link...)
   + vài class riêng layout dưới đây. Xem STYLEGUIDE_aiavatar_2026.md — không hard-code
   màu/size mới ở đây.
   ════════════════════════════════════ */

/* Section 1 — Page Hero: video nền — PC dùng product_hero_PC.mp4, mobile dùng product_hero_MB.mp4.
   Cả 2 video đều nền TRẮNG → dùng $aia_header_theme='light' (page-products.php) cho nav + đổi
   chữ hero sang màu đen ngay dưới đây (áp dụng CẢ PC lẫn mobile, không scope theo breakpoint
   nữa). Text căn trái, dồn xuống đáy màn hình, đúng y hệt pattern .story-hero của trang Story. */
.products-hero {
  position:relative; overflow:hidden; background:var(--white);
  padding:0 40px 60px 70px; text-align:left;
  min-height:100vh; display:flex; align-items:flex-end; justify-content:flex-start;
}
.products-hero-bg { position:absolute; inset:0; z-index:0; }
.products-hero-bg video { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.products-hero-bg video.products-hero-video-mb { display:none; }
.products-hero-in { position:relative; z-index:2; max-width:820px; margin:0; }
.products-hero .sec-tag.on-dark { justify-content:flex-start; color:var(--black); }
.products-hero h1.on-dark { color:var(--black); margin:var(--space-5) 0; }
.products-hero .body-copy.on-dark { color:var(--black); }
.products-hero .body-copy { max-width:560px; margin:0; text-align:left; }

/* Section 1.5 — Trust Metrics Bar (ported từ html/option3/index.html) — nền trắng, 4 cột số
   liệu, tái dùng .sbar-item/.sbar-tag/.sbar-val/.sbar-desc đã có sẵn (dùng chung với Showcase
   trang chủ/Download App), chỉ override padding + số cột qua selector scoped riêng bên dưới
   để không đụng 2 nơi kia (3 cột). .grad-plus dùng chung, tô gradient cho ký tự "+". */
.stats-light-sec { background:var(--white); padding:96px var(--section-px); }
.stats-light-sec .stats-bar-inner {
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:1280px; margin:0 auto;
  border-top:1px solid var(--gray-2); border-bottom:1px solid var(--gray-2);
}
.stats-light-sec .sbar-item { padding:52px 40px; }
.grad-plus { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* Section 2 — Core Features: KHÔNG cần CSS riêng — tái dùng 100% .feat-sticky-sec/.feat-nav-col/
   .feat-phone-col/.ftr-panel... đã định nghĩa sẵn ở trên (dùng chung với trang chủ). */

/* Section 3 — Strategic Joint Venture (Dr. Avatar) — spotlight đơn, video nền + overlay.
   Copy Y NGUYÊN kích thước + bố cục vùng text của .eco-sec (Ecosystem) ở trang chủ:
   card width:1350px/height:750px/border-radius:16px cố định (không phải max-width co giãn),
   tag neo TUYỆT ĐỐI ở mép trên (.jv-title-row, giống .eco-title-row), còn logo+tên+mô tả+link
   neo TUYỆT ĐỐI ở mép dưới (.jv-desc-area/.jv-desc-text, giống .eco-desc-area/.eco-desc-text)
   — để giữa card luôn hở ra thấy rõ video, không che kín như bản cũ (flex column canh giữa).
   Đơn giản hoá so với .eco-sec: 1 sản phẩm duy nhất, không có tabs/JS chuyển đổi.
   Nền vùng NGOÀI card (.jv-outer) màu trắng theo yêu cầu chị Hoa — video/overlay bên trong
   card giữ nguyên, không đụng. */
.jv-outer { background:var(--white); padding:250px var(--section-px) 100px; }
.jv-sec {
  position:relative; width:1350px; max-width:100%; height:750px; overflow:hidden;
  margin:0 auto; border-radius:16px;
}
.jv-bg { position:absolute; inset:0; z-index:0; }
.jv-bg video { width:100%; height:100%; object-fit:cover; display:block; }
.jv-title-row {
  position:absolute; top:0; left:0; right:0; z-index:1;
  padding:56px 60px 0; text-align:center;
}
.jv-title-row .sec-tag { color:rgba(255,255,255,.75); justify-content:center; }
.jv-desc-area {
  position:absolute; bottom:0; left:0; right:0; z-index:1;
  padding:0 24px 48px;
}
.jv-desc-text { max-width:1040px; width:90%; margin:0 auto; text-align:center; }
.jv-desc-logo { width:100px; height:auto; display:block; margin:0 auto 16px; }
.jv-desc-type { font-size:22px; font-weight:700; letter-spacing:.02em; color:#fff; margin-bottom:8px; }
.jv-desc-text p { font-size:15px; font-weight:400; color:rgba(255,255,255,.8); line-height:1.7; margin:4px 0 10px; }
.jv-desc-text p strong { color:#fff; }

/* Section 4 — Extended Ecosystem (Twomi / Buzzencer) — thẻ text-only, không CTA download,
   cảnh báo minh bạch quyền sở hữu màu gold (không dùng màu xanh/tím lạ ngoài palette). */
.ext-sec { background:var(--white); padding:var(--section-py) var(--section-px); }
.ext-sec .sec-in { max-width:1280px; }
.ext-disclaimer {
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--gold);
  background:rgba(245,170,25,.08); border:1px solid rgba(245,170,25,.25);
  border-radius:var(--radius-sm); padding:8px 14px; margin-bottom:var(--space-5);
}
.ext-sec .sh-sub { margin-bottom:var(--space-2); max-width:760px; color:var(--black); }
.ext-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-6); margin-top:var(--space-7); }

/* Card giờ là video-preview (tham chiếu Neksai option1-v2 .eco-stage/.stage-cap) — không còn
   box viền/nền, chỉ còn video + mô tả bên dưới. */
.ext-card { background:none; border:none; padding:0; }
.ext-video {
  position:relative; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
  background:var(--black);
}
.ext-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* 2 video xếp chồng, chỉ video .is-active hiện — JS (main.js) chuyển đổi khi video hiện
   tại phát hết (auto-advance, không loop), giống pattern .eco-slide/#ecoStage tham chiếu. */
.ext-video video.ext-slide-video { opacity:0; transition:opacity .5s ease; z-index:0; }
.ext-video video.ext-slide-video.is-active { opacity:1; z-index:1; }
.ext-video-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,0) 36%, rgba(0,0,0,.66) 100%);
}
.ext-live-badge {
  position:absolute; top:16px; left:16px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  height:26px; padding:0 12px; box-sizing:border-box;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.3); border-radius:999px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
/* Chấm "LIVE" giữ màu xanh status (đúng quy ước universal: live = xanh), tách riêng khỏi
   gradient thương hiệu — chỉ dot-nav dùng var(--grad). */
.ext-live-badge .d { width:6px; height:6px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 3px rgba(34,197,94,.22); }

/* Dot-nav chuyển slide thủ công (tham chiếu .eco-dots) — đặt ngay dưới title Twomi/Buzzencer
   (trong .ext-cap, không còn overlay góc video). Dot active giãn thành viên thuốc, cùng
   gradient thương hiệu AIA như chấm LIVE. */
.ext-dots { display:flex; gap:7px; margin-top:10px; }
.ext-dots .ext-dot {
  width:7px; height:7px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background:rgba(255,255,255,.4); transition:background .2s, width .2s;
}
.ext-dots .ext-dot.is-active { background:var(--grad); width:20px; border-radius:4px; }
.ext-cap {
  position:absolute; left:22px; right:22px; bottom:20px; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.ext-cap-cat { font-size:11px; line-height:1; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.78); }
.ext-cap-ttl {
  font-family:var(--heading-font); font-size:clamp(20px,2vw,26px); font-weight:700; line-height:1;
  letter-spacing:-.02em; color:#fff; margin-top:6px; text-shadow:0 1px 18px rgba(0,0,0,.5);
}
/* Dùng đúng style nút chuẩn của site (.btn-primary) thay vì pill kính mờ tự chế —
   nền trắng/chữ đen, bo góc 10px, arr giữ màu gold mặc định của .arr. Cao cố định 40px. */
.ext-cap-link {
  display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap;
  height:40px; padding:0 20px; border-radius:10px;
  background:var(--white); color:var(--black);
  font-size:13px; font-weight:700; letter-spacing:.02em;
  text-decoration:none; transition:all .2s;
}
.ext-cap-link:hover { transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,0,0,.25); }
.ext-body { font-size:14px; color:var(--gray-6); line-height:1.8; margin-top:var(--space-4); }
.ext-body strong { color:var(--black); font-weight:700; }

/* Section 5 — Platform Unifier (B2B closing, trước footer) — căn giữa, nền tối nhất,
   tái dùng nguyên .tech-bridge-link cho CTA (đã có sẵn style pill trắng trên nền tối). */
.unifier-sec {
  background:var(--black) url('../images/bg3_2.webp') center/cover no-repeat;
  padding:var(--section-py) var(--section-px); text-align:center;
}
.unifier-in { max-width:760px; margin:0 auto; }
.unifier-in .sec-tag { justify-content:center; }
.unifier-in h2 { margin-bottom:var(--space-5); }
/* Chữ opacity 100% (thay vì mờ .5/.72 mặc định của .on-dark) — nền ảnh đã đủ tối, không cần mờ chữ */
.unifier-in .sec-tag.on-dark,
.unifier-in .body-copy.on-dark {
  color: var(--on-dark-100);
}
/* CTA đảo màu riêng cho section này: nền đen/chữ trắng (thay vì pill trắng/chữ đen mặc định
   của .tech-bridge-link) — scope trong .unifier-sec để không ảnh hưởng section Technology Bridge
   ở trang chủ vẫn dùng đúng bản gốc. */
.unifier-sec .tech-bridge-link { background:var(--black); border-color:var(--black); color:var(--white); }
.unifier-sec .tech-bridge-link:hover { background:var(--black); border-color:var(--black); }
.unifier-in .body-copy { max-width:none; margin:0 auto var(--space-6); text-align:center; }

/* ════════════════════════════════════
   TECHNOLOGY PAGE (page-technology.php) — dải nền tối liên tục, đúng pattern Story/Products
   (.sec-tag/h1/h2.sh/.sh-sub/.body-copy/.arr/.ftr-tag/.trust-stat-card...) + vài class riêng
   layout dưới đây. Nội dung theo brief upload chị Hoa (technology_JA.html, v1.0 · 2026年6月)
   — 4 section: 1. Page Hero (không video/CTA)  2. Academic Validation (badge NeurIPS, card
   full-width)  3. Core Technology Innovations (7 module, grid 2 cột, module cuối full-width)
   4. Futuristic Scalability (closing statement). Xem STYLEGUIDE_aiavatar_2026.md — không
   hard-code màu/size mới ở đây.
   ════════════════════════════════════ */

/* Section 1 — Page Hero: video nền full-bleed (product_hero_PC_black.mp4 — file có sẵn
   trong assets/video/, đã audit toàn bộ .php/.js xác nhận CHƯA dùng ở trang nào), text căn
   trái dồn xuống đáy màn hình — đúng y hệt layout .story-hero/.products-hero (đồng bộ 3
   trang đã có, không còn kiểu "nền đen phẳng căn giữa" như bản trước). */
.tech-hero {
  position:relative; overflow:hidden; background:var(--black);
  padding:0 40px 60px 70px; text-align:left;
  min-height:100vh; display:flex; align-items:flex-end; justify-content:flex-start;
}
.tech-hero-bg { position:absolute; inset:0; z-index:0; }
.tech-hero-bg video { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.tech-hero-bg::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:rgba(0,0,0,.4);
}
.tech-hero-in { position:relative; z-index:2; max-width:1100px; margin:0 0 130px; }
.tech-hero .sec-tag { justify-content:flex-start; }
.tech-hero .sec-tag.on-dark { color:var(--on-dark-100); }
.tech-hero h1 { margin:var(--space-5) 0; }
.tech-hero .body-copy { max-width:640px; margin:0; text-align:left; }
.tech-hero .body-copy.on-dark { color:var(--on-dark-100); }
.tech-hero-cta-row { display:flex; align-items:center; gap:30px; margin-top:var(--space-6); }
.tech-hero-btn-primary { background:var(--white); border-color:var(--white); color:var(--black); }
.tech-hero-btn-primary:hover { background:var(--white); opacity:.9; }
.tech-hero-btn-secondary { background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.45); color:var(--white); }
.tech-hero-btn-secondary:hover { background:rgba(255,255,255,.3); }

/* Section 2 — Academic Validation: ảnh nền bg3_3.png (đã audit — chưa dùng ở trang nào khác)
   + lớp phủ gradient tối (viết trực tiếp trong background, không cần div overlay riêng),
   đúng tinh thần "ảnh nền + overlay" của .trust-viewport/.tech-bridge-bg (front-page/story) —
   thay cho nền phẳng đơn sắc trước đó. Card kính mờ nổi lên trên bằng z-index.
   Badge tái dùng nguyên .trust-stat-card/.tsc-star/.tsc-title (đã có ở Trust section trang chủ). */
.validation-sec {
  position:relative; overflow:hidden;
  min-height:100vh; display:flex; align-items:center;
  padding:var(--section-py) var(--section-px);
}
.validation-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('../images/neurips-talk.webp') center/cover no-repeat;
}
.validation-card {
  position:relative; z-index:1;
  max-width:1280px; width:100%; margin:0 auto;
  padding:var(--space-8);
}
.validation-card .trust-stat-card {
  margin-top:0; margin-bottom:var(--space-5);
  background:none; border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0;
}
.validation-card .tsc-star {
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.validation-card h2 { margin-bottom:var(--space-5); }
.validation-card .body-copy { max-width:none; }
.validation-card .body-copy.on-dark { color:var(--on-dark-100); }
.val-cite {
  display:inline-block; margin-top:var(--space-5);
  font-size:12.5px; font-weight:700; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3); border-radius:var(--radius-sm);
  padding:6px 14px; letter-spacing:.02em; transition:background .2s, border-color .2s;
}
.val-cite:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.45); }

/* Section 3 — Core Technology Innovations: ảnh nền bg3_4.png (đã audit — chưa dùng ở trang
   nào khác) + overlay tối cùng kỹ thuật Section 2. 7 module, grid 2 cột, module cuối (⑦)
   full-width. Tag số thứ tự tái dùng nguyên .ftr-tag (đã có sẵn ở Core Features). Bố cục
   left-aligned, đúng pattern .ext-sec (tag/h2.sh/.sh-sub trái, grid card bên dưới). */
.innov-sec { position:relative; overflow:hidden; padding:150px var(--section-px) var(--section-py); background:var(--white); }
.innov-bg { display:none; }
.innov-in { position:relative; z-index:1; max-width:1280px; margin:0 auto; }
.innov-in .sec-tag.on-dark { color:var(--gray-4); display:flex; justify-content:center; }
.innov-in .sec-tag.on-dark::after { content:'—'; }
.innov-in h2.sh.on-dark { color:var(--black); text-align:center; }
.innov-in .sh-sub.on-dark { color:var(--black); text-align:center; }
.innov-in .sh-sub { max-width:none; }
.innov-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-6); }
.innov-card { background:#F9F8F6; border:none; border-radius:var(--radius); padding:var(--space-6); }
.innov-card.full { grid-column:1 / -1; }
.innov-card-head { display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-4); }
.innov-card-titles { flex:1; min-width:0; }
.innov-card .ftr-tag { color:var(--gray-4); font-size:11px; font-weight:400; margin-bottom:4px; }
.innov-icon { width:60px; height:60px; margin-bottom:0; flex-shrink:0; }
.innov-icon::before { display:none; }
.innov-icon svg { width:60px; height:60px; }
.innov-icon svg circle[stroke="rgba(255,255,255,.28)"] { stroke:rgba(10,10,8,.35); }
.innov-card h3 { font-size:var(--h4-size); line-height:var(--h4-line); color:var(--black); margin-bottom:0; }
.innov-card p { font-size:14px; color:var(--gray-6); line-height:1.85; }

/* Section 4 — Futuristic Scalability (closing statement, không CTA) — ảnh nền bg4_2.png
   (đã audit — chưa dùng ở trang nào khác) + overlay tối, khép dải nội dung bằng 1 nhịp hình
   ảnh (thay cho màu phẳng --dark trước đó). Bố cục căn giữa, chữ opacity 100% (giống .unifier-in). */
.scalability-sec {
  position:relative; overflow:hidden; text-align:center;
  padding:var(--section-py) var(--section-px);
  background:linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url('../images/bg4.webp') center/cover no-repeat;
}
.scalability-in { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.scalability-in .sec-tag { justify-content:center; }
.scalability-in .sec-tag.on-dark { color:var(--on-dark-100); }
.scalability-in .sec-tag.on-dark::after { content:'—'; }
.scalability-in h2 { margin-bottom:var(--space-5); }
.scalability-in .body-copy { max-width:none; margin:0 auto; text-align:center; }
.scalability-in .body-copy.on-dark { color:var(--on-dark-100); }
.scalability-cta-row { display:flex; justify-content:center; align-items:center; gap:30px; margin-top:var(--space-6); }
.scalability-cta-row .tech-bridge-link { width:220px; justify-content:center; }
.scalability-btn-primary { background:var(--white); border-color:var(--white); color:var(--black); }
.scalability-btn-primary:hover { background:var(--white); opacity:.9; }
.scalability-btn-secondary { background:rgba(255,255,255,.3); border-color:rgba(255,255,255,.45); color:var(--white); }
.scalability-btn-secondary:hover { background:rgba(255,255,255,.3); }

/* ════════════════════════════════════
   COMPANY PAGE (page-company.php) — 5 section: Hero / Corporate Mission /
   Our Team Members / Regional Compliance / Global Presence (section cuối tái
   sử dụng nguyên .ag-sec đã khai báo ở khối GLOBAL GLOBE phía trên — không lặp
   lại CSS ở đây). Chỉ dùng token/màu sẵn có, không hard-code màu/size mới.
   ════════════════════════════════════ */

/* Section 1 — Page Hero: nền ẢNH company_hero.png, căn TRÁI + dồn xuống đáy màn hình (2026-07-15
   lần 77, theo yêu cầu chị Hoa — đúng y hệt layout .story-hero (page-story.php)/.products-hero
   (page-products.php), trước đó là nền đen đặc căn giữa). */
.company-hero {
  position:relative; overflow:hidden; background:var(--black);
  padding:0 40px 60px 70px; text-align:left;
  min-height:100vh; display:flex; align-items:flex-end; justify-content:flex-start;
}
.company-hero-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(10,10,8,.2), rgba(10,10,8,.2)), url('../images/company_hero.webp') center/cover no-repeat;
}
.company-hero-in { position:relative; z-index:1; max-width:1100px; margin:0 0 130px; }
.company-hero .sec-tag { justify-content:flex-start; color:var(--on-dark-100); }
.company-hero h1 {
  font-size:var(--display-size); line-height:var(--display-line);
  letter-spacing:.04em; color:var(--on-dark-100); margin:var(--space-5) 0;
}
.company-hero-sub { font-size:16px; color:var(--on-dark-100); max-width:560px; margin:0; line-height:1.9; }

/* Section 2 — Corporate Mission: ĐỔI sang nền var(--white) theo yêu cầu chị Hoa (trước đó nền
   var(--dark)) — bỏ hết modifier "on-dark" khỏi markup, .sec-tag/.sh mặc định đã đúng màu tối
   cho nền sáng, không cần override thêm. */
.company-mission {
  position:relative; background:var(--white);
  padding:var(--section-py) var(--section-px); text-align:center;
}
.company-mission-in { max-width:760px; margin:0 auto; }
.company-mission-rule { width:48px; height:2px; background:var(--grad); margin:0 auto var(--space-6); border-radius:1px; }
.company-mission .sec-tag { margin-bottom:var(--space-5); }

/* Khối 3 thẻ Mission/Vision/Philosophy — layout đo trực tiếp từ Neksai/about (.ab-axioms/.ab-axiom):
   grid 3 cột đều nhau, gap 20px, thẻ bo góc 18px, tag 10.5px uppercase, h3 22px/600, body 15.5px.
   Thẻ đổi sang nền sáng var(--gray-1) + viền đen mờ (khớp nền trắng của section, trước đó thẻ
   nền trắng mờ .06 dành cho nền tối). */
.company-axioms-wrap {
  max-width:1180px; margin:var(--space-8) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.company-axiom {
  background:#F9F8F6; border:none;
  border-radius:18px; padding:34px 30px 36px; text-align:left;
}
.company-axiom-tag {
  display:block; font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:22px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.company-axiom h3 { font-size:22px; font-weight:600; color:var(--black); margin-bottom:14px; line-height:1.3; }
.company-axiom p { font-size:15px; color:var(--gray-6); line-height:1.85; margin:0; }

/* Section 4 "インフラストラクチャー・フライホイール成長メカニズム" — override RIÊNG cho bản Company
   page (class phụ .company-flywheel-sec), KHÔNG đụng .genesis-sec gốc (Story page vẫn nền trắng).
   Thêm nền video bg_3.mp4 full-bleed + lớp phủ tối để chữ luôn đọc rõ, đảo toàn bộ màu chữ sang
   on-dark, panel bên phải đổi sang kính mờ (giống .trust-card) thay vì nền xám sáng gốc. */
.company-flywheel-sec { position:relative; overflow:hidden; background:var(--black); }
.company-flywheel-bg { position:absolute; inset:0; z-index:0; }
.company-flywheel-bg video { width:100%; height:100%; object-fit:cover; display:block; }
.company-flywheel-bg::after { content:''; position:absolute; inset:0; background:rgba(10,10,8,.72); }
.company-flywheel-sec .genesis-in { position:relative; z-index:1; }
.company-flywheel-sec .genesis-text h2 { color:var(--on-dark-100); }
.company-flywheel-sec .genesis-text .body-copy { color:var(--on-dark-75); }
.company-flywheel-sec .genesis-panel {
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.company-flywheel-sec .genesis-panel-label { color:rgba(255,255,255,.5); }

/* Tỉ lệ 2 cột — ĐỔI SANG ĐÚNG tỉ lệ của section TECHNICAL MOAT phía trên (.trust-in: cột trái
   flex:0 0 420px cố định, cột phải flex:1, gap 64px = var(--space-8), đã có sẵn ở .genesis-in gốc).
   Override RIÊNG trong .company-flywheel-sec (không đụng .genesis-in grid 1fr 1fr gốc dùng ở
   Story page) — đổi grid 2 cột đều nhau sang flex 420px/flex:1 y hệt .trust-in/.trust-left/
   .trust-right-mask. */
.company-flywheel-sec .genesis-in { display:flex; align-items:flex-start; }
.company-flywheel-sec .genesis-text { flex:0 0 420px; }
.company-flywheel-sec .company-flywheel-cards { flex:1; }

/* 3 thẻ bên phải (Zero-Cost Ignition / データ資産の複合的蓄積 / スケールによる収益速度) — nội dung
   lấy từ company_JA.html v2.0 SECTION 3B. Dùng lại NGUYÊN VẸN class .trust-card (thay vì override
   width/padding/icon riêng như trước) để width, padding, icon size, font-size... = HỆT 3 trust-card
   của section TECHNICAL MOAT phía trên (chị Hoa yêu cầu 2026-07-15 lần 65) — markup mỗi thẻ giờ có
   2 class "company-flywheel-card trust-card", .trust-card lo toàn bộ style + hiệu ứng glow/ring
   xoay/dot pulse có sẵn cho .t-icon, không cần viết CSS riêng nữa. Container .company-flywheel-cards
   chỉ lo xếp dọc + khoảng cách 16px (giống hệt .trust-right-track gốc). */
.company-flywheel-cards { display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); }
/* Bảng Institutional Traction giờ nằm chung cột trái với eyebrow+h2 (trong .genesis-text),
   cần margin-top để tách khỏi heading phía trên. */
.genesis-text .company-flywheel-panel { margin-top:var(--space-6); }

/* Chỉ số Institutional Traction bên trái — ĐỔI từ bảng 3 cột sang danh sách xếp dọc full-width
   (2026-07-15 lần 68, chị Hoa yêu cầu vì bảng 3 cột bị nén trong cột trái 420px khiến chữ ngắt quá
   nhiều dòng, cả section kéo rất dài). Mỗi chỉ số giờ là 1 khối: hàng đầu flex (tên chỉ số bold +
   số liệu đạt được, có thể xuống hàng nếu quá dài) — dòng dưới là mô tả tác động dùng full chiều
   rộng panel nên ít ngắt dòng hơn hẳn so với chia 3 cột ~140px trước đây. */
.company-flywheel-stat-list { display:flex; flex-direction:column; }
.company-flywheel-stat {
  padding:var(--space-3) 0; border-bottom:1px solid rgba(255,255,255,.14);
}
.company-flywheel-stat:last-child { border-bottom:none; }
.cfs-head {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:6px var(--space-2);
  margin-bottom:6px;
}
.cfs-metric { font-size:13.5px; font-weight:700; color:var(--on-dark-100); line-height:1.5; }
.cfs-scale { font-size:11px; font-weight:600; color:var(--gold); line-height:1.5; }
.cfs-impact { font-size:12.5px; line-height:1.75; color:rgba(255,255,255,.65); margin:0; }

/* Section 3 — Our Team Members: bố cục ĐO TRỰC TIẾP từ Leadership section thật (Neksai/about,
   http://localhost:8088/ja/about/ — qua getComputedStyle/getBoundingClientRect, không đoán) —
   coltitle nhỏ + CEO feature card (ảnh khổ NGANG, không phải dọc) + grid 3 cột (ảnh khổ ngang
   ~4:3, KHÔNG border-line giữa mô tả và Biography) + nhóm phụ đơn giản. Chỉ đổi màu/font sang
   token AIA (giữ nguyên tỷ lệ ảnh, cỡ chữ tương đối, spacing, KHÔNG bold hoá role/Biography). */
.company-team-sec { background:var(--white); padding:var(--section-py) var(--section-px); }
.company-team-in { max-width:1280px; margin:0 auto; }
.company-team-in > h2.sh { margin-bottom:var(--space-8); }

/* Coltitle — nhãn nhỏ "リーダーシップ" / "独立役員", đo TRỰC TIẾP từ Neksai/about (.ab-team-coltitle,
   sau khi reveal — opacity:1, KHÔNG faded): 11px/400, uppercase, letter-spacing rộng, màu xám đậm
   (rgb(92,94,98) ≈ var(--gray-6)), có border-bottom 1px màu xám nhạt (rgb(196,200,197) ≈ var(--gray-2))
   kéo dài hết chiều rộng, padding-bottom 16px, margin-bottom 28px. */
.company-team-coltitle {
  font-size:11px; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gray-6); opacity:1;
  border-bottom:1px solid var(--gray-2);
  padding-bottom:16px; margin-bottom:28px;
}
.company-team-coltitle-2 { margin-top:var(--space-9); }

/* CEO feature card — flex row 50/50, ảnh khổ NGANG (đo Neksai: 540:389 ≈ 1.39:1), bo góc nhẹ,
   KHÔNG có field nơi làm việc (bản thật không hiển thị). */
.company-ceo {
  display:flex; align-items:flex-start; gap:var(--space-6);
  margin-bottom:var(--space-8);
}
.company-ceo-photo {
  flex:1 1 0; min-width:0; aspect-ratio:540/389;
  border-radius:var(--radius); overflow:hidden; background:var(--gray-1);
}
.company-ceo-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.company-ceo-info { flex:1 1 0; min-width:0; }
.company-ceo-name { font-size:22px; line-height:1.3; font-weight:600; color:var(--black); margin-bottom:4px; }
.company-ceo-title { font-size:12.5px; font-weight:400; color:var(--black); margin-bottom:var(--space-3); }
.company-ceo-bio p { font-size:14.5px; color:var(--gray-6); line-height:1.9; }
.company-ceo-bio p + p { margin-top:var(--space-3); }

/* Social icons — dùng chung cho CEO card (to hơn) + team grid (.company-social-sm, nhỏ hơn) */
.company-social { display:flex; align-items:center; gap:16px; margin-top:var(--space-5); }
.company-social a { color:var(--gray-4); display:flex; transition:color .2s; }
.company-social a:hover { color:var(--black); }
.company-social svg { width:19px; height:19px; }
.company-social-sm { margin-top:0; gap:11px; }
.company-social-sm svg { width:16px; height:16px; }
/* Social row trong popup Biography — đo từ Neksai (.ab-bio-social): margin-top 22px, ẩn hẳn
   khi rỗng (người không có link social thật, vd Hiroaki Shindo/Paul Kano). */
.company-bio-modal-social { margin-top:22px; }
.company-bio-modal-social:empty { display:none; margin-top:0; }

.company-team-grid { display:grid; grid-template-columns:repeat(3,1fr); row-gap:100px; column-gap:32px; margin-bottom:var(--space-8); }
/* Card dùng flex column full-height (grid item mặc định đã stretch bằng hàng cao nhất) + đẩy
   .company-team-foot xuống đáy bằng margin-top:auto — nhờ vậy hàng Biography/social LUÔN
   thẳng hàng ngang nhau dù mô tả (desc) dài ngắn khác nhau giữa các thẻ trong cùng 1 hàng. */
.company-team-card { background:none; border:none; padding:0; display:flex; flex-direction:column; height:100%; }
.company-team-photo { width:100%; aspect-ratio:349/262; border-radius:var(--radius); overflow:hidden; background:var(--gray-1); margin-bottom:var(--space-4); }
.company-team-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.company-team-name { font-size:17px; font-weight:600; color:var(--black); margin-bottom:0; line-height:1.4; }
.company-team-role { font-size:11.5px; font-weight:400; color:var(--black); margin-top:4px; margin-bottom:0; line-height:1.5; }
.company-team-desc { font-size:14px; color:var(--gray-6); line-height:1.8; margin-top:10px; margin-bottom:0; }
.company-team-foot {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  padding-top:16px; margin-top:auto;
}
.company-bio-trigger {
  appearance:none; background:none; border:none; padding:0; margin:0; cursor:pointer;
  font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--black); display:inline-flex; align-items:center; gap:6px;
  font-family:inherit;
}
.company-bio-trigger:hover { color:var(--gold); }
.company-bio-trigger:hover .arr { transform:translateX(3px); }

/* Nhóm phụ — chưa dùng nhãn "独立役員/Independent Directors" (Kato/Reza là đại diện điều hành,
   không phải vai trò giám sát độc lập như bên Neksai) — style coltitle + grid 4 cột tham chiếu
   đúng layout thật, chỉ tên nhãn đổi cho đúng bản chất. Tên/chức danh, không nơi làm việc,
   không Biography/social (đúng format nhóm phụ của Neksai/about). */
.company-team-simple-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }
.company-team-simple-name { font-size:16px; font-weight:600; color:var(--black); margin-bottom:3px; line-height:1.4; }
.company-team-simple-role { font-size:11.5px; color:var(--gray-4); line-height:1.5; }

/* Biography popup — modal dùng chung, nội dung đổ bằng JS (main.js) từ data-* của nút được click */
.company-bio-modal {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:var(--space-5);
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;
}
.company-bio-modal.active { opacity:1; visibility:visible; transition:opacity .25s ease; }
.company-bio-modal-overlay { position:absolute; inset:0; background:rgba(10,10,8,.6); }
.company-bio-modal-card {
  position:relative; z-index:1; background:var(--white); border-radius:var(--radius);
  max-width:640px; width:100%; max-height:86vh; overflow-y:auto;
  padding:var(--space-7);
  transform:translateY(14px); transition:transform .25s ease;
}
.company-bio-modal.active .company-bio-modal-card { transform:translateY(0); }
.company-bio-modal-close {
  position:absolute; top:var(--space-4); right:var(--space-4);
  width:32px; height:32px; border-radius:50%; border:none;
  background:var(--gray-1); color:var(--black);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
/* Header row — ảnh nhỏ vuông góc trên-trái + tên/title bên phải, đo TRỰC TIẾP từ
   Neksai/about (.ab-bio-head): ảnh 76x76 bo góc 14px, gap 18px, align-items:center. */
.company-bio-modal-head {
  display:flex; align-items:center; gap:18px; margin-bottom:var(--space-6);
}
.company-bio-modal-photo {
  width:76px; height:76px; flex-shrink:0;
  border-radius:var(--radius); overflow:hidden; background:var(--gray-1);
}
.company-bio-modal-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.company-bio-modal-photo.hidden { display:none; }
.company-bio-modal-head-text { flex:1; min-width:0; }
.company-bio-modal-name { font-size:21px; line-height:1.6; font-weight:600; letter-spacing:-.01em; color:var(--black); margin-bottom:0; }
.company-bio-modal-title { font-size:12px; font-weight:400; letter-spacing:.04em; text-transform:uppercase; color:var(--black); margin-top:5px; }
.company-bio-modal-text { font-size:14.5px; color:var(--gray-6); line-height:1.9; white-space:pre-line; }
body.bio-modal-open { overflow:hidden; }

/* Section 4 — Regional Compliance & Accessibility: nền TRẮNG var(--white) (2026-07-15 lần 71,
   theo yêu cầu chị Hoa — trước đó thử #f3f2ec ở lần 70, sau khi bỏ nền video bg_2.mp4 ở lần 69),
   toàn bộ màu chữ đảo từ on-dark sang tối trên nền sáng (--black/--gray-6). Nhãn phụ
   (cl-key/office-type) từng đổi sang GRADIENT text ở lần 71 nhưng trông ngả đỏ do chữ ngắn (gradient
   90deg đỏ→vàng không đủ chỗ chuyển sắc) — lần 72 chị Hoa yêu cầu bỏ hẳn, chuyển thẳng sang màu
   đen var(--black) như phần chữ còn lại. Danh sách key-value (tham chiếu cách làm .genesis-node —
   border-bottom, label nhỏ) + office-grid 2 cột. */
.company-compliance-sec { background:var(--white); padding:var(--section-py) var(--section-px); }
.company-compliance-in { max-width:1280px; margin:0 auto; }
.compliance-h { font-size:15px; font-weight:700; color:var(--black); margin-bottom:var(--space-4); }
.compliance-h:not(:first-child) { margin-top:var(--space-7); }
.compliance-list { list-style:none; margin-bottom:var(--space-6); }
.compliance-list li {
  display:grid; grid-template-columns:220px 1fr; gap:var(--space-4);
  padding:var(--space-3) 0; border-bottom:1px solid rgba(0,0,0,.08);
  font-size:14px; color:var(--gray-6); line-height:1.8;
}
.compliance-list li:last-child { border-bottom:none; }
.cl-key { font-size:11.5px; font-weight:700; letter-spacing:.04em; color:var(--black); }
/* Link "国内ポータルサイト" (2026-07-15 lần 75) — reset màu/underline mặc định của <a>, giữ nguyên
   màu xám như text thường, chỉ gạch chân + đổi đen khi hover để báo hiệu bấm được. */
.company-compliance-link { color:inherit; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.25); transition:color .2s, border-color .2s; }
.company-compliance-link:hover { color:var(--black); border-color:var(--black); }
.company-network-intro { font-size:14px; color:var(--gray-6); line-height:1.9; margin-bottom:var(--space-5); max-width:720px; }
.office-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.office-card {
  background:#F9F8F6; border:1px solid rgba(0,0,0,.08); border-radius:var(--radius-sm);
  padding:var(--space-5);
}
.office-type {
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--space-3);
  color:var(--black);
}
/* office-item giờ là <a> dẫn ra Google Maps thật (link lấy từ section Access của
   https://aiavatar.fun/about/, 2026-07-15 lần 73) — reset style link mặc định, thêm icon
   external-link .oi-link-icon canh phải cuối dòng để báo hiệu cả dòng bấm được. */
.office-item {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-3);
  font-size:13.5px; color:var(--gray-6); text-decoration:none;
  padding:var(--space-2) 0; border-bottom:1px solid rgba(0,0,0,.08); line-height:1.7;
  transition:color .2s;
}
.office-item:last-child { border-bottom:none; }
.office-item:hover { color:var(--black); }
.office-item .oi-link-icon { flex-shrink:0; color:var(--gray-4); transition:color .2s; }
.office-item:hover .oi-link-icon { color:var(--black); }
/* Icon location pin trước tên địa điểm (2026-07-15 lần 76) — bọc trong .oi-loc để nhóm icon+text
   thành 1 flex item bên trái, giữ icon link vẫn canh phải nhờ .office-item justify-content:space-between.
   Sửa lần 78: màu icon giờ cố định GRADIENT (stroke="url(#companyPinGrad)" khai báo trong PHP),
   không còn dùng currentColor nên bỏ hẳn color/hover ở đây — icon luôn giữ nguyên gradient thương
   hiệu, không đổi màu theo hover nữa (khác ii-link-icon vẫn đổi đen khi hover). */
.oi-loc { display:flex; align-items:center; gap:8px; }
.oi-loc .oi-pin-icon { flex-shrink:0; }
.office-item:hover .oi-pin-icon { color:var(--black); }

/* ════════════════════════════════════
   CONTACT PAGE (page-contact.php) — Hero + 2 cột (Info/Form). Layout PORT từ
   Neksai/contact (.cnt-*), dựng lại 100% bằng token màu/font AIA — không copy màu
   xanh lá gốc của Neksai. Input/nút dùng lại .btn-primary/.arr có sẵn.
   ════════════════════════════════════ */
.contact-hero {
  position:relative; background:var(--black);
  padding:200px var(--section-px) 120px; text-align:center;
}
.contact-hero-in { max-width:640px; margin:0 auto; }
.contact-hero .sec-tag { justify-content:center; color:var(--on-dark-100); }
.contact-hero h1 { font-size:var(--display-size); line-height:var(--display-line); margin:var(--space-5) 0; }
.contact-hero-sub { font-size:15px; color:var(--on-dark-75); line-height:1.9; }

.contact-wrap {
  max-width:1100px; margin:0 auto;
  padding:var(--section-py) var(--section-px);
  display:flex; align-items:flex-start; gap:96px;
}
.contact-info {
  width:300px; flex-shrink:0;
  border-right:1px solid var(--gray-2); padding-right:60px;
  display:flex; flex-direction:column; gap:var(--space-7);
}
.contact-info-card { display:flex; flex-direction:column; gap:10px; }
.contact-info-label {
  font-size:var(--eyebrow-size); font-weight:var(--eyebrow-weight);
  letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--red);
}
.contact-info-card .body-copy { max-width:none; }
.contact-info-card a { color:var(--black); text-decoration:none; transition:color .2s; }
.contact-info-card a:hover { color:var(--red); }
.contact-social { display:flex; align-items:center; gap:16px; margin-top:2px; }
.contact-social a { color:var(--gray-6); display:flex; transition:color .2s; }
.contact-social a:hover { color:var(--red); }
.contact-divider { display:none; }

.contact-form-section { flex:1; min-width:0; }
.contact-form-section h2.sh { margin-bottom:8px; }
.contact-form-section .sh-sub { max-width:none; margin-bottom:36px; }

.contact-form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.contact-field { display:flex; flex-direction:column; gap:8px; }
.contact-field-full { margin-bottom:20px; }
.contact-field label {
  font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--black); font-family:var(--heading-font, var(--font-jp));
}
.contact-field input, .contact-field textarea {
  width:100%; box-sizing:border-box;
  background:var(--gray-1); border:1px solid var(--gray-2); border-radius:var(--radius-sm);
  padding:12px 16px; font-size:15px; font-family:inherit; color:var(--black);
  outline:none; resize:vertical; transition:border-color .2s, background .2s;
}
.contact-field input:focus, .contact-field textarea:focus { border-color:var(--black); background:var(--white); }
.contact-field textarea { resize:vertical; min-height:130px; }

.contact-form-footer { display:flex; align-items:center; gap:24px; margin-top:8px; flex-wrap:wrap; }
.contact-submit { border:none; cursor:pointer; }
.contact-form-note { font-size:13px; color:var(--gray-4); margin:0; }

/* ════════════════════════════════════
   CAREERS PAGE (page-careers.php) — 7 section, layout tham khảo Neksai/careers (.cr-*) nhưng
   dựng lại 100% bằng token AIA — dùng lại .sec-tag/h2.sh/.body-copy/.btn-primary/.btn-secondary/
   .arr có sẵn, KHÔNG hard-code màu/size mới. Nội dung theo brief careers_JA.html v1.1.
   2026-07-15 (lần 88): ĐỔI section 2-7 sang nền SÁNG (var(--white)/var(--gray-1) luân phiên,
   đúng convention Products/Technology — .ext-sec/.innov-sec đều nền trắng) — bản đầu toàn trang
   nền tối liên tục bị chị Hoa phản hồi quá nặng nề. CHỈ Hero (ảnh careers_1.png) giữ nền tối vì
   là ảnh full-bleed cần overlay tối để chữ trắng đọc rõ (giống mọi hero ảnh/video khác của site).
   ════════════════════════════════════ */

/* Section 1 — Page Hero: nền ẢNH careers_1.png, căn TRÁI + dồn đáy — đúng kỹ thuật
   .company-hero (page-company.php). */
.career-hero {
  position:relative; overflow:hidden; background:var(--black);
  padding:0 40px 60px 70px; text-align:left;
  min-height:100vh; display:flex; align-items:flex-end; justify-content:flex-start;
}
.career-hero-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(10,10,8,.1), rgba(10,10,8,.1)), url('../images/careers_1.webp') center/cover no-repeat;
}
.career-hero-in { position:relative; z-index:1; max-width:1100px; margin:0 0 130px; }
.career-hero .sec-tag { justify-content:flex-start; color:var(--on-dark-100); }
.career-hero h1 {
  font-size:var(--display-size); line-height:var(--display-line);
  letter-spacing:.04em; color:var(--on-dark-100); margin:var(--space-5) 0;
}
.career-hero-sub { font-size:16px; color:var(--on-dark-75); max-width:560px; margin:0; line-height:1.9; }

/* Section 2 — A Place to Benchmark & Break Through: eyebrow + h2 + intro + 3 thẻ trụ cột
   (nền trắng) */
.career-pillars-sec { background:var(--white); padding:var(--section-py) var(--section-px); }
.career-pillars-in { max-width:1280px; margin:0 auto; }
.career-pillars-intro { max-width:760px; margin-top:var(--space-4); margin-bottom:var(--space-7); }
.career-pillar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.career-pillar-card {
  background:var(--gray-1);
  border-radius:var(--radius); padding:var(--space-6);
}
.career-pillar-num {
  font-size:13px; font-weight:800; letter-spacing:.06em; color:var(--black);
  margin-bottom:var(--space-3);
}
.career-pillar-body { max-width:none; margin:0; }

/* Section 3 — Our Promise: eyebrow + h2 căn TRÁI (2026-07-15 lần 93, chị Hoa yêu cầu bỏ căn
   giữa), h2 gộp về 1 dòng. Danh sách 3 hàng (idx/label+h3/body) căn trái bên dưới (nền gray-1,
   phân tách nhẹ với section trắng trên/dưới). Nội dung tiếng Anh lấy nguyên si từ Neksai — xem
   chú thích trong page-careers.php. (2026-07-15 lần 107: revert bản nền ảnh careers_2.jpg của
   lần 106 — chị Hoa phản hồi "xấu", đổi ảnh này sang dùng cho section BENEFITS thay vào đó.) */
.career-promise-sec { background:var(--gray-1); padding:var(--section-py) var(--section-px); text-align:left; }
.career-promise-in { max-width:1000px; margin:0 auto; }
.career-promise-h { margin:var(--space-4) 0 var(--space-6); }
.career-promise-list { border-top:1px solid var(--gray-2); margin-top:var(--space-6); }
.career-promise-row {
  display:flex; align-items:flex-start; gap:var(--space-6);
  padding:var(--space-6) 0; border-bottom:1px solid var(--gray-2);
}
/* Số thứ tự 01/02/03 — mảnh (font-weight nhẹ) + gradient đỏ→vàng, cùng kỹ thuật/token với
   chữ "パートナー。" trên Hero trang chủ (.hero-h1-ja span dùng var(--grad) + background-clip:text). */
.career-promise-idx {
  flex:0 0 32px; font-size:13px; font-weight:600; padding-top:2px;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.career-promise-mid { flex:0 0 260px; }
.career-promise-label {
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-4); margin-bottom:var(--space-2);
}
.career-promise-mid h3 { color:var(--black); }
.career-promise-right { flex:1; min-width:0; }
.career-promise-right .body-copy { max-width:none; margin:0; }
/* Link "Read our full philosophy" — thêm dưới danh sách 3 hàng, đúng vị trí + kỹ thuật
   arrow-link (.arr) đã dùng chung cho mọi link mũi tên của site, tham khảo vị trí/khoảng cách
   từ .cr-promise-link của Neksai nhưng dựng lại bằng token AIA. */
.career-promise-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:14.5px; font-weight:700; text-decoration:none;
  margin-top:var(--space-6);
}
/* Chữ "Read our full philosophy" tô gradient đỏ→vàng, cùng kỹ thuật/token với chữ
   "パートナー。" trên Hero trang chủ (.hero-h1-ja span) — mũi tên .arr giữ nguyên màu gold
   riêng (không nằm trong span gradient) để không bị -webkit-text-fill-color:transparent
   của span cha làm mất icon. */
.career-promise-link-text {
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Section 4 — Benefits: eyebrow + h2 + grid 2 cột, 6 mục phúc lợi. 2026-07-15 lần 107: đổi
   nền sang ẢNH careers_2.jpg (lớp `.career-benefits-bg` tách riêng + overlay tối, đúng kỹ
   thuật `.career-cta-bg`) — chuyển từ section OUR PROMISE (bị revert vì "xấu") sang đây. Thẻ
   phúc lợi đổi từ nền `gray-1` đặc sang kính mờ trên nền ảnh (translucent + border mờ). */
.career-benefits-sec { position:relative; overflow:hidden; padding:var(--section-py) var(--section-px); }
.career-benefits-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(10,10,8,.4), rgba(10,10,8,.4)), url('../images/careers_2.webp') center/cover no-repeat;
}
.career-benefits-in { position:relative; z-index:1; max-width:1280px; margin:0 auto; }
.career-benefit-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-6); }
.career-benefit-item {
  display:flex; align-items:flex-start; gap:var(--space-3);
  background:rgba(10,10,8,.4); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-sm); padding:var(--space-4) var(--space-5);
  font-size:14px; color:rgba(255,255,255,.85); line-height:1.8;
}
/* Icon tick tròn — y hệt .action-check của section "MISSION · AI AVATAR" (page-story.php,
   action-sec): khung tròn viền/nền gold nhạt + SVG checkmark stroke gold. */
.career-benefit-mark {
  width:28px; height:28px; border-radius:50%; flex-shrink:0; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(245,170,25,.12); border:1px solid rgba(245,170,25,.5);
}

/* Section 5 — Open Roles: filter (bộ phận/vị trí, JS toggle — xem main.js) + danh sách job
   thật theo nhóm 4 phòng ban + fallback box (open application). Tham khảo cấu trúc section
   オープンポジション của Neksai (`.cr-jobs`: mỗi group = label + list `.cr-job-row` dạng thẻ
   trắng bo góc, title trái/meta phải) — dựng lại 100% bằng class riêng `.career-job-*`. */
.career-jobs-sec { background:var(--gray-1); padding:var(--section-py) var(--section-px); }
.career-jobs-in { max-width:1280px; margin:0 auto; }
.career-filter { margin:var(--space-6) 0 var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); }
.career-filter-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.career-filter-label {
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray-4); width:70px; flex-shrink:0;
}
.career-filter-pill {
  font-size:13px; color:var(--gray-6); cursor:pointer; user-select:none;
  background:var(--white); border:1px solid var(--gray-2);
  border-radius:var(--radius-pill); padding:6px 16px; transition:all .15s;
}
.career-filter-pill:hover { border-color:var(--gray-4); }
.career-filter-pill.active { color:var(--white); background:var(--black); border-color:var(--black); }

.career-job-list { display:flex; flex-direction:column; gap:var(--space-6); margin-bottom:var(--space-6); }
.career-job-group-label {
  font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gray-4); margin-bottom:var(--space-3);
}
.career-job-row {
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  background:var(--white); border-radius:var(--radius-sm);
  padding:16px 20px; margin-bottom:var(--space-2);
  text-decoration:none; transition:box-shadow .2s, transform .2s;
}
.career-job-row:last-child { margin-bottom:0; }
.career-job-row:hover { box-shadow:0 4px 20px rgba(0,0,0,.06); transform:translateY(-1px); }
.career-job-title { font-size:14.5px; font-weight:700; color:var(--black); }
.career-job-meta { font-size:13px; color:var(--gray-4); flex-shrink:0; white-space:nowrap; }
.career-job-empty {
  text-align:center; font-size:14px; color:var(--gray-4); padding:var(--space-6) 0;
}

.career-fallback-box {
  padding:0 20px; text-align:left; font-size:14px; color:var(--gray-6); line-height:1.9;
}
.career-fallback-box a { color:var(--black); text-decoration:none; border-bottom:1px solid var(--gray-2); transition:border-color .2s; }
.career-fallback-box a:hover { border-color:var(--black); }

/* Section 6 — Internship + Referral + Life: 3 thẻ hiện cùng lúc trên 1 hàng, nền ảnh
   bg3_3.png. Tham khảo STYLE (glassmorphism card + icon glow/spin/pulse — không copy nội
   dung/màu) từ section PLATFORM/RESEARCH/BUSINESS của html-tham-khảo option3/index.html —
   dựng lại bằng class riêng .career-tcard-* + token AIA (--gold thay cho cam hard-code gốc).
   2026-07-15: đổi từ cơ chế sticky pin-scroll (1 thẻ/1 lần cuộn) sang hiển thị tĩnh cả 3 thẻ
   cùng lúc, icon trên/text dưới trong mỗi thẻ (theo yêu cầu chị Hoa). */
.career-tcard-sec { position:relative; overflow:hidden; padding:var(--section-py) var(--section-px); }
.career-tcard-bg { position:absolute; inset:0; z-index:0; background:url('../images/bg3_3.webp') center/cover no-repeat; }
.career-tcard-row {
  position:relative; z-index:1; max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5);
}
.career-tcard {
  display:flex; flex-direction:column; align-items:center; text-align:left;
  gap:var(--space-4);
  border-radius:var(--radius); padding:var(--space-6);
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
}
.career-tcard-visual { position:relative; width:100%; height:140px; display:flex; align-items:center; justify-content:center; }
.career-tcard-visual svg { position:relative; z-index:1; width:110px; height:110px; }
.career-tcard-content { width:100%; }
.career-tcard-content .body-copy { max-width:none; }
.career-tcard-content .body-copy.on-dark { color:var(--on-dark-100); }
.career-tcard-content .career-triple-link { margin-top:var(--space-4); }
.career-triple-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--black); text-decoration:none;
}
.career-triple-link.on-dark { color:var(--on-dark-100); }
.career-triple-link.on-dark:hover { color:var(--gold); }

/* Icon glow/spin/pulse — y hệt hiệu ứng .tcard-visual gốc, chỉ đổi màu quầng sáng sang
   --gold (rgba 245,170,25) thay vì cam hard-code #F55A21 của bản tham khảo, thu nhỏ quầng
   sáng cho vừa icon 110px (thay vì 180px của bản pin-scroll trước). */
.career-tcard-visual::before {
  content:''; position:absolute; top:50%; left:50%;
  width:130px; height:130px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.92);
  background:radial-gradient(circle, rgba(245,170,25,.4) 0%, rgba(245,170,25,0) 70%);
  animation:careerTcardGlow 4s ease-in-out infinite;
  pointer-events:none; z-index:0;
}
.career-tcard-visual svg circle[stroke="rgba(255,255,255,.28)"] {
  stroke-dasharray:2 7;
  transform-box:fill-box; transform-origin:50% 50%;
  animation:careerTcardRingSpin 14s linear infinite;
}
.career-tcard-visual svg circle[fill="#fff"] {
  transform-box:fill-box; transform-origin:50% 50%;
  animation:careerTcardDotPulse 2.2s ease-in-out infinite;
}
@keyframes careerTcardGlow {
  0%,100% { transform:translate(-50%,-50%) scale(.92); opacity:.55; }
  50% { transform:translate(-50%,-50%) scale(1.14); opacity:.95; }
}
@keyframes careerTcardRingSpin { to { transform:rotate(360deg); } }
@keyframes careerTcardDotPulse {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.4; transform:scale(1.3); }
}

/* Section 7 — Closing CTA: h2 + body + 2 CTA, nền ẢNH careers_2.webp (2026-07-15 lần 99, đổi
   từ nền phẳng gray-1 sang ảnh — đúng kỹ thuật overlay tối của .validation-bg/.scalability-sec),
   text/nút đổi sang biến thể on-dark. Bỏ hẳn nút shortcut "チームに会う". */
.career-cta-sec { position:relative; overflow:hidden; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--section-py) var(--section-px); text-align:center; }
.career-cta-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(10,10,8,.3), rgba(10,10,8,.3)), url('../images/careers_2_2.webp') center/cover no-repeat;
}
.career-cta-in { position:relative; z-index:1; max-width:760px; margin:0 auto; }
.career-cta-sec h2.sh { margin-bottom:var(--space-5); }
.career-cta-sec .body-copy { max-width:none; margin:0 auto var(--space-7); text-align:center; }
.career-cta-sec .body-copy.on-dark { color:var(--on-dark-100); }
.career-cta-actions { display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }
.career-cta-actions a { min-width:190px; justify-content:center; }
/* Nút trên nền ảnh tối — đúng biến thể đã dùng cho .tech-hero-btn-primary/.scalability-btn-primary
   (trắng đặc + đen) và ...btn-secondary (viền/nền trắng mờ) ở các CTA nền ảnh khác của site. */
.career-cta-actions .btn-primary { background:var(--white); border:2px solid var(--white); color:var(--black); }
.career-cta-actions .btn-primary:hover { background:var(--white); opacity:.9; }
.career-cta-actions .btn-secondary { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:var(--on-dark-100); }
.career-cta-actions .btn-secondary:hover { border-color:var(--on-dark-100); color:var(--on-dark-100); }

/* ════════════════════════════════════
   OUR PROMISE PAGE (page-our-promise.php) — bố cục tham chiếu Neksai (localhost:8088/ja/our-promise/
   — .op-*), dựng lại 100% bằng token AIA. Dùng lại .sec-tag/h2.sh/.body-copy/.btn-primary/
   .btn-secondary/.arr/.on-dark có sẵn — namespace mới CHỈ .promise-* (khác .career-promise-*
   của trang Careers). Luân phiên nền tối phẳng (var(--black)) / trắng / gray-1 đúng bản gốc.
   ════════════════════════════════════ */
.promise-hero {
  position:relative; overflow:hidden;
  padding:0 40px 60px 70px; text-align:left;
  min-height:100vh; display:flex; align-items:flex-end; justify-content:flex-start;
}
.promise-hero-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(10,10,8,.2), rgba(10,10,8,.2)), url('../images/careers_2_2.webp') center/cover no-repeat;
}
.promise-hero-in { position:relative; z-index:1; max-width:820px; margin:0 0 130px; }
.promise-hero .sec-tag { justify-content:flex-start; color:var(--on-dark-100); }
.promise-hero h1 {
  font-size:var(--display-size); line-height:var(--display-line);
  letter-spacing:.04em; color:var(--on-dark-100); margin:var(--space-5) 0;
}
.promise-hero-sub { font-size:16px; color:var(--on-dark-100); max-width:560px; margin:0; line-height:1.9; }

/* Section 2 — 私たちが期待していること: nền trắng, h2 + 3 đoạn thân + pull-quote (dải gradient
   trái, giống kỹ thuật .career-promise-idx dùng var(--grad) cho số thứ tự). */
.promise-expect-sec { background:var(--white); padding:var(--section-py) var(--section-px); }
.promise-expect-in { max-width:820px; margin:0 auto; }
.promise-expect-body { margin-top:var(--space-6); }
.promise-expect-body .body-copy { max-width:none; }
.promise-quote {
  margin-top:var(--space-7); padding-left:var(--space-5);
  border-left:3px solid; border-image:var(--grad) 1;
}
.promise-quote-line { font-size:22px; font-weight:700; color:var(--black); line-height:1.5; margin:0 0 var(--space-2); }
.promise-quote-sub { font-size:14.5px; color:var(--gray-6); line-height:1.8; margin:0; max-width:560px; }

/* Section 3 — 好循環: 5 bước nối mũi tên, nền đen phẳng. */
.promise-cycle-sec { position:relative; overflow:hidden; padding:var(--section-py) var(--section-px); text-align:center; }
.promise-cycle-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(10,10,8,.55), rgba(10,10,8,.55)), url('../images/careers_2.webp') center/cover no-repeat;
}
.promise-cycle-in { position:relative; z-index:1; max-width:1180px; margin:0 auto; }
.promise-cycle-sec .sec-tag { justify-content:center; color:var(--on-dark-100); }
.promise-cycle-sec .sh { text-align:center; margin:var(--space-4) auto var(--space-7); }
.promise-cycle-row { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--space-3); }
.promise-cycle-item {
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:var(--space-5) var(--space-4); min-width:150px;
}
.promise-cycle-num {
  font-size:13px; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.promise-cycle-text { font-size:14px; font-weight:600; color:var(--on-dark-100); line-height:1.5; }
.promise-cycle-arrow { color:var(--gray-4); font-size:18px; flex-shrink:0; }

/* Section 4 — 会社が約束すること: danh sách 4 hàng, dùng lại đúng pattern .career-promise-row
   (idx gradient + label uppercase + h3 + body), nền gray-1. */
.promise-commit-sec { background:var(--gray-1); padding:var(--section-py) var(--section-px); text-align:left; }
.promise-commit-in { max-width:1000px; margin:0 auto; }
.promise-commit-list { border-top:1px solid var(--gray-2); margin-top:var(--space-6); }
.promise-commit-row {
  display:flex; align-items:flex-start; gap:var(--space-6);
  padding:var(--space-6) 0; border-bottom:1px solid var(--gray-2);
}
.promise-commit-idx {
  flex:0 0 32px; font-size:13px; font-weight:600; padding-top:2px;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.promise-commit-mid { flex:0 0 260px; }
.promise-commit-label {
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gray-4); margin-bottom:var(--space-2);
}
.promise-commit-mid h3 { color:var(--black); }
.promise-commit-right { flex:1; min-width:0; }
.promise-commit-right .body-copy { max-width:none; margin:0; }

/* Section 5 — 私たちが信じていること: 3 thẻ niềm tin, nền ảnh group-lights.webp cao 1 màn hình.
   2026-07-15: tăng section lên min-height:100vh (căn giữa theo chiều dọc) + bỏ hẳn lớp mask
   tối trên ảnh (trước đó overlay .55) theo yêu cầu chị Hoa. */
.promise-believe-sec {
  position:relative; overflow:hidden; padding:var(--section-py) var(--section-px);
  min-height:100vh; display:flex; align-items:center;
}
.promise-believe-bg {
  position:absolute; inset:0; z-index:0;
  background:url('../images/group-lights.webp') center/cover no-repeat;
}
.promise-believe-in { position:relative; z-index:1; max-width:1280px; margin:0 auto; width:100%; }
.promise-believe-sec .sh { max-width:640px; }
.promise-believe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); margin-top:var(--space-7); }
.promise-believe-item { border-top:1px solid rgba(255,255,255,.16); padding-top:var(--space-5); }
.promise-believe-item h3 { margin-bottom:var(--space-3); }
.promise-believe-item .body-copy { max-width:none; }

/* Section 6 — Closing CTA: eyebrow + h2 + 2 nút, nền gray-1, căn giữa. */
.promise-cta-sec { background:var(--gray-1); padding:var(--section-py) var(--section-px); text-align:center; }
.promise-cta-in { max-width:700px; margin:0 auto; }
.promise-cta-sec .sec-tag { justify-content:center; }
.promise-cta-sec .sh { text-align:center; margin:var(--space-4) auto var(--space-6); }
.promise-cta-actions { display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }
.promise-cta-actions a { min-width:190px; justify-content:center; }

/* ════════════════════════════════════
   NEWSROOM PAGE (page-newsroom.php) — bố cục tham chiếu Neksai (localhost:8088/newsroom/),
   dựng lại 100% bằng token màu/font/spacing của AIA (xem STYLEGUIDE_aiavatar_2026.md và
   docblock đầu page-newsroom.php để biết đầy đủ các điểm khác biệt có chủ đích so với bản
   gốc Neksai — không copy màu xanh lá/font-mono editorial). Dùng lại class có sẵn
   (.sec-tag/.body-copy/.arr) — namespace mới CHỈ .nr-* (Newsroom).
   ════════════════════════════════════ */
.nr-wrap { max-width:1280px; margin:0 auto; padding:0 var(--section-px); }

/* Hero — 2 cột: H1 trái / tagline+desc phải, nền trắng liền (nav theme 'light') */
.nr-hero { padding:calc(var(--nav-height) + 84px) 0 0; }
.nr-hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6);
  align-items:end; padding-bottom:var(--space-7); border-bottom:1px solid var(--gray-2);
}
.nr-hero-left .sec-tag { margin-bottom:var(--space-3); }
.nr-hero-right { display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:var(--space-1); }
.nr-hero-tagline { font-size:22px; font-weight:600; line-height:1.3; letter-spacing:-.01em; color:var(--black); margin:0 0 var(--space-3); }
.nr-hero-desc.body-copy { max-width:480px; margin:0; }

/* Featured — bài mới nhất lớn (trái, 8/12 cột) + 4 bài phụ (phải, 4/12 cột) */
.nr-featured { padding:var(--space-8) 0 0; }
.nr-feat-grid {
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--space-4) var(--space-6);
  padding-bottom:var(--space-7); border-bottom:1px solid var(--gray-2);
}
.nr-feat-main { grid-column:1/9; }
.nr-feat-link { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.nr-feat-fig { margin:0; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); background:var(--gray-1); }
.nr-feat-fig img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.4,0,.2,1); }
.nr-feat-link:hover .nr-feat-fig img { transform:scale(1.03); }
.nr-feat-placeholder { width:100%; height:100%; background:var(--gray-1); }
.nr-feat-info { padding-top:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
.nr-feat-meta { display:flex; align-items:center; gap:var(--space-3); }
.nr-feat-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }
.nr-dot { width:5px; height:5px; border-radius:50%; background:var(--grad); flex-shrink:0; }
.nr-feat-date { font-size:12px; letter-spacing:.02em; color:var(--gray-4); }
.nr-feat-title { font-size:clamp(20px,2vw,28px); font-weight:700; line-height:1.2; letter-spacing:-.01em; color:var(--black); margin:0; transition:color .18s; }
.nr-feat-link:hover .nr-feat-title { color:var(--gold); }
.nr-feat-excerpt { font-size:15px; line-height:1.7; color:var(--gray-6); max-width:56ch; margin:0; }
.nr-feat-cta { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--black); }

.nr-feat-side { grid-column:9/13; display:flex; flex-direction:column; }
.nr-side-link { display:flex; flex-direction:column; gap:5px; padding:0 0 var(--space-4); border-bottom:1px solid var(--gray-2); margin-bottom:var(--space-4); text-decoration:none; color:inherit; transition:opacity .15s; }
.nr-side-link:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.nr-side-link:hover { opacity:.65; }
.nr-side-meta { display:flex; align-items:center; gap:var(--space-2); }
.nr-side-tag { font-size:10px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-4); }
.nr-side-date { font-size:10px; letter-spacing:.02em; color:var(--gray-4); }
.nr-side-title { font-size:15px; font-weight:600; line-height:1.4; letter-spacing:-.005em; color:var(--black); }

/* All News — filter pill + list + load more */
.nr-list-section { padding:var(--space-8) 0 var(--section-py); }
.nr-list-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap; }
.nr-list-heading { font-size:24px; font-weight:700; letter-spacing:-.01em; color:var(--black); margin:0; }
.nr-filters { display:flex; gap:4px; background:var(--gray-1); border-radius:var(--radius-sm); padding:4px; flex-wrap:wrap; }
.nr-filter { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--gray-6); background:none; border:none; cursor:pointer; padding:7px 14px; border-radius:6px; transition:color .15s, background .15s; }
.nr-filter:hover { color:var(--black); }
.nr-filter.on { background:var(--white); color:var(--black); box-shadow:var(--shadow-soft); }

.nr-nlist { border-top:1px solid var(--gray-2); }
.nr-nrow { display:grid; grid-template-columns:110px 150px 1fr; gap:var(--space-4); align-items:center; padding:var(--space-4) 4px; border-bottom:1px solid var(--gray-2); text-decoration:none; color:inherit; transition:padding-left .22s cubic-bezier(.4,0,.2,1), background .18s; }
.nr-nrow:hover { background:var(--gray-1); padding-left:12px; }
.nr-ndate { font-size:12px; letter-spacing:.02em; color:var(--gray-4); white-space:nowrap; }
.nr-ntag { font-size:10.5px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-4); white-space:nowrap; justify-self:start; }
.nr-ntitle { font-size:16px; font-weight:400; color:var(--black); display:flex; align-items:center; gap:7px; }
.nr-nrow .arr { opacity:0; transition:opacity .15s, transform .25s cubic-bezier(.4,0,.2,1); }
.nr-nrow:hover .arr { opacity:1; }
.nr-empty { color:var(--gray-4); font-size:15px; padding:var(--space-6) 0; }
.nr-loadmore-wrap { padding-top:var(--space-7); display:flex; justify-content:center; }
.nr-btn-more { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; padding:13px 28px; border-radius:var(--radius-pill); border:1.5px solid var(--gray-2); color:var(--black); background:transparent; cursor:pointer; transition:border-color .18s, background .18s; }
.nr-btn-more:hover { border-color:var(--black); background:var(--gray-1); }
.nr-more-arrow { color:var(--gold); display:inline-block; transition:transform .2s; }
.nr-btn-more:hover .nr-more-arrow { transform:translateY(3px); }

/* ════════════════════════════════════
   SINGLE POST PAGE (single.php) — trang chi tiết 1 bài News/Newsroom. Bố cục tham chiếu 1:1
   trang chi tiết bài news của Neksai (localhost:8088/appointment-of-chief-operating-officer/
   — class `.sngl-*`), dựng lại 100% bằng token AIA. Namespace riêng `.nsg-*` (News Single),
   tách khỏi `.nr-*` (Newsroom listing). Dùng lại `.sec-tag/.arr` có sẵn.
   ════════════════════════════════════ */
.nsg-container { max-width:900px; margin:0 auto; padding:0 var(--section-px); }

.nsg-hero-wrap { padding:calc(var(--nav-height) + 56px) 0 var(--space-7); }
.nsg-back {
  display:inline-flex; align-items:center; font-size:13.5px; font-weight:600; color:var(--gray-6);
  text-decoration:none; margin-bottom:var(--space-6); transition:color .15s;
}
.nsg-back:hover { color:var(--black); }

.nsg-header { max-width:760px; margin:0 auto var(--space-6); text-align:center; }
.nsg-header .nsg-category { justify-content:center; margin-bottom:var(--space-3); }
.nsg-title {
  font-family:var(--heading-font); font-weight:var(--heading-weight);
  font-size:clamp(28px,4vw,44px); line-height:1.3; letter-spacing:var(--h2-tracking);
  color:var(--black); margin:0 0 var(--space-4);
}
.nsg-dateline { display:flex; align-items:center; justify-content:center; gap:var(--space-3); }
.nsg-date { font-size:14px; color:var(--gray-4); }
.nsg-source-pill {
  font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gray-4); border:1px solid var(--gray-2); border-radius:var(--radius-pill); padding:3px 12px;
}

.nsg-hero-img {
  margin:var(--space-7) 0 0; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius); background:var(--gray-1);
}
.nsg-hero-img img { width:100%; height:100%; object-fit:cover; display:block; }

.nsg-content-wrap { padding:var(--space-8) 0 var(--section-py); }
.nsg-body { max-width:640px; margin:0 auto; font-size:16px; line-height:1.9; color:var(--gray-6); }
.nsg-body > *:first-child { margin-top:0; }
.nsg-body p { margin:0 0 var(--space-5); }
.nsg-body h2 { font-size:24px; font-weight:700; color:var(--black); letter-spacing:-.005em; margin:var(--space-7) 0 var(--space-4); }
.nsg-body h3 { font-size:19px; font-weight:700; color:var(--black); margin:var(--space-6) 0 var(--space-3); }
.nsg-body ul, .nsg-body ol { margin:0 0 var(--space-5); padding-left:1.4em; }
.nsg-body li { margin-bottom:var(--space-2); }
.nsg-body a { color:var(--black); text-decoration:underline; text-decoration-color:var(--gray-2); text-underline-offset:3px; transition:text-decoration-color .15s; }
.nsg-body a:hover { text-decoration-color:var(--black); }
.nsg-body strong { color:var(--black); font-weight:700; }
.nsg-body img { max-width:100%; height:auto; border-radius:var(--radius-sm); }

.nsg-related { background:var(--gray-1); padding:var(--space-8) 0 var(--section-py); }
.nsg-related-header { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); flex-wrap:wrap; }
.nsg-related-eyebrow { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-4); }
.nsg-related-all { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--black); text-decoration:none; }
.nsg-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.nsg-rel-card { display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.nsg-rel-fig { margin:0; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-sm); background:var(--white); }
.nsg-rel-fig img { width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.nsg-rel-card:hover .nsg-rel-fig img { transform:scale(1.04); }
.nsg-rel-placeholder { width:100%; height:100%; background:var(--white); }
.nsg-rel-body { padding-top:var(--space-3); display:flex; flex-direction:column; gap:6px; }
.nsg-rel-meta { display:flex; align-items:center; gap:var(--space-2); }
.nsg-rel-tag { font-size:10px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--gray-4); }
.nsg-rel-date { font-size:10px; color:var(--gray-4); }
.nsg-rel-title { font-size:15px; font-weight:700; line-height:1.4; color:var(--black); margin:0; transition:color .15s; }
.nsg-rel-card:hover .nsg-rel-title { color:var(--gold); }
.nsg-rel-excerpt { font-size:13px; line-height:1.7; color:var(--gray-6); margin:0; }

/* ════════════════════════════════════
   TERMS OF USE PAGE (page-terms-of-use.php) — bố cục tham chiếu 1:1 trang Privacy Policy của
   Neksai (localhost:8088/privacy-policy/ — class `.prv-*`), dựng lại 100% bằng token AIA.
   Namespace riêng `.terms-*`. Nội dung 18 điều khoản + liên hệ lấy nguyên si từ
   https://jp.aiavatar.fun/terms-of-use/ (xem docblock trong page-terms-of-use.php).
   ════════════════════════════════════ */
.terms-hero {
  position:relative; overflow:hidden; min-height:420px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--nav-height) + 40px) var(--section-px) 60px;
}
.terms-hero-bg {
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(rgba(10,10,8,.55), rgba(10,10,8,.55)), url('../images/group-lights.webp') center/cover no-repeat;
}
/* 2026-07-15: mỗi trang legal (Terms of Use/Privacy Policy) dùng ảnh Hero RIÊNG (Terms.png/
   Privacy.png) thay vì dùng chung group-lights.webp — chỉ override background-image, các thuộc
   tính position/size/repeat vẫn kế thừa từ .terms-hero-bg ở trên. */
.terms-hero-bg-terms { background-image:linear-gradient(rgba(10,10,8,.55), rgba(10,10,8,.55)), url('../images/Terms.webp'); }
.terms-hero-bg-privacy { background-image:linear-gradient(rgba(10,10,8,.55), rgba(10,10,8,.55)), url('../images/Privacy.webp'); }
.terms-hero-in { position:relative; z-index:1; }
.terms-hero h1 {
  font-family:var(--heading-font); font-weight:var(--heading-weight);
  font-size:clamp(34px,5vw,52px); letter-spacing:var(--h1-tracking); margin:0;
}

.terms-wrap { max-width:800px; margin:0 auto; padding:var(--space-8) var(--section-px) var(--section-py); }
.terms-divider { height:1px; background:var(--gray-2); margin:0 0 var(--space-7); }
.terms-body { display:flex; flex-direction:column; }
.terms-section { padding-top:var(--space-6); }
.terms-section:first-child { padding-top:0; }
.terms-section h2 {
  font-size:22px; font-weight:700; color:var(--black); letter-spacing:-.005em; margin:0 0 var(--space-4);
}
.terms-section h3 { font-size:16px; font-weight:700; color:var(--black); margin:var(--space-5) 0 var(--space-2); }
.terms-section p { font-size:15px; line-height:1.9; color:var(--gray-6); margin:0 0 var(--space-3); }
.terms-section ul { margin:0 0 var(--space-4); padding-left:1.3em; }
.terms-section li { font-size:15px; line-height:1.9; color:var(--gray-6); margin-bottom:6px; }
.terms-section a { color:var(--black); text-decoration:underline; text-decoration-color:var(--gray-2); text-underline-offset:3px; transition:text-decoration-color .15s; }
.terms-section a:hover { text-decoration-color:var(--black); }
.terms-section-contact { border-top:1px solid var(--gray-2); margin-top:var(--space-4); }

/* ════════════════════════════════════
   LAPTOP — 1024px–1600px
   ════════════════════════════════════ */
@media (min-width:1024px) and (max-width:1600px) {
  .feat-text-col { padding-right:80px; }
  .feat-nav-col { padding-left:90px; width:calc(50% - 250px); }
  .feat-nav-h2 { font-size:30px; }
  br.laptop-br { display:inline; }
  .dl-marquee { height:130px; margin-top:60px; }
  .dl-marquee-track span { font-size:130px; }
  /* Hero H1 trang chủ (toppage) — mọi ngôn ngữ, chỉ laptop, không đụng PC/mobile */
  .hero-h1-ja { font-size:58px; }
}

/* ════════════════════════════════════
   MOBILE — ≤768px
   ════════════════════════════════════ */
@media (max-width:768px) {

  .hero-video-pc { display:none; }
  .hero-video-mb { display:block; }
  .hero-h1-ja span { white-space:nowrap; }
  /* Hero banner slider (JA only) — progress bar nằm ngoài .hero-left (xem main.css base rule),
     canh theo padding-left 40px + bottom 40px của layout mobile, max-width để không tràn mép. */
  .hero-progress { left:40px; bottom:40px; max-width:calc(100% - 60px); }
  /* Cho phép swipe ngang đổi banner (xem main.js) mà không bị trình duyệt tự nuốt gesture —
     pan-y: vẫn cho cuộn dọc trang bình thường, chỉ nhường chiều ngang lại cho JS xử lý. */
  .hero-slider { touch-action: pan-y; }
  /* Ad banner (JA only) — thu nhỏ còn 390px trên mobile theo yêu cầu chị Hoa. */
  .ad-banner-sec { padding:60px 25px; }
  .ad-banner-in { max-width:390px; }
  /* Ảnh cardHobby (JA only) — đổi sang bản mobile riêng dưới 768px. Cũng cần ancestor
     ".sc-stats-img" để thắng specificity so với ".showcase-viewport img" (xem note ở rule gốc). */
  .sc-stats-img .sc-stats-image-pc { display:none; }
  .sc-stats-img .sc-stats-image-mb { display:block; }
  /* Banner Showcase (JA only, ảnh new_banner) — đổi sang bản mobile riêng dưới 768px. Cũng cần
     ancestor ".sc-banner" để thắng specificity so với ".showcase-viewport img" (xem note gốc). */
  .sc-banner .sc-banner-img-pc { display:none; }
  .sc-banner .sc-banner-img-mb { display:block; }

  nav { padding:0 20px; }
  .nav-links { display:none !important; }
  .nav-hamburger { display:flex; }
  .nav-cta { display:none; }
  /* Lang-select chỉ hiện khi mobile menu đang MỞ (nav.menu-open — xem main.js), bình
     thường (menu đóng) ẩn đi, kể cả khi trang đã cuộn xuống. */
  .lang-select { display:none !important; }
  nav.menu-open .lang-select { display:flex !important; }

  .hero-left {
    top:0; bottom:0; left:0; right:0;
    padding:118px 20px 80px 40px;
    width:100%; max-width:100%;
    justify-content:flex-start;
    align-items:flex-start;
  }
  .hero-badge { position:relative; top:-50px; margin-bottom:auto; white-space:nowrap; font-size:11px; letter-spacing:.06em; gap:6px; }
  .hero-h1-ja { font-size:50px; line-height:1.15; text-align:left; margin-bottom:9px; position:relative; top:50px; }
  /* Riêng Hero mobile theo TỪNG ngôn ngữ — dùng "html:lang(xx) .hero-h1-ja" (specificity 0,2,1)
     để thắng rule chung .hero-h1-ja (0,1,0) ở trên trong cùng khối mobile, không đụng ngôn ngữ
     còn lại (JA/ZH/ES/PT/BN/ID vẫn dùng rule chung 50px/1.15 ở trên).
     EN — theo yêu cầu 2026-07-17 (chị Hoa): font-size:46px, line-height:1.2. */
  html:lang(en) .hero-h1-ja { font-size:46px; line-height:1.2; }
  /* VI — ban đầu 38px (2026-07-17, chữ tràn ra ngoài màn hình), chị Hoa chỉnh lại còn 34px
     cùng ngày. Line-height/text-align/margin/position vẫn kế thừa từ rule chung. */
  html:lang(vi) .hero-h1-ja { font-size:34px; }
  /* JA — theo yêu cầu 2026-07-22 (chị Hoa): font-size:43px trên mobile, không đụng PC/laptop.
     Line-height/text-align/margin/position vẫn kế thừa từ rule chung 50px/1.15 ở trên. */
  html:lang(ja) .hero-h1-ja { font-size:40px; }
  /* ZH/ES/PT-BR/BN — theo yêu cầu 2026-07-22 (chị Hoa): font-size:43px trên mobile, không đụng
     PC/laptop. ZH thêm ngắt dòng riêng cho mobile qua br.br-mobile-only trong hero_h1 (i18n-home.php). */
  html:lang(zh-hans) .hero-h1-ja,
  html:lang(es) .hero-h1-ja,
  html:lang(pt-br) .hero-h1-ja,
  html:lang(bn) .hero-h1-ja { font-size:43px; }
  .hero-divider { margin:0 0 30px; position:relative; top:50px; }
  .hero-sub { font-size:14px; line-height:1.75; text-align:left; position:relative; top:50px; }
  .hero-cta { gap:10px; position:relative; top:50px; }
  .hero-store-btn img { height:42px; }

  .showcase-progress { display:none; }
  .sc-stats { flex-direction:column; gap:0; }
  .sc-stats .sbar-item { padding:16px 0; border-right:none; border-bottom:1px solid var(--gray-2); }
  .sc-stats .sbar-item:last-child { border-bottom:none; }
  .sc-stats .sbar-tag { font-size:12px; }
  .sc-stats .sbar-val { font-size:38px; margin-bottom:7px; }
  .sc-stats .sbar-desc { font-size:14px; }

  .stats-bar-inner {
    grid-template-columns:1fr;
    border-left:none; border-right:none;
    margin:0 80px;
  }
  .sbar-item {
    padding:32px 0; border-right:none;
    border-bottom:1px solid var(--gray-2);
  }
  .sbar-item:last-child { border-bottom:none; }
  .sbar-val { font-size:44px; }

  .feat-sticky-sec { height:auto !important; }
  .feat-sticky-viewport {
    position:relative !important; height:auto !important;
    overflow:visible; display:flex; flex-direction:column;
    align-items:center; padding:48px 0 60px;
  }
  .feat-bg-pc { display:none; }
  .feat-bg-mb { display:block; }

  .feat-nav-col {
    position:relative !important; left:auto !important; top:auto !important;
    bottom:auto !important; width:100% !important; padding:60px 25px 28px;
  }
  .feat-nav-h2 { font-size:26px; line-height:1.4; }
  .feat-nav-sub { white-space:normal; }
  .feat-nav-list { display:none; }
  .feat-nav-store { display:none; }

  .feat-phone-col { display:none !important; }
  .feat-progress-bar { display:none !important; }

  .feat-text-col {
    position:static !important; left:auto !important; right:auto !important;
    top:auto !important; bottom:auto !important;
    width:100%; padding:0 25px;
    display:block; text-align:center;
  }
  .ftr-panel {
    position:relative !important;
    opacity:1 !important; transform:none !important;
    display:block !important; max-width:100%;
    pointer-events:auto;
    margin-bottom:64px;
  }
  .ftr-panel:last-child { margin-bottom:0; }
  .ftr-panel .feat-phone-frame {
    width:390px; height:550px; max-width:100%; border-radius:26px;
    margin:0 auto 20px;
  }
  .ftr-title { font-size:17px; }
  .ftr-desc { font-size:15px; line-height:2; }
  .ftr-cta-mobile { display:inline-flex; margin-top:20px; }
  .feat-store-mobile {
    position:relative; z-index:1;
    display:flex; justify-content:center; gap:10px;
    flex-wrap:wrap; padding:44px 0 4px; width:100%; flex-shrink:0;
  }
  .feat-store-mobile .feat-store-btn img { width:164px; height:53px; }

  .feat-nav-col { text-align:center; }
  .feat-nav-tag { justify-content:center; font-size:13px; }
  .feat-text-col { text-align:center; }

  .feat-nav-col { padding:60px 25px 28px; }
  .sec { padding:64px 25px; }
  .eco-title-row { padding:50px 20px 0; }
  .eco-title-row .sec-tag { font-size:13px; margin-bottom:6px; }
  .eco-title-row .sh { font-size:26px; line-height:1.4; margin-bottom:14px; }
  .eco-title-row .btn-primary { padding:10px 18px; font-size:12px; }

  br.mob-br { display:inline; }

  .eco-sec {
    width:100%; height:100vh;
    margin:0; border-radius:0;
  }
  .eco-tabs { grid-template-columns:repeat(3,1fr); }
  .eco-tab { padding:12px 10px 0; }
  .eco-tab-cat { display:none; }
  .eco-tab-name { font-size:15px; margin-bottom:10px; }
  .eco-desc-area { padding:0 16px 16px; }
  .eco-desc-text p { font-size:15px; }

  .philo-sec { flex-direction:column; min-height:auto; padding:60px 24px; align-items:stretch; }
  .philo-bg { width:100%; height:480px; margin-left:0; }
  .philo-in { margin-left:0; margin-top:36px; }
  .philo-col-single { max-width:100%; }
  h2.philo-h2 { font-size:18px; white-space:normal; }
  .philo-subhead { font-size:18px; margin:32px 0 14px; }
  br.br-mobile-only { display:inline; }
  br.br-desktop-only { display:none; }

  .trust-viewport { padding:100px 20px; align-items:flex-start; }
  .trust-in { flex-direction:column; align-items:stretch; gap:0; height:auto; }
  .trust-left { display:contents; }
  .trust-hl { white-space:normal; font-size:26px; line-height:1.4; }
  .trust-stat-card { align-self:flex-start; }
  .trust-cta-btn { align-self:flex-start; order:1; background:#fff; color:var(--black); margin-top:40px; }
  .trust-right-mask { width:100%; flex:none; height:auto; overflow:visible; margin-top:32px; }
  .trust-right-track { gap:12px; }
  .trust-card { width:100%; padding:30px 20px; gap:16px; border-radius:18px; }
  .t-icon svg { width:56px; height:56px; }
  .t-icon::before { width:64px; height:64px; }
  .t-title { font-size:15px; }
  .t-body { font-size:15px; line-height:2; }
  .tsc-title { white-space:normal; line-height:1.4; }

  .ag-globe-wrap {
    position:absolute;
    left:50% !important; right:auto !important;
    top:50% !important;
    transform:translate(-50%, -50%) !important;
    width:min(320px, 82vw) !important;
  }
  #agCanvas {
    position:absolute;
    left:50%; top:50%;
    transform:translate(-50%, -50%);
  }
  .ag-header { top:100px; padding:0 25px; }
  .ag-info { padding:0 0 40px; }
  .ag-header h2.sh { font-size:26px; line-height:1.4; }
  .ag-header .sh-sub { margin:12px 0 6px; }
  .ag-regions { flex-direction:column; align-items:center; gap:4px; }
  .ag-regions-list { white-space:normal; text-align:center; font-size:12px; }
  .agi-jp { font-size:20px; }

  .sec { padding:80px 25px; }
  /* h2.sh (0,1,1) đặc hiệu hơn .sh (0,1,0) nên trước đây line-height mobile không bao giờ
     ăn được — phải khai báo đúng h2.sh mới override được rule gốc ở trên (dòng ~342). */
  h2.sh { font-size:26px; line-height:1.4; }
  .sh-sub { font-size:14px; margin-bottom:32px; }

  .news-table,
  .news-table tbody,
  .news-table thead,
  .news-table tr,
  .news-table th,
  .news-table td { display:block; border:none !important; padding:0; width:auto !important; vertical-align:unset; }
  .news-table thead { display:none; }
  .news-table tr {
    padding:22px 0;
    border-bottom:1px solid var(--gray-2) !important;
  }
  .news-table tr:first-child { border-top:1px solid var(--gray-2) !important; }
  .news-date {
    font-size:13px; font-weight:700; color:var(--gray-4);
    letter-spacing:.06em; text-transform:uppercase;
    margin-bottom:8px;
  }
  .news-title {
    font-size:15px; font-weight:400; color:var(--black);
    line-height:2; margin-bottom:10px;
  }
  .news-src { text-align:left; }
  .ntag { font-size:10px; padding:4px 12px; }
  .news-more { margin-top:28px; font-size:14px; font-weight:700; }

  .dl-sec { padding:64px 25px 30px; }
  .dl-in { grid-template-columns:1fr; gap:40px; text-align:center; }
  .dl-copy { align-items:center; text-align:center; }
  .dl-title { font-size:26px; line-height:1.4; }
  .dl-title br.dl-br-desktop { display:none; }
  .dl-sub { margin:0 auto 32px; }
  .dl-btns { justify-content:center; }
  .dl-btns-desktop { display:none; }
  .dl-btns-mobile { display:flex; margin-top:0; }
  .dl-phone-wrap { display:flex; justify-content:center; margin-top:0; }
  .dl-deco { height:520px; width:520px; }
  .dl-deco-glow { width:460px; height:460px; filter:blur(75px); }
  .dl-deco-ring,
  .dl-deco-ring2,
  .dl-deco-ring3,
  .dl-deco-ring4 { width:320px; height:320px; }
  .dl-stats { align-items:center; margin-top:16px; margin-left:0; }
  .dl-stats .sbar-item { align-items:center; text-align:center; }
  .dl-stats .sbar-item::after { left:50%; transform:translateX(-50%); }
  .dl-stats .sbar-tag { font-size:12px; }
  .dl-stats .sbar-val { font-size:38px; }
  .dl-stats .sbar-desc { font-size:16px; }
  .dl-marquee { height:120px; margin-top:40px; }
  .dl-marquee-track span { font-size:120px; padding:0 20px; }

  .cta-banner {
    margin:0 0 80px; border-radius:0;
    padding:56px 25px;
    grid-template-columns:1fr; gap:28px;
  }
  .cta-title { font-size:clamp(22px,6vw,30px); }
  .cta-btns { flex-direction:column; gap:10px; }
  .cta-w, .cta-g { text-align:center; padding:16px 24px; font-size:14px; }
  .cta-right { display:none; }

  footer { padding:56px 25px 32px; }
  .foot-logo img { height:28px; }
  .foot-links { grid-template-columns:1fr 1fr; gap:32px; margin-bottom:36px; }
  .foot-col-t { font-size:12px; }
  .foot-link { font-size:15px; }
  .foot-bottom { flex-direction:column; gap:14px; text-align:center; }
  .foot-copy { font-size:10.5px; }
  .foot-social { justify-content:center; }
  .foot-tagline { font-size:11px; margin-top:6px; }

  /* Story page */
  .genesis-sec, .mission-sec {
    padding:var(--section-py-mobile) var(--section-px-mobile);
  }
  /* Mobile: text của .mission-sec lùi xuống đáy section, cách bottom đúng 100px (thay vì
     canh giữa dọc như desktop/laptop — chỉ override align-items + padding-bottom ở đây). */
  .mission-sec { align-items:flex-end; padding-bottom:100px; }
  /* Mobile: bỏ khoá "ghim 1 màn hình" của Efforts (3 hàng text+video không thể nhét vừa 1 màn
     hình nhỏ), quay về layout tự nhiên, cuộn dọc trang bình thường như trước. */
  .efforts-pin { height:auto !important; min-height:auto; }
  .efforts-sec { position:static; height:auto; overflow:visible; }
  .efforts-scroll {
    position:static; overflow:visible;
    background-image:var(--efforts-bg-mb);
    padding:var(--section-py-mobile) var(--section-px-mobile);
  }
  .efforts-in { padding:0; }
  .efforts-grid { gap:70px; }
  .action-sec { min-height:auto; padding:var(--section-py-mobile) var(--section-px-mobile); }
  .action-split { flex-direction:column; align-items:stretch; gap:var(--space-6); }
  /* Mobile: video chèn giữa — intro (tag+h2+subhead+body) → video → 3 ý checklist. .action-text-col
     chỉ là wrapper layout cho desktop (2 cột), không có style riêng nên chuyển display:contents để
     .efforts-intro/.action-list "thoát" ra làm flex item trực tiếp của .action-split, dùng order
     xếp lại cùng .action-media. Desktop/laptop không đụng đến (chỉ nằm trong @media 768px này). */
  .action-text-col { display:contents; }
  .action-text-col .efforts-intro { order:1; }
  .action-media { flex:none; width:100%; height:auto; aspect-ratio:600/750; max-width:400px; order:2; }
  .action-text-col .action-list { order:3; }
  .story-hero {
    padding:0 var(--section-px-mobile) 40px;
    text-align:left; align-items:flex-end; justify-content:flex-start;
  }
  .story-hero-in { max-width:100%; }
  .mission-subhead { font-size:20px; }
  .mission-brand br.mission-br-mobile { display:block; }
  .tech-bridge { padding:0 var(--section-px-mobile); }
  .genesis-in { grid-template-columns:1fr; gap:var(--space-6); }
  /* Company page — Ecosystem Flywheel dùng flex 420px/flex:1 (giống Technical Moat) ở desktop,
     mobile phải ép về xếp dọc + full width, nếu không cột trái 420px cố định sẽ tràn ngang màn nhỏ. */
  .company-flywheel-sec .genesis-in { flex-direction:column; gap:var(--space-6); }
  .company-flywheel-sec .genesis-text,
  .company-flywheel-sec .company-flywheel-cards { flex:none; width:100%; }
  .company-flywheel-card.trust-card { width:100%; }
  .effort-card { flex-direction:column; gap:30px; align-items:flex-start; flex:none; }
  /* Mobile: video lên trước, text (title+body) xuống dưới — đảo ngược thứ tự so với PC/laptop
     (nơi text luôn ở bên trái, video bên phải, không dùng order nên không bị ảnh hưởng). */
  .effort-text { flex:0 0 auto; max-width:100%; order:2; }
  .effort-media { flex:0 0 auto; width:100%; height:480px; max-height:none; margin-left:0; order:1; }
  .mission-cta { flex-direction:row; justify-content:center; align-items:center; }
  /* Scope riêng .mission-cta để không đụng .hero-store-btn img 42px dùng chung ở hero/footer */
  .mission-cta .hero-store-btn img { height:50px; }
  .effort-media .effort-video-pc { display:none; }
  .effort-media .effort-video-mb { display:block; }

  /* Products page */
  .products-hero { padding:0 var(--section-px-mobile) 40px; }
  .products-hero h1 { font-size:32px; line-height:1.4; }
  .products-hero-bg video.products-hero-video-pc { display:none; }
  .products-hero-bg video.products-hero-video-mb { display:block; }
  .stats-light-sec { padding:56px 24px; }
  .stats-light-sec .stats-bar-inner { grid-template-columns:1fr 1fr; }
  .stats-light-sec .sbar-val { font-size:36px; }
  .stats-light-sec .sbar-item { padding:28px 12px; border-right:1px solid var(--gray-2); border-bottom:1px solid var(--gray-2); }
  .stats-light-sec .sbar-item:nth-child(2n) { border-right:none; }
  .stats-light-sec .sbar-item:nth-last-child(-n+2) { border-bottom:none; }
  .ext-sec, .unifier-sec { padding:var(--section-py-mobile) var(--section-px-mobile); }
  .ext-grid { grid-template-columns:1fr; }
  .ext-cap { flex-direction:column; align-items:flex-start; gap:12px; left:16px; right:16px; bottom:16px; }
  .ext-live-badge { top:12px; left:12px; }
  .jv-outer { padding:0; }
  .jv-sec { width:100%; height:100vh; margin:0; border-radius:0; }
  .jv-title-row { padding:50px 20px 0; }
  .jv-desc-area { padding:0 16px 32px; }

  /* Technology page */
  .tech-hero { padding:0 var(--section-px-mobile) 40px; text-align:left; align-items:flex-end; justify-content:flex-start; }
  .tech-hero-cta-row { flex-direction:column; align-items:stretch; gap:16px; width:100%; }
  .tech-hero-cta-row .tech-bridge-link { justify-content:center; width:100%; }
  .tech-hero-in { max-width:100%; }
  .scalability-sec { padding:var(--section-py-mobile) var(--section-px-mobile); }
  .scalability-cta-row { flex-direction:column; gap:16px; width:100%; }
  .scalability-cta-row .tech-bridge-link { justify-content:center; width:100%; }
  .validation-sec { padding:var(--section-py-mobile) var(--section-px-mobile); }
  .validation-bg { background-image:linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('../images/neurips-talk-mobile.webp'); }
  .innov-sec { padding:100px var(--section-px-mobile) var(--section-py-mobile); }
  .validation-card { padding:var(--space-6) var(--space-5); }
  .innov-grid { grid-template-columns:1fr; }

  /* Company page */
  .company-mission, .company-team-sec, .company-compliance-sec {
    padding:var(--section-py-mobile) var(--section-px-mobile);
  }
  /* Hero căn trái dồn đáy — cùng pattern mobile override của .story-hero (page-story.php),
     không dùng padding căn giữa chung ở trên nữa. */
  .company-hero { padding:0 var(--section-px-mobile) 40px; }
  .company-hero-in { max-width:100%; }
  .company-hero h1 { font-size:38px; }
  .company-hero-bg {
    background:linear-gradient(rgba(10,10,8,.2), rgba(10,10,8,.2)), url('../images/company_hero_MB.webp') center/cover no-repeat;
  }
  .company-mission h2 { white-space:normal !important; }
  .company-ceo { flex-direction:column; gap:var(--space-5); }
  /* flex:1 1 0 kế thừa từ desktop (row) khiến ảnh co về height:0 khi đổi sang column —
     container không có height cố định nên flex-grow không có "free space" để chia cho ảnh.
     Reset flex về none + để width:100% + aspect-ratio tự tính chiều cao. */
  .company-ceo-photo { flex:none; width:100%; }
  .company-ceo-info { flex:none; width:100%; }
  .company-axioms-wrap { grid-template-columns:1fr; gap:var(--space-5); margin-top:var(--space-6); }
  .company-team-grid { grid-template-columns:1fr; gap:var(--space-6); }
  .company-team-simple-grid { grid-template-columns:1fr 1fr; }
  .compliance-list li { grid-template-columns:1fr; gap:4px; }
  .office-grid { grid-template-columns:1fr; }
  .company-bio-modal-card { padding:var(--space-6); }
  .company-bio-modal-head { gap:14px; margin-bottom:var(--space-5); }
  .company-bio-modal-photo { width:64px; height:64px; }
  .company-bio-modal-name { font-size:18px; }

  /* Contact page */
  .contact-hero { padding:140px var(--section-px-mobile) 80px; }
  .contact-hero h1 { font-size:38px; }
  .contact-wrap {
    flex-direction:column; gap:56px;
    padding:var(--section-py-mobile) var(--section-px-mobile);
  }
  .contact-info {
    width:100%; flex-direction:row; flex-wrap:wrap; gap:32px;
    border-right:none; padding-right:0;
    border-bottom:1px solid var(--gray-2); padding-bottom:40px;
  }
  .contact-info-card { width:calc(50% - 16px); }
  .contact-form-row { grid-template-columns:1fr; }
  .contact-form-footer { flex-direction:column; align-items:flex-start; gap:12px; }

  /* Careers page — hero căn trái dồn đáy giống .company-hero mobile; các section grid 3/2 cột
     đều rớt về 1 cột trên mobile. */
  .career-hero { padding:0 var(--section-px-mobile) 40px; }
  .career-hero-in { max-width:100%; }
  .career-hero h1 { font-size:38px; }
  .career-pillars-sec, .career-promise-sec, .career-benefits-sec, .career-jobs-sec,
  .career-cta-sec { padding:var(--section-py-mobile) var(--section-px-mobile); }
  .career-pillar-grid { grid-template-columns:1fr; }
  .career-benefit-grid { grid-template-columns:1fr; }
  .career-filter-label { width:100%; margin-bottom:2px; }
  .career-job-row { flex-direction:column; align-items:flex-start; gap:4px; }
  .career-promise-row { flex-direction:column; gap:var(--space-2); }
  .career-promise-mid { flex:none; width:100%; }
  .career-cta-bg {
    background:linear-gradient(rgba(10,10,8,.3), rgba(10,10,8,.3)), url('../images/careers_2_MB.webp') center/cover no-repeat;
  }

  /* Section 6 (Internship/Referral/Life) — 3 thẻ rớt về 1 cột xếp dọc trên mobile (icon
     trên/text dưới đã đúng layout desktop rồi, chỉ cần đổi grid + thu icon nhỏ lại). */
  .career-tcard-sec { padding:var(--section-py-mobile) var(--section-px-mobile); }
  .career-tcard-row { grid-template-columns:1fr; gap:var(--space-4); }
  .career-tcard-visual { height:100px; }
  .career-tcard-visual svg { width:90px; height:90px; }

  /* Our Promise page (page-our-promise.php) — hero rút chiều cao/padding, cycle-row + commit-row
     + believe-grid đều rớt về 1 cột trên mobile. */
  .promise-hero { padding:0 var(--section-px-mobile) 40px; }
  .promise-hero-in { max-width:100%; }
  .promise-hero h1 { font-size:38px; }
  /* EN — theo yêu cầu 2026-07-17 (chị Hoa): hero H1 mobile riêng 36px, không đụng PC/laptop
     và không đụng ngôn ngữ khác (vẫn 38px chung ở trên). */
  html:lang(en) .promise-hero h1 { font-size:36px; }
  .promise-hero-bg {
    background:linear-gradient(rgba(10,10,8,.2), rgba(10,10,8,.2)), url('../images/careers_2_MB.webp') center/cover no-repeat;
  }
  .promise-expect-sec, .promise-cycle-sec, .promise-commit-sec, .promise-believe-sec,
  .promise-cta-sec { padding:var(--section-py-mobile) var(--section-px-mobile); }
  .promise-cycle-row { flex-direction:column; }
  .promise-cycle-arrow { transform:rotate(90deg); }
  .promise-commit-row { flex-direction:column; gap:var(--space-2); }
  .promise-commit-mid { flex:none; width:100%; }
  .promise-believe-grid { grid-template-columns:1fr; gap:var(--space-6); }

  /* Newsroom page (page-newsroom.php) — 2 cột → 1 cột, list row xếp dọc (ngày/tag/tiêu đề) */
  .nr-wrap { padding:0 var(--section-px-mobile); }
  .nr-hero { padding:calc(var(--nav-height) + 32px) 0 0; }
  .nr-hero-grid { grid-template-columns:1fr; gap:var(--space-4); align-items:start; padding-bottom:var(--space-5); }
  .nr-hero-right { padding-bottom:0; }
  .nr-hero-desc.body-copy { max-width:100%; }
  .nr-featured { padding:var(--space-6) 0 0; }
  .nr-feat-grid { grid-template-columns:1fr; gap:var(--space-6); padding-bottom:var(--space-5); }
  .nr-feat-main, .nr-feat-side { grid-column:1/-1; }
  .nr-list-section { padding:var(--space-6) 0 var(--section-py-mobile); }
  .nr-list-header { flex-direction:column; align-items:flex-start; gap:var(--space-3); }
  .nr-filters { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .nr-nrow {
    grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:6px 10px;
    align-items:start; padding:var(--space-3) 4px;
  }
  .nr-ndate { grid-column:1; grid-row:1; }
  .nr-ntag { grid-column:2; grid-row:1; justify-self:end; }
  .nr-ntitle { grid-column:1/-1; grid-row:2; font-size:15px; }
  .nr-nrow .arr { opacity:1; }

  /* Single post page (single.php) — container hẹp lại, title nhỏ hơn, related-grid rớt 1 cột */
  .nsg-container { padding:0 var(--section-px-mobile); }
  .nsg-hero-wrap { padding:calc(var(--nav-height) + 24px) 0 var(--space-5); }
  .nsg-header { max-width:100%; }
  .nsg-title { font-size:26px; }
  .nsg-body { font-size:15px; }
  .nsg-related-grid { grid-template-columns:1fr; gap:var(--space-6); }

  /* Terms of Use page (page-terms-of-use.php) — hero rút chiều cao/padding, container hẹp lại */
  .terms-hero { min-height:300px; padding:calc(var(--nav-height) + 20px) var(--section-px-mobile) 40px; }
  .terms-wrap { padding:var(--space-6) var(--section-px-mobile) var(--section-py-mobile); }
}

@media (max-width:480px) {
  .eco-tabs { grid-template-columns:repeat(2,1fr); }
  .hero-left { padding-left:20px; padding-right:20px; }
  .contact-info-card { width:100%; }
}

@media (max-width:390px) {
  /* 2026-07-23 — JA, màn hình ≤390px (iPhone SE/X/11/12/13 mini...): ở size 40px (rule chung
     trong khối @media max-width:768px phía trên) chữ h1 bị xuống dòng lệch (vd tách
     "あなた"/"を" ra 2 dòng riêng biệt) — chị Hoa yêu cầu giảm còn 36px riêng cho nhóm máy
     ≤390px này, không đụng máy to hơn (vẫn giữ 40px trên 390px). */
  html:lang(ja) .hero-h1-ja { font-size:36px; }
}