/*
 * Form Contact Form 7 và hộp thoại liên hệ — dùng chung toàn site.
 *
 * VÌ SAO TÁCH KHỎI contact.css (15/09/2026): Long yêu cầu "ở sản phẩm cũng như
 * các bài viết ấn contact thì hiện ra form điền". Hộp thoại `#contactModal`
 * (footer.php) in trên MỌI trang và giờ chứa form 479, nên luật cho field CF7
 * phải có mặt ở mọi trang chứ không chỉ /contact/. contact.css chỉ còn bố cục
 * riêng của trang liên hệ.
 *
 * MỌI LUẬT NẰM DƯỚI `.vietape-form` (bọc ngoài form CF7 ở trang liên hệ, trong
 * hộp thoại, hoặc bất kỳ chỗ nào sau này). Không dùng `.form-tape`/`.tape-form`
 * của theme: site.css:162-187 và style.css:77-82 viết cho khối "Helping Center"
 * và dải tìm kiếm, không phải cho form.
 *
 * CHUỖI KẾ THỪA PHẢI ĐÈ (đo 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; quy tắc dự án cấm #08A6D9 làm nền chữ trắng: 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: #0b5cab nút/link (trên trắng 6,7:1) · #0038b8 hover, vòng focus
 * (9,3:1) · #16283d chữ (14:1) · #475569 chữ phụ (7,6:1) · #b91c1c lỗi (6,5:1)
 * · #cbd5e1 viền · #f1f5f9 nền nhạt.
 *
 * @package hkt-simple-child
 */

/* --- Field CF7 ------------------------------------------------------------ */

.vietape-form {
	color: #16283d;
	font-size: 1rem;
	line-height: 1.6;
}

/* Câu dẫn trong form (in bởi markup CF7). */
.vietape-form .vietape-form__dan {
	margin: 0 0 16px;
	color: #475569;
}

/* CF7 bọc mỗi field trong <p> (HTMLFormatter) — BS4 cho <p> margin-bottom 1rem,
 * cộng với margin của cột thành khoảng cách kép. Đặt về 0 rồi tự chia khoảng
 * bằng cột. `:not()` để câu bảo mật và câu dẫn (cũng là <p> trong form) giữ
 * được margin riêng — không có :not thì luật (0,2,1) này đè luật (0,2,0) của
 * chúng. */
.vietape-form .wpcf7-form p:not(.vietape-form__bao-mat):not(.vietape-form__dan) {
	margin: 0;
}

.vietape-form .wpcf7-form .row > [class*="col-"] {
	margin-bottom: 16px;
}

.vietape-form .wpcf7-form label {
	display: block;
	margin: 0 0 6px;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.4;
	color: #16283d;
}

.vietape-form .vietape-form__bat-buoc {
	color: #b91c1c;
	font-weight: 700;
	margin-left: 2px;
}

/* Đa số ô là bắt buộc nên ghi rõ ô TUỲ CHỌN rẻ hơn giải thích dấu *. */
.vietape-form .vietape-form__tuy-chon {
	font-weight: 400;
	color: #475569;
}

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

/* Trường nhập. `height: auto` là dòng quan trọng nhất của file — không có nó
 * textarea cao 56px = một dòng. `font: inherit` vì Dealaro đặt font riêng cho
 * input trong khi thân trang đã đổi sang system-ui. */
.vietape-form .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.vietape-form .wpcf7-form textarea,
.vietape-form .wpcf7-form select {
	display: block;
	width: 100%;
	height: auto;
	min-height: 46px;
	padding: 10px 14px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #fff;
	color: #16283d;
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vietape-form .wpcf7-form textarea {
	min-height: 140px;
	resize: vertical;
}

.vietape-form .wpcf7-form input::placeholder,
.vietape-form .wpcf7-form textarea::placeholder {
	color: #6b7280;
	opacity: 1;
}

/* Vòng focus rõ: viền đổi màu VÀ quầng 3px. Theme cha có chỗ đặt
 * `outline: none` cho input; quầng box-shadow không phụ thuộc outline. */
.vietape-form .wpcf7-form input:not([type="submit"]):focus,
.vietape-form .wpcf7-form textarea:focus,
.vietape-form .wpcf7-form select:focus {
	outline: none;
	border-color: #0b5cab;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(11, 92, 171, .22);
}

/* Field sai: CF7 thêm `aria-invalid="true"` và `.wpcf7-not-valid` — viền đỏ để
 * mắt tìm được ô nào sai ngay cả khi chưa đọc chữ. */
.vietape-form .wpcf7-form .wpcf7-not-valid,
.vietape-form .wpcf7-form [aria-invalid="true"] {
	border-color: #b91c1c;
}

.vietape-form .wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 5px;
	font-size: .85rem;
	line-height: 1.4;
	color: #b91c1c;
}

