/*font-family: 'Nunito', sans-serif;
font-family: 'Playball', cursive;*/
@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Dancing+Script:wght@400;500;600&family=Forum&family=Great+Vibes&family=Handlee&family=Hurricane&family=Montserrat:wght@400;500;600;700&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&family=Alegreya+Sans:ital,wght@0,100;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,700;1,800;1,900&family=Arsenal:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant+Upright:wght@300;400;500;600;700&family=Philosopher&family=Prata&family=Satisfy&family=Style+Script&family=Trirong:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Yeseva+One&family=Lora:ital,wght@0,400..700;1,400..700&family=Quicksand:wght@300..700&display=swap');
@font-face {
    font-family: Roundhand;
    src: url("../../fonts/SnellRoundhand-BlackScript.otf") format("opentype");
}

@font-face {
    font-family: Roundhand;
    font-weight: bold;
    src: url("../../fonts/SnellRoundhand-BoldScript.otf") format("opentype");
}
/*:root {
  --colorB: #D5A948;
  --colorA: #97C0B2;
}*/
:root {
	--color-blue: #00ABE9;
	--color-pink: #eb008b;
	--color-gray: #C8C8C8;
	--color-steel-blue: #3A6172;
	--colorA: #C8C8C8;
	--colorB: #3A6172;
	--colorC: #606060;
	--colorD: #FFFFFF;
	--font-heading: 'Playball';
	--font-heading-size: 36px;
	--font-body: 'Nunito';
}
* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}
@font-face {
  font-family: 'Ananda';
  src: URL('../../fonts/Ananda.ttf') format('truetype');
}
p {
	font-size: 1.08rem;
}
a {
	text-decoration: none;
	color: var(--colorA);
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.float-right {
	float: right;
}
h1 {
	margin-block-start: 0em;
    margin-block-end: 0em;
    font-weight: normal;
}
h2 {
	margin-block-start: 0em;
    margin-block-end: 0em;
    font-weight: normal;
}
h3 {
	margin-block-start: 0em;
    margin-block-end: 0em;
    font-weight: normal;
}
h4 {
	margin-block-start: 0em;
    margin-block-end: 0em;
    font-weight: normal;
}
h5 {
	margin-block-start: 0em;
    margin-block-end: 0em;
    font-weight: normal;
}
p {
	margin-block-start: 0px;
	margin-block-end: 0px;
	margin-bottom: 10px;
}
ul {
	list-style: none;
	padding-left: 0px;
	margin-block-start: 0em;
    margin-block-end: 0em;
}
a {
/*	color: var(--colorC);*/
}
@-moz-keyframes spin { 
  100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
  100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
  100% { 
      -webkit-transform: rotate(360deg); 
      transform:rotate(360deg); 
  } 
}
.pbt-0 {
	padding-bottom: 0px !important;
}
.pbt-10 {
	padding-bottom: 10px !important;
}
.pbt-20 {
	padding-bottom: 20px !important;
}
.pbt-30 {
	padding-bottom: 30px !important;
}
.pt-200 {
	padding-top: 200px !important;
}
/*.img {
	height: 180px;
	width: 180px;
	overflow: hidden;
	border-radius: 10px;
	border: 2px solid var(--colorA);
}*/
.img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bg-container,
.bg-cover
{
	background-size: cover;
/*	background-color: var(--colorD);*/
}
span[class^="icon-"]::before,
span[class*=" icon-"]::before
{
/*	color: var(--colorB);*/
}
.showmore {
	color: var(--colorB);
/*	padding-left: 3px;*/
}
button.showmore,
button.showless
{
	display: block;
	background-color: transparent;
	height: 36px;
	line-height: 12px;
	width: 40%;
	font-size: 1rem;
    font-weight: 500;
    color: var(--colorB);
    text-align: center;
    margin: 10px auto;
    border: none;
/*    padding-left: 0px;*/
}
button.showless {
	line-height: 20px;
}
button.showmore span,
button.showless span
{
	display: inline-block;
    width: 100%;
    font-size: 0.26rem;
}
button.showless span {
	font-size: 0.6rem;
}
button.showmore span::before,
button.showless span::before
{
	color: var(--colorB);
}
button.btn-full {
	height: 40px;
	line-height: 40px;
	width: 100%;
	border-radius: 6px;
	font-size: 1.1rem;
	color: var(--colorD);
	text-transform: uppercase;
	text-align: center;
	background-color: var(--colorB);
	border: none;
	font-family: var(--font-body), sans-serif;
}
button.btn-full a {
	display: inline-block;
	width: 100%;
	color: var(--colorD);
}
input {
	color: var(--colorC);
}
form input {
	height: 40px;
	line-height: 40px;
	width: 100%;
	border-radius: 20px;
	border: 1px solid var(--colorA);
	margin-bottom: 20px;
	color: var(--colorB);
	padding: 0px 20px;
}
input::placeholder,
select,
select option,
textarea,
textarea::placeholder
{
	font-family: var(--font-body), sans-serif;
}
form button.btn-submit {
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	width: 120px;
	font-size: 1.05rem;
	color: var(--colorD);
	text-align: center;
	background-color: var(--colorB);
	border: none;
}

@keyframes fadeIn {
	0%{opacity:0;background:#000}
	90%{opacity:0}
	100%{opacity:1;background:#fff}
}
table {
	border: 1px solid var(--colorA);
	border-collapse:collapse;
	padding:5px;
}
table th {
	border:1px solid var(--colorA);
	padding:5px;
/*	background: #f0f0f0;*/
/*	color: #313030;*/
}
table td {
	border:1px solid var(--colorA);
	text-align: center;
	padding: 5px;
/*	background: #ffffff;*/
/*	color: #313030;*/
}
.blur,
[data-role="blur"]
{
	filter: blur(4px);
}
.promo-vnews {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	line-height: 30px;
	width: 100%;
	position: fixed;
  left: 0px;
  bottom: 0px;
  background-color: #e2911b;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font-heading), cursive;
  padding: 0px 10px;
}
.promo-vnews img {
	/*position: relative;
  top: 5px;*/
	height: 20px;
	width: auto;
	margin-right: 8px;
	/*float: left;
	margin-right: 6px;*/
}
.promo-vnews a span {
	display: inline-block;
	height: 20px;
	line-height: 20px;
	padding: 0px 10px;
	text-align: center;
	border-radius: 12px;
	background-color: #ffffff;
	font-size: 0.55rem;
	margin-left: 8px;
  /*position: relative;
  top: 5px;*/
}
.promo-vnews a span::before {
	color: #e2911b;
}
a.vnailnews {
  display: inline-block;
  width: 125px;
  height: 28px;
  line-height: 26px;
  padding: 0px 0px 0px 6px;
  border-radius: 0px 14px 14px 0px;
  border: 1px solid var(--colorA);
  border-left: 0px;
  background-color: transparent;
  color: var(--colorA);
  position: fixed;
  left: 0px;
  bottom: 125px;
  z-index: 999;
  font-size: 0.95rem;
}
a.vnailnews img {
  width: 28px;
  border-radius: 50%;
  background-color: #ffffff;
  position: relative;
  top: -1px;
  right: -1px;
  float: right;
/*  margin-right: 8px;*/
}
a.back-home {
  display: inline-block;
  width: 125px;
  height: 28px;
	line-height: 28px;
	padding: 0px 0px 0px 6px;
	border-radius: 0px 14px 14px 0px;
  background-color: #e2911b;
  color: #ffffff;
  position: fixed;
  left: 0px;
  bottom: 80px;
  z-index: 999;
  font-size: 0.95rem;
}
a.back-home.hidden {
	display: none;
}
a.back-home img {
  width: 28px;
  padding: 5px;
	background-color: #ffffff;
	border-radius: 50%;
	position: relative;
	top: 0px;
	float: right;
/*	margin-right: 8px;*/
}
html,
body,
.mobile-web
{
	min-height: 100%;
    width: 100%;
    margin: 0px;
    font-size: 1.1rem;
    font-family: var(--font-body), sans-serif;
}
.mobile-web.register-page,
.register-page .wrap-content,
.register-page .bg-container
{
	height: 100%;
}
.register-page .bg-container {
	height: 100%;
}
.mobile-web >.main {
    max-width: 500px;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px auto;
/*    overflow: hidden;*/
    color: var(--colorC);
}
.notify-alert {
	text-align: center;
	padding: 10px;
	font-size: 1rem;
	font-family: var(--font-heading), sans-serif;
	background-color: var(--colorB);
	color: var(--colorD);
}
.notifyjs-corner {
	left: 0px !important;
	margin: 0px !important;
	width: 100%;
}
.notifyjs-corner .notifyjs-wrapper,
.notifyjs-corner .notifyjs-container
{
	margin: 0px !important;
}
.notifyjs-happyblue-base {
	padding: 10px 0px !important;
	text-align: center;
	font-family: var(--font-heading), sans-serif;
	font-size: 0.95rem;
}
.notifyjs-happyblue-superblue {
	background-color: var(--colorB) !important;
	background-image: none !important;
	color: #ffffff !important;
}
.notifyjs-happyblue-superblue i {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	width: 30px;
	text-align: center;
	font-size: 0.68rem;
	background-color: #ffffff;
	border-radius: 50%;
	margin-right: 10px;
}
.notifyjs-happyblue-superblue i::before {
	color: var(--colorB);
}
.box {
	border-radius: 6px;
	border: 1px solid var(--colorA);
	margin-bottom: 20px;
}
.box >.title {
	display: inline-block;
	height: 48px;
	line-height: 48px;
	width: 100%;
	text-align: center;
	font-weight: 600;
	font-size: 1.4rem;
	background-color: var(--colorA);
	border-radius: 5px 5px 0px 0px;
}
.box >.title span {
	font-size: 1.3rem;
	font-weight: normal;
	margin-right: 5px;
}
.box >.title span::before {
	color: var(--colorC);
}
.box .box-content {
	padding: 10px;
	text-align: center;
	font-weight: 500;
	font-size: 1.29rem;
}
.box .box-content p {
	white-space: pre-line;
    margin-bottom: 0px;
}
.custom-button {
	text-align: center;
	padding: 20px 0px;
}
.custom-button a {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	padding: 0px 19px;
	border-radius: 20px;
	background-color: var(--colorB);
	color: var(--colorD);
	font-weight: bold;
}
.overhidden,
.overhidden .wrap-content
{
	overflow: hidden !important;
}
.main >.header-top,
header .header-top
{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 109;
	height: 36px;
  line-height: 36px;
  background-color: var(--colorA);
  color: var(--colorD);
  text-transform: uppercase;
  text-align: center;
  font-size: 0.8rem;
}
.main >.header-top.title,
header .header-top.title
{
	font-size: 1.05rem;
}
.main >.header-top.product-title {
	/*height: 42px;
	line-height: 42px;*/
}
.main >.header-top.product-title h1 {
	font-size: 1.05rem;
	text-transform: capitalize;
}
header .header-top span.icon-search {
	position: absolute;
	top: 10px;
  left: 15px;
  font-size: 0.9rem;
}
header .header-top b {
	font-weight: normal;
}
.main >.header-top.product-title h1 >span {
	display: inline-block;
	height: 25px;
	line-height: 25px;
	width: 25px;
	text-align: center;
/*	background-color: rgba(255, 255, 255, 1);*/
	float: left;
	border-radius: 50%;
	font-size: 0.65rem;
  position: absolute;
  left: 15px;
  top: 16px;
}
.main >.header-top.product-title h1 >span::before,
header .header-top span.icon-search::before
{
	color: var(--colorD);
}
.main >.header-top.product-title h1 >span.icon-search {
	left: unset;
	right: 15px;
	font-size: 1rem;
}
header .header-top .second-menu {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  top: 5px;
  right: 15px;
}
header .header-top .second-menu.change {
	top: 8px;
}
header .header-top .second-menu >div {
	background-color: var(--colorD);
	width: 22px;
  height: 2px;
}
header .header-top .second-menu.change .bar1 {
	width: 18px;
	transform: translate(0, 4px) rotate(-45deg);
	background-color: var(--colorB);
}
header .header-top .second-menu.change .bar3 {
	width: 18px;
	background-color: var(--colorB);
}
.overflow-hidden,
.overflow-hidden .mobile-web,
.overflow-hidden .mobile-web >.main,
.overflow-hidden .wrap-content
{
	overflow: hidden !important;
	touch-action: none;
}
.hidden { display: none; }
.main .notify {
	position: fixed;
	top: 36px;
	left: 0px;
	right: 0px;
	z-index: 99;
	height: 36px;
  line-height: 36px;
  background-color: var(--colorB);
  color: var(--colorD);
  text-align: center;
  font-size: 0.8rem;
}
.main >.call-action {
	height: 64px;
	background-color: var(--colorB);
	color: var(--colorD);
	position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
}
.main >.call-action >span {
	display: inline-block;
	height: 64px;
	line-height: 64px;
	width: 50px;
	text-align: center;
	float: left;
	font-size: 1.3rem;
}
.main >.call-action >span::before {
	color: var(--colorD);
}
.main >.call-action .content {
	width: calc(100% - 165px);
	height: 64px;
	padding-top: 10px;
	float: left;
}
.main >.call-action .content >span.title {
	display: inline-block;
	line-height: 20px;
	width: 100%;
	font-size: 1.1rem;
}
.main >.call-action >.float-right {
	padding-top: 13px;
	padding-right: 15px;
}
.main >.call-action >.float-right a {
	display: inline-block;
	width: 100px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: bold;
	background-color: var(--colorD);
	color: var(--colorB);
	border-radius: 18px;
}
.main >header {
    /*height: 60px;
    line-height: 60px;
    padding: 0px 25px;
    background-color: var(--colorD);
    display: inline-block;
    width: 100%;
    font-family: var(--font-heading), cursive;
    color: #ffffff;
    font-size: 1.4rem;*/
    /*position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;*/
}
.main.has-callaction >header {
	top: 64px;
}
.main >header.small-header {
	height: 60px;
    line-height: 60px;
}
.main >header span.icon-back-arrow {
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	background-color: #C7DAD4;
	font-size: 1rem;
	position: absolute;
	top: 9px;
	left: 20px;
}
.main >header img {
	max-height: 40px;
	margin-top: 10px;
/*	vertical-align: middle;*/
}
.main >header.small-header img {
	max-height: 45px;
}
.main >header.small-header .second-menu {
	top: 17px;
}
.search-input .second-menu {
	top: 6px;
	right: -5px;
	width: 40px;
}
.search-input .second-menu.change {
	top: 10px;
}
.main >header .site-lang {
	height: 32px;
	line-height: 32px;
	background-color: var(--colorB);
	color: var(--colorD);
	font-size: 0.9rem;
	font-weight: bold;
	padding: 0px 20px;
	margin-left: -20px;
    width: calc(100% + 40px);
    font-family: var(--font-body);
}
.main >header.small-header .site-lang {
	display: none;
}
.main >header .site-lang .select-lang {
	float: right;
	width: 160px;
	text-align: center;
	position: relative;
}
.main >header .site-lang .select-lang >.active {
	position: relative;
}
.main >header .site-lang .select-lang >.active >img {
	position: absolute;
	width: 26px;
	top: 3px;
	left: 0px;
}
.main >header .site-lang .select-lang >.active >span {
	font-size: 0.65rem;
	position: absolute;
	top: 11px;
	right: 0px;
}
.main >header .site-lang .select-lang ul {
	position: absolute;
	top: 100%;
	left: -6px;
	right: -20px;
	z-index: 999;
	display: none;
}
.main >header .site-lang .select-lang ul li {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	width: 100%;
	border-radius: 0px 0px 6px 6px;
	background-color: color-mix(in srgb, var(--colorA), transparent 66%);
/*	background-color: var(--colorA);*/
	color: var(--colorC);
	text-align: center;
	position: relative;
	display: none;
}
.main >header .site-lang .select-lang ul li.active {
	display: block;
}
.main >header .site-lang .select-lang ul li img {
	width: 26px;
	position: absolute;
	top: 7px;
	left: 6px;
}
.main >header .site-lang .select-lang .active >span::before {
	color: var(--colorD);
}
.main >header span.icon-cart {
	float: right;
	font-size: 1.4rem;
  position: relative;
  top: 19px;
  margin-right: 20px;
}
.main >header span.icon-cart::before {
	color: var(--colorA);
}
.main >header span.icon-cart.active::before {
	color: var(--colorB);
}
.second-menu {
  display: inline-block;
  cursor: pointer;
  float: right;
  position: relative;
  top: 18px;
}

.second-menu .bar1,
.second-menu .bar2,
.second-menu .bar3
{
  width: 25px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--colorA);
  margin: 5px 0;
  transition: 0.4s;
}
.main >header.small-header .second-menu .bar1,
.main >header.small-header .second-menu .bar2,
.main >header.small-header .second-menu .bar3
{
	width: 26px;
	height: 3px;
	margin: 5px 0;
}
.second-menu.change .bar1 {
  transform: translate(0, 5px) rotate(-45deg);
  width: 20px;
  height: 2px;
}
.search-input .second-menu.change .bar1,
.search-input .second-menu.change .bar2,
.search-input .second-menu.change .bar3
{
/*	transform: unset;*/
	background-color: var(--colorB);
/*	opacity: 1;*/
}
.main >header.small-header .second-menu.change .bar1 {
	transform: translate(0, 6px) rotate(-45deg);
}
.second-menu.change .bar2 {opacity: 0;}

.second-menu.change .bar3 {
  transform: translate(0, -10px) rotate(45deg);
  width: 20px;
  height: 2px;
}
.mobile-menu {
	height: calc(100% - 144px);
	position: fixed;
	top: -100%;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 9999;
	background-color: rgba(0, 0, 0, 0.8);
/*	text-align: center;*/
/*	display: none;*/
	overflow-y: auto;
/*	overscroll-behavior: contain;*/
	transition: top 0.3s ease 0s;
}
.mobile-menu.list-intro {
	height: calc(100% - 90px) !important;
	background-color: rgba(0, 0, 0, 0.9);
}
.main >header.small-header .mobile-menu {
	top: 60px;
}
.mobile-menu.active {
/*	display: block;*/
	top: 90px;
	overscroll-behavior: contain;
}
.mobile-menu.list-intro >ul {
	padding-top: 20px;
	padding-left: 15px;
	padding-right: 15px;
}
.mobile-menu >ul {
/*	padding-top: 30px;*/
	padding-top: 20px;
	padding-left: 50px;
/*	border-top: 2px solid var(--colorD);*/
}
.mobile-menu.list-intro >ul li {
	display: flex;
	flex-direction: column;
	height: unset;
    line-height: unset;
	margin-bottom: 15px;
}
.mobile-menu.list-intro >ul li.align-center {
	align-items: center;
}
.mobile-menu.list-intro >ul li h5 {
	font-size: 1.1rem;
	color: var(--colorA);
	padding-bottom: 4px;
}
.mobile-menu.list-intro >ul li h5 span {
	width: 30px;
}
.mobile-menu.list-intro >ul li h5 span.icon-arrow-right1,
.mobile-menu.list-intro >ul li p span.icon-arrow-right1
{
	font-size: 8px;
	display: inline-block;
	width: 25px;
	height: 14px;
	line-height: 12px;
	border-radius: 7px;
	border: 1px solid var(--colorA);
	text-align: center;
	color: var(--colorA);
	top: -3px;
	margin-right: 5px;
}
.mobile-menu.list-intro >ul li h5 span::before {
	color: var(--colorA);
}
.mobile-menu.list-intro >ul li small {
	font-size: 0.8rem;
	font-style: italic;
	padding-bottom: 4px;
}
.mobile-menu.list-intro >ul li p {
	font-size: 1rem;
	line-height: 24px;
	margin-bottom: 0px;
}
.mobile-menu.list-intro >ul li.align-center p
{
	text-align: justify;
}
.mobile-menu.list-intro >ul li p b {
	color: var(--colorA);
	font-weight: 500;
}
.mobile-menu.list-intro >ul li p >span {
	width: unset;
	top: 1px;
	margin-left: 2px;
	margin-right: 2px;
}
.mobile-menu.list-intro >ul li p >span >span {
	position: unset;
	width: unset;
}
.mobile-menu.list-intro >ul li p >span >span::before {
	color: #ffffff;
}
.mobile-menu.list-intro >ul li p >span::before,
.mobile-menu.list-intro >ul li p span.path1::before
{
	color: var(--colorA);
}
.mobile-menu.list-intro >ul li button {
	border: none;
	border-radius: 20px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	padding: 0px 25px;
	font-size: 0.95rem;
	font-weight: 500;
	color: #ffffff;
	background-color: var(--colorB);
	margin-top: 25px;
}
.mobile-menu >ul li {
	font-family: var(--font-body), sans-serif;
	color: var(--colorD);
	display: inline-block;
	height: 60px;
	line-height: 60px;
	width: 100%;
	font-size: 1.4rem;
/*	padding: 10px;*/
/*	border-bottom: 2px solid var(--colorD);*/
}
.mobile-menu >ul li span {
	position: relative;
	top: 2px;
	width: 35px;
  display: inline-block;
}
.mobile-menu >ul li span.icon-minfo {
	top: 0px;
	font-size: 1.45rem;
}
.mobile-menu >ul li a {
	color: var(--colorD);
}
.mobile-menu >ul li a >span::before {
	color: var(--colorA);
}
.mobile-menu >ul li.active a >span::before {
	color: var(--colorB);
}
.mobile-menu button {
	/*border: none;
	background-color: transparent;
	padding: 0px;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 50px;
	margin-left: auto;
  margin-right: auto;
	color: var(--colorB);
	text-align: center;*/
}
.mobile-menu button span {
	/*display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	background-color: var(--colorD);
	border: 1px solid var(--colorB);
	text-align: center;
	margin-bottom: 5px;
	font-size: 0.8rem;*/
}
.mobile-menu .menu-content ul,
.single-article .content ul.faq
{
	padding: 30px 20px;
}
.single-article .content ul.faq {
	padding: 80px 0px;
}
.mobile-menu .menu-content ul li,
.single-article .content ul.faq li
{
	width: 100%;
  margin-bottom: 20px;
  color: #ffffff;
}
.single-article .content ul.faq li {
	color: unset;
}
.mobile-menu .menu-content ul.services li a{
	color: var(--colorD);
}
.mobile-menu .menu-content ul li h3,
.single-article .content ul.faq li h3
{
  font-size: 1.05rem;
  line-height: 24px;
  padding-bottom: 10px;
}
.mobile-menu .menu-content ul li h3 >span,
.single-article .content ul.faq li h3 >span
{
  font-size: 0.8rem;
  margin-right: 10px;
}
.mobile-menu .menu-content ul li.active h3 >span,
.single-article .content ul.faq li.active h3 >span
{
  display: inline-block;
  transform: rotate(90deg);
}
.mobile-menu .menu-content ul li h3 >span::before,
.single-article .content ul.faq li h3 >span::before
{
	color: var(--colorA);
}
.mobile-menu .menu-content ul li p,
.single-article .content ul.faq li p
{
  font-size: 0.95rem;
  line-height: 24px;
  text-align: justify;
  display: none;
}
.mobile-menu .menu-content ul li.active p,
.single-article .content ul.faq li.active p
{
  display: block;
  white-space: pre-line;
}
.mobile-menu .menu-content ul.services >li >a {
	font-size: 1.1rem;
}
.mobile-menu .menu-content ul.services >li >a >span {
	font-size: 0.85rem;
  display: inline-block;
  width: 25px;
}
.mobile-menu .menu-content ul.services >li >a >span::before {
	color: var(--colorA);
}
.mobile-menu .menu-content ul.services >li ul.sub {
	display: none;
}
.mobile-menu .menu-content ul.services >li ul.sub li span.name {
	font-size: 1rem;
}
.mobile-menu .menu-content ul.services >li.active >a {
	color: var(--colorA);
}
.mobile-menu .menu-content ul.services >li.active >a >span {
	transform: rotate(90deg);
	position: relative;
	top: 5px;
}
.mobile-menu .menu-content ul.services >li.active ul.sub {
	display: block;
	padding-right: 0px;
}
.mobile-menu .menu-content ul.services li ul.sub >li.active span.name {
	display: inline-block;
	height: 32px;
	line-height: 32px;
	border-radius: 3px;
	width: calc(100% + 10px);
	background-color: rgba(255, 255, 255, 0.3);
	padding: 0px 10px;
	margin-left: -10px;
}
.mobile-menu .menu-content ul.services li ul.sub >li.active >a {
	float: right;
	font-size: 0.8rem;
	position: relative;
  top: -23px;
  right: 10px;
}
.mobile-menu .menu-content ul.services li ul.sub >li.active p {
	white-space: unset;
	padding-top: 10px;
}
.mobile-menu .menu-content .content {
	padding: 20px !important;
	font-size: 1.02rem !important;
	color: var(--colorD);
	line-height: 24px;
	text-align: justify;
}
.mobile-menu .menu-content .content ul {
	list-style: disc;
	padding: 0px 0px 0px 40px;
}
.mobile-menu a.schedule-call {
	margin-top: 10px;
	width: 200px;
	display: inline-block;
	height: 40px;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;
  font-size: 1rem;
  color: #ffffff;
  background-color: var(--colorA);
  position: relative;
  margin-left: calc(50% - 100px);
}
.mobile-menu a.schedule-call >span {
	position: absolute;
	top: 14px;
	left: 10px;
	font-size: 0.8rem;
}
.mobile-menu a.schedule-call >span::before {
	color: #ffffff;
}
.mobile-menu .social {
	width: 200px;
	margin-left: calc(50% - 100px);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-top: 10px;
}
.mobile-menu .social a {
	font-size: 2.2rem;
	text-align: center;
}
.mobile-menu .social a span .path1:before {
	color: transparent;
}
.mobile-menu .menu-content.schedule-call {
	height: 100%;
	background-color: #ffffff;
	overflow-y: auto;
	overscroll-behavior: contain;
/*	padding-bottom: 30px;*/
}
.mobile-menu .menu-content.schedule-call .type-phone {
	height: 100%;
	width: 100%;
	padding-top: 15%;
	padding-left: 20px;
	padding-right: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
/*	justify-content: center;*/
	background-color: var(--colorA);
	color: #ffffff;
}
.mobile-menu .menu-content.schedule-call .type-phone .phone-exits {
	display: inline-block;
	width: 220px;
	height: 40px;
	line-height: 40px;
	background-color: #ffffff;
	text-align: center;
	border-radius: 3px;
	color: var(--colorA);
	font-size: 1.1rem;
	position: relative;
}
.mobile-menu .menu-content.schedule-call .type-phone .phone-exits >i {
	font-style: normal;
	display: inline-block;
	height: 40px;
}
.mobile-menu .menu-content.schedule-call .type-phone .phone-exits >span {
	position: absolute;
	top: 0px;
	left: 0px;
	display: inline-block;
	height: 40px;
	line-height: 40px;
	width: 40px;
	text-align: center;
	font-size: 0.8rem;
}
.mobile-menu .menu-content.schedule-call .type-phone .phone-exits >span::before {
	color: var(--colorA);
}
.mobile-menu .menu-content.schedule-call .type-phone .phone-exits >span.icon-x {
	left: unset;
	right: 0px;
	font-size: 0.65rem;
}
.mobile-menu .menu-content.schedule-call .type-phone button.next {
	display: inline-block;
	height: 36px;
	line-height: 36px;
	width: 120px;
	text-align: center;
	background-color: #ffffff;
	color: var(--colorA);
	font-size: 1rem;
	position: relative;
	border-radius: 18px;
	border: none;
	margin-top: 100px;
}
.mobile-menu .menu-content.schedule-call .type-phone button.next span {
	font-size: 0.68rem;
	display: inline-block;
	height: 36px;
	line-height: 36px;
	position: absolute;
	top: 0px;
	right: 10px;
}
.mobile-menu .menu-content.schedule-call .type-phone button.next.back span {
	font-size: 0.75rem;
	right: unset;
	left: 10px;
}
.mobile-menu .menu-content.schedule-call .type-phone button.next.back span::before {
	color: var(--colorA);
}
.mobile-menu .menu-content.schedule-call .type-phone p {
	font-size: 1.1rem;
	text-align: center;
  margin-bottom: 40px;
}
.mobile-menu .menu-content.schedule-call .type-phone .input {
	position: relative;
	display: flex;
	height: 44px;
	width: 100%;
	align-items: center;
	background-color: #ffffff;
	border-radius: 22px;
}
.mobile-menu .menu-content.schedule-call .type-phone .input >span,
.product-cart .form.login .input >span
{
	position: absolute;
	top: 0px;
	left: 0px;
	display: flex;
	height: 44px;
	align-items: center;
	width: 55px;
	padding-left: 15px;
	color: var(--colorC);
}
.mobile-menu .menu-content.schedule-call .type-phone .input >span img,
.product-cart .form.login .input >span img
{
	height: 19px !important;
	width: auto;
	margin-right: 4px;
	margin-left: unset;
    margin-bottom: unset;
}
.mobile-menu .menu-content.schedule-call .type-phone input {
	width: 100%;
	height: 44px;
	border-radius: 22px;
	border: none;
	text-align: center;
	font-size: 1.25rem;
	font-family: var(--font-body), sans-serif;
	letter-spacing: 1px;
}
.mobile-menu .menu-content.schedule-call .type-phone input:focus,
.mobile-menu .menu-content.schedule-call .type-phone input:focus-visible
{
	outline: none;
}
.mobile-menu .menu-content.schedule-call .type-phone input::placeholder
{
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.mobile-menu .menu-content.schedule-call .type-phone input:focus::placeholder {
	color: transparent;
}
.mobile-menu .schedule-call .schedule-detail {
	padding: 0px 15px 15px 15px;
}
.mobile-menu .schedule-call .schedule-detail.complete {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.mobile-menu .schedule-call .schedule-detail h3,
.mobile-menu .menu-content.schedule-call .type-phone h3
{
	font-size: 1.1rem;
	text-align: center;
/*	color: #ffffff;*/
	width: 100%;
	padding-top: 10px;
	padding-bottom: 15px;
}
.mobile-menu .schedule-call .schedule-detail h3 {
	padding-bottom: 20px;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged {
	overflow: hidden;
	margin-bottom: 30px;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .input-phone {
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	width: calc(100% - 150px);
	margin-left: 75px;
	background-color: var(--colorA);
	color: #ffffff;
	text-align: center;
	font-size: 1.4rem;
	letter-spacing: 1px;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .input-phone.edit-phone {
	background-color: transparent;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .input-phone.edit-phone input {
	height: 40px;
	line-height: 38px;
	width: 100%;
	border-radius: 20px;
	border: 1px solid #eeeeee;
	text-align: center;
	padding: 0px 5px;
	font-size: 1.4rem;
	position: relative;
  top: -1px;
  letter-spacing: 3px;
}
.mobile-menu .menu-content.schedule-call .type-phone .customer {
	padding-bottom: 30px;
}
.mobile-menu .schedule-call .schedule-detail .customer span.avatar,
.mobile-menu .menu-content.schedule-call .type-phone .customer span.avatar
{
	display: inline-block;
	width: 80px;
	height: 80px;
	line-height: 80px;
	border-radius: 50%;
	background-color: #f4f4f4;
	text-align: center;
	font-size: 1.4rem;
	overflow: hidden;
}
.mobile-menu .schedule-call .schedule-detail .customer span.avatar span::before,
.mobile-menu .menu-content.schedule-call .type-phone .customer span.avatar span::before
{
	color: var(--colorA);
}
.mobile-menu .schedule-call .schedule-detail .customer span.avatar img,
.mobile-menu .menu-content.schedule-call .type-phone .customer span.avatar img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .left {
	width: 48px;
	height: 48px;
	float: left;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .left img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .right {
	float: right;
	width: calc(100% - 48px);
	height: 48px;
	padding-left: 10px;
	position: relative;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .right span.name {
	display: inline-block;
	height: 26px;
	width: 100%;
	color: #ffffff;
	font-size: 1.1rem;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .right small {
	font-size: 1rem;
	display: inline-block;
	height: 22px;
	width: 100%;
	color: #ffffff;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .right span.icon-edit {
	position: absolute;
  top: 6px;
  right: 0px;
  font-size: 0.8rem;
}
.mobile-menu .schedule-call .schedule-detail .phone.logged .right span.icon-edit::before {
	color: var(--colorA);
}
.schedule-detail .select-issues {
	padding-top: 10px;
  padding-bottom: 20px;
  position: relative;
}
.schedule-detail .select-issues .grid-button {
	display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 35px; 
  justify-items: center;
  align-items: center;
  margin: 0 auto;
  max-width: 350px;
}
.schedule-detail .select-issues .grid-button button {
	background-color: transparent;
	border: none;
	display: flex;
	flex-direction: column; 
	align-items: center;
	text-align: center;
	font-size: 0.85rem;
	color: var(--colorC);
	padding: 0px;
}
.schedule-detail .select-issues .grid-button button span {
	display: inline-block;
	width: 65px;
	height: 65px;
	line-height: 65px;
	border-radius: 50%;
	background-color: #f4f4f4;
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 5px;
}
.schedule-detail .select-issues .grid-button button span::before {
	color: var(--colorA);
}
.schedule-detail .select-issues .input {
  position: relative;
  display: inline-block;
  height: 34px;
  line-height: 32px;
  width: 100%;
  border: 1px solid var(--colorB);
  border-radius: 3px;
  font-size: 0.9rem;
  padding: 0px 10px;
  padding-left: 30px;
  background-color: #ffffff;
}
.schedule-detail .select-issues .input span {
  position: absolute;
  top: 9px;
  left: 8px;
  font-size: 1rem;
}
.schedule-detail .select-issues .input span::before {
  color: var(--colorB);
}
.schedule-detail .select-issues .input input {
  display: inline-block;
  height: 32px;
  width: 100%;
  padding: 5px 10px;
  color: var(--colorB);
  border: none;
  position: relative;
  top: -2px;
}
.schedule-detail .select-issues .input i {
  position: absolute;
  top: 12px;
  right: 10px;
  font-size: 0.6rem;
}
.schedule-detail .select-issues .input i::before {
  color: var(--colorB);
}
.schedule-detail .select-issues ul {
	padding: 10px;
	border-radius: 6px;
	border: 1px solid #dddddd;
	background-color: #ffffff;
	position: absolute;
	top: 42px;
	left: 0px;
	right: 0px;
	z-index: 999;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.schedule-detail .select-issues ul li {
	display: inline-block;
	width: 100%;
	height: 30px;
	line-height: 30px;
	margin-bottom: 5px;
	font-size: 0.8rem;
  color: #555555;
}
.schedule-detail .select-issues ul li >span {
	display: inline-block;
	width: 28px;
	font-size: 1rem;
}
.schedule-detail .select-issues ul li >span::before {
	color: var(--colorA);
}
.schedule-detail .select-schedule {
	padding-top: 10px;
/*	color: #ffffff;*/
}
.schedule-detail .select-schedule h4 {
	font-size: 1rem;
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
}
.schedule-detail .select-schedule .grid-input {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 20px;
}
.schedule-detail .select-schedule .grid-input >div {
	height: 34px;
	line-height: 34px;
	width: 100%;
	display: table;
	text-align: center;
}
.schedule-detail .select-schedule .grid-input >div small {
	/*float: left;
	opacity: 0.8;*/
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 90%;
	padding-bottom: 6px;
}
.schedule-detail .select-schedule .grid-input >div {
	padding: 10px 50px;
}
.schedule-detail .select-schedule .grid-input >div .input {
/*	float: right;*/
/*	width: 160px;*/
	width: 100%;
	position: relative;
}
.schedule-detail .select-schedule .grid-input >div .input i.icon-triangle-down {
	display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  font-size: 4px;
  position: absolute;
  left: 5px;
  bottom: 10px;
  border-radius: 50%;
  background-color: transparent;
}
.schedule-detail .select-schedule .grid-input >div .input i.icon-triangle-down::before {
	color: var(--colorA);
}
.schedule-detail .select-schedule .grid-input >div .input.select-box {
	display: inline-block;
	height: 62px;
	line-height: 55px;
	width: 125px;
	text-align: center;
	font-size: 1.1rem;
	border: 1px solid #dddddd;
	border-radius: 4px;
	box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 4px 0px;
	position: relative;
}
.schedule-detail .select-schedule .grid-input >div .input.select-box >i {
	display: inline-block;
  height: 25px;
  line-height: 25px;
  width: 30px;
  text-align: center;
  font-size: 5px;
  position: absolute;
  bottom: 0px;
  left: calc(50% - 15px);
  border-radius: 50%;
  background-color: transparent;
}
.schedule-detail .select-schedule .grid-input >div .input.select-box >i.top {
	top: 0px;
  bottom: unset;
  transform: rotate(180deg);
  display: none;
}
.schedule-detail .select-schedule .grid-input >div .input.select-box >i::before {
	color: var(--colorA);
}
.schedule-detail .select-schedule .grid-input >div .input.select-box >span {
	position: unset;
}
.schedule-detail .select-schedule .grid-input .input input,
.schedule-detail .select-schedule .grid-input .input select
{
  height: 46px;
  line-height: 44px;
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 4px;
  padding: 0px 15px;
  font-size: 0.9rem;
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 4px 0px;
}
.schedule-detail .select-schedule .grid-input .input input:focus,
.schedule-detail .select-schedule .grid-input .input input:focus-visible,
.schedule-detail .select-schedule .grid-input .input input:active
{
	outline: none;
	border: 1px solid #dddddd;
}
.schedule-detail .select-schedule .grid-input .input input {
	height: 52px;
  line-height: 50px;
  text-align: center;
}
.schedule-detail .select-schedule .input >span {
  position: absolute;
  top: 16px;
  right: 10px;
  font-size: 1.2rem;
}
.schedule-detail .select-schedule .input >span::before {
  color: var(--colorA);
}
.schedule-detail .select-schedule .input >span.active::before {
  color: var(--colorB);
}
.schedule-detail .select-schedule .grid-input .select-time {
/*	float: right;*/
  height: 62px;
  line-height: 60px;
  width: 100%;
  border: 1px solid #dddddd;
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0px;
/*   background-color: #f4f4f4; */
  font-size: 0.9rem;
  padding: 0px 0px;
  color: var(--colorC);
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 4px 0px;
}
.schedule-detail .select-schedule .grid-input .select-time >div {
  position: relative;
  background-color: #ffffff;
  text-align: center;
  height: 60px;
}
.schedule-detail .select-schedule .grid-input .select-time >div >span {
  display: inline-block;
  width: 100%;
  height: 50px;
  line-height: 48px;
  border-left: 1px solid #f4f4f4;
  float: left;
  font-size: 1.1rem;
}
.schedule-detail .select-schedule .grid-input .select-time >div >i {
	display: inline-block;
	height: 25px;
  line-height: 25px;
  width: 30px;
  text-align: center;
  font-size: 5px;
  position: absolute;
  bottom: 0px;
  left: calc(50% - 15px);
  border-radius: 50%;
  background-color: transparent;
}
.schedule-detail .select-schedule .grid-input .select-time >div >i.top {
	top: 0px;
	bottom: unset;
	transform: rotate(180deg);
	display: none;
}
.schedule-detail .select-schedule .grid-input .select-time >div >i::before {
  color: var(--colorA);
}
.schedule-detail .select-schedule .grid-input .select-time >div >i.active::before {
	color: var(--colorB);
}
.schedule-detail .select-schedule .grid-input .select-time >div >ul {
	position: absolute;
	top: 100%;
	left: 0px;
	right: 0px;
	background-color: #ffffff;
	z-index: 99;
	border: 1px solid #eeeeee;
	border-top: none;
	border-radius: 0px 0px 3px 3px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
.schedule-detail .select-schedule .grid-input .select-time >div >ul.hour {
	height: 190px;
	overflow-y: scroll;
}
.select-schedule .grid-input .select-time >div >ul.hour::-webkit-scrollbar {
	width: 1px;
}
.schedule-detail .select-schedule .grid-input .select-time >div >ul li {
	display: inline-block;
	width: 100%;
	padding: 0px;
	height: 26px;
	line-height: 26px;
	color: var(--colorC);
	margin-bottom: 0px;
}
.schedule-detail .select-schedule .grid-input .select-time >div >ul li.active {
	background-color: var(--colorA);
	color: #ffffff;
}
.schedule-detail .select-time .button {
	padding-top: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.schedule-detail .select-time .button button {
	position: unset;
	height: 39px;
  line-height: 39px;
  padding: 0px 30px;
  font-size: 0.9rem;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  background-color: var(--colorA);
  border-radius: 4px;
  border: none;
}
.schedule-detail .phone {
	text-align: center;
	font-size: 1.8rem;
	color: #ffffff;
}
.schedule-detail .phone span.icon-edit {
	font-size: 1rem;
  position: relative;
  top: -4px;
  right: -15px;
}
.schedule-detail .phone span.icon-edit::before {
	color: var(--colorA);
}
.schedule-detail .phone input {
	width: 100%;
	height: 44px;
	border-radius: 22px;
	border: none;
	text-align: center;
	font-size: 1.1rem;
}
.schedule-detail .your-info {
  padding-bottom: 0px;
}
.schedule-detail .your-info .input {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 12px;
}
.schedule-detail .your-info .input input {
	height: 34px;
	line-height: 32px;
	width: 100%;
	border: 1px solid #eeeeee;
	border-radius: 3px;
	padding: 0px 15px;
	font-size: 16px;
}
.mobile-menu .schedule-call .schedule-detail.complete >span {
	font-size: 3.5rem;
}
.mobile-menu .schedule-call .schedule-detail.complete >span::before {
	color: var(--colorA);
}
.mobile-menu .schedule-call .schedule-detail.complete h2 {
	padding-top: 10px;
	padding-bottom: 50px;
	font-size: 1.2rem;
	color: var(--colorA);
}
.mobile-menu .schedule-call .schedule-detail.complete .note {
	background-color: #f4f4f4;
	padding: 10px;
	border-radius: 5px;
	font-size: 0.8rem;
	text-align: center;
	margin-top: 50px;
	margin-bottom: 65px;
	line-height: 24px;
}
.mobile-menu .schedule-call .schedule-detail.complete a.bach-home {
	display: inline-block;
	height: 42px;
	line-height: 42px;
	padding: 0px 25px;
	background-color: var(--colorA);
	color: #ffffff;
	text-transform: uppercase;
	border-radius: 4px;
}
/*.slide.top {
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  position: relative;
}
.slide .video-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-wrap {
  position: relative;
  padding-bottom: 200%;
  transform: translateY(-35.95%);
}*/

.product-cart {
	/*display: none;
	position: fixed;
	top: 96px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 999;*/
	padding: 20px 0px;
	padding-top: 60px;
	padding-bottom: 100px;
	background-color: #ffffff;
}
.product-cart[role="islogin"] {
	padding-top: 90px;
}
.product-cart .business {
	background-color: #f4f4f4;
	padding: 10px 15px;
	font-size: 0.8rem;
}
.product-cart.guest-chat {
	padding-top: 90px;
	padding-bottom: 0px;
}
.product-cart.success-order {
	top: 36px;
	text-align: center;
	padding-top: 33%;
}
.product-cart h3 {
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	padding-bottom: 20px;
}
.product-cart .cart-item {
	display: table;
	width: 100%;
	margin-bottom: 10px;
}
.product-cart .cart-item:not(:last-child) {
/*	border-bottom: 1px solid #eeeeee;*/
	/*margin-bottom: 0px;*/
}
.product-cart .cart-item h2 {
	font-size: 1rem;
	color: var(--colorA);
	padding: 5px 0px;
}
.product-cart .list {
	padding: 0px 15px 10px 15px;
}
.product-cart[role="islogin"] .list {
	padding-top: 15px;
}
.product-cart .list >h5 {
	font-size: 1.1rem;
	font-weight: 500;
	padding-bottom: 15px;
}
.product-cart .list div.suggest-discount {
	padding: 8px 12px;
	border-radius: 5px;
	border: 1px solid #eeeeee;
	margin-bottom: 10px;
}
.product-cart .list div.suggest-discount h5 {
	font-size: 0.95rem;
	opacity: 0.5;
	padding-bottom: 6px;
}
.product-cart .list div.suggest-discount p {
	text-align: center;
	color: var(--colorB);
	font-size: 0.85rem;
}
.product-cart .discounts .item-discount {
	display: inline-block;
	height: 44px;
	line-height: 44px;
	width: 100%;
	background-color: #f4f4f4;
	border-radius: 22px;
	color: var(--colorB);
	font-size: 0.9rem;
	margin-bottom: 10px;
	padding: 0px 15px;
}
.product-cart .discounts .item-discount strong {
	font-size: 1rem;
}
.product-cart .discounts .item-discount strong:first-child {
	margin-right: 10px;
	font-size: 1.2rem;
  font-weight: normal;
  float: left;
}
.product-cart .discounts .item-discount span.name {
	max-width: 65%;
	display: inline-block;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.product-cart .discounts .item-discount strong.price {
	float: right;
}
.product-cart .business {
/*	text-align: center;*/
	font-size: 0.88rem;
}
.product-cart .business strong {
	display: inline-block;
	width: 100%;
	padding-top: 5px;
	padding-bottom: 10px;
	font-size: 1rem;
}
.product-cart .business span {
	display: inline-block;
	color: var(--colorA);
	float: right;
}
#listDesignModal .cart-item {
	margin-bottom: 10px;
}
#listDesignModal .cart-item:last-child {
	margin-bottom: 20px;
	border-bottom: 1px solid var(--colorD);
}
.product-cart .cart-item h5,
#listDesignModal .cart-item h5
{
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 1.1rem;
/*	font-weight: bold;*/
}
.product-cart .cart-item h5 {
	background-color: #f4f4f4;
	margin-left: -15px;
  margin-right: -15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 15px;
}
.product-cart .cart-item h5 span.name {
	color: var(--colorA);
}
#listDesignModal .grid-file {
	display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* Khoảng cách giữa ảnh */
  width: 100%; /* Chiếm toàn bộ chiều rộng */
}
#listDesignModal .grid-file .cart-item {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 0px;
}
#listDesignModal .grid-file .cart-item >div,
#listDesignModal .grid-file .cart-item >div >div
{
	height: 100% !important;
	margin-bottom: 0px !important;
	position: relative;
}
#listDesignModal .cart-item .file-upload .img img {
	height: 100% !important;
	width: 100%;
	object-fit: cover;
}
#listDesignModal .three-button {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 6px;
}
#editAccount#chooseBusiness.ebcf_modal {
	padding-top: 60px;
}
#chooseBusiness.ebcf_modal {
	padding-top: 40px;
} 
#chooseBusiness .business {
	background-color: #ffffff;
	color: var(--colorC);
	padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 20px;
}
#chooseBusiness .business h3 {
  font-size: 1.1rem;
  height: 30px;
}
#chooseBusiness .business.shipto h3 {
	font-size: 1rem;
}
#chooseBusiness .business.shipto span {
	font-size: 0.9rem;
	margin-right: 5px;
}
#chooseBusiness .business.shipto span::before
{
	color: var(--colorC);
}
#chooseBusiness .business h3 span.icon-store,
#chooseBusiness .business h3 span.icon-shiping
{
  font-weight: normal;
  margin-right: 5px;
  position: relative;
  top: 1px;
}
#chooseBusiness .business h3 i {
	font-style: normal;
	color: var(--colorA);
	float: right;
	font-size: 0.9rem;
}
#chooseBusiness .business address {
  font-size: 0.8rem;
  font-style: normal;
}
#chooseBusiness .button,
#createBusiness .button
{
	position: absolute;
  left: 20px;
  right: 20px;
  bottom: 30px;
}
#chooseBusiness .two-button.button {
	display: grid;
  grid-template-columns: 1fr 2fr; /* Tạo bố cục với tỷ lệ 1:2 */
  gap: 10px;
}
#chooseBusiness .button button.save {
	border-color: var(--colorA);
	background-color: var(--colorA);
	color: #ffffff;
}
#createBusiness .form .input {
	display: inline-block;
  width: 100%;
  overflow: hidden;
  margin-top: 15px;
  margin-bottom: 15px;
  position: relative;
}
#createBusiness .form .input.two-input {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
#createBusiness .form .input >span {
  display: inline-block;
  height: 44px;
  line-height: 42px;
  position: absolute;
  left: 15px;
  font-size: 0.9rem;
}
#createBusiness .form .input >span.icon-email,
#createBusiness .form .input >span.icon-store
{
  font-size: 0.95rem;
}
#createBusiness .form .input >span.icon-location1 {
	font-size: 1.1rem;
}
#createBusiness .form .input >span.icon-zipcode {
	left: calc(50% + 20px);
}
#createBusiness .form .input input,
#createBusiness .form .input select
{
  height: 44px;
  line-height: 42px;
  background-color: #ffffff;
  border: 0.11rem solid #dddddd;
  border-radius: 22px;
  width: 100%;
  padding: 0px 20px;
  font-size: 1rem;
  padding-left: 45px;
}
#createBusiness .form .input select {
  /* -webkit-appearance: textfield; */
  -webkit-appearance: initial;
  -moz-appearance: initial;
  appearance: initial;
  color: var(--colorA);
}
#createBusiness .form .input label {
	display: inline-block;
  width: 100%;
  font-size: 1rem;
}
#createBusiness .form .input input[type=checkbox] {
	width: 20px;
  line-height: unset;
  height: 20px;
  margin-right: 5px;
  position: relative;
  top: 2px;
}
#createBusiness .form .input >span::before {
  color: var(--colorA);
}
#listDesignModal .cart-item h5 {
	text-align: left;
}
#listDesignModal .cart-item h5 >span {
	float: right;
	font-size: 0.8rem;
	position: relative;
  top: 3px;
  z-index: 99;
}
#listDesignModal .cart-item h5 >span::before {
	color: var(--colorA);
}
#listDesignModal .cart-item textarea {
	position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 9;
  width: 100%;
  padding: 10px;
  font-size: 0.9rem;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
}
#listDesignModal .cart-item textarea:focus-visible {
	outline: none;
	border: 1px solid var(--colorA);
}
.product-cart .cart-item h5 span.name {
	font-weight: 500;
}
.product-cart .cart-item h5 span.icon-trash {
	display: inline-block;
	font-size: 11px;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	background-color: #ffffff;
	border-radius: 50%;
	float: right;
	margin-left: 2px;
}
.product-cart .cart-item h5 strong {
	float: right;
	margin-right: 10px;
}
.product-cart .cart-item h5 strong.sfree {
	text-decoration: line-through;
}
.product-cart .cart-item h5 span.icon-x {
	float: right;
	font-size: 0.65rem;
	position: relative;
  top: 6px;
}
.product-cart .cart-item h5 span.icon-x::before {
	color: var(--colorB);
}
.product-cart .cart-item >.img,
#listDesignModal .cart-item .wrap-item >.img
{
	position: relative;
}
#listDesignModal .cart-item .wrap-item >.img {
	margin-bottom: 10px;
}
#listDesignModal .cart-item .wrap-item >.img p,
#listDesignModal .grid-file .cart-item >div p
{
	height: calc(100% - 100px);
  position: absolute;
  top: 50px;
  left: 0px;
  right: 0px;
  padding: 5px 10px;
  color: #ffff;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
}
#listDesignModal .cart-item.active .wrap-item >.img::after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.6);
}
#listDesignModal .cart-item .wrap-item.file-upload >.img.file {
	background-color: #f4f4f4;
	aspect-ratio: 1 / 1;
	display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.product-cart .cart-item >.img img,
