@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&family=Quicksand:wght@300;400;500;600;700&display=swap');
/* BEGIN RESET CSS */

:root {
    /* color */
    --white-color: #fff;
    --background-green: #3BB77E;
    --background-card : #DEF9EC;
    --background-origin : #FDC040;

    /* % */
    --percent50: 50%;
    --percent100: 100%;

    /* fontweight */
    --fw8: 800;
    --fw7: 700;
    --fw6: 600;
    --fw5: 500;
    --fw3: 300;
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: "Quicksand";
    font-size: 16px;
    overflow-x: hidden;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
p{
    margin: 0;
}
img {
    width: var(--percent100);
    height: var(--percent100);
    vertical-align: middle;
    object-fit: cover;
}

a {
    text-decoration: none;
    /* Reset lại màu mặc định */
    color: initial;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

input::placeholder {
    /* kế thừa cha chứa nó */
    font: inherit;
}
.text_small{
    font-size: 16px;
    font-weight: var(--fw7);
}
.hover_green:hover {
    color: var(--background-green);
    cursor: pointer;
}
.div_empty:empty {
    padding: 0;
    margin: 0;
    }
.boder_bottom {
    border-bottom: 1px solid #ececec;
}
.title_h1{
    font-size: 32px;
    font-weight: var(--fw7);
    color: #253D4E;
    margin-bottom: 0;
}
.selling_card{
    border-radius: 15px;
    overflow: hidden;
    border: none;
    position: relative;
}
.selling_body{
    position: absolute;
    transform: translateX(0px) translateY(40px);
    padding: 0px 20px 0px 20px;
}
.selling_title{
    font-size: 30px;
    color: #253D4E;
    margin-bottom: 70px;
    text-align: left;
    transition: all 0.3s ease;
    font-weight: var(--fw7);
}
.selling_title:hover{
    transform: translateY(-10px);
}
.sell_card{
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #ececec;
}

.sell_title{
    height: 46px;
    font-size: 16px;
    font-weight: var(--fw6);
    margin-bottom: 8px;
    font-family: "Montserrat";
    transition: all 0.5s ease;
    text-align: left;
    color: #253D4E;
    line-height: 23px;
}
.sell_line{
    margin: 5px 0;
    height: 5px;
    width: 100%;
    position: relative;
    background-color: #e9e8e8;
}
.sell_line::before{
    content: "";
    position: absolute;
    width: 65%;
    height: 5px;
    background-color: var(--background-green);
    left: 0;
    top: 0;
}
.sell_status{
    padding: 5px 0 10px;
}
.sell_btn{
    width: 100%;
    text-align: center;
    font-size: 14px;
    background-color: var(--background-green);
    height: 40px;
    border-radius: 5px;
    font-weight: var(--fw5);
    transition: all 0.5s ease;
    border: none;
    color: var(--white-color);
    font-family: "Montserrat";
}
.papolur_hover:hover{
    transition: all 0.5s ease;
    border: 1px solid var(--background-green);
    box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px;
}
.papolur_hover:hover .poplaur_img > img{
    /* opacity: 0.8; */
}

/* END RESET CSS */

/* Header - Đạt */

.header_main{
    padding: 30px 0;
    align-items: center;
    justify-content: space-between;
}
.header_moblie{
    position: fixed;
    top: 0;
    padding: 15px 0;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgb(0 0 0 / 7%) 0px 2px 5px;
    background-color: var(--white-color);
    border-bottom: 1px solid #ececec;
    cursor: pointer;
    z-index: 10;
}
.btn_menu{
    color: var(--background-green);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    padding-left: 10px;
}
.header_logo > a{
    background-image: url("/picter/img/logo/logo.png");
    background-size: contain;
    background-position: 0% 0%;
    background-repeat: no-repeat;
    width: 180px;
    height: 55px;
    top: unset;
    left: unset;
    display: block;
}
.header_search{
    width: 700px;   
}
.header_input{
    background-color: var(--background-search);
}

.btn_drop{
    background-color:#F4F6FA;
    border-right: 1px solid #e9e8e8;
    font-size: 14px;
    color: #253D4E;
    font-weight: var(--fw7);
    line-height: 36px;
}
.btn_drop:hover{
    background-color: #F4F6FA;
}
.input_search{
    background-color: #F4F6FA;
    outline: none;
    font-size: 14px;
    line-height: 30px;
    font-weight: var(--fw5);
    text-align: left;
}
.input_search:focus {
    box-shadow: none;
    border-color:var(--background-green);
}
.btn_search{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #F4F6FA;
        width: 50px;
        border-radius: 0px 4px 4px 0px;
        font-size: 20px;
        color: #7E7E7E;
        cursor: pointer;
}
.header_user{
    display: flex;
    align-items: center;
}
.user_langue{
    display: flex;
    width: 70px;
    height: 25px;
    margin-right: 10px;
}
.user_langue > a{
    border-radius: 50px;
    margin-right: 10px;
    overflow: hidden;
    height: 100%;
}
.user_langue > a > img{
    vertical-align: top;
    height: 100%;
}
.user_profile > a{
    position: relative;
    width: 45px;
    color: #696969;
    font-size: 25px;
    margin-right: 10px;
}
.user_profile > a > .user_item{
    position: absolute;
    display: none;
    z-index: 10;
    background-color: var(--white-color);
    right: 0;
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    padding: 10px;
    border: 1px solid #ececec;
    border-radius: 10px;
    width: 200px;
}
.user_profile>a>.user_item.active{
    display: block;
    animation: fadeInUp 0.5s;
}
.user_item >li{
    padding: 3px 10px;
    font-weight: var(--fw5);
    color: #253D4E;
}
.user_card{
    display: flex;
    align-items: center;
    position: relative;
}
.user_card:hover .user_card-total{
    display: block;
    animation: fadeInUp 0.5s;
}
.user_card-total{
    position: absolute;
    width: 300px;
    max-height: 400px;
    z-index: 10;
    top: 100%;
    right: 0;
    background-color: var(--white-color);
    border-radius: 10px;
    padding: 15px 20px;
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    border: 1px solid #ececec;
    display: none;
}
.user_card-scroll{
    display: none;
}
.user_card-scroll.active{
    display: flex;
}
.total_product{
    overflow-y: scroll;
    max-height: 200px;
}
.total_product::-webkit-scrollbar{
    width: 4px;
}
.user_card-total > p{
    color: #7E7E7E;
    margin-bottom: 16px;
}
.buy_product{
    padding: 15px 0;
    border-radius: 0;
    
}
.buy_product > .box_img {
    width: 100%;
    height: 80px;
}
.user_total-money{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
}
.user_total-money > p{
    font-weight: var(--fw6);
    color: #696969;
}
.user_total-money > span{
    color: var(--background-green);
    font-weight: var(--fw7);
}
.btn_total-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.btn_total-money .btn_total{
    width: 100%;
    padding: 10px 0;
    border-radius: 4px;
    font-weight: var(--fw7);
    font-size: 14px;
    letter-spacing: 1px;
}
.btn_total-money .btn_total-left{
    color: var(--background-green);
    border: 2px solid var(--background-green);
    background-color: var(--white-color);
}
.btn_total-money .btn_total-right {
    color: var(--white-color);
    background-color: var(--background-green);
    border: 2px solid var(--background-green);
}
.btn_total-money .btn_total:hover{
    color: var(--white-color);
    background-color: var(--background-origin);
}
.user_card > a{
        width: 30px;
        color: #696969;
        font-size: 25px;
}
.user_card-number{
        width: 20px;
        height: 20px;
        background-color: var(--background-green);
        color: var(--white-color);
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        font-size: 14px;
    }
.user_card-number.posi{
    transform: translateY(-10px) translateX(-10px);
}
nav{
    background-color: var(--white-color);
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
    position: sticky;
    top: 0;
    display: block;
    z-index: 9;
}
.nav_main{
    
    padding: 15px 0;
    align-items: center;
    justify-content: space-between;
}
.nav-products{
    position: relative;
    width: 260px;
    background-color: var(--background-green);
    padding: 15px;
    color: var(--white-color);
    border-radius: 4px;
    font-weight: var(--fw7);
    text-align: center;
}
.nav_mobile{
    width: 300px;
    height: 100vh;
    background-color: var(--white-color);
    box-shadow: #e4e4e4 2px 0px 10px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    padding-top: 20px;
    transform: translateX(-100%);
    transition: all 0.5s ease;
}
.nav_mobile.active{
    transform: translateX(0);
}
.nav_mobile .nav_list > ul{
    display: block;
    padding-left: 20px;
    padding-right: 20px;
}
.nav_mobile-logo{
    padding: 0 20px 15px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid #ececec;
}
.nav_mobile .header_mobile{

}
.nav_mobile-btn{
    width: 25px;
    height: 25px;
    background-color: var(--background-green);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}
.nav_search-logo{
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    height: 45px;
    padding: 0px 20px;
}
.btn_mobile-search{
    position: absolute;
    font-size: 20px;
    font-weight: var(--fw7);
    color: #ccc;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
}
.nav_search{
    background-color: #F4F6FA;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    height: 100%;
    outline: none;
    border: none;
}
.nav_mobile-product{
    border-bottom: 1px solid #ececec;
}
.nav_list > ul{
    display: flex;
    flex-wrap: wrap;
}
.nav_list > ul > li{
    position: relative;
    padding: 15px 10px;
    color: #253D4E;
    cursor: pointer;
}
.nav_list>ul>li>ul{
    position: absolute;
    top: 100%;
    z-index: 10;
    background-color: var(--white-color);
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    border: 1px solid #ececec;
    padding: 10px 0px;
    border-radius: 10px;
    width: max-content;
    display: none;
}
.nav_list>ul>li:hover ul{
    display: block;
    animation: fadeInUp 0.5s;
}
.nav_list>ul>li:hover {
    color: var(--background-green);
}
.nav_list>ul>li>ul>li{
    padding: 8px 20px;
    color: #7E7E7E;
    font-size: 14px;
    text-transform: initial;
    
}
.nav_list>ul>li>ul>li:hover{
    color: var(--background-green);
}

@keyframes fadeInUp{
    0% {
        opacity: 0;
        transform: translate(0, 0) translate3d(0,100%,0);
    }
    100%{
        opacity: 1;
        transform: translate(0, 0) translate3d(0, 0, 0);
    }
}

.nav_list>ul>li.hover{
    color: var(--background-green);
}
.nav_list>ul>li > i{
    padding-left: 7px;
}
.nav_hotline{
    display: flex;
    align-items: center;
}
.nav_hotline > i{
    font-size: 35px;
    color: #253D4E;
}
.nav_hotline-phone{
    padding-left: 15px;
}
.nav_hotline-phone > a{
    color: var(--background-green);
    font-size: 26px;
    font-weight: var(--fw7);
    line-height: 25px;
    text-align: center;
}
.nav_hotline-phone>p{
    font-size: 12px;
    font-weight: var(--fw5);
    letter-spacing: 1px;
    color: #7E7E7E;
}
#slide {
    padding-top: 20px;
}
.slide{
    border-radius: 30px;
    overflow: hidden;
}
.slide_show{
    position: relative;
}
.slide_show > img{
    border-radius: 30px;  
    height: 500px;
}
.slide_body{
    position: absolute;
    width: 60%;
    top: 50%;
    left: 0;
    padding-left: 90px;
    transform: translateY(-50%);
}
.slide_body > h2{
    color: #253D4E;
    font-size: 50px;
    font-weight: var(--fw7);
    margin-bottom: 10px;
}
.slide_body>p{
    font-size: 23px;
    font-weight: var(--fw5);
    color: #7E7E7E;
    margin-bottom: 15px;
}
.slide_body> button{
    color: var(--white-color);
    background-color: var(--background-green);
    padding: 10px 30px;
    border: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.slide_body > button:hover {
    color:  var(--white-color);
    background-color: var(--background-origin);
    transition: all 0.3s ease;
}

.btn_slider{
    display: block;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: #F2F3F4;
    border-radius: 50px;
    color: #7E7E7E;
    font-size: 18px;
    opacity: 1;
}
.btn_slider-prev{
    left: 2%;
}
.btn_slider-back{
    right: 2%;
}
.btn_slider:hover{
    color: var(--white-color);
    background-color: var(--background-green);
}


/* PRODUCT NEW */
.productnew{
    padding-bottom: 60px;
}
.cart_product{
    border: none;
}
.title_product{
    position: relative;
    font-size: 23px;
    width: 100%;
    font-weight: var(--fw7);
    color: #253D4E;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ececec;
}
.title_product::before{
    position: absolute;
    content: "";
    background-color: var(--background-green);
    transform: translateY(1px);
    bottom: 0;
    width:80px;
    height: 2px;
}
.repeat-box{
    display: flex;
    flex-direction: column;
    gap: 25px;
}
article {
    background-color: var(--white-color);
    border-radius: 10px;
    transition: all 0.5s ease-out;
    display: flex;
    gap: 20px;
}
article.newpro:hover{
    box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px;
    transform: translateY(-10px);
    transition: all 500ms ease;
    cursor: pointer;
}
article > .box_img{
    position: relative;
    flex-basis: 33.3333333%;
    border-radius: 10px;
    height: 132px;
    overflow: hidden;
}
    .box_discount{
    position: absolute;
    font-weight: var(--fw6);
    padding: 3px 10px;
    border-radius: 10px 0px;
    top: 0;
    left: 0;
    background-color: #ec0015;
    color: var(--white-color);
    font-size: 12px;
}

article >.box_infor{
    flex-basis: 66.6666666%;
    align-self: center;
}
.box_infor  h3 {
    height: 40px;
    color: #253D4E;
    font-family: "Montserrat";
    font-size: 16px;
    font-weight: var(--fw6);
    margin-bottom: 0;
    cursor: pointer;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}
.box_star > i {
    font-size: 12px;
    color: #888;
}
.box_infor > .box_cart {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.box_cart > .box_money {
    color: #3BB77E;
}
.box_cart > span {
    color: #7E7E7E;
    margin-left: 10px;
    font-size: 13px;
    font-weight: var(--fw5);
    text-decoration: line-through;
}
.box_cart > .btn_cart{
    border: none;
    color: var(--background-green);
    font-size: 16px;
    background-color: #DEF9EC;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}
.box_cart > .btn_cart:hover {
    background-color: var(--background-green);
    color: var(--white-color);
}


/* HomePage */
#home_page{
    display: block;
}
#home_page.active {
    display: none;
}

/* gioi thieu */
#interduce_page{
    display: none;
}
#interduce_page.active {
    display: block;
}
.router_page{
    padding: 20px 0;
    border-bottom: 1px solid #ececec;
}
.router_home{
    color: #7E7E7E;
    font-size: 14px;
    font-weight: var(--fw6);
    text-transform: capitalize;
    margin: auto 5px;
}
.router_text > i{
    font-size: 12px;
    color: #7E7E7E;
    padding: 0 5px;
    align-self: center;
}
.router_child{
    font-size: 14px;
    font-weight: var(--fw6);
    margin: auto 5px;
    color: var(--background-green);
    text-transform: capitalize;
}
.leaderPage{
    padding: 50px 0 110px 0;
}
.leaderText{
    flex-basis: 41.66666666667%;
    padding-right: 50px;
}
.leader{
    font-size: 18px;
    color: var(--background-green);
    font-weight: var(--fw7);
    margin-bottom: 5px;
}
.leader_title{
    font-size: 35px;
    margin-bottom: 20px;
    font-weight: var(--fw7);
    color: #253D4E;
}
.leader_p{
    margin-bottom: 15px;
}
.leaderImg{
    flex-basis: 58.33333333333%;
}
.leader_card{
    position: relative;
}
.leader_card img {
    border-radius: 15px;

}
.leader_infor{
    position: absolute;
    padding: 30px;
    box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px;
    background-color: var(--white-color);
    border-radius: 15px;
    left: 50%;
    top: calc(100% + 50px);
    transform: translateX(-50%) translateY(-100%);
    width: 80%;
}
.leader_name{
    color: #253D4E;
    font-size: 22px;
    font-weight: var(--fw7);
    margin-bottom: 5px;
    text-align: center;
}
.leader_position{
    color: #7E7E7E;
    text-align: center;
    font-size: 16px;
}
/* gioi thieu Long */
.about_download{
    padding: 50px 0;
    background-color: #F4F6FA;
}
.row_top{
    align-items: center;
    flex-direction: row;
}
.row_bootom{
    padding-top: 40px;
}