.vietape-form .vietape-form__bao-mat {
	font-size: .875rem;
	color: #475569;
	margin: 4px 0 14px;
}

/* Nút gửi — cùng bộ số với `.vt-nut-chinh` của trang sản phẩm, hover #0038b8
 * (đậm hơn) thay vì #08A6D9. Rộng theo nội dung, không kéo 100% như Dealaro ép. */
.vietape-form .wpcf7-form .wpcf7-submit {
	display: inline-block;
	width: auto;
	height: auto;
	min-width: 180px;
	padding: 12px 28px;
	border: 1px solid #0b5cab;
	border-radius: 8px;
	background: #0b5cab;
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.vietape-form .wpcf7-form .wpcf7-submit:hover {
	background: #0038b8;
	border-color: #0038b8;
	color: #fff;
}

.vietape-form .wpcf7-form .wpcf7-submit:focus-visible {
	outline: 2px solid #0038b8;
	outline-offset: 3px;
}

.vietape-form .wpcf7-form .wpcf7-submit:disabled {
	opacity: .65;
	cursor: not-allowed;
}

/* Vòng xoay của CF7 đứng cạnh nút; đổi màu cho hợp nền trắng. */
.vietape-form .wpcf7-form .wpcf7-spinner {
	background-color: #0b5cab;
	margin: 0 12px;
	vertical-align: middle;
}

/* Thông báo sau khi gửi. CF7 mặc định: viền 2px, margin 2em .5em — lệch khỏi
 * mép. Ba trạng thái, ba màu nền nhạt + chữ đậm cùng họ, tương phản đều trên
 * 7:1. Bốn class để thắng `.wpcf7 form.sent .wpcf7-response-output`. */
.vietape-form .wpcf7 form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	background: #f8fafc;
	color: #16283d;
	font-size: .95rem;
	line-height: 1.5;
}

.vietape-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: #86efac;
	background: #f0fdf4;
	color: #14532d;
}

.vietape-form .wpcf7 form.failed .wpcf7-response-output,
.vietape-form .wpcf7 form.aborted .wpcf7-response-output {
	border-color: #fca5a5;
	background: #fef2f2;
	color: #7f1d1d;
}

.vietape-form .wpcf7 form.invalid .wpcf7-response-output,
.vietape-form .wpcf7 form.unaccepted .wpcf7-response-output,
.vietape-form .wpcf7 form.spam .wpcf7-response-output {
	border-color: #fcd34d;
	background: #fffbeb;
	color: #78350f;
}

/* Fallback khi form CF7 không còn (plugin tắt / form bị xoá). */
.vietape-form .vietape-form__thay-the {
	padding: 16px 18px;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	background: #f8fafc;
}

.vietape-form .vietape-form__thay-the p {
	margin: 0;
}

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

.vietape-form a:hover,
.vietape-form a:focus-visible {
	color: #0038b8;
}

/* --- Hộp thoại liên hệ #contactModal (footer.php) ------------------------- */

/*
 * Bootstrap 4.4.1 của theme cha lo phần mở/đóng. Ở đây chỉ chỉnh dáng: rộng
 * hơn mặc định để form 2 cột không bị bóp, bo góc, tiêu đề navy, và dòng thông
 * tin liên hệ nhỏ dưới form.
 */
/*
 * Đo ở 390px (iframe trong Chrome thật, 15/09/2026): nút ☰ của header (theme
 * cha đặt z-index rất cao, position fixed) đè lên tiêu đề hộp thoại vì Bootstrap
 * 4 chỉ cho modal z-index 1050 và backdrop 1040. Nâng cả hai lên trên mọi thứ
 * của theme. `.modal-backdrop` là phần tử Bootstrap gắn thẳng vào <body>, không
 * mang class riêng của ta nên phải nhắm trực tiếp — site hiện chỉ có một modal.
 */
.modal.vietape-modal {
	z-index: 100010;
}

.modal-backdrop {
	z-index: 100000;
}

/*
 * Bootstrap 4 chỉ đặt `max-width: 500px; margin: 1.75rem auto` từ 576px. Nếu
 * khai thẳng 760px không media query thì ở dải 576–799px hộp có width:auto,
 * margin auto = 0 → dính sát hai mép màn hình (iPhone xoay ngang, tablet nhỏ).
 * Dưới 576px để nguyên luật gốc của Bootstrap (margin .5rem).
 */
