/**
 * TRANG LIÊN HỆ — `page-lien-he.php`  (T-602)
 *
 * Nguồn số đo: `docs/potaco-layout/contact/contact-pc.png` (đo ×1,28 về 1200)
 * · `contact-sp.png` · spec pixel mobile · `docs/wp/spec/contact/1-wireframe.md` §0.3.
 *
 * ⚠️ Thứ tự DOM là thứ tự MOBILE (quick → thông tin → form → FAQ). PC xếp lại
 *    bằng `grid-template-areas`, KHÔNG dùng `order` (spec §0.4).
 *
 * ⚠️ Form là markup của Fluent Forms (`.ff-el-*`) — plugin nạp CSS riêng, file
 *    này ghi đè trong phạm vi `.contact-form` cho khớp design-system §5.3:
 *    ô 44px, viền `--c-border`, bo 8, focus navy + glow, lỗi đỏ 13px dưới ô.
 *
 * ⚠️ Banner → nội dung 40px do `components.css` §8b lo (`--hero-gap`). File
 *    này KHÔNG tự đệm trên cho `.contact-layout` (CLAUDE.md §5).
 *
 * ⚠️ Theme không có `box-sizing: border-box` toàn cục — ô nhập có `width:
 *    100%` + padding nên tự khai (bài học §20.7).
 */

/* =========================================================================
 * 1. BỐ CỤC — hai cột 7fr/6fr, card form kéo dài bằng cột phải
 * ====================================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	padding-block: 0 16px;
}

/* Hai cột chỉ từ 992 — 768–991 vẫn 1 cột theo DOM (spec 5-frontend §0.3). */
@media (min-width: 992px) {
	.contact-layout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
		grid-template-areas:
			"form info"
			"form faq";
		gap: 24px;
		align-items: stretch;
	}

	.contact-form { grid-area: form; }
	.contact-info { grid-area: info; }
	.contact-faq  { grid-area: faq; }
}

/* Hành động nhanh chỉ có ở <768 (CC-03) — PHP luôn in, CSS ẩn. */
@media (min-width: 768px) {
	.contact-layout .quick-actions {
		display: none;
	}
}

/* ---- Card chung — bốn card cùng một bộ da (spec §0.2 #8) ---------------- */

.contact-card {
	min-width: 0;
	padding: 16px;
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
}

@media (min-width: 768px) {
	.contact-card {
		padding: 20px;
	}
}

.contact-card__title {
	margin: 0 0 4px;
	font-size: 24px;
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--c-heading);
	text-transform: uppercase;
}

.contact-card__desc {
	margin: 0 0 16px;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-text-muted);
}

/* =========================================================================
 * 2. HÀNH ĐỘNG NHANH — chỉ <768px (C-16)
 * ====================================================================== */

.quick-actions {
	padding: 12px;
	background: var(--c-bg-alt);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-lg);
}

.quick-actions__title {
	margin: 0 0 8px;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semi);
	letter-spacing: .04em;
	color: var(--c-heading);
	text-transform: uppercase;
}

.quick-actions__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.quick-actions__btn {
	gap: 8px;
	min-height: 44px;
	padding: 10px 12px; /* 44 = 10 + 24 + 10, khớp spec pixel §6 */
	font-size: 14px; /* spec pixel §6 — token --fs-sm là 13 ở mobile */
}

/* =========================================================================
 * 3. THÔNG TIN LIÊN HỆ — lưới 2×2 ≥768, 1 cột <768; MXH trong card
 * ====================================================================== */

.contact-info__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-info__cell {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: var(--border-w) solid var(--c-border);
}

.contact-info__cell:first-child {
	border-top: 0;
}

@media (min-width: 768px) {
	.contact-info__grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}

	.contact-info__cell {
		padding: 16px 0;
	}

	/* Kẻ dọc giữa hai cột + kẻ ngang giữa hai hàng; ô rỗng đã bỏ nên
	   `auto-fit` tự dồn — không có ô trống. */
	.contact-info__cell:nth-child(2n) {
		padding-left: 24px;
		border-left: var(--border-w) solid var(--c-border);
	}

	.contact-info__cell:nth-child(2) {
		border-top: 0;
	}

	.contact-info__cell:nth-child(2n + 1) {
		padding-right: 24px;
	}
}

.contact-info__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--c-primary);
	background: var(--c-primary-50);
	border-radius: var(--radius-full);
}

.contact-info__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.contact-info__label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-heading);
}

