/* ==========================================================================
   Element "TBTC — Liên hệ (bản đồ + form)" — inc/elements/contact.php

   VIẾT TAY (không phải file tự sinh từ prototype): bố cục này không có trong
   giao_dien_hoan_chinh/, nó dựng theo mẫu chủ dự án cung cấp, còn màu/chữ/khoảng cách thì
   lấy theo tokens.css của site để đồng bộ với trang chủ và 2 trang sản phẩm.

   Mọi selector bọc trong `.tbtc-contact`. KHÔNG dùng `.tbtc-page` vì bố cục
   này chạy trên lưới của Flatsome (.container/.row/.col) mà _base.css của
   .tbtc-page lại reset ul/a/img/button — sẽ phá đúng những thứ đó
   (cùng lý do đã ghi ở CLAUDE.md mục 12.1 cho phần blog).

   Nhiều rule dưới đây là để TRUNG HOÀ style của Flatsome (input cao 2.507em,
   bóng inset, label 0.9em/700, button viết hoa + min-width 24px…). Đo bằng
   computed style chứ không đoán — xem CLAUDE.md mục 9.2, 9.3, 12.7.
   ========================================================================== */

.tbtc-contact {
	font-family: var(--font-sans);
	color: var(--c-text);
}

/* Bề rộng vùng nội dung: bám theo tokens của site (1312px) chứ không theo tuỳ
   chọn Container Width của Flatsome, để thẳng hàng với trang chủ và 2 trang
   sản phẩm. +30px là phần padding 15px mỗi bên của .container Flatsome. */
.tbtc-contact .container {
	max-width: calc(var(--container-w) + 30px);
}

/* ---- Bản đồ ------------------------------------------------------------ */

.tbtc-contact__map {
	display: block;
	line-height: 0; /* bỏ khoảng trắng dưới iframe (inline element) */
}

.tbtc-contact__map iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	border: 0;
}

/* ---- Tấm thẻ trắng đè lên bản đồ --------------------------------------- */

.tbtc-contact__main {
	padding-bottom: var(--sp-20);
}

/* Không có bản đồ thì không còn gì để đè lên — chừa khoảng trên như bình thường. */
.tbtc-contact__main--no-map {
	padding-top: var(--sp-20);
}

.tbtc-contact__box {
	position: relative;
	z-index: 1;
	margin-top: -64px;
	overflow: hidden;
	background: var(--c-white);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-card-hover);
}

.tbtc-contact__main--no-map .tbtc-contact__box {
	margin-top: 0;
}

.tbtc-contact__pane {
	padding: var(--sp-12);
}

/* Cột phải — nền gradient xanh của thiết kế. Đặt nền ở .col (không phải
   .col-inner) để màu phủ hết chiều cao hàng khi hai cột lệch chiều cao. */
.tbtc-contact__side {
	background-image: linear-gradient(90deg, var(--c-blue) 0%, var(--c-navy) 100%);
	color: var(--c-white);
}

/* ---- Tiêu đề ----------------------------------------------------------- */

.tbtc-contact__eyebrow {
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--c-orange);
}

.tbtc-contact__title {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-display-3);
	line-height: var(--lh-display-3);
	font-weight: var(--fw-bold);
	text-transform: none;
	letter-spacing: normal;
	color: var(--c-navy);
}

.tbtc-contact__side-title {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-display-4);
	line-height: var(--lh-display-4);
	font-weight: var(--fw-bold);
	text-transform: none;
	letter-spacing: normal;
	color: var(--c-white);
}

/* ---- Dải thông tin liên hệ (item con) ---------------------------------- */

.tbtc-contact__list {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.tbtc-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
}

.tbtc-contact__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-top: 2px; /* canh với dòng chữ đầu tiên */
	color: var(--c-white);
}

.tbtc-contact__icon svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.tbtc-contact__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2) var(--sp-4);
	width: 100%;
}

.tbtc-contact__label,
.tbtc-contact__value {
	margin: 0;
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	text-transform: none;
	letter-spacing: normal;
	color: var(--c-white);
}

