/*!
 * WISeKey 2026 — override v3 + v4
 * 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
 */
/* ==========================================================================
   v3 ADDITIONS AND OVERRIDES
   ========================================================================== *//* ---- Utility bar now sticks with the header, so an investor always has an
   entry point regardless of scroll depth (replaces moving the section up) --- */.util{position:sticky; top:0; z-index:101}.hdr{top:38px}/* ---- Back to top ---- */.totop{position:fixed; right:var(--s-5); bottom:var(--s-5); z-index:90;
  width:48px; height:48px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--black); color:#fff; box-shadow:var(--shadow-3);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
             visibility var(--dur-2), background-color var(--dur-2) var(--ease)}.totop[data-show="true"]{opacity:1; visibility:visible; transform:none}.totop:hover{background:var(--red-600)}@media (prefers-reduced-motion:reduce){.totop{transition:opacity var(--dur-1) linear, visibility var(--dur-1)}}/* ==========================================================================
   HERO CERTIFICATE PANEL  (replaces the canvas instrument)
   Every value shown is the real OISTE WISeKey Global Root GB CA, verifiable
   at crt.sh against the SHA-256 fingerprint.
   ========================================================================== */.cp{border:1px solid rgba(255,255,255,.16); border-radius:var(--r-md);
  background:rgba(255,255,255,.035); overflow:hidden;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px)}.cp__hd{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-4) var(--s-5); border-bottom:1px solid rgba(255,255,255,.12)}.cp__hdt{font:600 10px/1.2 var(--font-mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-dark-3)}.cp__live{margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font:500 10px/1 var(--font-mono); letter-spacing:.08em; color:#5FD08C}.cp__live i{width:6px; height:6px; border-radius:50%; background:#5FD08C; display:block}/* chain */.cp__chain{padding:var(--s-5) var(--s-5) var(--s-4); display:grid; gap:var(--s-2)}.cn{display:flex; align-items:center; gap:var(--s-3); width:100%; text-align:left;
  padding:var(--s-3) var(--s-4); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-md); background:rgba(255,255,255,.03); color:#fff;
  transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease)}.cn:hover{border-color:rgba(255,255,255,.34)}.cn[aria-selected="true"]{border-color:var(--red-400); background:rgba(237,28,36,.12)}.cn__ix{flex:0 0 auto; width:24px; height:24px; border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.28); display:flex; align-items:center;
  justify-content:center; font:500 9px/1 var(--font-mono); color:var(--on-dark-2)}.cn[aria-selected="true"] .cn__ix{background:var(--red-600); border-color:var(--red-400); color:#fff}.cn__t{display:block; font:600 var(--fs-body-sm)/1.2 var(--font-sans)}.cn__s{display:block; font:400 10px/1.4 var(--font-mono); color:var(--on-dark-3); margin-top:3px}.cn__lnk{margin-left:auto; flex:0 0 auto; color:var(--on-dark-3)}.cn[aria-selected="true"] .cn__lnk{color:var(--red-300)}.cp__tie{height:10px; margin-left:calc(var(--s-4) + 12px); width:1px;
  background:rgba(255,255,255,.24)}.cp__tie--on{background:var(--red-400)}/* field readout */.cp__fields{padding:0 var(--s-5) var(--s-5)}.cf{display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--s-3);
  padding:var(--s-3) 0; border-top:1px solid rgba(255,255,255,.10);
  font:400 11px/1.5 var(--font-mono)}.cf__k{color:var(--on-dark-3); font-size:9px; letter-spacing:.09em; text-transform:uppercase}.cf__v{color:#fff; word-break:break-word}.cf__v em{font-style:normal; color:var(--red-300)}
.cf--sep{border-top:1px solid rgba(255,255,255,.14); margin-top:var(--s-5)}.cf__v .fp{letter-spacing:.04em; font-size:10px; color:var(--on-dark-2); word-break:break-all}/* migration strip — generic industry milestones, deliberately not tied to
   this certificate's expiry */.mig{border-top:1px solid rgba(255,255,255,.12); padding:var(--s-4) var(--s-5) var(--s-5);
  background:rgba(0,0,0,.18)}.mig__hd{display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap; margin-bottom:var(--s-4)}.mig__t{font:600 10px/1.2 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-300)}.mig__n{margin-left:auto; font:400 10px/1.2 var(--font-mono); color:var(--on-dark-3)}.mig__track{position:relative; height:2px; background:rgba(255,255,255,.14); margin:var(--s-5) 0 var(--s-4)}.mig__fill{position:absolute; inset:0 auto 0 0; background:var(--red-600); width:0;
  transition:width 900ms var(--ease-io)}.mig__now{position:absolute; top:50%; width:9px; height:9px; border-radius:50%;
  background:var(--red); border:2px solid var(--void); transform:translate(-50%,-50%)}.mig__ticks{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-2)}.mgt{position:relative; padding-top:var(--s-3)}.mgt::before{content:""; position:absolute; left:0; top:-11px; width:7px; height:7px;
  border-radius:50%; background:var(--void); border:1.5px solid rgba(255,255,255,.34)}.mgt--done::before{background:var(--red-400); border-color:var(--red-400)}.mgt__y{font:600 var(--fs-body-sm)/1 var(--font-display); color:#fff; letter-spacing:var(--tk-tight)}.mgt__l{font:400 9px/1.4 var(--font-mono); color:var(--on-dark-3); margin-top:5px}.cp__foot{padding:var(--s-3) var(--s-5); border-top:1px solid rgba(255,255,255,.12);
  font:400 10px/1.5 var(--font-mono); color:var(--on-dark-3);
  display:flex; gap:var(--s-3); align-items:center; flex-wrap:wrap}.cp__foot a{color:var(--red-300)}.cp__foot a:hover{color:#fff; text-decoration:underline}/* ==========================================================================
   TRUST — three plain claims + technical expander
   ========================================================================== */.claims{display:grid; gap:var(--s-4)}@media (min-width:1080px){.claims{grid-template-columns:repeat(3,minmax(0,1fr))}}.clm{border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  background:rgba(255,255,255,.035); padding:var(--s-6); display:flex;
  flex-direction:column; gap:var(--s-3); position:relative; overflow:hidden}.clm__n{font:500 10px/1 var(--font-mono); letter-spacing:.14em; color:var(--on-dark-3)}.clm__t{font:800 var(--fs-h3)/1.15 var(--font-display); letter-spacing:var(--tk-tight); color:#fff}.clm__b{font-size:var(--fs-body-sm); color:var(--on-dark-2); line-height:var(--lh-normal); flex:1}.clm__p{margin-top:var(--s-3); padding-top:var(--s-3); border-top:1px solid rgba(255,255,255,.12);
  font:400 10px/1.5 var(--font-mono); color:var(--on-dark-3)}.clm__p b{color:var(--red-300); font-weight:500}.exp{margin-top:var(--s-7); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md);
  background:rgba(0,0,0,.16); overflow:hidden}.exp__b{display:flex; align-items:center; gap:var(--s-3); width:100%; text-align:left;
  padding:var(--s-4) var(--s-5); min-height:60px; color:#fff;
  font:600 var(--fs-body-sm)/1.3 var(--font-sans)}.exp__b:hover{background:rgba(255,255,255,.04)}.exp__b .wk-nav__cv{margin-left:auto; color:var(--on-dark-3);
  transition:transform var(--dur-2) var(--ease)}.exp__b[aria-expanded="true"] .wk-nav__cv{transform:rotate(180deg); color:var(--red-300)}.exp__b i{font-style:normal; font:400 10px/1 var(--font-mono); color:var(--on-dark-3);
  letter-spacing:.08em}.exp__p{display:none; padding:0 var(--s-5) var(--s-6); border-top:1px solid rgba(255,255,255,.12)}.exp__p[data-open="true"]{display:block}.exp__grid{display:grid; gap:var(--s-6); padding-top:var(--s-6)}@media (min-width:1080px){.exp__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-8)}}/* ==========================================================================
   ORBIT GLOBE
   ========================================================================== */.globe{position:relative; border:1px solid var(--border-subtle); border-radius:var(--r-md);
  background:var(--void); overflow:hidden}.globe canvas{width:100%; height:auto; display:block}.globe__r{position:absolute; right:var(--s-4); top:var(--s-4); text-align:right;
  font:400 10px/1.5 var(--font-mono); color:var(--on-dark-3)}.globe__r b{color:#fff; font-weight:500}/* ==========================================================================
   MEDIA RAIL
   ========================================================================== */.wk-media{background:var(--void); color:#fff; padding-block:var(--s-8)}@media (min-width:768px){.wk-media{padding-block:var(--s-9)}}.wk-media__hd{display:flex; align-items:flex-end; gap:var(--s-5); flex-wrap:wrap; margin-bottom:var(--s-6)}.wk-media__nav{margin-left:auto; display:flex; gap:var(--s-2)}.mnb{width:44px; height:44px; border-radius:var(--r-md); border:1px solid rgba(255,255,255,.24);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease)}.mnb:hover{background:rgba(255,255,255,.10); border-color:#fff}.mnb[disabled]{opacity:.35; cursor:default}.rail{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,1fr);
  gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; padding-bottom:var(--s-4)}.rail::-webkit-scrollbar{display:none}@media (min-width:1080px){.rail{grid-auto-columns:minmax(320px,1fr)}}.mc{scroll-snap-align:start; display:flex; flex-direction:column; gap:var(--s-3);
  color:#fff; min-width:0}
.mc__a{display:contents}.mc--feat{grid-row:span 1}@media (min-width:1080px){/* [was] .mc--feat{grid-column:span 2} — with real photography in every tile,
   a double-width first card pushed its caption 170px below the others. */}.mc__ph{position:relative; aspect-ratio:16/9; border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-md); overflow:hidden; background-color:#0F2340;
  background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.05) 10px 20px);
  display:flex; align-items:center; justify-content:center;
  transition:border-color var(--dur-2) var(--ease)}.mc:hover .mc__ph{border-color:rgba(255,255,255,.4)}/* Photograph or video poster fills the tile; the striped panel underneath is
   the loading state. object-position is tuned per image, inline. */.mc__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* .mc__a below keeps the anchor out of the layout */
  display:block; transition:transform var(--dur-3) var(--ease)}.mc:hover .mc__img{transform:scale(1.035)}.mc__ph iframe{position:absolute; inset:0; width:100%; height:100%; border:0}.mc__play{position:absolute; inset:0; margin:auto; width:56px; height:56px;
  border-radius:50%; background:rgba(6,13,24,.66); border:1px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center; color:#fff;
  backdrop-filter:blur(3px);
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease)}.mc:hover .mc__play{transform:scale(1.08)}.mc:hover .mc__play{background:var(--red-600); border-color:var(--red-600)}.mc__out{font:600 10px/1 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-300)}.mc__t{font:600 var(--fs-body)/1.3 var(--font-sans); color:#fff}.mc:hover .mc__t{text-decoration:underline; text-underline-offset:3px}.mc__d{font:400 10px/1.4 var(--font-mono); color:var(--on-dark-3)}.railbar{height:2px; background:rgba(255,255,255,.14); position:relative; margin-top:var(--s-2)}.railbar__i{position:absolute; inset:0 auto 0 0; background:var(--red-600); width:22%;
  transition:width var(--dur-2) var(--ease), transform var(--dur-2) var(--ease)}/* ==========================================================================
   CONTACT — direct contacts column
   ========================================================================== */.dcs{display:grid; gap:var(--s-3); margin-top:var(--s-6)}.dc{display:flex; gap:var(--s-4); align-items:flex-start; padding:var(--s-4);
  border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-1)}.dc__i{flex:0 0 auto; width:36px; height:36px; border-radius:var(--r-sm);
  background:var(--red-050); color:var(--red-600); display:flex;
  align-items:center; justify-content:center}.dc__k{font:600 10px/1.2 var(--font-mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-3)}.dc__v{font-weight:600; font-size:var(--fs-body-sm); margin-top:5px}.dc__v a{color:var(--accent-text)}.dc__v a:hover{text-decoration:underline}.dc__n{font:400 var(--fs-caption)/1.4 var(--font-sans); color:var(--fg-3); margin-top:3px}/* routing now lives inside the form as its first field */.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)}/* ---- retire v2 pieces ---- */
