/* =========================================================
   HOẠT ĐỘNG NAM TRUNG
   BENTO CONSTRUCTION NEWS
   FULL CSS
   PRIMARY: #131b73
========================================================= */
/* =========================================================
   ROOT
========================================================= */
.ntb-activity {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding: 68px 0 72px;
	background: #fff;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
.ntb-activity *,
.ntb-activity *::before,
.ntb-activity *::after {
	box-sizing: border-box;
}
.ntb-activity a {
	text-decoration: none !important;
}
/* =========================================================
   HEADER
========================================================= */
.ntb-head {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 35px;
	margin-bottom: 34px;
}
.ntb-head-left {
	max-width: 880px;
}
/* =========================================================
   EYEBROW
========================================================= */
.ntb-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: #1682c5;
	font-size: 13px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 1.1px;
}
.ntb-eyebrow > span {
	display: block;
	width: 34px;
	height: 2px;
	background: #ff0000;
}
/* =========================================================
   TITLE
========================================================= */
.ntb-head h2 {
	margin: 0 0 10px;
	color: #131b73;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.5px;
	text-transform: uppercase;
}
/* =========================================================
   DESCRIPTION
========================================================= */
.ntb-description,
.ntb-description p {
	margin: 0 !important;
	color: #6f7d92;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
}
/* =========================================================
   HEADER MORE
========================================================= */
.ntb-head-more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding-bottom: 6px;
	color: #131b73 !important;
	border-bottom:
		2px solid #ff0000;
	font-size: 15px;
	font-weight: 800;
	line-height: 1.2;
	white-space: nowrap;
}
.ntb-head-more i {
	font-size: 14px;
	transition:
		transform .2s ease;
}
.ntb-head-more:hover i {
	transform: translateX(5px);
}
/* =========================================================
   TOP LAYOUT
========================================================= */
.ntb-top {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns:
		minmax(0, 1.48fr)
		minmax(390px, .82fr);
	gap: 25px;
	align-items: stretch;
}
/* =========================================================
   FEATURED
========================================================= */
.ntb-lead {
	min-width: 0;
}
/* =========================================================
   FEATURED MEDIA
========================================================= */
.ntb-lead-media {
	position: relative;
	display: block;
	width: 100%;
	height: 510px;
	overflow: hidden;
	background: #131b73;
	border-radius: 18px;
	box-shadow:
		0 18px 45px
		rgba(19, 27, 115, .15);
}
.ntb-lead-media > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition:
		transform .5s ease;
}
.ntb-lead:hover
.ntb-lead-media > img {
	transform: scale(1.035);
}
/* =========================================================
   FEATURED OVERLAY
========================================================= */
.ntb-lead-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(6, 11, 43, .02) 0%,
			rgba(7, 13, 47, .10) 36%,
			rgba(8, 14, 51, .94) 100%
		);
	pointer-events: none;
}
/* =========================================================
   FEATURED TOP
========================================================= */
.ntb-lead-top {
	position: absolute;
	top: 21px;
	left: 21px;
	right: 21px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	z-index: 3;
}
/* =========================================================
   BADGE
========================================================= */
.ntb-lead-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 0 15px;
	color: #131b73;
	background: #ff0000;
	border-radius: 22px;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
}
/* =========================================================
   DATE
========================================================= */
.ntb-lead-top time {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 13px;
	color: #ffffff;
	background:
		rgba(19, 27, 115, .90);
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}
/* =========================================================
   FEATURED CONTENT
========================================================= */
.ntb-lead-content {
	position: absolute;
	left: 31px;
	right: 32px;
	bottom: 29px;
	z-index: 3;
}
.ntb-lead-kicker {
	margin-bottom: 10px;
	color: #ff0000;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .8px;
}
.ntb-lead-content h3 {
	display: -webkit-box;
	max-width: 780px;
	margin: 0 0 13px;
	overflow: hidden;
	color: #ffffff;
	font-size: 35px;
	font-weight: 800;
	line-height: 1.18;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ntb-lead-content p {
	display: -webkit-box;
	max-width: 720px;
	margin: 0 0 19px;
	overflow: hidden;
	color:
		rgba(255, 255, 255, .84);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ntb-lead-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}
.ntb-lead-more i {
	color: #ff0000;
	font-size: 15px;
	transition:
		transform .2s ease;
}
.ntb-lead-media:hover
.ntb-lead-more i {
	transform: translateX(5px);
}
/* =========================================================
   SIDE PANEL
========================================================= */
.ntb-side {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 510px;
	padding: 21px;
	background: #ffffff;
	border:
		1px solid #dfe5ee;
	border-radius: 18px;
	box-shadow:
		0 12px 34px
		rgba(19, 27, 115, .07);
}
/* =========================================================
   SIDE TITLE
========================================================= */
.ntb-side-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	flex: 0 0 auto;
	padding-bottom: 15px;
	border-bottom:
		1px solid #e7ebf2;
}
.ntb-side-title small {
	display: block;
	margin-bottom: 4px;
	color: #1682c5;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .8px;
}
.ntb-side-title strong {
	display: block;
	color: #131b73;
	font-size: 25px;
	font-weight: 800;
	line-height: 1.15;
}
.ntb-side-title > span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	color: #131b73;
	background: #ff0000;
	border-radius: 50%;
	font-size: 16px;
}
/* =========================================================
   SIDE LIST
========================================================= */
.ntb-side-list {
	display: grid;
	grid-template-rows:
		repeat(3, 1fr);
	flex: 1 1 auto;
	min-height: 0;
}
/* =========================================================
   SIDE CARD
========================================================= */
.ntb-side-card {
	display: grid;
	grid-template-columns:
		108px
		minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	min-height: 0;
	padding: 14px 0;
	border-bottom:
		1px solid #edf0f5;
}
.ntb-side-card:last-child {
	border-bottom: 0;
}
/* =========================================================
   SIDE IMAGE
========================================================= */
.ntb-side-image {
	display: block;
	width: 108px;
	height: 90px;
	overflow: hidden;
	background: #edf2f7;
	border-radius: 10px;
}
.ntb-side-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition:
		transform .3s ease;
}
.ntb-side-card:hover
.ntb-side-image img {
	transform: scale(1.06);
}
/* =========================================================
   SIDE CONTENT
========================================================= */
.ntb-side-content {
	min-width: 0;
}
.ntb-side-content time {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: 5px;
	color: #98a3b4;
	font-size: 11px;
	font-weight: 500;
}
.ntb-side-content time i {
	color: #1682c5;
}
.ntb-side-content h3 {
	display: -webkit-box;
	margin: 0 0 6px;
	overflow: hidden;
	font-size: 17px;
	font-weight: 800;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ntb-side-content h3 a {
	color: #131b73 !important;
}
.ntb-side-content h3 a:hover {
	color: #1682c5 !important;
}
.ntb-side-content p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: #8692a5;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* =========================================================
   DIVIDER
========================================================= */
.ntb-divider {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin:
		30px
		0
		10px;
}
.ntb-divider-line {
	flex: 1;
	height: 1px;
	background: #dce2eb;
}
.ntb-divider > p {
	max-width: 350px;
	margin: 0;
	color: #8d98aa;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	text-align: right;
}
/* =========================================================
   6 CARD GRID
   FIX: KHUNG THUMBNAIL ÔM SÁT ẢNH
========================================================= */
.ntb-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns:
		repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: start;
}
/* =========================================================
   CARD
========================================================= */
.ntb-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: auto !important;
	overflow: hidden;
	background: #ffffff;
	border:
		1px solid #dfe5ee;
	border-radius: 16px;
	box-shadow:
		0 8px 22px
		rgba(19, 27, 115, .06);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}
