/* Menu Effects */
.centery, .centery-after:after, .centery-before:before {
    transform: translateY(-50%);
}
/* Transition Utility */
.ease-in-200 {
    transition: all 500ms ease-in;
}
/* Slide Down Animation */
@keyframes slideInDown1 {
    0% { transform: translate3d(0,-30px,0); visibility: visible; }
    100% { transform: translate3d(0,0,0); }
}
.slideInDown1 {
    animation-name: slideInDown1;
}
/* Fixed Header Styles */
.fixed, .fixed-res {
    position: fixed !important; left: 0; right: 0; top: 0; z-index: 999;
}
.fixed { animation: slideInDown1 1s 0s; }
.fixed-res { animation: ease 0.3s; }

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

/* Button Sweep Center Animation */
.btn-sweep-center {
    position: relative; z-index: 10; color: var(--color-main);
    display: inline-block; overflow: hidden; text-transform: uppercase;
    border: 1px solid var(--color-main);
}
.btn-sweep-center:hover { color: #fff; }
.btn-sweep-center:before, .btn-sweep-center:after {
    position: absolute; top: 50%; content: ""; width: 20px; height: 20px;
    background-color: var(--color-main); border-radius: 50%; z-index: -1;
}
.btn-sweep-center:before { left: -20px; transform: translate(-50%,-50%); }
.btn-sweep-center:after { right: -20px; transform: translate(50%,-50%); }
.btn-sweep-center:hover:before {
    animation: criss-cross-left 0.8s both alternate;
}
.btn-sweep-center:hover:after {
    animation: criss-cross-right 0.8s both alternate;
}
@keyframes criss-cross-left {
    0% { left: -20px; }
    50% { left: 50%; width: 20px; height: 20px; }
    100% { left: 50%; width: 375px; height: 375px; }
}
@keyframes criss-cross-right {
    0% { right: -20px; }
    50% { right: 50%; width: 20px; height: 20px; }
    100% { right: 50%; width: 375px; height: 375px; }
}

/* General Animations */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
@keyframes shake-anim {
    0%,50%,100% { transform: rotate(0) scale(1) skew(1deg); }
    10%,30% { transform: rotate(-25deg) scale(1) skew(1deg); }
    20%,40% { transform: rotate(25deg) scale(1) skew(1deg); }
}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes fadeup { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }
@keyframes pulse-animation {
    0% { transform: scale3d(1,1,1); opacity: 0; }
    10% { transform: scale3d(1.1,1.1,1.1); opacity: 1; }
    100% { transform: scale3d(1.6,1.6,1.6); opacity: 0; }
}
@keyframes border-animation {
    0% { transform: scale3d(0.6,0.6,0.6); opacity: 0; }
    20% { transform: scale3d(1.2,1.2,1.2); opacity: 1; }
    100% { transform: scale3d(1.4,1.4,1.4); opacity: 0; }
}

/* Hover Sweep Background Effects */
.hvr-sweep-to-top, .hvr-sweep-to-right {
    display: inline-block; vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent; position: relative;
    transition: color .3s;
}
.hvr-sweep-to-top:before, .hvr-sweep-to-right:before {
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0;
    transition: transform .3s cubic-bezier(.39,.575,.565,1);
}
.hvr-sweep-to-top:before {
    background: #3a0304; transform: scaleY(0); transform-origin: 50% 100%;
}
.hvr-sweep-to-top:hover, .hvr-sweep-to-top:focus, .hvr-sweep-to-top:active { color: #fff; }
.hvr-sweep-to-top:hover:before, .hvr-sweep-to-top:focus:before, .hvr-sweep-to-top:active:before {
    transform: scaleY(1);
}
.hvr-sweep-to-right:before {
    background: #33cbcc; transform: scaleX(0); transform-origin: 0 50%;
}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff; }
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
    transform: scaleX(1);
}

/* Button Hover Shine Effect */
.btn-hover {
    position: relative; padding: 10px 20px; border-radius: 7px;
    border: 1px solid rgb(61,106,255); font-size: 14px; text-transform: uppercase;
    font-weight: 600; letter-spacing: 2px; background: transparent; color: #fff;
    overflow: hidden; box-shadow: 0 0 0 0 transparent; transition: all 0.2s ease-in;
}
.btn-hover:hover {
    background: rgb(61,106,255);
    box-shadow: 0 0 30px 5px rgba(0,142,236,0.815);
    transition: all 0.2s ease-out;
}
.btn-hover:active {
    box-shadow: 0 0 0 0 transparent;
    transition: box-shadow 0.2s ease-in;
}
.btn-hover::before {
    content: ''; display: block; width: 0; height: 86%; position: absolute;
    top: 7%; left: 0; opacity: 0; background: #fff;
    box-shadow: 0 0 50px 30px #fff; transform: skewX(-20deg);
}
.btn-hover:hover::before {
    animation: sh02 0.5s linear;
}
@keyframes sh02 {
    from { opacity: 0; left: 0; }
    50% { opacity: 1; }
    to { opacity: 0; left: 100%; }
}

/* Animated Gradient Border Button (Codepen Style) */
.codepen-button {
    display: block; cursor: pointer; color: #fff; margin: 0 auto;
    position: relative; text-decoration: none; font-weight: 600;
    border-radius: 6px; overflow: hidden; padding: 3px; isolation: isolate;
}
.codepen-button::before {
    content: ""; position: absolute; top: 0; left: 0; width: 400%; height: 100%;
    background: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b);
    background-size: 25% 100%;
    animation: codepen-border .75s linear infinite;
    animation-play-state: paused;
    translate: -5% 0; transition: translate .25s ease-out;
}
.codepen-button:hover::before {
    animation-play-state: running; transition-duration: .75s; translate: 0 0;
}
@keyframes codepen-border { to { transform: translateX(-25%); } }
.codepen-button span {
    position: relative; display: block; padding: 1rem 1.5rem; font-size: 1.1rem;
    background: #000; border-radius: 3px; height: 100%;
}

