/*!
 * 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{--lgx-h:16px}@media (min-width:360px){.hdr__logo{--lgx-h:20px}}@media (min-width:768px){.hdr__logo{--lgx-h:26px}}@media (min-width:1080px){.hdr__logo{--lgx-h:19px}}@media (min-width:1280px){.hdr__logo{--lgx-h:27px}}.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 .lgx{--lgx-h:22px}.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:272px; 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 .lgx{--lgx-h:27px; 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}

/* ---------- Danh sách nhân sự (widget wk26_team) ---------- */
/*
 * Nút lọc dùng lại `.tabs`/`.tab` sẵn có, nhưng đánh dấu trạng thái bằng
 * `aria-pressed` chứ không phải `aria-selected`: đây là nhóm nút bật/tắt, không
 * phải tablist điều khiển tabpanel. Hai dòng dưới cho nó dùng chung diện mạo.
 */
.tab.is-empty{opacity:.4}
.tab[aria-pressed="true"]{color:var(--fg-1)}
.tab[aria-pressed="true"]::after{transform:scaleX(1)}

/* ---- ô tìm kiếm ----
   Kính lúp đặt tuyệt đối bên trong khung, còn ô nhập chừa `padding-inline-start`
   đúng bằng chỗ nó chiếm — đặt icon thành nền (`background-image`) thì không đổi
   màu theo chủ đề được. */
.tm__s{position:relative; max-width:360px; margin-block-end:var(--s-4)}
.tm__si{position:absolute; inset-block-start:50%; inset-inline-start:var(--s-4);
  transform:translateY(-50%); color:var(--fg-3); pointer-events:none}
.tm__q{width:100%; padding:10px var(--s-4) 10px calc(var(--s-4) * 2 + 16px);
  border:1px solid var(--border-control); border-radius:var(--r-md);
  background:var(--bg-1); color:var(--fg-1);
  font:400 var(--fs-body-sm)/1.4 var(--font-sans)}
.tm__q::placeholder{color:var(--fg-3)}
.tm__q:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-color:transparent}
/* Safari vẽ nút xoá riêng của nó lệch hẳn khỏi ô; ẩn đi, phím Esc đã lo việc xoá. */
.tm__q::-webkit-search-decoration,
.tm__q::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none}

.tm__n{margin-block-end:var(--s-5); font:400 var(--fs-caption)/1.4 var(--font-mono);
  color:var(--fg-3); letter-spacing:var(--tk-eyebrow)}

/* 106 người: bốn cột ảnh dọc kéo khối này dài gần 16.000px, cuộn mãi không hết.
   Sáu cột ảnh vuông vẫn đọc được tên và chức danh mà ngắn lại còn một phần ba.

   Số cột là biến chứ không viết cứng: widget cho chọn 2–6 cột riêng cho máy
   tính, máy bảng và điện thoại, và Elementor chỉ việc ghi `--tm-cols`.
   `auto-fill` vẫn giữ để màn hình quá hẹp thì tự bớt cột, `max()` chặn không
   cho cột nào mảnh quá 110px. */
.tm{--tm-cols:6; --tm-gx:var(--s-4); --tm-gy:var(--s-5)}
.tm__g{display:grid; gap:var(--tm-gy) var(--tm-gx);
  grid-template-columns:repeat(auto-fill,
    minmax(max(110px,(100% - (var(--tm-cols) - 1) * var(--tm-gx))/var(--tm-cols)),1fr))}
.tm__i{min-width:0}

.tm__c{display:grid; gap:var(--s-3)}

/* Ảnh gốc là dọc 0.855. Cắt về vuông mất 14% chiều cao, lấy từ phía dưới —
   `object-position` neo lên trên nên khuôn mặt còn nguyên, chỉ hụt phần ngực.
   Đổi lại khối ngắn hẳn và các hàng vẫn thẳng đều vì mọi thẻ cùng tỉ lệ. */
/* `height:auto` là bắt buộc, không phải cho đẹp: thẻ `img` có `height="480"`,
   mà thuộc tính đó tính như một luật CSS thật. Thiếu dòng này thì chiều cao bị
   ghim ở 480px và `aspect-ratio` không bao giờ được dùng tới — đúng lỗi khiến
   ảnh trông dài ngoằng ở bản trước. */
.tm__ph{width:100%; height:auto; aspect-ratio:1; object-fit:cover;
  object-position:50% 22%; border-radius:var(--r-md); background:var(--bg-3)}

.tm__t{display:grid; gap:1px}
.tm__nm{font:700 var(--fs-caption)/1.35 var(--font-display); color:var(--fg-1)}
.tm__ro{font:400 var(--fs-caption)/1.35 var(--font-sans); color:var(--fg-3)}

/* Cột hẹp thì nút riêng chiếm chỗ mà chẳng nói thêm gì — cả thẻ đã bấm được.
   Vẫn giữ nút vì nó là thứ nhận được tiêu điểm bàn phím, chỉ cho nó nằm chồng
   lên thẻ thay vì đứng thành một dòng riêng. */
.tm__c{position:relative}
.tm__more{position:absolute; inset:0; padding:0; border:0; background:none;
  cursor:pointer; border-radius:var(--r-md)}
.tm__more:focus-visible{outline:2px solid var(--brand); outline-offset:3px}
.tm__i:has(.tm__more):hover .tm__ph{filter:brightness(.93)}
.tm__e{padding:var(--s-7) 0; text-align:center; color:var(--fg-3)}

/* ---- popup tiểu sử ---- */
.tm__d{width:min(680px,calc(100vw - 32px)); max-height:min(84vh,900px); padding:0;
  border:1px solid var(--border-subtle); border-radius:var(--r-lg);
  background:var(--bg-1); color:var(--fg-1); overflow:hidden}
.tm__d::backdrop{background:rgb(6 13 24 / .62)}
.tm__d[open]{display:grid; grid-template-rows:auto 1fr}

.tm__dh{display:flex; align-items:flex-start; gap:var(--s-4);
  padding:var(--s-5) var(--s-6); border-bottom:1px solid var(--border-subtle)}
.tm__dh img{width:64px; height:64px; flex:0 0 auto; border-radius:var(--r-md);
  object-fit:cover; object-position:50% 20%; background:var(--bg-3)}
.tm__dt{flex:1 1 auto; min-width:0}
.tm__dt h3{font:800 var(--fs-h3)/1.15 var(--font-display); color:var(--fg-1)}
.tm__dt p{margin-block-start:2px; font:400 var(--fs-body-sm)/1.4 var(--font-sans); color:var(--fg-3)}

.tm__x{flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center;
  border:1px solid var(--border-control); border-radius:var(--r-md); color:var(--fg-2)}
.tm__x:hover{background:var(--bg-3); color:var(--fg-1)}

.tm__db{padding:var(--s-6); overflow-y:auto; overscroll-behavior:contain}
.tm__db p{font:400 var(--fs-body-sm)/1.65 var(--font-sans); color:var(--fg-2)}
.tm__db p + p, .tm__db ul{margin-block-start:var(--s-4)}
.tm__db li{margin-block-start:var(--s-2); margin-inline-start:var(--s-5);
  list-style:disc; font:400 var(--fs-body-sm)/1.6 var(--font-sans); color:var(--fg-2)}

@media (max-width:600px){
  /* Chỉ bóp khoảng cách. Số cột để widget quyết, kể cả ở điện thoại — viết cứng
     ở đây thì lựa chọn trong Elementor thành vô nghĩa. */
  .tm{--tm-gx:var(--s-3); --tm-gy:var(--s-4)}
  .tm__dh,.tm__db{padding:var(--s-4)}
}

