/* =========================================================================
   SHARED CSS — Feature detail pages
   Áp dụng cho các trang feature detail dùng banner mới (#banner-aa).
   Tách từ template-parts/Round8/page-affiliate_assets/assets/styles.css
   ========================================================================= */

.features__group {
  padding-top: 0;
}

#customers__think .content > div {
  display: flex;
  flex-direction: column;
}

#customers__think .content .name {
  order: 0;
  font-size: 1.5rem;
}

#customers__think .content .role {
  order: 1;
  margin-bottom: 1.44rem;
}

#customers__think .content .desc {
  order: 2;
  margin-bottom: 0;
}

@media screen and (min-width: 640px) {
  .features__group .feature__container:nth-child(odd) {
    background: var(--color-very-light-blue);
  }

  .features__group .feature__container:nth-child(even) {
    background: transparent;
  }

  #campaign .container > .desc {
    width: 45.57888rem;
  }

  #customers__think .container > h2 {
    margin-bottom: 4.75rem;
  }

  .features__group .feature__container:first-child {
    padding-top: 4.31rem;
  }
}

#customers__think .content__group .logo {
  width: 9.02931rem;
  height: 4.09613rem;
  position: absolute;
  left: 1.55rem;
  bottom: 0.94rem;
  object-fit: contain;
}

@media screen and (max-width: 639px) {
  #banner .box__img__people {
    height: 14.23031rem;
  }

  .features__group .feature__container:first-child {
    padding-top: 3.75rem;
  }

  #customers__think .content__group .logo {
    width: 5.16981rem;
    height: 2.34525rem;
    bottom: 0.83rem;
    left: 0.94rem;
  }

  #customers__think .content .role {
    font-size: var(--font-size-H5);
    margin-bottom: 1.19rem;
  }

  #customers__think .content .icon_quote {
    width: 2.75969rem;
    height: 2.50319rem;
    right: 1.21rem;
    bottom: 2.47rem;
    top: unset;
    display: block;
  }

  .get-started-mb {
    background: var(--color-light-gray-blue-02);
  }

  .features__group .feature__left {
    margin-bottom: 0;
  }

  .features__group .feature__container:last-child {
    padding-bottom: 3rem;
  }

  .features__group .box__btn__partnership {
    margin-top: 3.5rem;
  }
}

/* =========================================================================
   Section overrides (background trắng + button restyle theo design tokens)
   ========================================================================= */

/* 1) BANNER — [sc_banner_cpn] */
#banner {
  /* placeholder — banner mới dùng #banner-aa */
}

/* 2) CAMPAIGN — [sc_campaign] */
#campaign {
  background: #FFFFFF;
}

#campaign > img {
  display: none;
}

#campaign .headline > h2 > strong,
#campaign .headline strong {
  background: none;
  background-clip: unset;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: currentColor;
}

/* 3) FEATURES — feature.php */
.features__group {
  background: #FFFFFF;
}

.features__group .box__btn__partnership a.btn-xl.btn__view,
.features__group .box__btn__partnership a.btn-xl.btn__pricing {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--var-6, 0.375rem) !important;
  padding: var(--var-14, 0.875rem) var(--var-28, 1.75rem) !important;
  border-radius: 6.25rem !important;
  font-family: var(--font-body);
  font-weight: 500 !important;
  font-size: var(--label-md, 0.875rem) !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  letter-spacing: normal !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.features__group .box__btn__partnership a.btn-xl.btn__view,
.features__group .box__btn__partnership a.btn-xl.btn__view:hover,
.features__group .box__btn__partnership a.btn-xl.btn__view:focus,
.features__group .box__btn__partnership a.btn-xl.btn__view:active {
  background: var(--1st-btn-bg, #050505) !important;
  background-color: var(--1st-btn-bg, #050505) !important;
  color: var(--1st-btn-fg, #ffffff) !important;
  border: 1px solid var(--1st-btn-bg, #050505) !important;
}

.features__group .box__btn__partnership a.btn-xl.btn__pricing,
.features__group .box__btn__partnership a.btn-xl.btn__pricing:hover,
.features__group .box__btn__partnership a.btn-xl.btn__pricing:focus,
.features__group .box__btn__partnership a.btn-xl.btn__pricing:active {
  background: var(--2nd-btn-bg, #ffffff) !important;
  background-color: var(--2nd-btn-bg, #ffffff) !important;
  color: var(--2nd-btn-fg, #050505) !important;
  border: 1px solid var(--stroke, #d3d3d3) !important;
}

.features__group .box__btn__partnership a.btn-xl.btn__view > *,
.features__group .box__btn__partnership a.btn-xl.btn__pricing > * {
  font: inherit !important;
  color: inherit !important;
  text-transform: inherit !important;
  line-height: inherit !important;
}

/* 4) CUSTOMER THINK — [sc_customer_think] */
#customers__think {
  background: #FFFFFF;
}

#customers__think > img {
  display: none;
}