.div1{
    width: 41.66666666666667%;
    padding-right: 40px;
}


.about_img{
    width: 58.333333333333333%;
    display: flex;
    gap: 25px;
}
.title1{
        color: var(--c-1670226262902, #7E7E7E);
        font-size: 24px;
        text-align: left;
        font-weight: 700;
        margin-bottom: 20px;
} 
.div1-title1{
    color: var(--c-1670226160838, #253D4E);
        font-size: 35px;
        text-align: left;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: normal;
}
.div1-info1{
    color: #253D4E;
    font-size: 16px;
    margin-bottom: 15px;
    text-align: justify;
}

.div1-title2{
    color: var(--c-1670226160838, #253D4E);
    font-size: 25px;
    text-align: left;
    font-weight: 700;
    margin-bottom: 20px;
}   

/* end gioi thieu Long */
/* dang ki */
#signup_page {
    display: none;
}
#signup_page.active {
    display: block;
}

/* liên hệ */

#contact_page{
    display: none;
}
#contact_page.active {
    display: block;
}

#healthy_page{
    display: none;
}
#healthy_page.active{
    display: block;
}
/* liên hệ_1*/
.page_contact{
    margin-bottom: 80px;
    display:grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    gap:10px;
    margin-top: 40px;
}
.mega{
    color:#ec0015;
    position:absolute;
    top:17px;
}
.borderxl{
    padding-left: 10px;
    border:none;
    outline: none;
}
.enter{
    padding:12px;
    border:1px solid #ececec;
    border-radius:5px;
    display:flex;
    position:relative;
    outline: none;
}
.enterInformation{
    margin-right:5%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap:20px;
}
.textxl{
    margin-top: 20px;
    width:95%;
    border-radius: 10px;
}
.buttonlm{
    border:none;
    margin-top: 20px;
    border-radius: 5px;
    padding:15px 45px;
    background-color: #00bc7f;
    color:#DEF9EC;
    display:flex;
    gap:10px;
}
.buttonlm:hover{
    background-color: #FDC040;
    transition: 30ms;
}