/* =========================================================== trang thông báo ==
   Ba khối chỉ trang `wisekey-wiseqey` dùng: hai thẻ thương hiệu, phát biểu dài,
   và dòng nguồn trích dẫn. Để cuối file vì chúng không thuộc bộ dùng chung.
   ============================================================================ */

/* --- bảng tóm tắt cạnh đoạn mở đầu --- */

/* Không có khối này thì section mở đầu chỉ là một đoạn văn ngắn trong khung
   1256px, nửa phải bỏ trống. */
.wk-fx{margin:0; border-top:1px solid var(--border-subtle)}
.wk-fx__r{display:grid; gap:2px var(--s-5); padding-block:var(--s-4);
  border-bottom:1px solid var(--border-subtle)}
@media (min-width:520px){
  .wk-fx__r{grid-template-columns:minmax(0,34%) minmax(0,1fr); align-items:baseline}
}
.wk-fx__k{font:400 var(--fs-caption)/1.3 var(--font-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-3)}
.wk-fx__v{margin:0; font:700 var(--fs-body)/1.3 var(--font-display); color:var(--fg-1)}
.wk-fx__n{display:block; margin-top:3px; font:400 var(--fs-body-sm)/1.4 var(--font-sans);
  color:var(--fg-2)}

/* --- hai thẻ thương hiệu --- */

/* Lưới ba cột — thẻ, mũi tên, thẻ — chứ không phải `wk-grid--2`: mũi tên là một
   phần tử thật nằm giữa, nên nó phải có ô riêng. Dưới 860px thì xếp dọc và mũi
   tên xoay xuống. */
.wk-bd{display:grid; gap:var(--s-4); align-items:stretch}
@media (min-width:860px){
  .wk-bd{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:var(--s-5)}
}

.wk-bd__ar{display:flex; align-items:center; justify-content:center;
  color:var(--fg-3); transform:rotate(90deg)}
@media (min-width:860px){
  .wk-bd__ar{transform:none}
}

.wk-bd__c{background:var(--bg-1); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); padding:var(--s-6); display:flex;
  flex-direction:column; gap:var(--s-3)}

.wk-bd__hd{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-4); min-height:46px; margin-bottom:var(--s-2)}

/* Ghim CHIỀU CAO chứ không phải bề ngang — cùng lý do như khoá logo ở header:
   hai logo tỉ lệ khác nhau, thứ cần bằng nhau là chiều cao nét chữ.
   `width:auto` bắt buộc, thiếu nó thì SVG lấy bề ngang mặc định 300px. */
.wk-bd{--wk-bd-lg:30px}
.wk-bd__lg{width:auto; flex:0 0 auto; display:block}

/* `#wk` vẽ bằng currentColor nên màu đặt ở đây; `#wq` mang gradient riêng nên
   luật này không chạm tới nó. */
.wk-bd__lg--wk{height:var(--wk-bd-lg); color:var(--red)}

/* 244/204 — khung symbol WISEQEY cao hơn nét chữ đúng phần lề đó. */
.wk-bd__lg--wq{height:calc(var(--wk-bd-lg) * 1.196)}

.wk-bd__b{font-size:var(--fs-body); line-height:var(--lh-relaxed); color:var(--fg-2)}

@media (max-width:420px){
  .wk-bd{--wk-bd-lg:24px}
  .wk-bd__hd{min-height:38px}
}

/* --- phát biểu dài --- */

/* Nền tối nên dùng bộ màu on-dark. Giới hạn 62ch: phát biểu dài 6 đoạn, để tràn
   hết 1256px là mỗi dòng ~140 ký tự, mắt lạc dòng khi xuống hàng. */
.wk-q{max-width:62ch; margin-inline:auto; position:relative;
  padding-left:var(--s-6)}

/* Vạch dọc thay cho dấu ngoặc kép cỡ lớn: dấu ngoặc phóng to kéo theo một khối
   trắng không cân, còn vạch thì hợp với phần còn lại của thiết kế. */
.wk-q::before{content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:2px; background:linear-gradient(to bottom,var(--red),rgba(255,255,255,.12))}

.wk-q__b{margin:0; color:var(--on-dark-2); font-size:var(--fs-body-lg);
  line-height:var(--lh-relaxed)}
.wk-q__b p + p{margin-top:var(--s-4)}

/* `--fs-h4` cũng là 18px, bằng đúng cỡ thân phát biểu, nên dùng nó thì câu chốt
   không nổi lên chút nào. `--fs-h3` (22px) mới tạo được bậc. */
.wk-q__pull{font:700 var(--fs-h3)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:#fff; margin-top:var(--s-6)!important}

.wk-q__by{display:flex; flex-direction:column; gap:2px; margin-top:var(--s-5);
  padding-top:var(--s-4); border-top:1px solid rgba(255,255,255,.12)}

/* Màn rộng: tên người nói ra cột trái và dính theo khi cuộn. Phát biểu dài sáu
   đoạn, cuộn tới giữa là người đọc đã quên đang đọc lời ai. */
@media (min-width:900px){
  .wk-q{display:grid; grid-template-columns:minmax(0,230px) minmax(0,66ch);
    justify-content:center; gap:var(--s-8); max-width:none; padding-left:0}
  .wk-q::before{display:none}
  .wk-q__b{grid-column:2; grid-row:1; padding-left:var(--s-6);
    border-left:2px solid rgba(255,255,255,.14)}
  .wk-q__by{grid-column:1; grid-row:1; align-self:start; position:sticky; top:96px;
    margin-top:0; padding-top:0; border-top:0; border-left:2px solid var(--red);
    padding-left:var(--s-4)}
}
.wk-q__nm{font:700 var(--fs-body)/1.2 var(--font-display); color:#fff}
.wk-q__rl{font:400 var(--fs-caption)/1.45 var(--font-mono); color:var(--on-dark-3)}

/* --- dòng nguồn --- */

.wk-src{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-2) var(--s-3);
  max-width:72ch; font-size:var(--fs-body-sm); color:var(--fg-3)}

/* `inline-flex` chứ không để chữ chảy tự do: tiêu đề nguồn dài, nếu không gom
   lại thì tên miền và mũi tên bị đẩy xuống một dòng riêng, trông như hai thứ
   rời nhau. */
.wk-src__a{display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:6px;
  color:var(--fg-2); text-decoration:underline;
  text-decoration-color:var(--border-control); text-underline-offset:3px}
.wk-src__a:hover{color:var(--accent-text); text-decoration-color:currentColor}
.wk-src__h{font:400 var(--fs-caption)/1 var(--font-mono); color:var(--fg-3);
  white-space:nowrap}
.wk-src__ic{align-self:center; flex:0 0 auto}

/* Ẩn khỏi mắt, giữ cho trình đọc màn hình. Không dùng `display:none` hay
   `visibility:hidden` — hai cái đó giấu khỏi cả trình đọc. */
.wk-u-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}


/* ===================================================== khoá logo, hai liên kết ==
   WISeKey về trang chủ, WISEQEY sang trang giải thích thương hiệu mới. Hai đích
   khác nhau nên phải là hai thẻ <a>, và vạch ngăn — trước nằm trong SVG — nay là
   một phần tử riêng vì nó không thuộc về nửa nào.

   Cỡ điều khiển bằng CHIỀU CAO qua `--lgx-h`, không phải bề ngang: hai logo tỉ lệ
   khác nhau (4,40:1 và 4,75:1), thứ cần bằng nhau là chiều cao nét chữ.
   ============================================================================ */

