@charset "UTF-8";
/* ============================================================
   IABER — hệ thiết kế
   ------------------------------------------------------------
   LƯU Ý QUAN TRỌNG: dòng @charset "UTF-8" PHẢI nằm ở ngay đầu file
   (byte đầu tiên, trước mọi comment). Nếu không, khi VPS trả file CSS
   không kèm charset=utf-8, các trình duyệt KHÔNG phải Chrome (Firefox,
   Safari) sẽ đọc tên font tiếng Trung ('微软雅黑', '等线'…) theo mã
   Latin-1 → sai tên font → chữ Hán rơi về font mặc định, gây "lỗi
   font" chỉ xuất hiện trên trình duyệt khác Chrome.
   ------------------------------------------------------------
   Màu xanh lấy trực tiếp từ file logo (đo bằng canvas, 2480×2480):
     #309000  xanh chủ đạo  — 129.283 px, nhiều nhất trong logo
     #70C010  xanh nét khắc — dải sáng ở viền cánh
   Tương phản trên nền #0A0A0A: #309000 = 4.82:1, #70C010 = 8.71:1 (đều đạt WCAG AA)
   ============================================================ */

:root{
  /* --- Bề mặt tối --- */
  --bg:           #0A0A0A;
  --bg-raise:     #121412;
  --bg-panel:     #171917;

  /* --- Giấy: khối chứng thư nền trắng thật --- */
  --paper:          #FFFFFF;
  --paper-edge:     #DDE5DA;
  --paper-ink:      #0B0F0B;
  --paper-ink-soft: #5A635A;

  /* --- Đường kẻ --- */
  --line:        rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.20);

  /* --- Chữ trên nền tối --- */
  --text:       #F2F4F1;
  --text-soft:  #9AA398;
  --text-faint: #6B736A;

  /* --- Xanh thương hiệu --- */
  --green:       #309000;
  --green-line:  #70C010;
  --green-hover: #3DAF00;
  --green-wash:  rgba(48,144,0,.14);

  /* --- Thang chữ: tỉ lệ 1.25 từ gốc 16px --- */
  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.875rem;   /* 14 */
  --t-base: 1rem;       /* 16 */
  --t-md:   1.25rem;    /* 20 */
  --t-lg:   1.5625rem;  /* 25 */
  --t-xl:   1.9531rem;  /* 31 */
  --t-2xl:  2.4414rem;  /* 39 */
  --t-3xl:  3.0518rem;  /* 49 */

  /* --- Khoảng cách: gốc 4px --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* --- Bo góc: chỉ 2 giá trị, dùng hết --- */
  --r-sm: 2px;
  --r-md: 4px;

  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* --- Font: 'Noto Sans SC' nằm sẵn trong cả 3 stack để chữ Hán luôn dùng
     đúng font đã nạp (bản ZH), thay vì rơi về font hệ điều hành của từng
     máy. Vô hại với bản VI/EN — font này không được nạp nên trình duyệt bỏ
     qua, không đổi hiển thị. Đồng bộ 1 chỗ duy nhất, không rải rác zh-only
     override theo từng class như trước. */
  /* CJK: chỉ dùng font CÓ SẴN trên máy, không nạp web-font. 'Noto Sans SC'
     giữ lại cho máy đã cài sẵn; sau đó là font hệ thống của từng nền tảng —
     PingFang SC (macOS/iOS), Microsoft YaHei (Windows), Noto Sans CJK SC
     (Linux). Xem ghi chú ở đầu assets/css/fonts.css để biết vì sao bỏ
     web-font CJK. */
  --font-cjk:     'Noto Sans SC','PingFang SC','Microsoft YaHei','微软雅黑','Hiragino Sans GB','Noto Sans CJK SC';
  --font-sans:    'Inter',var(--font-cjk),system-ui,-apple-system,sans-serif;
  /* 18/08/2026: khách yêu cầu MỌI chữ Latin trên trang dùng đúng font logo.
     Trước đây tiêu đề dùng Space Grotesk — nét khác hẳn wordmark IABER.
     Đổi sang Archivo, cùng họ chữ với --font-brand. */
  --font-display: 'Archivo',var(--font-cjk),'Inter',sans-serif;
  --font-mono:    'IBM Plex Mono',var(--font-cjk),ui-monospace,monospace;
  /* Font chữ trên LOGO công ty. Chọn bằng cách chồng ảnh chữ "IABER" của
     wordmark lên từng ứng viên rồi đo phần trùng nét: Archivo 800 trùng 84%,
     Figtree 800 81%, Manrope 800 77%, Inter 54%, IBM Plex Mono 36%.
     Dùng cho tên thương hiệu và các nhãn chữ Latin để đồng bộ với logo. */
  --font-brand:   'Archivo',var(--font-cjk),'Inter',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--t-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.15;
  /* Cân đều số chữ giữa các dòng — chặn hiện tượng dòng cuối trơ một từ
     ("...nghiêm / túc", "...khách hàng khác / nhau"). */
  text-wrap:balance;
}
/* Đoạn văn: tránh để một từ rơi trơ trọi xuống dòng cuối */
p,li{ text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; border:none; background:none; }
.mono{ font-family:var(--font-mono); }

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--green-line);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s6); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:var(--s4); top:-60px; z-index:200;
  background:var(--green); color:#fff; padding:var(--s3) var(--s5);
  border-radius:var(--r-sm); font-size:var(--t-sm); font-weight:600;
  transition:top .16s var(--ease);
}
.skip-link:focus{ top:var(--s4); }

/* ===== EYEBROW: gạch kép — cạnh tờ tiền, không phải gạch trang trí ===== */
/* Nhãn nhỏ trên tiêu đề. Trước đây dùng IBM Plex Mono + letter-spacing .14em
   nên chữ "IABER" hiện ra dạng "I A B E R" giãn rộng, không giống nét chữ trên
   logo — khách bắt lỗi 18/08/2026. Đổi sang --font-brand (Archivo, đúng font
   logo) và siết giãn chữ còn .08em: vẫn ra dáng nhãn nhỏ nhưng cùng họ chữ
   với thương hiệu. */
.eyebrow{
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--font-brand);
  /* Archivo 600 dày hơn hẳn IBM Plex Mono 400 của bản cũ nên cùng một mã màu
     mà nhìn sáng chói hơn — khách bắt lỗi 18/08/2026. Về 400 cho đúng sắc độ
     ban đầu, vẫn giữ font logo. */
  font-weight:400;
  font-size:0.9375rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--green-line);
  margin-bottom:var(--s4);
}
/* Tên thương hiệu viết bằng chữ (không phải ảnh logo): bám sát wordmark —
   Archivo 800, không giãn chữ. Dùng <b class="brandmark">IABER</b>. */
.brandmark{
  font-family:var(--font-brand);
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
}
.eyebrow::before{
  content:""; width:22px; height:3px; flex:none;
  border-top:1px solid currentColor;
  border-bottom:1px solid currentColor;
}
/* .eyebrow viết hoa toàn bộ, nhưng tên riêng "Binance" phải giữ đúng cách viết
   của thương hiệu — bọc <span class="nocaps">. */
.eyebrow .nocaps{ text-transform:none; }
/* Dấu & của Archivo có nét xoắn kiểu chữ ký, đọc ra không giống dấu &. Chỉ
   riêng ký tự này mượn font nền (Inter) — khách chốt 18/08/2026.
   margin âm: hai bên dấu & vốn ăn cả dấu cách LẪN letter-spacing .08em của
   .eyebrow nên khe hở rộng gấp rưỡi khe giữa các từ — kéo lại cho cân. */
.eyebrow .amp{
  font-family:var(--font-sans); font-weight:500;
  margin-inline:-.22em;
}
/* .eyebrow-break: chỉ dùng ở nhãn hero (vi/en) để ép xuống dòng đúng chỗ
   "...tổ chức" / "...Partner" trên di động — khách chốt 19/08/2026 vì để
   trình duyệt tự ngắt dòng cho ra điểm gãy xấu. Ẩn trên desktop (nhãn đủ chỗ
   nằm một dòng, ::before/::after vẫn canh giữa hai bên như cũ). */
.eyebrow-break{ display:none; }
@media (max-width:640px){
  .eyebrow-break{ display:inline; }
  /* Cỡ chữ mặc định (15px + letter-spacing .08em) khiến "ĐỐI TÁC TÀI KHOẢN VIP
     TỔ CHỨC" / "INSTITUTIONAL VIP ACCOUNT PARTNER" rớt xuống 2 dòng trước khi
     chạm .eyebrow-break — thu nhỏ riêng nhãn hero trên di động để cả câu vừa
     đúng 1 hàng, .eyebrow-break mới chia đúng 2 dòng như khách yêu cầu. */
  .hero-centered .eyebrow{ font-size:0.75rem; letter-spacing:.03em; }
  /* margin âm -.22em của .amp được canh cho letter-spacing .08em ở desktop; khi
     hero thu còn .03em trên di động, margin âm này nuốt trọn dấu cách hai bên
     nên "OKX & Binance" dính thành "OKX&Binance". Bỏ margin âm ở nhãn hero di
     động để dấu cách trở lại tự nhiên (~3px mỗi bên). */
  .hero-centered .amp{ margin-inline:0; }
}

/* ===== HEADER ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5);
  max-width:var(--wrap); margin-inline:auto;
  padding:var(--s4) var(--s6);
}
.logo{ display:flex; align-items:center; gap:var(--s3); flex:none; }
.logo img{ height:48px; width:auto; }
.nav-links{ display:flex; gap:var(--s6); font-size:var(--t-sm); color:var(--text-soft); }
.nav-links a{ transition:color .16s var(--ease); }
.nav-links a:hover{ color:var(--text); }
.nav-cta{
  flex:none;
  font-size:var(--t-sm); font-weight:600;
  padding:var(--s2) var(--s5);
  border:1px solid var(--green-line);
  color:var(--green-line);
  border-radius:var(--r-sm);
  transition:background .16s var(--ease), color .16s var(--ease);
}
.nav-cta:hover{ background:var(--green-line); color:var(--bg); }

/* Nút hamburger — bản cũ không có, mobile không điều hướng được */
.nav-toggle{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  align-items:center; justify-content:center;
  flex:none;
}
.nav-toggle span{
  display:block; width:18px; height:1.5px; background:var(--text);
  position:relative; transition:background .16s var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:18px; height:1.5px; background:var(--text);
  transition:transform .22s var(--ease), top .22s var(--ease);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{  top:6px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{  top:0; transform:rotate(-45deg); }

.mobile-menu{
  display:none;
  border-top:1px solid var(--line);
  background:var(--bg-raise);
  padding:var(--s5) var(--s6) var(--s6);
}
.mobile-menu.open{ display:block; }
.mobile-menu a{
  display:block; padding:var(--s4) 0;
  border-bottom:1px solid var(--line);
  font-size:var(--t-md); color:var(--text);
}
.mobile-menu .mm-cta{
  display:block; margin-top:var(--s5); text-align:center;
  background:var(--green); color:#fff; font-weight:600;
  padding:var(--s4); border-radius:var(--r-sm); border:none;
}

/* ===== HERO ===== */
.hero{
  position:relative; overflow:hidden;
  min-height:min(92vh, 900px);
  display:flex; align-items:center;
  padding:var(--s8) 0;
}
.hero .wrap{ position:relative; z-index:1; width:100%; }

/* Hoa văn phủ kín hero — canvas full-bleed, tâm đoá nằm giữa màn hình */
.guilloche{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--s7); align-items:center;
}
/* Chữ hero co giãn theo bề ngang màn hình — khối chữ chiếm khoảng nửa chiều
   cao hero, không cần media query riêng cho từng cỡ máy. */
.hero h1{
  font-size:clamp(2.5rem, 6vw, 4.75rem);
  /* line-height 1.06 quá sát cho tiếng Việt: dấu thanh + dấu mũ chồng 2 tầng
     (ầ, ợ, ồ, ố…) ở hàng dưới đụng phần chân chữ hàng trên -> "dính chữ".
     Nới lên 1.16 để hai hàng tách bạch ở mọi cỡ. */
  line-height:1.16; letter-spacing:-.01em;
  margin-bottom:var(--s5);
}
.hero h1 em{ font-style:normal; color:var(--green-line); }
.hero .lead{
  font-size:clamp(1.05rem, 1.55vw, 1.375rem);
  line-height:1.55; color:var(--text-soft);
  max-width:56ch; margin-bottom:var(--s6);
}
.hero-actions{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s6); }

