@charset "UTF-8";

/* === v10 — force ns-timeline + ns-item explicit display === */

/* === OpenClaw WP overrides ===
 * Loads AFTER style.css to win specificity for properties theme/Elementor
 * try to reset. Scoped under `main#app`.
 *
 * NOTE: file starts with @charset (not a comment) on purpose — bảo vệ
 * khỏi case FTP/upload bị strip ký tự đầu (đã từng xảy ra: /* → *).
 */

/* ─── 1. Full-width breakout — phá khỏi .ast-container, paint BG full viewport ─── */
main#app {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 0 !important;
  background: #F6F7FB !important;
  color: #1a1a2e !important;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  box-sizing: border-box;
}
main#app *, main#app *::before, main#app *::after { box-sizing: border-box; }

/* Children inherit font-family. Elements with their own monospace rule
   (.uc-demo / .ns-clock counter / code) keep theirs because element-level
   rules in style.css load before this file's body-scope inheritance kicks in. */
main#app { font-family: "Be Vietnam Pro", system-ui, sans-serif !important; }

/* ─── 2. Container width: lock to 1200px ─── */
main#app .container { max-width: 1200px !important; padding: 0 24px !important; margin: 0 auto !important; }

/* ─── 3. Hero title — target by ID nên work với cả <h1> và <h2>
       (Rank Math hoặc plugin SEO khác có thể auto-rewrite h1→h2) ─── */
main#app #hero-title,
main#app .hero #hero-title,
main#app .hero h1, main#app .hero h2,
main#app section.hero h1, main#app section.hero h2 {
  font-size: 56px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
  color: #0B0B1F !important;
  margin: 16px 0 !important;
  text-wrap: balance;
  font-family: "Be Vietnam Pro", system-ui, sans-serif !important;
}
/* Mobile/tablet override — DÙNG FULL SELECTOR LIST để bằng specificity
   với rule base phía trên (0,2,2). Nếu chỉ dùng `main#app #hero-title`
   (specificity 0,2,1) sẽ THUA rule base → mobile không nhỏ chữ được. */
@media (max-width: 1024px) {
  main#app #hero-title,
  main#app .hero #hero-title,
  main#app .hero h1, main#app .hero h2,
  main#app section.hero h1, main#app section.hero h2 { font-size: 30px !important; }
}
@media (max-width: 640px) {
  main#app #hero-title,
  main#app .hero #hero-title,
  main#app .hero h1, main#app .hero h2,
  main#app section.hero h1, main#app section.hero h2 { font-size: 36px !important; }
}

/* <em> bên trong hero title — target qua ID parent thay vì tag */
main#app #hero-title em {
  color: #5B2BE8 !important;
  font-style: normal !important;
  font-weight: inherit !important;
  position: relative;
  white-space: nowrap;
  display: inline-block;
}
main#app #hero-title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 10px;
  background: linear-gradient(90deg, #d9ccff, #a385ff) !important;
  z-index: -1;
  border-radius: 4px;
}

/* ─── 4. Section h2/h3 ─── */
main#app .section-title,
main#app section h2.section-title {
  font-size: 40px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  color: #0B0B1F !important;
  margin: 12px 0 8px !important;
}
@media (max-width: 640px) {
  main#app .section-title { font-size: 30px !important; }
}
main#app .nightshift .section-title,
main#app section.nightshift .section-title { color: #fff !important; }
main#app h3 { font-weight: 700 !important; color: #0B0B1F !important; }
main#app h4 { font-weight: 700 !important; color: #0B0B1F !important; }

/* NightShift section nằm trên dark gradient → h3/h4/text phải trắng,
   override rule h4 chung phía trên. */
main#app .nightshift h3,
main#app .nightshift h4,
main#app .ns-item h4 { color: #fff !important; }
main#app .ns-item p { color: #b6b2d8 !important; }
main#app .ns-stat .big { color: #fff !important; }
main#app .ns-stat .lbl { color: #a78bfa !important; }

/* "Live" pulse dot (inline style background:rgb(34,197,94) = green) → đổi vàng.
   Target qua attribute selector vì là inline style trong SSR HTML. */
main#app .nightshift span[style*="rgb(34, 197, 94)"],
main#app .nightshift span[style*="22c55e"] {
  background: #fbbf24 !important;
  box-shadow: 0 0 12px #fbbf24, 0 0 24px rgba(251, 191, 36, .4) !important;
}

/* (Block 5 đã merge vào block 3 ở trên — target #hero-title em.) */

/* ─── 6. Buttons: copy 1:1 từ style.css gốc, override Astra padding/border ─── */
main#app .btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 14px 22px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  font-family: inherit !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: transform .15s ease, box-shadow .2s, background .2s !important;
}
main#app .btn-primary {
  background: #5B2BE8 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -10px rgba(91, 43, 232, .7) !important;
}
main#app .btn-primary:hover {
  background: #4a20d1 !important;
  transform: translateY(-1px) !important;
}
main#app .btn-ghost {
  background: #fff !important;
  border: 1px solid #E6E8F0 !important;
  color: #0B0B1F !important;
}
main#app .btn-ghost:hover {
  border-color: #5B2BE8 !important;
  color: #5B2BE8 !important;
}
/* Pricing card btn-primary inverted (white bg, dark text) */
main#app .price-card .btn-primary {
  background: #fff !important;
  color: #0B0B1F !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4) !important;
}
main#app .price-card .btn-primary:hover { background: #ece7ff !important; }
main#app .price-card .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: #fff !important;
}

/* ROI urgency CTA button (white bg trên gradient navy) — inline style bị
   .btn-primary override mất, cần selector cụ thể hơn */
main#app .roi-urgency .btn-primary,
main#app .roi-cta .btn-primary {
  background: #fff !important;
  color: #1A1744 !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4) !important;
}
main#app .roi-urgency .btn-primary:hover,
main#app .roi-cta .btn-primary:hover {
  background: #ece7ff !important;
}