/* KHÔNG đặt `--lgx-h` trên chính `.lgx`. Biến đặt thẳng trên phần tử thì thắng
   giá trị kế thừa từ cha, nên mọi luật `--lgx-h` ở `.hdr__logo` / `.ftr__lg` sẽ
   bị che và cỡ logo đứng yên ở giá trị mặc định. Giá trị lùi đi vào `var(…, 24px)`
   ở từng chỗ dùng. */
.lgx{display:inline-flex; align-items:center;
  gap:calc(var(--lgx-h, 24px) * .2); color:var(--red)}

/* `color:inherit` là bắt buộc. `.lgx__a` là thẻ <a>, nên nó ăn màu link của ngữ
   cảnh — ở chân trang là đỏ — và `#wk` vẽ bằng currentColor sẽ đỏ theo, trên nền
   tối. Màu phải lấy từ `.lgx`, nơi header và chân trang khai khác nhau. */
.lgx__a{display:inline-flex; align-items:center; border-radius:var(--r-sm);
  color:inherit}
.lgx__a:hover{opacity:.82}
.lgx__a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* `#wk` vẽ bằng currentColor nên lấy màu từ `.lgx` — đỏ ở header, trắng ở chân
   trang. `#wq` mang gradient riêng, luật màu không chạm tới nó. */
.lgx__k{height:var(--lgx-h, 24px); width:auto; display:block}

/* Hệ số 1,196: khung của symbol WISEQEY cao 244 nhưng nét chữ chỉ chiếm 204,
   phần còn lại là lề. Để hai logo cùng `height` thì nét WISEQEY sẽ thấp hơn 16%.
   244/204 = 1,196 bù đúng phần lề đó. */
.lgx__q{height:calc(var(--lgx-h, 24px) * 1.196); width:auto; display:block}

.lgx__d{flex:0 0 auto; width:1px; height:calc(var(--lgx-h, 24px) * .84);
  background:currentColor; opacity:.3}

/* ============================================================= trang Key Figures ==
   Ba khối: dãy con số lớn, ô công bố cổ phần, và lưới mục có tiêu đề.
   ============================================================================== */

/* --- dãy con số lớn --- */

.wk-kf{display:grid; gap:var(--s-5); margin-top:var(--s-5)}
/* `auto-fit` chứ không phải `repeat(3,…)`: bản 2024 có đúng ba con số, bản
   H1 2026 chỉ có hai. Ghim cứng 3 cột thì hai con số nằm 2/3 bề ngang rồi bỏ
   trống một khoảng bằng cả một cột. */
@media (min-width:720px){
  .wk-kf{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
    gap:var(--s-7)}
}

.wk-kf__c{border-top:2px solid var(--red); padding-top:var(--s-4)}

/* `tabular-nums` để các chữ số rộng bằng nhau — không có nó thì "$90.6M" và
   "$4.3M" lệch nhau một cách khó chịu khi đặt cạnh nhau. */
.wk-kf__v{font:800 var(--fs-h1)/1 var(--font-display); letter-spacing:var(--tk-tight);
  color:#fff; font-variant-numeric:tabular-nums}
.wk-kf__k{margin-top:var(--s-2); font-size:var(--fs-body); color:var(--on-dark-2)}

/* --- ô công bố số cổ phần --- */

/* Số liệu pháp lý: đóng khung, hẹp, canh phải, font mono để chữ số thẳng cột.
   Cố ý KHÔNG kéo hết bề ngang — đây là một ô công bố, không phải một bảng dữ
   liệu lớn. */
.wk-sh{max-width:560px; border:1px solid var(--border-subtle);
  border-radius:var(--r-md); background:var(--bg-1); padding:var(--s-6)}
.wk-sh__h{margin:var(--s-2) 0 var(--s-4);
  font:700 var(--fs-h4)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight)}
.wk-sh__l{margin:0}
.wk-sh__r{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s-5); padding-block:var(--s-3);
  border-top:1px solid var(--border-subtle)}
.wk-sh__r dt{font-size:var(--fs-body-sm); color:var(--fg-2)}
.wk-sh__r dd{margin:0; font:600 var(--fs-body)/1.2 var(--font-mono);
  font-variant-numeric:tabular-nums; color:var(--fg-1); white-space:nowrap}

/* Dòng tổng: vạch dày hơn và chữ to hơn, để mắt dừng ở đúng con số quan trọng
   nhất mà không cần đọc nhãn. */
.wk-sh__r--t{border-top-width:2px; border-top-color:var(--ink); margin-top:var(--s-2);
  padding-top:var(--s-4)}
.wk-sh__r--t dt{font-weight:600; color:var(--fg-1)}
.wk-sh__r--t dd{font-size:var(--fs-h4); font-weight:700}

/* --- lưới mục có tiêu đề --- */

.wk-it{display:grid; gap:var(--s-4); margin-top:var(--s-6)}
@media (min-width:860px){
  .wk-it{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5)}
}

.wk-it__c{border-top:1px solid var(--border-subtle); padding-top:var(--s-4)}
.wk-it__t{margin:0 0 var(--s-2);
  font:700 var(--fs-body-lg)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:var(--fg-1)}
.wk-it__b{font-size:var(--fs-body-sm); line-height:var(--lh-relaxed); color:var(--fg-2)}

/* ============================================================== trang Investors ==
   Hộp thông báo cổ đông, thẻ sàn giao dịch, lưới đường dẫn con, hộp liên hệ.
   ============================================================================== */

/* --- hộp thông báo cổ đông --- */

/* Vạch đỏ bên trái thay cho cả một dải nền đỏ như trang cũ: dải đỏ nguyên khổ
   át hết phần còn lại của trang, mà đây chỉ là một thông báo trong nhiều mục. */
.wk-nt{max-width:72ch; border-left:3px solid var(--red); padding-left:var(--s-6)}
.wk-nt__h{margin:var(--s-2) 0 var(--s-4);
  font:800 var(--fs-h3)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight)}
.wk-nt__p{font-size:var(--fs-body); line-height:var(--lh-relaxed); color:var(--fg-2)}
.wk-nt__p + .wk-nt__p{margin-top:var(--s-3)}
.wk-nt__a{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-5)}

/* --- thẻ sàn giao dịch --- */

.wk-ls{display:grid; gap:var(--s-4); margin-top:var(--s-5)}
@media (min-width:720px){
  .wk-ls{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5)}
}

.wk-ls__c{display:grid; gap:4px; padding:var(--s-5);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  background:rgba(255,255,255,.04)}

/* Khung biểu đồ TradingView. `min-height` giữ chỗ sẵn đúng chiều cao widget:
   thiếu nó thì lúc iframe nạp xong trang bị đẩy tụt xuống, và người đang đọc
   phần dưới mất chỗ. */
.wk-ls__ch{margin-top:var(--s-4); min-height:200px}
.wk-ls__ch iframe{display:block; width:100%!important; border:0}

/* Widget tự chèn một dòng ghi công "by TradingView" với màu riêng, không hợp
   nền tối của section. Để nguyên chữ nhưng chỉnh lại màu cho đỡ chói. */
.wk-ls__ch .tradingview-widget-copyright,
.wk-ls__ch .tradingview-widget-copyright a{color:var(--on-dark-3)!important;
  font-size:var(--fs-caption)!important}