.btn-primary,.btn-secondary{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-sm); font-weight:600;
  padding:var(--s4) var(--s5);
  border-radius:var(--r-sm);
  transition:background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.btn-primary{ background:var(--green); color:#fff; border:1px solid var(--green); }
.btn-primary:hover{ background:var(--green-hover); border-color:var(--green-hover); }
.btn-secondary{ border:1px solid var(--line-strong); color:var(--text); font-weight:500; }
.btn-secondary:hover{ border-color:var(--text-soft); }

.hero-disclaimer{
  font-size:var(--t-xs); color:var(--text-faint);
  max-width:52ch; border-left:2px solid var(--line-strong);
  padding-left:var(--s3);
}

/* ===== HERO CĂN GIỮA =====
   Sau khi bỏ panel chứng thư, toàn bộ nội dung dồn về một cột căn giữa,
   nằm chính giữa đoá guilloche — cân đối và trang trọng. */
.hero-centered{ text-align:center; }
.hero-lede{
  max-width:min(1020px, 94vw); margin-inline:auto;
  display:flex; flex-direction:column; align-items:center;
}
.hero-centered .eyebrow{ justify-content:center; }
.hero-centered .eyebrow::after{
  content:""; width:22px; height:3px; flex:none;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor;
}
/* (Đã bỏ .hero-partners/.partner-pill — hai viên pill sàn đối tác ở hero chỉ tồn
   tại trong ngày 18/08/2026 rồi khách yêu cầu quay lại dòng .eyebrow như cũ.
   Chip sàn đối tác vẫn còn ở trust bar, xem .partner-chip.) */
.hero-centered h1{ margin-bottom:var(--s5); }
.hero-centered .lead{
  margin-inline:auto; margin-bottom:var(--s7);
  max-width:58ch;
}
.hero-centered .hero-actions{ justify-content:center; margin-bottom:var(--s6); }
.hero-centered .hero-disclaimer{
  border-left:none; padding-left:0;
  padding-top:var(--s4); margin-top:var(--s1);
  border-top:1px solid var(--line);
  max-width:60ch; margin-inline:auto;
  color:var(--text-faint);
}

/* ===== CHỨNG THƯ: giấy trắng thật trên nền đen ===== */
/* Chứng thư nền đen — thẻ đen ngân hàng tư nhân.
   Nền hơi nâng khỏi --bg và có viền sáng để tách khỏi guilloche phía sau. */
.cert{
  position:relative; z-index:1;
  background:rgba(18,20,18,.92);
  backdrop-filter:blur(8px);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  box-shadow:0 24px 56px -18px rgba(0,0,0,.85);
  overflow:hidden;
}
.cert-edge{
  height:6px;
  background:repeating-linear-gradient(90deg,var(--green-line) 0 1px,transparent 1px 3px);
  border-bottom:1px solid var(--line-strong);
}
.cert-head{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:var(--t-xs); font-weight:600; letter-spacing:.12em;
  color:var(--text);
}
.cert-head .ref{ color:var(--text-faint); font-weight:400; letter-spacing:.06em; }
.cert-body{ padding:var(--s2) var(--s5); }
.cert-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--s4);
  padding:var(--s3) 0;
  border-bottom:1px dotted var(--line);
}
.cert-row .label{ font-size:var(--t-sm); color:var(--text-soft); }
.cert-row .value{
  font-family:var(--font-mono);
  font-size:var(--t-base); font-weight:600; letter-spacing:-.02em;
  color:var(--text);
  text-align:right; white-space:nowrap;
}
.cert-row.total{ border-bottom:none; padding-top:var(--s4); }
.cert-row.total .value{ color:var(--green-line); font-size:var(--t-md); }
.cert-row.total .value .unit{ font-size:var(--t-xs); color:var(--text-faint); }

/* Hàng "Quy mô tài khoản được cấp": nhãn dài + giá trị dài cùng lúc trên màn
   hẹp khiến nhãn bị bóp còn vài ký tự/dòng (vỡ chữ). Xếp chồng thay vì ép
   nằm ngang. */
@media (max-width:480px){
  .cert-row{ flex-wrap:wrap; }
  .cert-row.total{ flex-direction:column; align-items:flex-start; gap:var(--s2); }
  .cert-row.total .value{ text-align:left; }
}
.cert-foot{
  padding:var(--s3) var(--s5) var(--s4);
  border-top:1px solid var(--line);
  font-size:var(--t-xs); line-height:1.5; color:var(--text-soft);
}
.cert-seals{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s3); }
.seal{
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-xs); color:var(--text-soft);
  border:1px solid var(--line-strong);
  padding:var(--s1) var(--s3);
  border-radius:20px;
}
.seal .dot{ width:5px; height:5px; border-radius:50%; background:var(--green-line); flex:none; }

/* ===== SECTION ===== */
.section{ padding:var(--s9) 0; }

/* Bù chiều cao thanh menu dính (sticky) khi bấm điều hướng nhảy tới mục —
   không có dòng này, dòng đầu của tiêu đề bị thanh menu che mất. */
#dich-vu, #quy-trinh, #doi-ngu, #tuyen-dung, #lien-he{ scroll-margin-top:96px; }
/* Bỏ giới hạn chung; đặt bề rộng riêng cho tiêu đề và đoạn mô tả để tiêu đề
   dài (vd "6 dịch vụ, phục vụ 6 nhóm khách hàng khác nhau") nằm gọn một dòng,
   còn đoạn mô tả vẫn giữ độ dài dòng dễ đọc. */
.section-head{ max-width:none; margin-bottom:var(--s7); }
.section-head p:not(.eyebrow){ max-width:68ch; }
.section-head-cta{ margin-top:var(--s5); }

/* Đầu mục hai vế: chữ bên trái, nút đẩy sang mép phải, chân cùng đường cơ sở */
.section-head-split{
  max-width:none;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s6); flex-wrap:wrap;
}
.section-head-split .section-head-text{ max-width:none; }
.section-head-split .section-head-cta{ margin-top:0; flex:none; }
@media (max-width:900px){
  .section-head-split{ display:block; }
  .section-head-split .section-head-cta{ margin-top:var(--s5); }
}
.section-head h2{ font-size:var(--t-xl); margin-bottom:var(--s4); max-width:48ch; }
.section-head p{ color:var(--text-soft); font-size:var(--t-base); }

/* Đầu mục CĂN GIỮA (như hero) — dùng cho Dịch vụ & Tin tức */
.section-head-center{ text-align:center; }
.section-head-center .eyebrow{ justify-content:center; }
.section-head-center .eyebrow::after{
  content:""; width:22px; height:3px; flex:none;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor;
}
.section-head-center h2{ margin-inline:auto; }
.section-head-center p:not(.eyebrow){ margin-inline:auto; }
/* Tin tức: xếp dọc, căn giữa, nút "Xem tất cả" xuống dưới giữa */
.news-head.section-head-center{ flex-direction:column; justify-content:center; align-items:center; }
.news-head.section-head-center > a{ margin-top:var(--s5); }

/* ===== REVEAL khi cuộn =====
   Nội dung MẶC ĐỊNH HIỆN. Chỉ khi JS xác nhận IntersectionObserver thật sự
   chạy được thì mới gắn .reveal-armed lên <html> để giấu đi mà làm hiệu ứng.
   Lý do: nếu CSS giấu sẵn rồi chờ JS gỡ, mà JS hoặc IO hỏng, thì nội dung
   mất vĩnh viễn. Không đánh đổi nội dung lấy hiệu ứng. */
.reveal-armed .reveal{ opacity:0; transform:translateY(18px); }
.reveal-armed .reveal.in{
  opacity:1; transform:none;
  transition:opacity .95s var(--ease), transform .95s var(--ease);
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal-armed .reveal{ opacity:1; transform:none; }
  .reveal-armed .reveal.in{ transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .nav-links,.nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero{ min-height:0; display:block; }
  .section{ padding:var(--s8) 0; }
  /* Màn hẹp: hoa văn nhạt bớt để không tranh với chữ */
  .guilloche{ opacity:.65; }
}
@media (max-width:640px){
  .wrap{ padding-inline:var(--s5); }
  .nav-inner{ padding:var(--s3) var(--s5); }
  .hero{ padding-top:var(--s7); }
  .guilloche{ opacity:.5; }
}

/* ===== TRIẾT LÝ ===== */
/* Tỷ lệ khung CỐ ĐỊNH thay chiều cao cứng: crop giữ nguyên tỷ lệ ở MỌI bề rộng
   màn hình — nếu dùng height cố định + full-width, màn càng rộng ảnh scale càng
   cao nên cắt dọc càng nhiều, làm mất đỉnh lá hình tim của cây.
   14:5 (2.8) + object-position mép trên: khung chỉ lộ ~55% chiều cao ảnh tính từ
   trên xuống, vừa đủ hết cây bốn lá và cắt sát hết dải tuyết ở đáy ảnh gốc
   (tuyết bắt đầu từ khoảng 63% chiều cao ảnh). */
.philosophy{ position:relative; aspect-ratio:14/5; overflow:hidden; background:var(--bg-raise); }
.philosophy > img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; opacity:1; }
.philosophy-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding-bottom:var(--s7);
  background:linear-gradient(0deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.15) 55%, rgba(10,10,10,.05) 100%);
}
.philosophy-cn{ font-size:var(--t-sm); color:var(--green-line); letter-spacing:.04em; margin-bottom:var(--s3); }
.philosophy-vn{ font-family:var(--font-display); font-size:var(--t-md); font-weight:600; color:#fff; max-width:56ch; line-height:1.45; }

/* ===== TRUST BAR ===== */
.trust-bar{ border-block:1px solid var(--line); padding:var(--s5) 0; background:var(--bg-panel); }
.trust-inner{ display:flex; justify-content:center; align-items:center; gap:var(--s6); flex-wrap:wrap; }
.trust-label{ font-size:var(--t-xs); color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em; }
.trust-logos{ display:flex; gap:var(--s4); align-items:center; justify-content:center; flex-wrap:wrap; }
.partner-chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:var(--s2) var(--s4); border:1px solid var(--line-strong);
  border-radius:20px; font-size:var(--t-sm); color:var(--text-soft);
}
/* Tên sàn và nhãn hạng đều dùng --font-brand (Archivo) — cùng họ chữ với
   wordmark OKX/IABER, khách chốt 18/08/2026. Trước đây tên sàn dùng font nền
   (Inter) còn nhãn dùng font mono nên ba kiểu chữ chen nhau trong một viên. */
.partner-chip b{
  font-family:var(--font-brand); font-weight:700;
  color:var(--text); letter-spacing:0;
}
.partner-chip .badge{
  font-family:var(--font-brand); font-weight:600;
  letter-spacing:.04em; font-size:10px;
  color:var(--green-line); border:1px solid var(--green-line);
  border-radius:8px; padding:1px 6px;
}
@media (max-width:640px){
  /* Sau khi bỏ chip "Văn phòng đại diện" chỉ còn 2 chip OKX/Binance — khách
     chốt 19/08/2026 muốn 2 chip này luôn nằm 1 hàng trên di động thay vì rớt
     xuống 2 hàng. Thu nhỏ chip + khoảng cách để vừa khung 375px. Đặt SAU rule
     gốc .partner-chip để không bị cùng độ đặc hiệu đè mất (bài học 19/08). */
  .trust-logos{ gap:var(--s2); }
  .partner-chip{ padding:5px 10px; gap:5px; font-size:0.6875rem; }
  .partner-chip .badge{ font-size:8.5px; padding:1px 4px; letter-spacing:.02em; }
  /* Khoảng cách nhãn → hàng chip vốn dùng --s6 (32px, để chừa chỗ khi chip
     còn tràn 2 hàng lúc trước) — giờ chỉ còn 1 hàng ngắn nên khoảng trắng đó
     bị dư, thu về --s4 (16px) cho khung gọn hơn. */
  .trust-inner{ gap:var(--s4); }
}

/* ===== BẢN LĨNH ===== */
.conviction{ background:var(--bg-raise); }
.conviction-grid{ display:grid; grid-template-columns:.85fr 1.15fr; align-items:stretch; }
.conviction-media{ min-height:420px; overflow:hidden; }
.conviction-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(100%) contrast(1.05); }
.conviction-copy{ padding:var(--s8) var(--s7); display:flex; flex-direction:column; justify-content:center; }
.conviction-copy h2{ font-size:var(--t-lg); margin-bottom:var(--s4); max-width:32ch; }
.conviction-copy p{ color:var(--text-soft); font-size:var(--t-sm); max-width:52ch; }

/* ===== FEATURE ===== */
.feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.feature-card{
  background:var(--bg-raise); padding:var(--s6) var(--s5);
  position:relative; overflow:hidden;
  transition:background .35s var(--ease);
}
/* Thanh nhấn xanh chạy ngang từ trái sang khi rê chuột — phản hồi cao cấp */
.feature-card::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--green), var(--green-line));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease); pointer-events:none;
}
.feature-card:hover{ background:var(--bg-panel); }
.feature-card:hover::after{ transform:scaleX(1); }
.feature-card .num{
  /* Nhãn tiêu đề thẻ (资金服务…) — để lớn hơn chữ nội dung (.feature-card p ở
     --t-sm) một chút cho nổi vai trò tiêu đề (khách chốt 02/08/2026). */
  font-size:0.9375rem; color:var(--green-line); letter-spacing:.12em;
  margin-bottom:var(--s5);
  transition:color .3s var(--ease);
}
.feature-card h3{
  font-size:var(--t-base); margin-bottom:var(--s2);
  transition:color .3s var(--ease);
}
.feature-card:hover h3{ color:#fff; }
.feature-card p{ font-size:var(--t-sm); color:var(--text-soft); }

/* ===== "VÌ SAO CHỌN IABER" — nền có chiều sâu, thoát khỏi đen phẳng ===== */
#gioi-thieu{ position:relative; overflow:hidden; }
#gioi-thieu::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70% 55% at 50% -6%, rgba(48,144,0,.13), rgba(10,10,10,0) 66%),
    radial-gradient(46% 40% at 93% 6%, rgba(112,192,16,.06), rgba(10,10,10,0) 62%);
}
#gioi-thieu > .wrap{ position:relative; z-index:1; }

/* ===== DỊCH VỤ ===== */
.product-list{ display:flex; flex-direction:column; }
.product-row{
  display:grid; grid-template-columns:80px 1.05fr 1.5fr 160px;
  gap:var(--s5); align-items:center;
  padding:var(--s6) 0; border-bottom:1px solid var(--line);
}
.product-row:first-child{ border-top:1px solid var(--line); }
.product-idx{ font-size:var(--t-sm); color:var(--text-faint); }
.product-name h3{ font-size:var(--t-md); }
.product-name .tag{
  display:inline-block; margin-top:var(--s2);
  font-size:10.5px; letter-spacing:.08em;
  color:var(--green-line); background:var(--green-wash);
  padding:3px 8px; border-radius:10px;
}
.product-desc p{ font-size:var(--t-sm); color:var(--text-soft); }
.product-desc .terms{
  display:block; margin-top:var(--s2);
  font-size:var(--t-xs); color:var(--green-line);
}
.product-link{
  justify-self:end; text-align:right; font-size:var(--t-sm);
  color:var(--text); border-bottom:1px solid var(--line-strong);
  padding-bottom:2px; transition:border-color .16s var(--ease), color .16s var(--ease);
}
.product-link:hover{ color:var(--green-line); border-color:var(--green-line); }

/* ===== QR ===== */
/* Đẩy khối xuống cho nằm giữa khoảng trắng trước footer; nền có ánh xanh thương
   hiệu rất nhẹ, cùng ngôn ngữ với dải "Trước khi bạn quyết định". */
