/* =========================================================
   SECTION THÔNG TIN LIÊN HỆ - NATIONLED
   Áp dụng đúng HTML Flatsome hiện tại

   Mapping:
   .tieu-de = Tên công ty
   .text4   = ĐKKD / Địa chỉ
   .text5   = MST
   .text6   = Nhà máy
   .text2   = Điện thoại
   .text3   = Email
========================================================= */


/* =========================================================
   1. BIẾN MÀU
========================================================= */

.section.thongtin {
	--contact-primary: #28cb8b;
	--contact-primary-dark: #078563;

	--contact-dark: #075b48;
	--contact-deep: #043f34;

	--contact-text: #173b32;
	--contact-muted: #74877f;

	--contact-border: #d9e7e1;
	--contact-input-bg: #f7faf9;

	position: relative;

	overflow: hidden;

	background: transparent;
}


/* Đồng bộ box sizing */

.section.thongtin,
.section.thongtin * {
	box-sizing: border-box;
}


/* Nền section */

.section.thongtin .section-bg {
	background: transparent;
}


/* Content */

.section.thongtin .section-content {
	position: relative;

	z-index: 2;

	padding: 25px 20px;
}


/* =========================================================
   2. BỐ CỤC DESKTOP
========================================================= */

.section.thongtin .section-content>.row {
	display: grid;

	grid-template-columns:
		minmax(0, 0.9fr) minmax(0, 1.1fr);

	align-items: stretch;

	gap: 24px;

	width: 100%;
	max-width: 1320px;

	margin: 0 auto;
}


/* Reset cột Flatsome */

.section.thongtin .section-content>.row>.col {
	width: 100%;
	max-width: none;

	padding: 0;

	flex-basis: auto;
}


/* Hai card cao bằng nhau */

.section.thongtin .section-content>.row>.col>.col-inner {
	height: 100%;
}


/* =========================================================
   3. CARD TRÁI
========================================================= */

.section.thongtin .ben-trai>.col-inner {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;

	width: 100%;
	min-height: 100%;

	padding: 44px 42px;

	overflow: hidden;

	border-radius: 18px;

	background:
		linear-gradient(145deg,
			var(--contact-deep) 0%,
			var(--contact-dark) 58%,
			#078868 100%);

	box-shadow:
		0 20px 48px rgba(5, 74, 58, 0.18);
}


/* =========================================================
   4. HỌA TIẾT TRANG TRÍ
========================================================= */

.section.thongtin .ben-trai>.col-inner::before {
	position: absolute;

	right: -120px;
	bottom: -120px;

	width: 270px;
	height: 270px;

	content: "";

	border:
		44px solid rgba(255, 255, 255, 0.06);

	border-radius: 50%;

	pointer-events: none;
}


/* =========================================================
   5. RESET TEXT UX BUILDER
========================================================= */

.section.thongtin .ben-trai .text {
	position: relative;

	z-index: 2;

	display: block;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	margin: 0;

	float: none !important;
}


.section.thongtin .ben-trai .text p {
	width: 100% !important;
	max-width: 100% !important;

	margin: 0;

	word-break: normal !important;
	overflow-wrap: normal !important;
	hyphens: none !important;
}


/* =========================================================
   6. TIÊU ĐỀ "THÔNG TIN LIÊN HỆ"
========================================================= */

.section.thongtin .ben-trai .text1 {
	margin-bottom: 24px;

	padding-top: 26px;
}


/* Thanh nhấn */

.section.thongtin .ben-trai .text1::before {
	position: absolute;

	top: 0;
	left: 0;

	width: 50px;
	height: 4px;

	content: "";

	border-radius: 999px;

	background: #55e9b0;
}


/* Heading */

.section.thongtin .ben-trai .text1 p {
	color: #ffffff;

	font-size:
		clamp(27px, 2.2vw, 36px);

	font-weight: 700;

	line-height: 1.25;

	letter-spacing: -0.5px;
}


/* =========================================================
   7. TÊN CÔNG TY
========================================================= */

.section.thongtin .ben-trai .tieu-de {
	margin: 0 0 7px;

	padding: 0 0 16px;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.11);
}


.section.thongtin .ben-trai .tieu-de p {
	color: #ffffff;

	font-size: 17px;

	font-weight: 700;

	line-height: 1.5;

	letter-spacing: 0.01em;

	text-transform: uppercase;

	opacity: 1;
}


