/* Bắc cầu giữa mã của Fluent Forms và bản thiết kế.
 *
 * Vì sao cần: bản thiết kế viết <form class="su-form"><div class="su-field">.
 * Fluent Forms in ra thẻ bọc của riêng nó: một div ngoài cùng, một form, một
 * fieldset, rồi mỗi ô là ff-el-group với hai lớp div con cho nhãn và ô nhập.
 *
 * Thủ thuật giữ cho phần việc này nhỏ: đặt container_class của Fluent Forms
 * thành su-field (xem inc/du-lieu/nap-bieu-mau.php), và CSS của bản thiết kế
 * toàn dùng bộ chọn hậu duệ - .su-field label, .su-field input - nên nó bám
 * được qua lớp bọc. Tệp này chỉ xử nốt những chỗ lớp bọc làm hỏng bố cục.
 *
 * Nạp SAU site.css.
 */

/* ===== Khung ngoài ====================================================== */
/* Lưới phải nằm ở fieldset, vì đó mới là thẻ chứa các ô. Thẻ bọc ngoài cùng
   chỉ có đúng một con nên để lưới ở đó là vô nghĩa. */
.su-form,
.dang-ky {
	display: block;
}

.su-form .frm-fluent-form fieldset {
	display: grid;
	gap: var(--space-5);
}

/* ===== Những chỗ lớp bọc của Fluent Forms làm hỏng ====================== */
/* Hai lớp div bọc nhãn và ô nhập: không được thêm lề, nếu không thì cách
   giữa nhãn và ô bị cộng đôi so với bản thiết kế. */
.su-field .ff-el-input--label,
.su-field .ff-el-input--content,
.ff_submit_btn_wrapper {
	margin: 0;
	padding: 0;
}

/* Mỗi ô của Fluent Forms mang sẵn margin-bottom 20px. Cộng với khoảng cách
   của lưới ở fieldset thành ra gấp đôi bản thiết kế. */
.su-form .ff-el-group,
.dang-ky .ff-el-group {
	margin: 0;
	padding: 0;
}

/* Thẻ bọc nhãn là block chứa một nhãn inline-block, nên nó cao hơn chính cái
   nhãn 5px vì khoảng chừa của dòng chữ. Bản thiết kế không có thẻ bọc này. */
.su-field .ff-el-input--label {
	display: flex;
	line-height: 0;
}

.su-field .ff-el-input--label label {
	display: block;
	margin: 0;
}

/* Fluent Forms đặt padding và line-height riêng cho ô nhập; trả về giá trị
   của bản thiết kế. Bộ chọn phải đủ mạnh vì css của nó nạp rất sát. */
.su-field .ff-el-form-control,
.su-field input.ff-el-form-control,
.su-field select.ff-el-form-control {
	min-height: var(--control-h);
	padding: var(--space-3) var(--space-4);
	line-height: normal;
	font-family: inherit;
}

/* Dấu sao "bắt buộc": bản thiết kế không có, nó nói bằng chữ. */
.ff-el-is-required > label::after,
.ff-el-is-required > label::before {
	content: none !important;
}

/* Fluent Forms giấu nhãn bằng lớp riêng; bản thiết kế giấu bằng .sr-only.
   Bộ chọn phải mạnh hơn luật display:flex ở trên, nếu không nhãn dành cho
   trình đọc màn hình sẽ hiện ra và đẩy ô đăng ký cao thêm 16px. */
.su-field.ff-el-form-hide_label .ff-el-input--label,
.ff-el-form-hide_label .ff-el-input--label {
	display: none !important;
}

/* ===== Ô đăng ký nhận tin: hai cột ===================================== */
/* Bản thiết kế: input và button là hai con trực tiếp của .dang-ky, chia
   1fr auto. Qua Fluent Forms thì hai con đó là hai ff-el-group. */
.dang-ky .frm-fluent-form fieldset {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: stretch;
	gap: 0;
}

.dang-ky .ff-el-group {
	margin: 0;
}

/* Hàng cao đúng một ô điều khiển. Không ghim thì thẻ bọc nút của Fluent Forms
   tự quyết chiều cao và kéo cả hàng cao thêm 16px. */
.dang-ky .frm-fluent-form fieldset {
	grid-auto-rows: var(--control-h);
}

.dang-ky .ff-el-group,
.dang-ky .ff-el-input--content,
.dang-ky .ff-el-form-control {
	height: 100%;
}

/* Nút là ô vuông bằng chiều cao ô nhập, như bản thiết kế. Fluent Forms để nó
   inline-block nên nó chỉ cao bằng dòng chữ. */
.dang-ky .ff-btn-submit {
	display: grid;
	place-items: center;
	width: var(--control-h);
	height: 100%;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--o-sang-chu);
}

/* Nút gửi của ô đăng ký là một mũi tên, không phải chữ. Giấu chữ nhưng giữ
   lại cho trình đọc màn hình qua aria-label đã có sẵn trên nút. */
.dang-ky .ff-btn-submit {
	font-size: 0;
	line-height: 0;
	padding: 0;
}

.dang-ky .ff-btn-submit::after {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--su-mui-ten) center / contain no-repeat;
	        mask: var(--su-mui-ten) center / contain no-repeat;
}

:root {
	--su-mui-ten: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* ===== Khối báo lỗi của Fluent Forms ==================================== */
/* Để trống thì nó vẫn chiếm chỗ, làm trang cao hơn bản thiết kế. */
.ff-errors-in-stack:empty {
	display: none;
}

/* ===== Nút gửi của biểu mẫu liên hệ ==================================== */
/* Bản thiết kế: nút là con trực tiếp của form (lưới) nên nó giãn hết cột.
   Qua Fluent Forms, nút nằm trong một thẻ bọc block và là inline-block, nên
   nó co lại bằng bề ngang chữ. */
.su-form .ff_submit_btn_wrapper .ff-btn-submit {
	width: 100%;
}