/* `width: auto` là bắt buộc: Flatsome đặt `h2, h3 { width: 100% }`, để nguyên
   thì nhãn chiếm trọn dòng và nội dung bị đẩy xuống dòng dưới thay vì nằm
   cùng hàng, canh phải như thiết kế. */
.tbtc-contact__label {
	flex: 0 0 auto;
	width: auto;
	font-weight: var(--fw-medium);
}

.tbtc-contact__value {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: var(--fw-regular);
	text-align: right;
	overflow-wrap: anywhere;
}

.tbtc-contact__value a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	transition: border-color var(--dur) var(--ease);
}

.tbtc-contact__value a:hover {
	color: var(--c-white);
	border-bottom-color: var(--c-white);
}

/* ==========================================================================
   Form Contact Form 7
   ========================================================================== */

.tbtc-contact .wpcf7 {
	position: relative;
	color: var(--c-text);
}

/* CF7 tự chèn <br /> khi wpautop bật. Element đã tắt wpautop cho form của mình
   (xem tbtc_contact_cf7_disable_autop), dòng này chỉ để phòng khi người dùng
   chọn một form khác được soạn theo kiểu cũ. */
.tbtc-contact .wpcf7-form br {
	display: none;
}

/* Bẫy độ ưu tiên đã gặp ở popup báo giá (CLAUDE.md mục 9.6 ①): field chính là
   một <p>, nên `p { margin: 0 }` sẽ xoá luôn khoảng cách giữa các field. */
.tbtc-contact .wpcf7-form > p:not(.tbtc-cform__field) {
	margin: 0;
}

.tbtc-contact .tbtc-cform__field {
	margin: 0 0 var(--sp-4);
}

/* Hàng 2 cột của form (điện thoại + email). Dùng grid của riêng element chứ
   không mượn .row/.col của Flatsome — form do người biên tập sửa trong CF7,
   càng ít phụ thuộc class ngoài càng đỡ vỡ. */
.tbtc-contact .tbtc-cform__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.tbtc-contact .tbtc-cform__row .tbtc-cform__field {
	margin: 0;
}

.tbtc-contact .wpcf7-form label {
	display: block;
	width: 100%;
	margin: 0 0 var(--sp-2);
	font-size: var(--fs-body-lg);
	line-height: var(--lh-body-lg);
	font-weight: var(--fw-medium);
	text-transform: none;
	letter-spacing: normal;
	color: var(--c-text);
}

.tbtc-contact .tbtc-cform__req {
	color: var(--c-orange);
}

.tbtc-contact .wpcf7-form-control-wrap {
	display: block;
}

/* Ô nhập. KHÔNG khai `height` ở rule dùng chung này: nó có nhiều class nên sẽ
   thắng rule riêng của textarea (CLAUDE.md mục 9.6 ②) — chiều cao khai riêng
   ở dưới cho từng loại. */
.tbtc-contact .wpcf7-form input[type="text"],
.tbtc-contact .wpcf7-form input[type="email"],
.tbtc-contact .wpcf7-form input[type="tel"],
.tbtc-contact .wpcf7-form input[type="url"],
.tbtc-contact .wpcf7-form input[type="number"],
.tbtc-contact .wpcf7-form input[type="date"],
.tbtc-contact .wpcf7-form select,
.tbtc-contact .wpcf7-form textarea {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	margin: 0;
	padding: 12px var(--sp-4);
	font-family: inherit;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-text);
	background-color: var(--c-white);
	border: 1px solid var(--c-border-2);
	border-radius: var(--r-md);
	box-shadow: none;
	transition:
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.tbtc-contact .wpcf7-form input[type="text"],
.tbtc-contact .wpcf7-form input[type="email"],
.tbtc-contact .wpcf7-form input[type="tel"],
.tbtc-contact .wpcf7-form input[type="url"],
.tbtc-contact .wpcf7-form select {
	height: 48px;
}

/* Khai chiều cao cụ thể: thẻ <textarea> của CF7 mang rows="10" nên để `auto`
   thì ô cao gấp đôi thiết kế. */
.tbtc-contact .wpcf7-form textarea {
	height: 120px;
	min-height: 120px;
	resize: vertical;
}