.contact-info__value {
	font-size: var(--fs-sm);
	font-style: normal;
	line-height: 1.5;
	color: var(--c-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.contact-info__value:hover,
a.contact-info__value:focus-visible {
	text-decoration: underline;
}

.contact-info__value--phone {
	font-size: 18px;
	font-weight: var(--fw-bold);
	color: var(--c-accent-strong);
}

.contact-info__social-label {
	margin: 16px 0 8px;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semi);
	color: var(--c-heading);
}

.contact-info__social {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.contact-info__social {
		gap: 24px;
	}
}

/* Đĩa navy đồng màu — DS cấm màu thương hiệu (spec §0.4-3); hover cam đậm
   cùng chiều `.site-footer__social-link`. */
.contact-info__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--c-text-invert);
	background: var(--c-primary);
	border-radius: var(--radius-full);
	transition: background var(--transition);
}

.contact-info__social-link:hover,
.contact-info__social-link:focus-visible {
	background: var(--c-accent-strong);
}

@media (max-width: 767px) {
	.contact-info__social-link {
		width: 36px;
		height: 36px;
	}
}

/* =========================================================================
 * 4. FORM — ghi đè markup Fluent Forms theo design-system §5.3
 * ====================================================================== */

.contact-form .fluentform {
	margin: 0;
}

.contact-form .ff-el-group {
	margin-bottom: 16px;
}

.contact-form .ff-el-input--label {
	margin-bottom: 6px;
}

.contact-form .ff-el-input--label label {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: 20px;
	color: var(--c-heading);
}

.contact-form .ff-el-is-required.asterisk-right label::after {
	color: var(--c-error);
}

.contact-form .ff-el-form-control {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	color: var(--c-text);
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	box-shadow: none;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.contact-form .ff-el-form-control::placeholder {
	color: var(--c-text-muted);
	opacity: 1;
}

.contact-form .ff-el-form-control:hover {
	border-color: var(--c-border-strong);
}

.contact-form .ff-el-form-control:focus {
	border-color: var(--c-primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--c-primary-50);
}

/* Icon trái trong ô nhập — theo `name`, không sửa markup plugin (spec §0.2). */
.contact-form input[name="full_name"],
.contact-form input[name="phone"],
.contact-form input[name="email"] {
	padding-left: 40px;
	background-repeat: no-repeat;
	background-position: 14px center;
	background-size: 16px 16px;
}

.contact-form input[name="full_name"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20.5c0-3.6 3.6-6 8-6s8 2.4 8 6'/%3E%3C/svg%3E");
}

.contact-form input[name="phone"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
}

.contact-form input[name="email"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

.contact-form select.ff-el-form-control {
	padding-right: 40px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px 16px;
}

.contact-form textarea.ff-el-form-control {
	min-height: 110px;
	resize: vertical;
}

@media (max-width: 767px) {
	.contact-form textarea.ff-el-form-control {
		min-height: 120px;
	}
}

/* Hai ô ngang (Fluent Forms container 2 cột) — xếp dọc <768 (spec §0.3). */
.contact-form .ff-t-container {
	display: flex;
	gap: 16px;
}

.contact-form .ff-t-cell {
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}

@media (max-width: 767px) {
	.contact-form .ff-t-container {
		flex-direction: column;
		gap: 0;
	}
}

/* Bộ đếm ký tự — `contact.js` chèn dưới textarea (E-T01). */
.contact-form__counter {
	display: block;
	margin-top: 4px;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	text-align: right;
}

.contact-form__counter--warn {
	color: var(--c-warning);
}

.contact-form__counter--max {
	color: var(--c-error);
}

/* Checkbox đồng ý */
.contact-form .ff-el-form-check {
	margin: 0;
}

.contact-form .ff-el-form-check-label {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-text);
	cursor: pointer;
}

.contact-form .ff-el-form-check-input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--c-primary);
}

.contact-form .ff-el-form-check-label a {
	color: var(--c-primary);
	text-decoration: underline;
}

.contact-form .ff-el-form-check-label a:hover {
	color: var(--c-accent-strong);
}

/* Nút gửi — full ngang, cao 52, cam đậm, icon gửi trước chữ (JS chèn). */
.contact-form .ff_submit_btn_wrapper {
	margin: 16px 0 0;
}

/* Specificity 0,4,0 — `.ff-default .ff_btn_style` (0,2,0) của plugin in SAU CSS theme nên cùng bậc là thua. */
.contact-form .ff-default .ff_btn_style.ff-btn-submit {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 12px 20px;
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--fw-semi);
	color: var(--c-text-invert);
	text-transform: uppercase;
	letter-spacing: .02em;
	background: var(--c-accent-strong);
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition);
}