.wk-ls__m{font:400 var(--fs-caption)/1.3 var(--font-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--on-dark-3)}

/* Mã cổ phiếu là thứ mắt tìm trước, nên cho nó cỡ lớn nhất trong thẻ. */
.wk-ls__t{font:800 var(--fs-h2)/1 var(--font-display); letter-spacing:var(--tk-tight);
  color:#fff}
.wk-ls__n{font-size:var(--fs-body-sm); color:var(--on-dark-2)}
.wk-ls__g{display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-4);
  font-size:var(--fs-body-sm); font-weight:600; color:var(--on-dark-1);
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.3);
  text-underline-offset:3px}
.wk-ls__g:hover{color:#fff; text-decoration-color:currentColor}

/* --- lưới đường dẫn con --- */

.wk-ln{display:grid; gap:var(--s-3); margin-top:var(--s-6)}
@media (min-width:600px){ .wk-ln{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .wk-ln{grid-template-columns:repeat(3,minmax(0,1fr))} }

.wk-ln__c{display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); background:var(--bg-1);
  border:1px solid var(--border-subtle); border-radius:var(--r-md);
  color:var(--fg-1); text-decoration:none;
  transition:border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease)}
.wk-ln__c:hover{border-color:var(--steel); box-shadow:var(--shadow-1)}
.wk-ln__i{flex:0 0 auto; color:var(--red)}
.wk-ln__l{flex:1; font-size:var(--fs-body); font-weight:600}

/* Mũi tên nhích sang khi rê chuột — dấu hiệu "đi tiếp", rẻ hơn hẳn một hiệu ứng
   đổi màu toàn thẻ. */
.wk-ln__g{flex:0 0 auto; color:var(--fg-3);
  transition:transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease)}
.wk-ln__c:hover .wk-ln__g{transform:translateX(3px); color:var(--red)}

/* --- hộp liên hệ --- */

.wk-ct{max-width:560px; border:1px solid var(--border-subtle);
  border-radius:var(--r-md); background:var(--bg-1); padding:var(--s-6)}
.wk-ct__h{margin:var(--s-2) 0 var(--s-4);
  font:700 var(--fs-h4)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight)}
.wk-ct__l{margin:0}
.wk-ct__r{display:flex; align-items:baseline; gap:var(--s-4);
  padding-block:var(--s-2); border-top:1px solid var(--border-subtle)}
.wk-ct__r dt{flex:0 0 96px; font:400 var(--fs-caption)/1.5 var(--font-mono);
  letter-spacing:.06em; text-transform:uppercase; color:var(--fg-3)}
.wk-ct__r dd{margin:0; font-size:var(--fs-body); color:var(--fg-1)}
.wk-ct__n{margin-top:var(--s-4); font-size:var(--fs-body-sm); color:var(--fg-2)}
.wk-ct .wk-btn{margin-top:var(--s-4)}

/* --- mục trong `blocks` có đường dẫn --- */

.wk-it__a{color:inherit; text-decoration:none}
.wk-it__c--l{position:relative}

/* `::after` phủ kín thẻ để bấm chỗ nào cũng được, nhưng CHỈ tiêu đề nằm trong
   `<a>` — bọc cả thẻ thì trình đọc màn hình đọc luôn đoạn mô tả làm tên liên kết. */
.wk-it__a::after{content:""; position:absolute; inset:0}
.wk-it__c--l:hover .wk-it__t{color:var(--accent-text)}
.wk-it__a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* --- danh sách bản tin ở trang Investors --- */

.wk-nw{max-width:80ch}
.wk-nw__l{list-style:none; margin:var(--s-4) 0 0; padding:0;
  border-top:1px solid var(--border-subtle)}
.wk-nw__i{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px var(--s-4);
  padding-block:var(--s-3); border-bottom:1px solid var(--border-subtle)}

.wk-nw__a{display:flex; align-items:baseline; gap:var(--s-3); flex:1 1 320px;
  color:var(--fg-1); text-decoration:none}
.wk-nw__ic{flex:0 0 auto; color:var(--red); align-self:center}
.wk-nw__t{font-size:var(--fs-body); line-height:var(--lh-snug);
  text-decoration:underline; text-decoration-color:var(--border-control);
  text-underline-offset:3px}
.wk-nw__a:hover .wk-nw__t{color:var(--accent-text); text-decoration-color:currentColor}

/* Ngày tháng ở cột riêng, font mono và `nowrap`: hai bản tin này từ 2023, không
   ghi ngày thì một danh sách hai mục trông như tin mới nhất. */
.wk-nw__d{flex:0 0 auto; margin-left:auto;
  font:400 var(--fs-caption)/1.4 var(--font-mono); color:var(--fg-3);
  white-space:nowrap}

.wk-nw__m{display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-4);
  font-size:var(--fs-body-sm); font-weight:600; color:var(--fg-1);
  text-decoration:none}
.wk-nw__m:hover{color:var(--accent-text)}

/* ========================================================= dấu mốc trên trang chủ ==
   Ảnh bảng Nasdaq ở đầu section "Listed in the United States and Switzerland".
   Nền của section là `sec--void` (tối), nên bộ màu dùng on-dark.
   ============================================================================== */

.wk-ms{display:grid; gap:var(--s-4); margin-bottom:var(--s-8);
  padding:var(--s-4); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md); background:rgba(255,255,255,.04);
  color:inherit; text-decoration:none;
  transition:border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease)}
.wk-ms:hover{border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.07)}
.wk-ms:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* Ảnh chiếm khoảng 40% chứ không full-width: tỉ lệ 16:9 kéo hết 1256px là cao
   707px, nuốt luôn phần nội dung chính của section ngay bên dưới. */
@media (min-width:860px){
  .wk-ms{grid-template-columns:minmax(0,40%) minmax(0,1fr); gap:var(--s-6);
    align-items:center; padding:var(--s-5)}
}

/* `height:auto` bắt buộc — thẻ `img` có `height="900"`, mà thuộc tính đó tính
   như một luật CSS thật, nên thiếu dòng này là ảnh bị ghim ở 900px. */
.wk-ms__im{width:100%; height:auto; display:block; border-radius:var(--r-sm);
  background:var(--navy-900)}

