/* =============================================================================
   Khối "Nhận tư vấn cho dự án của bạn" — trang chủ, khối 9
   -----------------------------------------------------------------------------
   Markup do shortcode [haliti_form_tu_van] sinh ra, nằm ở
   haliti-core/modules/frontend/43-form-tu-van.php

   Chỉ dùng biến từ tokens.css, không gõ thẳng mã màu.
   ========================================================================== */

/*
 * 16/08/2026 — đổi từ dải tràn viền sang thẻ, cùng lý do với .ht-nang-luc.
 *
 * Khác hai khối kia ở một điểm: `__trong` của form giữ 760px (bề rộng dễ điền),
 * KHÔNG kéo lên 1343px. Nên phần trắng đặt ở một lớp riêng `__the` rộng 1343px,
 * còn form vẫn hẹp và căn giữa bên trong thẻ.
 */

.ht-tu-van {
	background: transparent;
	color: var(--ht-chu);
	padding-inline: 15px;
}

.ht-tu-van__the {
	/* 1343px, khai trong tokens.css. Ba khoi tu viet deu phai lay tu day —
	   go cung con so o tung file thi lan sau doi be rong phai nho sua bon cho. */
	max-width: var(--ht-rong-khoi);
	margin-inline: auto;
	background: var(--ht-nen);
	border-radius: var(--ht-bo-goc-the);
	/* Khai bao ro, khong dua vao reset toan cuc: max-width phai la be rong TONG
	   ke ca padding, neu khong the se thanh 1343+64 = 1407px va tho ra ngoai
	   cac the Flatsome. */
	box-sizing: border-box;
	/* 30px doc theo yeu cau 16/08/2026 (truoc la --ht-cach-8 = 64px, qua rong).
	   30 nam ngoai thang 4px cua tokens.css — bac gan nhat la 32px. Ghi thang so
	   o day thay vi them token moi vi day la mot ngoai le, khong phai bac moi.

	   20/08/2026 — chieu ngang ha tu 32px xuong 30px cho khop mep trai chung
	   cua ca trang. Xem chu thich day du o cuoi trang-chu.css. */
	padding: 30px;
}

@media (max-width: 640px) {
	/* 20/08/2026 — 15px xuong 10px cho thang mep voi cac khoi Flatsome tren
	   dien thoai. Xem chu thich day du trong khoi-nang-luc.css. */
	.ht-tu-van {
		padding-inline: 10px;
	}

	.ht-tu-van__the {
		padding: 30px var(--ht-cach-4);
	}
}

/*
 * Hẹp hơn các khối khác (760px thay vì 1370px) là CÓ CHỦ ĐÍCH.
 * Ô nhập trải hết 1370px khiến mắt phải quét ngang rất xa giữa nhãn và ô, và
 * form trông như một bảng dữ liệu chứ không phải một lời mời. Đây là khối duy
 * nhất trên trang chủ không cần khớp bề rộng Flatsome vì nó không có lưới sản
 * phẩm nào để thẳng hàng cùng.
 */
.ht-tu-van__trong {
	max-width: 760px;
	margin-inline: auto;
}

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

.ht-tu-van__dau {
	text-align: center;
	margin-bottom: var(--ht-cach-6);
}

.ht-tu-van__h2 {
	font-family: var(--ht-font-tieu-de);
	font-size: var(--ht-co-h2);
	font-weight: var(--ht-dam-tieu-de);
	line-height: var(--ht-cao-dong-tieu-de);
	color: var(--ht-chu);
	margin: 0 0 var(--ht-cach-4);
}

.ht-tu-van__phu {
	font-size: var(--ht-co-than);
	line-height: var(--ht-cao-dong);
	color: var(--ht-chu-mo);
	margin: 0;
}

/* --- Thông báo kết quả --------------------------------------------------- */

