/* hộp trắng */
.contact-box{
    display:flex;
    /* background:#fff; */
    /* border-radius:14px; */
    overflow:hidden;
    gap: 20px;
}

/* bên trái */
.contact-left{
    width:50%;
    display:flex;
    background: #Fff;
    border-radius: 20px;
}
.side-bar {
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    border-right: 1px solid #eee;
}

.side-bar .logo img {
    /* width: 60px; */
    margin-bottom: 50px;
}
/* chữ CONTACT HERE */
.contact-title{
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 64px;
	/* padding: 40px 20px; */
	font-family: 'UTM Cafeta';
}

/* form */
.contact-form{
    padding:40px 30px 0 30px;
    width:100%;
}

/* input */
.contact-form .form-control{
    width:100%;
    border:none;
    border-bottom:1px solid #ddd;
    padding:10px 0;
    border-radius:0;
    font-size:16px;
    background:transparent;
}
.contact-form .form-group {
	padding: 15px 0;
}
.contact-form .form-control:focus{
    outline:none;
    border-bottom:1px solid #222;
}

/* button */
.btn-submit{
    width: 100%;
    background: #063c23;
    color:#fff;
    border-radius:30px;
    padding:12px 0;
    margin-top:30px;
    cursor:pointer;
    transition: all .3s ease;
}

.btn-submit:hover{
    background: var(--mcolor);
}

.contact-right{
    /* width: 40%; */
}

.contact-right img{
    /* width:100%; */
    /* height:100%; */
    /* object-fit:cover; */
}

@media(max-width:900px){
    .contact-box{
        flex-direction: column-reverse;
    }

    .contact-title{
        writing-mode: horizontal-tb;
        transform:none;
        border-right:none;
        border-bottom:1px solid #eee;
        text-align:center;
		font-size: 40px;
    }

    .contact-left, .contact-right{
        width:100%;
        flex-wrap: wrap;
        align-items: flex-end;
        flex-direction: column-reverse;
    }
	.contact-form {
		padding: 20px 20px 0;
	}
	.side-bar .logo {
		display: none;
	}
}