/* MenU */
@media all and (max-width: 1150px) {
     /*----------------------- MENU ----------------------*/
     #header .header__menu{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
    }
    #header .header__menu--main .menu-mobile .user span{
        font-size: 1rem;
        text-transform: uppercase;
        padding: 0 10px;
    }
    .header__menu--main{
        height: 100%;
    }
    #header .header__menu--main .parent {
        flex-direction: column;
        background: #fff;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: all 1s linear;
    }
    #header .header__menu--main .parent .menu{
        flex-direction: column;
        align-items: center;
        gap: 5px;
        height: auto;
    }
    @keyframes ani-menu {
        from{
            transform: translateY(-100%);
        }
        to{
            transform: translateY(0);
        }
    }
    #header .header__menu--main .parent.active {
        animation: ani-menu .6s linear;
        height: 92vh;
        opacity: 1;
        visibility: visible;
        gap: 30px;
    }
    #header .header__menu--main .menu-mobile{
        display: flex;
        justify-content: space-between;
        padding: 0 5%;
        height: 100%;
        align-items: center;
    }
    #header .header__menu--main .menu-mobile .user p{
        font-size: 1rem;
    }
    #header .header__menu--main ul li.logout-name .name{
        display: none;
    }
    #header .header__menu--main .menu-mobile .user a{
        font-weight: 600;
        text-transform: capitalize;
        color: var(--black);
        
    }
    #header .header__menu--main .menu-mobile i{
        cursor: pointer;
        font-size: 2rem;
    }
    /*----------------------- endMENU ----------------------*/
    /* Main */
    #__main .content{
        grid-template-columns: 1fr;
    }
    .main__content .mySwiper2 .content .center .text{
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
        max-height: 155px;
        text-overflow: ellipsis;
    }

    #header,.banner{
        height:8vh;
    }
    .content-swiper{
        height: 12vh;
    }
    .content-swiper .mySwiper3 {
        height: 100%;
    }
    .mySwiper2 {
        height: 80vh;
    }
    #__main.intro{
        padding-top: 0;
    }
    #__main.intro #myTab{
    
        overflow-x: scroll;
        white-space: nowrap;
        padding: 10px;
     }
     
     .main__content .swiper--item .download{
         padding:0;
     }
     
   
}
@media all and (min-width: 1150px) {
     .menu-mobile{
        display: none;
    }
}
/* Dành cho điện thoại */
@media all and (max-width: 380px) {
    
    .website {
        border-right: none;
    }
}
@media all and (max-width: 600px) {
   
   
    .swiper-button-next{
        transform: translateX(30px);
    }
    .swiper-button-prev{
        transform: translateX(-30px);
    }
    
    .main__content .mySwiper .swiper-slide{
        background: none;
    }
    .mySwiper .swiper-slide .swiper-lazy-loaded{
        object-position: 75%;
        height: 630px;
     }
}
/* Dành cho máy tính bảng chiều dọc */
@media all and (max-width: 810px) {
      .mySwiper .swiper-slide .swiper-lazy-loaded{
        object-position: 75%;
     }
}
/* Dành cho máy tính bảng chiều ngang */
@media all and (min-width: 1024px) {
}
/* Dành cho màn hình desktop */
@media all and (min-width: 1280px) {
  .mySwiper3{
    width:40%;
  }
  .main__content{
      height: 75vh;
    width: 100%;
  }
    #header{
        height: 10vh;
        background: #fff;
        position: relative;
        z-index: 9999;
    }
   
    #header .header__menu--main .logo{
        padding-right: 100px;
    }
    #header .header__menu--main .not-home .logo{
        padding-right: 0;
        padding-left: 100px;
    }
    .main__content .mySwiper2 .swiper-slide{
        height: 70vh;
    }
    .mySwiper{
        position: fixed;
        left: 50%;
        width: 100%;
        height: 75vh;
        /* width: 600px; */
        transform: translateX(-50%);
    }
    .content-swiper{
        z-index: 999;
        width: 100%;
        background: rgb(32, 32, 32);
        height: 16vh;
        position: fixed;
        bottom: 0px;
        display: flex;
    }
    /* Content */
    #__main .content .column:nth-child(odd)::after {
        content: "";
        position: absolute;
        right: 0;
        height: 80%;
        top: 50%;
        transform: translateY(-45%);
        width: 2px;
        background: #b4b4b4;
    }
    #__main .content .column::before {
        content: "";
        bottom: -5px;
        border-bottom: 2px solid #b4b4b4;
        border-bottom-style: solid;
        width: 102%;
        position: absolute;
        transform: translateX(-50%);
        left: 50%;
        border-style: dashed;
        color: transparent;
    }
    #__main .content .column::nth-child(even)::before{
        width: 50%;
    }
}