/* Lớp nền bao ngoài: phủ lên các nền con của trang Liên hệ. */
.contact-page {
    padding: 16px 0 34px;
    border-bottom: 0 !important;
    background:
        linear-gradient(180deg, #063423 0%, #063423 78%, #082f20 100%);
}

.contact-page-surface {
    position: relative;
    width: min(1240px, calc(100% - 32px));
    min-height: 760px;
    margin: 0 auto;
    padding-bottom: 0;
    overflow: hidden;
    border: 1px solid rgba(234, 239, 157, .26);
    border-radius: 18px;
    background:
        radial-gradient(circle at 78% 20%, rgba(193, 217, 92, .19), transparent 20%),
        linear-gradient(100deg, #336a29, #498428 54%, #336a29);
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 24px 50px rgba(0, 29, 17, .30);
}

.contact-page-surface::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .13;
    background:
        linear-gradient(90deg, rgba(234, 239, 157, .35) 1px, transparent 1px),
        linear-gradient(rgba(234, 239, 157, .28) 1px, transparent 1px);
    background-size: 54px 54px;
    content: "";
    pointer-events: none;
}

.contact-page-surface > section {
    position: relative;
    z-index: 1;
}

.contact-page-surface .contact-main-section {
    border-bottom: 0;
    background: transparent;
    margin-top: 18px;
    padding: 32px 0 38px;
}

/* Cân nhịp khoảng cách giữa phần giới thiệu, thông tin và biểu mẫu. */
.contact-page-surface .contact-hero {
    padding: 38px 0 28px;
    background: transparent;
}

.contact-page-surface .contact-main-grid {
    gap: 28px;
}

.contact-page-surface .contact-form-card {
    padding: 22px;
}

/* Khi mở liên kết #contact-form, chừa chỗ cho thanh điều hướng sticky để
   phần "KẾT NỐI TRỰC TIẾP" cùng hàng không bị che khuất. */
.contact-page-surface #contact-form {
    scroll-margin-top: 104px;
}

.contact-page-surface .contact-form-card::before {
    display: none;
}

.contact-page-surface .contact-info-list {
    gap: 14px;
    margin-top: 22px;
}

.contact-page-surface .contact-form-grid {
    gap: 14px;
    margin-top: 1.45rem;
}

/* Tiêu đề form giữ một dòng trên màn hình rộng. */
.contact-page-surface .contact-form-heading h2 {
    font-size: 25px !important;
    line-height: 1.16;
    white-space: nowrap;
}

.contact-page-surface .contact-hero h1,
.contact-page-surface .contact-section-heading h2 {
    font-size: 25px !important;
    line-height: 1.16;
}

/* Hai cam kết nằm trong cột trái, ngay dưới các nút liên hệ SINTA. */
.contact-page-surface .contact-trust-line {
    justify-content: flex-start;
    margin-top: 16px;
    padding: 10px 13px;
    border: 1px solid rgba(234, 239, 157, .18);
    border-radius: 999px;
    background: rgba(7, 54, 33, .34);
    text-align: left;
}

.contact-page-surface::after {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(90deg, #336a29, #80b155 26%, #eaef9d 50%, #80b155 74%, #336a29);
    content: "";
    pointer-events: none;
}

.contact-page-surface .contact-hero {
    border-bottom: 1px solid rgba(234, 239, 157, .19);
}

.contact-page-surface .contact-map-section {
    border-bottom: 0;
}

@media (max-width: 575.98px) {
    .contact-page { padding: 8px 0 20px; }

    .contact-page-surface {
        width: calc(100% - 16px);
        min-height: 0;
        padding-bottom: 0;
        border-radius: 14px;
    }

    .contact-page-surface .contact-hero {
        padding: 24px 0 20px;
    }

    .contact-page-surface .contact-main-section {
        margin-top: 12px;
        padding: 22px 0 26px;
    }

    .contact-page-surface .contact-form-card {
        padding: 18px 16px;
    }

    .contact-page-surface #contact-form {
        scroll-margin-top: 88px;
    }

    .contact-page-surface .contact-main-grid {
        gap: 18px;
    }

    .contact-page-surface .contact-info-list {
        gap: 10px;
        margin-top: 17px;
    }

    .contact-page-surface .contact-form-heading h2 {
        white-space: normal;
    }

    .contact-page-surface .contact-trust-line {
        justify-content: flex-start;
        margin-top: 14px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        text-align: left;
    }
}