/* =========================================================
   8. CÁC DÒNG THÔNG TIN

   text4 = ĐKKD
   text5 = MST
   text6 = Nhà máy
   text2 = Điện thoại
   text3 = Email
========================================================= */

.section.thongtin .ben-trai .text4,
.section.thongtin .ben-trai .text5,
.section.thongtin .ben-trai .text6,
.section.thongtin .ben-trai .text2,
.section.thongtin .ben-trai .text3 {
	display: grid !important;

	grid-template-columns:
		48px minmax(0, 1fr);

	align-items: center;

	gap: 15px;

	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;

	min-height: 78px;

	margin: 0 !important;

	padding: 14px 0 !important;

	border-bottom:
		1px solid rgba(255, 255, 255, 0.13);

	float: none !important;

	transition:
		background-color 0.25s ease,
		padding-left 0.25s ease;
}


/* Email là dòng cuối */

.section.thongtin .ben-trai .text3 {
	border-bottom: 0;
}


/* =========================================================
   9. KHUNG ICON
========================================================= */

.section.thongtin .ben-trai .text4::before,
.section.thongtin .ben-trai .text5::before,
.section.thongtin .ben-trai .text6::before,
.section.thongtin .ben-trai .text2::before,
.section.thongtin .ben-trai .text3::before {
	display: block;

	width: 48px;
	height: 48px;

	content: "";

	border:
		1px solid rgba(255, 255, 255, 0.20);

	border-radius: 13px;

	background-color:
		rgba(255, 255, 255, 0.11);

	background-repeat: no-repeat;

	background-position: center;

	background-size: 21px 21px;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* =========================================================
   10. ICON ĐỊA CHỈ
========================================================= */

.section.thongtin .ben-trai .text4::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}


/* =========================================================
   11. ICON MST
   Icon line nhẹ - tài liệu / mã số thuế
========================================================= */

.section.thongtin .ben-trai .text5::before {
	background-size: 22px 22px;

	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h7l4 4V20.5h-11z'/%3E%3Cpath d='M13.5 3.5v4h4'/%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 14h6'/%3E%3Cpath d='M9 17h3.5'/%3E%3C/svg%3E");
}


/* =========================================================
   12. ICON NHÀ MÁY
========================================================= */

.section.thongtin .ben-trai .text6::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l6 3V9l6 3V5h4v16H3Z'/%3E%3Cpath d='M7 17h1'/%3E%3Cpath d='M11 17h1'/%3E%3Cpath d='M15 17h1'/%3E%3C/svg%3E");
}


/* =========================================================
   13. ICON ĐIỆN THOẠI
========================================================= */

.section.thongtin .ben-trai .text2::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
}


/* =========================================================
   14. ICON EMAIL
========================================================= */

.section.thongtin .ben-trai .text3::before {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}


/* =========================================================
   15. TEXT THÔNG TIN
   TẤT CẢ ĐỀU IN ĐẬM
========================================================= */

.section.thongtin .ben-trai .text4 p,
.section.thongtin .ben-trai .text5 p,
.section.thongtin .ben-trai .text6 p,
.section.thongtin .ben-trai .text2 p,
.section.thongtin .ben-trai .text3 p {
	display: block;

	width: 100% !important;
	min-width: 0;

	margin: 0 !important;

	color: #ffffff;

	font-size: 16px;

	font-weight: 600;

	line-height: 1.65;

	letter-spacing: -0.01em;

	word-break: normal !important;

	overflow-wrap: normal !important;

	hyphens: none !important;
}


/* =========================================================
   16. HOTLINE + EMAIL
   Vẫn nổi hơn một chút
========================================================= */

.section.thongtin .ben-trai .text2 p,
.section.thongtin .ben-trai .text3 p {
	font-weight: 700;
}


/* =========================================================
   17. HOVER INFO ROW
========================================================= */

@media (hover: hover) {

	.section.thongtin .ben-trai .text4:hover,
	.section.thongtin .ben-trai .text5:hover,
	.section.thongtin .ben-trai .text6:hover,
	.section.thongtin .ben-trai .text2:hover,
	.section.thongtin .ben-trai .text3:hover {
		padding-left: 7px !important;

		background:
			rgba(255, 255, 255, 0.035);
	}
}


/* =========================================================
   18. CARD FORM BÊN PHẢI
========================================================= */

.section.thongtin .ben-phai>.col-inner {
	display: flex;

	flex-direction: column;

	justify-content: center;

	min-height: 100%;

	padding: 46px;

	border:
		1px solid rgba(7, 91, 72, 0.1);

	border-radius: 18px;

	background: #ffffff;

	box-shadow:
		0 20px 48px rgba(20, 72, 59, 0.1);
}


