/*!
 * WISeKey 2026 — componentkkkkkkk
 * 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
 */
/* ---------- Buttons ---------- */.wk-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-5); min-height:46px; border-radius:var(--r-md);
  font:600 var(--fs-body)/1 var(--font-sans); border:1px solid transparent;
  position:relative; overflow:hidden;
  transition:background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease)}.wk-btn--lg{padding:var(--s-4) var(--s-6); min-height:56px; font-size:var(--fs-body-lg)}.wk-btn--p{background:var(--red-600); color:#fff}.wk-btn--p:hover{background:var(--red-700)}.wk-btn--p:active{background:var(--red-800)}.wk-btn--g{border-color:var(--border-control); color:var(--fg-1); background:transparent}.wk-btn--g:hover{background:var(--bg-3)}.wk-btn--w{background:#fff; color:var(--black)}.wk-btn--w:hover{background:var(--fog)}.wk-btn--o{border-color:rgba(255,255,255,.45); color:#fff}.wk-btn--o:hover{background:rgba(255,255,255,.10); border-color:#fff}.wk-btn__ic{transition:transform var(--dur-2) var(--ease)}.wk-btn:hover .wk-btn__ic{transform:translateX(3px)}.lnk{display:inline-flex; align-items:center; gap:var(--s-2); min-height:32px;
  padding-block:var(--s-1); font-weight:600; color:var(--accent-text)}.lnk:hover{color:var(--red-800); text-decoration:underline; text-underline-offset:3px}.lnk svg, .wk-btn svg, .q__a svg, .mnb svg{flex:0 0 auto}