/* Box Border Grow Animation */
.box { position: relative; transition: 0.5s; }
.box::before, .box::after {
    pointer-events: none; border-radius: 0.5rem; width: 100%; height: 100%;
    z-index: 1; content: ''; position: absolute; top: 0; left: 0; box-sizing: border-box;
    transform: scale(0); transition: 0.5s;
}
.foo::before {
    border-radius: 0.5rem; border-bottom: 3px solid var(--color-main-v2);
    border-left: 3px solid var(--color-main-v2); transform-origin: 0 100%;
}
.foo::after {
    border-radius: 0.5rem; border-top: 3px solid var(--color-main-v2);
    border-right: 3px solid var(--color-main-v2); transform-origin: 100% 0%;
}
.box:hover::after, .box:hover::before { transform: scale(1); }

/* Shine Hover Effect (Diagonal Light) */
.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: linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}
.hover_sang2:hover:before { transition: 1s; left: 100%; }
/* Shine Hover Effect (Full Cover) */
.hover_sang { display: block; position: relative; overflow: hidden; }
.hover_sang:before, .hover_sang:after {
    display: block; background: rgba(255,255,255,0.3); content: "";
    height: 100%; position: absolute; transition: all 0.5s ease; width: 100%; z-index: 8;
}
.hover_sang:before { left: -100%; top: -100%; }
.hover_sang:after { bottom: -100%; right: -100%; }
.hover_sang:hover:before { left: 0; top: 0; }
.hover_sang:hover:after { right: 0; bottom: 0; }
.hover_sang img { transition: 0.7s; }
.hover_sang:hover img { transform: scale(1.2); }

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

/* Animate.css Helper Classes */
.animate__infinite { animation-iteration-count: infinite; }
.animate__tada { animation-name: tada; }
.animate__animated {
    animation-duration: var(--animate-duration,1s);
    animation-fill-mode: both;
}

/* Loading Overlay and Animation */
.mask {
    width: 100%; height: 100vh; position: fixed; left: 0; top: 0;
    z-index: 999999999; overflow: hidden;
}
.mask span {
    width: 100%; position: absolute; right: 0;
    background: linear-gradient(90deg,#fff 0,#fff 100%);
    transition: width .9s ease-in-out;
}
.mask span:nth-child(1) { height: 30vh; top: 0; transition-delay: .3s; }
.mask span:nth-child(2) { height: 40vh; top: 30vh; transition-delay: .5s; }
.mask span:nth-child(3) { height: 30vh; top: 70vh; transition-delay: .6s; }
.mask.hideg span { width: 0; }
.mask.hideg { pointer-events: none; }
.loadicon {
    position: fixed; top: 50%; left: 50%; width: 200px; height: 140px;
    margin: -70px 0 0 -100px; z-index: 110000;
}
#loading {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999999999999;
}
#loading.finish { z-index: -9999; }
#loading.finish .logo_2 span, #loading.finish .logo_2 img { display: none; }
#loading .logo_2 {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    transition: all ease 0.5s;
}
#loading .logo_2 span {
    display: block; border-radius: 50%; border: 3px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    animation: Ani 2s infinite;
    width: 120px; height: 120px; position: absolute; left: 0; right: 0;
    margin-left: auto; margin-right: auto; z-index: 9999999999;
}
#loading .logo_2 img { position: relative; max-width: 80px; z-index: 4; }

/* Animated Line Underline */
.animate-border {
    position: relative; display: block; width: 100px; height: 3px;
    background: var(--color-main); overflow: hidden;
}
.animate-border:after {
    position: absolute; content: ""; width: 30px; height: 3px; left: -15px; bottom: 0;
    border-left: 10px solid #fff; border-right: 10px solid #fff;
    animation: animborder 2s linear infinite;
}
@keyframes animborder {
    0% { transform: translateX(0); }
    100% { transform: translateX(113px); }
}

/* Category Dropdown Styles */
.hdanhmucdrops {
    position: relative; width: 240px; z-index: 19; border-radius: 20px 20px 0 0;
}
.hdanhmucdrops > .nicescl {
    display: none; top: 100%; position: relative; box-shadow: 0 0 10px #ccc;
}

/* Hover Effect */
.product .i_left { position: absolute; height: 0; -webkit-border-radius: 0 50px; -moz-border-radius: 0 50px; border-radius: 0 50px; width: 2px; left: 0; top: 0; background: -webkit-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(bottom, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to top, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_right { position: absolute; height: 0; width: 2px; right: 0; bottom: 0; background: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, left bottom, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_top { position: absolute; height: 2px; width: 0; right: 0; top: 0; background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, left top, right top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product .i_bottom { position: absolute; height: 2px; width: 0; left: 0; bottom: 0; background: -webkit-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -o-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: -webkit-gradient(linear, right top, left top, from(red), color-stop(orange), color-stop(yellow), color-stop(green), color-stop(blue), color-stop(indigo), to(violet)); background: -moz-linear-gradient(right, red, orange, yellow, green, blue, indigo, violet); background: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease } 
.product:hover .i_left { height: 100%; bottom: 0; top: inherit } 
.product:hover .i_top { width: 100%; left: 0 } 
.product:hover .i_right { height: 100%; top: 0; bottom: inherit } 
.product:hover .i_bottom { width: 100%; right: 0; left: inherit }