/* RESPONSIVE */
/* Mobile:width > 343px && width < 576px */
@media only screen and (min-width: 319px) and (max-width: 576px) {
    .element1 {
        margin-top: 3em;
        display: flex;
        flex-direction: column;
    }
    .element1_product {
      display: flex;
      justify-content: space-evenly;
      margin-top: 2em;
    }
    .element1_title {
      background-color: #AEB4B2;
      text-align: center;
      border-top-right-radius: 40px;
      border-bottom-right-radius: 40px;
      width: 74%;
      height: 1.8em;
      padding-top: 7px;
      font-size: 1em;
    }
    .element1_card{
      padding: 2em 1em 0 1em;
      width: 85%;
      height: max-content;
      box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.3);
      background-color: white;
      display: flex;
      flex-direction: column-reverse;
      justify-content: space-evenly;
      border-radius: 2em;
    }
    .element1_card:hover{
      padding: 2em 1em 0 1em;
      width: 85%;
      height: max-content;
      box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.3);
      background-color: white;
      color: black;
      transition: transform 0.3s ease, background-color 0.3s ease;
      transform: translateY(-15px);
      display: flex;
      justify-content: space-evenly;
    }
    .element1_para {
      width: 100%;
      font-size: 0.86em
    }
    .element1_item-img {
      width: 100%;
      height: 30em;
    }
    .element1_item-title {
      text-align: center;
      font-size: 1em;
    }
    .element1_moreinfobtn {
      margin-bottom: 0.5em;
      border-radius: 10px;
      font-size: 1.3em;
      width: 100%;
      height: 2.8em;
      color: black;
      display: flex;
      justify-content: center; 
      align-items: center; 
    }
    
    .element1_moreinfobtn a {
      margin-left: 0em;
      width: 55%;
      outline: none;
      cursor: pointer;
      border: none;
      padding: 0.5rem 1.3rem;
      margin-bottom: 1em;
      font-family: 'Lexend', sans-serif;
      font-size: 10px;
      position: relative;
      display: inline-block;
      letter-spacing: 0.05rem;
      font-weight: 700;
      border-radius: 20px;
      overflow: hidden;
      background: #4D9FE3;
      color: #ffffff;
      text-decoration: none;
      text-align: center;
    } 
    .element1_card_item1 {
      margin-left: 0em;
      margin-top: 0px;
    }
    .element1_card_item2 {
      margin-right: 0px;
    }
    /* ELEMENT 2 */
    .element2{
      margin-top: 1em;
      display: flex;
      flex-direction: column;
    }
    .element2_line{
      width: 10em;
      height: 4px;
      background-color: #000;
      margin-top: 1em;
      margin-left: 1.2em;
    }
    .element2_box{
      margin-top: 1.5em;
      margin-right: 0px;
    }
    .element2_title{
      font-size: 1.8em;
      margin-left: 0.6em;
    }
    .element2_text{
      text-align: start;
      font-size: 1.3em;
      margin-top: 1em;
      margin-left: 0.7em;
    }
    .element2_para{
      text-align: start;
      margin-top: 1em;
      margin-bottom: 1em;
      font-size: 1em;
      margin-left: 1em;
    }
    .element2_img{
      display: none;
    }
    .element2_img_mobile{
      display: block;
      width: 100%;
      height: 100%;
    }
    .element2_moreinfobtn {
      margin-bottom: 0.5em;
      border-radius: 10px;
      font-size: 1.3em;
      width: 100%;
      height: 2.8em;
      color: black;
      display: flex;
      justify-content: center; 
      align-items: center; 
    }
    
    .element2_moreinfobtn a {
      width: 55%;
      outline: none;
      cursor: pointer;
      border: none;
      padding: 9px 4px;
      margin-bottom: 1em;
      font-family: 'Lexend', sans-serif;
      font-size: 10px;
      position: relative;
      display: inline-block;
      letter-spacing: 0.05rem;
      font-weight: 700;
      border-radius: 20px;
      overflow: hidden;
      background: #4D9FE3;
      color: #ffffff;
      text-decoration: none;
      text-align: center;
    }
     
    .element2_moreinfobtn a span{
      position: relative;
      z-index: 10;
      transition: color 0.4s;  
    }
    
    .element2_moreinfobtn a:hover span {
      color: white;
    }
    
    .element2_moreinfobtn a::before,
    .element2_moreinfobtn a::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    
    .element2_moreinfobtn a::before {
      content: "";
      color:#000;
      background: #0D4C7F;
      width: 120%;
      left: -10%;
      transform: skew(30deg);
      transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    }
    
    .element2_moreinfobtn a:hover::before {
      transform: translate3d(100%, 0, 0);
    }
  
    /* ELEMENT 3 */
    .element3_title{
      width: 100%;
      text-align: center;
      font-size: 0.9em;
      margin-top: 1em;
      margin-bottom: 1em;
    }
    .element3_box{
      width: 100%;
      height: auto;
      background-color: #AEB4B2;
    }
    .element3_content{
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 0em;
    }
    .element3_content-child{
      width: 31%;
    }
    .element3_para {
      text-align: center;
      font-size: 6.2px;
      width: 19em;
    }
    .element3_icon{
      font-size: 3em;
      text-align: center;
      margin-right: 0;
      margin-top: 0.5em;
      margin-left: 0;
    }
    .element3_moreinfobtn{
      border-radius: 10px;
      font-size: 1.3em;
      width: 100%;
      height: 2.8em;
      color: black;
      display: flex;
      justify-content: center; 
      align-items: center; 
    }
    .element3_moreinfobtn a {
      width: 55%;
      outline: none;
      cursor: pointer;
      border: none;
      padding: 9px 4px;
      margin-bottom: 1em;
      font-family: 'Lexend', sans-serif;
      font-size: 10px;
      position: relative;
      display: inline-block;
      letter-spacing: 0.05rem;
      font-weight: 700;
      border-radius: 20px;
      overflow: hidden;
      background: #4D9FE3;
      color: #ffffff;
      text-decoration: none;
      text-align: center;
    }
    
    .element3_moreinfobtn a span{
      position: relative;
      z-index: 10;
      transition: color 0.4s;
      
    }
    
    .element3_moreinfobtn a:hover span {
      color: white;
    }
    
    .element3_moreinfobtn a::before,
    .element3_moreinfobtn a::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }
    
    .element3_moreinfobtn a::before {
      content: "";
      color:#000;
      background: #0D4C7F;
      width: 120%;
      left: -10%;
      transform: skew(30deg);
      transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
    }
    
    .element3_moreinfobtn a:hover::before {
      transform: translate3d(100%, 0, 0);
    }
}
  
  /* Tablet: width > 667 and width < 1025px dọc  */
