/* Hallmark · macrostructure: Split Studio · theme: brand-native (ink + gold + cream) · v10 */
/* LAD International Holdings
   Bố cục: diptych đổi chiều luân phiên. Hai khoảnh khắc dàn dựng:
   (1) hero neo trục dọc, (2) hệ sinh thái pane dính + sơ đồ năng lực. */

/* ═══════════════ TOKENS ═══════════════ */
:root{
  --ink:#0a0d12;
  --ink-2:#11151c;
  --light:#f4efe7;
  --cream:#efe7db;
  --paper:#faf7f2;
  --gold:#cda96f;
  --gold-2:#e0c48f;
  --muted-light:rgba(244,239,231,.74);
  --muted-dark:#55504a;
  --line-light:rgba(244,239,231,.14);
  --line-dark:rgba(10,13,18,.13);
  /* thang vang dam cho nen sang — dat tuong phan AA tro len */
  --gold-ink:#8e6d3d;      /* nhan phu tren nen sang */
  --gold-ink-2:#7d5f34;    /* chu nhan trong tieu de */
  --gold-ink-3:#6b4d21;    /* nhan nho, chu hoa giãn cách */
  --gold-ink-4:#7d5f31;    /* icon tren o vang nhat */
  --ink-hover:#141922;     /* nen the toi khi hover */
  --ink-soft:#413b34;      /* chu tren o vang nhat */
  --noise:#f4efe7;         /* cham nhieu - dung mau light, tranh trang thuan */

  --container:min(100vw - 72px,1340px);
  --header:84px;

  /* motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in:cubic-bezier(0.7,0,0.84,0);
  --ease-io:cubic-bezier(0.65,0,0.35,1);
  --dur-micro:120ms;
  --dur-short:220ms;
  --dur-long:420ms;
}

/* ═══════════════ RESET ═══════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--light);
  font-family:"Manrope",system-ui,Arial,sans-serif;font-weight:400;
  line-height:1.65;overflow-x:clip;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
svg{display:block}

/* ═══════════════ BROWSER SURFACES ═══════════════ */
/* Những thứ trình duyệt tự vẽ — không theme thì trang lộ ra là "lắp ghép" */
::selection{background:rgba(205,169,111,.30);color:var(--light)}
.section-light ::selection,.section-cream ::selection{background:rgba(205,169,111,.34);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ink-2)}
::-webkit-scrollbar-thumb{background:rgba(205,169,111,.34);border-radius:99px;border:3px solid var(--ink-2)}
::-webkit-scrollbar-thumb:hover{background:rgba(205,169,111,.55)}
html{scrollbar-color:rgba(205,169,111,.4) var(--ink-2);scrollbar-width:thin}

:focus{outline:none}
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:3px;
}
.section-light :focus-visible,.section-cream :focus-visible{outline-color:var(--gold-ink)}

/* Trang thai :active va :disabled — cong 26 hallmark doi du 5 trang thai
   (mac dinh / hover / focus-visible / active / disabled) cho moi phan tu bam duoc. */
a:active,button:active{transform:translateY(1px)}
.header-cta:active,.chip-link:active,.circle-link:active,.contact-circle:active{
  transform:translateY(1px) scale(.985);
}
.language-switch button:active{transform:scale(.94)}
.menu-toggle:active{transform:scale(.94)}

button:disabled,button[aria-disabled="true"],
a[aria-disabled="true"]{
  opacity:.55;cursor:not-allowed;pointer-events:none;
}

/* Focus ring phai hien NGAY, khong duoc fade — nguoi dung ban phim can phan hoi tuc thi (cong 15) */
:focus-visible{transition:none}

.skip-link{
  position:fixed;top:10px;left:10px;z-index:1000;
  padding:12px 20px;background:var(--gold);color:var(--ink);
  font-weight:600;font-size:13.02px;border-radius:4px;
  transform:translateY(-160%);
  transition:transform var(--dur-short) var(--ease-out);
}
.skip-link:focus-visible{transform:translateY(0)}

/* ═══════════════ LOADER ═══════════════
   QUAN TRỌNG: loader tự ẩn bằng CSS animation sau 2.4s dù JS có chết hay không.
   Trước đây chỉ JS mới gỡ được -> Safari Private / chặn cookie = màn đen vĩnh viễn. */