.ht-tu-van__bao {
	margin: 0 0 var(--ht-cach-5);
	padding: var(--ht-cach-4);
	border-radius: var(--ht-bo-goc);
	border-inline-start: 3px solid;
	font-size: var(--ht-co-than);
	line-height: var(--ht-cao-dong);
	background: var(--ht-nen-phu);
}

.ht-tu-van__bao--ok {
	border-color: var(--ht-thanh-cong);
	color: var(--ht-chu);
}

.ht-tu-van__bao--loi {
	border-color: var(--ht-nhan);
	color: var(--ht-chu);
}

/* --- Bẫy mật -------------------------------------------------------------
   ⚠️ ĐỪNG ĐỔI SANG `display: none` HAY `type="hidden"`.
   Bot đời mới bỏ qua các ô bị ẩn theo hai cách đó. Đẩy ra ngoài khung nhìn thì
   ô vẫn "tồn tại" với bot nhưng người dùng không thấy và không tab tới được
   (module đã đặt tabindex="-1").
   ------------------------------------------------------------------------ */

.ht-tu-van__bay {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Lưới ô nhập --------------------------------------------------------- */

.ht-tu-van__luoi {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ht-cach-4) var(--ht-cach-5);
	margin-bottom: var(--ht-cach-5);
}

.ht-tu-van__o {
	display: flex;
	flex-direction: column;
	gap: var(--ht-cach-2);
	margin: 0;
}

.ht-tu-van__o--rong {
	grid-column: 1 / -1;
}

.ht-tu-van__nhan {
	font-size: var(--ht-co-nho);
	font-weight: var(--ht-dam-vua);
	color: var(--ht-chu);
}

.ht-tu-van__sao {
	color: var(--ht-nhan);
}

/*
 * Ghi đè kiểu ô nhập của Flatsome. Flatsome đặt box-shadow inset và chiều cao
 * cố định cho input, làm ô lệch hẳn tông so với phần còn lại của bộ token.
 */
.ht-tu-van .ht-tu-van__nhap {
	width: 100%;
	height: auto;
	padding: var(--ht-cach-3) var(--ht-cach-4);
	font-size: var(--ht-co-than);
	line-height: var(--ht-cao-dong);
	color: var(--ht-chu);
	background: var(--ht-nen);
	border: 1px solid var(--ht-duong-vien);
	border-radius: var(--ht-bo-goc);
	box-shadow: none;
	margin: 0;
}

.ht-tu-van .ht-tu-van__nhap:focus {
	border-color: var(--ht-nhan);
	outline: 2px solid var(--ht-nhan);
	outline-offset: 1px;
}

.ht-tu-van .ht-tu-van__vung {
	resize: vertical;
	min-height: 120px;
}

/* --- Nút gửi ------------------------------------------------------------- */

.ht-tu-van__gui {
	margin: 0 0 var(--ht-cach-3);
	text-align: center;
}

.ht-tu-van .ht-tu-van__nut {
	display: inline-block;
	padding: var(--ht-cach-4) var(--ht-cach-7);
	background: var(--ht-nhan);
	color: var(--ht-chu-tren-nhan);
	font-weight: var(--ht-dam-vua);
	font-size: var(--ht-co-than);
	line-height: 1.2;
	height: auto;
	border: 0;
	border-radius: var(--ht-bo-goc);
	cursor: pointer;
}

.ht-tu-van .ht-tu-van__nut:hover,
.ht-tu-van .ht-tu-van__nut:focus-visible {
	background: var(--ht-nhan-hover);
	color: var(--ht-chu-tren-nhan);
}

.ht-tu-van__ghi-chu {
	margin: 0;
	text-align: center;
	font-size: var(--ht-co-nho);
	color: var(--ht-chu-mo);
}

/* --- Điện thoại ---------------------------------------------------------- */

@media (max-width: 640px) {
	.ht-tu-van__h2 {
		font-size: 28px;
	}

	/* Một cột: hai ô cạnh nhau trên màn hẹp làm ô nhập ngắn tới mức khó gõ. */
	.ht-tu-van__luoi {
		grid-template-columns: 1fr;
	}
}