.red{
    font-size: 17px;
    font-weight: 600;
}
.nest{
    display:flex;
}
.ic{
    color:#00bc7f;
    margin-right: 10px;
}
.h2r{
    margin-bottom: 45px;
}
.information{
    display:flex;
    flex-direction: column;
    gap:17px;
}
.thise{
    border-radius:10px;
}
.errorWrong{
    position: relative;
}
.wrong{
    font-size: 11px;
    position: absolute;
    top: 100%;
    color:#dd4b39;
}

.contact_title{
    font-size: 20px;
    font-weight: var(--fw6);
    color: var(--background-green);
    margin-bottom: 5px;
}
/* end liên hệ 1 */
.gridSignUp{
    display:grid;
    gap:50px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}
.signUp_container{
    padding: 50px 0;
}
.signUp_page{
    display:flex;
    flex-direction: column;
    gap:24px ;
}
.page{
    border:1px solid black;
    border-radius: 5px;
    width:100%;
    margin-top:0;
    padding :10px;
    display:flex;
    gap: 10px;
    position: relative;

}
.pct{
    
    border-radius: 20px;
}
.get{
   width:600px;
    border:none;
    outline: none;
}
.min{
    padding-left:10px;
   
}
.bu{
    color:#ec0015;
   
    position: absolute;
    top:12px;
}
.a
{
    border:none;
}
.b{
   
    border:none;
   
    display:flex;
    gap:20px;
}
.link{
    color:#00bc7f;
    font-size: 16px;
    font-weight: 600;
}
.log{
    font-size: 18px;
    width:180px;
    border:none;
    border-radius: 5px;
    background-color: #00bc7f;
    color:#fff;
    padding:15px 20px;
    transition: all 0.5s ease;
}
.log:hover{
    background-color: #FDC040;
}
.poot{
    position: absolute;
    color:#ec0015;
    font-size: 13px;
    bottom: -23px;
}
@media (max-width:1000px)
{
    .gridSignUp{
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

/* dang nhap */
#signin_page {
    display: none;
}
#signin_page.active {
    display: block;
}
/* END RESET CSS */