/* ─── 6b. Feature cards — Astra có thể đè padding/border ─── */
main#app .feat {
  background: #fff !important;
  border: 1px solid #E6E8F0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .3s, background .3s !important;
  position: relative !important;
  overflow: hidden !important;
}
main#app .feat:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 30px 60px -20px rgba(91, 43, 232, .35) !important;
  border-color: #5B2BE8 !important;
}
main#app .feat .icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 14px !important;
  font-size: 22px !important;
  background: #eee9ff !important;
  color: #5B2BE8 !important;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), background .3s, color .3s !important;
}
main#app .feat:hover .icon {
  transform: scale(1.12) rotate(-6deg) !important;
  background: #5B2BE8 !important;
  color: #fff !important;
}
main#app .feat h3 {
  margin: 0 0 6px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0B0B1F !important;
  transition: color .3s !important;
}
main#app .feat:hover h3 { color: #5B2BE8 !important; }
main#app .feat p {
  margin: 0 !important;
  color: #5b6076 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* ─── 7. Lists ─── */
main#app .feature-grid, main#app .uc-tabs, main#app .tabs,
main#app .compare-grid, main#app .roi-grid, main#app .ns-stats,
main#app .feature-grid li, main#app .ns-stats div {
  list-style: none !important;
}
main#app ul { padding: 0; margin: 0; }
main#app .pricing ul, main#app .uc-panel ul, main#app .roi-card ul { padding-left: 18px; }
main#app .pricing ul li, main#app .uc-panel ul li, main#app .roi-card ul li { list-style: disc; }

/* ─── 8. Strip Elementor widget container padding so hero goes edge-to-edge ─── */
.elementor-widget-html .elementor-widget-container { padding: 0 !important; }
.elementor-widget-html > .elementor-widget-container > main#app { margin: 0; padding: 0; }

/* ─── 9. Astra's <article>/<main> wrapper sometimes constrains width ─── */
.entry-content main#app, article main#app, .ast-container main#app,
.elementor-widget-container main#app {
  max-width: none !important;
  padding: 0 !important;
}

/* Astra adds .entry-content { margin } to articles — kill for our hero */
.entry-content > main#app { margin: 0 !important; }

/* ─── 10. WordPress wp-emoji-release.js replaces 💻 emoji thành <img class="emoji">.
   Image dính sát text → cần margin-right + vertical-align để giữ khoảng cách. ─── */
main#app img.emoji,
main#app img.wp-smiley {
  display: inline-block !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 6px 0 0 !important;        /* khoảng cách emoji ↔ text */
  vertical-align: -0.15em !important;  /* canh giữa với text */
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Emoji trong tabs (kèm text) — cần gap nhỏ */
main#app .tabs img.emoji,
main#app .uc-tabs img.emoji {
  margin: 0 5px 0 0 !important;
}

/* Emoji trong icon-only containers (chỉ có 1 emoji, không text bên cạnh) —
   reset margin để emoji canh giữa box. Container đã có place-items:center. */
main#app .feat .icon img.emoji,
main#app .tg-perk .ico img.emoji,
main#app .ns-item .ico img.emoji,
main#app .ns-moon img.emoji,
main#app .roi-person img.emoji,
main#app .price-card .badge img.emoji,
main#app .roi-tag img.emoji,
main#app .roi-label img.emoji {
  margin: 0 !important;
  vertical-align: middle !important;
}

/* ─── 11. Theme paragraph spacing — match style.css gốc 1:1 ─── */
main#app p { margin: 0 0 12px; line-height: 1.6; }
main#app .hero p.lead {
  font-size: 18px !important;
  color: #5b6076 !important;
  line-height: 1.6 !important;
  max-width: 560px !important;
  margin: 14px 0 !important;
}
/* section-sub: LEFT align (original không có text-align center, không margin auto) */
main#app .section-sub {
  color: #5b6076 !important;
  font-size: 16px !important;
  max-width: 640px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  margin: 0 0 36px !important;
}
/* NightShift section-sub màu khác (light purple) cho khớp dark theme */
main#app .nightshift .section-sub { color: #b6b2d8 !important; }

/* Showcase (Telegram) section-sub — rộng hơn (800px thay vì 640px) cho fit
   câu mô tả dài "Không cần mở web... trực tiếp vào cuộc chat." */
main#app .showcase .section-sub { max-width: 800px !important; }

/* ROI section — padding giảm 100px → 50px (gọn hơn, đỡ dư trên/dưới) */
main#app .roi { padding: 50px 0 !important; }

/* Final CTA — toàn section căn giữa (h2 + p + buttons).
   Original .finalcta { text-align: center } bị Astra override → ép lại. */
main#app .finalcta { text-align: center !important; }
main#app .finalcta h2#cta-title,
main#app .finalcta h2 {
  font-size: 48px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: #0B0B1F !important;
  margin: 0 0 12px !important;
  text-align: center !important;
  text-wrap: balance;
}
@media (max-width: 640px) { main#app .finalcta h2 { font-size: 32px !important; } }
main#app .finalcta p {
  color: #5b6076 !important;
  font-size: 17px !important;
  margin: 0 auto 24px !important;
  max-width: 620px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

/* ─── 12. Eyebrow pill — theme might style spans funny ─── */
main#app .eyebrow {
  display: inline-block !important;
  background: rgba(91, 43, 232, 0.12) !important;
  color: #5B2BE8 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  letter-spacing: 0.2px !important;
}

/* ─── 13. Pricing card on dark gradient — h2 và text phải trắng ─── */
main#app .price-card h2,
main#app #pricing-title {
  color: #fff !important;
  font-size: 44px !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
  margin: 16px 0 6px !important;
  text-wrap: balance;
}
@media (max-width: 640px) { main#app #pricing-title { font-size: 32px !important; } }
main#app .price-card .badge {
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
main#app .price-card,
main#app .price-card ul li,
main#app .price-card .amount { color: #fff !important; }

/* Pricing ul — margin-bottom 24px tách bullets khỏi 2 buttons phía dưới
   (Astra ép `ul { margin: revert }` làm mất khoảng cách) */
main#app .price-card ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
  display: grid !important;
  gap: 10px !important;
  font-size: 15px !important;
}
main#app .price-card ul li {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
main#app .price-card ul li::before {
  content: "✓" !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #7c4dff !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  flex: 0 0 22px !important;
}
main#app .price-card .note { color: #c8beff !important; }
main#app .price-card .amount {
  font-size: 76px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}
