@import "../fonts/google-sans/style.css";
@import "default.dark.css";
@import url('https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400;500;600;700;800&family=Niramit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Roboto+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
	font-family: 'Product Sans Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Regular'), url('ProductSans-Regular.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Italic'), url('ProductSans-Italic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Thin Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Thin Regular'), url('ProductSans-Thin.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Light Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Light Regular'), url('ProductSans-Light.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Medium Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Medium Regular'), url('ProductSans-Medium.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Black Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Black Regular'), url('ProductSans-Black.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Thin Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Thin Italic'), url('ProductSans-ThinItalic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Light Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Light Italic'), url('ProductSans-LightItalic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Medium Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Medium Italic'), url('ProductSans-MediumItalic.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Bold'), url('ProductSans-Bold.woff') format('woff');
}


@font-face {
	font-family: 'Product Sans Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Bold Italic'), url('ProductSans-BoldItalic.woff') format('woff');
}

@font-face {
	font-family: 'Product Sans Black Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Product Sans Black Italic'), url('ProductSans-BlackItalic.woff') format('woff');
}



::-webkit-scrollbar {
    width: 6px;
    height: 4px;
}
:hover::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover {
    background-color: #bdbdbd;
    opacity: 1;
    visibility: visible;
}
::-webkit-scrollbar-thumb {
    background-clip: content-box;
    background-color: transparent;
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    background-clip: content-box;
    background-color: transparent;
}
::-webkit-scrollbar-track:hover, :hover::-webkit-scrollbar-track {
}
::-moz-selection {
    background-color: rgba(240,50,60,.12);
    color: #fd1361;
}
::selection {
    background-color: rgba(240,50,60,.12);
    color: #fd1361;
}


