/*
 * Form nhận tài liệu.
 *
 * Bảng màu và bo góc bám theo section 04 của landing page Learn Data AI With
 * Nguyen, để thay form cũ bằng shortcode mà mắt thường không thấy khác.
 *
 * !important chỉ đặt ở đúng những thuộc tính Divi Builder reset bằng selector ID
 * (`#et-boc .et-l ...` ép display:block và margin:0). ID thắng class nên không
 * có cách nào khác. Mọi thuộc tính còn lại để bình thường cho dễ ghi đè.
 */

.tlm-form-root {
	--tlm-brand: #00C49A;
	--tlm-brand-dk: #009478;
	--tlm-brand-soft: rgba(0, 196, 154, .10);
	--tlm-brand-line: rgba(0, 196, 154, .18);
	--tlm-ink: #0B2A23;
	--tlm-body: #4A7267;
	--tlm-muted: #7E9C93;
	--tlm-tint: #F5FCFA;
	--tlm-line: #E3EFEA;
	--tlm-shadow: 0 20px 50px rgba(0, 64, 48, .10);
	--tlm-shadow-brand: 0 10px 28px rgba(0, 196, 154, .28);
	/* Sắc phụ suy ra từ --tlm-brand, nên đổi accent qua shortcode là đổi hết,
	   không còn chỗ nào khoá cứng mã màu xanh lá. */
	--tlm-brand-fill: color-mix(in srgb, var(--tlm-brand) 6%, transparent);
	--tlm-shadow-brand-hover: 0 15px 34px color-mix(in srgb, var(--tlm-brand) 36%, transparent);
	/* Viền ô vuông checkbox lúc chưa tick. Giữ đúng giá trị cũ làm mặc định,
	   shortcode có accent thì ghi đè bằng một sắc pha từ accent. */
	--tlm-chk-line: #C6DCD3;

	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--tlm-body);
}

.tlm-form-root *,
.tlm-form-root *::before,
.tlm-form-root *::after {
	box-sizing: border-box !important;
}

/* ---------------------------------------------------------------- heading */

.tlm-head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 32px !important;
}

.tlm-eyebrow {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--tlm-brand-dk);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.tlm-eyebrow::before,
.tlm-eyebrow::after {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--tlm-brand-line);
}

.tlm-form-root .tlm-h2 {
	color: var(--tlm-ink);
	font-size: clamp(30px, 4.2vw, 44px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin: 16px 0 14px !important;
}

.tlm-form-root .tlm-sub {
	font-size: 17px;
	margin: 0 !important;
}

/* ---------------------------------------------------------------- card */

.tlm-carded .tlm-card {
	background: #fff;
	border-radius: 26px;
	box-shadow: var(--tlm-shadow);
	padding: clamp(28px, 4vw, 48px);
	max-width: 840px;
	margin: 0 auto !important;
}

/* ---------------------------------------------------------------- hai cột */

.tlm-form-root .tlm-cols {
	margin: 0 !important;
}

/* 45/55 chứ không phải 40/60: thẻ tài liệu giờ xếp dọc và có ảnh rộng hết thẻ,
   hai thẻ một hàng cần thêm chỗ. Form vẫn là cột rộng hơn. */
.tlm-split .tlm-cols {
	display: grid !important;
	grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	max-width: 1120px;
	margin: 0 auto !important;
}

/* Ở chế độ hai cột, thẻ form không tự căn giữa nữa mà chiếm hết cột của nó. */
.tlm-split.tlm-carded .tlm-card {
	max-width: none;
	margin: 0 !important;
}

/* ---------------------------------------------------------------- cột xem trước */

.tlm-preview {
	display: block !important;
	margin: 0 !important;
}

.tlm-preview-inner {
	position: sticky;
	top: 24px;
}

.tlm-preview-head {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px !important;
}

.tlm-preview-title {
	font-size: 11px;
	font-weight: 700;
	color: var(--tlm-ink);
	letter-spacing: .11em;
	text-transform: uppercase;
}

.tlm-preview-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 11px;
	background: var(--tlm-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.tlm-preview-empty {
	margin: 0 !important;
	padding: 22px;
	border: 1px dashed var(--tlm-line);
	border-radius: 16px;
	background: var(--tlm-tint);
	font-size: 14px;
	line-height: 1.65;
	color: var(--tlm-muted);
}

/* JS gắn class này lên .tlm-preview khi đã có ít nhất một thẻ hiện. */
.tlm-preview.has-picked .tlm-preview-empty {
	display: none !important;
}

/* Hai thẻ một hàng ở mọi bề rộng. minmax(0,1fr) để tên tài liệu dài không đẩy
   cột phình ra ngoài cột xem trước. */
.tlm-preview-list {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 !important;
}

/* ---------------------------------------------------------------- thẻ tài liệu */

/* Xếp dọc: tên ở trên, ảnh ở dưới. Thứ tự này đã nằm sẵn trong HTML nên không
   cần order, chỉ đổi trục của flex. */
.tlm-pcard {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--tlm-line);
	border-radius: 16px;
	box-shadow: 0 2px 10px rgba(0, 64, 48, .04);
	position: relative;
	margin: 0 !important;
	/* Hiện lên mềm thay vì nhảy vào. */
	animation: tlm-pop .28s ease both;
}

.tlm-pcard[hidden] {
	display: none !important;
}

@keyframes tlm-pop {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Ảnh rộng hết thẻ, nằm dưới tên. Khung 16:9 vì ảnh tài liệu hiện tại là ảnh
   chụp màn hình 1920x1080, đúng tỉ lệ này thì không bị cắt mất gì. Bìa dạng dọc
   vẫn chạy nhưng bị cắt, nên lấy phần trên của ảnh, chỗ thường có tiêu đề. */
.tlm-pcard-img {
	width: 100%;
	flex-shrink: 0;
	/* Hai thẻ cùng hàng cao bằng nhau (grid tự kéo), tên dài ngắn khác nhau thì
	   ảnh vẫn dính đáy nên mép ảnh của cả hàng thẳng một đường. */
	margin-top: auto;
	border-radius: 12px;
	overflow: hidden;
	background: var(--tlm-tint);
	aspect-ratio: 16 / 9;
}

.tlm-pcard-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center top;
	display: block !important;
	max-width: none !important;
	border-radius: 0 !important;
}

/* Thẻ không ảnh: bù lại phần đệm mà ô ảnh vốn tạo ra, để chữ không sát viền. */
.tlm-pcard-noimg {
	padding: 16px 14px;
}

/* Hàng tên: dấu tick đứng trước tên tài liệu, đọc lên như một dòng đã chọn. */
.tlm-pcard-body {
	display: flex !important;
	align-items: flex-start;
	gap: 8px;
	flex: 0 0 auto;
	min-width: 0;
}

.tlm-pcard-title {
	display: block;
	min-width: 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--tlm-ink);
	line-height: 1.4;
}