@media (min-width: 576px) {
	.vietape-modal .modal-dialog {
		max-width: calc(100% - 2rem);
	}
}

@media (min-width: 800px) {
	.vietape-modal .modal-dialog {
		max-width: 760px;
	}
}

.vietape-modal .modal-content {
	border: 0;
	border-radius: 10px;
	box-shadow: 0 24px 60px rgba(16, 42, 67, .28);
}

.vietape-modal .modal-header {
	align-items: flex-start;
	padding: 22px 26px 14px;
	border-bottom: 1px solid #e2e8f0;
}

/* Khối tiêu đề + câu phụ; nút đóng đứng bên phải nhờ margin-left:auto. */
.vietape-modal .vietape-modal__dau {
	flex: 1 1 auto;
	min-width: 0;
}

/* `padding: 0` vì theme cha (hktheme.css:12) cho mọi h2 padding 5px trên/dưới,
 * làm tiêu đề lệch khỏi nút đóng. */
.vietape-modal .modal-title {
	margin: 0;
	padding: 0;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1.25;
	color: #16283d;
}

.vietape-modal .vietape-modal__phu {
	margin: 4px 0 0;
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.45;
	color: #475569;
}

/* Nút đóng của Bootstrap: vùng chạm tối thiểu 44x44 (WCAG 2.5.5), có focus.
 * Bootstrap cho `.close` float:right nhưng trong header flex thì float bị bỏ
 * qua; inline-flex để căn dấu × vào giữa vùng chạm. */
.vietape-modal .modal-header .close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: -8px -10px 0 auto;
	padding: 0 8px;
	font-size: 1.9rem;
	line-height: 1;
	color: #475569;
	opacity: 1;
	text-shadow: none;
}

.vietape-modal .modal-header .close:hover {
	color: #16283d;
}

.vietape-modal .modal-header .close:focus-visible {
	outline: 2px solid #0038b8;
	outline-offset: 2px;
}

.vietape-modal .modal-body {
	padding: 20px 26px 24px;
}

.vietape-modal .vietape-modal__lienhe {
	margin: 18px 0 0;
	padding-top: 14px;
	border-top: 1px solid #e2e8f0;
	font-size: .875rem;
	line-height: 1.6;
	color: #475569;
}

.vietape-modal .vietape-modal__lienhe a {
	font-weight: 600;
}

@media (max-width: 575.98px) {
	.vietape-modal .modal-header,
	.vietape-modal .modal-body {
		padding-left: 18px;
		padding-right: 18px;
	}
}

/* --- Nút mở hộp thoại dùng chung ------------------------------------------- */

.vietape-nut-chinh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 11px 24px;
	border: 1px solid #0b5cab;
	border-radius: 8px;
	background: #0b5cab;
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}

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

.vietape-nut-chinh:focus-visible {
	outline: 2px solid #0038b8;
	outline-offset: 3px;
	color: #fff;
}

/* --- Khối kêu gọi cuối bài viết (single.php) ------------------------------- */

/*
 * Bài viết là nơi kỹ sư tới từ Google khi tìm theo ứng dụng; đọc xong mà không
 * có lối rẽ là mất lead. Nền nhạt + vạch trái cùng ngôn ngữ với hộp "For a
 * faster answer" ở trang liên hệ.
 */
.vietape-cta-bai {
	margin: 36px 0 8px;
	padding: 22px 24px;
	border-left: 4px solid #0b5cab;
	border-radius: 8px;
	background: #f1f5f9;
	color: #16283d;
}

/* h2 chứ không phải h3: khối này ngang hàng với các mục của bài, và bài ngắn
 * không có h2 sẽ nhảy h1 → h3. Cỡ chữ giữ nhỏ bằng CSS. `padding: 0` vì theme
 * cha cho h2 padding 5px. */
.vietape-cta-bai h2 {
	margin: 0 0 8px;
	padding: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
	color: #16283d;
}

.vietape-cta-bai p {
	margin: 0 0 16px;
	font-size: .95rem;
	line-height: 1.55;
	color: #475569;
}

/* --- Ô bẫy chống spam (inc/chong-spam.php) --------------------------------- */

/*
 * Đẩy ra ngoài màn hình chứ KHÔNG `display:none`: bot khôn hơn bỏ qua ô
 * display:none, còn ô "có trong luồng" nhưng nằm ngoài viewport thì vẫn điền.
 * Âm sang TRÁI để không sinh thanh cuộn ngang trong hộp thoại. `!important`
 * vì theme cha có `input { width: 100% }` và `p { margin }` với đủ kiểu selector.
 */
.vietape-hp {
	position: absolute !important;
	left: -10000px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
}