/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.text-60{
	font-size: 60px;
}
.text-30{
	font-size: 30px;
}

/*************** Trang chủ   ***************/
.flickity-page-dots {
	bottom: 0px;
}

/*************** header.   ***************/
.nav>li.html {
    font-size: 18px;
}
.nav, .nav>li {
    position: relative;
    color: #223c56;
}
.nav > li > a, .mobile-sidebar-levels-2 .nav > li > ul > li > a {
    font-weight: 100 !important;
    font-style: normal;
}
.nav>li>a {
    font-size: 17px;
}
.nav-line-bottom>li>a:before {
    bottom: 15px;
    top: auto;
    background: white;
}
.nav-spacing-xlarge>li {
    margin: 0 25px;
}
.nav-column>li>a, .nav-dropdown>li>a, .nav-vertical-fly-out>li>a, .nav>li>a {
    color: #223c56;
    transition: all .2s;
}
.nav-dropdown li.active>a{
	Background-color: #223c56;
	color: white;
}

/********** Footer *************/
.contact-list {
  list-style-type: none;
  margin-bottom: 30px !important;
}
.contact-text{
    margin-left: 15px;
}
.contact-text a {
  text-decoration: none;
  transition-duration: 0.2s;
}
.contact-text a:hover {
  text-decoration: none;
}
.list-item{
    display: flex;
}
.icon-page-contact{
    font-size: 20px;
    color: #223c56;
    width: 13px;
}

/********** Footer > icon *************/
.social-icons {
    padding:0;
    list-style: none;
}
.footer-social-icons {
    display:block;
    margin: 0 auto;
}
.social-icon {
    color: #838383;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #223c56;
    text-decoration: none;
    font-size: 30px;
}
.social-icon .icon-facebook {
    padding:6px 10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    border: 2px solid #223c56;
    border-radius: 5px;
}
.social-icon > .icon-facebook:hover {
    background-color: #3d5b99;
    border: 2px solid #3d5b99;
    color: white;
}
.social-icon .icon-instagram {
    padding:6px 10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    border: 2px solid #223c56;
    border-radius: 5px;
}
.social-icon > .icon-instagram:hover {
    background: radial-gradient(circle at 30% 107%, rgb(253, 244, 151) 0%, rgb(253, 244, 151) 5%, rgb(253, 89, 73) 45%, rgb(214, 36, 159) 60%, rgb(40, 90, 235) 90%);;
    border: 0px;
    color: white;
}
.social-icon .icon-tiktok {
    padding:6px 10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    border: 2px solid #223c56;
    border-radius: 5px;
}
.social-icon > .icon-tiktok:hover {
    background-color: black;
    border: 2px solid black;
    color: white;
}
.social-icon .icon-envelop {
    padding:6px 10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    border: 2px solid #223c56;
    border-radius: 5px;
}
.social-icon > .icon-envelop:hover {
    background-color: black;
    border: 2px solid black;
    color: white;
}
.social-icon .icon-youtube {
    padding:6px 10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    border: 2px solid #223c56;
    border-radius: 5px;
}
.social-icon .icon-youtube:hover {
    background-color: #e64a41;
    border: 2px solid #e64a41;
    color: white;
}
.social-icon .icon-phone {
    padding:6px 10px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    border: 2px solid #223c56;
    border-radius: 5px;
}
.social-icon .icon-phone:hover {
    background-color: #51cb5a ;
    border: 2px solid #51cb5a ;
    color: white;
}

/********** Form *************/
#responsive-form {
    width: 100%;
}
.form-row {
    width: 100%;
}
.column-half, .column-full {
    float: left;
    position: relative;
    padding: 0 2px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}
.column-half img {
	width: 70%;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ffb900;
    display: flex !important;
}

@media only screen and (min-width: 768px){
    .column-half {
        width: 40% !important;
		text-align: center !important;
    }    
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.column-half {
        width: 50% !important;
		text-align: center !important;
    }    


}