.page-loader{
  position:fixed;inset:0;z-index:999;background:var(--ink);
  display:grid;place-items:center;align-content:center;gap:26px;
  animation:loaderAutoHide 600ms var(--ease-out) 2.4s forwards;
}
.page-loader.hidden{opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility .6s}
@keyframes loaderAutoHide{to{opacity:0;visibility:hidden}}
.loader-logo{width:min(340px,56vw);filter:drop-shadow(0 0 28px rgba(205,169,111,.16))}
.loader-line{width:min(260px,46vw);height:1px;background:rgba(244,239,231,.09);overflow:hidden}
.loader-line i{display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:loaderSweep 1.1s ease-in-out infinite}
@keyframes loaderSweep{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

/* ═══════════════ CHROME ═══════════════ */
.noise{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.04;
  background-image:radial-gradient(circle at 20% 30%,var(--noise) 0 1px,transparent 1.2px),radial-gradient(circle at 70% 80%,var(--noise) 0 1px,transparent 1.2px);
  background-size:6px 6px,7px 7px;mix-blend-mode:soft-light}
.cursor-glow{
  position:fixed;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,169,111,.16),transparent 62%);
  pointer-events:none;z-index:4;transform:translate(-50%,-50%);
  opacity:0;transition:opacity var(--dur-long) var(--ease-out);
  mix-blend-mode:screen;
}
body:hover .cursor-glow{opacity:1}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:100;background:rgba(244,239,231,.05)}
.scroll-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform;background:linear-gradient(90deg,var(--gold-ink),var(--gold),var(--gold-2));box-shadow:0 0 16px rgba(205,169,111,.5)}

/* ═══════════════ HEADER ═══════════════ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;height:var(--header);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:34px;
  padding:0 max(28px,calc((100vw - 1220px)/2));
  border-bottom:1px solid transparent;
  transition:background var(--dur-long) var(--ease-out),border-color var(--dur-long) var(--ease-out);
}
.site-header.scrolled{background:rgba(10,13,18,.94);border-bottom-color:var(--line-light);height:70px}
.brand{display:flex;align-items:center;min-height:44px}
.brand-logo{width:100px;transition:opacity var(--dur-short) var(--ease-out)}
.brand:hover .brand-logo{opacity:.78}
/* header co lai 84 -> 70px khi cuon: logo co theo cho can khoang tho */
@media (min-width:761px){.site-header.scrolled .brand-logo{width:88px}}

.desktop-nav{display:flex;gap:34px;justify-self:center}
.desktop-nav a{
  position:relative;font-size:11.6px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--muted-light);padding:14px 0;
  transition:color var(--dur-short) var(--ease-out);
}
.desktop-nav a::after{
  content:"";position:absolute;left:0;bottom:8px;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-long) var(--ease-out);
}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--light)}
.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1)}

.header-actions{display:flex;align-items:center;gap:18px;justify-self:end}
.language-switch{display:flex;align-items:center;gap:2px;border:1px solid var(--line-light);border-radius:99px;padding:2px}
.language-switch button{
  min-width:44px;min-height:44px;padding:0 6px;   /* tap target đạt chuẩn 44x44 */
  font-size:11px;letter-spacing:.1em;font-weight:500;color:var(--muted-light);
  border-radius:99px;transition:color var(--dur-short) var(--ease-out),background var(--dur-short) var(--ease-out);
}
.language-switch button:hover{color:var(--light)}
.language-switch button.active{color:var(--ink);background:var(--gold)}
.language-switch>span{width:1px;height:13px;background:var(--line-light)}

.header-cta{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px;
  border:1px solid var(--line-light);border-radius:99px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out);
}
.header-cta:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.header-cta i{width:15px;height:15px}