#listDesignModal .cart-item >.img img,
#listDesignModal .cart-item .wrap-item >.img img
{
	width: 100%;
	height: auto;
	vertical-align: top;
}
#listDesignModal .cart-item .wrap-item >.img img {
	height: 100%;
}
#listDesignModal .cart-item .wrap-item >.img img.file {
	width: 80px;
  height: auto !important;
  position: relative;
  /*top: calc(50% - 53px);
  left: calc(50% - 65px);*/
}
.product-cart .cart-item >.img .icon-x,
.product-cart .cart-item >.img .icon-trash,
.product-cart .cart-item >.img .icon-info1,
#listDesignModal .cart-item .wrap-item >.img .icon-trash,
#listDesignModal .cart-item .wrap-item >.img .icon-edit,
#listDesignModal .cart-item .wrap-item >.img .icon-check-v
{
	display: inline-block;
	height: 30px;
	line-height: 30px;
	width: 30px;
	text-align: center;
	font-size: 0.55rem;
	border-radius: 50%;
	background-color: #ffffff;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 99;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 3px;
}
#listDesignModal .cart-item .wrap-item >.img .icon-check-v {
	background-color: var(--colorA);
}
#listDesignModal .cart-item .wrap-item >.img .icon-trash,
.product-cart .cart-item >.img .icon-trash
{
	font-size: 0.8rem;
	/*top: unset;
	bottom: 12px;*/
}
.product-cart .cart-item >.img .icon-info1 {
	right: unset;
	top: unset;
	left: 12px;
	bottom: 12px;
	background-color: var(--colorA);
	font-size: 1rem;
}
.product-cart .cart-item >.img .icon-info1::before {
	color: #ffffff;
}
#listDesignModal .cart-item .wrap-item >.img .icon-edit,
#listDesignModal .cart-item .wrap-item >.img .icon-check-v
{
	top: unset;
	right: unset;
	left: 12px;
	bottom: 12px;
	font-size: 0.65rem;
}
#listDesignModal .cart-item .wrap-item >.img .icon-check-v {
	z-index: 99;
}
.product-cart .cart-item >.img .icon-x::before,
#listDesignModal .cart-item .wrap-item >.img .icon-x::before
{
	color: var(--colorB);
}
#listDesignModal .cart-item .wrap-item >.img .icon-edit::before
{
	color: var(--colorA);
}
.product-cart .cart-item >div .img {
	width: 125px;
	height: 125px;
/*	aspect-ratio: 1 / 1;*/
	float: left;
}
.product-cart .cart-item >div .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product-cart .cart-item .choose {
	position: relative;
	/*width: calc(100% - 140px);
	padding-top: 10px;*/
}
.product-cart .cart-item .choose .input {
	width: 100%;
	height: 40px;
	line-height: 38px;
	border-radius: 20px;
	border: 0.11rem solid #dddddd;
	font-size: 0.9rem;
	padding: 0px 12px;
	margin-bottom: 12px;
	box-shadow: rgba(99, 99, 99, 0.1) 0px 1px 3px 0px;
}
.product-cart .cart-item .choose .input.discount {
	border: none;
	color: var(--colorB);
	background-color: color-mix(in srgb, var(--colorB) 12%, transparent);
}
.product-cart .cart-item .choose .input.discount.confirm {
	height: auto;
	line-height: 22px;
	border-radius: 5px;
	padding: 8px 12px;
	text-align: center;
}
.product-cart .cart-item .choose .input.discount.confirm button {
	height: 24px;
	line-height: 24px;
	width: 120px;
	text-align: center;
	border: none;
	border-radius: 12px;
	margin: 5px;
	background-color: var(--colorB);
	color: #ffffff;
}
.product-cart .cart-item .choose .input.discount.confirm button.reprint {
	background-color: var(--colorA);
}
.product-cart .cart-item .choose .input select {
	float: right;
	font-size: 1rem;
	border: none;
	height: 40px;
  position: relative;
  top: 1px;
  border-radius: 0px 20px 20px 0px;
  min-width: 40%;
  max-width: 60%;
  text-align: right;
  text-align-last: right;
/*  direction: rtl;*/
  background-color: transparent;
  color: var(--colorC);
}
.product-cart .cart-item .choose .input select:focus
{
	outline: none;
}
.product-cart .cart-item .choose .input .select {
	float: right;
	text-align: right;
	min-width: 40%;
  max-width: 60%;
  font-size: 1rem;
  color: var(--colorC);
  position: relative;
  padding-right: 3px;
/*  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ffffff;*/
}
.product-cart .cart-item .choose .input .select i {
	display: none;
	font-size: 0.6rem;
  margin-left: 5px;
}
.product-cart .cart-item .choose .input .select i::before {
	color: var(--colorC);
}
.product-cart .cart-item .choose .input .select ul {

}
.product-cart .cart-item .choose .discount-confirm {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.92);
	font-size: 0.85rem;
	text-align: center;
}
.product-cart .cart-item .choose .discount-confirm div {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	padding-top: 12px;
  width: 100%;
}
.product-cart .cart-item .choose .discount-confirm div button {
	height: 40px;
	line-height: 38px;
	background-color: var(--colorA);
	border: 1px solid var(--colorA);
	color: #ffffff;
	border-radius: 4px;
	text-align: center;
	font-size: 0.9rem;
}
.product-cart .cart-item .choose .discount-confirm div button.reprint {
	background-color: #ffffff;
	color: var(--colorA);
}
#listDesignModal p {
	font-size: 1rem;
	text-align: justify;
	line-height: 24px;
	white-space: pre-line;
}
#listDesignModal h4 {
	font-size: 1.2rem;
	padding-bottom: 8px;
}
#listDesignModal h4.title-upload {
	border-top: 1px solid var(--colorD);
	margin-top: 15px;
  padding-top: 15px;
}
#listDesignModal .grid-files {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 12px;
	padding-top: 20px;
	padding-bottom: 30px;
/*	border-top: 1px solid var(--colorD);*/
}
#listDesignModal .upload-files {
	display: flex;
	align-items: center;
  justify-content: center;
  padding-top: 40px;
