/* Native Flatsome UX Builder adapters for the AppAI v4 design system. */

body:is(.appai-vn-home,.appai-vn-page) #main .section > .section-bg{display:none}
body:is(.appai-vn-home,.appai-vn-page) #main .section > .section-content{position:relative;z-index:1;width:100%}
body:is(.appai-vn-home,.appai-vn-page) #main .row.container{
  width:100%;max-width:var(--appai-vn-v4-container,1180px);margin-left:auto!important;margin-right:auto!important;
  padding-left:var(--appai-vn-sp-6);padding-right:var(--appai-vn-sp-6)
}
body.appai-vn-page #main .row.container{max-width:var(--appai-vn-container,1180px)}
body:is(.appai-vn-home,.appai-vn-page) #main .row.container::before,
body:is(.appai-vn-home,.appai-vn-page) #main .row.container::after{content:none;display:none}
body:is(.appai-vn-home,.appai-vn-page) #main .row.container > .col{padding:0}
body:is(.appai-vn-home,.appai-vn-page) #main .row.container > .col > .col-inner{height:100%}
body:is(.appai-vn-home,.appai-vn-page) #main .text > :last-child{margin-bottom:10px}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-decoration{position:static}

/* Native heading rows and card columns. */
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-heading-row{display:block}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-heading-row > .col{width:100%;max-width:none;flex-basis:100%}
body.appai-vn-home #main .appai-native-card-col > .col-inner,
body.appai-vn-home #main .appai-native-card-col > .col-inner > .text{height:100%}

/* Hero wrappers emitted by native Column, Text, Stack and Image elements. */
body.appai-vn-home #main .hero-inner > .col{width:auto;max-width:none;min-width:0;flex-basis:auto}
body.appai-vn-home #main .hero-copy-col > .col-inner{display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0}
/* The paragraph is the last child of a UX Text element, so Flatsome resets its
   bottom margin. Space the editable Text and Stack elements at wrapper level. */
body.appai-vn-home #main .hero-copy{width:100%;min-width:0;margin-bottom:var(--appai-vn-sp-6)}
body.appai-vn-home #main .hero-cta{width:auto;max-width:100%;align-items:center}
body.appai-vn-home #main .hero-cta > *{--stack-gap:12px}
body.appai-vn-home #main .hero-cta .button{margin:0;min-height:0;line-height:1.2;text-transform:none;letter-spacing:0}
body.appai-vn-home #main .hero-cta .button i{margin:0;order:2}
body.appai-vn-home #main .hero-assurance{width:100%;min-width:0}
/* UX Text wraps inline content in a paragraph. Make that generated paragraph
   the real flex row so spacing is preserved between every assurance item. */
body.appai-vn-home #main .hero-assurance > p{display:flex;width:100%;align-items:center;justify-content:inherit;flex-wrap:inherit;gap:inherit;margin:0}
body.appai-vn-home #main .hero-assurance br{display:none}
body.appai-vn-home #main .hero-visual > .col-inner{display:flex;align-items:center;justify-content:center;width:100%;min-width:0}
body.appai-vn-home #main .hero-mockup{width:100%}
body.appai-vn-home #main .hero-mockup .img-inner{overflow:visible}

/* Native Text cards keep the exact source card surface and equal heights. */
body.appai-vn-home #main :is(.steps-grid,.stats-grid,.ch-grid) > .col{width:auto;max-width:none;flex-basis:auto}
body.appai-vn-home #main :is(.step-card,.stat-item,.ch-card){height:100%}

/* One custom marquee container; every card inside it is a native Text element. */
body.appai-vn-home #main .appai-native-marquee-wrap + .appai-native-marquee-wrap{margin-top:var(--appai-vn-sp-4)}
body.appai-vn-home #main .test-marquee-set > .text{display:block}
body.appai-vn-home #main .test-card-m{height:auto}

