/*
 * Trang liên hệ — /contact/ (`page-contact.php`).
 *
 * Chỉ nạp ở trang đó (xem `vietape_nap_css_lien_he()` trong `inc/assets.php`),
 * nạp SAU `site.css` (priority 22 > 19) để đè được mà không cần !important.
 *
 * MỌI LUẬT ĐỀU NẰM DƯỚI `.vietape-lienhe`. Không dùng lại `.form-tape` hay
 * `.tape-form` của theme: `site.css:162-187` gạch nhấn căn giữa và đẩy khối
 * xuống 56px, `style.css:77-82` đổi nền input — toàn luật viết cho khối
 * "Helping Center" và dải tìm kiếm, không phải cho một form liên hệ.
 *
 * CHUỖI KẾ THỪA PHẢI ĐÈ (đo trên /contact/ 14/09/2026, thứ tự nạp thật):
 *   - Dealaro `assets/css/style.css:1246` — `input, textarea { height: 56px;
 *     padding: 0 20px; background: transparent; border-radius: 0; width: 100% }`
 *     → textarea cao đúng MỘT dòng dù CF7 in rows="6"; nút submit rộng 100%.
 *   - theme cha `hktheme.css:262` — `input, textarea { padding: 8px;
 *     border: 1px solid #D8D8D8; color: #323232 }`
 *   - child `style.css:19` — `input.wpcf7-submit { background: #08a6d9 }`
 *     (cyan dưới chữ xám #323232 — không phải nút thương hiệu, và quy tắc dự
 *     án cấm #08A6D9 làm nền chữ trắng vì tương phản chỉ 2,81:1).
 *   - Dealaro `style.css:1727` — `label { margin-top: -0.3em; display: block }`
 *   - CF7 `styles.css` — `.wpcf7 form .wpcf7-response-output { margin: 2em
 *     .5em 1em; border: 2px solid }` (0,2,1) và biến thể theo trạng thái (0,3,1).
 * Selector ở đây luôn có ≥ 2 class nên thắng mọi luật element/1-class ở trên;
 * riêng thông báo CF7 dùng 4 class để thắng (0,3,1).
 *
 * BẢNG MÀU (theo `product-page.css` và `site.css`):
 *   #0b5cab  nút chính, link, gạch nhấn          (trên trắng 6,7:1)
 *   #0038b8  hover của nút chính, vòng focus      (trên trắng 9,3:1)
 *   #16283d  tiêu đề, chữ chính                   (trên trắng 14:1)
 *   #475569  chữ phụ, nhãn dt                     (trên trắng 7,5:1)
 *   #cbd5e1  viền input, viền chip
 *   #f1f5f9  nền hộp gợi ý
 *
 * @package hkt-simple-child
 */

/* --- Khung chung --------------------------------------------------------- */

.vietape-lienhe {
	color: #16283d;
	font-size: 1rem;
	line-height: 1.6;
	padding-bottom: 8px;
}

/* Tiêu đề mục — cùng bộ số với `.vt-sp-muc` của trang sản phẩm để hai trang
 * nói cùng một giọng. Không enqueue `product-page.css` cho trang này vì file
 * đó kéo theo cả bố cục trang sản phẩm; copy 8 dòng rẻ hơn. Gạch nhấn căn
 * TRÁI vì tiêu đề căn trái (gạch giữa của `.form-tape h2` là cho tiêu đề có
 * <center>). */
.vietape-lienhe .vietape-lienhe__tieu-de {
	position: relative;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	font-weight: 800;
	line-height: 1.3;
	color: #16283d;
	padding-bottom: 12px;
	margin: 0 0 18px;
}

.vietape-lienhe .vietape-lienhe__tieu-de::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, #08A6D9, #0b5cab);
}

.vietape-lienhe p {
	margin: 0 0 14px;
}

.vietape-lienhe .vietape-lienhe__phu,
.vietape-lienhe small {
	color: #475569;
}

.vietape-lienhe small {
	font-size: .875rem;
	line-height: 1.5;
	display: inline-block;
	margin-top: 2px;
}

.vietape-lienhe a {
	color: #0b5cab;
}

.vietape-lienhe a:hover,
.vietape-lienhe a:focus-visible {
	color: #0038b8;
	text-decoration: underline;
}

/* --- Khối mở đầu + lối tắt ----------------------------------------------- */

.vietape-lienhe__mo-dau {
	margin-bottom: 36px;
}

.vietape-lienhe .vietape-lienhe__dan {
	font-size: 1.08rem;
	max-width: 62ch;
}

/* Dòng chip thay cho hàng 3 thẻ: `[tape_support]` (footer.php:24) đã in ba
 * thẻ "Helping Center" ngay dưới thân trang này, thêm một hàng thẻ nữa là
 * cùng ba việc hiện hai lần trong một màn hình. Chip là lối rẽ TRƯỚC khi điền
 * form; hàng thẻ dưới chân là điểm rơi cuối. */
.vietape-lienhe__loi-tat {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
}

.vietape-lienhe .vietape-lienhe__loi-tat-nhan {
	font-weight: 600;
	color: #475569;
	margin-right: 4px;
}

/* Chip dùng cho cả <a> lẫn <button> (chip "Request a quote" là button vì nó
 * mở hộp thoại chứ không dẫn đi đâu). `min-height: 44px` = vùng chạm tối thiểu
 * trên di động (WCAG 2.5.5) — ba chip này là CTA đầu tiên khách chạm. */