@media only screen and (min-width: 666px) and (max-width: 1025px) {
  .element1 {
    margin-bottom: 2em;
    margin-top: 3em;
    display: flex;
    flex-direction: column;
  } 

  .element1_title {
    background-color: #AEB4B2;
    text-align: center;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    width: 60%;
    height: 1.8em;
    padding-top: 20px;
    font-size: 1.5em;
  }

  .element1_para {
    text-align: center;
    width: 100%;
    font-size: 13.2px;
    margin: auto;
  }
  .element1_product {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding-bottom: 20px;
    margin-top: 2em;
  }

  .element1_card {
    padding: 1em 1em 0 1em;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 90%;
    height: max-content;
    box-shadow: 0px 1px 50px rgba(0, 0, 0, 0.3);
    background-color: rgb(255, 255, 255);
    position: relative;
  }
  .element1_card_item1 {
    margin-left: 0em;
    margin-top: 7em;
  } 
  .element1_card_item2 {
    margin-left: 2em;
    margin-right: 2em;
  }
  .element1_item-img {
    width: 15em;
    height: 18em;
  }

  .element1_item-title {
    text-align: center;
    font-size: 10px;
  }
  .element1_card:hover{
    padding: 1em 1em 0 1em;
    width: 90%;
    height: max-content;
    box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.3);
    background-color: white;
    color: black;
    transition: transform 0.3s ease, background-color 0.3s ease;
    transform: translateY(-15px);
    display: flex;
    flex: 0 0 auto;
    justify-content: space-evenly;
  }

  .element1_moreinfobtn {
    margin-bottom: 0.5em;
    border-radius: 10px;
    font-size: 1.3em;
    width: 100%; 
    height: 2.8em;
    color: black;
    display: flex;
    justify-content: center; 
    align-items: center;
  } 
  .element1_moreinfobtn a {
    margin-left: 0em;
    width: 15em;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0.5rem 3rem;
    margin-top: 3em;
    margin-bottom: 1em;
    font-size: 15px;
    position: relative;
    left: 0;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-radius: 20px;
    overflow: hidden;
    background: #4D9FE3;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
  } 
  .element1_moreinfobtn a span{
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    
  }
  
  .element1_moreinfobtn a:hover span {
    color: white;
  }
  
  .element1_moreinfobtn a::before,
  .element1_moreinfobtn a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  .element1_moreinfobtn a::before {
    content: "";
    color:#000;
    background: #0D4C7F;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  }
  
  .element1_moreinfobtn a:hover::before {
    transform: translate3d(100%, 0, 0);
  }





  /* ELEMENT 2 */
  .element2{
    margin-top: 1em;
    display: flex;
    flex-direction: column;
  }
  .element2_line{
    width: 10em;
    height: 4px;
    background-color: #000;
    margin-top: 1em;
    margin-left: 1.2em;
  }
  .element2_box{
    margin-top: 1.5em;
    margin-right: 0em;
  }
  .element2_title{
    font-size: 1.8em;
    margin-left: 0.6em;
  }
  .element2_text{
    text-align: start;
    font-size: 1.3em;
    margin-top: 1em;
    margin-left: 0.7em;
  }
  .element2_para{
    text-align: start;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 1em;
    margin-left: 1em;
  }
  .element2_img{
    display: none;
  }
  .element2_img_mobile{
    display: block;
    width: 100%;
    height: 100%;
  }
  .element2_moreinfobtn {
    margin-bottom: 0.5em;
    border-radius: 10px;
    font-size: 1.3em;
    width: 100%; 
    height: 2.8em;
    color: black;
    display: flex;
    justify-content: center; 
    align-items: center;
  } 
  .element2_moreinfobtn a {
    width: 15em;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0.5rem 3rem;
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 15px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-radius: 20px;
    overflow: hidden;
    background: #4D9FE3;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
  }

  .element2_moreinfobtn a span{
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    
  }

  .element2_moreinfobtn a:hover span {
    color: white;
  }

  .element2_moreinfobtn a::before,
  .element2_moreinfobtn a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .element2_moreinfobtn a::before {
    content: "";
    color:#000;
    background: #0D4C7F;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  }

  .element2_moreinfobtn a:hover::before {
    transform: translate3d(100%, 0, 0);
  }

  /* ELEMENT 3 */
  .element3_title{
    width: 100%;
    text-align: center;
    font-size: 1.8em;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .element3_box{
    width: 100%;
    height: auto;
    background-color: #AEB4B2;
  }
  .element3_content{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 1em;
  }
  .element3_content-child {
    width: 30%;
  }
  .element3_para {
    text-align: center;
    font-size: 0.6em;
  }
  .element3_icon{
    font-size: 3em;
    text-align: center;
    margin-right: 0;
    margin-top: 0.5em;
    margin-left: 0;
  }
  .element3_moreinfobtn {
    border-radius: 10px;
    font-size: 1.3em;
    width: 100%; 
    height: 2.8em;
    color: black;
    display: flex;
    justify-content: center; 
    align-items: center;
  } 
  .element3_moreinfobtn a {
    width: 15em;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0.5rem 3rem;
    margin-bottom: 1em;
    font-size: 15px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-radius: 20px;
    overflow: hidden;
    background: #4D9FE3;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
  }
  .element3_moreinfobtn a span{
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    
  }

  .element3_moreinfobtn a:hover span {
    color: white;
  }

  .element3_moreinfobtn a::before,
  .element3_moreinfobtn a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .element3_moreinfobtn a::before {
    content: "";
    color:#000;
    background: #0D4C7F;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  }

  .element3_moreinfobtn a:hover::before {
    transform: translate3d(100%, 0, 0);
  }
}
@media only screen and (min-width: 1179px) and (max-width: 1367px){
  .element1_para {
    text-align: center;
    width: 100%;
    font-size: 1.38em;
  }
  .element1_title {
    background-color: #AEB4B2;
    text-align: center;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    width: 19em;
    height: 1.8em;
    padding-top: 20px;
    font-size: 2em;
  }
  .element1_item-img {
    width: 15em;
    height: 20em;
  }
  .element1_card {
    padding: 1em 1em 0 1em;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 90%;
    height: max-content;
    box-shadow: 0px 1px 50px rgba(0, 0, 0, 0.3);
    background-color: rgb(255, 255, 255);
    position: relative;
  }
  .element1_card_item1 {
    margin-left: 0em;
    margin-top: 7em;
  } 
  .element1_card_item2 {
    margin-left: 2em;
    margin-right: 2em;
  }
  .element1_item-img {
    width: 20em;
    height: 25em;
  }

  .element1_item-title {
    text-align: center;
    font-size: 16px;
  }
  .element1_card:hover{
    padding: 1em 1em 0 1em;
    width: 90%;
    height: max-content;
    box-shadow: 0px 1px 30px rgba(0, 0, 0, 0.3);
    background-color: white;
    color: black;
    transition: transform 0.3s ease, background-color 0.3s ease;
    transform: translateY(-15px);
    display: flex;
    flex: 0 0 auto;
    justify-content: space-evenly;
  }

  .element1_moreinfobtn {
    margin-bottom: 0.5em;
    border-radius: 10px;
    font-size: 1.3em;
    width: 100%; 
    height: 2.8em;
    color: black;
    display: flex;
    justify-content: center; 
    align-items: center;
  } 
  .element1_moreinfobtn a {
    width: 21em;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0.5em 3rem;
    margin-top: 3em;
    margin-left: 0em;
    margin-bottom: 1em;
    font-size: 20px;
    position: relative;
    left: 0;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-radius: 20px;
    overflow: hidden;
    background: #4D9FE3;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
  } 
  .element1_moreinfobtn a span{
    position: relative;
    z-index: 10;
    transition: color 0.4s;
    
  }
  
  .element1_moreinfobtn a:hover span {
    color: white;
  }
  
  .element1_moreinfobtn a::before,
  .element1_moreinfobtn a::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  .element1_moreinfobtn a::before {
    content: "";
    color:#000;
    background: #0D4C7F;
    width: 120%;
    left: -10%;
    transform: skew(30deg);
    transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
  }
  
  .element1_moreinfobtn a:hover::before {
    transform: translate3d(100%, 0, 0);
  }
  /* ELEMENT 2 */
  .element2_title {
    font-size: 2em;
  }
  .element2_text {
    font-size: 1.3em;
    margin-top: 1em;
    margin-left: 1.1em;
  }
  .element2_line {
    width: 18.75em;
    height: 4px;
    background-color: #000;
    margin: 1em 1.4em;
  }
  .element2_para {
    margin-top: 1em;
    font-size: 1.2em;
    margin-left: 1.3em;
    margin-right: 0.2em;
  }
  .element2_moreinfobtn a {
    width: 13em;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0.5rem 2rem;
    margin-top: 2em;
    font-family: 'Lexend', sans-serif;
    font-size: 16px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-radius: 20px;
    overflow: hidden;
    background: #4D9FE3;
    color: #ffffff;
    text-decoration: none;
  }
  .element2_img {
    width: 43em;
    height: 26em;
  }
  .element3_title {
    text-align: center;
    font-size: 2em;
    margin-top: 2em;
    margin-bottom: 1em;
  }
  .element3_moreinfobtn {
    margin-bottom: 0em;
    border-radius: 10px;
    font-size: 1.3em;
    width: 100%; 
    height: 2.8em;
    color: black;
    display: flex;
    justify-content: center; 
    align-items: center;
  } 
  .element3_moreinfobtn a {
    width: 21em;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 0.5em 3rem;
    margin-top: 0.8em;
    margin-bottom: 1em;
    font-size: 20px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-radius: 20px;
    overflow: hidden;
    background: #4D9FE3;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
  } 
}
/* 14pm */
@media only screen and (width: 430px){ 
  .element3_para {
    text-align: center;
    font-size: 6.2px;
    width: 19em;
    padding-left: 9px;
  }
}
/* A51/71 */
@media only screen and (width: 412px){
  .element3_content-child {
    width: 28%;
  }
}
/* Surface Pro6 */
@media only screen and (width: 1368px){
  .element1_moreinfobtn a {
    width: 17em;
    outline: none;
    cursor: pointer;
    border: none;
    padding: 1rem 2rem;
    margin-top: 0.3em;
    font-size: 20px;
    margin-left: 4em;
    position: relative;
    display: inline-block;
    letter-spacing: 0.05rem;
    font-weight: 700;
    border-radius: 20px;
    overflow: hidden;
    background: #4D9FE3;
    color: #ffffff;
    text-decoration: none;
  }
  .element1_para {
    width: 93%;
    font-size: 1.7em;
    text-align: justify;
  }
  .element2_img {
    width: 50em;
    height: 29em;
  }
  .element2_box {
    margin-top: 1em;
    margin-right: 2em;
  }
  .element2_para {
    text-align: justify;
    margin-top: 1.5em;
    font-size: 1.56em;
    margin-left: 1.2em;
    margin-right: 0.2em;
  }
  .element2_text {
    margin-left: 27px;
  }
  .element3_title{
    font-size: 2em;
  }
  .element3_moreinfobtn a{
    padding: 12px 48px;
    font-size: 17px;
  }
  .element2_moreinfobtn a{
    padding: 12px 48px;
    font-size: 17px;
  }
  .element1_moreinfobtn a{
    padding: 12px 48px;
    font-size: 17px;
  }
}