/* Native Flatsome Accordion styled as the reference FAQ cards. */
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion{margin:0;display:flex;flex-direction:column;gap:var(--appai-vn-sp-2)}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-item{
  margin:0;background:var(--appai-vn-bg);border:1px solid var(--appai-vn-border);border-radius:var(--appai-vn-r-md);
  overflow:hidden;transition:all var(--appai-vn-duration-slow) var(--appai-vn-ease-out)
}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-item:hover{border-color:var(--appai-vn-border-hover)}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-item:has(.accordion-title.active){
  border-color:var(--appai-vn-blue-100);box-shadow:0 0 0 3px rgba(0,92,224,.04),var(--appai-vn-shadow-sm)
}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-title{
  display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;width:100%;min-height:0;
  padding:20px 24px;border:0;background:none;color:var(--appai-vn-text-primary);font:600 1.0625rem/1.45 var(--appai-vn-font);
  text-align:left;text-transform:none;letter-spacing:0;gap:var(--appai-vn-sp-3)
}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-title:hover{color:var(--appai-vn-blue-600)}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-title .toggle{
  position:static;left:auto;top:auto;margin:0;width:26px;height:26px;min-height:26px;flex:0 0 26px;border:0;border-radius:50%;
  background:var(--appai-vn-bg-muted);color:var(--appai-vn-text-tertiary);opacity:1;transform:none;transition:all var(--appai-vn-duration) var(--appai-vn-ease)
}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-title .toggle i{top:0;font-size:.8rem;line-height:26px}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-title.active .toggle{
  background:var(--appai-vn-blue-600);color:#fff;transform:rotate(180deg);box-shadow:0 2px 6px rgba(0,92,224,.2)
}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-inner{
  margin:0;padding:0 24px 22px;border:0;color:var(--appai-vn-text-secondary);font:400 1rem/1.8 var(--appai-vn-font)
}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-accordion .accordion-inner > :last-child{margin-bottom:0}
body.appai-vn-home #main .appai-native-faq-row{display:flex;justify-content:center}

/* Native Blog Posts element adapted to the v4 card geometry. */
body.appai-vn-home #main .appai-native-blog-row > .col{width:100%;max-width:none;flex-basis:100%}
body.appai-vn-home #main .appai-home-blog-posts{margin:0 -12px;display:flex}
body.appai-vn-home #main .appai-home-blog-posts > .post-item{padding:0 12px;display:flex}
body.appai-vn-home #main .appai-home-blog-posts .col-inner{width:100%;display:flex}
body.appai-vn-home #main .appai-home-blog-posts .box{
  width:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--appai-vn-bg);border:1px solid var(--appai-vn-border);
  border-radius:var(--appai-vn-r-lg);transition:all .4s var(--appai-vn-ease-out)
}
body.appai-vn-home #main .appai-home-blog-posts .box:hover{transform:translateY(-6px);border-color:var(--appai-vn-blue-100);box-shadow:var(--appai-vn-shadow-lg)}
body.appai-vn-home #main .appai-home-blog-posts .box-image{height:180px;margin:0;overflow:hidden}
body.appai-vn-home #main .appai-home-blog-posts .box-image .image-cover{height:180px;padding:0!important}
body.appai-vn-home #main .appai-home-blog-posts .box-image img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--appai-vn-ease-out)}
body.appai-vn-home #main .appai-home-blog-posts .box:hover .box-image img{transform:scale(1.045)}
body.appai-vn-home #main .appai-home-blog-posts .box-text{padding:20px 20px 24px;display:flex;flex-direction:column;text-align:left}
body.appai-vn-home #main .appai-home-blog-posts .blog-post-inner{display:flex;flex:1;flex-direction:column;width:100%;height:100%}
body.appai-vn-home #main .appai-home-blog-posts .cat-label{display:none!important}
body.appai-vn-home #main .appai-home-blog-posts .post-title{font-size:1.0625rem;font-weight:700;line-height:1.4;color:var(--appai-vn-text-primary);margin:0 0 var(--appai-vn-sp-2);letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.appai-vn-home #main .appai-home-blog-posts .post-title a{color:var(--appai-vn-text-primary)!important;text-decoration:none!important}
body.appai-vn-home #main .appai-home-blog-posts .from_the_blog_excerpt{font-size:.9375rem;line-height:1.7;color:var(--appai-vn-text-tertiary);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.appai-vn-home #main .appai-home-blog-posts .is-divider{display:none}
body.appai-vn-home #main .appai-home-blog-posts .button{align-self:flex-start;display:inline-flex;align-items:center;width:auto;height:auto;min-height:0;margin:12px 0 0;padding:0;border:0;background:none;box-shadow:none;color:var(--appai-vn-blue-600);font-size:.875rem;font-weight:600;line-height:1.7;text-transform:none;letter-spacing:0}
body.appai-vn-home #main .appai-home-blog-posts .post-meta{font-size:.75rem;color:var(--appai-vn-text-quaternary);margin-top:8px}
body.appai-vn-home #main .appai-home-blog-posts .badge{top:12px;left:12px;width:auto;height:auto}
body.appai-vn-home #main .appai-home-blog-posts .badge-inner{padding:4px 12px;border:0;border-radius:var(--appai-vn-r-full);background:rgba(255,255,255,.92);color:var(--appai-vn-blue-600);font-size:.6875rem;font-weight:700;line-height:1.4;box-shadow:var(--appai-vn-shadow-xs)}
body.appai-vn-home #main .appai-native-blog-cta{display:block;text-align:center;margin-top:var(--appai-vn-sp-10)!important}
body.appai-vn-home #main .appai-native-blog-cta .button{margin:0;text-transform:none;letter-spacing:0}

