.elementor-21585 .elementor-element.elementor-element-30e072f{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-21585 .elementor-element.elementor-element-30e072f{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}}/* Start custom CSS for shortcode, class: .elementor-element-a962a7d *//* ==========================================================
   BRAND DIRECTORY
========================================================== */

.samart-brand-directory {
	width: 100%;
	max-width: 100%;
}


/* ==========================================================
   A-Z NAVIGATION
========================================================== */

.samart-brand-alphabet {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;

	column-gap: 28px;
	row-gap: 20px;

	width: 100%;

	padding: 0 0 30px;
	margin: 0 0 38px;

	border-bottom: 2px solid #1a1a1a;
}


/* Letter */
.samart-brand-letter {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin: 0;
	padding: 0;

	font-size: 18px;
	font-weight: 700;
	line-height: 1;

	text-decoration: none !important;

	transition:
		color 0.2s ease,
		transform 0.2s ease,
		opacity 0.2s ease;
}


/* มี Brand */
.samart-brand-letter.is-active {
	color: #111111;
	cursor: pointer;
}


/* Hover */
.samart-brand-letter.is-active:hover {
	color: #007bff;

	transform: translateY(-2px);
}


/* ไม่มี Brand */
.samart-brand-letter.is-disabled {
	color: #d4d4d4;
	cursor: default;
	pointer-events: none;
}


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

.samart-brand-group {
	display: grid;

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

	column-gap: 65px;

	width: 100%;

	padding: 42px 35px 42px 40px;

	border-bottom: 1px dashed #b8b8b8;

	scroll-margin-top: 130px;
}


.samart-brand-group:last-child {
	border-bottom: none;
}


/* ==========================================================
   LEFT LETTER
========================================================== */

.samart-brand-group-letter {
	padding-top: 15px;

	font-size: 21px;
	font-weight: 700;
	line-height: 1;

	color: #111111;
}


/* ==========================================================
   BRAND LIST
========================================================== */

.samart-brand-list {
	display: flex;
	flex-direction: column;

	gap: 28px;

	width: 100%;
}


/* ==========================================================
   BRAND ITEM
========================================================== */

.samart-brand-item {
	display: grid;

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

	align-items: center;

	column-gap: 35px;

	width: fit-content;
	max-width: 100%;

	margin: 0;
	padding: 0;

	color: inherit;

	text-decoration: none !important;
}


/* ==========================================================
   LOGO AREA
========================================================== */

.samart-brand-logo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 160px;
	height: 72px;

	margin: 0;
	padding: 0;

	overflow: hidden;
}


/* Image */
.samart-brand-logo img {
	display: block;

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

	height: 100%;
	max-height: 65px;

	margin: 0;
	padding: 0;

	object-fit: contain;
	object-position: center;

	transition:
		transform 0.25s ease,
		opacity 0.25s ease;
}


/* ถ้าไม่มีรูป */
.samart-brand-logo-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;

	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;

	text-align: center;

	color: #666666;
}


/* ==========================================================
   BRAND NAME
========================================================== */

.samart-brand-name {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;

	color: #111111;

	white-space: nowrap;

	transition:
		color 0.2s ease,
		transform 0.2s ease;
}


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

.samart-brand-item:hover .samart-brand-logo img {
	transform: scale(1.05);
	opacity: 0.8;
}


.samart-brand-item:hover .samart-brand-name {
	color: #007bff;
}


/* ==========================================================
   SMOOTH SCROLL
========================================================== */

html {
	scroll-behavior: smooth;
}


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

.samart-brand-notice {
	padding: 20px;

	font-size: 15px;

	background: #f7f7f7;

	border-radius: 8px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

	.samart-brand-alphabet {
		column-gap: 23px;
		row-gap: 20px;
	}


	.samart-brand-group {
		grid-template-columns: 55px minmax(0, 1fr);

		column-gap: 35px;

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


	.samart-brand-item {
		grid-template-columns: 140px minmax(0, 1fr);

		column-gap: 30px;
	}


	.samart-brand-logo {
		width: 140px;
	}


	.samart-brand-logo img {
		max-width: 130px;
	}

}


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

@media (max-width: 767px) {

	/* Alphabet */

	.samart-brand-alphabet {
		column-gap: 20px;
		row-gap: 20px;

		padding-bottom: 25px;
		margin-bottom: 5px;
	}


	.samart-brand-letter {
		font-size: 15px;
	}


	/* Groups */

	.samart-brand-group {
		display: grid;

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

		column-gap: 15px;

		padding: 30px 0;

		scroll-margin-top: 90px;
	}


	/* Letter */

	.samart-brand-group-letter {
		padding-top: 11px;

		font-size: 18px;
	}


	/* List */

	.samart-brand-list {
		gap: 22px;
	}


	/* Item */

	.samart-brand-item {
		grid-template-columns: 100px minmax(0, 1fr);

		column-gap: 20px;

		width: 100%;
	}


	/* Logo */

	.samart-brand-logo {
		width: 100px;
		height: 55px;
	}


	.samart-brand-logo img {
		max-width: 95px;
		max-height: 50px;
	}


	/* Name */

	.samart-brand-name {
		font-size: 14px;

		white-space: normal;
	}

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

	.samart-brand-alphabet {
		column-gap: 17px;
		row-gap: 18px;
	}


	.samart-brand-group {
		grid-template-columns: 30px minmax(0, 1fr);

		column-gap: 10px;
	}


	.samart-brand-item {
		grid-template-columns: 90px minmax(0, 1fr);

		column-gap: 15px;
	}


	.samart-brand-logo {
		width: 90px;
	}


	.samart-brand-logo img {
		max-width: 85px;
	}

}/* End custom CSS */