.qr-block{
  margin-top:var(--s9); padding:var(--s6) var(--s7);
  border:1px solid var(--line); border-radius:var(--r-md);
  background:
    radial-gradient(120% 200% at 84% 50%, rgba(48,144,0,.18) 0%, transparent 60%),
    var(--bg-panel);
  display:flex; justify-content:center; align-items:center;
  gap:var(--s7); flex-wrap:wrap;
}
/* Giữ chữ bên trái, QR bên phải — nhưng gom cả cụm nằm chính giữa khối cho cân đối */
.qr-block-head{ max-width:34ch; }
.qr-block-head p{ font-size:var(--t-sm); color:var(--text-soft); max-width:34ch; }
.qr-grid{ display:flex; gap:var(--s5); flex-wrap:wrap; }
.qr-item{
  display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  width:96px; transition:transform .3s var(--ease);
}
a.qr-item:hover{ transform:translateY(-3px); }
.qr-item img{
  width:88px; height:88px; object-fit:contain;
  background:#fff; border-radius:var(--r-sm); padding:3px;
  border:1px solid var(--line-strong);
}
/* Nhãn QR: dùng font thương hiệu (Archivo) thay cho mono, kèm logo app phía
   trước. Khách chốt: 4 chữ Zalo/OKX/WeChat/Telegram phải theo font IABER và có
   logo chính chủ đứng trước. */
.qr-item .qr-label{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-brand); font-weight:600;
  font-size:var(--t-xs); letter-spacing:.01em; color:var(--text-soft);
}
.qr-ico{ flex:0 0 auto; display:block; border-radius:5px; }
a.qr-item:hover .qr-label{ color:var(--green-line); }

/* ===== LEDGER =====
   Khối "quy mô" mang ngôn ngữ chứng thư — mép khắc xanh ở đỉnh giống hero cert,
   số liệu mono cỡ lớn, không dùng lưới kẻ ô hành chính. Mỗi số có thể đếm lên
   từ 0 khi cuộn tới (main.js), nhưng giá trị tĩnh trong HTML đã đúng sẵn nên
   nếu JS/animation không chạy, số đúng vẫn hiển thị ngay từ đầu. */
.ledger{
  position:relative; overflow:hidden;
  background:var(--bg-raise); border:1px solid var(--line);
  border-radius:var(--r-md); padding:var(--s8) var(--s7) var(--s7);
}
.ledger::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg,var(--green-line) 0 1px,transparent 1px 3px);
  opacity:.8;
}
.ledger-top{ margin-bottom:var(--s7); max-width:64ch; }
.ledger-top h2{ font-size:var(--t-lg); margin:var(--s2) 0 var(--s3); }
.ledger-intro{ font-size:var(--t-sm); color:var(--text-soft); }

.ledger-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6);
}
.ledger-cell{
  padding-left:var(--s6);
  border-left:1px solid var(--line);
}
.ledger-cell:first-child{ padding-left:0; border-left:none; }

.ledger-cell .value{
  display:flex; align-items:baseline; align-content:flex-start; gap:var(--s2);
  flex-wrap:wrap;
  /* Chiều cao dành sẵn cho 2 dòng (số + đơn vị) — dù đơn vị của ô này có
     xuống dòng hay không, gạch xanh dưới vẫn thẳng hàng ở mọi cột. */
  min-height:calc(2.625rem + var(--t-base) + var(--s1));
  font-size:clamp(1.75rem, 2.6vw, 2.625rem);
  font-weight:500; color:var(--text);
  letter-spacing:-.02em; line-height:1;
  font-variant-numeric:tabular-nums;
}
.ledger-cell .value .unit{
  font-size:var(--t-base); color:var(--green-line); font-weight:500;
  line-height:1;
}
.ledger-rule{
  display:block; width:28px; height:2px; background:var(--green-line);
  margin:var(--s4) 0;
}
.ledger-cell .label{ font-size:var(--t-sm); color:var(--text); font-weight:600; margin-bottom:var(--s2); }
.ledger-cell .sub{ font-size:var(--t-xs); color:var(--text-faint); line-height:1.55; }

/* ===== GIỚI THIỆU ===== */
/* align-items:stretch để panel logo (trái) cao bằng cột nội dung (phải) — chỉ
   khối #ve-chung-toi dùng .about-grid nên đổi ở đây không ảnh hưởng nơi khác. */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:var(--s8); align-items:stretch; }
.about-media{
  aspect-ratio:4/5; border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
}
.about-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(100%); }
/* Biến thể giữ màu gốc — dùng cho ảnh lối vào văn phòng (khách yêu cầu để màu
   thật, không khử màu như các ảnh phụ khác). */
.about-media.is-color img{ filter:none; }
/* Biến thể logo + triết lý — gộp từ khối .brand-band cũ (đã bỏ): logo cỏ 4 lá
   phía trên, câu triết lý thương hiệu bên dưới, canh giữa trên nền tối có
   quầng sáng xanh. Không ép aspect-ratio để nội dung tự quyết chiều cao. */
.about-media.is-logo{
  aspect-ratio:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s7); padding:var(--s8) var(--s6);
  position:relative; background:var(--bg);
}
.about-media.is-logo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 40%, rgba(48,144,0,.18), rgba(10,10,10,0) 68%);
}
.about-media.is-logo img{
  position:relative; z-index:1; width:min(200px, 52%); height:auto;
  object-fit:contain; filter:none;
}
.about-creed{ position:relative; z-index:1; text-align:center; max-width:34ch; }
.about-creed .eyebrow{ justify-content:center; margin-bottom:var(--s4); }
.about-creed-quote{
  font-family:var(--font-display);
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight:600; line-height:1.4; letter-spacing:-.01em;
  color:var(--text); margin-bottom:var(--s4); text-wrap:balance;
}
.about-creed-sub{
  font-size:var(--t-xs); letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-line);
}
.about-copy h2{ font-size:var(--t-lg); margin-bottom:var(--s5); }
.about-copy p{ color:var(--text-soft); font-size:var(--t-sm); margin-bottom:var(--s4); }
.about-copy p strong{ color:var(--text); }
.pillars{ margin-top:var(--s5); }
.pillar{ display:flex; gap:var(--s4); padding:var(--s4) 0; border-top:1px solid var(--line); }
.pillar .dot{ width:6px; height:6px; border-radius:50%; background:var(--green-line); margin-top:8px; flex:none; }
.pillar h4{ font-size:var(--t-sm); margin-bottom:2px; }
.pillar p{ font-size:var(--t-xs); color:var(--text-soft); margin:0; }

/* ===== QUY TRÌNH: đánh số vì đây thật sự là chuỗi có thứ tự ===== */
.process-strip{ display:grid; grid-template-columns:repeat(4,1fr); list-style:none; }
.process-step{ padding:var(--s6) var(--s4) 0; border-top:2px solid var(--line-strong); position:relative; }
.process-step .step-num{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-size:var(--t-xs); color:var(--green-line);
  background:var(--bg); padding:0 var(--s3);
}
.process-step h4{ font-size:var(--t-base); margin-bottom:var(--s2); }
.process-step p{ font-size:var(--t-xs); color:var(--text-soft); }

/* ===== TIN TỨC ===== */
.news-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s4); max-width:none; flex-wrap:wrap; }
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.news-card{
  border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--bg-panel);
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.news-card:hover{ border-color:var(--line-strong); transform:translateY(-3px); }
.news-media{ aspect-ratio:16/10; overflow:hidden; background:var(--bg-raise); }
/* Giữ nguyên màu ảnh gốc — chỉ thêm hiệu ứng phóng nhẹ khi rê chuột */
.news-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .65s var(--ease);
}
.news-card:hover .news-media img{ transform:scale(1.03); }
/* Ảnh khai trương văn phòng HCM: bảng hiệu IABER nằm sát mép dưới ảnh gốc, mà
   khung thẻ 16:10 cắt đều trên/dưới nên chữ "CÔNG TY TNHH ĐẦU TƯ" bị mất một
   phần. Kéo khung nhìn xuống để bảng hiệu hiện đủ — khách yêu cầu 18/08/2026.
   Chỉ ảnh này cần, các ảnh tin khác vẫn cắt giữa như cũ.
   Ảnh có HAI bản: ev-90.jpg (trang Tin tức) và bản CMS tải lên
   khai-tr-ng-v-n-ph-ng-hcmc-*.jpg (thẻ tin ở trang chủ) — bản CMS còn cao hơn
   (700x578) nên bị cắt nhiều hơn, phải khai báo cả hai selector. */
.news-media img[src*="ev-90"],
.news-media img[src*="khai-tr-ng-v-n-ph-ng-hcmc"]{ object-position:center 85%; }
.news-body{ padding:var(--s5); }
.news-body .cat{
  display:block; font-size:10.5px; color:var(--green-line);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--s2);
}
.news-body h3{ font-size:var(--t-base); margin-bottom:var(--s2); line-height:1.35; }
.news-body p{ font-size:var(--t-sm); color:var(--text-soft); }
.news-date{ margin-top:var(--s3); font-size:var(--t-xs); color:var(--text-faint); }
/* Bản Trung: đoạn tóm tắt trong thẻ tin ngắt dòng rất so le vì chữ Hán không có
   dấu cách để trình duyệt co giãn — mép phải mỗi dòng một chỗ, khách bắt lỗi
   18/08/2026. Chữ Hán canh đều hai bên là chuẩn sắp chữ thông thường; bản
   Việt/Anh KHÔNG áp vì canh đều chữ Latin sẽ tạo khe hở giữa các từ. */
html[lang="zh"] .news-body p{ text-align:justify; text-justify:inter-character; }

/* (Đã bỏ .office-banner/.office-overlay — khối banner biển hiệu trang chủ không
   còn dùng.) */

/* ===== CÔNG BỐ RỦI RO ===== */
.compliance{
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  padding:var(--s6); background:var(--bg-panel);
  display:grid; grid-template-columns:44px 1fr; gap:var(--s5); align-items:start;
}
.compliance-icon{
  width:44px; height:44px; border:1px solid var(--green-line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--green-line); font-size:var(--t-md);
}
.compliance h4{ font-size:var(--t-base); margin-bottom:var(--s2); }
.compliance p{ font-size:var(--t-sm); color:var(--text-soft); line-height:1.7; }

/* ===== LIÊN HỆ ===== */
.cta-section{ padding:var(--s9) 0; background:var(--bg-raise); border-block:1px solid var(--line); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }
.cta-copy h2{ font-size:var(--t-xl); margin-bottom:var(--s4); max-width:22ch; }
.cta-copy > p{ color:var(--text-soft); font-size:var(--t-sm); max-width:46ch; margin-bottom:var(--s5); }
.cta-list{ list-style:none; display:flex; flex-direction:column; gap:var(--s3); margin-bottom:var(--s6); }
.cta-list li{ display:flex; gap:var(--s3); font-size:var(--t-sm); color:var(--text-soft); }
.cta-list li::before{ content:"—"; color:var(--green-line); flex:none; }

.form-card{
  background:var(--bg-panel); border:1px solid var(--line-strong);
  border-radius:var(--r-md); padding:var(--s6);
}
.form-row{ margin-bottom:var(--s4); }
.form-row label{
  display:block; font-size:var(--t-xs); color:var(--text-soft);
  margin-bottom:var(--s2); letter-spacing:.08em;
}
.form-row input,.form-row select{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:var(--s3) var(--s4);
  font-family:var(--font-sans); font-size:var(--t-sm);
  transition:border-color .16s var(--ease);
}
.form-row input:hover,.form-row select:hover{ border-color:var(--text-faint); }
.form-row input::placeholder{ color:var(--text-faint); }
.form-submit{
  width:100%; background:var(--green); color:#fff; font-weight:600;
  padding:var(--s4); border-radius:var(--r-sm);
  font-family:var(--font-sans); font-size:var(--t-sm);
  margin-top:var(--s2); transition:background .16s var(--ease);
}
.form-submit:hover{ background:var(--green-hover); }
.form-status{ font-size:var(--t-xs); margin-top:var(--s3); line-height:1.5; min-height:1.2em; }
.form-status:empty{ display:none; }
/* Ô bẫy bot của form liên hệ (mục 5 chống spam). KHÔNG dùng display:none —
   bot hiện đại bỏ qua field bị ẩn kiểu đó. Đẩy ra ngoài khung nhìn nhưng vẫn
   tồn tại trong DOM; kèm tabindex="-1" + aria-hidden để bàn phím và trình đọc
   màn hình không bao giờ chạm tới. */
.hp-trap{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.form-fine{ font-size:var(--t-xs); color:var(--text-faint); margin-top:var(--s3); text-align:center; line-height:1.5; }
.chat-direct{ margin-top:var(--s2); }

/* Popup xác nhận sau khi gửi form (bản tiếng Trung) — nền tối mờ + thẻ giữa
   màn hình, có hiệu ứng hiện nhẹ. */
.lead-done{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s4);
  background:rgba(8,8,8,.72); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease;
}
.lead-done.is-open{ opacity:1; }
.lead-done-card{
  background:var(--bg-panel); border:1px solid var(--line-strong);
  border-radius:16px; padding:var(--s7) var(--s6) var(--s6);
  width:min(420px,100%); text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transform:translateY(8px) scale(.98); transition:transform .2s ease;
}
.lead-done.is-open .lead-done-card{ transform:none; }
.lead-done-mark{
  width:56px; height:56px; margin:0 auto var(--s4);
  display:flex; align-items:center; justify-content:center;
  color:#fff; background:var(--green); border-radius:50%;
}
.lead-done-msg{ color:#fff; font-size:var(--t-md); line-height:1.6; margin-bottom:var(--s5); }
.lead-done-close{ width:100%; justify-content:center; }

/* ===== FOOTER ===== */
.site-footer{ padding:var(--s8) 0 var(--s6); background:var(--bg-raise); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s6);
  padding-bottom:var(--s7); border-bottom:1px solid var(--line);
}
.footer-blurb{ font-size:var(--t-sm); color:var(--text-soft); max-width:34ch; margin-top:var(--s4); }
.footer-col h5{
  /* Tiêu đề cột (导航/项目/联系我们) lớn hơn các link bên dưới (--t-sm) một chút. */
  font-size:0.9375rem; color:var(--text-faint); text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:var(--s4);
}
.footer-col a{
  display:block; font-size:var(--t-sm); color:var(--text-soft);
  margin-bottom:var(--s3); transition:color .16s var(--ease);
}
.footer-col a:hover{ color:var(--text); }
.footer-col .logo{ margin-bottom:0; }
.footer-office{ font-size:var(--t-xs); color:var(--text-faint); margin-top:var(--s4); }
.footer-address{ font-size:var(--t-xs); color:var(--text-faint); margin-top:var(--s2); max-width:34ch; line-height:1.6; }
.footer-markets{ font-size:var(--t-xs); color:var(--text-faint); margin-top:var(--s4); max-width:46ch; line-height:1.7; }
.footer-markets .mono{ display:block; color:var(--green-line); letter-spacing:.08em; margin-bottom:2px; }
.footer-address a{ color:var(--text-faint); text-decoration:none; }
.footer-address a:hover{ color:var(--green-line); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--s5); font-size:var(--t-xs); color:var(--text-faint);
  flex-wrap:wrap; gap:var(--s3);
}