/*  border-top: 1px solid var(--colorD);*/
}
#listDesignModal .upload-files.not-save {
	padding-top: calc(100% - 80px);
}
#listDesignModal .grid-files >div {
	aspect-ratio: 1 / 1;
	background-color: #f4f4f4;
	position: relative;
}
#listDesignModal .grid-files >div.upload-file {
	background-color: transparent;
	display: flex;
	align-items: center;
  justify-content: center;
}
#listDesignModal .grid-files >div.upload-file >div {
	position: relative;
	background-color: #f4f4f4;
	width: 80px;
	height: 80px;
	line-height: 20px;
  padding-top: 22px;
	border-radius: 3px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--colorA);
}
#listDesignModal .upload-files >div.upload-file {
	position: relative;
	background-color: #f4f4f4;
	width: 80px;
	height: 80px;
	line-height: 20px;
  padding-top: 22px;
	border-radius: 3px;
	text-align: center;
	font-size: 0.85rem;
	color: var(--colorA);
}
#listDesignModal .upload-files >div.upload-file >span,
#listDesignModal .grid-files >div.upload-file >div >span
{
	display: inline-block;
	width: 100%;
	text-align: center;
	font-size: 1.5rem;
}
#listDesignModal .upload-files >div.upload-file >span::before,
#listDesignModal .grid-files >div.upload-file >div >span::before
{
	color: var(--colorA);
}
/*#listDesignModal .grid-files >div.upload-file >span {
	display: inline-block;
	width: 56px;
	height: 56px;
	line-height: 56px;
	text-align: center;
	background-color: #f4f4f4;
	border-radius: 3px;
	position: relative;
	top: calc(50% - 28px);
	left: calc(50% - 28px);
}*/
#listDesignModal .grid-files >div.upload-file >span::before {
	color: var(--colorA);
}
#listDesignModal .grid-files >div.upload-file >span input,
#listDesignModal .upload-files >div.upload-file >span input,
#listDesignModal .grid-files >div.upload-file >div >span input
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0;
}
#listDesignModal .grid-files >div img.image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0px;
  left: 0px;
  vertical-align: middle;
}
#listDesignModal .grid-files >div img {
	width: 48px;
	height: auto;
	position: relative;
	top: calc(50% - 32px);
	left: calc(50% - 24px);
}
#listDesignModal .grid-files >div span.ext,
#listDesignModal .wrap-item >.img span.ext
{
	font-size: 0.92rem;
  font-weight: bold;
  display: inline-block;
  width: 100%;
  height: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  top: calc(50% - 6px);
  left: 0px;
  text-transform: uppercase;
}
#listDesignModal .wrap-item >.img span.ext {
	font-size: 1.25rem;
	height: 30px;
  line-height: 30px;
  top: calc(50% - 4px);
}
#listDesignModal .grid-files >div span.icon-trash {
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	background-color: var(--colorD);
	font-size: 0.8rem;
	border-radius: 50%;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 9;
}
.product-cart .card,
.my-project .card
{
	background-color: #f4f4f4;
	padding: 5px 10px 10px 10px;
	border-radius: 8px;
	font-size: 0.9rem;
  line-height: 24px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	margin-bottom: 20px;
}
.product-cart #openDesign.card {
	background-color: var(--colorA);
	color: #ffffff;
	overflow: hidden;
	display: flex;
	padding: 8px 10px;
}
.product-cart .card .icon,
.my-project .design-upload .title .icon
{
	flex: 1;
	float: left;
	width: 60px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.product-cart .card .icon >span,
.my-project .design-upload .title .icon >span
{
	display: inline-block;
	height: auto;
	font-size: 2.4rem;
}
.product-cart .card .right-content,
.my-project .design-upload .title .right-content
{
	float: right;
	width: calc(100% - 60px);
	padding-left: 5px;
	font-size: 0.8rem;
}
.product-cart .card .top,
.my-project .card .top,
.my-project .design-upload .title .top
{
	height: 30px;
	line-height: 30px;
	font-size: 1.1rem;
	color: var(--colorA);
}
.product-cart .card .top,
.my-project .design-upload .title .top
{
	color: #ffffff;
}
.product-cart .card .top span[class^="icon-"],
.my-project .card .top span[class^="icon-"],
.my-project .design-upload .title .top span[class^="icon-"]
{
	font-size: 0.9rem;
	margin-right: 5px;
}
.product-cart .card .top span.count,
.my-project .card .top span.count,
.my-project .design-upload .title span.count
{
	float: right;
}
.product-cart .total {
	background-color: #f4f4f4;
	/*position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 220px;*/
	padding: 8px 20px 15px 20px;
}
.product-cart .total h4 {
	height: 40px;
	line-height: 40px;
	font-size: 1.2rem;
}
.product-cart .total .wrap-discount {
	background-color: var(--colorB);
	color: #ffffff;
	padding: 5px 8px;
	border-radius: 8px;
}
.product-cart .total .wrap-discount .tr {
	font-size: 0.95rem;
	display: inline-block;
	padding: 0px;
  width: 100%;
	height: 30px;
	line-height: 30px;
}
.product-cart .total .tr span.icon-discord {
	float: left;
	font-size: 1.2rem;
	margin-right: 6px;
  position: relative;
  top: 5px;
}
.product-cart .total .wrap-discount .tr.tip {
	display: flex;
	align-items: center;
	height: 40px;
	line-height: unset;
}
.product-cart .total .wrap-discount .tr.tip span.icon-discord {
	position: unset;
	margin-right: 10px;
	font-size: 1.4rem;
}
.product-cart .total .tr {
	/*height: 36px;
	line-height: 36px;*/
	font-size: 1.2rem;
/*	font-weight: bold;*/
	padding: 8px 5px;
}
.product-cart .total .tr:not(:last-child) {
	margin-bottom: 2px;
}
.product-cart .total .tr.business {
	font-size: 0.9rem;
}
.product-cart .total .tr.business strong {
	width: auto;
}
.product-cart .total .tr.discount {
	color: var(--colorB);
}
.product-cart .total .tr span {
	float: right;
}
.product-cart .total .tr span.change {
	display: inline-block;
	height: 26px;
	line-height: 26px;
	padding: 0px 15px;
	border-radius: 13px;
	background-color: #ffffff;
}
.product-cart .total .select-discount {
	background-color: var(--colorB);
	color: #ffffff;
	padding: 15px 20px;
	font-size: 1rem;
	border-radius: 6px;
	text-align: center;
	position: relative;
	/*margin-left: -20px;
  margin-right: -20px;*/
}
.product-cart .total .select-discount span {
	font-size: 1.8rem;
	position: absolute;
	top: 10px;
	left: 15px;
	/*float: left;
  margin-right: 6px;*/
}
.product-cart .total .select-discount a:not(.login) {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	width: 108px;
	padding: 0px;
	border-radius: 15px;
	background-color: #ffffff;
	color: var(--colorB);
	font-size: 0.88rem;
	float: right;
	position: relative;
	top: -5px;
}
.product-cart .total .select-discount a.login {
	color: #ffffff;
	padding-top: 0px;
}
.product-cart .total button,
.product-cart .form .button button,
.product-cart.success-order .button button
{
	width: calc(100% - 0px);
	height: 42px;
	line-height: 42px;
	background-color: var(--colorA);
	color: var(--colorD);
	border: none;
	border-radius: 4px;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.05rem;
	margin-top: 10px;
	margin-bottom: 5px;
}
.product-cart.success-order .button button {
	width: calc(100% - 40px);
}
.product-cart .total button.order-outpay {
    background-color: #ffffff;
    width: calc(100% - 80px);
    margin-left: 40px;
    border-radius: 22px;
    color: var(--color-pink);
    text-transform: capitalize;
    font-size: 0.95rem;
}
.product-cart .form.checkout {
	padding: 20px 20px 0px 20px;
}
.product-cart .form.checkout button.btn-back {
	background-color: transparent;
	border: none;
	width: auto;
	text-align: center;
	font-size: 0.9rem;
	color: var(--colorA);
	position: fixed;
	top: 55px;
	z-index: 999;
	padding-left: 0px;
/*	left: calc(50% - 47px);*/
/*	margin-top: 10px;*/
}
.product-cart .form.checkout button.btn-back span {
	font-size: 0.75rem;
	margin-right: 5px;
}
.product-cart .form .logo,
#editAccount .form .logo
{
	text-align: center;
	padding-top: 20px;
	padding-bottom: 30px;
	position: relative;
}
.product-cart .form .logo >.btn,
#editAccount .form .logo >.btn
{
	height: 50px;
	line-height: 15px;
	width: 60px;
	text-align: center;
	position: absolute;
	top: calc(50% - 20px);
	left: calc(22% - 30px);
	font-size: 1.2rem;
}
.product-cart .form .logo >.btn >span,
#editAccount .form .logo >.btn >span
{
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 1rem;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px;
}
.product-cart .form .logo >button,
#editAccount .form .logo >button
{
	background-color: transparent;
	border: none;
	display: flex;
 	justify-content: space-around;
 	align-items: center;
 	flex-direction: column;
	height: 40px;
	width: 60px;
	line-height: 0px;
	text-align: center;
/*	line-height: 50px;*/
	position: absolute;
	top: calc(50% - 20px);
	left: calc(22% - 30px);
	font-size: 1.2rem;
}
.product-cart .form .logo >button.reload,
.product-cart .form .logo >.btn.reload,
#editAccount .form .logo .btn.reload
{
	left: unset;
	right: calc(22% - 30px);
}
.product-cart .form .logo >button span.icon-upload {
	
}
.product-cart .form .logo >button small,
.product-cart .form .logo >.btn small,
#editAccount .form .logo >button small,
#editAccount .form .logo >.btn small
{
	font-size: 0.6rem;
	display: inline-block;
  width: 100%;
  text-align: center;
}
.product-cart .form .logo .avatar,
#editAccount .form .logo .avatar
{
	display: block;
  width: 28%;
  aspect-ratio: 1 / 1;
  position: relative;
  border-radius: 50%;
  border: 1px solid var(--colorA);
  margin-left: 36%;
  margin-bottom: 10px;
  overflow: hidden;
}
#editAccount .form .logo .avatar {
	margin-bottom: 0px;
	background-color: #f1f1f1;
	border-width: 2px;
}
#editAccount .form .logo .avatar.big {
	width: 36%;
	margin-left: 32%;
	margin-bottom: 10px;
	position: relative;
	overflow: unset;
}
#editAccount .form .logo .avatar span.icon-edit {
	display: inline-block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	font-size: 0.6rem;
	text-align: center;
	background-color: #ffffff;
	border-radius: 50%;
	position: absolute;
	right: 10px;
	bottom: -3px;
	z-index: 99;
}
#editAccount .form .logo .avatar span.icon-edit::before {
	color: var(--colorA);
}
#editAccount .form .logo h4 {
	padding-bottom: 5px;
}
#editAccount .form .logo h5 {
	font-size: 1rem;
}
#editAccount .form .logo .avatar.big img {
	border-radius: 50%;
}
.product-cart .form .logo .avatar img,
#editAccount .form .logo .avatar img
{
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
}
.product-cart .form .logo .avatar input,
.product-cart .form .logo .upload input,
#editAccount .form .logo .avatar input,
#editAccount .form .logo .upload input
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0;
}
.product-cart .form .logo .random-avt,
#editAccount .form .logo .random-avt
{
	display: inline-block;
	height: 24px;
	line-height: 24px;
	border-radius: 12px;
	padding: 0px 8px;
	background-color: var(--colorA);
	font-size: 0.8rem;
	color: var(--colorD);
}
.product-cart .form .logo label,
#editAccount .form .logo label
{
	font-size: 0.85rem;
}
#editAccount .form .business {
	display: inline-block;
	height: 44px;
	line-height: 44px;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 10px;
}
#editAccount .form .business >span.icon-store,
#editAccount .form .business >span.icon-shiping
{
	display: inline-block;
	width: 44px;
	height: 44px;
	line-height: 44px;
	background-color: var(--colorA);
	border-radius: 50%;
	text-align: center;
	font-size: 1.1rem;
}
#editAccount .form .business >span.icon-shiping {
	font-size: 1rem;
}
#editAccount .form .business >span.icon-store::before,
#editAccount .form .business >span.icon-shiping::before
{
	color: #ffffff;
}
#editAccount .form .business .right-content {
	float: right;
	width: calc(100% - 55px);
	position: relative;
	line-height: 22px;
	font-size: 1rem;
}
#editAccount .form .business .right-content small,
#editAccount .form .business .right-content strong
{
	display: inline-block;
	width: 100%;
}
#editAccount .form .business.shipping .right-content strong {
	font-size: 90%;
	width: 88%;
}
#editAccount .form .business .right-content span.icon-edit {
	position: absolute;
	top: 15px;
	right: 0px;
	font-size: 1.1rem;
}
#editAccount .form .business .right-content span.icon-edit::before {
	color: var(--colorA);
}
#editAccount .business-info .business {
	padding: 5px 10px;
	border-radius: 5px;
	background-color: #ffffff;
	margin-bottom: 18px;
}
#editAccount .business-info .business h3 {
	display: inline-block;
	width: 100%;
	height: 35px;
	line-height: 40px;
	font-size: 1.1rem;
	color: var(--colorC);
}
#editAccount .business-info .business h3 span.icon-shiping {
	font-size: 1rem;
	margin-right: 3px;
}
#editAccount .business-info .business h3 span.icon-shiping::before {
	color: var(--colorC);
}
#editAccount .business-info .business h3 i {
	font-style: normal;
	color: var(--colorA);
	float: right;
	font-size: 85%;
}
#editAccount .business-info .business address {
	font-style: normal;
	display: inline-block;
	width: 100%;
	height: 30px;
	line-height: 24px;
	font-size: 0.85rem;
	color: var(--colorC);
}
.product-cart .form .logo img {
	max-width: 25%;
}
.product-cart .form h3 {
	padding-top: 15px;
	padding-bottom: 5px;
	font-size: 1.4rem;
	font-weight: normal;
}
.product-cart .form.checkout h3 {
	padding-top: 30px;
	padding-bottom: 10px;
}
.product-cart[role="islogin"] .form.checkout h3
{
	padding-top: 0px;
	padding-bottom: 5px;
}
.product-cart .form.checkout p {
	font-size: 1rem;
	line-height: 24px;
}
.product-cart .checkout h5 {
	font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  padding-bottom: 15px;
}
.product-cart .form label.text-center,
#editAccount .form label.text-center
{
	display: inline-block;
	width: 100%;
	padding-bottom: 10px;
}
.product-cart .checkout .select-pay-type {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 30px;
	padding-top: 80px;
}
.product-cart .checkout .select-pay-type .button {
	background-color: var(--colorA);
	color: #ffffff;
	display: flex;
	border-radius: 5px;
	padding: 10px 15px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.product-cart .checkout .select-pay-type .button .icon {
	flex: 1;
	display: flex;
	width: 80px;
	align-items: center;
	font-size: 2.9rem;
	padding-left: 15px;
}
.product-cart .checkout .select-pay-type .button.cheque .icon {
/*	justify-content: left;*/
	padding-left: 0px;
}
.product-cart .checkout .select-pay-type .button .right-content {
	width: calc(100% - 80px);
}
.product-cart .checkout .select-pay-type .button .right-content h3,
.product-cart .checkout .select-pay-type .button .right-content p
{
	text-align: left;
	margin-bottom: 0px;
}
.product-cart .checkout .select-pay-type .button .right-content h3 {
	padding-top: 0px;
	padding-bottom: 5px;
}
.product-cart .checkout .select-pay-type .button .right-content p {
	font-size: 0.9rem;
}
.product-cart .checkout .select-pay-type .button.cheque {
	background-color: var(--colorB);
}
.product-cart .checkout .select-pay-type button {
	width: 100%;
	height: 34px;
	line-height: 32px;
	border-radius: 6px;
	background-color: var(--colorD);
	color: var(--colorC);
	border: 1px solid var(--colorA);
	display: inline-block;
	text-align: center;
	font-size: 0.9rem;
}
.product-cart .checkout .select-pay-type button.active {
	background-color: var(--colorA);
	color: var(--colorD);
	font-size: bold;
}
.product-cart .checkout .payment-info {
/*	background-color: #F4F4F4;*/
	padding: 10px 12px;
	border-radius: 6px;
	margin-top: 30px;
	font-size: 1rem;
	background-color: var(--colorA);
	color: #ffffff;
/*	border: 1px solid var(--colorA);*/
	position: relative;
/*	padding-bottom: 80px;*/
}
.product-cart .checkout .cheque .payment-info {
	background-color: var(--colorB);
}
.product-cart .checkout .payment-info p {
	margin-bottom: 0.2rem;
  line-height: 26px;
  font-size: 0.9rem;
  text-align: left;
}
.product-cart .checkout .payment-info .bottom {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	border-radius: 0px 0px 6px 6px;
	padding: 0px 10px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--colorA);
	color: #ffffff;
	font-size: 0.9rem;
}
.product-cart .checkout .cheque .payment-info .bottom {
	background-color: var(--colorB);
}
.product-cart .checkout .upload-zelle {
	padding-top: 30px;
	text-align: center;
}
.product-cart .checkout .upload-zelle .img {
	width: 150px;
	height: 150px;
	overflow: hidden;
	border-radius: 0px;
	margin-left: calc(50% - 75px);
	margin-bottom: 35px;
	position: relative;
}
.product-cart .checkout .upload-zelle .img input {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0;
	z-index: 9;
}
.product-cart .checkout .upload-zelle .grid-img {
	width: 170px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	margin: 0px auto 35px auto;
}
.product-cart .checkout .upload-zelle .grid-img .img {
	margin-left: unset;
	margin-bottom: unset;
}
.product-cart .checkout .upload-zelle .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.product-cart .checkout .upload-zelle p {
	padding: 0px 20px 30px 20px;
}
.product-cart .checkout .upload-zelle p.note {
	padding: 0px;
	font-size: 0.9rem;
}
.product-cart .checkout .upload-zelle .front {
	float: left;
}
.product-cart .checkout .upload-zelle .back {
	float: right;
}
.product-cart .checkout .upload-zelle .input-file {
	position: relative;
	background-color: var(--colorB);
	color: #ffffff;
	font-size: 1.1rem;
	text-transform: uppercase;
	border-radius: 6px;
	width: 100%;
	height: 42px;
	line-height: 42px;
	text-align: center;
	display: inline-block;
	overflow: hidden;
}
.product-cart .checkout .upload-zelle.cheque .input-file {
	background-color: var(--colorB);
}
.product-cart .checkout .upload-zelle .input-file img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}
.product-cart .checkout .upload-zelle .input-file span {
	display: inline-block;
	font-size: 34px;
	height: 40px;
	line-height: 40px;
	width: 60px;
	text-align: center;
	position: absolute;
	top: calc(50% - 20px);
	left: calc(50% - 30px);
}
.product-cart .checkout .upload-zelle .input-file input {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	opacity: 0;
	z-index: 99;
}
.product-cart .checkout .upload-zelle small {
	display: inline-block;
	width: 100%;
	text-align: center;
}
.product-cart .checkout label {
	display: inline-block;
	font-size: 0.8rem;
  height: 50px;
  line-height: 22px;
  position: relative;
  padding-left: 25px;
  margin-top: 40px;
}
.product-cart .checkout label input {
	position: absolute;
	left: 0px;
}
.product-cart .form {
	padding: 10px 20px;
}
.product-cart .form.new-business {
	padding-top: 120px;
}
.product-cart .form.new-business h5 {
	font-size: 1.1rem;
	text-align: center;
	padding-bottom: 60px;
}
.product-cart .form .input,
#editAccount .form .input
{
	overflow: hidden;
	margin-bottom: 15px;
	position: relative;
}
#editAccount .new-business .form .input {
	margin-bottom: 30px;
}
#editAccount .new-business .form .input.delete-bus {
	padding-top: 40px;
	text-align: center;
}
#editAccount .new-business .form .input button.delete {
	background-color: transparent;
	display: inline-block;
	text-align: center;
	color: #ffffff;
	border: none;
}
#editAccount .new-business .form .input button.delete >span {
	display: inline-block;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	background-color: #f1f1f1;
	border-radius: 50%;
	margin-bottom: 5px;
	font-size: 1rem;
}
#editAccount .new-business .form label {
	font-size: 0.9rem;
	padding-left: 8px;
	text-align: left;
}
#editAccount .new-business .form label input {
	width: 22px;
	height: 22px;
	float: left;
	position: relative;
/*	top: 5px;*/
  margin-right: 5px;
  accent-color: var(--colorA);
}
.product-cart .form.verify-email {
	padding-top: 150px;
}
.product-cart .form.verify-email img {
	display: block;
	width: 100px;
	margin: 10px auto;
}
.product-cart .form.login .input {
	position: relative;
	margin-left: 25px;
	margin-right: 25px;
	margin-bottom: 20px;
}
.product-cart .form.new-business .input {
	margin-bottom: 45px;
}
.product-cart .form .input >span,
#editAccount .form .input >span
{
	display: inline-block;
	height: 44px;
	line-height: 42px;
	position: absolute;
	left: 15px;
	font-size: 0.9rem;
	z-index: 9;
}
.product-cart .form .input >span.icon-account,
#editAccount .form .input >span.icon-account
{
	font-weight: bold;
}
.product-cart .form .input >span.icon-email,
.product-cart .form .input >span.icon-store,
#editAccount .form .input >span.icon-email,
#editAccount .form .input >span.icon-store
{
	font-size: 1.05rem;
}
.product-cart .form .input >span.icon-location1,
#editAccount .form .input >span.icon-location1
{
	font-size: 1.1rem;
}
.product-cart .form .input >span.icon-zipcode,
#editAccount .form .input >span.icon-zipcode,
.product-cart .form .input >span.icon-account:nth-child(1),
#editAccount .form .input >span.icon-account:nth-child(1)
{
	left: calc(50% + 20px);
}
.product-cart .form .input >span::before,
#editAccount .form .input >span::before
{
	color: var(--colorA);
}
.product-cart .form.login .input >span::before {
	color: var(--colorA);
}
.product-cart .form .input input,
.product-cart .form .input select,
#editAccount .form .input input,
#editAccount .form .input select
{
	height: 44px;
	line-height: 42px;
	background-color: #ffffff;
	border: 0.11rem solid #dddddd;
	border-radius: 22px;
	width: 100%;
	padding: 0px 20px;
	font-size: 1rem;
	padding-left: 45px;
}
.product-cart .form .input select,
#editAccount .form .input select
{
/*	-webkit-appearance: textfield;*/
	-webkit-appearance: initial;
  -moz-appearance: initial;
  appearance: initial;
  color: var(--colorA);
}
.product-cart .form .input select option {
	color: var(--colorC);
}
.product-cart .form input {
	letter-spacing: 1px;
	font-family: var(--font-body), sans-serif;
}
.product-cart .form.login .input input {
	padding-left: 0px;
	font-size: 1.4rem;
	text-align: center;
	letter-spacing: 3px;
	box-sizing: border-box;
	font-family: sans-serif;
}
.product-cart .form.login .input input.phone {
	padding-left: 45px;
}
.product-cart .form.login .input input::placeholder {
	font-size: 1rem;
	text-align: center;
	letter-spacing: 0px;
}
.product-cart.guest-chat .form.login .input input {
	padding-left: unset;
	text-align: center;
}
.product-cart .form .input input::placeholder,
#editAccount .form .input input::placeholder
{
	color: #cccccc;
}
.product-cart .form .input input:active,
.product-cart .form .input input:focus,
.product-cart .form .input select:focus,
#editAccount .form .input:focus
{
	border-color: var(--colorA);
	outline: none;
}
.product-cart .form .input input:focus::placeholder {
	color: transparent;
}
.product-cart .form .input.two-input,
#editAccount .form .input.two-input
{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	overflow: unset;
}
.product-cart .form .button,
.product-cart.success-order .button
{
	/*position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 100px;
	background-color: #eeeeee;*/
	padding: 10px 0px;
	padding-top: 10px;
}
.product-cart .form.login .button {
	padding-top: 40px;
	padding-bottom: 30px;
}
.product-cart .form.new-business .button {
	position: fixed;
	left: 15px;
  right: 15px;
  bottom: 80px;
}
.product-cart .form.login button.signup {
	/*background-color: transparent;
	border: none;
	color: var(--colorA);
	font-weight: bold;
	padding: 0px;
  font-size: 1rem;*/
}
.product-cart .form p {
	font-size: 1rem;
	text-align: center;
}
.product-cart .form button.login,
.product-cart .form.login button.signup
{
	height: 26px;
	line-height: 24px;
	padding: 0px 10px;
	border-radius: 13px;
	border: 1px solid var(--colorA);
	color: var(--colorA);
	font-size: 1rem;
	display: inline-block;
	box-shadow: rgba(0, 0, 0, 0.12) 1.2px 1.2px 2px;
/*	margin: 0px auto;*/
/*	background-color: var(--colorD);*/
	background-color: transparent;
	padding-bottom: 2px;
}
.product-cart .form.login button.login {
	display: block;
	margin: 0px auto;
	background-color: var(--colorD);
	height: 36px;
	line-height: 36px;
	padding: 0px 25px;
	border-radius: 18px;
}
.product-cart.guest-chat .form button.login {
	padding: 0px 45px;
	text-transform: capitalize;
	font-family: unset;
}
.product-cart .form.login {
	padding-top: 15% !important;
	padding-top: 0px;
}
.product-cart.guest-chat .form.login {
	padding-top: 25%;
}
.product-cart .form.login img {
	width: 26%;
	margin-left: 37%;
	margin-bottom: 20px;
}
.product-cart .form.login h5 {
	font-size: 1.25rem;
/*	font-weight: bold;*/
	padding-top: 5px;
	padding-bottom: 15px;
	text-align: center;
}
.product-cart.guest-chat .form.login h5 {
	padding-bottom: 35px;
	font-size: 1.1rem;
}
.product-cart .form.login >p {
	padding-bottom: 30px;
}
.product-cart .form.login .button button {
	width: auto;
	background-color: var(--colorA);
	color: var(--colorD);
	font-weight: bold;
/*	font-family: monospace, sans-serif;*/
}
#editAccount .two.button button.btn-save {
	background-color: #ffffff;
	border: 1px solid var(--colorA);
	color: var(--colorA);
}
#editAccount .two.button button.btn-close {
	color: var(--colorB);
	border: 1px solid var(--colorB);
	/*width: 42px;
  line-height: 40px;
  border-radius: 50%;*/
  text-align: center;