/* ==========================================================================
   v4 — hero anchor diagram, architecture restructure
   ========================================================================== *//* ---- Hero: "one anchor, everything above it" ---------------------------- */.anch{position:relative; width:100%; max-width:620px; margin-inline:auto}@media (min-width:1080px){.anch{max-width:none}}.anch > svg{width:100%; height:auto; display:block; overflow:visible}.anch .an-ic{overflow:hidden; pointer-events:none}.an-path{fill:none; stroke:rgba(255,255,255,.22); stroke-width:1.4; stroke-linecap:round;
  transition:stroke var(--dur-2) var(--ease), stroke-width var(--dur-2) var(--ease)}.an-node[data-on="true"] ~ .an-path{stroke:var(--red-400)}.an-g[data-on="true"] .an-path{stroke:var(--red-400); stroke-width:2}.an-node{cursor:pointer; outline:none}.an-ring{fill:rgba(255,255,255,.04); stroke:rgba(255,255,255,.26); stroke-width:1.4;
  transition:fill var(--dur-2) var(--ease), stroke var(--dur-2) var(--ease), r var(--dur-2) var(--ease)}.an-node:hover .an-ring{stroke:rgba(255,255,255,.6)}.an-node[data-on="true"] .an-ring{fill:rgba(237,28,36,.16); stroke:var(--red-400)}.an-node:focus-visible .an-ring{stroke:#fff; stroke-width:2.4}.an-ic{color:rgba(255,255,255,.72); transition:color var(--dur-2) var(--ease); pointer-events:none}.an-node[data-on="true"] .an-ic{color:#fff}.an-lb{font:500 12px/1 var(--font-sans); fill:rgba(255,255,255,.6); text-anchor:middle;
  transition:fill var(--dur-2) var(--ease); pointer-events:none}.an-node[data-on="true"] .an-lb{fill:#fff}.an-core{fill:var(--red)}.an-halo{fill:rgba(237,28,36,.16)}.an-coret{font:700 13px/1 var(--font-display); fill:#fff; text-anchor:middle; letter-spacing:-.01em}.an-pulse{fill:#fff}/* All seven captions occupy the same grid cell, so the block is always as tall
   as the longest one. Nothing above it can shift when the selection changes. */.anch__caps{display:grid; margin-top:var(--s-4); padding-top:var(--s-4);
  border-top:1px solid rgba(255,255,255,.14)}.anch__cap{grid-area:1/1; visibility:hidden; opacity:0;
  transition:opacity var(--dur-2) var(--ease), visibility var(--dur-2)}.anch__cap[data-on="true"]{visibility:visible; opacity:1}.anch__capk{font:600 10px/1.2 var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--red-300)}.anch__capv{font-size:var(--fs-body); line-height:var(--lh-normal); color:var(--on-dark-1);
  margin-top:var(--s-2); max-width:52ch}.anch__capa{margin-top:var(--s-3); font:400 11px/1.4 var(--font-mono); color:var(--on-dark-3);
  letter-spacing:.04em}.anch__capa a{color:var(--red-300); font-weight:500}.anch__capa a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}@media (prefers-reduced-motion:reduce){.an-path{stroke-dasharray:none!important; stroke-dashoffset:0!important}}/* ---- Architecture: the whole left column pins, title included ----------- */@media (min-width:1080px){.arch{grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:var(--s-8)}.arch__rail{position:sticky; top:127px; max-height:calc(100vh - 147px);
    display:flex; flex-direction:column; gap:var(--s-5)}}.arch__head .h2{margin-bottom:var(--s-3)}.arch__head p{font-size:var(--fs-body-sm); color:var(--fg-2); line-height:var(--lh-normal)}.plate{padding:var(--s-3) var(--s-4); gap:var(--s-3)}.plate__ic{width:36px; height:36px}.plate__n{font-size:var(--fs-body)}.plate__s{font-size:10px}/* every layer visual shares one ratio */.lv{aspect-ratio:16/9; min-height:0!important; width:100%}.shot{margin:0; border:1px solid var(--border-subtle); border-radius:var(--r-md);
  overflow:hidden; background:var(--fog); position:relative}.shot img{width:100%; height:100%; object-fit:cover; display:block}
