/*!
 * WISeKey 2026 — componentkkkkkkk
 * Bóc từ wisekey-web-redesign-master/index.html, giữ nguyên nội dung gốc.
 * Nguồn tham chiếu: component-library.html, WEBDEV_BRIEF.md
 */
/* ---------- Buttons ---------- */.wk-btn{display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-5); min-height:46px; border-radius:var(--r-md);
  font:600 var(--fs-body)/1 var(--font-sans); border:1px solid transparent;
  position:relative; overflow:hidden;
  transition:background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             color var(--dur-2) var(--ease)}.wk-btn--lg{padding:var(--s-4) var(--s-6); min-height:56px; font-size:var(--fs-body-lg)}.wk-btn--p{background:var(--red-600); color:#fff}.wk-btn--p:hover{background:var(--red-700)}.wk-btn--p:active{background:var(--red-800)}.wk-btn--g{border-color:var(--border-control); color:var(--fg-1); background:transparent}.wk-btn--g:hover{background:var(--bg-3)}.wk-btn--w{background:#fff; color:var(--black)}.wk-btn--w:hover{background:var(--fog)}.wk-btn--o{border-color:rgba(255,255,255,.45); color:#fff}.wk-btn--o:hover{background:rgba(255,255,255,.10); border-color:#fff}.wk-btn__ic{transition:transform var(--dur-2) var(--ease)}.wk-btn:hover .wk-btn__ic{transform:translateX(3px)}.lnk{display:inline-flex; align-items:center; gap:var(--s-2); min-height:32px;
  padding-block:var(--s-1); font-weight:600; color:var(--accent-text)}.lnk:hover{color:var(--red-800); text-decoration:underline; text-underline-offset:3px}.lnk svg, .wk-btn svg, .q__a svg, .mnb svg{flex:0 0 auto}
