h1, h2, h3, h4, h5, h6 {
    color: #dc3545;
    font-family: "Great Vibes", cursive;
}

p {
    font-family: "Dosis", sans-serif;
}
.mySlides {
    display: none;
}
.card {
min-width: 400px;
max-width: 400px;
min-height: 700px;
max-height: 770px;
margin: auto;
overflow-y: auto;
position: relative;
z-index: 1;
overflow-x: hidden;
background-color: white;
display: flex;
transition: 0.3s;
flex-direction: column;
border-radius: 10px;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
.card-main1 {
background: linear-gradient(240deg, rgb(255, 254, 254) 50%, rgb(255 229 229) 100%);
-webkit-clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 290px 160px, 290px 300px, 100% 310px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 390px 160px, 390px 380px, 100% 390px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
}
.card-content {
padding: 0px 30px 30px 30px;
}
.card-img{ 
-webkit-animation: effectdropshadowchange 4s infinite alternate;
}
.card-img-shadow { 
height: 270px; 
margin-bottom: 30px;
background-size: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
clip-path: polygon(0 0, 100% 0, 100% 100%, 60px 100%, 0 calc(100% - 60px));
}
.card-img-shadow:hover {
transform: scale(1.1);
}
.effectlatlen {
-webkit-animation: effectlatlen 4s ease-in-out;
}
@keyframes effectlatlen {
250% {transform: rotateX(90deg);}
50% {transform: rotateX(180deg);}
75% {transform: rotateX(270deg);}
100% {transform: rotateX(360deg);}
}
@keyframes effectdropshadowchange {
250% {filter: drop-shadow(rgb(200, 230, 32) 0px 0px 10px);  }
50% {filter: drop-shadow(rgb(4, 192, 104) 0px 0px 10px);  }
75% {filter: drop-shadow(rgb(68, 130, 245) 0px 0px 10px);  }
100% {filter: drop-shadow(rgb(255, 0, 0) 0px 0px 10px);  }
}

.card-main {
    position: relative;
    flex: 1;
    display: flex;
    padding-top: 10px;
    flex-direction: column;
  }  
  .avatar-tron {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    -o-object-position: center;
       object-position: center;
    -o-object-fit: cover;
       object-fit: cover;
  }  
  @keyframes efbongno3 {
      from { width: 110px;}
      to { width: 160px;}
    } 
  @keyframes efbongno4 {
    from { width: 160px;}
    to { width: 220px;}
  }
  @keyframes efbongno5 {
    from { width: 150px;}
    to { width: 200px;}
  } 
  @keyframes efbongnofull {
    from { width: 90%;}
    to { width: 100%;}
  }
  @keyframes efxoaytron {
    from {transform: rotate(360deg);}
    to {transform: rotate(0deg);}
  }

  @keyframes dichuyen2 {
    from {right:0px;}
    to {right:80px;}
  }
  @keyframes efanhien {
    from {opacity: 0.1;}
    to {opacity: 1;}
  }
  #masking {
    width: 100%;
    height: 100%;  
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;    
  }

  @keyframes eftronmo {
    100% {
        width: 30px;
        height: 30px;
      border-radius: 50%;
      filter: blur(5px);
      background: #fdfcfca1;
    }
  }

  @keyframes easing {
    0% {
      transform: translateX(-400px);
      background: #fdfcfca1;
      filter: blur(3px);
    }   
    100% {
      transform: translateX(400px);
      filter: blur(6px);
    }
  }
  @keyframes parallax {
    0% {
      transform: translateY(-100px);
      background: #fdfcfc9a;
      filter: blur(3px);
    }   
    100% {
      transform: translateY(100px);
      filter: blur(6px);
    }
  }
  @keyframes efkhungso1 {
    from { height: 600px;}
    to { height: 670px;}
  }