/* BEGIN CSS DANH MỤC CHÍNH */
.dmc{
    padding-top: 60px;
    padding-bottom: 60px;
}
.dmc > h1{
    color: #253D4E;
    font-size: 32px;
    font-weight: 700;
    margin: 0px 30px 40px 0px;
    display: block;
}
.dmc_card{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}
.card-img-overlay{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.card-img-overlay .card-text{
    transition: all 0.5s ease-out;
    cursor: pointer;
}
.card-dcm-top{
    height: 200px;
    margin-bottom: 10px;
    background-color: #F4F6FA;
    display: flex;
    justify-content: center;
}
.card-dcm-top:hover{
    background-color: white;
    border-color: #3BB77E;
    cursor: pointer;
}

.card-img-top{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 80px;
    margin-top: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.card-title{
    text-align: center;
    font-size: 16px;
    font-weight: var(--fw7);
    color: #253D4E;
}
.card-text{
    color: black;
    margin-bottom: 30px;
    font-family: "Quicksand";
    font-weight: 700;
    line-height: 27px;
    font-size: 20px;
}
.btn_right,
.box_cart > .dmc_btn{
    color: var(--white-color);
    font-size: 13px;
    padding: 6px 15px;
    background-color: var(--background-green);
    transition: all 0.3s ease;
    font-weight: var(--fw7);
    /* width: 100%; */
    gap: 5px;
}
.btn_right:hover,
.box_cart > .dmc_btn:hover{
    background-color: #FDC040;
    color: var(--white-color);
}

.card-img-overlay .card-text:hover{
    transform: translateY(-10px);
}

.swiper-click{
    padding-top: 20px;
    width: 175px;
    bottom: -20%;
    left: 50%;
    transform: translateX(330%);
    white-space: nowrap;
    text-align: center;
    transition: .3s opacity;
    z-index: 10;
    cursor: pointer;
}
/* END CSS DANH MỤC CHÍNH */

.bgrImg{
    background-image: url(https://demo037131.web30s.vn/datafiles/web30s/upload/images/7101-7200/30S-03-7131/banner-10.png);
    background-size: cover; 
    height:100%;
    margin: 0 auto;
    border-radius:20px;
    
}
.Surrounded{ 
    width: auto;
    height:100%;
    margin: 0 auto;
    padding:70px 50px 0 50px;
    bottom:0;
    display:grid;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
}


.Surrounded .tip{
    position: relative;
    padding-bottom: 70px;
}
.lookfor{
    width: 85%;
    position:relative;
}
.search{
    width: 100%;
    padding: 20px 10px 20px 20px;
    outline: none;
    border:none;
    border-radius: 50px 0px 0px 50px;
}
.register{
    color:#fff;
    font-weight: 600;
    font-size: 16px;
    background-color: #3BB77E;
    width: 130px;
    height: 100%;
    outline: none;
    border:none;
    border-radius: 50px;
    position: absolute;
    right: -30px;
    top:0;
    bottom:0;  
    transition: all 0.5s ease;
}
.register:hover
{
    background-color:#FDC040;
}
.Surrounded h2{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #253D4E;
}
.tip > p{
    font-size: 18px;
    margin-bottom: 45px;
}
.card_Surrounded{
    margin-top: 50px;
    padding: 50px 0;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px;
    flex-wrap: wrap;
    gap: 20px;

}
.product{
    width:100%;
    padding:20px;
    border-radius: 15px;
    background-color: #F4F6FA;
    display:flex;
    gap:20px;
}
h4{
    font-size: 15px;
    font-weight: 700;
}
.p{
    font-size: 14px;
}
.i{
    width:50px;
}
.tip > .errorMsg{
    position: absolute;
    bottom: 0;
    left: 10px;
    font-size: 16px;
    color:red;
    font-weight:500;
}
.errorborder{
    border: 1px solid red;
}

/* PHỔ BIẾN */
.popalur{
    padding-top: 60px;
    padding-bottom: 60px;
}
.popalur_nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.popalur_list > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
} 
.popalur_item{
    padding: 7px 7px 7px 20px;
    font-size: 16px;
    color: #253D4E;
    font-weight: var(--fw6);
}
.popalur_item.active {
    color: var(--background-green);
}
.product_popalur{
    padding-top: 40px;
}
.card_popalur{
    border-radius: 15px;
    border: 1px solid #ececec;
    overflow: hidden;
}
.poplaur_img{
    position: relative;
    height: 240px;
    padding: 20px;

}
.popalur_box-icon{
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: faleIcon 0.5s;
}
.papolur_hover:hover .popalur_box-icon {
    display: flex;
    
}
@keyframes faleIcon{
    0%{
        opacity: 0;
        left: 45%;
    }
    100%{
        opacity: 1;
        left: 50%;
    }
}
.popalur_icon:hover{
    transition: all 0.5s ease;
    color: var(--background-origin);
    cursor: pointer;
}
.popalur_icon{
    width: 40px;
    color: var(--background-green);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white-color);
    height: 40px;
    border: 1px solid var(--background-green);
    transition: all 0.3s ease;
}
.popalur_icon:first-child{
    border-radius: 5px 0 0 5px;
}
.popalur_icon:last-child {
    border-radius: 0 5px 5px 0;
}

.poplaur_img img{
    border-radius: 15px;
}
.popalur_title{
    font-weight: var(--fw6);
    font-size: 16px;
    transition: all 0.5s ease;
    margin-bottom: 8px;
    font-family: "Montserrat";
    color: #253D4E;
    text-align: left;
    line-height: 23px;
    height: 46px;
}
.card-body .cart-money{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-money > .card-text{
    color: var(--background-green);
    margin-bottom: 0;
}
/* BÁN CHẠY */
.product_selling{
    padding-bottom: 60px;
}
.seliing_nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.selling_all{
    display: flex;
    align-items: center;
    color: #7E7E7E;
    font-weight: var(--fw5);
    transition: all 0.3s ease;
}
.selling_all > i{
    padding: 2px 0 0 7px;
}

.sell_carousel{
    white-space: nowrap;
    flex-wrap: nowrap;
}

.row_left{
    flex-basis: 25%;
}
.row_right {
    overflow: hidden;
    flex-basis: 75%;
}
.sell_img{
    height: 308px;
}
.sell_img > img{
    width: 100%;
}
.sell_text{
    font-size: 18px;
    font-weight: var(--fw7);
}

  /* FOOTER */
 footer {
    padding: 20px 0 60px;
 }
.footer-item{
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0px;
}
.footer-logo {
    width: 185px;
    height: 58px;
    margin-bottom: 20px;
}
.item-commit{
    margin-bottom: 15px;
}

.item-location {
    display: flex;
    color: #253D4E;
    text-align: center;
    margin-bottom: 10px;
}
.item-location > p{
    font-size: 15px;
    text-align: center;
    color: #253D4E;
}
.item-location .icon_location{
    align-self: flex-start;
    padding: 5px 10px 0 0;
    color: var(--background-green);
}
.footer_title{
    color: #253D4E;
    font-weight: var(--fw7);
    margin-bottom: 25px;
    text-transform: uppercase;
    font-size: 22px;
}
.footer_list{
    list-style: circle;
    font-size: 15px;
    color: #696969;
    font-weight: var(--fw5);
    padding-left: 20px;
}
.footer_list > li{
    padding: 5px 0;
}
.footer-end-logo{
    width: 57px;
    height: 28px;
    margin-right: 10px;
}
.footer-end-content {
    color: #696969;
    font-size: 15px;
    text-align: center;
    font-weight: var(--fw5);
    margin-right: 10px;
}
.img-logo:hover{
    cursor: pointer;
}
.footer-end{
    padding: 20px 0;
    display: flex;
    gap: 10px;
    background-color: white;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #3BB77E;
}
.footer-end-content:hover{
    cursor: pointer;
    color: #3BB77E;
}




/* BEGIN CSS SIGN IN VŨ*/
#signin_page.active {
    display: block;

  }
  .signInPart{
    display:grid;
    gap:50px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .contaier-signin{
    padding: 50px 0;
  }
  .Sign_title{
    color: #253D4E;
    font-size: 35px;
    font-weight: var(--fw7);
    margin-bottom: 30px;
  }

  .signInForm{
    display:flex;
    flex-direction: column;
    gap:25px ;
  }
  .SignInInf{
    border:1px solid #ececec;
    border-radius: 5px;
    width:100%;
    margin-top:0;
    padding :10px;
    display:flex;
    gap: 10px;
    position: relative;
  
  }
  .SignInPic{
    
    border-radius: 20px;
  }
  .Info{
   width:600px;
    border:none;
    outline: none;
  }
  .box{
    padding-left:10px;
   
  }
  .icon{
    color:#ec0015;
   
    position: absolute;
    top:12px;
  }
  .SignInButton{
    border:none;
    display:flex;
    gap:20px;
  }
  .login{
    font-size: 18px;
    width:180px;
    border:none;
    border-radius: 5px;
    background-color: #00bc7f;
    color:#fff;
    padding:15px 20px;
    transition: all 0.5s ease;
  }
  .login:hover{
    background-color: #FDC040;
  }
  .frame{
    position: absolute;
    color:#ec0015;
    font-size: 13px;
    bottom: -23px;
  }
  .text{
    border: white;
  }
  .forgetPass{
    color: #00bc7f;
    font-family: "Quicksand";
    font-weight: 800;
  }
  .signUpNow{
    color: #00bc7f;
    font-family: "Quicksand";
    font-weight: 800;
    cursor: pointer;
  }
  .linkSignUp{
    transform: translateY(-70%);
  }
  .connective{
    color: var(--white-color);
    border-radius: 5px;
    width: 200px;
    height: 50px;
  }
  .text1:hover{
    color: var(--background-origin);
  }
  .sign_btn{
        padding: 10px;
        border-radius: 5px;
        font-weight: 400;
        transition: all 300ms ease;
        font-size: 16px;
        cursor: pointer;
        text-align: center;
        display: block;
        width: 100%;
  }
  .FB{
    background-color: #3b5998;
    
  }
   .ZL:hover, 
   .GG:hover,
  .FB:hover{
    background-color: #ffc107;
  }
  .GG{
    background-color: #dc4e41;
  }
  .ZL{
    background-color: #0591e9;
  }
  .connective-container{
    position: relative;
  }
  .icon-connect{
    padding-right: 5px;
  }
 /* END CSS SIGN IN */

 /* GIOI THIEU P TUAN */
 .introduce-container-child{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
}
.introduce-container-begin{
    display: flex;
    gap: 50px;
    justify-content: space-between;
    align-items: center;
}
.introduce-begin-img{
    flex-basis: 50%;
    height: 683px;
    border-radius: 20px;
}
.introduce-begin-content{
    flex-basis: 50%; 
}
.introduce-content-img{
    margin-top: 20px;
    display: flex;
    flex: 1;
    justify-content: space-between;
}
.introduce-img-1{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/banner/about-3.png?t=1670571412);
    width: 170px;
    height: 170px;
}
.introduce-img-2{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/banner/about-4.png?t=1670571412);
    width: 170px;
    height: 170px;
}
.introduce-img-3{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/banner/about-2.png?t=1670571412);
    width: 170px;
    height: 170px;
}
.about_person{
    position: relative;
    background-image: url(https://demo037131.web30s.vn/datafiles/web30s/upload/images/7101-7200/30S-03-7131/about-9.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 70px 30px;
    width: 100%;
    display: flex;
    gap: 25px;
}
.about_person::before{
    position: absolute;
    content: "";
    background-color: rgba(75, 103, 90, 0.8);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.about{
    padding-top: 50px;
}
.about_box{
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.number_person{
    color: var(--white-color);
    font-size: 60px;
    font-weight: var(--fw7);
    text-align: center;
    margin-bottom: 10px;
}
.text_person{
    text-align: center;
    font-size: 20px;
    font-weight: var(--fw6);
    color: var(--white-color);
}
/* Reponsive */



/*khuyen mai*/
:root {
    --color-black: #000;
    --bg-white: #fff;
}
.swipe{
    display: flex;
    justify-content: center;
}
.swipe-text{
    font-size: 32px;
    font-weight: var(--fw7);
    margin-bottom: 40px;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.swipe-1 {
    overflow: hidden;
    height: 600px;
    position: relative;
    transition: all 500ms ease;
}

#swipe {
    height: 100%;
    display: flex;
    box-sizing: content-box;
    position: relative;
    transition: all 300ms ease;
    font-size: 16px;
}

.wrapper {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    width: 380px;
    height: 400px;
    margin: 0 15px;
    border-radius: 15px;
    color: var(--color-black);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    position: relative;
    flex-shrink: 0;
    overflow: visible;
}
.wrapper.p1{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/muc-la-cau-a-1.jpg?t=1670224691);
}
.wrapper.p2{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/hat-dieu-rang-muoi-thanh-viet-hu-170g-1.jpg?t=1670224696);
}
.wrapper.p3{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/tp7_1.png?t=1670224691);
}
.wrapper.p4{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/18_1.jpg?t=1670224688);
}
.wrapper.p5{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/1_1.jpg?t=1670224687);
}
.wrapper.p6{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/tom-tich-1.jpg?t=1670224688);
}
.wrapper.p7{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/2_1.jpg?t=1670224686);
}
.wrapper.p8{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/so-diep-nhat-1.jpg?t=1670224687);
}
.wrapper.p9{
    background-image: url(https://demo037131.web30s.vn/datafiles/35782/upload/images/product/ca-tuyet-alaska-2.jpg?t=1670224685);
}


.wrapper > .content {
    position: absolute;
    background-color: var(--bg-white);
    width: 85%;
    height: auto;
    border-radius: 15px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    top: calc(100% + 80px);
    z-index: 5;
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    display: block;
    padding: 20px;
    transition: all 300ms ease;
    cursor: pointer;
}

.timer {
    vertical-align: center;
    align-items: center;
    height: auto;
    overflow: visible;
    margin: 0 0 15px;
    display: inline-flex;
}

.timer-item {
    flex: 1;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.05) 5px 5px 15px;
    background-color: var(--bg-white);
    border: 1px dashed #3BB77E;
    padding: 5px;
    margin: 0 5px;
    border-radius: 4px;
}