/*  font-size: 0.7rem;*/
  background-color: #ffffff;
}
#editAccount .two.button button.btn-close span::before {
	color: var(--colorB);
}
#editAccount button.signout {
/*	right: calc(50% - 57px) !important;*/
/*	position: unset !important;*/
	/*margin-top: 40px;
  margin-left: calc(50% - 46px);*/
	/*bottom: 150px !important;
  right: calc(50% - 45px) !important;*/
}
#editAccount .button {
	position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 15px;
}
#editAccount .two.button {
	grid-template-columns: repeat(2, 1fr);
}
#editAccount .two.button button.btn.new-business {
	width: calc(100% - 110px);
	float: right;
}
#editAccount .two.button button.btn.close {
	line-height: 34px;
	width: 100px;
}
.product-cart.success-order .button {
	background-color: transparent;
	padding-top: 15px;
	width: 100%;
}
.product-cart.success-order span.icon-check-v {
	display: inline-block;
	font-size: 1.5rem;
	width: 80px;
	height: 80px;
	line-height: 76px;
	text-align: center;
	border-radius: 50%;
	border: 0.112rem solid var(--colorA);
}
.product-cart.success-order span.icon-check-v::before {
	color: var(--colorA);
}
.product-cart.success-order h4 {
	font-weight: bold;
	font-size: 1.3rem;
	padding: 10px 0px 5px 0px;
	color: var(--colorA);
}
.product-cart.success-order p {
	font-size: 0.9rem;
	line-height: 24px;
}
.guest-chat .wrap-chat {
	height: 100%;
	position: relative;
}
.guest-chat .wrap-chat .list-chat {
	height: calc(100% - 45px);
	overflow-y: auto;
	padding-left: 15px;
	padding-right: 15px;
}
.guest-chat .wrap-chat .list-chat .item {
	overflow: hidden;
	width: 100%;
	margin-bottom: 20px;
}
.guest-chat .wrap-chat .list-chat .item.gmessage {
	text-align: right;
}
.guest-chat .wrap-chat .list-chat .item span.avatar {
	display: inline-block;
	width: 34px;
	float: left;
	margin-top: 20px;
}
.guest-chat .wrap-chat .list-chat .item.gmessage span.avatar {
	height: 34px;
	line-height: 30px;
	border-radius: 50%;
	border: 1px solid var(--colorA);
	text-align: center;
	float: right;
	overflow: hidden;
}
.guest-chat .wrap-chat .list-chat .item span.avatar img {
	width: 100%;
}
.guest-chat .wrap-chat .list-chat .item span.avatar span {
	font-size: 0.85rem;
}
.guest-chat .wrap-chat .list-chat .item span.avatar span::before {
	color: var(--colorA);
}
.guest-chat .wrap-chat .list-chat .item .wrap-content {
	float: right;
	width: calc(100% - 40px);
	padding-bottom: 0px;
}
.guest-chat .wrap-chat .list-chat .item.gmessage .wrap-content {
	float: left;
}
.guest-chat .wrap-chat .list-chat .item .wrap-content small.time {
	display: inline-block;
	width: 100%;
	font-size: 75%;
  opacity: 0.6;
}
.guest-chat .wrap-chat .list-chat .item .wrap-content p {
	display: block;
	min-width: 15%;
	max-width: 90%;
	padding: 10px;
	font-size: 0.9rem;
	line-height: 24px;
	float: left;
	border-radius: 0px 8px 8px 8px;
	border: 1px solid #f1f1f1;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 5px 0px;
}
.guest-chat .wrap-chat .list-chat .item.gmessage .wrap-content p {
	float: right;
	border-radius: 8px 0px 8px 8px;
	border: none;
	background-color: var(--colorA);
	color: var(--colorD);
}
.guest-chat .wrap-chat .list-chat .item .wrap-content .photo {
	max-width: 75%;
}
.guest-chat .wrap-chat .list-chat .item .wrap-content .photo:not(:last-child) {
	margin-bottom: 10px;
}
.guest-chat .wrap-chat .list-chat .item.gmessage .wrap-content .photo {
	float: right;
}
.guest-chat .wrap-chat .list-chat .item .wrap-content .photo img {
	width: 100%;
}
.guest-chat .wrap-chat .input-chat {
	position: absolute;
	left: 70px;
	right: 15px;
	bottom: 2px;
	height: 42px;
	line-height: 40px;
	border-radius: 21px;
	border: 1px solid #f1f1f1;
	padding-right: 8px;
}
.guest-chat .wrap-chat .input-chat input[type="text"] {
	height: 40px;
	line-height: 40px;
	width: calc(100% - 68px);
	border-radius: 20px;
	float: left;
	padding-left: 30px;
	border: none;
	font-size: 1rem;
}
.guest-chat .wrap-chat .input-chat input:active,
.guest-chat .wrap-chat .input-chat input:focus
{
	outline: none;
}
.guest-chat .wrap-chat .input-chat span.icon-image {
	float: left;
	position: relative;
	top: 12px;
	left: 10px;
  font-size: 0.95rem;
}
.guest-chat .wrap-chat .input-chat span.icon-send {
	float: right;
	position: relative;
	top: 1px;
  right: -6px;
  font-size: 1rem;
  display: inline-block;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background-color: var(--colorA);
  border-radius: 50%;
}
.guest-chat .wrap-chat .input-chat span.icon-send::before {
	color: var(--colorD);
}
.guest-chat .wrap-chat .input-chat span.icon-image input {
	opacity: 0;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
.guest-chat .wrap-chat .input-chat a.call {
	position: absolute;
	left: -55px;
	bottom: 2px;
	display: inline-block;
	height: 42px;
	line-height: 40px;
	width: 42px;
	border-radius: 50%;
	border: 1px solid var(--colorA);
	text-align: center;
	font-size: 0.95rem;
}
.guest-chat .wrap-chat .input-chat a.call span::before {
	color: var(--colorA);
}

.register-page section.content {
	padding: 15px 20px;
}
.register-page section#app.content {
	padding-bottom: 100px;
}
section#app.content footer {
	position: fixed;
}
.register-page .register-form {
	padding-top: 20px;
}
.register-page .register-form .input {
	overflow: hidden;
	margin-bottom: 15px;
}
.register-page .register-form .input input,
.register-page .register-form .input textarea,
.register-page .register-form .input select
{
	width: 100%;
}
.register-page .register-form .input input,
.register-page .register-form .input select
{
	height: 40px;
	line-height: 19px;
	border-radius: 20px;
	border: 1px solid var(--colorA);
	padding: 0px 20px;
}
.register-page .register-form .input input::placeholder {
	font-size: 1rem;
	font-family: var(--font-body), sans-serif;
}
.register-page .register-form .input select {
	color: var(--colorB);
	font-family: var(--font-body), sans-serif;
}
.register-page .register-form .input.two-input input,
.register-page .register-form .input.two-input select
{
	width: calc(50% - 5px);
	font-size: 1rem;
}
.register-page .register-form .input textarea {
	border: 1px solid var(--colorA);
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 1rem;
	font-family: var(--font-body), sans-serif;
}
.register-page .terms .card {
	border: 1px solid var(--colorA);
	border-radius: 8px;
	padding: 15px;
	text-align: center;
	margin-bottom: 25px;
	background-color: var(--colorD);
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.register-page .terms .card.active {
	border-color: var(--colorB);
}
.register-page .terms .card h3 {
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--colorB);
	padding: 3px 10px;
	line-height: 28px;
}
.register-page .terms .card button {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	padding: 0px 12px;
	background-color: var(--colorB);
	border-radius: 15px;
	color: var(--colorD);
	border: none;
}
.register-page .terms .card button.close {
	background-color: transparent;
	height: 50px;
	width: 40px;
	line-height: 20px;
	padding: unset;
	text-align: center;
	color: var(--colorC);
}
.register-page .terms .card button.close span {
	display: inline-block;
	width: 100%;
}
.register-page .terms .card button.close span::before {
	color: var(--colorB);
}
.register-page .terms .card p {
	line-height: 26px;
	text-align: justify;
}
.register-page .terms p.accept {
	display: flex;
}
.register-page .terms p.accept label {
	display: inline-block;
	width: 32px;
}
.register-page .terms p.accept >span {
	float: right;
	display: block;
	width: calc(100% - 32px);
	line-height: 24px;
	text-align: justify;
}
.register-page .terms input[type=checkbox] {
	height: 20px;
	width: 20px;
}
.register-page footer button.disable {
	background-color: var(--colorD);
	color: var(--colorA);
}
.register-page footer button.disable span::before {
	color: var(--colorA) !important;
}
.about-content {
	line-height: 24px;
	text-align: justify;
}
.main section.about-us {
	padding: 12px;
	background-size: cover;
}
section.about-us div.about h2 {
	padding: 15px 0px;
}
section.about-us div.about p {
/*	font-weight: bold;*/
	text-align: justify;
	/*display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
    overflow: hidden;*/
}
section.about-us .why-us {
	padding: 15px 0px;
}
section.about-us .why-us h2 {
	padding: 10px 0px;
}
section.about-us .why-us ul li {
/*	border: 1px solid var(--colorB);*/
	border-radius: 5px;
	background-color: var(--colorA);
}
section.about-us .why-us ul li:not(:last-child) {
	margin-bottom: 20px;
}
section.about-us .why-us ul li span.title {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	width: 100%;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--colorB);
	text-align: center;
}
section.about-us .why-us ul li.active span {
	background-color: var(--colorB);
	color: var(--colorD);
	border-radius: 5px 5px 0px 0px;
}
section.about-us .why-us ul li p {
	display: none;
	padding: 10px 15px;
	color: var(--colorC);
	font-size: 0.9rem;
}
section.about-us .why-us ul li.active p {
	display: block;
	text-align: center;
	color: var(--colorD);
	line-height: 22px;
}
.main section.program,
.main section.services
{
	background-color: var(--colorA);
	padding: 20px 15px 25px 15px;
}
.main.single-course section.program {
	background-color: transparent;
}
.main section.program ul li,
.single-course .related ul li,
.single-article .related ul li
{
	margin-bottom: 20px;
}
.main section.program ul li a,
.single-course .related ul li a,
.single-article .related ul li a
{
	display: block;
	position: relative;
	width: 100%;
	/*border: 2px solid var(--colorB);
	border-radius: 5px;*/
	overflow: hidden;
}
.main section.program ul li a {
	color: var(--colorB);
}
.main section.program ul li a img,
.single-course .related ul li a img,
.single-article .related ul li a img
{
	width: 100%;
	object-fit: cover;
	display: flex;
	aspect-ratio: 3/2;
}
.main section.program ul li a span,
.single-course .related ul li a span
{
	display: flex;
    align-items: flex-end;
	width: 100%;
	height: 33%;
	padding-bottom: 15px;
	color: var(--colorD);
	text-transform: uppercase;
	justify-content: center;
	text-align: center;
	position: absolute;
	bottom: 0px;
	background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--colorB), transparent 30%) 100%);
}
.main section.program ul li h3,
.single-course .related ul li h3,
.single-article .related ul li h3
{
	text-align: center;
	text-transform: uppercase;
	color: var(--colorB);
	padding-top: 10px;
}
.main section.schedule,
.main section.join-us
{
	padding: 20px 15px;
}
section.schedule .card {
	padding: 15px;
	border-radius: 10px;
	border: 2px solid var(--colorB);
}
section.schedule .card .title {
	height: 34px;
	line-height: 34px;
	font-size: 1.16rem;
	font-weight: bold;
	margin-bottom: 5px;
}
section.schedule .card .title:not(:first-child) {
	margin-top: 15px;
}
section.schedule .card .title >span {
	display: inline-block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	border-radius: 50%;
	background-color: var(--colorB);
	font-size: 0.8rem;
	text-align: center;
	margin-right: 10px;
}
section.schedule .card .title >span::before {
	color: var(--colorD);
}
section.schedule .card .tr {
	width: 100%;
	margin-bottom: 6px;
}
section.join-us .card {
	padding: 15px 10px;
	/*border-radius: 5px;
	border: 2px solid var(--colorB);*/
	overflow: hidden;
}
section.join-us .card.hideform {
	aspect-ratio: 3/2;
	position: relative;
}
section.join-us .card.hideform .form {
	position: absolute;
    right: 0px;
    bottom: 40px;
}
section.join-us .card.hideform a {
	display: inline-block;
	height: 40px;
    line-height: 40px;
    border-radius: 20px;
    padding: 0px 20px;
    font-size: 1.05rem;
    color: var(--colorD);
    text-align: center;
    background-color: var(--colorB);
}
section.join-us .card .form {
	width: 56%;
}
.card .form h3 {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.2rem;
	padding-bottom: 10px;
}
.main section.faq {
	padding: 25px 15px 20px 15px;
}
section.faq ul li,
.why-us ul#why-list li
{
	margin-bottom: 10px;
}
section.faq ul li .title,
.why-us ul#why-list li .title
{
	display: inline-block;
	height: 26px;
	line-height: 26px;
	font-size: 1.05rem;
	font-weight: 500;
}
section.faq ul li.active .title,
.why-us ul#why-list li.active .title
{
	color: var(--colorB);
}
section.faq ul li .title >span,
.why-us ul#why-list li .title >span
{
	font-size: 0.8rem;
	padding-right: 8px;
}
section.faq ul li.active .title >span,
.why-us ul#why-list li.active .title >span
{
	transform: rotate(90deg);
    display: inline-block;
    position: relative;
    top: 2px;
    left: -4px;
}
section.faq ul li p,
.why-us ul#why-list li p
{
	display: none;
	text-align: justify;
	line-height: 22px;
	font-size: 1rem;
/*	font-weight: bold;*/
}
section.faq ul li.active p,
.why-us ul#why-list li.active p
{
	display: block;
	padding-top: 5px;
	padding-bottom: 10px;
}
.main section.gallery {
	padding: 15px 15px 25px 15px;
	overflow: hidden;
}
.main section.gallery h1 {
	padding-bottom: 20px;
}
.main section.gallery .latest-img {
	width: 100%;
	aspect-ratio: 3 / 2;
	position: relative;
	margin-bottom: 15px;
}
.main section.gallery .latest-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main section.gallery .latest-img h2 {
	display: flex;
	align-items: center;
    justify-content: center;
	height: 30%;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: unset;
	padding-bottom: 25px;
	text-transform: capitalize;
	text-align: center;
	font-size: 1.5rem;
	background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--colorB), transparent 30%) 100%);
	margin-bottom: 0px;
}
.main section.gallery .latest-img h2 a {
	color: var(--colorD);
	display: inline-block;
    align-self: flex-end;
    line-height: 32px;
}
.main section.gallery .grid {
	display: grid;
    grid-gap: 8px;
    grid-template-columns: 2;
  	grid-template-rows: repeat(3, auto);
  	padding-bottom: 20px;
/*	grid-template-rows: repeat(1fr, 1fr);*/
}
.main section.gallery .grid-style {
	display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  	padding-bottom: 20px;
/*	grid-template-rows: repeat(1fr, 1fr);*/
}
.main section.gallery .img {
	border-radius: 0px;
/*	border: 2px solid var(--colorB);*/
	overflow: hidden;
}
.main section.gallery .grid-style .img {
	aspect-ratio: 1 / 1;
}
.main section.gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*border-radius: 5px;
	border: 2px solid var(--colorB);*/