/* Inner-page native layout wrappers. */
body.appai-vn-page #main .page-hero-row{display:block}
body.appai-vn-page #main .page-hero-row > .col{width:100%;max-width:none;flex-basis:100%}
body.appai-vn-page #main .faq-page-layout > .col,
body.appai-vn-page #main .contact-layout > .col{width:auto;max-width:none;flex-basis:auto}
body.appai-vn-page #main .faq-groups{display:block}
body.appai-vn-page #main .faq-groups > .col-inner{display:flex;flex-direction:column;gap:var(--appai-vn-sp-12)}
body.appai-vn-page #main .faq-native-group-item{display:flex;flex-direction:column;gap:0;scroll-margin-top:110px}
body.appai-vn-page #main .faq-native-group-item > *{width:100%}
body.appai-vn-page #main .faq-native-group-item .faq-group-header{width:100%}
body.appai-vn-page #main .feedback-form-wrapper{display:flex;justify-content:center}
body.appai-vn-page #main .feedback-form-wrapper > .col{width:66.6667%;max-width:680px;flex-basis:66.6667%}
body.appai-vn-page #main .contact-form-card{height:100%}
body.appai-vn-page #main .quick-links-section{display:block}
body.appai-vn-page #main .quick-links-section > .col{width:100%;max-width:none;flex-basis:100%}
body.appai-vn-page #main .quick-links-grid{margin:0;width:100%;max-width:none}
body.appai-vn-page #main .quick-links-grid > .col{width:auto;max-width:none;flex-basis:auto;padding:0}
body.appai-vn-page #main .quick-link-card.button{width:100%;height:100%;margin:0;text-transform:none;letter-spacing:0;line-height:1.4}

/* CTA block remains a native Section/Row/Column/Text/Stack/Button tree. */
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-cta-row{display:flex;justify-content:center}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-cta-row > .cta-content{width:66.6667%;max-width:620px;flex-basis:66.6667%}
body:is(.appai-vn-home,.appai-vn-page) #main .cta-content > .col-inner{display:flex;flex-direction:column;align-items:center}
/* Flatsome removes the final paragraph margin inside UX Text. Keep the visual
   rhythm between this editable Text element and the following Button Stack. */
body:is(.appai-vn-home,.appai-vn-page) #main .appai-cta-copy{text-align:center;}
body:is(.appai-vn-home,.appai-vn-page) #main .appai-cta-copy > p{font-size:1.125rem;color:var(--appai-vn-text-secondary);margin-bottom:var(--appai-vn-sp-8);line-height:1.75}
body:is(.appai-vn-home,.appai-vn-page) #main .cta-buttons{justify-content:center;margin-bottom:var(--appai-vn-sp-5)}
body:is(.appai-vn-home,.appai-vn-page) #main .cta-buttons .button{margin:0;text-transform:none;letter-spacing:0}
body.appai-vn-theme #main .trust-row{width:100%;justify-content:center}
/* UX Text wraps inline content in a paragraph. Put the spacing on that real
   flex parent so adjacent trust items never run into each other. */
body.appai-vn-theme #main .trust-row > p{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px 24px;
  margin:0;
}

@media(max-width:600px){
  body.appai-vn-theme #main .trust-row > p{gap:9px 16px}
}

@media(max-width:1024px){
  body.appai-vn-home #main .hero-inner > .col{width:100%;max-width:100%;min-width:0;flex-basis:100%}
  body.appai-vn-home #main .hero-copy-col > .col-inner{align-items:center}
  body.appai-vn-home #main .hero-inner > .hero-visual{width:100%;max-width:620px;margin-left:auto;margin-right:auto}
  body.appai-vn-page #main .faq-page-layout > .col,
  body.appai-vn-page #main .contact-layout > .col{width:100%;max-width:none;flex-basis:100%}
}
@media(max-width:768px){
  body:is(.appai-vn-home,.appai-vn-page) #main .row.container{padding-left:var(--appai-vn-sp-4);padding-right:var(--appai-vn-sp-4)}
  body.appai-vn-home #main .hero-cta{width:100%;max-width:560px;align-items:stretch}
  body.appai-vn-home #main .appai-home-blog-posts{margin:0}
  body.appai-vn-home #main .appai-home-blog-posts > .post-item{padding:0 0 20px}
  body.appai-vn-home #main .appai-home-blog-posts .box-text{height:auto;min-height:238px}
  body.appai-vn-page #main .feedback-form-wrapper > .col,
  body:is(.appai-vn-home,.appai-vn-page) #main .appai-native-cta-row > .cta-content{width:100%;max-width:100%;flex-basis:100%}
}
@media(max-width:549px){
  body.appai-vn-home #main .hero-cta{max-width:360px;flex-direction:column}
  body.appai-vn-home #main .hero-cta .button{width:100%;min-width:0;margin-left:0!important;margin-right:0!important;justify-content:center}
}