/* CF7 */

.section.thongtin .ben-phai .wpcf7,
.section.thongtin .ben-phai .wpcf7-form {
	width: 100%;

	margin: 0;
}


/* =========================================================
   19. FORM GRID
========================================================= */

.section.thongtin .kht-contact-form {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 18px 16px;

	width: 100%;
}


.section.thongtin .kht-contact-form>p {
	min-width: 0;

	margin: 0;
}


/* Nội dung + submit full width */

.section.thongtin .kht-contact-form>p:nth-of-type(5),
.section.thongtin .kht-contact-form>p:nth-of-type(6) {
	grid-column: 1 / -1;
}


/* =========================================================
   20. LABEL
========================================================= */

.section.thongtin .kht-contact-form label {
	display: block;

	margin: 0;

	color: var(--contact-text);

	font-size: 14px;

	font-weight: 600;

	line-height: 1.45;
}


/* Ẩn br của CF7 */

.section.thongtin .kht-contact-form label>br {
	display: none;
}


.section.thongtin .wpcf7-form-control-wrap {
	display: block;

	width: 100%;

	margin-top: 8px;
}


/* =========================================================
   21. INPUT / TEXTAREA
========================================================= */

.section.thongtin .kht-contact-form input[type="text"],
.section.thongtin .kht-contact-form input[type="email"],
.section.thongtin .kht-contact-form input[type="tel"],
.section.thongtin .kht-contact-form textarea {
	display: block;

	width: 100%;

	margin: 0;

	color: var(--contact-text);

	font-family: inherit;

	font-size: 15px;

	font-weight: 400;

	border:
		1px solid var(--contact-border);

	border-radius: 10px;

	background: var(--contact-input-bg);

	box-shadow: none;

	transition:
		border-color 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}


/* Input 1 dòng */

.section.thongtin .kht-contact-form input[type="text"],
.section.thongtin .kht-contact-form input[type="email"],
.section.thongtin .kht-contact-form input[type="tel"] {
	height: 50px;

	padding: 0 16px;
}


/* Textarea */

.section.thongtin .kht-contact-form textarea {
	height: 145px;

	min-height: 145px;

	padding: 14px 16px;

	line-height: 1.6;

	resize: vertical;
}


/* Placeholder */

.section.thongtin .kht-contact-form input::placeholder,
.section.thongtin .kht-contact-form textarea::placeholder {
	color: #91a39c;

	opacity: 1;
}


/* Focus */

.section.thongtin .kht-contact-form input:focus,
.section.thongtin .kht-contact-form textarea:focus {
	outline: none;

	border-color: var(--contact-primary);

	background: #ffffff;

	box-shadow:
		0 0 0 4px rgba(40, 203, 139, 0.12);
}


/* Validation */

.section.thongtin .kht-contact-form .wpcf7-not-valid {
	border-color: #d63638;

	box-shadow:
		0 0 0 3px rgba(214, 54, 56, 0.08);
}


/* =========================================================
   22. BUTTON
========================================================= */

.section.thongtin .kht-contact-submit {
	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 52px;

	margin: 2px 0 0;

	padding: 0 24px;

	color: #ffffff;

	font-size: 14px;

	font-weight: 700;

	line-height: 1;

	letter-spacing: 0.5px;

	border: 0;

	border-radius: 10px;

	background:
		linear-gradient(135deg,
			var(--contact-primary-dark) 0%,
			var(--contact-primary) 100%);

	box-shadow:
		0 12px 24px rgba(40, 203, 139, 0.24);

	cursor: pointer;

	transition:
		transform 0.25s ease,
		box-shadow 0.25s ease,
		filter 0.25s ease;
}


.section.thongtin .kht-contact-submit:hover {
	transform: translateY(-2px);

	filter: brightness(1.03);

	box-shadow:
		0 16px 30px rgba(40, 203, 139, 0.31);
}


.section.thongtin .kht-contact-submit:active {
	transform: translateY(0);
}


/* =========================================================
   23. SPINNER / VALIDATION MESSAGE
========================================================= */

.section.thongtin .kht-contact-form>p:last-child {
	position: relative;
}


.section.thongtin .wpcf7-spinner {
	position: absolute;

	top: 50%;
	right: 15px;

	margin: 0;

	transform: translateY(-50%);
}