.wk-ms__b{display:flex; flex-direction:column; gap:var(--s-2)}
.wk-ms__t{font:700 var(--fs-h3)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:#fff}
.wk-ms__g{display:inline-flex; align-items:center; gap:6px; margin-top:var(--s-2);
  font-size:var(--fs-body-sm); font-weight:600; color:var(--on-dark-1)}
.wk-ms:hover .wk-ms__g{color:#fff}

/* Bản cho NỀN SÁNG. Mặc định ở trên phối cho `sec--void` (nền tối): tiêu đề
   `#fff` và nền trắng mờ 4%. Đặt nguyên như thế lên một section nền sáng là
   tiêu đề tàng hình. Thêm `wk-ms--on-light` vào class khi dùng ở chỗ sáng. */
.wk-ms--on-light{border-color:var(--border-subtle); background:var(--bg-1)}
.wk-ms--on-light:hover{border-color:var(--steel); background:var(--bg-1);
  box-shadow:var(--shadow-1)}
.wk-ms--on-light .wk-ms__t{color:var(--fg-1)}
.wk-ms--on-light .wk-ms__g{color:var(--fg-2)}
.wk-ms--on-light:hover .wk-ms__g{color:var(--accent-text)}
.wk-ms--on-light .eyebrow--dark{color:var(--red)}

/* --- biểu đồ cột doanh thu --- */

.wk-ch{display:grid; gap:var(--s-4); margin-top:var(--s-6)}
@media (min-width:720px){
  .wk-ch{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-5)}
}

.wk-ch__p{border:1px solid var(--border-subtle); border-radius:var(--r-md);
  background:var(--bg-1); padding:var(--s-5)}
.wk-ch__k{font:400 var(--fs-caption)/1.3 var(--font-mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-3)}

/* `align-items:end` để các cột mọc từ đáy lên — đó là cách đọc một biểu đồ cột.
   Chiều cao khung cố định 180px vì phần trăm của cột tính theo nó; để `auto`
   thì `height:x%` không có gì để tham chiếu và cột xẹp xuống 0. */
.wk-ch__bs{display:flex; align-items:end; justify-content:space-around;
  gap:var(--s-4); height:180px; margin-top:var(--s-4)}

/* Lưới ba hàng chứ không phải flex: hàng giữa `1fr` có chiều cao XÁC ĐỊNH, nên
   `height:%` của thanh màu mới tính đúng. Với flex thì phần trăm tính theo cả ô
   cột, kể cả hai dòng chữ, và tỉ lệ giữa các cột sai hẳn. */
.wk-ch__b{display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center; gap:6px; flex:1 1 0; height:100%; min-width:0}
.wk-ch__t{display:flex; align-items:end; justify-content:center;
  width:100%; height:100%; min-height:0}

.wk-ch__v{font:700 var(--fs-body)/1 var(--font-display);
  font-variant-numeric:tabular-nums; color:var(--fg-1); white-space:nowrap}

/* Cột kỳ trước nhạt, kỳ này đậm — mắt bắt được chiều tăng mà không phải đọc nhãn. */
.wk-ch__r{display:block; width:100%; max-width:84px; border-radius:var(--r-sm);
  background:var(--mist); min-height:4px}
.wk-ch__r--now{background:var(--navy)}

.wk-ch__l{font-size:var(--fs-body-sm); color:var(--fg-2); white-space:nowrap}
.wk-ch__n{margin-top:var(--s-4); max-width:72ch; font-size:var(--fs-body-sm);
  color:var(--fg-3)}

/* ============================================================ trang Newsroom ==
   Lưới báo chí đưa tin. Trang chủ dùng băng cuộn ngang cho cùng dữ liệu này;
   ở đây là lưới vì người vào hẳn trang Newsroom muốn thấy hết một lượt.
   ============================================================================ */

.wk-cv{list-style:none; margin:var(--s-6) 0 0; padding:0;
  display:grid; gap:var(--s-5)}
@media (min-width:640px){ .wk-cv{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .wk-cv{grid-template-columns:repeat(3,minmax(0,1fr))} }

.wk-cv__a{display:grid; gap:var(--s-2); color:inherit; text-decoration:none}
.wk-cv__a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* `aspect-ratio` + `object-fit` để tám tấm ảnh nguồn khác nhau — ảnh tự chụp
   16:9, ảnh YouTube 4:3 — xếp thành lưới đều. Thiếu nó thì hàng nào cũng so le. */
.wk-cv__ph{position:relative; display:block; overflow:hidden;
  border-radius:var(--r-md); background:var(--bg-3)}
.wk-cv__im{display:block; width:100%; height:auto; aspect-ratio:16/9;
  object-fit:cover; transition:transform var(--dur-3) var(--ease)}
.wk-cv__a:hover .wk-cv__im{transform:scale(1.03)}

/* Nút play chồng lên ảnh video. `pointer-events:none` vì cả thẻ đã là link —
   để nó bắt chuột thì con trỏ đổi kiểu giữa chừng mà hành vi không đổi. */
.wk-cv__pl{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; pointer-events:none}
.wk-cv__pl svg{color:#fff; background:rgba(10,16,28,.72); border-radius:var(--r-pill);
  padding:12px; box-sizing:content-box;
  transition:background var(--dur-2) var(--ease)}
.wk-cv__a:hover .wk-cv__pl svg{background:var(--red)}

.wk-cv__o{margin-top:var(--s-2); font:400 var(--fs-caption)/1.3 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase; color:var(--red)}
.wk-cv__t{font:700 var(--fs-body-lg)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:var(--fg-1)}
.wk-cv__a:hover .wk-cv__t{color:var(--accent-text)}
.wk-cv__m{font-size:var(--fs-body-sm); color:var(--fg-3)}

/* Nút "More videos" dưới dãy video. Cùng cách giấu với lưới ảnh: `hidden` trên
   thẻ `<p>` bọc ngoài, không xoá khỏi DOM. */
.wk-cv__more{margin-top:var(--s-6)}
.wk-cv__more[hidden]{display:none}

/* --- lưới ảnh của một bộ --- */

/* `auto-fill` với ô tối thiểu `--wk-gl-min`: bộ nhỏ nhất 8 tấm, lớn nhất 138,
   cùng một luật là xong — không phải khai số cột cho từng bộ. Người biên tập
   đổi bề ngang ô ngay trong widget, biến đó đặt thẳng lên thẻ `ul`.

   `min(100%,…)` giữ cho ô không rộng hơn khung chứa: thiếu nó thì trên màn hẹp
   lưới đẩy ngang ra ngoài. */
.wk-gl{list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--wk-gl-min,200px)),1fr))}

/* Màn hẹp: hạ ngưỡng xuống 70% để ra hai cột thay vì một. Ở 390px, ô 200px chỉ
   vừa đúng một cột, nghĩa là 24 tấm thành 24 màn hình phải cuộn qua. Hạ theo
   TỈ LỆ chứ không ghi cứng 140px, để biên tập viên đổi bề ngang ô thì màn hẹp
   cũng đổi theo. */
@media (max-width:600px){
  .wk-gl{grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(var(--wk-gl-min,200px) * .7)),1fr))}
}

/* Phần dư nằm sau nút "Load more" được giấu bằng thuộc tính `hidden`. Khai lại
   cho chắc: vài bộ reset đặt `li{display:list-item}`, mà luật đó thắng luật mặc
   định của trình duyệt cho `[hidden]`. */
.wk-gl__i[hidden]{display:none}

.wk-gl__a{display:block; overflow:hidden; border-radius:var(--r-sm);
  background:var(--bg-3)}
.wk-gl__a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* `aspect-ratio` + `object-fit` để ảnh ngang, dọc, vuông lẫn lộn vẫn xếp thành
   lưới đều. `height:auto` không dùng được ở đây vì mục đích là cắt cho bằng
   nhau, không phải giữ tỉ lệ gốc. */
.wk-gl__im{display:block; width:100%; height:100%; aspect-ratio:var(--wk-gl-ar,4/3);
  object-fit:cover; transition:transform var(--dur-3) var(--ease)}
.wk-gl__a:hover .wk-gl__im{transform:scale(1.04)}

/* --- lightbox cho lưới ảnh --- */

.lb{position:fixed; inset:0; z-index:200; display:grid; place-items:center;
  padding:var(--s-5); background:rgba(6,13,24,.94)}
.lb[hidden]{display:none}

.lb__f{margin:0; display:grid; gap:var(--s-3); justify-items:center;
  max-width:100%; max-height:100%}

