/* =========================================================
   NATIONLED
   PHƯƠNG ÁN 4 - BẢN TINH GỌN
   PRODUCT WALL / TECHNICAL MATRIX

   ĐÃ LOẠI:
   - NationLED Product System
   - Description
   - Xem tất cả
   - Series 01 / 02...
   - Product Series

   GIỮ:
   - /01 /02... của group
   - Title group
   - Series count
   - Dấu +
   - Product image
   - Product name
   - Arrow

   DESKTOP : 6 CỘT
   LAPTOP  : 5 / 4
   TABLET  : 3
   MOBILE  : 2

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


/* =========================================================
   ROOT
========================================================= */

.nlv4 {
	--nlv4-green: #28cb8b;
	--nlv4-dark: #078563;

	--nlv4-deep: #063f33;
	--nlv4-ink: #15231d;

	--nlv4-muted: #8b9691;
	--nlv4-line: #dfe8e4;

	--nlv4-soft: #f4faf7;

	position: relative;

	width: 100%;

	padding: 30px 0 80px;

	background: #fff;

	color: var(--nlv4-ink);
}


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


/* =========================================================
   CONTAINER
========================================================= */

.nlv4__inner {
	width: 100%;

	max-width: 1320px;

	margin: 0 auto;

	padding-left: 15px;
	padding-right: 15px;
}


/* =========================================================
   GROUP
========================================================= */

.nlv4-group {
	position: relative;

	width: 100%;

	overflow: hidden;

	border: 1px solid var(--nlv4-line);

	border-radius: 22px;

	background: #fff;
}


.nlv4-group+.nlv4-group {
	margin-top: 65px;
}


/* =========================================================
   CATEGORY HEADER
========================================================= */

