/* Wistorix hero orbit · vòng quỹ đạo 4 module, vòng lặp 24 giây
   Cặp đôi: assets/wistorix-hero-orbit.js
   Bản này đã chỉnh cho NỀN NAVY của hero: vành, chữ nhãn chương và chữ badge đổi sang tông sáng.

   Mọi mốc thời gian nằm ở animation-delay hoặc --in/--out, sửa số ở đó là đủ.
   0.00-0.30  logo lật quanh trục Y 78deg → 0
   0.90-1.50  logo thu 158% → 100%
   1.30-2.40  3 vành nở từ tâm 44% → 100%
   2.40/2.60/2.80/3.00  4 badge hiện so le
   3.20-4.60  badge quay -185deg rồi dừng hẳn
   4.50-5.15  mặt phẳng nghiêng 0 → 24,4deg quanh trục -48deg
   5.60-6.30  cả hệ thu nhỏ và mờ đi, badge 1 phóng ra giữa
   6.40-7.00  card bay lên góc trái trên thành nhãn chương
   7.0 / 11.0 / 15.0 / 19.5  bốn module
   23.5-24.0  mờ dần rồi lặp lại

   KHÔNG dùng preserve-3d hay rotateX: Chrome cắt chéo badge khi lồng 3D.
   Nghiêng bằng phép chiếu 2D scaleY, badge bù ngược bằng 1/cos nên luôn đứng thẳng. */

.wxo{--tilt:-48deg;--sy:.9103;--isy:1.0985;--k:1;
  --oline:rgba(255,255,255,.26);
  /* Ba num chinh ti le. San khau van 640 nen hinh hoc goc khong doi,
     chi thay do lon tuong doi cua hai pha:
     --rs  co vanh quy dao (1 = dung nguyen spec, nho hon thi quy dao gon lai)
     --rr  ban kinh dat badge, phai bang 452/2 * rs thi badge moi nam dung tren vanh giua
     --lap be ngang laptop trong san khau, tang len thi man hinh app to va doc duoc */
  --rs:.82; --rr:185px; --lap:548px;
  /* Day trong tam quy dao chech len goc trai thay vi dat chinh giua o vuong.
     Ca he vanh lan logo loi cung dung mot cap --ox --oy nen tam khong bi lech nhau. */
  --ox:-52px; --oy:-44px;
  width:100%;max-width:660px;aspect-ratio:1/.84;margin:0 auto;
  display:grid;place-items:center;position:relative;pointer-events:none}
.wxo-stage{position:absolute;width:640px;height:640px;transform:scale(var(--k));transform-origin:50% 50%}

/* ===== mặt phẳng quỹ đạo ===== */
.wxo-plane{position:absolute;inset:0;display:grid;place-items:center;
  transform:rotate(var(--tilt)) scaleY(1);
  animation:wxo-tilt .65s cubic-bezier(.55,0,.2,1) 4.50s both}
@keyframes wxo-tilt{to{transform:rotate(var(--tilt)) scaleY(var(--sy))}}
.wxo-rings{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(.44);
  animation:wxo-bloom 1.1s cubic-bezier(.16,1,.3,1) 1.30s both}