/* ===== RESPONSIVE (khối) ===== */
@media (max-width:980px){
  /* Giữ nguyên 14/5 như desktop — mọi tỷ lệ cao hơn đều kéo dải tuyết ở đáy ảnh
     trở lại khung nhìn. */
  .philosophy-vn{ font-size:var(--t-base); }
  .conviction-grid{ grid-template-columns:1fr; }
  .conviction-media{ min-height:280px; }
  .conviction-copy{ padding:var(--s7) var(--s5); }
  .feature-grid{ grid-template-columns:repeat(2,1fr); }
  .product-row{ grid-template-columns:1fr; gap:var(--s3); }
  /* Vùng chạm rộng hơn — bản cũ chỉ có viền dưới mảnh, cao ~25px, khó bấm
     trúng trên di động (dưới ngưỡng khuyến nghị 44px). */
  .product-link{
    justify-self:start; text-align:left;
    display:inline-flex; align-items:center; min-height:44px;
    padding:var(--s2) 0; margin-top:var(--s2);
  }
  .ledger{ padding:var(--s7) var(--s5) var(--s6); }
  .ledger-grid{ grid-template-columns:repeat(2,1fr); row-gap:var(--s6); }
  /* 2 cột: chỉ cột lẻ (1,3) bỏ viền trái — cột chẵn vẫn có viền ngăn cách trong hàng */
  .ledger-cell:nth-child(odd){ padding-left:0; border-left:none; }
  .ledger-cell:nth-child(even){ padding-left:var(--s6); border-left:1px solid var(--line); }
  .about-grid,.cta-grid{ grid-template-columns:1fr; gap:var(--s6); }
  .process-strip{ grid-template-columns:repeat(2,1fr); row-gap:var(--s6); }
  .news-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:repeat(2,1fr); }
  .qr-block{ flex-direction:column; align-items:flex-start; justify-content:flex-start; }
}
@media (max-width:640px){
  .ledger-grid,.feature-grid,.process-strip,.footer-grid{ grid-template-columns:1fr; }
  /* 1 cột: doi hoan toan sang vien tren, khong con vien trai nao */
  .ledger-cell,.ledger-cell:nth-child(odd),.ledger-cell:nth-child(even){
    padding-left:0; border-left:none;
    padding-top:var(--s5); border-top:1px solid var(--line);
  }
  .ledger-cell:first-child{ padding-top:0; border-top:none; }
  .compliance{ grid-template-columns:1fr; }
  /* Điện thoại: nới nhẹ sang 12/5 cho dải đỡ mỏng, vẫn chưa chạm tới tuyết.
     KHÔNG dùng height cố định — màn hẹp mà khung cao thì ảnh bị phủ theo chiều
     cao, lộ nguyên dải tuyết. */
  .philosophy{ aspect-ratio:12/5; }
  .cta-section{ padding:var(--s8) 0; }
}

/* ===== Lớp phủ bảo vệ chữ ở hero =====
   Bố cục căn giữa: vignette toả từ tâm — tối vừa đủ sau chữ để đọc rõ,
   nhạt dần ra rìa để hoa văn guilloche vẫn toả sáng ở bốn góc. */
.hero .wrap{ z-index:2; }
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  background:
    radial-gradient(78% 68% at 50% 47%,
      rgba(10,10,10,.86) 0%,
      rgba(10,10,10,.72) 38%,
      rgba(10,10,10,.34) 72%,
      rgba(10,10,10,.10) 100%),
    linear-gradient(180deg, rgba(10,10,10,0) 55%, rgba(10,10,10,.55) 100%);
}
@media (max-width:980px){
  .hero::before{
    background:
      radial-gradient(120% 80% at 50% 45%, rgba(10,10,10,.82) 0%, rgba(10,10,10,.72) 100%);
  }
}

/* ===== ĐỘI NGŨ =====
   Ba khối bộ máy: Ban điều hành · Lãnh đạo khu vực · Đội ngũ đầu tư.
   Mỗi khối có nhãn + mô tả — cấu trúc mang thông tin, không phải trang trí.
   Thẻ nền đen có viền, badge chức danh ở góc ảnh, ảnh xám lên màu khi hover. */
.team-tier{ margin-top:var(--s8); }
.team-tier:first-of-type{ margin-top:0; }
.team-tier-label{
  font-size:0.9375rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-line); margin-bottom:var(--s3);
  display:flex; align-items:center; gap:var(--s3);
}
.team-tier-label::before{
  content:""; width:22px; height:1px; flex:none; background:var(--green-line);
}
.team-tier-desc{
  font-size:var(--t-sm); color:var(--text-soft);
  max-width:60ch; margin-bottom:var(--s5);
  padding-bottom:var(--s5); border-bottom:1px solid var(--line);
}
/* Flex thay vì grid: ban điều hành có 7 người trên lưới 4 cột nên hàng cuối chỉ
   có 3 thẻ — với grid, hàng đó dồn về trái để hở một ô trống nhìn lệch hẳn.
   Flex + justify-content:center canh giữa hàng thiếu mà hàng đủ vẫn khít. */
/* Ánh sáng xanh thương hiệu rất nhẹ cho khối Đội ngũ — cùng ngôn ngữ với dải
   "Trước khi bạn quyết định". Nằm sau các thẻ (thẻ có nền đục), chỉ hiện ở lề. */
#doi-ngu{
  position:relative; isolation:isolate;
  background:radial-gradient(80% 90% at 50% 6%, rgba(48,144,0,.10) 0%, transparent 58%);
}

.team-grid{
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:var(--s4);
}
.team-grid > *{ flex:0 1 calc((100% - var(--s4) * 4) / 5); }
/* Đội ngũ đầu tư: 4 người → 4 cột, ô rộng hơn */
.team-grid-4 > *{ flex:0 1 calc((100% - var(--s4) * 3) / 4); }

/* Thẻ là một khung viền: ảnh trên, thông tin dưới, cùng một tấm */
.team-card{
  margin:0;
  background:var(--bg-panel);
  border:1px solid transparent;
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.team-card:hover{ border-color:var(--green-line); transform:translateY(-3px); }
.team-photo{
  position:relative;
  /* 19/08/2026: đổi từ 52/60 sang đúng tỉ lệ ảnh gốc 489x607 (~0.805) —
     tỉ lệ khung cũ (0.867) lệch với ảnh nên object-fit:cover cắt mất phần
     dưới ảnh (object-position:top). Khớp đúng tỉ lệ = cover không cắt gì cả. */
  aspect-ratio:489/607; overflow:hidden;
  background:var(--bg-raise);
}
/* 19/08/2026: đã bỏ lớp gradient tối phủ mép phải (từng dùng để hoà "viền xám"
   tự nhiên của một số ảnh cũ về đen). Khách yêu cầu giữ ảnh "new web3" nguyên
   chất lượng, hiển thị đúng như gốc — không phủ thêm hiệu ứng tối/xám nào lên
   ảnh nữa. .team-photo::after không còn được định nghĩa. */
/* Giữ nguyên màu ảnh gốc — chỉ thêm hiệu ứng phóng nhẹ khi rê chuột.
   --tz: hệ số phóng riêng từng ảnh, đặt inline trong HTML. Các ảnh chân dung
   được chụp ở cự ly khác nhau nên khuôn mặt to nhỏ lệch nhau; --tz kéo tất cả
   về cùng một cỡ mặt. Luôn >= 1 (chỉ phóng vào, không thu ra) để không phải
   độn thêm nền — độn nền sẽ lộ vệt mờ ở rìa ảnh. */
/* --tx: dịch ngang riêng từng ảnh (mặc định 0), đặt inline trong HTML. Vài ảnh
   chân dung có khuôn mặt lệch khỏi tâm khung gốc; --tx kéo mặt về giữa thẻ.
   Giá trị âm = dịch ảnh sang trái (mặt đang lệch phải). Vì ảnh đã được --tz
   phóng vào nên hai mép vẫn còn dư, dịch nhẹ không hở nền. */
.team-photo img{
  width:100%; height:100%; object-fit:cover; object-position:top center;
  transform:translateX(var(--tx,0)) scale(var(--tz,1));
  transform-origin:center 30%;
  transition:transform .65s var(--ease);
}
.team-card:hover .team-photo img{ transform:translateX(var(--tx,0)) scale(calc(var(--tz,1) * 1.03)); }
/* 18/08/2026: khách gửi trọn bộ 12 ảnh đội ngũ ở khung gốc (489x607) và yêu cầu
   dùng nguyên, không phóng. Vì vậy HIỆN KHÔNG THẺ NÀO đặt --tz/--tx nữa — cả hai
   biến vẫn giữ trong CSS (mặc định --tz:1, --tx:0) để lần sau cần cân cỡ mặt thì
   đặt lại inline được ngay. Đọc chú thích --tz phía trên trước khi dùng lại. */

/* .team-photo--fit: hiện ĐỦ 100% ảnh gốc khi tỷ lệ ảnh lệch khung thẻ,
   thay vì cắt bớt như mặc định ở trên. Cách làm: đặt CÙNG một ảnh 2 lớp —
   lớp dưới (.team-photo-bg) phóng to + làm mờ để lấp đầy khung, lớp trên là
   ảnh gốc nguyên vẹn dùng object-fit:contain nổi ở giữa. Khoảng hở 2 bên nhờ
   vậy được lấp bằng chính màu/nội dung ảnh (mờ) thay vì lộ nền thẻ trơn —
   giống cách Spotify/Apple Music xử lý ảnh bìa không vuông. Dùng khi có ảnh
   lệch tỉ lệ 489:607 chuẩn (vd ảnh 520x607 còn sót) và cần giữ nguyên khung.
   19/08/2026: từng áp cho thẻ Jacob do khung thẻ khi đó là 52:60, lệch với
   ảnh 489:607 → đã bỏ, vì khung thẻ đổi sang đúng 489/607 nên .team-photo
   mặc định không còn cắt ảnh nữa, không cần lớp --fit cho Jacob. */
.team-photo--fit .team-photo-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transform:scale(1.25);
  filter:blur(26px) brightness(.55) saturate(1.05);
  z-index:0;
}
.team-photo--fit > img:not(.team-photo-bg){
  position:relative; z-index:1;
  object-fit:contain; transform:none;
}
.team-card:hover .team-photo--fit .team-photo-bg{ transform:scale(1.3); }
.team-card:hover .team-photo--fit > img:not(.team-photo-bg){ transform:scale(1.03); }

/* Badge chức danh — viên thuốc viền xanh ở góc trên phải ảnh */
.team-badge{
  position:absolute; top:var(--s3); right:var(--s3); z-index:2;
  font-size:10px; letter-spacing:.04em;
  color:var(--green-line);
  background:rgba(10,10,10,.72);
  backdrop-filter:blur(4px);
  border:1px solid var(--green-line);
  border-radius:20px;
  padding:2px 9px;
  white-space:nowrap;
}

.team-card figcaption{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--s4) var(--s4) var(--s5);
}
/* Tên tiếng Việt là tên chính (trắng), tên tiếng Anh là phụ đề (xanh) */
.team-vn{ font-size:var(--t-md); font-weight:600; color:var(--text); line-height:1.2; }
.team-en{ font-size:var(--t-sm); font-weight:500; color:var(--green-line); letter-spacing:.02em; }
.team-role{ font-size:var(--t-xs); color:var(--text-soft); line-height:1.45; margin-top:var(--s2); }

@media (max-width:980px){
  .team-grid > *,.team-grid-4 > *{ flex-basis:calc((100% - var(--s4) * 2) / 3); }
}
@media (max-width:640px){
  .team-grid{ gap:var(--s3); }
  .team-grid > *,.team-grid-4 > *{ flex-basis:calc((100% - var(--s3)) / 2); }
  .team-tier{ margin-top:var(--s6); }
  .team-vn{ font-size:var(--t-base); }
}

/* ===== TRANG TIN TỨC (news.html) ===== */
/* padding-bottom cũ (32px) khiến dòng cuối của .page-intro-lead gần chạm đường
   kẻ border-bottom — khách bắt lỗi 18/08/2026. Nới lên 48px. */
.page-intro{
  padding:var(--s9) 0 var(--s7);
  border-bottom:1px solid var(--line);
}
/* Tiêu đề trang Tin nay dài hơn ở cả 3 bản — giới hạn 20ch cũ bẻ nó thành 4–5
   dòng ngắn ngủn. Nới độ dài dòng và để trình duyệt chia đều chữ giữa các dòng
   (text-wrap:balance); trình duyệt cũ không hiểu thì vẫn ngắt dòng như thường. */
.page-intro h1{
  font-size:var(--t-2xl); margin:var(--s2) 0 var(--s4);
  max-width:38ch; text-wrap:balance;
}
.page-intro-lead{ font-size:var(--t-base); color:var(--text-soft); max-width:66ch; }
.news-archive{ margin-top:0; }

