/* =====================================================
   QRANTY ANIMATIONS - Replicate Webflow Interactions
   ===================================================== */

/* ---- Section-based Scroll Animations ---- */
/* Default hidden state for animated elements */
.banner-title-wrapper, .banner-right-flex-wrap, .banner-image,
.single-feature-card-wrap,
.single-work-card-wrap,
.benefit-image-wrap, .benefit-content-wrap,
.single-statistic-wrap,
.cta-card,
.footer-details-wrap, .single-links-row, .footer-bottom-flex-wrap {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1), transform 1s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform;
}

/* Stagger delays */
.single-feature-card-wrap:nth-child(1) { transition-delay: 0s; }
.single-feature-card-wrap:nth-child(2) { transition-delay: 0.1s; }
.single-feature-card-wrap:nth-child(3) { transition-delay: 0.2s; }
.single-feature-card-wrap:nth-child(4) { transition-delay: 0.3s; }

.single-work-card-wrap:nth-child(1) { transition-delay: 0s; }
.single-work-card-wrap:nth-child(2) { transition-delay: 0.1s; }
.single-work-card-wrap:nth-child(3) { transition-delay: 0.2s; }
.single-work-card-wrap:nth-child(4) { transition-delay: 0.3s; }

.single-links-row:nth-child(1) { transition-delay: 0s; }
.single-links-row:nth-child(2) { transition-delay: 0.1s; }
.single-links-row:nth-child(3) { transition-delay: 0.2s; }

.banner-right-flex-wrap { transition-delay: 0.2s; }
.banner-image { transition-delay: 0.3s; transform: translateY(60px) scale(0.95); }
.benefit-image-wrap { transform: translateX(-40px); }
.benefit-content-wrap { transform: translateX(40px); }

/* Trigger state when section is in view */
.section-in-view .banner-title-wrapper,
.section-in-view .banner-right-flex-wrap,
.section-in-view .banner-image,
.section-in-view .single-feature-card-wrap,
.section-in-view .single-work-card-wrap,
.section-in-view .benefit-image-wrap,
.section-in-view .benefit-content-wrap,
.section-in-view .single-statistic-wrap,
.section-in-view .cta-card,
.section-in-view .footer-details-wrap,
.section-in-view .single-links-row,
.section-in-view .footer-bottom-flex-wrap {
  opacity: 1 !important;
  transform: translate(0) scale(1) !important;
}

/* ---- Footer divider grow ---- */
.footer-divider {
  width: 0%;
  transition: width 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.5s;
}
.section-in-view .footer-divider {
  width: 100% !important;
}

/* ---- Ticker / Marquee continuous scroll ---- */
.partner-name-ticker-wrapper {
  overflow: hidden;
}

.single-partner-name-ticker {
  display: flex;
  animation: ticker-scroll-text 56s linear infinite;
}

@keyframes ticker-scroll-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Partner logo ticker */
.partner-ticker-wrapper {
  overflow: hidden;
}

.single-partner-ticker {
  display: flex;
  animation: ticker-scroll-logos 18s linear infinite;
}

@keyframes ticker-scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---- Button Hover Effects ---- */