.menu-toggle{display:none;width:44px;height:44px;position:relative;border:1px solid var(--line-light);border-radius:50%}
.menu-toggle span{position:absolute;left:13px;width:18px;height:1px;background:var(--light);transition:transform var(--dur-short) var(--ease-out),opacity var(--dur-micro)}
.menu-toggle span:nth-child(1){top:19px}
.menu-toggle span:nth-child(2){top:24px}
.menu-toggle.open span:nth-child(1){transform:translateY(2.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){transform:translateY(-2.5px) rotate(-45deg)}

/* ═══════════════ MOBILE MENU ═══════════════ */
.mobile-menu{
  position:fixed;inset:0;z-index:70;background:var(--ink);
  transform:translateY(-100%);transition:transform var(--dur-long) var(--ease-out);
  padding-top:var(--header);visibility:hidden;
}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.mobile-menu-inner{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:40px 24px 40px}
.mobile-menu nav{display:flex;flex-direction:column;gap:4px}
.mobile-menu nav a{
  display:flex;align-items:center;min-height:56px;
  border-bottom:1px solid var(--line-light);
  font-family:"Be Vietnam Pro",sans-serif;font-size:24.18px;font-weight:600;letter-spacing:-.01em;
  transition:color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.mobile-menu nav a:hover{color:var(--gold);transform:translateX(8px)}
.mobile-bottom{display:flex;flex-direction:column;gap:20px;color:var(--muted-light);font-size:13.02px}
.mobile-bottom a{min-height:44px;display:flex;align-items:center}

/* ═══════════════ LAYOUT PRIMITIVES ═══════════════ */
.split,.purpose,.values,.milestones,.capability,.contact,.stack{padding:109.74px 0}
.split-inner,.purpose-inner,.values-inner,.milestones-inner,.capability-inner,.contact-inner,.stack-inner{
  width:var(--container);margin-inline:auto;
}
/* CHONG CHU MO COI — text-wrap:pretty keo tu xuong de dong cuoi khong con mot chu.
   Ap cho MOI khoi chu, khong chi tieu de. */
p,li,figcaption,blockquote,dd,.lead,.milestones-intro,
h1,h2,h3,h4,.display-heading,.contact-heading{text-wrap:pretty}

.section-light{background:var(--paper);color:var(--ink)}
.section-cream{background:var(--cream);color:var(--ink)}
.section-dark{background:var(--ink);color:var(--light)}

.display-heading{
  font-family:"Be Vietnam Pro",sans-serif;font-weight:700;
  font-size:clamp(23.25px,2.28vw,34.41px);line-height:1.24;letter-spacing:-.02em;
  text-wrap:balance;
  overflow-wrap:anywhere;
  min-width:0;
}
/* Cum nhan mach trong tieu de — phuong an F.
   KHONG dung chu nghieng: hallmark cong 38a xep tieu de in nghieng vao dau hieu AI hang dau,
   va dau thanh tieng Viet tren chu nghieng cung kho doc hon. Nhan manh bang khoi + neo doc. */
.display-heading em{
  display:block;font-style:normal;font-weight:600;color:var(--gold-ink-2);
  border-left:2px solid var(--gold-ink);padding-left:18px;margin-top:12px;
}
.display-heading.light em{color:var(--gold-2);border-left-color:var(--gold)}
.contact-heading em{
  display:block;font-style:normal;font-weight:700;color:var(--gold-2);
  border-left:2px solid var(--gold);padding-left:20px;margin-top:14px;text-transform:none;
}

/* Cột hẹp (Split Studio ~560px, Feature Stack ~487px) cần thang chữ nhỏ hơn
   bản tràn ngang — nếu không tiếng Việt chỉ vừa ~9 ký tự/dòng và sinh dòng mồ côi. */
.split-text .display-heading,
.stack-pane .display-heading{font-size:clamp(21.39px,1.86vw,27.9px);line-height:1.28}

.lead{font-size:15.81px;line-height:1.75;color:var(--muted-dark)}
.section-dark .lead{color:var(--muted-light)}
.split-text p{font-size:14.42px;line-height:1.8;color:var(--muted-dark)}
.section-dark .split-text p{color:var(--muted-light)}

.chip-link{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 22px;
  border:1px solid var(--line-dark);border-radius:99px;
  font-size:11.6px;letter-spacing:.11em;text-transform:uppercase;font-weight:500;
  transition:background var(--dur-short) var(--ease-out),color var(--dur-short) var(--ease-out),border-color var(--dur-short) var(--ease-out),gap var(--dur-short) var(--ease-out);
}
.chip-link:hover{background:var(--ink);color:var(--light);border-color:var(--ink);gap:14px}
.chip-link i{width:15px;height:15px}

/* ═══════════════ HERO · HP1 Vertical-rail ═══════════════ */
/* Xep lop bang GRID 1x1 thay vi absolute. Truoc day ray/anh/chu/marquee moi lop mot he
   toa do rieng nen chu troi so voi anh khi doi viewport — day la goc cua "bo cuc chu kem". */
.hero{
  position:relative;display:grid;grid-template-columns:100%;
  min-height:max(100svh,640px);          /* min-height tinh CA padding (border-box) */
  align-content:center;
  overflow:hidden;isolation:isolate;
  padding:calc(var(--header) + 20px) 0 140px;   /* day/dinh = 1.35, keo hero vao nhip trang */
}
.hero>*{grid-area:1/1}                    /* moi lop chung MOT o canh chinh */
.hero-media{align-self:stretch;justify-self:stretch}
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right;
  filter:grayscale(1) contrast(1.06) brightness(.62);transform:scale(1.06);
  animation:kenBurns 26s ease-in-out infinite alternate}
@keyframes kenBurns{
  from{transform:scale(1.06) translate3d(0,0,0)}
  to{transform:scale(1.14) translate3d(-1.6%,-1.2%,0)}
}
.hero-media-overlay{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,13,18,.97) 0%,rgba(10,13,18,.90) 32%,rgba(10,13,18,.62) 60%,rgba(10,13,18,.34) 100%),
             linear-gradient(180deg,rgba(10,13,18,.10),rgba(10,13,18,.60))}
.hero-light{position:absolute;z-index:1;left:-14%;top:-24%;width:78%;height:150%;
  background:radial-gradient(ellipse at center,rgba(205,169,111,.15),transparent 62%)}