.lnk svg{transition:transform var(--dur-2) var(--ease)}.lnk:hover svg{transform:translateX(4px)}.lnk--dark{color:var(--red-300)}.lnk--dark:hover{color:#fff}
.lnks{display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-6)}
.lnks--tight{gap:var(--s-3)}
.lnks--mid{gap:var(--s-4); align-items:center}
.lnks--rule{padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.14)}
.lnk--bare{min-height:0}
.lnk--end{margin-left:auto}.tag{display:inline-block; font:600 10px/1.4 var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; padding:5px 9px; border-radius:var(--r-sm); white-space:nowrap}.tag--s{background:var(--red-600); color:#fff}.tag--o{border:1px solid var(--red-600); color:var(--red-600)}.tag--n{background:var(--fog); color:var(--fg-2)}.tag--d{background:var(--black); color:#fff}/* ---------- Cards.  [LATITUDE] adds a pointer-tracked highlight and a
   corner tick; still square-cornered (4px), 1px border, realistic shadow. -- */.wk-card{position:relative; background:var(--bg-1); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); padding:var(--s-5); display:flex; flex-direction:column;
  gap:var(--s-3); overflow:hidden;
  transition:box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease)}.wk-card--i{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14)}.wk-card--hov::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(237,28,36,.10), transparent 70%);
  transition:opacity var(--dur-2) var(--ease)}.wk-card--hov:hover::after{opacity:1}.wk-card--hov:hover{border-color:var(--steel); box-shadow:var(--shadow-2); transform:translateY(-2px)}.wk-card--i.card--hov:hover{border-color:rgba(255,255,255,.34); box-shadow:none}.wk-card__tick{position:absolute; top:0; right:0; width:0; height:1px; background:var(--red);
  transition:width var(--dur-3) var(--ease)}.wk-card--hov:hover .wk-card__tick{width:38px}.wk-card__t{font:700 var(--fs-h4)/var(--lh-snug) var(--font-display); letter-spacing:var(--tk-tight)}.wk-card__link{color:inherit; text-decoration:none}.wk-card__link::after{content:""; position:absolute; inset:0; z-index:1}.wk-card--hov:hover .wk-card__link{color:var(--accent-text)}.wk-card--i.card--hov:hover .wk-card__link{color:#fff}.wk-card__by{position:relative; z-index:2}.wk-card__by a{color:inherit; text-decoration:underline; text-decoration-color:var(--mist);
  text-underline-offset:2px}.wk-card__by a:hover{color:var(--accent-text); text-decoration-color:currentColor}.wk-card--i .wk-card__by a:hover{color:#fff}.wk-card .lnk{position:relative; z-index:0}.wk-card__b{font-size:var(--fs-body-sm); color:var(--fg-2); flex:1}.wk-card--i .wk-card__b{color:var(--on-dark-2)}.wk-grid{display:grid; gap:var(--s-4)}
/* Intrinsic grids. repeat(auto-fit, minmax(max(<min item>, (100% - gaps)/<max cols>), 1fr))
   caps the column count and lets the width decide the rest. No media queries. */@media (min-width:768px){.wk-grid--3{grid-template-columns:repeat(auto-fit,minmax(max(300px,(100% - 32px)/3),1fr))}}/* ---------- Placeholder blocks (kit §10 convention) ---------- *//* ==========================================================================
   BANNER / UTILITY / HEADER / MEGA
   ========================================================================== */.proto{background:var(--red-050); border-bottom:1px solid #F6C3C5; color:var(--red-800)}.proto__in{display:flex; gap:var(--s-3); align-items:center; padding-block:var(--s-2);
  min-height:32px; font:400 11px/1.4 var(--font-mono)}.proto b{font-weight:600}.util{background:var(--void); color:var(--on-dark-2); border-bottom:1px solid rgba(255,255,255,.08)}.util__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:38px}.tks{display:flex; align-items:center; gap:var(--s-5)}.tk{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap;
  font:500 11px/1 var(--font-mono); letter-spacing:.03em}.tk__s{color:#fff}.tk__v{color:var(--on-dark-3)}.tk__d{font-size:9px; color:var(--on-dark-3)}.tk__d--up{color:#5FD08C}.tk__d--dn{color:var(--red-300)}.tk__d--flat{color:var(--on-dark-3)}.tks{overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}.tks::-webkit-scrollbar{display:none}.util__nav{display:none; align-items:center; gap:var(--s-4)}@media (min-width:1080px){.util__nav{display:flex}}.util__a{color:var(--on-dark-2); font:500 11px/1 var(--font-mono); letter-spacing:.06em;
  text-transform:uppercase; padding:var(--s-2) 0; min-height:32px; display:inline-flex; align-items:center}.util__a:hover{color:#fff}.hdr{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--border-subtle);
  transition:box-shadow var(--dur-2) var(--ease)}.hdr[data-stuck="true"]{box-shadow:var(--shadow-2)}.hdr__in{display:flex; align-items:center; gap:var(--s-4); min-height:72px}.hdr__logo{display:inline-flex; align-items:center; padding:var(--s-2) 0; flex:0 0 auto}.hdr__logo svg{width:152px; height:auto; color:var(--red)}@media (min-width:768px){.hdr__logo svg{width:176px}}.hdr__sp{flex:1 1 auto}.hdr__act{display:flex; align-items:center; gap:var(--s-2); flex:0 0 auto}.ib{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:var(--r-md); color:var(--fg-2); transition:background-color var(--dur-1) var(--ease)}.ib:hover{background:var(--bg-3); color:var(--fg-1)}.hdr__cta{display:none}@media (min-width:1080px){.hdr__cta{display:inline-flex}}.wk-nav{display:none}@media (min-width:1080px){.wk-nav{display:block}}.wk-nav__ul{display:flex; align-items:center; gap:2px}.wk-nav__b{display:inline-flex; align-items:center; gap:6px; padding:var(--s-3) var(--s-4);
  min-height:44px; border-radius:var(--r-md); font:600 var(--fs-body-sm)/1 var(--font-sans);
  color:var(--fg-1); position:relative;
  transition:color var(--dur-1) var(--ease)}.wk-nav__b::after{content:""; position:absolute; left:var(--s-4); right:var(--s-4); bottom:6px;
  height:1.5px; background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease)}.wk-nav__b:hover::after,.wk-nav__b[aria-expanded="true"]::after{transform:scaleX(1)}.wk-nav__b[aria-expanded="true"]{color:var(--accent-text)}.wk-nav__cv{color:var(--fg-3); flex:0 0 auto;
  transition:transform var(--dur-2) var(--ease)}.wk-nav__b[aria-expanded="true"] .wk-nav__cv{transform:rotate(180deg); color:var(--accent-text)}.mega{position:absolute; left:0; right:0; top:100%; background:var(--bg-1);
  border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-3);
  padding-block:var(--s-7) var(--s-6); display:none}.mega[data-open="true"]{display:block; animation:megaIn var(--dur-2) var(--ease) both}@keyframes megaIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}.mega__g{display:grid; gap:var(--s-6) var(--s-7); grid-template-columns:repeat(4,minmax(0,1fr))}.mega__ct{font:600 var(--fs-caption)/1.2 var(--font-mono); letter-spacing:var(--tk-eyebrow);
  text-transform:uppercase; color:var(--fg-3); margin:0 0 var(--s-4);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--border-subtle)}.mega__l{display:grid; gap:2px}.mega__a{display:block; padding:var(--s-2) var(--s-3); margin-inline:calc(var(--s-3) * -1);
  border-radius:var(--r-md); color:var(--fg-1); font-size:var(--fs-body-sm);
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease)}.mega__a:hover{background:var(--bg-3); color:var(--accent-text)}.mega__a i{display:block; font:400 11px/1.4 var(--font-mono); font-style:normal;
  color:var(--fg-3); margin-top:2px}.mega__f{background:var(--navy-900); color:#fff; border-radius:var(--r-md);
  padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3);
  position:relative; overflow:hidden}.mega__f::before{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(237,28,36,.22), transparent 60%)}.mega__f > *{position:relative}.mega__f p{color:var(--on-dark-2); font-size:var(--fs-body-sm)}.mega__foot{display:flex; flex-wrap:wrap; gap:var(--s-5); align-items:center;
  margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--border-subtle)}.brg{display:inline-flex}@media (min-width:1080px){.brg{display:none}}.dr{position:fixed; inset:0; z-index:150; display:none}.dr[data-open="true"]{display:block}.dr__sc{position:absolute; inset:0; background:rgba(6,13,24,.6);
  animation:fade var(--dur-2) var(--ease) both}@keyframes fade{from{opacity:0}to{opacity:1}}.dr__p{position:absolute; inset:0 0 0 auto; width:min(440px,100%); background:var(--bg-1);
  display:flex; flex-direction:column; overflow-y:auto;
  animation:slide var(--dur-3) var(--ease) both}@keyframes slide{from{transform:translateX(100%)}to{transform:none}}.dr__h{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4); border-bottom:1px solid var(--border-subtle);
  position:sticky; top:0; background:var(--bg-1); z-index:2}.dr__h svg.lg{width:140px; color:var(--red)}.dr__b{padding:var(--s-4) var(--s-4) var(--s-9)}.ac{border-bottom:1px solid var(--border-subtle)}.ac__b{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  width:100%; padding:var(--s-4) 0; min-height:58px; text-align:left;
  font:700 var(--fs-h4)/1.2 var(--font-display); color:var(--fg-1)}.ac__b[aria-expanded="true"]{color:var(--accent-text)}.ac__b .wk-nav__cv{transition:transform var(--dur-2) var(--ease)}.ac__b[aria-expanded="true"] .wk-nav__cv{transform:rotate(180deg)}.ac__p{display:none; padding-bottom:var(--s-4)}.ac__p[data-open="true"]{display:block}.ac__g{margin-bottom:var(--s-5)}.ac__gt{font:600 var(--fs-caption)/1.2 var(--font-mono); letter-spacing:var(--tk-eyebrow);
  text-transform:uppercase; color:var(--fg-3); margin:0 0 var(--s-2)}.ac__a{display:block; padding:var(--s-3) 0; min-height:46px; color:var(--fg-1); font-size:var(--fs-body)}.ac__a:hover{color:var(--accent-text)}.dr__cta{display:grid; gap:var(--s-3); margin-top:var(--s-6)}/* ==========================================================================
   HERO — full-bleed dark with a live canvas instrument.
   [LATITUDE] The kit forbids gradients and limits motion. This hero uses a
   radial depth wash and an animated canvas because the brief asks for a
   modern deep-tech edge and a "wow" moment. It is not decoration: the
   instrument literally diagrams the proposition — a central Root of Trust
   with silicon / identity / network rings attesting back to it. Frozen to a
   composed static frame under prefers-reduced-motion.
   ========================================================================== */.wk-hero{position:relative; background:var(--void); color:#fff; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10)}.wk-hero__wash{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 78% 34%, rgba(21,50,92,.55), transparent 62%),
    radial-gradient(46% 42% at 82% 40%, rgba(237,28,36,.16), transparent 66%),
    linear-gradient(180deg, rgba(6,13,24,0) 55%, rgba(6,13,24,.85) 100%)}.wk-hero__grid{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 100%)}.wk-hero__in{position:relative; z-index:2; padding-block:var(--s-8) var(--s-7)}@media (min-width:768px){.wk-hero__in{padding-block:var(--s-9) var(--s-8)}}@media (min-width:1080px){.wk-hero__in{padding-block:var(--s-10) var(--s-9)}}.wk-hero__cols{display:grid; gap:var(--s-7)}@media (min-width:1080px){.wk-hero__cols{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:var(--s-8); align-items:center}}.wk-hero__t{margin:0 0 var(--s-5); max-width:19ch}.wk-hero__t{color:#fff}.wk-hero__t .hi{color:var(--red);
  /* 4.38:1 against #060D18 -> large display text only, 3:1 bar */ }.wk-hero__lead{color:var(--on-dark-2); font-size:var(--fs-body-lg);
  line-height:var(--lh-relaxed); max-width:56ch}.wk-hero__cta{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6)}.wk-hero__cta .wk-btn{flex:1 1 auto; min-width:210px}@media (min-width:768px){.wk-hero__cta .wk-btn{flex:0 0 auto}}.wk-hero__chips{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-7);
  padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.14)}.chip{display:inline-flex; align-items:center; gap:var(--s-2);
  font:400 11px/1.3 var(--font-mono); color:var(--on-dark-2); letter-spacing:.02em}.chip svg{color:var(--red-400); flex:0 0 auto}/* --- the instrument --- *//* ==========================================================================
   STAT BAND
   ========================================================================== */.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(max(216px,(100% - 32px)/3),1fr))}.st{padding:var(--s-5) var(--s-4) var(--s-5) 0; border-top:2px solid var(--ink);
  position:relative}@media (min-width:1080px){.stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .st{padding-right:var(--s-6)}}.st__n{font:800 clamp(34px,4.6vw,56px)/1 var(--font-display); letter-spacing:-.03em;
  color:var(--red)}/* large text -> 3:1 bar, 4.38:1 passes */.st__l{font-size:var(--fs-body-sm); color:var(--fg-2); margin-top:var(--s-3); line-height:1.35}.st__m{font:400 10px/1.4 var(--font-mono); color:var(--fg-3); margin-top:var(--s-2);
  letter-spacing:.04em}.st__bar{position:absolute; left:0; top:-2px; height:2px; width:100%; background:var(--red);
  transition:width var(--dur-4) var(--ease-io)}.js .st__bar{width:0}.js .st.in .st__bar{width:100%}/* ==========================================================================
   ARCHITECTURE — sticky stack diagram, scroll-synced to the content blocks.
   [LATITUDE] scroll-driven active state. Not parallax and not scroll-jacking:
   the page scrolls normally, only the diagram's highlight follows. Clicking a
   plate is an equivalent non-scroll route for keyboard and reduced-motion.
   ========================================================================== */.arch{display:grid; gap:var(--s-7)}@media (min-width:1080px){.arch{grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:var(--s-9); align-items:start}}.arch__rail{position:relative}.stack{display:grid; gap:var(--s-2)}.plate{display:flex; align-items:center; gap:var(--s-4); width:100%; text-align:left;
  padding:var(--s-4); border:1px solid var(--border-subtle); border-radius:var(--r-md);
  background:var(--bg-1); position:relative; overflow:hidden;
  transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease)}.plate:hover{border-color:var(--steel)}.plate__ix{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform var(--dur-3) var(--ease)}.plate[aria-current="true"]{border-color:var(--ink); background:var(--bg-1);
  box-shadow:var(--shadow-2); transform:translateX(4px)}.plate[aria-current="true"] .plate__ix{transform:scaleY(1)}.plate__ic{flex:0 0 auto; width:42px; height:42px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--fog); color:var(--fg-2); transition:all var(--dur-2) var(--ease)}.plate[aria-current="true"] .plate__ic{background:var(--red-050); color:var(--red-600)}.plate__tx{min-width:0; display:block}.plate__k{display:block; font:600 10px/1.2 var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3)}.plate__n{display:block; font:700 var(--fs-h4)/1.2 var(--font-display);
  letter-spacing:var(--tk-tight); margin-top:3px}.plate__s{display:block; font:400 11px/1.4 var(--font-mono); color:var(--fg-3); margin-top:4px}.plate--anchor{background:var(--navy-900); border-color:var(--navy-2); color:#fff}.plate--anchor .plate__k{color:var(--red-300)}
.plate--anchor .plate__n{color:#fff}.plate--anchor .plate__s{color:var(--on-dark-3)}.plate--anchor .plate__ic{background:rgba(237,28,36,.22); color:#fff}.plate--anchor:hover{border-color:var(--red-400)}
.plate__go{margin-left:auto; color:var(--red-300)}.arch__blocks{display:grid; gap:var(--s-8)}.blk{scroll-margin-top:0}.blk__h{display:flex; align-items:baseline; gap:var(--s-4); margin-bottom:var(--s-4)}.blk__ix{font:500 var(--fs-caption)/1 var(--font-mono); color:var(--fg-3); letter-spacing:.1em}.blk__specs{display:grid; gap:var(--s-3); margin-top:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(max(196px,(100% - 12px)/2),1fr))}.spec{border:1px solid var(--border-subtle); border-radius:var(--r-md);
  padding:var(--s-4); background:var(--bg-1)}.spec__k{font:400 10px/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-3)}.spec__v{font:700 var(--fs-body)/1.25 var(--font-display); margin-top:6px; letter-spacing:var(--tk-tight)}.bul{display:grid; gap:var(--s-2); margin-top:var(--s-4)}.bul li{display:flex; gap:var(--s-3); font-size:var(--fs-body-sm); color:var(--fg-2)}.bul svg{flex:0 0 auto; color:var(--red-600); margin-top:3px}.blk__by{margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--border-subtle);
  /* placed after .blk__specs / .blk__by */
  font-size:var(--fs-body-sm); color:var(--fg-2); line-height:var(--lh-normal)}.blk__by a{font-weight:600}.wk-card__by{margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--border-subtle);
  font:400 10px/1.4 var(--font-mono); color:var(--fg-3); letter-spacing:.04em}.wk-card__by b{color:var(--fg-2); font-weight:500}.wk-card--i .wk-card__by{border-top-color:rgba(255,255,255,.14); color:var(--on-dark-3)}
