/* ==========================================================================
   Wistorix · CSS cho 3 khối mới của trang chủ
   wxpn  · Pain → Impact
   wxuc  · Use Cases
   wxtr  · Security & Trust + FAQ
   Dùng chung token màu với wistorix-tokens.css, có giá trị dự phòng.
   ========================================================================== */

.wxpn,.wxuc,.wxtr{
  --wxh-ink:var(--wx-ink,#0A1F52);
  --wxh-body:var(--wx-graphite,#2A2928);
  --wxh-line:var(--wx-n-200,#E8E8E6);
  --wxh-soft:var(--wx-n-50,#F6F6F4);
  --wxh-lime:var(--wx-lime,#D6FD70);
  --wxh-navy:var(--wx-navy,#041335);
  --wxh-muted:var(--wx-n-500,#8F8F88);
  font-family:var(--wx-font-brand,'Manrope','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif);
  color:var(--wxh-ink);
}
.wxpn *,.wxuc *,.wxtr *{box-sizing:border-box}

/* ---------- Pain → Impact ------------------------------------------- */
.wxpn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.wxpn-card{background:var(--wxh-soft);border:1px solid var(--wxh-line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:14px}
.wxpn-ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--wxh-line);display:flex;align-items:center;justify-content:center;color:var(--wxh-ink);flex:none}
.wxpn-ic svg{width:22px;height:22px}
.wxpn-card h3{font-size:1.15rem;line-height:1.35;font-weight:700;margin:0;color:var(--wxh-ink)}
.wxpn-card p{margin:0;font-size:.98rem;line-height:1.6;color:var(--wxh-body)}
.wxpn-impact{margin-top:auto;padding-top:14px;border-top:1px dashed var(--wxh-line);font-size:.92rem;line-height:1.55;color:var(--wxh-ink);font-weight:600}
.wxpn-impact span{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wxh-muted);font-weight:600;margin-bottom:6px}
/* Dải trấn an · ảnh nền đổi được trong editor (bấm vào vùng trống của box)
   Chiều cao: --wxpn-calm-h · Độ mờ lớp phủ: --wxpn-calm-dim · Vùng ảnh giữ lại: --wxpn-calm-pos */
.wxpn-calm{--wxpn-calm-h:380px;--wxpn-calm-dim:.55;--wxpn-calm-pos:center 28%;
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:24px;background:var(--wxh-navy);color:#fff;border-radius:24px;
  min-height:var(--wxpn-calm-h);padding:40px 44px;display:flex;align-items:center}
.wxpn-calm-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--wxpn-calm-pos);z-index:0;display:block}
.wxpn-calm-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(4,19,53,calc(var(--wxpn-calm-dim) + .34)) 0%,
    rgba(4,19,53,calc(var(--wxpn-calm-dim) + .16)) 52%,
    rgba(4,19,53,var(--wxpn-calm-dim)) 100%)}
.wxpn-calm-inner{position:relative;z-index:2;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.wxpn-calm p{margin:0;font-size:1.06rem;line-height:1.65;max-width:58ch;text-shadow:0 1px 12px rgba(2,10,30,.45)}
.wxpn-calm b{color:var(--wxh-lime)}

/* ---------- Use Cases ------------------------------------------------ */
.wxuc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.wxuc-card{border:1px solid var(--wxh-line);border-radius:20px;padding:28px;background:#fff;display:flex;flex-direction:column;gap:12px}
.wxuc-card.is-dark{background:var(--wxh-navy);border-color:var(--wxh-navy);color:#fff}
.wxuc-tag{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--wxh-muted)}
.wxuc-card.is-dark .wxuc-tag{color:var(--wxh-lime)}
.wxuc-card h3{margin:0;font-size:1.2rem;line-height:1.35;font-weight:700}
.wxuc-card p{margin:0;font-size:.98rem;line-height:1.6;color:var(--wxh-body)}
.wxuc-card.is-dark p{color:#D9D9D6}
.wxuc-list{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.wxuc-list li{position:relative;padding-left:24px;font-size:.94rem;line-height:1.55;color:var(--wxh-body)}
.wxuc-card.is-dark .wxuc-list li{color:#D9D9D6}
.wxuc-list li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--wxh-lime);border:1px solid rgba(10,31,82,.25)}
.wxuc-link{margin-top:auto;padding-top:16px;font-weight:700;font-size:.95rem;color:var(--wxh-ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.wxuc-card.is-dark .wxuc-link{color:var(--wxh-lime)}
.wxuc-link:hover{text-decoration:underline}

/* ---------- Security & Trust + FAQ -----------------------------------
   Khu này giờ chỉ còn danh sách câu hỏi, bảng bốn điều bên trái đã dồn
   hết vào câu trả lời. Bỏ hai cột, neo vào giữa để dòng chữ không kéo
   dài quá tầm mắt trên màn rộng. */
.wxtr-layout{display:grid;grid-template-columns:1fr;gap:28px;align-items:start;
  max-width:50rem;margin-inline:auto}
.wxtr-faq{border:1px solid var(--wxh-line);border-radius:20px;padding:10px 24px;background:#fff}
.wxtr-faq details{border-bottom:1px solid var(--wxh-line)}
.wxtr-faq details:last-child{border-bottom:none}
.wxtr-faq summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;font-weight:700;font-size:1rem;line-height:1.5;color:var(--wxh-ink)}
.wxtr-faq summary::-webkit-details-marker{display:none}
.wxtr-faq summary::after{content:"";position:absolute;right:4px;top:calc(50% - 5px);width:9px;height:9px;border-right:2px solid var(--wxh-ink);border-bottom:2px solid var(--wxh-ink);transform:rotate(45deg);transition:transform .2s ease}
.wxtr-faq details[open] summary::after{transform:rotate(-135deg)}
.wxtr-faq .wxtr-a{padding:0 0 18px;margin:0;font-size:.95rem;line-height:1.65;color:var(--wxh-body)}
.wxtr-note{margin-top:20px;font-size:.88rem;line-height:1.6;color:var(--wxh-muted)}

/* ---------- Heading gộp ở khối Về Wistorix ----------------------------
   11 thẻ h2 cũ đã gộp thành 1 h2 bọc các span.h2. Không lấy lại margin của
   thẻ h2 gốc, thay bằng dãn dòng 1.22 cho gọn. */
.wx-title-h2{margin:0;font-size:inherit;line-height:inherit;font-weight:inherit}
.wx-title-h2 .title-wrap{row-gap:0}
.wx-title-h2 .h2{margin:0;line-height:1.22;font-weight:700}

/* ---------- Responsive ------------------------------------------------ */
@media(max-width:991px){
  .wxpn-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .wxpn-grid,.wxuc-grid{grid-template-columns:1fr}
  .wxpn-card,.wxuc-card{padding:22px}
  .wxpn-calm{--wxpn-calm-h:300px;padding:26px 22px}
  .wxtr-faq{padding:6px 18px}
}