/* Full-width container reset: remove any default gutters / side margins so dark sections span edge-to-edge */
body:has(.page-sourcing),
body:has(.page-sourcing) #app-main .elementor,
body:has(.page-sourcing) #app-main .elementor > .e-con,
body:has(.page-sourcing) #app-main .elementor > .e-con-full,
body:has(.page-sourcing) #app-main .e-con:has(.page-sourcing),
body:has(.page-sourcing) #app-main .e-con-inner:has(.page-sourcing),
.page-container.page-sourcing,
.page-sourcing.e-con,
.page-sourcing.e-con-full {
  --container-default-padding: 0px !important;
  --container-default-margin: 0px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body:has(.page-sourcing) #app-main {
  padding-top: var(--speego-header-expanded-height, 108px) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Ensure all top-level sections on sourcing page span full viewport width (tràn viền) */
.page-sourcing > section,
.page-sourcing > .e-con,
.page-sourcing > .e-con-full,
.page-sourcing .sourcing-hero-section,
.page-sourcing .industries-section,
.page-sourcing .models-section,
.page-sourcing .sourcing-process-section,
.page-sourcing .ff-process-section,
.page-sourcing #kiem-soat-chat-luong,
.page-sourcing #quality-control,
.page-sourcing .ie-why-section,
.page-sourcing .cta-form-band-section,
.page-sourcing #contact-form,
.page-sourcing .prod-floor-section,
.page-sourcing .ff-faq-section,
.page-sourcing .ff-testimonial-section {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.page-sourcing .sourcing-hero-section {
  padding: 80px 0 88px !important;
}

/* Dark navy background bands span 100% edge-to-edge without white borders (Ảnh 1, 2) */
.page-sourcing .sourcing-process-section,
.page-sourcing .ff-process-section,
.page-sourcing #kiem-soat-chat-luong,
.page-sourcing #quality-control {
  background: #041A2D !important;
  background-color: #041A2D !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.page-sourcing .cta-form-band-section,
.page-sourcing #contact-form,
.page-sourcing #contact-form .cta-form-band-section,
div[data-component="cta-form"] .cta-form-band-section {
  background: #04243D !important;
  background-color: #04243D !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Inner content remains neatly centered with 1320px content edge */
.page-sourcing > section > .container,
.page-sourcing .sourcing-process-section > .container,
.page-sourcing .ff-process-section > .container,
.page-sourcing .cta-form-band-section > .container,
.page-sourcing .cta-form-band-section > .container.cta-form-band-grid,
.page-sourcing .sourcing-hero-section > .container {
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

body:has(.page-sourcing) .elementor-widget-text-editor:has(.page-sourcing) {
  margin: 0;
}
body:has(.page-sourcing) #app-main .breadcrumb-section { display: none; }
body:has(.page-sourcing) #colophon {
  font-size: 13px;
  line-height: 1.6;
  padding-top: 64px;
}
body:has(.page-sourcing) .speego-footer-tagline {
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 380px;
}
body:has(.page-sourcing) .elementor .consult-form .form-security-note {
  margin: 0;
}

/* Sequential top-to-bottom entrance. Travel stays short so the page
   does not feel larger than the reference. */
@keyframes speegoSeqIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

body:not(.elementor-editor-active) .page-sourcing .hero-tag-bar {
  animation: speegoSeqIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
}

body:not(.elementor-editor-active) .page-sourcing .hero-h1-clean {
  animation: speegoSeqIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.14s both;
}

body:not(.elementor-editor-active) .page-sourcing .hero-img-card-wrap {
  animation: speegoSeqIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

body:not(.elementor-editor-active) .page-sourcing .hero-desc-clean {
  animation: speegoSeqIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.26s both;
}

body:not(.elementor-editor-active) .page-sourcing .hero-actions-row .btn-orange {
  animation: speegoSeqIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.38s both;
}

body:not(.elementor-editor-active) .page-sourcing .hero-phone-label {
  animation: speegoSeqIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.48s both;
}

body:not(.elementor-editor-active) .page-sourcing [data-seq]:not(.is-seq) {
  opacity: 0;
  transform: translateY(12px);
}

body:not(.elementor-editor-active) .page-sourcing [data-seq].is-seq {
  animation: speegoSeqIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--seq, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.elementor-editor-active) .page-sourcing .hero-tag-bar,
  body:not(.elementor-editor-active) .page-sourcing .hero-h1-clean,
  body:not(.elementor-editor-active) .page-sourcing .hero-img-card-wrap,
  body:not(.elementor-editor-active) .page-sourcing .hero-desc-clean,
  body:not(.elementor-editor-active) .page-sourcing .hero-actions-row .btn-orange,
  body:not(.elementor-editor-active) .page-sourcing .hero-phone-label,
  body:not(.elementor-editor-active) .page-sourcing [data-seq] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Elementor wraps every content node in container/widget divs while the
   hand-written hero CSS expects flat markup. Without these, the tag dash
   stretches into a bar, the CTA button goes full-width and the hero image
   loses its radius. Mirrors wp-import-export.css for the same hero. */
.elementor .page-sourcing .hero-2col-left,
.elementor .page-sourcing .hero-tag-bar {
  --gap: 0px;
  --widgets-spacing: 0px;
  gap: 0;
}

.elementor .page-sourcing .hero-actions-row {
  display: flex !important;
  align-items: center;
  gap: 24px !important;
  --gap: 24px;
  --widgets-spacing: 0px;
}

.elementor .page-sourcing .hero-tag-bar.e-con {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: auto !important;
  max-width: none;
  margin: 0 0 28px !important;
  padding: 0 !important;
  gap: 8px !important;
}

.elementor .page-sourcing .hero-tag-bar.e-con::before {
  content: '' !important;
  position: static !important;
  display: block !important;
  flex: 0 0 20px;
  width: 20px !important;
  height: 2.5px !important;
  margin: 0 !important;
  background-color: var(--speego-accent, #F05828) !important;
  border-radius: 2px;
  pointer-events: none !important;
}

.elementor .page-sourcing .hero-tag-bar .elementor-widget,
.elementor .page-sourcing .hero-tag-bar p {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748B;
}

.elementor .page-sourcing .hero-actions-row > .elementor-widget.btn-orange,
.elementor .page-sourcing .hero-actions-row > .elementor-widget.btn-orange:hover {
  display: inline-flex;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0;
  gap: 0;
}

.elementor .page-sourcing .hero-actions-row > .elementor-widget.hero-phone-label {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor .page-sourcing .hero-img-card-wrap {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Root cause chung cho 5 nhóm dưới: Elementor .e-con mặc định
   flex-direction: column + boxed 1140px + padding 10px, trong khi CSS mẫu
   viết cho HTML phẳng (row, full-bleed). Các rule dưới khôi phục đúng mẫu.
   Scope .page-sourcing nên không ảnh hưởng trang khác; pure CSS nên không
   tốn thêm request, responsive/SEO/Editor giữ nguyên. */

/* 1. Industries: nút CTA bị wrapper div nền cam full-width + tiêu đề phải hiện */
.elementor .page-sourcing .industry-action-btn-row.e-con {
  align-items: flex-start !important;
}
.elementor .page-sourcing .industry-action-btn-row > .elementor-widget,
.elementor .page-sourcing .industry-action-btn-row > .elementor-widget:hover {
  display: inline-flex;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0;
  gap: 0;
}

/* 2. QC dark band phải full-bleed (Elementor box .e-con vào 1140px) */
.elementor .page-sourcing section.ff-process-section.e-con {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.elementor .page-sourcing .ff-process-cta.e-con {
  align-items: flex-start !important;
}
.elementor .page-sourcing .ff-process-cta > .elementor-widget.btn-orange,
.elementor .page-sourcing .ff-process-cta > .elementor-widget.btn-orange:hover {
  display: inline-flex;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0;
  gap: 0;
}

/* 3. Why-cards: badge 52px căn giữa + tiêu đề navy trên nền sáng */
.elementor .page-sourcing .ie-badge-box.e-con {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #FFF4ED !important;
  margin-bottom: 20px !important;
  --gap: 0px;
  --widgets-spacing: 0px;
  gap: 0 !important;
}
.elementor .page-sourcing .ie-badge-box .elementor-widget,
.elementor .page-sourcing .ie-badge-box p {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: var(--speego-accent, #F05828) !important;
}
.elementor .page-sourcing .industries-section .section-title,
.elementor .page-sourcing .models-section .section-title,
.elementor .page-sourcing .ie-why-section .section-title {
  opacity: 1 !important;
  visibility: visible !important;
  color: #04243D !important;
}

/* 4. Prod header: eyebrow + title on the left, horizontal arrows on the right (Ảnh 4) */
.page-sourcing .prod-floor-header,
.page-sourcing .prod-floor-header.e-con {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas:
    "tag   arrows"
    "title arrows" !important;
  align-items: end !important;
  justify-content: space-between !important;
  margin-bottom: 32px !important;
  gap: 4px 24px !important;
  width: 100% !important;
  --gap: 4px;
}

.page-sourcing .prod-floor-header > .elementor-widget:has(.section-tag),
.page-sourcing .prod-floor-header > .elementor-widget:first-child {
  grid-area: tag !important;
  width: auto !important;
  margin: 0 !important;
}

.page-sourcing .prod-floor-header > .section-title,
.page-sourcing .prod-floor-header > .elementor-widget:nth-child(2) {
  grid-area: title !important;
  width: auto !important;
  margin: 0 !important;
}

.page-sourcing .prod-floor-header > .prod-arrows-nav,
.page-sourcing .prod-floor-header > .prod-arrows-nav.e-con {
  grid-area: arrows !important;
  align-self: end !important;
  justify-self: end !important;
  margin: 0 !important;
  width: auto !important;
}

.page-sourcing .prod-arrows-nav,
.page-sourcing .prod-arrows-nav.e-con,
.page-sourcing .prod-arrows-nav .elementor-widget,
.page-sourcing .prod-arrows-nav .elementor-widget-container {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  --gap: 10px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.page-sourcing .prod-arrow-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #04243D !important;
  font-size: 14px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.page-sourcing .prod-arrow-btn:hover {
  border-color: var(--speego-accent, #F05828) !important;
  color: var(--speego-accent, #F05828) !important;
}

@media (max-width: 767px) {
  .page-sourcing .prod-floor-header,
  .page-sourcing .prod-floor-header.e-con {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "tag"
      "title"
      "arrows" !important;
    gap: 8px !important;
  }
  .page-sourcing .prod-arrows-nav,
  .page-sourcing .prod-arrows-nav.e-con {
    justify-self: start !important;
    margin-top: 12px !important;
  }
}

/* 5. Models cards & pills: stretch cards & flex nowrap pills to prevent text cutoff (Ảnh 3) */
.page-sourcing .models-3col-grid,
.models-3col-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: stretch !important;
  gap: 24px !important;
}

.page-sourcing .model-img-card,
.model-img-card {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: 440px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 30px 24px !important;
  box-sizing: border-box !important;
}

@media (max-width: 991px) {
  .page-sourcing .models-3col-grid,
  .models-3col-grid,
  .elementor .page-sourcing .models-3col-grid,
  .elementor-element.models-3col-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 20px !important;
  }

  .page-sourcing .model-img-card,
  .model-img-card,
  .elementor .page-sourcing .model-img-card,
  .elementor-element.model-img-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    height: auto !important;
    padding: 28px 20px !important;
    box-sizing: border-box !important;
  }

  .page-sourcing .model-card-content,
  .model-card-content {
    width: 100% !important;
  }

  .page-sourcing .model-pills-row,
  .model-pills-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
}

.page-sourcing .model-card-content {
  position: relative !important;
  z-index: 3 !important;
  color: #FFFFFF !important;
  margin-top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.page-sourcing .model-body-text,
.page-sourcing .model-img-card .model-body-text {
  font-size: 0.88rem !important;
  color: #E2E8F0 !important;
  line-height: 1.55 !important;
  margin-bottom: 16px !important;
}

.page-sourcing .model-pills-row,
.page-sourcing .model-pills-row.e-con,
.page-sourcing .model-pills-row .elementor-widget,
.page-sourcing .model-pills-row .elementor-widget-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  --gap: 8px;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.page-sourcing .model-pill-tag {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-size: 11.5px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
  color: #FFFFFF !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* 6. Models image cards: background image layer */
.elementor .page-sourcing .model-bg-img.elementor-widget {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
  overflow: hidden !important;
}
.elementor .page-sourcing .model-bg-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* 8. Industries + QC CTA: wrapper div mang nền cam full-width, trả về trong suốt */
.elementor .page-sourcing .industry-action-btn-row.e-con,
.elementor .page-sourcing .ff-process-cta.e-con {
  align-items: flex-start !important;
}
.elementor .page-sourcing .industry-action-btn-row > .elementor-widget,
.elementor .page-sourcing .industry-action-btn-row > .elementor-widget:hover,
.elementor .page-sourcing .ff-process-cta > .elementor-widget.btn-orange,
.elementor .page-sourcing .ff-process-cta > .elementor-widget.btn-orange:hover {
  display: inline-flex;
  width: auto !important;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 0;
  gap: 0;
}

/* 9. Guard hiển thị: eyebrow + tiêu đề các section nền sáng phải hiện màu chuẩn và hiển thị rõ ràng.
   (Không chạm ff-title/ff-tag trên nền tối.) */
.elementor .page-sourcing .section-tag,
.page-sourcing .section-tag,
span.section-tag {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body:not(.elementor-editor-active) .elementor .page-sourcing .container .section-header span.section-tag,
body:not(.elementor-editor-active) .elementor .page-sourcing:not(.cta-form-band-section *) span.section-tag:not(.cta-band-left *),
body .elementor .page-sourcing .container .section-header span.section-tag,
body .elementor .page-sourcing:not(.cta-form-band-section *) span.section-tag:not(.cta-band-left *),
.page-sourcing .section-header span.section-tag,
.page-sourcing .ff-faq-section span.section-tag {
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #64748B !important;
  font-family: var(--font-body, 'Inter', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
}

.elementor .page-sourcing .section-title,
.elementor .page-sourcing .model-title-h3,
.elementor .page-sourcing .model-body-text,
.elementor .page-sourcing .ff-section-title {
  opacity: 1 !important;
  visibility: visible !important;
}

.elementor .page-sourcing .industries-section .section-title,
.elementor .page-sourcing .models-section .section-title,
.elementor .page-sourcing .ie-why-section .section-title,
.elementor .page-sourcing .ff-faq-section .section-title,
.elementor .page-sourcing .prod-floor-section .section-title {
  color: #04243D !important;
}

.elementor .page-sourcing .industries-section .section-tag,
.elementor .page-sourcing .models-section .section-tag,
.elementor .page-sourcing .ie-why-section .section-tag,
.elementor .page-sourcing .ff-faq-section .section-tag,
.elementor .page-sourcing .prod-floor-section .section-tag {
  display: inline-block !important;
  color: #64748B !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

/* Section Headers Layout: vertically stack eyebrow tag (MÔ HÌNH SẢN XUẤT, THÔNG TIN HỮU ÍCH, etc.) ON TOP of section title (Ba cách..., Câu hỏi...) */
.page-sourcing .section-header,
.elementor .page-sourcing .section-header,
.page-sourcing .models-section .section-header,
.elementor .page-sourcing .models-section .section-header,
.page-sourcing .ie-why-section .section-header,
.elementor .page-sourcing .ie-why-section .section-header,
.page-sourcing .ff-faq-section .section-header,
.elementor .page-sourcing .ff-faq-section .section-header,
.page-sourcing .container > .section-header,
body:not(.elementor-editor-active) .elementor .page-sourcing .container div.section-header,
body:not(.elementor-editor-active) .elementor .page-sourcing div.section-header,
body:not(.elementor-editor-active) .elementor .page-sourcing .models-section .container div.section-header,
body:not(.elementor-editor-active) .elementor .page-sourcing .ff-faq-section .container div.section-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  width: 100% !important;
  margin-bottom: 32px !important;
  gap: 0 !important;
  --gap: 0px !important;
  --widgets-spacing: 0px !important;
}

.elementor .page-sourcing .section-header > .elementor-widget,
.page-sourcing .section-header > .elementor-widget {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.elementor .page-sourcing .section-header > .elementor-widget:first-child,
.elementor .page-sourcing .section-header > .elementor-widget:has(.section-tag),
.elementor .page-sourcing .section-header > .elementor-widget:has(span.section-tag) {
  margin-bottom: 8px !important;
}

.elementor .page-sourcing .section-header h2.section-title,
.page-sourcing .section-header h2.section-title,
.page-sourcing .section-header .section-title,
.page-sourcing .section-title {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  text-align: left !important;
}

/* Industry Categories Grid & Cards - Stacking context & clickability (VI, EN, ES) */
.page-sourcing .industries-section,
.page-sourcing #nganh-hang,
.page-sourcing #industries {
  position: relative;
  z-index: 1;
}

.page-sourcing .industries-section::before,
.page-sourcing .industries-section::after,
.page-sourcing #nganh-hang::before,
.page-sourcing #nganh-hang::after,
.page-sourcing #industries::before,
.page-sourcing #industries::after,
.page-sourcing .industries-cards-grid::before,
.page-sourcing .industries-cards-grid::after,
.page-sourcing .industry-card-item::before,
.page-sourcing .industry-card-item::after,
.page-sourcing .industry-icon-box::before,
.page-sourcing .industry-icon-box::after {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
}

.page-sourcing .industries-cards-grid {
  position: relative;
  z-index: 2;
}

.page-sourcing .industry-card-item {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* In Elementor editor: Prevent container overlays from intercepting clicks meant for child widgets across all Sourcing sections */
.page-sourcing .elementor-element-overlay {
  pointer-events: none !important;
}

.page-sourcing .elementor-editor-element-settings {
  pointer-events: auto !important;
}

/* Ensure no pseudo-element blocks clicks across any container or section */
.page-sourcing .e-con::before,
.page-sourcing .e-con::after,
.page-sourcing section::before,
.page-sourcing section::after,
.page-sourcing .container::before,
.page-sourcing .container::after {
  pointer-events: none !important;
}

/* 1. Industry Categories Grid & Cards (VI, EN, ES) */
.page-sourcing .industry-card-item .elementor-widget,
.page-sourcing .industry-card-item .elementor-widget-container,
.page-sourcing .industry-card-item .industry-icon-box,
.page-sourcing .industry-card-item .industry-card-title,
.page-sourcing .industry-card-item .industry-card-desc,
.page-sourcing .industry-card-item h3,
.page-sourcing .industry-card-item p,
.page-sourcing .industry-card-item svg {
  pointer-events: auto !important;
}

/* 2. Manufacturing Models Section (OEM, ODM, Private Label) */
.page-sourcing .models-section,
.page-sourcing #mo-hinh-san-xuat,
.page-sourcing #production-models,
.page-sourcing .models-3col-grid {
  position: relative;
  z-index: 1;
}

.page-sourcing .model-img-card {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

/* Gradient overlay must never block clicks to content or background image */
.page-sourcing .model-gradient-overlay {
  pointer-events: none !important;
}

.page-sourcing .model-img-card .elementor-widget,
.page-sourcing .model-img-card .elementor-widget-container,
.page-sourcing .model-bg-img,
.page-sourcing .model-bg-img img,
.page-sourcing .model-card-content,
.page-sourcing .model-title-h3,
.page-sourcing .model-sub-badge,
.page-sourcing .model-body-text,
.page-sourcing .model-pills-row,
.page-sourcing .model-pill-tag,
.page-sourcing .model-img-card h3,
.page-sourcing .model-img-card p,
.page-sourcing .model-img-card span {
  pointer-events: auto !important;
}

/* 3. QC & Quality Control Process Steps Section */
.page-sourcing .sourcing-process-section,
.page-sourcing .ff-process-section,
.page-sourcing #kiem-soat-chat-luong,
.page-sourcing #quality-control,
.page-sourcing .sourcing-qc-steps-grid,
.page-sourcing .ff-steps-grid {
  position: relative;
  z-index: 1;
}

.page-sourcing .ff-step-item {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.page-sourcing .sourcing-process-section .elementor-widget,
.page-sourcing .sourcing-process-section .elementor-widget-container,
.page-sourcing .ff-step-item .elementor-widget,
.page-sourcing .ff-step-num,
.page-sourcing .ff-step-name,
.page-sourcing .ff-step-text,
.page-sourcing .ff-process-cta,
.page-sourcing .sourcing-process-section .btn-orange,
.page-sourcing .sourcing-process-sub,
.page-sourcing .ff-tag-eyebrow,
.page-sourcing .ff-section-title {
  pointer-events: auto !important;
}

/* 4. Why SpeeGo Section (6 Cards Grid) */
.page-sourcing .ie-why-section,
.page-sourcing #vi-sao-speego,
.page-sourcing #why-speego,
.page-sourcing .ie-why-grid {
  position: relative;
  z-index: 1;
}

.page-sourcing .ie-service-card {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.page-sourcing .ie-why-section .elementor-widget,
.page-sourcing .ie-why-section .elementor-widget-container,
.page-sourcing .ie-service-card .elementor-widget,
.page-sourcing .ie-badge-box,
.page-sourcing .ie-card-h3,
.page-sourcing .ie-card-body,
.page-sourcing .ie-why-section .section-tag,
.page-sourcing .ie-why-section .section-title {
  pointer-events: auto !important;
}

/* 5. Production Floor Photos & Media Section */
.page-sourcing .prod-floor-section,
.page-sourcing .prod-floor-header,
.page-sourcing .prod-slider-viewport,
.page-sourcing .prod-slider-track,
.page-sourcing .prod-slide-page,
.page-sourcing .prod-cards-grid,
.page-sourcing .prod-card-item {
  position: relative;
  pointer-events: auto;
}

.page-sourcing .prod-floor-section .elementor-widget,
.page-sourcing .prod-floor-section .elementor-widget-container,
.page-sourcing .prod-card-item .elementor-widget,
.page-sourcing .prod-card-media,
.page-sourcing .prod-card-media img,
.page-sourcing .prod-media-badge,
.page-sourcing .prod-card-body,
.page-sourcing .prod-card-title,
.page-sourcing .prod-card-desc,
.page-sourcing .prod-arrows-nav,
.page-sourcing .prod-arrow-btn,
.page-sourcing .prod-floor-section .section-tag,
.page-sourcing .prod-floor-section .section-title {
  pointer-events: auto !important;
}

/* 6. FAQ Accordion Section */
.page-sourcing .ff-faq-section,
.page-sourcing #faq,
.page-sourcing .ff-faq-list,
.page-sourcing .ff-faq-item,
.page-sourcing .faq-item {
  position: relative;
  pointer-events: auto;
}

.page-sourcing .ff-faq-section .elementor-widget,
.page-sourcing .ff-faq-section .elementor-widget-container,
.page-sourcing .ff-faq-item .elementor-widget,
.page-sourcing .ff-faq-btn,
.page-sourcing .faq-question-btn,
.page-sourcing .ff-faq-plus,
.page-sourcing .ff-faq-answer,
.page-sourcing .ff-faq-answer p,
.page-sourcing .ff-faq-section .section-tag,
.page-sourcing .ff-faq-section .section-title {
  pointer-events: auto !important;
}

/* 7. Testimonials Section */
.page-sourcing .ff-testimonial-section,
.page-sourcing .testimonials-section,
.page-sourcing .testimonials-2col-grid,
.page-sourcing .testimonial-card-sourcing {
  position: relative;
  pointer-events: auto;
}

.page-sourcing .ff-testimonial-section .elementor-widget,
.page-sourcing .ff-testimonial-section .elementor-widget-container,
.page-sourcing .testimonial-card-sourcing .elementor-widget,
.page-sourcing .testimonial-card-sourcing .ff-quote-mark,
.page-sourcing .testimonial-card-sourcing .ff-author-info,
.page-sourcing .testimonial-card-sourcing .ff-author-name,
.page-sourcing .testimonial-card-sourcing .ff-author-title,
.page-sourcing .testimonial-card-sourcing .ff-author-ref,
.page-sourcing .testimonial-card-sourcing .ff-ref-link,
.page-sourcing .ff-testimonial-section .ff-section-header,
.page-sourcing .ff-testimonial-section .ff-section-title {
  pointer-events: auto !important;
}

/* 8. Global Section Headers & Shared UI */
.page-sourcing .section-header .elementor-widget,
.page-sourcing .ff-section-header .elementor-widget,
.page-sourcing .section-tag,
.page-sourcing .section-title,
.page-sourcing .ff-section-title,
.page-sourcing .ff-tag-eyebrow,
.page-sourcing .btn-orange,
.page-sourcing a.btn-orange {
  pointer-events: auto !important;
}

@keyframes ctaCopyIn {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ctaTagPulse {
  0%, 100% {
    color: #94A3B8;
    letter-spacing: 0.14em;
  }
  50% {
    color: #F05828;
    letter-spacing: 0.18em;
  }
}

@keyframes ctaHotlineGlow {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 18px rgba(240, 88, 40, 0.35);
  }
}

/* ==========================================================================
   9. CTA Form Band (LET'S MOVE FORWARD) Layout & Animation Parity
   ========================================================================== */
body:not(.elementor-editor-active) .cta-form-band-section > .container.cta-form-band-grid,
body:not(.elementor-editor-active) .cta-form-band-section > .container,
body:not(.elementor-editor-active) #contact-form .cta-form-band-grid,
.page-sourcing .cta-form-band-section > .container.cta-form-band-grid,
.page-sourcing .cta-form-band-section > .container,
.page-sourcing #contact-form .cta-form-band-grid,
body .page-sourcing .cta-form-band-section > .container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(28px, 4vw, 56px) !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.cta-form-band-section > .container::before,
.cta-form-band-section > .container::after,
.cta-form-band-section .cta-form-band-grid::before,
.cta-form-band-section .cta-form-band-grid::after,
#contact-form .cta-form-band-grid::before,
#contact-form .cta-form-band-grid::after,
.page-sourcing .cta-form-band-section .container::before,
.page-sourcing .cta-form-band-section .container::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body:not(.elementor-editor-active) .cta-form-band-section .cta-band-left,
body:not(.elementor-editor-active) #contact-form .cta-band-left,
.page-sourcing .cta-band-left,
body .page-sourcing .cta-band-left {
  flex: 0.95 1 0 !important;
  min-width: 0 !important;
  max-width: 580px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  text-align: left !important;
}

body:not(.elementor-editor-active) .cta-form-band-section .cta-band-left .section-tag,
body:not(.elementor-editor-active) #contact-form .cta-band-left .section-tag,
body .elementor .page-sourcing .cta-band-left span.section-tag,
body:not(.elementor-editor-active) .elementor .page-sourcing .cta-band-left span.section-tag,
body:not(.elementor-editor-active) .elementor .page-sourcing span.section-tag:not(.container .section-header *),
.page-sourcing .cta-band-left .section-tag,
.page-sourcing .cta-band-left span.section-tag {
  display: inline-block !important;
  font-family: 'Plus Jakarta Sans', var(--font-body, 'Inter'), sans-serif !important;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase !important;
  color: #94A3B8;
  line-height: 1.2 !important;
  margin-bottom: 18px !important;
}

body:not(.elementor-editor-active) .cta-form-band-section .cta-band-left .section-title,
body:not(.elementor-editor-active) #contact-form .cta-band-left .section-title,
body .elementor .page-sourcing .cta-band-left h2.section-title,
.page-sourcing .cta-band-left .section-title,
.page-sourcing .cta-band-left h2.section-title {
  font-family: 'Plus Jakarta Sans', var(--font-body, 'Inter'), sans-serif !important;
  font-size: clamp(2.85rem, 5.5vw, 4.25rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: #FFFFFF !important;
  max-width: 17ch !important;
  margin: 0 0 20px 0 !important;
  text-align: left !important;
}

body:not(.elementor-editor-active) .cta-form-band-section .cta-band-left .cta-band-desc,
body:not(.elementor-editor-active) #contact-form .cta-band-left .cta-band-desc,
.page-sourcing .cta-band-left .cta-band-desc {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #A8B8C8 !important;
  max-width: 520px !important;
  margin: 0 0 32px 0 !important;
  text-align: left !important;
}

body:not(.elementor-editor-active) .cta-form-band-section .cta-band-left .cta-hotline-link,
body:not(.elementor-editor-active) #contact-form .cta-band-left .cta-hotline-link,
.page-sourcing .cta-band-left .cta-hotline-link {
  font-family: 'Plus Jakarta Sans', var(--font-body, 'Inter'), sans-serif !important;
  font-size: clamp(1.55rem, 2.6vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

/* Animations for tim-nguon-hang CTA band */
.page-sourcing .cta-form-band-section[data-cta-motion]:not(.is-inview) .cta-band-left .section-tag,
.page-sourcing .cta-form-band-section[data-cta-motion]:not(.is-inview) .cta-band-left .section-title,
.page-sourcing .cta-form-band-section[data-cta-motion]:not(.is-inview) .cta-band-left .cta-band-desc,
.page-sourcing .cta-form-band-section[data-cta-motion]:not(.is-inview) .cta-band-left .cta-hotline-link {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  animation: none !important;
}

.page-sourcing .cta-form-band-section[data-cta-motion].is-inview .cta-band-left .section-tag,
.page-sourcing .cta-form-band-section:not([data-cta-motion]) .cta-band-left .section-tag {
  animation: ctaCopyIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards,
             ctaTagPulse 3.2s ease-in-out 0.9s infinite !important;
}

.page-sourcing .cta-form-band-section[data-cta-motion].is-inview .cta-band-left .section-title,
.page-sourcing .cta-form-band-section:not([data-cta-motion]) .cta-band-left .section-title {
  animation: ctaCopyIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.18s forwards !important;
}

.page-sourcing .cta-form-band-section[data-cta-motion].is-inview .cta-band-left .cta-band-desc,
.page-sourcing .cta-form-band-section:not([data-cta-motion]) .cta-band-left .cta-band-desc {
  animation: ctaCopyIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.32s forwards !important;
}

.page-sourcing .cta-form-band-section[data-cta-motion].is-inview .cta-band-left .cta-hotline-link,
.page-sourcing .cta-form-band-section:not([data-cta-motion]) .cta-band-left .cta-hotline-link {
  animation: ctaCopyIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.46s forwards,
             ctaHotlineGlow 2.8s ease-in-out 1.2s infinite !important;
}