.blk .shot, .blk .globe{margin-top:var(--s-3)}.shot figcaption{position:absolute; left:var(--s-3); bottom:var(--s-3);
  font:400 10px/1.4 var(--font-mono); color:#fff; letter-spacing:.05em;
  background:rgba(6,13,24,.72); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-sm); padding:5px 8px; backdrop-filter:blur(2px)}/* Product renders arrive on white, so they letterbox rather than crop and the
   caption plate inverts. */.shot--prod{background:#fff}.shot--prod img{object-fit:contain}.shot--prod figcaption{color:var(--fg-2); background:rgba(255,255,255,.88);
  border-color:var(--mist)}.globe{aspect-ratio:16/9}.globe canvas{height:100%; object-fit:cover}/* ---- certificate panel, relocated into the technical expander ---------- */.exp .cp{border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.03)}.exp .cp__hd{padding:var(--s-3) var(--s-4)}.exp .cp__chain{padding:var(--s-4) var(--s-4) var(--s-3)}.exp .cp__fields{padding:0 var(--s-4) var(--s-4)}
/* ---------- Chế độ giữ header/footer cũ ---------- */
/*
 * Ở chế độ đầy đủ, CSS của Elementor bị gỡ nên `.e-con` không có luật nào —
 * design system tự quyết toàn bộ layout. Ở chế độ trộn thì không gỡ được, vì
 * header/footer cũ cũng dựng bằng Elementor và ElementsKit.
 *
 * Nên tái lập đúng tình trạng đó, nhưng CHỈ bên trong vùng nội dung mới:
 * Elementor đặt mọi thứ qua biến CSS, nên trả các biến về mặc định trình duyệt
 * là container hết áp layout riêng. Header/footer cũ nằm ngoài `.wk26-scope`
 * nên không bị đụng.
 *
 * Selector này vô hại ở chế độ đầy đủ: ở đó không có phần tử `.wk26-scope`.
 */
