/* ==========================================================================
   Wistorix · Khu "Wistorix dành cho ai" (trang chủ)
   Dùng ở: Public/index.html · thay cho khu Tính năng (tab) và khu Bốn tình huống
   Bố cục kiểu showcase: nền sáng, nhiều khoảng trắng, hàng tab đối tượng, ảnh người thật có box
   giao diện nổi lên, cột phải gồm bullet, hàng logo tích hợp/đối tác và nút.
   Logo: mỗi ô .wxw-logo là <img> + <span>, đổi ảnh được ngay trong editor local.
   Chưa có JS: các khối xếp dọc, đọc được hết.
   Cặp đôi: assets/wistorix-who.js
   ========================================================================== */

.wxw{
  --wxw-navy:var(--wx-navy,#041335);
  --wxw-indigo:var(--wx-indigo,#021E6B);
  --wxw-blue:#0052CD;
  --wxw-cyan:var(--wx-cyan,#2AD2FF);
  --wxw-lime:var(--wx-lime,#D6FD70);
  --wxw-ease:var(--wx-ease,cubic-bezier(.16,1,.3,1));
  position:relative;
  overflow:hidden;
  --wxw-ink:var(--wx-ink,#0A1F52);
  --wxw-muted:#5C6577;
  --wxw-line:#E6EAF1;
  --wxw-soft:#F6F8FB;
  color:var(--wxw-ink);
  background:#fff;
  font-family:var(--wx-font-brand,'Manrope','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif);
}
.wxw *{letter-spacing:-.005em}

/* ---------- Tiêu đề --------------------------------------------------- */
.wxw-head{text-align:center;max-width:56rem;margin:0 auto}
.wxw-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--wxw-ink);
  font-size:.8125rem;font-weight:600;letter-spacing:.12em !important;text-transform:uppercase;
}
.wxw-tag i{width:6px;height:6px;background:var(--wxw-ink);display:block}
.wxw-h2{
  margin:1rem 0 0;
  font-size:clamp(1.75rem,3.2vw,2.625rem);
  font-weight:700;line-height:1.25;letter-spacing:-.02em !important;color:var(--wxw-ink);
}
.wxw-h2 .wxw-grad{
  display:block;
  background:linear-gradient(90deg,var(--wxw-blue),#058EF4);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wxw-num{
  display:inline-block;
  padding:.05em .4em;margin-right:.2em;
  border-radius:.45em;
  border:1px solid #C9DAF8;
  background:#EAF1FE;
  color:var(--wxw-blue);
}
.wxw-sub{margin:1.25rem auto 0;max-width:36rem;color:var(--wxw-muted);font-size:1rem;line-height:1.6}

/* ---------- Hàng tab đối tượng --------------------------------------- */
.wxw-tabs{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.625rem;
  margin:3rem auto 5rem;
}
.wxw-tab{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0;padding:.6875rem 1.125rem;
  border-radius:12px;
  border:1px solid var(--wxw-line);
  background:#fff;
  color:var(--wxw-muted);
  font:inherit;font-size:.9375rem;font-weight:600;line-height:1.2;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.wxw-tab svg{width:18px;height:18px;flex:none;opacity:.75}
.wxw-tab:hover{border-color:#C3CCDA;color:var(--wxw-ink)}
.wxw-tab[aria-selected="true"]{
  color:var(--wxw-blue);
  border-color:var(--wxw-blue);
  background:#EAF1FE;
  box-shadow:inset 0 0 0 1px var(--wxw-blue);
}
.wxw-tab[aria-selected="true"] svg{opacity:1}
.wxw-tab:focus-visible{outline:2px solid var(--wxw-blue);outline-offset:3px}

/* ---------- Khối nội dung -------------------------------------------- */
.wxw-panels{display:grid;gap:4rem}
.wxw.is-ready .wxw-panels{gap:0}
.wxw-panel{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:6rem;
  align-items:center;
  max-width:74rem;
  margin:0 auto;
  width:100%;
}
.wxw.is-ready .wxw-panel{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility 0s linear .45s;
}
.wxw.is-ready .wxw-panel.is-active{
  opacity:1;visibility:visible;
  transition:opacity .45s ease,visibility 0s;
  z-index:1;
}

/* Ảnh + box nổi */
.wxw-visual{position:relative;padding:2.25rem 2.5rem 2.75rem 3rem}
.wxw-photo{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  aspect-ratio:5/4;
  box-shadow:0 30px 70px rgba(4,19,53,.14);
}
.wxw-photo img{display:block;width:100%;height:100%;object-fit:cover}
.wxw-photo::after{      /* phủ nhẹ để box nổi đọc rõ hơn */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,19,53,0) 60%,rgba(4,19,53,.18) 100%);
  pointer-events:none;
}

.wxw-float{
  position:absolute;
  z-index:2;
  width:min(250px,48%);
}
.wxw-float-in{
  display:block;
  padding:.875rem 1rem;
  border-radius:14px;
  background:#fff;
  color:#0A1F52;
  border:1px solid var(--wxw-line);
  box-shadow:0 24px 50px rgba(4,19,53,.16);
  font-size:.75rem;
  line-height:1.4;
}
.wxw-f1{left:0;top:0}
.wxw-f2{right:0;bottom:0}
.wxw-float-h{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:700;color:#0A1F52}
.wxw-float-h i{
  width:22px;height:22px;border-radius:7px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:#EAF1FE;color:var(--wxw-blue);
}
.wxw-float-h i svg{width:13px;height:13px}
.wxw-row{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  margin-top:.5rem;padding:.4375rem .5rem;
  border-radius:8px;background:#F6F8FB;color:#394563;
}
.wxw-row b{font-weight:700;color:#0A1F52}
.wxw-pill{
  flex:none;padding:.15rem .45rem;border-radius:999px;
  font-size:.625rem;font-weight:700;
  background:#EAF1FE;color:var(--wxw-blue);
}
.wxw-pill.is-warn{background:#FFF3E3;color:#B25E09}
.wxw-pill.is-ok{background:#E6F6EE;color:#06623A}
.wxw-pill.is-red{background:#FDECEA;color:#C8321F}
.wxw-meter{height:6px;margin-top:.5rem;border-radius:9px;background:#E8ECF3;overflow:hidden}
.wxw-meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--wxw-blue),#058EF4)}
.wxw-big{margin-top:.375rem;font-size:1.25rem;font-weight:800;color:#0A1F52;letter-spacing:-.02em !important}
.wxw-big small{font-size:.75rem;font-weight:600;color:#7A869C}
.wxw-muted{margin-top:.25rem;color:#7A869C}
.wxw-btn-mini{
  display:block;margin-top:.625rem;padding:.4375rem .625rem;border-radius:8px;
  text-align:center;font-weight:700;font-size:.75rem;
  background:var(--wxw-blue);color:#fff;
}
.wxw-btn-mini.is-red{background:#E5483A}

/* Box nổi: vào từ hai phía mỗi lần đổi tab, rồi bồng bềnh nhẹ */
.wxw.is-ready .wxw-panel .wxw-float{opacity:0;transform:translateY(16px)}
.wxw.is-ready .wxw-panel.is-active .wxw-float{
  opacity:1;transform:none;
  transition:opacity .5s ease .25s,transform .7s var(--wxw-ease) .25s;
}
.wxw.is-ready .wxw-panel.is-active .wxw-f2{transition-delay:.42s}
.wxw.is-ready .wxw-panel.is-active .wxw-photo img{animation:wxw-in 1.1s var(--wxw-ease) both}
.wxw-float-in{animation:wxw-bob 6s ease-in-out 1.2s infinite}
.wxw-f2 .wxw-float-in{animation-delay:2.4s}
@keyframes wxw-in{from{transform:scale(1.06)}to{transform:none}}
@keyframes wxw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Cột chữ */
.wxw-info{min-width:0}
.wxw-kicker{color:var(--wxw-blue);font-size:.8125rem;font-weight:700;letter-spacing:.12em !important;text-transform:uppercase}
.wxw-info h3{margin:.875rem 0 0;color:var(--wxw-ink);font-size:1.875rem;font-weight:700;line-height:1.28}
.wxw-lede{margin:1rem 0 0;color:var(--wxw-muted);font-size:1rem;line-height:1.7}
.wxw-points{
  list-style:none;margin:2rem 0 0;padding:1.5rem 1.625rem;
  display:flex;flex-direction:column;gap:1rem;
  border-radius:16px;
  border:1px solid var(--wxw-line);
  background:var(--wxw-soft);
}
.wxw-points li{display:flex;gap:.75rem;align-items:flex-start;color:#394563;font-size:.9375rem;line-height:1.55}
.wxw-points svg{flex:none;width:16px;height:16px;margin-top:.2em;color:var(--wxw-blue)}

.wxw-logos-label{margin-top:2.25rem;color:var(--wxw-muted);font-size:.8125rem;font-weight:600}
.wxw-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.625rem;margin-top:.75rem}
.wxw-logo{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.5rem .75rem;
  border-radius:10px;
  border:1px solid var(--wxw-line);
  background:#fff;
  color:var(--wxw-ink);
  font-size:.8125rem;font-weight:700;
}
.wxw-logo img{width:22px;height:22px;object-fit:contain;flex:none}

.wxw-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:2.25rem;min-height:48px;padding:0 1.5rem;
  border-radius:999px;
  background:var(--wxw-navy);color:#fff;
  font-size:.9375rem;font-weight:700;text-decoration:none;
  box-shadow:0 10px 26px rgba(4,19,53,.16);
  transition:transform .2s ease,background-color .2s ease;
}
.wxw-cta:hover{transform:translateY(-1px);background:var(--wxw-blue)}
.wxw-cta svg{color:var(--wxw-lime)}
.wxw-cta:focus-visible{outline:2px solid var(--wxw-blue);outline-offset:3px}
.wxw-cta svg{width:16px;height:16px}

/* ---------- Màn hẹp --------------------------------------------------- */
@media (max-width:991px){
  .wxw-panel{grid-template-columns:1fr;gap:2.5rem;max-width:40rem}
  .wxw-visual{padding:1.75rem 1.25rem 2.25rem 1.5rem}
}
@media (max-width:640px){
  .wxw-tabs{
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    margin:2.25rem -1.25rem 2.5rem;padding:0 1.25rem .25rem;
    scrollbar-width:none;
  }
  .wxw-tabs::-webkit-scrollbar{display:none}
  .wxw-tab{flex:none;padding:.5625rem .875rem;font-size:.875rem}
  .wxw-visual{padding:1.5rem .5rem 2rem .75rem}
  .wxw-float{width:min(190px,58%)}
  .wxw-float-in{padding:.625rem .75rem;font-size:.6875rem}
  .wxw-float .wxw-row:nth-of-type(n+3){display:none}
  .wxw-info h3{font-size:1.375rem}
  .wxw-logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wxw-logo{flex-direction:column;gap:.25rem;font-size:.6875rem;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .wxw-float-in,.wxw.is-ready .wxw-panel.is-active .wxw-photo img{animation:none}
  .wxw.is-ready .wxw-panel .wxw-float,.wxw.is-ready .wxw-panel.is-active .wxw-float{transition:none;transform:none}
  /* Không chạy hoạt cảnh dọn dung lượng: hiện thẳng trạng thái sau khi dọn */
  .wxw.is-ready.is-seen .wxw-panel.is-active .wxw-swap .is-a,
  .wxw.is-ready.is-seen .wxw-panel.is-active .wxw-swap .is-b,
  .wxw.is-ready.is-seen .wxw-panel.is-active .wxw-meter.is-drain i{animation:none}
  .wxw-swap .is-a{opacity:0;visibility:hidden}
  .wxw-swap .is-b{opacity:1;visibility:visible}
  .wxw-meter.is-drain i{width:80% !important;background:var(--wxw-blue)}
  .wxw-cursor{display:none}
  .wxw.is-ready.is-seen .wxw-panel.is-active .wxw-meter.is-score i,
  .wxw.is-ready.is-seen .wxw-panel.is-active .wxw-row.is-done,
  .wxw.is-ready.is-seen .wxw-panel.is-active .wxw-row.is-done .wxw-tick{animation:none}
  .wxw-row.is-done{background:#EDF8F2}
  .wxw-tick{opacity:1;visibility:visible;transform:none}
}

/* Hoạt cảnh dọn dung lượng · thẻ nổi tab Cá nhân
   Mở ra ở trạng thái Drive dùng hết 100 GB, thanh đỏ kín. Giữ 1,5s cho người
   xem kịp thấy, rồi thanh rút về 80% và chuyển sang màu thương hiệu, đồng thời
   con số và dòng chú thích đổi sang trạng thái sau khi dọn.
   Chỉ chạy khi khối đã vào màn hình (class is-seen do wistorix-who.js gắn).
   Dùng visibility chứ không chỉ opacity: editor local ép opacity:1 cho mọi
   khối, nếu chỉ dựa vào opacity thì hai lớp chữ sẽ chồng lên nhau khi sửa. */
.wxw-meter.is-drain{height:8px;background:#E8ECF3}
.wxw-meter.is-drain i{
  display:block;height:100%;width:100%;border-radius:9px;
  background:#E5484D;
}

.wxw-swap{display:inline-grid;vertical-align:bottom}
.wxw-swap>span{grid-area:1/1}
.wxw-swap .is-b{opacity:0;visibility:hidden}

.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-meter.is-drain i{
  animation:wxw-drain 1.5s cubic-bezier(.5,.02,.25,1) 1.5s both;
}
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-swap .is-a{
  animation:wxw-swap-out .4s ease var(--wxw-d,2.5s) both;
}
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-swap .is-b{
  animation:wxw-swap-in .4s ease var(--wxw-d,2.5s) both;
}

@keyframes wxw-drain{
  from{width:100%;background:#E5484D}
  to{width:80%;background:var(--wxw-blue)}
}
@keyframes wxw-swap-out{
  from{opacity:1;visibility:visible}
  to{opacity:0;visibility:hidden}
}
@keyframes wxw-swap-in{
  from{opacity:0;visibility:visible}
  to{opacity:1;visibility:visible}
}


/* Con trỏ chuột mô phỏng · tab Agency
   Chạy qua ba dòng email, bấm từng dòng để thu hồi quyền, rồi xuống nút bàn
   giao và bấm. Toạ độ là pixel cố định so với khối ảnh: từ 1200px trở lên box
   nổi rộng đúng 250px nên các mốc này đứng yên. Hẹp hơn thì ẩn con trỏ, phần
   đổi nhãn vẫn chạy bình thường. */
.wxw-row .wxw-swap{flex:none;justify-items:end;align-items:center}

.wxw-cursor{
  position:absolute;
  left:90px;top:185px;
  width:20px;height:20px;
  z-index:3;
  opacity:0;
  pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(4,19,53,.35));
}
.wxw-cursor svg{display:block;width:100%;height:100%}

.wxw-cursor-ring{
  position:absolute;
  left:-9px;top:-9px;
  width:26px;height:26px;
  border-radius:50%;
  background:rgba(0,82,205,.35);
  opacity:0;
}

.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-cursor{
  animation:wxw-cur-move 4.4s cubic-bezier(.45,.05,.25,1) both,
            wxw-cur-click 4.4s linear both;
}
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-cursor-ring{
  animation:wxw-cur-ring 4.4s linear both;
}

@keyframes wxw-cur-move{
  0%   {left:90px; top:185px; opacity:0}
  9%   {left:90px; top:185px; opacity:1}
  14%  {left:90px; top:185px}
  27%  {left:185px; top:58px}
  41%  {left:194px; top:99px}
  55%  {left:192px; top:140px}
  77%  {left:calc(100% - 125px); top:calc(100% - 30px)}
  90%  {left:calc(100% - 125px); top:calc(100% - 30px); opacity:1}
  100% {left:calc(100% - 125px); top:calc(100% - 30px); opacity:0}
}

/* nhấn xuống đúng bốn nhịp bấm */
@keyframes wxw-cur-click{
  0%,25%,29%,39%,43%,53%,57%,75%,79%,100%{transform:scale(1)}
  27%,41%,55%,77%{transform:scale(.72)}
}

@keyframes wxw-cur-ring{
  0%,26%   {transform:scale(.2);opacity:0}
  27%      {transform:scale(.2);opacity:.55}
  34%      {transform:scale(2.2);opacity:0}
  40%      {transform:scale(.2);opacity:0}
  41%      {transform:scale(.2);opacity:.55}
  48%      {transform:scale(2.2);opacity:0}
  54%      {transform:scale(.2);opacity:0}
  55%      {transform:scale(.2);opacity:.55}
  62%      {transform:scale(2.2);opacity:0}
  76%      {transform:scale(.2);opacity:0}
  77%      {transform:scale(.2);opacity:.55}
  84%      {transform:scale(2.2);opacity:0}
  100%     {transform:scale(2.2);opacity:0}
}

@media screen and (max-width:1199px){
  .wxw-cursor{display:none}
}


/* Nút mini màu xanh lá cho trạng thái thành công */
.wxw-btn-mini.is-green{background:#0A8F4E}

/* Cặp chữ đổi bọc cả khối nút, không phải chỉ chữ bên trong */
.wxw-swap.is-block{display:grid;margin-top:.625rem}
.wxw-swap.is-block .wxw-btn-mini{margin-top:0}

/* Con trỏ chuột · tab Đội ngũ in-house
   Bỏ qua dòng 01 vì đã ở chế độ Nội bộ, chỉ bấm hai thư mục đang chia sẻ rộng,
   rồi xuống nút thu hồi quyền cả thư mục. */
.wxw-cursor.is-inhouse{left:80px;top:180px}

.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-cursor.is-inhouse{
  animation:wxw-cur-move-ih 3.9s cubic-bezier(.45,.05,.25,1) both,
            wxw-cur-click-ih 3.9s linear both;
}
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-cursor.is-inhouse .wxw-cursor-ring{
  animation:wxw-cur-ring-ih 3.9s linear both;
}

@keyframes wxw-cur-move-ih{
  0%   {left:80px; top:180px; opacity:0}
  10%  {left:80px; top:180px; opacity:1}
  15%  {left:80px; top:180px}
  28%  {left:195px; top:100px}
  46%  {left:200px; top:140px}
  77%  {left:calc(100% - 125px); top:calc(100% - 30px)}
  90%  {left:calc(100% - 125px); top:calc(100% - 30px); opacity:1}
  100% {left:calc(100% - 125px); top:calc(100% - 30px); opacity:0}
}

@keyframes wxw-cur-click-ih{
  0%,26%,30%,44%,48%,75%,79%,100%{transform:scale(1)}
  28%,46%,77%{transform:scale(.72)}
}

@keyframes wxw-cur-ring-ih{
  0%,27%  {transform:scale(.2);opacity:0}
  28%     {transform:scale(.2);opacity:.55}
  35%     {transform:scale(2.2);opacity:0}
  45%     {transform:scale(.2);opacity:0}
  46%     {transform:scale(.2);opacity:.55}
  53%     {transform:scale(2.2);opacity:0}
  76%     {transform:scale(.2);opacity:0}
  77%     {transform:scale(.2);opacity:.55}
  84%     {transform:scale(2.2);opacity:0}
  100%    {transform:scale(2.2);opacity:0}
}


/* Tab Doanh nghiệp vừa và nhỏ
   Điểm bảo mật chạy từ 40 lên 90, thanh đỏ chuyển sang xanh, hai dòng cần xử lý
   lần lượt hiện dấu tích xanh. Con số do wistorix-who.js đếm, cùng nhịp với thanh. */
.wxw-meter.is-score{height:8px;background:#E8ECF3}
.wxw-meter.is-score i{
  display:block;height:100%;width:90%;border-radius:9px;background:#0A8F4E;
}

.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-meter.is-score i{
  animation:wxw-score 1.6s cubic-bezier(.45,.05,.25,1) .6s both;
}
@keyframes wxw-score{
  from{width:40%;background:#E5484D}
  to{width:90%;background:#0A8F4E}
}

.wxw-tick{
  flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:.375rem;
  border-radius:50%;
  background:#E6F6EE;color:#0A8F4E;
  opacity:0;visibility:hidden;
  transform:scale(.5);
}
.wxw-tick svg{width:11px;height:11px}

.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-row.is-done .wxw-tick{
  animation:wxw-tick-in .4s cubic-bezier(.2,1.4,.4,1) var(--wxw-d,1.4s) both;
}
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-row.is-done{
  animation:wxw-row-done .5s ease var(--wxw-d,1.4s) both;
}

@keyframes wxw-tick-in{
  from{opacity:0;visibility:visible;transform:scale(.5)}
  to{opacity:1;visibility:visible;transform:scale(1)}
}
@keyframes wxw-row-done{
  from{background:#F6F8FB}
  to{background:#EDF8F2}
}


/* Con trỏ chuột · tab Cá nhân
   Chỉ một điểm dừng: xuống nút Thu hồi tất cả và bấm, sau khi thanh dung lượng
   rút xong để hai chuyện không giành nhau sự chú ý. */
.wxw-cursor.is-canhan{left:110px;top:150px}

.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-cursor.is-canhan{
  animation:wxw-cur-move-cn 4.3s cubic-bezier(.45,.05,.25,1) both,
            wxw-cur-click-cn 4.3s linear both;
}
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-cursor.is-canhan .wxw-cursor-ring{
  animation:wxw-cur-ring-cn 4.3s linear both;
}

@keyframes wxw-cur-move-cn{
  0%   {left:110px; top:150px; opacity:0}
  46%  {left:110px; top:150px; opacity:0}
  53%  {left:110px; top:150px; opacity:1}
  77%  {left:calc(100% - 125px); top:calc(100% - 30px)}
  90%  {left:calc(100% - 125px); top:calc(100% - 30px); opacity:1}
  100% {left:calc(100% - 125px); top:calc(100% - 30px); opacity:0}
}
@keyframes wxw-cur-click-cn{
  0%,75%,79%,100%{transform:scale(1)}
  77%{transform:scale(.72)}
}
@keyframes wxw-cur-ring-cn{
  0%,76%{transform:scale(.2);opacity:0}
  77%   {transform:scale(.2);opacity:.55}
  84%   {transform:scale(2.2);opacity:0}
  100%  {transform:scale(2.2);opacity:0}
}


/* Video ICP nằm đè lên ảnh tĩnh trong cùng khung ảnh.
   Ảnh giữ nguyên làm nền và làm phần alt cho SEO, video chỉ hiện ra khi đã phát
   được. Máy yếu, mạng chậm hay tắt autoplay thì người xem vẫn thấy đúng tấm ảnh
   như cũ, không có khung đen. */
.wxw-vid{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.wxw-vid.is-playing{opacity:1}

@media (prefers-reduced-motion:reduce){
  .wxw-vid{display:none}
}

/* ==========================================================================
   Điện thoại · sửa hai chỗ người dùng báo (14/09/2026)

   1 · Hàng tab trước đây cuộn ngang, màn 390px chỉ thấy 1,5 tab trên 4 và
       không có dấu hiệu gì báo còn tab phía sau. Ai không vuốt là không biết
       có ba nhóm còn lại. Đổi thành lưới 2x2, thấy đủ bốn, không phải vuốt.

   2 · Ảnh minh hoạ tỉ lệ 5/4 nằm ngang, hai thẻ nổi đè lên gần kín. Đổi ảnh
       sang tỉ lệ đứng 4/5 và thu thẻ nhỏ lại, chừa khoảng giữa cho thấy ảnh.
   ========================================================================== */
@media screen and (max-width:640px){
  /* --- hàng tab: lưới hai cột, bỏ cuộn ngang --- */
  .wxw-tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    overflow:visible;
    margin:1.75rem 0 2rem;padding:0;
  }
  .wxw-tab{
    flex:initial;width:100%;
    justify-content:center;text-align:center;
    padding:.625rem .5rem;
    font-size:.8125rem;line-height:1.25;
    white-space:normal;
    min-height:3.25rem;
  }
  .wxw-tab svg{width:16px;height:16px}

  /* --- ảnh đứng, thẻ nhỏ lại, chừa chỗ thấy ảnh --- */
  .wxw-photo{aspect-ratio:4/5}
  .wxw-visual{padding:1.25rem .25rem 1.5rem .5rem}
  .wxw-float{width:min(176px,54%)}
  .wxw-f1{left:0;top:2%}
  .wxw-f2{right:0;bottom:2%}
  .wxw-float-in{padding:.5625rem .6875rem;font-size:.6875rem}
}

/* Hai chữ trong ô đổi trạng thái trước đây mờ vào mờ ra cùng lúc, có khoảnh
   khắc chồng lên nhau đọc thành một mớ. Cho chữ mới vào sau khi chữ cũ đi hẳn. */
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-swap .is-a{animation-duration:.26s}
.wxw.is-ready.is-seen .wxw-panel.is-active .wxw-swap .is-b{
  animation-duration:.26s;
  animation-delay:calc(var(--wxw-d,2.5s) + .26s);
}

/* === WX-A11Y-CONTRAST (27/09/2026): đủ tỉ lệ 4.5:1 cho chữ nhỏ === */
.wxw-big small,.wxw-muted{color:#5E6A80}
.wxw-pill.is-warn{color:#9A4F06}
.wxw-btn-mini.is-red{background:#CC3A2C}