/*
 * Task GD-07 (sheet "Giao diện" dòng 17) — section mới "Nhận báo giá và tư
 * vấn" ở trang chủ, theo mẫu thephinhnhapkhau.com.vn/#contact. Mockup đã
 * duyệt (nền trắng, không dùng nền navy đặc của ảnh mẫu): docs/mockup/gd-07/.
 *
 * Phản hồi lần 1 (29/09/2026): khách đổi ý, muốn LẠI nền xanh navy đậm như
 * ảnh mẫu gốc — đổi nền + chữ cho khớp (thẻ form vẫn nền trắng để chữ trong
 * form dễ đọc, chỉ nền section + khối "Thông tin liên hệ" đổi màu).
 */
.thp-quote {
	background: #0f1830;
	padding: 56px 0;
}
.thp-quote__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 16px;
}
.thp-quote__title {
	text-align: center;
	color: #fff;
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin: 0 0 10px;
}
.thp-quote__bar {
	display: block;
	width: 56px;
	height: 3px;
	background: #fff;
	margin: 0 auto 32px;
}
.thp-quote__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 28px;
	align-items: start;
}
.thp-quote__card {
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	padding: 32px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.thp-quote__card h3 {
	color: #233179;
	font-size: 20px;
	margin: 0 0 6px;
}
.thp-quote__card > p {
	color: #666;
	font-size: 14px;
	margin: 0 0 22px;
}

/* Form CF7: 2 ô mỗi hàng cho Họ tên/SĐT và Loại thép/Số lượng. */
.thp-quote__card .wpcf7-form p {
	margin: 0 0 14px;
}
.thp-quote__card .wpcf7-form label {
	display: block;
	color: #333;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}
.thp-quote__card .wpcf7-form .required {
	color: #d91d1b;
}
.thp-quote__card .wpcf7-form input[type="text"],
.thp-quote__card .wpcf7-form input[type="tel"],
.thp-quote__card .wpcf7-form input[type="email"],
.thp-quote__card .wpcf7-form select,
.thp-quote__card .wpcf7-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ccc;
	color: #333;
	padding: 10px 12px;
	font-size: 14px;
	border-radius: 3px;
}
.thp-quote__card .wpcf7-form textarea {
	resize: vertical;
	min-height: 70px;
}
.thp-quote__card .wpcf7-form input[type="submit"] {
	display: block;
	width: 100%;
	margin-top: 6px;
	background: #233179;
	color: #fff;
	border: 0;
	padding: 14px;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 3px;
	cursor: pointer;
}
.thp-quote__card .wpcf7-form input[type="submit"]:hover,
.thp-quote__card .wpcf7-form input[type="submit"]:focus {
	background: #1a2560;
}
.thp-quote__card .wpcf7-form input[type="submit"][disabled] {
	opacity: .6;
	cursor: default;
}
.thp-quote__card .wpcf7-not-valid-tip {
	color: #d91d1b;
	font-size: 12px;
	margin-top: 4px;
}
.thp-quote__card .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 10px 14px;
	border-radius: 3px;
	font-size: 13px;
}

.thp-quote__info h3 {
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	margin: 0 0 16px;
}
.thp-quote__pill {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 4px;
	padding: 12px 16px;
	margin-bottom: 10px;
}
.thp-quote__pill .fa {
	color: #233179;
	width: 18px;
	text-align: center;
}
.thp-quote__pill span {
	color: #333;
	font-size: 14px;
}
.thp-quote__pill a {
	color: #233179;
	text-decoration: none;
	font-weight: 700;
}
.thp-quote__pill a:hover,
.thp-quote__pill a:focus {
	text-decoration: underline;
}
.thp-quote__map {
	margin-top: 14px;
	border-radius: 4px;
	overflow: hidden;
	line-height: 0;
	border: 1px solid #e3e3e3;
}
.thp-quote__map iframe {
	width: 100%;
	display: block;
}

@media (max-width: 900px) {
	.thp-quote__grid {
		grid-template-columns: 1fr;
	}
}

/* Field pairs (Họ tên+SĐT, Loại thép+Số lượng) side by side — .thp-quote__row
   bọc quanh 2 thẻ <p> ngay trong nội dung form CF7 (xem class-quote-form-migrate.php). */
.thp-quote__card .thp-quote__row {
	display: flex;
	gap: 14px;
}
.thp-quote__card .thp-quote__row p {
	flex: 1;
	min-width: 0;
}
@media (max-width: 480px) {
	.thp-quote__card .thp-quote__row {
		flex-direction: column;
		gap: 0;
	}
}