.wk26-scope :where(.e-con){display:block; width:auto; height:auto; min-height:0; max-width:none; overflow:visible; position:static; z-index:auto; border-radius:0; padding:0; margin:0; gap:0; flex:0 1 auto; flex-direction:row}
/* Widget cũng có bộ mặc định riêng của Elementor (`max-width:100%`,
   `position:relative`, và cả `flex-direction:column`) mà ở chế độ đầy đủ không
   tồn tại. `position:relative` là cái đáng ngại nhất: nó biến widget thành gốc
   toạ độ, nên phần tử con dùng `position:absolute` sẽ neo nhầm chỗ.
   Dùng `:where()` để mọi luật của wk26 vẫn ghi đè được. */
.wk26-scope :where(.elementor-widget){max-width:none; position:static; flex-direction:row}
/* Luật hướng của Elementor nằm ở (0,2,0) nên `:where()` không với tới. Hướng
   đặt qua biến `--flex-direction` — sửa ngay ở biến thì cả `.e-con-full` lẫn
   `> .e-con-inner` cùng theo.
 *
 * Còn `max-width:100%` của Elementor thì CỐ Ý để nguyên. Đo được nó không đổi
 * kích thước nào cả (mọi phần tử vốn đã hẹp hơn khung chứa), mà bản vá bằng
 * selector đủ mạnh để thắng nó lại vô tình đè chết `max-width:1320px` của
 * `.wrap` và làm cả trang rộng ra 120px. Khác biệt vô hại thì để yên. */