main#app .price-card .amount small { font-size: 18px !important; color: #c8beff !important; font-weight: 500 !important; margin-left: 6px !important; }

/* ─── 14. Sticky contact rail — Astra ép button{padding;border-radius:4px}
       làm sc-btn vuông. Force lại tròn 54x54. ─── */
main#app .sc-btn,
main#app a.sc-btn,
main#app button.sc-btn {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  font-weight: 700 !important;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,.3) !important;
  text-decoration: none !important;
  position: relative !important;
}
main#app .sc-btn:hover { transform: scale(1.08) !important; }
main#app .sc-zalo { background: #fff !important; color: #0068FF !important; border: 1px solid #E0EAFF !important; }
main#app .sc-phone { background: #12a870 !important; color: #fff !important; }
main#app .sc-msg { background: linear-gradient(135deg,#00B2FF 0%,#006AFF 50%,#A033FF 100%) !important; color: #006AFF !important; }
main#app .sc-top {
  background: linear-gradient(135deg, #5B2BE8, #8b5cf6) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px -8px rgba(91, 43, 232, .55) !important;
}
@media (max-width: 640px) {
  main#app .sc-btn { width: 46px !important; height: 46px !important; min-width: 46px !important; }
}

/* ─── 15. Hero chat send button — Astra ép padding làm to ─── */
main#app .chatcard .send,
main#app .chat-input .send {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 8px !important;
  background: #5B2BE8 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  margin: 0 !important;
}

/* ─── 16. Hero chat — copy 1:1 từ style.css gốc, override Astra button paddings ─── */
main#app .chatcard {
  background: #fff !important;
  border: 1px solid #E6E8F0 !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 80px -30px rgba(26,23,68,.25), 0 10px 30px -12px rgba(91,43,232,.15) !important;
  padding: 18px !important;
  position: relative !important;
}
main#app .chat-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 4px 6px 14px !important;
  border-bottom: 1px dashed #E6E8F0 !important;
  margin-bottom: 14px !important;
}
main#app .chat-head .ttl {
  font-size: 12px !important;
  color: #5b6076 !important;
  margin-left: auto !important;
  font-family: "JetBrains Mono", monospace !important;
}
main#app .chatcard .tabs,
main#app .tabs {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
  list-style: none !important;
}
main#app .chatcard .tabs .tab,
main#app .tabs .tab {
  padding: 6px 10px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 999px !important;
  background: #f1efff !important;
  color: #5B2BE8 !important;
  border: 1px solid #e4dcff !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-family: inherit !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  word-spacing: 4px !important;       /* khoảng cách giữa emoji và text */
  box-shadow: none !important;
  white-space: nowrap !important;
}
main#app .tabs .tab.active {
  background: #5B2BE8 !important;
  color: #fff !important;
  border-color: #5B2BE8 !important;
}

/* ─── 16b. Chat messages (User/Bot bubbles) ─── */
main#app .msg {
  display: flex !important;
  gap: 10px !important;
  margin: 10px 0 !important;
}
main#app .msg .avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  flex: 0 0 28px !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  color: #fff !important;
}
main#app .msg.user .avatar { background: #e6e8f0 !important; color: #4b5068 !important; }
main#app .msg.bot .avatar { background: linear-gradient(135deg, #5B2BE8, #9b77ff) !important; }
main#app .bubble {
  background: #f4f4fb !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  max-width: 86% !important;
}
main#app .msg.bot .bubble {
  background: #eee9ff !important;
  color: #2e1a7a !important;
}

/* ─── 16c. Chat input row ─── */
main#app .chat-input {
  margin-top: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid #E6E8F0 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  background: #fafbff !important;
}
main#app .chat-input input {
  border: 0 !important;
  outline: 0 !important;
  flex: 1 !important;
  background: transparent !important;
  font-size: 14px !important;
  font-family: inherit !important;
  padding: 0 !important;
  height: auto !important;
  box-shadow: none !important;
}

/* ─── 16d. Eyebrow pill — copy đúng padding 6px 12px (không 14px) ─── */
main#app .eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: #eee9ff !important;
  color: #5B2BE8 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .3px !important;
}
main#app .nightshift .eyebrow {
  background: rgba(124,77,255,.18) !important;
  color: #c8bdff !important;
  border: 1px solid rgba(124,77,255,.35) !important;
}

/* ─── 17. Use case tabs — same problem ─── */
main#app .uc-tabs .uc-tab {
  padding: 10px 16px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #0B0B1F !important;
  border: 1px solid #E6E8F0 !important;
  font-weight: 600 !important;
  margin: 0 !important;
  font-family: inherit !important;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  word-spacing: 4px !important;       /* khoảng cách emoji ↔ text */
  white-space: nowrap !important;
  letter-spacing: normal !important;
}
main#app .uc-tabs .uc-tab.active {
  background: #0B0B1F !important;
  color: #fff !important;
  border-color: #0B0B1F !important;
}

/* ─── 18. NightShift dot navigation — buttons under the moon clock ─── */
main#app .nightshift button[aria-label^="Xem ca đêm"] {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  font-size: 0 !important;
  cursor: pointer;
}

/* ─── 19. FAQ — match style.css gốc 1:1.
   QUAN TRỌNG: padding nằm trên .faq-item, summary KHÔNG có padding.
   (Trước đó mình đặt padding 18px 24px cho summary → cộng dồn 22+24=46px → text bị thọt phải) */
main#app .faq-list { margin-top: 36px !important; display: grid !important; gap: 12px !important; }
main#app .faq-item {
  background: #fff !important;
  border: 1px solid #E6E8F0 !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  cursor: pointer !important;
  transition: border-color .2s !important;
  margin: 0 !important;
}
main#app .faq-item:hover { border-color: #c9beff !important; }
main#app .faq-item[open] { border-color: #5B2BE8 !important; }
main#app .faq-item summary {
  cursor: pointer !important;
  list-style: none !important;
  display: flex !important;
  justify-content: space-between !important;

/* ==========================================================================
   Below this line: responsive polish + new sections — ADDED later, must come
   AFTER the original base styling so cascade order works correctly.
   ========================================================================== */