.tbtc-contact .wpcf7-form ::placeholder {
	color: var(--c-desc);
	opacity: 1;
}

.tbtc-contact .wpcf7-form input:focus,
.tbtc-contact .wpcf7-form select:focus,
.tbtc-contact .wpcf7-form textarea:focus {
	outline: 0;
	border-color: var(--c-blue);
	box-shadow: 0 0 0 3px var(--c-blue-100);
}

/* Mũi tên của <select>: Flatsome vẽ bằng background-image riêng, ghi đè để
   khớp bo góc và màu của thiết kế. */
.tbtc-contact .wpcf7-form select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23656e7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
	background-size: auto 16px;
}

/* Nút gửi — dùng lại đúng gradient của .btn--primary trong thiết kế. */
.tbtc-contact .wpcf7-form input[type="submit"],
.tbtc-contact .wpcf7-form button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
	margin: var(--sp-2) 0 0;
	padding: 12px var(--sp-6);
	font-family: inherit;
	font-size: var(--fs-body-md);
	line-height: var(--lh-body-md);
	font-weight: var(--fw-semibold);
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--c-white);
	background-color: var(--c-blue);
	background-image: linear-gradient(77deg, #6f2e7d 0%, #913791 69.862%, #b151bf 100%);
	border: 0;
	border-radius: var(--r-md);
	box-shadow: var(--sh-button);
	cursor: pointer;
	transition:
		filter var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease);
}

.tbtc-contact .wpcf7-form input[type="submit"]:hover,
.tbtc-contact .wpcf7-form button[type="submit"]:hover {
	filter: brightness(1.06);
	box-shadow: 0 10px 20px 0 rgba(145, 55, 145, 0.18);
}

.tbtc-contact .wpcf7-form input[type="submit"]:disabled {
	cursor: not-allowed;
	filter: grayscale(0.4);
}

/* Thông báo của CF7 */
.tbtc-contact .wpcf7-form .wpcf7-response-output {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	border-width: 1px;
	border-radius: var(--r-md);
}

.tbtc-contact .wpcf7-not-valid-tip {
	margin-top: var(--sp-1);
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body-sm);
	color: #d63638;
}

.tbtc-contact .wpcf7-form input.wpcf7-not-valid,
.tbtc-contact .wpcf7-form select.wpcf7-not-valid,
.tbtc-contact .wpcf7-form textarea.wpcf7-not-valid {
	border-color: #d63638;
}

/* Vòng quay của CF7 chiếm chỗ ngay cả khi đang ẩn — chỉ hiện lúc đang gửi
   (đúng cách đã xử lý cho popup báo giá, CLAUDE.md mục 9.6 ③). */
.tbtc-contact .wpcf7-spinner {
	display: none;
}

.tbtc-contact .submitting .wpcf7-spinner {
	display: inline-block;
}

/* ==========================================================================
   Khổ mobile — mốc chuyển 767px như phần còn lại của site
   ========================================================================== */

@media (max-width: 767px) {
	.tbtc-contact .container {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	.tbtc-contact__map iframe {
		height: 260px;
	}

	.tbtc-contact__main {
		padding-bottom: var(--sp-12);
	}

	.tbtc-contact__main--no-map {
		padding-top: var(--sp-12);
	}

	.tbtc-contact__box {
		margin-top: -32px;
		border-radius: var(--r-md);
	}

	.tbtc-contact__pane {
		padding: var(--sp-6) var(--sp-5);
	}

	.tbtc-contact__title {
		font-size: var(--fs-h1);
		line-height: var(--lh-h1);
	}

	.tbtc-contact__side-title {
		font-size: var(--fs-h2);
		line-height: var(--lh-h2);
	}

	/* Nhãn và nội dung xuống dòng cho dễ đọc thay vì ép hai đầu một dòng. */
	.tbtc-contact__text {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-1);
	}

	.tbtc-contact__value {
		text-align: left;
	}

	.tbtc-contact .tbtc-cform__row {
		grid-template-columns: 1fr;
	}

	.tbtc-contact .wpcf7-form input[type="submit"],
	.tbtc-contact .wpcf7-form button[type="submit"] {
		width: 100%;
	}
}