/* =========================================================
   NATIONLED - TIÊU ĐỀ CATALOG
   COPY THEO FORMAT TIÊU ĐỀ CHUẨN TRANG CHỦ

   DESKTOP:
   - Max width: 1320px
   - Thanh xanh dọc 5px
   - Font: 28px -> 40px

   MOBILE:
   - Thanh xanh dọc 4px
   - Font: 17px -> 24px

   BRAND:
   #28cb8b
   #078563
========================================================= */


/* =========================================================
   1. ROOT SECTION
========================================================= */

.ctl-nationled {
	--nationled-primary: #28cb8b;
	--nationled-primary-dark: #078563;
	--nationled-heading: #263238;

	position: relative;

	width: 100%;

	overflow: hidden;

	background: #ffffff;
}


/* Đồng bộ box sizing */

.ctl-nationled,
.ctl-nationled *,
.ctl-nationled *::before,
.ctl-nationled *::after {
	box-sizing: border-box;
}


/* =========================================================
   2. BACKGROUND
========================================================= */

.ctl-nationled>.section-bg {
	background: #ffffff;
}


/* =========================================================
   3. SECTION CONTENT
========================================================= */

.ctl-nationled>.section-content {
	position: relative;
	z-index: 2;

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

	margin: 0 auto;
}


/* =========================================================
   4. HÀNG TIÊU ĐỀ

   Format copy từ tiêu đề chuẩn trang chủ
========================================================= */

.ctl-nationled>.section-content>.row {
	position: relative;

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

	margin: 0 auto;

	padding-left: 24px;

	text-align: left;
}


/* =========================================================
   5. THANH XANH BÊN TRÁI
========================================================= */

.ctl-nationled>.section-content>.row::before {
	content: "";

	position: absolute;

	top: 4px;
	bottom: 4px;
	left: 0;

	width: 5px;

	border-radius: 20px;

	background:
		linear-gradient(180deg,
			var(--nationled-primary),
			var(--nationled-primary-dark));
}


/* =========================================================
   6. RESET COLUMN FLATSOME
========================================================= */

.ctl-nationled>.section-content>.row>.col {
	width: 100%;
	max-width: 100%;

	flex-basis: 100%;

	margin: 0;
	padding: 0;
}


.ctl-nationled>.section-content>.row>.col>.col-inner {
	margin: 0;
	padding: 0;
}


/* =========================================================
   7. TIÊU ĐỀ

   Copy đúng format heading chuẩn trang chủ
========================================================= */

.ctl-nationled>.section-content>.row p {
	margin: 0;
	padding: 0;

	color: var(--nationled-heading);

	font-size:
		clamp(28px, 3vw, 40px);

	font-weight: 700;
	line-height: 1.16;

	letter-spacing: -0.035em;

	text-align: left;
	text-transform: uppercase;

	text-wrap: balance;
}


/* Không cho Flatsome / CSS cũ thêm decoration */

.ctl-nationled>.section-content>.row p::before,
.ctl-nationled>.section-content>.row p::after {
	content: none;

	display: none;
}


/* =========================================================
   8. VIEWPORT NHỎ HƠN 1320PX

   Giống chuẩn các section trang chủ:
   chừa 12px mỗi bên.
========================================================= */

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

	.ctl-nationled>.section-content {
		width: calc(100% - 24px);
	}
}


/* =========================================================
   9. TABLET
========================================================= */

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

	.ctl-nationled>.section-content>.row {
		padding-left: 21px;
	}


	.ctl-nationled>.section-content>.row::before {
		width: 5px;
	}


	.ctl-nationled>.section-content>.row p {
		font-size:
			clamp(24px, 4.5vw, 32px);

		line-height: 1.18;

		letter-spacing: -0.03em;
	}
}


/* =========================================================
   10. MOBILE

   Copy theo format mobile tiêu đề chuẩn trang chủ.
========================================================= */

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

	.ctl-nationled>.section-content {
		width: calc(100% - 20px);
	}


	.ctl-nationled>.section-content>.row {
		padding-left: 17px;
	}


	.ctl-nationled>.section-content>.row::before {
		top: 3px;
		bottom: 3px;

		width: 4px;

		border-radius: 20px;
	}


	.ctl-nationled>.section-content>.row p {
		font-size:
			clamp(17px, 5vw, 24px);

		font-weight: 700;
		line-height: 1.2;

		letter-spacing: -0.025em;
	}
}


/* =========================================================
   11. MOBILE NHỎ
========================================================= */

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

	.ctl-nationled>.section-content {
		width: calc(100% - 16px);
	}


	.ctl-nationled>.section-content>.row {
		padding-left: 15px;
	}


	.ctl-nationled>.section-content>.row::before {
		width: 4px;
	}


	.ctl-nationled>.section-content>.row p {
		font-size: 17px;

		line-height: 1.2;

		letter-spacing: -0.02em;
	}
}