.wk-card--i{background:var(--navy-900); border-color:var(--navy-2)}
.wk-card--i .wk-card__t, .wk-card--i .wk-card__t .wk-card__link{color:#fff}.wk-card--i .wk-card__by b{color:var(--on-dark-2)}/* --- Ground-track plot: SVG graticule with animated satellite passes.
   Illustrative orbital geometry, not a data claim. --- */@keyframes gt{0%{stroke-dashoffset:var(--len)}55%{stroke-dashoffset:0}
  75%{stroke-dashoffset:0; opacity:1}100%{stroke-dashoffset:0; opacity:0}}/* ==========================================================================
   CERTIFICATE CHAIN VISUALISER
   ========================================================================== *//* ==========================================================================
   POST-QUANTUM TIMELINE
   ========================================================================== */.tl{position:relative; margin-top:var(--s-5); padding:0 0 0 30px}
.tl::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px;
  background:rgba(255,255,255,.20)}.tl__items{display:grid; grid-template-columns:1fr; gap:var(--s-6)}.tli{position:relative}.tli::before{content:""; position:absolute; left:-30px; top:5px; width:11px; height:11px;
  border-radius:50%; background:var(--navy-900); border:1.5px solid rgba(255,255,255,.34)}.tli--done::before{background:var(--red); border-color:var(--red)}.tli__y{font:600 var(--fs-h4)/1.1 var(--font-display); color:#fff; letter-spacing:var(--tk-tight)}.tli__t{font:400 var(--fs-body-sm)/var(--lh-normal) var(--font-sans); color:var(--on-dark-2); margin-top:6px}.tli__n{font:400 10px/1.4 var(--font-mono); color:var(--on-dark-3); margin-top:4px}/* ==========================================================================
   SOLUTION TABS
   ========================================================================== */.tabs{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-6);
  border-bottom:1px solid var(--border-subtle)}.tab{padding:var(--s-3) var(--s-4); min-height:46px; font:600 var(--fs-body-sm)/1 var(--font-sans);
  color:var(--fg-3); position:relative; display:inline-flex; align-items:center; gap:var(--s-2)}.tab:hover{color:var(--fg-1)}.tab[aria-selected="true"]{color:var(--fg-1)}.tab::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:center;
  transition:transform var(--dur-2) var(--ease)}.tab[aria-selected="true"]::after{transform:scaleX(1)}.tab__c{font:400 10px/1 var(--font-mono); color:var(--fg-3)}.panel[hidden]{display:none}.panel{animation:pIn var(--dur-3) var(--ease) both}@keyframes pIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}@media (prefers-reduced-motion:reduce){.panel{animation:none}}/* ==========================================================================
   GROUP — interactive structure
   ========================================================================== */.grp{display:grid; gap:var(--s-5)}.grp__p{border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-1);
  box-shadow:var(--shadow-1); padding:var(--s-5); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--s-4) var(--s-5)}.grp__p svg.lg{width:154px; color:var(--red)}.grp__pm{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-left:auto}.grp__spine{height:var(--s-5); width:1px; background:var(--steel); margin-inline:auto; display:none}@media (min-width:1080px){.grp__spine{display:block}}.grp__body{display:grid; gap:var(--s-4)}@media (min-width:1080px){.grp__body{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start}}.ents{display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(max(190px,(100% - 24px)/3),1fr))}.ent{text-align:left; width:100%; padding:var(--s-4); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); background:var(--bg-1); position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:var(--s-2); min-height:132px;
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease)}.ent:hover{border-color:var(--steel); box-shadow:var(--shadow-2); transform:translateY(-2px)}.ent[aria-pressed="true"]{border-color:var(--ink); box-shadow:var(--shadow-2)}.ent[aria-pressed="true"]::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--red)}.ent__n{font:800 var(--fs-body)/1.15 var(--font-display); letter-spacing:var(--tk-tight)}.ent__k{font:400 10px/1.3 var(--font-mono); color:var(--fg-3); letter-spacing:.05em}.ent__f{margin-top:auto; display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center}.det{border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-2);
  padding:var(--s-5); position:sticky; top:127px}.det__n{font:800 var(--fs-h3)/1.15 var(--font-display); letter-spacing:var(--tk-tight);
  margin-top:var(--s-2)}.det__w{font-size:var(--fs-body-sm); color:var(--fg-2); margin-top:var(--s-3)}.det__rows{margin-top:var(--s-4); display:grid; gap:0}.det__r{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s-3);
  padding:var(--s-3) 0; border-top:1px solid var(--border-subtle); font-size:var(--fs-caption)}.det__rk{font:400 10px/1.5 var(--font-mono); color:var(--fg-3); text-transform:uppercase; letter-spacing:.06em}.det__rv{color:var(--fg-1); line-height:1.5}.det__rv .mono{font-size:11px; color:var(--fg-2)}/* ---------- Accreditations, logos ---------- */.accr{display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(max(248px,(100% - 36px)/4),1fr))}.ac2{border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  background:rgba(255,255,255,.03); padding:var(--s-4); display:flex; gap:var(--s-3); align-items:flex-start}.ac2__m{flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; color:var(--on-dark-2)}.ac2__n{font:600 var(--fs-body-sm)/1.35 var(--font-sans); color:#fff}.ac2__b{font:400 var(--fs-caption)/1.45 var(--font-sans); color:var(--on-dark-2); margin-top:4px}.logos{display:grid; grid-template-columns:repeat(auto-fit,minmax(max(148px,100%/5),1fr));
  border:1px solid var(--border-subtle); border-radius:var(--r-md); overflow:hidden}.logos__c{min-height:96px; display:flex; align-items:center; justify-content:center;
  padding:var(--s-4); border-right:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle); background:var(--bg-1);
  transition:background-color var(--dur-2) var(--ease)}.logos__c:hover{background:var(--bg-2)}.logos__n{font:600 var(--fs-body-sm)/1.2 var(--font-sans); color:var(--fg-3); text-align:center}