/* ===== TRANG BÀI VIẾT (tin-*.html) ===== */
.article-page{ padding:var(--s8) 0 var(--s9); }
.article-wrap{ max-width:820px; }
.article-crumbs{ font-size:var(--t-xs); color:var(--text-faint); margin-bottom:var(--s5); }
.article-crumbs a{ color:var(--text-soft); }
.article-crumbs a:hover{ color:var(--green-line); }
.article-title{
  font-size:var(--t-2xl); line-height:1.15; margin:var(--s2) 0 var(--s3);
  letter-spacing:-.02em;
}
.article-meta{ font-size:var(--t-sm); color:var(--text-faint); margin-bottom:var(--s6); }
.article-cover{
  margin:0 0 var(--s6); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; background:var(--bg-raise);
}
.article-cover img{ width:100%; height:auto; display:block; }
.article-body p{
  font-size:1.0625rem; line-height:1.75; color:var(--text);
  margin-bottom:var(--s5); max-width:68ch;
}
.article-body p:first-child{ color:var(--text); font-weight:500; }
/* Bài dài có tiêu đề phụ, gạch đầu dòng và nút CTA cuối bài (xem render_body()
   trong build_news.py / build_news_i18n.py). Danh sách dùng lại .svc-bullets của
   trang dịch vụ, chỉ cần bó chiều rộng cho khớp cột chữ 68ch của thân bài. */
.article-body h2{
  font-size:var(--t-lg); line-height:1.3; letter-spacing:-.01em;
  margin:var(--s7) 0 var(--s4); max-width:68ch;
}
.article-body h3{ font-size:var(--t-md); line-height:1.4; margin:var(--s6) 0 var(--s3); max-width:68ch; }
.article-body h2:first-child,.article-body h3:first-child{ margin-top:0; }
.article-body .svc-bullets{ max-width:68ch; }
.article-body strong{ font-weight:600; color:var(--text); }
.article-cta{ margin:var(--s7) 0 0; }
.article-cta .btn-primary{ display:inline-flex; }
/* Ảnh, trích dẫn và liên kết chèn từ trình soạn thảo của trang quản trị
   (admin/assets/editor.js). Ảnh để rộng bằng khung bài cho thoáng, không bó 68ch. */
.article-figure{ margin:var(--s7) 0; max-width:100%; }
.article-figure img{ width:100%; height:auto; display:block; border-radius:var(--r-md); }
.article-figure figcaption{
  margin-top:var(--s3); font-size:var(--t-xs); color:var(--text-faint); line-height:1.6;
}
.article-body > img{
  max-width:100%; height:auto; display:block;
  border-radius:var(--r-md); margin:var(--s7) 0;
}
.article-body blockquote{
  margin:var(--s6) 0; padding-left:var(--s5); max-width:68ch;
  border-left:2px solid var(--green-line);
}
.article-body blockquote p:last-child{ margin-bottom:0; }
.article-body a{ color:var(--green-line); text-decoration:underline; text-underline-offset:3px; }
.article-disclaimer{
  font-size:var(--t-xs); color:var(--text-faint); line-height:1.6;
  border-left:2px solid var(--line-strong); padding-left:var(--s4);
  margin:var(--s7) 0;
}
.article-nav{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s4);
  border-top:1px solid var(--line); padding-top:var(--s6); margin-top:var(--s6);
}
.art-nav-link{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4); border:1px solid var(--line); border-radius:var(--r-md);
  transition:border-color .16s var(--ease);
}
.art-nav-link:hover{ border-color:var(--green-line); }
.art-nav-link.next{ text-align:right; }
.art-nav-link span{ font-size:var(--t-xs); color:var(--green-line); }
.art-nav-link b{ font-size:var(--t-sm); font-weight:600; color:var(--text); line-height:1.4; }
.article-back{ margin-top:var(--s6); }

@media (max-width:640px){
  .page-intro h1{ font-size:var(--t-xl); max-width:none; }
  .article-title{ font-size:var(--t-xl); }
  .article-body p{ font-size:1rem; }
  .article-nav{ grid-template-columns:1fr; }
  .art-nav-link.next{ text-align:left; }
}

/* ===== THƯ VIỆN ẢNH TRONG BÀI VIẾT ===== */
.article-gallery{ margin:var(--s7) 0; }
.article-gallery .eyebrow{ margin-bottom:var(--s5); }
.gal-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3);
}
.gal-item{
  display:block; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg-raise);
}
.gal-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .65s var(--ease), filter .5s var(--ease);
  filter:saturate(.96);
}
.gal-item:hover img{ transform:scale(1.05); filter:saturate(1.05); }
@media (max-width:640px){
  .gal-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ===== KHỐI QUY TRÌNH (2 chặng) ===== */
.proc-block{ margin-top:var(--s8); }
.proc-block:first-of-type{ margin-top:0; }
.process-strip-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){
  .process-strip-5{ grid-template-columns:repeat(3,1fr); row-gap:var(--s6); }
}
@media (max-width:640px){
  .process-strip-5{ grid-template-columns:repeat(2,1fr); }
}

/* ===== FALLBACK KHI JAVASCRIPT TẮT =====
   Nội dung trong <noscript> chỉ hiện khi JS bị tắt — trình duyệt tự xử lý,
   không cần JS/CSS toggle. Chỉ cần style cho đẹp khi nó thực sự hiện ra. */
.noscript-nav{
  display:flex; flex-direction:column;
  border-top:1px solid var(--line);
  background:var(--bg-raise);
  padding:var(--s4) var(--s6);
}
.noscript-nav a{
  padding:var(--s3) 0; border-bottom:1px solid var(--line);
  font-size:var(--t-base); color:var(--text);
}
.form-noscript-msg{
  font-size:var(--t-sm); color:var(--text-soft);
  margin-bottom:var(--s4); line-height:1.5;
}

/* ===== STAGGER REVEAL =====
   Với khối nhiều thẻ con (feature-grid, team-grid, news-grid, product-list,
   process-strip), bản thân khối luôn hiện — chỉ CÁC THẺ CON fade+trượt lên
   lần lượt theo độ trễ tăng dần, thay vì cả khối nhảy ra cùng một nhịp.
   Độ đặc tả .stagger.reveal (2 class) cao hơn .reveal (1 class) nên thắng
   quy tắc chung, không cần !important. */
.reveal-armed .stagger.reveal{ opacity:1; transform:none; }
.reveal-armed .stagger.reveal > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal-armed .stagger.reveal.in > *{ opacity:1; transform:none; }

.reveal-armed .stagger.reveal > *:nth-child(1){ transition-delay:.04s; }
.reveal-armed .stagger.reveal > *:nth-child(2){ transition-delay:.14s; }
.reveal-armed .stagger.reveal > *:nth-child(3){ transition-delay:.24s; }
.reveal-armed .stagger.reveal > *:nth-child(4){ transition-delay:.34s; }
.reveal-armed .stagger.reveal > *:nth-child(5){ transition-delay:.44s; }
.reveal-armed .stagger.reveal > *:nth-child(6){ transition-delay:.54s; }
.reveal-armed .stagger.reveal > *:nth-child(7){ transition-delay:.64s; }

/* ===== HERO ENTRANCE =====
   Chuỗi xuất hiện một lần khi tải trang: eyebrow → h1 → lead → actions/disclaimer
   → chứng thư. Thuần CSS, không phụ thuộc JS — nếu trình duyệt không hỗ trợ
   @keyframes, thuộc tính animation bị bỏ qua và phần tử dùng CSS tĩnh (luôn hiện),
   không có khả năng bị kẹt vô hình như cơ chế .reveal cần JS mới gỡ được. */
@keyframes heroEnterUp{
  0%{ opacity:0; transform:translateY(28px); filter:blur(9px); }
  55%{ filter:blur(0); }
  100%{ opacity:1; transform:none; filter:blur(0); }
}
/* Đoá guilloche nền nhẹ nhàng hiện lên trước, làm phông cho chữ trồi lên sau */
@keyframes heroCanvasFade{
  from{ opacity:0; transform:scale(1.04); }
  to{ opacity:1; transform:scale(1); }
}
.hero-enter{
  animation:heroEnterUp 1.5s cubic-bezier(.16,.72,.18,1) both;
  will-change:opacity, transform, filter;
}
.hero-enter-1{ animation-delay:.24s; }
.hero-enter-2{ animation-delay:.46s; }
.hero-enter-3{ animation-delay:.74s; }
.hero-enter-4{ animation-delay:1.02s; }
.hero-centered .guilloche{
  animation:heroCanvasFade 2.6s cubic-bezier(.16,.72,.18,1) both;
  transform-origin:50% 50%;
}

/* ===== ĐOÁ GUILLOCHE MỜ SAU CHỮ HERO =====
   Cùng hoa văn thương hiệu, dựng bằng vector rồi làm mờ mềm — tạo lớp nền
   có chiều sâu sau chữ. Nằm TRÊN lớp phủ vignette (z-index 1) nên vẫn toả
   sáng, dưới chữ (wrap z-index 2) nên không cản đọc. Xoay rất chậm để lớp
   nét khắc động phía sau nổi bật hơn. */
.hero-bloom{
  position:absolute; left:50%; top:47%;
  transform:translate(-50%,-50%);
  width:min(112vh, 880px); aspect-ratio:1;
  z-index:1; pointer-events:none;
  animation:heroBloomIn 2.8s var(--ease) both;
}
.hero-bloom-inner{
  width:100%; height:100%;
  color:var(--green);
  opacity:.5;
  filter:blur(34px) saturate(1.15);
  animation:heroBloomSpin 90s linear infinite;
}
.hero-bloom svg{ width:100%; height:100%; display:block; }
@keyframes heroBloomIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes heroBloomSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

@media (max-width:640px){
  .hero-bloom{ width:min(96vh, 560px); }
  .hero-bloom-inner{ filter:blur(26px); opacity:.42; }
}
@media (prefers-reduced-motion: reduce){
  .hero-bloom{ animation:none; opacity:1; }
  .hero-bloom-inner{ animation:none; }
}

@media (prefers-reduced-motion: reduce){
  .hero-enter, .hero-centered .guilloche{ animation:none; opacity:1; transform:none; filter:none; }
}

/* ===== TRANG DỊCH VỤ CHI TIẾT (dv-*.html) ===== */
/* Mép khắc guilloche ở đỉnh trang — cùng ngôn ngữ với hero cert và khối "Quy mô",
   thay cho ảnh bìa (4 sản phẩm này là khái niệm tài chính, không phải sự kiện có ảnh thật). */
.svc-wrap{ position:relative; padding-top:var(--s5); }
.svc-wrap::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:4px;
  background:repeating-linear-gradient(90deg,var(--green-line) 0 1px,transparent 1px 3px);
  opacity:.8;
}
.svc-intro{ margin-bottom:var(--s6); }
.svc-bullets{
  list-style:none; display:flex; flex-direction:column; gap:var(--s3);
  margin:0 0 var(--s7); padding:var(--s5) var(--s6);
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-panel);
}
.svc-bullets li{
  font-size:var(--t-sm); color:var(--text); line-height:1.6;
  padding-left:var(--s5); position:relative;
}
.svc-bullets li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--green-line);
}
.svc-bullets-note{ font-size:var(--t-xs); color:var(--text-faint); margin-top:var(--s2); }

/* Mỗi khối chính sách (I/II/III/IV) là một panel nền nhẹ, để mắt phân biệt được
   ranh giới từng khối mà không cần đọc hết chữ mới biết đã sang mục mới.
   Trước đây chỉ tô nền xen kẽ (nth-of-type(even)) nên trên trang có 3 khối,
   khối giữa trông hụt so với hai khối kia — khách yêu cầu đồng bộ (02/08/2026). */
.svc-block{
  margin:var(--s8) 0;
  background:var(--bg-panel);
  border-top:1px solid var(--line-strong);
  padding:var(--s7) var(--s6) var(--s6);
  margin-inline:calc(-1 * var(--s6));
  border-radius:var(--r-md);
}
/* Khối nội dung đầu tiên nằm ngay dưới hero (thường là bảng phí): thu hẹp khoảng
   trắng giữa đoạn dẫn và bảng theo yêu cầu khách. */
.svc-hero + .svc-block{ margin-top:0; padding-top:var(--s5); }
@media (max-width:640px){
  .svc-block{ padding:var(--s6) var(--s5) var(--s5); margin-inline:calc(-1 * var(--s5)); }
}
.svc-block h2{ font-size:var(--t-md); margin-bottom:var(--s4); }
.svc-block p{ font-size:var(--t-sm); line-height:1.7; color:var(--text-soft); margin-bottom:var(--s4); max-width:72ch; }
.svc-block p b{ color:var(--text); font-weight:600; }

/* Bảng phí/hạng mức — mono, kỷ luật, cuộn ngang trên màn hẹp thay vì vỡ layout */
.rate-table-wrap{
  overflow-x:auto; margin:var(--s5) 0 var(--s2);
  border:1px solid var(--line); border-radius:var(--r-md);
  -webkit-overflow-scrolling:touch;
}
.rate-table{
  width:100%; border-collapse:collapse;
  font-family:var(--font-mono); font-size:13px;
  white-space:nowrap;
}
/* Từ tablet trở lên bảng đủ chỗ: chia đều bề rộng các cột để nội dung căn giữa
   phân bố cân, thay vì cột co giãn theo độ dài chữ (tiêu đề tiếng Trung/Việt
   dài ngắn khác nhau làm bảng nhìn lệch). Tiêu đề được phép xuống dòng, còn số
   liệu vẫn giữ một dòng. Dưới 640px vẫn để bảng tự giãn và cuộn ngang. */