.hero-orbit{position:absolute;z-index:1;border:1px solid var(--line-light);border-radius:50%;pointer-events:none}
.orbit-one{width:min(760px,88vw);aspect-ratio:1;left:6%;top:50%;transform:translateY(-50%);animation:spin 74s linear infinite}
.orbit-two{width:min(470px,58vw);aspect-ratio:1;left:2%;top:56%;transform:translateY(-50%);border-style:dashed;border-color:rgba(205,169,111,.20);animation:spinReverse 56s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
@keyframes spinReverse{to{transform:translateY(-50%) rotate(-360deg)}}

.hero-inner{
  position:relative;z-index:3;width:var(--container);margin-inline:auto;
  display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:start;
}
/* Thanh ray dọc — neo cấu trúc cho khối chữ */
.hero-rail{display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:14px;align-self:stretch}
.rail-line{flex:1;width:1px;background:linear-gradient(180deg,transparent,var(--line-light) 22%,var(--line-light) 78%,transparent)}
.rail-line:first-child{flex:0 0 64px;background:linear-gradient(180deg,transparent,var(--gold))}
.rail-mark{font-size:10px;letter-spacing:.28em;color:var(--gold);writing-mode:vertical-rl;text-orientation:mixed}

.hero-title{
  font-family:"Be Vietnam Pro",sans-serif;font-weight:700;
  font-size:clamp(37.2px,4.74vw,70.68px);line-height:1.15;letter-spacing:-.018em;
  text-transform:uppercase;max-width:14ch;margin:0 0 40px;
}
/* Mask theo TU — thong so lay tu Hartmann Capital + Gruppo Saida + Zypsy.
   DAY DAY HON DINH: dau nang tieng Viet nam duoi baseline. Truoc day nguoc (.14 dinh / .12 day). */
.title-line{display:block;overflow:hidden;padding:.20em .28em .26em;margin:-.20em -.28em -.26em}
.title-line>span{display:block}
/* Chan "TOAN" va "CAU" roi hai dong khi doi ngon ngu / breakpoint */
.title-line .w{white-space:nowrap}
.title-line .w{display:inline-block;font-style:inherit;will-change:transform}
/* Dong 2 hero — phuong an C: cung font display, chi doi mau. Bo serif nghieng (cong 38a). */
.title-serif{color:var(--gold-2);letter-spacing:-.022em;padding-left:clamp(30px,5vw,88px)}
.title-indent{padding-left:clamp(52px,9vw,150px)}

.hero-lower{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:end}
.hero-description{max-width:56ch;color:rgba(244,239,231,.76);font-size:clamp(13.95px,1.02vw,15.81px);line-height:1.82}
.hero-description strong{font-weight:500;color:var(--light)}

.circle-link,.contact-circle{
  display:grid;place-items:center;gap:6px;width:132px;height:132px;flex:0 0 auto;
  border:1px solid var(--line-light);border-radius:50%;text-align:center;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  transition:background var(--dur-long) var(--ease-out),color var(--dur-long) var(--ease-out),border-color var(--dur-long) var(--ease-out);
}
.circle-link:hover,.contact-circle:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.circle-link i,.contact-circle i{width:17px;height:17px}

.hero-marquee{position:absolute;bottom:0;left:0;right:0;z-index:3;
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  overflow:hidden;padding:15px 0;background:rgba(10,13,18,.72)}
.marquee-track{display:flex;align-items:center;gap:30px;width:max-content;animation:marquee 44s linear infinite}
.marquee-track span{font-size:11px;letter-spacing:.24em;color:var(--muted-light);white-space:nowrap;font-weight:400}
.marquee-track i{width:3px;height:3px;border-radius:50%;background:var(--gold);flex:0 0 auto}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ═══════════════ SPLIT STUDIO ═══════════════ */
.split-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:center}
.split-reverse .split-inner{direction:rtl}
.split-reverse .split-inner>*{direction:ltr}
.split-text{display:flex;flex-direction:column;align-items:flex-start;gap:26px;max-width:60ch}

/* Cột số liệu — kích thước lệch nhau, không phải card đồng dạng */
.figure-stack{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.figure{
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:28px 26px;min-height:180px;border:1px solid var(--line-dark);border-radius:16px;
  background:rgba(255,255,255,.42);
  transition:transform var(--dur-long) var(--ease-out),border-color var(--dur-long) var(--ease-out),background var(--dur-long) var(--ease-out);
}
.figure:hover{transform:translateY(-4px);border-color:rgba(205,169,111,.5);background:rgba(255,255,255,.7)}
.figure strong{font-family:"Be Vietnam Pro",sans-serif;font-size:clamp(33.48px,3.16vw,48.36px);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.figure strong sup{font-size:.42em;vertical-align:super;color:var(--gold);margin-left:2px}
.figure p{font-size:12.56px;line-height:1.55;color:var(--muted-dark)}
.figure-lg{grid-column:span 2;min-height:150px}
.figure-lg strong{font-size:clamp(52.08px,5.02vw,78.12px)}
.figure-mark strong{font-family:"Lora",Georgia,serif;color:var(--gold-ink);font-size:clamp(46.5px,4.28vw,66.96px)}
.figure-stack-4{grid-template-columns:1fr 1fr}
.figure-stack-4 .figure{min-height:158px}

.panel-pair{display:grid;gap:16px}
.panel{padding:32px 30px;border:1px solid var(--line-dark);border-radius:16px;background:rgba(255,255,255,.44)}
.panel>span{display:block;font-size:11.6px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-ink-3);margin-bottom:18px;font-weight:600}
.panel li{position:relative;padding-left:20px;font-size:13.49px;line-height:1.9;color:var(--muted-dark)}
.panel li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;background:var(--gold)}
.panel-dark{background:var(--ink);border-color:transparent;color:var(--light)}
.panel-dark>span{color:var(--gold)}
.panel-dark li{color:var(--muted-light)}