html, iframe, .scroll-smooth {
  scroll-behavior: smooth;
}
.overflow-hidden{
    overflow: hidden; 
}
.entry-content ul{
	list-style: circle;
    margin-left: 30px;
    margin-bottom: 10px;
}
.entry-content p, .entry-content li{ 
	margin-top: 0px; 
    margin-bottom: 10px;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6{
	margin-bottom: 10px;
}
.fixed{
	position: fixed;
}
.t-0{
	top: 0;
}
.b-0{
	bottom: 0;
}
.w-full{
	width: 100%;
}
.w-max{
    width: max-content;
}
.form-control{
    font-size: 1em;
    display: block;
    width: calc(100% - 26px);
}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.sticky{
	position: sticky;
}
.between{
    justify-content: space-between;
}
.block{
	display: block;
}
.l-0{
	left: 0px;
}
.start{
	justify-content: start;
}
.align-center, .center{ 
	align-items: center;
}
.text-center{ 
	text-align: center;
}
.end{ 
	justify-content: end;
}
input, textarea, select{
    border: 1px solid #E0E0E0;
    box-shadow: none;
    border-radius: 4px;
    margin: 0;
    padding: 6px 12px;
}
.text-sm{
    font-size: .875rem;
    line-height: 1.2em;
}
.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.flex-reverse{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: row-reverse;
}
.row-reverse{
    flex-direction: row-reverse;
}
.wrapper{
	margin-top: 15px;
}
.gap-15, .gap-15px {
	gap: 15px;
}
.menu-profile-main li > a {
	position: relative;
}
.menu-profile-main a {
	cursor: pointer;
}

.menu-submenu {
	font-size: 14px;
	font-weight: 500;
	margin: 5px;
}

.menu-profile-main .navbar-name {
	font-family: system-ui;
	color: #0d73c1;
	background: #f1f1f1;
	display: block;
	width: calc(100% - 10px);
	padding: 2px 5px;
	text-transform: uppercase;
	font-weight: bold;
}
.nav-second-level {
	margin: 5px;
}
.nav-second-level li{
	margin: 2px 5px;
}
.menu-profile-main {
	gap: 2px;
	background: #fff;
}
.menu-profile-main a{
	display: block;
}

.menu-profile-main > li {
	position: relative;
}

.menu-profile-main li a {
	color: #000;
	font-size: 14px;
	font-weight: 500;
}

.menu-profile-main li a:hover {
	color: #0050e0;
}

.menu-profile-main li:hover {
}

.menu-profile-main li:hover .menu-submenu {
	display: block;
}

.menu-submenu .lsubmenu {
	padding: 5px 15px;
	border-radius: 0px;
}

.menu-submenu .lsubmenu:hover {
	background: #dee7ffa3;
}

.dark .menu-profile-main li > span {
	background: #101010;
}
.navbar-name{
	background: #f1f1f1;
}

@media(max-width: 768px) {
	.menu-profile-main {
		width: calc(100% - 20px);
	}
}



.pointer{ cursor: pointer; }


table td{
    vertical-align: middle;
}

.tab-content{ display: none; }
.tab-content.active{ display: block; }

.cms-modal{ width: 600px; max-width: 100%; display: none; position: fixed; top: -100%; left: 50%; transition: unset; transform: translateX(-50%) translateY(-50%); z-index: 990;} .cms-modal .content-scroll{ max-height: calc(100vh - 280px); overflow-y: auto; overflow-x: hidden; }
.cms-modal.active{ top: 50%; left: 50%; display: block; opacity: 1; visibility: visible; }
#modal-mask{ background: #000000a3; position: fixed; top: 0px; left: 0px; width: 101%; height: 101%; z-index: 99; }

.scroll-x{
    overflow-x: scroll;
}
.scroll-y{
    overflow-y: scroll;
}
.noscroll{
    overflow: hidden;
}

.ms-15px{
	margin-top: 15px;
}
.grid-3{
	gap: 15px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.grid-3-1-1{
	gap: 15px;
	display: grid;
	grid-template-columns: 3fr 1fr 1fr;
}
.grid-5-1-2{
	gap: 15px;
	display: grid;
	grid-template-columns: 5fr 1fr 2fr;
}
.grid-4{
	gap: 15px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-5{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.grid-6{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
.me-5px{
	margin-bottom: 5px;
}
.me-15px{
	margin-bottom: 15px;
}
.me-30px{
	margin-bottom: 30px;
}
.mx-0{
	margin-top: 0px;
	margin-bottom: 0px;
}
.my-0{
	margin-left: 0px;
	margin-right: 0px;
}
button{
    padding: 5px 10px;
	margin-top: 10px;
	cursor: pointer;
	border: 1px solid #cfcfcf;
	background: #a4bcff;
	color: #3444bb;
	border-radius: 5px;
}
button:hover{
	background: #0050e0;
	color: #fff;
}
.table-responsive{
	border-collapse: collapse;
	border-radius: 10px;
	width: 100%;
    overflow: auto;
}
.datatable-container{
	overflow: auto;
}
.table-responsive .box-head{
    padding: 5px;
    background: #83838326;
    font-weight: 500;    
}
.table-responsive > .table-avatar{
    padding: 5px;
}
table{
	width: 100%;
}
table th, table td{
	text-align: left;
	padding: 5px;
    border: 1px solid #e1e1e1;
}
.thead-light{
	background: #8181814a;
}
.card{
	background: #fff;
	border: 1px solid #e1e1e1;
	padding: 10px;
	border-radius: 15px;
}
.card h3{
    margin: 5px 0px;
    border-bottom: 1px solid #d3d3d3;
    padding-bottom: 10px;
    margin-bottom: 10px;
    display: block;
}
a, button, input, textarea, select, p, ul, li, span, em, b, strong{
	
}
b, strong{
  font-weight: 700;
}
a{
  color: #005bff;
}
a:hover {
  color: #0050e0;
  cursor: pointer;
}
a, a:hover {
  text-decoration: none;
}
.w-full{ 
	width:100%; 
}
.block{
    display: block;
}
.grid{
	display: grid;
}
.grid-3-1{ 
    grid-template-columns: 3fr 1fr; 
}
.grid-2{
    grid-template-columns: repeat(2, 1fr);
}
.grid-3{
    grid-template-columns: repeat(3, 1fr);
}
.grid-4{
    grid-template-columns: repeat(4, 1fr);
}
.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}
.grid-6{
    grid-template-columns: repeat(6, 1fr);
}
.grid-8 {
    grid-template-columns: repeat(8, 1fr);
}
.grid-12 {
    grid-template-columns: repeat(12, 1fr);
}


.grid-4-3-3{
	grid-template-columns: 4fr 3fr 3fr;
}
.grid-1-2-1{
	grid-template-columns: 1fr 2fr 1fr;
}
.grid-2-1-1{
	grid-template-columns: 2fr 1fr 1fr;
}
.grid-1-3-2{
	grid-template-columns: 1fr 3fr 2fr;
}
.grid-1-1{
	grid-template-columns: 1fr 1fr;
}
.grid-1-2{
    grid-template-columns: 1fr 2fr;
} 
.grid-2-1{
    grid-template-columns: 2fr 1fr;
}
.grid-1{
	grid-template-columns: 1fr;
}
.grid-7-3{
  grid-template-columns: 7fr 3fr;
}
.grid-7-4{
  grid-template-columns: 7fr 4fr;
}
.grid-7-5{
  grid-template-columns: 7fr 5fr;
}
.grid-6-4{
    grid-template-columns: 6fr 4fr;
}
.grid-4-7{
    grid-template-columns: 4fr 7fr;
}
.grid-4-6{
    grid-template-columns: 4fr 6fr;
}
.grid-3-1{
	grid-template-columns: 3fr 1fr;
}
.grid-1-3{
	grid-template-columns: 1fr 3fr;
}
.grid-1-2{
	grid-template-columns: 1fr 2fr;
}
.fs-3\/2{
	font-size: 1.5em; 
    line-height: 1.1em;
}
.fs-2{
	font-size: 2em; 
    line-height: 1.1em;
}
.fs-3{
	font-size: 3em; 
    line-height: 1.1em;
}
.fs-4{
	font-size: 4em; 
    line-height: 1.1em;
}
.gap-2{ 
	gap: 2px; 
}
.gap-3{ 
	gap: 3px; 
}
.gap-4{ 
	gap: 4px; 
}
.gap-5, .gap-5px{ 
	gap: 5px; 
}
.gap-10, .gap-10px{ 
	gap: 10px;
}
.gap-15, .gap-15px{
    gap: 15px; 
}
.gap-30, .gap-30px{ 
	gap: 30px; 
}
.gap-40, .gap-40px{ 
	gap: 40px; 
}
.gap-50, .gap-50px{ 
	gap: 50px; 
}
.gap-60, .gap-60px{ 
	gap: 60px; 
}

.mx-2px{ margin-top: 2px;  margin-bottom: 2px;  }
.mx-5px{ margin-top: 5px;  margin-bottom: 5px;  }
.me-2{ margin-right: 2px; }
.p-5px{
    padding: 5px;
}
.p-10px{
    padding: 10px;
}
.p-15px{
    padding: 15px;
}
.space-between, .between, .justify-between{
    justify-content: space-between;
}
.align-center{
    align-items: center;
}
.align-end{
        align-items: self-end;
}
.container{
    max-width: 1416px;
    margin: 0px auto;
}
.center{
    margin: 0 auto;
	justify-content: center;
}
ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.disc{ 
    list-style: disc;
}
img{ 
	max-width:100% 
}
.tab-content{
    display: none;
}
.tab-content.active{
    display: block;
}
.ms-0, .mt-0{
    margin-top: 0px;
}
.m-5px{
	margin-top: 5px;
	margin-bottom: 5px;
}
.m-10px{
	margin-top: 10px;
	margin-bottom: 10px;
}
.mt-5px {
    margin-top: 5px;
}
.mt-15px{
	margin-top: 15px;
}
.mt-30px{
	margin-top: 30px;
}
.me-10px{ 
	margin-right: 10px;  
}
.p-0{
	padding: 0px;
}
.m-0{
	margin: 0px;
}
.sticky{
    position: sticky;
}
.t-10px{
    top: 10px;
}
.mb-10px{
  margin-bottom: 10px;
}
.mb-15px{
  margin-bottom: 15px;
}
.hidden{ display: none; }
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}



body {
	font-family: "Google Sans", "Roboto", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	1font-family: 'Baloo Tamma 2', 'Niramit', 'Roboto Condensed', sans-serif !important;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	padding: 0px;
	margin: 0px;
	position: relative;
    background: linear-gradient(90deg, #fff 15px, #00000000 1%) 50%, linear-gradient(#fff 15px, #3e41463b 1%) 0, #ffffff fixed;
	background-size: 16px 16px;
	font-size: 1em;
    font-weight: 400;
    line-height: 1.6em;
    overflow-x: hidden;
}


.head-name {
	color: #0077ba;
	border-bottom: 1px solid #0077ba;
	margin: 0px;
    padding-bottom: 5px;
}

.video {
	position: relative;
	max-height: 84px;
	overflow: hidden;
	background: #fff;
	1padding: 2px;
	1border: 1px solid #00000047;
}

.video,
.video:before {
	border-radius: 8px;
}

.video .image-item {
	margin: 0px;
}

.video:hover {
	1border: 1px solid #0044ff66;
}

.video.active {
	1border: 1px solid #0044ff;
}

.video:after {
	content: "";
	position: absolute;
	background: url("/assets/images/video.svg?v=1.01") no-repeat;
	background-size: contain;
	width: 30px;
	height: 30px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 99;
	margin: 0px;
	opacity: 0.8;
}

.video:before {
	content: "";
	position: absolute;
	background-color: #0000000a;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 92;
	margin: 0px;
	transition: all 0.2s ease-in-out;
}

.video:hover:before {
	background-color: #00000014;
	opacity: 1;
}

.video:hover:after {
	width: 36px;
	height: 36px;
	opacity: 1;
}

.video,
.video:after,
.video:before,
.video:hover:before,
.video:hover:after {
	transition: all 0.2s ease-in-out;
}

@keyframes light-to-right {
	0% {
		left: -104px
	}

	to {
		left: 100%
	}
}

.light-to-right {
	animation: light-to-right 1.35s linear;
	animation-iteration-count: infinite;
	background: linear-gradient(105deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .6), hsla(0, 0%, 100%, .8), hsla(0, 0%, 100%, .6), hsla(0, 0%, 100%, 0));
	height: 100%;
	position: absolute;
	top: 0;
	width: 104px;
}

.warning-note {
	border-top: 1px solid rgb(0 0 0 / 17%);
	color: #6a6a6a;
	display: block;
	font-size: 14px;
	line-height: 1.5em;
	margin-top: 16px;
	padding-top: 12px;
}



.icon-text {
	margin-top: 4px;
}

.icon-text a {
	color: #000;
}


.icon-mt--5px {
	margin-top: -5px;
}

.radio-checkbox {
	cursor: pointer;
}

.radio-checkbox:hover {
	color: #1955f2;
}

input[type="radio"],
input[type="checkbox"] {
	cursor: pointer;
	height: 0;
	opacity: 0;
	position: absolute;
	width: 0;
	user-select: none;
}

.radio-circle,
.radio-square {
	background-color: #fff;
	border: 2px solid rgba(204, 214, 228, .6);
	border-radius: 50%;
	box-sizing: border-box;
	display: flex;
	flex: 0 0 16px;
	height: 16px;
	margin-right: 5px;
	position: relative;
	width: 16px;
	margin-top: -5px;
	cursor: pointer;
}

.radio-circle:after,
.radio-square:after {
	content: "";
	background-color: #fff;
	border-radius: 50%;
	height: 8px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 8px;
}

input:checked+.radio-circle,
input:checked+.radio-square {
	background-color: #005bff;
	border-color: #005bff;
}

.radio-square {
	border-radius: 5px;
}

.radio-square:after {
	height: 16px;
	width: 16px;
	background-color: unset;
}

input:checked+.radio-square:after {
	border-radius: 5px;
	background-color: unset;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' color='%23fff' class='a4224-a3'%3E%3Cpath fill='currentColor' d='M12.707 5.293a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-3-3a1 1 0 0 1 1.414-1.414L7 9.586l4.293-4.293a1 1 0 0 1 1.414 0Z'%3E%3C/path%3E%3C/svg%3E");
}

.fs{
	font-size: 13px;
}
.symbol-50px{
	
}

.symbol-50px, .symbol-50px img, .symbol-50px span {
	object-fit: cover;
	background: #efefef;
	margin: 0px;
	margin-right: 5px;
    width: 36px;
    height: 36px;
}
.symbol-50px span {
	font-size: 11px;
}
.symbol-50px span {
    font-size: 11px;
    border: 1px solid #00a0fd;
    background: #d5f9ff;
    width: 34px;
    height: 34px;
    color: #006199;
    font-weight: bold;
	display: flex;
	justify-content: center;
	align-items: center;
}

.menu-btn {
    min-width: 115px;
	min-height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	line-height: 20px;
	background-color: #0050e0;
	align-items: center;
	box-sizing: border-box;
	color: #fff;
	display: inline-flex;
	font-size: 14px;
	font-weight: 500;
	height: inherit;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	transition: color .15s ease-in-out, background .15s ease-in-out, opacity .3s ease-in-out;
}

.menu-btn:hover {
	background-color: #06a19d;
}
.menu-btn:hover svg{
	fill: #fff;
}

.top-bar {
	box-sizing: border-box;
	font-size: 14px;
    margin-left: -15px;
    margin-right: -15px;
    padding: 5px 15px;
}

.system-address span {
	margin-left: 5px;
}

.unit-currency {
	margin-right: 12px;
	color: rgba(0, 26, 52, .6) !important;
}

.system-address-input {
	background-color: hsla(0, 0%, 100%, 0);
	color: #005bff;
	font-size: inherit;
	font-weight: inherit;
}

.tsBody400Small {
	margin: 0px 5px;
}

.i6d {
	align-items: center;
	display: flex;
	justify-content: space-between;
	position: relative;
}

.i6d .di8 {
	flex-grow: 1;
}


.z0u {
	background: #005bff;
	justify-content: flex-start;
	position: relative;
}

.uz1 {
	background: #fff;
	border: 2px solid #005bff;
	flex-grow: 1;
}

.uz1,
.z0u {
	border-radius: 8px;
	display: flex;
}

.uy7 {
	display: block;
	margin-left: 8px;
	margin-right: 2px;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

form>.u2z {
	height: 40px;
	width: 74px !important;
}

.a2430-a3 {
	min-width: auto;
	width: 100% !important;
}

.a2430-a4 {
	-webkit-touch-callout: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	display: block;
	font-size: inherit;
	font-weight: inherit;
	height: inherit;
	line-height: 0;
	margin: 0;
	padding: 0;
	position: relative;
	text-decoration: none;
	white-space: normal;
}

.a2430-a {
	display: inline-flex;
}

.a2430-f0 {
	min-width: 0;
	padding: 4px;
}

.a2430-e3 {
	min-height: auto !important;
}

.a2430-b1 {
	align-items: center;
	box-sizing: border-box;
	color: #fff;
	display: inline-flex;
	font-family: GTEestiPro, arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	height: inherit;
	justify-content: center;
	line-height: 18px;
	min-height: 32px;
	padding: 0 12px;
	text-align: center;
	transition: color .15s ease-in-out, background .15s ease-in-out, opacity .3s ease-in-out;
	z-index: 9999;
}

.a2430-b1:hover {
	background-color: #0050e0;
}

.a2430-e7 {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}


.px-15px {
	padding-top: 15px;
	padding-bottom: 15px;
}


.section-1 img {
	width: 100%;
}

.border-radius-img img {
	border-radius: 12px;
}


.product-item-img {
	align-content: center;
	align-items: center;
	border-radius: 12px;
	display: flex;
	justify-content: center;
	position: relative;
	background: #efefef;
	box-shadow: 0px 0px 1px #000;
	padding-top: 100%;
	overflow: hidden;
}

.product-item-img .product-wishlist {
	position: absolute;
	top: 10px;
	right: 10px;
}

.product-item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0px;
	left: 0px;
}

.chart-line-selled {
	margin: 5px 0px 8px;
}

.text-selled {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 2px;
	display: block;
}

.echart-selled {
	background: #b3bcc5;
	width: 100%;
}

.line-selled {
	border-radius: 2px;
	height: 4px;
	left: 0;
	max-width: 100%;
	position: absolute;
	top: 0;
	width: 0;
}

.chart-selled {
	border-radius: 2px;
	height: 4px;
	position: relative;
}





.product-6 .product-item {
	width: calc(100%/6);
}

.product-5 .product-item {
	width: calc(100%/5);
}

.b8j .bj8 {
	cursor: pointer;
}

.bj8 {
	height: 32px;
	max-width: 142px;
	-o-object-fit: contain;
	object-fit: contain;
	-o-object-position: left center;
	object-position: left center;
}

.tsHeadline500Medium {
	font-weight: 700;
	letter-spacing: .4px;
	margin: 0px 15px 0px 0px;
}




.text-name {
	color: #000;
	line-height: 1.4em;
	margin: 5px 0px;
}

.products .text-name {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.sale-price,
.text-price {
	line-height: 1.3em;
}

.sale-price,
.text-price {
	font-weight: 600;
}

.regular-price {
	font-weight: 400;
	color: #333333;
	position: relative;
}

.regular-price:after {
	content: "";
	width: 100%;
	height: 1px;
	background-color: #7e7e7e;
	position: absolute;
	top: calc(50% - 2px);
	left: 0px;
}

.sale-price,
.price-discount {
	color: #f91155;
	font-weight: 600;
}

.sale-price,
.regular-price {
	margin-right: 15px;
}

.sale-price {
	font-size: 20px;
	font-weight: 900;
}

.regular-price,
.price-discount,
.text-name {
	1font-size: 12px;
}

.hot-deal {
	position: absolute;
	left: 5px;
	bottom: 0px;
}

.hot-deal-item {
	display: flex;
	align-items: center;
	background-color: rgb(91, 81, 222);
	color: rgb(255, 255, 255);
	border-radius: 8px;
	padding: 6px 8px 2px;
	font-size: 14px;
	margin-bottom: 5px;
}

.hot-sale {
	background-image: linear-gradient(90deg, rgb(13, 89, 246) 0%, rgb(244, 20, 90) 100%);
	background-color: rgb(244, 20, 90);
	color: rgb(255, 255, 255);
}

.hot-sale .regular-price {
	margin-right: 15px;
}

.a2430-c {
	background-color: rgba(0, 150, 255, .08);
	color: #005bff;
}

.a2430-c:hover {
	background-color: rgba(0, 150, 255, .12);
	color: #0050e0;
}
.dash-counts{
    font-size: 20px;
}
.dash-counts span{
    position: absolute;
    top: -1px;
    right: -1px;
    border-radius: 0px 14px 0px 14px;
    padding: 0px 7px;
    font-size: 11px;
    line-height: 18px;
    background: #fdd2d2;
    border: 1px solid #890505;
}
.dark .dash-counts span{
    background: #202020;
    border: 1px solid #323232;
}
.text-small{
    font-size: 0.9em;
}

.text-price {
	min-width: 0px;
}

.hide,
.large-hide {
	display: none;
}

.flex-center {
	display: flex;
	align-items: center;
}

.bottom-border{
    border-bottom: 1px solid #e1e1e1;
}
.black-border{
    border-bottom: 1px solid #000;
}
.line-border{
    border-bottom: 1px solid currentColor;
}



.border{
    border: 1px solid #000;
}

.btn{
    border-radius: 5px;
    cursor: pointer;
    font-size: 15px;
    color: #000;
    background: #f1f1f1;
    font-weight: 600;
    border: 1px solid #cfcfcf;
    padding: 5px 10px;
}
.btn:hover{
    background: #009975;
    color: #fff;
    border: 1px solid #009975;
}
.btn.active{
    background: #009975;
    color: #fff;
    border: 1px solid #009975;
}
.btn-installment {
    font-size: 0.9em;
    position: relative;
    color: currentColor;
    display: flex;
    align-content: center;
}
.btn-installment-1{
    background-color: rgb(245, 241, 254);
}
.btn-installment-2{
    background-color: rgb(253, 245, 239);
}
.btn-installment-3{
    background-color: rgb(242, 255, 246);
}
.btn-installment-4{
    background-color: rgb(243 251 255);
}
.btn-installment-5 {
    background-color: rgb(243 231 240);
}
.btn-installment-6 {
    background-color: rgb(254 255 239);
}
.installment-overview{
    position: absolute;
    width: 74px;
    bottom: 0px;
    right: 0px;
}
.border.btn-installment-1{
	border-color: #503db6;
}
.border.btn-installment-2{
	border-color: #e17828;
}
.border.btn-installment-3{
	border-color: #00ab0d;
}
.border.btn-installment-4{
	border-color: #009da5;
}
.border.btn-installment-5{
	border-color: #e17828;
}
.border.btn-installment-6{
	border-color: #e17828;
}
.btn-installment-1 .dash-counts span {
    background: #503db6;
    border: 1px solid #503db6;
    color: #fff;
}
.btn-installment-3 .dash-counts span {
    background: #00ab0d;
    border: 1px solid #00ab0d;
    color: #fff;
}
.btn-installment-4 .dash-counts span {
    background: #009da5;
    border: 1px solid #009da5;
    color: #fff;
}

header {
    display: none;
}

table button{
    margin-top: 0px;
}

footer h3.branchs{ text-align: center; color: #074400;  }


header {
    display: block;
}
.extra-right-btn {
	display: none!important;
}
.header-left {
	padding-right: 0px!important;
}
footer .icon-20px{
	filter: blur(1px);
    object-fit: contain;
}

.ui-datepicker{
    z-index: 99;
}




@media(max-width: 1416px) {
	.container {
		max-width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media(max-width: 1200px){
	.wrapper.flex{
		display: block!important;
	}
	.menu-profile-main{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 15px;
	}
	.system-address, .account-btn{
		display: none;
	}
	.large-menu-list{
		overflow: auto;
	}
	.large-menu {
		flex-wrap: unset;
        width: max-content;
	}
	.header-contain {
		width: calc(100% - 180px);
	}
}

@media(max-width: 920px){
	.qr-container, .extra-right-btn {
		display: none!important;
	}
	.header-left {
		padding-right: 0px!important;
	}
}

@media(max-width: 768px) {
	.menu-profile-main{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		gap: 15px;
	}
	.action-btns{
	    display: none;    
	}
	header .navbar-control {
		display: block;
		position: unset;
		box-shadow: unset;
        max-width: 60px;
	}
	.logo img{ min-width: 186px; }
	.navbar-control .nav-link[data-bs-toggle="offcanvas"]{
		display: none!important;
	}
	.header-left {
		padding-right: 0px!important;
	}
	.footer-top > .grid{
		display: block!important;
	}
	footer .footer-logo{
		max-width: 203px;
	}
	.header {
        background: #fff!important;
	}
	.large-menu {
		flex-wrap: unset;
        width: max-content;
	}
	.logo {
        width: auto !important;
        height: 100%;
        max-width: unset;
        min-width: unset;
        display: flex !important;
    }
	.sidebar {
		min-width: unset;
	}
	.md-block{
		display: block!important;
	}
	
    .table-responsive .box-head{
        display: none; 
    }
    
	.container {
		max-width: 100%;
		padding-left: 10px;
		padding-right: 10px;
	}

	.medium-flex {
		display: flex;
	}

	.medium-flex-center {
		display: flex;
		align-items: center;
	}

	.medium-block {
		display: block;
	}
    .medium-left{
        text-align: left;
    }
	.medium-flex {
		display: flex;
	}

	.medium-hide {
		display: none;
	}

	.medium-grid-2 {
		grid-template-columns: 1fr 1fr;
	}

	.medium-grid-3 {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.medium-mt-0px {
		margin-top: 0px;
	}

	.a2430-c {
		background-color: rgba(0, 150, 255, .08);
		color: #005bff;
		font-size: 12px;
	}

	.sale-price {
		font-size: 1.2em;
		font-weight: 700;
	}

	h1 {
		font-size: 1.5em;
	}

	h2 {
		font-size: 1.3em;
	}
}

@media(max-width: 554px){
	.header-left .left, .left .menu-item, .large-menu{
		display: none;
	}
	.level-text{ display: none; }
	#menu-top-menu{
		justify-content: space-between;
		width: 100%;
	}
	.menu-profile-main {
        gap: 10px;
        flex-wrap: wrap;
    }
	.menu-profile-main > li {
		position: relative;
		width: 47%;
	}
	.p-avatar {
        max-width: 65px;
        min-width: 65px;
    }
}

@media(max-width: 540px){
	.p-avatar {
        margin: 0px;
    }
    .account-actions{
        display: none;
    }
}