.wk26-scope .e-con.e-flex{--flex-direction:row}

/*
 * Reset trên chỉ bọc `.e-con` (container). Còn một lớp nữa lọt lưới: **widget**.
 * Đo trên trang trộn thấy bốn chỗ lệch so với trang dùng template đầy đủ —
 * đều do CSS bên ngoài thắng về độ ưu tiên chứ không phải design sai:
 *
 *   .head       mất margin-bottom 64px  <- Elementor: .e-con .elementor-widget.elementor-widget{margin-block-end:0}  (0,3,0)
 *   .shot       mất margin-top 12px     <- Elementor: .elementor .elementor-widget:not(…){margin:0}, cùng (0,3,0) nhưng nạp sau
 *   .logos__c   thừa gap 20px           <- Elementor: gap:var(--row-gap) var(--column-gap), mặc định của kit
 *   label       thừa margin-bottom 8px  <- Bootstrap của theme cũ: label{margin-bottom:.5rem}
 *
 * Hai cái đầu phải nâng độ ưu tiên lên (0,4,0) để thắng dứt điểm, không phụ
 * thuộc thứ tự nạp. Hai cái sau dùng `:where()` (độ ưu tiên 0) để chỉ chặn mặc
 * định của bên ngoài, còn luật nào của wk26 cũng vẫn thắng được.
 */