.nlv4-group__header {
	position: relative;

	display: grid;

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

	align-items: center;

	gap: 28px;

	min-height: 150px;

	padding: 28px 34px;

	overflow: hidden;

	background:
		linear-gradient(110deg,
			#063f33 0%,
			#075b48 45%,
			#078563 100%);

	color: #fff;
}


/* =========================================================
   TECHNICAL GRID BACKGROUND
========================================================= */

.nlv4-group__header::before {
	content: "";

	position: absolute;

	inset: 0;

	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px,
			transparent 1px),
		linear-gradient(90deg,
			rgba(255, 255, 255, 0.035) 1px,
			transparent 1px);

	background-size: 30px 30px;

	mask-image:
		linear-gradient(90deg,
			transparent 0%,
			#000 30%,
			#000 100%);

	pointer-events: none;
}


/* =========================================================
   LARGE GROUP NUMBER
========================================================= */

.nlv4-group__index {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: flex-start;

	height: 100%;

	color:
		rgba(255, 255, 255, 0.17);
}


.nlv4-group__index-prefix {
	margin-right: 3px;

	color:
		var(--nlv4-green);

	font-size: 25px;
	line-height: 1;

	font-weight: 400;
}


.nlv4-group__index strong {
	display: block;

	font-size: 76px;
	line-height: 0.82;

	font-weight: 700;

	letter-spacing: -5px;
}


/* =========================================================
   HEADER MAIN
========================================================= */

.nlv4-group__main {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;

	min-width: 0;
}


/* =========================================================
   GROUP TITLE
   IN HOA
========================================================= */

.nlv4-group__title {
	margin: 0 !important;
	padding: 0 !important;

	color: #fff;

	font-size: 36px;
	line-height: 1.12;

	font-weight: 700;

	letter-spacing: -0.7px;

	text-transform: uppercase;
}


.nlv4-group__title a {
	color: inherit !important;

	text-decoration: none !important;
}


/* =========================================================
   HEADER ACTIONS
   Chỉ còn Series Count
========================================================= */

.nlv4-group__actions {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	min-width: 115px;
}


/* =========================================================
   SERIES COUNT
========================================================= */

.nlv4-group__count {
	display: flex;
	align-items: baseline;

	gap: 6px;

	color:
		rgba(255, 255, 255, 0.58);
}


.nlv4-group__count strong {
	color: #fff;

	font-size: 30px;
	line-height: 1;

	font-weight: 700;
}


.nlv4-group__count span {
	font-size: 9px;

	font-weight: 600;

	letter-spacing: 0.5px;

	text-transform: uppercase;
}


/* =========================================================
   PRODUCT WALL
========================================================= */

.nlv4-wall {
	position: relative;

	display: grid;

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

	width: 100%;

	border-top:
		1px solid var(--nlv4-line);

	border-left:
		1px solid var(--nlv4-line);

	background: #fff;
}


/* =========================================================
   PRODUCT CELL
========================================================= */

.nlv4-item {
	position: relative;

	display: flex;
	flex-direction: column;

	min-width: 0;

	min-height: 270px;

	padding: 13px 14px 14px;

	overflow: hidden;

	border-right:
		1px solid var(--nlv4-line);

	border-bottom:
		1px solid var(--nlv4-line);

	background: #fff;

	color: inherit !important;

	text-decoration: none !important;

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


/* =========================================================
   TOP
   SERIES TEXT ĐÃ XÓA
   Chỉ còn dấu +
========================================================= */

.nlv4-item__top {
	position: relative;
	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: flex-end;

	min-height: 22px;
}


/* =========================================================
   PLUS
========================================================= */

.nlv4-item__plus {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 20px;
	height: 20px;

	border:
		1px solid var(--nlv4-line);

	border-radius: 50%;

	background: #fff;

	color:
		var(--nlv4-dark);

	font-size: 14px;
	line-height: 1;

	font-weight: 300;

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


/* =========================================================
   PRODUCT STAGE
========================================================= */

.nlv4-item__stage {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	flex: 1;

	min-height: 185px;

	margin:
		0 0 5px;

	overflow: hidden;
}


/* =========================================================
   CROSSHAIR
========================================================= */

.nlv4-item__crosshair {
	position: absolute;

	left: 50%;
	top: 50%;

	width: 130px;
	height: 130px;

	transform:
		translate(-50%, -50%);

	border:
		1px solid rgba(7, 133, 99, 0.09);

	border-radius: 50%;

	transition:
		width 0.4s ease,
		height 0.4s ease,
		transform 0.4s ease,
		border-color 0.4s ease;
}


/* HORIZONTAL */
.nlv4-item__crosshair::before {
	content: "";

	position: absolute;

	left: -23px;
	top: 50%;

	width: calc(100% + 46px);
	height: 1px;

	background:
		linear-gradient(90deg,
			transparent,
			rgba(7, 133, 99, 0.10),
			transparent);
}


/* VERTICAL */
.nlv4-item__crosshair::after {
	content: "";

	position: absolute;

	left: 50%;
	top: -23px;

	width: 1px;
	height: calc(100% + 46px);

	background:
		linear-gradient(180deg,
			transparent,
			rgba(7, 133, 99, 0.10),
			transparent);
}


/* INNER RING */
.nlv4-item__crosshair span {
	position: absolute;

	inset: 18px;

	border:
		1px dashed rgba(7, 133, 99, 0.08);

	border-radius: 50%;
}


/* =========================================================
   PRODUCT GLOW
========================================================= */

.nlv4-item__glow {
	position: absolute;

	left: 50%;
	top: 52%;

	width: 110px;
	height: 110px;

	transform:
		translate(-50%, -50%);

	border-radius: 50%;

	background:
		radial-gradient(circle,
			rgba(40, 203, 139, 0.11) 0%,
			rgba(40, 203, 139, 0.035) 46%,
			transparent 72%);

	transition:
		width 0.4s ease,
		height 0.4s ease;
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.nlv4-item__image-wrap {
	position: relative;
	z-index: 3;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	padding:
		16px 8px;
}


/* =========================================================
   IMAGE
========================================================= */

.nlv4-item__image {
	display: block;

	width: 100% !important;
	height: 100% !important;

	max-width: 160px !important;
	max-height: 150px !important;

	margin:
		0 auto !important;

	object-fit: contain;

	filter:
		drop-shadow(0 13px 12px rgba(20, 60, 44, 0.09));

	transition:
		transform 0.42s cubic-bezier(0.2,
			0.75,
			0.25,
			1);
}


/* =========================================================
   PRODUCT FOOTER
========================================================= */

.nlv4-item__footer {
	position: relative;
	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 8px;

	min-height: 45px;
}


/* =========================================================
   TEXT
========================================================= */

.nlv4-item__text {
	min-width: 0;

	flex: 1;
}


/* =========================================================
   PRODUCT TITLE
========================================================= */

.nlv4-item__title {
	display: -webkit-box;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden;

	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;

	color:
		var(--nlv4-ink);

	font-size: 14px;
	line-height: 1.35;

	font-weight: 600;

	letter-spacing: -0.15px;

	transition:
		color 0.25s ease;
}


/* =========================================================
   ARROW
========================================================= */

.nlv4-item__arrow {
	display: flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 29px;
	height: 29px;

	border-radius: 50%;

	background:
		var(--nlv4-soft);

	color:
		var(--nlv4-dark);

	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		transform 0.25s ease;
}


.nlv4-item__arrow svg {
	width: 13px;
	height: 13px;
}


/* =========================================================
   HOVER
========================================================= */

.nlv4-item:hover {
	z-index: 3;

	background:
		linear-gradient(180deg,
			#ffffff 0%,
			#f5fbf8 100%);

	box-shadow:
		0 18px 40px rgba(7, 133, 99, 0.10);
}


/* PRODUCT FLOAT */
.nlv4-item:hover .nlv4-item__image {
	transform:
		translateY(-7px) scale(1.075);
}


/* CROSSHAIR */
.nlv4-item:hover .nlv4-item__crosshair {
	width: 145px;
	height: 145px;

	transform:
		translate(-50%, -50%) rotate(8deg);

	border-color:
		rgba(7, 133, 99, 0.16);
}


/* GLOW */
.nlv4-item:hover .nlv4-item__glow {
	width: 145px;
	height: 145px;
}


/* TITLE */
.nlv4-item:hover .nlv4-item__title {
	color:
		var(--nlv4-dark);
}


/* PLUS */
.nlv4-item:hover .nlv4-item__plus {
	color: #fff;

	border-color:
		var(--nlv4-dark);

	background:
		var(--nlv4-dark);

	transform:
		rotate(45deg);
}


/* ARROW */
.nlv4-item:hover .nlv4-item__arrow {
	color: #fff;

	background:
		var(--nlv4-dark);

	transform:
		translateX(2px);
}


/* =========================================================
   BOTTOM GREEN ACCENT
========================================================= */

.nlv4-item::after {
	content: "";

	position: absolute;

	left: 0;
	bottom: 0;

	width: 100%;
	height: 3px;

	background:
		linear-gradient(90deg,
			var(--nlv4-green),
			var(--nlv4-dark));

	transform:
		scaleX(0);

	transform-origin:
		left center;

	transition:
		transform 0.32s ease;
}


.nlv4-item:hover::after {
	transform:
		scaleX(1);
}


/* =========================================================
   NOTICE
========================================================= */

.nlv4-notice {
	max-width: 1320px;

	margin:
		20px auto;

	padding:
		15px 18px;

	border:
		1px solid rgba(7, 133, 99, 0.20);

	border-radius: 10px;

	background:
		#f3faf7;

	color:
		var(--nlv4-dark);

	font-size: 14px;
	line-height: 1.5;
}


/* =========================================================
   <= 1199
   5 CỘT
========================================================= */

@media (max-width: 1199px) {

	.nlv4-wall {
		grid-template-columns:
			repeat(5, minmax(0, 1fr));
	}


	.nlv4-group__header {
		grid-template-columns:
			105px minmax(0, 1fr) auto;
	}


	.nlv4-group__index strong {
		font-size: 66px;
	}


	.nlv4-group__title {
		font-size: 32px;
	}

}


/* =========================================================
   <= 1024
   4 CỘT
========================================================= */

@media (max-width: 1024px) {

	.nlv4-group__header {
		grid-template-columns:
			85px minmax(0, 1fr) auto;

		gap: 22px;

		min-height: 135px;

		padding:
			25px 28px;
	}


	.nlv4-group__index strong {
		font-size: 57px;
	}


	.nlv4-group__title {
		font-size: 28px;
	}


	.nlv4-wall {
		grid-template-columns:
			repeat(4, minmax(0, 1fr));
	}

}


/* =========================================================
   <= 767
   3 CỘT
========================================================= */

@media (max-width: 767px) {

	.nlv4 {
		padding:
			20px 0 55px;
	}


	.nlv4__inner {
		padding-left: 12px;
		padding-right: 12px;
	}


	.nlv4-group {
		border-radius: 18px;
	}


	.nlv4-group+.nlv4-group {
		margin-top: 50px;
	}


	.nlv4-group__header {
		grid-template-columns:
			65px minmax(0, 1fr) auto;

		gap: 16px;

		min-height: 115px;

		padding:
			22px;
	}


	.nlv4-group__index strong {
		font-size: 49px;

		letter-spacing: -3px;
	}


	.nlv4-group__title {
		font-size: 23px;
	}


	.nlv4-group__count strong {
		font-size: 22px;
	}


	.nlv4-group__count span {
		font-size: 8px;
	}


	.nlv4-wall {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}


	.nlv4-item {
		min-height: 250px;
	}

}


/* =========================================================
   MOBILE
   2 CỘT
========================================================= */

@media (max-width: 575px) {

	.nlv4 {
		padding-bottom: 42px;
	}


	.nlv4-group {
		border-radius: 15px;
	}


	.nlv4-group+.nlv4-group {
		margin-top: 42px;
	}


	/* =====================================================
	   HEADER MOBILE
	===================================================== */

	.nlv4-group__header {
		grid-template-columns:
			46px minmax(0, 1fr) auto;

		gap: 10px;

		min-height: 95px;

		padding:
			17px 15px;
	}


	.nlv4-group__index-prefix {
		font-size: 14px;
	}


	.nlv4-group__index strong {
		font-size: 35px;

		letter-spacing: -2px;
	}


	.nlv4-group__title {
		font-size: 18px;
		line-height: 1.18;

		letter-spacing: -0.3px;
	}


	.nlv4-group__actions {
		min-width: 48px;
	}


	.nlv4-group__count {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		gap: 3px;
	}


	.nlv4-group__count strong {
		font-size: 19px;
	}


	.nlv4-group__count span {
		font-size: 6.5px;

		letter-spacing: 0.4px;
	}


	/* =====================================================
	   MOBILE = 2 CỘT
	===================================================== */

	.nlv4-wall {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}


	.nlv4-item {
		min-height: 215px;

		padding:
			9px 9px 10px;
	}


	.nlv4-item__top {
		min-height: 19px;
	}


	.nlv4-item__plus {
		width: 18px;
		height: 18px;

		font-size: 12px;
	}


	.nlv4-item__stage {
		min-height: 140px;
	}


	.nlv4-item__crosshair {
		width: 100px;
		height: 100px;
	}


	.nlv4-item__crosshair span {
		inset: 14px;
	}


	.nlv4-item__glow {
		width: 85px;
		height: 85px;
	}


	.nlv4-item__image-wrap {
		padding:
			13px 4px;
	}


	.nlv4-item__image {
		max-width: 120px !important;
		max-height: 110px !important;
	}


	.nlv4-item__footer {
		min-height: 39px;

		gap: 5px;
	}


	.nlv4-item__title {
		font-size: 11.5px;
		line-height: 1.32;
	}


	.nlv4-item__arrow {
		width: 25px;
		height: 25px;
	}


	.nlv4-item__arrow svg {
		width: 11px;
		height: 11px;
	}

}


/* =========================================================
   MOBILE RẤT NHỎ
========================================================= */

@media (max-width: 380px) {

	.nlv4-group__header {
		grid-template-columns:
			40px minmax(0, 1fr) auto;

		padding:
			15px 12px;
	}


	.nlv4-group__index strong {
		font-size: 31px;
	}


	.nlv4-group__title {
		font-size: 16px;
	}


	.nlv4-group__count strong {
		font-size: 17px;
	}


	.nlv4-item {
		min-height: 200px;
	}


	.nlv4-item__stage {
		min-height: 127px;
	}


	.nlv4-item__crosshair {
		width: 88px;
		height: 88px;
	}


	.nlv4-item__image {
		max-width: 105px !important;
		max-height: 98px !important;
	}


	.nlv4-item__arrow {
		display: none;
	}

}


/* =========================================================
   TOUCH DEVICE
========================================================= */

@media (hover: none) {

	.nlv4-item:hover {
		box-shadow: none;
	}


	.nlv4-item:hover .nlv4-item__image {
		transform: none;
	}


	.nlv4-item:hover .nlv4-item__crosshair {
		width: 130px;
		height: 130px;

		transform:
			translate(-50%, -50%);
	}


	.nlv4-item:hover .nlv4-item__plus {
		transform: none;
	}


	.nlv4-item:hover .nlv4-item__arrow {
		transform: none;
	}


	.nlv4-item:hover::after {
		transform:
			scaleX(0);
	}

}


/* =========================================================
   MOBILE TOUCH RESET
========================================================= */

@media (max-width: 575px) and (hover: none) {

	.nlv4-item:hover .nlv4-item__crosshair {
		width: 100px;
		height: 100px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.nlv4 *,
	.nlv4 *::before,
	.nlv4 *::after {
		transition:
			none !important;
	}

}