.logos__n--sm{font:400 10px/1.2 var(--font-sans); color:var(--fg-3)}.logos__c:hover .logos__n{color:var(--fg-1)}/* ---------- Investors ---------- */.ir{display:grid; gap:var(--s-7)}@media (min-width:1080px){.ir{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s-9)}}.qs{display:grid; border-top:1px solid rgba(255,255,255,.14)}.q{display:grid; gap:var(--s-1) var(--s-5); padding:var(--s-4) 0;
  border-bottom:1px solid rgba(255,255,255,.14); align-items:baseline}
.qs--sp{margin-top:var(--s-6)}@media (min-width:768px){.q{grid-template-columns:92px minmax(0,1fr) auto}}.q__e{font:400 10px/1.3 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-3)}.q__s{font:800 var(--fs-h4)/1.1 var(--font-display); color:#fff; letter-spacing:var(--tk-tight)}.q__w{font-size:var(--fs-body-sm); line-height:var(--lh-normal); color:#fff; font-weight:600}.q__a{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font:600 var(--fs-caption)/1 var(--font-sans); color:var(--red-300); min-height:32px}.q__a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}.q__a svg{transition:transform var(--dur-2) var(--ease)}.q__a:hover svg{transform:translateX(3px)}.q__e{white-space:normal}.q__p{font:400 var(--fs-body-sm)/1.3 var(--font-mono); color:var(--on-dark-2); margin-top:var(--s-2)}.q__p b{color:#fff; font-weight:600; font-size:var(--fs-body)}.q__c{display:block; margin-top:4px; font-size:11px}.q__c--up{color:#5FD08C}.q__c--dn{color:var(--red-300)}.q__c--flat{color:var(--on-dark-3)}.irl{display:grid}.irr{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-4);
  padding:var(--s-4) 0; border-bottom:1px solid rgba(255,255,255,.12)}