/*	width: calc(49.2%);*/
}
.main section.gallery .grid .img:first-child {
	grid-column: 1;
  	grid-row: 1 / span 2;
	aspect-ratio: 3 / 6.12;
/*	float: left;*/
}
.main section.gallery .grid .img:nth-child(2)
{
	grid-column: 2;
  	grid-row: 1;
  	aspect-ratio: 1 / 1;
}
.main section.gallery .grid .img:nth-child(3)
{
	grid-column: 2;
  	grid-row: 2;
  	aspect-ratio: 1 / 1;
}
.main section.gallery .grid .img:nth-child(4)
{
	grid-column: 1 / span 2;
  	grid-row: 3;
  	aspect-ratio: 2 / 1;
}
section.promotion {
	padding: 20px;
}
section.promotion .card {
	min-height: 300px;
	border-radius: 8px;
	border: 2px solid var(--colorA);
	text-align: center;
	overflow: hidden;
}
section.promotion .card .banner img {
	width: 100%;
	vertical-align: top;
}
section.promotion .card .content {
	background-size: cover;
	background-color: var(--colorD);
	padding: 15px;
}
section.promotion .card .content .des {
	font-size: 1rem;
	padding: 10px 0px;
}
section.promotion .card .content a.book {
	display: inline-block;
	width: 100%;
	height: 38px;
	line-height: 38px;
	border-radius: 6px;
	background-color: var(--colorB);
	color: var(--colorD);
	font-weight: bold;
}
.blog-container {
	height: calc(100% - 35px);
	position: fixed;
	top: 36px;
	left: 0px;
	right: 0px;
	bottom: 55px;
	padding-top: 55px;
	padding-bottom: 55px;
	overflow-y: scroll;
	background-color: rgba(0, 0, 0, 1);
	z-index: 99;
}
.blog-container section.article {
	padding: 0px 10px 25px 10px;
	color: #ffffff;
}
.blog-container section.article h1 {
	font-size: 1.1rem;
	line-height: 24px;
	position: relative;
	padding-top: 15px;
	padding-right: 50px;
	padding-bottom: 15px;
}
.blog-container section.article h1 >a span {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 31px;
	font-size: 0.6rem;
	background-color: #cccccc;
	text-align: center;
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 15px);
	right: 0px;
}
.blog-container section.article h1 >a span::before {
	color: var(--colorB);
}
.blog-container section.article img {
	width: 100% !important;
	margin-bottom: 10px;
}
.blog-container section.article .content-text p {
	text-align: justify !important;
	line-height: 26px;
	font-size: 1.08rem;
}
.blog-container section.article .content-text p a {
	color: var(--colorA);
}
section.article .other-blog h3 {
	text-align: center;
	padding-top: 15px;
	padding-bottom: 15px;
}
section.article .other-blog .article {
	position: relative;
}
.main section.articles {
	padding: 10px 10px 30px 10px;
	overflow: hidden;
}
section.articles .input-search {
	height: 36px;
	line-height: 34px;
	border-radius: 5px;
	border: 1px solid #eeeeee;
	background-color: #f1f1f1;
	position: relative;
	margin-bottom: 12px;
}
section.articles .input-search input {
	width: 100%;
	padding: 5px 40px 5px 15px;
	border: none;
	background-color: transparent;
	font-size: 1.1rem;
}
section.articles .input-search input:focus {
	border: none;
	outline: none;
}
section.articles .input-search >span {
	position: absolute;
	top: 1px;
	right: 0px;
	display: inline-block;
	height: 34px;
	line-height: 34px;
	width: 36px;
	text-align: center;
}
section.articles .input-search >span::before {
	color: var(--colorC);
}
section.articles .input-search >span:hover {
	cursor: pointer;
}
section.articles ul.tags {
	overflow: hidden;
	overflow-x: scroll;
	white-space: nowrap;
}
section.articles ul.tags li {
	display: inline-block;
	height: 32px;
	line-height: 32px;
	border-radius: 5px;
/*	border: 1px solid #eeeeee;*/
	background-color: #f1f1f1;
	padding: 0px 10px;
/*	float: left;*/
	margin-right: 15px;
	margin-bottom: 12px;
}
section.articles ul.tags li.active {
	background-color: var(--colorA);
}
section.articles ul.tags li a {
	font-size: 1rem;
	display: inline-block;
	width: 100%;
}
section.articles ul.tags li.active a {
	color: var(--colorD);
}
.single-course section.articles {
/*	height: 100%;*/
}
section.articles .article {
	width: 100%;
	margin-bottom: 10px;
	position: relative;
}
section.articles .article >a {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	/*border-radius: 5px;
	border: 2px solid var(--colorB);*/
	overflow: hidden;
	margin-bottom: 10px;
	position: relative;
}
section.articles .article img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}
section.articles .article .des,
section.article .other-blog .article .des
{
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	padding: 20px;
	font-size: 0.9rem;
	color: #ffffff;
	line-height: 24px;
	text-align: justify;
	background-color: rgba(0, 0, 0, 0.6);
}
section.articles .article .des h3,
section.article .other-blog .article .des h3
{
	line-height: 24px;
	font-size: 1rem;
	text-align: center;
	padding-bottom: 10px;
	color: var(--colorD);
}
section.articles .article .des h3 a,
section.article .other-blog .article .des h3 a
{
	color: var(--colorD);
}
section.articles .article .des p,
section.article .other-blog .article .des p
{
	text-align: justify;
	font-size: 1rem;
}
section.articles .article .des a.showmore,
section.article .other-blog .article .des a.showmore
{
	display: inline-block;
	height: 24px;
	line-height: 24px;
	width: 50px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 12px;
	border: 1px solid #ffffff;
	margin-left: calc(50% - 25px);
}
section.articles .article .des span.icon-arrow-right1,
section.article .other-blog .article .des span.icon-arrow-right1
{
	font-size: 0.75rem;
	/*float: right;
	position: relative;
  top: 5px;*/
}
section.articles .article h3 {
	text-align: left;
	font-size: 1.1rem;
	font-weight: bold;
}
section.articles .article p {
	text-align: left;
}
.main .wrap-content {
	height: 100%;
	max-width: 100%;
/*	padding-top: 100px;*/
	padding-bottom: 60px;
	overflow-y: auto;
	overflow-x: hidden;
/*	height: calc(100% - 160px);*/
	
}
.main .wrap-content.multilang {
	padding-top: 132px;
}
.main.page-service .wrap-content,
.main.page-info .wrap-content
{
	height: calc(100% - 0px);
}
.main.page-service .wrap-content {
	height: calc(100% - 60px);
}
.main .wrap-content >.slide {
	width: 100%;
	/*height: 55%;*/
	background-color: #eeeeee;
	position: relative;
}
.main .wrap-content >.slide.slide-right {
	/*height: 55%;*/
}
.main .wrap-content >.slide img {
  	width: 100%;
  	height: auto;
  	vertical-align: top;
	/*object-fit: cover;*/
}
.main .wrap-content >.slide .text {
	position: absolute;
	width: 70%;
	top: 10%;
	left: 15%;
}
.main .wrap-content >.slide.slide-right .text {
	width: 66%;
	left: unset;
	right: 0px;
	text-align: left;
}
.main .wrap-content >.slide p {
	font-size: 2.2rem;
	font-weight: 800;
	word-spacing: 5px;
	font-style: italic;
	text-transform: capitalize;
	font-family: "Roundhand", cursive;
	/*margin-bottom: 15px;*/
}
.main .wrap-content >.slide.slide-right .text p {
	font-size: 1.22rem;
	text-transform: unset;
	margin-bottom: 15px;
}
.main .wrap-content >.slide .button {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 28px;
}
.main .wrap-content >.slide >a {
	display: inline-block;
	width: 48px;
	height: 48px;
	line-height: 55px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	position: absolute;
	top: calc(50% - 24px);
	left: calc(50% - 24px);
	z-index: 99;
}
.main .wrap-content >.slide a span {
	font-size: 1.2rem;
}
.main .wrap-content >.slide a span::before {
	color: var(--colorD);
}
.main .wrap-content >.slide iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 100%;
    width: 100%;
}
.main .wrap-content >.wrap-container {
	padding: 7px;
}
.main .wrap-content .loading {
	position: fixed;
  top: 36px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main .wrap-content .loading.load-product {
	height: 1px;
	bottom: unset;
}
.main .wrap-content .search-input,
.main header .search-input
{
	padding: 7px 15px;
  position: fixed;
  top: 36px;
  left: 0px;
  right: 0px;
  z-index: 109;
  background-color: #f4f4f4;
}
.main .wrap-content .loading .search-input {
	text-align: center;
}
.main .wrap-content .search-input .input,
.main .wrap-content .search-input .not-input,
.main .header-top .input,
.main header .search-input .input
{
	position: relative;
	height: 40px;
}
.main .header-top .input {
	padding-left: 10px;
  padding-right: 10px;
}
.main .wrap-content .search-input .not-input span.title {
	display: inline-block;
  width: calc(100% - 80px);
  text-align: center;
  margin-top: 9px;
/*  margin-left: calc(25% - 40px);*/
  color: var(--colorA);
  font-size: 1.15rem;
/*  font-weight: bold;*/
}
.main .wrap-content .loading >img {
	width: 80px;
	border-radius: 50%;
	background-color: #ffffff;
}
.main .wrap-content .search-input .input img,
.main .wrap-content .loading .search-input img,
.main .wrap-content .search-input .not-input img
{
	width: 36px;
	position: absolute;
	top: 0px;
	left: 0px;
	border-radius: 50%;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.main .wrap-content .loading .search-input img,
.main .runload .search-input img,
.main .wrap-content .loading >img
{
	box-shadow: unset;
	position: unset;
	-webkit-animation:spin 0.5s linear infinite;
  -moz-animation:spin 0.5s linear infinite;
  animation:spin 0.5s linear infinite;
}
.main .wrap-content .search-input .not-input img {
	position: relative;
	left: calc(50% - 60px);
	background-color: #ffffff;
/*	float: right;*/
}
.main .wrap-content .search-input .input input,
.main .header-top .input input,
.main header .search-input input
{
	width: 100%;
	height: 40px;
	line-height: 38px;
	border: 1px solid #dddddd;
	border-radius: 20px;
	padding: 0px 30px 0px 40px;
	font-size: 0.9rem;
}
.main .wrap-content .search-input .input input:focus,
.main .wrap-content .search-input .input input:active,
.main .header-top .input input:focus,
.main .header-top .input input:active,
.main header .search-input .input input:focus,
.main header .search-input .input input:active
{
	outline: none;
	border-color: var(--colorA);
}
.main .wrap-content .search-input .input .icon-search,
.main .wrap-content .search-input .input .icon-x,
.main .header-top .input .icon-search,
.main .header-top .input .icon-x,
.main header .search-input .input .icon-search,
.main header .search-input .input .icon-x
{
	position: absolute;
	top: 14px;
  right: 15px;
  font-size: 0.95rem;
}
.main .wrap-content .search-input .input .icon-search,
.main .header-top .input .icon-search,
.main header .search-input .input .icon-search
{
	right: unset;
	left: 12px;
}
.main .header-top .input .icon-search {
	top: 19px;
  left: 20px;		
}
.main .wrap-content .search-input .input .icon-x,
.main .header-top .input .icon-x,
.main header .search-input .input .icon-x
{
	font-size: 0.6rem;
  top: 6px;
  right: 3px;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
}
.main .header-top .input .icon-x {
	top: 11px;
  right: 15px;
}
.main .wrap-content .search-input .input .icon-search::before,
.main .header-top .input .icon-search::before,
.main header .search-input .input .icon-search::before
{
	color: var(--colorB);
}
.main .wrap-content .search-input .input .icon-x::before,
.main .header-top .input .icon-x::before,
.main header .search-input .input .icon-x::before
{
	color: var(--colorB);
}
.main .wrap-content .search-input .not-input span.tag {
	display: inline-block;
	height: 30px;
	line-height: 28px;
	border: 1px solid var(--colorA);
	border-radius: 15px;
	padding: 0px 12px;
	font-size: 0.85rem;
	color: var(--colorC);
/*	float: left;*/
	margin-right: 5px;
	position: relative;
}
.main .wrap-content .search-input .not-input span.tag.service {
	border-color: var(--colorB);
}
.main .wrap-content .search-input .not-input span.tag.not-select {
	border: 1px solid #f4f4f4;
  background-color: #ffffff;
  color: var(--colorC);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px;
}
.main .wrap-content .search-input .not-input span.tag span,
.main .wrap-content .wrap-container >.wrap-tags span.tag span
{
	display: inline-block;
	height: 30px;
	line-height: 30px;
	font-size: 0.45rem;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: rgba(0, 176, 235, 0.75);
  text-align: center;
  border-radius: 15px;
}
.main .wrap-content .search-input.sticky .not-input span.tag span {
	height: 26px;
	line-height: 26px;
}
.main .wrap-content .wrap-container >.wrap-tags span.tag span {
	height: 24px;
	line-height: 24px;
}
.main .wrap-content .search-input .not-input span.tag.service span,
.main .wrap-content .wrap-container >.wrap-tags span.tag.service span
{
	background-color: rgba(230, 0, 134, 0.75);
}
.main .wrap-content .search-input .not-input span.tag span::before,
.main .wrap-content .wrap-container >.wrap-tags span.tag span::before
{
	color: var(--colorD);
}
.main .wrap-content .search-input .not-input span.icon-search {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	width: 40px;
	padding-left: 8px;
	/*text-align: center;
	border-radius: 50%;
	background-color: var(--colorB);*/
	font-size: 1.1rem;
	font-weight: bold;
	float: left;
	position: relative;
  top: 2px;
/*	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;*/
}
.main .wrap-content .search-input .not-input span.icon-search::before {
	color: var(--colorB);
}
.main .wrap-content .search-input .wrap-tags {
	float: left;
	width: calc(100% - 81px);
	height: 40px;
  line-height: 40px;
  display: inline-block;
  padding-left: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.main .wrap-content .wrap-container >.wrap-tags {
	padding: 3px 0px;
	padding-bottom: 10px;
	display: flex;
}
.main .wrap-content .wrap-container >.wrap-tags span.tag {
	position: relative;
	height: 24px;
	line-height: 24px;
	padding: 0px 10px;
	border-radius: 12px;
	font-size: 0.8rem;
	color: var(--colorD);
	background-color: var(--colorA);
	float: left;
	margin-right: 6px;
}
.main .wrap-content .wrap-container >.wrap-tags span.tag.service {
	background-color: var(--colorB);
}
.main .wrap-content .wrap-container .grid-gallery,
.single-course .wrap-content .grid-gallery,
.single-article .wrap-content .grid-gallery,
.overlay-search-products >.grid-gallery,
.main .product-detail .grid-gallery
{
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 7px;
	padding-top: 10px;
}
.main .wrap-content .wrap-container .grid-gallery {
	padding-top: 0px;
}
.overlay-search-products >.grid-gallery {
	background-color: #ffffff;
	padding-bottom: 80px;
}
.main .product-detail .grid-gallery {
	padding-top: 0px;
	padding-left: 7px;
	padding-right: 7px;
}
.main .wrap-content .wrap-container .grid-gallery >div,
.single-course .wrap-content .grid-gallery >div,
.single-article .wrap-content .grid-gallery >div,
.overlay-search-products .grid-gallery >div,
.main .product-detail .grid-gallery >div
{
/*	aspect-ratio: 1 / 1;*/
	position: relative;
}
.main .wrap-content .wrap-container .grid-gallery >div img,
.single-course .wrap-content .grid-gallery >div img,
.single-article .wrap-content .grid-gallery >div img,
.overlay-search-products >.grid-gallery >div img,
.main .product-detail .grid-gallery >div img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}
.main .wrap-content .wrap-container .grid-gallery >div .product-info,
.single-course .wrap-content .grid-gallery >div .product-info,
.single-article .wrap-content .grid-gallery >div .product-info,
.overlay-search-products .grid-gallery >div .product-info,
.main .product-detail .grid-gallery >div .product-info,
#findDesigns .service-designs .group-designs >div .product-info
{
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff;
	padding: 20px;
	align-items: center;
	justify-content: center;
}
.main .wrap-content .wrap-container .grid-gallery >div .product-info h2,
.single-course .wrap-content .grid-gallery >div .product-info h2,
.single-article .wrap-content .grid-gallery >div .product-info h2,
.overlay-search-products .grid-gallery >div .product-info h2,
.main .product-detail .grid-gallery >div .product-info h2,
#findDesigns .service-designs .group-designs >div .product-info h2
{
	font-size: 1.25rem;
	padding-bottom: 10px;
	color: #ffffff;
}
.main .wrap-content .wrap-container .grid-gallery >div .product-info p,
.single-course .wrap-content .grid-gallery >div .product-info p,
.single-article .wrap-content .grid-gallery >div .product-info p,
.overlay-search-products .grid-gallery >div .product-info p,
.main .product-detail .grid-gallery >div .product-info p,
#findDesigns .service-designs .group-designs >div .product-info p
{
	text-align: justify;
	font-size: 1rem !important;
	line-height: 24px;
}
.main .wrap-content .wrap-container .grid-gallery >div .product-info p span,
.single-course .wrap-content .grid-gallery >div .product-info p span,
.single-article .wrap-content .grid-gallery >div .product-info p span,
.overlay-search-products .grid-gallery >div .product-info p span,
.main .product-detail .grid-gallery >div .product-info p span
{
	font-size: 1rem !important;
}
.main .wrap-content .wrap-container .grid-gallery >div .product-info a.showmore,
.single-course .wrap-content .grid-gallery >div .product-info a.showmore,
.single-article .wrap-content .grid-gallery >div .product-info a.showmore,
.overlay-search-products .grid-gallery >div .product-info a.showmore,
.main .product-detail .grid-gallery >div .product-info a.showmore
{
	display: inline-block;
	height: 24px;
	line-height: 24px;
	width: 50px;
	text-align: center;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 12px;
	border: 1px solid #ffffff;
	font-size: 0.7rem;
	margin-top: 10px;
}
.main .wrap-content .wrap-container .grid-gallery >div .product-info p span.icon-arrow-right1,
.single-course .wrap-content .grid-gallery >div .product-info p span.icon-arrow-right1,
.single-article .wrap-content .grid-gallery >div .product-info p span.icon-arrow-right1,
.main .product-detail .grid-gallery >div .product-info p span.icon-arrow-right1
{
	font-size: 0.7rem;
/*	margin-left: 10px;*/
}
.overlay-search-products {
	position: fixed;
	top: 55px;
	left: 0px;
	right: 0px;
	z-index: 9999;
	height: auto;
	overflow-y: auto;
}
.overlay-search-products.has-product {
	top: 90px;
	height: calc(100% - 144px);
	z-index: 99;
	background-color: rgba(255, 255, 255, 1.0);
	padding-left: 7px;
  padding-right: 7px;
}
.main .wrap-content >.wrap-container .tags,
.main .wrap-content.product-detail .tags,
.overlay-search-products >.tags,
.main header >.tags
{
	padding: 10px 20px;
	padding-bottom: 0px;
	position: fixed;
  top: 90px;
  left: 0px;
  right: 0px;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	overflow: hidden;
}
.overlay-search-products >.tags {
	top: 55px;
	padding-bottom: 0px;
}
.main header >.tags {
	top: 90px;
	z-index: 999;
}
.main .wrap-content >.wrap-container .tags h5
{
	padding-bottom: 10px;
}
.main .wrap-content >.wrap-container .tags .service-tag,
.main .wrap-content >.wrap-container .tags .design-tag
{
	margin-bottom: 10px;
	overflow: hidden;
}
.main .wrap-content >.wrap-container .tags button {
	border: 1px solid var(--colorA);
	height: 32px;
	line-height: 30px;
	border-radius: 16px;
	background-color: var(--colorD);
	text-transform: uppercase;
	color: var(--colorA);
	font-size: 0.9rem;
	width: 160px;
	text-align: center;
	position: relative;
	left: calc(50% - 80px);
}
.main .wrap-content >.wrap-container .tags .tag-rows {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.main .wrap-content >.wrap-container .tags span.tag,
.main .wrap-content.product-detail .tags span.tag,
.overlay-search-products >.tags span.tag,
.main header >.tags span.tag
{
	display: inline-block;
	height: 26px;
	line-height: 24px;
	border: 1px solid var(--colorA);
	border-radius: 13px;
	padding: 0px 10px;
	font-size: 0.86rem;
	color: var(--colorC);
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	background-color: #ffffff;
/*	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/
}
.main .wrap-content >.wrap-container .tags span.stag.tag,
.overlay-search-products >.tags span.stag.tag,
.main header >.tags span.stag.tag
{
	border-color: var(--colorB);
}
.main .wrap-content >.wrap-container .tags .tag-rows span.tag {
	margin-right: unset;
	margin-bottom: unset;
	text-align: center;
	padding: 0px;
}
.main .wrap-content >.wrap-container .tags .service-tag span.tag {
	border-color: var(--colorB);
}
.main .wrap-content >.wrap-container .tags span.tag.active,
.main .wrap-content.product-detail .tags span.tag.active,
.overlay-search-products >.tags span.tag.active,
.main header >.tags span.tag.active
{
	color: var(--colorD);
	background-color: var(--colorA);
}
.main .wrap-content >.wrap-container .tags span.stag.tag.active,
.overlay-search-products >.tags span.stag.tag.active,
.main header >.tags span.stag.tag.active
{
	background-color: var(--colorB);
}
.main .wrap-content >.wrap-container .tags .service-tag span.tag.active,
.main header >.tags .service-tag span.tag.active
{
	background-color: var(--colorB);
}
.wrap-content.product-detail h1 {
	background-color: #f4f4f4;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 8px;
	color: #222222;
}
.main .wrap-content .wrap-photos {
	padding-bottom: 0px;
}
.main .wrap-content .wrap-photos video.item {
	width: 100%;
	height: auto;
}
.main .wrap-content .wrap-photos img {
	width: 100%;
	vertical-align: top;
/*	margin-bottom: 15px;*/
}
.main .wrap-content .buttons {
	padding: 8px 10px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 6px;
}
.main .wrap-content .buttons button {
	display: inline-block;
	height: 36px;
	line-height: 34px;
	border: 1px solid var(--colorA);
	border-radius: 3px;
	background-color: #ffffff;
	font-size: 0.85rem;
	text-align: left;
	padding-left: 10px;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.main .wrap-content .buttons button.save {
	background-color: var(--colorB);
	color: var(--colorD);
	border-color: var(--colorB);
}
.main .wrap-content .buttons button.add {
	background-color: var(--colorA);
	color: var(--colorD);
}
.main .wrap-content .buttons button span {
	margin-right: 10px;
	position: relative;
	top: 1px;
}
.main .wrap-content .buttons button span.icon-info1 {
	font-size: 0.95rem;
}
.main .wrap-content .buttons button.save span::before {
	color: var(--colorD);
}
.main .wrap-content .image-tags {
	display: flex;
  justify-content: center;
  flex-flow: wrap;
/*  flex-wrap: nowrap;*/
  margin-top: 10px;
  margin-bottom: 5px;
  padding-bottom: 2px;
/*  overflow-x: scroll;*/
}
.main .wrap-content .image-tags >span {
	display: inline-block;
	height: 20px;
	line-height: 18px;
	padding: 0px 9px;
	border-radius: 10px;
	border: 1px solid #f4f4f4;
	background-color: #ffffff;
	color: var(--colorC);
	font-size: 0.85rem;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	float:left;
	margin-right: 12px;
	margin-bottom: 8px;
}
.main .wrap-content .wrap-photos .counter {
	padding-top: 10px;
	text-align: center;
	font-size: 1rem;
}
.main .wrap-content .other-design {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 8px;
	padding-left: 10px;
	padding-right: 10px;
}
.main .wrap-content .other-design >div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.main .wrap-content .owl-carousel {
  position: relative;
/*  margin-left: 8px;*/
/*  width: calc(100% - 16px);*/
}
.main .wrap-content .owl-nav button {
  position: absolute;
  width: 18px;
  height: 34px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.5) !important;
  top: calc(50% - 17px);
  z-index: 99;
}
.main .wrap-content .owl-nav button.owl-prev {
  left: -5px;
}
.main .wrap-content .owl-nav button.owl-next {
  right: -5px;
}
.main .wrap-content .content {
	padding: 0px 15px 20px 15px;
	text-align: justify;
	font-size: 1rem;
	line-height: 24px;
}
.main .wrap-content .content.policy {
	background-color: #878787;
	padding-bottom: 0px !important;
}
.main.single-article .content.policy {
	background-color: unset;
	padding-top: 54px;
}
.main .wrap-content .content h1 {
	font-size: 1.5rem;
	font-weight: normal;
	text-align: left;
	padding-top: 10px;
	padding-bottom: 15px;
	line-height: 32px;
}
.main .wrap-content .button-product {
/*	background-color: var(--colorD);*/
	padding: 10px 0px;
	/*position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 99;*/
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
}
.main .wrap-content .button-product button {
	background-color: var(--colorD);
	color: var(--colorB);
	height: 50px;
	line-height: 40px;
	text-align: center;
	font-size: 0.9rem;
	border-radius: 8px;
	border: 0.12rem solid var(--colorB);
	position: relative;
	padding-left: 18px;
}
.main .wrap-content .button-product button.add-cart {
	background-color: var(--colorA);
	border-color: var(--colorA);
	text-transform: uppercase;
	color: var(--colorD);
	line-height: 45px;
	font-size: 0.8rem;
  padding-left: 15px;
}
.main .wrap-content .button-product button span {
	position: absolute;
	left: 12px;
  top: 14px;
	font-size: 1.1rem;
}
.main .wrap-content .button-product button.add-cart span
{
	
}
.main .wrap-content .button-product button span::before {
	color: var(--colorB);
}
.main .wrap-content .button-product button.add-cart span::before {
	color: var(--colorD);
}
.main .wrap-content .my-account,
.main .wrap-content .my-project
{
	padding-top: 36px;
}
.main .wrap-content .my-account.cashback-his
{
	height: 100%;
}
.main .wrap-content .my-account .active-membership {
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 80px;
	z-index: 99;
	display: flex;
	height: 50px;
	justify-content: center;
	align-items: center;
}
.main .wrap-content .my-account .active-membership a {
	display: inline-block;
	position: relative;
	height: 42px;
	line-height: 40px;
	border: 1px solid var(--colorA);
	border-radius: 21px;
	text-align: center;
	font-size: 1.1rem;
	color: var(--colorA);
	width: calc(100% - 30px);
	background-color: #ffffff;
}
.main .wrap-content .my-account .active-membership a img {
	width: 36px;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 2px;
	background-color: #000000;
}
.main .wrap-content .my-project {
	height: 100%;
	position: relative;
	/*padding-left: 15px;
	padding-right: 15px;*/
}
.main .wrap-content .my-project .card {
	border-radius: 0px;
	box-shadow: none;
	padding: 0px 15px;
	margin-bottom: 0px;
}
.main .wrap-content .my-project .card .top {
	height: 58px;
	line-height: 58px;
	border-bottom: 1px solid #acacac;
}
a.link-button {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	background-color: #ffffff;
	border-radius: 3px;
	padding: 0px 10px;
	color: var(--colorA);
	font-size: 0.9rem;
}
.main .wrap-content .my-project .card .top a {
	float: right;
	position: relative;
	top: 14px;
}
.main .wrap-content .my-project .design-upload {
	padding: 15px;
}
.my-project .design-upload .title {
	/*height: 45px;
	line-height: 45px;*/
	background-color: var(--colorA);
	color: #ffffff;
	overflow: hidden;
  display: flex;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 24px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
	margin-bottom: 15px;
}
.my-project .design-upload .title span.icon-heart-arrow {
	margin-right: 6px;
	font-size: 2.2rem;
	position: relative;
  top: 3px;
}
.my-project .design-upload .title span.count {
	float: right;

}
.main .wrap-content .my-account .customer-head {
	background-color: #f4f4f4;
	padding: 12px 15px;
	overflow: hidden;
	color: var(--colorC);
}
.my-account .customer-head span.icon-account,
.my-account .customer-head span.avatar
{
	display: inline-block;
	height: 45px;
	line-height: 45px;
	width: 45px;
	text-align: center;
	border-radius: 50%;
	background-color: #f4f4f4;
	font-size: 1rem;
	float: left;
}
.my-account .customer-head span.icon-account::before {
	color: var(--colorA);
}
.my-account .customer-head span.avatar {
	overflow: hidden;
	background-color: #ffffff;
}
.my-account .customer-head span.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.my-account .customer-head .customer-name,
.main .wrap-content .my-account .customer-head >.name
{
	float: right;
	width: calc(100% - 55px);
	height: 45px;
	position: relative;
}
.my-account .customer-head .customer-name {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.my-account .customer-head .membership {
	display: flex;
	flex-direction: column;
}
.my-account .customer-head .membership .credit {
	background-color: #ffffff;
	display: flex;
    justify-content: space-between;
    align-items: center;
	height: 26px;
	border-radius: 13px;
	font-family: var(--font-heading), cursive;
	font-size: 1.08rem;
	font-style: italic;
	font-weight: 600;
	color: var(--colorB);
	text-align: right;
	padding-right: 8px;
}
.my-account .customer-head .membership .credit .icon-creditm {
	display: inline-block;
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
    background-color: var(--colorB);
    border-radius: 50%;
    margin-right: 8px;
}
.my-account .customer-head .membership .credit .icon-creditm::before
{
	color: var(--colorD);
}
.my-account .customer-head .membership small {
	font-size: 0.6rem;
	opacity: 0.8;
	padding-top: 5px;
}
.main .wrap-content .my-account .customer-head >.name {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 10px;
}
.my-account .customer-head .customer-name strong {
	display: inline-block;
	width: 100%;
	color: var(--colorA);
	font-weight: normal;
}
.main .wrap-content .my-account .customer-head >.name strong {
	color: var(--colorA);
}
.main .wrap-content .my-account .customer-head >.name small {

}
.my-account .customer-head .customer-name span.icon-edit {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: #ffffff;
	border-radius: 50%;
	position: absolute;
  	top: 9px;
  	right: 0px;
  	font-size: 0.68rem;
}
.my-account .customer-head .customer-name span.icon-edit::before {
	color: var(--colorA);
}
.main .wrap-content .my-account.cashback-his .customer-head {
	position: relative;
	color: var(--colorA);
}
.my-account.cashback-his .customer-head >span {
	font-size: 0.65rem;
	position: absolute;
	top: 18px;
	right: 15px;
}
.my-account.cashback-his .customer-head >span::before {
	color: var(--colorB);
}
.main .wrap-content .my-account.cashback-his .body {
	height: calc(100% - 48px);
	padding: 0px;
	position: relative;
}
.my-account.cashback-his .body ul li {
	display: flex;
	width: 100%;
	height: 65px;
	align-items: center;
	justify-content: space-between;
	background-color: color-mix(in srgb, var(--colorA) 10%, transparent);
	padding: 0px 15px;
}
.my-account.cashback-his .body ul li.used {
	background-color: color-mix(in srgb, var(--colorB) 10%, transparent);
}
.my-account.cashback-his .body ul li >div {
	display: flex;
	flex-direction: column;
}
.my-account.cashback-his .body ul li >div small {
	font-size: 0.8rem;
}
.my-account.cashback-his .body ul li >div.text-right span {
	color: var(--colorA);
}
.my-account.cashback-his .body ul li.used >div.text-right span {
	color: var(--colorB);
}
.my-account.cashback-his .body .total-credit {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 55px;
	background-color: var(--colorB);
	color: #ffffff;
	font-family: var(--font-heading), cursive;
	font-style: italic;
	font-size: 1.1rem;
	font-weight: 600;
	padding: 0px 20px;
}
.my-account.cashback-his .body .total-credit span.price {
	font-size: 1.4rem;
}
.main .wrap-content .my-account .address {
	padding: 10px 0px;
}
.main .wrap-content .my-account .address label {
	display: inline-block;
	padding-bottom: 10px;
}
.main .wrap-content .my-account .address address {
	font-style: normal;
	font-size: 1rem;
	display: flex;
	align-items: center;
}
.main .wrap-content .my-account .address address span {
	margin-right: 10px;
	position: relative;
	top: 4px;
}
.main .wrap-content .my-account button.btn-add-bus {
	display: inline-block;
	width: 100%;
	height: 42px;
	line-height: 40px;
	text-align: center;
	border: 1px solid var(--colorA);
	color: var(--colorA);
	border-radius: 3px;
	background-color: #ffffff;
	font-size: 0.9rem;
	margin-top: 150px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
}
.main .wrap-content .created-business {
	padding-top: 80px;
}
.main .wrap-content .created-business label {
	display: inline-block;
	width: 100%;
	padding-bottom: 20px;
}
.main .wrap-content .created-business p {
	text-align: center;
	margin-bottom: 5px;
}
.main .wrap-content .created-business strong {
	display: inline-block;
	width: 100%;
	text-align: center;
}
.main .wrap-content .created-business a {
	display: inline-block;
	width: 100%;
	height: 42px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--colorA);
  color: var(--colorA);
  border-radius: 3px;
  background-color: #ffffff;
  font-size: 0.9rem;
  margin-top: 25px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px;
}
.my-account .body {
	padding: 10px 15px;
}
.my-account .business-card {
	background-color: #f4f4f4;
	padding: 10px 15px;
	border-radius: 8px;
	margin-bottom: 20px;
}
.my-account .business-card h3 {
	font-size: 1.1rem;
/*	font-weight: bold;*/
	padding-bottom: 5px;
}
.my-account .business-card h3 span {
	font-weight: normal;
	margin-right: 5px;
}
.my-account .business-card address {
	font-size: 0.8rem;
	font-style: normal;
}
.my-account .body h4 {
	font-size: 1rem;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
}
.my-account .body h5 {
	padding-bottom: 10px;
}
.my-account .body h5 span {
	float: right;
	font-size: 0.8rem;
}
.my-account .body h5 span::before {
	color: var(--colorA);
}

.my-account .body .order {
	border-radius: 4px;
	border: 1px solid #eeeeee;
	border-top: 0px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	margin-bottom: 20px;
}
.my-account .body .order .header-order {
	display: flex;
	height: 42px;
	align-items: center;
	justify-content: space-between;
	background-color: var(--colorA);
	color: #ffffff;
	font-size: 0.9rem;
	padding: 0px 10px;
}
.order .header-order small[class^='status-']
{
	display: inline-block;
	height: 22px;
	line-height: 22px;
	padding: 0px 8px;
	border-radius: 11px;
	font-size: 0.68rem;
	background-color: #ffffff;
	color: #34ced5;
}
.order .header-order small.status-4 {
    color: #edda05;
}
.order .header-order small.status-2 {
    color: #9dc183;
}
.my-account .body .order ul {
	padding: 10px;
}
.my-account .body .order ul li {
	display: flex;
	height: 34px;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	font-size: 0.9rem;
}

.my-account .project-card {
	display: flex;
	padding: 10px 15px;
	border-radius: 8px;
/*	border: 1px solid #f4f4f4;*/
	background-color: var(--colorB);
	color: #ffffff;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
	margin-bottom: 25px;
}
.my-account .project-card.marketing {
	background-color: var(--colorA);
}
.my-account .project-card.three {
	background-color: #007094;
}
.my-account .project-card.first {
	margin-bottom: 0px;
	border-radius: 8px 8px 0px 0px;
}
.my-account .project-card.last {
	border-radius: 0px 0px 8px 8px;
}
.my-account .project-card div.icon {
	flex: 1;
	display: flex;
	align-items: center;
	width: 50px;
	font-size: 2rem;
}
.my-account .project-card div.icon .icon-house-window {
	font-size: 1.8rem;
}
.my-account .project-card .right-content {
	width: calc(100% - 50px);
}
.my-account .project-card .right-content .top {
	font-size: 1rem;
}
.my-account .project-card span.status {
	float: right;
	color: var(--colorB);
	font-size: 1rem;
}
.my-account .project-card span.status.Completed {
	color: var(--colorA);
}
.my-account .project-card small {
/*	opacity: 0.6;*/
	font-size: 90%;
	
}
.my-account .project-card small[class^="status"],
.my-project .card .top small[class^="status"]
{
	font-size: 80%;
	display: inline-block;
	height: 22px;
	line-height: 22px;
	padding: 0px 12px;
	border-radius: 11px;
	background-color: #ffffff;
	color: #34ced5;
}
.my-project .card .top small[class^="status"] {
	color: #ffffff;
	background-color: #34ced5;
}
.my-account .project-card small i {
	float: left;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 2px;
	margin-right: 6px;
	background-color: #34ced5;
	position: relative;
    top: 2px;
}
.my-account .project-card small.status-4
{
	color: #edda05;
}
.my-project .card .top small.status-4 {
	background-color: #edda05;
}
.my-account .project-card small i.status-4 {
	background-color: #f2e44d;
}
.my-account .project-card small.status-2
{
	color: #9dc183;
}
.my-project .card .top small.status-2 {
	background-color: #9dc183;
}
.my-account .project-card small i.status-2 {
	background-color: #9dc183;
}
.my-account .project-card .tr {
	padding-top: 5px;
	font-size: 1rem;
}
.my-account .project-card .tr .price {
	float: right;
	font-size: 1.05rem;
}
.my-account button.signout
{
	position: fixed;
/*	right: 15px;*/
	bottom: 40px;
	z-index: 999;
	height: 45px;
	line-height: 43px;
	width: 114px;
	padding: 0px;
	text-align: center;
	background-color: var(--colorD);
	color: var(--colorB);
	border-radius: 4px;
	border: 1px solid var(--colorB);
	font-size: 1.05rem;
}
.wrap-content .my-project button.close {
	background-color: transparent;
	border: none;
	width: 50px;
	text-align: center;
	position: fixed;
	left: calc(50% - 25px);
	bottom: 20px;
}
.wrap-content .my-project button.close span {
	font-size: 1rem;
}
.wrap-content .my-project button.close span::before {
	color: var(--colorB);
}
.wrap-content .my-project >h4 {
	height: 40px;
	line-height: 40px;
	font-weight: bold;
	font-size: 1rem;
}
.wrap-content .my-project >h4 span.icon-box {
	margin-right: 5px;
	position: relative;
	top: 2px;
}
.wrap-content .my-project >h4 span::before {
	color: var(--colorC);
}
.wrap-content .my-project >h4 span.date {
	float: right;
}
.wrap-content .my-project .table {
/*	border-bottom: 2px solid #acacac;*/
	padding-top: 5px;
	padding-bottom: 10px;
}
.wrap-content .my-project .table .tr {
	height: 30px;
	line-height: 30px;
	font-size: 1rem;
}
.wrap-content .my-project .table .tr span {
	float: right;
}
.wrap-content .my-project .balance {
	height: 35px;
	line-height: 35px;
	font-size: 1rem;
	margin-top: 5px;
	margin-bottom: 8px;
}
.wrap-content .my-project .balance small {
	margin-right: 5px;
	font-weight: normal;
}
.wrap-content .my-project .balance strong {
	float: right;
}
.wrap-content .my-project .card .top {
	font-size: 1rem;
}
.wrap-content .my-project .folder {
/*	padding: 10px 15px;*/
/*	border: 1px solid #dddddd;*/
/*	border-radius: 6px;*/
}
.wrap-content .my-project .folder .top {
	height: 30px;
	line-height: 30px;
	font-size: 1rem;
	color: var(--colorA);
	padding-left: 10px;
	margin-bottom: 15px;
/*	font-weight: bold;*/
}
.wrap-content .my-project .folder .top span {
	font-weight: normal;
	font-size: 1.1rem;
	margin-right: 5px;
}
.wrap-content .my-project .folder .top span::before {
	color: var(--colorA);
}
.wrap-content .my-project .folder .files {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 20px;
}
.wrap-content .my-project .folder .files >div {
	position: relative;
	border-radius: 5px;
/*	aspect-ratio: 1 / 1;*/
	box-shadow: rgba(0, 0, 0, 0.1) 1.95px 1.95px 2.6px;
	overflow: hidden;
}
.wrap-content .my-project .folder .files >div img {
	width: 100%;
	height: auto;
/*	object-fit: cover;*/
}
.wrap-content .my-project .folder .files >div span.icon-chat-comment {
	display: inline-block;
	height: 38px;
	line-height: 38px;
	width: 38px;
	text-align: center;
	font-size: 0.9rem;
	border-radius: 50%;
	background-color: #ffffff;
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 9;
}
.wrap-content .my-project .folder .files >div span.icon-chat-comment i {
	display: inline-block;
	height: 10px;
	width: 10px;
	background-color: var(--colorB);
	border-radius: 50%;
	position: absolute;
	top: 0px;
  right: 3px;
}
.my-project .folder .files >div .info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	z-index: 99;
}
.my-project .folder .files >div .info h3 {
	font-size: 1.2rem;
	padding-bottom: 30px;
}
.my-project .folder .files >div .info a {
	border-radius: 15px;
	padding: 0px 15px;
	font-size: 0.9rem;
}
a.btn {
	display: inline-block;
	height: 34px;
	line-height: 34px;
	border-radius: 17px;
	padding: 0px 18px;
	background-color: var(--colorB);
	color: #ffffff;
	font-size: 0.9rem;
}
a.btn.btn-center {
	display: table;
    margin: 0 auto;
}
.splide__slide {
    background: #4b5954;
    overflow: hidden;
    position: relative;
    z-index: 0;
}
h2.block-title,
h1.block-title
{
	font-family: var(--font-heading), cursive;
	font-weight: 400;
    font-size: var(--font-heading-size);
    color: var(--colorC);
    padding-bottom: 0.3rem;
}
section.home-services {
	padding: 50px 0px 10px 0px;
}
section.home-services h2.block-title {
	padding: 10px 15px 20px 15px;
}
.home-services .service-carousel .item {
	text-align: center;
	font-size: 0.9rem;
}
.home-services .service-carousel span.icon {
	display: inline-block;
	width: 68px;
	height: 68px;
	line-height: 68px;
	text-align: center;
	background-color: #F6EED9;
	border-radius: 50%;
	box-shadow: rgb(99 99 99 / 20%) 2px 2px 4px 1px;
	margin-bottom: 5px;
	position: relative;
}
.home-services .service-carousel span.icon::after {
	content: "";
	display: inline-block;
	width: 68px;
	height: 68px;
	background-color: #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 0px;
    left: 0px;
    z-index: -1;
}
.home-services .service-carousel span.icon img,
.home-services .service-carousel span.icon svg
{
	max-width: 40px;
    max-height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.home-services .service-carousel span.icon svg path {
	fill: var(--colorB);
}
.item h5 {
	line-height: 20px;
	font-size: 0.8rem;
}
.home-services .item h5 {
	word-spacing: 100vw;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span
{
	background-color: var(--colorB);
}
ul.service-simple-list {
	padding: 20px 0px;
}
.single-service .relate-service ul.service-simple-list {
	padding-top: 0px;
	padding-bottom: 00px;
}
ul.service-simple-list li {
	display: inline-block;
	height: 32px;
	width: 100%;
}
ul.service-simple-list li a {
	display: flex;
	width: 100%;
	line-height: 1px;
	color: var(--colorB);
	font-weight: bold;
/*	border-bottom: 1px solid var(--colorC);*/
	position: relative;
}
ul.service-simple-list li a span.name,
ul.service-simple-list li a >span.float-right
{
	display: inline-block;
}
ul.service-simple-list li a span.name {
	padding-right: 5px;
}
ul.service-simple-list li a >span.float-right {
	display: flex;
	flex-grow: 1;
	/*padding-bottom: 3px;
	border-bottom: 1px solid var(--colorB);*/
}
ul.service-simple-list li a >span.float-right span.line {
	display: inline-block;
	padding-bottom: 5px;
	flex-grow: 1;
	border-bottom: 1px solid var(--colorB);
}
ul.service-simple-list li a >span.float-right span.price {
	padding-left: 5px;
}
.main .popular-services {
	padding: 20px;
	overflow: hidden;
}
section.services .tabcontent .img {
	position: relative;
}
section.services .tabcontent .img img {
	width: 100%;
	height: auto;
	vertical-align: top;
}
section.services .tabcontent .img h3 {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 50px;
	line-height: 30px;
	font-size: 2rem;
	color: var(--colorD);
	background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--colorB), transparent 60%) 100%);
}
.main .popular-services .service {
	width: calc(50% - 8px);
	aspect-ratio : 2 / 3;
	float: left;
	overflow: hidden;
	margin-bottom: 20px;
	/*border: 2px solid var(--colorB);
	border-radius: 5px;*/
	position: relative;
}
.page-service section.services .service,
.single-service .relate-service .service
{
	width: calc(50% - 8px);
	aspect-ratio : 2 / 3;
	float: left;
	overflow: hidden;
	margin-bottom: 20px;
	border: 2px solid var(--colorA);
	border-radius: 10px;
	position: relative;
}
.main .popular-services .service .img,
.page-service section.services .service .img,
.single-service .relate-service .service .img
{
	width: 100%;
	height: 100%;
}
.main .popular-services .service:nth-child(odd),
.page-service section.services .service:nth-child(odd)
{
	float: left;
}
.single-service .relate-service .service:nth-child(odd) {
	float: right;
}
.main .popular-services .service:nth-child(odd),
.page-service section.services .service:nth-child(odd)
{
	float: right;
}
.single-service .relate-service .service:nth-child(even) {
	float: left;
}
/*.main .popular-services .service img,
.page-service section.services .service img,
.single-service .relate-service .service img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}*/
.main .popular-services .service div.des,
.page-service section.services .service  div.des,
.single-service .relate-service .service  div.des
{
	position: absolute;
	bottom: 0px;
	height: 33%;
	width: 100%;
	display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--colorB), transparent 30%) 100%);
    padding-bottom: 40px;
}
.main .popular-services .service h3,
.page-service section.services .service h3,
.single-service .relate-service .service h3
{
	font-size: 0.9rem;
	color: var(--colorD);
	text-align: center;
	line-height: 24px;
	padding-bottom: 0px;
}
.main .popular-services .service span.price,
.page-service section.services .service span.price,
.single-service .relate-service .service span.price
{
	display: inline-block;
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 15px;
	font-size: 1.05rem;
	color: var(--colorD);
}
.main.single-article .about-us {
	padding-top: 54px;
}
.main .wrap-content .about-us .content {
	padding: 0px !important;
/*	padding-top: 0px !important;*/
}
.about-us section.intro-section {
	background-color: var(--colorB);
	color: #ffffff;
/*	font-size: 15px;*/
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 15px 30px 15px;
}
.about-us section.intro-section.blue-style {
	background-color: var(--colorA);
}
.about-us .intro-section >p {
	float: left;
	width: 100%;
	line-height: 26px !important;
	text-align: justify;
	font-size: 1.08rem;
	margin-bottom: 15px;
}
.about-us .intro-section .img {
/*	width: calc(45% - 15px);*/
	width: 80%;
	position: relative;
	overflow: unset;
	margin-bottom: 0px !important;
	height: fit-content;
	order: 2;
  margin-left: auto;
  margin-right: auto;
}
.about-us .intro-section .img img {
	margin-top: -0px;
	vertical-align: top;
}
.about-us .intro-section.blue-style .img img {
	margin-top: -0px;
}
.about-us section.mission-section {
	padding: 30px 10px;
/*	padding-bottom: 10px;*/
}
.about-us section.mission-section h2 {
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	color: #ffffff;
	padding-bottom: 30px;
}
.about-us section.mission-section.blue-style h2 {
	color: var(--color-blue);
}
.about-us section.mission-section .mission-content {
/*	display: flex;*/
}
.about-us section.mission-section .mission-content .mission-images {
	width: 100%;
	float: left;
	text-align: center;
	margin-bottom: 10px;
}
.about-us section.mission-section .mission-content .mission-images img {
	width: 75% !important;
}
.about-us section.mission-section.blue-style .mission-content .mission-images img {
	width: 70% !important;
}
.about-us section.mission-section.blue-style .mission-content .mission-images {
	width: 100%;
	text-align: center;
}
.about-us section.mission-section .mission-content .mission-details {
	width: calc(100% - 0px);
/*	order: 2;*/
  margin-left: auto;
/*  padding-top: 0px;*/
}
.about-us section.mission-section.blue-style .mission-content .mission-details {
	width: calc(100% - 0px);
}
.about-us section.mission-section .mission-content .mission-details .mission-item {
	display: inline-block;
	/*height: 66px;
	line-height: 66px;*/
	font-size: 0.9rem;
	font-weight: 500;
	margin-bottom: 25px;
}
.about-us section.mission-section.blue-style .mission-content .mission-details .mission-item {
	height: auto;
	line-height: 50px;
	width: 100%;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.about-us section.mission-section.blue-style .mission-content .mission-details .mission-item img {
	float: unset;
	margin-bottom: 10px;
}
.about-us section.mission-section.blue-style .mission-content .mission-details .mission-item i {
	text-align: center;
}
.about-us section.mission-section .mission-content .mission-details .mission-item:last-child {
	margin-bottom: 20px;
}
.about-us footer.footer-section {
	background-color: var(--colorB);
  color: #ffffff;
  text-align: center;
  padding: 6px 10px;
  min-height: unset;
}
.about-us footer.footer-section p {
	font-size: 18px;
  font-weight: 500;
  margin-bottom: 0px;
}
.mission-details .mission-item >span {
	display: inline-block;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	border-radius: 50%;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 6px 0px;
	float: left;
}
.mission-details .mission-item >span span {
	text-align: center;
	font-size: 38px;
}
.about-us .mission-details .mission-item >img {
	display: inline-block;
	width: 45px !important;
	height: 45px;
	line-height: 45px;
	text-align: center;
	border-radius: 50%;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 6px 0px;
	float: left;
}
.mission-details .mission-item >i {
	display: inline-block;
	font-style: normal;
	float: right;
	width: calc(100% - 55px);
	line-height: 26px;
	font-size: 1.05rem;
}
.about-us .footer-section {
	background-color: var(--colorB);
	color: #ffffff;
	padding: 5px 0px;
	text-align: center;
	font-size: 1rem;
	font-weight: 500;
}
.policy.content div.title,
.partnership.content div.title
{
	text-align: center;
}
.policy.content div.title {
	padding-bottom: 20px;
}
.policy.content .title h2,
.partnership.content .title h2
{
	font-size: 1.2rem;
	font-weight: 600;
	padding-top: 20px;
	padding-bottom: 10px;
}
.policy.content .title p {
	font-size: 1.05rem;
}
.partnership .section-content.benefits,
.partnership .section-content.join
{
	margin-left: -15px;
	margin-right: -15px;
	padding-left: 15px;
	padding-right: 15px;
	background-color: var(--colorA);
	color: #ffffff;
}
.partnership .section-content.join {
  background-color: var(--colorB);
}
.policy section.policy-section.return-policy,
.policy section.policy-section.shipping-policy
{
	margin-left: -20px;
  margin-right: -20px;
/*  padding-top: 20px;*/
  padding-left: 20px;
  padding-right: 20px;
	padding-bottom: 25px;
	color: var(--colorD);
	background-color: var(--colorB);
}
.policy section.policy-section.shipping-policy {
	background-color: var(--colorA);
}
.policy section.policy-section strong.title {
	display: inline-block;
	width: 100%;
}
.policy section.policy-section .row-content,
.partnership.content .row-content
{
	font-size: 1.05rem;
}
.policy section.policy-section img,
.partnership.content section.section-content img
{
	width: 80% !important;
	margin-left: 10% !important;
}
.policy .policy-section.support-policy {
	background-color: var(--colorB);
	background-image: none !important;
	color: var(--colorD);
	padding: 10px 15px 25px 15px;
	margin-left: -20px;
	margin-right: -20px;
}
.single-article .partnership.content {
	padding-top: 54px;
}
.partnership.content section.section-content {
/*	padding-top: 25px;*/
	padding-bottom: 25px;
}
.partnership.content section.section-content h5 {
	font-size: 1rem;
	padding-bottom: 10px;
}
.partnership.content section.section-content ul.benefits-list {
	padding-left: 20px;
	list-style: disc;
}
/*.page-service section.services .service span.price,
.single-service .relate-service .service span.price
{
	display: inline-block;
	height: 28px;
	line-height: 28px;
	border-radius: 14px;
	color: #ffffff;
	padding: 0px 8px;
	position: absolute;
	top: 5px;
	right: 5px;
	background-color: rgba(213, 169, 72, 0.5);
}*/
/*.page-service section.services .service h3.service-title,
.single-service .relate-service .service h3.service-title
{
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	height: 30px;
	line-height: 33px;
	color: var(--colorD);
	font-size: 0.93rem;
	padding: 0px 10px;
	background-image: linear-gradient(transparent, var(--colorB));
}*/
.main .popular-services .service h3.service-title a,
.page-service section.services .service h3.service-title a,
.single-service .relate-service .service h3.service-title a
{
	color: var(--colorD);
}
.scroll-x {
	width: 100%;
	overflow-x: scroll;
  overflow-y: hidden;
}
.tab {
	width: 100%;
	white-space: nowrap;
}
.tab button,
.tab a.tablinks
{
	background-color: transparent;
	border: none;
	font-size: 0.9rem;
	display: inline-block;
	padding: 0px 15px;
	color: var(--colorC);
}
.tab button span {
	display: none;
}
.tab button.active {
	position: relative;
	color: var(--colorB);
}
.tab button.active span {
	display: inline-block;
	width: 4px;
	height: 4px;
	background-color: var(--colorB);
	border-radius: 50%;
	position: absolute;
	left: calc(50% - 2px);
	bottom: -8px;
}
.gallery .tab button {
	display: inline-block;
	height: 30px;
	line-height: 28px;
	padding: 0px 10px;
	border-radius: 5px;
	border: 1px solid var(--colorA);
	background-color: #ffffff;
	margin-left: 5px;
	margin-right: 5px;
}
.gallery .tab button.active {
	background-color: var(--colorA);
	color: #ffffff;
}
.tabcontent {
  display: none;
  transition: opacity 0.5s linear;
}
.tabcontent.active {
  display: block;
/*  opacity: 1;*/
}
.services .tabcontent {
	display: block;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
}
.services .tabcontent.active {
	opacity: 1;
	visibility: visible;
}
.gallery h2 {
	padding: 0px 20px;
	margin-bottom: 10px;
}
.gallery .tabcontent {
	padding: 20px;
}
.gallery .tabcontent .img {
	aspect-ratio : 1 / 1;
	/*width: calc(50% - 10px);
	height: 180px;*/
	overflow: hidden;
	float: left;
	margin-bottom: 20px;
	border-radius: 10px;
	border: 3px solid var(--colorA);
}
.gallery .tabcontent .img:nth-child(even) {
	float: right;
}
.gallery .tabcontent .img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.gallery .pager >span {
	display: inline-block;
	height: 26px;
	line-height: 24px;
	border-radius: 13px;
	padding: 0px 18px;
	border: 1px solid var(--colorB);
	background-color: #ffffff;
	font-size: 0.9rem;
}
.gallery .pager >span i {
	font-style: normal;
}
footer {
	height: 55px;
	/*line-height: 80px;*/
	position: fixed;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 99;
	background-size: cover;
	/*	background-color: var(--colorD);*/
	background-image: linear-gradient(#ffffff, #f4f4f4);
	padding-bottom: env(safe-area-inset-bottom, 20px);
}
footer.back-page {
	padding-top: 12px;
}
footer.submit {
	padding-top: 12px;
	padding-left: 20px;
	padding-right: 20px;
}
footer.submit button,
footer.back-page button
{
	height: 36px;
	line-height: 36px;
	border-radius: 6px;
	border: none;
	background-color: var(--colorB);
	color: var(--colorD);
	font-size: 0.9rem;
	font-weight: bold;
	text-align: center;
	position: relative;
}
footer.back-page button.back {
	width: 100px;
}
footer.submit button.back {
	width: 100px;
	float: left;
}
footer.submit button.confirm {
	width: calc(100% - 110px);
	float: right;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px;
}
footer.submit button.confirm a {
	color: var(--colorD);
}
footer.submit button span {
	margin-right: 5px;
}
footer.submit button span.icon-select-arrow {
	display: inline-block;
	position: absolute;
	top: 11px;
	left: calc(50% - 50px);
}
footer button.confirm span.next {
	rotate: 180deg;
    display: inline-block;
}
footer button span::before {
	color: var(--colorD) !important;
}
footer ul {
/*	padding-top: 15px;*/
	margin-bottom: 0px;
	height: 100%;
	margin-top: 10px;
/*	overflow: hidden;*/
}
footer ul li {
	width: 20%;
	float: left;
	text-align: center;
}
footer.appointment_off ul li {
	width: 33.3%;
}
footer.fourcol ul li {
	width: 25%;
}
footer.threecol ul li {
	width: 33.3%;
}
footer.twocol ul li {
	width: 50%;
}
footer.onecol ul li {
	width: 100%;
}
footer ul li a {
	display: block;
	line-height: 1rem;
	text-decoration: none;
	color: var(--colorC);
	font-size: 0.72rem;
	position: relative;
}
footer ul li a img {
	width: 30px;
}
footer ul li a span {
	font-size: 1.3rem;
/*	margin-bottom: 2px;*/
  /*display: inline-block;
  height: 50px;
  line-height: 50px !important;
  width: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;*/
}
footer ul li a span.icon-fcart {
	position: relative;
}
footer ul li a span.icon-fcart >span {
	display: inline-block;
	width: 14px;
  height: 14px;
  line-height: 14px;
	text-align: center;
	font-size: 0.6rem;
	border-radius: 50%;
	background-color: var(--colorB);
	color: var(--colorD);
	position: absolute;
	top: -5px;
	right: -5px;
}
footer ul li a,
footer ul li a span::before,
footer ul li span.icon-shop::before,
footer ul li span.icon-chat::before,
footer ul li span.icon-account::before,
footer ul li span.icon-fcart::before,
footer ul li span.icon-worker::before,
footer ul li span.icon-store1::before
{
	color: #333333;
}
footer ul li.active a span {
/*	background-color: var(--colorA);*/
	box-shadow: unset;
}
footer ul li.active a {
	color: var(--colorA);
}
footer ul li.active a span::before {
	color: var(--colorA) !important;
}
footer ul li a span.dot {
	display: none;
}
footer ul li.active a span.dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--colorB);
	position: absolute;
	left: calc(50% - 2px);
	bottom: -10px;
}
.content .content-text {
	text-align: justify;
	line-height: 26px;
	padding-bottom: 20px;
}
.content .content-text h2 {
	padding-bottom: 15px;
}
.content .content-text a {
	color: var(--colorA);
}
.single-course .wrap-content,
.single-article .wrap-content
{
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.single-course .wrap-content .bg-container,
.single-article .wrap-content .bg-container
{
	flex-grow: 1;
}
.single-course h1,
.single-article h1
{
	padding-top: 10px;
	padding-bottom: 25px;
	line-height: 40px;
}
.single-course .content,
.single-article .content 
{
	padding: 15px 15px 30px 15px;
}
.single-course .content span,
.single-article .content span
{
	width: auto !important;
/*	font-family: unset !important;*/
}
.single-course .content img,
.single-article .content img
{
	width: 100% !important;
	height: auto !important;
	margin-left: 0px !important;
	margin-right: 0px !important;
} 
.single-course .content .related h2.block-title,
.single-article .content .related h2.block-title
{
	padding-top: 40px;
	padding-bottom: 10px;
}
.page-service section.services {
	padding: 20px;
/*	padding-bottom: 290px;*/
	overflow: hidden;
	background-size: cover;
}
.page-service section.services .tab,
.gallery .tab
{
	padding-bottom: 10px;
	overflow-x: scroll;
	margin-bottom: 10px;
}
.page-service section.services .tab button,
.gallery .tab a.tablinks
{
	display: inline-block;
	height: 30px;
	line-height: 28px;
	padding: 0px 10px;
	border: 1px solid var(--colorA);
	background-color: var(--colorD);
	color: var(--colorC);
	border-radius: 5px;
	margin-right: 5px;
}
.page-service section.services .tab button.active,
.gallery .tab a.tablinks.active
{
	height: 32px;
	background-color: var(--colorA);
	box-shadow: unset;
	color: #ffffff;
}
.single-service section.img {
	width: 100%;
}
.single-service section.img img,
.single-article section.img img,
.single-course section.img img
{
	height: auto;
	width: 100%;
	vertical-align: top;
	/*object-fit: cover;*/
}
.single-article h1 {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 2.5rem;
    padding: 10px 0px;
}
.single-service .content,
.single-article .content
{
	padding: 10px 20px 30px 20px;
	font-size: 1.1rem;
	text-align: justify;
}
.single-service .content .head {
	height: 40px;
	line-height: 40px;
/*	margin-bottom: 5px;*/
}
.single-service .content .head .category {
	display: inline-block;
	height: 26px;
	line-height: 26px;
	padding: 0px 8px;
	border-radius: 3px;
	color: #ffffff;
	background-color: var(--colorA);
	float: left;
	position: relative;
	top: 6px;
	margin-right: 10px;
}
.single-service .content .head h1.title,
.tabcontent h3
{
	width: auto;
	float: left;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 38px;
}
.tabcontent h3 {
	width: 100%;
	padding-bottom: 10px;
/*	text-transform: capitalize;*/
}
.single-service .content h2.price {
	color: var(--colorB);
	font-size: 1.68rem;
}
.single-service .content h3 {
	color: var(--colorB);
	padding: 5px 0px;
/*	margin-top: 10px;*/
	font-size: 1.1rem;
}
.single-service .content .content-text {
	padding-bottom: 20px;
	text-align: justify;
	clear: left;
}
.content-text .readmore {
	color: var(--colorB);
	float: right;
	font-size: 0.9rem;
	position: relative;
	/*top: 3px;*/
}
.single-service section.content .service-variations {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 15px;
	/*padding-left: 10px;
	padding-right: 10px;*/
}
.single-service section.content .service-variations >div {
	height: 40px;
	line-height: 38px;
	background-color: var(--colorD);
	border: 1px solid var(--colorA);
	padding: 0px 10px;
	border-radius: 5px;
	/*margin-bottom: 10px;*/
	font-size: 13px;
	position: relative;
}
.single-service section.content .service-variations >div .price {
	font-size: 16px;
	font-weight: bold;
	color: var(--colorB);
	position: absolute;
    display: block;
    height: 38px;
    width: fit-content;
    top: 0px;
    right: 1px;
    padding-left: 5px;
    padding-right: 8px;
    background-color: var(--colorD);
    border-radius: 4px;
}
.single-service section.content .service-variations >div .price small {
	font-weight: normal;
	font-size: 14px;
}
.single-service section.content .service-variations >div.active {
	background-color: var(--colorA);
	color: var(--colorD);
	height: 42px;
	line-height: 40px;
	margin-right: -2px;
}
.single-service section.content .service-variations >div.active .price {
	background-color: var(--colorA);
}
.single-service section.content .service-variations >div.active:nth-child(even) {
	margin-left: -2px;
}
.single-service .content .button {
	overflow: hidden;
	height: 40px;
	line-height: 40px;
	margin-top: 30px;
}
/*span.icon-back-arrow*/
.single-service .content .button button {
	display: inline-block;
	width: 80px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 5px;
	background-color: var(--colorB);
	border: none;
	color: var(--colorD);
	/*font-size: 1rem;*/
}
.single-service .content .button button span {
	margin-right: 4px;
}
.single-service .content .button button span::before {
	color: var(--colorD);
}
.single-service .content .btn {
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 5px;
	width: calc(100% - 90px);
    display: inline-block;
    float: right;
}
.single-service .content .btn span {
	position: relative;
	top: 0px;
	font-size: 0.8rem;
	margin-right: 5px;
}
.single-service .content .btn span::before {
	color: #ffffff;
}
.single-service .relate-service {
	padding: 20px;
	overflow: hidden;
}
.single-service .relate-service h2 {
	margin-bottom: 20px;
}
.main .wrap-content section.cover {
	width: 100%;
	/*height: 250px;*/
}
.main .wrap-content section.cover img {
	width: 100%;
	height: auto;
	vertical-align: top;
	/*object-fit: cover;*/
}
section.contact {
	position: relative;
	padding: 90px 45px 0px 45px;
}
.page-info .contact .logo {
	height: 160px;
	width: 160px;
	line-height: 160px;
	overflow: hidden;
	text-align: center;
	background-color: #ffffff;
	border-radius: 50%;
	position: absolute;
	left: calc(50% - 80px);
    top: -80px;
    z-index: 99;
}
.page-info .contact .logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section.contact h1 {
	font-size: 1.5rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.2rem;
    padding: 0px 20px 0px 20px;
    visibility: hidden;
}
section.contact h2 {
	padding-bottom: 10px;
}
section.contact h2.block-title {
	color: var(--colorB);
}
section.contact .grid-button {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}
section.contact .grid-button a span {
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 34px;
	border-radius: 50%;
	text-align: center;
	border: 1px solid var(--colorB);
	font-size: 1.2rem;
}
section.contact div.chat,
section.contact div.email
{
	height: 38px;
	line-height: 38px;
	width: 100%;
	background-color: var(--colorB);
	color: var(--colorD);
	border-radius: 19px;
	margin-bottom: 15px;
}
section.contact div.chat a,
section.contact div.email a
{
	display: inline-block;
	height: 100%;
	width: 100%;
	color: var(--colorD);
	font-weight: bold;
	position: relative;
}
section.contact div.chat a span,
section.contact div.email a span
{
	display: inline-block;
	width: 34px;
	height: 34px;
	line-height: 34px;
	background-color: var(--colorA);
	border-radius: 50%;
	text-align: center;
	position: absolute;
	top: 2px;
	left: 2px;
}
section.contact div.chat a span::before,
section.contact div.email a span::before
{
	color: var(--colorB);
}
section.contact .social {
	padding: 20px 0px 5px 0px;
}
section.address {
	padding: 0px 15px 60px 15px;
}
section.address address {
	font-size: 1.1rem;
	font-weight: bold;
	font-style: normal;
	line-height: 24px;
	position: relative;
	padding-left: 40px;
}
section.address address span {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	background-color: var(--colorB);
/*	margin-right: 8px;*/
	position: absolute;
	top: 2px;
	left: 0px;
}
section.address address span::before {
	color: var(--colorD);
	font-size: 0.9rem;
}
section.address .map {
	margin-top: 10px;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	border: 2px solid var(--colorB);
}
section.contact .card {
	padding: 0px 20px;
	border: 1px solid var(--colorA);
	border-radius: 10px;
	margin-top: -45px;
	background-color: #ffffff;
	position: relative;
	display: table;
	box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 3px;
	background-size: cover;
}
section.contact .card span.logo {
	display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	width: 68px;
	height: 68px;
	overflow: hidden;
	border-radius: 8px;
	background-color: #ffffff;
	border: 2px solid var(--colorB);
	position: relative;
    top: -34px;
}
section.contact .card span.logo img {
	max-width: 55px;
	max-height: 55px;
	/*vertical-align: middle;*/
}
section.contact .card .head {
	height: 50px;
}
.contact .card .salon-name {
	position: absolute;
	top: 5px;
	left: 100px;
	font-size: 1.25rem;
	font-weight: 800;
}
.contact .card .table >div {
	margin-bottom: 12px;
	overflow: hidden;
}
.contact .card .table >div >div {
	float: right;
	width: calc(100% - 48px);
}
.contact .card .table >div >div p {
	white-space: pre;
    line-height: 24px;
    font-size: 0.88rem;
}
.contact .card .table >div >span {
	display: inline-block;
	width: 38px;
	height: 38px;
	line-height: 37px;
	text-align: center;
	border-radius: 50%;
	border: 1px solid #e6e6e6;
	font-size: 1.2rem;
	background-color: #ffffff;
}
.contact .card .table >div >span.icon-close {
	font-size: 1.42rem;
	line-height: 33px;
}
.contact .card .table div.location >div {
	font-weight: 600;
	height: 38px;
    display: flex;
    align-items: center;
}
.contact .card .table div.business-hour .title {
	display: inline-block;
	padding-top: 8px;
	padding-bottom: 12px;
	font-weight: 600;
	width: 100%;
}
.contact .card .table .tr {
	width: 100%;
	padding: 3px 0px;
	font-size: 0.88rem;
	overflow: hidden;
	/*font-weight: 300;*/
}
.contact .card .table .tr .td {
	width: 42%;
	float: left;
	padding-bottom: 8px;
}
.contact .card .table .tr .td:nth-child(even) {
	width: 58%;
	float: right;
}
.contact .card .bottom {
	height: 50px;
	line-height: 50px;
	border-top: 2px solid #dddddd;
}
.contact .card .bottom >div {
	width: 33.3%;
	float: left;
	font-weight: 500;
	padding-top: 5px;
}
.contact .card .bottom >div span {
	display: inline-block;
	width: 38px;
	height: 38px;
	line-height: 38px;
	text-align: center;
	border-radius: 50%;
	border: 1px solid #e6e6e6;
	font-size: 1.1rem;
	margin-right: 5px;
	font-weight: normal;
	background-color: #ffffff;
}
.contact .card .bottom >div span.icon-call1 {
	font-size: 1.02rem;
}
.page-info .content {
	padding: 10px 20px 20px 20px;
}
.page-info .content h2,
.page-info .content .text h1
{
	color: var(--colorB);
	padding-bottom: 10px;
}
.page-info .content .text h1 {
	font-family: var(--font-heading), cursive;
	font-weight: 400;
    font-size: var(--font-heading-size);
}
.page-info .content .text {
	text-align: justify;
}
.page-info .content .text em {
	font-style: italic !important;
}
.page-info .content .text .ql-align-center {
	text-align: center;
}
.page-info .social h2 {
	color: var(--colorB);
	padding-top: 12px;
}
.page-info .social ul {
	padding: 20px 0px;
	overflow: hidden;
	text-align: center;
}
.page-info .social ul li {
	width: fit-content;
	display: inline-block;
	padding: 0px 15px;
}
.page-info .social ul li a {
	display: inline-block;
	text-decoration: none;
	font-size: 2.4rem;
}
.page-info .social ul li a span span.path1::before {
	color: var(--colorB);
}
section.question-answer {
	background-color: var(--colorA);
	padding: 20px 15px;
}
section.question-answer #faq-list li {
	margin-bottom: 10px;
}
section.question-answer #faq-list li .title {
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	padding: 6px 0px;
}
section.question-answer #faq-list li .title span::before {
	color: var(--colorC);
}
section.question-answer #faq-list li.active .title span {
	transform: rotate(90deg);
    display: inline-block;
    position: relative;
    top: 2px;
    left: -4px;
}
section.question-answer #faq-list li p {
	text-align: justify;
	line-height: 24px;
	display: none;
}
section.question-answer #faq-list li.active p {
	display: block;
}
section.book-tour {
	padding: 30px 15px;
}
section.book-tour h2.block-title {
	padding-bottom: 0px;
	line-height: 30px;
}
section.book-tour .banner {
	margin-top: 20px;
}
section.book-tour .banner img {
	width: 100%;
	height: auto;
}
section.calendar {
	/*height: 190px;
	background-color: var(--colorA);
	color: var(--colorD);*/
	padding: 0px 20px 0px 20px;
	overflow: hidden;
}
section.calendar .head {
	font-size: 1.4rem;
	font-family: var(--font-heading), cursive;
	text-align: center;
	margin-bottom: 10px;
}
section.calendar .nav {
	padding: 10px 20px;
	padding-left: 26%;
	padding-right: 26%;
	margin-bottom: 5px;
}
section.calendar .nav span {
	display: inline-block;
}
section.calendar .nav span.float-left {
	float: left;
	width: 15%;
	text-align: center;
    font-size: 0.68rem;
    position: relative;
    top: 6px;
    height: 20px;
    line-height: 20px;
}
section.calendar .nav span::before {
	color: var(--colorD) !important;
}
section.calendar .nav span.my {
	font-size: 1.28rem;
	font-weight: 600;
	width: 70%;
	text-align: center;
}
section.calendar .nav span.float-right {
	float: right;
	width: 15%;
	text-align: center;
    font-size: 0.68rem;
    position: relative;
    top: 6px;
    height: 20px;
    line-height: 20px;
}
section.calendar .swiper-slide {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
section.calendar .swiper-slide >div {
    text-align: center;
}
section.calendar .swiper-slide >div.current {
    background-color: var(--colorB);
    border-radius: 5px;
}
section.calendar .swiper-slide >div#today.current {
    background-color: transparent;
    border: 2px solid var(--colorB);
}
section.calendar .swiper-slide >div .top {
    height: 25px;
    line-height: 25px;
}
section.calendar .swiper-slide >div .bottom {
    height: 25px;
    line-height: 25px;
}
section.calendar .swiper-slide >div i {
    font-style: normal;
}
/*section.calendar .table >div {
	overflow: hidden;
	margin-bottom: 15px;
	display: flex;
	flex-direction: row;
    justify-content: space-between;
}*/
section.calendar .table {
	margin-left: -10px;
	margin-right: -10px;
}
section.calendar .table div.tr-day,
section.calendar .table div.tr-date
{
	margin-bottom: 15px;
	display: flex;
}
section.calendar .table div.tr-date {
	/*display: none;*/
}
section.calendar .table >div .td {
	display: inline-block;
	width: 14.28%;
	float: left;
	text-align: center;
	/*width: fit-content;*/
}
section.calendar .table >div .td i {
	font-style: normal;
}
section.calendar .table .tr-date {
	font-size: 0.95rem;
}
section.calendar .table >div .td span {
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	background-color: var(--colorB);
	border-radius: 50%;
	position: relative;
    top: -5px;
}
section.calendar .table >div .td i.current {
	/*background-color: transparent;*/
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border: 1px solid var(--colorB);
	border-radius: 50%;
	position: relative;
    top: -5px;
}
section.select-time {
	padding: 20px;
}
.book-tour section.select-time,
.book-tour section.calendar,
.book-tour section.form
{
	padding: 20px 0px;
}
section.select-time h4,
section.calendar h4
{
	font-weight: 700;
	padding-top: 20px;
	padding-bottom: 10px;
}
section.select-time .input {
	overflow: hidden;
}
section.select-time .input .select {
	width: calc(100% - 0px);
	float: left;
}
section.select-time .input >span {
	display: inline-block;
	height: 40px;
	line-height: 36px;
	width: 50px;
	border: 2px solid var(--colorA);
	background-color: var(--colorD);
	border-radius: 5px;
	text-align: center;
	font-size: 1rem;
	float: right;
}
section.select-time .input .hour {
	position: relative;
	height: 40px;
	line-height: 40px;
	width: calc(50% - 10px);
	float: left;
	/*padding-left: 5px;*/
	/*border: 1px solid var(--colorA);*/
}
section.select-time .input .hour select {
	width: 100%;
	height: 40px;
	line-height: 36px;
/*	border: 2px solid var(--colorA);*/
	border-color: #f2f2f2;
	background-color: #f1f1f1;
	border-radius: 5px;
	text-align: center;
	font-size: 1rem;
	color: var(--colorC);
}
section.select-time .input .minute {
	position: relative;
	height: 40px;
	line-height: 40px;
	width: calc(50% - 10px);
	float: right;
	/*padding-right: 5px;*/
}
section.select-time .input .minute select {
	width: 100%;
	height: 40px;
	line-height: 36px;
/*	border: 2px solid var(--colorA);*/
	border-color: #f2f2f2;
	background-color: #f1f1f1;
	border-radius: 5px;
	text-align: center;
	font-size: 1rem;
	color: var(--colorC);
}
section.select-time .input .select span {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	width: 20px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
}
section.select-time select {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: #ffffff;
}
section.select-time select:focus {
	outline: none;
}
section.select-time .input .select >div::after {
	font-family: 'icomoon' !important;
	content: "\e914";
    color: var(--colorB);
    font-size: 0.6rem;
    position: absolute;
    top: 0px;
    right: 10px;
    pointer-events: none;
}
section.select-time button.btn-add {
	margin-left: 5px;
	height: 40px;
	line-height: 36px;
	width: calc(100% - 10px);
	background-color: #f1f1f1;
	border-radius: 5px;
	border: none;
/*	border: 2px solid var(--colorA);*/
	font-size: 1rem;
	color: var(--colorC);
	/*margin-top: 10px;*/
}
section.select-time button.btn-add span {
	font-size: 0.8rem;
	margin-right: 5px;
}
section.select-time .box {
	position: relative;
}
section.select-time .box .select-service {
	position: absolute;
	top: 42px;
	left: 0px;
	right: 0px;
	background-color: #ffffff;
	border: 1px solid var(--colorA);
	border-radius: 0px 0px 10px 10px;
	padding: 10px;
	z-index: 999;
	height: 315px;
	overflow-y: auto;
}
.box .select-service::-webkit-scrollbar {
  width: 6px;
}
section.select-time .box .select-service li {
	display: inline-block;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	color: var(--colorC);
}
section.select-time .box .select-service li img {
	float: left;
	width: 50px;
	margin-right: 10px;
}
section.select-time .service {
	height: 60px;
	line-height: 60px;
	margin-bottom: 25px;
}
section.select-time .service .img {
	width: 60px;
	height: 60px;
	float: left;
	overflow: hidden;
	border-radius: 10px;
/*	border: 2px solid var(--colorA);*/
}
section.select-time .service .img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
section.select-time .service .info {
	float: right;
	width: calc(100% - 72px);
	height: 60px;
	line-height: 100%;
	padding: 5px 0px;
	position: relative;
}
section.select-time .service .info.full {
	width: 100%;
}
section.select-time .service .info .title {
	display: inline-block;
	font-size: 1.1rem;
	width: 100%;
	height: 25px;
	line-height: 20px;
/*	margin-bottom: 5px;*/
}
section.select-time .service .info .destroy {
	position: relative;
	top: 8px;
	font-size: 0.6rem;
}
section.select-time .service .info .variation {
	display: inline-block;
	height: 25px;
	line-height: 25px;
	font-size: 0.9rem;
	width: 100%;
}
section.select-time .service .info .variation small {
	font-size: 0.9rem;
}
section.select-time .service .info .variation .price {
	color: var(--colorB);
	padding-left: 5px;
	font-size: 1.2rem;
}
section.select-time .service .info.full .variation .price {
	padding-left: 0px;
}
.main.appointment {
	height: calc(100% - 0px);
	position: relative;
	padding-top: 132px;
	padding-bottom: 60px;
	background-size: cover;
}
.main.appointment >.head {
	height: 50px;
    line-height: 50px;
/*    background-color: var(--colorA);*/
    display: inline-block;
    width: 100%;
    font-family: var(--font-heading), cursive;
    color: #ffffff;
    font-size: 1.4rem;
}
.main.appointment.register >.head {
	background-color: var(--colorA);
}
section.calendar .scroll-date {
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
}
section.calendar .date {
	/*	float: left;*/
	display: inline-block;
	width: calc(16.6% - 9px);
	margin-right: 11px;
	text-align: center;
	background-color: #f4f4f4;
	border-radius: 4px;
	padding: 5px 0px;
}
section.calendar .date.today {
	width: calc(32% - 9px);
	background-color: #ffffff;
	border: 1px solid var(--colorB);
}
section.calendar .date.active,
section.calendar .date.today.active
{
	background-color: var(--colorB);
	color: #ffffff;
}
section.calendar .date .top {
	font-size: 0.8rem;
	opacity: 0.6;
	height: 22px;
	line-height: 22px;
}
section.calendar .date.active .top {
	opacity: 1;
}
section.calendar .date.today .top {
	font-size: 0.9rem;
	opacity: 1;
}
section.calendar .date .bottom {
	font-size: 0.95rem;
	height: 24px;
	line-height: 24px;
}
.main.appointment .select {
	height: 100%;
/*	padding-top: 50px;*/
}
.main.appointment .select .select-time {
	height: calc(100% - 60px);
	padding-bottom: 120px;
	overflow-y: scroll;
	background-size: cover;
}
.main.appointment .button {
	/*position: absolute;
	bottom: 40px;*/
	width: 100%;
	text-align: center;
	padding-top: 80px;
}
.main.appointment .button button {
	display: inline-block;
	background-color: var(--colorB);
	border: none;
	height: 40px;
	line-height: 40px;
	border-radius: 20px;
	padding: 0px 35px;
	color: var(--colorD);
	font-size: 1.1rem;
	font-weight: 700;
	opacity: 0.5;
}
.main.appointment .button button.active {
	opacity: 1;
}
.main.appointment .button button.active {
	opacity: 1;
}
.main section.service-time {
	padding: 20px;
}
section.service-time .service-card {
	background-color: #ffffff;
	background-size: cover;
	border: 1px solid var(--colorA);
	padding: 10px 15px;
	padding-bottom: 5px;
	border-radius: 10px;
}
.service-card h4 {
	font-weight: 600;
}
.service-card h3 {
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 20px;
}
.service-card .service {
	height: 60px;
	line-height: 60px;
	margin-top: 5px;
	margin-bottom: 18px;
}
.service-card .service .img {
	height: 60px;
	width: 60px;
	overflow: hidden;
	border-radius: 6px;
	border: 1px solid var(--colorB);
	float: left;
}
.service-card .service .img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.service-card .service .title {
	float: right;
	width: calc(100% - 68px);
	font-weight: 600;
}
.appointment section.form
{
	padding: 10px 20px;
}
.appointment section.form h4,
.book-tour section.form h4
{
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 5px;
}
.appointment section.form .input,
.book-tour section.form .input
{
	padding: 14px 0px;
}
.appointment section.form .input.two-input input,
.book-tour section.form .input.two-input input
{
	width: calc(50% - 10px);
}
.appointment section.form input,
.book-tour section.form input
{
	height: 40px;
	line-height: 40px;
	background-color: #F9F9F9;
	border-radius: 20px;
	border: 1px solid #eeeeee;
	padding-left: 14px;
	font-size: 1rem;
	width: calc(100%);
}
.appointment section.form textarea,
.book-tour section.form textarea
{
	background-color: #F9F9F9;
	border-radius: 10px;
	border: 1px solid #eeeeee;
	padding: 8px 14px;
	font-size: 1rem;
	width: calc(100%);
}
.book-tour .submit-form button {
	background-color: var(--colorB);
	width: 100%;
	height: 42px;
	line-height: 42px;
	border-radius: 6px;
	border: none;
	color: var(--colorD);
	text-align: center;
}
.book-tour .submit-form button span {
	margin-right: 5px;
	font-size: 0.75rem;
}
.book-tour .submit-form button span::before {
	color: var(--colorD);
}
.appointment .submit {
	position: relative;
	height: calc(100% - 60px);
	background-size: cover;
}
.appointment .submit .section {
	height: calc(100% - 88px);
	overflow-y: scroll;
}
.appointment.app-schedule .submit .section .tab-date {
	padding: 15px;
	overflow: hidden;
}
.appointment.app-schedule .submit .section .tab-date >div {
	height: 90px;
	width: calc(17% - 10px);
	float: right;
	background-color: #FBFBFB;
	margin-left: 10px;
	border-radius: 8px;
	/*display: flex;*/
}
.appointment.app-schedule .submit .section .tab-date >.active {
	width: 32%;
	background-color: var(--colorA);
	color: var(--colorD);
	float: left;
	margin-left: 0px;
}
.appointment.app-schedule .submit .section .tab-date >div >span {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	text-align: center;
	width: 100%;
}
.appointment.app-schedule .submit .section .tab-date >div >div {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	width: 100%;
	padding: 0px 8px;
	font-size: 0.8rem;
}
.appointment.app-schedule .submit .section .tab-date >div >div span.float-right {
	font-size: 0.9rem;
	font-weight: bold;
}
.appointment.app-schedule .submit .section .tab-date >div >div.title {
	font-size: 1.12rem;
	font-weight: bold;
}
.appointment.app-schedule .submit .section .tab-date >div >span.day {
	text-transform: uppercase;
	font-size: 0.96rem;
}
.appointment.app-schedule .submit .section .tab-date >div >span.date {
	font-weight: bold;
}
.appointment.app-schedule .submit .section .tab-date >div >span.number {
	font-weight: bold;
	color: var(--colorB);
}
.appointment.app-schedule .submit .section .list-schedule >div.pending {
	padding: 5px 15px 0px 15px;
	box-shadow: 0 3px 6px 0 rgba(0,0,0,0.1);
	margin: 0px 15px 15px 15px;
	border-radius: 10px;
	overflow: hidden;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .head {
	height: 40px;
	line-height: 40px;
	overflow: hidden;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .head .name {
	width: 40%;
	font-size: 1rem;
	font-weight: bold;
	float: left;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .head .status {
	display: inline-block;
	height: 20px;
	line-height: 20px;
	padding: 0px 10px;
	color: #ffffff;
	background-color: var(--colorB);
	font-size: 0.85rem;
	border-radius: 10px;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .head .time {
	color: var(--colorB);
	font-weight: bold;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .service {
	height: 50px;
	line-height: 50px;
	margin-bottom: 15px;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .service .img {
	width: 50px;
	height: 50px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--colorA);
	float: left;
	margin-right: 10px;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .service .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.appointment.app-schedule .submit .section .list-schedule >div.pending .service span {
	font-weight: bold;
}
.appointment .submit .button {
	position: absolute;
	left: 0px;
	bottom: 40px;
}
.appointment .submit .button.submit-form button {
	opacity: 1;
	padding: 0px 25px;
}
.appointment .submit .button.submit-form span.icon-back-arrow {
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	background-color: var(--colorB);
	font-size: 1rem;
	position: absolute;
	top: 3px;
	left: 20px;
}
.appointment .submit .button.submit-form span.icon-back-arrow::before {
	color: var(--colorD);
}
.main.appointment.register {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	padding-top: 100px;
	padding-bottom: 80px;
}
.register .slide img {
	width: 100%;
	height: auto;
}
.register .body {
	padding: 0px 15px;
	flex: 1;
	background-size: cover;
}
.register .body .form {
	background-color: #ffffff;
	position: relative;
	top: -25px;
	border: 1px solid #f8f8f8;
	border-radius: 8px;
	padding-left: 18px;
	padding-right: 18px;
	padding-bottom: 10px;
	box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.register .body .form .head {
	text-align: center;
	padding: 8px 0px;
	color: var(--colorB);
}
.register .body .form .head h2 {
	font-size: 1.3rem;
	font-weight: 600;
}
.register .body .form .head h4 {
/*	font-weight: bold;*/
	padding-bottom: 5px;
}
.register .body .form .input {
	margin-bottom: 15px;
}
.register .body .form .input input {
	width: 100%;
	height: 40px;
	padding: 0px 15px;
	border-radius: 20px;
	background-color: #f8f8f8;
	border: 1px solid #f1f1f1;
	font-size: 0.9rem;
}
.register .body .note {
	padding-top: 20px;
	color: var(--colorB);
	text-align: justify;
}
.register footer {
	position: fixed;
	height: 60px;
	background-color: var(--colorD);
}
.main.appointment.register footer .button {
	overflow: hidden;
	padding-top: 0px;
	padding-left: 15px;
	padding-right: 15px;
}
.main.appointment.register footer .button button {
	font-size: 0.95rem;
	position: relative;
	height: 40px;
	line-height: 40px;
	opacity: 1;
}
.register footer .button .btn-back {
	width: 125px;
	background-color: var(--colorB);
	border-radius: 5px;
	color: var(--colorD);
	float: left;
	text-align: center;
}
.register footer .button .btn-back span {
	position: absolute;
	top: 11px;
	left: 15px;
}
.register footer .button .btn-submit span {
	margin-right: 5px;
	font-size: 0.85rem;
}
.register footer .button .btn-back span::before,
.register footer .button .btn-submit span::before
{
	color: var(--colorD);
}
.register footer .button .btn-submit {
	float: right;
	width: calc(100% - 135px);
	background-color: var(--colorB);
	border-radius: 5px;
	color: var(--colorD);
}
.success-register .notify {
	height: 100%;
	padding-top: 50%;
	padding-left: 20px;
    padding-right: 20px;
}
.success-register .notify .icon-gift {
	font-size: 4.5rem;
}
.success-register .notify .icon-check-location {
	font-size: 4.5rem;
}
.success-register .notify .icon-check-location::before {
	color: var(--colorB);
}
.success-register .notify h2 {
	color: var(--colorB);
	padding-top: 20px;
    padding-bottom: 10px;
    font-size: 1.5rem;
}
.success-register .notify p {
	padding-bottom: 100px;
	line-height: 25px;
}
.success-register .notify a.btn {
	border-radius: 6px;
	width: 150px;
	font-size: 1rem;
}

iframe {
	display: block;
  margin: 0 auto;
}

.modal-branch {
	position: absolute;
  height: calc(100% - 75px);
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #ffffff;
  z-index: 99;
  display: none;
}
.modal-branch header {
	height: 50px;
  line-height: 50px;
  background-color: var(--colorA);
  display: inline-block;
  width: 100%;
  font-family: var(--font-heading), cursive;
  color: #ffffff;
  font-size: 1.4rem;
}
.modal-branch .body {
	padding: 20px 15px 20px 15px;
	position: relative;
	height: calc(100% - 120px);
	overflow-y: scroll;
}
.modal-branch .body h5 {
	font-size: 1rem;
	margin-bottom: 20px;
	text-align: center;
}
.modal-branch .body .branch {
	width: 100%;
	float: left;
	border: 1px solid var(--colorA);
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 15px;
	box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
}
.modal-branch .body .branch .name {
	font-size: 1.06rem;
	color: var(--colorB);
	margin-bottom: 0px;
}
.modal-branch .body .branch .name span {
	font-size: 1.1rem;
	/*margin-right: 5px;
	position: relative;
	top: 1px;*/
}
.modal-branch .body .branch .name span::before {
	color: var(--colorB);
}
.modal-branch .body .branch >div {
	height: 34px;
	line-height: 34px;
	font-size: 1rem;
	margin-bottom: 6px;
}
.modal-branch .body .branch >div span {
	display: inline-block;
	width: 28px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 1rem;
}
.modal-branch .body .branch >div span.addr {
	width: calc(100% - 30px);
	float: right;
	height: 34px;
	line-height: 15px;
	text-align: left;
}
.modal-branch .body .branch >div span::before {
	color: var(--colorC);
}
.modal-branch .bottom {
	/*position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;*/
	height: 65px;
	text-align: center;
}
.modal-branch .bottom button {
	border: none;
	display: inline-block;
	height: 32px;
	line-height: 32px;
	width: 80px;
	border-radius: 4px;
	background-color: var(--colorB);
	font-size: 1rem;
	color: #ffffff;
}
.modal-branch .bottom button span.icon-back-arrow {
	font-size: 0.8rem;
}
.modal-branch .bottom button span::before {
	color: var(--colorD);
}
/* The Modal (background) */
.ebcf_modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
#designInfoModal.ebcf_modal {
	padding-top: 0px;
	background-color: rgba(0,0,0,0.65);
	overflow-x: hidden;
}
#faqModal.ebcf_modal {
/*	background-color: rgba(0,0,0,0.6);*/
	background-color: var(--colorD);
	top: 36px;
	padding-top: 0px;
	overflow-y: scroll;
}
#selectOption.ebcf_modal,
#toCartModal.ebcf_modal,
#confirmModal.ebcf_modal
{
	/*padding-top: 30px;*/
	background-color: rgba(0,0,0,0.8);
}
#confirmActiveMember.ebcf_modal {
	top: 36px;
	background-color: #FFFFFF;
	background-image: url("/images/bg-membership.jpg");
	background-position: top center;
    background-size: contain;
    background-repeat: no-repeat;
}
#confirmActiveMember.ebcf_modal .ebcf_modal-content {
	padding: 110px 0px 60px 0px;
}
#confirmActiveMember.ebcf_modal .title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--colorA);
	margin-bottom: 25px;
}
#confirmActiveMember.ebcf_modal .title h2 {
	padding-bottom: 2px;
	font-weight: 600;
	font-family: var(--font-heading), cursive;
}
#confirmActiveMember.ebcf_modal .card {
	padding: 10px;
	color: #ffffff;
	font-size: 1rem;
	margin-bottom: 10px;
	width: fit-content;
	max-width: 80%;
	text-align: left;
}
#confirmActiveMember.ebcf_modal .card.first {
	/* background: linear-gradient(90deg, #E91087 0%, #F59EC3 55%, #f5aed1 100%); */
	background-color: var(--colorB);
}
#confirmActiveMember.ebcf_modal .card.second {
	/* background: linear-gradient(90deg, #05d8ff 0%, #1aa4ff 45%, #3268ff 100%); */
	background-color: var(--colorA);
	text-align: right;
	float: right;
}
#confirmActiveMember.ebcf_modal ul {
	clear: both;
	padding: 15px;
	margin-bottom: 10px;
}
#confirmActiveMember.ebcf_modal ul li {
	width: 100%;
	font-size: 0.9rem;
	color: var(--colorC);
	display: flex;
	gap: 10px;
	height: 42px;
	align-items: center;
	margin-bottom: 20px;
}
#confirmActiveMember.ebcf_modal ul li span {
	display: flex;
	height: 42px;
	align-items: center;
	font-size: 0.75rem;
	position: relative;
}
#confirmActiveMember.ebcf_modal ul li span::before {
	color: var(--color-blue);
}
#confirmActiveMember.ebcf_modal ul li:nth-child(even) span::before {
	color: var(--colorB);
}
#confirmActiveMember.ebcf_modal a.return {
	display: block;
	margin: 0px auto;
	padding: 8px 10px;
	width: calc(100% - 30px);
	text-align: center;
	border-radius: 5px;
	background-color: var(--colorA);
	color: #ffffff;
	font-size: 1rem;
	text-transform: uppercase;
}
#editAccount.ebcf_modal {
	padding-top: 50px;
}
#listDesignModal.ebcf_modal,
#findDesigns.ebcf_modal
{
	top: 36px;
	bottom: 0px;
/*	background-color: #535353;*/
	background-color: rgba(0,0,0,0.6);
	padding-top: 0px;
	padding-bottom: 120px;
  overflow-y: auto;
}
#findDesigns.ebcf_modal {
	background-color: rgba(0,0,0, 0.80);
	padding-bottom: 0px;
}
#selectOption.ebcf_modal .input {
	padding: 15px 20px;
	position: relative;
}
#selectOption.ebcf_modal .input input {
	width: calc(100% - 0px);
	height: 44px;
	border: 1px solid #ffffff;
	border-radius: 22px;
	text-align: center;
	font-size: 1.1rem;
}
#selectOption.ebcf_modal .input >span {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	width: 40px;
	text-align: center;
	background-color: var(--colorA);
	border-radius: 50%;
	position: absolute;
	top: 17px;
	right: 22px;
	font-size: 0.6rem;
}
#selectOption.ebcf_modal input:focus,
#selectOption.ebcf_modal input:focus-visible
{
	outline: none;
}
#selectOption.ebcf_modal input:focus::placeholder,
#selectOption.ebcf_modal input:focus-visible::placeholder
{
	color: transparent;
}
#selectDiscounts.ebcf_modal {
	padding-top: 30px;
	background-color: rgba(0, 0, 0, 0.6);
}
#selectDiscounts .ebcf_modal-content {
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
}
#selectDiscounts .m-body {
	height: calc(100% - 45px);
	overflow-y: auto;
}
#selectDiscounts .m-body >h5 {
	padding-bottom: 15px;
	font-size: 1rem;
}
#selectDiscounts .m-body .discount {
	padding: 8px 10px;
	border-radius: 6px;
	border: 1px solid #ffffff;
	background-color: rgba(255, 255, 255, 1);
	color: var(--colorC);
	margin-bottom: 15px;
}
#selectDiscounts .m-body .discount.active {
	border: none;
	background-color: var(--colorA);
}
#selectDiscounts .m-body .discount.suggest {
	background-color: rgba(255, 255, 255, 0.55);
	color: var(--colorB);
}
#selectDiscounts .m-body .discount h5 {
	font-size: 1rem;
	color: var(--colorA);
	text-align: left;
	padding-bottom: 5px;
}
#selectDiscounts .m-body .discount.active h5,
#selectDiscounts .m-body .discount.active p
{
	color: var(--colorD);
}
#selectDiscounts .m-body .discount.suggest h5 {
	color: #ffffff;
}
#selectDiscounts .m-body .discount h5 span.icon-discord {
	position: relative;
  top: 2px;
	font-size: 1.1rem;
	float: left;
	margin-right: 8px;
}
#selectDiscounts .m-body .discount h5 span.icon-discord::before {
	color: var(--colorA);
}
#selectDiscounts .m-body .discount.suggest h5 span.icon-discord::before {
	color: #ffffff;
}
#selectDiscounts .m-body .discount p {
	font-size: 0.85rem;
	line-height: 22px;
	margin-bottom: 0px;
}
#selectDiscounts .m-body .discount a {
	display: block;
	height: 24px;
	line-height: 24px;
	width: fit-content;
	padding: 0px 10px;
	border-radius: 12px;
	background-color: #ffffff;
	color: var(--colorA);
	font-size: 0.9rem;
	text-align: center;
	margin: 10px auto 0px auto;
}
#selectDiscounts .m-body .discount a.disable {
	color: #cccccc;
}
#selectDiscounts .button {
	display: flex;
	justify-content: center;
}
#selectDiscounts .button button {
	width: 33%;
	height: 36px;
	line-height: 34px;
	background-color: #ffffff;
	border: 1px solid var(--colorB);
	color: var(--colorB);
}
.suggest-membership {
	padding: 15px;
}
.suggest-membership img {
	width: 100%;
	border: 1px solid var(--colorA);
}
.member-discount {
	/* display: flex;
	height: 50px;
	align-items: center;
	justify-content: space-between; */
	background-color: #f4f4f4;
	font-size: 1.1rem;
	color: var(--colorA);
	padding: 10px 15px;
	margin-bottom: 15px;
}
.product-cart h5.ms {
	border-top: 1px solid #eeeeee;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}
.member-discount >span {
	color: var(--colorC);
	font-weight: 600;
	float: right;
}
.member-discount >span span {
	display: inline-block;
	width: 26px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	font-size: 0.8rem;
	background-color: #ffffff;
	border-radius: 50%;
	margin-left: 6px;
}
#membershipModal.ebcf_modal {
	height: unset;
	padding: 0px !important;
	background-color: #ffffff;
	top: 36px;
	bottom: 55px;
}
#membershipModal .ebcf_modal-content
{
	padding: 0px !important;
}
#membershipModal .ebcf_modal-content >img {
	width: 100%;
}
#membershipModal .ebcf_modal-content .text {
	padding: 15px;
	color: var(--colorC);
	font-size: 0.95rem;
}
#membershipModal .ebcf_modal-content .text ul {
	list-style: disc;
	padding-left: 15px;
}
#membershipModal .ebcf_modal-content .text ul li {
	margin-bottom: 5px;
}
#membershipModal .text .card {
	background-color: #f4f4f4;
	border-radius: 6px;
	position: relative;
	padding: 15px 20px;
	padding-bottom: 60px;
	margin-top: 15px;
}
#membershipModal .text .card h5 {
	font-family: var(--font-heading), cursive;
	font-size: 1.06rem;
	text-align: left;
	font-style: italic;
    padding: 5px 0px;
}
#membershipModal .text .card h5 strong {
	float: right;
	color: var(--colorB);
	font-size: 1.2rem;
}
#membershipModal .text .card .total-s {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 44px;
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 0px;
	color: #ffffff;
	font-family: var(--font-heading), cursive;
	font-size: 1.05rem;
	font-style: italic;
	border-radius: 0px 0px 6px 6px;
	padding: 0px 20px;
	/* background: linear-gradient(90deg, #ff2c8d, #a448db, #2c8dff); */
	background-color: var(--colorA);
}
#membershipModal .text .card .total-s strong {
	font-size: 1.15rem;
}
#membershipModal .text h3 {
	text-align: center;
	color: var(--colorA);
	font-size: 1.1rem;
	padding: 25px 0px 10px 0px;
}
#membershipModal .member-fee {
  display: flex;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0px 20px;
  border-radius: 6px;
  /* gradient ngang từ hồng → xanh */
  /* background: linear-gradient(90deg, #fcd0e4, #b9ecff); */
  background-color: var(--colorB);
  font-family: var(--font-heading), cursive;
  font-weight: bold;
  font-size: 1.2rem;
  font-style: italic;
  color: #ffffff;
  margin-bottom: 15px;
}
#membershipModal .member-fee .price {
  /* color: var(--colorB); */
  font-size: 1.69rem;
  font-weight: 700;
}
#membershipModal .member-fee .duration {
  /* color: var(--colorA); */
  position: relative;
  top: 5px;
}
#membershipModal label {
	font-size: 0.9rem;
}
#membershipModal label input {
	margin: 5px;
	width: 18px;
	height: 18px;
	position: relative;
    top: 3px;
}
#membershipModal button {
	margin-top: 15px;
	display: inline-block;
	height: 38px;
	line-height: 38px;
	width: 100%;
	text-align: center;
	border-radius: 5px;
	border: none;
	color: #ffffff;
	font-size: 1.1rem;
	text-transform: uppercase;
	background-color: var(--colorA);
}
#membershipModal button.disable
{
	background-color: #f1f1f1;
	opacity: 0.95;
}

