#contact{
    margin-bottom: 300px !important;
}
.contact__pnl{
    position:relative;
    align-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    .contact__pnl .contact__pnl-title{
        font-size: 30px;
        color: white;
        font-weight: 700;
        text-transform: uppercase; 
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
    }     
    .contact__pnl .contact__pnl-body{ 
        border-radius: 10px;
        display: flex; 
        width: 100%;
        height: fit-content;
        transform: translateY(100%);
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
        .contact__pnl .contact__pnl-body .contact__pnl-body-col{ 
            flex: 1;
        } 
        .contact__pnl .contact__pnl-body .contact__pnl-body-col.contact__pnl-body-left{
            background:white;
            padding: 40px;
            padding-right: 25px;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        } 
        .contact__pnl .contact__pnl-body .contact__pnl-body-col.contact__pnl-body-right{
            background: var(--color-primary-1);
            color: white;
            padding: 40px;
            padding-left: 25px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        } 
        .contact__pnl .contact__pnl-body .contact__pnl-body-col .contact__pnl-body-col-title {
            font-size: var(--size-title-1);
            font-weight: 700;
            color: var(--color-primary-1);
            margin-bottom: 10px;
        }
        .contact__pnl .contact__pnl-body .contact__pnl-body-col .contact__pnl-body-col-content { 
            display: flex;
            margin-bottom: 10px;
        }


/* Mobile/Tablet doc */
@media (max-width: 768px) { 
    #contact{
        margin-bottom: 20px !important;
    }
    .contact__pnl .contact__pnl-title{
        transform: none;
        position: unset;
        margin-bottom: 10px;
    }
    .contact__pnl .contact__pnl-body{
        transform: none;
        flex-direction: column;
    }
    .contact__pnl .contact__pnl-body .contact__pnl-body-col.contact__pnl-body-left{
        border-radius: 0px;
    }
    .contact__pnl .contact__pnl-body .contact__pnl-body-col.contact__pnl-body-right{
        border-radius: 0px;
    }
    .contact__pnl .contact__pnl-body .contact__pnl-body-col .contact__pnl-body-col-content{
        flex-wrap: wrap;
    }
    .contact__pnl .contact__pnl-body .contact__pnl-body-col.contact__pnl-body-left{
        padding: 20px;
    }
    .contact__pnl .contact__pnl-body .contact__pnl-body-col.contact__pnl-body-right{
        padding: 30px;
    }
    .contact__pnl .contact__pnl-body .contact__pnl-body-col .contact__pnl-body-col-title{
        font-size: 16px;
        text-align: center;
    }

}
 
/* Từ 1024px den 1299px */
@media screen and (min-width: 1024px) and (max-width: 1299px) {
}

/* Toi da 1300px */
@media (max-width: 1300px) { 
}

/* Toi thieu 1301px */
@media (min-width: 1301px) and (max-width: 1400px) {  
}

/* Từ 1400px trở lên */
@media (min-width: 1400px) and (max-width: 1499px) { 
}

@media (min-width: 1500px)  { 
}