.swatch-element {
		position: relative;
		margin: 8px 10px 0px 0px;
	}
	.swatch-element.color {
		margin: 8px 15px 0px 0px;
	}
	.swatch-element.color .trang {
		background-color: #fcfcfc;
	}
	.swatch-element.color .xanh-ngoc {
		background-color: #0572ff;
	}
	.swatch-element.color .hong {
		background-color: #f662d6;
	}
	.swatch-element.color .den {
		background-color: #000;
	}
	.swatch-element.color .do {
		background-color: #f20808;
	}
	.swatch-element.color .vang {
		background-color: #fcef05;
	}
	.swatch-element.color .xam {
		background-color: #615a5a;
	}
	.swatch-element.color .xanh-nuoc-bien {
		background-color: #3a40fa;
	}
	.swatch-element.color .xanh-luc {
		background-color: #00b7ff;
	}
	.swatch-element.color .tim {
		background-color: #c500ff;
	}

	
		
		
		
		
		
		
			.swatch-element.color .trang {
				background-color: #ffffff;
			}
			.swatch-element.color .trang.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_1.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .vang {
				background-color: #eadb50;
			}
			.swatch-element.color .vang.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_2.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .xam {
				background-color: #7e7e7e;
			}
			.swatch-element.color .xam.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_3.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .do {
				background-color: #e80000;
			}
			.swatch-element.color .do.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_4.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .den {
				background-color: #000000;
			}
			.swatch-element.color .den.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_5.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .hong {
				background-color: #ffd1d1;
			}
			.swatch-element.color .hong.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_6.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .bac {
				background-color: #e3e3e3;
			}
			.swatch-element.color .bac.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_7.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .xanh {
				background-color: #73c4ba;
			}
			.swatch-element.color .xanh.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_8.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .kem {
				background-color: #fff8e2;
			}
			.swatch-element.color .kem.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_9.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	
		
		
		
		
		
		
			.swatch-element.color .tim {
				background-color: #9303d3;
			}
			.swatch-element.color .tim.image-type {
				background: url(/assets/mrweb.dktcdn.net/100/485/374/themes/945619/assets/color_10.png?1783667821058) no-repeat center center;
				background-size: cover;
			}
		
	


	.swatch-element.color + .tooltip {
		z-index: -1;
		white-space: nowrap;
	}
	.swatch-element input:checked + label{
		border: 0;
		box-shadow: 0 0 0 2.5px var(--primary-color), inset 0 0 0 4px #fff;
	}
	.swatch-element.color:hover + .tooltip {
		opacity: 1;
		z-index: 100;
		top: -30px;
		min-width: 30px;
		background: #000;
		color: #fff;
		padding: 4px 6px;
		font-size: 10px;
		border-radius: 4px;
	}
	.swatch-element.color:hover + .tooltip:after {
		content: '';
		position: absolute;
		left: 16px;
		bottom: -3px;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 3px 2.5px 0 2.5px;
		border-color: #000 transparent transparent transparent;
	}
	.swatch-element label {
		padding: 10px;
		font-size: 14px;
		border-radius: 6px;
		height: 30px !important;
		min-width: auto !important;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	.swatch-element input {
		width: 100%;
		height: 100%;
		opacity: 0;
		position: absolute;
		z-index: 3;
		top: 0;
		left: 0;
		cursor: pointer;
	}
	.swatch .swatch-element input:checked + label {
		border-color: var(--primary-color) !important;
		color: var(--primary-color);
		position: relative;
	}
	.swatch .swatch-element input:checked + label:after {
		content: none;
		background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkCw8RJSHXzNuNAAAAfElEQVQoz7WRsQ2CYBQGLwRCaLRkDwqdwcLCSZjCmj2AgtoJXMbEUquzEAz+8Je89r675sGG59ka0ig+0ZFbJDGbgRwoAXemi/hb1QZw793ebB739cPgTdV2qvzZAFY+VL+VwB4nB59j5RLYhBVXcTBZw7NJDAN49LrFyz67GnkMHStx0wAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMC0xMS0xNVQxNzozNzozMyswMDowMGfDTJEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjAtMTEtMTVUMTc6Mzc6MzMrMDA6MDAWnvQtAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAABJRU5ErkJggg==");
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		top: 0px;
		right: 0;
		width: 6px;
		height: 6px;
	}
	.swatch .swatch-element input:checked + label:before {
		content: none;
		padding: 4px;
		font-size: 10px;
		line-height: 1;
		position: absolute;
		top: -15px;
		right: -13px;
		background: var(--primary-color);
		width: 26px;
		height: 24px;
		transform: rotate(45deg);
	}
	.swatch .color label {
		width: 44px;
		min-width: unset !important;
		height: 44px !important;
		line-height: 24px !important;
		border-radius: 6px !important;
	}
	.swatch .color label:before {
		content: none;
	}
	.swatch {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 0 0 10px;
	}
	.swatch .header {
		font-weight: bold;
		padding-right: 20px;
		min-width: 115px;
		color: #333;
	}
	.swatch .color label {
		position: relative;
		z-index: 2;
		border-radius: 100% !important;
	}
	.swatch .color span {
		content: '';
		position: absolute;
		width: 30px;
		height: 30px;
		border-radius: 100%;
		background: #fff;
		top: 50%;
		left: 50%;
		z-index: 0;
		transform: translate(-50%, -50%);
		visibility:hidden;
	}
	.swatch .color input:checked + label {
		border-color: #eee !important;
	}
	.swatch .color input:checked ~ span {
		opacity: 1;
		border: 2px solid var(--primary-color);
	}
	.quick-view-product .swatch .color input:checked ~ span{opacity:0;}
	.quick-view-product .swatch {
		padding: var(--block-spacing) 0;
	}
	.item_product_main .swatch-element.color {
		margin-right: 5px;
		margin-top: 5px;
	}
	.item_product_main .swatch .color label {
		width: 26px;
		height: 26px!important;
		line-height: 26px!important;
		padding: 0;
	}