.wk26-scope .e-con .elementor-widget.head{margin-block-end:var(--s-8)}
/* `.shot` là <figure>, mà luật của Elementor nhắm nó có cả tên thẻ:
   `.elementor .elementor-widget:not(…):not(…) figure` — bốn class + một thẻ,
   tức (0,4,1). Phải hơn hẳn chứ không hoà, nên dùng ba lần `.shot` = (0,5,0).
   `.globe` là <div> nên luật kia không với tới, để nguyên mức cũ. */
.wk26-scope .blk .shot.shot.shot{margin-top:var(--s-3)}
.wk26-scope .blk .globe.globe{margin-top:var(--s-3)}
.wk26-scope :where(.elementor-widget){gap:0}
.wk26-scope :where(label){margin-bottom:0; display:inline}
/*
 * Typography toàn cục của Elementor Kit (`--e-global-typography-*`, mặc định
 * Roboto) áp thẳng lên widget: `.elementor-widget-text-editor{font-family:…}`
 * và `.elementor-widget-heading .elementor-heading-title{font-family/size/weight:…}`.
 *
 * Ở chế độ đầy đủ, allowlist gỡ luôn mấy stylesheet đó nên widget của Elementor
 * rơi về mặc định trình duyệt và thừa kế font của design system. Chế độ trộn
 * không gỡ được, nên phải dựng lại đúng trạng thái ấy.
 *
 * Dùng `revert` chứ không phải `inherit` cho tiêu đề: đích đến là mặc định của
 * trình duyệt (h2 = 1.5em, bold), y như trang thuần — `inherit` sẽ cho ra 16px
 * và làm tiêu đề bẹp bằng chữ thường.
 */
.wk26-scope :where(.elementor-widget-container, .elementor-widget){font-family:inherit}
.wk26-scope .elementor-widget .elementor-heading-title{font-family:revert; font-size:revert; font-weight:revert; line-height:revert}

/* ---------- Trang nội dung: phần mở đầu ---------- */
/*
 * Đo trên bản dựng trước: đoạn văn chỉ cách nhau 12px nên hai đoạn dính thành
 * một khối, ảnh nằm sát đáy chữ đúng 0px, và chữ chỉ chiếm 646 trên 1256px nên
 * nửa phải trống hoác.
 *
 * `--split` chỉ bật từ 1080px trở lên: dưới ngưỡng đó hai cột mỗi cột còn quá
 * hẹp, xếp dọc đọc dễ hơn — và lúc đó `gap` lo luôn khoảng cách giữa chữ với
 * ảnh, chỗ trước đây bằng không.
 */
.wk-intro{display:grid; gap:var(--s-7); align-items:start}
.wk-intro > *{min-width:0}
.wk-intro p + p{margin-top:var(--s-5)}
@media (min-width:1080px){
  .wk-intro--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s-8)}
}