/* ==========================================================================
   OpenClaw — Responsive polish (tablet & mobile UX overhaul)
   Loads AFTER style.css and wp-overrides.css
   Scoped to main#app + !important to win over Astra/Elementor
   Breakpoints: 1024 (tablet), 900 (mid), 640 (phone), 480 (small phone)
   ========================================================================== */

/* ── 1. Container fluid padding ─────────────────────────────────────────── */
@media (max-width: 768px) {
  main#app .container { padding: 0 18px !important; }
}
@media (max-width: 480px) {
  main#app .container { padding: 0 14px !important; }
}

/* ── 2. Section vertical rhythm — shrink on tablet/mobile ──────────────── */
@media (max-width: 1024px) {
  main#app .features,
  main#app .usecases,
  main#app .compare,
  main#app .pricing,
  main#app .faq          { padding: 60px 0 !important; }
  main#app .nightshift,
  main#app .showcase,
  main#app .roi          { padding: 70px 0 !important; }
  main#app .hero         { padding: 48px 0 32px !important; }
  main#app .finalcta     { padding: 60px 0 !important; }
}
@media (max-width: 640px) {
  main#app .features,
  main#app .usecases,
  main#app .compare,
  main#app .pricing,
  main#app .faq,
  main#app .nightshift,
  main#app .showcase,
  main#app .roi,
  main#app .finalcta     { padding: 48px 0 !important; }
  main#app .hero         { padding: 28px 0 20px !important; }
}

/* ── 3. Section titles — finer scaling ─────────────────────────────────── */
@media (max-width: 1024px) {
  main#app .section-title { font-size: 32px !important; }
}
@media (max-width: 480px) {
  main#app .section-title { font-size: 24px !important; line-height: 1.2 !important; }
  main#app .section-sub   { font-size: 14.5px !important; }
}

/* ── 4. Hero — center, fluid lead, stack CTA buttons ───────────────────── */
@media (max-width: 1024px) {
  main#app .hero-grid     { grid-template-columns: 1fr !important; gap: 36px !important; }
  main#app .hero p.lead   { max-width: 100% !important; }
}
@media (max-width: 640px) {
  main#app .hero p.lead   { font-size: 15.5px !important; line-height: 1.55 !important; }
  main#app .hero-ctas     { gap: 10px !important; flex-direction: column !important; align-items: stretch !important; }
  main#app .hero-ctas .btn{ width: 100% !important; justify-content: center !important; }
  main#app .trust         { gap: 8px 18px !important; font-size: 12.5px !important; margin-top: 20px !important; }
}

/* ── 4b. Lock chat content area height so typing animation doesn't push
       layout below. Now sized for 4 bubbles (2 Q&A turns).
       Without this, the chat-input field jumps DOWN as bot text grows
       char-by-char + when turn 2 appears.
       Selectors: :has() (modern) + :nth-of-type(3) (fallback). */
main#app .chatcard > div:has(> .msg.user),
main#app .chatcard > div:nth-of-type(3) {
  height: 360px !important;     /* desktop — fixed, no jump */
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  overflow: hidden !important;
}

/* === HARD LOCK chatcard outer height — v3 (with CSS contain) ===
   `contain: size layout` tells browser this element's size NEVER depends
   on its content → even if inner content overflows, parent stays exact size.
   Belt and suspenders: also use selector without main#app prefix in case
   Elementor wraps and breaks specificity. */
main#app .chatcard,
.chatcard {
  height: 620px !important;
  max-height: 620px !important;
  overflow: hidden !important;
  contain: size layout !important;
}
@media (max-width: 1024px) {
  main#app .chatcard,
  .chatcard { height: 680px !important; max-height: 680px !important; }
}
@media (max-width: 640px) {
  main#app .chatcard,
  .chatcard { height: 720px !important; max-height: 720px !important; }
}
@media (max-width: 380px) {
  main#app .chatcard,
  .chatcard { height: 780px !important; max-height: 780px !important; }
}
@media (max-width: 1024px) {
  main#app .chatcard > div:has(> .msg.user),
  main#app .chatcard > div:nth-of-type(3) { height: 400px !important; }
}
@media (max-width: 640px) {
  main#app .chatcard > div:has(> .msg.user),
  main#app .chatcard > div:nth-of-type(3) { height: 440px !important; }
}
@media (max-width: 380px) {
  main#app .chatcard > div:has(> .msg.user),
  main#app .chatcard > div:nth-of-type(3) { height: 480px !important; }
}

/* 4c. Empty u2/b2 bubbles — use visibility:hidden NOT display:none.
       Reason: display:none REMOVES bubble from layout → when content fills
       in, layout shifts down → causes "jump" feel. visibility:hidden keeps
       slot reserved → content fade in without any layout shift. */
main#app .chatcard .msg.user:has(.bubble:empty),
main#app .chatcard .msg.bot:has(.bubble:empty) {
  visibility: hidden !important;
}

/* ── 5. Hero chat card — tabs WRAP to 2 rows (NOT horizontal scroll).
       Reason: hero showcases features; hiding tabs behind a scroll users
       don't notice defeats the marketing purpose. 8 tabs fit comfortably in
       2 rows when padding/font are slightly reduced. */
@media (max-width: 640px) {
  main#app .chatcard           { padding: 14px !important; border-radius: 16px !important; }
  main#app .chatcard .tabs,
  main#app .chatcard ul.tabs   {
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: visible !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }
  main#app .chatcard .tabs .tab,
  main#app .tabs .tab {
    padding: 5px 9px !important;
    font-size: 11px !important;
    flex: 0 0 auto !important;
    word-spacing: 2px !important;
  }
  main#app .bubble             { font-size: 13px !important; max-width: 90% !important; }
}
@media (max-width: 380px) {
  main#app .chatcard .tabs .tab,
  main#app .tabs .tab { padding: 4px 7px !important; font-size: 10.5px !important; }
}

/* ── 6. Use case tabs (16+ buttons) — horizontal scroll, never wrap ───── */
@media (max-width: 1024px) {
  main#app .uc-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 28px -24px 20px !important;
    padding: 4px 24px 14px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c9beff transparent;
    scroll-snap-type: x proximity;
  }
  main#app .uc-tabs::-webkit-scrollbar          { height: 4px !important; }
  main#app .uc-tabs::-webkit-scrollbar-thumb    { background: #c9beff !important; border-radius: 4px !important; }
  main#app .uc-tabs::-webkit-scrollbar-track    { background: transparent !important; }
  main#app .uc-tabs .uc-tab                     { flex-shrink: 0 !important; scroll-snap-align: start; }
}
@media (max-width: 640px) {
  main#app .uc-tabs        { margin: 22px -18px 16px !important; padding: 4px 18px 12px !important; }
  main#app .uc-tabs .uc-tab{ padding: 8px 14px !important; font-size: 13px !important; }
}