/* `max-height` theo `vh` trừ chỗ cho dòng đếm: thiếu nó thì ảnh dọc tràn khỏi
   màn hình và người xem phải cuộn trong lớp phủ. */
.lb__im{display:block; max-width:100%; max-height:calc(100vh - 7rem);
  width:auto; height:auto; object-fit:contain; border-radius:var(--r-sm)}
.lb__c{font:400 var(--fs-body-sm)/1 var(--font-mono); color:var(--on-dark-2)}

.lb button{position:absolute; display:inline-flex; align-items:center;
  justify-content:center; width:48px; height:48px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.1); color:#fff; border:0; cursor:pointer;
  transition:background var(--dur-2) var(--ease)}
.lb button:hover{background:rgba(255,255,255,.22)}
.lb button:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

.lb__x{top:var(--s-4); right:var(--s-4)}
.lb__p{left:var(--s-4); top:50%; transform:translateY(-50%) rotate(180deg)}
.lb__n{right:var(--s-4); top:50%; transform:translateY(-50%)}

/* Màn hẹp: hai nút chuyển xuống đáy, cạnh nhau — ở hai mép thì ngón cái che
   mất ảnh, mà vùng bấm lại sát viền màn hình. */
@media (max-width:600px){
  .lb__p,.lb__n{top:auto; bottom:var(--s-4); transform:none}
  .lb__p{left:calc(50% - 56px); transform:rotate(180deg)}
  .lb__n{right:calc(50% - 56px)}
  .lb__im{max-height:calc(100vh - 11rem)}
}

/* --- dãy nút lọc của lưới ảnh --- */

/* Dùng lại đúng `.wk-ft__a` của trang kết quả tìm kiếm: cùng là nút lọc, cùng
   một hình dáng, không có lý do gì vẽ lại lần hai. Khác đúng một chỗ — ở đây là
   `<button>` nên trạng thái bật nằm ở `aria-pressed`, còn bên kia là `<a>` nên
   nằm ở `aria-current`. */
.wk-gl__f{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-5)}
.wk-gl__f .wk-ft__a{cursor:pointer; background:transparent; font-family:var(--font-sans)}
.wk-gl__f .wk-ft__a[aria-pressed="true"]{background:var(--black); border-color:var(--black); color:#fff}

/* Tắt JavaScript thì mấy nút này không làm gì được — giấu đi, lưới vẫn hiện đủ
   ảnh nên trang không mất gì. `html.js` do `util.js` gắn vào. */
html:not(.js) .wk-gl__f{display:none}

.wk-gl__more{margin-top:var(--s-6)}

/* Nút ẩn đi bằng `hidden` trên thẻ `<p>` bọc ngoài, không phải xoá khỏi DOM:
   đổi nhóm xong quay lại "tất cả" là nó cần hiện lại. */
.wk-gl__more[hidden]{display:none}

/* Số tấm còn lại, đặt ngay trong nút: "Load more photos (114)" nói trước cho
   người đọc biết bấm vào sẽ ra bao nhiêu, thay vì bấm rồi mới biết. */
.wk-gl__left{margin-left:.4em; font-variant-numeric:tabular-nums; opacity:.7}

/* ===========================================================================
   TÌM KIẾM
   Hai khối: `.sch` là lớp phủ mở từ nút kính lúp trên header, `.wk-sf`/`.wk-ft`/
   `.wk-rs`/`.wk-pg`/`.wk-nr` là trang kết quả đầy đủ.
   ========================================================================== */

/* --- lớp phủ --- */

/* z-index 160: trên header (100), trên thanh tiện ích (101), trên cả drawer
   (150). Lớp phủ này và drawer không bao giờ mở cùng lúc, nhưng đặt trên cho
   chắc còn hơn đi dò lại khi thêm thứ khác.

   Phần tử phải nằm NGOÀI `<header>`: `.hdr` có `backdrop-filter`, mà thứ đó
   biến nó thành khối chứa cho mọi con `position:fixed` — nằm trong thì
   `inset:0` co lại bằng đúng cái header. Xem ghi chú ở `templates/parts/header.php`. */
.sch{position:fixed; inset:0; z-index:160; display:block;
  background:rgba(6,13,24,.55); backdrop-filter:blur(2px)}
.sch[hidden]{display:none}

/* Neo lên 1/5 phía trên thay vì giữa màn: danh sách gợi ý mọc xuống dưới, căn
   giữa thì mỗi lần có thêm kết quả cả khối lại nhảy. */
.sch__in{width:min(720px,calc(100% - 2*var(--s-4))); margin:12vh auto 0;
  background:var(--bg-1); border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(6,13,24,.28); overflow:hidden}

.sch__f{display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border-subtle)}
.sch__ic{flex:0 0 auto; color:var(--fg-3)}

/* `appearance:none` để bỏ nút x và kính lúp mà Safari tự thêm cho
   `input[type=search]` — hai thứ đó không theo thiết kế nào ở đây. */
.sch__q{flex:1 1 auto; min-width:0; appearance:none; -webkit-appearance:none;
  border:0; background:transparent; font:400 var(--fs-body-lg)/1.4 var(--font-sans);
  color:var(--fg-1)}
.sch__q::-webkit-search-decoration,.sch__q::-webkit-search-cancel-button{display:none}
.sch__q:focus{outline:none}
.sch__q::placeholder{color:var(--fg-3)}

.sch__x{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:0; border-radius:var(--r-pill); cursor:pointer;
  background:transparent; color:var(--fg-2); transition:background var(--dur-2) var(--ease)}
.sch__x:hover{background:var(--bg-3)}
.sch__x:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* Chặn chiều cao rồi cho cuộn: 8 gợi ý trên màn điện thoại là tràn hết màn
   hình, mà ô gõ thì phải luôn nhìn thấy. */
.sch__out{max-height:min(52vh,460px); overflow:auto; overscroll-behavior:contain}
.sch__ul{list-style:none; margin:0; padding:0}

.sch__a{display:block; padding:var(--s-3) var(--s-5); text-decoration:none;
  color:inherit; border-bottom:1px solid var(--border-subtle)}
.sch__a:hover,.sch__a.is-on{background:var(--fog)}
.sch__a:focus-visible{outline:var(--focus-ring); outline-offset:-2px}

.sch__m{display:flex; align-items:center; gap:var(--s-2); margin-bottom:4px}
.sch__d{font:400 var(--fs-caption)/1 var(--font-mono); color:var(--fg-3)}
.sch__t{display:block; font:700 var(--fs-body)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:var(--fg-1)}
.sch__a:hover .sch__t,.sch__a.is-on .sch__t{color:var(--accent-text)}

/* Hai dòng là đủ để biết có đúng thứ mình tìm không; dài hơn thì danh sách
   thành một bức tường chữ và tám kết quả không còn liếc qua được nữa.

   Tên là `__e` (excerpt) chứ không phải `__x`: `__x` đã là nút đóng ở trên, mà
   hai thứ khác hẳn nhau trùng tên thì luật của cái này rơi vào cái kia. */
.sch__e{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; margin-top:2px; font-size:var(--fs-body-sm);
  line-height:var(--lh-normal); color:var(--fg-3)}

.sch__none{margin:0; padding:var(--s-5); color:var(--fg-3); font-size:var(--fs-body-sm)}

/* Rỗng thì không chiếm chỗ: `:empty` khỏi phải nhớ bật/tắt class trong JS. */
.sch__out:empty,.sch__more:empty{display:none}
.sch__ul:empty{display:none}