.timer-number {
    color: #3BB77E;
    font-weight: 700;
}

.timer-text {
    margin: 0 0 0 2px;
    color: var(--color-black);
}

.title {
    height: auto;
    color: #253D4E;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    text-align: left;
    font-family: Montserrat, sans-serif;
}

.rating {
    height: auto;
    text-align: left;
}

.rating>span {
    font-size: 18px;
    display: inline-block;
    height: auto;
    width: auto;
    cursor: pointer;
    color: #888;
    position: relative;
}

.rating>span::before {
    content: "\2605";
    line-height: initial;
    font-size: inherit;
}

.price {
    align-items: center;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
    display: flex;
}

.price-sale {
    color: #3BB77E;
    font-size: 18px;
    font-weight: 700;
    line-height: 23px;
}

.price-exact {
    text-decoration: line-through;
    font-weight: 500;
    font-size: 14px;
    line-height: 23px;
    padding-left: 10px;
}

.shopping-link {
    height: 40px;
    background-color: #DEF9EC;
    border-radius: 5px;
    width: 40px;
    align-items: center;
    justify-content: center;
    display: flex;
    transition: all 300ms ease;
    color: #3BB77E;
}

.shopping-icon {
    color: inherit;
    padding: 0 5px;
}

.shopping-link:hover {
    cursor: pointer;
    background-color: #3BB77E;
    color: #fff;
}