/* ═══════════════ PURPOSE · diptych tối, chữ serif, vạch dọc ngăn đôi ═══════════════ */
.purpose-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5.4vw,90px)}
/* Vạch dọc giữa hai khung — mảnh, mờ dần ở hai đầu */
.purpose-inner::before{
  content:"";position:absolute;left:50%;top:4px;bottom:4px;width:1px;
  background:linear-gradient(180deg,transparent,var(--line-light) 14%,var(--line-light) 86%,transparent);
}
.purpose-half{display:flex;flex-direction:column;gap:0;padding:0;background:none;border:0;border-radius:0}
/* Sứ mệnh lệch xuống — hai khung không đối xứng cứng */
.purpose-half.mission{margin-top:clamp(0px,8vw,104px);background:none;color:inherit;border:0}
.purpose-tag,.mission .purpose-tag{
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);margin-bottom:24px;
}
.purpose-half h3{
  font-family:"Lora",Georgia,serif;font-weight:600;
  font-size:clamp(21.39px,2vw,30.69px);line-height:1.44;letter-spacing:0;
  color:var(--light);max-width:24ch;text-wrap:pretty;   /* pretty +   = không còn chữ mồ côi */
  padding-bottom:26px;margin-bottom:26px;
  border-bottom:1px solid var(--line-light);
}
.purpose-half p,.mission p{font-size:13.49px;line-height:1.82;color:var(--muted-light);max-width:40ch}

/* ═══════════════ FEATURE STACK (hệ sinh thái) ═══════════════ */
.stack-inner{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(40px,6vw,96px);align-items:start}
.stack-pane{position:sticky;top:calc(var(--header) + 60px);display:flex;flex-direction:column;gap:38px}
.stack-counter{display:flex;align-items:center;gap:14px;font-family:"Be Vietnam Pro",sans-serif}
.stack-counter b{font-size:48.36px;font-weight:700;color:var(--gold);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stack-counter i{width:44px;height:1px;background:var(--line-light)}
.stack-counter span{font-size:13.95px;color:var(--muted-light);font-variant-numeric:tabular-nums}

.stack-list{display:flex;flex-direction:column;gap:20px}
.stack-item{
  display:grid;gap:0;border:1px solid var(--line-light);border-radius:20px;overflow:hidden;
  background:var(--ink-2);
  transition:border-color var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out);
;min-width:0}
.stack-item.is-active{border-color:rgba(205,169,111,.42)}
.stack-thumb{margin:0;overflow:hidden;aspect-ratio:16/9;background:var(--ink)}
.stack-thumb img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.72) contrast(1.06);
  transform:none;
  transition:transform 900ms var(--ease-out),filter 900ms var(--ease-out)}
.stack-item.is-active .stack-thumb img,.stack-item:hover .stack-thumb img{filter:grayscale(1) brightness(.95) contrast(1.04);transform:none}
.stack-body{padding:30px 32px 34px;display:flex;flex-direction:column;gap:12px;min-width:0}
.stack-kind{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--gold);font-weight:500}
.stack-body h3{font-family:"Be Vietnam Pro",sans-serif;font-size:clamp(19.53px,1.77vw,26.04px);font-weight:700;line-height:1.32;letter-spacing:-.02em}
.stack-body p{font-size:13.95px;line-height:1.78;color:var(--muted-light);max-width:52ch}

/* ═══════════════ VALUES (lưới không đều) ═══════════════ */
.values-inner{display:flex;flex-direction:column;gap:60px}
.values-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.value-item{
  display:flex;flex-direction:column;gap:12px;padding:32px 30px;min-height:210px;
  border:1px solid var(--line-dark);border-radius:18px;background:rgba(255,255,255,.40);
  transition:transform var(--dur-long) var(--ease-out),background var(--dur-long) var(--ease-out),border-color var(--dur-long) var(--ease-out);
}
.value-item:hover{transform:translateY(-5px);background:rgba(255,255,255,.72);border-color:rgba(205,169,111,.45)}
.value-item i{width:22px;height:22px;color:var(--gold-ink)}
.value-item h3{font-family:"Be Vietnam Pro",sans-serif;font-size:18.6px;font-weight:700;letter-spacing:-.015em;margin-top:auto}
.value-item p{font-size:13.49px;line-height:1.7;color:var(--muted-dark)}
.value-item.is-wide{grid-column:span 2;background:var(--ink);color:var(--light);border-color:transparent}
.value-item.is-wide i{color:var(--gold)}
.value-item.is-wide h3{font-size:24.18px}
.value-item.is-wide p{color:var(--muted-light);max-width:46ch}
.value-item.is-wide:hover{background:var(--ink-hover)}
/* "Trách nhiệm" trước đây đứng lẻ một mình ở hàng cuối (lưới 3 cột, 6 thẻ,
   thẻ đầu chiếm 2 cột -> 2 / 3 / 1). Cho nó chiếm TRỌN hàng cuối:
   khối mở bằng thẻ tối rộng, đóng bằng thẻ vàng rộng — cân và có chủ ý. */
