@charset "UTF-8";

/* Media Query */
@media(max-width:1024px) { 
	/* General */
	.rps-xl--visible { display: block; }
	.rps-xl--hidden { display: none; }
	.rps-xl--w-100 { width: 100%; }
	.ckeditor { overflow-x: auto; }
	.ckeditor:after { content: ''; clear: both; display: block; }
	.ckeditor *:not(iframe) { max-width: 100% !important; height: auto !important; }
	.ckeditor iframe { max-width: 100% !important; } 

	/* ? MenuDesk */
	.menu-desk { width: 0px; opacity: 0; position: fixed; top: 0; left: -100%; bottom: 0; background: transparent; transition: all 0.5s ease-out; z-index: 999; }
	.menu-desk.show {opacity: 1;left: 0;width: 480px;max-width: 85%;transition: all 0.5s ease-out;z-index: 300;}
	.menu-desk__inner { opacity: 0; position: fixed; top: 0; left: -300px; bottom: 0; width: 290px; text-align: left; box-shadow: -2px 0px 5px 0px #2222224d; background: #fff; transition: all 0.5s ease-out; cursor: pointer; z-index: 1000; }
	.menu-desk.show .menu-desk__inner { opacity: 1; left: 0; }
	.menu-desk__btn-exit { transition: all 0.3s ease-out; cursor: pointer; }
	.menu-desk__btn-exit i { font-size: 20px; color: var(--clr-tone); }
	.menu-desk.show .menu-desk__btn-exit i { transform: rotateZ(-90deg); transition: all 0.5s ease-out; }
	.menu-desk__logo { display: table; margin: auto; zoom: .76; }
	.menu-desk__list { padding: 15px; position: relative; }
	.menu-desk-center ul { list-style: none; padding: 0; margin: 0 }
	.menu-desk-center ul li.li-tim { display: none }
	.menu-desk-center ul li h2 { font-size: 17px; margin-bottom: 0 }
	.menu-desk-center ul li b { display: inline-block; vertical-align: top; margin-right: 8px }
	.menu-desk-center ul li b img { display: inline-block; vertical-align: top }
	.menu-desk-center ul li a { color: #191919; display: block; border: 1px solid rgb(132 132 132 / 20%); padding: 10px 40px 10px 10px; position: relative; font-size: 15px; margin-bottom: 12px; border-radius: 5px; transition: .5s !important; font-weight: 500 }
	.menu-desk-center ul li a.active2 { color: #fff; box-shadow: 0 0 0 25px var(--clr-tone) inset; }
	.menu-desk-center ul li a i { position: absolute; right: 10px; transform: rotate(90deg); width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; font-size: 12px; background: var(--clr-tone); color: #fff; border-radius: 50%; top: 10px }
	.menu-desk-center ul li a.active2 i { transform: rotate(0); border-left: 1px solid rgba(255, 255, 255, .2); background: #fff; color: var(--clr-tone); }
	.menu-desk-center ul ul { display: none; padding-left: 15px; margin: 5px 0 10px 0 }
	.menu-desk-center ul li ul li a { padding-left: 20px; color: #6f6f6f }
	.menu-desk-center ul li ul li ul li a { padding-left: 20px }
	.menu-desk-center ul li:last-child a { margin-bottom: 0 }
	.menu-desk__social-title { font-family: var(--font-bold); font-size: 20px; color: #fff; text-align: left; margin-bottom: 10px; }
	.menu-desk__social ul { list-style: none; padding: 0px; margin: 0px; }
	.menu-desk__social ul li { margin-right: 15px; }
	.menu-desk__social ul li:last-child { margin-right: 0; }
	.menu-desk__social ul li a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 5px; background: transparent; transition: all 0.3s ease-out; }
	.menu-desk__social ul li a:hover { box-shadow: 0px 0px 4px 0px #fff, 0px 0px 4px 0px #fff inset; }
	.menu-btn { color: var(--clr-white); font-size: 35px; text-decoration: none; width: 20px; display: block; cursor: pointer; margin: 0; text-align: center; }
	.menu-desk--top { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 5px 15px; border-bottom: 1px solid var(--clr-tone); }
	.menu-desk--bottom { padding: 15px; margin-top: auto; border-top: 1px solid var(--clr-tone); }
	.menu-desk__inner { display: flex; flex-direction: column; position: absolute; top: 0; bottom: 0; height: 100%; width: 100%; }
	.menu-desk-center { overflow-y: scroll; height: 100%; -webkit-overflow-scrolling: touch; -ms-scroll-chaining: none; overscroll-behavior: none; }
	/* TODO: Search Toggle */
	.search__toggle { --height: 40px; position: relative; }
	.search__toggle .search__icon {display: grid;place-items: center;width: 40px;height: var(--height);font-size: 17px;color: var(--clr-white);cursor: pointer;}
	.search__toggle .search__icon.active { color: var(--clr-active); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: var(--clr-white); }
	.search__toggle .search__grid {opacity: 1;width: 230px;overflow: hidden;position: absolute;top: 50px;right: 0px;display: -webkit-box;display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;height: var(--height);border: 1px solid var(--clr-active);-webkit-border-radius: 999px;-moz-border-radius: 999px;border-radius: 999px;background: var(--clr-white);padding: 0rem 0.25rem;}
	.search__toggle .search__grid .search__button { display: grid; place-items: center; width: 35px; font-size: 17px; color: var(--clr-active); background: none; }
	.search__toggle .search__grid .search__input {-webkit-box-flex: 1;-webkit-flex: 1;-moz-box-flex: 1;-ms-flex: 1;flex: 1;color: var(--clr-active);text-indent: 10px;width: 100%;}
	.search__toggle .search__grid input:focus {box-shadow: none;}
	.search__toggle .search__grid input::-webkit-input-placeholder { /* autoprefixer: off */ color: var(--clr-silver); }
	.search__toggle .search__grid input:-moz-placeholder { /* autoprefixer: off */ color: var(--clr-silver); }
	.search__toggle .search__grid input::-moz-placeholder { /* autoprefixer: off */ color: var(--clr-silver); }
	.search__toggle .search__grid input:-ms-input-placeholder { /* autoprefixer: off */ color: var(--clr-silver); }
	 
	/* Mmenu */
	/* nav:where(#menu, #mm-menu) { font-family: var(--font-bold); --mm-color-background: #fff; --mm-color-text: #000; --mm-color-text-dimmed: #000; --mm-color-button: #000; }
	nav:where(#menu, #mm-menu) .mm-navbar__title { font-size: 18px; }
	.mm-listitem__btn span { display: none; } */
	.navigation {background: var(--clr-tone);}
	.navigation>.navigation__inner:before {content: none;}
	.header-hotline-translate {display: none;}
	.intro__main {flex-direction: column-reverse; gap: 50px;} 
	.intro-right,
	.intro-left {width: 100%;}
	.feedbackVideo__main {flex-direction: column; gap: 50px ;}
	.feedbackVideo-left,
	.feedbackVideo-right {width: 100%;}


}
@media (min-width:851px) and (max-width:1023px) { }
@media(max-width:850px) {
	
	/* General */
	.rps-lg--visible { display: block; }
	.rps-lg--hidden { display: none; }
	.rps-lg--w-100 { width: 100%; }
	
	/* Product */
	.album__list.flex-list,
	.product__list.flex-list { --columns: 3; --space-horizontal: 0.625rem; --space-vertical: 1.25rem; }
	.news__list.flex-list { --columns: 2; --space-horizontal: 0.625rem; --space-vertical: 1.25rem; }
	
	/* Footer */
	.footer-article__inner>[class^="footer-article--"] { width: 100%; }
	.footer-article__inner>[class^="footer-article--"]:not(:last-child) { margin-bottom: 1.5rem; }

	.whychoose__item {width: 100%;}
	.whychoose__item.flex-row-reverse {flex-direction: row !important;}
	.whychooose-left .whychoose__photo:before {content: '';width: 100%;height: 100%;border: 2px solid var(--clr-white);border-radius: 50%;position: absolute;top: 0;left: 0;z-index: -1;clip-path: polygon(100% 0, 81% 0, 0 0, 0 100%, 100% 100%, 100% 100%, 31% 35%);z-index: -1;  transition:  all 700ms linear;}
	.whychooose-left .whychoose__photo:after {content: '';width: 8px;height: 8px;background: var(--clr-white);position: absolute;top: 6px;right: 1.5rem;left: auto;z-index: -1;border-radius: 50%;}
	.whychooose-left .whychoose__info {padding: 20px 0px 20px 20px;background: linear-gradient(90deg, #ffffff78 0%, rgba(255, 254, 254, 0.00) 100%);border-radius: 0 100px 100px 0;border-left: 3px solid var(--clr-white);border-right: none;text-align: start !important;}
 	.whychooose-left .whychoose__info:before {content: url(../images/i-right.png);position: absolute;right: 100%;left: auto;top: 50%;transform: translateY(-50%);}
	.whychoose__item {margin-bottom: 20px !important;}
}

@media(max-width:769px) {
	.footer-powered:has(.footer-statistic) .footer-copyright, .footer-powered:has(.footer-statistic) .footer-statistic { text-align: center; }
	.footer-powered:has(.footer-statistic) .footer-copyright { margin-bottom: 0.25rem; } 
	.feedback__info:before {content: none;}

	.footer-powered .wrap-content {flex-direction: column; gap: 10px; justify-content: center; align-items: center; text-align: center;}
	.header .wrap-content {flex-direction: column; align-items: center; justify-content: center;}
	.header-banner canvas {display: none !important;}
	.header-banner img {opacity: 1 !important;}
	
}
@media(max-width:576px) {
	
	/* General */
	.rps-md--visible { display: block; }
	.rps-md--hidden { display: none; }
	.rps-md--w-100 { width: 100%; }
	
	/* Product */
	.product__list.flex-list { --columns: 2; --space-horizontal: 0.5rem; --space-vertical: 1.25rem; } 
	.product__info {padding: 0 7px 7px;}
	
	/* News */
	.news .news__photo { margin-bottom: 1rem; } 
	.intro__photo1 {position: unset;} 
	.intro-left {padding: 0;}
	.intro__counter {position: unset;}
	.feedback__main .swiper {
		height: 360px;
	}
	.feedback__item {min-height: 350px;}
	.whychoose__photo {width: 80px;height: 80px;}
	.whychoose__photo-inner {padding: 15px;}
	.whychooose-left .whychoose__photo:after,
	.whychooose-right .whychoose__photo:after {right: 0.75rem;}
	.whychooose-left .whychoose__info,
	.whychooose-right .whychoose__info {padding: 10px;}
	.swiper-pagination.-pagination-feedback {display: none;}
	.feedback-inner {flex-direction: column !important;}
	.google-tranlate {justify-content: center;gap: 12px !important;margin-top: 1rem;}
}
@media(max-width:420px) { }
@media(max-width:369px) {
	
	/* Cart */
	.cart-pro-detail a { width: 100%; }
	.cart-pro-detail a:first-child { margin: 0 0 0.5rem 0; }
	.cart-pro-detail a i { display: none; }
}