/* Primary button - "Get Started Free" */
.primary-button {
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.primary-button:hover {
  background-color: #d1e0ff !important;
  transform: scale(1.03);
}

.primary-button .primary-button-text {
  display: block;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.primary-button .primary-button-hover-text {
  position: absolute;
  left: 0 !important;
  top: 50% !important;
  width: calc(100% - 76px);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(120%) !important;
  opacity: 0 !important;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.primary-button:hover .primary-button-text {
  transform: translateY(-150%) !important;
  opacity: 0 !important;
}

.primary-button:hover .primary-button-hover-text {
  transform: translateY(-50%) !important;
  opacity: 1 !important;
}

/* Primary button icon rotation on hover */
.primary-button-icon-wrap {
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              background-color 0.3s ease;
}

.primary-button:hover .primary-button-icon-wrap {
  transform: rotate(45deg);
  background-color: #003399 !important;
}

.primary-button-icon {
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.primary-button-hover-icon {
  position: absolute;
  transform: translateX(-150%) translateY(150%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.primary-button:hover .primary-button-icon {
  transform: translateX(150%) translateY(-150%);
  opacity: 0;
}

.primary-button:hover .primary-button-hover-icon {
  transform: translateX(0) translateY(0);
  opacity: 1;
}

/* Inner buttons - "Get Started" nav */
.inner-button {
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.inner-button:hover {
  transform: scale(1.05);
}

.inner-button .inner-button-text,
.get-started-button .get-started-button-text {
  display: block;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.inner-button .inner-button-hover-text,
.get-started-button .get-started-button-hover-text {
  position: absolute;
  top: 50% !important;
  left: 0 !important;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(120%) !important;
  opacity: 0 !important;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.inner-button:hover .inner-button-text,
.get-started-button:hover .get-started-button-text {
  transform: translateY(-120%) !important;
  opacity: 0 !important;
}

.inner-button:hover .inner-button-hover-text,
.get-started-button:hover .get-started-button-hover-text {
  transform: translateY(-50%) !important;
  opacity: 1 !important;
}


/* Nav link hover */
.single-nav-link {
  position: relative;
  flex: none;
  white-space: nowrap;
}

.nav-contant,
.nav-contant > div,
.inner-button.desktop,
.inner-button.desktop .inner-button-text,
.inner-button.desktop .inner-button-hover-text {
  white-space: nowrap;
}

.single-nav-link .nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #0040C1;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.single-nav-link:hover .nav-dot,
.single-nav-link.w--current .nav-dot {
  transform: scale(1);
}

.single-nav-link .nav-contant {
  transition: color 0.3s ease;
}

.single-nav-link:hover .nav-contant {
  color: #0040C1 !important;
}

/* ---- Feature cards hover ---- */
.income-tracking-card,
.savings-goals-card,
.financial-analytics-card,
.get-app-card,
.single-more-addition-feature-card,
.single-benefit-card,
.single-statistic-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease;
}

.income-tracking-card:hover,
.savings-goals-card:hover,
.financial-analytics-card:hover,
.get-app-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 64, 193, 0.12);
}

.single-more-addition-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* ---- Counter number roll animation ---- */
.single-counter-wrap,
.single-statistic-counter-wrap {
  transition: transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Back to top button ---- */
.back-to-top-button {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.back-to-top-button:hover {
  transform: translateY(-3px);
}

.back-to-top-button .back-to-top-button-text {
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.back-to-top-button .back-to-top-button-hover-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 100%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.back-to-top-button:hover .back-to-top-button-text {
  transform: translateY(-120%);
  opacity: 0;
}

.back-to-top-button:hover .back-to-top-button-hover-text {
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* ---- App store buttons hover ---- */
.app-store-button {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.app-store-button:hover {
  transform: translateY(-3px);
  opacity: 0.85;
}

/* ===== HERO: badge tải app (CTA phụ, đặt dưới nút "Bắt đầu với 0 đồng") ===== */
/* Markup nằm trong index.html (banner-left-wrap); style để riêng đây cho editor không ghi đè. */
.qb-hero-appstores { margin-top: 20px; }
.qb-hero-appstores-label {
  display: block;
  margin-bottom: 10px;
  color: var(--grey-50);
  font-size: 14px;
  line-height: 20px;
}
.qb-hero-appstores-badges {
  display: flex;
  flex-wrap: wrap;      /* cột hero hẹp (~386px, 323px ở 1200px) -> badge tự xuống hàng, không tràn ngang */
  align-items: center;
  gap: 12px;
}
.qb-hero-appstores-badges .app-store-button { display: inline-flex; }
.qb-hero-appstores-badges .app-store-button-image {
  display: block;
  width: auto;
  height: 44px;         /* 168x48 -> ~154px rộng; 2 badge = ~320px, vừa cột hero */
}
@media screen and (max-width: 479px) {
  .qb-hero-appstores-badges .app-store-button-image { height: 40px; }
}

/* ---- CTA card hover parallax ---- */
.cta-card {
  transition: transform 0.4s ease;
}

.cta-card:hover .cta-chart-image-wrap._1 {
  transform: translateY(-8px);
}

.cta-card:hover .cta-chart-image-wrap._2 {
  transform: translateY(-4px) translateX(4px);
}

.cta-chart-image-wrap {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---- Cart hover ---- */
.navbar-cart-button:hover {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

/* ---- FAQ accordion ---- */
.faq-single-accordion-wrap {
  transition: background-color 0.3s ease;
}

.faq-arrow {
  transition: transform 0.3s ease;
}

.faq-single-accordion-wrap.w--current .faq-arrow {
  transform: rotate(45deg);
}

/* ---- Stagger delays for grouped elements ---- */
.single-more-addition-feature-card:nth-child(1) { transition-delay: 0s; }
.single-more-addition-feature-card:nth-child(2) { transition-delay: 0.1s; }
.single-more-addition-feature-card:nth-child(3) { transition-delay: 0.2s; }
.single-more-addition-feature-card:nth-child(4) { transition-delay: 0.3s; }
.single-more-addition-feature-card:nth-child(5) { transition-delay: 0.4s; }

/* ---- Smooth scrolling ---- */
html {
  scroll-behavior: smooth;
}

/* ---- Circle shape subtle float animation ---- */
.banner-circle-shape,
.partner-circle-shape,
.income-tracking-corcle-shape,
.savings-goals-circle,
.financial-analytics-circle-shape,
.benefit-card-circle,
.cta-circle-shape {
  animation: float-shape 6s ease-in-out infinite;
}

@keyframes float-shape {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
}

/* Slight delay variations for different shapes */
.partner-circle-shape { animation-delay: 1s; }
.income-tracking-corcle-shape { animation-delay: 0.5s; }
.savings-goals-circle { animation-delay: 1.5s; }
.financial-analytics-circle-shape { animation-delay: 2s; }
.benefit-card-circle { animation-delay: 0.8s; }
.cta-circle-shape { animation-delay: 1.2s; }

/* ---- Social media icons hover ---- */
.single-social-media-link {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.single-social-media-link:hover {
  transform: translateY(-3px);
  opacity: 0.7;
}

/* ---- Footer link hover underline ---- */
.single-footer-links {
  position: relative;
  transition: color 0.3s ease;
}

.single-footer-links::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: width 0.3s ease;
}

.single-footer-links:hover::after {
  width: 100%;
}

/* ---- Footer divider grow ---- */
.footer-divider {
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hide Webflow Badge and Cart */
.w-webflow-badge, .nav-cart-button-wrap {
  display: none !important;
}

/* Global typography override */
html,
body {
  font-family: 'Nunito', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
p,
a,
li,
td,
th,
button,
input,
textarea,
select,
.body-text,
.section-details,
.banner-details,
.feature-details,
.partner-title,
.footer-copyright,
.single-footer-links {
  font-family: 'Nunito', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
[class*="heading"] {
  font-family: 'Nunito', sans-serif !important;
}

div[class*="title"],
p[class*="title"],
a[class*="title"],
label[class*="title"] {
  font-family: 'Nunito', sans-serif !important;
}

h1[class*="title"],
h2[class*="title"],
h3[class*="title"],
h4[class*="title"],
h5[class*="title"],
h6[class*="title"] {
  font-family: 'Nunito', sans-serif !important;
}

.partner-card {
  width: 1296px;
  max-width: 100%;
  height: 551px;
  margin-left: auto;
  margin-right: auto;
}

.partner-name-wrapper {
  margin-bottom: 38px !important;
}

.partner-name-ticker-wrapper {
  height: 150px !important;
  min-height: 150px !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

.single-partner-name-ticker {
  animation-duration: 56s !important;
  will-change: transform;
}

.partner-name-ticker-item {
  letter-spacing: -2px !important;
  line-height: 150px !important;
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
  white-space: nowrap;
}

.partner-name-overlay-shape {
  background-image: linear-gradient(
    90deg,
    #0140c1 0%,
    rgba(1, 64, 193, 0.86) 8%,
    rgba(1, 64, 193, 0) 24%,
    rgba(1, 64, 193, 0) 76%,
    rgba(1, 64, 193, 0.86) 92%,
    #0140c1 100%
  ) !important;
  pointer-events: none;
  z-index: 2;
}

@media screen and (max-width: 991px) {
  .partner-card {
    width: 100%;
    height: auto;
  }

  .partner-name-wrapper {
    margin-bottom: 24px !important;
  }

  .partner-name-ticker-wrapper {
    height: 112px !important;
    min-height: 112px !important;
  }

  .partner-name-ticker-item {
    line-height: 112px !important;
  }
}

@media screen and (max-width: 767px) {
  .partner-name-wrapper {
    margin-bottom: 30px !important;
  }

  .partner-name-ticker-wrapper {
    height: 82px !important;
    min-height: 82px !important;
  }

  .partner-name-ticker-item {
    line-height: 82px !important;
  }
}

@media screen and (max-width: 479px) {
  .partner-name-wrapper {
    margin-bottom: 10px !important;
  }

  .partner-name-ticker-wrapper {
    height: 72px !important;
    min-height: 72px !important;
  }

  .partner-name-ticker-item {
    line-height: 72px !important;
  }
}

.partner-circle-shape {
  left: 50%;
  bottom: -160px;
  inset: auto auto -160px 50%;
  transform: translateX(-50%);
  z-index: -2;
  animation-name: partner-float-shape;
}

@keyframes partner-float-shape {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -15px); }
}

.navbar-logo, .footer-logo {
  max-height: 72px;
  width: auto;
}

@font-face {
  font-family: 'Nunito';
  src: url('../fonts/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 1000;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter/Inter/Inter-V.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

/* FZ Poppins — ban Poppins Viet hoa (Fz Fonts), giay phep SIL OFL 1.1.
   Poppins goc tren Google Fonts KHONG co subset tieng Viet nen phai tu host.
   Khac voi DVN-Poppins (chi co 400 va 800), ban nay co DU dai weight
   100-900 nen dung duoc SemiBold 600 that, khong phai bold gia.
   File goc .ttf: qranty-landing/fonts/FzPoppins/ (ngoai public/, khong deploy).
   Ban trong public/fonts/ da cat gon con latin + latin-ext + tieng Viet
   va nen woff2: ~450KB -> 24-28KB moi weight.
   Dang dung that: 600 (tieu de H1/H2). 400/500/700 de san, doi weight chi can
   sua mot so trong khoi <style> so 2 cua 13 file HTML. */
@font-face { font-family:'FZ Poppins'; src:url('../fonts/fz-poppins-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'FZ Poppins'; src:url('../fonts/fz-poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'FZ Poppins'; src:url('../fonts/fz-poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'FZ Poppins'; src:url('../fonts/fz-poppins-700.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

/* Apply requested font hierarchy */
body,
p,
a,
li,
td,
th,
button,
input,
textarea,
select {
  font-family: 'Nunito', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
[class*="heading"] {
  font-family: 'Nunito', sans-serif !important;
}

div[class*="title"],
p[class*="title"],
a[class*="title"],
label[class*="title"] {
  font-family: 'Nunito', sans-serif !important;
}

h1[class*="title"],
h2[class*="title"],
h3[class*="title"],
h4[class*="title"],
h5[class*="title"],
h6[class*="title"] {
  font-family: 'Nunito', sans-serif !important;
}

@media screen and (min-width: 992px) {
  .navbar-wrapper {
    position: relative;
  }

  .split-contant.navbar-right {
    flex: 1;
    justify-content: flex-end;
  }

  .nav-menu-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .nav-menu-link-wrap {
    background-color: #f9f9f9;
    border-radius: 100px;
    overflow: hidden;
  }

  .nav-menu-links-wrap {
    align-items: center;
  }
}
/* Ensure the CTA "Get Started" button is visible since Qranty native cart is hidden */
.inner-button.desktop {
  display: flex !important;
}

/* Animations for 4 floating elements moving from center out on scroll */
.solution-image-wrap {
  opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.5);
  transition: opacity 2s cubic-bezier(0.23, 1, 0.32, 1),
              transform 2s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Optional slight stagger so they feel organic */
.solution-image-wrap._1 { transition-delay: 0s; }
.solution-image-wrap._2 { transition-delay: 0.1s; }
.solution-image-wrap._3 { transition-delay: 0.2s; }
.solution-image-wrap._4 { transition-delay: 0.3s; }

.solution-image-wrap._1 {
  --tx: 120px;
  --ty: 120px;
}
.solution-image-wrap._2 {
  --tx: -120px;
  --ty: 120px;
}
.solution-image-wrap._3 {
  --tx: 120px;
  --ty: -120px;
}
.solution-image-wrap._4 {
  --tx: -120px;
  --ty: -120px;
}

/* Triggered by JS IntersectionObserver */
.section.solution.section-in-view .solution-image-wrap {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}


.solution-mobile-img {
  display: block;
  margin: 60px auto 0;
  max-width: 350px;
  position: relative;
  z-index: 5;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease;
  will-change: transform;
}
.solution-mobile-img:hover {
  transform: translateY(-10px) scale(1.02) !important;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
}

.get-app-logo[src*="get-app-logo-qranty"] {
  width: 168px;
  height: 168px;
  max-width: 100%;
  object-fit: contain;
  display: inline-block;
}

@media screen and (max-width: 991px) {
  .get-app-logo[src*="get-app-logo-qranty"] {
    width: 100px;
    height: 100px;
  }
}

@media screen and (max-width: 767px) {
  .get-app-logo[src*="get-app-logo-qranty"] {
    width: 80px;
    height: 80px;
  }
}

@media screen and (max-width: 479px) {
  .get-app-logo[src*="get-app-logo-qranty"] {
    width: 60px;
    height: 60px;
  }
}
/* CTA copy length adjustments */
.primary-button {
  min-width: 276px;
}

.primary-button .primary-button-text,
.primary-button .primary-button-hover-text,
.inner-button .inner-button-text,
.inner-button .inner-button-hover-text,
.get-started-button .get-started-button-text,
.get-started-button .get-started-button-hover-text {
  white-space: nowrap;
}

.inner-button.desktop,
.inner-button.mobile {
  min-width: 188px;
}

.get-started-button {
  min-width: 188px;
}

@media screen and (max-width: 479px) {
  .primary-button {
    min-width: 248px;
  }

  .inner-button.desktop,
  .inner-button.mobile,
  .get-started-button {
    min-width: 172px;
  }
}
span {
  font-family: 'Nunito', sans-serif !important;
}
/* Qranty hero iPhone mockup embed */
.qranty-iphone-hero-wrap {
  width: min(62vw, 860px);
  height: 980px;
  min-width: 620px;
  overflow: visible;
  pointer-events: auto;
}

.qranty-iphone-hero {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
  background: transparent;
  overflow: visible;
}

@media screen and (max-width: 991px) {
  .qranty-iphone-hero-wrap {
    width: min(76vw, 620px);
    height: 720px;
    min-width: 0;
  }
}

@media screen and (max-width: 767px) {
  .qranty-iphone-hero-wrap {
    width: min(90vw, 480px);
    height: 560px;
  }
}

@media screen and (max-width: 479px) {
  .qranty-iphone-hero-wrap {
    width: min(96vw, 380px);
    height: 470px;
  }
}

/* =====================================================
   QRANTY-FEATURE.HTML — SCROLL REVEALS
   The feature page uses Qranty' own block classes, which
   were never added to the animation engine above. Webflow
   pre-sets them to opacity:0 and the JS clears that inline
   style on load, so they used to just pop in with no motion.
   Below re-hides them via CSS and reveals them (fade + rise)
   when their parent .section gets the .section-in-view class
   from qranty-animations.js — matching the Qranty style.
   ===================================================== */

/* Hidden (pre-reveal) state */
.feature .income-tracking-card-wrap,
.feature .savings-goals-chart-wrap,
.feature .feature-title-details-wrap,
.feature .get-app-logo-wrap,
.feature .get-app-title,
.more-addition .more-addition-title-wrap,
.more-addition .single-more-addition-feature-card,
.work .work-contant-wrap,
.benefit .single-benefit-card {
  opacity: 0;
  transform: translateY(42px);
  transition: opacity 0.9s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.9s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: opacity, transform;
}

/* Reveal when the parent section scrolls into view */
.feature.section-in-view .income-tracking-card-wrap,
.feature.section-in-view .savings-goals-chart-wrap,
.feature.section-in-view .feature-title-details-wrap,
.feature.section-in-view .get-app-logo-wrap,
.feature.section-in-view .get-app-title,
.more-addition.section-in-view .more-addition-title-wrap,
.more-addition.section-in-view .single-more-addition-feature-card,
.work.section-in-view .work-contant-wrap,
.benefit.section-in-view .single-benefit-card {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger inside the feature grid (scoped per card) */
.feature .income-tracking-card .income-tracking-card-wrap { transition-delay: 0.05s; }
.feature .income-tracking-card .feature-title-details-wrap { transition-delay: 0.15s; }
.feature .savings-goals-card .feature-title-details-wrap { transition-delay: 0s; }
.feature .savings-goals-card .savings-goals-chart-wrap { transition-delay: 0.15s; }
.feature .financial-analytics-card .feature-title-details-wrap { transition-delay: 0.1s; }
.feature .get-app-card .get-app-logo-wrap { transition-delay: 0s; }
.feature .get-app-card .get-app-title { transition-delay: 0.12s; }

/* Stagger inside the benefit section */
.benefit .single-benefit-card:nth-child(1) { transition-delay: 0s; }
.benefit .single-benefit-card:nth-child(2) { transition-delay: 0.12s; }
.benefit .single-benefit-card:nth-child(3) { transition-delay: 0.24s; }

/* =====================================================
   WORK / "QUY TRÌNH" — FAITHFUL QRANTY SCROLL ANIMATION
   Rebuilt to match qranty_live.html exactly (Webflow
   actionList a-41 "Work Scroll Animation"). The section is
   300vh and pinned (both from the main stylesheet); the 3
   phone screens stay in NORMAL FLOW, stacked & clipped, and
   slide UP by percentage as you scroll:
     .work-image._2 :  0 -> -100%        (scroll 30%..50%)
     .work-image._3 :  0 -> -100% -> -200% (scroll 0..55%..70%)
   The active step number turns violet at ~31% and ~51%.
   qranty-animations.js computes the % from scroll progress.
   We deliberately DON'T set position/size here so the phone
   screens keep the original Qranty dimensions.
   ===================================================== */

.section.work .work-phone-image-wrap { overflow: hidden; }

/* light smoothing on the sliding screens (mimics Webflow's smoothing) */
.section.work .work-image {
  transition: transform 0.12s linear;
  will-change: transform;
  backface-visibility: hidden;
}

/* Active step: only the number circle turns violet, exactly like Qranty */
.section.work .single-process-wrap .process-number-wrap {
  transition: background-color 0.3s ease;
}
.section.work .single-process-wrap.is-active .process-number-wrap {
  background-color: var(--violet, #0040C1);
}
.section.work .single-process-wrap.is-active .process-number {
  color: #fff;
}


/* ---- Qranty counter (bo dem lan so tu dung tu data-qb-count) ---- */
.qb-count { display: flex; align-items: flex-start; height: 100%; }
.qb-count-col { display: flex; flex-direction: column; align-items: center; height: 100%; will-change: transform; }
.qb-count .number-digit { display: block; height: 100%; min-height: 100%; }

/* ---- Icon mang xa hoi (SVG thay cho icon-font da mat glyph) ---- */
.qb-social-svg { width: 20px; height: 20px; display: block; }
@media screen and (max-width: 479px) { .qb-social-svg { width: 15px; height: 15px; } }

/* =====================================================================
   HERO — 3 cot: chu trai | laptop giua | doan gioi thieu + 500+ ben phai
   (28/07/2026). Truoc do .banner-image-wrap la position:absolute nam giua
   nen de len khoi chu, va bi display:none tu 991px tro xuong.
   ===================================================================== */
.banner-contant-flex{ align-items:center; justify-content:space-between;
  grid-column-gap:32px; grid-row-gap:40px; flex-wrap:nowrap; }
/* hai cot chu bang nhau => laptop o giua nam dung tam khoi */
.banner-left-wrap{ flex:1 1 0; max-width:none; }
.banner-title-wrapper{ margin-bottom:28px; }
/* de trinh duyet tu can hai dong tieu de cho deu, khong bo lai mot chu le */
.banner-title{ text-wrap:balance; }

/* Dong 2 cua hero ("Co May Tang Truong") — dam nhu dong 1, to gradient xanh chuan
   cua site (giong khoi xanh lon). Dung background-clip:text nen phai xoa mau chu.
   .grey-30 trong qranty.webflow.css van dat color:var(--grey-50) -> can text-fill-color. */
.banner-title.grey-30{
  background: linear-gradient(360deg, #495ad9, #0040c1 64%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
@media screen and (min-width:992px){
  /* Cot chu hep lai (vi laptop phai nam dung giua) nen tieu de phai nho hon
     mot chut, khong thi "Bien Bao Hanh" vo thanh 3 dong.
     30/07/2026: font tieu de = FZ Poppins Regular 400, co 52px.
     Vi sao 52px chu khong phai 56px: dong 2 ("Co May / Tang Truong") duoc thut
     le 56px cho giong ban mau. Cot chu chi rong 386px ma "Tang Truong" o 56px
     da chiem 353px -> thut le qua 32px la vo dong. Ha xuong 52px thi "Tang
     Truong" con ~328px, du cho thut 56px. Doi font/weight/co chu thi PHAI do
     lai so dong cua ca hai khoi tieu de hero. */
  .banner-title{ font-size:52px; line-height:60px; }
  /* Dong 2 thut vao cho giong bo cuc ban mau (gach trang tri van an) */
  .banner-title-wrap.flex .banner-title.grey-30{ padding-left:56px; }
  /* gach trang tri chiem cho lam "Tang truong" bi vo dong -> an o desktop */
  .banner-title-divider{ display:none; }
}
.button-wrapper.left-padding-110px{ padding-left:0; }

/* laptop nam giua, khong con absolute */
.banner-image-wrap{ position:static; inset:auto; transform:none;
  flex:0 0 460px; width:auto; max-width:460px; margin:0; }
.banner-image{ display:block; width:100%; height:auto; }

.banner-right-wrap{ flex:1 1 0; max-width:none; margin-top:0; }
.banner-right-flex-wrap{ grid-row-gap:28px; }
.banner-details-plus-wrap{ display:block; align-self:flex-start; margin-bottom:0; max-width:100%; }
.banner-plus-icon-wrap{ margin-bottom:14px; }
.banner-details-wrap{ flex:1 1 auto; }
/* tranh de mot chu lac loi tren dong cuoi */
.banner-details{ text-wrap:pretty; }
.banner-info-wrapper{ align-self:flex-start; }
.banner-clint-image-counter-wrap{ justify-content:flex-start; }
.banner-clint-info-wrap{ max-width:100%; }

@media screen and (max-width:991px){
  .banner-contant-flex{ flex-flow:column; flex-wrap:wrap; align-items:center; grid-row-gap:36px; }
  .banner-left-wrap{ flex:none; max-width:640px; }
  /* tra lai anh cho may tinh bang va dien thoai — truoc day bi an hoan toan */
  .banner-image-wrap{ display:block; flex:none; max-width:480px; margin:0 auto; }
  .banner-right-wrap{ flex:none; max-width:640px; }
  .banner-right-flex-wrap{ display:flex; flex-flow:column; align-items:center; grid-row-gap:22px; }
  .banner-details-plus-wrap{ align-self:center; max-width:100%; }
  /* dau + chi la trang tri, bo di cho khoi lac long khi chu canh giua */
  .banner-plus-icon-wrap{ display:none; }
  .banner-info-wrapper{ align-self:center; }
  .banner-clint-image-counter-wrap{ justify-content:center; }
}
@media screen and (max-width:479px){
  .banner-image-wrap{ max-width:100%; }
}

/* =====================================================================
   Khoi "VARIETY / FEATURES" — xep doc: chu tren, anh giua, chu duoi
   (28/07/2026). Truoc do chu nam hai ben nen anh chi con ~460px, nhin
   qua be. Xep doc thi anh duoc dung het be ngang khung.
   ===================================================================== */
.more-addition-contant-flex{ flex-flow:column; align-items:center; justify-content:center; }
.more-addition-left-contant{ margin-top:0; margin-bottom:-46px; }
.more-addition-right-contant{ margin-top:-58px; }
.more-addition-middle-contant{ position:relative; z-index:1;
  width:100%; max-width:980px; max-height:none;
  margin-left:auto; margin-right:auto; }
.more-addition-mobile{ display:block; width:100%; height:auto; }
/* lop phu trang truoc day de lam mo phan duoi anh dien thoai dai;
   anh ngang thi chi can mo nhe o day */
.more-addition-overlay{ background-image:linear-gradient(180deg,#fff0 86%,var(--white));
  pointer-events:none; }   /* neu khong, lop phu nay chan chuot khong cham toi laptop */

@media screen and (max-width:991px){
  .more-addition-left-contant{ margin-bottom:-28px; }
  .more-addition-right-contant{ margin-top:-36px; }
  .more-addition-middle-contant{ max-width:100%; }
}
@media screen and (max-width:767px){
  .more-addition-left-contant{ margin-bottom:-18px; }
  .more-addition-right-contant{ margin-top:-24px; }
}
@media screen and (max-width:479px){
  .more-addition-left-contant{ margin-bottom:-12px; }
  .more-addition-right-contant{ margin-top:-16px; }
}

/* =====================================================================
   VARIETY / FEATURES — laptop va iPhone troi len tu duoi + phong to khi ro chuot
   (28/07/2026). Chay khi khoi lot vao khung nhin: .section.more-addition.section-in-view
   (class do js/qranty-animations.js gan, muc 1).

   Dung 3 thuoc tinh RIENG BIET translate / rotate / scale thay vi gop vao
   transform. Nho vay hieu ung "troi len" (translate) va hieu ung "phong to
   khi ro chuot" (scale) khong gianh nhau, moi cai co nhip rieng.
   ===================================================================== */
.more-addition-middle-contant{ overflow: visible; }

.more-addition-mobile,
.qb-phone-layer{
  opacity: 0;
  will-change: translate, opacity, scale;
  transform-origin: 50% 60%;
}

/* --- laptop: troi len tu duoi-PHAI, di truoc --- */
.more-addition-mobile{
  translate: 110px 190px;
  transition: translate 1s cubic-bezier(.16,.84,.32,1),
              opacity   .55s ease-out,
              scale     .45s cubic-bezier(.45,0,.25,1);
}
/* --- iPhone: cho laptop yen vi roi moi DUNG LEN TU DUOI, cung chieu voi laptop --- */
.qb-phone-layer{
  /* CUNG DAU (+) voi laptop (110px) -> ca hai cung troi len-sang-trai.
     Truoc day la -150px (am) nen iPhone di nguoc chieu va CAT QUA MacBook. */
  translate: 70px 300px;
  /* so DUONG = cung chieu nghieng voi MacBook. Truoc day -9deg (am) la nguoc chieu. */
  rotate: 5deg;
  /* xoay quanh DAY -> dung len tu duoi, khong phai quay quanh giua than may */
  transform-origin: 50% 100%;
  transition: translate .95s cubic-bezier(.16,.84,.32,1) .5s,
              rotate    .95s cubic-bezier(.16,.84,.32,1) .5s,
              opacity   .5s  ease-out .5s,
              scale     .45s cubic-bezier(.45,0,.25,1);
}

.section.more-addition.section-in-view .more-addition-mobile,
.section.more-addition.section-in-view .qb-phone-layer{
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
}

/* --- ro chuot vao thi phong to 1,1 lan, vao va ra deu muot --- */
.more-addition-mobile:hover,
.qb-phone-layer:hover{ scale: 1.1; }
.qb-phone-layer:hover{ z-index: 3; }
.more-addition-mobile:hover{ z-index: 2; position: relative; }

/* lop iPhone: dat chong len canh phai cua laptop */
.qb-phone-layer{
  position: absolute;
  left: 66%;
  top: 30%;
  width: 30%;
  height: auto;
  z-index: 2;
}

@media screen and (max-width: 767px){
  .more-addition-mobile{ translate: 45px 80px; }
  .qb-phone-layer{ translate: 30px 120px; }
}
@media (prefers-reduced-motion: reduce){
  .more-addition-mobile, .qb-phone-layer{ transition: none; translate: none; rotate: none; opacity: 1; }
}

/* =====================================================================
   SECTION "NOI DAU" — chen giua Giai phap va Tinh nang   (28/07/2026)
   4 the noi dau hien len lan luot khi khoi lot vao khung nhin.
   ===================================================================== */
.section.qb-pain{ padding: 96px 0 24px; }
/* Font lay dung theo chuan cac section khac cua site:
   tieu de  = Nunito 64/72 w400 ls -1.92px  (giong .section-title)
   mo ta    = Nunito  18/28 w400             (giong .section-details)
   tieu de the = Nunito 18/28 w500          (giong .more-addition-feature-info-title)
   chu trong the = Nunito 15/24 w400         (giong .feature-details) */
.qb-pain-head{ max-width: 900px; margin: 0 auto 52px; text-align: center; }
.qb-pain-heading{ margin: 0 0 18px; font-size: 64px; line-height: 72px; font-weight: 400;
  letter-spacing: -1.92px; color: var(--grey-90); text-wrap: balance; }
.qb-pain-accent{ color: var(--brand); }
.qb-pain-sub{ margin: 0; font-size: 18px; line-height: 28px; font-weight: 400;
  color: var(--grey-50); text-wrap: pretty; }

.qb-pain-grid{ display: grid; grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 24px; grid-row-gap: 24px; }

.qb-pain-card{ position: relative; padding: 28px 24px 26px; border-radius: 16px;
  background: linear-gradient(160deg, #F5F9FF 0%, #E8F0FC 100%);
  border: 1px solid var(--s100);
  /* trang thai chua hien */
  opacity: 0; translate: 0 34px;
  transition: opacity .55s ease-out, translate .55s cubic-bezier(.16,.84,.32,1),
              box-shadow .3s ease, border-color .3s ease;
}
.qb-pain-num{ position: absolute; top: 22px; right: 22px;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff; font-size: 15px; font-weight: 700; line-height: 1;
  box-shadow: 0 6px 16px rgba(37,99,235,.32);
  scale: .4; opacity: 0; transition: scale .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease-out; }
.qb-pain-title{ margin: 0 46px 12px 0; font-size: 18px; line-height: 28px; font-weight: 500;
  letter-spacing: normal; color: var(--grey-90); }
.qb-pain-text{ margin: 0; font-size: 15px; line-height: 24px; font-weight: 400; color: var(--grey-60); }

/* hien lan luot: the sau tre hon the truoc 0,12s */
.section.qb-pain.section-in-view .qb-pain-card{ opacity: 1; translate: 0 0; }
.section.qb-pain.section-in-view .qb-pain-num{ scale: 1; opacity: 1; }
.qb-pain-card:nth-child(1){ transition-delay: 0s }
.qb-pain-card:nth-child(2){ transition-delay: .12s }
.qb-pain-card:nth-child(3){ transition-delay: .24s }
.qb-pain-card:nth-child(4){ transition-delay: .36s }
.qb-pain-card:nth-child(1) .qb-pain-num{ transition-delay: .30s }
.qb-pain-card:nth-child(2) .qb-pain-num{ transition-delay: .42s }
.qb-pain-card:nth-child(3) .qb-pain-num{ transition-delay: .54s }
.qb-pain-card:nth-child(4) .qb-pain-num{ transition-delay: .66s }

/* ro chuot: the nhac len, vien dam hon */
.qb-pain-card:hover{ box-shadow: 0 14px 34px rgba(31,92,153,.14); border-color: var(--s300); }

@media screen and (max-width: 991px){
  .section.qb-pain{ padding: 64px 0 16px; }
  .qb-pain-heading{ font-size: 42px; line-height: 50px; letter-spacing: -1.26px; }
  .qb-pain-sub{ font-size: 17px; line-height: 27px; }
  .qb-pain-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 600px){
  .qb-pain-heading{ font-size: 32px; line-height: 40px; letter-spacing: -.96px; }
  .qb-pain-sub{ font-size: 16px; line-height: 26px; }
  .qb-pain-grid{ grid-template-columns: 1fr; grid-row-gap: 16px; }
}
@media (prefers-reduced-motion: reduce){
  .qb-pain-card, .qb-pain-num{ transition: none; opacity: 1; translate: none; scale: 1; }
}

/* =====================================================================
   DESKTOP / MOBILE — sang chu khi ro chuot vao thiet bi + callout CTA
   (28/07/2026)
   Dung :has() de chon nguoc len phan tu anh em DUNG TRUOC (chu DESKTOP
   nam truoc anh trong DOM, CSS thuong khong voi nguoc len duoc).
   ===================================================================== */

/* 1) bo dai trang mo duoi laptop */
.more-addition-overlay{ background-image: none; }

/* 2) chu nen: them nhip chuyen mau */
.more-addition-feature-name{
  transition: -webkit-text-fill-color .32s ease, text-shadow .32s ease,
              scale .38s cubic-bezier(.45,0,.25,1), translate .38s cubic-bezier(.45,0,.25,1);
}
/* mockup phong to 1,1 se lan vao chu -> chu vua to theo vua lui ra xa */
.more-addition-contant-flex:has(.more-addition-mobile:hover) .more-addition-left-contant .more-addition-feature-name,
.more-addition-contant-flex.qb-on-desktop .more-addition-left-contant .more-addition-feature-name{
  scale: 1.08; translate: 0 -22px;      /* DESKTOP o tren -> lui LEN */
}
.more-addition-contant-flex:has(.qb-phone-layer:hover) .more-addition-right-contant .more-addition-feature-name,
.more-addition-contant-flex.qb-on-mobile .more-addition-right-contant .more-addition-feature-name{
  scale: 1.08; translate: 0 22px;       /* MOBILE o duoi -> lui XUONG */
}
/* ro chuot / cham vao LAPTOP -> chu DESKTOP dam len */
.more-addition-contant-flex:has(.more-addition-mobile:hover) .more-addition-left-contant .more-addition-feature-name,
.more-addition-contant-flex.qb-on-desktop .more-addition-left-contant .more-addition-feature-name{
  -webkit-text-fill-color: #1D4ED8;
  text-shadow: 0 10px 30px rgba(29,78,216,.20);
}
/* ro chuot / cham vao IPHONE -> chu MOBILE dam len */
.more-addition-contant-flex:has(.qb-phone-layer:hover) .more-addition-right-contant .more-addition-feature-name,
.more-addition-contant-flex.qb-on-mobile .more-addition-right-contant .more-addition-feature-name{
  -webkit-text-fill-color: #1D4ED8;
  text-shadow: 0 10px 30px rgba(29,78,216,.20);
}

/* 3) CTA "Xem giao dien tinh nang"
   Dung DUNG style CTA phu chuan cua site (.get-started-button o hero):
   Nunito 18/28 weight 500, chu #0040C1, nen trong, vien 1px #1D4ED8, bo tron 100px.
   KHONG shadow: khong mot CTA nao khac tren site co shadow. Shadow truoc day la
   de tach CTA khoi anh khi no nam de len anh — gio da tach ra ngoai roi nen bo. */
.qb-see-ui-wrap{ display: flex; justify-content: center; margin-top: 34px; }
.qb-see-ui{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 20px; border-radius: 100px;
  background: transparent; border: 1px solid #1D4ED8;
  box-shadow: none; color: #0040C1;
  text-decoration: none; white-space: nowrap; z-index: 4;
  transition: background-color .25s ease, translate .3s ease, border-color .25s ease;
}
/* Chu nam trong <span>; tu 29/07/2026 toan site dung Nunito nen rule nay chi con de giu co chu
   va nhin dam hon han cac nut khac. Ghi de o day — xem README muc 5.2, bay 1. */
.qb-see-ui, .qb-see-ui-text{
  font-family: Nunito, sans-serif !important;
  font-size: 18px; line-height: 28px; font-weight: 500;
}
/* Cham xanh nhap nhay: an di cho dong bo voi cac CTA khac.
   Muon bat lai thi doi display:none -> display:block */
.qb-see-ui-dot{ display: none; width: 8px; height: 8px; border-radius: 50%;
  background: #1D4ED8; flex: none; }
.qb-see-ui-arrow{ width: 18px; height: 18px; flex: none; transition: translate .25s ease; }
.qb-see-ui:hover{ background: #EEF3F8; }
.qb-see-ui:hover .qb-see-ui-arrow{ translate: 3px 0; }

/* CTA luon hien (no la loi keu goi, an di la mat luot bam).
   Khi dang ro chuot vao thiet bi thi no nhu ra mot chut cho lien mach — khong shadow. */
.more-addition-feature-contant:has(.more-addition-mobile:hover) .qb-see-ui,
.more-addition-feature-contant:has(.qb-phone-layer:hover) .qb-see-ui{
  translate: 0 -3px; background: #EEF3F8;
}

@media screen and (max-width: 767px){
  .qb-see-ui-wrap{ margin-top: 24px; }
  .qb-see-ui{ padding: 12px 18px; }
  .qb-see-ui, .qb-see-ui-text{ font-size: 16px; line-height: 24px; }
  .qb-see-ui-arrow{ width: 16px; height: 16px; }
}


/* =====================================================
   KHOI "LOI ICH" — Khoi Tao Dich Vu Hau Mai 5 Sao
   TAT HET HIEU UNG (30/07/2026, theo yeu cau)
   -----------------------------------------------------
   Truoc day khoi nay co 2 hieu ung chong nhau:
   1. qranty.webflow.*.css: .single-benefit-card { position:sticky; top:250px }
      -> 3 the ghim lai va chong len nhau khi cuon (card-stack cua Webflow).
   2. File nay (muc "Reveal when the parent section scrolls into view"):
      .benefit .single-benefit-card { opacity:0; translateY(42px) } + stagger 0/.12/.24s.
   Yeu cau: cac the dung yen, khach cuon doc doc binh thuong va doc duoc ngay.
   Vi vay ep tinh (static) + hien san, KHONG sua qranty.webflow.*.css
   (editor co the ghi de file do — xem README muc 2).
   ===================================================== */
.benefit .single-benefit-card{
  position: static;
  top: auto;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto;
}

/* Hoa tiet tron trong the: bo hieu ung troi len xuong */
.benefit .benefit-card-circle{ animation: none; }


/* =====================================================
   KHOI "NHUNG CON SO BIET NOI" (section.statistic)
   1 HANG NGANG 3 O (30/07/2026, theo yeu cau)
   -----------------------------------------------------
   Da bo 3 o trang tri trong HTML (2 o "X X X" + 1 o dau "+")
   o ca index.html va qranty-about.html. Con lai dung 3 o so lieu:
   80% thoi gian tra cuu · 3.5x khach quay lai · 30% doanh thu khach cu.
   Container rong 1326px -> moi o ~414px, nen phai thu nho chu va padding
   thi 3 o moi vua 1 hang. Duoi 992px de no tu xuong dong nhu cu.
   ===================================================== */
@media screen and (min-width:992px){
  .statistic .statistic-flex-wrap{
    flex-wrap: nowrap;
    gap: 24px;
    align-items: stretch;
  }
  .statistic .single-statistic-card{
    flex: 1 1 0;
    min-width: 0;
    padding: 36px 34px;
  }
  .statistic .statistic-counter-wrapper{ grid-column-gap: 16px; grid-row-gap: 16px; }
  .statistic .number-digit.statistic{
    font-size: 44px;
    line-height: 52px;
    letter-spacing: -1.2px;
  }
  .statistic .statistic-counter-icon-wrap{
    width: 26px; height: 32px; margin-top: 4px; margin-right: 2px;
  }
  .statistic .statistic-counter-icon{ width: 100%; height: auto; }
  .statistic .statistic-counter-info-wrap{ max-width: none; }
  .statistic .statistic-counter-info{ font-size: 15px; line-height: 22px; }
}

/* O "giam 80%": xoay nguoc icon mui ten len co san thanh mui ten xuong,
   khoi phai them file SVG moi. */
.statistic-counter-icon-wrap.qb-arrow-down .statistic-counter-icon{
  transform: rotate(180deg);
}


/* =====================================================
   CHU TO DUNG GRADIENT (background-clip:text) — CHONG CAT DAU/DUOI CHU
   (30/07/2026)
   -----------------------------------------------------
   background-clip:text chi to mau BEN TRONG hop nen cua phan tu. Cac tieu de
   to gradient deu la block va co line-height chat hon chieu cao that cua chu,
   nen phan chu tho ra ngoai hop (duoi chu "g", dau mu/dau nang tieng Viet)
   KHONG duoc to -> mat luon net, nhin nhu chu bi cut.
   Da do that o 1440px truoc khi sua:
     .banner-title.grey-30       cat 8px tren, 7px duoi  ("Tang Truong" cut duoi g)
     .partner-name-ticker-item   cat 15px tren, 14px duoi (dau cua GIAI PHAP BAO HANH)
     .more-addition-feature-name cat 26px tren, 25px duoi
     .solution-title             cat 5px tren, 4px duoi
   Cach sua: noi hop nen bang padding, tru lai bang margin am -> hop nen to hon
   nhung bo cuc khong xe dich mot pixel nao.
   Them tieu de gradient moi thi nho them vao danh sach nay.
   ===================================================== */
.banner-title.grey-30,
.partner-name-ticker-item,
.more-addition-feature-name,
.solution-title,
.our-mission-title,
.plan-single-title{
  padding-top: .22em;
  padding-bottom: .26em;
  margin-top: -.22em;
  margin-bottom: -.26em;
}

/* Khoi hero bi overflow:hidden cat dau tren cua dong dau ("Bien" -> dau mu chu e).
   .banner-wrapper bat dau dung ngay dinh hop dong chu nen dau bi cat 8px.
   Noi vung hien thi len tren 16px, keo margin am lai cho khong xe bo cuc. */
.banner-wrapper{ padding-top:16px; margin-top:-16px; }


/* =====================================================
   DAI CHU CHAY 128px ("GIAI PHAP BAO HANH DIEN TU TINH GON")
   CHONG CAT DAU TIENG VIET (30/07/2026)
   -----------------------------------------------------
   .partner-name-ticker-wrapper bi dat height/min-height CO DINH bang dung
   line-height cua chu (150px o desktop, 112 / 82 / 72 o cac breakpoint duoi)
   va co overflow:hidden. Dau tieng Viet (A hoi, A huyen, E mu) tho len tren
   hop dong chu nen bi cat phang dinh dau; dau nang cua "E" bi cat o duoi.
   Do that o 1440px: cat 15px tren, 14px duoi.

   Vi box-sizing la border-box, them padding vao hop CO DINH chieu cao thi
   khong noi duoc vung hien thi (padding an vao trong). Nen phai bo height
   co dinh, de chieu cao tu tinh theo line-height, roi noi bang padding va
   tru lai bang margin am -> vung hien thi cao them 60px ma bo cuc y nguyen.
   Cach nay tu dung cho moi breakpoint vi line-height da khai san theo tung
   breakpoint o tren.
   ===================================================== */
.partner-name-ticker-wrapper{
  height: auto !important;
  min-height: 0 !important;
  padding: 30px 0 !important;
  margin: -30px 0 !important;
}


/* =====================================================
   KHOI DANH GIA — BANG NGANG TU CHAY + LUOT TAY (30/07/2026)
   -----------------------------------------------------
   Truoc day la 2 cot doc troi len/xuong (Webflow IX2): khach phai DOI moi
   doc duoc het. Nay doi thanh mot bang ngang vua tu chay vua luot tay duoc.
   Phan dung DOM nam trong js/qranty-animations.js muc 11 (loc trung 18 the
   xuong con 6 the that roi nhan doi de vong lap lien mach) — index.html
   giu nguyen, khong phai sua.
   ===================================================== */
.qb-rail-wrap{
  position: relative;
  z-index: 2;              /* .testimonial-overlay nam de len tren, chan click mui ten */
  display: flex;
  align-items: center;
  gap: 8px;
}
/* lop phu trang tri cua khoi danh gia — cho xuyen chuot qua de bam duoc mui ten */
.testimonial-overlay{ pointer-events: none; }
.qb-rail{
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* KHONG dung scroll-snap: bang tu chay nhich ~0.5px moi frame, snap se keo
     nguoc ve diem gan nhat -> bang dung im. Da thu va dinh dung loi nay. */
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grab;
  padding: 6px 0 10px;
  /* an thanh cuon nhung van cuon duoc */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* mo hai mep cho bang chay khong bi cut cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.qb-rail::-webkit-scrollbar{ display: none; }
.qb-rail.is-dragging{ cursor: grabbing; }
.qb-rail.is-dragging *{ user-select: none; }

.qb-rail-track{
  display: flex;
  gap: 24px;
  width: max-content;
}
.qb-rail .single-testimonial-card{
  width: 320px;
  flex: none;
  margin: 0 !important;
  text-align: left;
  background: #f9fcff;
  border: 1px solid #eaf1fb;
}
.qb-rail .testimonial-clint-image-wrap{ margin-left: 0; }

/* mui ten dieu huong */
.qb-rail-btn{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #dbe6f7;
  background: #fff;
  color: var(--brand-600, #1D4ED8);
  border-radius: 100px;
  cursor: pointer;
  padding: 0;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.qb-rail-btn:hover{ background: var(--brand-600, #1D4ED8); border-color: var(--brand-600, #1D4ED8); color: #fff; }
.qb-rail-btn:focus-visible{ outline: 2px solid var(--brand-600, #1D4ED8); outline-offset: 2px; }

@media screen and (max-width: 767px){
  .qb-rail-btn{ display: none; }        /* dien thoai vuot tay la du */
  .qb-rail .single-testimonial-card{ width: 280px; }
  .qb-rail{ -webkit-mask-image: none; mask-image: none; }
}

/* =====================================================================
   NGAT DONG TIEU DE — 31/07/2026
   Van de: tieu de tu xuong dong giua chung du man hinh con thua cho.
   Hai nguyen nhan do duoc (Playwright, 1440px, tren chinh cac trang nay):
     1. Webflow bo cung tung khoi tieu de bang .max-width-###px
        (391 / 422 / 438 / 545 / 557 / 636 / 714 / 715 px). Vi du
        "Bien bao hanh thanh co may Tang Truong" can 1288px nhung o
        chua chi rong 557px -> vo 3 dong.
     2. text-wrap:balance tren .banner-title va .qb-pain-heading khien
        trinh duyet tu chia deu so chu tren cac dong -> ngat som hon nua
        va khong doan truoc duoc khi sua chu.
   Cach xu ly: tu 992px tro len, khoi tieu de dung het chieu rong
   container; chi xuong dong khi that su het cho. Muon xuong dong o dau
   thi go Enter trong editor (thanh <br>) — <br> co hieu luc o moi
   kich thuoc man hinh. Duoi 992px tra lai bo cuc goc cua Webflow.
   ===================================================================== */
@media screen and (min-width:992px){
  .section-title-wrap[class*="max-width-"],
  .inner-banner-contant[class*="max-width-"]{ max-width:none; }
}
/* het tu can dong: de chu chay day dong roi moi xuong */
.banner-title,
.qb-pain-heading,
h1, h2,
.section-title,
.solution-title,
.benefits-title,
.blog-single-name{ text-wrap: wrap; }

/* =====================================================================
   WORK / "CACH QRANTY HOAT DONG" — SLIDE TU CHAY  (31/07/2026)
   Truoc: .work-relative-wrap cao 300vh, gham man hinh, 3 anh truot theo
   scroll trong khung dien thoai (anh khung-dien-thoai.png bao ngoai).
   Nay: section cao binh thuong, 3 buoc tu chay 4s/buoc (JS muc 9 trong
   js/qranty-animations.js), bam vao buoc de doi anh, thanh tien do chay
   doc theo cot so 1-2-3.
   Vung anh: CO DINH CHIEU CAO (--qb-work-h), chieu ngang tu do theo ti le
   anh -> bo anh doc dien thoai hay anh ngang dashboard vao deu vua.
   Doi anh: mo editor, bam vao anh trong khoi nay nhu moi anh khac.
   ===================================================================== */
.section.work{ --qb-work-h: 420px; }

/* bo phan gham man hinh */
.section.work .work-relative-wrap{ height: auto; }

/* bo khung dien thoai, vung anh tro thanh mot o binh thuong */
.section.work .work-phone-body{ display: none; }
.section.work .work-phone-holder{ overflow: visible; }
.section.work .work-phone-holder{
  /* JS dat --qb-work-shift = khoang lech giua tam o anh va tam doan thanh
     tien do (tam o tron 1 -> tam o tron 3). Dung transform nen khong lam
     section cao them. Mobile khong dung (anh tren, chu duoi). */
  transform: translateY(var(--qb-work-shift, 0px));
}
.section.work .work-phone-image-wrap{
  position: relative; inset: auto;
  width: 100%; height: var(--qb-work-h);
  border-radius: 20px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.section.work .work-image{
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
  height: 100%; width: auto; max-width: 100%;
  object-fit: contain; border-radius: 20px;
  opacity: 0;
  /* !important vi Webflow IX2 (actionList a-41 cu) van ghi transform inline
     theo scroll — thieu no thi anh bi day len khoi khung, nhin nhu mat anh */
  transform: translateY(8px) scale(.985) !important;
  transition: opacity .55s cubic-bezier(.4, 0, .2, 1), transform .55s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none; will-change: opacity, transform;
}
.section.work .work-image.is-on{ opacity: 1; transform: none !important; }

/* Cot anh rong hon cho vua anh ngang; chu van du ~430px.
   .work-contant-wrap goc bi bo cung 926px -> anh ngang 16:10 cao 420px
   (can 672px) khong vua. Noi len 1160px thi cot anh ~679px, vua khit. */
@media screen and (min-width: 992px){
  .section.work .work-contant-wrap{ max-width: 1160px; }
  .section.work .work-grid{
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-column-gap: 56px; grid-row-gap: 56px;
    align-items: center;          /* anh can giua theo cot chu, phan du JS chinh not */
  }
  /* het gham man hinh thi khong con can dinh dinh */
  .section.work .work-wrappper{ position: static; }
}

/* Thanh tien do doc.
   Chay tu TAM o tron so 1 den TAM o tron so 3 — khong thua rau tren duoi.
   --qb-work-top / --qb-work-len do bang JS (tam o tron that, khong uoc luong);
   --qb-work-p la tien do 0..1, JS cap nhat tung khung hinh nen chay muot,
   khong dung CSS transition (transition lam thanh giat khi doi buoc tay). */
.section.work .work-right-wrap{
  --qb-work-p: 0; --qb-work-top: 0px; --qb-work-len: 0px;
  border-left-color: transparent;          /* duong ke goc chay suot ca cot -> bo */
}
.section.work .work-right-wrap::before,
.section.work .work-right-wrap::after{
  content: ""; position: absolute; left: -1.5px;
  top: var(--qb-work-top); width: 3px; border-radius: 3px;
  pointer-events: none;
}
.section.work .work-right-wrap::before{     /* duong nen mo */
  height: var(--qb-work-len);
  background: var(--s100, #C9DCEC);
  z-index: 0;
}
.section.work .work-right-wrap::after{      /* phan da chay */
  height: calc(var(--qb-work-len) * var(--qb-work-p));
  background: linear-gradient(180deg, var(--brand, #2563EB), var(--brand-600, #1D4ED8));
  z-index: 1;
}
/* o tron + con so luon nam TREN thanh, khong bi thanh de len */
.section.work .single-process-wrap{ position: relative; z-index: 2; }
.section.work .process-number-wrap{ position: relative; z-index: 2; }

/* Buoc bam duoc: buoc chua chon mo di mot chut.
   Tat ca deu !important vi Webflow IX2 con ghi opacity / background-color
   inline cho khoi nay theo scroll (dung a-41 cu) — thieu no thi vong so 2
   luon xanh du dang o buoc khac. */
.section.work .single-process-wrap{ cursor: pointer; opacity: 1 !important; }

/* Chi phan CHU mo di, o tron va con so luon ro — cot so la thanh dieu huong,
   mo no di thi thanh tien do trong nhu bat dau lo lung giua khong. */
.section.work .single-process-wrap .process-contant{
  opacity: .55; transition: opacity .3s ease;
}
.section.work .single-process-wrap.is-active .process-contant,
.section.work .single-process-wrap:hover .process-contant{ opacity: 1; }

/* vong tron so: chi buoc dang xem moi to xanh */
.section.work .single-process-wrap .process-number-wrap{
  background-color: #fff !important;
  box-shadow: inset 0 0 0 1.5px var(--s100, #C9DCEC);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.section.work .single-process-wrap.is-active .process-number-wrap{
  background-color: var(--brand-600, #1D4ED8) !important;
  box-shadow: inset 0 0 0 1.5px var(--brand-600, #1D4ED8);
}
.section.work .single-process-wrap .process-number{ color: var(--grey-50, #6b7280) !important; }
.section.work .single-process-wrap.is-active .process-number{ color: #fff !important; }
.section.work .single-process-wrap:focus-visible{
  outline: 2px solid var(--brand-600, #1D4ED8); outline-offset: 6px; border-radius: 12px;
}

/* ---- Hang dot thu gon (chi dung o dien thoai) ----
   JS chen <div class="qb-work-dots"> ngay duoi anh. Dot dang xem keo dai
   thanh mot vien thuoc, phan xanh chay theo dung tien do cua buoc do. */
.section.work .qb-work-dots{
  --qb-work-dp: 0;
  display: none; justify-content: center; align-items: center;
  gap: 8px; margin: 20px 0 4px;
}
.section.work .qb-work-dot{
  -webkit-appearance: none; appearance: none; border: 0; padding: 0; margin: 0;
  width: 8px; height: 8px; border-radius: 999px; cursor: pointer;
  background-color: var(--s100, #C9DCEC);
  transition: width .3s ease, background-color .3s ease;
}
.section.work .qb-work-dot.is-on{
  width: 36px;
  background-image: linear-gradient(90deg,
    var(--brand-600, #1D4ED8) 0 calc(var(--qb-work-dp) * 100%),
    rgba(0,0,0,0) calc(var(--qb-work-dp) * 100%));
  background-repeat: no-repeat;
}
.section.work .qb-work-dot:focus-visible{
  outline: 2px solid var(--brand-600, #1D4ED8); outline-offset: 3px;
}

/* May tinh bang 768–991px: van 2 cot, chi thu nho cot so lai */
@media screen and (max-width: 991px){
  .section.work{ --qb-work-h: 360px; }
  .section.work .work-right-wrap::before,
  .section.work .work-right-wrap::after{ width: 2px; left: -1px; border-radius: 2px; }
  .section.work .process-number-wrap{ width: 32px; max-width: 32px; min-height: 32px; }
  .section.work .process-number{ font-size: 15px; }
  .section.work .work-process-wrap{ margin-left: -16px; }
  .section.work .process-flex-wrap{ grid-column-gap: 20px; }
}

/* Dien thoai: luoi xep 1 cot. Cot doc khong con y nghia (o tron bi day ra
   giua, thanh nam tit le trai) -> bo han, thay bang hang dot ngay duoi anh,
   va chi hien chu cua buoc dang xem. */
@media screen and (max-width: 767px){
  .section.work .qb-work-dots{ display: flex; margin: 18px 0 0; }
  .section.work .work-grid{ grid-row-gap: 14px; }
  .section.work .work-right-wrap{ border-left: 0; padding-top: 0; padding-bottom: 0; }
  .section.work .work-right-wrap::before,
  .section.work .work-right-wrap::after{ display: none; }
  .section.work .work-process-wrap{ margin-left: 0; grid-row-gap: 0; }
  .section.work .single-process-wrap{ display: none; }
  .section.work .single-process-wrap.is-active{ display: block; }
  .section.work .process-number-wrap{ display: none; }
  .section.work .process-flex-wrap{ grid-column-gap: 0; }
  .section.work .process-contant{ opacity: 1 !important; max-width: none; }
}
@media screen and (max-width: 479px){
  .section.work{ --qb-work-h: 300px; }
}
@media (prefers-reduced-motion: reduce){
  .section.work .work-image{ transition: none; }
  .section.work .work-right-wrap::after{ transition: none; }
}


/* ===== LUOI BLOG DONG DEU (03/08/2026) =====
   Anh bia bai viet vuong / chu nhat lan lon lam luoi lech hang.
   Ep khung anh ve cung ti le 16:10, anh cover trong khung. */
.blog-image-link{ aspect-ratio: 16 / 10; }
.blog-image-link .blog-image{ width:100%; height:100%; object-fit:cover; }
.new-blog-image-link{ aspect-ratio: 16 / 10; display:block; overflow:hidden; }
.new-blog-image-link .new-blog-image{ width:100%; height:100%; object-fit:cover; }

/* ===== MOBILE NAV: mở menu khi bấm hamburger (thay webflow.js đã gỡ) ===== */
.hamburger-menu-bar { transition: transform .25s ease, opacity .2s ease; }
@media screen and (max-width: 991px) {
  .navbar.w-nav.qb-nav-open .nav-menu-wrapper.w-nav-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
  }
  .hamburger-menu-wrapper.w--open .hamburger-menu-bar.top { transform: translateY(6px) rotate(45deg); }
  .hamburger-menu-wrapper.w--open .hamburger-menu-bar.bottom { transform: translateY(-6px) rotate(-45deg); }
}

/* ===== HERO: canh giữa badge tải app trên mobile (hero căn giữa từ 991px trở xuống) ===== */
@media screen and (max-width: 991px) {
  .qb-hero-appstores { text-align: center; }
  .qb-hero-appstores-badges { justify-content: center; }
}

/* ===== HEADER CTA mobile: viền gọn cho nút "Bắt đầu với 0 đồng" ===== */
/* .inner-button.desktop chỉ hiện ở ≤991px với nền trắng + chữ xanh -> chìm vào header trắng. */
@media screen and (max-width: 991px) {
  .navbar .inner-button.desktop {
    background-color: transparent;
    color: var(--violet);
    border: 1.5px solid var(--violet);
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
    margin-left: 12px;
  }
  .navbar .inner-button.desktop:hover {
    background-color: var(--violet);
    color: var(--white);
  }
}

/* ===== LINK PHAP LY o dong copyright cuoi footer (21/08/2026) ===== */
.qb-legal-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .82;
}
.qb-legal-links a:hover { opacity: 1; }
@media screen and (max-width: 479px) {
  .qb-legal-links { display: block; margin-left: 0; margin-top: 4px; }
}


/* ================= DANH GIA KHACH HANG <-> GOOGLE SHEET (them 07/09/2026) =================
   Di kem muc 12 trong js/qranty-animations.js. Xoa nguyen khoi nay + muc 12 la tra lai nhu cu.
   Mau/font/nut theo README muc 5.1 - 5.3: chi dung bien co san, nut kieu "Phu (vien)" va "Chinh (dac)". */

/* muc menu 'Danh Gia' (JS chen) + neo cuon khong bi navbar che */
section.testimonial#danh-gia{ scroll-margin-top:96px; }

/* chua co review that -> an o so "x.x/5 · Dua tren N danh gia" (so cu 4.8/500+ khong co nguon) */
section.testimonial.qb-no-reviews .testimonial-review-contant{ display:none; }

/* sao tat (review 3-4 sao, hoac diem trung binh < 5) */
.testimonial-review-icon.qb-star-off,
.testimonial-review-star.qb-star-off{ opacity:.22; filter:grayscale(1); }

/* the review that: avatar chu cai dau (SVG data URI) */
.qb-review-real .testimonial-clint-image{ width:64px; height:64px; object-fit:cover; display:block; }

/* --- nut mo form + form --- */
.qb-rv{ margin-top:28px; }
.qb-rv-open{
  display:inline-block; padding:12px 28px; border-radius:100px;
  background:transparent; border:1px solid #1D4ED8; color:#0040C1;
  font-family:'Nunito',sans-serif; font-size:18px; line-height:28px; font-weight:500;
  cursor:pointer; transition:background .2s;
}
.qb-rv-open:hover{ background:var(--s50,#EEF3F8); }

.qb-rv-form{ margin-top:18px; padding:22px; border:1px solid var(--s100,#dbe6f0); border-radius:16px; background:#fff; max-width:560px; }
.qb-rv-form[hidden]{ display:none; }
.qb-rv-title{ font-family:'Nunito',sans-serif; font-size:16px; line-height:24px; color:var(--grey-90,#111827); font-weight:500; margin-bottom:12px; }
.qb-rv-stars{ display:flex; gap:4px; margin-bottom:12px; }
.qb-rv-star{
  background:none; border:0; padding:0 2px; cursor:pointer;
  font-size:30px; line-height:1; color:#cbd5e1; transition:color .12s, transform .12s;
}
.qb-rv-star:hover, .qb-rv-star.is-on{ color:#F59E0B; }
.qb-rv-star:hover{ transform:scale(1.12); }
.qb-rv-row{ display:flex; gap:10px; margin-bottom:10px; }
.qb-rv-row input, .qb-rv-form textarea{
  width:100%; min-width:0; padding:11px 14px; border:1px solid var(--s100,#dbe6f0); border-radius:10px;
  font-family:'Nunito',sans-serif; font-size:15px; line-height:24px; color:var(--grey-90,#111827); background:#fff;
}
.qb-rv-form textarea{ resize:vertical; margin-bottom:12px; display:block; }
.qb-rv-row input:focus, .qb-rv-form textarea:focus{ outline:none; border-color:#1D4ED8; }
.qb-rv-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }
.qb-rv-actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.qb-rv-submit{
  padding:12px 28px; border-radius:100px; border:0; background:#1D4ED8; color:#fff;
  font-family:'Nunito',sans-serif; font-size:16px; line-height:24px; font-weight:500; cursor:pointer; transition:background .2s;
}
.qb-rv-submit:hover{ background:#0040C1; }
.qb-rv-submit:disabled{ opacity:.6; cursor:default; }
.qb-rv-note{ font-family:'Nunito',sans-serif; font-size:14px; line-height:20px; color:var(--grey-50,#6b7280); }
.qb-rv-msg{ margin-top:10px; font-family:'Nunito',sans-serif; font-size:14px; line-height:20px; color:#b91c1c; min-height:0; }
.qb-rv-msg.is-ok{ color:#15803d; }

@media (max-width:767px){
  .qb-rv-row{ flex-direction:column; }
  .qb-rv-form{ padding:16px; }
}


/* ================= CAM NANG (qranty-blog.html): LUOI BAI VIET + PHAN TRANG  (them 08/09/2026) =================
   Truoc: blog-server ghi inline style "grid-template-columns:1fr 1fr 1fr" -> dien thoai bi ep 3 cot, chu cao 8px.
   Gio: so cot theo be rong man hinh; the bai la mot "module" co vien, anh 16:9, meta 1 dong, tom tat cat 3 dong.
   Phan trang do js/qranty-animations.js muc 14 (9 bai/trang desktop, 6 bai/trang <=767px). */
.qb-blog-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; grid-column-gap:32px; grid-row-gap:40px; align-items:stretch; }
@media (max-width:991px){ .qb-blog-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; grid-column-gap:24px; grid-row-gap:32px; } }
@media (max-width:767px){ .qb-blog-grid{ grid-template-columns:minmax(0,1fr) !important; grid-row-gap:20px; } }

/* the bai = module */
.qb-blog-grid .single-blog-wrap{
  display:flex; flex-direction:column; min-width:0;
  background:#fff; border:1px solid var(--s100,#DCE6EF); border-radius:20px; overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.qb-blog-grid .single-blog-wrap:hover{ box-shadow:0 10px 30px rgba(17,24,39,.08); transform:translateY(-2px); }
.qb-blog-grid .blog-image-link{ margin:0; border-radius:0; aspect-ratio:16/9; height:auto !important; }
.qb-blog-grid .blog-image{ width:100%; height:100%; object-fit:cover; display:block; }
.qb-blog-grid .blog-contant{ padding:20px 22px 24px; display:flex; flex-direction:column; flex:1; }
.qb-blog-grid .blog-categorie-date-wrap{ flex-wrap:nowrap; white-space:nowrap; margin-bottom:12px; }
.qb-blog-grid .blog-categorie{ font-size:13px; line-height:20px; font-weight:600; color:#1D4ED8; background:var(--s50,#EEF3F8); padding:2px 10px; border-radius:100px; }
.qb-blog-grid .blog-dot{ display:none; }
.qb-blog-grid .blog-date{ font-size:13px; line-height:20px; }
.qb-blog-grid .blog-title-link{ margin-bottom:10px; }
.qb-blog-grid .blog-title{ font-size:20px; line-height:28px; }
.qb-blog-grid .blog-details-wrap{ max-width:none; }
.qb-blog-grid .blog-details{
  font-size:15px; line-height:24px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.qb-blog-grid .qb-readmore{ margin-top:auto; padding-top:14px; font-size:15px; line-height:24px; font-weight:500; color:#1D4ED8; text-decoration:none; }
.qb-blog-grid .qb-readmore:hover{ text-decoration:underline; }
@media (max-width:767px){
  .qb-blog-grid .blog-contant{ padding:16px 18px 20px; }
  .qb-blog-grid .blog-title{ font-size:19px; line-height:26px; }
}

/* phan trang */
.qb-pager{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; margin-top:40px; }
.qb-pager button{
  min-width:44px; height:44px; padding:0 14px; border:0; border-radius:100px; cursor:pointer;
  background:var(--s50,#EEF3F8); color:#1D4ED8; font-family:'Nunito',sans-serif; font-size:16px; line-height:24px; font-weight:500;
  transition:background .2s;
}
.qb-pager button:hover{ background:var(--s100,#DCE6EF); }
.qb-pager button.is-on{ background:#1D4ED8; color:#fff; cursor:default; }
.qb-pager button:disabled{ opacity:.4; cursor:default; }
.qb-pager .qb-pager-info{ width:100%; text-align:center; font-family:'Nunito',sans-serif; font-size:14px; line-height:20px; color:var(--grey-50,#6b7280); margin-top:4px; }
.qb-blog-grid .single-blog-wrap.qb-hide{ display:none; }


/* ===== DANH GIA: chi hien review that (07/09/2026) ===== */
section.testimonial.qb-no-reviews .testimonial-card-flex-wrap,
section.testimonial.qb-no-reviews .testimonial-overlay { display:none; }
.qb-rv-empty{ padding:40px 28px; border:1px dashed var(--grey-20,#d9deea); border-radius:16px;
  background:var(--s50,#f5f8ff); text-align:center; max-width:560px; margin:8px auto 0; }
.qb-rv-empty-title{ font-weight:700; font-size:18px; margin:0 0 8px; color:var(--p800,#0b2a86); }
.qb-rv-empty-sub{ margin:0; color:var(--grey-50,#6b7280); font-size:15px; line-height:1.6; }

/* ===== TRANG DANH GIA RIENG: luoi doc, doc thang, khong bang chay (07/09/2026) ===== */
section.testimonial.qb-rv-page .testimonial-flex-wrap{ display:block; }
section.testimonial.qb-rv-page .testimonial-left-wrap{
  width:100%; max-width:760px; margin:0 auto 40px; text-align:center; }
/* Goc: .testimonial-right-wrap{max-width:746px} vi no la COT PHAI cua bo cuc 2 cot.
   O trang rieng no la ca khoi -> go tran do, neu khong luoi bi bo hep va lech trai. */
section.testimonial.qb-rv-page .testimonial-right-wrap{ width:100%; max-width:none; }
/* Goc: .testimonial-contant{margin-bottom:180px} de chua cac sticker bay -> qua thua o day */
section.testimonial.qb-rv-page .testimonial-contant{ margin-bottom:32px; }
section.testimonial.qb-rv-page .testimonial-review-contant,
section.testimonial.qb-rv-page .qb-rv{ justify-content:center; }
section.testimonial.qb-rv-page .section-title-wrap.left{ text-align:center; }
section.testimonial.qb-rv-page .testimonial-overlay{ display:none; }
/* Goc co 3 .testimonial-card-flex x 2 .testimonial-card-ticker -> neu moi ticker tu thanh
   mot luoi thi ra 6 cot hep chong nhau. Cho cac lop trung gian "tan bien" de MOI the
   deu la con truc tiep cua DUY NHAT mot luoi dat o .testimonial-right-wrap. */
section.testimonial.qb-rv-page .testimonial-card-flex-wrap,
section.testimonial.qb-rv-page .testimonial-card-flex,
section.testimonial.qb-rv-page .testimonial-card-ticker{ display:contents; }
section.testimonial.qb-rv-page .testimonial-right-wrap{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:start; }
section.testimonial.qb-rv-page .single-testimonial-card{
  height:auto; min-height:0; margin:0; width:auto; }
section.testimonial.qb-rv-page .testimonial-details{
  display:block; -webkit-line-clamp:unset; overflow:visible; }
@media (max-width:991px){ section.testimonial.qb-rv-page .testimonial-right-wrap{ grid-template-columns:1fr 1fr; } }
@media (max-width:767px){ section.testimonial.qb-rv-page .testimonial-right-wrap{ grid-template-columns:1fr; } }

/* Trang Danh Gia: bo anh dai dien, chi de ten + chuc danh (07/09/2026) */
section.testimonial.qb-rv-page .testimonial-clint-image-wrap{ display:none; }
section.testimonial.qb-rv-page .testimonial-clint-name{ margin-top:0; }
section.testimonial.qb-rv-page .single-testimonial-card{ padding-top:28px; }

/* ===== CAM NANG: BOX LOC CHU DE (08/09/2026) =====
   Dung <select> thay hang the pill: them bao nhieu chu de cung khong tran dong,
   tren dien thoai bam ra picker cua he dieu hanh. */
.qb-cats{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 32px; flex-wrap:wrap; }
.qb-cat-label{ font-family:'Nunito',sans-serif; font-size:15px; font-weight:600; color:var(--grey-50,#6b7280); }
.qb-cat-box{ position:relative; display:inline-block; }
.qb-cat-box::after{                     /* mui ten tu ve, khong dung anh */
  content:''; position:absolute; right:18px; top:50%; width:8px; height:8px; margin-top:-6px;
  border-right:2px solid #0040C1; border-bottom:2px solid #0040C1;
  transform:rotate(45deg); pointer-events:none; }
.qb-cat-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-family:'Nunito',sans-serif; font-size:15px; font-weight:500; line-height:1; color:#0040C1;
  padding:12px 44px 12px 20px; min-width:220px; cursor:pointer;
  background:#fff; border:1px solid #1D4ED8; border-radius:100px;
  transition:background .18s; }
.qb-cat-select:hover{ background:rgba(29,78,216,.06); }
.qb-cat-select:focus-visible{ outline:2px solid #1D4ED8; outline-offset:2px; }
@media (max-width:767px){
  .qb-cats{ gap:8px; margin-bottom:24px; }
  .qb-cat-select{ min-width:0; width:100%; font-size:14px; padding:11px 40px 11px 16px; }
  .qb-cat-box{ width:100%; max-width:320px; }
}

/* ===== TRANG DANH GIA: hieu ung truot khi doi trang (08/09/2026) ===== */
@keyframes qbSlideR{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
@keyframes qbSlideL{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }
section.testimonial.qb-rv-page .single-testimonial-card.qb-slide-r{ animation:qbSlideR .32s ease both; }
section.testimonial.qb-rv-page .single-testimonial-card.qb-slide-l{ animation:qbSlideL .32s ease both; }
section.testimonial.qb-rv-page .single-testimonial-card.qb-hide{ display:none; }
.qb-rv-pager{ margin-top:32px; }
@media (prefers-reduced-motion:reduce){
  section.testimonial.qb-rv-page .single-testimonial-card.qb-slide-r,
  section.testimonial.qb-rv-page .single-testimonial-card.qb-slide-l{ animation:none; }
}

/* ===== VE CHUNG TOI: luoi doi ngu (08/09/2026) =====
   3 nguoi/hang, anh to. Bo inline grid-template-columns co dinh cua Webflow. */
/* ---- Khoi doi ngu (qranty-about.html) --------------------------------
   Bo cuc: ten + chuc danh o tren, icon mang xa hoi goc phai, anh lon ben duoi.
   Webflow goc gioi han .team-member-image-link o max-width:152px nen anh rat
   nho — o day mo khoa de anh chiem tron be ngang the.
   Mau nen the giu nguyen he mau README muc 5.1, khong them ma mau moi. */
.qb-team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
@media (max-width:900px){ .qb-team-grid{ grid-template-columns:repeat(2,1fr); gap:24px; } }
@media (max-width:560px){ .qb-team-grid{ grid-template-columns:1fr; } }

.qb-team-grid .team-member-card{
  position:relative; display:flex; flex-direction:column;
  text-align:left; padding:22px; border-radius:20px;
  background:var(--s50,#EEF3F8); }

.qb-team-grid .team-member-title-link{ order:1; margin-bottom:2px; padding-right:88px; }
.qb-team-grid .team-member-title{ font-size:30px; line-height:38px; font-weight:600; }
.qb-team-grid .team-member-designation{ order:2; margin-bottom:0; padding-right:88px;
  font-size:16px; line-height:24px; }

/* Anh to: bo tran max-width cua Webflow, cho anh phu kin be ngang the */
.qb-team-grid .team-member-image-link{
  order:3; max-width:none; width:100%; margin:18px 0 0;
  aspect-ratio:1; border-radius:16px; overflow:hidden; background:#fff; }
.qb-team-grid .team-member-image-link img{
  width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:900px){
  .qb-team-grid .team-member-title{ font-size:26px; line-height:34px; }
}
@media (max-width:560px){
  .qb-team-grid .team-member-card{ padding:18px; }
  .qb-team-grid .team-member-title{ font-size:24px; line-height:32px; }
}

/* Icon mang xa hoi — dat goc tren ben phai the, dung lai .qb-social-svg
   (README muc 4.3). Moi the la mot <a href> binh thuong nen sua duoc trong
   man hinh "Link tren website" cua blog-admin, khong can module rieng. */
.qb-team-social{ display:flex; gap:10px; }
.qb-team-grid .qb-team-social{ position:absolute; top:22px; right:22px; margin:0; }
@media (max-width:560px){ .qb-team-grid .qb-team-social{ top:18px; right:18px; } }
.qb-team-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--s300,#9BBED9); color:var(--brand-600,#1D4ED8);
  background:#fff; transition:background .18s, color .18s, border-color .18s; }
.qb-team-social-link:hover{ background:var(--brand-600,#1D4ED8); color:#fff; border-color:var(--brand-600,#1D4ED8); }
.qb-team-social-link .qb-social-svg{ width:17px; height:17px; }