.value-item.is-tall{
  grid-column:1 / -1;
  min-height:0;
  background:rgba(205,169,111,.15);border-color:rgba(205,169,111,.40);
  display:grid;grid-template-columns:auto minmax(0,16ch) minmax(0,1fr);
  align-items:center;gap:26px;padding:26px 30px;
}
.value-item.is-tall i{margin:0}
.value-item.is-tall h3{margin:0}
.value-item.is-tall p{max-width:none}
.value-item.is-tall p{color:var(--ink-soft)}
.value-item.is-tall i{color:var(--gold-ink-4)}

/* Dải ảnh tư liệu trong mỗi trụ cột — bấm để đổi ảnh lớn.
   Toàn bộ ảnh là tư liệu thật do LAD cung cấp. */
.stack-strip{
  display:flex;flex-wrap:nowrap;gap:7px;margin-top:20px;
  /* min-width:0 BAT BUOC: phan tu flex/grid mac dinh min-width:auto = rong
     bang tong cac thumbnail. Thieu dong nay thi dai anh nong ca the ra
     rong hon man hinh va chu ben trong bi cat (da xay ra o mobile). */
  min-width:0;max-width:100%;
  /* LUON MOT HANG. Man hep thi vuot ngang de tu vuot, khong bao gio xuong dong. */
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
  padding-bottom:2px;
}
.stack-strip::-webkit-scrollbar{display:none}
.stack-shot{scroll-snap-align:start}
.stack-shot{
  /* 16:9 dung bang ty le anh -> khong cat mat gi */
  width:76px;height:43px;padding:0;border:1px solid var(--line-light);border-radius:3px;
  overflow:hidden;background:none;cursor:pointer;line-height:0;
  transition:border-color var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out);
}
.stack-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) brightness(.62) contrast(1.06);
  transition:filter var(--dur-short) var(--ease-out);
}
.stack-shot:hover{transform:translateY(-2px);border-color:rgba(205,169,111,.45)}
.stack-shot:hover img{filter:grayscale(1) brightness(.92) contrast(1.06)}
.stack-shot.is-on{border-color:var(--gold)}
.stack-shot.is-on img{filter:grayscale(1) brightness(1) contrast(1.04)}
.stack-shot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:640px){.stack-shot{width:62px;height:35px}}

/* ═══════════════ MILESTONES · TƯỜNG ĐỐI TÁC ═══════════════ */
/* Bỏ timeline theo năm theo yêu cầu: "Chỉ cần ghi tên và logo những đối tác
   của mình thôi mà". Lưới tên đối tác, chừa sẵn chỗ thả logo sau. */
.milestones-inner{display:flex;flex-direction:column;gap:clamp(40px,5vh,64px)}
.milestones-head{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:end}
.milestones-intro{font-size:14.42px;line-height:1.82;color:var(--muted-light);max-width:52ch}

.partners{
  /* 11 doi tac. Luoi co dinh se de trong 1 o o hang duoi, nen dung flex:
     moi o co flex-basis 16% -> vua 6 o mot hang; hang duoi con 5 o thi tu
     gian ra chia deu het be ngang, khong con o trong. */
  display:flex;flex-wrap:wrap;
  gap:1px;background:var(--line-light);
  border:1px solid var(--line-light);margin:0;padding:0;list-style:none;
}
.partners li{flex:1 1 16%;min-width:0}
.partners li{
  background:var(--ink);min-height:128px;
  display:grid;place-items:center;padding:20px;text-align:center;
  transition:background var(--dur-short) var(--ease-out);
}
.partners li:hover{background:var(--ink-hover)}
.partners li img{
  max-width:min(172px,82%);max-height:78px;width:auto;height:auto;
  object-fit:contain;
  /* Logo về TRẮNG ĐƠN SẮC. Lý do: tường đối tác nền ink, mà phần lớn logo
     thương hiệu là màu tối -> để nguyên màu thì tàng hình (đã thử: Her World
     và Vinhomes gần như không thấy). brightness(0) dập về đen tuyền rồi
     invert(1) lật thành trắng, nên logo nào cũng hiện rõ và cả tường đồng
     nhất một chất — khớp với ảnh tư liệu cũng đang trắng đen. */
  filter:brightness(0) invert(1);
  opacity:.82;transition:opacity var(--dur-short) var(--ease-out);
}
.partners li:hover img{opacity:1}
.partners-note{
  font-size:12.09px;line-height:1.7;color:var(--muted-light);opacity:.72;
  margin:0;max-width:60ch;
}

/* ═══════════════ CAPABILITY · sơ đồ hệ thống ═══════════════ */
.capability{position:relative;overflow:hidden}
.capability-glow{position:absolute;top:-20%;right:-14%;width:56%;height:120%;
  background:radial-gradient(circle,rgba(205,169,111,.13),transparent 62%);pointer-events:none}