.lnk svg{transition:transform var(--dur-2) var(--ease)}.lnk:hover svg{transform:translateX(4px)}.lnk--dark{color:var(--red-300)}.lnk--dark:hover{color:#fff}
.lnks{display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-6)}
.lnks--tight{gap:var(--s-3)}
.lnks--mid{gap:var(--s-4); align-items:center}
.lnks--rule{padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.14)}
.lnk--bare{min-height:0}
.lnk--end{margin-left:auto}.tag{display:inline-block; font:600 10px/1.4 var(--font-mono); letter-spacing:.1em;
  text-transform:uppercase; padding:5px 9px; border-radius:var(--r-sm); white-space:nowrap}.tag--s{background:var(--red-600); color:#fff}.tag--o{border:1px solid var(--red-600); color:var(--red-600)}.tag--n{background:var(--fog); color:var(--fg-2)}.tag--d{background:var(--black); color:#fff}/* ---------- Cards.  [LATITUDE] adds a pointer-tracked highlight and a
   corner tick; still square-cornered (4px), 1px border, realistic shadow. -- */.wk-card{position:relative; background:var(--bg-1); border:1px solid var(--border-subtle);
  border-radius:var(--r-md); padding:var(--s-5); display:flex; flex-direction:column;
  gap:var(--s-3); overflow:hidden;
  transition:box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease)}.wk-card--i{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.14)}.wk-card--hov::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(237,28,36,.10), transparent 70%);
  transition:opacity var(--dur-2) var(--ease)}.wk-card--hov:hover::after{opacity:1}.wk-card--hov:hover{border-color:var(--steel); box-shadow:var(--shadow-2); transform:translateY(-2px)}.wk-card--i.card--hov:hover{border-color:rgba(255,255,255,.34); box-shadow:none}.wk-card__tick{position:absolute; top:0; right:0; width:0; height:1px; background:var(--red);
  transition:width var(--dur-3) var(--ease)}.wk-card--hov:hover .wk-card__tick{width:38px}.wk-card__t{font:700 var(--fs-h4)/var(--lh-snug) var(--font-display); letter-spacing:var(--tk-tight)}.wk-card__link{color:inherit; text-decoration:none}.wk-card__link::after{content:""; position:absolute; inset:0; z-index:1}.wk-card--hov:hover .wk-card__link{color:var(--accent-text)}.wk-card--i.card--hov:hover .wk-card__link{color:#fff}.wk-card__by{position:relative; z-index:2}.wk-card__by a{color:inherit; text-decoration:underline; text-decoration-color:var(--mist);
  text-underline-offset:2px}.wk-card__by a:hover{color:var(--accent-text); text-decoration-color:currentColor}.wk-card--i .wk-card__by a:hover{color:#fff}.wk-card .lnk{position:relative; z-index:0}.wk-card__b{font-size:var(--fs-body-sm); color:var(--fg-2); flex:1}.wk-card--i .wk-card__b{color:var(--on-dark-2)}.wk-grid{display:grid; gap:var(--s-4)}
/* Intrinsic grids. repeat(auto-fit, minmax(max(<min item>, (100% - gaps)/<max cols>), 1fr))
   caps the column count and lets the width decide the rest. No media queries. */@media (min-width:768px){.wk-grid--3{grid-template-columns:repeat(auto-fit,minmax(max(300px,(100% - 32px)/3),1fr))}}/* ---------- Placeholder blocks (kit §10 convention) ---------- *//* ==========================================================================
   BANNER / UTILITY / HEADER / MEGA
   ========================================================================== */.proto{background:var(--red-050); border-bottom:1px solid #F6C3C5; color:var(--red-800)}.proto__in{display:flex; gap:var(--s-3); align-items:center; padding-block:var(--s-2);
  min-height:32px; font:400 11px/1.4 var(--font-mono)}.proto b{font-weight:600}.util{background:var(--void); color:var(--on-dark-2); border-bottom:1px solid rgba(255,255,255,.08)}.util__in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:38px}.tks{display:flex; align-items:center; gap:var(--s-5)}.tk{display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap;
  font:500 11px/1 var(--font-mono); letter-spacing:.03em}.tk__s{color:#fff}.tk__v{color:var(--on-dark-3)}.tk__d{font-size:9px; color:var(--on-dark-3)}.tk__d--up{color:#5FD08C}.tk__d--dn{color:var(--red-300)}.tk__d--flat{color:var(--on-dark-3)}.tks{overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none}.tks::-webkit-scrollbar{display:none}.util__nav{display:none; align-items:center; gap:var(--s-4)}@media (min-width:1080px){.util__nav{display:flex}}.util__a{color:var(--on-dark-2); font:500 11px/1 var(--font-mono); letter-spacing:.06em;
  text-transform:uppercase; padding:var(--s-2) 0; min-height:32px; display:inline-flex; align-items:center}.util__a:hover{color:#fff}.hdr{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.6) blur(12px); -webkit-backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--border-subtle);
  transition:box-shadow var(--dur-2) var(--ease)}.hdr[data-stuck="true"]{box-shadow:var(--shadow-2)}.hdr__in{display:flex; align-items:center; gap:var(--s-4); min-height:72px}.hdr__logo{display:inline-flex; align-items:center; padding:var(--s-2) 0; flex:0 0 auto}.hdr__logo svg{width:172px; height:auto; color:var(--red)}@media (min-width:360px){.hdr__logo svg{width:206px}}@media (min-width:768px){.hdr__logo svg{width:272px}}@media (min-width:1080px){.hdr__logo svg{width:196px}}@media (min-width:1280px){.hdr__logo svg{width:288px}}.hdr__sp{flex:1 1 auto}.hdr__act{display:flex; align-items:center; gap:var(--s-2); flex:0 0 auto}.ib{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:var(--r-md); color:var(--fg-2); transition:background-color var(--dur-1) var(--ease)}.ib:hover{background:var(--bg-3); color:var(--fg-1)}.hdr__cta{display:none}@media (min-width:1080px){.hdr__cta{display:inline-flex}}.wk-nav{display:none}@media (min-width:1080px){.wk-nav{display:block}}.wk-nav__ul{display:flex; align-items:center; gap:2px}.wk-nav__b{display:inline-flex; align-items:center; gap:6px; padding:var(--s-3) var(--s-4);
  min-height:44px; border-radius:var(--r-md); font:600 var(--fs-body-sm)/1 var(--font-sans);
  color:var(--fg-1); position:relative;
  transition:color var(--dur-1) var(--ease)}.wk-nav__b::after{content:""; position:absolute; left:var(--s-4); right:var(--s-4); bottom:6px;
  height:1.5px; background:var(--red); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-2) var(--ease)}.wk-nav__b:hover::after,.wk-nav__b[aria-expanded="true"]::after{transform:scaleX(1)}.wk-nav__b[aria-expanded="true"]{color:var(--accent-text)}.wk-nav__cv{color:var(--fg-3); flex:0 0 auto;
  transition:transform var(--dur-2) var(--ease)}.wk-nav__b[aria-expanded="true"] .wk-nav__cv{transform:rotate(180deg); color:var(--accent-text)}.mega{position:absolute; left:0; right:0; top:100%; background:var(--bg-1);
  border-bottom:1px solid var(--border-subtle); box-shadow:var(--shadow-3);
  padding-block:var(--s-7) var(--s-6); display:none}.mega[data-open="true"]{display:block; animation:megaIn var(--dur-2) var(--ease) both}@keyframes megaIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}.mega__g{display:grid; gap:var(--s-6) var(--s-7); grid-template-columns:repeat(4,minmax(0,1fr))}.mega__ct{font:600 var(--fs-caption)/1.2 var(--font-mono); letter-spacing:var(--tk-eyebrow);
  text-transform:uppercase; color:var(--fg-3); margin:0 0 var(--s-4);
  padding-bottom:var(--s-3); border-bottom:1px solid var(--border-subtle)}.mega__l{display:grid; gap:2px}.mega__a{display:block; padding:var(--s-2) var(--s-3); margin-inline:calc(var(--s-3) * -1);
  border-radius:var(--r-md); color:var(--fg-1); font-size:var(--fs-body-sm);
  transition:background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease)}.mega__a:hover{background:var(--bg-3); color:var(--accent-text)}.mega__a i{display:block; font:400 11px/1.4 var(--font-mono); font-style:normal;
  color:var(--fg-3); margin-top:2px}.mega__f{background:var(--navy-900); color:#fff; border-radius:var(--r-md);
  padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3);
  position:relative; overflow:hidden}.mega__f::before{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 100% 0%, rgba(237,28,36,.22), transparent 60%)}.mega__f > *{position:relative}.mega__f p{color:var(--on-dark-2); font-size:var(--fs-body-sm)}.mega__foot{display:flex; flex-wrap:wrap; gap:var(--s-5); align-items:center;
  margin-top:var(--s-6); padding-top:var(--s-4); border-top:1px solid var(--border-subtle)}.brg{display:inline-flex}@media (min-width:1080px){.brg{display:none}}.dr{position:fixed; inset:0; z-index:150; display:none}.dr[data-open="true"]{display:block}.dr__sc{position:absolute; inset:0; background:rgba(6,13,24,.6);
  animation:fade var(--dur-2) var(--ease) both}@keyframes fade{from{opacity:0}to{opacity:1}}.dr__p{position:absolute; inset:0 0 0 auto; width:min(440px,100%); background:var(--bg-1);
  display:flex; flex-direction:column; overflow-y:auto;
  animation:slide var(--dur-3) var(--ease) both}@keyframes slide{from{transform:translateX(100%)}to{transform:none}}.dr__h{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-4); border-bottom:1px solid var(--border-subtle);
  position:sticky; top:0; background:var(--bg-1); z-index:2}.dr__h svg.lg{width:236px; color:var(--red)}.dr__b{padding:var(--s-4) var(--s-4) var(--s-9)}.ac{border-bottom:1px solid var(--border-subtle)}.ac__b{display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  width:100%; padding:var(--s-4) 0; min-height:58px; text-align:left;
  font:700 var(--fs-h4)/1.2 var(--font-display); color:var(--fg-1)}.ac__b[aria-expanded="true"]{color:var(--accent-text)}.ac__b .wk-nav__cv{transition:transform var(--dur-2) var(--ease)}.ac__b[aria-expanded="true"] .wk-nav__cv{transform:rotate(180deg)}.ac__p{display:none; padding-bottom:var(--s-4)}.ac__p[data-open="true"]{display:block}.ac__g{margin-bottom:var(--s-5)}.ac__gt{font:600 var(--fs-caption)/1.2 var(--font-mono); letter-spacing:var(--tk-eyebrow);
  text-transform:uppercase; color:var(--fg-3); margin:0 0 var(--s-2)}.ac__a{display:block; padding:var(--s-3) 0; min-height:46px; color:var(--fg-1); font-size:var(--fs-body)}.ac__a:hover{color:var(--accent-text)}.dr__cta{display:grid; gap:var(--s-3); margin-top:var(--s-6)}/* ==========================================================================
   HERO — full-bleed dark with a live canvas instrument.
   [LATITUDE] The kit forbids gradients and limits motion. This hero uses a
   radial depth wash and an animated canvas because the brief asks for a
   modern deep-tech edge and a "wow" moment. It is not decoration: the
   instrument literally diagrams the proposition — a central Root of Trust
   with silicon / identity / network rings attesting back to it. Frozen to a
   composed static frame under prefers-reduced-motion.
   ========================================================================== */.wk-hero{position:relative; background:var(--void); color:#fff; overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.10)}.wk-hero__wash{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 78% 34%, rgba(21,50,92,.55), transparent 62%),
    radial-gradient(46% 42% at 82% 40%, rgba(237,28,36,.16), transparent 66%),
    linear-gradient(180deg, rgba(6,13,24,0) 55%, rgba(6,13,24,.85) 100%)}.wk-hero__grid{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000 40%, transparent 100%)}.wk-hero__in{position:relative; z-index:2; padding-block:var(--s-8) var(--s-7)}@media (min-width:768px){.wk-hero__in{padding-block:var(--s-9) var(--s-8)}}@media (min-width:1080px){.wk-hero__in{padding-block:var(--s-10) var(--s-9)}}.wk-hero__cols{display:grid; gap:var(--s-7)}@media (min-width:1080px){.wk-hero__cols{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:var(--s-8); align-items:center}}.wk-hero__t{margin:0 0 var(--s-5); max-width:19ch}.wk-hero__t{color:#fff}.wk-hero__t .hi{color:var(--red);
  /* 4.38:1 against #060D18 -> large display text only, 3:1 bar */ }.wk-hero__lead{color:var(--on-dark-2); font-size:var(--fs-body-lg);
  line-height:var(--lh-relaxed); max-width:56ch}.wk-hero__cta{display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:var(--s-6)}.wk-hero__cta .wk-btn{flex:1 1 auto; min-width:210px}@media (min-width:768px){.wk-hero__cta .wk-btn{flex:0 0 auto}}.wk-hero__chips{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); margin-top:var(--s-7);
  padding-top:var(--s-5); border-top:1px solid rgba(255,255,255,.14)}.chip{display:inline-flex; align-items:center; gap:var(--s-2);
  font:400 11px/1.3 var(--font-mono); color:var(--on-dark-2); letter-spacing:.02em}.chip svg{color:var(--red-400); flex:0 0 auto}/* --- the instrument --- *//* ==========================================================================
   STAT BAND
   ========================================================================== */.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(max(216px,(100% - 32px)/3),1fr))}.st{padding:var(--s-5) var(--s-4) var(--s-5) 0; border-top:2px solid var(--ink);
  position:relative}@media (min-width:1080px){.stats{grid-template-columns:repeat(5,minmax(0,1fr))}
  .st{padding-right:var(--s-6)}}.st__n{font:800 clamp(34px,4.6vw,56px)/1 var(--font-display); letter-spacing:-.03em;
  color:var(--red)}/* large text -> 3:1 bar, 4.38:1 passes */.st__l{font-size:var(--fs-body-sm); color:var(--fg-2); margin-top:var(--s-3); line-height:1.35}.st__m{font:400 10px/1.4 var(--font-mono); color:var(--fg-3); margin-top:var(--s-2);
  letter-spacing:.04em}.st__bar{position:absolute; left:0; top:-2px; height:2px; width:100%; background:var(--red);
  transition:width var(--dur-4) var(--ease-io)}.js .st__bar{width:0}.js .st.in .st__bar{width:100%}/* ==========================================================================
   ARCHITECTURE — sticky stack diagram, scroll-synced to the content blocks.
   [LATITUDE] scroll-driven active state. Not parallax and not scroll-jacking:
   the page scrolls normally, only the diagram's highlight follows. Clicking a
   plate is an equivalent non-scroll route for keyboard and reduced-motion.
   ========================================================================== */.arch{display:grid; gap:var(--s-7)}@media (min-width:1080px){.arch{grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:var(--s-9); align-items:start}}.arch__rail{position:relative}.stack{display:grid; gap:var(--s-2)}.plate{display:flex; align-items:center; gap:var(--s-4); width:100%; text-align:left;
  padding:var(--s-4); border:1px solid var(--border-subtle); border-radius:var(--r-md);
  background:var(--bg-1); position:relative; overflow:hidden;
  transition:border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease),
             transform var(--dur-2) var(--ease)}.plate:hover{border-color:var(--steel)}.plate__ix{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red);
  transform:scaleY(0); transform-origin:top; transition:transform var(--dur-3) var(--ease)}.plate[aria-current="true"]{border-color:var(--ink); background:var(--bg-1);
  box-shadow:var(--shadow-2); transform:translateX(4px)}.plate[aria-current="true"] .plate__ix{transform:scaleY(1)}.plate__ic{flex:0 0 auto; width:42px; height:42px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--fog); color:var(--fg-2); transition:all var(--dur-2) var(--ease)}.plate[aria-current="true"] .plate__ic{background:var(--red-050); color:var(--red-600)}.plate__tx{min-width:0; display:block}.plate__k{display:block; font:600 10px/1.2 var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3)}.plate__n{display:block; font:700 var(--fs-h4)/1.2 var(--font-display);
  letter-spacing:var(--tk-tight); margin-top:3px}.plate__s{display:block; font:400 11px/1.4 var(--font-mono); color:var(--fg-3); margin-top:4px}.plate--anchor{background:var(--navy-900); border-color:var(--navy-2); color:#fff}.plate--anchor .plate__k{color:var(--red-300)}
.plate--anchor .plate__n{color:#fff}.plate--anchor .plate__s{color:var(--on-dark-3)}.plate--anchor .plate__ic{background:rgba(237,28,36,.22); color:#fff}.plate--anchor:hover{border-color:var(--red-400)}
.plate__go{margin-left:auto; color:var(--red-300)}.arch__blocks{display:grid; gap:var(--s-8)}.blk{scroll-margin-top:0}.blk__h{display:flex; align-items:baseline; gap:var(--s-4); margin-bottom:var(--s-4)}.blk__ix{font:500 var(--fs-caption)/1 var(--font-mono); color:var(--fg-3); letter-spacing:.1em}.blk__specs{display:grid; gap:var(--s-3); margin-top:var(--s-5);
  grid-template-columns:repeat(auto-fit,minmax(max(196px,(100% - 12px)/2),1fr))}.spec{border:1px solid var(--border-subtle); border-radius:var(--r-md);
  padding:var(--s-4); background:var(--bg-1)}.spec__k{font:400 10px/1.2 var(--font-mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--fg-3)}.spec__v{font:700 var(--fs-body)/1.25 var(--font-display); margin-top:6px; letter-spacing:var(--tk-tight)}.bul{display:grid; gap:var(--s-2); margin-top:var(--s-4)}.bul li{display:flex; gap:var(--s-3); font-size:var(--fs-body-sm); color:var(--fg-2)}.bul svg{flex:0 0 auto; color:var(--red-600); margin-top:3px}.blk__by{margin-top:var(--s-4); padding-top:var(--s-4); border-top:1px solid var(--border-subtle);
  /* placed after .blk__specs / .blk__by */
  font-size:var(--fs-body-sm); color:var(--fg-2); line-height:var(--lh-normal)}.blk__by a{font-weight:600}.wk-card__by{margin-top:auto; padding-top:var(--s-3); border-top:1px solid var(--border-subtle);
  font:400 10px/1.4 var(--font-mono); color:var(--fg-3); letter-spacing:.04em}.wk-card__by b{color:var(--fg-2); font-weight:500}.wk-card--i .wk-card__by{border-top-color:rgba(255,255,255,.14); color:var(--on-dark-3)}
.wk-card--i{background:var(--navy-900); border-color:var(--navy-2)}
.wk-card--i .wk-card__t, .wk-card--i .wk-card__t .wk-card__link{color:#fff}.wk-card--i .wk-card__by b{color:var(--on-dark-2)}/* --- Ground-track plot: SVG graticule with animated satellite passes.
   Illustrative orbital geometry, not a data claim. --- */@keyframes gt{0%{stroke-dashoffset:var(--len)}55%{stroke-dashoffset:0}
  75%{stroke-dashoffset:0; opacity:1}100%{stroke-dashoffset:0; opacity:0}}/* ==========================================================================
   CERTIFICATE CHAIN VISUALISER
   ========================================================================== *//* ==========================================================================
   POST-QUANTUM TIMELINE
   ========================================================================== */.tl{position:relative; margin-top:var(--s-5); padding:0 0 0 30px}
.tl::before{content:""; position:absolute; left:5px; top:8px; bottom:8px; width:1px;
  background:rgba(255,255,255,.20)}.tl__items{display:grid; grid-template-columns:1fr; gap:var(--s-6)}.tli{position:relative}.tli::before{content:""; position:absolute; left:-30px; top:5px; width:11px; height:11px;
  border-radius:50%; background:var(--navy-900); border:1.5px solid rgba(255,255,255,.34)}.tli--done::before{background:var(--red); border-color:var(--red)}.tli__y{font:600 var(--fs-h4)/1.1 var(--font-display); color:#fff; letter-spacing:var(--tk-tight)}.tli__t{font:400 var(--fs-body-sm)/var(--lh-normal) var(--font-sans); color:var(--on-dark-2); margin-top:6px}.tli__n{font:400 10px/1.4 var(--font-mono); color:var(--on-dark-3); margin-top:4px}/* ==========================================================================
   SOLUTION TABS
   ========================================================================== */.tabs{display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-6);
  border-bottom:1px solid var(--border-subtle)}.tab{padding:var(--s-3) var(--s-4); min-height:46px; font:600 var(--fs-body-sm)/1 var(--font-sans);
  color:var(--fg-3); position:relative; display:inline-flex; align-items:center; gap:var(--s-2)}.tab:hover{color:var(--fg-1)}.tab[aria-selected="true"]{color:var(--fg-1)}.tab::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--red); transform:scaleX(0); transform-origin:center;
  transition:transform var(--dur-2) var(--ease)}.tab[aria-selected="true"]::after{transform:scaleX(1)}.tab__c{font:400 10px/1 var(--font-mono); color:var(--fg-3)}.panel[hidden]{display:none}.panel{animation:pIn var(--dur-3) var(--ease) both}@keyframes pIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}@media (prefers-reduced-motion:reduce){.panel{animation:none}}/* ==========================================================================
   GROUP — interactive structure
   ========================================================================== */.grp{display:grid; gap:var(--s-5)}.grp__p{border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--bg-1);
  box-shadow:var(--shadow-1); padding:var(--s-5); display:flex; flex-wrap:wrap;
  align-items:center; gap:var(--s-4) var(--s-5)}.grp__p svg.lg{width: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 svg.lg{width:288px; 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)}
}