#findDesigns.ebcf_modal .ebcf_modal-content {
	height: calc(100% - 36px);
	padding-left: 0px;
  	padding-right: 0px;
  	padding-bottom: 0px;
}
#findDesigns.ebcf_modal .ebcf_modal-content .service-designs {
	height: calc(100% - 0px);
	padding-left: 8px;
  padding-right: 8px;
	overflow-y: auto;
}
#findDesigns.ebcf_modal .service-designs .group-designs {
	display: grid;
	grid-gap: 8px;
}
#findDesigns.ebcf_modal .service-designs .group-designs >div {
	position: relative;
}
#findDesigns.ebcf_modal .service-designs .group-designs img {
	width: 100%;
	height: auto;
	vertical-align: top;
}
#findDesigns.ebcf_modal .service-designs >div h4 {
	text-align: center;
	color: var(--colorA);
	padding: 10px 0px;
	font-size: 1rem;
}
#findDesigns.ebcf_modal .service-designs .swiper-slide span.icon-heart,
#findDesigns.ebcf_modal .service-designs .group-designs span.icon-heart
{
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 50%;
	background-color: #eeeeee;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 99;
	font-size: 0.8rem;
}
#findDesigns.ebcf_modal .service-designs .group-designs span.icon-heart
{
	left: 10px;
	right: unset;
}
#findDesigns.ebcf_modal .service-designs .swiper-slide span.icon-heart::before,
#findDesigns.ebcf_modal .service-designs .group-designs span.icon-heart::before
{
	color: var(--colorB);
}
#findDesigns.ebcf_modal .service-designs .swiper-slide span.icon-heart.active,
#findDesigns.ebcf_modal .service-designs .group-designs span.icon-heart.active
{
	background-color: var(--colorB);
}
#findDesigns.ebcf_modal .service-designs .swiper-slide span.icon-heart.active::before,
#findDesigns.ebcf_modal .service-designs .group-designs span.icon-heart.active::before
{
	color: #ffffff;
}
#findDesigns.ebcf_modal .ebcf_modal-content >.button {
	text-align: center;
	position: fixed;
  left: 0px;
  right: 0px;
  bottom: 15px;
}
#findDesigns.ebcf_modal .ebcf_modal-content .button button {
	width: calc(33% - 10px);
	height: 36px;
  line-height: 34px;
}