/* ── 7. Use case panel — relax min-height, vertical stack ──────────────── */
@media (max-width: 1024px) {
  main#app .uc-panel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 24px !important;
    gap: 20px !important;
  }
  main#app .uc-panel h3 { font-size: 22px !important; }
  main#app .uc-demo     { min-height: 180px !important; padding: 14px !important; font-size: 12px !important; }
}
@media (max-width: 640px) {
  main#app .uc-panel { padding: 18px !important; border-radius: 16px !important; }
}


/* === HARD LOCK uc-demo height — v3 (with CSS contain) ===
   Selector kép (with/without main#app) for guaranteed cascade win. */
main#app .uc-demo,
.uc-demo {
  height: 340px !important;
  max-height: 340px !important;
  overflow: hidden !important;
  contain: size layout !important;
}
@media (max-width: 1024px) {
  main#app .uc-demo,
  .uc-demo { height: 360px !important; max-height: 360px !important; padding: 14px !important; font-size: 12px !important; }
}
@media (max-width: 640px) {
  main#app .uc-demo,
  .uc-demo { height: 400px !important; max-height: 400px !important; }
}
@media (max-width: 380px) {
  main#app .uc-demo,
  .uc-demo { height: 440px !important; max-height: 440px !important; }
}

/* ── 8. Feature grid — 3 → 2 → 1 with proper steps ─────────────────────── */
@media (max-width: 1024px) {
  main#app .feature-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-top: 32px !important; }
}
@media (max-width: 560px) {
  main#app .feature-grid { grid-template-columns: 1fr !important; }
  main#app .feat         { padding: 20px !important; }
  main#app .feat h3      { font-size: 16px !important; }
  main#app .feat p       { font-size: 13.5px !important; }
}

/* ── 9. Comparison grid ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  main#app .compare-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}
@media (max-width: 640px) {
  main#app .comp-card           { padding: 22px !important; border-radius: 16px !important; }
  main#app .comp-card .price    { font-size: 26px !important; margin: 4px 0 14px !important; }
  main#app .comp-card h4        { font-size: 12px !important; letter-spacing: 1px !important; }
  main#app .comp-row            { font-size: 13.5px !important; padding: 9px 0 !important; }
  main#app .comp-row .mark      { width: 20px !important; height: 20px !important; flex: 0 0 20px !important; font-size: 12px !important; }
}

/* ── 10. Pricing card — biggest mobile offender ────────────────────────── */
@media (max-width: 1024px) {
  main#app .price-card {
    grid-template-columns: 1fr !important;
    padding: 32px !important;
    gap: 24px !important;
  }
  main#app .price-card h2     { font-size: 32px !important; }
  main#app .price-card .amount{ font-size: 60px !important; }
}
@media (max-width: 640px) {
  main#app .price-card        { padding: 24px !important; border-radius: 18px !important; }
  main#app .price-card h2,
  main#app #pricing-title     { font-size: 24px !important; line-height: 1.2 !important; margin: 14px 0 6px !important; }
  main#app .price-card .amount{ font-size: 44px !important; }
  main#app .price-card .amount small { font-size: 13px !important; }
  main#app .price-card .badge { font-size: 11px !important; padding: 5px 10px !important; }
  main#app .price-card .note  { font-size: 13px !important; margin-bottom: 16px !important; }
  main#app .price-card ul     { font-size: 14px !important; gap: 8px !important; margin-bottom: 18px !important; }
  main#app .price-card .btn   { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 480px) {
  main#app .price-card { padding: 20px !important; }
  main#app .price-card h2,
  main#app #pricing-title { font-size: 22px !important; }
  main#app .price-card .amount { font-size: 38px !important; }
}

/* ── 11. Telegram showcase — phone scales, perks reflow ────────────────── */
@media (max-width: 900px) {
  main#app .tg-wrap   { grid-template-columns: 1fr !important; gap: 28px !important; }
  main#app .tg-perks  { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
}
@media (max-width: 640px) {
  main#app .tg-perks   { grid-template-columns: 1fr !important; }
  main#app .tg-device  { width: 280px !important; }
  main#app .tg-screen  { height: 540px !important; }
  main#app .tg-card    { padding: 20px !important; border-radius: 16px !important; }
  main#app .tg-how h4  { font-size: 18px !important; margin-bottom: 14px !important; }
  main#app .tg-step    { gap: 12px !important; margin-bottom: 14px !important; }
  main#app .tg-step b  { font-size: 14px !important; }
  main#app .tg-step p  { font-size: 12.5px !important; }
}
@media (max-width: 380px) {
  main#app .tg-device  { width: 260px !important; }
  main#app .tg-screen  { height: 480px !important; }
}

/* ── 12. Night-shift — clock smaller, 2-col stats on phone ─────────────── */
@media (max-width: 900px) {
  main#app .ns-grid  { grid-template-columns: 1fr !important; gap: 32px !important; }
  main#app .ns-clock { width: 240px !important; height: 240px !important; }
  main#app .ns-moon  { font-size: 60px !important; }
}
@media (max-width: 640px) {
  main#app .ns-stats     { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  main#app .ns-item      { grid-template-columns: 64px 36px 1fr !important; gap: 10px !important; padding: 12px !important; }
  main#app .ns-item h4   { font-size: 14px !important; }
  main#app .ns-item p    { font-size: 12.5px !important; }
  main#app .ns-item .time{ font-size: 12px !important; }
  main#app .ns-stat      { padding: 16px !important; }
  main#app .ns-stat .big { font-size: 28px !important; }
}