.tlm-pcard-tick {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tlm-brand);
	position: relative;
	/* Canh tâm tick với dòng chữ đầu tiên, không dính lên mép trên. */
	margin-top: 1px;
}

.tlm-pcard-tick::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 4px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* ---------------------------------------------------------------- grid */

.tlm-form-root .tlm-grid {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 0 !important;
	padding: 0 !important;
}

.tlm-form-root .tlm-field {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
}

.tlm-form-root .tlm-full {
	grid-column: 1 / -1;
}

/* Chỉ nhắm label tiêu đề của field, không nhắm label bọc checkbox bên trong. */
.tlm-form-root .tlm-field > label {
	font-size: 11px;
	font-weight: 700;
	color: var(--tlm-ink);
	letter-spacing: .11em;
	text-transform: uppercase;
	margin: 0 !important;
}

.tlm-form-root .tlm-field > label i {
	color: #DC3545;
	font-style: normal;
}

/* Dòng gợi ý trong nhãn: chữ thường, không in hoa như nhãn bao ngoài. */
.tlm-form-root .tlm-hint-inline {
	display: block !important;
	margin-top: 5px !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tlm-muted);
}

.tlm-form-root .tlm-field input,
.tlm-form-root .tlm-field select {
	font-family: inherit;
	font-size: 15px;
	padding: 14px 16px;
	border: 1px solid var(--tlm-line);
	border-radius: 12px;
	background: var(--tlm-tint);
	color: var(--tlm-ink);
	outline: none;
	transition: border-color .2s, background .2s, box-shadow .2s;
	width: 100%;
	margin: 0 !important;
}

.tlm-form-root .tlm-field input:focus,
.tlm-form-root .tlm-field select:focus {
	border-color: var(--tlm-brand);
	background: #fff;
	box-shadow: 0 0 0 3px var(--tlm-brand-soft);
}

.tlm-form-root .tlm-field.tlm-invalid input,
.tlm-form-root .tlm-field.tlm-invalid select {
	border-color: #F5C2C7;
	background: #FDECEE;
}

/* ---------------------------------------------------------------- checkbox tài liệu */

.tlm-form-root .tlm-checks {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0 !important;
}

.tlm-form-root .tlm-chk {
	display: flex !important;
	align-items: center;
	gap: 10px;
	background: var(--tlm-tint);
	border: 1px solid var(--tlm-line);
	border-radius: 12px;
	padding: 13px 15px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tlm-ink);
	cursor: pointer;
	transition: border-color .2s, background .2s;
	position: relative;
	margin: 0 !important;
	line-height: 1.4;
}