.contact-form .ff-default .ff_btn_style.ff-btn-submit:hover {
	opacity: 1; /* plugin hover = opacity .8 */
	background: var(--c-accent-hover);
}

.contact-form .ff-default .ff_btn_style.ff-btn-submit:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: 2px;
}

.contact-form .ff-default .ff_btn_style.ff-btn-submit[disabled],
.contact-form .ff-default.ff-working .ff_btn_style.ff-btn-submit {
	cursor: wait;
	opacity: .7;
}

/* Lỗi: viền đỏ + chữ đỏ 13px ngay dưới ô (E-T02) */
.contact-form .ff-default .ff-el-is-error .ff-el-form-control {
	border-color: var(--c-error);
}

.contact-form .ff-el-is-error .ff-el-form-control:focus {
	box-shadow: 0 0 0 3px var(--c-error-bg);
}

.contact-form .error.text-danger,
.contact-form .contact-form__error {
	margin-top: 4px;
	font-size: var(--fs-sm);
	line-height: 1.5;
	color: var(--c-error);
}

.contact-form .ff-errors-in-stack {
	margin-top: 12px;
	font-size: var(--fs-sm);
	color: var(--c-error);
}

.contact-form__secure {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin: 12px 0 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* CF-99 — chưa cấu hình form */
.contact-form__notice {
	padding: 16px;
	font-size: 15px;
	line-height: var(--lh-body);
	color: var(--c-text);
	background: var(--c-bg-alt);
	border-radius: var(--radius-md);
}

.contact-form__notice p {
	margin: 0 0 12px;
}

.contact-form__notice p:last-child {
	margin-bottom: 0;
}

.contact-form__notice a {
	font-weight: var(--fw-semi);
	color: var(--c-primary);
}

.contact-form__notice--admin {
	background: var(--c-warning-bg);
	border: var(--border-w) solid var(--c-warning);
}

.contact-form__notice-hint {
	margin-top: 12px;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

/* =========================================================================
 * 5. FAQ — hộp viền bo 8 thay cho hàng kẻ dưới (spec §0.2 #4)
 * ====================================================================== */

.contact-faq .single-block__title {
	margin: 0 0 16px;
	font-size: 24px;
	text-transform: uppercase;
}

/* `.single-block` là component trang chi tiết: có margin-bottom = section-gap và gạch cam
   dưới tiêu đề — trong card này bỏ cả hai cho cùng bộ da với ba card kia (đo: card FAQ
   cao 421 thay vì ≈318 vì mang theo margin đó). */
.contact-faq .single-block {
	margin-bottom: 0;
}

.contact-faq .single-block__title::after {
	content: none;
}

.contact-faq .accordion {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-faq .accordion__item {
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	transition: border-color var(--transition), background var(--transition);
}

.contact-faq .accordion__summary {
	box-sizing: border-box; /* min-height 44 GỒM padding — content-box ra 66 */
	min-height: 44px;
	padding: 10px 16px;
	font-size: var(--fs-sm);
}

.contact-faq .accordion__body {
	padding: 0 16px 12px;
	font-size: var(--fs-sm);
}

.contact-faq .accordion__item[open] {
	border-color: var(--c-border-strong);
}

@media (hover: hover) and (pointer: fine) {
	.contact-faq .accordion__item:hover {
		background: var(--c-bg-alt);
		border-color: var(--c-border-strong);
	}
}

.contact-faq .accordion__summary:focus-visible {
	outline: 2px solid var(--c-primary);
	outline-offset: -2px;
	border-radius: var(--radius-md);
}

@media (max-width: 767px) {
	.contact-faq .accordion__summary {
		min-height: 56px;
		font-size: 15px;
	}
}

/* =========================================================================
 * 6. BẢN ĐỒ — card full, khung 220 PC / 280 SP (GĐ-02)
 * ====================================================================== */

.contact-map .lazy-map {
	--map-h: 220px;
}

@media (max-width: 767px) {
	.contact-map .lazy-map {
		--map-h: 280px;
	}
}

.contact-map__frame {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

/* Không có card bản đồ ⇒ hai cột là khối cuối, cách CTA như trang khác. */
.contact-layout--last {
	padding-bottom: 64px;
}

@media (max-width: 767px) {
	.contact-layout--last {
		padding-bottom: 48px;
	}
}

/* Card bản đồ → CTA band: ảnh PC đo ≈17px (956→969 ×1,28), spec pixel SP §29 ghi 48. */
.contact-map-wrap {
	padding-bottom: 16px;
}

@media (max-width: 767px) {
	.contact-map-wrap {
		padding-bottom: 48px;
	}
}