/*Hiệu ứng menu*/
.centery, .centery-after:after, .centery-before:before { -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.ease-in-200{-webkit-transition: all 500ms ease-in; -moz-transition: all 500ms ease-in; -ms-transition: all 500ms ease-in; -o-transition: all 500ms ease-in; transition: all 500ms ease-in;}
@-webkit-keyframes slideInDown1 {
0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
@keyframes slideInDown1 {
0%{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);visibility:visible}
100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}
.slideInDown1{-webkit-animation-name:slideInDown1;animation-name:slideInDown1}

/**/
.fixed { position:fixed !important;left:0;right:0;top:0; z-index:999;animation: slideInDown1 1s 0s; }

/*Hieu ung*/
.hvr-float-shadow{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform;transition-property:transform}
.hvr-float-shadow:before{pointer-events:none;position:absolute;z-index:-1;content:'';top:100%;left:5%;height:10px;width:90%;opacity:0;background:-webkit-radial-gradient(center,ellipse,rgba(0,0,0,.35) 0,transparent 80%);background:radial-gradient(ellipse at center,rgba(0,0,0,.35) 0,transparent 80%);-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-property:transform,opacity;transition-property:transform,opacity}
.hvr-float-shadow:active,.hvr-float-shadow:focus,.hvr-float-shadow:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px)}
.hvr-float-shadow:active:before,.hvr-float-shadow:focus:before,.hvr-float-shadow:hover:before{opacity:1;-webkit-transform:translateY(5px);transform:translateY(5px)}

.hvr-sweep-to-right { display:inline-block; vertical-align:middle; -webkit-transform:perspective(1px) translateZ(0); transform:perspective(1px) translateZ(0); box-shadow:0 0 1px transparent; position:relative; -webkit-transition-property:color; transition-property:color; -webkit-transition-duration:.3s; transition-duration:.3s}
.hvr-sweep-to-right:before { content:""; position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; background:#E83236; border-radius: 5px;-webkit-transform:scaleX(0); transform:scaleX(0); -webkit-transform-origin:0 50%; transform-origin:0 50%; -webkit-transition-property:transform; transition-property:transform; -webkit-transition-duration:.3s; transition-duration:.3s; -webkit-transition-timing-function:ease-out; transition-timing-function:ease-out}
.hvr-sweep-to-right:active,.hvr-sweep-to-right:focus,.hvr-sweep-to-right:hover { color:#fff}
.hvr-sweep-to-right:active:before,.hvr-sweep-to-right:focus:before,.hvr-sweep-to-right:hover:before { -webkit-transform:scaleX(1); transform:scaleX(1)}

.hover_sang2{position:relative; overflow:hidden;}
.hover_sang2:before{position: absolute;top: 0;left: -85%;z-index: 10;display: block;content: '';width: 50%;height: 100%;background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}
.hover_sang2:hover:before {transition: 1s;left: 100%;}

.hover_xam { position:relative; overflow:hidden; }
.hover_xam::before { content:""; background:rgba(255, 255, 255, .5); bottom:0; left:0; position:absolute; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -khtml-opacity:1; -o-opacity:1; -ms-opacity:1; -webkit-opacity:1; -moz-opacity:1; opacity:1; width:0; height:0; z-index:2; }.hover_xam::after { content:""; background:rgba(255, 255, 255, .5); top:0; right:0; position:absolute; -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); -ms-transform:rotate(90deg); -o-transform:rotate(90deg); transform:rotate(90deg); -khtml-opacity:1; -o-opacity:1; -ms-opacity:1; -webkit-opacity:1; -moz-opacity:1; opacity:1; width:0; height:0; z-index:2; }.hover_xam:hover::before, .hover_xam:hover::after { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); transform:rotateY(180deg); -webkit-transition-duration:1.3s; -moz-transition-duration:1.3s; -ms-transition-duration:1.3s; -o-transition-duration:1.3s; transition-duration:1.3s; -khtml-opacity:0; -o-opacity:0; -ms-opacity:0; -webkit-opacity:0; -moz-opacity:0; opacity:0; height:100%; width:100%; }

/*Xoay*/
.xoay:hover img {transform: rotateY(360deg);transition: all 0.6s linear;}

/*Phone anima*/
.animate__animated.animate__infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animate__tada {-webkit-animation-name: tada;animation-name: tada;}
.animate__animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-duration: var(--animate-duration);animation-duration: var(--animate-duration);-webkit-animation-fill-mode: both;animation-fill-mode: both;}

@keyframes mycriteria { 0% {transform: rotate(0deg); } 25% {  transform: rotate(-45deg); }75% {  transform: rotate(45deg); }} 

@keyframes mylogo { 
	0% {transform: rotateY(-360deg); } 25% {  transform: rotateY(0deg); }75% {  transform: rotateY(360deg); }
} 

@keyframes quayvong {
	0% {transform: translate(0%, 0%);}
	25% {transform: translate(5%, 0%);}
	50% {transform: translate(5%, -5%);z-index: 3;}
	75% {transform: translate(0%, -5%);z-index: 3;}
	100% {transform: translate(0%, 0%);}
}
	
