/* ==========================================================================
   Wistorix · Slide "Quy trình 3 bước" (khu Cách Wistorix hoạt động, trang chủ)
   Dùng ở: Public/index.html, section_expertise · thay cho 3 hàng .wxm xen kẽ
   Bố cục tham khảo kiểu carousel một thẻ lớn: chữ bên trái, ảnh app bên phải,
   mũi tên hai bên, chấm tiến trình bên dưới, tự chạy và dừng khi rê chuột.
   Không đụng class Webflow, mọi thứ nằm trong tiền tố .wxs
   Chưa có JS (hoặc JS lỗi): các slide xếp chồng dọc, vẫn đọc được hết.
   Cặp đôi: assets/wistorix-feature-slider.js
   ========================================================================== */

.wxs{
  --wxs-navy:var(--wx-navy,#041335);
  --wxs-indigo:var(--wx-indigo,#021E6B);
  --wxs-ink:var(--wx-ink,#0A1F52);
  --wxs-lime:var(--wx-lime,#D6FD70);
  --wxs-cyan:var(--wx-cyan,#2AD2FF);
  --wxs-line:var(--wx-n-200,#E8E8E6);
  --wxs-ease:var(--wx-ease,cubic-bezier(.16,1,.3,1));

  position:relative;
  max-width:none;              /* dãn bằng khung ngang website (.container-large) */
  margin:0 auto;
  font-family:var(--wx-font-brand,'Manrope','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif);
}

/* ---------- Khung trượt --------------------------------------------- */
.wxs-viewport{display:grid;gap:1.5rem}
.wxs.is-ready .wxs-viewport{gap:0}

.wxs-slide{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);
  gap:3.5rem;
  align-items:center;
  padding:3.25rem 3.5rem;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(42,210,255,.16) 0%, rgba(42,210,255,0) 55%),
    radial-gradient(90% 80% at 0% 0%, rgba(0,82,205,.35) 0%, rgba(0,82,205,0) 60%),
    linear-gradient(160deg,var(--wxs-indigo) 0%,var(--wxs-navy) 58%);
  color:#fff;
  box-shadow:0 30px 70px rgba(4,19,53,.22);   /* không overflow:hidden, để box minh hoạ được tràn nhẹ */
}

/* Có JS: xếp tất cả slide chồng lên cùng một ô, chiều cao = slide cao nhất,
   nên chuyển slide không làm trang giật lên xuống. */
.wxs.is-ready .wxs-slide{
  grid-area:1/1;
  opacity:0;
  visibility:hidden;
  transform:translateX(28px);
  transition:opacity .55s var(--wxs-ease),transform .7s var(--wxs-ease),visibility 0s linear .7s;
}
.wxs.is-ready[data-dir="prev"] .wxs-slide{transform:translateX(-28px)}
.wxs.is-ready .wxs-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .55s var(--wxs-ease),transform .7s var(--wxs-ease),visibility 0s;
  z-index:1;
}

/* ---------- Cột chữ --------------------------------------------------- */
.wxs-copy{min-width:0}
.wxs-kicker{
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  color:var(--wxs-lime);
  font-size:.8125rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.wxs-kicker b{
  font-weight:700;
  color:rgba(255,255,255,.45);
  letter-spacing:.06em;
}
.wxs-copy h3{
  margin:.875rem 0 0;
  color:#fff;
  font-size:1.75rem;
  font-weight:700;
  line-height:1.28;
  letter-spacing:-.015em;
}

.wxs-list{
  list-style:none;
  margin:1.75rem 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.875rem;
}
.wxs-list li{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  color:rgba(255,255,255,.78);
  font-size:.9375rem;
  line-height:1.55;
}
.wxs-list svg{
  flex:none;
  width:18px;
  height:18px;
  margin-top:.15em;
  color:var(--wxs-lime);
}

.wxs-chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1.5rem 0 0;
  padding:0;
}
.wxs-chips li{
  padding:.375rem .75rem;
  border-radius:999px;
  border:1px solid rgba(42,210,255,.28);
  background:rgba(42,210,255,.08);
  color:#CFF4FF;
  font-size:.8125rem;
  font-weight:600;
  line-height:1.2;
}

.wxs-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:2rem;
}
.wxs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:46px;
  padding:0 1.375rem;
  border-radius:999px;
  font-size:.9375rem;
  font-weight:700;
  line-height:1;
  letter-spacing:-.005em;   /* đè letter-spacing rộng của theme Webflow */
  text-transform:none;
  text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.wxs-btn.is-primary{background:var(--wxs-lime);color:var(--wxs-navy)}
.wxs-btn.is-primary:hover{background:var(--wx-lime-deep,#CDFB56);transform:translateY(-1px)}
.wxs-btn.is-ghost{border:1px solid rgba(255,255,255,.32);color:#fff}
.wxs-btn.is-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.wxs-btn:focus-visible{outline:2px solid var(--wxs-cyan);outline-offset:3px}


.wxs-lede{
  margin:.875rem 0 0;
  color:rgba(255,255,255,.72);
  font-size:1rem;
  line-height:1.6;
}
.wxs-list{margin-top:1.375rem}
.wxs-lede,.wxs-list li,.wxs-chips li,.wxs-copy h3{letter-spacing:-.005em}   /* đè letter-spacing của theme */
.wxs-btn svg{width:16px;height:16px}

/* Thanh cửa sổ phía trên ảnh app */
.wxs-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:2px 4px 10px;
}
.wxs-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.wxs-bar em{
  margin-left:8px;
  font-style:normal;
  font-size:.75rem;
  font-weight:600;
  color:rgba(255,255,255,.55);
}

/* ---------- Cột ảnh --------------------------------------------------- */
.wxs-media{
  position:relative;
  min-width:0;
  border-radius:16px;
  padding:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.wxs-media img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
}


/* ---------- Camera zoom trên ảnh app ---------------------------------- */
.wxs-shot{position:relative}
.wxs-stage{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#fff;
}
.wxs-cam{
  transform-origin:0 0;
  transition:transform .65s var(--wxs-ease);
  will-change:transform;
}
.wxs-cam img{border-radius:0}
.wxs-spot{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wxs-ring{
  position:absolute;
  left:50%;top:50%;width:0;height:0;
  border-radius:12px;
  border:2px solid var(--wxs-lime);
  box-shadow:0 0 0 9999px rgba(4,19,53,0),0 0 24px rgba(214,253,112,0);
  opacity:0;
  transition:left .65s var(--wxs-ease),top .65s var(--wxs-ease),width .65s var(--wxs-ease),height .65s var(--wxs-ease),opacity .25s ease,box-shadow .4s ease;
}
.wxs-shot.is-zoom .wxs-ring{
  opacity:1;
  box-shadow:0 0 0 9999px rgba(4,19,53,.28),0 0 26px rgba(214,253,112,.55);
  animation:wxs-pulse 1.8s ease-in-out .6s infinite;
}
@keyframes wxs-pulse{
  0%,100%{border-color:rgba(214,253,112,1)}
  50%{border-color:rgba(214,253,112,.45)}
}

/* Box minh hoạ nổi lên cạnh vùng đang zoom, được phép tràn ra ngoài ảnh */
.wxs-calls{position:absolute;inset:0;pointer-events:none;z-index:2}
.wxs-call{
  position:absolute;
  left:0;top:0;
  width:min(250px,62%);
  padding:.875rem 1rem;
  border-radius:14px;
  background:rgba(8,24,66,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border:1px solid rgba(214,253,112,.35);
  box-shadow:0 18px 44px rgba(0,0,0,.38);
  color:#fff;
  opacity:0;
  transform:translateY(10px) scale(.96);
  transition:opacity .35s ease,transform .5s var(--wxs-ease);
}
.wxs-call.is-on{
  opacity:1;
  transform:none;
  transition:opacity .3s ease .2s,transform .4s var(--wxs-ease) .2s;
}
.wxs-call-k{
  display:block;
  color:var(--wxs-lime);
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.wxs-call b{
  display:block;
  margin-top:.3rem;
  font-size:1.0625rem;
  font-weight:700;
  line-height:1.3;
}
.wxs-call b small{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.55);margin-left:2px}
.wxs-call p{margin:.375rem 0 0;font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.72)}
.wxs-call-meter{display:block;height:6px;margin-top:.5rem;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.wxs-call-meter i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#F04E3E,#F19B46 45%,var(--wxs-lime))}
.wxs-call-rows{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.wxs-call-rows li{display:flex;justify-content:space-between;gap:1rem;font-size:.8125rem;color:rgba(255,255,255,.82)}
.wxs-call-rows em{font-style:normal;font-weight:700;color:#FF8A7A}
.wxs-call-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.wxs-call-chips span{padding:.25rem .55rem;border-radius:999px;background:rgba(42,210,255,.14);border:1px solid rgba(42,210,255,.3);color:#CFF4FF;font-size:.75rem;font-weight:600}
.wxs-call-btn{display:inline-block;margin-top:.5rem;padding:.3rem .7rem;border-radius:999px;background:#F04E3E;color:#fff;font-size:.75rem;font-weight:700}
.wxs-call *{letter-spacing:-.005em}
.wxs-call .wxs-call-k{letter-spacing:.1em}

/* ---------- Mũi tên + chấm ------------------------------------------- */
.wxs-controls{display:none}
.wxs.is-ready .wxs-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.75rem;
}

.wxs-arrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin:0;
  padding:0;
  border-radius:50%;
  border:1px solid var(--wxs-line);
  background:#fff;
  color:var(--wxs-ink);
  cursor:pointer;
  box-shadow:0 8px 24px rgba(4,19,53,.08);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.wxs-arrow svg{width:20px;height:20px}
.wxs-arrow:hover{background:var(--wxs-navy);border-color:var(--wxs-navy);color:#fff}
.wxs-arrow:focus-visible{outline:2px solid #0052CD;outline-offset:3px}

/* Màn rộng: mũi tên đứng ngoài hai mép thẻ, giữa chiều cao */
@media (min-width:1240px){
  .wxs.is-ready .wxs-arrow{
    position:absolute;
    top:calc(50% - 26px - 1.75rem);
    z-index:3;
  }
  .wxs.is-ready .wxs-prev{left:-26px}
  .wxs.is-ready .wxs-next{right:-26px}
}

.wxs-dots{display:flex;align-items:center;gap:.5rem}
.wxs-dot{
  position:relative;
  width:8px;
  height:8px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:#C9D1DE;
  cursor:pointer;
  overflow:hidden;
  transition:width .45s var(--wxs-ease),background-color .2s ease;
}
.wxs-dot::after{        /* vạch tiến trình chạy theo thời gian tự chuyển */
  content:"";
  position:absolute;
  inset:0;
  background:#0052CD;
  transform:scaleX(var(--p,0));
  transform-origin:left center;
}
.wxs-dot:hover{background:#9DAAC0}
.wxs-dot[aria-current="true"]{width:36px;background:#C9D1DE}
.wxs-dot:focus-visible{outline:2px solid #0052CD;outline-offset:3px}

.wxs-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin:0 0 0 .25rem;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#7A869C;
  cursor:pointer;
}
.wxs-toggle:hover{color:var(--wxs-ink);background:rgba(4,19,53,.06)}
.wxs-toggle:focus-visible{outline:2px solid #0052CD;outline-offset:2px}
.wxs-toggle svg{width:14px;height:14px}
.wxs-toggle .wxs-ic-play{display:none}
.wxs.is-stopped .wxs-toggle .wxs-ic-play{display:block}
.wxs.is-stopped .wxs-toggle .wxs-ic-pause{display:none}

/* ---------- Màn hẹp --------------------------------------------------- */
@media (max-width:991px){
  .wxs-slide{grid-template-columns:1fr;gap:2rem;padding:2.25rem 2rem}
  .wxs-media{order:2}
  .wxs-copy h3{font-size:1.5rem}
}
@media (max-width:560px){
  /* Box minh hoạ xuống dải riêng dưới ảnh, không che vùng đang zoom */
  .wxs-shot{margin-bottom:96px}
  .wxs-call{width:100%;padding:.625rem .875rem;border-radius:11px}
  .wxs-call b{font-size:.9375rem;margin-top:.15rem}
  .wxs-call p,.wxs-call-btn{display:none}
  .wxs-call-meter{margin-top:.35rem}
  .wxs-call-chips{margin-top:.35rem}
  .wxs-slide{padding:1.75rem 1.25rem 1.5rem;border-radius:22px;gap:1.5rem}
  .wxs-copy h3{font-size:1.3125rem}
  .wxs-list{margin-top:1.25rem;gap:.75rem}
  .wxs-list li{font-size:.875rem}
  .wxs-actions{margin-top:1.5rem}
  .wxs-btn{flex:1 1 auto;min-height:44px;padding:0 1rem;font-size:.875rem}
  .wxs-media{padding:6px;border-radius:12px}
  .wxs-media img{border-radius:8px}
  .wxs-arrow{width:44px;height:44px}
  .wxs.is-ready .wxs-controls{gap:.75rem;margin-top:1.25rem}
}

/* ---------- Tôn trọng thiết lập giảm chuyển động ---------------------- */
@media (prefers-reduced-motion:reduce){
  .wxs.is-ready .wxs-slide,
  .wxs.is-ready .wxs-slide.is-active{transform:none;transition:opacity .01s,visibility 0s}
  .wxs-dot,.wxs-btn,.wxs-arrow{transition:none}
  .wxs-cam,.wxs-ring,.wxs-call{transition:none;animation:none}
}

/* === WX-A11Y-TARGET (27/09/2026): chấm cách nhau đủ 24px cho ngón tay === */
.wxs-dots{gap:16px}