/*
 * Phản hồi lần 4 (05/10/2026, ô K17, prnt dd22R0aqDWlJ):
 * 1/ "YÊU CẦU BÁO GIÁ" in hoa như "THÔNG TIN LIÊN HỆ", 2 tiêu đề cùng cỡ và THẲNG HÀNG: cột phải lùi xuống đúng
 *    bằng đệm trên của thẻ form (32px).
 * 2/ Bản đồ kéo dài tới đúng đáy thẻ form (2 cột cao bằng nhau, bản đồ lấp phần còn lại).
 * 3/ Nút "Gửi yêu cầu báo giá": khoảng dưới nút = khoảng trên nút (bỏ lề dư của <p>/CF7).
 */
.thp-quote__grid { align-items: stretch; }
.thp-quote__card h3,
.thp-quote__info h3 {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 18px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.thp-quote__card h3 { color: #233179 !important; }
.thp-quote__info h3 { color: #fff !important; margin-bottom: 14px !important; }
.thp-quote__info {
	display: flex;
	flex-direction: column;
	padding-top: 33px; /* = đệm trên 32px + viền 1px của thẻ form → 2 tiêu đề cùng 1 hàng */
}
.thp-quote__info .thp-quote__map { flex: 1 1 auto; min-height: 200px; display: flex; margin-bottom: 0; }
.thp-quote__info .thp-quote__map iframe { flex: 1 1 auto; height: auto !important; min-height: 200px; display: block; }
.thp-quote__card { padding: 32px 32px 32px; display: flex; flex-direction: column; }
.thp-quote__card .wpcf7-form p:last-of-type { margin-bottom: 0; }
.thp-quote__card .wpcf7-form input[type="submit"] { margin-top: 18px; }
.thp-quote__card .wpcf7-form .wpcf7-spinner { position: absolute; }
.thp-quote__card .wpcf7-form p:has(input[type="submit"]) { position: relative; margin: 0; }
.thp-quote__card .wpcf7-response-output:empty,
.thp-quote__card .wpcf7-form.init .wpcf7-response-output { display: none; }
@media (max-width: 991px) {
	.thp-quote__info { padding-top: 0; }
	.thp-quote__info .thp-quote__map iframe { height: 280px !important; }
}
.thp-quote .thp-quote__card { padding-bottom: 23px; } /* dưới nút 23 + viền 1 = 24 = khoảng trên nút */

/* K17 (đọc lại theo mũi tên trong ảnh khách): 2 tiêu đề cùng ở NGOÀI thẻ, cùng kiểu (chữ trắng in hoa), cùng hàng;
   thẻ form và ô thông tin đầu tiên bắt đầu cùng 1 mép trên; đáy bản đồ = đáy thẻ form. */
.thp-quote__col { display: flex; flex-direction: column; min-width: 0; }
.thp-quote__col .thp-quote__card { flex: 1 1 auto; }
.thp-quote .thp-quote__heading {
	margin: 0 0 14px !important; padding: 0 !important;
	font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important;
	text-transform: uppercase; letter-spacing: .3px; color: #fff !important;
}
.thp-quote .thp-quote__info { padding-top: 0; }

/* FB sửa giao diện lần 2 (dòng 5, 08/10/2026): trang Liên hệ dùng chung form + khung form của trang chủ.
   Tiêu đề navy đậm in hoa trên nền trắng (cùng kiểu chữ tiêu đề khối của site). */
.thp-contact-form { margin: 0 0 36px; padding: 0 30px; } /* FB lần 2 (09/10): form ở đầu trang Liên hệ */ /* thẳng mép trái/phải với bản đồ + khối Trụ sở/Chi nhánh phía trên (thụt 30px) */
@media (max-width: 767px) { .thp-contact-form { padding: 0 20px; } }
.thp-contact-form .thp-contact-form__title {
	margin: 0 0 14px; padding: 0; color: #233179;
	font-size: 22px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.thp-contact-form .thp-quote__card { padding-bottom: 23px; }
.thp-contact-form .contact-intro { color: #666; font-size: 14px; margin: 0 0 22px; }

/* FB lần 2 (13/10/2026): ảnh thay bản đồ dưới "Thông tin liên hệ" — cùng khung (cao lấp tới đáy form), ảnh phủ kín. */
.thp-quote__info .thp-quote__photo { position: relative; overflow: hidden; border-radius: 4px; background: #1b2768; }
.thp-quote__info .thp-quote__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 991px) { .thp-quote__info .thp-quote__photo { min-height: 280px; } } /* = chiều cao bản đồ cũ ở máy tính bảng/điện thoại */