/* Modal Content */
.ebcf_modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.ebcf_modal-content {
	width: calc(100% - 30px);
	background-color: var(--colorA);
	color: var(--colorD);
	padding: 15px;
	border-radius: 15px;
}
#faqModal .ebcf_modal-content {
	color: var(--colorC);
}
.full .ebcf_modal-content {
	background-color: transparent;
	border: none;
	width: 100%;
	padding-left: 20px;
  padding-right: 20px;
}
#confirmDeleteBusiness.full{
	padding-top: 0px;
}
#confirmDeleteBusiness .ebcf_modal-content {
	background-color: #fff;
  width: calc(100% - 30px);
  border-radius: 6px;
  color: var(--colorC);
  padding-top: 20px;
}
#confirmDeleteBusiness .ebcf_modal-content h5 {
	padding-bottom: 6px;
}
#confirmDeleteBusiness .ebcf_modal-content .round-button {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	width: 200px;
  margin-left: calc(50% - 100px);
}
#confirmDeleteBusiness .ebcf_modal-content .round-button button {
	background-color: transparent;
	border: none;
	text-align: center;
	font-size: 0.8rem;
	height: unset;
  line-height: 30px;
  color: var(--colorC);
}
#confirmDeleteBusiness .ebcf_modal-content .round-button button >span {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 0.65rem;
	text-align: center;
	background-color: var(--colorA);
	border-radius: 50%;
}
#confirmDeleteBusiness .ebcf_modal-content .round-button button.close >span {
	background-color: transparent;
	border: 1px solid var(--colorB);
}
#confirmDeleteBusiness .ebcf_modal-content .round-button button.save >span::before {
	color: #ffffff;
}
.full .ebcf_modal-content small.subtitle {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
}
.full .ebcf_modal-content p.option-group-note {
	font-size: 0.85rem;
}
#selectService.full .ebcf_modal-content {
	padding: 40px 25px 70px 25px;
}
#selectService .ebcf_modal-content ul.services {
	padding-top: 30px;
}
#selectService .ebcf_modal-content ul.services li {
	display: inline-block;
	width: 100%;
	height: 68px;
	line-height: 66px;
	border: 1px solid #ffffff;
	border-radius: 6px;
	overflow: hidden;
	font-size: 1.1rem;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.4);
	margin-bottom: 15px;
}
#selectService .ebcf_modal-content ul.services li img {
	height: 66px;
	width: 66px;
	object-fit: cover;
	margin-right: 15px;
	float: left;
}
#selectService .ebcf_modal-content ul.services li.active {
	display: block;
	height: unset;
	line-height: unset;
	background-color: var(--colorA);
	padding: 10px 15px;
}
#selectService .ebcf_modal-content ul.services li.active .tr {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	font-size: 0.9rem;
	width: 100%;
}
#selectService .ebcf_modal-content ul.services li.active .tr.top {
	font-size: 1.1rem;
}
#selectService .ebcf_modal-content ul.services li.active .tr .right {
	float: right;
}
#toCartModal.full .ebcf_modal-content {
	height: calc(100% - 80px);
	overflow-y: scroll;
}
#designInfoModal .ebcf_modal-content {
	height: 100%;
	height: calc(100% - 0px);
	border-radius: 0px;
  	position: relative;
  	background-color: #ffffff;
	overflow-x: hidden;
}
#designInfoModal .ebcf_modal-content h2 {
	text-align: center;
	padding-top: 15px;
  padding-bottom: 25px;
  font-weight: bold;
}
#designInfoModal .ebcf_modal-content h3.title {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	color: var(--colorA);
	background-color: rgba(0, 176, 235, 0.2);
	border-radius: 3px;
	margin-bottom: 15px;
}
#designInfoModal .ebcf_modal-content h3.titleb {
	text-align: center;
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	margin-bottom: 15px;
}
#designInfoModal .ebcf_modal-content div.service-des {
	padding-bottom: 25px;
}
#designModal .ebcf_modal-content {
	position: absolute;
  bottom: 20px;
}
#designModal .ebcf_modal-content .wrap-box,
#findDesigns .group-designs >div .product-info .wrap-box
{
	background-color: #ffffff;
	padding-top: 10px;
	border-radius: 6px;
}
#findDesigns .group-designs >div .product-info .wrap-box {
	width: 100%;
}
#findDesigns .group-designs >div .product-info .button {
	width: 100%;
	text-align: center;
	padding-top: 10px;
}
#findDesigns .group-designs >div .product-info .button button {
	width: 33%;
	height: 36px;
	line-height: 34px;
}
#findDesigns .group-designs >div .product-info .button.two-button {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}
#findDesigns .group-designs >div .product-info .button.two-button button {
	width: 100%;
}
#designModal .ebcf_modal-content h3,
#findDesigns .group-designs >div .product-info h3
{
	text-align: center;
	font-size: 1.1rem;
	font-weight: bold;
	padding-bottom: 3px;
	color: var(--colorC);
}
#designModal .ebcf_modal-content p {
	font-size: 0.9rem;
	text-align: center;
	color: var(--colorC);
	padding: 0px 10px;
  margin-bottom: 0px;
}
#designModal .ebcf_modal-content textarea,
#findDesigns .group-designs >div .product-info textarea
{
	font-size: 0.9rem;
	border: none;
}
#designModal .ebcf_modal-content textarea:focus,
#designModal .ebcf_modal-content textarea:focus-visible,
#designModal .ebcf_modal-content textarea:active,
#findDesigns .group-designs >div .product-info textarea:focus,
#findDesigns .group-designs >div .product-info textarea:focus-visible
{
	outline: none;
}
#confirmModal .ebcf_modal-content {
	height: calc(100% - 90px);
	padding-bottom: 30px;
	overflow-y: auto;
}
#listDesignModal.ebcf_modal .ebcf_modal-content {
	padding: 10px;
	/*padding-top: 25px;
	padding-bottom: 30px;*/
}
.full .ebcf_modal-content h1 {
	text-align: center;
	font-size: 1.6rem;
	padding-top: 20px;
	padding-bottom: 20px;
}
.full .ebcf_modal-content div.description {
	text-align: justify;
	line-height: 24px;
	font-size: 1rem;
	color: var(--colorD);
	margin-bottom: 20px;
  height: calc(100% - 200px);
  overflow-y: scroll;
}
.full .ebcf_modal-content div.description::-webkit-scrollbar {
	width: 0px;
}
#designInfoModal .ebcf_modal-content div.description {
	height: calc(100% - 40px);
	margin-bottom: 0px;
	font-size: 1.1rem !important;
	line-height: 30px;
	display: flex;
	flex-direction: column;
/*	justify-content: center;*/
	color: var(--colorC);
/*  align-items: center;*/
}
#designInfoModal .ebcf_modal-content div.description >div {
	/*background-color: rgba(0, 0, 0, 1);
	padding: 10px;*/
}
#designInfoModal .ebcf_modal-content div.description .small-text {
	font-size: 1rem !important;
	font-style: italic;
	opacity: 0.85;
}
#designInfoModal .ebcf_modal-content div.description .button {
	position: absolute;
	left: 15px;
  right: 15px;
  bottom: 15px;
}
#designInfoModal .ebcf_modal-content div.description * {
	font-size: 1.1rem !important;
	line-height: 30px;
}
.ebcf_modal-content h4 {
	text-align: center;
	padding-bottom: 15px;
}
#designModal .ebcf_modal-content h4,
#toCartModal .ebcf_modal-content h4
{
	text-align: left;
}
#faqModal .ebcf_modal-content h4 img {
	width: 40px;
/*	float: left;*/
	position: relative;
  top: -5px;
  /*border-radius: 50%;
  background-color: var(--colorD);*/
}
.ebcf_modal-content h1 span,
.ebcf_modal-content h2 span,
.ebcf_modal-content h4 span
{
	float: right;
	font-size: 0.68rem;
	margin-top: 7px;
}
.ebcf_modal-content h1 span {
	margin-top: 12px;
}
.ebcf_modal-content #ebcf_close {
	/*background-color: transparent;
  border: none;
  width: 40px;
  text-align: center;
  display: block;
  margin: 0px auto;
  padding: 0px;*/
