/*!
 * WISeKey 2026 — base + typography
 * Bóc từ wisekey-web-redesign-master/index.html, giữ nguyên nội dung gốc.
 * Nguồn tham chiếu: component-library.html, WEBDEV_BRIEF.md
 */
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:127px}body{margin:0; background:var(--bg-1); color:var(--fg-1);
  font:400 var(--fs-body)/var(--lh-normal) var(--font-sans);
  overflow-x:clip; /* `clip` chứ không phải `hidden`: `hidden` biến body thành vùng cuộn riêng, và mọi `position:sticky` bên trong mất tác dụng — cột chọn lớp ở khối kiến trúc không dính được. `clip` chặn tràn ngang y hệt mà không tạo vùng cuộn. */ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}img,svg,canvas{max-width:100%; display:block}h1,h2,h3,h4,p,ul,ol,figure{margin:0}ul,ol{padding:0; list-style:none}a{color:var(--accent-text); text-decoration:none}button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}::selection{background:var(--red); color:#fff}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important}.rv{opacity:1!important; transform:none!important; clip-path:none!important}}/* ---------- Reveal system.  [LATITUDE] the kit limits scroll entrances to a
   fade; these add a small lift and a wipe for the rules. Still no parallax,
   no scroll-jacking, no bounce, and all of it off under reduced-motion. ---- */.js .rv{opacity:0; transform:translateY(14px);
  transition:opacity var(--dur-4) var(--ease), transform var(--dur-4) var(--ease)}.js .rv.in{opacity:1; transform:none}.rv-d1{transition-delay:60ms}.rv-d2{transition-delay:120ms}.rv-d3{transition-delay:180ms}.rv-d4{transition-delay:240ms}.rv-d5{transition-delay:300ms}/* ---------- Scroll progress ---------- */.prog{position:fixed; inset:0 0 auto 0; height:2px; z-index:200; background:transparent}.prog__bar{height:100%; width:0; background:var(--red); transition:width 80ms linear}/* ==========================================================================
   PRIMITIVES
   ========================================================================== */.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--s-4)}@media (min-width:768px){.wrap{padding-inline:var(--s-6)}}.skip{position:absolute; left:var(--s-4); top:-100px; z-index:300;
  background:var(--black); color:#fff; padding:var(--s-3) var(--s-5);
  border-radius:var(--r-md); font-weight:600; transition:top var(--dur-2) var(--ease)}.skip:focus{top:var(--s-3)}.vh{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}.eyebrow{font:600 var(--fs-eyebrow)/1.2 var(--font-mono);
  letter-spacing:var(--tk-eyebrow); text-transform:uppercase;
  color:var(--accent-text); margin:0 0 var(--s-4); display:flex; align-items:center; gap:var(--s-3)}.eyebrow::before{content:""; width:18px; height:1px; background:var(--red); flex:0 0 auto}
.eyebrow--flush{margin-bottom:0}
.eyebrow--dark{color:var(--red-300)}.eyebrow--dark::before{background:var(--red-400)}.eyebrow--plain::before{display:none}.mega-t{font:900 var(--fs-mega)/var(--lh-tight) var(--font-display); letter-spacing:var(--tk-mega)}.blk__t{font:800 var(--fs-h1)/1.08 var(--font-display); letter-spacing:var(--tk-mega)}.h2{font:800 var(--fs-h2)/var(--lh-snug) var(--font-display); letter-spacing:var(--tk-tight)}.wk-h4{font:600 var(--fs-h4)/var(--lh-snug) var(--font-display)}
.wk-h4--sp{margin-bottom:var(--s-4)}
.wk-h4--sp-s{margin-bottom:var(--s-3)}
.wk-h4--sp-l{margin-bottom:var(--s-5)}.lead{font-size:var(--fs-body-lg); line-height:var(--lh-relaxed); color:var(--fg-2)}
* + .lead{margin-top:var(--s-4)}
.lead--wide{max-width:78ch}.sm{font-size:var(--fs-body-sm); line-height:var(--lh-normal)}
.sec--dark .sm, .sec--void .sm, .wk-media .sm{color:var(--on-dark-2)}
.sm--sp{margin-top:var(--s-3)}
.sm--sp-l{margin-top:var(--s-4)}.cap{font-size:var(--fs-caption); line-height:var(--lh-normal); color:var(--fg-3)}
.cap--flush{margin:0}
.cap--sp{margin-top:var(--s-4)}
.cap--sp-l{margin-top:var(--s-6)}
.cap--sp-xs{margin-top:5px}.mono{font-family:var(--font-mono)}
.cf__v .mono, .mono--hi{color:#fff}.msr{max-width:64ch}.msr-s{max-width:50ch}.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}.sec{padding-block:var(--s-8)}@media (min-width:768px){.sec{padding-block:var(--s-9)}}@media (min-width:1080px){.sec{padding-block:var(--s-10)}}.sec--tight{padding-block:var(--s-7)}.sec--paper{background:var(--bg-2)}.sec--fog{background:var(--bg-3)}.sec--dark{background:var(--navy-900); color:var(--on-dark-1)}.sec--void{background:var(--void); color:var(--on-dark-1)}.sec--dark .h2, .sec--void .h2{color:#fff}
.sec--dark .wk-h4, .sec--void .wk-h4, .wk-media .wk-h4{color:#fff}
.wk-media .h2{color:#fff}
.wk-media .lead{color:var(--on-dark-2)}
.wk-media .cap{color:var(--on-dark-3)}.sec--dark .lead,.sec--void .lead{color:var(--on-dark-2)}.sec--dark .cap,.sec--void .cap{color:var(--on-dark-3)}.hr{border:0; height:1px; background:var(--border-subtle)}.hr--dark{background:rgba(255,255,255,.14)}
.hr--gap{margin-block:var(--s-9) var(--s-7)}
.i-flip{transform:rotate(180deg)}
.i-up{transform:rotate(-90deg)}
.sprite{position:absolute}.head{display:grid; gap:var(--s-5); margin-bottom:var(--s-8)}
.head--sp{margin-bottom:var(--s-5)}@media (min-width:1080px){.head{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s-8); align-items:end}}