.sch__all{display:flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-4); font:600 var(--fs-body-sm)/1 var(--font-sans);
  color:var(--accent-text); text-decoration:none; background:var(--fog)}
.sch__all:hover{text-decoration:underline; text-underline-offset:3px}

.sch__hint{margin:0; padding:var(--s-3) var(--s-5);
  font:400 var(--fs-caption)/1.4 var(--font-mono); color:var(--fg-3);
  border-top:1px solid var(--border-subtle)}

/* Màn hẹp: dán lớp phủ lên sát mép trên, 12vh là phí mất một phần ba màn. */
@media (max-width:600px){
  .sch__in{margin-top:var(--s-3); width:calc(100% - 2*var(--s-3))}
  .sch__hint{display:none}
}

/* --- chữ khớp, dùng chung cho cả gợi ý lẫn trang kết quả --- */

/* Không dùng nền vàng mặc định của trình duyệt: nó không thuộc bảng màu nào ở
   đây, mà trên nền xám của mục đang chọn thì chói. Nền đỏ nhạt + chữ đậm vừa
   đủ để mắt bắt được chỗ khớp. */
mark{background:var(--red-050); color:inherit; font-weight:600;
  padding:0 2px; border-radius:2px}

/* --- ô tìm kiếm trên trang kết quả --- */

.wk-sf{display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-6);
  max-width:640px; padding:var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-pill)}
.wk-sf__ic{flex:0 0 auto; color:var(--on-dark-3)}
.wk-sf__q{flex:1 1 auto; min-width:0; appearance:none; -webkit-appearance:none;
  border:0; background:transparent; color:#fff;
  font:400 var(--fs-body)/1.4 var(--font-sans)}
.wk-sf__q::-webkit-search-decoration,.wk-sf__q::-webkit-search-cancel-button{display:none}
.wk-sf__q:focus{outline:none}
.wk-sf__q::placeholder{color:var(--on-dark-3)}
.wk-sf:focus-within{border-color:rgba(255,255,255,.6)}
.wk-sf__go{flex:0 0 auto}

@media (max-width:600px){
  .wk-sf{flex-wrap:wrap; border-radius:var(--r-md); padding:var(--s-3)}
  .wk-sf__go{width:100%; justify-content:center}
}

/* --- dãy thẻ lọc --- */

.wk-ft{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2)}
.wk-ft__a{display:inline-flex; align-items:center; gap:var(--s-2); min-height:40px;
  padding:0 var(--s-4); border:1px solid var(--border-control); border-radius:var(--r-pill);
  font:600 var(--fs-body-sm)/1 var(--font-sans); color:var(--fg-2); text-decoration:none;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease)}
.wk-ft__a:hover{background:var(--bg-3); color:var(--fg-1)}
.wk-ft__a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* Thẻ đang chọn nhận dạng bằng `aria-current` chứ không bằng class riêng: một
   thuộc tính vừa vẽ được, vừa là thứ trình đọc màn hình đọc ra. */
.wk-ft__a[aria-current]{background:var(--black); border-color:var(--black); color:#fff}
.wk-ft__n{font-family:var(--font-mono); font-size:var(--fs-caption);
  font-variant-numeric:tabular-nums; opacity:.65}

/* --- danh sách kết quả --- */

.wk-rs{list-style:none; margin:var(--s-6) 0 0; padding:0}
.wk-rs__i + .wk-rs__i{border-top:1px solid var(--border-subtle)}

.wk-rs__a{display:block; padding:var(--s-5) 0; text-decoration:none; color:inherit}
.wk-rs__a:hover .wk-rs__t{color:var(--accent-text)}
.wk-rs__a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

.wk-rs__m{display:flex; align-items:center; gap:var(--s-3); margin:0 0 var(--s-2);
  font:400 var(--fs-caption)/1 var(--font-mono); color:var(--fg-3)}
/* Giới hạn bề ngang cả tiêu đề lẫn đường dẫn, không chỉ đoạn trích: khung
   `.wrap` rộng 1256px, để chữ chạy hết là một dòng tiêu đề dài tới ~150 ký tự,
   mắt đọc xong đầu dòng thì lạc chỗ xuống dòng. */
.wk-rs__t{margin:0; max-width:70ch; font:700 var(--fs-h4)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:var(--fg-1)}
.wk-rs__x{margin:var(--s-2) 0 0; max-width:70ch; color:var(--fg-2);
  font-size:var(--fs-body-sm); line-height:var(--lh-relaxed)}

/* Đường dẫn in ra dưới mỗi kết quả, cùng kiểu với thanh địa chỉ của trình
   duyệt: nhìn là biết sẽ đi đâu trước khi bấm. */
.wk-rs__u{display:block; max-width:70ch; margin-top:var(--s-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
  font:400 var(--fs-caption)/1.4 var(--font-mono); color:var(--fg-3)}

/* --- phân trang --- */

.wk-pg{margin-top:var(--s-7)}
.wk-pg__ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2)}
.wk-pg a,.wk-pg span.page-numbers{display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 var(--s-3); border-radius:var(--r-sm);
  border:1px solid var(--border-control); text-decoration:none;
  font:600 var(--fs-body-sm)/1 var(--font-sans); color:var(--fg-2)}
.wk-pg a:hover{background:var(--bg-3); color:var(--fg-1)}
.wk-pg a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}
.wk-pg .current{background:var(--black); border-color:var(--black); color:#fff}
.wk-pg .dots{border-color:transparent}

/* --- không có kết quả --- */

.wk-nr{max-width:62ch; padding:var(--s-6) 0}
.wk-nr__t{margin:0 0 var(--s-4); font:700 var(--fs-h3)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:var(--fg-1)}
.wk-nr__l{margin:0; padding-left:1.1em; color:var(--fg-2); line-height:var(--lh-relaxed)}
.wk-nr__l li + li{margin-top:var(--s-2)}
.wk-nr__h{margin:var(--s-6) 0 var(--s-3); font-weight:600; color:var(--fg-1)}
.wk-nr__s{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2)}

/* ===========================================================================
   TRANG SỰ KIỆN — mục lục dính, bảng giờ, phiên thảo luận
   ========================================================================== */

/* --- mục lục dính dưới header --- */

/* `top` lấy từ biến do `page.js` đo: header cao 72px và thanh tiện ích 38px ở
   máy tính, nhưng màn hẹp khác, mà chế độ giữ header cũ lại khác nữa. 110px chỉ
   là giá trị dự phòng cho lúc JS chưa chạy.

   z-index 99 — THẤP hơn header (100) là cố ý: panel mega menu thả xuống từ
   header phải phủ lên thanh này, không phải chui xuống dưới. */
.wk-sn__w{position:sticky; top:var(--wk-sn-top,110px); z-index:99}
.wk-sn{
  background:var(--void); border-bottom:1px solid rgba(255,255,255,.12)}
.wk-sn__in{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5);
  justify-content:space-between; min-height:52px; padding-block:var(--s-2)}

.wk-sn__b{margin:0; font:400 var(--fs-caption)/1.4 var(--font-mono);
  letter-spacing:.06em; color:var(--on-dark-3)}

.wk-sn__ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap;
  gap:var(--s-2) var(--s-5)}
.wk-sn__a{display:inline-flex; align-items:center; min-height:36px;
  font:400 var(--fs-body-sm)/1 var(--font-sans); color:var(--on-dark-2);
  text-decoration:none; transition:color var(--dur-2) var(--ease)}
