@keyframes fly1 {
  0% {
    opacity: 0;
    bottom: -20%;
    transform: scale(0); }
  16% {
    opacity: 1;
    bottom: 28%;
    transform: scale(1); }
  32% {
    bottom: 22%; }
  48% {
    bottom: 28%; }
  64% {
    bottom: 22%; }
  80% {
    opacity: 1;
    transform: scale(1);
    bottom: 28%; }
  100% {
    opacity: 0;
    bottom: -20%;
    transform: scale(0); } }

@keyframes fly2 {
  0% {
    opacity: 0;
    bottom: -20%;
    transform: scale(0); }
  16% {
    opacity: 1;
    bottom: 33%;
    transform: scale(1);
    left: 62%; }
  32% {
    bottom: 27%; }
  48% {
    bottom: 33%; }
  64% {
    bottom: 27%; }
  80% {
    opacity: 1;
    transform: scale(1);
    bottom: 33%;
    left: 62%; }
  100% {
    opacity: 0;
    left: 60%;
    bottom: -20%;
    transform: scale(0); } }

@keyframes fly3 {
  0% {
    opacity: 0;
    bottom: -20%;
    transform: scale(0); }
  16% {
    opacity: 1;
    bottom: 38%;
    left: 65%;
    transform: scale(1); }
  32% {
    bottom: 32%; }
  48% {
    bottom: 38%; }
  64% {
    bottom: 32%; }
  80% {
    opacity: 1;
    transform: scale(1);
    bottom: 38%;
    left: 65%; }
  100% {
    opacity: 0;
    bottom: -20%;
    left: 60%;
    transform: scale(0); } }

@keyframes fly4 {
  0% {
    opacity: 0;
    bottom: -15%;
    transform: scale(0); }
  16% {
    opacity: 1;
    bottom: 38%;
    transform: scale(1);
    left: 67%; }
  32% {
    bottom: 32%; }
  48% {
    bottom: 38%; }
  64% {
    bottom: 32%; }
  80% {
    opacity: 1;
    transform: scale(1);
    bottom: 38%;
    left: 67%; }
  100% {
    opacity: 0;
    bottom: -15%;
    transform: scale(0);
    left: 60%; } }

@keyframes fly5 {
  0% {
    opacity: 0;
    bottom: -10%;
    transform: scale(0); }
  16% {
    opacity: 1;
    bottom: 35%;
    transform: scale(1);
    left: 68.5%; }
  32% {
    bottom: 29%; }
  48% {
    bottom: 35%; }
  64% {
    bottom: 29%; }
  80% {
    opacity: 1;
    transform: scale(1);
    bottom: 35%;
    left: 68.5%; }
  100% {
    opacity: 0;
    bottom: -10%;
    transform: scale(0);
    left: 60.5%; } }

@keyframes pro1Draw {
  0% {
    right: 12%; }
  33.33% {
    right: 72%;
    transform: rotate(360deg); }
  66.66% {
    right: 12%;
    transform: rotate(360deg); }
  100% {
    right: 12%;
    transform: rotate(360deg); } }

@keyframes line1Draw {
  0% {
    width: 0; }
  33.33% {
    width: 0; }
  66.66% {
    width: 0; }
  100% {
    width: 60%; } }

@keyframes line1Draw {
  0% {
    width: 0; }
  33.33% {
    width: 0; }
  66.66% {
    width: 60%; }
  100% {
    width: 0; } }

@keyframes eraser1Draw {
  0% {
    right: 0; }
  33.33% {
    right: 0; }
  65% {
    right: 0; }
  100% {
    right: 69%; } }

.ldp {
  background: #1c76fe;
  background-image: url("https://file.hstatic.net/1000230347/file/bg-full_145e23f0f9054cd2b5e9685a6f1afc1d.png");
  background-size: contain;
  background-position: center; }
  .ldp .ldp_vouchers__item_right {
    border-color: #337eff; }
  .ldp .ldp_vouchers__icon:not(.momo, .shopeepay, .vnpay, .zalopay) {
    background-color: #337eff; }
  .ldp .ldp_vouchers__item_right:before, .ldp .ldp_vouchers__item_right:after, .ldp .ldp_vouchers__item_right .btn-copy {
    background: #337eff; }

.ldp_banner .pen1 {
  opacity: 0;
  bottom: -20%;
  left: 55.5%;
  transform: scale(0);
  width: 5vw;
  animation: fly1 7.5s 1s infinite; }

.ldp_banner .pen2 {
  opacity: 0;
  bottom: -20%;
  left: 60%;
  transform: scale(0);
  width: 2vw;
  animation: fly2 7.5s 1.5s infinite; }

.ldp_banner .pen3 {
  opacity: 0;
  bottom: -20%;
  left: 62%;
  transform: scale(0);
  animation: fly3 7.5s 2s infinite;
  width: 5.5vw; }

.ldp_banner .pen4 {
  opacity: 0;
  bottom: -15%;
  left: 60%;
  transform: scale(0);
  animation: fly4 7.5s 2.5s infinite;
  width: 8vw; }

.ldp_banner .pen5 {
  opacity: 0;
  bottom: -10%;
  left: 60.5%;
  transform: scale(0);
  animation: fly5 7.5s 3s infinite;
  width: 9vw; }

.ani-product--scale {
  transform: scale(0.9);
  transition: all .4s; }
  .ani-product--scale:hover {
    transform: scale(1); }

.ani-product--draw {
  padding-right: 30%;
  position: relative;
  padding-bottom: 20px; }
  .ani-product--draw-pen {
    position: absolute;
    right: 12%;
    bottom: 0;
    left: unset;
    width: 13.5%;
    animation: pro1Draw 6s infinite; }
  .ani-product--draw-eraser {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18%;
    left: unset;
    animation: eraser1Draw 6s infinite; }
  .ani-product--draw-text {
    position: absolute;
    bottom: 0;
    left: 15%;
    width: 60%;
    content: '';
    background: #1a359d;
    animation: line1Draw 6s infinite;
    /*transition: width 2.4s ease;*/
    height: 2px;
    border-radius: 25px; }

.ani-product .hover-shinning.s1 {
  border-radius: 48px; }

.ani-product .hover-shinning.s2 {
  border-radius: 36px; }

.ani-product .hover-shinning.s3 {
  border-radius: 34px; }

.ani-product .hover-shinning img {
  width: 100%; }

.ani-group {
  display: flex;
  top: 72%;
  left: 5%;
  gap: 15px;
  width: 48%;
  justify-content: space-between; }
  .ani-group--item {
    width: calc((100% / 3) - 15px) !important; }
    .ani-group--item.s1 {
      animation: pulse 2.5s ease-out infinite; }
    .ani-group--item.s2 {
      animation: pulse 2.5s .5s ease-out infinite; }
    .ani-group--item.s3 {
      animation: pulse 2.5s 1s ease-out infinite; }

.ldp_listcus__more a {
  background: #da1f26;
  border-radius: 10px; }

@media (max-width: 767px) {
  .ani-product .hover-shinning.s1 {
    border-radius: 32px; }
  .ani-product .hover-shinning.s2 {
    border-radius: 24px; }
  .ani-product .hover-shinning.s3 {
    border-radius: 24px; }
  .ani-product .col-md-7 {
    order: 1;
    margin-top: 0; }
  .ani-product .col-md-5 {
    order: 0; }
    .ani-product .col-md-5 .w-100 {
      margin: 0 !important; } }