/* ── 13. ROI section ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  main#app .roi-grid    { grid-template-columns: 1fr !important; gap: 14px !important; }
  main#app .roi-vs      { margin: -6px auto !important; width: 50px !important; height: 50px !important; font-size: 18px !important; }
  main#app .roi-urg-row { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; }
}
@media (max-width: 640px) {
  main#app .roi-card    { padding: 22px !important; border-radius: 16px !important; }
  main#app .roi-urgency { padding: 24px !important; border-radius: 18px !important; }
  main#app .roi-urg-num { font-size: 26px !important; }
  main#app .roi-urg-lbl { font-size: 12px !important; }
  main#app .roi-cta     { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  main#app .roi-cta .btn{ width: 100% !important; justify-content: center !important; }
  main#app .roi-person  { font-size: 44px !important; }
}

/* ── 14. FAQ — tighter padding & font ──────────────────────────────────── */
@media (max-width: 640px) {
  main#app .faq-item        { padding: 14px 16px !important; border-radius: 12px !important; }
  main#app .faq-item summary{ font-size: 14.5px !important; gap: 12px !important; line-height: 1.4 !important; }
  main#app .faq-answer      { font-size: 13.5px !important; line-height: 1.65 !important; margin-top: 10px !important; }
  main#app .plus            { width: 24px !important; height: 24px !important; flex: 0 0 24px !important; font-size: 16px !important; }
}

/* ── 15. Final CTA ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  main#app .finalcta h2  { font-size: 26px !important; }
  main#app .finalcta p   { font-size: 14.5px !important; }
  main#app .finalcta .btn{ width: 100% !important; justify-content: center !important; }
  main#app .finalcta .hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
}

/* ── 16. Strip (trust bar) ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  main#app .strip      { padding: 14px 0 !important; margin-top: 24px !important; }
  main#app .strip .row { gap: 8px !important; flex-direction: column !important; align-items: flex-start !important; font-size: 13px !important; }
}

/* ── 17. Footer — 5 cols → 2 → 1 with logo centered ────────────────────── */
@media (max-width: 1024px) {
  main#app .footer .grid       { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 24px !important; }
  main#app .footer .footer-logo{ grid-column: 1 / -1 !important; margin: 0 auto 8px !important; }
}
@media (max-width: 560px) {
  main#app .footer            { padding: 40px 0 24px !important; margin-top: 48px !important; }
  main#app .footer .grid      { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center; }
  main#app .footer ul         { justify-items: center; }
  main#app .footer .bottom    { flex-direction: column !important; gap: 8px !important; text-align: center !important; }
}

/* ── 18. Sticky bottom bar — body padding so content not hidden ────────── */
@media (max-width: 720px) {
  main#app                     { padding-bottom: 76px !important; }
  main#app .sticky-bar         { padding: 8px 12px !important; gap: 8px !important; }
  main#app .sticky-bar .price-mini   { font-size: 12px !important; }
  main#app .sticky-bar .price-mini b { font-size: 15px !important; }
  main#app .sticky-bar .btn          { padding: 10px 14px !important; font-size: 13.5px !important; }
}

/* ── 19. Sticky contact rail — calibrate position per device so all 4
       buttons fit in viewport above sticky-bar, and are in thumb zone. */
@media (max-width: 1024px) {
  main#app .sticky-contact { right: 14px !important; bottom: 100px !important; gap: 10px !important; }
}
@media (max-width: 640px) {
  main#app .sticky-contact { right: 10px !important; bottom: 130px !important; gap: 8px !important; }
  main#app .sc-btn         { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  main#app .sc-label       { display: none !important; }
  main#app .sc-top         { display: none !important; }  /* drop scroll-to-top on phone — saves a slot */
}
@media (max-width: 380px) {
  main#app .sticky-contact { bottom: 120px !important; gap: 6px !important; }
  main#app .sc-btn         { width: 42px !important; height: 42px !important; min-width: 42px !important; }
}

/* ── 20. Show-case iframe / Telegram embed safety ──────────────────────── */
@media (max-width: 640px) {
  main#app iframe        { max-width: 100% !important; }
  main#app img,
  main#app svg           { max-width: 100% !important; height: auto; }
}

/* ── 21. Body word-break safety on long Vietnamese URLs / strings ──────── */
main#app .bubble,
main#app .tg-bubble,
main#app .faq-answer { overflow-wrap: anywhere; }

/* ── 22. Tap target — buttons min 44px height on mobile (iOS guideline) ── */
@media (max-width: 640px) {
  main#app .btn { min-height: 44px !important; padding: 12px 18px !important; }
}

/* ==========================================================================
   23. CRITICAL FIXES — horizontal overflow + hero hard-break
   Added after first round of mobile testing.
   ========================================================================== */

/* 23a. Kill horizontal overflow — but ONLY on html/body, NOT main#app.
        Reason: main#app has `position: relative`, and applying overflow-x
        to it clips fixed-position children (sticky-contact buttons, sticky
        bottom bar). body's clip is enough — main#app stays unclipped. */
html, body          { overflow-x: hidden !important; max-width: 100% !important; }

@media (max-width: 1024px) {
  main#app {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* 23b. Hero h1 — fluid font with clamp() + match wp-overrides specificity
        so we actually win the cascade.
        clamp(20px, 5.5vw + 0.25rem, 56px):
          320px -> ~22px,  390px -> ~25px,  640px -> ~39px,
          768px -> ~46px,  1024px+ -> 56px (desktop unchanged) */
main#app #hero-title,
main#app .hero #hero-title,
main#app .hero h1, main#app .hero h2,
main#app section.hero h1, main#app section.hero h2 {
  font-size: clamp(20px, 5.5vw + 0.25rem, 56px) !important;
  line-height: 1.15 !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-wrap: wrap !important;
  hyphens: auto;
}
@media (max-width: 768px) {
  main#app #hero-title em,
  main#app .hero #hero-title em {
    white-space: normal !important;
    display: inline !important;
  }
  main#app #hero-title br,
  main#app .hero #hero-title br,
  main#app section.hero #hero-title br { display: none !important; }
}

/* 23b2. Other key headings — fluid scaling */
main#app .section-title,
main#app section h2.section-title {
  font-size: clamp(22px, 4.5vw + 0.25rem, 40px) !important;
  line-height: 1.15 !important;
}
main#app #pricing-title,
main#app .price-card h2 {
  font-size: clamp(22px, 4.5vw + 0.25rem, 44px) !important;
  line-height: 1.15 !important;
}
main#app .price-card .amount {
  font-size: clamp(36px, 8vw, 76px) !important;
  line-height: 1 !important;
}
main#app .finalcta h2 {
  font-size: clamp(24px, 5vw, 48px) !important;
  line-height: 1.15 !important;
}

