/*
 * Đăng ký — Figma node 28:1582 (1440×893, nền trắng)
 * Cột trái (80): tiêu đề y=76, mô tả y=250 (632), hộp form y=336 (632, padding 32, Background 2, bo 8).
 * Poster (811, 76) 482×685 bo 8 — bấm mở lightbox.
 * Form Contact Form 7: mỗi trường là 1 hàng chữ trên nền trong, đường kẻ dưới rgba(163,116,98,.2).
 */

.vg-register {
	position: relative;
	padding: 76px 16px 132px;
	background-color: var(--vg-color-bg-1);
}

/* Neo cho menu "Chính sách" — chừa chỗ cho header sticky */
.vg-register__anchor {
	position: absolute;
	top: -85px;
}

.vg-register__inner {
	display: grid;
	grid-template-columns: minmax(0, 632px) minmax(0, 482px);
	column-gap: 99px;
	align-items: start;
	max-width: 1280px;
	margin: 0 auto;
}

.vg-register__title {
	display: flex;
	flex-direction: column;
	margin: 0;
	color: var(--vg-color-primary);
	font-family: var(--vg-font-heading);
	font-size: var(--vg-h3-size);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.vg-register__title-script {
	color: var(--vg-color-description-gold);
	font-family: var(--vg-font-subheading);
	letter-spacing: 0.04em;
}

.vg-register__intro {
	margin: 12px 0 0;
	color: var(--vg-color-description-blue);
	font-family: var(--vg-font-body);
	font-size: 14px;
	line-height: 1.5;
}

.vg-register__poster {
	display: block;
	overflow: hidden;
	aspect-ratio: 482 / 685;
	border-radius: 8px;
	cursor: zoom-in;
}

.vg-register__poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.vg-register__poster:hover img {
	transform: scale(1.03);
}

/* ---------- Form (Contact Form 7) ---------- */
.vg-form {
	margin-top: 44px;
	padding: 32px;
	border-radius: 8px;
	background-color: var(--vg-color-bg-2);
}

.vg-form .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
}

.vg-form .wpcf7-form > p {
	margin: 0;
}

.vg-form__fields {
	display: flex;
	flex-direction: column;
}

.vg-form__field {
	display: block;
	margin: 0;
	border-bottom: 1px solid rgba(163, 116, 98, 0.2);
	transition: border-color 0.3s ease;
}

.vg-form__field:focus-within {
	border-bottom-color: var(--vg-color-description-gold);
}

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

.vg-form input[type="text"],
.vg-form input[type="tel"],
.vg-form input[type="email"],
.vg-form textarea {
	--theme-form-field-border-initial-color: transparent;
	--theme-form-field-border-focus-color: transparent;

	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 16px 0 15px; /* Figma: hàng 53px đã gồm đường kẻ 1px */
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #31394a;
	font-family: var(--vg-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	outline: none;
}

.vg-form textarea {
	height: 84px; /* Figma: hàng "Thông tin cần tư vấn" cao 85 gồm đường kẻ */
	resize: none;
}

.vg-form .wpcf7-form-control::placeholder {
	color: #31394a;
	font-weight: 400;
	opacity: 1;
}

.vg-form__actions {
	display: flex;
	justify-content: flex-end;
}

/* Nút gửi (input không có ::after → mũi tên bằng ảnh nền) */
.vg-form .vg-form__submit {
	padding-right: 42px;
	background-image: url("../icons/move-right.svg");
	background-position: right 16px center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

.vg-form .wpcf7-spinner {
	position: absolute;
	margin: 12px 0 0 -40px;
}

/* Thông báo lỗi / thành công */
.vg-form .wpcf7-not-valid-tip {
	margin: -8px 0 8px;
	color: #b3261e;
	font-family: var(--vg-font-body);
	font-size: 12px;
}

.vg-form .wpcf7-response-output {
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 8px;
	background-color: #fff;
	color: var(--vg-color-primary);
	font-family: var(--vg-font-body);
	font-size: 14px;
	line-height: 1.5;
}

.vg-form .wpcf7-form.invalid .wpcf7-response-output,
.vg-form .wpcf7-form.failed .wpcf7-response-output {
	color: #b3261e;
}

.vg-form .wpcf7-form.sent .wpcf7-response-output {
	color: #2e7d32;
}

/* Tablet: vẫn 2 cột (form trái – poster phải), co theo tỉ lệ 632 : 482 */
@media (max-width: 1199.98px) {
	.vg-register {
		padding-bottom: 72px;
	}

	.vg-register__inner {
		grid-template-columns: minmax(0, 632fr) minmax(0, 482fr);
		column-gap: 32px;
		align-items: center; /* poster ngắn hơn cột form → căn giữa cho cân */
	}
}

/* Điện thoại: xếp chồng, poster dưới form */
@media (max-width: 689.98px) {
	.vg-register {
		padding-top: 56px;
	}

	.vg-register__inner {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
		align-items: start;
	}

	.vg-register__poster {
		max-width: 482px;
		width: 100%;
		margin: 0 auto;
	}

	.vg-form {
		padding: 24px 20px;
	}
}