.irr--last{border-bottom:0}.irr__k{font:400 10px/1.3 var(--font-mono); color:var(--on-dark-3); flex:0 0 auto;
  min-width:88px; text-transform:uppercase; letter-spacing:.07em}.irr__t{font-weight:600; color:#fff; font-size:var(--fs-body-sm); flex:1 1 220px}/* ---------- News ---------- */.news{display:grid; border-top:1px solid var(--border-subtle)}.ni{display:grid; gap:var(--s-2); padding-block:var(--s-5);
  border-bottom:1px solid var(--border-subtle); position:relative;
  transition:background-color var(--dur-2) var(--ease)}@media (min-width:1080px){.ni{grid-template-columns:44px 120px minmax(0,1fr) auto; gap:var(--s-5); align-items:baseline}}.ni:hover{background:var(--bg-2)}.ni__ix{font:500 10px/1.4 var(--font-mono); color:var(--fg-3); letter-spacing:.08em}.ni:hover .ni__ix{color:var(--red-600)}.ni__d{font:400 var(--fs-caption)/1.4 var(--font-mono); color:var(--fg-3); white-space:nowrap}.ni__t{font:600 var(--fs-body)/var(--lh-snug) var(--font-sans); color:var(--fg-1)}.ni:hover .ni__t{color:var(--accent-text)}.ni__g{justify-self:start}.ni__lk{color:inherit}.ni__lk::after{content:""; position:absolute; inset:0}.ni__lg{position:relative; z-index:1; display:flex; align-items:center; gap:8px; margin-block-start:var(--s-3)}.ni__lg b{font:600 var(--fs-caption)/1 var(--font-sans); color:var(--fg-2)}.ni__lg a{display:grid; place-items:center; width:22px; height:22px; overflow:hidden; border-radius:50%; background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--border-subtle); transition:transform var(--dur-2) var(--ease)}.ni__lg a:hover{transform:scale(1.12)}.ni__lg img{width:100%!important; height:auto!important}/* ---------- Conversion ---------- */.conv{display:grid; gap:var(--s-7)}@media (min-width:1080px){.conv{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--s-8)}}.form{border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-1);
  box-shadow:var(--shadow-2); padding:var(--s-5)}@media (min-width:768px){.form{padding:var(--s-7)}}.fg{display:grid; gap:var(--s-4)}
