sẽ thành
và đẩy các ô xa nhau ra.
*/
/*
* main.css đặt `p { white-space: break-spaces; margin-bottom: 1.5rem }`. Trung
* hoà trong phạm vi form: mọi khoảng trắng thừa trong template CF7 sẽ không
* biến thành khoảng trống thật, và các
không tự đẩy nhau ra 1.5rem. * * Lưu ý khi sửa template ở Liên hệ → Biểu mẫu: giữ mỗi field trên MỘT dòng. * CF7 chạy autop, newline bên trong
sẽ thành
và các ô lại xa nhau.
*/
.wl-form p {
white-space: normal;
}
.wl-form-grid {
grid-template-columns: 1fr 1fr;
gap: 1rem;
display: grid;
}
.wl-field {
margin: 0;
}
.wl-field--full {
grid-column: 1 / -1;
}
.wl-field label {
color: var(--_brand---dark-grey);
margin-bottom: .375rem;
font-size: .9375rem;
font-weight: 600;
line-height: 1.35em;
display: block;
}
.wl-req {
color: var(--_brand---dark-orange);
}
/* CF7 bọc mỗi control trong . */
.wl-field .wpcf7-form-control-wrap {
display: block;
}
.wl-input,
.wl-field input[type="text"],
.wl-field input[type="email"],
.wl-field input[type="tel"],
.wl-field select,
.wl-field textarea {
box-sizing: border-box;
color: var(--_brand---dark-grey);
background-color: #fff;
border: 1px solid var(--_brand---border);
border-radius: .625rem;
width: 100%;
padding: .75rem .875rem;
font-family: inherit;
font-size: 1rem;
line-height: 1.4em;
transition: border-color .3s, box-shadow .3s;
}
.wl-field textarea {
resize: vertical;
min-height: 5.5rem;
}
.wl-field input:focus,
.wl-field select:focus,
.wl-field textarea:focus {
border-color: var(--_brand---dark-blue);
outline: 0;
box-shadow: 0 0 0 3px #017cff26;
}
.wl-field input::placeholder,
.wl-field textarea::placeholder {
color: #9a9a9a;
}
/* Nút gửi: dùng lại đúng hình dáng .button-oval của site. */
.wl-form-actions {
margin: 1.5rem 0 0;
}
.wl-submit,
.wl-form input[type="submit"] {
color: #fff;
cursor: pointer;
background-color: var(--_brand---dark-blue);
border: 0;
border-radius: 100rem;
width: 100%;
padding: .875rem 2rem;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.35em;
transition: background-color .3s;
}
.wl-submit:hover,
.wl-form input[type="submit"]:hover {
background-color: var(--_brand---dark-green);
}
.wl-form-note {
color: #7a7a7a;
margin: .875rem 0 0;
font-size: .875rem;
line-height: 1.45em;
text-align: center;
}
/* CF7 chèn vòng xoay khi đang gửi. */
.wl-form .wpcf7-spinner {
margin: .5rem auto 0;
display: block;
}
/* ------------------------------------------------------------------ */
/* Thông báo của CF7 */
/* ------------------------------------------------------------------ */
.wpcf7-response-output {
border-width: 1px;
border-radius: .625rem;
margin: 1.25rem 0 0;
padding: .75rem 1rem;
font-size: .9375rem;
line-height: 1.45em;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: var(--_brand---dark-green);
color: var(--_brand---dark-green);
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
border-color: var(--_brand---dark-orange);
color: var(--_brand---dark-orange);
}
.wpcf7-not-valid-tip {
color: var(--_brand---dark-orange);
margin-top: .25rem;
font-size: .8125rem;
}
.wpcf7-not-valid {
border-color: var(--_brand---dark-orange);
}
/* Gửi xong thì ẩn form, chỉ để lại lời cảm ơn cho gọn. */
.wpcf7 form.sent .wl-form-grid,
.wpcf7 form.sent .wl-form-actions,
.wpcf7 form.sent .wl-form-note {
display: none;
}
/* ------------------------------------------------------------------ */
/* Khối Liên hệ 2 cột (element wl_contact_split) */
/* ------------------------------------------------------------------ */
/*
* Bố cục mượn từ trang gốc offers.wordly.ai/contact: cột trái nội dung, cột
* phải hộp form đóng khung. Bản gốc dùng lưới Bootstrap span6/span6 của
* HubSpot; ở đây viết bằng CSS grid cho gọn và tự xuống 1 cột trên mobile.
*/
.wl-contact-split {
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 3rem;
display: grid;
}
.wl-contact-split--wide {
grid-template-columns: 1.2fr 1fr;
}
.wl-contact-split--form {
grid-template-columns: 1fr 1.2fr;
}
/* Rich text bên trong cột trái đã có khung riêng, bỏ khung lồng thừa. */
.wl-contact-split__content > .container-new {
max-width: none;
padding-left: 0;
padding-right: 0;
}
/* ------------------------------------------------------------------ */
/* Hộp form */
/* ------------------------------------------------------------------ */
/*
* Kích thước lấy đúng từ CSS bản gốc (template_contact-style.min.css):
* .c-form > span { border: 2px solid #129737; border-radius: 30px;
* box-shadow: 0 0 15px rgba(0,0,0,.2); padding: 40px 50px 50px }
* Màu viền đổi sang biến thương hiệu của site, giá trị gần như trùng.
*/
.wl-contact-form__box {
background-color: #fff;
border: 2px solid var(--_brand---dark-green);
border-radius: 1.875rem;
padding: 2.5rem 3.125rem 3.125rem;
box-shadow: 0 0 15px #00000033;
}
.wl-contact-form--sticky .wl-contact-form__box {
position: sticky;
top: 6.5rem;
}
.wl-contact-form__title {
color: var(--_brand---dark-blue);
margin: 0 0 .375rem;
font-size: 1.5rem;
line-height: 1.3em;
text-align: center;
}
.wl-contact-form__subtitle {
color: #5a5a5a;
margin: 0 0 1.75rem;
font-size: .9375rem;
line-height: 1.5em;
text-align: center;
white-space: normal;
}
/* Khung xem trước tĩnh, chỉ hiện trong UX Builder. */
.wl-contact-form__preview {
color: #7a7a7a;
background-color: #f6f7f9;
border: 1px dashed var(--_brand---border);
border-radius: .625rem;
padding: 2rem 1.25rem;
text-align: center;
}
.wl-contact-form__preview p {
margin: 0 0 .25rem;
white-space: normal;
}
/* ------------------------------------------------------------------ */
/* Màn hình nhỏ */
/* ------------------------------------------------------------------ */
@media (max-width: 991px) {
.wl-contact-split,
.wl-contact-split--wide,
.wl-contact-split--form {
grid-template-columns: 1fr;
gap: 2.5rem;
}
/* Ghim mất tác dụng khi 2 cột đã xếp chồng. */
.wl-contact-form--sticky .wl-contact-form__box {
position: static;
}
}
@media (max-width: 640px) {
.wl-form-grid {
grid-template-columns: 1fr;
}
.wl-contact-form__box {
border-radius: 1.25rem;
padding: 1.75rem 1.25rem 2rem;
}
}