.content:hover {
    transform: translateX(-50%) translateY(calc(-100% - 10px));
    transition: all 500ms ease;
}

.icon-wrap {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 15px;
    color: #7E7E7E;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    background-color: #F2F3F4;
    color: #7e7e7e;
}

.icon-wrap:hover {
    background-color: #3BB77E;
    color: #fff;
}

.icon-left {
    left: 2%;
    z-index: 4;
    border-radius: 50%;
}

.icon-right {
    right: 2%;
    z-index: 4;
    border-radius: 50%;
}

.icon-arrow {
    color: inherit;
}

.model_box{
    background-color: rgba(0, 0, 0, 0.7);
}
.model_title{
    color: var(--white-color);
    text-shadow: 0 0 1px #777;
    font-weight: 400;
    font-size: 18px;
}
.btn_buy-model{
    padding: 10px 30px;
    border-radius: 5px;
    transition: all 0.5s ease;
}
.btn_buy-model:hover{
    background-color: var(--background-origin);
    color: var(--white-color);
}
.btn_buy-more{
    background-color: var(--white-color);
    border: 1px solid #2abfa5;
    color: #2abfa5;
}
.btn_buy-cart{
    background-color: #2abfa5;
    color: var(--white-color);
    border: 1px solid #2abfa5;
}