@keyframes quayvong2 {
	0% {transform: translate(0%, 0%);}
	25% {transform: translate(-15%, 0%);}
	50% {transform: translate(-15%, 5%);z-index: 1;}
	75% {transform: translate(0%, 5%);z-index: 1;}
	100% {transform: translate(0%, 0%);}
}
/*Nhấp nháy*/
.blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; }  @-moz-keyframes blinker {  0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }  @-webkit-keyframes blinker {  0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } }  @keyframes blinker {  0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } 

/*======= Button 4 =======*/
.btn4:before {content: '';position: absolute;bottom: 0px;left: 0px;width: 100%;z-index: -1; height: 1px;background:#019A53;border-radius: 10px; display: block;-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: scale(0, 1);-ms-transform: scale(0, 1);transform: scale(0, 1);-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);transition: transform 0.4s cubic-bezier(1, 0, 0, 1)}
.btn4:hover:before {-webkit-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);transform: scale(1, 1) }

.btn5:before {content: '';position: absolute;bottom: 0px;left: 0px;width: 100%;z-index: -1; height: 1px;background:#ffffff;border-radius: 10px; display: block;-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: scale(0, 1);-ms-transform: scale(0, 1);transform: scale(0, 1);-webkit-transition: transform 0.4s cubic-bezier(1, 0, 0, 1);transition: transform 0.4s cubic-bezier(1, 0, 0, 1)}
.btn5:hover:before {-webkit-transform-origin: left top;-ms-transform-origin: left top;transform-origin: left top;-webkit-transform: scale(1, 1);-ms-transform: scale(1, 1);transform: scale(1, 1) }


/* Danh muc san pham*/
.bg-category-drop{width: 250px;position: sticky;cursor: pointer;top: 70px;z-index: 5;}
.bg-featured-product .wrap-content{display: flex;align-items: stretch;justify-content:space-between;}

.title-featured{text-align: left;gap: 10px;}
.title-featured span{font-size: 30px;}

.title_product{background: #019A53;padding: 10px;text-align: left;}
.title_product span{color: #FFF; font-family: 'FontB'; font-size: 14px;line-height: 1.75;text-transform: uppercase;}

.bg-featured-product.has-category{--width: 250px;}
.bg-featured-product:not(.has-category) {width: calc(100% - 250px - 20px);}
.category-drop {position: relative;width: 250px;z-index: 100;}
/* .category-drop__inner {display: grid;height: 100%;} */
.category-drop__title {display: flex;justify-content: space-around;align-items: center;gap: 0ch 1ch;width: 100%;height: 100%;font-family: var(--font-bold);font-size: 16px;color: #fff !important;text-transform: uppercase;background: #0E2E16;padding: 13px;}
.category-drop__title i {margin-right: 5px;}

.title_product_list{background: #ffffff;text-align: center;padding: 15px 10px;}
.title_product_list span{color: #ffffff;font-size: 16px; font-family: 'FontB';text-transform: uppercase;}

/* .category-drop__main {position: absolute;left: 0;width: 100%;box-shadow: 0px 0px 10px 0px #00000040;} */
.category-drop__main:not(.show) {opacity: 0;visibility: hidden;top: 100%;transform: scaleY(0);transform-origin: 100% 0%;transition: all 0.15s ease-out 0.15s;}
.category-drop__inner:hover .category-drop__main {opacity: 1;visibility: visible;transform: scaleY(1);transition: all 0.3s ease-out;}
.category-drop__list.--level-0 {overflow-y: auto;height: inherit;border: 1px solid #019A53;border-top: none;}/* padding: 0.5rem 0rem; */
.category-drop__list.--level-0::-webkit-scrollbar {width: 2px;background: var(--color-web-secondary);}
.category-drop__list.--level-0::-webkit-scrollbar-thumb {background: var(--color-web-primary);}
.category-drop__list {width: 100%;list-style: none;background: #fff;padding: 0;margin: 0;}
.category-drop__item>.category-drop__list {opacity: 0;visibility: hidden;position: absolute;left: 100%;box-shadow: 0px 0px 5px 0px #00000080;transform: scaleX(0);transform-origin: 0% 100%;transition: all 0.15s ease-out;}
.category-drop__item:hover>.category-drop__list {opacity: 1;visibility: visible;transform: scaleX(1);transition: all 0.3s ease-out;}
.category-drop__item {padding: 0;}
.category-drop__item:hover {color: #0E2E16;}
.category-drop__item-inner {position: relative;display: flex;align-items: center;gap: 1ch;padding: 0.75rem 0.5rem;cursor: pointer;}
.category-drop__item:not(:last-child)>.category-drop__item-inner {border-bottom: 1px dashed #BABABA;}
.category-drop__name {color: #111111;line-height: 1.5;font-size: 14px;font-family: 'FontB';margin-bottom: 0;text-transform: capitalize;}
.category-drop__has-child {position: absolute;right: 0;color: inherit;transition: all 0.3s ease-out;}
.category-drop__icon-inner {margin-bottom: 0;height: 17px;}

/* .title_product_list.active{ background:#019A5330;} */
.category-drop__item-inner:hover > .category-drop__name {color: #019A53;padding-left: 5px;}
.category-drop__item-inner:hover > .category-drop__icon-inner i{color: #019A53;}