/* img gioi thieu gt xoay xoay */
/* trang guong san pham */
/* bg background footer */
/* header canvas */
/* icon rung lac cuc manh */
/* custom croll */
/* sao */
/* btn:hover border xoay cuc chay */
/* border chay vong vong */
/* effect-shine text */


/* ---------------------------------------------------------------------------------------------------------- */

/* trang guong san pham */
/* .hover-glass:hover:before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

.hover-glass img {
    width: 100%;
    transition: ease 0.3s;
    display: block;
}

.hover-glass:hover:before {
    -webkit-animation: shine .75s;
    animation: shine .75s;
}

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.hover-glass {
    overflow: hidden;
    display: block;
    position: relative;
}

.hover-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: -83%;
    z-index: 2;
    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);
} */

/* bg background footer */
/* @keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }

    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }

    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}

.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    z-index: -1;
}

.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
    background-image: linear-gradient(to top, #86377b 20%, #27273c 80%);
}

.bgTop {
    z-index: 15;
    opacity: 0.5;
}

.bgMiddle {
    z-index: 10;
    opacity: 0.75;
}

.bgBottom {
    z-index: 5;
}

.wave {
    position: absolute;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}

.waveTop {
    background-size: 50% 100px;
}

.waveAnimation .waveTop {
    animation: move-wave 3s;
    -webkit-animation: move-wave 3s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.waveMiddle {
    background-size: 50% 120px;
}

.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}

.waveBottom {
    background-size: 50% 100px;
}

.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
} */

/* header canvas */
/* .header canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
    height: fit-content;
} */

/* icon rung lac cuc manh */
/* .vibration-icon {
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
} */

/* custom croll */
/* .custom-scroll>ul::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.custom-scroll>ul::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
}

.custom-scroll>ul::-webkit-scrollbar-track {
    background-color: red;
}

.custom-scroll>ul::-webkit-scrollbar-track-piece {
    background-color: #ffffff;
}

.custom-scroll>ul::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: red;
    border-radius: 3px;
}

.custom-scroll>ul::-webkit-scrollbar-corner {
    background-color: #ffffff;
} */