@keyframes wxo-bloom{to{opacity:1;transform:scale(var(--rs))}}
.wxo-ring{position:absolute;border:1px solid var(--oline);border-radius:50%}
.wxo-r1{width:640px;height:640px}.wxo-r2{width:452px;height:452px}.wxo-r3{width:282px;height:282px}
/* cung sáng vẽ bằng SVG dasharray, không dùng conic-gradient vì răng cưa */
.wxo-arcs{position:absolute;width:640px;height:640px;overflow:visible}
.wxo-arcs circle{fill:none;stroke:url(#wxoGa);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wxo-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:#2AD2FF;
  box-shadow:0 0 12px rgba(42,210,255,.7)}

/* ===== badge trên quỹ đạo ===== */
.wxo-orb{position:absolute;inset:0;display:grid;place-items:center}
.wxo-spin{position:absolute;width:0;height:0;transform:rotate(185deg);
  animation:wxo-spin 1.4s cubic-bezier(.17,.84,.3,1) 3.20s both}
@keyframes wxo-spin{to{transform:rotate(0deg)}}
.wxo-arm{position:absolute;transform:rotate(var(--s)) translateX(var(--rr))}
.wxo-unspin{position:absolute;transform:rotate(-185deg);
  animation:wxo-unspin 1.4s cubic-bezier(.17,.84,.3,1) 3.20s both}
@keyframes wxo-unspin{to{transform:rotate(0deg)}}
.wxo-flat{position:absolute;transform:rotate(calc(var(--s) * -1)) scaleY(1) rotate(48deg);
  animation:wxo-untilt .65s cubic-bezier(.55,0,.2,1) 4.50s both}
@keyframes wxo-untilt{to{transform:rotate(calc(var(--s) * -1)) scaleY(var(--isy)) rotate(48deg)}}
.wxo-badge{position:absolute;left:-56px;top:-22px;width:112px;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  opacity:0;transform:scale(.4);transform-origin:50% 22px;
  animation:wxo-pop .3s cubic-bezier(.2,1.3,.4,1) var(--pop) both}
@keyframes wxo-pop{to{opacity:1;transform:scale(1)}}
.wxo-badge b{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;
  text-shadow:0 2px 10px rgba(2,10,34,.55)}

/* ===== ô icon dùng chung: badge, nhãn chương, card giữa ===== */
.wxo-tile{width:44px;height:44px;border-radius:13px;flex:none;color:#fff;
  background:linear-gradient(135deg,#2AD2FF,#0052CD);
  display:grid;place-items:center;box-shadow:0 10px 22px rgba(0,40,120,.42)}
.wxo-tile .wxo-bi{width:22px;height:22px;stroke-width:1.7px}
.wxo-tile svg path,.wxo-tile svg rect{vector-effect:non-scaling-stroke}

/* cả hệ thu nhỏ trước khi vào chương */
.wxo-sys{position:absolute;inset:0;display:grid;place-items:center;
  transform:translate(var(--ox),var(--oy));
  animation:wxo-sysout .7s cubic-bezier(.55,0,.2,1) 5.60s both}
@keyframes wxo-sysout{to{opacity:0;transform:translate(var(--ox),var(--oy)) scale(.55);filter:blur(6px)}}

/* ===== logo lõi · chỉ sống ở phần quỹ đạo rồi tắt ===== */
.wxo-core{position:absolute;left:50%;top:50%;width:96px;height:96px;z-index:3;
  transform:translate(calc(-50% + var(--ox)),calc(-50% + var(--oy)))
            rotate(var(--tilt)) scaleY(1) rotate(calc(var(--tilt) * -1));
  animation:wxo-coretilt .65s cubic-bezier(.55,0,.2,1) 4.50s both,
            wxo-coreout .7s cubic-bezier(.55,0,.2,1) 5.60s both}
@keyframes wxo-coretilt{to{transform:translate(calc(-50% + var(--ox)),calc(-50% + var(--oy)))
            rotate(var(--tilt)) scaleY(var(--sy)) rotate(calc(var(--tilt) * -1))}}
@keyframes wxo-coreout{to{opacity:0;transform:translate(calc(-50% + var(--ox)),calc(-50% + var(--oy)))
            rotate(var(--tilt)) scaleY(calc(var(--sy) * .55)) rotate(calc(var(--tilt) * -1)) scale(.55)}}
.wxo-core img{width:96px;height:96px;border-radius:50%;background:#fff;display:block;
  box-shadow:0 12px 34px rgba(0,0,0,.35);
  animation:wxo-flip .3s cubic-bezier(.2,.9,.3,1) 0s both,
            wxo-shrink .6s cubic-bezier(.16,1,.3,1) .90s both}
@keyframes wxo-flip{from{transform:perspective(700px) rotateY(78deg)}to{transform:perspective(700px) rotateY(0)}}
@keyframes wxo-shrink{from{transform:scale(1.58)}to{transform:scale(1)}}

/* ===== nhãn chương góc trái trên ===== */
.wxo-labs{position:absolute;top:84px;left:34px;z-index:6}
.wxo-lab{position:absolute;top:0;left:0;display:flex;align-items:center;opacity:0;
  animation:wxo-labon .01s linear var(--in) both, wxo-laboff .01s linear calc(var(--out) + .4s) both}
@keyframes wxo-labon{to{opacity:1}}
@keyframes wxo-laboff{to{opacity:0}}
.wxo-li{position:relative;z-index:2;
  transform:perspective(600px) rotateY(-90deg);
  animation:wxo-liin .5s cubic-bezier(.2,.9,.3,1) var(--in) both,
            wxo-liout .4s ease-in var(--out) both}
@keyframes wxo-liin{to{transform:perspective(600px) rotateY(0)}}
@keyframes wxo-liout{to{transform:perspective(600px) rotateY(90deg)}}
.wxo-lw{position:relative;z-index:1;margin-left:-22px;overflow:hidden;padding-left:22px}
.wxo-lt{display:block;padding:2px 0 2px 30px;transform:translateX(-100%);
  animation:wxo-ltin .5s cubic-bezier(.16,1,.3,1) calc(var(--in) + .25s) both,
            wxo-ltout .35s ease-in calc(var(--out) - .1s) both}
@keyframes wxo-ltin{to{transform:translateX(0)}}
@keyframes wxo-ltout{to{transform:translateX(-100%)}}
.wxo-lt em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.wxo-lt b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;color:#fff;white-space:nowrap}

/* ===== chương: laptop + 2 card nổi ===== */
.wxo-chs{position:absolute;inset:0;display:grid;place-items:center;z-index:4}
.wxo-ch{position:absolute;width:640px;height:640px;display:grid;place-items:center;opacity:0;
  animation:wxo-chin .01s linear var(--in) both, wxo-chout .45s ease-in var(--out) both}
@keyframes wxo-chin{to{opacity:1}}
@keyframes wxo-chout{to{opacity:0}}
.wxo-lap{position:relative;width:var(--lap);transform:translateY(50px) scale(.94);opacity:0;
  animation:wxo-lapin .7s cubic-bezier(.16,1,.3,1) calc(var(--in) + .2s) both}
@keyframes wxo-lapin{to{transform:translateY(0) scale(1);opacity:1}}
.wxo-lid{display:block;border-radius:16px;padding:11px;background:linear-gradient(160deg,#e9edf7,#cfd8ea);
  box-shadow:0 26px 60px rgba(0,8,30,.42)}
/* ===== Khung man hinh: zoom vao tung tinh nang, co tro chuot chi vao =====
   Moi chuong khai 5 bien ngay tren the .wxo-ch trong index.html:
     --cx --cy  tam vung can zoom, tinh theo % cua khung anh LUC CHUA zoom
     --tx --ty --s  phep bien doi dua vung do ra giua khung
   Bon so nay do bang may tren anh goc 824x500, doi anh khac thi phai do lai.

   Nhip trong moi chuong, tinh tu --in:
     0.45s anh hien · 1.00s tro chuot hien o goc duoi phai
     1.00-1.50s tro chay toi vung can xem · 1.50s bam, gon song
     1.70-2.45s anh zoom vao, tro truot theo ve giua khung
     2.00s chu thich 1 · 2.45s chu thich 2
     3.30-3.80s zoom ra, tro mo di
   Dung `forwards` chu KHONG dung `both` cho cac lop sau, vi `both` se fill
   nguoc ve truoc do va de len lop dau. */
.wxo-cam{position:relative;display:block;overflow:hidden;border-radius:9px;background:#fff;
  width:calc(var(--lap) - 22px);height:calc((var(--lap) - 22px) / 1.648);
  opacity:0;transform:scale(1.04);
  animation:wxo-shot .6s cubic-bezier(.16,1,.3,1) calc(var(--in) + .45s) both}
@keyframes wxo-shot{to{opacity:1;transform:scale(1)}}
.wxo-lid img{display:block;width:100%;height:100%;border-radius:0;transform-origin:0 0;
  animation:wxo-zin .75s cubic-bezier(.5,0,.2,1) calc(var(--in) + 1.7s) both,
            wxo-zout .5s cubic-bezier(.5,0,.2,1) calc(var(--in) + 3.3s) forwards}
@keyframes wxo-zin{to{transform:translate(var(--tx),var(--ty)) scale(var(--s))}}
@keyframes wxo-zout{to{transform:none}}

.wxo-cur{position:absolute;left:78%;top:86%;width:25px;height:25px;margin:-3px 0 0 -5px;
  z-index:3;opacity:0;pointer-events:none;filter:drop-shadow(0 3px 7px rgba(0,8,30,.45));
  animation:wxo-curin .25s ease calc(var(--in) + 1.0s) both,
            wxo-curgo .5s cubic-bezier(.4,0,.2,1) calc(var(--in) + 1.0s) both,
            wxo-curmid .75s cubic-bezier(.5,0,.2,1) calc(var(--in) + 1.7s) forwards,
            wxo-curout .4s ease calc(var(--in) + 3.35s) forwards}
@keyframes wxo-curin{to{opacity:1}}
@keyframes wxo-curgo{to{left:var(--cx);top:var(--cy)}}
@keyframes wxo-curmid{to{left:50%;top:50%}}
@keyframes wxo-curout{to{opacity:0}}

.wxo-rip{position:absolute;left:var(--cx);top:var(--cy);width:0;height:0;z-index:2;
  border-radius:999px;border:2px solid rgba(214,253,112,.95);background:rgba(214,253,112,.18);
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  animation:wxo-rip .45s ease-out calc(var(--in) + 1.5s) both}
@keyframes wxo-rip{0%{width:6px;height:6px;opacity:.95}100%{width:62px;height:62px;opacity:0}}
.wxo-base{display:block;height:11px;margin:0 auto;width:88%;border-radius:0 0 11px 11px;
  background:linear-gradient(180deg,#cfd8ea,#93a1c0)}
.wxo-fc{position:absolute;background:#fff;border-radius:14px;padding:11px 14px;
  box-shadow:0 14px 34px rgba(0,8,30,.3);opacity:0;transform:translateY(10px) scale(.96)}
.wxo-fc b{display:block;font-size:14px;font-weight:800;color:#0A1B4A;white-space:nowrap}
.wxo-fc span{display:block;margin-top:2px;font-size:11.5px;color:#6b7ba6;white-space:nowrap}
.wxo-fc1{left:-30px;top:66%;animation:wxo-fcin .5s cubic-bezier(.16,1,.3,1) calc(var(--in) + 2.0s) both}
.wxo-fc2{right:-30px;top:20%;animation:wxo-fcin .5s cubic-bezier(.16,1,.3,1) calc(var(--in) + 2.45s) both}
@keyframes wxo-fcin{to{opacity:1;transform:none}}

/* card module 1 phóng ra giữa rồi bay lên góc trái */
.wxo-hero-card{position:absolute;left:50%;top:50%;margin:-75px 0 0 -75px;z-index:5;
  width:150px;height:150px;border-radius:26px;background:#fff;
  box-shadow:0 22px 50px rgba(0,8,30,.4);
  display:grid;place-items:center;align-content:center;gap:9px;opacity:0;
  animation:wxo-hcin .7s cubic-bezier(.16,1,.3,1) 5.60s both,
            wxo-hcout .6s cubic-bezier(.55,0,.2,1) 6.40s both}
.wxo-hero-card b{font-size:15px;font-weight:800;color:#0A1B4A}
.wxo-hc{width:56px;height:56px;border-radius:16px}
.wxo-hc .wxo-bi{width:28px;height:28px}
@keyframes wxo-hcin{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes wxo-hcout{to{opacity:0;transform:translate(-230px,-235px) scale(.3)}}

/* đồng hồ chủ 24s, JS bám vào đây để lặp và để tạm dừng khi ra khỏi màn hình */
.wxo-stage::after{content:"";position:absolute;width:1px;height:1px;opacity:0;
  animation:wxo-clock 24s linear infinite}
@keyframes wxo-clock{to{opacity:0}}

/* Hero tung bi ep cao bang gan het man hinh, ma cot chu chi cao 320px.
   Chan lai cho vua noi dung, phan thua o duoi bi cat bot. */
.wx-pin .section_hero{min-height:min(calc(100svh - 1.5rem),768px)}

/* Man rong: noi khung hero ra va cho san khau to len, khong de thua dat hai ben */
@media screen and (min-width:1500px){
  .wx-cols{width:min(1460px,94vw)}
  .wxo{max-width:760px}
}
@media screen and (max-width:991px){
  .wxo{max-width:min(520px,86vw)}
  .wxo-labs{top:70px;left:14px}
  .wxo-lt b{font-size:16px}
}

/* Điện thoại: chạy đủ chuỗi như desktop, chỉ đổi cách trình bày.
   Bỏ vỏ laptop và phóng riêng phần ảnh giao diện cho đọc được.
   Đưa tâm quỹ đạo về giữa khung: bản desktop lệch lên trái để nhường chỗ
   bốn chương ở góc dưới phải, trên điện thoại không còn chỗ đó nên phần
   lệch làm vòng quỹ đạo không thẳng trục với H1. */
@media screen and (max-width:767px){
  .wxo{--ox:0px;--oy:0px;--lap:576px;aspect-ratio:1;max-width:min(392px,92vw)}

  /* nhãn phụ chữ 11px, thu nhỏ nữa thì không đọc được */
  .wxo-labs{display:none}

  /* pha quỹ đạo: phóng badge và logo lõi cho cân với sân khấu đã thu nhỏ */
  .wxo-core,.wxo-core img{width:132px;height:132px}
  .wxo-tile{width:66px;height:66px;border-radius:19px}
  .wxo-tile .wxo-bi{width:33px;height:33px;stroke-width:2.4px}
  .wxo-badge{left:-84px;top:-33px;width:168px;gap:12px;transform-origin:50% 33px}
  .wxo-badge b{font-size:21px}
  .wxo-dot{width:16px;height:16px}

  /* card bắc cầu giữa hai pha */
  .wxo-hero-card{width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:32px;gap:12px}
  .wxo-hero-card b{font-size:21px}
  .wxo-hc{width:76px;height:76px;border-radius:21px}
  .wxo-hc .wxo-bi{width:38px;height:38px}

  /* pha bốn chương: bỏ khung laptop, chỉ còn ảnh giao diện tràn bề ngang */
  .wxo-lid{padding:0;background:none;border-radius:14px;
    box-shadow:0 20px 48px rgba(0,8,30,.45)}
  .wxo-lid img{width:var(--lap);height:calc(var(--lap) / 1.648);border-radius:14px}
  .wxo-base{display:none}

  /* Hai thẻ số liệu: desktop neo nổi hai bên laptop, trên điện thoại không đủ
     chỗ nên hạ xuống thành một hàng dưới ảnh, cho chữ xuống dòng và phóng to. */
  .wxo-fc{top:auto;bottom:20px;width:292px;padding:15px 17px;border-radius:17px}
  .wxo-fc1{left:8px;right:auto}
  .wxo-fc2{right:8px;left:auto;top:auto}
  .wxo-fc b{font-size:19px;line-height:1.25;white-space:normal}
  .wxo-fc span{margin-top:4px;font-size:14.5px;line-height:1.35;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .wxo *{animation:none!important}
  .wxo-rings,.wxo-badge,.wxo-core{opacity:1!important;transform:none!important}
  .wxo-plane{transform:rotate(var(--tilt)) scaleY(1)}
  .wxo-flat{transform:rotate(calc(var(--s) * -1)) rotate(48deg)}
  .wxo-sys{opacity:1!important;transform:none!important;filter:none!important}
  .wxo-chs,.wxo-labs,.wxo-hero-card{display:none}
  .wxo-core{transform:translate(calc(-50% + var(--ox)),calc(-50% + var(--oy)))}
}

/* Nguoi dung bat che do giam chuyen dong: bo zoom va tro chuot, giu anh tinh */
@media(prefers-reduced-motion:reduce){
  .wxo-lid img{animation:none;transform:none}
  .wxo-cur,.wxo-rip{display:none}
}

/* === WX-HERO-VIDEO (27/09/2026) · video giới thiệu thay orbit ở cột phải hero ===
   Khung + poster nằm sẵn trong index.html; video do assets/wistorix-hero-video.js gắn sau khi trang tải xong. */
.wxo.wx-has-video{aspect-ratio:auto;display:block;pointer-events:auto;max-width:700px}
.wxo.wx-has-video>:not(.wx-hero-video){display:none!important}
.wx-hero-video{
  position:relative;width:100%;aspect-ratio:16/9;box-sizing:border-box;
  padding:6px;border-radius:18px;
  background:linear-gradient(140deg,rgba(5,142,244,.55),rgba(0,82,205,.18) 40%,rgba(255,255,255,.08) 70%,rgba(5,142,244,.4));
  box-shadow:0 30px 80px -20px rgba(0,20,60,.75),0 0 0 1px rgba(255,255,255,.06) inset;
  animation:wxHeroVideoIn .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes wxHeroVideoIn{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
.wx-hero-media{position:relative;width:100%;height:100%;border-radius:13px;overflow:hidden;background:#041335}
.wx-hero-media img,.wx-hero-media video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.wx-hero-media video{opacity:0;transition:opacity .45s ease}
.wx-hero-media video.is-playing{opacity:1}
.wx-hero-video .wx-sound{
  position:absolute;right:16px;bottom:16px;z-index:2;
  display:inline-flex;align-items:center;gap:.45em;min-height:32px;
  padding:.5em .95em;border-radius:999px;border:1px solid rgba(255,255,255,.22);
  background:rgba(4,19,53,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font:600 13px/1 var(--wx-font-brand,'Manrope',system-ui,Arial,sans-serif);
  cursor:pointer;transition:background .2s ease,border-color .2s ease;
}
.wx-hero-video .wx-sound:hover{background:rgba(0,82,205,.75);border-color:rgba(255,255,255,.4)}
.wx-hero-video .wx-sound:focus-visible{outline:2px solid #058EF4;outline-offset:2px}
.wx-hero-video .wx-sound svg{width:15px;height:15px;flex:none}
.wx-hero-video .wx-sound .wx-on{display:none}
.wx-hero-video .wx-sound[aria-pressed="true"] .wx-on{display:block}
.wx-hero-video .wx-sound[aria-pressed="true"] .wx-off{display:none}
@media (max-width:860px){
  .wxo.wx-has-video{max-width:min(330px,78vw)}
  .wx-hero-video{aspect-ratio:9/16;padding:5px;border-radius:22px}
  .wx-hero-media{border-radius:18px}
  .wx-hero-video .wx-sound{right:12px;bottom:12px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){.wx-hero-video{animation:none}}
/* === /WX-HERO-VIDEO === */