.fg--2{grid-template-columns:repeat(auto-fit,minmax(max(216px,(100% - 16px)/2),1fr))}/* `align-content:start` không phải để đẹp. Hai ô cạnh nhau nằm chung một hàng
   lưới, nên khi một bên mọc thêm dòng lỗi thì cả hàng cao lên, và ô bên kia bị
   kéo giãn theo — đo được ô Country phình từ 46px lên 62px trong khi ô Email
   vẫn 46px. Xếp các dòng lên đầu thì mỗi ô giữ đúng chiều cao của nó. */
.fld{display:grid; gap:var(--s-2); align-content:start}
fieldset.fld{border:0; padding:0; margin:0}
legend.fld__l{padding:0; margin-bottom:var(--s-2)}.fld__l{font:600 10px/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2)}.fld__l i{color:var(--red-600); font-style:normal}.fld input,.fld select,.fld textarea{width:100%; font:400 var(--fs-body-sm)/1.4 var(--font-sans);
  color:var(--fg-1); background:var(--bg-1); border:1px solid var(--border-control);
  border-radius:var(--r-md); padding:var(--s-3); min-height:46px;
  transition:border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease)}.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--red-600)}.fld textarea{min-height:110px; resize:vertical}.fld ::placeholder{color:var(--fg-3)}.fld__h{font-size:var(--fs-caption); color:var(--fg-3)}.fchk{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:var(--s-3)}.fchk input{width:24px; height:24px; min-height:24px; margin:1px 0 0; accent-color:var(--red-600)}.fchk label{font-size:var(--fs-body-sm); color:var(--fg-2)}.seg{display:grid; gap:var(--s-2); grid-template-columns:repeat(auto-fit,minmax(max(196px,(100% - 8px)/2),1fr))}.seg__o{position:relative}.seg__o input{position:absolute; opacity:0; width:1px; height:1px}.seg__o span{display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); min-height:52px; border:1px solid var(--border-control); border-radius:var(--r-md); font:600 var(--fs-body-sm)/1.25 var(--font-sans); color:var(--fg-1); cursor:pointer; transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease)}.seg__o span svg{flex:0 0 auto; color:var(--fg-3)}.seg__o:hover span{background:var(--bg-3)}.seg__o input:checked + span{border-color:var(--red-600); background:var(--red-050)}.seg__o input:checked + span svg{color:var(--red-600)}.seg__o input:focus-visible + span{outline:var(--focus-ring); outline-offset:var(--focus-offset)}.wk-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}.form__msg{margin-block-start:var(--s-4); padding:var(--s-3) var(--s-4); border-radius:var(--r-md); font:500 var(--fs-body-sm)/1.4 var(--font-sans)}.form__msg[data-state="ok"]{background:#EAF6EF; color:var(--fg-1); border:1px solid var(--success)}.form__msg[data-state="err"]{background:var(--red-050); color:var(--danger); border:1px solid var(--danger)}
/* Đang gửi — không phải lỗi mà cũng chưa xong, nên để nhạt hơn cả hai. */
.form__msg[data-state="busy"]{background:var(--bg-2); color:var(--fg-2); border:1px solid var(--border-subtle)}.fld--err input,.fld--err textarea,.fld--err select{border-color:var(--red-600)}
/* Câu lỗi ngay dưới ô. Chỉ đổi màu viền là chưa đủ: người không phân biệt được
   màu sẽ thấy ô trông y như bình thường, và viền cũng không nói ô đó sai vì lý
   do gì — thiếu, hay sai định dạng.
   `grid-column` là bắt buộc chứ không phải cho đẹp: ô đồng ý là lưới
   `auto minmax(0,1fr)`, nên dòng lỗi rơi vào cột `auto` sẽ **kéo giãn cột đó
   theo chiều dài câu lỗi** và đẩy nhãn sang tận bên phải. */
.fld__err{grid-column:1/-1; margin-block-start:var(--s-2);
  font:500 var(--fs-caption)/1.4 var(--font-sans); color:var(--danger)}
/* Gửi xong thì giấu hết, chỉ chừa câu cảm ơn — form trống trông giống hệt lúc
   chưa gửi, dễ khiến người ta điền lại lần nữa. */
.form--sent > *:not([data-wk26-form-msg]){display:none}
.form--sent [data-wk26-form-msg]{margin-block-start:0; outline:none}.form__f{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); margin-top:var(--s-5)}.inert{display:flex; gap:var(--s-3); align-items:flex-start; margin-top:var(--s-5);
  padding:var(--s-4); border:1px dashed var(--steel); border-radius:var(--r-md); background:var(--bg-2)}.inert svg{flex:0 0 auto; color:var(--fg-3); margin-top:1px}.inert p{font:400 var(--fs-caption)/1.55 var(--font-mono); color:var(--fg-3)}/* ---------- Footer ---------- */.ftr{background:var(--void); color:var(--on-dark-2); padding-block:var(--s-9) var(--s-5);
  border-top:1px solid rgba(255,255,255,.10)}.ftr__t{display:grid; gap:var(--s-8)}@media (min-width:1080px){.ftr__t{grid-template-columns:minmax(0,3fr) minmax(0,7fr); gap:var(--s-9)}}.ftr__lg svg.lg{width:168px; color:#fff}.ftr__bl{font-size:var(--fs-body-sm); color:var(--on-dark-3); margin-top:var(--s-4);
  max-width:36ch; line-height:var(--lh-normal)}.ftr__cols{display:grid; gap:var(--s-6) var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(max(148px,(100% - 72px)/4),1fr))}.ftr__ct{font:600 var(--fs-caption)/1.2 var(--font-mono); letter-spacing:var(--tk-eyebrow);
  text-transform:uppercase; color:#fff; margin:0 0 var(--s-4)}.ftr__a{display:inline-block; padding:10px 0; min-height:40px; color:var(--on-dark-2);
  font-size:var(--fs-body-sm)}.ftr__a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}.ftr__bt{display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); align-items:center;
  margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.12)}.ftr__lgl{font-size:var(--fs-caption); color:var(--on-dark-3)}.ftr__ll{display:flex; flex-wrap:wrap; gap:var(--s-4); margin-left:auto}.ftr__ll a{font-size:var(--fs-caption); color:var(--on-dark-3)}.ftr__ll a:hover{color:#fff}.ftr__soc{display:flex; flex-wrap:wrap; gap:var(--s-4); margin-top:var(--s-6)}.ftr__soc a{display:grid; place-items:center; width:36px; height:36px; border-radius:50%; color:var(--on-dark-2); background:rgba(255,255,255,.06); transition:background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease)}.ftr__soc a:hover{background:rgba(255,255,255,.14); color:#fff}.ftr__cert{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-5); margin-top:var(--s-6); padding-top:var(--s-6); border-top:1px solid rgba(255,255,255,.12)}.ftr__seal{display:inline-flex; align-items:center; opacity:.85; transition:opacity var(--dur-2) var(--ease)}.ftr__seal:hover{opacity:1}.ftr__cert img{height:96px; width:auto}.ftr__seal--live img,.ftr__seal--live iframe{max-height:96px; width:auto}@media (max-width:640px){.ftr__bt{justify-content:center; text-align:center}.ftr__ll{margin-left:0; justify-content:center}.ftr__soc{justify-content:center}.ftr__cert{justify-content:center; gap:var(--s-4)}.ftr__cert img{height:72px}.ftr__seal--live img,.ftr__seal--live iframe{max-height:72px}}
/* ==========================================================================
   Cầu nối Elementor
   Widget nào tự dựng thẻ gốc của nó (ví dụ `.ni` vốn là <a>) thì wrapper của
   Elementor phải tàng hình với layout, nếu không grid cha sẽ nhận wrapper làm
   con thay vì component. Xem elementor/class-widget-base.php.
   ========================================================================== */
.elementor-widget.wk-pass{display:contents}