/* 23b3. Force grid/flex children to allow shrinking below intrinsic content
         width — classic cause of overflow inside grid/flex containers. */
@media (max-width: 1024px) {
  main#app .hero-grid,        main#app .hero-grid > *,
  main#app .uc-panel,         main#app .uc-panel > *,
  main#app .price-card,       main#app .price-card > *,
  main#app .ns-grid,          main#app .ns-grid > *,
  main#app .tg-wrap,          main#app .tg-wrap > *,
  main#app .compare-grid,     main#app .compare-grid > *,
  main#app .feature-grid,     main#app .feature-grid > *,
  main#app .roi-grid,         main#app .roi-grid > * { min-width: 0 !important; }
}

/* 23c. Topbar — too noisy on mobile, compact it */
@media (max-width: 768px) {
  main#app .topbar .inner       { padding: 8px 14px !important; gap: 12px !important; }
  main#app .topbar .tag         { font-size: 12px !important; line-height: 1.3 !important; }
  main#app .topbar .search      { display: none !important; }   /* defensive — already in style.css */
}
@media (max-width: 480px) {
  main#app .topbar              { font-size: 12px !important; }
  main#app .topbar .inner       { padding: 6px 12px !important; }
}

/* 23d. Header (logo + nav row) — compact, ensure hamburger area visible */
@media (max-width: 768px) {
  main#app .header .inner       { padding: 10px 14px !important; }
  main#app .brand               { gap: 8px !important; }
  main#app .brand-logo          { width: 36px !important; height: 36px !important; }
  main#app .brand-name          { font-size: 12px !important; }
  main#app .brand-name small    { font-size: 9px !important; }
}

/* 23e. Defensive: any direct child of main#app must not exceed viewport
       SCOPED to ≤1024 only — at desktop, leave the 1200px container alone! */
@media (max-width: 1024px) {
  main#app > *,
  main#app section,
  main#app .container { max-width: 100% !important; }
}

/* 23f. Pre/code blocks (inside chatcard demo etc) shouldn't push width */
main#app pre, main#app code { max-width: 100% !important; overflow-x: auto !important; word-break: break-word; }

/* 23g. Long Vietnamese text in eyebrow pills — wrap instead of overflow */
@media (max-width: 480px) {
  main#app .eyebrow { white-space: normal !important; line-height: 1.3 !important; text-align: center !important; }
}

/* 23h. Footer logo SVG — was 120x120, shrink on mobile */
@media (max-width: 560px) {
  main#app .footer-logo { width: 80px !important; height: 80px !important; }
}


/* ==========================================================================
   24. EXCLUSIVE FREE API SECTION — placed between .compare and .roi
   ========================================================================== */
main#app .exclusive-api {
  padding: 90px 0;
  background: linear-gradient(180deg, #f8f5ff 0%, #fff 60%, #f6f7fb 100%);
  position: relative;
  overflow: hidden;
}
main#app .exclusive-api::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 25%, rgba(91,43,232,.10), transparent 35%),
    radial-gradient(circle at 88% 75%, rgba(124,77,255,.08), transparent 35%);
  pointer-events: none;
}
main#app .exclusive-api .container { position: relative; z-index: 1; }
main#app .exclusive-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
}
main#app .exclusive-badge {
  background: linear-gradient(135deg, #fff3e0, #ffe0a8) !important;
  color: #6a3a00 !important;
  border: 1px solid #ffd47a !important;
  font-weight: 700 !important;
  padding: 8px 14px !important;
  font-size: 12.5px !important;
}
main#app .exclusive-text .section-title { margin: 14px 0 12px !important; }
main#app .exclusive-text .section-title .gpt-glow {
  background: linear-gradient(135deg, #5B2BE8, #9b77ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
  display: inline-block;
}
main#app .exclusive-text .section-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: 24px;
}
main#app .exclusive-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0 28px;
}
main#app .exc-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  padding: 14px;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
main#app .exc-point:hover {
  border-color: #5B2BE8;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(91,43,232,.3);
}
main#app .exc-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--violet-soft, #eee9ff);
  color: var(--violet, #5B2BE8);
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
main#app .exc-point > div b {
  display: block;
  font-size: 14px;
  color: var(--ink, #0B0B1F);
  margin-bottom: 3px;
  font-weight: 700;
  line-height: 1.3;
}
main#app .exc-point > div small {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #5b6076);
  line-height: 1.45;
}
main#app .exclusive-cta {
  margin-top: 8px;
  font-size: 15px !important;
  padding: 14px 24px !important;
}

/* Mock API dashboard card */
main#app .api-card {
  background: linear-gradient(135deg, #1a1744 0%, #2a1a75 100%);
  color: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 30px 60px -20px rgba(91,43,232,.4),
              0 10px 30px -15px rgba(26,23,68,.3);
  position: relative;
  overflow: hidden;
}
main#app .api-card::before {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,77,255,.4), transparent 70%);
  pointer-events: none;
}
main#app .api-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px dashed rgba(255,255,255,.15);
  position: relative;
  z-index: 1;
}
main#app .api-status {
  font-size: 11px;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: .5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
}
main#app .api-dot {
  width: 8px; height: 8px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80, 0 0 16px rgba(74,222,128,.5);
  animation: apipulse 1.6s ease-in-out infinite;
}
@keyframes apipulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .5; transform: scale(.85); }
}
main#app .api-model {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: #c8beff;
}
main#app .api-card-body { position: relative; z-index: 1; }
main#app .api-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  color: #c8beff;
}
main#app .api-row strong {
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
}
main#app .api-positive { color: #4ade80 !important; }
main#app .api-strike   { color: #ff8a80 !important; text-decoration: line-through; }
main#app .api-free     { color: #4ade80 !important; font-size: 15px !important; font-weight: 800 !important; }
main#app .api-bar {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 8px;
}
main#app .api-bar-fill {
  height: 100%;
  width: 24%;
  background: linear-gradient(90deg, #5B2BE8, #9b77ff);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(124,77,255,.6);
}
main#app .api-divider {
  border: 0;
  border-top: 1px dashed rgba(255,255,255,.2);
  margin: 12px 0 6px;
}
main#app .api-savings {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(74,222,128,.15), rgba(124,77,255,.15));
  border: 1px solid rgba(74,222,128,.3);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 13.5px;
  font-family: "Be Vietnam Pro", sans-serif;
  color: #fff;
}
main#app .api-savings strong {
  color: #4ade80;
  font-size: 18px;
  font-weight: 800;
}