.capability-inner{position:relative;display:flex;flex-direction:column;gap:70px}
.system{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(44px,6vw,92px);align-items:center}
.system-diagram{position:relative;max-width:460px;margin-inline:auto;width:100%}
.system-diagram svg{width:100%;height:auto;overflow:visible}
.sys-ring{fill:none;stroke:var(--line-light);stroke-width:1}
.sys-ring-1{stroke:rgba(205,169,111,.42)}
.sys-ring-2{stroke-dasharray:3 8;animation:sysSpin 60s linear infinite;transform-origin:210px 210px}
.sys-ring-3{stroke-dasharray:2 14;animation:sysSpinRev 90s linear infinite;transform-origin:210px 210px}
@keyframes sysSpin{to{transform:rotate(360deg)}}
@keyframes sysSpinRev{to{transform:rotate(-360deg)}}
.sys-spokes line{stroke:var(--line-light);stroke-width:1;stroke-dasharray:2 6}
.sys-nodes circle{fill:var(--gold);opacity:.85}
.sys-nodes circle:nth-child(1){animation:nodePulse 4s var(--ease-io) infinite}
.sys-nodes circle:nth-child(2){animation:nodePulse 4s var(--ease-io) 1s infinite}
.sys-nodes circle:nth-child(3){animation:nodePulse 4s var(--ease-io) 2s infinite}
.sys-nodes circle:nth-child(4){animation:nodePulse 4s var(--ease-io) 3s infinite}
@keyframes nodePulse{0%,100%{opacity:.5;r:5}50%{opacity:1;r:8}}
.sys-labels text{fill:var(--muted-light);font-family:"Manrope",sans-serif;font-size:10px;letter-spacing:.2em;font-weight:400}
.sys-core{fill:var(--light);font-family:"Be Vietnam Pro",sans-serif;font-size:40.92px;font-weight:700;letter-spacing:-.02em}
.sys-core-sub{fill:var(--gold);font-family:"Manrope",sans-serif;font-size:9px;letter-spacing:.26em;font-weight:400}

.system-points{display:flex;flex-direction:column;counter-reset:pt}
.system-points li{
  position:relative;padding:26px 0 26px 60px;border-bottom:1px solid var(--line-light);
  counter-increment:pt;
}
.system-points li:first-child{border-top:1px solid var(--line-light)}
.system-points li::before{
  content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:28px;
  font-family:"Be Vietnam Pro",sans-serif;font-size:11.6px;font-weight:600;color:var(--gold);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;
}
.system-points h3{font-family:"Be Vietnam Pro",sans-serif;font-size:17.67px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px}
.system-points p{font-size:13.49px;line-height:1.78;color:var(--muted-light);max-width:52ch}

/* ═══════════════ ORG MARQUEE ═══════════════ */
.org-marquee{margin-top:80px;overflow:hidden;border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:17px 0}
.org-track{display:flex;gap:44px;width:max-content;animation:marquee 52s linear infinite}
.org-ban-sao{display:contents}   /* ban sao chi de chay lien mach */
.org-track span{font-size:11.6px;letter-spacing:.13em;color:var(--muted-dark);white-space:nowrap;text-transform:uppercase}

/* ═══════════════ CONTACT ═══════════════ */
.contact{position:relative;overflow:hidden;padding-bottom:56px}
.contact-art{position:absolute;right:-140px;top:70px;pointer-events:none;opacity:.5}
.contact-ring{width:540px;height:540px;border:1px solid var(--line-light);border-radius:50%}
.contact-word{position:absolute;inset:0;display:grid;place-items:center;font-family:"Lora",Georgia,serif;font-size:148.8px;font-style:italic;color:rgba(205,169,111,.09)}
.contact-inner{position:relative}
.contact-top{display:flex;justify-content:space-between;align-items:flex-end;gap:44px}
.contact-heading{font-family:"Be Vietnam Pro",sans-serif;font-size:clamp(26.97px,2.98vw,41.85px);font-weight:700;line-height:1.34;letter-spacing:-.025em;text-transform:uppercase}

.contact-divider{height:1px;background:var(--line-light);margin:76px 0 42px}
.contact-details{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.contact-block small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.contact-block p,.contact-block>a{margin:0;color:var(--muted-light);display:block;line-height:1.85;font-size:13.95px}
.contact-block>a{min-height:44px;display:flex;align-items:center;transition:color var(--dur-short) var(--ease-out)}
.contact-block>a:hover{color:var(--gold)}
.social-links a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--muted-light);transition:color var(--dur-short) var(--ease-out),gap var(--dur-short) var(--ease-out)}
.social-links a:hover{color:var(--gold);gap:12px}
.social-links i{width:14px;height:14px}

/* ═══════════════ FOOTER ═══════════════ */
.footer{background:var(--ink);border-top:1px solid var(--line-light);padding:30px 0 38px}
.footer-inner{width:var(--container);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;color:var(--muted-light);font-size:11.62px}
.footer-logo{width:150px}
.back-top{display:inline-flex;align-items:center;gap:9px;min-height:44px;text-transform:uppercase;letter-spacing:.11em;font-size:11px;transition:color var(--dur-short) var(--ease-out),gap var(--dur-short) var(--ease-out)}
.back-top:hover{color:var(--gold);gap:13px}
.back-top i{width:14px;height:14px}