.vietape-lienhe .vietape-lienhe__chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid #cbd5e1;
	border-radius: 999px;
	background: #fff;
	color: #0b5cab;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.vietape-lienhe .vietape-lienhe__chip:hover {
	border-color: #0b5cab;
	background: #eef4fb;
	color: #0038b8;
	text-decoration: none;
}

/* Focus bàn phím phải NHÌN THẤY: child style.css:21 có `a { outline: 0 }`, và
 * đổi nền nhạt/viền 1px thì mắt không phân biệt được với hover. Dùng cùng bộ
 * số với nút gửi. Tách khỏi :hover để rê chuột không hiện vòng. */
.vietape-lienhe .vietape-lienhe__chip:focus-visible {
	outline: 2px solid #0038b8;
	outline-offset: 2px;
	border-color: #0b5cab;
	color: #0038b8;
}

/* --- Hai cột --------------------------------------------------------------- */

.vietape-lienhe__than {
	margin-top: 8px;
}

/* Cột phải bắt đầu ngang tiêu đề cột trái; trên di động xếp dưới form. */
@media (max-width: 991.98px) {
	.vietape-lienhe__cot-thong-tin {
		margin-top: 40px;
	}
}

@media (min-width: 992px) {
	.vietape-lienhe__cot-thong-tin {
		padding-left: 40px;
	}
}

/* Luật cho field CF7 (input, label, nút gửi, thông báo) nằm ở form.css — nạp
 * toàn site vì hộp thoại #contactModal có form ở mọi trang. Trang này chỉ cần
 * thêm class `vietape-form` vào wrapper. */

/* --- Thông tin liên hệ ---------------------------------------------------- */

.vietape-lienhe .vietape-lienhe__chi-tiet {
	margin: 0 0 28px;
}

.vietape-lienhe .vietape-lienhe__chi-tiet dt {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #475569;
	margin: 0 0 4px;
}

.vietape-lienhe .vietape-lienhe__chi-tiet dd {
	margin: 0 0 18px;
	line-height: 1.55;
}

.vietape-lienhe .vietape-lienhe__chi-tiet dd:last-child {
	margin-bottom: 0;
}

.vietape-lienhe .vietape-lienhe__chi-tiet dd > a {
	font-weight: 600;
	word-break: break-word;
}

.vietape-lienhe .vietape-lienhe__social a {
	display: inline-block;
	margin-right: 14px;
	font-weight: 600;
}

/* Hộp "For a faster answer". Nền nhạt + vạch trái để tách khỏi bảng thông tin
 * mà không thành một khối tối thứ hai (trang đã có dải navy dưới chân). */
.vietape-lienhe .vietape-lienhe__goi-y {
	padding: 20px 22px;
	border-left: 4px solid #0b5cab;
	border-radius: 8px;
	background: #f1f5f9;
}

.vietape-lienhe .vietape-lienhe__goi-y h3 {
	font-size: 1.05rem;
	font-weight: 700;
	color: #16283d;
	margin: 0 0 10px;
}

/* Theme cha: `.single .post-single-content ul { list-style: square; margin: …
 * 30px }` (0,2,1). Khối này nằm NGOÀI `.post-single-content` nên không dính,
 * nhưng vẫn khai đủ 2 class để nếu ai chuyển khối vào trong thì không vỡ. */
.vietape-lienhe .vietape-lienhe__goi-y ul {
	list-style: disc;
	margin: 0;
	padding-left: 20px;
}

.vietape-lienhe .vietape-lienhe__goi-y li {
	padding: 3px 0;
	font-size: .95rem;
	line-height: 1.5;
}

/* --- Đường tới nhà máy ----------------------------------------------------- */

.vietape-lienhe__duong-di {
	margin-top: 44px;
}

.vietape-lienhe .vietape-lienhe__dia-chi {
	font-size: 1.05rem;
	font-weight: 600;
}

.vietape-lienhe .vietape-lienhe__nut {
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	border: 1px solid #0b5cab;
	border-radius: 8px;
	background: #0b5cab;
	color: #fff;
	font-size: .92rem;
	font-weight: 700;
	text-decoration: none;
	transition: background .18s ease, border-color .18s ease;
}

.vietape-lienhe .vietape-lienhe__nut:hover {
	background: #0038b8;
	border-color: #0038b8;
	color: #fff;
	text-decoration: none;
}

/* #0b5cab -> #0038b8 chỉ đạt 1,39:1 với nhau — không dùng được làm dấu hiệu
 * focus. Vòng ngoài 2px cách 3px như nút gửi. */
.vietape-lienhe .vietape-lienhe__nut:focus-visible {
	outline: 2px solid #0038b8;
	outline-offset: 3px;
	color: #fff;
	text-decoration: none;
}

.vietape-lienhe .vietape-lienhe__ban-do {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #cbd5e1;
	background: #f1f5f9;
}

.vietape-lienhe .vietape-lienhe__ban-do iframe {
	display: block;
	width: 100%;
	height: 340px;
	border: 0;
}

@media (max-width: 991.98px) {
	.vietape-lienhe .vietape-lienhe__ban-do {
		margin-top: 16px;
	}

	.vietape-lienhe .vietape-lienhe__ban-do iframe {
		height: 260px;
	}
}