/*  margin-top: 50px;*/
/*  color: var(--colorD);*/
  /*position: absolute;
  top: 5px;
  right: 10px;*/
}
/*#designInfoModal .ebcf_modal-content #ebcf_close {
	width: 100%;
	text-align: right;
}*/
.ebcf_modal-content #ebcf_close span {
	font-size: 0.6rem;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
  /* line-height: 40px; */
  background-color: #ffffff;
  border-radius: 50%;
}
#designInfoModal .ebcf_modal-content #ebcf_close span {
	width: 32px;
	height: 32px;
	line-height: 32px;
	font-size: 0.65rem;
}
#faqModal .ebcf_modal-content h4 span {
	margin-top: 10px;
}
.ebcf_modal-content #ebcf_close span::before {
	color: var(--colorB);
}
#faqModal .ebcf_modal-content h4 span::before {
	color: var(--colorB);
}
#faqModal .ebcf_modal-content ul li h3 >span::before {
	color: var(--colorA);
}
#listDesignModal.ebcf_modal .ebcf_modal-content .button
{
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 20px;
	height: 42px;
/*	line-height: 42px;*/
	padding: 2px;
	display: inline-block;
	background-color: var(--colorA);
	border-radius: 5px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button {
	position: fixed;
	left: 10px;
	right: 10px;
	bottom: 20px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button {
	border-radius: 3px;
	outline: none;
	border: none;
	color: #ffffff;
	font-size: 0.8rem;
}
#listDesignModal.ebcf_modal .ebcf_modal-content button.upload-file {
	position: relative;
	width: 110px;
	padding: 0px;
	background-color: #ffffff;
	/*font-size: 0.88rem;*/
	color: var(--colorA);
	left: 1px;
	bottom: 0px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.upload-file {
	width: unset;
	background-color: var(--colorA);
	color: #ffffff;
	left: unset;
	bottom: unset;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.upload-file,
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.close
{
	width: 100% !important;
	position: relative;
	left: unset;
	text-align: center;
}
#listDesignModal.ebcf_modal .ebcf_modal-content button.upload-file span,
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.close span
{
	position: absolute;
	top: 12px;
	left: 10px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content button.upload-file span::before {
	color: var(--colorA);
}
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.upload-file span,
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.close span,
#listDesignModal.ebcf_modal .ebcf_modal-content button.find span
{
	font-size: 0.85rem;
	margin-right: 5px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.close span {
	font-size: 0.6rem;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .three-button button.upload-file span::before,
#listDesignModal.ebcf_modal .ebcf_modal-content button.find span::before
{
	color: #ffffff;
}
#listDesignModal.ebcf_modal .ebcf_modal-content button.find {
	background-color: var(--colorB);
}
#listDesignModal.ebcf_modal .ebcf_modal-content button.upload-file input {
	opacity: 0;
	z-index: 99;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .button .save {
	width: calc(100% - 110px) !important;
	position: relative;
	text-align: center;
	float: right;
	left: 0px;
	bottom: 0px;
	box-shadow: none;
	font-size: 1rem;
}
#listDesignModal.ebcf_modal .ebcf_modal-content button
/*#designInfoModal .ebcf_modal-content #ebcf_close*/
{
	/*display: inline-block;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: transparent;
  border: none;
	position: fixed;
	left: 0px;
	bottom: 40px;*/
}
#listDesignModal.ebcf_modal .ebcf_modal-content button.close,
#listDesignModal.ebcf_modal .ebcf_modal-content button.save
{
	width: calc(100% - 30px) !important;
	left: 15px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content h4 .ebcf_close,
#listDesignModal.ebcf_modal .ebcf_modal-content button .ebcf_close,
#designInfoModal .ebcf_modal-content #ebcf_close .ebcf_close
{
	float: unset;
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 0.65rem;
	border-radius: 50%;
	background-color: var(--colorD);
	position: absolute;
  top: 10px;
  right: 30px;
  margin-top: 0px;
/*	margin-left: calc(50% - 20px);*/
}
#listDesignModal.ebcf_modal .ebcf_modal-content button .ebcf_close,
#designInfoModal .ebcf_modal-content #ebcf_close .ebcf_close
{
	width: 38px;
	height: 38px;
	line-height: 38px;
	position: unset;
}
#listDesignModal.ebcf_modal .ebcf_modal-content .ebcf_close::before {
	color: var(--colorB);
}

/* The Close Button */
.ebcf_close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
}

.ebcf_close:hover,
.ebcf_close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.ebcf_modal-content h1 span::before,
.ebcf_modal-content h4 span::before
{
	color: var(--colorD);
}
.ebcf_modal-content h5 {
	text-align: center;
	font-size: 1.18rem;
	font-weight: 500;
}
.ebcf_modal-content .option h5 {
	font-size: 1.15rem;
	/*padding-top: 20px;*/
}
.ebcf_modal-content .img {
	margin-bottom: 20px;
}
#viewProjectDesign.ebcf_modal {
	padding-top: 0px;
	background-color: rgba(255, 255, 255, 1);
}
#viewProjectDesign .ebcf_modal-content {
	height: 100%;
	overflow: hidden;
	position: relative;
	padding: 0px;
	background-color: #f1f1f1;
}
#viewProjectDesign .ebcf_modal-content h5 {
	font-size: 1.1rem;
	text-align: center;
	color: var(--colorC);
	padding: 10px 0px;
}
#viewProjectDesign .ebcf_modal-content .img {
	position: relative;
	margin-bottom: 0px;
	height: calc(100% - 295px);
	/*overflow-y: auto;*/
}
#viewProjectDesign .ebcf_modal-content .img >span {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	width: 30px;
	border-radius: 50%;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.5);
	font-size: 0.8rem;
	position: absolute;
	top: 10px;
	right: 10px;
}
#viewProjectDesign .ebcf_modal-content .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment {
	height: 250px;
	padding: 15px;
	padding-bottom: 50px;
	background-color: #ffffff;
	position: relative;
	overflow-y: auto;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment textarea {
	border: 1px solid #eeeeee;
	padding: 10px;
	font-size: 0.9rem;
	height: 160px;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .button button {
	font-size: 0.9rem;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .button button.save {
	background-color: var(--colorA);
	color: #ffffff;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .button.has-comment {
	position: fixed;
	left: 15px;
	right: 15px;
	bottom: 15px;
	grid-template-columns: 1fr 2fr;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .comment h5 {
	color: var(--colorB);
	font-size: 0.95rem;
	text-align: left;
	padding: 0px 0px 5px 0px;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .comment.reply h5 {
	color: var(--colorA);
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .comment h5 span {
	margin-right: 5px;
	font-size: 1rem;
	position: relative;
	top: 2px;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .comment h5 small {
	font-size: 80%;
	color: #333333;
	float: right;
	position: relative;
  top: 3px;
}
#viewProjectDesign .ebcf_modal-content .wrap-comment .comment p {
	font-size: 0.8rem;
	color: var(--colorC);
	line-height: 22px;
	text-align: justify;
}
.ebcf_modal-content .input {
	margin-bottom: 10px;
}
.ebcf_modal-content .input textarea {
	width: 100%;
	padding: 15px;
	background-color: var(--colorD);
	font-size: 1rem;
  line-height: 24px;
  border-radius: 6px;
}
.full .ebcf_modal-content .button.two-button {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 15px;
	/*position: relative;
	text-align: center;*/
}
#confirmModal .ebcf_modal-content .button.two-button {
	position: absolute;
  left: 20px;
  right: 20px;
  bottom: 15px;
  grid-template-columns: 1fr 2fr;
	grid-gap: 15px;
}
/*#confirmModal .ebcf_modal-content .button.two-button button.confirm,*/
#selectService .ebcf_modal-content .button.two-button button.confirm
{
/*	grid-column: 2 / span 2;*/
/*	background-color: var(--colorA);*/
	color: var(--colorA);
	border: 1px solid var(--colorA);
}
#confirmModal .ebcf_modal-content .button.two-button button.confirm {
	background-color: var(--colorA);
	color: #ffffff;
	border: none;
}
button.close span::before {
	color: var(--colorB);
}
.full .ebcf_modal-content .button.two-button button,
.full .ebcf_modal-content .button.two-button >a,
#listDesignModal.ebcf_modal .ebcf_modal-content button.close,
#listDesignModal.ebcf_modal .ebcf_modal-content button.save
{
	display: inline-block;
	height: 36px;
	line-height: 34px;
	width: unset;
	text-align: center;
	text-transform: capitalize;
	border-radius: 3px;
	border: 1px solid var(--colorB);
	color: var(--colorB);
	background-color: var(--colorD);
	font-size: 0.85rem;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px;
}
#listDesignModal.ebcf_modal .ebcf_modal-content button.save {
	background-color: var(--colorA);
	color: var(--colorD);
	border: none;
}
#toCartModal.ebcf_modal .ebcf_modal-content button.cancel {
	text-transform: capitalize;
}
#toCartModal.ebcf_modal .ebcf_modal-content .button button:last-child,
#selectOption .ebcf_modal-content .button button:last-child
{
	background-color: var(--colorA);
	color: #ffffff;
	border: none;
}
#toCartModal.ebcf_modal .ebcf_modal-content .button button.cancel,
#selectOption .ebcf_modal-content .button button.cancel,
#createBusiness .ebcf_modal-content .button button.cancel
{
	background-color: var(--colorD);
	border: 1px solid var(--colorB);
	color: var(--colorB);
	text-transform: capitalize;
	width: 100%;
/*	margin-left: 26%;*/
  line-height: 34px;
}
#toCartModal.ebcf_modal .ebcf_modal-content .button.two-button button.cancel {
	width: auto;
	margin-left: 0px;
}
.full .ebcf_modal-content .button.two-button button.close {
	width: 42px;
	height: 42px;
	line-height: 42px;
	border-radius: 50%;
	text-align: center;
	background-color: #cacaca;
	font-size: 0.65rem;
	position: absolute;
	left: 0px;
	border: none;
}
.full .ebcf_modal-content .button button.complete,
.full .ebcf_modal-content .button.two-button >a.complete
{
	border-color: var(--colorA);
	color: var(--colorA);
	background-color: var(--colorD);
	font-size: 0.95rem;
}
.ebcf_modal-content .button button {
	color: var(--colorA);
	height: 42px;
	line-height: 42px;
	width: 100%;
	text-align: center;
	text-transform: capitalize;
	font-size: 0.9rem;
	border-radius: 5px;
	background-color: var(--colorD);
	border: none;
}
.full .ebcf_modal-content .button button {
	background-color: var(--colorA);
	color: var(--colorD);
}
.full .ebcf_modal-content .button button.close {
	background-color: var(--colorD);
	border: 1px solid var(--colorB);
	color: var(--colorB);
}
#toCartModal .ebcf_modal-content .button {
	position: absolute;
  left: 20px;
  right: 20px;
  bottom: 15px;
}
#toCartModal ul {
	padding-top: 30px;
	padding-bottom: 40px;
	display: grid;
  grid-auto-flow: row;
  grid-auto-rows: 1fr;
}
#toCartModal ul li {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--colorD);
	border-radius: 6px;
	font-size: 0.8rem;
	line-height: 24px;
	color: var(--colorD);
	background-color: rgba(255, 255, 255, 0.2);
	margin-bottom: 15px;
	display: flex;
	flex-direction: column;
  	/* align-items: center; */
  	justify-content: center;
}

#toCartModal ul li.choose-option
{
	align-items: center;
}
#toCartModal .ebcf_modal-content ul li.choose-option {
	height: 90px;
	flex-direction: row;
	justify-content: unset;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 0px;
	border: 1px solid #ffffff;
	overflow: hidden;
}
#toCartModal ul li.choose-option .thumb {
	width: 88px;
	height: 100%;
	background-color: #ffffff;
}
#toCartModal ul li.choose-option .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}
#toCartModal ul li.choose-option >div:not(.thumb)
{
	flex: 1;
	background-color: transparent;
	color: #ffffff;
	padding: 10px;
	display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}
#toCartModal ul li.choose-option >div:not(.thumb) h3 {
	color: #ffffff;
	padding-bottom: 5px;
}
#toCartModal ul li.choose-option >div p {
	font-size: 0.65rem;
	color: #ffffff;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

#toCartModal ul li h3 {
	font-size: 1.1rem;
	font-weight: bold;
/*	text-align: center;*/
	padding: 0px 0px 10px 0px;
	width: 100%;
}
#toCartModal ul li h3 span {
	float: right;
}
#toCartModal ul li >p {
	margin-bottom: 0px;
}
#toCartModal .ebcf_modal-content ul li.active {
	background-color: var(--colorA);
	border-color: var(--colorA);
/*	color: var(--colorC);*/
}

#faqModal .ebcf_modal-content ul {
/*	padding-top: 40px;*/
}
#faqModal .ebcf_modal-content ul li {
	width: 100%;
	margin-bottom: 10px;
	color: #2e2e2e;
}
#faqModal .ebcf_modal-content ul li h3 {
	font-size: 1.1rem;
	padding-bottom: 10px;
}
#faqModal .ebcf_modal-content ul li.active h3 {
	color: var(--colorA);
}
#faqModal .ebcf_modal-content ul li p {
	font-size: 1rem;
	line-height: 24px;
	text-align: justify;
	display: none;
}
#faqModal .ebcf_modal-content ul li.active p {
	display: block;
	white-space: pre-line;
}
#faqModal .ebcf_modal-content ul li h3 >span {
	font-size: 0.8rem;
  margin-right: 10px;
}
#faqModal .ebcf_modal-content ul li.active h3 >span {
	display: inline-block;
	transform: rotate(90deg);
}
#selectOption .ebcf_modal-content ul
{
	padding: 20px 10px;
}
#confirmModal .ebcf_modal-content ul {
	padding: 20px 1px 10px 5px;
	border-bottom: 1px solid #ffffff;
}
#selectOption .ebcf_modal-content ul.choose-quantity
{
	padding: 20px 10px;
	padding-bottom: 60px;
}
#selectOption .ebcf_modal-content ul li,
#confirmModal .ebcf_modal-content ul li
{
	width: 100%;
	height: 44px;
	line-height: 42px;
	font-size: 1.1rem;
	padding: 0px 20px;
	color: var(--colorD);
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 22px;
	border: 1px solid var(--colorD);
	margin-bottom: 25px;
}
#selectOption .ebcf_modal-content ul li,
#confirmModal .ebcf_modal-content ul li,
#toCartModal .ebcf_modal-content ul li
{
	background-color: #ffffff;
}
#selectOption .ebcf_modal-content ul.choose-quantity li,
#selectOption .ebcf_modal-content ul li.has-discount
{
	height: auto;
	line-height: unset;
	padding: 10px 15px;
	border-radius: 5px;
	position: relative;
}
#selectOption .ebcf_modal-content ul.choose-quantity li h3,
#confirmModal .ebcf_modal-content ul li h3,
#toCartModal .ebcf_modal-content ul li h3,
#selectOption .ebcf_modal-content ul li h3
{
	font-size: 1rem;
	font-weight: 500;
	color: var(--colorA);
}
#selectOption .ebcf_modal-content ul.choose-quantity li.active h3,
#toCartModal .ebcf_modal-content ul li.active h3,
#selectOption .ebcf_modal-content ul li.active h3
{
	color: #ffffff;
}
#selectOption .ebcf_modal-content ul.choose-quantity li p,
#confirmModal .ebcf_modal-content ul li p,
#toCartModal .ebcf_modal-content ul li p
{
	color: var(--colorC);
}
#selectOption .ebcf_modal-content ul.choose-quantity li.active p,
#confirmModal .ebcf_modal-content ul li.active p
{
	color: var(--colorB);
}
#toCartModal .ebcf_modal-content ul li.active p {
	color: #ffffff;
}
#selectOption .ebcf_modal-content ul.choose-quantity li small,
#selectOption .ebcf_modal-content ul li.has-discount small
{
	display: block;
	padding-top: 5px;
	font-size: 80%;
	line-height: 22px;
	text-align: center;
	color: var(--colorC);
}
#selectOption .ebcf_modal-content ul.choose-quantity li.active small,
#selectOption .ebcf_modal-content ul li.has-discount.active small
{
	color: var(--colorB);
}
#selectOption .ebcf_modal-content ul.choose-quantity li span.package-discount,
#selectOption .ebcf_modal-content ul li.has-discount span.package-discount
{
	display: inline-block;
	height: 18px;
	line-height: 16px;
	padding: 0px 12px;
	font-size: 11px;
	background-color: #ffffff;
	border: 1px solid var(--colorB);
	color: var(--colorB);
	border-radius: 2px;
	position: absolute;
	top: -9px;
	right: 10px;
	z-index: 9;
}
#confirmModal .ebcf_modal-content ul li,
#selectOption .ebcf_modal-content ul li.price-unit
{
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(3, 1fr);
	background-color: var(--colorD);
	border-color: var(--colorA);
	color: var(--colorC);
	font-size: 0.95rem;
	padding: 0px 15px;
}
#confirmModal .ebcf_modal-content ul li.has-discount {
	display: block;
	height: auto;
	line-height: unset;
	padding: 10px 15px;
	border-radius: 5px;
}
#confirmModal .ebcf_modal-content ul li >span,
#selectOption .ebcf_modal-content ul li.price-unit >span
{
	white-space: nowrap;
	text-overflow: ellipsis;
  overflow-x: hidden;
}
#selectOption .ebcf_modal-content ul li.active {
	background-color: var(--colorA);
}
#selectOption .ebcf_modal-content ul li span.price {
	float: right;
	margin-left: 8px;
}
#selectOption .ebcf_modal-content ul li h3 s {
	float: right;
	font-size: 80%;
	position: relative;
  top: 4px;
}
#confirmModal .ebcf_modal-content ul li.has-discount h3,
#confirmModal .ebcf_modal-content ul li.has-discount h4
{
	display: grid;
	grid-gap: 5px;
	grid-template-columns: repeat(3, 1fr);
	font-size: 0.95rem;
}
#confirmModal .ebcf_modal-content ul li.has-discount h3.discount {
	color: var(--colorB);
	font-size: 95%;
	font-weight: 500;
	padding-top: 4px;
}
#confirmModal .ebcf_modal-content ul li span.quantity,
#selectOption .ebcf_modal-content ul li.price-unit span.quantity
{
	text-align: center;
}
#confirmModal .ebcf_modal-content ul li span.price,
#selectOption .ebcf_modal-content ul li.price-unit span.price
{
	text-align: right;
	color: var(--colorA);
}
#confirmModal .ebcf_modal-content ul li h3.discount span.price,
#confirmModal .ebcf_modal-content ul li span.price.minus
{
	color: var(--colorB);
}
#confirmModal .ebcf_modal-content .total,
#selectOption .ebcf_modal-content .total
{
	overflow: hidden;
	padding: 20px 15px;
	font-size: 1.1rem;
}
#confirmModal .ebcf_modal-content .total h5 {
	font-size: 1rem;
	text-align: left;
	padding-bottom: 10px;
}
#confirmModal .ebcf_modal-content .total span,
#selectOption .ebcf_modal-content .total span
{
	float: right;
}
#selectOption .ebcf_modal-content .button,
#selectService .ebcf_modal-content .button
{
	position: absolute;
	left: 20px;
  right: 20px;
  bottom: 1px;
}
#selectService .ebcf_modal-content .button,
#selectOption .ebcf_modal-content .button
{
	position: fixed;
	z-index: 99;
}
.fancybox__toolbar.is-absolute, .is-compact .fancybox__toolbar {
	top: unset;
	bottom: 5px;
}
.fancybox__toolbar__column.is-left {
	display: none;
}
.fancybox__toolbar__column.is-right {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 15px;
	padding-left: 15px;
	padding-right: 15px;
}
button.f-button {
	width: auto;
	text-align: center;
	height: 36px;
	line-height: 34px;
	text-align: center;
	background-color: #ffffff;
	border: 1px solid var(--colorB);
	border-radius: 3px;
	font-size: 0.8rem;
	color: var(--colorB);
/*	margin: 0px 6px;*/
}
button.f-button.is-close-btn {
/*	right: 140px;*/
	position: unset;
}
button.f-button.zoom-in {
/*	right: 16px;*/
	background-color: var(--colorA);
	border: none;
	line-height: 26px;
	color: #ffffff;
	/*position: absolute;
	left: 10px;*/
}
button.f-button.zoom-out {
/*	right: 10px;*/
	background-color: var(--colorB);
	border: none;
	line-height: 26px;
	color: #ffffff;
	/*position: absolute;
	right: 10px;*/
}
.otp-wrapper {
  display: flex;
  justify-content: center; /* Căn ngang */
  align-items: center;     /* Căn dọc */
  margin-bottom: 15px;
}
.otp-group {
  display: flex;
  gap: 12px; /* Khoảng cách giữa các ô */
}
.otp-digit {
  width: 38px;
  height: 52px;
  font-size: 22px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 2px;
}
.otp-digit:focus {
  outline: 1px solid #aaa;
}
a.resent {
	display: inline-block;
	height: 24px;
	line-height: 20px;
	padding: 0px 15px;
	border-radius: 22px;
	border: 1px solid var(--colorA);
	color: var(--colorA);
	font-size: 0.9rem;
	box-shadow: rgba(0, 0, 0, 0.15) 1.2px 1.2px 2px;
}

#ui-datepicker-div {
	left: 30px !important;
}
.ui-datepicker th {
	font-weight: normal;
}
.ui-widget-header {
	background-color: #ffffff;
}
.ui-datepicker table {
	border: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active, .ui-button:active,
.ui-button.ui-state-active:hover
{
	background-color: var(--colorA);
}

.custom-toast {
  position: relative;
  background: transparent !important;
  box-shadow: none !important;
  max-width: calc(100% - 40px); !important;
  padding: 0 !important;
  margin-top: 100px;
  overflow: visible;
}
.custom-toast.right {
	margin-top: 0px;
	margin-bottom: 60px;
}
.custom-toast.right .notyf__toast--dismissible .notyf__wrapper {
	float: right;
}
/* Toàn bộ khung thông báo với nền hồng */
.custom-toast .bubble {
  background: #e6007e;
  border-radius: 6px; /* Bo góc mềm mại hơn */
  padding: 12px 16px;
  color: white;
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Header chứa avatar + tên */
.custom-toast .header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

/* Ảnh đại diện nằm trên nền hồng */
.custom-toast .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  border: 2px solid white;
}

/* Tên người gửi */
.custom-toast .name {
  font-weight: bold;
  font-size: 1.02rem;
}

/* Nội dung tin nhắn */
.custom-toast .message-text {
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
}

.custom-toast .speech-bubble-tail {
  position: absolute;
  bottom: -8px;
  left: -23px;
  width: 24px;
  z-index: 9;
/*  height: auto;*/
}
.custom-toast.right .speech-bubble-tail {
	left: unset;
	right: -23px;
}
.custom-toast .speech-bubble-tail img {
	width: 100%;
}
.custom-toast .notyf__dismiss-btn {
	display: none;
}
@keyframes slide-in-right {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.custom-toast .toast-content.right-to-left {
  animation: slide-in-left 0.5s ease-out;
}
.custom-toast .toast-content.left-to-right {
  animation: slide-in-right 0.5s ease-out;
}

.discount-alert {
	/*position: fixed;
	top: 90px;
	left: 0px;
	right: 0px;*/
	padding: 10px 10px;
	background-color: var(--colorB);
	color: var(--colorD);
}
.discount-alert h5 {
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}
.discount-alert h5 span {
	font-size: 1.4rem;
	margin-right: 8px;
}
.discount-alert button {
	width: 100%;
	border: none;
	display: inline-block;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	text-transform: uppercase;
	color: var(--colorB);
	background-color: #ffffff;
	font-size: 1rem;
  font-weight: bold;
}

.iphone-15-up footer {
	height: 65px;
}

@media only screen and (min-width: 400px) {
	section.articles .article .des,
	section.article .other-blog .article .des
	{
		display: flex;
    flex-direction: column;
    justify-content: center;
	}
}
@media only screen and (max-width: 420px) {
  .product-cart .cart-item >div .choose .input {
  	font-size: 0.8rem;
  }
  .product-cart .cart-item >div .choose .input select {
  	max-width: 55%;
  	font-size: 0.9rem;
  }
  /*.product-cart .checkout .upload-zelle .input-file {
  	width: 100px;
  	height: 100px;
  	line-height: 100px;
  }*/
}
@media screen and (max-width : 375px)
{
	.main .wrap-content >.slide p {
		font-size: 1.8rem;
	}
	.product-cart .cart-item >div .img {
		width: 100px;
		height: 100px;
	}
	.product-cart .cart-item >div .choose {
/*		width: calc(100% - 125px);*/
		padding-top: 0px;
	}
	section.articles .article .des p,
	section.article .other-blog .article .des p
	{
		font-size: 0.9rem;
	}
	.promo-vnews {
		font-size: 0.75rem;
	}
	.product-cart .total {
		padding: 8px 15px 15px 15px;
	}
	.product-cart .total .tr {
		font-size: 1.1rem;
	}
	.product-cart .total .wrap-discount .tr {
		font-size: 0.9rem;
	}
	.product-cart .form.login .input input::placeholder {
		font-size: 0.9rem;
		position: relative;
		top: -2px;
	}
}
@media screen and (min-width: 341px) and (max-width : 360px) {
	section.articles .article .des h3,
	section.article .other-blog .article .des h3
	{
		line-height: 20px;
		font-size: 0.95rem;
		padding-bottom: 5px;
	}
	main.sale-ad article h2,
	.other-blog article h2,
	.post .overlay.full h2
	{
		font-size: 1rem !important;
	}
	section.articles .article .des p,
	section.article .other-blog .article .des p,
	main.sale-ad article .overlay p,
	.other-blog article .overlay p,
	.my-account .body .post .overlay.full p
	{
		font-size: 0.9rem;
	}
	main.sale-ad article .overlay p,
	.other-blog article .overlay p,
	.my-account .body .post .overlay.full p
	{
		margin-bottom: 5px;
	}
	main.sale-ad article a.showmore,
	.other-blog article a.showmore,
	.post .overlay.full a.showmore
	{
		margin-top: 5px !important;
	}
	.mobile-menu .menu-content ul.services li ul.sub >li.active >a {
		right: 15px;
	}
	.product-cart .total .wrap-discount .tr {
		font-size: 0.82rem;
	}
}
@media only screen and (max-width: 340px) {
	.main .wrap-content .search-input .not-input span.title {
		font-size: 1rem;
	}
	.main .wrap-content .buttons {
		grid-gap: 4px;
	}
	.main .wrap-content .buttons button {
		font-size: 0.76rem;
		min-width: 0;
	}
	.main .wrap-content .buttons button span {
		margin-right: 5px;
		font-size: 0.65rem;
		top: 0px;
	}
	#selectOption .ebcf_modal-content ul {
		padding: 15px;
	}
	#selectOption .ebcf_modal-content ul li,
	#confirmModal .ebcf_modal-content ul li
	{
		height: 40px;
		line-height: 38px;
		border-radius: 20px;
		font-size: 1rem;
		margin-bottom: 18px;
	}
	#confirmModal .ebcf_modal-content ul li >span,
	.product-cart .cart-item .choose .input .select,
	.product-cart .form.checkout p
	{
		font-size: 0.9rem;
	}
	#toCartModal ul li {
		padding: 8px 10px;
	}
	#toCartModal ul li h3 {
		font-size: 0.95rem;
	}
	.product-cart .cart-item h5,
	#listDesignModal .cart-item h5,
	.ebcf_modal-content h4
	{
		font-size: 1.02rem;
	}
	.product-cart .total .tr,
	.policy.content .title h2,
	.partnership.content .title h2
	{
		font-size: 1.1rem;
	}
	.total a,
	.product-cart .checkout .upload-zelle .input-file,
	.my-account .customer-head .customer-name strong,
	.schedule-detail .select-schedule .grid-input .select-time >div >span,
	.schedule-detail .select-schedule .grid-input >div .input.select-box >span,
	.policy section.policy-section .row-content,
	.partnership.content .row-content
	{
		font-size: 1rem;
	}
	#listDesignModal.ebcf_modal .ebcf_modal-content .button .save,
	#listDesignModal.ebcf_modal .ebcf_modal-content button.upload-file span,
	#chooseBusiness .business h3,
	.my-account .project-card .right-content .top,
	.main .wrap-content .my-account .address label
	{
		font-size: 0.95rem;
	}
	.main .wrap-content .my-account .address address,
	.guest-chat .wrap-chat .input-chat input[type="text"],
	#editAccount .form .business .right-content small,
	#editAccount .form .business .right-content strong
	{
		font-size: 0.9rem;
	}
	.full .ebcf_modal-content .button button {
		font-size: 0.85rem;
	}
	.product-cart .checkout .select-pay-type .button .right-content p,
	#chooseBusiness .business h3 i,
	#listDesignModal .cart-item textarea,
	.my-account .customer-head .customer-name small
	{
		font-size: 0.8rem;
	}
	.product-cart .form h3 {
		font-size: 1.2rem;
	}
	.my-account .project-card div.icon {
		width: 42px;
		font-size: 1.8rem;
	}
	.my-account .project-card .right-content {
    width: calc(100% - 42px);
	}
	.guest-chat .wrap-chat .input-chat {
		left: 60px;
	}
	.guest-chat .wrap-chat .input-chat a.call {
		left: -45px;
	}
	.guest-chat .wrap-chat .input-chat input[type="text"] {
		padding-left: 20px;
	}
	.schedule-detail .select-schedule {
		padding-top: 0px;
	}
	.schedule-detail .select-schedule .grid-input {
		grid-gap: 5px;
	}
	.schedule-detail .select-schedule .grid-input >div {
		padding: 5px 30px;
	}
	#editAccount .business-info .business h3 i {
		font-size: 65%;
	}
	#designInfoModal .ebcf_modal-content div.description * {
    font-size: 1rem !important;
	}
	.mobile-menu >ul li {
		font-size: 1.15rem;
		height: 45px;
    line-height: 45px;
	}
	section.articles .article .des h3,
	section.article .other-blog .article .des h3
	{
		line-height: 20px;
		font-size: 0.95rem;
		padding-bottom: 5px;
	}
	section.articles .article .des p,
	section.article .other-blog .article .des p
	{
		font-size: 0.85rem;
	}
}

@media screen and (min-height: 900px) {
	.mobile-menu >ul {
		padding-top: 80px;
	}
	.mobile-menu .menu-content.schedule-call .type-phone {
		padding-top: 29%;
	}
	.mobile-menu .schedule-call .schedule-detail {
		padding-top: 50px;
	}
	html.h100,
	body.page-cart,
	body.page-cart .mobile-web,
	body.page-cart .main .wrap-content
	{
		height: 100%;
		background-color: #ffffff;
	}
	.product-cart .form.checkout {
		padding-top: 60px;
	}
}
@media screen and (max-height: 667px) {
	.mobile-menu .schedule-call .schedule-detail {
		padding-bottom: 45px;
	}
	.mobile-menu .schedule-call .schedule-detail.complete {
		padding-top: 50px;
	}
	.mobile-menu .schedule-call .schedule-detail.complete h2 {
		padding-bottom: 35px;
	}
	.mobile-menu .schedule-call .schedule-detail.complete .note {
		margin-top: 40px;
    margin-bottom: 45px;
	}
	.mobile-menu >ul {
		padding-top: 5px;
	}
	.mobile-menu >ul li {
		height: 55px;
    line-height: 55px;
	}
}
@media screen and (max-height: 600px) {
  /* Áp dụng khi chiều cao của màn hình nhỏ hơn hoặc bằng 600px */
  .mobile-menu >ul {
    padding-top: 10px;
  }
  .mobile-menu >ul li {
  	font-size: 1.25rem;
  	height: 50px;
  	line-height: 50px;
  }
  .mobile-menu .schedule-call .schedule-detail {
  	padding-bottom: 65px;
  }
  .mobile-menu .menu-content.schedule-call .type-phone {
  	padding-top: 8%;
  }
  .mobile-menu .menu-content.schedule-call .type-phone button.next {
  	margin-top: 25px;
  }
  .product-cart .checkout .select-pay-type {
		padding-top: 30px;
	}
	.mobile-menu .schedule-call .schedule-detail {
		padding-bottom: 45px;
	}
}

@media screen and (min-width: 393px) and (min-height: 852px) and (max-width: 460px) and (max-height: 970px) and (orientation: portrait) {
	#membershipModal.ebcf_modal {
		bottom: 65px;
	}
  	footer {
    	height: 65px;
  	}
}


.schedule-call .call-box {
	text-align: center;
	padding: 40px 0px;
	/* border-radius: 10px; */
	margin-top: auto;
	margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    max-width: unset;
    background-color: var(--colorA);
}

.schedule-call .call-text {
	color: #fff;
	font-size: 1rem !important;
	margin-bottom: 20px;
	font-weight: 400;
}

.schedule-call .call-btn {
	background: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 30px;
	font-size: 16px;
	font-weight: 600;
	color: #eb008b;
	/* hồng chữ */
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
	transition: all 0.2s ease;
}

.schedule-call .call-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, .15);
}