/* =========================================
   FOOTER
   ========================================= */
.site-footer .footer-main-row {
  border-bottom: 1px solid #ffffff;
  column-gap: 1.5rem !important;
}

@media (min-width: 769px) {

    .site-footer .footer-main-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        column-gap: 0 !important;
    }

    .site-footer .footer-brand-column {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 37rem !important;
    }

    .site-footer .footer-explore-column,
    .site-footer .footer-services-column {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .site-footer .footer-cta-column {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    .site-footer .footer-main-row::after {
        display: none !important;
        content: none !important;
    }
}

/* LOGO */
.site-footer .footer-logo {
  margin: 0 !important;
}

.site-footer .footer-logo img {
  width: auto !important;
  height: auto !important;
  max-height: 9rem !important;

  display: block !important;
}

/* DESCRIPTION */
.site-footer .footer-description {
  width: 100% !important;

  margin: 0 !important;

  font-family: "Zalando Sans", sans-serif !important;
  font-weight: 400 !important;
}

.site-footer .footer-description p {
  margin: 0 !important;
}

/* SOCIAL */
.site-footer .footer-social {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
  margin: 0 !important;
}

.site-footer .footer-social a {
  width: 3.5rem !important;
  height: 3.5rem !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 1.5px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 50% !important;

  background: transparent !important;
  color: #fff !important;

  box-shadow: none !important;
}

.site-footer .footer-social a i {
  font-size: 1.75rem !important;
  color: inherit !important;
}

/* =========================================
   FOOTER SOCIAL - DEFAULT
   ========================================= */

.site-footer .footer-social a.button.circle.is-outline {
  background-color: transparent !important;
  background-image: none !important;

  border: 1px solid #ffffff !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* ICON */
.site-footer .footer-social a.button.circle.is-outline i {
  color: #ffffff !important;
  background: transparent !important;
}

/* =========================================
   HOVER
   ========================================= */

.site-footer .footer-social a.button.circle.is-outline:hover {
  background-color: #ff4200 !important;
  background-image: none !important;

  border-color: #ff4200 !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* TITLE */
.site-footer .footer-explore-title,
.site-footer .footer-services-title {
  margin: 1.5rem 0 0 !important;
}

.site-footer .footer-explore-title p,
.site-footer .footer-services-title p {
  margin: 0 !important;

  font-family: "Zalando Sans", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}

.site-footer .footer-explore-links,
.site-footer .footer-services-links {
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer .footer-explore-links p,
.site-footer .footer-services-links p {
  margin: 0 !important;

  font-family: "Zalando Sans", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

/* Link lấy màu từ Text color của UX Builder */
.site-footer .footer-explore-links a,
.site-footer .footer-services-links a {
  color: inherit !important;
  text-decoration: none !important;
}

/* Chỉ hover mới đổi cam */
.site-footer .footer-explore-links a:hover,
.site-footer .footer-services-links a:hover {
  color: #ff4200 !important;
}

/* =========================================
   CTA BOX
   ========================================= */

.site-footer .footer-cta {
  width: 100% !important;

  padding: 3rem !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;
}

/* =========================================
   TITLE
   Chic Avenue / 400 / 24px / 28px
   ========================================= */

.site-footer .footer-cta-title {
  width: 100% !important;
  margin: 0 !important;
}

.site-footer .footer-cta-title p {
  margin: 0 !important;

  font-family: "Chic Avenue", serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

/* =========================================
   DESCRIPTION
   Montserrat / 500 / 16px / 20.4px
   ========================================= */

.site-footer .footer-cta-description {
  width: 100% !important;
  margin: 0 !important;
}

.site-footer .footer-cta-description p {
  margin: 0 !important;

  font-family: "Zalando Sans", sans-serif !important;
  font-weight: 500 !important;
  font-style: normal !important;

  color: rgba(255, 255, 255, 0.6) !important;
}

/* =========================================
   BUTTON
   ========================================= */

/* =========================================
   CTA BUTTON
   ========================================= */

.site-footer .footer-cta-button {
  margin: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 1rem !important;

  background: #ff4200 !important;

  border: 0 !important;
  border-radius: 0.5rem !important;

  box-shadow: none !important;

  font-family: "Zalando Sans", sans-serif !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  font-style: normal !important;

  line-height: 1 !important;
  letter-spacing: 0 !important;

  color: #ffffff !important;

  text-transform: uppercase !important;
}

/* =========================================
   TEXT TRONG BUTTON
   ========================================= */

.site-footer .footer-cta-button span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  line-height: 1 !important;

  color: #ffffff !important;
}

/* =========================================
   MŨI TÊN
   ========================================= */

.site-footer .footer-cta-button::after {
  content: "→" !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 auto !important;

  margin: 0 !important;
  padding: 0 !important;

  font-family: Arial, sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 300 !important;

  line-height: 1 !important;

  color: #ffffff !important;

  /* căn quang học với chữ */
  transform: translateY(-0.1rem);

  transition: transform 0.25s ease !important;
}

/* =========================================
   BUTTON HOVER
   ========================================= */

.site-footer .footer-cta-button:hover {
  background: #e63b00 !important;

  color: #ffffff !important;

  box-shadow: none !important;
}

/* Mũi tên chạy sang phải khi hover */

.site-footer .footer-cta-button:hover::after {
  transform: translate(0.5rem, -0.1rem);
}

/* =========================================================
   FOOTER BOTTOM
   ========================================================= */

.site-footer .footer-bottom-row {
  width: 100% !important;
  align-items: center !important;
}

.site-footer .footer-copyright p {
  font-family: "Zalando Sans", sans-serif !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

.site-footer .footer-legal-links {
  display: flex !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap: 2rem !important;

  width: 100% !important;
}

.site-footer .footer-legal-links a {
  font-family: "Zalando Sans", sans-serif !important;
  font-weight: 400 !important;

  text-decoration: none !important;

  white-space: nowrap !important;

  transition: color 0.2s ease !important;
  color: inherit !important;
}

.site-footer .footer-legal-links a:hover {
  color: #ff4200 !important;
}

/* Tắt Absolute Footer mặc định của Flatsome */
.absolute-footer {
  display: none !important;
}

/* =========================================================
   FOOTER MAIN <= 768PX
   ========================================================= */

@media (max-width: 768px) {

  .site-footer .footer-main-row {
    display: flex !important;
    flex-wrap: wrap !important;

    column-gap: 1.5rem !important;

    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .site-footer .footer-main-row > .footer-brand-column,
  .site-footer .footer-main-row > .footer-explore-column,
  .site-footer .footer-main-row > .footer-services-column,
  .site-footer .footer-main-row > .footer-cta-column {
    flex: 0 0 calc(50% - 0.75rem) !important;
    flex-basis: calc(50% - 0.75rem) !important;

    width: calc(50% - 0.75rem) !important;
    max-width: calc(50% - 0.75rem) !important;
  }

  /* khoảng cách bên trong 2 cột */
  .site-footer .footer-brand-column,
  .site-footer .footer-services-column {
    padding-right: 2rem !important;
  }

  .site-footer .footer-explore-column,
  .site-footer .footer-cta-column {
    padding-left: 2rem !important;
  }

  .site-footer .footer-cta-button {
    white-space: nowrap !important;
  }

  /* =========================
     FOOTER BOTTOM
     ========================= */

  .site-footer .footer-bottom-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
  }

  .site-footer .footer-bottom-row > .col {
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  .site-footer .footer-bottom-row > .col > .col-inner {
    padding-top: 1.5rem !important;
  }

  /* =========================
     LEGAL - HÀNG 1
     ========================= */

  .site-footer .footer-bottom-row > .col:last-child {
    order: 1 !important;
  }

  .site-footer .footer-legal-links {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    margin: 0!important;
    gap: 4rem !important;
  }

  .site-footer .footer-legal-links a {
    white-space: nowrap !important;
  }

  /* =========================
     COPYRIGHT - HÀNG 2
     ========================= */

  .site-footer .footer-bottom-row > .col:first-child {
    order: 2 !important;
  }

  .site-footer .footer-copyright {
    width: 100% !important;
    text-align: center !important;
  }

  .site-footer .footer-copyright p {
    text-align: center !important;
    white-space: nowrap !important;
  }
}


@media (max-width: 480px) {

  .site-footer .footer-main-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    column-gap: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .site-footer .footer-main-row > .footer-brand-column,
  .site-footer .footer-main-row > .footer-explore-column,
  .site-footer .footer-main-row > .footer-services-column,
  .site-footer .footer-main-row > .footer-cta-column {
    flex: 0 0 100% !important;
    flex-basis: 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 2rem !important;
  }

  .site-footer .footer-main-row > .footer-brand-column {
    padding-bottom: 3rem !important;
  }

  .site-footer .footer-main-row > .footer-services-column {
    padding-bottom: 2.5rem !important;
  }

  .site-footer .footer-explore-title,
  .site-footer .footer-services-title {
    margin: 0 !important;
  }

  .site-footer .footer-explore-column .gap-element,
  .site-footer .footer-services-column .gap-element {
    padding-top: 1rem !important;
  }

  /* =========================
     FOOTER BOTTOM
     ========================= */

  .site-footer .footer-bottom-row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
  }

  .site-footer .footer-bottom-row > .col {
    flex: 0 0 100% !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  /* =========================
     LEGAL LINKS
     ========================= */

  .site-footer .footer-bottom-row > .col:last-child {
    order: 1 !important;
  }

  .site-footer .footer-legal-links {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;

    gap: 2rem !important;
    margin: 0 0 2rem !important;
  }

  .site-footer .footer-legal-links a {
    display: block !important;

    white-space: nowrap !important;

    text-align: center !important;
  }

  .site-footer .footer-legal-links br {
    display: none !important;
  }

  /* =========================
     COPYRIGHT
     ========================= */

  .site-footer .footer-bottom-row > .col:first-child {
    order: 2 !important;
  }

  .site-footer .footer-copyright {
    width: 100% !important;
    text-align: center !important;
  }

  .site-footer .footer-copyright p {
    margin: 0 !important;

    text-align: center !important;

    white-space: normal !important;
  }
}

@media (max-width: 320px) {
  .site-footer .footer-cta-button {
    font-size: 1.3rem !important;
    line-height: 1 !important;
  }
}