@media (min-width:641px){
  .rate-table{ table-layout:fixed; }
  .rate-table thead th{ white-space:normal; }
}
/* Toàn bộ ô (tiêu đề + nội dung) căn giữa theo yêu cầu khách. */
.rate-table thead th{
  text-align:center; font-weight:600; color:var(--green-line);
  /* Đầu cột lớn hơn ô nội dung (td 13px) một chút cho rõ vai trò tiêu đề. */
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  padding:var(--s3) var(--s4);
  background:var(--bg-panel);
  border-bottom:1px solid var(--line-strong);
  position:sticky; top:0;
}
.rate-table tbody td{
  padding:var(--s3) var(--s4); text-align:center;
  color:var(--text); border-bottom:1px solid var(--line);
}
.rate-table tbody tr:last-child td{ border-bottom:none; }
.rate-table tbody tr:hover td{ background:var(--bg-panel); }
.rate-table tbody td:first-child{ color:var(--text); font-weight:600; }
.rate-note{
  font-size:var(--t-xs); color:var(--text-faint); margin-bottom:var(--s6);
}

.svc-cta{
  display:flex; gap:var(--s3); flex-wrap:wrap;
  margin:var(--s7) 0; padding-top:var(--s6); border-top:1px solid var(--line);
}

/* Căn giữa nội dung trang dịch vụ (khách chốt 02/08/2026).
   Tiêu đề, eyebrow, breadcrumb, bảng: căn giữa. Còn ĐOẠN VĂN thì chỉ căn giữa
   cái KHỐI (max-width 68ch/72ch + margin-inline:auto), chữ bên trong vẫn căn
   trái — khách chốt kiểu này vì đoạn dài mà căn giữa từng dòng thì mỗi dòng
   bắt đầu một chỗ, rất khó đọc. Bỏ margin-inline:auto là khối lại dính mép trái. */
.svc-wrap .article-crumbs,
.svc-hero-inner,
.svc-intro,
.svc-block{ text-align:center; }
.svc-wrap .article-body p,
.svc-block p,
.svc-bullets-note,
.rate-note{ margin-inline:auto; text-align:left; }
/* Đơn vị `ch` = bề rộng chữ "0" của CHÍNH font đang dùng, nên 68ch ở đoạn dẫn
   (article-body p:first-child có font-weight:500) ra 746px, còn đoạn sau
   (weight 400) chỉ 729px. Hai khối khác bề rộng mà cùng margin-inline:auto nên
   mép trái lệch nhau 8px — đúng chỗ khách bắt lỗi 18/08/2026. Khoá về rem để
   mọi đoạn trong cột căn giữa dùng chung một bề rộng, không phụ thuộc nét chữ. */
.svc-wrap .article-body p{ max-width:none; }  /* 18/08/2026: nới bằng mép bảng
   (= bề rộng .article-wrap 820px, đúng bằng vùng nội dung của .svc-block). */
.svc-wrap .svc-bullets{ max-width:72ch; margin-inline:auto; text-align:left; }
/* Khung ghi chú SAU bảng (.svc-notes, sinh bởi notes_html() trong
   build_services.py): phải trải đúng bề rộng .svc-block để thẳng mép với bảng
   ngay phía trên — nên bỏ max-width 72ch của khung bullet ở hero.
   Khách chốt 18/08/2026: trước đây đây là các đoạn <p> hẹp hơn bảng, nhìn lệch. */
.svc-block .svc-notes{ max-width:none; margin-inline:0; margin-bottom:0; }
/* Khối ghi chú đứng riêng (không có <h2>): padding trên/dưới bằng nhau cho cân,
   khác .svc-block thường vốn chừa 48px phía trên để đỡ tiêu đề. */
.svc-block-notes{ padding:var(--s6); }
@media (max-width:640px){ .svc-block-notes{ padding:var(--s5); } }
.svc-cta{ justify-content:center; }
.rate-hint{ justify-content:center; }
/* .eyebrow là flex (gạch ngang vẽ bằng ::before) nên text-align vô tác dụng.
   Khi căn giữa thì thêm gạch ::after cho cân hai bên — giống .hero-centered,
   .about-hero, .creed... đã làm. */
.svc-hero-inner .eyebrow{ justify-content:center; }
.svc-hero-inner .eyebrow::after{
  content:""; width:22px; height:3px; flex:0 0 auto;
  border-top:1px solid; border-bottom:1px solid;
}

@media (max-width:640px){
  .svc-bullets{ padding:var(--s4); }
  .svc-block{ margin-block:var(--s6); padding-top:var(--s5); }
  .rate-table{ font-size:12px; }
}

/* ===== PHOTO BAND =====
   Dải ảnh full-bleed dùng để phá đơn điệu ở các đoạn nền đen dài — không đặt
   ảnh sau chữ (tránh giảm độ đọc), mà tách hẳn thành khối riêng như
   .philosophy-banner/.office-banner đã có. Ảnh + chữ không tranh cùng chỗ. */
.photo-band{
  position:relative; height:430px; overflow:hidden;
  border-block:1px solid var(--line);
}
.photo-band img{
  /* object-position: lệch trái (15%) để biển hiệu IABER — nằm bên trái ảnh —
     luôn trong khung khi màn hình hẹp cắt bớt hai bên; lệch xuống (84%) để phần
     chữ "CÔNG TY TNHH ĐẦU TƯ" ở đáy biển không bị cắt khi màn hình rộng cắt bớt
     trên/dưới. Chiều cao dải tăng lên 430px cũng để giảm mức cắt dọc. */
  width:100%; height:100%; object-fit:cover; object-position:15% 84%;
  /* Hạ sáng thêm: ảnh gốc là ảnh ban ngày trời sáng, để nguyên thì mảng trời
     bên phải chói hơn hẳn phần còn lại của trang. */
  filter:grayscale(100%) contrast(1.05) brightness(.72);
}
.photo-band.is-bw img{ filter:contrast(1.05); } /* ảnh gốc đã đen trắng — khỏi lọc lại */
/* Chữ đặt chính giữa ảnh — lớp phủ chuyển sang veil toả từ tâm để chữ nổi rõ
   mà ảnh vẫn thấy được ở rìa. */
.photo-band-overlay{
  position:absolute; inset:0; display:flex; align-items:center;
  background:
    radial-gradient(68% 84% at 50% 50%, rgba(10,10,10,.82) 0%, rgba(10,10,10,.62) 62%, rgba(10,10,10,.48) 100%),
    linear-gradient(0deg, rgba(10,10,10,.42) 0%, rgba(10,10,10,.18) 100%);
}
.photo-band-text{
  padding:0 var(--s6); max-width:var(--wrap); margin:0 auto; width:100%;
  text-align:center;
}
.photo-band-text .eyebrow{ color:var(--green-line); justify-content:center; }
.photo-band-text .eyebrow::before{ background:var(--green-line); }
/* Gạch đối xứng hai bên cho nhãn khi đã căn giữa */
.photo-band-text .eyebrow::after{
  content:""; width:22px; height:3px; flex:none;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor;
  background:var(--green-line);
}
.photo-band-text h3{
  color:#fff; font-size:var(--t-lg);
  max-width:44ch; margin-inline:auto;
}

@media (max-width:980px){ .photo-band{ height:250px; } }
@media (max-width:640px){
  /* Trên điện thoại ảnh bị crop ngang mạnh. Hạ chiều cao dải + canh giữa để lộ
     nhiều bề ngang hơn (thấy trọn biển hiệu IABER bên trái + toàn bộ toà nhà). */
  .photo-band{ height:160px; }
  .photo-band img{ object-position:center; }
  /* Tiêu đề nhỏ lại + giới hạn bề ngang để LUÔN hiển thị 2 hàng (kể cả máy rộng),
     chữ gọn không che ảnh. */
  .photo-band-text h3{ font-size:20px; line-height:1.25; max-width:280px; }
  .photo-band-text .eyebrow{ font-size:12px; }
  /* Bản tiếng Trung tiêu đề là câu dài -> giảm cỡ chữ thêm và dùng full bề ngang
     để rút còn ~2 hàng, lộ ảnh nhiều hơn. */
  html[lang="zh"] .photo-band-text h3{ font-size:10.5px; line-height:1.5; max-width:none; }
}

/* ===== DẢI MỜI TRAO ĐỔI =====
   Thay cho banner ảnh thứ hai — trước đây chỗ này lặp lại đúng tấm ảnh biển
   hiệu đã dùng ở hai chỗ khác. Giữ nhịp full-bleed nhưng khác chất liệu. */
.invite-band{
  border-block:1px solid var(--line);
  background:
    radial-gradient(120% 200% at 84% 50%, rgba(48,144,0,.18) 0%, transparent 60%),
    var(--bg-raise);
}
.invite-band-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s8); padding-block:var(--s8);
}
.invite-band-inner h3{ font-size:var(--t-lg); max-width:32ch; }
.invite-band .btn-secondary{ flex:none; }

@media (max-width:768px){
  .invite-band-inner{
    flex-direction:column; align-items:flex-start;
    gap:var(--s5); padding-block:var(--s7);
  }
}

/* ===== HERO TRANG DỊCH VỤ =====
   Hoa văn guilloche động (canvas #guilloche, main.js tự bắt theo id) + đoá cỏ 4
   lá mờ làm LỚP NỀN phía sau đoạn giới thiệu (eyebrow/tiêu đề/intro), giống hero
   trang chủ — chữ nằm trên texture.
   FULL-BLEED: khối tràn ra sát 2 mép màn hình (100vw) dù nằm trong cột bài viết
   820px — dùng thủ thuật margin âm calc(50% - 50vw). Chữ bên trong vẫn co về đúng
   cột đọc 820px (căn giữa) để không giãn quá rộng. */
.svc-hero{
  position:relative; overflow:hidden; isolation:isolate;
  width:100vw; margin:var(--s3) calc(50% - 50vw) var(--s3);
}
.svc-hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Giảm sáng hoa văn để chữ nổi rõ (khách yêu cầu để ý độ sáng). */
.svc-hero-bg .guilloche{ opacity:.42; }
/* Đoá cỏ 4 lá mờ: neo theo bề rộng khối (%), giữ nhỏ để không lấn chữ ở giữa. */
.svc-hero-bg .hero-bloom{ left:50%; top:50%; width:min(30%, 420px); }
.svc-hero-bg .hero-bloom-inner{ filter:blur(30px) saturate(1.1); opacity:.32; }
/* Hai lớp làm tối:
   (1) scrim ngang — tối đậm ở GIỮA (sau cột chữ), trong suốt dần ra 2 mép để
       hoa văn full-width vẫn lộ rõ ở lề trái/phải;
   (2) gradient dọc — tan mềm trên/dưới vào nền, không cắt cứng. */
.svc-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to right,
      rgba(10,10,10,0) 0%, rgba(10,10,10,.62) 30%, rgba(10,10,10,.68) 50%,
      rgba(10,10,10,.62) 70%, rgba(10,10,10,0) 100%),
    linear-gradient(to bottom,
      var(--bg) 0%, rgba(10,10,10,.18) 34%, rgba(10,10,10,.18) 66%, var(--bg) 100%);
}
.svc-hero-inner{
  position:relative; z-index:1;
  max-width:820px; margin-inline:auto;
  padding:var(--s8) var(--s6) var(--s5);
}
.svc-hero-inner .svc-intro{ margin-bottom:0; }
.svc-hero-inner .svc-bullets,
.svc-hero-inner .svc-bullets-note{ margin-top:var(--s5); }
@media (max-width:640px){
  .svc-hero{ margin:var(--s3) calc(50% - 50vw) var(--s3); }
  .svc-hero-inner{ padding:var(--s7) var(--s5) var(--s5); }
  .svc-hero-bg .guilloche{ opacity:.34; }
  .svc-hero-bg .hero-bloom{ width:min(56%, 240px); }
  .svc-hero-bg .hero-bloom-inner{ filter:blur(20px); opacity:.3; }
  /* Màn hẹp: cột chữ gần full nên scrim ngang phủ rộng hơn để chắc chắn đọc rõ. */
  .svc-hero-bg::after{
    background:
      linear-gradient(to right,
        rgba(10,10,10,.25) 0%, rgba(10,10,10,.66) 22%, rgba(10,10,10,.7) 50%,
        rgba(10,10,10,.66) 78%, rgba(10,10,10,.25) 100%),
      linear-gradient(to bottom,
        var(--bg) 0%, rgba(10,10,10,.22) 30%, rgba(10,10,10,.22) 70%, var(--bg) 100%);
  }
}
/* Ghi chú "điều khoản xác nhận tại văn phòng" — trước đây là caption của ảnh
   văn phòng (tên cũ .svc-office-caption), nay panel không còn ảnh nên đây là
   một dòng ghi chú độc lập. */
.svc-terms-note{
  font-size:var(--t-xs); color:var(--text-faint); line-height:1.5;
  margin-bottom:var(--s7);
}

/* ===== PHÂN TẦNG NỀN GIỮA CÁC SECTION =====
   .section mặc định không có bg riêng (thừa hưởng --bg của body) — khiến
   nhiều section liền nhau đọc như một mảng đen duy nhất. 3 lớp dưới đây áp
   dụng có chọn lọc (không phải mọi section), tạo nhịp phân đoạn mà không
   cần thêm ảnh: (1) nâng tông nền nhẹ, (2) hoa văn guilloche tĩnh ở góc,
   (3) mép khắc xanh lặp lại từ ngôn ngữ chứng thư ở hero/Quy mô. */
.section-raise{ background:var(--bg-raise); }
.section-edge{ position:relative; border-top:1px solid var(--line); }
.section-edge::before{
  content:"";
  position:absolute; top:-1px; left:0; right:0; height:3px;
  background:repeating-linear-gradient(90deg,var(--green-line) 0 1px,transparent 1px 3px);
  opacity:.55;
}
.has-wm{ position:relative; overflow:hidden; }
.section-wm{
  position:absolute; right:-30px; bottom:-30px;
  width:260px; height:260px; color:var(--green-line);
  opacity:.08; pointer-events:none;
}
@media (max-width:640px){
  .section-wm{ width:180px; height:180px; right:-24px; bottom:-24px; }
}