.section.thongtin .wpcf7-not-valid-tip {
	display: block;

	margin-top: 6px;

	color: #d63638;

	font-size: 12px;

	font-weight: 500;

	line-height: 1.4;
}


.section.thongtin .wpcf7-response-output {
	margin: 18px 0 0;

	padding: 13px 15px;

	color: var(--contact-text);

	font-size: 14px;

	line-height: 1.55;

	border-radius: 9px;

	background: #f7faf9;
}


/* =========================================================
   24. TABLET
========================================================= */

@media screen and (max-width: 849px) {

	.section.thongtin .section-content {
		padding: 20px 15px;
	}


	.section.thongtin .section-content>.row {
		grid-template-columns:
			minmax(0, 1fr);

		gap: 18px;
	}


	.section.thongtin .ben-trai>.col-inner,
	.section.thongtin .ben-phai>.col-inner {
		padding: 34px 28px;

		border-radius: 16px;
	}


	.section.thongtin .ben-trai .tieu-de p {
		font-size: 16px;
	}


	.section.thongtin .kht-contact-form {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================
   25. MOBILE
========================================================= */

@media screen and (max-width: 549px) {

	.section.thongtin .section-content {
		padding: 10px 12px;
	}


	.section.thongtin .section-content>.row {
		gap: 15px;
	}


	.section.thongtin .ben-trai>.col-inner,
	.section.thongtin .ben-phai>.col-inner {
		padding: 26px 20px;

		border-radius: 14px;
	}


	/* Heading */

	.section.thongtin .ben-trai .text1 {
		margin-bottom: 18px;

		padding-top: 22px;
	}


	.section.thongtin .ben-trai .text1 p {
		font-size: 25px;
	}


	.section.thongtin .ben-trai .text1::before {
		width: 42px;
	}


	/* Company */

	.section.thongtin .ben-trai .tieu-de {
		padding-bottom: 13px;
	}


	.section.thongtin .ben-trai .tieu-de p {
		font-size: 15px;

		line-height: 1.5;
	}


	/* Info rows */

	.section.thongtin .ben-trai .text4,
	.section.thongtin .ben-trai .text5,
	.section.thongtin .ben-trai .text6,
	.section.thongtin .ben-trai .text2,
	.section.thongtin .ben-trai .text3 {
		grid-template-columns:
			42px minmax(0, 1fr);

		gap: 12px;

		min-height: 66px;

		padding: 12px 0 !important;
	}


	/* Icon */

	.section.thongtin .ben-trai .text4::before,
	.section.thongtin .ben-trai .text5::before,
	.section.thongtin .ben-trai .text6::before,
	.section.thongtin .ben-trai .text2::before,
	.section.thongtin .ben-trai .text3::before {
		width: 42px;
		height: 42px;

		border-radius: 11px;

		background-size: 18px 18px;
	}


	/* MST line icon giữ mảnh */

	.section.thongtin .ben-trai .text5::before {
		background-size: 19px 19px;
	}


	/* Text */

	.section.thongtin .ben-trai .text4 p,
	.section.thongtin .ben-trai .text5 p,
	.section.thongtin .ben-trai .text6 p,
	.section.thongtin .ben-trai .text2 p,
	.section.thongtin .ben-trai .text3 p {
		font-size: 14px;

		font-weight: 600;

		line-height: 1.65;
	}


	.section.thongtin .ben-trai .text2 p,
	.section.thongtin .ben-trai .text3 p {
		font-weight: 700;
	}


	/* Không dịch ngang trên mobile */

	.section.thongtin .ben-trai .text4:hover,
	.section.thongtin .ben-trai .text5:hover,
	.section.thongtin .ben-trai .text6:hover,
	.section.thongtin .ben-trai .text2:hover,
	.section.thongtin .ben-trai .text3:hover {
		padding-left: 0 !important;
	}


	/* Form */

	.section.thongtin .kht-contact-form {
		grid-template-columns:
			minmax(0, 1fr);

		gap: 15px;
	}


	.section.thongtin .kht-contact-form>p {
		grid-column: 1 / -1;
	}


	.section.thongtin .kht-contact-form input[type="text"],
	.section.thongtin .kht-contact-form input[type="email"],
	.section.thongtin .kht-contact-form input[type="tel"] {
		height: 48px;

		font-size: 14px;
	}


	.section.thongtin .kht-contact-form textarea {
		height: 125px;

		min-height: 125px;

		font-size: 14px;
	}


	.section.thongtin .kht-contact-submit {
		height: 50px;
	}
}