/*healthy*/
.healthy{
    padding: 50px 0;
    display:grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr;
    gap:30px;
}
.healthy_foot{
    display:flex;
    flex-direction: column;
    gap:30px;
}
.healthy_foot_1{
    margin-top:15px;
    border-radius: 15px;
    border:1px solid #ececec;
    padding:10px;
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 2fr;
    gap:20px;
    transition: all 0.5s ease-out;
}
.healthy_foot_1:hover{
    transform: translateY(-10px);
}
.healthy_foot_of_a{
    font-size: 30px;
    font-weight: 700;
    transition: all 0.3s ease;
}
.healthy_foot_of_a:hover{
    color:#00bc7f;
}
.healthy_foot_of_1{
    padding:60px 20px 30px 20px;
}
.healthy_foot_of_1_1{
    padding-top: 50px;
    display: flex;
    justify-content: space-between;
  
}
.healthy_foot_of_1_1_1{
    display:flex;
    gap:20px;
    font-size: 14px;
    color: #7E7E7E;
}
.healthy_foot_of_i{
    display:flex;
    gap:10px;
}
.healthy_foot_of_p{
    padding-top: 30px;
}
.healthy_foot_of_arrow{
    color:#00bc7f;
    font-weight: 600;
    font-size: 16px;
    display:flex;
    gap: 5px;
}
.healthy_foot_img{
    border-radius: 20px;
}
/* healthy_learn_about */
.healthy_learn_about_size{
    font-size: 20px;
    font-weight: 700;
}
.healthy_learn_about{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap:30px;
}
.healthy_learn_about_1{
    padding:20px 15px;
    border-radius: 15px;
    border:1px solid #ececec;
    display:flex;
    position:relative;
}
.healthy_learn_about_1_search{
    border:none;
    outline: none;
}
.healthy_learn_about_1_icon{
    font-size: 20px;
    position:absolute;
    right:20px;
}
.healthy_learn_about_2{
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    padding: 20px 15px;
    border-radius: 15px;
    border:1px solid #ececec;
}
.healthy_learn_about_2_tag{
    padding-top:30px;
    display:flex;
    flex-direction: column;
    gap:10px;
}
.helthy_about-img{
    position: relative;
}
.helthy_about-text{
    position: absolute;
    width: 50%;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
}
.helthy_text-title{
    margin-bottom: 5px;
    font-weight: var(--fw5);
    color: #7E7E7E;
}
.helthy_text-desc{
    font-size: 20px;
    color: #253D4E;
    font-weight: var(--fw7);
    line-height: 30px;
}
.healthy_learn_about_2_1:hover{
    cursor: pointer;
}
.accordion_btn{
    border: 1px solid #ececec;
    border-radius: 5px;
    font-size: 16px;
    font-weight: var(--fw5);
}
.accordion_btn:focus{
    box-shadow: none;
}
.accordion_btn:hover{
    color: var(--background-green);
    border: 1px solid --background-green
}
.accordion-button:not(.collapsed){
    background-color: var(--white-color);
}
.healthy_learn_about_2_2{
    padding:15px;
    border-radius: 10px;
    border:1px solid #00bc7f;
    color:#00bc7f;
    cursor: pointer;
}
.healthy_learn_about_2_2:hover{
    color: #00bc7f;
}
.healthy_learn_about_3{
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    border-radius: 15px;
    border:1px solid #ececec;
    padding:20px 15px;
    display:grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap:10px;
    margin-bottom: 30px;
 }   