/* ===== TINH CHỈNH MOBILE (UX/UI) ===== */
@media (max-width:640px){
  /* Logo nhẹ hơn trên màn hẹp — header bớt chiếm chiều cao */
  .logo img{ height:40px; }
  .nav-inner{ padding:var(--s3) var(--s5); }

  /* Siết nhịp dọc — s9/s8 quá rộng trên điện thoại */
  .section{ padding:var(--s7) 0; }

  /* Khối Quy mô: bỏ min-height (chỉ cần để căn gạch xanh ở lưới 4 cột desktop);
     trên 1 cột nó tạo khoảng trống chết giữa số và nhãn */
  .ledger-cell .value{ min-height:0; margin-bottom:var(--s2); }
  .ledger-rule{ margin:var(--s3) 0; }

  /* Tiêu đề section bớt to một chút cho cân trên mobile */
  .section-head h2{ font-size:var(--t-lg); }
}

/* ===== BÁO HIỆU BẢNG CUỘN NGANG =====
   Bảng phí nhiều cột phải cuộn ngang trên mobile. Bóng mờ ở mép phải (kỹ thuật
   background-attachment:local của Lea Verou) tự hiện khi còn nội dung bên phải,
   tự tắt khi cuộn tới cuối — cho người dùng biết có thể vuốt, thuần CSS. */
.rate-table-wrap{
  background:
    linear-gradient(to left, var(--bg-panel), transparent) 100% 0 / 28px 100% no-repeat local,
    linear-gradient(to left, rgba(112,192,16,.35), transparent) 100% 0 / 6px 100% no-repeat scroll;
}
.rate-hint{
  display:none;
  font-family:var(--font-mono); font-size:var(--t-xs);
  color:var(--green-line); margin:calc(-1 * var(--s1)) 0 var(--s5);
  align-items:center; gap:var(--s2);
}
.rate-hint i{
  display:inline-block; width:16px; height:1px; background:var(--green-line);
  position:relative;
}
.rate-hint i::after{
  content:""; position:absolute; right:-1px; top:-2.5px;
  width:5px; height:5px; border-top:1px solid var(--green-line);
  border-right:1px solid var(--green-line); transform:rotate(45deg);
}
@media (max-width:640px){
  .rate-hint.is-scrollable{ display:flex; }
}

/* ============================================================
   TRANG GIỚI THIỆU (gioi-thieu.html)
   ============================================================ */

/* Mở đầu: logo lớn trên nền tối, có quầng xanh dịu phía sau */
.about-hero{
  position:relative; overflow:hidden;
  padding:var(--s9) 0 var(--s8);
  text-align:center;
  border-bottom:1px solid var(--line);
}
.about-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 28%, rgba(48,144,0,.16), rgba(10,10,10,0) 68%);
}
.about-hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.about-logo{
  width:min(260px, 52vw); height:auto; margin-bottom:var(--s6);
  animation:heroEnterUp 1.4s cubic-bezier(.16,.72,.18,1) both;
}
.about-hero .eyebrow{ justify-content:center; }
.about-hero .eyebrow::after{
  content:""; width:22px; height:3px; flex:none;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor;
}
.about-hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom:var(--s5); }
.about-hero .lead{
  font-size:clamp(1rem, 1.4vw, 1.25rem);
  color:var(--text-soft); max-width:62ch; margin-inline:auto;
}

/* Đoạn văn dài — cỡ chữ nhỉnh hơn body cho dễ đọc */
.about-prose{ max-width:74ch; }
.about-prose p{ font-size:var(--t-md); line-height:1.7; color:var(--text-soft); }
.about-prose p + p{ margin-top:var(--s5); }

/* Lưới 6 lĩnh vực kinh doanh — bấm được, dẫn sang trang dịch vụ tương ứng */
.biz-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
}
.biz-card{
  background:var(--bg-raise); padding:var(--s6) var(--s5);
  position:relative; overflow:hidden;
  transition:background .35s var(--ease);
}
.biz-card::after{
  content:""; position:absolute; left:0; top:0; height:2px; width:100%;
  background:linear-gradient(90deg, var(--green), var(--green-line));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.biz-card:hover{ background:var(--bg-panel); }
.biz-card:hover::after{ transform:scaleX(1); }
.biz-card .num{
  font-size:var(--t-xs); color:var(--green-line);
  letter-spacing:.12em; margin-bottom:var(--s5);
}
.biz-card h3{ font-size:var(--t-base); margin-bottom:var(--s2); transition:color .3s var(--ease); }
.biz-card:hover h3{ color:#fff; }
.biz-card p{ font-size:var(--t-sm); color:var(--text-soft); }

/* Chuỗi giá trị 3 mắt xích */
.chain{
  list-style:none; margin-top:var(--s7);
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6);
}
.chain-step{ border-top:1px solid var(--line-strong); padding-top:var(--s4); }
.chain-step span{
  display:block; font-size:var(--t-xs); color:var(--green-line);
  letter-spacing:.12em; margin-bottom:var(--s3);
}
.chain-step h4{ font-size:var(--t-base); margin-bottom:var(--s2); }
.chain-step p{ font-size:var(--t-sm); color:var(--text-soft); }

/* Triết lý — khối trích dẫn trang trọng */
.creed{
  position:relative; overflow:hidden;
  padding:var(--s9) 0;
  background:var(--bg-raise);
  border-block:1px solid var(--line);
  text-align:center;
}
.creed::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%, rgba(48,144,0,.14), rgba(10,10,10,0) 70%);
}
.creed-inner{ position:relative; z-index:1; }
.creed .eyebrow{ justify-content:center; }
.creed .eyebrow::after{
  content:""; width:22px; height:3px; flex:none;
  border-top:1px solid currentColor; border-bottom:1px solid currentColor;
}
.creed-quote{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3.2vw, 2.6rem);
  font-weight:600; line-height:1.3; letter-spacing:-.02em;
  color:var(--text); max-width:24ch; margin:0 auto var(--s5);
  text-wrap:balance;
}
.creed-sub{
  font-size:var(--t-sm); letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-line);
}

@media (max-width:900px){
  .biz-grid{ grid-template-columns:repeat(2,1fr); }
  .chain{ grid-template-columns:1fr; gap:var(--s5); }
}
@media (max-width:600px){
  .biz-grid{ grid-template-columns:1fr; }
  .about-hero{ padding:var(--s8) 0 var(--s7); }
}

/* ===== Nút dẫn sang trang Giới thiệu (trong mục Giới thiệu trang chủ) ===== */
.about-more{ margin-top:var(--s6); }

/* Khối .brand-band (logo + triết lý đứng riêng) đã bỏ — nội dung triết lý nay
   gộp vào panel logo của #ve-chung-toi (.about-media.is-logo + .about-creed). */

/* ===== Bố cục hai vế trên trang Giới thiệu: chữ bên trái, ảnh bên phải ===== */
.about-split{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:var(--s8); align-items:center;
}
.about-split .about-prose{ max-width:none; }
.about-split-media{ position:relative; }
.about-split-media img{
  width:100%; height:auto; display:block;
  border:1px solid var(--line);
  filter:grayscale(100%) contrast(1.04);
}
/* Giữ màu gốc — ảnh lối vào văn phòng ở khối giới thiệu đầu trang. Các ảnh
   .about-split-media khác (mặt tiền ban ngày) vẫn khử màu như cũ. */
.about-split-media.is-color img{ filter:none; }
/* Biến thể logo — cùng hiệu ứng với .about-media.is-logo (trang chủ) và
   .svc-brand-panel (trang dịch vụ): nền tối + quầng sáng xanh, logo canh giữa. */
.about-split-media.is-logo{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s4); position:relative;
  aspect-ratio:4/5; background:var(--bg); border:1px solid var(--line);
}
.about-split-media.is-logo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 58% at 50% 46%, rgba(48,144,0,.18), rgba(10,10,10,0) 68%);
}
.about-split-media.is-logo img{
  position:relative; z-index:1; width:min(240px, 56%); height:auto;
  object-fit:contain; filter:none; border:none;
}
.about-split-media figcaption{
  margin-top:var(--s3);
  font-size:var(--t-xs); letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-faint);
}
@media (max-width:900px){
  .about-split{ grid-template-columns:1fr; gap:var(--s6); }
}
/* Câu triết lý: giữ trên MỘT dòng thẳng hàng ở khổ máy tính.
   Câu dài (~93 ký tự) — cỡ chữ đo thực nghiệm để vừa khít bề rộng khung
   .wrap (chặn ở 1180px, vùng chữ dùng được 1116px). Từ 1180px trở lên bề
   rộng khung không đổi nữa nên 1.45rem là mốc an toàn cố định; buộc một
   dòng chỉ áp dụng từ 1180px — dưới đó cho phép xuống dòng tự nhiên, cân
   đều giữa các dòng nhờ text-wrap:balance. */
.creed-quote{ max-width:none; font-size:clamp(1.05rem, 2.2vw, 1.45rem); }
@media (min-width:1180px){
  .creed-quote{ white-space:nowrap; }
}

/* ============================================================
   TUYỂN DỤNG (#tuyen-dung)
   Dùng lại khối chứng thư .cert (trước ở hero) làm bảng điều kiện đánh giá,
   và .process-strip cho quy trình 4 bước.
   ============================================================ */
.recruit-grid{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--s8); align-items:center;
  margin-bottom:var(--s9);
}
.recruit-copy .team-tier-desc{ max-width:52ch; }
.recruit-points{
  list-style:none; margin-top:var(--s6);
  display:flex; flex-direction:column; gap:var(--s4);
}
.recruit-points li{
  position:relative; padding-left:var(--s5);
  font-size:var(--t-sm); color:var(--text-soft);
}
.recruit-points li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:12px; height:1px; background:var(--green-line);
}
@media (max-width:900px){
  .recruit-grid{ grid-template-columns:1fr; gap:var(--s6); margin-bottom:var(--s8); }
}

/* ============================================================
   TRANG TUYỂN DỤNG (tuyen-dung.html)
   ============================================================ */
.recruit-hero{
  position:relative; overflow:hidden;
  padding:var(--s9) 0 var(--s8);
  border-bottom:1px solid var(--line);
}
.recruit-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 62% at 22% 10%, rgba(48,144,0,.15), rgba(10,10,10,0) 68%);
}
.recruit-hero .wrap{ position:relative; z-index:1; }
.recruit-hero h1{ font-size:clamp(2.1rem, 4.4vw, 3.4rem); margin-bottom:var(--s5); max-width:20ch; }
.recruit-hero .lead{ font-size:var(--t-md); color:var(--text-soft); max-width:64ch; }

/* Danh sách neo tới từng vị trí */
.job-nav{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); }
.job-nav a{
  display:flex; flex-direction:column; gap:2px;
  padding:var(--s3) var(--s5);
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  font-weight:600; font-size:var(--t-sm);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.job-nav a span{ font-size:var(--t-xs); letter-spacing:.12em; color:var(--green-line); font-weight:400; }
.job-nav a:hover{ border-color:var(--green-line); background:var(--bg-raise); }

/* Thẻ tin tuyển dụng */
.job-list{ display:flex; flex-direction:column; gap:var(--s8); }
.job{
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s7);
  scroll-margin-top:96px;
}
.job-head{ border-bottom:1px solid var(--line); padding-bottom:var(--s6); margin-bottom:var(--s6); }
.job-kind{
  display:inline-block; margin-bottom:var(--s4);
  font-size:var(--t-xs); letter-spacing:.14em;
  color:var(--green-line);
  border:1px solid var(--green); border-radius:var(--r-sm);
  padding:4px var(--s3);
}
.job-head h2{ font-size:clamp(1.6rem, 3vw, 2.3rem); margin-bottom:var(--s2); }
.job-tagline{ color:var(--green-line); font-size:var(--t-sm); letter-spacing:.02em; margin-bottom:var(--s4); }
.job-summary{ color:var(--text-soft); max-width:70ch; }
.job-meta{ display:flex; flex-wrap:wrap; gap:var(--s7); margin-top:var(--s6); }
.job-meta-item{ display:flex; flex-direction:column; gap:4px; }
.job-meta-item span{ font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.job-meta-item b{ font-size:var(--t-sm); font-weight:600; }

.job-roles{ margin-bottom:var(--s6); }
.job-role-list{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.job-role{
  padding:var(--s2) var(--s4);
  background:var(--green-wash); color:var(--text);
  border:1px solid rgba(48,144,0,.4); border-radius:var(--r-sm);
  font-size:var(--t-sm); font-weight:500;
}

.job-block-title{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-line); margin-bottom:var(--s4);
}
.job-body{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s7); }
.job-block ul{ list-style:none; display:flex; flex-direction:column; gap:var(--s3); }
.job-block li{
  position:relative; padding-left:var(--s5);
  font-size:var(--t-sm); color:var(--text-soft); line-height:1.6;
}
.job-block li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:10px; height:1px; background:var(--green-line);
}
/* Khối "Điều kiện" — dùng chung gạch đầu dòng với .job-block li, không kẻ ngang.
   Chỉ phần số được tách ra bằng font mono + màu sáng hơn cho dễ quét mắt. */