.tlm-form-root .tlm-chk:hover {
	border-color: var(--tlm-brand);
	background: #fff;
}

.tlm-form-root .tlm-chk input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	margin: 0 !important;
}

.tlm-form-root .tlm-chk i {
	width: 17px;
	height: 17px;
	border: 1.5px solid var(--tlm-chk-line);
	border-radius: 5px;
	flex-shrink: 0;
	transition: background .2s, border-color .2s;
	position: relative;
	display: block !important;
}

/* Bản dự phòng cho trình duyệt chưa hỗ trợ :has(), JS gắn class này. */
.tlm-form-root .tlm-chk.is-checked,
.tlm-form-root .tlm-chk:has(input:checked) {
	border-color: var(--tlm-brand);
	background: var(--tlm-brand-fill);
}

.tlm-form-root .tlm-chk.is-checked i,
.tlm-form-root .tlm-chk input:checked ~ i {
	background: var(--tlm-brand);
	border-color: var(--tlm-brand);
}

.tlm-form-root .tlm-chk.is-checked i::after,
.tlm-form-root .tlm-chk input:checked ~ i::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1.5px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.tlm-form-root .tlm-chk input:focus-visible ~ i {
	box-shadow: 0 0 0 3px var(--tlm-brand-soft);
	border-color: var(--tlm-brand);
}

/* ---------------------------------------------------------------- honeypot */

.tlm-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

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

.tlm-form-root .tlm-btn {
	grid-column: 1 / -1;
	width: 100%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 17px 30px;
	border-radius: 30px;
	border: 1px solid transparent;
	cursor: pointer;
	background: linear-gradient(135deg, var(--tlm-brand), var(--tlm-brand-dk));
	color: #fff;
	box-shadow: var(--tlm-shadow-brand);
	transition: transform .25s ease, box-shadow .25s ease;
	margin: 8px 0 0 !important;
}

.tlm-form-root .tlm-btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--tlm-shadow-brand-hover);
}

.tlm-form-root .tlm-btn[disabled] {
	opacity: .65;
	cursor: not-allowed;
	transform: none;
	box-shadow: var(--tlm-shadow-brand);
}

/* ---------------------------------------------------------------- thông báo */

.tlm-form-root .tlm-msg {
	display: none;
	grid-column: 1 / -1;
	border-radius: 12px;
	padding: 13px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	margin: 0 !important;
}

.tlm-form-root .tlm-msg.is-shown {
	display: block !important;
}

.tlm-form-root .tlm-msg.is-ok {
	background: rgba(0, 196, 154, .10);
	border: 1px solid var(--tlm-brand-line);
	color: var(--tlm-brand-dk);
}

.tlm-form-root .tlm-msg.is-warn {
	background: #FFF9E6;
	border: 1px solid #F2C811;
	color: #8A6D00;
}

.tlm-form-root .tlm-msg.is-err {
	background: #FDECEE;
	border: 1px solid #F5C2C7;
	color: #B02A37;
}

.tlm-form-root .tlm-note {
	margin: 16px 0 0 !important;
	padding-top: 16px;
	border-top: 1px solid var(--tlm-line);
	text-align: center;
	font-size: 13px;
	color: var(--tlm-muted);
}

.tlm-empty {
	padding: 18px 20px;
	border: 1px dashed #F2C811;
	background: #FFF9E6;
	color: #8A6D00;
	border-radius: 12px;
	font-size: 14px;
}

/* ---------------------------------------------------------------- mobile */

/* Dưới 900px thì hai cột xếp dọc. Form lên trước vì đó là việc người dùng cần làm,
   cột xem trước xuống dưới làm phần phản hồi. */
@media (max-width: 900px) {
	.tlm-split .tlm-cols {
		grid-template-columns: 1fr;
	}

	.tlm-split .tlm-card {
		order: 1;
	}

	.tlm-split .tlm-preview {
		order: 2;
	}

	/* Sticky vô nghĩa khi đã xếp dọc. */
	.tlm-preview-inner {
		position: static;
	}

	/* Cột xem trước rộng hết trang, giữ hai thẻ một hàng thì thẻ to ra chứ không
	   thành ba bốn thẻ bé xíu. */
	.tlm-preview-list {
		gap: 16px;
	}
}

@media (max-width: 640px) {
	.tlm-form-root .tlm-grid,
	.tlm-form-root .tlm-checks {
		grid-template-columns: 1fr;
	}

	/* Vẫn hai thẻ một hàng trên điện thoại, chỉ thu đệm và khoảng cách lại. */
	.tlm-preview-list {
		gap: 10px;
	}

	.tlm-pcard {
		padding: 10px;
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tlm-form-root *,
	.tlm-form-root *::before,
	.tlm-form-root *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
}