/* ============================================================================
   TRANG /contact-us/ — THIẾT KẾ 2026

   Template: page-contact.php (20 dòng). Bộ style gốc là styles/ent-contact.css.
   File này là LỚP PHỦ kéo trang về hệ 2026 mà không đụng vào template —
   xem [[styling-overlay-approach]].

   Cả trang chỉ có một dải .contactfull chia hai cột:
     .left_contact              nội dung soạn trong trình sửa bài
     .right_contact.becomeform  tiêu đề + biểu mẫu Contact Form 7

   Biểu mẫu là ĐÚNG shortcode đang dùng ở trang /partners/ ("Become our partner
   today"), nên phần ô nhập lấy lại y các giá trị trong ent-partner-2026.css.
   Hai thẻ h2/p mở đầu của biểu mẫu (.h2bc, .p2bc) đã bị ent-contact.css ẩn đi.

   MỤC LỤC
     1. Dải nền và hai cột
     2. Cột trái
     3. Thẻ biểu mẫu
     4. Ô nhập Contact Form 7
     5. Mobile
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. DẢI NỀN VÀ HAI CỘT
   --------------------------------------------------------------------------- */
.sr-contact .contactfull {
    /* Gradient xanh dương ba chặng cũ → navy → tím như hero mọi trang 2026. */
    background: linear-gradient(135deg, var(--sr-navy-900) 0%, var(--sr-purple-700) 100%);
    padding-top: clamp(56px, 7vw, 104px);
    padding-bottom: clamp(56px, 7vw, 104px);
    font-family: var(--sr-font);
    color: var(--sr-neutral-0);
}

/* Cột nội dung cũ rộng 1320px. */
.sr-contact .contactfull .ent-container {
    max-width: var(--sr-container);
    padding-left: var(--sr-gutter);
    padding-right: var(--sr-gutter);
    box-sizing: border-box;
    gap: 64px;
}

/* Bản cũ: trái calc(50% - 150px), phải calc(50% - 20px) — cộng lại 100% - 170px,
   khoảng hở giữa hai cột do space-between quyết định nên co giãn thất thường.
   Đặt bề rộng thật rồi để `gap` lo khoảng hở. */
.sr-contact .left_contact {
    width: auto;
    flex: 1 1 380px;
    min-width: 0;
}

.sr-contact .right_contact.becomeform {
    width: auto;
    flex: 0 1 520px;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   2. CỘT TRÁI — nội dung soạn trong trình sửa bài nên chỉ có h2 và mấy đoạn <p>
   --------------------------------------------------------------------------- */
.sr-contact .left_contact > h2 {
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sr-neutral-0);
}

.sr-contact .left_contact p {
    font-family: var(--sr-font);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, 0.88);
}

/* Đoạn mở đầu đọc như lời dẫn, cho to hơn một nấc và tách khỏi khối thông tin. */
.sr-contact .left_contact p:first-of-type {
    font-size: 18px;
    margin-bottom: 28px;
}

/* "Phone:", "Location:", "Head:", "Email:" — nhãn của từng dòng. */
.sr-contact .left_contact strong,
.sr-contact .left_contact b {
    font-weight: 700;
    color: var(--sr-neutral-0);
}

.sr-contact .left_contact a {
    color: var(--sr-neutral-0);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.sr-contact .left_contact a:hover {
    color: var(--sr-purple-200);
}

/* ---------------------------------------------------------------------------
   3. THẺ BIỂU MẪU
   --------------------------------------------------------------------------- */
.sr-contact .right_contact.becomeform {
    border-radius: 16px;
    padding: clamp(24px, 3vw, 40px);
    text-align: left;
    background: var(--sr-neutral-0);
    box-shadow: var(--sr-shadow-panel);

    /* Contact Form 7 dựng thêm phần ẩn làm trang cuộn ngang vài pixel ở khổ
       hẹp — đã gặp đúng lỗi này ở trang /partners/. overflow-x: clip kẹp lại
       mà không tạo vùng cuộn mới, cũng không đụng gì tới bố cục. */
    overflow-x: clip;
}

.sr-contact .h2ques {
    margin: 0 0 24px;
    font-family: 'Phudu', var(--sr-font);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: left;
    color: var(--sr-navy-900);
}

/* ---------------------------------------------------------------------------
   4. Ô NHẬP CONTACT FORM 7 — cùng bộ giá trị với biểu mẫu ở trang /partners/
   --------------------------------------------------------------------------- */
.sr-contact .wpcf7-form p {
    margin: 0;
}

/* CF7 bọc mỗi ô trong một <span> inline; span đó không co theo khung nên ở khổ
   hẹp nó tràn ra ngoài. */
.sr-contact .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
    min-width: 0;
    margin-bottom: 14px;
    box-sizing: border-box;
}

.sr-contact .wpcf7-form-control:not(.wpcf7-submit) {
    width: 100% !important;
    min-width: 0;
    padding: 13px 16px;
    border: 1px solid var(--sr-neutral-100) !important;
    border-radius: var(--sr-radius) !important;
    background: var(--sr-neutral-0);
    font-family: var(--sr-font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--sr-neutral-900);
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.sr-contact .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
    color: var(--sr-neutral-500);
}

.sr-contact .wpcf7-form-control:not(.wpcf7-submit):focus {
    outline: none;
    border-color: var(--sr-purple-700) !important;
}

.sr-contact textarea.wpcf7-form-control {
    min-height: 140px;
    resize: vertical;
}

/* CF7 chèn <br> giữa các ô — khoảng hở đã do margin của .wpcf7-form-control-wrap
   lo, để nguyên thì thành hở đôi. */
.sr-contact .wpcf7-form br {
    display: none;
}

/* Nút Submit: kích thước, màu và hiệu ứng do styles/ent-buttons.css lo. */
.sr-contact .wpcf7-submit {
    margin-top: 10px;
}

/* Thông báo lỗi và thông báo gửi thành công của plugin. */
.sr-contact .wpcf7-not-valid-tip {
    margin-top: -8px;
    margin-bottom: 12px;
    font-family: var(--sr-font);
    font-size: 13px;
    color: rgb(197, 48, 48);
}

.sr-contact .wpcf7-response-output {
    margin: 20px 0 0 !important;
    padding: 12px 16px !important;
    border-width: 1px !important;
    border-radius: var(--sr-radius) !important;
    font-family: var(--sr-font);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   5. MOBILE
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .sr-contact .contactfull {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .sr-contact .contactfull .ent-container {
        gap: 32px;
    }

    .sr-contact .left_contact,
    .sr-contact .right_contact.becomeform {
        flex: 1 1 100%;
    }

    /* ent-contact.css đẩy thẻ biểu mẫu xuống 20px; khoảng hở đã do `gap` lo. */
    .sr-contact .right_contact.becomeform {
        margin-top: 0;
    }
}