.job-cond-v{
  color:var(--text); font-weight:500;
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.job-foot{
  display:flex; flex-wrap:wrap; gap:var(--s6);
  align-items:flex-end; justify-content:space-between;
  border-top:1px solid var(--line); margin-top:var(--s7); padding-top:var(--s6);
}
.job-apply{ max-width:56ch; }
.job-apply p{ font-size:var(--t-sm); color:var(--text-soft); }
.job-office{ margin-top:var(--s4); }
.job-office span{
  display:block; font-size:var(--t-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:2px;
}
.job-actions{ display:flex; gap:var(--s3); flex-wrap:wrap; }
/* Bản Trung: khối apply là form điền thông tin (thay 2 nút) — giới hạn bề ngang
   cho gọn trong chân thẻ tuyển dụng. */
.job-actions-form{ display:block; width:min(340px,100%); }
.job-actions-form .form-submit{ margin-top:var(--s2); }

/* Khối liên hệ tuyển dụng */
.job-contact{
  border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s7); background:var(--bg-raise);
}
.job-contact-rows{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s6); }
.job-contact-rows > *{ display:flex; flex-direction:column; gap:4px; }
.job-contact-rows span{ font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.job-contact-rows b{ font-size:var(--t-sm); font-weight:600; }
.job-contact-rows a:hover b{ color:var(--green-line); }

@media (max-width:640px){
  .job{ padding:var(--s6) var(--s5); }
  .job-meta{ gap:var(--s5); }
  .job-actions .btn-primary,.job-actions .btn-secondary{ flex:1; justify-content:center; }
}

/* ===== BỘ CHUYỂN NGÔN NGỮ (VI · EN · 中文) ===== */
.lang-switch{
  display:flex; align-items:center; gap:2px; flex:none;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  overflow:hidden; margin-right:var(--s3);
}
.lang-switch a{
  padding:6px 9px; color:var(--text-faint);
  transition:color .16s var(--ease), background .16s var(--ease);
}
.lang-switch a + a{ border-left:1px solid var(--line-strong); }
.lang-switch a:hover{ color:var(--text); }
.lang-switch a.is-active{ color:var(--bg); background:var(--green-line); font-weight:600; }
@media (max-width:980px){
  .lang-switch{ margin-right:var(--s2); }
  .lang-switch a{ padding:5px 7px; }
}

/* ===== BẢN TIẾNG TRUNG: font chữ Hán =====
   Chỉ cần định nghĩa lại 3 biến font ở <html lang="zh">, mọi nơi dùng biến sẽ
   tự đổi theo — không rải rác override theo từng class như trước.

   Thứ tự font quan trọng (trình duyệt duyệt từng ký tự): font Latin thương hiệu
   ĐỨNG TRƯỚC nên chữ Latin/số (IABER, OKX, VIP1, 100%…) vẫn giữ đúng
   Inter/Archivo/IBM Plex Mono. Chữ Hán không có trong các font đó nên rơi
   xuống 'Dengxian'/'等线' (máy Windows/Office có sẵn — khách yêu cầu), rồi
   'Noto Sans SC' (web-font nạp qua Google Fonts, phủ mọi thiết bị còn lại). */
html[lang^="zh"]{
  --font-sans:    'Inter','Dengxian','等线',var(--font-cjk),system-ui,-apple-system,sans-serif;
  --font-display: 'Archivo','Dengxian','等线',var(--font-cjk),'Inter',sans-serif;
  --font-mono:    'IBM Plex Mono','Dengxian','等线',var(--font-cjk),ui-monospace,monospace;
}

/* ===== KHỐI "我们是谁" (WHO WE ARE) — hiện chỉ dùng ở bản tiếng Trung =====
   4 thẻ bấm được: thẻ đang chọn hiện icon màu đầy đủ + viền sáng, các thẻ còn
   lại xám và mờ đi. Trạng thái do initWhoWeAre() trong main.js điều khiển. */
.whoweare{
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg-panel); padding:var(--s7) var(--s6);
}
.whoweare-head{ text-align:center; margin-bottom:var(--s7); }
.whoweare-head h2{ font-size:var(--t-lg); margin:0 0 var(--s2); }
.whoweare-en{
  font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:.22em; color:var(--text-faint); margin:0 0 var(--s3);
}
.whoweare-sub{ color:var(--text-soft); font-size:var(--t-xs); margin:0 auto; max-width:60ch; }
.whoweare-rule{
  display:block; width:50px; height:1px; margin:var(--s4) auto 0;
  background:var(--line-strong);
}

.whoweare-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
}
.who-card{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; padding:var(--s4) var(--s2);
  font:inherit; color:inherit; text-align:center; cursor:pointer;
  /* <button> canh giữa nội dung theo chiều dọc -> thẻ chữ ngắn thì icon tụt xuống.
     Ép xếp dọc từ trên xuống để 4 icon nằm cùng một hàng. */
  display:flex; flex-direction:column; align-items:stretch;
  border-radius:var(--r-md);
  transition:background .35s var(--ease);
}
.who-card:hover{ background:rgba(255,255,255,.03); }
.who-card:focus-visible{ outline:2px solid var(--green-line); outline-offset:2px; }

.who-icon{
  display:block; width:105px; height:105px; margin:0 auto var(--s4);
  border-radius:50%; position:relative;
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .35s var(--ease), transform .35s var(--ease);
}
.who-icon img{ width:100%; height:100%; border-radius:50%; display:block;
  filter:grayscale(100%); opacity:.5;
  transition:filter .35s var(--ease), opacity .35s var(--ease); }

.who-card h3{ font-size:var(--t-sm); margin:0 0 var(--s2);
  color:var(--text-soft); transition:color .35s var(--ease); }
.who-card p{ font-size:var(--t-xs); color:var(--text-faint); margin:0 0 var(--s1);
  line-height:1.6; transition:color .35s var(--ease); }

/* Trạng thái đang chọn */
.who-card.is-active .who-icon{
  box-shadow:0 0 0 2px var(--green-line), 0 0 28px rgba(112,192,16,.28);
  transform:translateY(-4px);
}
.who-card.is-active .who-icon img{ filter:none; opacity:1; }
.who-card.is-active h3{ color:var(--text); }
.who-card.is-active p{ color:var(--text-soft); }

/* Rê chuột: icon được rê sáng lên đầy đủ (phát sáng như trạng thái đang chọn) */
.who-card:hover .who-icon{
  box-shadow:0 0 0 2px var(--green-line), 0 0 28px rgba(112,192,16,.28);
  transform:translateY(-4px);
}
.who-card:hover .who-icon img{ filter:none; opacity:1; }
.who-card:hover h3{ color:var(--text); }
.who-card:hover p{ color:var(--text-soft); }

@media (max-width:980px){
  .whoweare{ padding:var(--s6) var(--s4); }
  .whoweare-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s5) var(--s3); }
  .who-icon{ width:84px; height:84px; }
}
@media (max-width:560px){
  .whoweare{ padding:var(--s5) var(--s3); }
  .whoweare-grid{ gap:var(--s4) var(--s2); }
  .who-icon{ width:67px; height:67px; margin-bottom:var(--s3); }
  .who-card{ padding:var(--s3) var(--s1); }
}
@media (prefers-reduced-motion:reduce){
  .who-icon, .who-icon img, .who-card, .who-card h3, .who-card p{ transition:none; }
  .who-card.is-active .who-icon{ transform:none; }
}

/* ============================================================
   SƠ ĐỒ QUY TRÌNH KHẢO HẠCH TRADER (tflow) + POPUP
   Dựng bằng HTML/CSS, responsive, song ngữ. Nội dung sinh bởi
   recruit_diagram.py; nút mở & popup do initModals() trong main.js xử lý.
   ============================================================ */
/* --- Nút mở --- */
.tflow-open{ display:inline-flex; align-items:center; gap:8px; }
.tflow-open [aria-hidden]{ color:var(--green-line); }

/* --- Popup --- */
.tflow-modal{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:var(--s4);
}
.tflow-modal[hidden]{ display:none; }
.tflow-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.72);
  backdrop-filter:blur(4px);
}
.tflow-modal-dialog{
  position:relative; z-index:1;
  width:min(920px,100%); max-height:calc(100vh - 2*var(--s4));
  display:flex; flex-direction:column;
  background:var(--bg-panel); border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  animation:tflowIn .28s var(--ease);
}
@keyframes tflowIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.tflow-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--bg-panel);
}
.tflow-modal-title{ font-family:var(--font-display); font-size:var(--t-md); margin:0; }
.tflow-modal-close{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:transparent; border:1px solid var(--line-strong); color:var(--text-soft);
  width:36px; height:36px; border-radius:var(--r-sm); font-size:22px; line-height:1;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tflow-modal-close:hover{ color:var(--green-line); border-color:var(--green-line); }
.tflow-modal-body{ padding:var(--s6) var(--s5); overflow-y:auto; }

/* --- Sơ đồ --- */
.tflow{ display:flex; flex-direction:column; align-items:center; gap:0; max-width:820px; margin:0 auto; }
.tflow-title{
  width:100%; text-align:center; padding:var(--s4) var(--s5);
  border:1px solid var(--green-line); border-radius:var(--r-md);
  background:var(--green-wash);
}
.tflow-title-main{ display:block; font-family:var(--font-display); font-weight:600; color:#fff; font-size:var(--t-md); }
.tflow-title-sub{ display:block; font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-soft); letter-spacing:.04em; margin-top:4px; }

/* Đường nối dọc + mũi tên */
.tflow-arrow{
  width:2px; height:22px; background:var(--line-strong); position:relative; flex:0 0 auto;
  /* margin để mũi tên KHÔNG chạm vào các ô trên/dưới */
  margin-block:9px;
}
.tflow-arrow::after{
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid var(--line-strong);
}

/* Hai lộ trình = 1 lưới phẳng. grid-auto-flow:column đổ theo cột (cột 1 = lộ
   trình 1, cột 2 = lộ trình 2). Hai HÀNG ô đặt "1fr" nên MỌI ô đồng kích thước,
   kể cả ô của lộ trình có nội dung dài hơn. */
.tflow-tracks{
  width:100%; display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:auto 1fr auto 1fr;
  grid-auto-flow:column;
  column-gap:var(--s5); row-gap:0;
}
.tflow-track-cap{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-line); text-align:center; margin:0 0 var(--s3);
}
.tflow-arrow-cell{ display:flex; align-items:center; justify-content:center; }
.tflow-arrow-cell .tflow-arrow{ height:18px; margin-block:7px; }

/* Ô bước / ô chế độ */
.tflow-step, .tflow-mode{
  width:100%; text-align:center;
  border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--bg); padding:var(--s3) var(--s3);
  /* căn nội dung vào GIỮA khung theo chiều dọc */
  display:flex; flex-direction:column; gap:4px; justify-content:center;
}
.tflow-name{ font-family:var(--font-display); font-weight:600; color:#fff; font-size:var(--t-sm); }
.tflow-name .tflow-pri{ display:block; }
.tflow-meta{ font-size:var(--t-xs); color:var(--text-soft); }
.tflow-pri{ display:block; }
.tflow-en{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-faint); letter-spacing:.02em; margin-top:1px; }
.tflow-meta .tflow-pri{ display:inline; }

/* Node chung (tiêu chí / chính thức / vốn) */
.tflow-node{
  width:100%; text-align:center;
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:var(--bg); padding:var(--s4) var(--s5);
}
.tflow-node-head{ display:block; font-family:var(--font-display); font-weight:600; color:#fff; font-size:var(--t-sm); margin-bottom:var(--s3); }

/* Cột "auto" + justify-content:center -> 2 cột tiêu chí gom vào GIỮA khung,
   không kéo dạt ra hai mép. */
.tflow-crit-grid{
  display:grid; grid-template-columns:auto auto; justify-content:center;
  column-gap:var(--s8); row-gap:var(--s3);
}
.tflow-crit-item{ font-size:var(--t-xs); color:var(--text-soft); text-align:center; }
.tflow-crit-item .tflow-pri{ display:block; color:var(--text); }

.tflow-pass{ background:var(--green); border-color:var(--green); }
.tflow-pass .tflow-pri{ display:block; color:#fff; font-family:var(--font-display); font-weight:700; }
.tflow-pass .tflow-en{ color:rgba(255,255,255,.7); }

.tflow-modes{ width:100%; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }

.tflow-fund{ background:var(--green-wash); border-color:var(--green-line); }
.tflow-fund-label{ display:block; font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--green-line); }
.tflow-fund-val{ display:block; font-family:var(--font-display); font-weight:700; color:#fff; font-size:var(--t-lg); margin-top:4px; }

/* Mobile: xuống 1 cột. Lưới lộ trình đổ lại theo hàng (DOM đã xếp lần lượt
   từng lộ trình: cap → ô1 → mũi tên → ô2) nên thứ tự vẫn đúng. */
@media (max-width:640px){
  .tflow-tracks{
    grid-template-columns:1fr; grid-template-rows:none; grid-auto-flow:row;
  }
  .tflow-modes{ grid-template-columns:1fr; }
  .tflow-crit-grid{ grid-template-columns:auto; }
  .tflow-modal-body{ padding:var(--s5) var(--s4); }
  .tflow-fund-val{ font-size:var(--t-md); }
}
@media (prefers-reduced-motion:reduce){
  .tflow-modal-dialog{ animation:none; }
}

/* ============================================================
   THẺ TUYỂN DỤNG: nút "bảng" ở GÓC TRÊN thẻ, cân đối 2 bên với nhãn hình thức.
   ============================================================ */
.job-head-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4); flex-wrap:wrap;
}
.job-head-top .job-kind{ margin-bottom:0; }
.job-head-top .tflow-open{ white-space:nowrap; }

/* ============================================================
   BẢNG THU NHẬP BD (trong popup dùng chung .tflow-modal)
   ============================================================ */
.bd-income{ display:flex; flex-direction:column; gap:var(--s6); }
.bd-note{ font-size:var(--t-xs); color:var(--text-faint); letter-spacing:.02em; margin:0; }
.bd-mech-title{
  font-family:var(--font-display); font-size:var(--t-sm); color:#fff;
  margin:0 0 var(--s3); padding-bottom:var(--s3); border-bottom:1px solid var(--line-strong);
}
.bd-tbl-cap{
  font-size:var(--t-xs); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-line); margin:var(--s4) 0 var(--s2);
}
.bd-tbl-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); }
/* table-layout:fixed + colgroup -> các cột chia đều, không bị lệch.
   Đồng bộ 1 font (sans) cho cả header lẫn ô để chữ không "lộn xộn". */
.bd-tbl{
  width:100%; min-width:520px; border-collapse:collapse; table-layout:fixed;
  font-family:var(--font-sans); font-size:var(--t-xs);
}
.bd-tbl th, .bd-tbl td{
  padding:var(--s3); text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--line);
  overflow-wrap:break-word;
}
.bd-tbl th + th, .bd-tbl td + td{ border-left:1px solid var(--line); }
.bd-tbl thead th{
  background:var(--bg-panel); color:var(--text-faint);
  font-weight:600; letter-spacing:.02em;
}
.bd-tbl tbody td{ color:var(--text); }
.bd-tbl tbody td:first-child{ color:var(--text-soft); }
.bd-tbl tbody tr:last-child td{ border-bottom:0; }