/* img gioi thieu gt xoay xoay */
/* .gtimg-box {
	height: 540px;
	position: relative;
}

.gtimg-box img {
	border: 7px solid #fff;
	box-shadow: 2px 2px 10px #ccc;
}

.gtimg-first {
	max-width: 345px;
	max-height: 405px;
	float: left;
	position: absolute;
	top: 0px;
	left: 0px;
	-webkit-animation: run 10s infinite;
	-moz-animation: run 10s infinite;
	-ms-animation: run 10s infinite;
	-o-animation: run 10s infinite;
	animation: run 10s infinite;
	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
}

.gtimg-last {
	max-width: 498px;
	max-height: 405px;
	-webkit-animation: runnow 10s infinite;
	-moz-animation: runnow 10s infinite;
	-ms-animation: runnow 10s infinite;
	-o-animation: runnow 10s infinite;
	animation: runnow 10s infinite;
	-webkit-transition: all 2s;
	-moz-transition: all 2s;
	-o-transition: all 2s;
	transition: all 2s;
	position: absolute;
	left: 0;
}

@-moz-keyframes run {
	0% {
		top: 100px;
		left: calc(100% - 350px);
		z-index: 3;
	}

	25% {
		top: 0px;
		left: calc(100% - 350px);
		z-index: 3;
	}

	50% {
		top: 0px;
		left: 0px;
		z-index: 3;
	}

	75% {
		top: 100px;
		left: 0px;
		z-index: 3;
	}

	100% {
		top: 100px;
		left: calc(100% - 350px);
		z-index: 3;
	}
}

@-webkit-keyframes run {
	0% {
		top: 100px;
		left: calc(100% - 350px);
		z-index: 3;
	}

	25% {
		top: 0px;
		left: calc(100% - 350px);
		z-index: 3;
	}

	50% {
		top: 0px;
		left: 0px;
		z-index: 3;
	}

	75% {
		top: 100px;
		left: 0px;
		z-index: 3;
	}

	100% {
		top: 100px;
		left: calc(100% - 350px);
		z-index: 3;
	}
}

@-o-keyframes run {
	0% {
		top: 100px;
		left: calc(100% - 350px);
		z-index: 3;
	}

	25% {
		top: 0px;
		left: calc(100% - 350px);
		z-index: 3;
	}

	50% {
		top: 0px;
		left: 0px;
		z-index: 3;
	}

	75% {
		top: 100px;
		left: 0px;
		z-index: 3;
	}

	100% {
		top: 100px;
		left: calc(100% - 350px);
		z-index: 3;
	}
}

@-moz-keyframes runnow {
	0% {
		top: 0px;
		left: 0px;
		z-index: 1;
	}

	25% {
		top: 100px;
		left: 0;
		z-index: 1;
	}

	50% {
		top: 100px;
		left: calc(100% - 498px);
		z-index: 1;
	}

	75% {
		top: 0px;
		left: calc(100% - 498px);
		z-index: 1;
	}

	100% {
		top: 0px;
		left: 0;
		z-index: 1;
	}
}

@-webkit-keyframes runnow {
	0% {
		top: 0px;
		left: 0px;
		z-index: 1;
	}

	25% {
		top: 100px;
		left: 0;
		z-index: 1;
	}

	50% {
		top: 100px;
		left: calc(100% - 498px);
		z-index: 1;
	}

	75% {
		top: 0px;
		left: calc(100% - 498px);
		z-index: 1;
	}

	100% {
		top: 0px;
		left: 0;
		z-index: 1;
	}
}

@-o-keyframes runnow {
	0% {
		top: 0px;
		left: 0px;
		z-index: 1;
	}

	25% {
		top: 100px;
		left: 0;
		z-index: 1;
	}

	50% {
		top: 100px;
		left: calc(100% - 498px);
		z-index: 1;
	}

	75% {
		top: 0px;
		left: calc(100% - 498px);
		z-index: 1;
	}

	100% {
		top: 0px;
		left: 0;
		z-index: 1;
	}
} */

