.mobile-menu {
  flex-direction: column;
  align-items: center;
  background: var(--white);
  position: absolute;
  top: 80px;
  right: 0;
  padding: 16px 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 9;
  height: 0;
  display: none;  
  border-radius: 10px;
  width: 270px;
}

.mobile-menu.active {
  height: max-content;
  display: block;
}

.button1{
  background-color: white;
  border: none;
  padding-bottom: 10px;
}

.button-base1{
  display: flex;
  gap: 121px;
}

.item-tittle{
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 20px;
  padding-left: 6px;
  height: 32px;
  transition: background-color 0.2s ease;
  font-family: "Open Sans", Helvetica;
  text-align: left;

}

.dropdown-menu1 {
  display: block; 
  max-height: 0;
  overflow: hidden; 
  transition: max-height 0.3s ease-in-out; 
  background-color: #fff;
  margin-top: 8px;
  margin-bottom: -20px
}

.dropdown-menu1.show {
  max-height: 120px;
}

.dropdown-item1{
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 20px;
  padding-left: 13px;
  height: 32px;
  transition: background-color 0.2s ease;
  font-family: "Open Sans", Helvetica;
  align-content: center;
}

.dropdown-item-price{
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 20px;
  padding-left: 13px;
  height: 32px;
  transition: background-color 0.2s ease;
  font-family: "Open Sans", Helvetica;
  align-content: center;
}

.dropdown-item2{
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 20px;
  padding-left: 13px;
  height: 32px;
  transition: background-color 0.2s ease;
  font-family: "Open Sans", Helvetica;
  align-content: center;
}

.dropdown-item3{
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 20px;
  padding-left: 13px;
  height: 32px;
  transition: background-color 0.2s ease;
  font-family: "Open Sans", Helvetica;
  margin-bottom: 10px;
  text-align: left;
    padding-left: 16px;
}

.dropdown-item4{
  display: block;
  color: #333;
  text-decoration: none;
  font-size: 20px;
  padding-left: 13px;
  height: 32px;
  transition: background-color 0.2s ease;
  font-family: "Open Sans", Helvetica;
  margin-bottom: 10px;
  text-align: left;
    padding-left: 16px;
}