.healthy_learn_about_3_1{
     margin-top:15px;
    padding-bottom: 15px;
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    gap:10px;
    transition: all 0.5s ease;
    border-bottom: 1px dashed #ececec;
}
.healthy_learn_about_3_1:hover{
    transform: translateY(-10px);
}
.healthy_learn_about_p{
    color:#00bc7f;
    font-size: 15px;
    text-align: left;
    font-weight: 700;
    transition: all 0.3s ease;
}
.healthy_learn_about_p:hover{
    cursor: pointer;
    color:#FDC040;
}
.healthy_new{
    display:flex;
    flex-direction: column;
    gap:10px;
}
.healthy_text{
    font-size: 14px;
    font-weight: var(--fw5);
    color: #7E7E7E;
}
.healthy_learn_about_4{
    box-shadow: rgb(0 0 0 / 5%) 5px 5px 15px;
    border-radius: 15px;
    padding:20px 15px;
    border-radius: 10px;
    border:1px solid #ececec;
}
.healthy_learn_about_5{
    border-radius: 10px;
}
.healthy_hr{
    width:40%;
    height:2px;
    background-color:#3BB77E;
    
}
.healthy_hr_hr
{
    width:100%;
    height:2px;
   background-color:#ececec;
}
.healthy_anfile{
    font-size: 16px;
    padding-top: 35px;
}
.healthy_dashed{
    margin:0px;
    padding:0px;
    border:1px dashed #000;
}
.accordion-body_1{
    margin:10px;
    
}
.accordion-body_1:hover{
    color:#00bc7f
}
.accordion{
    padding:5px;
    border-radius: 10px;
    border:1px solid #ececec;
}
.accordion-button{
    padding:15px;
    border:none;
}
.accordion-button:hover{
    background-color: #fff;
    border-color: #00bc7f;
}
/*end healthy*/


/* REPONSIVE */
@media (min-width:840px) and (max-width: 1199px) {
    .dmc>h1 {
        padding-left: 10px;
    }
    .card_Surrounded {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 100px;
    }
}
@media (max-width: 1199px) {
    .selling_card {
        height: 505px;
        margin-bottom: 30px;
    }
    .popalur_list {
        font-size: 20px;
    }
    .card_Surrounded {
        grid-template-columns: 1fr;
        grid-template-rows: 100px;
    }
    #slide {
        padding-top: 100px;
    }
    .slide_body {
        padding-left: 50px;
        width: 95%;
    }
    .slide_body>h2 {
        font-size: 32px;
    }

    .slide_body>p {
        font-size: 20px;
    }

    .last {
        display: none;
    }

    .list {
        padding: 0px;
    }

    .Surrounded {
        display: block;
    }
}

@media(max-width:839px) {
    .page_contact {
        display: block;
        width: 100%;
    }

    .information {
        display: none;
    }

    .textxl {
        width: 100%;
    }

    .enterInformation {
        margin-right: 0px;
    }
}

@media (max-width:480px) {
    .title_h1 {
        font-size: 27px;
        padding-left: 10px;
    }

    .register {
        width: 100px;
    }

    .Surrounded h2 {
        font-size: 27px;
    }

    .page_contact {
        display: block;
        width: 100%;
    }

    .information {
        display: none;
    }

    .enterInformation {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 10px;
    }

    .textxl {
        width: 100%;
    }

    .enterInformation {
        margin-right: 0px;
    }
}