/* Start my cop */

/* Animation social */
.animation-social {
  transition: all .2s ease-in-out;
}

.animation-social:hover {
  transform: translateY(-4px);
}
   /* animation ring ring */
    .ring>img {
        -webkit-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        -moz-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        -ms-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        -o-animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
        animation: coccoc-alo-circle-img-anim 1s infinite ease-in-out;
    }


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

        10% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

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

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }

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

        10% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

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

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }

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

        10% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

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

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }

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

        10% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        20% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

        30% {
            transform: rotate(-15deg) scale(1) skew(1deg)
        }

        40% {
            transform: rotate(15deg) scale(1) skew(1deg)
        }

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

        100% {
            transform: rotate(0) scale(1) skew(1deg)
        }
    }

/* Auto zoom */
.zoom {
  animation: scale 40s linear infinite;
}
  
@keyframes scale {
  50% {
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
    -ms-transform:scale(1.3);
    -o-transform:scale(1.3);
    transform:scale(1.3);
  }
}

/* hieu ung nhap nhay cho chu*/
@-webkit-keyframes my {
	 0% { color: #901018; } 
	 50% { color: #2B2C88;  } 
	 100% { color: #901018;  } 
 }
 @-moz-keyframes my { 
	 0% { color: #901018;  } 
	 50% { color: #2B2C88;  }
	 100% { color: #901018;  } 
 }
 @-o-keyframes my { 
	 0% { color: #901018; } 
	 50% { color: #2B2C88; } 
	 100% { color: #901018;  } 
 }
 @keyframes my { 
	 0% { color: #901018;  } 
	 50% { color: #2B2C88;  }
	 100% { color: #901018;  } 
 } 
 .test {
	 -webkit-animation: my 700ms infinite;
	 -moz-animation: my 700ms infinite; 
	 -o-animation: my 700ms infinite; 
	 animation: my 700ms infinite;
}

/* rotate360 */
.rotate360 img { transition: .5s; }
.rotate360 img:hover { transition: .6s; transform: rotate(360deg); }

/* rotate90 */
#rotate img{
   transition: .5s ease-out;
}

#rotate:hover img{
  transform: rotateY(180deg);
}

/* hover trang guong */
.hover_sang1 { position: relative; overflow: hidden; }
.hover_sang1:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); content: ''; z-index: 10; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0); }
.hover_sang1:hover:before { webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0); transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0); }

/*Hover xam*/
.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: 1; }
.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%; }

/* hover-trang guong */
.hover-glass:hover:before {-webkit-animation: shine .75s;animation: shine .75s;}
.hover-glass img {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: inline-block;position: relative;}
.hover-glass::before {content: '';position: absolute;top: 0;left: -83%;z-index: 2;display: block;content: '';width: 30%;height: 100%;background: -webkit-linear-gradient(left, rgb(255 255 255 / 27%) 0%, rgb(255 255 255 / 47%) 100%);background: linear-gradient(to right, rgb(255 255 255 / 30%) 0%, rgb(255 255 255 / 43%) 100%);-webkit-transform: skewX(-25deg);transform: skewX(-25deg);}

.duongcheosang {
	 -ms-transform: scale(1, 1);
	 -webkit-transform: scale(1, 1);
	 transform: scale(1, 1);
	 overflow: hidden;
	 -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
	 transition: width 2s, height 2s, transform 2s;
	 cursor: pointer;
}
 .duongcheosang:hover:before {
	 -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
	 transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 120%, 0);
}
 .duongcheosang:before {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 background: rgba(255, 255, 255, 0.5);
	 content: "";
	 z-index: 10;
	 -webkit-transition: -webkit-transform 0.6s;
	 transition: transform 0.6s;
	 -webkit-transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
	 transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -120%, 0);
}
 .duongcheosang2 {
	 overflow: hidden;
	 position: relative;
}
 .duongcheosang2:before {
	 position: absolute;
	 content: "";
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 z-index: 1;
	 background: rgba(67, 69, 113, 0);
	 -webkit-transition: all 0.6s ease-in-out;
	 transition: all 0.6s ease-in-out;
	 -moz-transition: all 0.6s ease-in-out;
	 -ms-transition: all 0.6s ease-in-out;
	 -o-transition: all 0.6s ease-in-out;
}
 .duongcheosang2:after {
	 position: absolute;
	 content: "";
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 background: rgba(67, 69, 113, 0);
	 -webkit-transition: all 0.6s ease-in-out;
	 transition: all 0.6s ease-in-out;
	 -moz-transition: all 0.6s ease-in-out;
	 -ms-transition: all 0.6s ease-in-out;
	 -o-transition: all 0.6s ease-in-out;
}
 .duongcheosang2:hover:before {
	 right: 50%;
	 left: 50%;
	 width: 0;
	 background: rgba(255, 255, 255, 0.5);
}
 .duongcheosang2:hover:after {
	 height: 0;
	 top: 50%;
	 bottom: 50%;
	 background: rgba(255, 255, 255, 0.5);
}

/* End my cop */

/* Text Hide */

.text-split1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 1;
}

.text-split2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 2;
}

.text-split4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  -webkit-line-clamp: 4;
}


/* hover 7 mau */

#hover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width:250px;
  height:250px;
  background: white;
  border-radius: 75px;
  font-size: 14px;
  transition: 1s box-shadow;
  cursor: pointer;
}

#hover:hover {
  box-shadow: 0 5px 35px 0px rgba(0,0,0,.1);
}

#hover:hover::before, #hover:hover::after {
  display: block;
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: #FDA8CF;
  border-radius: 75px;
  z-index: -1;
  animation: 1s clockwise infinite;
}

#hover:hover:after {
  background: #F3CE5E;
  animation: 2s counterclockwise infinite;
}

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0;
  }
  12% {
    top: -2px;
    left: 2px;
  }
  25% {
    top: 0;
    left: 5px;    
  }
  37% {
    top: 2px;
    left: 2px;
  }
  50% {
    top: 5px;
    left: 0;    
  }
  62% {
    top: 2px;
    left: -2px;
  }
  75% {
    top: 0;
    left: -5px;
  }
  87% {
    top: -2px;
    left: -2px;
  }
  100% {
    top: -5px;
    left: 0;    
  }
}

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0;
  }
  12% {
    top: -2px;
    right: 2px;
  }
  25% {
    top: 0;
    right: 5px;    
  }
  37% {
    top: 2px;
    right: 2px;
  }
  50% {
    top: 5px;
    right: 0;    
  }
  62% {
    top: 2px;
    right: -2px;
  }
  75% {
    top: 0;
    right: -5px;
  }
  87% {
    top: -2px;
    right: -2px;
  }
  100% {
    top: -5px;
    right: 0;    
  }
}


/* hover frame */
/*  <div class="sparkle u-hover--sparkle">hover over me</div> */
.sparkle {
  color: #441151;
  display: inline-block;
  padding: 20px;
}
.sparkle:hover {
  cursor: pointer;
}

.u-hover--sparkle {
  box-sizing: border-box;
  position: relative;
  padding: 0.75em;
}
.u-hover--sparkle::before, .u-hover--sparkle::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
}
.u-hover--sparkle::before {
  border-top: 0.2em solid #9F2042;
  border-bottom: 0.2em solid #9F2042;
  transform: scale3d(0, 1, 1);
}
.u-hover--sparkle::after {
  border-left: 0.2em solid #9F2042;
  border-right: 0.2em solid #9F2042;
  transform: scale3d(1, 0, 1);
}
.u-hover--sparkle:hover::before, .u-hover--sparkle:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform 900ms;
}