/* sao */
/* .sao {
    position: relative;
}

.sao:before {
    -webkit-animation: twinkle 4s linear infinite;
    animation: twinkle 4s linear infinite;
    background: linear-gradient(-15deg, white 23%, rgba(255, 255, 255, 0) 25%) 0 0/50% 50%, linear-gradient(-75deg, white 23%, rgba(255, 255, 255, 0) 25%) 0 0/50% 50%, linear-gradient(15deg, white 23%, rgba(255, 255, 255, 0) 25%) 100% 0/50% 50%, linear-gradient(75deg, white 23%, rgba(255, 255, 255, 0) 25%) 100% 0/50% 50%, linear-gradient(15deg, rgba(255, 255, 255, 0) 73%, white 75%) 0 100%/50% 50%, linear-gradient(75deg, rgba(255, 255, 255, 0) 73%, white 75%) 0 100%/50% 50%, linear-gradient(-15deg, rgba(255, 255, 255, 0) 73%, white 75%) 100% 100%/50% 50%, linear-gradient(-75deg, rgba(255, 255, 255, 0) 73%, white 75%) 100% 100%/50% 50%;
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 2em;
    height: 2em;
    -webkit-transform: translate(5em, 8.5em) scale(0);
    transform: translate(5em, 8.5em) scale(0);
    position: absolute;
    top: -100px;
    left: 0px;
}

 @-webkit-keyframes twinkle {
    from {
        -webkit-transform: translate(5em, 8.5em) rotate(0) scale(0);
        transform: translate(5em, 8.5em) rotate(0) scale(0)
    }

    8% {
        -webkit-transform: translate(5em, 8.5em) rotate(180deg) scale(1);
        transform: translate(5em, 8.5em) rotate(180deg) scale(1)
    }

    16% {
        -webkit-transform: translate(5em, 8.5em) rotate(360deg) scale(0);
        transform: translate(5em, 8.5em) rotate(360deg) scale(0)
    }

    17% {
        -webkit-transform: translate(7.5em, 8.5em) rotate(0) scale(0);
        transform: translate(7.5em, 8.5em) rotate(0) scale(0)
    }

    24% {
        -webkit-transform: translate(7.5em, 8.5em) rotate(180deg) scale(1);
        transform: translate(7.5em, 8.5em) rotate(180deg) scale(1)
    }

    32% {
        -webkit-transform: translate(7.5em, 8.5em) rotate(360deg) scale(0);
        transform: translate(7.5em, 8.5em) rotate(360deg) scale(0)
    }

    33% {
        -webkit-transform: translate(10.25em, 8.5em) rotate(0) scale(0);
        transform: translate(10.25em, 8.5em) rotate(0) scale(0)
    }

    40% {
        -webkit-transform: translate(10.25em, 8.5em) rotate(180deg) scale(1);
        transform: translate(10.25em, 8.5em) rotate(180deg) scale(1)
    }

    48% {
        -webkit-transform: translate(10.25em, 8.5em) rotate(360deg) scale(0);
        transform: translate(10.25em, 8.5em) rotate(360deg) scale(0)
    }

    49% {
        -webkit-transform: translate(12.75em, 8.5em) rotate(0) scale(0);
        transform: translate(12.75em, 8.5em) rotate(0) scale(0)
    }

    56% {
        -webkit-transform: translate(12.75em, 8.5em) rotate(180deg) scale(1);
        transform: translate(12.75em, 8.5em) rotate(180deg) scale(1)
    }

    64% {
        -webkit-transform: translate(12.75em, 8.5em) rotate(360deg) scale(0);
        transform: translate(12.75em, 8.5em) rotate(360deg) scale(0)
    }

    65% {
        -webkit-transform: translate(18em, 16em) rotate(0) scale(0);
        transform: translate(18em, 16em) rotate(0) scale(0)
    }

    72% {
        -webkit-transform: translate(18em, 16em) rotate(180deg) scale(1);
        transform: translate(18em, 16em) rotate(180deg) scale(1)
    }

    80% {
        -webkit-transform: translate(18em, 16em) rotate(360deg) scale(0);
        transform: translate(18em, 16em) rotate(360deg) scale(0)
    }

    81% {
        -webkit-transform: translate(9em, 13.5em) rotate(0) scale(0);
        transform: translate(9em, 13.5em) rotate(0) scale(0)
    }

    88% {
        -webkit-transform: translate(9em, 13.5em) rotate(180deg) scale(1.5);
        transform: translate(9em, 13.5em) rotate(180deg) scale(1.5)
    }

    96%,
    to {
        -webkit-transform: translate(9em, 13.5em) rotate(360deg) scale(0);
        transform: translate(9em, 13.5em) rotate(360deg) scale(0)
    }
}

@keyframes twinkle {
    from {
        -webkit-transform: translate(5em, 8.5em) rotate(0) scale(0);
        transform: translate(5em, 8.5em) rotate(0) scale(0)
    }

    8% {
        -webkit-transform: translate(5em, 8.5em) rotate(180deg) scale(1);
        transform: translate(5em, 8.5em) rotate(180deg) scale(1)
    }

    16% {
        -webkit-transform: translate(5em, 8.5em) rotate(360deg) scale(0);
        transform: translate(5em, 8.5em) rotate(360deg) scale(0)
    }

    17% {
        -webkit-transform: translate(7.5em, 8.5em) rotate(0) scale(0);
        transform: translate(7.5em, 8.5em) rotate(0) scale(0)
    }

    24% {
        -webkit-transform: translate(7.5em, 8.5em) rotate(180deg) scale(1);
        transform: translate(7.5em, 8.5em) rotate(180deg) scale(1)
    }

    32% {
        -webkit-transform: translate(7.5em, 8.5em) rotate(360deg) scale(0);
        transform: translate(7.5em, 8.5em) rotate(360deg) scale(0)
    }

    33% {
        -webkit-transform: translate(10.25em, 8.5em) rotate(0) scale(0);
        transform: translate(10.25em, 8.5em) rotate(0) scale(0)
    }

    40% {
        -webkit-transform: translate(10.25em, 8.5em) rotate(180deg) scale(1);
        transform: translate(10.25em, 8.5em) rotate(180deg) scale(1)
    }

    48% {
        -webkit-transform: translate(10.25em, 8.5em) rotate(360deg) scale(0);
        transform: translate(10.25em, 8.5em) rotate(360deg) scale(0)
    }

    49% {
        -webkit-transform: translate(12.75em, 8.5em) rotate(0) scale(0);
        transform: translate(12.75em, 8.5em) rotate(0) scale(0)
    }

    56% {
        -webkit-transform: translate(12.75em, 8.5em) rotate(180deg) scale(1);
        transform: translate(12.75em, 8.5em) rotate(180deg) scale(1)
    }

    64% {
        -webkit-transform: translate(12.75em, 8.5em) rotate(360deg) scale(0);
        transform: translate(12.75em, 8.5em) rotate(360deg) scale(0)
    }

    65% {
        -webkit-transform: translate(18em, 16em) rotate(0) scale(0);
        transform: translate(18em, 16em) rotate(0) scale(0)
    }

    72% {
        -webkit-transform: translate(18em, 16em) rotate(180deg) scale(1);
        transform: translate(18em, 16em) rotate(180deg) scale(1)
    }

    80% {
        -webkit-transform: translate(18em, 16em) rotate(360deg) scale(0);
        transform: translate(18em, 16em) rotate(360deg) scale(0)
    }

    81% {
        -webkit-transform: translate(9em, 13.5em) rotate(0) scale(0);
        transform: translate(9em, 13.5em) rotate(0) scale(0)
    }

    88% {
        -webkit-transform: translate(9em, 13.5em) rotate(180deg) scale(1.5);
        transform: translate(9em, 13.5em) rotate(180deg) scale(1.5)
    }

    96%,
    to {
        -webkit-transform: translate(9em, 13.5em) rotate(360deg) scale(0);
        transform: translate(9em, 13.5em) rotate(360deg) scale(0)
    }
} */