.wk-sn__a[aria-current="location"]{color:#fff; text-decoration:underline; text-underline-offset:4px}
.wk-sn__a:hover{color:#fff; text-decoration:underline; text-underline-offset:4px}
.wk-sn__a:focus-visible{outline:var(--focus-ring); outline-offset:var(--focus-offset)}

/* Màn hẹp: giấu dòng thương hiệu, giữ lại phần điều hướng — thanh này tồn tại
   để nhảy mục, cái tên chỉ là trang trí. */
@media (max-width:600px){
  .wk-sn__b{display:none}
  .wk-sn__in{justify-content:flex-start}
}

/* --- nhãn nhỏ trên thẻ của khối `blocks` --- */

.wk-it__k{margin:0 0 var(--s-2); font:400 var(--fs-caption)/1 var(--font-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--red)}

/* --- bảng giờ --- */

/* `<ol>` chứ không phải `<table>`: đây là một trình tự, không phải dữ liệu hai
   chiều. Lưới hai cột ở máy tính, xuống một cột ở điện thoại — bảng thật thì
   phải cuộn ngang. */
.wk-ag{list-style:none; margin:var(--s-6) 0 0; padding:0}
.wk-ag__i{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s-1) var(--s-5);
  padding:var(--s-4) 0; border-top:1px solid var(--border-subtle)}
.wk-ag__i:last-child{border-bottom:1px solid var(--border-subtle)}

@media (min-width:768px){
  .wk-ag__i{grid-template-columns:140px minmax(0,1fr)}
}

.wk-ag__t{margin:0; font:400 var(--fs-body-sm)/1.5 var(--font-mono);
  font-variant-numeric:tabular-nums; color:var(--accent-text); white-space:nowrap}
.wk-ag__c{min-width:0}
.wk-ag__l{margin:0; font:700 var(--fs-body-lg)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:var(--fg-1)}
.wk-ag__d{margin:var(--s-1) 0 0; max-width:70ch; color:var(--fg-2);
  font-size:var(--fs-body-sm); line-height:var(--lh-relaxed)}

/* --- phiên thảo luận --- */

.wk-pn{display:grid; gap:var(--s-5); margin-top:var(--s-6);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.wk-pn__c{display:flex; flex-direction:column; padding:var(--s-6);
  background:var(--bg-1); border:1px solid var(--border-subtle); border-radius:var(--r-md)}

.wk-pn__k{margin:0 0 var(--s-3); font:400 var(--fs-caption)/1 var(--font-mono);
  letter-spacing:.1em; text-transform:uppercase; color:var(--red)}
.wk-pn__t{margin:0 0 var(--s-3); font:700 var(--fs-h4)/var(--lh-snug) var(--font-display);
  letter-spacing:var(--tk-tight); color:var(--fg-1)}
.wk-pn__q{margin:0 0 var(--s-5); color:var(--fg-2); line-height:var(--lh-relaxed)}

/* Nhãn "Discussion themes" / "Suggested participants" là `<p>`, không phải
   heading: thêm hai bậc heading nữa vào thẻ này là cây tiêu đề của trang rối
   mà chẳng ai đi theo nó. */
.wk-pn__h{margin:0 0 var(--s-2); font:600 var(--fs-caption)/1 var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3)}

.wk-pn__ul{margin:0 0 var(--s-5); padding-left:1.1em; color:var(--fg-2);
  line-height:var(--lh-relaxed); font-size:var(--fs-body-sm)}
.wk-pn__ul li + li{margin-top:var(--s-2)}
.wk-pn__w{margin:0; color:var(--fg-2); font-size:var(--fs-body-sm);
  line-height:var(--lh-relaxed)}

/* Kết quả mong đợi: một ô riêng, viền đỏ bên trái để nó không trôi lẫn vào hai
   thẻ phía trên. */
.wk-pn__o{margin-top:var(--s-6); padding:var(--s-5) var(--s-6);
  background:var(--fog); border-left:3px solid var(--red-600); border-radius:var(--r-sm)}
.wk-pn__ot{margin:var(--s-2) 0 0; max-width:80ch; color:var(--fg-1);
  font:400 var(--fs-body-lg)/var(--lh-relaxed) var(--font-sans)}

/* Event hero: trusted chip and orbital infrastructure. */
.wk-event-hero{display:grid; align-items:center; gap:var(--s-7)}
.wk-event-hero__copy{min-width:0}
.wk-event-hero__art{width:min(100%,360px); height:auto; margin-inline:auto}
@media (min-width:1080px){.wk-event-hero{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}

/* Technology Sovereignty: the three partners share one desktop row. */
@media (min-width:1080px){#technology-sovereignty-about .wk-it{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Only the two roundtables use accent times in the event agenda. */
#technology-sovereignty-agenda .wk-ag__t{color:var(--fg-2)}
#technology-sovereignty-agenda .wk-ag__i:nth-child(2) .wk-ag__t,
#technology-sovereignty-agenda .wk-ag__i:nth-child(4) .wk-ag__t{color:var(--accent-text)}

/* Existing Media Library imagery on the sovereignty event. */
.wk-event-photo{margin:0 0 var(--s-5); min-width:0}
.wk-event-photo img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-md)}
.wk-event-photo figcaption{margin-top:var(--s-2); font:400 var(--fs-caption)/1.5 var(--font-mono); color:var(--fg-2)}
.wk-event-photo--hero{margin:0}
.wk-event-photo--hero img{aspect-ratio:4/5; object-position:45% center}
.wk-event-photo--hero figcaption{color:var(--on-dark-3)}
#technology-sovereignty-roundtables .wk-pn__c:first-child .wk-event-photo img{object-position:80% center}
@media (max-width:1079px){.wk-event-photo--hero img{aspect-ratio:16/10}}

/* Sovereignty context follows the Solutions heading and card layout. */
#technology-sovereignty-about{background:var(--bg-1)}
#technology-sovereignty-about > .wrap{display:grid; gap:var(--s-6)}
#technology-sovereignty-about .head{display:block; margin-bottom:0}
#technology-sovereignty-about .lead{max-width:none; margin:0}
#technology-sovereignty-about .lead + .lead{margin-top:var(--s-4)}
#technology-sovereignty-about .wk-it{margin-top:0}
#technology-sovereignty-about .wk-it__c{border:1px solid var(--border-subtle); border-radius:var(--r-md); padding:var(--s-5); background:var(--bg-1)}
#technology-sovereignty-about .wk-it__k{margin-bottom:var(--s-3)}
@media(min-width:1080px){
 #technology-sovereignty-about > .wrap{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); column-gap:var(--s-8); row-gap:var(--s-7); align-items:start}
 #technology-sovereignty-about > .wrap > :last-child{grid-column:1/-1}
}

/* Roundtable images meet the card edges; copy keeps its padding. */
#technology-sovereignty-roundtables .wk-pn__c{overflow:hidden}
#technology-sovereignty-roundtables .wk-pn__c > .wk-event-photo{margin:calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-5); flex-shrink:0}
#technology-sovereignty-roundtables .wk-pn__c > .wk-event-photo img{border-radius:0}

/* Event title and supporting theme have separate visual weights. */
.wk-event-hero .wk-hero__t{font-size:clamp(40px,4vw,58px); line-height:1.08; max-width:none}
.wk-hero__subtitle{display:block; margin-top:var(--s-4); font:500 clamp(24px,2.3vw,32px)/1.25 var(--font-display); letter-spacing:var(--tk-tight); color:var(--on-dark-2)}