/* ═══════════════ REVEAL · biến thể theo vai trò section ═══════════════ */
/* Không dùng một kiểu duy nhất cho mọi thứ — mỗi loại có chuyển động riêng */
[data-reveal]{opacity:0;will-change:opacity,transform}
[data-reveal="rise"]{transform:translateY(30px)}
[data-reveal="mask"]{clip-path:inset(0 0 100% 0);transform:none}
[data-reveal="slide-l"]{transform:translateX(-38px)}
[data-reveal="slide-r"]{transform:translateX(38px)}
[data-reveal="soft"]{transform:scale(.965);filter:blur(7px)}
[data-reveal].is-in{
  opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0);
  transition:opacity 760ms var(--ease-out),transform 860ms var(--ease-out),
             clip-path 900ms var(--ease-out),filter 700ms var(--ease-out);
  transition-delay:calc(var(--d,0) * 85ms);
}

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1180px){
  :root{--container:min(100vw - 56px,1220px)}
  .desktop-nav,.header-cta{display:none}
  .menu-toggle{display:block}
  .split-inner,.system,.stack-inner,.milestones-head{grid-template-columns:1fr;gap:48px}
  .split-reverse .split-inner{direction:ltr}
  .split-reverse .split-proof{order:2}
  .stack-pane{position:static}
  .values-list{grid-template-columns:repeat(2,1fr)}
  .value-item.is-tall{grid-column:1 / -1}
  .value-item.is-wide{grid-column:span 2}
  .purpose-inner{grid-template-columns:1fr;gap:44px}
  .purpose-inner::before{display:none}
  .purpose-half.mission{margin-top:0;padding-top:40px;border-top:1px solid var(--line-light)}
  .partners li{flex-basis:calc(50% - 1px)}   /* 2 o moi hang tren dien thoai */
  .contact-details{grid-template-columns:repeat(2,1fr)}
  .milestones-head{align-items:start}
}

@media (max-width:760px){
  :root{--container:min(100vw - 32px,1220px);--header:70px}
  .split,.purpose,.values,.milestones,.capability,.contact,.stack{padding:78.12px 0}
  .site-header{padding:0 16px}
  .brand-logo{width:84px}
  .cursor-glow{display:none}

  .hero{padding:calc(var(--header) + 56px) 0 96px;min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:0}
  .hero-rail{display:none}
  .hero-title{font-size:clamp(35.34px,9.77vw,52.08px);line-height:1.16;max-width:none;margin-bottom:30px}
  /* Bo mask duoi 991px: chu nho thi sai so 1px cua mask la mat dau */
  .title-line{overflow:visible;padding:0;margin:0}
  .title-serif,.title-indent{padding-left:0}
  .hero-lower{grid-template-columns:1fr;gap:34px;align-items:start}
  .circle-link{width:112px;height:112px}
  .hero-media img{object-position:64% center;filter:grayscale(1) contrast(1.06) brightness(.5);animation-duration:34s}

  .display-heading{font-size:clamp(24.18px,6.51vw,31.62px);line-height:1.26}
  .display-heading em{padding-left:13px;margin-top:9px}
  .contact-heading em{padding-left:15px;margin-top:10px}
  /* Cột hẹp trên mobile: nhỏ thêm để câu tiếng Việt không rớt chữ cuối xuống dòng riêng */
  .split-text .display-heading,
  .stack-pane .display-heading{font-size:clamp(20.46px,5.58vw,24.18px);line-height:1.3}
  .figure-stack,.figure-stack-4{grid-template-columns:1fr 1fr;gap:10px}
  .figure{padding:20px 18px;min-height:142px}
  .figure-lg{grid-column:span 2;min-height:126px}
  .figure p{font-size:11.62px}
  .values-list{grid-template-columns:1fr}
  .value-item,.value-item.is-wide{grid-column:span 1;min-height:0;padding:26px 24px}
  .value-item.is-tall{grid-column:1 / -1;grid-template-columns:1fr;gap:12px;padding:26px 24px}
  .system-diagram{max-width:320px}
  .system-points li{padding:22px 0 22px 46px}
  .contact-details{grid-template-columns:1fr;gap:26px}
  .contact-top{flex-direction:column;align-items:flex-start;gap:32px}
  .contact-circle{width:118px;height:118px}
  .contact-art{right:-230px;top:110px}
  .contact-word{font-size:102.3px}
  .contact-divider{margin:52px 0 32px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:18px}
  .footer-logo{width:128px}
  .org-marquee{margin-top:52px}
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  /* Vẫn phải hiện nội dung — không được để reveal kẹt ở opacity 0 */
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .page-loader{animation:none;opacity:0;visibility:hidden}
  .hero-media img{animation:none;transform:scale(1.06)}
}