/* border chay vong vong */
/* @-webkit-keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.conic {
    position: relative;
    z-index: 0;
    height: fit-content;
    border-radius: 5px;
    overflow: hidden;
    padding: 1px;
    box-shadow: 0px 2px 2px #ccc;
    margin-bottom: 2px;
}

.conic::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #c5d3dd;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-image: conic-gradient(transparent, rgb(255, 0, 0), transparent 30%);
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
}

.conic::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: #f9f9f9;
    border-radius: 5px;
} */

/* effect-shine text */
/* .box-visao:hover .effect-shine {
    -webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, .6) 30%, #000 50%, rgba(0, 0, 0, .6) 70%);
    -webkit-mask-size: 200%;
    animation: shine 2s infinite;
}

@-webkit-keyframes shine {
    from {
        -webkit-mask-position: 150%;
    }

    to {
        -webkit-mask-position: -50%;
    }
} */


/* btn:hover border xoay cuc chay */
/* thêm class này: btn-effect btn-two */
/* 
.container-2 {
    background: #4E598C;
}

.btn-effect {
    position: relative;
    color: white;
    width: 145px;
    height: 45px;
    transition: all 0.3s;
}

.btn-effect::before,
.btn-effect::after {
    content: '';
    position: absolute;
    transition: all 0.3s;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.btn-two::before,
.btn-two::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 1;
    transition: all 0.3s;
    border: 1px solid #3a5b00;
    border-radius: 5px;
}

.btn-two:hover::after {
    animation-name: rotatecw;
    animation-duration: 2s;
}

.btn-two:hover::before {
    animation-name: rotateccw;
    animation-duration: 3s;
}

.btn-two:hover::after,
.btn-two:hover::before {
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    top: calc(50% - 30px);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    pointer-events: none;
}

@keyframes rotatecw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateccw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
} */