/* VS comparison rows */
main#app .api-vs { margin-top: 16px; display: grid; gap: 8px; }
main#app .vs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink, #0B0B1F);
}
main#app .vs-row b { font-weight: 700; }
main#app .vs-them {
  background: #fff5f5;
  border: 1px solid #ffd3d3;
}
main#app .vs-them strong { color: #E53E3E; font-size: 12.5px; font-weight: 700; }
main#app .vs-us {
  background: linear-gradient(135deg, #f4efff, #e8defe);
  border: 1px solid #c9beff;
}
main#app .vs-us strong { color: #5B2BE8; font-size: 12.5px; font-weight: 800; }

/* Responsive */
@media (max-width: 1024px) {
  main#app .exclusive-api { padding: 60px 0 !important; }
  main#app .exclusive-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  main#app .exclusive-text .section-sub { max-width: 100% !important; }
}
@media (max-width: 640px) {
  main#app .exclusive-api { padding: 48px 0 !important; }
  main#app .exclusive-points {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  main#app .exc-point { padding: 12px !important; }
  main#app .exc-ico { width: 36px !important; height: 36px !important; font-size: 18px !important; }
  main#app .api-card { padding: 18px !important; border-radius: 16px !important; }
  main#app .api-savings { padding: 10px 12px !important; font-size: 12.5px !important; }
  main#app .api-savings strong { font-size: 16px !important; }
  main#app .vs-row { font-size: 12px !important; padding: 10px 12px !important; }
  main#app .exclusive-cta { width: 100% !important; justify-content: center !important; }
}

/* ── v5: Hard horizontal overflow prevention (mobile drag fix) ──────────── */
html, body {
  overflow-x: clip !important;            /* `clip` stronger than hidden */
  max-width: 100vw !important;
  position: relative !important;
}
@media (max-width: 1024px) {
  html, body {
    width: 100vw !important;
    touch-action: pan-y !important;       /* block horizontal touch drag */
    overscroll-behavior-x: none !important;
  }
  main#app { overflow-x: clip !important; }
}

/* ── v5: Telegram showcase phone — fixed height per breakpoint ──────────── */
@media (max-width: 1024px) {
  main#app .tg-device { width: min(280px, 90%) !important; }
  main#app .tg-screen { height: 540px !important; max-height: 540px !important; overflow: hidden !important; }
  main#app .tg-body   { overflow: hidden !important; }
}
@media (max-width: 640px) {
  main#app .tg-screen { height: 500px !important; max-height: 500px !important; }
}
@media (max-width: 380px) {
  main#app .tg-device { width: 260px !important; }
  main#app .tg-screen { height: 460px !important; max-height: 460px !important; }
}

/* ============================================================================
   v7: NUCLEAR mobile horizontal overflow lock — applied at html/body level
   regardless of viewport. Belt + suspenders + duct tape.
   ============================================================================ */
html {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}
body {
  overflow-x: hidden !important;
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  position: relative !important;
}
@media (max-width: 1024px) {
  html, body {
    touch-action: pan-y !important;
    overscroll-behavior-x: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Astra theme header/footer can also overflow — nuke them too */
  header, footer, .ast-container, .site-header, .site-footer {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  main#app, main#app section, main#app > div, main#app .container {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }
}

/* ── v8: Force comp-card .price font to fit on mobile, no overflow ────── */
main#app .comp-card .price {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}
@media (max-width: 640px) {
  main#app .comp-card .price { font-size: 22px !important; }
  main#app .comp-card .price small { font-size: 12px !important; }
  main#app .comp-card { overflow: hidden !important; }
}
@media (max-width: 380px) {
  main#app .comp-card .price { font-size: 18px !important; }
}

/* ── v9: Force ns-item ALWAYS visible — slideInRight animation can leave
       them at opacity:0 if animation doesnt complete or is interrupted by
       JS innerHTML replace. Disable animation entirely. ─────────────── */
main#app .ns-timeline .ns-item,
main#app .nightshift .ns-item {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  visibility: visible !important;
}
main#app .ns-timeline {
  display: grid !important;
  gap: 14px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ── v10: Force explicit display + structure for ns-timeline + ns-item ─── */
main#app .ns-timeline,
main#app .nightshift .ns-timeline {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}
main#app .ns-timeline .ns-item,
main#app .nightshift .ns-item {
  display: grid !important;
  grid-template-columns: 80px 40px 1fr !important;
  gap: 14px !important;
  align-items: flex-start !important;
  padding: 14px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 640px) {
  main#app .ns-timeline .ns-item,
  main#app .nightshift .ns-item {
    grid-template-columns: 56px 32px 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }
}


/* ============================================================
   26. NIGHT-SHIFT v2 — MOBILE DOT REORDER
   Trên mobile: chuyen dot navigation len ngay sau khu clock+counter
   ("tac vu dang chay") thay vi nam duoi timeline
   Cach lam: bien .ns-v2-inner thanh flex column + display:contents
   cho .ns-v2-grid de cac con cua no flow ra ngoai roi reorder.
   ============================================================ */
@media (max-width: 900px) {
  main#app .ns-v2-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  main#app .ns-v2-grid {
    display: contents !important;
  }

  main#app .ns-v2-eyebrow       { order: 1 !important; }
  main#app .ns-v2-title         { order: 2 !important; }
  main#app .ns-v2-sub           { order: 3 !important; }
  main#app .ns-v2-clock-area    { order: 4 !important; }
  main#app .ns-v2-dots          { order: 5 !important; margin: 6px 0 22px !important; }
  main#app .ns-v2-timeline-wrap { order: 6 !important; }
  main#app .ns-v2-stats         { order: 7 !important; margin-top: 28px !important; }
}