.ntb-card:hover {
	transform: translateY(-6px);
	border-color:
		rgba(19, 27, 115, .28);
	box-shadow:
		0 18px 36px
		rgba(19, 27, 115, .12);
}
/* =========================================================
   CARD MEDIA
   KHÔNG CÒN HEIGHT CỐ ĐỊNH
========================================================= */
.ntb-card-media {
	position: relative;
	display: block !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	background: transparent !important;
	border-bottom:
		1px solid #e3e9f1;
	line-height: 0;
}
/* =========================================================
   BỎ NỀN BLUR
========================================================= */
.ntb-card-blur {
	display: none !important;
}
.ntb-card-media::after {
	display: none !important;
	content: none !important;
}
/* =========================================================
   ẢNH THẬT
   WIDTH 100%
   HEIGHT AUTO
   => KHUNG ÔM SÁT ẢNH
========================================================= */
.ntb-card-media > img {
	position: relative;
	z-index: 2;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: unset !important;
	object-position:
		center center !important;
	background: transparent !important;
	vertical-align: middle;
	transition:
		transform .35s ease;
}
.ntb-card:hover
.ntb-card-media > img {
	transform: scale(1.018);
}
/* =========================================================
   BỎ MŨI TÊN NỔI
========================================================= */
.ntb-card-arrow {
	display: none !important;
}
/* =========================================================
   CARD BODY
========================================================= */
.ntb-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0 !important;
	padding:
		20px
		21px
		21px;
}
/* =========================================================
   CARD META
========================================================= */
.ntb-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}
.ntb-card-meta > span {
	color: #1682c5;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .6px;
}
.ntb-card-meta time {
	color: #96a1b2;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}
/* =========================================================
   CARD TITLE
========================================================= */
.ntb-card-body h3 {
	display: -webkit-box;
	margin: 0 0 11px;
	overflow: hidden;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.32;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ntb-card-body h3 a {
	color: #131b73 !important;
}
.ntb-card-body h3 a:hover {
	color: #1682c5 !important;
}
/* =========================================================
   CARD EXCERPT
========================================================= */
.ntb-card-body p {
	display: -webkit-box;
	margin: 0 0 15px;
	overflow: hidden;
	color: #707d91;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* =========================================================
   CARD MORE
========================================================= */
.ntb-card-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: auto;
	color: #131b73 !important;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}
.ntb-card-more i {
	color: #1682c5;
	font-size: 13px;
	transition:
		transform .2s ease;
}
.ntb-card-more:hover i {
	transform: translateX(4px);
}
/* =========================================================
   BOTTOM
========================================================= */
.ntb-bottom {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	margin-top: 34px;
}
.ntb-bottom > a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding-left: 21px;
	color: #131b73 !important;
	background: #ffffff;
	border:
		1px solid #131b73;
	border-radius: 28px;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	overflow: hidden;
	transition:
		background .2s ease,
		color .2s ease;
}
.ntb-bottom-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: #ffffff;
	background: #131b73;
	border-radius: 50%;
	font-size: 12px;
	transition:
		background .2s ease,
		color .2s ease,
		transform .2s ease;
}
.ntb-bottom > a:hover {
	color: #ffffff !important;
	background: #131b73;
}
.ntb-bottom > a:hover
.ntb-bottom-arrow {
	color: #131b73;
	background: #ff0000;
	transform: rotate(-35deg);
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media screen and (min-width: 1400px) {
	.ntb-lead-media,
	.ntb-side {
		height: 530px;
	}
	.ntb-lead-content h3 {
		font-size: 37px;
	}
	.ntb-side-card {
		grid-template-columns:
			115px
			minmax(0, 1fr);
	}
	.ntb-side-image {
		width: 115px;
		height: 95px;
	}
	/*
	 * Không set height .ntb-card-media nữa.
	 * Thumbnail tự theo tỷ lệ ảnh.
	 */
	.ntb-card-body {
		min-height: 0;
		padding:
			21px
			22px
			22px;
	}
	.ntb-card-body h3 {
		font-size: 23px;
	}
	.ntb-card-body p {
		font-size: 15px;
	}
}
/* =========================================================
   LAPTOP
========================================================= */
@media screen and
(min-width: 992px) and
(max-width: 1199px) {
	.ntb-activity {
		padding:
			56px
			0
			62px;
	}
	.ntb-head h2 {
		font-size: 36px;
	}
	.ntb-description,
	.ntb-description p {
		font-size: 15px;
	}
	.ntb-top {
		grid-template-columns:
			minmax(0, 1.3fr)
			minmax(330px, .8fr);
		gap: 19px;
	}
	.ntb-lead-media,
	.ntb-side {
		height: 470px;
	}
	.ntb-lead-content h3 {
		font-size: 29px;
	}
	.ntb-lead-content p {
		font-size: 14px;
	}
	.ntb-side {
		padding: 18px;
	}
	.ntb-side-title strong {
		font-size: 22px;
	}
	.ntb-side-card {
		grid-template-columns:
			86px
			minmax(0, 1fr);
		gap: 10px;
		padding:
			11px
			0;
	}
	.ntb-side-image {
		width: 86px;
		height: 76px;
	}
	.ntb-side-content h3 {
		font-size: 15px;
	}
	.ntb-side-content p {
		font-size: 11px;
	}
	.ntb-grid {
		gap: 17px;
	}
	/*
	 * Không set height thumbnail.
	 */
	.ntb-card-body {
		min-height: 0;
		padding:
			16px
			17px
			17px;
	}
	.ntb-card-body h3 {
		font-size: 19px;
	}
	.ntb-card-body p {
		font-size: 13px;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media screen and
(min-width: 768px) and
(max-width: 991px) {
	.ntb-activity {
		padding:
			52px
			0
			58px;
	}
	.ntb-head h2 {
		font-size: 33px;
	}
	.ntb-top {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.ntb-lead-media {
		height: 470px;
	}
	.ntb-side {
		height: auto;
	}
	.ntb-side-list {
		grid-template-columns:
			repeat(3, 1fr);
		grid-template-rows: 1fr;
		gap: 14px;
	}
	.ntb-side-card {
		display: block;
		padding:
			14px
			0
			0;
		border-bottom: 0;
	}
	.ntb-side-image {
		width: 100%;
		height: 160px;
		margin-bottom: 10px;
	}
	.ntb-side-content h3 {
		font-size: 16px;
	}
	.ntb-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
	/*
	 * Ảnh tự lấy chiều cao theo tỷ lệ gốc.
	 */
	.ntb-card-body {
		min-height: 0;
	}
	.ntb-card-body h3 {
		font-size: 20px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.ntb-activity {
		padding:
			40px
			0
			48px;
	}
	.ntb-head {
		display: block;
		margin-bottom: 24px;
	}
	.ntb-eyebrow {
		font-size: 10px;
	}
	.ntb-head h2 {
		font-size: 29px;
	}
	.ntb-description,
	.ntb-description p {
		font-size: 14px;
	}
	.ntb-head-more {
		margin-top: 14px;
		font-size: 12px;
	}
	/* =====================================================
	   TOP
	===================================================== */
	.ntb-top {
		grid-template-columns: 1fr;
		gap: 17px;
	}
	.ntb-lead-media {
		height: 410px;
		border-radius: 14px;
	}
	.ntb-lead-content {
		left: 20px;
		right: 20px;
		bottom: 21px;
	}
	.ntb-lead-content h3 {
		font-size: 25px;
	}
	.ntb-lead-content p {
		font-size: 13px;
		-webkit-line-clamp: 3;
	}
	.ntb-lead-badge {
		font-size: 10px;
	}
	/* =====================================================
	   SIDE
	===================================================== */
	.ntb-side {
		height: auto;
		padding:
			17px
			16px;
	}
	.ntb-side-title strong {
		font-size: 22px;
	}
	.ntb-side-card {
		grid-template-columns:
			96px
			minmax(0, 1fr);
		gap: 11px;
	}
	.ntb-side-image {
		width: 96px;
		height: 82px;
	}
	.ntb-side-content h3 {
		font-size: 15px;
	}
	.ntb-side-content p {
		font-size: 11px;
	}
	/* =====================================================
	   DIVIDER
	===================================================== */
	.ntb-divider {
		display: block;
		margin:
			31px
			0
			18px;
	}
	.ntb-divider-line {
		display: none;
	}
	.ntb-divider > p {
		max-width: none;
		margin-top: 8px;
		text-align: left;
	}
	/* =====================================================
	   6 CARD GRID
	===================================================== */
	.ntb-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.ntb-card {
		display: block;
		height: auto !important;
	}
	/*
	 * Mobile cũng để khung ảnh
	 * tự ôm theo chiều cao thật.
	 */
	.ntb-card-media {
		display: block !important;
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.ntb-card-media > img {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.ntb-card-arrow {
		display: none !important;
	}
	.ntb-card-body {
		min-height: 0;
		padding:
			16px
			17px
			18px;
	}
	.ntb-card-meta > span {
		font-size: 10px;
	}
	.ntb-card-meta time {
		font-size: 10px;
	}
	.ntb-card-body h3 {
		font-size: 20px;
		line-height: 1.32;
	}
	.ntb-card-body p {
		font-size: 14px;
		line-height: 1.55;
	}
	.ntb-card-more {
		font-size: 11px;
	}
	.ntb-bottom {
		margin-top: 26px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media screen and (max-width: 400px) {
	.ntb-head h2 {
		font-size: 26px;
	}
	.ntb-lead-media {
		height: 390px;
	}
	.ntb-lead-content h3 {
		font-size: 22px;
	}
	/*
	 * Không còn height 215px cho thumbnail.
	 */
	.ntb-card-body {
		padding:
			14px
			15px
			16px;
	}
	.ntb-card-body h3 {
		font-size: 18px;
	}
	.ntb-card-body p {
		font-size: 13px;
	}
}
/* =========================================================
   THUMBNAIL - CHỪA VIỀN TRẮNG NHẸ
========================================================= */
.ntb-card-media {
	position: relative;
	display: block !important;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	padding: 7px !important;
	overflow: hidden;
	background: #ffffff !important;
	line-height: 0;
}
/* ẢNH */
.ntb-card-media > img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: unset !important;
	background: transparent !important;
	border-radius: 7px;
	transition: transform .3s ease;
}
.ntb-card:hover
.ntb-card-media > img {
	transform: scale(1.012);
}
/* bỏ blur */
.ntb-card-blur {
	display: none !important;
}
/* bỏ lớp phủ cũ */
.ntb-card-media::after {
	display: none !important;
	content: none !important;
}
/* bỏ nút tròn */
.ntb-card-arrow {
	display: none !important;
}
/* =========================================================
   CÔNG TRÌNH THI CÔNG TIÊU BIỂU
   XÂY DỰNG NAM TRUNG
   PRIMARY : #131b73
   ACCENT  : #ff0000
   BG      : #eee
========================================================= */
/* =========================================================
   SECTION
========================================================= */
.nt-project-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding:
		62px
		0
		70px;
	background: #eee;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
.nt-project-section *,
.nt-project-section *::before,
.nt-project-section *::after {
	box-sizing: border-box;
}
.nt-project-section a {
	text-decoration: none !important;
}
/* =========================================================
   BỎ BACKGROUND GRID
========================================================= */
.nt-project-section::before {
	display: none !important;
	content: none !important;
	background: none !important;
}
/* =========================================================
   HEADER
========================================================= */
.nt-project-head {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 30px;
	margin-bottom: 30px;
	padding-bottom: 18px;
	border-bottom:
		1px solid #d0d3da;
}
.nt-project-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 76px;
	height: 3px;
	background: #ff0000;
}
.nt-project-head-main {
	max-width: 880px;
}
/* =========================================================
   EYEBROW
========================================================= */
.nt-project-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 9px;
	color: #5d6c85;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 1.1px;
	text-transform: uppercase;
}
.nt-project-eyebrow > span {
	display: block;
	width: 30px;
	height: 2px;
	background: #ff0000;
}
/* =========================================================
   MAIN TITLE
========================================================= */
.nt-project-head h2 {
	margin:
		0
		0
		9px;
	color: #131b73;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.3px;
	text-transform: uppercase;
}
/* =========================================================
   DESCRIPTION
========================================================= */
.nt-project-description,
.nt-project-description p {
	margin: 0 !important;
	color: #65738a;
	font-size: 15px;
	line-height: 1.6;
}
/* =========================================================
   HEADER MORE
========================================================= */
.nt-project-head-more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	padding-bottom: 5px;
	color: #131b73 !important;
	border-bottom:
		2px solid #ff0000;
	font-size: 13px;
	font-weight: 800;
	white-space: nowrap;
}
.nt-project-head-more i {
	transition:
		transform .22s ease;
}
.nt-project-head-more:hover i {
	transform:
		translateX(5px);
}
/* =========================================================
   GRID
========================================================= */
.nt-project-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);
	gap:
		24px
		20px;
	align-items: stretch;
}
/* =========================================================
   CARD
========================================================= */
.nt-project-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	overflow: hidden;
	background: #fff;
	border:
		1px solid #d3d8e1;
	border-radius: 16px;
	box-shadow:
		0 6px 18px
		rgba(19, 27, 115, .05);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}
.nt-project-card:hover {
	transform:
		translateY(-5px);
	border-color:
		rgba(19, 27, 115, .22);
	box-shadow:
		0 15px 32px
		rgba(19, 27, 115, .11);
}
/* =========================================================
   IMAGE FRAME
   KHUNG ÔM ĐÚNG SIZE ẢNH
========================================================= */
.nt-project-media {
	position: relative;
	display: block;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	margin: 0 !important;
	padding: 5px !important;
	overflow: hidden;
	background: #fff !important;
	border: 0 !important;
	border-bottom:
		1px solid #e4e7ec !important;
	border-radius:
		15px
		15px
		0
		0;
	line-height: 0;
}
/* =========================================================
   BỎ CÁC THÀNH PHẦN CŨ
========================================================= */
.nt-project-media-bg,
.nt-project-image-overlay,
.nt-project-image-link,
.nt-project-hover-overlay,
.nt-project-zoom-icon,
.nt-project-media .link {
	display: none !important;
}
/* =========================================================
   IMAGE
   GIỮ TỶ LỆ GỐC
========================================================= */
.nt-project-media > img {
	position: relative;
	z-index: 2;
	display: block !important;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: unset !important;
	object-position:
		center center !important;
	background: transparent !important;
	border-radius: 9px;
	transform: scale(1);
	transform-origin:
		center center;
	transition:
		transform .45s
		cubic-bezier(.22, .61, .36, 1);
}
/* =========================================================
   HOVER IMAGE
   CHỈ ẢNH ZOOM
========================================================= */
.nt-project-card:hover
.nt-project-media > img {
	transform:
		scale(1.05);
}
/* =========================================================
   BODY
========================================================= */
.nt-project-body {
	display: flex;
	flex-direction: column;
	flex:
		1 1 auto;
	min-width: 0;
	padding:
		20px
		20px
		21px;
	background: #fff;
}
/* =========================================================
   BỎ LABEL
========================================================= */
.nt-project-label {
	display: none !important;
}
/* =========================================================
   TITLE
========================================================= */
.nt-project-title,
.nt-project-body h3 {
	display: -webkit-box;
	min-height: 86px;
	margin:
		0
		0
		17px;
	overflow: hidden;
	font-size:
		22px !important;
	font-weight:
		800;
	line-height:
		1.32;
	-webkit-line-clamp:
		3;
	-webkit-box-orient:
		vertical;
}
.nt-project-title a,
.nt-project-body h3 a {
	color:
		#131b73 !important;
	transition:
		color .22s ease;
}
.nt-project-card:hover
.nt-project-title a,
.nt-project-card:hover
.nt-project-body h3 a {
	color:
		#0878c9 !important;
}
/* =========================================================
   PROJECT INFO
========================================================= */
.nt-project-info {
	display: flex;
	flex-direction: column;
	gap: 11px;
	margin-bottom: 20px;
}
/* =========================================================
   INFO ROW
========================================================= */
.nt-project-info-row {
	display: grid;
	grid-template-columns:
		38px
		minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}
/* =========================================================
   INFO ICON
========================================================= */
.nt-project-info-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width:
		38px !important;
	height:
		38px !important;
	min-width:
		38px;
	margin: 0 !important;
	padding: 0 !important;
	color:
		#131b73 !important;
	background:
		#f0f1f7;
	border-radius:
		10px;
	font-size:
		15px !important;
	line-height:
		1 !important;
	transition:
		background .22s ease,
		color .22s ease;
}
.nt-project-info-icon i {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	color:
		inherit !important;
	font-size:
		15px !important;
	line-height:
		1 !important;
}
.nt-project-card:hover
.nt-project-info-icon {
	color: #fff !important;
	background: #131b73;
}
/* =========================================================
   INFO CONTENT
========================================================= */
.nt-project-info-content,
.nt-project-info-row > div {
	min-width: 0;
}
.nt-project-info-content small,
.nt-project-info-row small {
	display: block;
	margin-bottom:
		3px;
	color:
		#929bab;
	font-size:
		11px !important;
	font-weight:
		600;
	line-height:
		1.2;
}
.nt-project-info-content strong,
.nt-project-info-row strong {
	display: -webkit-box;
	overflow: hidden;
	color:
		#35445a;
	font-size:
		14px !important;
	font-weight:
		700;
	line-height:
		1.42;
	-webkit-line-clamp:
		2;
	-webkit-box-orient:
		vertical;
}
/* =========================================================
   MORE
========================================================= */
.nt-project-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	margin-top: auto;
	color:
		#131b73 !important;
	font-size:
		12px;
	font-weight:
		800;
	line-height:
		1;
	text-transform:
		uppercase;
}
.nt-project-more-line {
	display: block;
	width:
		30px;
	height:
		2px;
	background:
		#ff0000;
	border-radius:
		4px;
	transition:
		width .25s ease;
}
.nt-project-card:hover
.nt-project-more-line {
	width:
		47px;
}
/* =========================================================
   VIEW ALL
========================================================= */
.nt-project-bottom {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	margin-top:
		34px;
}
.nt-project-bottom > a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	height:
		48px;
	padding:
		0
		0
		0
		21px;
	overflow: hidden;
	color:
		#131b73 !important;
	background: #fff;
	border:
		1px solid #131b73;
	border-radius:
		28px;
	font-size:
		14px;
	font-weight:
		800;
	line-height:
		1;
	transition:
		background .22s ease,
		color .22s ease;
}
.nt-project-bottom-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width:
		44px;
	height:
		44px;
	color:
		#fff;
	background:
		#131b73;
	border-radius:
		50%;
	font-size:
		12px;
	transition:
		background .22s ease,
		color .22s ease,
		transform .22s ease;
}
.nt-project-bottom > a:hover {
	color:
		#fff !important;
	background:
		#131b73;
}
.nt-project-bottom > a:hover
.nt-project-bottom-icon {
	color:
		#131b73;
	background:
		#ff0000;
	transform:
		rotate(-30deg);
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media screen and (min-width: 1400px) {
	.nt-project-grid {
		gap:
			25px
			22px;
	}
	.nt-project-title,
	.nt-project-body h3 {
		min-height:
			91px;
		font-size:
			23px !important;
	}
	.nt-project-info-content strong,
	.nt-project-info-row strong {
		font-size:
			15px !important;
	}
}
/* =========================================================
   LAPTOP
========================================================= */
@media screen and
(min-width: 992px) and
(max-width: 1199px) {
	.nt-project-section {
		padding:
			56px
			0
			62px;
	}
	.nt-project-head h2 {
		font-size:
			34px;
	}
	.nt-project-grid {
		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
		gap:
			19px;
	}
	.nt-project-title,
	.nt-project-body h3 {
		min-height:
			80px;
		font-size:
			20px !important;
	}
	.nt-project-info-content strong,
	.nt-project-info-row strong {
		font-size:
			13px !important;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media screen and
(min-width: 768px) and
(max-width: 991px) {
	.nt-project-section {
		padding:
			50px
			0
			58px;
	}
	.nt-project-head {
		display: block;
	}
	.nt-project-head h2 {
		font-size:
			30px;
	}
	.nt-project-head-more {
		margin-top:
			14px;
	}
	.nt-project-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
		gap:
			18px;
	}
	.nt-project-title,
	.nt-project-body h3 {
		min-height:
			80px;
		font-size:
			20px !important;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.nt-project-section {
		padding:
			40px
			0
			48px;
	}
	.nt-project-head {
		display: block;
		margin-bottom:
			23px;
	}
	.nt-project-head h2 {
		font-size:
			27px;
	}
	.nt-project-description,
	.nt-project-description p {
		font-size:
			14px;
	}
	.nt-project-head-more {
		margin-top:
			13px;
	}
	.nt-project-grid {
		grid-template-columns:
			1fr;
		gap:
			17px;
	}
	.nt-project-card {
		height:
			auto;
	}
	.nt-project-card:hover {
		transform:
			none;
	}
	.nt-project-media {
		padding:
			5px !important;
	}
	.nt-project-card:hover
	.nt-project-media > img {
		transform:
			none;
	}
	.nt-project-body {
		padding:
			17px
			17px
			19px;
	}
	.nt-project-title,
	.nt-project-body h3 {
		min-height:
			0;
		margin-bottom:
			14px;
		font-size:
			20px !important;
	}
	.nt-project-info {
		gap:
			9px;
		margin-bottom:
			16px;
	}
	.nt-project-info-row {
		grid-template-columns:
			34px
			minmax(0, 1fr);
		gap:
			9px;
	}
	.nt-project-info-icon {
		width:
			34px !important;
		height:
			34px !important;
		min-width:
			34px;
		font-size:
			14px !important;
	}
	.nt-project-info-icon i {
		font-size:
			14px !important;
	}
	.nt-project-info-content small,
	.nt-project-info-row small {
		font-size:
			10px !important;
	}
	.nt-project-info-content strong,
	.nt-project-info-row strong {
		font-size:
			13px !important;
	}
	.nt-project-more {
		font-size:
			11px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media screen and (max-width: 420px) {
	.nt-project-head h2 {
		font-size:
			24px;
	}
	.nt-project-media {
		padding:
			4px !important;
	}
	.nt-project-body {
		padding:
			15px
			15px
			17px;
	}
	.nt-project-title,
	.nt-project-body h3 {
		font-size:
			18px !important;
	}
	.nt-project-info-content strong,
	.nt-project-info-row strong {
		font-size:
			12px !important;
	}
}
/* =========================================================
   CÔNG TRÌNH ĐANG THI CÔNG
   CATEGORY 22
   PRIMARY : #131b73
   ACCENT  : #ff0000
   BG      : #ffffff
========================================================= */
/* =========================================================
   SECTION
========================================================= */
.nt-progress-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding:
		62px
		0
		70px;
	background:
		#fff;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
.nt-progress-section *,
.nt-progress-section *::before,
.nt-progress-section *::after {
	box-sizing:
		border-box;
}
.nt-progress-section a {
	text-decoration:
		none !important;
}
/* không có background grid */
.nt-progress-section::before {
	display:
		none !important;
	content:
		none !important;
	background:
		none !important;
}
/* =========================================================
   HEADER
========================================================= */
.nt-progress-head {
	position: relative;
	z-index: 2;
	display: flex;
	align-items:
		flex-end;
	justify-content:
		space-between;
	gap:
		30px;
	margin-bottom:
		30px;
	padding-bottom:
		18px;
	border-bottom:
		1px solid #e0e4ea;
}
.nt-progress-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width:
		76px;
	height:
		3px;
	background:
		#ff0000;
}
.nt-progress-head-main {
	max-width:
		880px;
}
/* =========================================================
   EYEBROW
========================================================= */
.nt-progress-eyebrow {
	display: flex;
	align-items:
		center;
	gap:
		10px;
	margin-bottom:
		9px;
	color:
		#5d6c85;
	font-size:
		11px;
	font-weight:
		800;
	line-height:
		1.2;
	letter-spacing:
		1.1px;
	text-transform:
		uppercase;
}
.nt-progress-eyebrow > span {
	display:
		block;
	width:
		30px;
	height:
		2px;
	background:
		#ff0000;
}
/* =========================================================
   TITLE
========================================================= */
.nt-progress-head h2 {
	margin:
		0
		0
		9px;
	color:
		#131b73;
	font-size:
		38px;
	font-weight:
		800;
	line-height:
		1.1;
	letter-spacing:
		-.3px;
	text-transform:
		uppercase;
}
/* =========================================================
   DESCRIPTION
========================================================= */
.nt-progress-description,
.nt-progress-description p {
	margin:
		0 !important;
	color:
		#65738a;
	font-size:
		15px;
	line-height:
		1.6;
}
/* =========================================================
   HEADER MORE
========================================================= */
.nt-progress-head-more {
	display:
		inline-flex;
	align-items:
		center;
	gap:
		9px;
	flex:
		0 0 auto;
	padding-bottom:
		5px;
	color:
		#131b73 !important;
	border-bottom:
		2px solid #ff0000;
	font-size:
		13px;
	font-weight:
		800;
	white-space:
		nowrap;
}
.nt-progress-head-more i {
	transition:
		transform .22s ease;
}
.nt-progress-head-more:hover i {
	transform:
		translateX(5px);
}
/* =========================================================
   GRID
========================================================= */
.nt-progress-grid {
	position:
		relative;
	z-index:
		2;
	display:
		grid;
	grid-template-columns:
		repeat(
			4,
			minmax(0, 1fr)
		);
	gap:
		24px
		20px;
	align-items:
		stretch;
}
/* =========================================================
   CARD
========================================================= */
.nt-progress-card {
	display:
		flex;
	flex-direction:
		column;
	min-width:
		0;
	height:
		100%;
	overflow:
		hidden;
	background:
		#fff;
	border:
		1px solid #d9dee7;
	border-radius:
		16px;
	box-shadow:
		0 6px 18px
		rgba(19, 27, 115, .055);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}
.nt-progress-card:hover {
	transform:
		translateY(-5px);
	border-color:
		rgba(19, 27, 115, .24);
	box-shadow:
		0 15px 32px
		rgba(19, 27, 115, .11);
}
/* =========================================================
   IMAGE FRAME
   KHUNG ÔM THEO ẢNH
========================================================= */
.nt-progress-media {
	position:
		relative;
	display:
		block;
	width:
		100%;
	height:
		auto !important;
	min-height:
		0 !important;
	max-height:
		none !important;
	aspect-ratio:
		auto !important;
	margin:
		0 !important;
	padding:
		5px !important;
	overflow:
		hidden;
	background:
		#fff !important;
	border:
		0 !important;
	border-bottom:
		1px solid #e7e9ee !important;
	border-radius:
		15px
		15px
		0
		0;
	line-height:
		0;
}
/* =========================================================
   IMAGE
========================================================= */
.nt-progress-media > img {
	position:
		relative;
	display:
		block !important;
	width:
		100% !important;
	height:
		auto !important;
	max-width:
		100% !important;
	max-height:
		none !important;
	margin:
		0 !important;
	padding:
		0 !important;
	object-fit:
		unset !important;
	object-position:
		center center !important;
	background:
		transparent !important;
	border-radius:
		9px;
	transform:
		scale(1);
	transform-origin:
		center center;
	transition:
		transform .45s
		cubic-bezier(.22, .61, .36, 1);
}
/* =========================================================
   IMAGE HOVER
   CHỈ ZOOM ẢNH
========================================================= */
.nt-progress-card:hover
.nt-progress-media > img {
	transform:
		scale(1.05);
}
/* =========================================================
   BODY
========================================================= */
.nt-progress-body {
	display:
		flex;
	flex-direction:
		column;
	flex:
		1 1 auto;
	min-width:
		0;
	padding:
		20px
		20px
		21px;
	background:
		#fff;
}
/* =========================================================
   TITLE
========================================================= */
.nt-progress-title {
	display:
		-webkit-box;
	min-height:
		86px;
	margin:
		0
		0
		17px;
	overflow:
		hidden;
	font-size:
		22px;
	font-weight:
		800;
	line-height:
		1.32;
	-webkit-line-clamp:
		3;
	-webkit-box-orient:
		vertical;
}
.nt-progress-title a {
	color:
		#131b73 !important;
	transition:
		color .22s ease;
}
.nt-progress-card:hover
.nt-progress-title a {
	color:
		#0878c9 !important;
}
/* =========================================================
   INFO
========================================================= */
.nt-progress-info {
	display:
		flex;
	flex-direction:
		column;
	gap:
		11px;
	margin-bottom:
		20px;
}
/* =========================================================
   INFO ROW
========================================================= */
.nt-progress-info-row {
	display:
		grid;
	grid-template-columns:
		38px
		minmax(0, 1fr);
	gap:
		10px;
	align-items:
		start;
}
/* =========================================================
   ICON
========================================================= */
.nt-progress-info-icon {
	display:
		flex !important;
	align-items:
		center !important;
	justify-content:
		center !important;
	width:
		38px !important;
	height:
		38px !important;
	min-width:
		38px;
	margin:
		0 !important;
	padding:
		0 !important;
	color:
		#131b73 !important;
	background:
		#f0f1f7;
	border-radius:
		10px;
	font-size:
		15px !important;
	line-height:
		1 !important;
	transition:
		background .22s ease,
		color .22s ease;
}
.nt-progress-info-icon i {
	display:
		block !important;
	margin:
		0 !important;
	padding:
		0 !important;
	color:
		inherit !important;
	font-size:
		15px !important;
	line-height:
		1 !important;
}
.nt-progress-card:hover
.nt-progress-info-icon {
	color:
		#fff !important;
	background:
		#131b73;
}
/* =========================================================
   INFO CONTENT
========================================================= */
.nt-progress-info-content {
	min-width:
		0;
}
.nt-progress-info-content small {
	display:
		block;
	margin-bottom:
		3px;
	color:
		#929bab;
	font-size:
		11px;
	font-weight:
		600;
	line-height:
		1.2;
}
.nt-progress-info-content strong {
	display:
		-webkit-box;
	overflow:
		hidden;
	color:
		#35445a;
	font-size:
		14px;
	font-weight:
		700;
	line-height:
		1.42;
	-webkit-line-clamp:
		2;
	-webkit-box-orient:
		vertical;
}
/* =========================================================
   MORE
========================================================= */
.nt-progress-more {
	display:
		inline-flex;
	align-items:
		center;
	gap:
		10px;
	align-self:
		flex-start;
	margin-top:
		auto;
	color:
		#131b73 !important;
	font-size:
		12px;
	font-weight:
		800;
	line-height:
		1;
	text-transform:
		uppercase;
}
.nt-progress-more-line {
	display:
		block;
	width:
		30px;
	height:
		2px;
	background:
		#ff0000;
	border-radius:
		4px;
	transition:
		width .25s ease;
}
.nt-progress-card:hover
.nt-progress-more-line {
	width:
		47px;
}
/* =========================================================
   BOTTOM BUTTON
========================================================= */
.nt-progress-bottom {
	position:
		relative;
	z-index:
		2;
	display:
		flex;
	justify-content:
		center;
	margin-top:
		34px;
}
.nt-progress-bottom > a {
	display:
		inline-flex;
	align-items:
		center;
	gap:
		14px;
	height:
		48px;
	padding:
		0
		0
		0
		21px;
	overflow:
		hidden;
	color:
		#131b73 !important;
	background:
		#fff;
	border:
		1px solid #131b73;
	border-radius:
		28px;
	font-size:
		14px;
	font-weight:
		800;
	line-height:
		1;
	transition:
		background .22s ease,
		color .22s ease;
}
.nt-progress-bottom-icon {
	display:
		flex;
	align-items:
		center;
	justify-content:
		center;
	width:
		44px;
	height:
		44px;
	color:
		#fff;
	background:
		#131b73;
	border-radius:
		50%;
	font-size:
		12px;
	transition:
		background .22s ease,
		color .22s ease,
		transform .22s ease;
}
.nt-progress-bottom > a:hover {
	color:
		#fff !important;
	background:
		#131b73;
}
.nt-progress-bottom > a:hover
.nt-progress-bottom-icon {
	color:
		#131b73;
	background:
		#ff0000;
	transform:
		rotate(-30deg);
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media screen and (min-width: 1400px) {
	.nt-progress-grid {
		gap:
			25px
			22px;
	}
	.nt-progress-title {
		min-height:
			91px;
		font-size:
			23px;
	}
	.nt-progress-info-content strong {
		font-size:
			15px;
	}
}
/* =========================================================
   LAPTOP
========================================================= */
@media screen and
(min-width: 992px) and
(max-width: 1199px) {
	.nt-progress-section {
		padding:
			56px
			0
			62px;
	}
	.nt-progress-head h2 {
		font-size:
			34px;
	}
	.nt-progress-grid {
		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
		gap:
			19px;
	}
	.nt-progress-title {
		min-height:
			80px;
		font-size:
			20px;
	}
	.nt-progress-info-content strong {
		font-size:
			13px;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media screen and
(min-width: 768px) and
(max-width: 991px) {
	.nt-progress-section {
		padding:
			50px
			0
			58px;
	}
	.nt-progress-head {
		display:
			block;
	}
	.nt-progress-head h2 {
		font-size:
			30px;
	}
	.nt-progress-head-more {
		margin-top:
			14px;
	}
	.nt-progress-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);
		gap:
			18px;
	}
	.nt-progress-title {
		min-height:
			80px;
		font-size:
			20px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.nt-progress-section {
		padding:
			40px
			0
			48px;
	}
	.nt-progress-head {
		display:
			block;
		margin-bottom:
			23px;
	}
	.nt-progress-head h2 {
		font-size:
			27px;
	}
	.nt-progress-description,
	.nt-progress-description p {
		font-size:
			14px;
	}
	.nt-progress-head-more {
		margin-top:
			13px;
	}
	.nt-progress-grid {
		grid-template-columns:
			1fr;
		gap:
			17px;
	}
	.nt-progress-card {
		height:
			auto;
	}
	.nt-progress-card:hover {
		transform:
			none;
	}
	.nt-progress-media {
		padding:
			5px !important;
	}
	.nt-progress-card:hover
	.nt-progress-media > img {
		transform:
			none;
	}
	.nt-progress-body {
		padding:
			17px
			17px
			19px;
	}
	.nt-progress-title {
		min-height:
			0;
		margin-bottom:
			14px;
		font-size:
			20px;
	}
	.nt-progress-info {
		gap:
			9px;
		margin-bottom:
			16px;
	}
	.nt-progress-info-row {
		grid-template-columns:
			34px
			minmax(0, 1fr);
		gap:
			9px;
	}
	.nt-progress-info-icon {
		width:
			34px !important;
		height:
			34px !important;
		min-width:
			34px;
		font-size:
			14px !important;
	}
	.nt-progress-info-icon i {
		font-size:
			14px !important;
	}
	.nt-progress-info-content small {
		font-size:
			10px;
	}
	.nt-progress-info-content strong {
		font-size:
			13px;
	}
	.nt-progress-more {
		font-size:
			11px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media screen and (max-width: 420px) {
	.nt-progress-head h2 {
		font-size:
			24px;
	}
	.nt-progress-media {
		padding:
			4px !important;
	}
	.nt-progress-body {
		padding:
			15px
			15px
			17px;
	}
	.nt-progress-title {
		font-size:
			18px;
	}
	.nt-progress-info-content strong {
		font-size:
			12px;
	}
}
/* =========================================================
   GLOBAL 4x2 PROJECT SLIDER
========================================================= */
.nt-card-slider {
	position: relative;
	width: 100%;
}
.nt-card-slider-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}
.nt-card-slider-track {
	display: flex;
	align-items: flex-start;
	width: 100%;
	transform: translate3d(0, 0, 0);
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.nt-card-slider-page {
	flex: 0 0 100%;
	width: 100%;
	min-width: 100%;
}
/* Desktop luôn đúng 4 cột × 2 hàng cho 8 bài */
@media screen and (min-width: 992px) {
	.nt-card-slider-page .nt-project-grid,
	.nt-card-slider-page .nt-progress-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
/* =========================================================
   PREV / NEXT
========================================================= */
.nt-card-slider-arrow {
	position: absolute;
	top: 50%;
	z-index: 30;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	color: #131b73;
	background: #fff;
	border: 1px solid #d5dbe5;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(19, 27, 115, .14);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	transition:
		color .2s ease,
		background .2s ease,
		border-color .2s ease,
		box-shadow .2s ease,
		opacity .2s ease;
}
.nt-card-slider-prev {
	left: -23px;
}
.nt-card-slider-next {
	right: -23px;
}
.nt-card-slider-arrow:hover:not(:disabled) {
	color: #fff;
	background: #131b73;
	border-color: #131b73;
	box-shadow: 0 10px 28px rgba(19, 27, 115, .22);
}
.nt-card-slider-arrow i {
	color: inherit !important;
	font-size: inherit !important;
	line-height: 1 !important;
}
/* Khi màn hình sát container thì kéo nút vào trong */
@media screen and (max-width: 1250px) {
	.nt-card-slider-prev {
		left: 7px;
	}
	.nt-card-slider-next {
		right: 7px;
	}
}
/* Tablet / mobile */
@media screen and (max-width: 767px) {
	.nt-card-slider-arrow {
		top: auto;
		bottom: -57px;
		width: 40px;
		height: 40px;
		font-size: 20px;
		transform: none;
	}
	.nt-card-slider-prev {
		left: calc(50% - 48px);
	}
	.nt-card-slider-next {
		right: calc(50% - 48px);
	}
	/* chừa khoảng cho nút prev/next */
	.nt-card-slider + .nt-project-bottom,
	.nt-card-slider + .nt-progress-bottom {
		margin-top: 80px !important;
	}
}
/* =========================================================
   CARD SLIDER
========================================================= */
.nt-card-slider {
	position: relative;
	padding: 0 56px;
	margin-top: 24px;
}
.nt-card-slider-viewport {
	overflow: hidden;
	position: relative;
	width: 100%;
	min-height: 0 !important;
}
.nt-card-slider-track {
	display: flex;
	align-items: flex-start;
	will-change: transform;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nt-card-slider-page {
	width: 100%;
	flex: 0 0 100%;
}
.nt-card-slider-page-grid {
	width: 100%;
}
/* khi page hiện tại chỉ còn 1 hàng */
.nt-card-slider.nt-slider-single-row .nt-card-slider-viewport {
	min-height: 0 !important;
}
/* =========================================================
   PREV / NEXT
========================================================= */
.nt-card-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: 1px solid #cfd9e7;
	border-radius: 50%;
	background: #ffffff;
	color: #0d2f6f;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(19, 27, 115, 0.10);
	cursor: pointer;
	z-index: 10;
	transition: all 0.25s ease;
}
.nt-card-slider-prev {
	left: 0;
}
.nt-card-slider-next {
	right: 0;
}
.nt-card-slider-arrow i {
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
}
.nt-card-slider-arrow:hover {
	background: linear-gradient(135deg, #1597f4 0%, #131b73 100%);
	color: #ffffff;
	border-color: #131b73;
	transform: translateY(-50%) scale(1.06);
	box-shadow: 0 14px 30px rgba(19, 27, 115, 0.22);
}
/* =========================================================
   DOTS
========================================================= */
.nt-card-slider-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 18px;
}
.nt-card-slider-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #cfd9e7;
	cursor: pointer;
	transition: all 0.25s ease;
	box-shadow: none;
}
.nt-card-slider-dot:hover {
	background: #8bbef1;
	transform: scale(1.05);
}
.nt-card-slider-dot.active {
	width: 28px;
	background: linear-gradient(90deg, #1da1f2 0%, #131b73 100%);
}
/* =========================================================
   CARD HOVER
========================================================= */
.nt-card-slider .nt-project-card,
.nt-card-slider .nt-progress-card {
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.nt-card-slider .nt-project-card:hover,
.nt-card-slider .nt-progress-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 36px rgba(19, 27, 115, 0.12);
}
/* zoom nhẹ ảnh thôi */
.nt-card-slider .nt-project-image-wrap,
.nt-card-slider .nt-progress-image-wrap {
	overflow: hidden;
}
.nt-card-slider .nt-project-image,
.nt-card-slider .nt-progress-image,
.nt-card-slider .nt-project-image-wrap img,
.nt-card-slider .nt-progress-image-wrap img {
	transition: transform 0.55s ease;
	transform: scale(1);
}
.nt-card-slider .nt-project-card:hover .nt-project-image,
.nt-card-slider .nt-progress-card:hover .nt-progress-image,
.nt-card-slider .nt-project-card:hover .nt-project-image-wrap img,
.nt-card-slider .nt-progress-card:hover .nt-progress-image-wrap img {
	transform: scale(1.06);
}
/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
	.nt-card-slider {
		padding: 0 50px;
	}
}
@media (max-width: 991px) {
	.nt-card-slider {
		padding: 0 42px;
	}
	.nt-card-slider-arrow {
		width: 42px;
		height: 42px;
	}
	.nt-card-slider-arrow i {
		font-size: 22px;
	}
}
@media (max-width: 767px) {
	.nt-card-slider {
		padding: 0 36px;
	}
	.nt-card-slider-arrow {
		width: 38px;
		height: 38px;
	}
	.nt-card-slider-arrow i {
		font-size: 20px;
	}
	.nt-card-slider-dots {
		margin-top: 14px;
		gap: 7px;
	}
	.nt-card-slider-dot.active {
		width: 22px;
	}
}
@media (max-width: 575px) {
	.nt-card-slider {
		padding: 0 28px;
	}
	.nt-card-slider-arrow {
		width: 34px;
		height: 34px;
	}
	.nt-card-slider-arrow i {
		font-size: 18px;
	}
}
/* =========================================================
   MẪU THIẾT KẾ - CATEGORY 54
   XÂY DỰNG NAM TRUNG
   PRIMARY : #131b73
   ACCENT  : #ff0000
   BG      : #eee
========================================================= */
/* =========================================================
   SECTION
========================================================= */
.nt-design-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding:
		58px
		0
		68px;
	background:
		#eee;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
.nt-design-section *,
.nt-design-section *::before,
.nt-design-section *::after {
	box-sizing:
		border-box;
}
.nt-design-section a {
	text-decoration:
		none !important;
}
/* =========================================================
   HEADER
========================================================= */
.nt-design-head {
	position: relative;
	margin-bottom:
		27px;
	padding-bottom:
		18px;
	border-bottom:
		1px solid #d0d3da;
}
.nt-design-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width:
		76px;
	height:
		3px;
	background:
		#ff0000;
}
.nt-design-title-wrap {
	max-width:
		900px;
}
/* =========================================================
   LABEL
========================================================= */
.nt-design-label {
	display: flex;
	align-items:
		center;
	gap:
		10px;
	margin-bottom:
		9px;
	color:
		#66758a;
	font-size:
		11px;
	font-weight:
		800;
	line-height:
		1.2;
	letter-spacing:
		1.2px;
	text-transform:
		uppercase;
}
.nt-design-label::before {
	content: "";
	display: block;
	width:
		30px;
	height:
		2px;
	background:
		#ff0000;
}
/* =========================================================
   TITLE
========================================================= */
.nt-design-title {
	margin:
		0
		0
		9px;
	color:
		#131b73;
	font-size:
		38px;
	font-weight:
		800;
	line-height:
		1.12;
	letter-spacing:
		-.3px;
	text-transform:
		uppercase;
}
/* =========================================================
   DESCRIPTION
========================================================= */
.nt-design-desc,
.nt-design-desc p {
	margin:
		0 !important;
	color:
		#68778c;
	font-size:
		15px;
	line-height:
		1.65;
}
/* =========================================================
   TAB WRAPPER
========================================================= */
.nt-design-tabs-outer {
	position: relative;
	z-index: 5;
	margin-bottom:
		30px;
}
/* =========================================================
   TAB BAR
========================================================= */
.nt-design-tabs {
	display: flex;
	align-items:
		center;
	gap:
		7px;
	width: 100%;
	padding:
		8px;
	overflow-x:
		auto;
	overflow-y:
		hidden;
	background:
		#e1e7ee;
	border:
		1px solid #d3dbe5;
	border-radius:
		18px;
	box-shadow:
		inset
		0
		1px
		0
		rgba(255,255,255,.75);
	scrollbar-width:
		none;
	-webkit-overflow-scrolling:
		touch;
}
.nt-design-tabs::-webkit-scrollbar {
	display:
		none;
}
/* =========================================================
   TAB BUTTON
========================================================= */
.nt-design-tab {
	position: relative;
	display:
		inline-flex;
	align-items:
		center;
	justify-content:
		center;
	flex:
		1 0 auto;
	min-height:
		46px;
	margin: 0;
	padding:
		0
		18px;
	color:
		#607189;
	background:
		transparent;
	border:
		1px solid transparent;
	border-radius:
		12px;
	outline:
		none;
	font-family:
		inherit;
	font-size:
		13px;
	font-weight:
		800;
	line-height:
		1.2;
	white-space:
		nowrap;
	cursor:
		pointer;
	transition:
		color .22s ease,
		background .22s ease,
		border-color .22s ease,
		transform .22s ease,
		box-shadow .22s ease;
}
/* TAB HOVER */
.nt-design-tab:hover {
	color:
		#131b73;
	background:
		rgba(255,255,255,.65);
}
/* TAB ACTIVE */
.nt-design-tab.is-active {
	color:
		#131b73;
	background:
		#fff;
	border-color:
		rgba(19,27,115,.06);
	box-shadow:
		0
		7px
		18px
		rgba(19,27,115,.10);
	transform:
		translateY(-1px);
}
.nt-design-tab.is-active::after {
	content: "";
	position: absolute;
	left:
		22%;
	right:
		22%;
	bottom:
		5px;
	height:
		3px;
	background:
		linear-gradient(
			90deg,
			#ff0000,
			#131b73
		);
	border-radius:
		999px;
}
/* =========================================================
   PANEL
========================================================= */
.nt-design-panels {
	position:
		relative;
}
.nt-design-panel {
	display:
		none;
}
.nt-design-panel.is-active {
	display:
		block;
	animation:
		ntDesignPanelIn
		.28s ease;
}
@keyframes ntDesignPanelIn {
	from {
		opacity: 0;
		transform:
			translateY(6px);
	}
	to {
		opacity: 1;
		transform:
			translateY(0);
	}
}
/* =========================================================
   SLIDER
========================================================= */
.nt-design-slider {
	position:
		relative;
	width:
		100%;
}
/* =========================================================
   VIEWPORT
   JS TỰ CO HEIGHT THEO SLIDE
========================================================= */
.nt-design-viewport {
	position:
		relative;
	width:
		100%;
	height:
		auto;
	min-height:
		0 !important;
	overflow:
		hidden;
	transition:
		height
		.32s
		cubic-bezier(.22,.61,.36,1);
}
/* =========================================================
   TRACK
========================================================= */
.nt-design-track {
	display:
		flex;
	align-items:
		flex-start;
	width:
		100%;
	transform:
		translate3d(0,0,0);
	transition:
		transform
		.52s
		cubic-bezier(.22,.61,.36,1);
	will-change:
		transform;
}
/* =========================================================
   SLIDE
========================================================= */
.nt-design-slide {
	flex:
		0 0 100%;
	width:
		100%;
	min-width:
		100%;
	height:
		auto;
	align-self:
		flex-start;
}
/* =========================================================
   GRID
   DESKTOP 4 CỘT
========================================================= */
.nt-design-grid {
	display:
		grid;
	grid-template-columns:
		repeat(
			4,
			minmax(0,1fr)
		);
	gap:
		22px
		20px;
	align-items:
		stretch;
	width:
		100%;
	/*
	 * Các hàng bằng chiều cao.
	 * Slide cuối chỉ 1 hàng vẫn tự co.
	 */
	grid-auto-rows:
		1fr;
}
/* =========================================================
   CARD
========================================================= */
.nt-design-card {
	display:
		flex !important;
	flex-direction:
		column !important;
	align-self:
		stretch !important;
	width:
		100% !important;
	height:
		100% !important;
	min-width:
		0;
	overflow:
		hidden;
	background:
		#fff;
	border:
		1px solid #d6dce5;
	border-radius:
		17px;
	box-shadow:
		0
		7px
		20px
		rgba(19,27,115,.055);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}
.nt-design-card:hover {
	transform:
		translateY(-5px);
	border-color:
		rgba(19,27,115,.20);
	box-shadow:
		0
		15px
		32px
		rgba(19,27,115,.11);
}
/* =========================================================
   IMAGE FRAME
   KHÔNG CỐ ĐỊNH TỶ LỆ
========================================================= */
.nt-design-card-image {
	position:
		relative;
	display:
		block !important;
	flex:
		0 0 auto;
	width:
		100%;
	height:
		auto !important;
	min-height:
		0 !important;
	max-height:
		none !important;
	aspect-ratio:
		auto !important;
	margin:
		0;
	padding:
		5px !important;
	overflow:
		hidden;
	background:
		#fff;
	border-bottom:
		1px solid #e4e8ed;
	border-radius:
		16px
		16px
		0
		0;
	line-height:
		0;
}
/* =========================================================
   IMAGE
   TỶ LỆ GỐC
   KHÔNG CROP
   KHÔNG MẤT LOGO
========================================================= */
.nt-design-card-image img {
	position:
		relative;
	display:
		block !important;
	width:
		100% !important;
	height:
		auto !important;
	max-width:
		100% !important;
	max-height:
		none !important;
	aspect-ratio:
		auto !important;
	margin:
		0 !important;
	padding:
		0 !important;
	object-fit:
		unset !important;
	object-position:
		center center !important;
	background:
		transparent !important;
	border:
		0;
	border-radius:
		11px;
	transform:
		scale(1);
	transform-origin:
		center center;
	transition:
		transform
		.45s
		cubic-bezier(.22,.61,.36,1);
}
/* IMAGE HOVER */
.nt-design-card:hover
.nt-design-card-image img {
	transform:
		scale(1.025);
}
/* =========================================================
   CARD BODY
========================================================= */
.nt-design-card-body {
	display:
		flex !important;
	flex-direction:
		column !important;
	flex:
		1 1 auto !important;
	width:
		100%;
	min-width:
		0;
	padding:
		18px
		18px
		20px;
	background:
		#fff;
}
/* =========================================================
   META
========================================================= */
.nt-design-card-meta {
	display:
		flex;
	align-items:
		center;
	justify-content:
		space-between;
	gap:
		10px;
	min-height:
		20px;
	margin-bottom:
		11px;
}
.nt-design-card-cat {
	color:
		#0878c9;
	font-size:
		10px;
	font-weight:
		800;
	line-height:
		1.2;
	letter-spacing:
		.8px;
	text-transform:
		uppercase;
}
.nt-design-card-date {
	flex:
		0 0 auto;
	color:
		#97a4b7;
	font-size:
		11px;
	font-weight:
		600;
	line-height:
		1.2;
	white-space:
		nowrap;
}
/* =========================================================
   CARD TITLE
========================================================= */
.nt-design-card-title {
	display:
		-webkit-box;
	min-height:
		79px;
	margin:
		0
		0
		11px;
	overflow:
		hidden;
	color:
		#131b73;
	font-size:
		19px;
	font-weight:
		800;
	line-height:
		1.38;
	-webkit-line-clamp:
		3;
	-webkit-box-orient:
		vertical;
}
.nt-design-card-title a {
	color:
		#131b73 !important;
	transition:
		color .22s ease;
}
.nt-design-card:hover
.nt-design-card-title a {
	color:
		#0878c9 !important;
}
/* =========================================================
   EXCERPT
========================================================= */
.nt-design-card-excerpt {
	display:
		-webkit-box;
	min-height:
		69px;
	margin-bottom:
		17px;
	overflow:
		hidden;
	color:
		#697a91;
	font-size:
		14px;
	line-height:
		1.65;
	-webkit-line-clamp:
		3;
	-webkit-box-orient:
		vertical;
}
/* =========================================================
   CARD MORE
========================================================= */
.nt-design-card-more {
	display:
		inline-flex;
	align-items:
		center;
	gap:
		9px;
	align-self:
		flex-start;
	margin-top:
		auto;
	color:
		#131b73 !important;
	font-size:
		11px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		.3px;
	text-transform:
		uppercase;
}
.nt-design-card-more i {
	color:
		#0878c9;
	font-size:
		13px;
	transition:
		transform .22s ease;
}
.nt-design-card:hover
.nt-design-card-more i {
	transform:
		translateX(5px);
}
/* =========================================================
   PREV / NEXT
========================================================= */
.nt-design-nav {
	position:
		absolute;
	z-index:
		30;
	top:
		50%;
	display:
		flex;
	align-items:
		center;
	justify-content:
		center;
	width:
		48px;
	height:
		48px;
	margin: 0;
	padding: 0;
	color:
		#131b73;
	background:
		#fff;
	border:
		1px solid #cad6e4;
	border-radius:
		50%;
	outline:
		none;
	box-shadow:
		0
		9px
		24px
		rgba(19,27,115,.11);
	cursor:
		pointer;
	transform:
		translateY(-50%);
	transition:
		color .22s ease,
		background .22s ease,
		border-color .22s ease,
		box-shadow .22s ease,
		transform .22s ease;
}
.nt-design-nav i {
	display:
		block;
	color:
		inherit;
	font-size:
		22px;
	line-height:
		1;
}
.nt-design-nav:hover {
	color:
		#fff;
	background:
		#131b73;
	border-color:
		#131b73;
	box-shadow:
		0
		13px
		29px
		rgba(19,27,115,.22);
	transform:
		translateY(-50%)
		scale(1.07);
}
.nt-design-nav:active {
	transform:
		translateY(-50%)
		scale(.96);
}
.nt-design-nav:disabled {
	opacity:
		1;
	cursor:
		pointer;
}
.nt-design-prev {
	left:
		-24px;
}
.nt-design-next {
	right:
		-24px;
}
/* =========================================================
   DOTS
========================================================= */
.nt-design-dots {
	display:
		flex;
	align-items:
		center;
	justify-content:
		center;
	gap:
		7px;
	min-height:
		12px;
	margin-top:
		19px;
}
.nt-design-dot {
	display:
		block;
	width:
		8px;
	height:
		8px;
	margin:
		0;
	padding:
		0;
	background:
		#bfcbd8;
	border:
		0;
	border-radius:
		999px;
	outline:
		none;
	box-shadow:
		none;
	cursor:
		pointer;
	transition:
		width .25s ease,
		background .25s ease,
		transform .22s ease;
}
.nt-design-dot:hover {
	background:
		#739fc6;
	transform:
		scale(1.08);
}
.nt-design-dot.is-active {
	width:
		27px;
	background:
		linear-gradient(
			90deg,
			#149de8,
			#131b73
		);
}
/* =========================================================
   XEM TẤT CẢ
   GIỮ STYLE / HIỆU ỨNG CŨ
========================================================= */
.nt-design-readmore {
	position:
		relative;
	z-index:
		5;
	display:
		flex;
	align-items:
		center;
	justify-content:
		center;
	margin-top:
		25px;
}
/* pill */
.nt-design-readmore > a {
	position:
		relative;
	display:
		inline-flex;
	align-items:
		center;
	justify-content:
		flex-start;
	gap:
		13px;
	min-height:
		48px;
	padding:
		0
		52px
		0
		21px;
	overflow:
		hidden;
	color:
		#131b73 !important;
	background:
		#fff;
	border:
		1px solid #131b73;
	border-radius:
		28px;
	font-size:
		13px;
	font-weight:
		800;
	line-height:
		1;
	white-space:
		nowrap;
	box-shadow:
		0
		4px
		12px
		rgba(19,27,115,.04);
	transition:
		color .22s ease,
		background .22s ease,
		box-shadow .22s ease,
		transform .22s ease;
}
/* vòng tròn arrow bên phải */
.nt-design-readmore > a::after {
	content:
		"\f061";
	position:
		absolute;
	top:
		50%;
	right:
		3px;
	display:
		flex;
	align-items:
		center;
	justify-content:
		center;
	width:
		42px;
	height:
		42px;
	color:
		#fff;
	background:
		#131b73;
	border-radius:
		50%;
	font-family:
		FontAwesome;
	font-size:
		12px;
	font-weight:
		normal;
	line-height:
		1;
	transform:
		translateY(-50%);
	transition:
		color .22s ease,
		background .22s ease,
		transform .22s ease;
}
/* hover giống nút cũ */
.nt-design-readmore > a:hover {
	color:
		#fff !important;
	background:
		#131b73;
	box-shadow:
		0
		9px
		20px
		rgba(19,27,115,.16);
	transform:
		translateY(-2px);
}
.nt-design-readmore > a:hover::after {
	color:
		#131b73;
	background:
		#ff0000;
	transform:
		translateY(-50%)
		rotate(-30deg);
}
/* =========================================================
   EMPTY
========================================================= */
.nt-design-empty {
	padding:
		45px
		20px;
	color:
		#74849a;
	background:
		#fff;
	border:
		1px dashed #ccd5df;
	border-radius:
		16px;
	font-size:
		14px;
	text-align:
		center;
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media screen and (min-width: 1400px) {
	.nt-design-grid {
		gap:
			24px
			22px;
	}
	.nt-design-card-title {
		min-height:
			83px;
		font-size:
			20px;
	}
}
/* =========================================================
   LAPTOP
========================================================= */
@media screen and
(min-width: 992px) and
(max-width: 1199px) {
	.nt-design-section {
		padding:
			54px
			0
			62px;
	}
	.nt-design-title {
		font-size:
			34px;
	}
	.nt-design-grid {
		grid-template-columns:
			repeat(
				4,
				minmax(0,1fr)
			);
		gap:
			18px
			16px;
	}
	.nt-design-card-body {
		padding:
			16px
			15px
			18px;
	}
	.nt-design-card-title {
		min-height:
			71px;
		font-size:
			17px;
	}
	.nt-design-card-excerpt {
		min-height:
			64px;
		font-size:
			13px;
	}
	.nt-design-prev {
		left:
			-16px;
	}
	.nt-design-next {
		right:
			-16px;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media screen and
(min-width: 768px) and
(max-width: 991px) {
	.nt-design-section {
		padding:
			48px
			0
			56px;
	}
	.nt-design-title {
		font-size:
			30px;
	}
	.nt-design-tab {
		flex:
			0 0 auto;
		padding:
			0
			17px;
	}
	.nt-design-grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0,1fr)
			);
		gap:
			18px;
		grid-auto-rows:
			1fr;
	}
	.nt-design-card-title {
		min-height:
			74px;
	}
	.nt-design-card-excerpt {
		min-height:
			64px;
	}
	.nt-design-nav {
		width:
			43px;
		height:
			43px;
	}
	.nt-design-prev {
		left:
			-10px;
	}
	.nt-design-next {
		right:
			-10px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.nt-design-section {
		padding:
			40px
			0
			48px;
	}
	.nt-design-head {
		margin-bottom:
			21px;
	}
	.nt-design-title {
		font-size:
			27px;
	}
	.nt-design-desc,
	.nt-design-desc p {
		font-size:
			14px;
	}
	/* =====================================================
	   TAB NGANG
	===================================================== */
	.nt-design-tabs {
		flex-wrap:
			nowrap;
		justify-content:
			flex-start;
		padding:
			6px;
		border-radius:
			14px;
	}
	.nt-design-tab {
		flex:
			0 0 auto;
		min-height:
			42px;
		padding:
			0
			15px;
		font-size:
			12px;
		border-radius:
			10px;
	}
	/* =====================================================
	   GRID MOBILE
	===================================================== */
	.nt-design-grid {
		grid-template-columns:
			1fr;
		gap:
			17px;
		grid-auto-rows:
			auto;
	}
	.nt-design-card {
		height:
			auto !important;
	}
	/* ảnh vẫn nguyên tỷ lệ */
	.nt-design-card-image {
		height:
			auto !important;
		aspect-ratio:
			auto !important;
		padding:
			4px !important;
	}
	.nt-design-card-image img {
		width:
			100% !important;
		height:
			auto !important;
	}
	.nt-design-card:hover {
		transform:
			none;
	}
	.nt-design-card:hover
	.nt-design-card-image img {
		transform:
			none;
	}
	.nt-design-card-body {
		padding:
			16px
			16px
			18px;
	}
	.nt-design-card-title {
		min-height:
			0;
		font-size:
			18px;
	}
	.nt-design-card-excerpt {
		min-height:
			0;
		font-size:
			13px;
	}
	/* =====================================================
	   NAV
	===================================================== */
	.nt-design-nav {
		width:
			40px;
		height:
			40px;
	}
	.nt-design-nav i {
		font-size:
			19px;
	}
	.nt-design-prev {
		left:
			-5px;
	}
	.nt-design-next {
		right:
			-5px;
	}
	/* =====================================================
	   DOTS
	===================================================== */
	.nt-design-dots {
		margin-top:
			15px;
	}
	/* =====================================================
	   READ MORE
	===================================================== */
	.nt-design-readmore {
		margin-top:
			21px;
	}
	.nt-design-readmore > a {
		min-height:
			46px;
		padding:
			0
			49px
			0
			18px;
		font-size:
			12px;
	}
	.nt-design-readmore > a::after {
		width:
			40px;
		height:
			40px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media screen and (max-width: 420px) {
	.nt-design-title {
		font-size:
			24px;
	}
	.nt-design-tab {
		min-height:
			39px;
		padding:
			0
			13px;
	}
	.nt-design-card-body {
		padding:
			15px;
	}
	.nt-design-card-title {
		font-size:
			17px;
	}
	.nt-design-card-meta {
		gap:
			7px;
	}
	.nt-design-card-cat {
		font-size:
			9px;
	}
	.nt-design-card-date {
		font-size:
			10px;
	}
}
/* =========================================================
   BÀI VIẾT XEM NHIỀU
   STYLE: KNOWLEDGE FEED
   PRIMARY : #131b73
   ACCENT  : #ff0000
   BG      : #ffffff
========================================================= */
/* =========================================================
   SECTION
========================================================= */
.nt-reading-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding:
		62px
		0
		70px;
	background:
		#fff;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
.nt-reading-section *,
.nt-reading-section *::before,
.nt-reading-section *::after {
	box-sizing:
		border-box;
}
.nt-reading-section a {
	text-decoration:
		none !important;
}
/* =========================================================
   HEADER
========================================================= */
.nt-reading-head {
	position: relative;
	display: flex;
	align-items:
		flex-end;
	justify-content:
		space-between;
	gap:
		30px;
	margin-bottom:
		30px;
	padding-bottom:
		19px;
	border-bottom:
		1px solid #dfe4ea;
}
.nt-reading-head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width:
		76px;
	height:
		3px;
	background:
		#ff0000;
}
.nt-reading-head-main {
	max-width:
		850px;
}
/* =========================================================
   EYEBROW
========================================================= */
.nt-reading-eyebrow {
	display: flex;
	align-items:
		center;
	gap:
		10px;
	margin-bottom:
		9px;
	color:
		#6a798e;
	font-size:
		11px;
	font-weight:
		800;
	line-height:
		1.2;
	letter-spacing:
		1.15px;
	text-transform:
		uppercase;
}
.nt-reading-eyebrow > span {
	display: block;
	width:
		30px;
	height:
		2px;
	background:
		#ff0000;
}
/* =========================================================
   TITLE
========================================================= */
.nt-reading-head h2 {
	margin:
		0
		0
		9px;
	color:
		#131b73;
	font-size:
		38px;
	font-weight:
		800;
	line-height:
		1.12;
	letter-spacing:
		-.3px;
	text-transform:
		uppercase;
}
/* =========================================================
   DESCRIPTION
========================================================= */
.nt-reading-description,
.nt-reading-description p {
	margin:
		0 !important;
	color:
		#6b798d;
	font-size:
		15px;
	line-height:
		1.65;
}
/* =========================================================
   HEADER MORE
========================================================= */
.nt-reading-head-more {
	display: inline-flex;
	align-items:
		center;
	gap:
		9px;
	flex:
		0 0 auto;
	padding-bottom:
		5px;
	color:
		#131b73 !important;
	border-bottom:
		2px solid #ff0000;
	font-size:
		13px;
	font-weight:
		800;
	white-space:
		nowrap;
}
.nt-reading-head-more i {
	transition:
		transform .22s ease;
}
.nt-reading-head-more:hover i {
	transform:
		translateX(5px);
}
/* =========================================================
   GRID
   DESKTOP = 2 CỘT
========================================================= */
.nt-reading-grid {
	display: grid;
	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);
	gap:
		16px
		20px;
	align-items:
		start;
}
/* =========================================================
   CARD
========================================================= */
.nt-reading-card {
	position: relative;
	display: grid;
	grid-template-columns:
		185px
		minmax(0, 1fr);
	align-items:
		start;
	min-width:
		0;
	overflow: hidden;
	background:
		#f7f8fa;
	border:
		1px solid #dde2e8;
	border-radius:
		16px;
	box-shadow:
		0
		4px
		14px
		rgba(19, 27, 115, .025);
	transition:
		transform .28s ease,
		background .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}
/* =========================================================
   CARD HOVER
========================================================= */
.nt-reading-card:hover {
	transform:
		translateY(-4px);
	background:
		#fff;
	border-color:
		rgba(19, 27, 115, .22);
	box-shadow:
		0
		14px
		30px
		rgba(19, 27, 115, .09);
}
/* =========================================================
   ACCENT BAR
========================================================= */
.nt-reading-accent {
	position: absolute;
	z-index: 5;
	top:
		16px;
	left: 0;
	width:
		4px;
	height:
		34px;
	background:
		#ff0000;
	border-radius:
		0
		5px
		5px
		0;
	transition:
		height .28s ease,
		background .28s ease;
}
.nt-reading-card:hover
.nt-reading-accent {
	height:
		calc(100% - 32px);
	background:
		#131b73;
}
/* =========================================================
   IMAGE WRAPPER
   KHÔNG CỐ ĐỊNH CHIỀU CAO
========================================================= */
.nt-reading-image {
	position: relative;
	display: block;
	align-self:
		start;
	width: auto;
	height:
		auto !important;
	min-height:
		0 !important;
	max-height:
		none !important;
	aspect-ratio:
		auto !important;
	margin:
		10px
		0
		10px
		10px;
	padding:
		4px;
	overflow: hidden;
	background:
		#fff;
	border:
		1px solid #e1e6ec;
	border-radius:
		11px;
	line-height:
		0;
}
/* =========================================================
   IMAGE
   GIỮ ĐÚNG TỶ LỆ GỐC
   KHÔNG CROP
   KHÔNG MẤT LOGO
========================================================= */
.nt-reading-image img {
	display:
		block !important;
	width:
		100% !important;
	height:
		auto !important;
	max-width:
		100% !important;
	max-height:
		none !important;
	aspect-ratio:
		auto !important;
	margin:
		0 !important;
	padding:
		0 !important;
	object-fit:
		unset !important;
	object-position:
		center center !important;
	background:
		transparent !important;
	border:
		0;
	border-radius:
		7px;
	transform:
		none !important;
	transition:
		none !important;
}
/* =========================================================
   HOVER
   TUYỆT ĐỐI KHÔNG PHÓNG ẢNH
========================================================= */
.nt-reading-card:hover
.nt-reading-image img {
	transform:
		none !important;
}
/* =========================================================
   CONTENT
========================================================= */
.nt-reading-content {
	display: flex;
	flex-direction:
		column;
	align-self:
		stretch;
	min-width:
		0;
	padding:
		16px
		18px
		16px
		17px;
}
/* =========================================================
   META
========================================================= */
.nt-reading-meta {
	display: flex;
	align-items:
		center;
	justify-content:
		space-between;
	gap:
		12px;
	margin-bottom:
		8px;
}
.nt-reading-category {
	display:
		-webkit-box;
	overflow:
		hidden;
	color:
		#0878c9;
	font-size:
		9px;
	font-weight:
		800;
	line-height:
		1.3;
	letter-spacing:
		.8px;
	text-transform:
		uppercase;
	-webkit-line-clamp:
		1;
	-webkit-box-orient:
		vertical;
}
.nt-reading-meta time {
	display:
		inline-flex;
	align-items:
		center;
	gap:
		5px;
	flex:
		0 0 auto;
	color:
		#99a5b5;
	font-size:
		10px;
	font-weight:
		600;
	white-space:
		nowrap;
}
.nt-reading-meta time i {
	color:
		#8997aa;
	font-size:
		10px;
}
/* =========================================================
   CARD TITLE
========================================================= */
.nt-reading-title {
	display:
		-webkit-box;
	margin:
		0
		0
		8px;
	overflow:
		hidden;
	color:
		#131b73;
	font-size:
		18px;
	font-weight:
		800;
	line-height:
		1.38;
	-webkit-line-clamp:
		2;
	-webkit-box-orient:
		vertical;
}
.nt-reading-title a {
	color:
		#131b73 !important;
	transition:
		color .22s ease;
}
.nt-reading-card:hover
.nt-reading-title a {
	color:
		#0878c9 !important;
}
/* =========================================================
   EXCERPT
========================================================= */
.nt-reading-excerpt {
	display:
		-webkit-box;
	margin:
		0
		0
		12px;
	overflow:
		hidden;
	color:
		#728096;
	font-size:
		13px;
	line-height:
		1.55;
	-webkit-line-clamp:
		2;
	-webkit-box-orient:
		vertical;
}
/* =========================================================
   READ MORE
========================================================= */
.nt-reading-more {
	display:
		inline-flex;
	align-items:
		center;
	gap:
		9px;
	align-self:
		flex-start;
	margin-top:
		auto;
	color:
		#131b73 !important;
	font-size:
		10px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		.25px;
	text-transform:
		uppercase;
}
.nt-reading-more-line {
	display:
		block;
	width:
		25px;
	height:
		2px;
	background:
		#ff0000;
	border-radius:
		5px;
	transition:
		width .25s ease,
		background .25s ease;
}
.nt-reading-card:hover
.nt-reading-more-line {
	width:
		42px;
	background:
		#0878c9;
}
/* =========================================================
   BOTTOM
========================================================= */
.nt-reading-bottom {
	display: flex;
	justify-content:
		center;
	margin-top:
		30px;
}
/* =========================================================
   XEM TẤT CẢ
   GIỮ HIỆU ỨNG CŨ
========================================================= */
.nt-reading-bottom > a {
	display:
		inline-flex;
	align-items:
		center;
	gap:
		14px;
	height:
		48px;
	padding:
		0
		0
		0
		21px;
	overflow:
		hidden;
	color:
		#131b73 !important;
	background:
		#fff;
	border:
		1px solid #131b73;
	border-radius:
		28px;
	font-size:
		13px;
	font-weight:
		800;
	line-height:
		1;
	white-space:
		nowrap;
	transition:
		color .22s ease,
		background .22s ease,
		box-shadow .22s ease;
}
.nt-reading-bottom-icon {
	display: flex;
	align-items:
		center;
	justify-content:
		center;
	width:
		44px;
	height:
		44px;
	color:
		#fff;
	background:
		#131b73;
	border-radius:
		50%;
	font-size:
		12px;
	transition:
		color .22s ease,
		background .22s ease,
		transform .22s ease;
}
.nt-reading-bottom > a:hover {
	color:
		#fff !important;
	background:
		#131b73;
	box-shadow:
		0
		9px
		20px
		rgba(19, 27, 115, .15);
}
.nt-reading-bottom > a:hover
.nt-reading-bottom-icon {
	color:
		#131b73;
	background:
		#ff0000;
	transform:
		rotate(-30deg);
}
/* =========================================================
   LARGE DESKTOP
========================================================= */
@media screen and (min-width: 1400px) {
	.nt-reading-card {
		grid-template-columns:
			200px
			minmax(0, 1fr);
	}
	.nt-reading-title {
		font-size:
			19px;
	}
	.nt-reading-excerpt {
		font-size:
			13px;
	}
}
/* =========================================================
   LAPTOP
========================================================= */
@media screen and
(min-width: 992px) and
(max-width: 1199px) {
	.nt-reading-section {
		padding:
			54px
			0
			62px;
	}
	.nt-reading-head h2 {
		font-size:
			34px;
	}
	.nt-reading-card {
		grid-template-columns:
			155px
			minmax(0, 1fr);
	}
	.nt-reading-content {
		padding:
			14px;
	}
	.nt-reading-title {
		font-size:
			16px;
	}
	.nt-reading-excerpt {
		font-size:
			12px;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media screen and
(min-width: 768px) and
(max-width: 991px) {
	.nt-reading-section {
		padding:
			48px
			0
			56px;
	}
	.nt-reading-head {
		display:
			block;
	}
	.nt-reading-head h2 {
		font-size:
			30px;
	}
	.nt-reading-head-more {
		margin-top:
			14px;
	}
	.nt-reading-grid {
		grid-template-columns:
			1fr;
	}
	.nt-reading-card {
		grid-template-columns:
			190px
			minmax(0, 1fr);
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.nt-reading-section {
		padding:
			40px
			0
			48px;
	}
	.nt-reading-head {
		display:
			block;
		margin-bottom:
			23px;
	}
	.nt-reading-head h2 {
		font-size:
			27px;
	}
	.nt-reading-description,
	.nt-reading-description p {
		font-size:
			14px;
	}
	.nt-reading-head-more {
		margin-top:
			13px;
	}
	/* =====================================================
	   GRID MOBILE
	===================================================== */
	.nt-reading-grid {
		grid-template-columns:
			1fr;
		gap:
			13px;
	}
	/* =====================================================
	   CARD
	===================================================== */
	.nt-reading-card {
		grid-template-columns:
			120px
			minmax(0, 1fr);
		align-items:
			start;
		border-radius:
			13px;
	}
	.nt-reading-card:hover {
		transform:
			none;
	}
	/* =====================================================
	   IMAGE
	===================================================== */
	.nt-reading-image {
		height:
			auto !important;
		min-height:
			0 !important;
		aspect-ratio:
			auto !important;
		margin:
			7px
			0
			7px
			7px;
		padding:
			3px;
		border-radius:
			9px;
	}
	.nt-reading-image img {
		width:
			100% !important;
		height:
			auto !important;
		max-height:
			none !important;
		aspect-ratio:
			auto !important;
		transform:
			none !important;
	}
	.nt-reading-card:hover
	.nt-reading-image img {
		transform:
			none !important;
	}
	/* =====================================================
	   CONTENT
	===================================================== */
	.nt-reading-content {
		padding:
			10px
			12px;
	}
	.nt-reading-meta {
		margin-bottom:
			5px;
	}
	.nt-reading-meta time {
		font-size:
			9px;
	}
	.nt-reading-title {
		margin-bottom:
			6px;
		font-size:
			15px;
	}
	.nt-reading-excerpt {
		margin-bottom:
			9px;
		font-size:
			11px;
		line-height:
			1.5;
		-webkit-line-clamp:
			2;
	}
	.nt-reading-more {
		font-size:
			9px;
	}
	/* =====================================================
	   ACCENT
	===================================================== */
	.nt-reading-accent {
		top:
			12px;
		width:
			3px;
		height:
			25px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media screen and (max-width: 420px) {
	.nt-reading-head h2 {
		font-size:
			24px;
	}
	.nt-reading-card {
		grid-template-columns:
			102px
			minmax(0, 1fr);
	}
	.nt-reading-content {
		padding:
			9px
			10px;
	}
	.nt-reading-category {
		font-size:
			8px;
	}
	.nt-reading-meta time {
		display:
			none;
	}
	.nt-reading-title {
		font-size:
			14px;
		-webkit-line-clamp:
			3;
	}
	.nt-reading-excerpt {
		display:
			none;
	}
	.nt-reading-more {
		margin-top:
			4px;
	}
}
/* =========================================================
   KHÁCH HÀNG ĐÁNH GIÁ
   VIDEO SLIDER
   PRIMARY : #131b73
   CYAN    : #079fe8
   BG      : #f7f9fc
========================================================= */
/* =========================================================
   SECTION
========================================================= */
.ntr-section {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding:
		62px
		0
		64px;
	background:
		#fff;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
.ntr-section *,
.ntr-section *::before,
.ntr-section *::after {
	box-sizing:
		border-box;
}
.ntr-section a {
	text-decoration:
		none !important;
}
/* =========================================================
   CONTAINER
   NỚI RIÊNG CHO SECTION NÀY
========================================================= */
@media screen and (min-width: 1400px) {
	.ntr-section .container {
		width:
			1340px !important;
		max-width:
			calc(100% - 40px) !important;
	}
}
@media screen and
(min-width: 1200px) and
(max-width: 1399px) {
	.ntr-section .container {
		width:
			1240px !important;
		max-width:
			calc(100% - 30px) !important;
	}
}
/* =========================================================
   HEADING
========================================================= */
.ntr-heading {
	position: relative;
	margin-bottom:
		40px;
	text-align:
		center;
}
.ntr-heading-small {
	display: block;
	margin-bottom:
		10px;
	color:
		#079fe8;
	font-size:
		12px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		1.6px;
	text-transform:
		uppercase;
}
.ntr-heading h2 {
	margin:
		0;
	color:
		#131b73;
	font-size:
		34px;
	font-weight:
		800;
	line-height:
		1.2;
	letter-spacing:
		-.3px;
	text-transform:
		uppercase;
}
/* =========================================================
   HEADING LINE
========================================================= */
.ntr-heading-line {
	position: relative;
	width:
		64px;
	height:
		3px;
	margin:
		17px
		auto
		0;
	background:
		#079fe8;
	border-radius:
		20px;
}
.ntr-heading-line span {
	position: absolute;
	top:
		50%;
	left:
		50%;
	width:
		7px;
	height:
		7px;
	background:
		#079fe8;
	border:
		2px solid #f7f9fc;
	border-radius:
		50%;
	transform:
		translate(-50%, -50%);
}
/* =========================================================
   SLIDER WRAP
========================================================= */
.ntr-slider-wrap {
	position: relative;
	width: 100%;
	padding:
		0
		58px;
}
/* =========================================================
   SLICK SPACING
========================================================= */
.ntr-slider {
	margin:
		0
		-11px;
}
.ntr-slide {
	padding:
		11px;
}
/* =========================================================
   CARD
========================================================= */
.ntr-card {
	position: relative;
	display: flex;
	flex-direction:
		column;
	height:
		100%;
	overflow: hidden;
	background:
		#fff;
	border:
		1px solid #d9e3ee;
	border-radius:
		18px;
	box-shadow:
		0
		10px
		26px
		rgba(19,27,115,.07);
	transition:
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}
.ntr-card:hover {
	transform:
		translateY(-6px);
	border-color:
		rgba(19,27,115,.20);
	box-shadow:
		0
		18px
		38px
		rgba(19,27,115,.12);
}
.ntr-card-link {
	display: flex;
	flex-direction:
		column;
	height:
		100%;
	color:
		inherit !important;
}
/* =========================================================
   IMAGE WRAPPER
========================================================= */
.ntr-image-wrap {
	position: relative;
	width: 100%;
	aspect-ratio:
		16 / 10;
	overflow: hidden;
	background:
		#e8edf3;
	border-radius:
		17px
		17px
		0
		0;
}
/* =========================================================
   IMAGE
========================================================= */
.ntr-image {
	display: block;
	width:
		100%;
	height:
		100%;
	object-fit:
		cover;
	object-position:
		center;
	transform:
		scale(1);
	transition:
		transform
		.5s
		cubic-bezier(.22,.61,.36,1);
}
.ntr-card:hover
.ntr-image {
	transform:
		scale(1.025);
}
/* =========================================================
   OVERLAY
========================================================= */
.ntr-image-overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(19,27,115,.02) 0%,
			rgba(19,27,115,.05) 55%,
			rgba(19,27,115,.15) 100%
		);
	pointer-events:
		none;
}
/* =========================================================
   BADGE
========================================================= */
.ntr-badge {
	position: absolute;
	z-index: 4;
	top:
		16px;
	left:
		16px;
	display:
		inline-flex;
	align-items:
		center;
	gap:
		7px;
	min-height:
		25px;
	padding:
		0
		11px;
	color:
		#fff;
	background:
		rgba(19,27,115,.88);
	border:
		1px solid
		rgba(255,255,255,.20);
	border-radius:
		15px;
	font-size:
		10px;
	font-weight:
		800;
	line-height:
		1;
	text-transform:
		uppercase;
	backdrop-filter:
		blur(4px);
}
.ntr-badge-dot {
	display: block;
	flex:
		0 0 7px;
	width:
		7px;
	height:
		7px;
	background:
		#10c8f4;
	border-radius:
		50%;
	box-shadow:
		0
		0
		0
		3px
		rgba(16,200,244,.14);
}
/* =========================================================
   NUMBER
========================================================= */
.ntr-number {
	position: absolute;
	z-index: 4;
	top:
		12px;
	right:
		15px;
	color:
		#fff;
	font-size:
		32px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		-1px;
	text-shadow:
		0
		2px
		8px
		rgba(0,0,0,.30);
}
/* =========================================================
   PLAY
========================================================= */
.ntr-play {
	position: absolute;
	z-index: 5;
	top:
		50%;
	left:
		50%;
	display: flex;
	align-items:
		center;
	justify-content:
		center;
	width:
		70px;
	height:
		70px;
	background:
		rgba(255,255,255,.97);
	border:
		5px solid
		rgba(255,255,255,.26);
	border-radius:
		50%;
	box-shadow:
		0
		10px
		26px
		rgba(0,0,0,.18);
	transform:
		translate(-50%, -50%);
	transition:
		background .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}
.ntr-play svg {
	display: block;
	width:
		25px;
	height:
		25px;
	margin-left:
		3px;
	fill:
		#079fe8;
	transition:
		fill .25s ease;
}
.ntr-card:hover
.ntr-play {
	background:
		#131b73;
	box-shadow:
		0
		12px
		30px
		rgba(19,27,115,.30);
	transform:
		translate(-50%, -50%)
		scale(1.08);
}
.ntr-card:hover
.ntr-play svg {
	fill:
		#fff;
}
/* =========================================================
   CONTENT
========================================================= */
.ntr-content {
	display: flex;
	flex-direction:
		column;
	flex:
		1 1 auto;
	min-height:
		170px;
	padding:
		21px
		20px
		22px;
}
/* =========================================================
   TITLE
========================================================= */
.ntr-content h3 {
	display:
		-webkit-box;
	min-height:
		62px;
	margin:
		0
		0
		18px;
	overflow:
		hidden;
	color:
		#082b59;
	font-size:
		20px;
	font-weight:
		800;
	line-height:
		1.48;
	-webkit-line-clamp:
		2;
	-webkit-box-orient:
		vertical;
	transition:
		color .22s ease;
}
.ntr-card:hover
.ntr-content h3 {
	color:
		#131b73;
}
/* =========================================================
   MORE
========================================================= */
.ntr-more {
	display: inline-flex;
	align-items:
		center;
	gap:
		12px;
	align-self:
		flex-start;
	margin-top:
		auto;
	color:
		#079fe8;
	font-size:
		12px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		.15px;
	text-transform:
		uppercase;
}
/* =========================================================
   MORE LINE + ARROW
========================================================= */
.ntr-more-arrow {
	position: relative;
	display: block;
	width:
		34px;
	height:
		2px;
	background:
		#079fe8;
	transition:
		width .25s ease;
}
.ntr-more-arrow::after {
	content: "";
	position: absolute;
	top:
		50%;
	right:
		0;
	width:
		7px;
	height:
		7px;
	border-top:
		1px solid #079fe8;
	border-right:
		1px solid #079fe8;
	transform:
		translateY(-50%)
		rotate(45deg);
}
.ntr-card:hover
.ntr-more-arrow {
	width:
		48px;
}
/* =========================================================
   PREV / NEXT
========================================================= */
.ntr-prev,
.ntr-next {
	position: absolute;
	z-index:
		30;
	top:
		50%;
	display: flex;
	align-items:
		center;
	justify-content:
		center;
	width:
		52px;
	height:
		52px;
	margin: 0;
	padding: 0;
	color:
		#0a4e8e;
	background:
		#fff;
	border:
		1px solid #d6e2ed;
	border-radius:
		50%;
	outline:
		none;
	box-shadow:
		0
		9px
		24px
		rgba(19,27,115,.11);
	cursor:
		pointer;
	transform:
		translateY(-50%);
	transition:
		color .22s ease,
		background .22s ease,
		border-color .22s ease,
		transform .22s ease,
		box-shadow .22s ease;
}
.ntr-prev {
	left:
		1px;
}
.ntr-next {
	right:
		1px;
}
.ntr-prev i,
.ntr-next i {
	font-size:
		24px;
}
.ntr-prev:hover,
.ntr-next:hover {
	color:
		#fff;
	background:
		#131b73;
	border-color:
		#131b73;
	box-shadow:
		0
		13px
		28px
		rgba(19,27,115,.24);
	transform:
		translateY(-50%)
		scale(1.06);
}
/* =========================================================
   SLICK HEIGHT
========================================================= */
.ntr-slider .slick-track {
	display:
		flex !important;
	align-items:
		stretch;
}
.ntr-slider .slick-slide {
	height:
		auto !important;
}
.ntr-slider .slick-slide > div {
	height:
		100%;
}
.ntr-slider
.slick-slide
.ntr-slide {
	height:
		100%;
}
.ntr-slider
.slick-slide
.ntr-card {
	height:
		100%;
}
/* =========================================================
   DOTS
========================================================= */
.ntr-slider .slick-dots {
	position: static;
	display:
		flex !important;
	align-items:
		center;
	justify-content:
		center;
	gap:
		6px;
	width:
		100%;
	margin:
		32px
		0
		0;
	padding:
		0;
	list-style:
		none;
}
.ntr-slider .slick-dots li {
	display:
		block;
	width:
		auto;
	height:
		auto;
	margin:
		0;
	padding:
		0;
}
.ntr-slider .slick-dots li button {
	display:
		block;
	width:
		8px;
	height:
		8px;
	margin:
		0;
	padding:
		0;
	background:
		#c1d4e6;
	border:
		0;
	border-radius:
		999px;
	outline:
		none;
	font-size:
		0;
	cursor:
		pointer;
	transition:
		width .22s ease,
		background .22s ease,
		transform .22s ease;
}
.ntr-slider .slick-dots li button::before {
	display:
		none !important;
}
.ntr-slider
.slick-dots
li:hover
button {
	background:
		#7ebce2;
}
.ntr-slider
.slick-dots
li.slick-active
button {
	width:
		28px;
	background:
		#079fe8;
}
/* =========================================================
   LAPTOP 1200 - 1399
========================================================= */
@media screen and
(min-width: 1200px) and
(max-width: 1399px) {
	.ntr-heading h2 {
		font-size:
			32px;
	}
	.ntr-slider-wrap {
		padding:
			0
			54px;
	}
	.ntr-content {
		min-height:
			160px;
		padding:
			19px
			18px
			20px;
	}
	.ntr-content h3 {
		min-height:
			58px;
		font-size:
			18px;
	}
	.ntr-play {
		width:
			66px;
		height:
			66px;
	}
	.ntr-play svg {
		width:
			23px;
		height:
			23px;
	}
	.ntr-number {
		font-size:
			30px;
	}
}
/* =========================================================
   LAPTOP 992 - 1199
========================================================= */
@media screen and
(min-width: 992px) and
(max-width: 1199px) {
	.ntr-section {
		padding:
			54px
			0
			58px;
	}
	.ntr-heading {
		margin-bottom:
			34px;
	}
	.ntr-heading h2 {
		font-size:
			29px;
	}
	.ntr-slider-wrap {
		padding:
			0
			48px;
	}
	.ntr-slider {
		margin:
			0
			-9px;
	}
	.ntr-slide {
		padding:
			9px;
	}
	.ntr-content {
		min-height:
			155px;
		padding:
			18px;
	}
	.ntr-content h3 {
		min-height:
			55px;
		font-size:
			18px;
	}
	.ntr-more {
		font-size:
			11px;
	}
	.ntr-play {
		width:
			64px;
		height:
			64px;
	}
}
/* =========================================================
   TABLET 768 - 991
========================================================= */
@media screen and
(min-width: 768px) and
(max-width: 991px) {
	.ntr-section {
		padding:
			48px
			0
			54px;
	}
	.ntr-heading {
		margin-bottom:
			30px;
	}
	.ntr-heading-small {
		font-size:
			11px;
	}
	.ntr-heading h2 {
		font-size:
			27px;
	}
	.ntr-slider-wrap {
		padding:
			0
			44px;
	}
	.ntr-content {
		min-height:
			150px;
		padding:
			18px;
	}
	.ntr-content h3 {
		min-height:
			auto;
		font-size:
			18px;
	}
	.ntr-prev,
	.ntr-next {
		width:
			45px;
		height:
			45px;
	}
	.ntr-prev i,
	.ntr-next i {
		font-size:
			21px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.ntr-section {
		padding:
			42px
			0
			48px;
	}
	.ntr-heading {
		margin-bottom:
			26px;
	}
	.ntr-heading-small {
		font-size:
			10px;
		letter-spacing:
			1.3px;
	}
	.ntr-heading h2 {
		font-size:
			24px;
	}
	.ntr-slider-wrap {
		padding:
			0
			35px;
	}
	.ntr-slider {
		margin:
			0
			-7px;
	}
	.ntr-slide {
		padding:
			7px;
	}
	/* =====================================================
	   CARD
	===================================================== */
	.ntr-card {
		border-radius:
			15px;
	}
	.ntr-card:hover {
		transform:
			none;
	}
	/* =====================================================
	   IMAGE
	===================================================== */
	.ntr-image-wrap {
		border-radius:
			14px
			14px
			0
			0;
	}
	.ntr-image {
		transform:
			none !important;
	}
	.ntr-card:hover
	.ntr-image {
		transform:
			none !important;
	}
	/* =====================================================
	   BADGE
	===================================================== */
	.ntr-badge {
		top:
			12px;
		left:
			12px;
		min-height:
			23px;
		padding:
			0
			9px;
		font-size:
			9px;
	}
	/* =====================================================
	   NUMBER
	===================================================== */
	.ntr-number {
		top:
			11px;
		right:
			12px;
		font-size:
			27px;
	}
	/* =====================================================
	   PLAY
	===================================================== */
	.ntr-play {
		width:
			62px;
		height:
			62px;
	}
	.ntr-play svg {
		width:
			21px;
		height:
			21px;
	}
	/* =====================================================
	   CONTENT
	===================================================== */
	.ntr-content {
		min-height:
			145px;
		padding:
			18px;
	}
	.ntr-content h3 {
		min-height:
			auto;
		margin-bottom:
			15px;
		font-size:
			18px;
		line-height:
			1.45;
	}
	.ntr-more {
		font-size:
			11px;
	}
	/* =====================================================
	   NAV
	===================================================== */
	.ntr-prev,
	.ntr-next {
		width:
			40px;
		height:
			40px;
	}
	.ntr-prev {
		left:
			0;
	}
	.ntr-next {
		right:
			0;
	}
	.ntr-prev i,
	.ntr-next i {
		font-size:
			19px;
	}
	/* =====================================================
	   DOTS
	===================================================== */
	.ntr-slider .slick-dots {
		margin-top:
			24px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media screen and (max-width: 420px) {
	.ntr-section {
		padding:
			38px
			0
			44px;
	}
	.ntr-heading h2 {
		font-size:
			22px;
	}
	.ntr-slider-wrap {
		padding:
			0
			30px;
	}
	.ntr-content {
		min-height:
			135px;
		padding:
			16px;
	}
	.ntr-content h3 {
		font-size:
			17px;
	}
	.ntr-play {
		width:
			56px;
		height:
			56px;
	}
	.ntr-badge {
		font-size:
			8px;
	}
}
/* =========================================================
   XÂY DỰNG NAM TRUNG
   ABOUT + PRICE + PROMO
   PRIMARY : #131b73
   BLUE    : #0878c9
   CYAN    : #149de8
========================================================= */
/* =========================================================
   GLOBAL
========================================================= */
.ntc-about-section *,
.ntc-about-section *::before,
.ntc-about-section *::after,
.ntc-promo-section *,
.ntc-promo-section *::before,
.ntc-promo-section *::after {
	box-sizing: border-box;
}
.ntc-about-section a,
.ntc-promo-section a {
	text-decoration: none !important;
}
/* =========================================================
   SECTION 1
   GIỚI THIỆU + BÁO GIÁ
========================================================= */
.ntc-about-section {
	position: relative;
	width: 100%;
	padding:
		30px
		0
		72px;
	overflow: hidden;
	background:
		#fff;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
/* decoration */
.ntc-about-section::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -170px;
	width: 430px;
	height: 430px;
	border:
		80px solid
		rgba(19,27,115,.018);
	border-radius: 50%;
	pointer-events: none;
}
/* =========================================================
   TOP GRID
========================================================= */
.ntc-about-top {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns:
		minmax(0, .92fr)
		minmax(0, 1.08fr);
	align-items: center;
	gap:
		75px;
}
/* =========================================================
   ABOUT
========================================================= */
.ntc-about-info {
	position: relative;
	min-width: 0;
}
/* =========================================================
   BRAND LABEL
========================================================= */
.ntc-about-label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 31px;
	margin-bottom:
		20px;
	padding:
		0
		13px;
	color:
		#131b73;
	background:
		#fff;
	border:
		1px solid #cad7e8;
	border-radius:
		999px;
	font-size:
		10px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		1px;
	text-transform:
		uppercase;
	box-shadow:
		0
		4px
		12px
		rgba(19,27,115,.035);
}
.ntc-about-label-dot {
	display: block;
	width:
		6px;
	height:
		6px;
	background:
		#0878c9;
	border-radius:
		50%;
	box-shadow:
		0
		0
		0
		4px
		rgba(8,120,201,.10);
}
/* =========================================================
   CATEGORY DESCRIPTION
========================================================= */
.ntc-about-description h1,
.ntc-about-description h2,
.ntc-about-description h3 {
	margin:
		0
		0
		22px;
	color:
		#131b73;
	font-size:
		38px;
	font-weight:
		800;
	line-height:
		1.17;
	letter-spacing:
		-.5px;
	text-transform:
		uppercase;
}
.ntc-about-description p {
	margin:
		0
		0
		15px;
	color:
		#60728a;
	font-size:
		15px;
	font-weight:
		400;
	line-height:
		1.85;
}
.ntc-about-description p:last-child {
	margin-bottom:
		0;
}
/* =========================================================
   ABOUT ACTION
========================================================= */
.ntc-about-actions {
	margin-top:
		28px;
}
/* =========================================================
   ABOUT BUTTON
========================================================= */
.ntc-about-btn {
	display: inline-flex;
	align-items: center;
	min-height:
		48px;
	padding-left:
		20px;
	overflow: hidden;
	color:
		#131b73 !important;
	background:
		#fff;
	border:
		1px solid #131b73;
	border-radius:
		999px;
	font-size:
		13px;
	font-weight:
		800;
	line-height:
		1;
	box-shadow:
		0
		5px
		15px
		rgba(19,27,115,.05);
	transition:
		color .25s ease,
		background .25s ease,
		transform .25s ease,
		box-shadow .25s ease;
}
.ntc-about-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex:
		0 0 42px;
	width:
		42px;
	height:
		42px;
	margin:
		0
		3px
		0
		15px;
	color:
		#fff;
	background:
		#131b73;
	border-radius:
		50%;
	transition:
		color .25s ease,
		background .25s ease,
		transform .25s ease;
}
.ntc-about-btn:hover {
	color:
		#fff !important;
	background:
		#131b73;
	transform:
		translateY(-2px);
	box-shadow:
		0
		9px
		20px
		rgba(19,27,115,.14);
}
.ntc-about-btn:hover
.ntc-about-btn-icon {
	color:
		#131b73;
	background:
		#fff;
	transform:
		rotate(-30deg);
}
/* =========================================================
   PRICE AREA
========================================================= */
.ntc-price-area {
	position: relative;
	min-width: 0;
}
/* =========================================================
   PRICE HEADING
========================================================= */
.ntc-price-head {
	margin-bottom:
		22px;
}
.ntc-price-kicker {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom:
		7px;
	color:
		#0878c9;
	font-size:
		10px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		1.2px;
	text-transform:
		uppercase;
}
.ntc-price-kicker > span {
	display: block;
	width:
		26px;
	height:
		2px;
	background:
		#0878c9;
}
.ntc-price-head h3 {
	margin:
		0
		0
		8px;
	color:
		#131b73;
	font-size:
		28px;
	font-weight:
		800;
	line-height:
		1.23;
}
.ntc-price-head p {
	max-width:
		550px;
	margin:
		0;
	color:
		#79889c;
	font-size:
		13px;
	line-height:
		1.65;
}
/* =========================================================
   PRICE GRID
========================================================= */
.ntc-price-grid {
	display: grid;
	grid-template-columns:
		repeat(
			2,
			minmax(0, 1fr)
		);
	gap:
		15px;
}
/* =========================================================
   PRICE CARD
========================================================= */
.ntc-price-card {
	position: relative;
	display: grid;
	grid-template-columns:
		56px
		minmax(0, 1fr)
		34px;
	align-items: center;
	gap:
		14px;
	min-height:
		100px;
	padding:
		16px;
	overflow: hidden;
	color:
		#131b73 !important;
	background:
		#fff;
	border:
		1px solid #dbe4ee;
	border-radius:
		17px;
	box-shadow:
		0
		7px
		20px
		rgba(19,27,115,.045);
	transition:
		transform .25s ease,
		border-color .25s ease,
		box-shadow .25s ease,
		background .25s ease;
}
/* accent left */
.ntc-price-card::before {
	content: "";
	position: absolute;
	top:
		20px;
	left: 0;
	width:
		4px;
	height:
		32px;
	background:
		#131b73;
	border-radius:
		0
		5px
		5px
		0;
	transition:
		top .25s ease,
		height .25s ease,
		background .25s ease;
}
.ntc-price-card:hover {
	transform:
		translateY(-4px);
	border-color:
		rgba(19,27,115,.27);
	box-shadow:
		0
		15px
		30px
		rgba(19,27,115,.10);
}
.ntc-price-card:hover::before {
	top:
		12px;
	height:
		calc(100% - 24px);
	background:
		#0878c9;
}
/* =========================================================
   PRICE ICON
========================================================= */
.ntc-price-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width:
		56px;
	height:
		56px;
	background:
		#eef4ff;
	border:
		1px solid
		rgba(19,27,115,.05);
	border-radius:
		14px;
	transition:
		background .25s ease,
		transform .25s ease;
}
.ntc-price-icon img {
	display: block;
	max-width:
		34px;
	max-height:
		34px;
	object-fit:
		contain;
	filter:
		brightness(0)
		saturate(100%)
		invert(13%)
		sepia(37%)
		saturate(4268%)
		hue-rotate(223deg)
		brightness(82%)
		contrast(106%);
}
.ntc-price-card:hover
.ntc-price-icon {
	background:
		#131b73;
	transform:
		scale(1.04);
}
.ntc-price-card:hover
.ntc-price-icon img {
	filter:
		brightness(0)
		invert(1);
}
/* =========================================================
   PRICE TEXT
========================================================= */
.ntc-price-content {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.ntc-price-content small {
	display: block;
	margin-bottom:
		5px;
	color:
		#8b99ab;
	font-size:
		9px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		.9px;
	text-transform:
		uppercase;
}
.ntc-price-content strong {
	display: block;
	color:
		#131b73;
	font-size:
		17px;
	font-weight:
		800;
	line-height:
		1.3;
	text-transform:
		uppercase;
}
/* =========================================================
   PRICE ARROW
========================================================= */
.ntc-price-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width:
		32px;
	height:
		32px;
	color:
		#131b73;
	background:
		#f1f5fa;
	border-radius:
		50%;
	font-size:
		16px;
	transition:
		color .25s ease,
		background .25s ease,
		transform .25s ease;
}
.ntc-price-card:hover
.ntc-price-arrow {
	color:
		#fff;
	background:
		#131b73;
	transform:
		translateX(3px);
}
/* =========================================================
   SECTION 2
   KHUYẾN MÃI
========================================================= */
.ntc-promo-section {
	position: relative;
	width: 100%;
	padding:
		58px
		0
		68px;
	overflow: hidden;
	background:
		#eee;
	font-family:
		"Roboto Condensed",
		Arial,
		sans-serif;
}
/* subtle background decoration */
.ntc-promo-section::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:
		1px;
	background:
		#edf0f5;
}
/* =========================================================
   PROMO BOX
========================================================= */
.ntc-promo {
	position: relative;
	display: grid;
	grid-template-columns:
		minmax(300px, .73fr)
		minmax(0, 1.27fr);
	align-items: center;
	gap:
		38px;
	overflow: hidden;
	padding:
		34px;
	background:
		linear-gradient(
			135deg,
			#0e1667 0%,
			#131b73 50%,
			#19258f 100%
		);
	border-radius:
		24px;
	box-shadow:
		0
		22px
		48px
		rgba(19,27,115,.16);
}
/* decorative circle */
.ntc-promo::before {
	content: "";
	position: absolute;
	left:
		-125px;
	bottom:
		-190px;
	width:
		350px;
	height:
		350px;
	border:
		65px solid
		rgba(255,255,255,.027);
	border-radius:
		50%;
	pointer-events: none;
}
.ntc-promo::after {
	content: "";
	position: absolute;
	top:
		-140px;
	right:
		-90px;
	width:
		300px;
	height:
		300px;
	border:
		1px solid
		rgba(255,255,255,.05);
	border-radius:
		50%;
	pointer-events: none;
}
/* =========================================================
   PROMO CONTENT
========================================================= */
.ntc-promo-content {
	position: relative;
	z-index: 3;
	min-width: 0;
	padding-left:
		5px;
}
/* =========================================================
   PROMO LABEL
========================================================= */
.ntc-promo-label {
	display: inline-flex;
	align-items: center;
	gap:
		7px;
	min-height:
		31px;
	margin-bottom:
		16px;
	padding:
		0
		12px;
	color:
		#131b73;
	background:
		#fff;
	border:
		1px solid
		rgba(255,255,255,.35);
	border-radius:
		999px;
	font-size:
		9px;
	font-weight:
		800;
	line-height:
		1;
	letter-spacing:
		.75px;
	text-transform:
		uppercase;
	box-shadow:
		0
		5px
		15px
		rgba(0,0,0,.08);
}
.ntc-promo-label i {
	color:
		#0878c9;
	font-size:
		12px;
}
/* =========================================================
   PROMO TITLE
========================================================= */
.ntc-promo-content h2 {
	margin:
		0
		0
		15px;
	color:
		#fff;
	font-size:
		33px;
	font-weight:
		800;
	line-height:
		1.18;
	letter-spacing:
		-.4px;
	text-transform:
		uppercase;
}
.ntc-promo-content h2 span {
	display: block;
	margin-top:
		4px;
	color:
		#5dc7ff;
}
/* =========================================================
   PROMO DESCRIPTION
========================================================= */
.ntc-promo-content > p {
	max-width:
		410px;
	margin:
		0
		0
		20px;
	color:
		rgba(255,255,255,.76);
	font-size:
		14px;
	line-height:
		1.72;
}
/* =========================================================
   FEATURES
========================================================= */
.ntc-promo-features {
	display: flex;
	flex-direction: column;
	gap:
		10px;
	margin-bottom:
		24px;
}
.ntc-promo-feature {
	display: flex;
	align-items: center;
	gap:
		9px;
	color:
		rgba(255,255,255,.92);
	font-size:
		12px;
	font-weight:
		600;
	line-height:
		1.45;
}
.ntc-promo-check {
	display: flex;
	align-items: center;
	justify-content: center;
	flex:
		0 0 19px;
	width:
		19px;
	height:
		19px;
	color:
		#131b73;
	background:
		#fff;
	border-radius:
		50%;
	font-size:
		8px;
}
/* =========================================================
   PROMO CONTACT
========================================================= */
.ntc-promo-contact {
	display: flex;
	align-items: center;
}
.ntc-promo-contact > a {
	display: inline-flex;
	align-items: center;
	gap:
		10px;
	padding:
		7px
		15px
		7px
		7px;
	color:
		#fff !important;
	background:
		rgba(255,255,255,.08);
	border:
		1px solid
		rgba(255,255,255,.14);
	border-radius:
		999px;
	transition:
		background .25s ease,
		border-color .25s ease,
		transform .25s ease;
}
.ntc-promo-contact > a:hover {
	background:
		rgba(255,255,255,.14);
	border-color:
		rgba(255,255,255,.26);
	transform:
		translateY(-2px);
}
.ntc-promo-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width:
		36px;
	height:
		36px;
	color:
		#131b73;
	background:
		#fff;
	border-radius:
		50%;
	font-size:
		14px;
}
.ntc-promo-contact-text {
	display: flex;
	flex-direction: column;
	gap:
		2px;
}
.ntc-promo-contact-text small {
	color:
		rgba(255,255,255,.66);
	font-size:
		9px;
	font-weight:
		600;
}
.ntc-promo-contact-text strong {
	color:
		#fff;
	font-size:
		16px;
	font-weight:
		800;
}
/* =========================================================
   PROMO MEDIA
========================================================= */
.ntc-promo-media {
	position: relative;
	z-index: 3;
	padding:
		6px;
	overflow: hidden;
	background:
		rgba(255,255,255,.10);
	border:
		1px solid
		rgba(255,255,255,.17);
	border-radius:
		19px;
	box-shadow:
		0
		16px
		35px
		rgba(0,0,0,.14);
}
.ntc-promo-media img {
	display: block;
	width:
		100%;
	height:
		auto;
	margin: 0;
	border-radius:
		13px;
}
/* =========================================================
   LAPTOP 992 - 1199
========================================================= */
@media screen and
(min-width: 992px) and
(max-width: 1199px) {
	.ntc-about-section {
		padding:
			60px
			0
			64px;
	}
	.ntc-about-top {
		gap:
			45px;
	}
	.ntc-about-description h1,
	.ntc-about-description h2,
	.ntc-about-description h3 {
		font-size:
			33px;
	}
	.ntc-price-head h3 {
		font-size:
			25px;
	}
	.ntc-price-card {
		grid-template-columns:
			50px
			minmax(0, 1fr)
			30px;
		gap:
			11px;
		min-height:
			92px;
		padding:
			13px;
	}
	.ntc-price-icon {
		width:
			50px;
		height:
			50px;
	}
	.ntc-price-icon img {
		max-width:
			30px;
		max-height:
			30px;
	}
	.ntc-price-content strong {
		font-size:
			15px;
	}
	.ntc-promo {
		gap:
			28px;
		padding:
			28px;
	}
	.ntc-promo-content h2 {
		font-size:
			29px;
	}
}
/* =========================================================
   TABLET
========================================================= */
@media screen and
(min-width: 768px) and
(max-width: 991px) {
	.ntc-about-section {
		padding:
			52px
			0
			58px;
	}
	.ntc-about-top {
		grid-template-columns:
			1fr;
		gap:
			45px;
	}
	.ntc-about-description h1,
	.ntc-about-description h2,
	.ntc-about-description h3 {
		font-size:
			32px;
	}
	.ntc-price-grid {
		gap:
			14px;
	}
	.ntc-promo-section {
		padding:
			46px
			0
			55px;
	}
	.ntc-promo {
		grid-template-columns:
			1fr;
		gap:
			28px;
		padding:
			28px;
	}
	.ntc-promo-content > p {
		max-width:
			600px;
	}
	.ntc-promo-media {
		max-width:
			680px;
	}
}
/* =========================================================
   MOBILE
========================================================= */
@media screen and (max-width: 767px) {
	.ntc-about-section {
		padding:
			42px
			0
			46px;
	}
	.ntc-about-top {
		grid-template-columns:
			1fr;
		gap:
			38px;
	}
	.ntc-about-label {
		margin-bottom:
			16px;
	}
	.ntc-about-description h1,
	.ntc-about-description h2,
	.ntc-about-description h3 {
		margin-bottom:
			17px;
		font-size:
			27px;
		line-height:
			1.2;
	}
	.ntc-about-description p {
		font-size:
			14px;
		line-height:
			1.75;
	}
	.ntc-about-actions {
		margin-top:
			22px;
	}
	/* PRICE */
	.ntc-price-head {
		margin-bottom:
			18px;
	}
	.ntc-price-head h3 {
		font-size:
			23px;
	}
	.ntc-price-grid {
		grid-template-columns:
			1fr;
		gap:
			12px;
	}
	.ntc-price-card {
		min-height:
			90px;
		padding:
			14px;
	}
	.ntc-price-content strong {
		font-size:
			16px;
	}
	/* PROMO */
	.ntc-promo-section {
		padding:
			34px
			0
			44px;
	}
	.ntc-promo {
		grid-template-columns:
			1fr;
		gap:
			24px;
		padding:
			21px;
		border-radius:
			19px;
	}
	.ntc-promo-content {
		padding-left:
			0;
	}
	.ntc-promo-content h2 {
		font-size:
			26px;
	}
	.ntc-promo-content > p {
		font-size:
			13px;
	}
	.ntc-promo-media {
		padding:
			4px;
		border-radius:
			15px;
	}
	.ntc-promo-media img {
		border-radius:
			11px;
	}
}
/* =========================================================
   SMALL MOBILE
========================================================= */
@media screen and (max-width: 420px) {
	.ntc-about-description h1,
	.ntc-about-description h2,
	.ntc-about-description h3 {
		font-size:
			24px;
	}
	.ntc-price-card {
		grid-template-columns:
			47px
			minmax(0, 1fr)
			29px;
		gap:
			10px;
	}
	.ntc-price-icon {
		width:
			47px;
		height:
			47px;
	}
	.ntc-price-icon img {
		max-width:
			28px;
		max-height:
			28px;
	}
	.ntc-price-content strong {
		font-size:
			15px;
	}
	.ntc-promo {
		padding:
			18px;
	}
	.ntc-promo-content h2 {
		font-size:
			23px;
	}
	.ntc-promo-label {
		font-size:
			8px;
	}
	.ntc-promo-contact-text strong {
		font-size:
			14px;
	}
}