/* =============================================
   Contact Page — Page-level Styles
   ============================================= */

@import "../section-breadcrumb/assets/styles.css";
@import "../section-contact-info/assets/styles.css";
@import "../section-contact-form/assets/styles.css";

main {
  padding-top: 6.625rem;
  background: #f7f4ec;
  position: relative;
  background-image: url(/wp-content/uploads/2026/04/Chi-tiet-san-pham.webp);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---- Page Layout ---- */
.contact-page {
    padding-bottom: 6.25rem;
}

.contact-page__container {
    max-width: 91.5rem;
    margin: 0 auto;
    display: flex;
}

.contact-page__col--left {
    flex: 1;
    max-width: 42rem;
    margin-right: 2.5rem;
}

.contact-page__col--right {
    flex: 1;
    max-width: 47rem;
}

/* ---- Mobile ---- */
@media screen and (max-width: 639.98px) {
    main {
        padding-top: 3.75rem;
        background-image: url(/wp-content/uploads/2026/04/MB-Chi-tiet-bai-viet.webp);
    }
    
    .contact-page {
        padding-bottom: 4.25rem;
    }

    .contact-page__container {
        flex-direction: column;
        max-width: 100%;
    }

    .contact-page__col--left {
        flex: none;
        max-width: 100%;
        padding-right: 0;
        margin-bottom: 2rem;
    }

    .contact-page__col--right {
        flex: none;
        max-width: 100%;
        padding: 0 0.75rem 0 0.75rem;
    }
}