.mobile-menu .mobile-navigation {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-menu .button,
.mobile-menu .button-base {
  width: 40%;
  justify-content: center;
  padding: 12px;
  text-align: center;
}

.mobile-menu .button-base {
  display: flex;
  justify-content: center;
}

.mobile-menu .text,
.mobile-menu .text-wrapper,
.mobile-menu .text-2 {
  font-size: 16px;
  color: var(--neutral-800);
}


@media (max-width: 820px) {
  .desktop .header {
    padding: 0px 16px;
  }

  .desktop .container {
    padding: 0px 16px;
    position: relative;
  }

  .desktop .navigation,
  .desktop .navigation-actions {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .custom-chart-section{
    width: 100%;
    padding: 0px 15px;
    height: 575px;
  }
  .attendance-table td{
    font-size: xx-small;
  }
  
  }

  @media (max-width: 800px) {
    .desktop .container-4 {
      position: relative;
      width: 100%;
      padding: 0;
      display: block;
      top: 35%;
      left: 50%;
      transform: translateX(-50%);
      min-height: 285px;
    }

    .desktop .card-scene {
      padding-top: 2%;
      position: absolute;
      width: 250px;
      height: 255px;
      transition: all 500ms ease;
      perspective: 1000px; 
      justify-self: anchor-center;
    }

    .desktop .card-scene:hover,
    .desktop .card-scene:not(:hover) {
      animation: none;
    }

    .desktop .card-face {
      padding: 16px;
    }

  
    .desktop .card-scene.c1 {
      transform: translateX(0) scale(1.5);
      z-index: 99;
    }

    .desktop .card-scene.c2 {
      transform: translateX(-150px) scale(1);
      z-index: 9;
    }

    .desktop .card-scene.c3 {
      transform: translateX(150px) scale(1);
      z-index: 9;
    }

  
    .desktop .container-4 .image-3 {
      width: 96px;
      height: 76px;
      position: absolute;
      top: 147px;
      left: 11px;
  }
  
    .desktop .container-4 .frame-3 {
      height: 120px;
      gap: 8px;
      padding: 0 16px 0 0;
    }
  
    .desktop .container-4 .text-wrapper-2 {
      font-family: "Open Sans-SemiBold", Helvetica;
      font-weight: 600;
      color: #1a202c;
      font-size: 18px;
      line-height: 24px;
    }
  
    .desktop .container-4 .text-wrapper-3 {
      font-family: "Open Sans-Regular", Helvetica;
      font-weight: 400;
      color: #718096;
      font-size: 10px;
      line-height: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
  }
  
    .desktop .container-4 .img-2 {
      margin-bottom: -8px;
      margin-left: 24px;
      width: 90%;
      object-fit: cover;
  }

  
    .desktop .container-4 .prev,
    .desktop .container-4 .next {
      display: block;
      position: absolute;
      width: 130px;
      height: 500px;
      z-index: 100;
    }
  
    .desktop .container-4 .prev {
      left: 5%;
    }
  
    .desktop .container-4 .next {
      right: 5%;
    }

    @media (max-width: 770px) {
      .desktop .heading-and {
        width: 64%;
    }
    .desktop .iphone {
      width: 356px;
      height: auto;
      left: auto;
      right: -18px;
      top: 245px;
  }

  .desktop .frame {
    top: 410px;
    left: 360px;
}
    }

    @media (max-width: 750px) {

      .desktop .iphone {
        width: 320px;
        height: auto;
        right: -30px;
      }

      .desktop .heading{
        font-size: 33px;
        line-height: 35px;
      }

      .desktop .heading-and{
        width: 60%;
      }


      .desktop .content{
        gap: 1;
      }

      .desktop .frame-9{
        padding-top: 10%;
      }

      .desktop .card-4{
        min-height: 460px;
      }

      .desktop .image-3{
        top: 180px
      }

      .desktop .footer .div-3 {
        gap: 0;
        width: 75%;
        display: block;
      }
    }
  
    @media (max-width: 600px) {

      .desktop .frame-9{
        padding-top: 0;
      }

      .desktop .div-2 {
        padding-bottom: 28px 0px;
      }

      .desktop .text-and-supporting{
        padding-top: 5%;
      }

      .desktop .img-2 {
        width: 100%;
    }
      .desktop .image {
        min-height: 1040px;
      }

      .desktop .div-3 {
        display: block;
        width: 80%;
        margin-left: 12%;
      }

      .desktop .heading-and {
        width: 100%;
        margin-top: -30px;
      }

      .desktop .iphone {
        z-index: -1;
        top: 45%;
        right: 23%;
        width: 350px;
        height: auto;
    }
      
      .desktop .heading{
        font-size: 30px;
      }

      .desktop .supporting-text {
        font-size: medium;
      }

      .desktop .supporting-title{
        font-size: medium;
      }

      .desktop .text-14{
        font-size: small;
      }

      .desktop .text-13{
        font-size: small;
      }

      .desktop .text-7{
        font-size: 21px;
      }

      .desktop .actions{
        padding-bottom: 80%;
      }
      
      .desktop .card-scene {
        width: 210px;
        height: 205px;
      }
  
      .desktop .container-4 .card.left {
        transform: translateX(0px) scale(0.9);
      }
  
      .desktop .container-4 .card.center {
        transform: translateX(90px) scale(1.1);
      }
  
      .desktop .container-4 .card.right {
        transform: translateX(180px) scale(0.9);
      }
  
      .desktop .container-4 .card.hidden {
        transform: translateX(270px) scale(0.8);
      }
  
      .desktop .container-4 .image-3 {
        width: 60px;
        height: 48px;
        top: 137px;
        left: 11px;
    }
  
      .desktop .container-4 .frame-3 {
        height: 80px;
        gap: 4px;
        padding: 0 8px 0 0;
      }
  
      .desktop .container-4 .text-wrapper-2 {
        font-size: 14px;
        line-height: 20px;
      }
  
      .desktop .container-4 .text-wrapper-3 {
        font-size: 10px;
        line-height: 16px;
        -webkit-line-clamp: 3;
      }
  
      .desktop .container-4 .img-2 {
        height: 120px;
        margin-bottom: -4px;
        margin-left: 24px;
      }
  

      .desktop .card {
        margin-left: 10%;
      }

      .circle {
        right: 46px;
        bottom: 46px;
      }

      .zalo-chat-widget {
        right: 25px !important;
        bottom: 30px !important;
      }
    }
  }

  @media (max-width: 500px) {
    .desktop .STT {
      margin-top: 80px;
      margin-left: 77px;
    }
    .desktop .actions{
      padding-bottom: 97%;
    }

    .desktop .frame-2{
      gap: 20px;
    }

    .desktop .custom-chart-section{
      width: 99%;
    }

    .desktop .div-2 {
      padding-bottom: 5px;
    }

    .desktop .card-scene {
      width: 180px;
      height: 220px;
    }

    .desktop .container-4 .img-2 {
      height: 89px;
      margin-bottom: -4px;
      margin-left: 19px;
  }

    .desktop .container-4 .text-wrapper-3 {
      font-size: 8px;
      line-height: 16px;
    }

    .desktop .text-11, .desktop .text-12  {
      font-size: 16px;
    }
  }

  @media (max-width: 491px) {
    .desktop .card-scene {
      width: 160px;
      height: 220px;
    }

    .desktop .container-4 .img-2 {
      height: 77px;
      margin-bottom: 15px;
      margin-left: 19px;
  }

    .desktop .container-4 .text-wrapper-3 {
      font-size: 7px;
      line-height: 16px;
    }
  }

  @media (max-width: 470px){
    .desktop .card-scene.c1 {
      transform: translateX(0) scale(1.5);
      z-index: 99;
    }

    .desktop .card-scene.c2 {
      transform: translateX(-90px) scale(1);
      z-index: 9;
    }

    .desktop .card-scene.c3 {
      transform: translateX(90px) scale(1);
      z-index: 9;
    }
  }

  @media (max-width: 451px) {
    .desktop .iphone {
      top: 47%;
      right: 14%;

  }

    .desktop .image {
      min-height: 1080px;
  }
    
    .desktop .STT {
      margin-top: 80px;
      margin-left: 70px;
  }

  .desktop .duan {
    margin-left: 128px;
  }
  .desktop .duan-2 {
    margin-left: 70px;
  }
    .desktop .actions{
      padding-bottom: 115%;
    }

    .desktop .custom-chart-section{
      width: 99%;
    }

    .desktop .div-2 {
      padding-bottom: 5px;
    }

    .desktop .custom-chart-section{
      margin-left: 1%;
    }


    .desktop .div-3 {
      margin-left: 13%;
    }

    .desktop .card, .desktop .card-4, .desktop .card-3, .desktop .card-5, .desktop .card-6 {
      margin-left: 13%;
      max-height: 390px;
    }

    .desktop .frame-4{
      height: 1290px;
    }    

    .desktop .image-3 {
      top: 137px;
  }

  .desktop .footer .div-3 {
    margin-left: 3%;
  }
  }

  @media (max-width: 431px) {

    .desktop .text-11, .desktop .text-12  {
      font-size: 13px;
    }

    .desktop .iphone {
      top: 46%;
      right: 14%;
  }
    .desktop .container-4 .card {
      margin-left: -4%;
    }

    .desktop .container-2 {
      padding-left: 10px;
    }
    .desktop .actions{
      padding-bottom: 119%;
    }
  }

  @media (max-width: 415px) {

    .desktop .actions{
      padding-bottom: 115%;
    }
    .desktop .container-2 {
      padding-left: 5px;
    }

    .desktop .container-4 .text-wrapper-3 {
      font-size: 7px;
    }

    .desktop .text-13{
      font-size: smaller;
    }

    .desktop .text-14{
      font-size: 12px;
    }

    .desktop .heading-3{
      font-size: 23px;
    }

    .desktop .supporting-text-3 {
      font-size: 17px;
    }

    .desktop .container-2 {
      padding-left: 10px;
    }

    .desktop .frame-5{
      height: 78px;
    }
    
    .desktop .text-11, .desktop .text-12  {
      font-size: 13px;
    }
    
  }

  @media (max-width: 413px) {

    .desktop .container-6{
      padding: 0px;
    }

    .desktop .heading-3{
      font-size: 23px;
    }

    .desktop .supporting-text-3 {
      font-size: 17px;
    }

    .desktop .container-2 {
      padding-left: 0px;
    }

    .desktop .actions-2{
      gap: 2px;
    }

    .desktop .text-7{
      font-size: 17px;
    }
  }

  @media (max-width: 408px) {

    .desktop .text-11, .desktop .text-12{
      font-size: 11px;
    }
    .desktop .text-14, .desktop .text-13{
      font-size: 11px;
    }
    .desktop .actions{
      padding-bottom: 128%;
    }

    .attendance-table td {
      padding: 2px 1px;
      font-size: 6px;
  }

  .desktop .card, .desktop .card-4, .desktop .card-3, .desktop .card-5, .desktop .card-6 {
    padding: 12px 10px;
  }

  .desktop .text-wrapper-2{
    font-size: 20px;
  }

  .desktop .text-wrapper-3 {
    font-size: 14px;
}
  .desktop .logo-and-links {
    gap: 16px;
    padding-bottom: 32px;
  }

  .desktop .iphone {
    top: 46%;
    right: 4%;
  }

  .desktop .image {
    min-height: 1100px;
  }

  .desktop .text-9  {
    font-size: 15px;
  }
  .desktop .image-2 {
    width: 70px;
  }

  .desktop .mobile-app-store {
    width: 130px;
  }
  }

  @media (max-width: 376px){
    .desktop .image {
      min-height: 1110px;
    }
    .desktop .iphone {
      top: 48%;
      right: 4%;
    }
    .desktop .actions{
      padding-bottom: 137%;
    }
  }

  @media (max-width: 361px){
    .desktop .image {
      min-height: 1130px;
    }
    .desktop .iphone {
      top: 49%;
      right: 4%;
    }
    .desktop .actions{
      padding-bottom: 137%;
    }
  }


@media (min-width: 801px) {
  .desktop .container-4 .prev,
  .desktop .container-4 .next {
    display: none;
  }
}