/*
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.   ***************/




@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

:root{
	--black: #303430;
	--green: #009745;
	--white: #fff;
	--blue: #0d67b9;
	--yellow: #EEBA00;
}
*{
	font-family: 'Roboto', sans-serif;
}
h1 {
	font-size : 56px !important;
}
@media only screen and (max-width: 767px){
	h1{
		font-size: 42px !important;
	}
}


/* Header */
.header .header-bg-color{
	background-color: var(--blue);
}
.header .nav > li > a{
	color: var(--white);
}
.header .nav > li:hover > a, 
.header .nav > li.active > a{
	background: var(--white);
	color: var(--black);
}
.header .header-nav li{
	padding: 0 5px;
}

/* footer */
.footer-wrapper,
.footer-wrapper .section-footer a,
.section-footer .ux-menu-link--active 
.section-footer .ux-menu-link__link, 
.section-footer .ux-menu-link:hover .ux-menu-link__link{
	color: var(--white);
}
.section-footer .divider{
	display: block;
}
.footer-wrapper{
	padding: unset;
}
.wpcf7-response-output{
	display: none;
}

/*  Trang chủ*/
.br-header h1{
	text-shadow: 1px 1px 2px pink;
	margin-bottom: unset;
}
.notice-banner p{
	font-size : 20px;
	text-align: justify;
}
.padding-top-20 {
	padding-top: 20px !important;
}
.br-cham .badge{
	display: none;
}
.section2-home .col-inner{
	height: 200px;
}

.br-kh .star-rating span:before{
	color: var(--yellow);
}

.container-upweight h2{
	font-size: 29px;
	color: var(--blue);
}
.container-upweight div {
	margin-bottom: 10px;
}

.container-upweight label {
	display: block;
	margin-bottom: 5px;
}

.container-upweight input {
	width: 35%;
	padding: 8px;
	box-sizing: border-box;
}
/* Block firefox */
.container-upweight input[type="number"] {
	-moz-appearance: textfield;
}
 /* Block trong Chrome, Safari, Edge và Opera */
.container-upweight input[type="number"]::-webkit-outer-spin-button,
.container-upweight input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
/* Block Explore */
.container-upweight input[type="number"] {
	-ms-appearance: textfield;
}
.container-upweight #weight{
	font-weight: 800;
}

.sec-quytrinh-title{
	padding-bottom: 20px;
}
.sec-quytrinh-title h2{
	font-size: 29px;
}
.section-quytrinh .col p a{
	color: var(--blue);
}
.section-quytrinh .col-inner{
	border: 1px solid #dedede;
	border-radius: 15px;
}
.section-quytrinh .icon-box{
	padding: 20px;
	height: 150px;
}
.section-quytrinh .icon-box .icon{
	background-color: #f8fafd;
	border-radius: 15px;
}
.section-quytrinh .icon-box p{
	text-align: justify;
}

.sec-quytrinh-item{
	border: solid 3px;
	border-radius: 15px;
	min-height: 210px;
}
.sec-quytrinh-item p{
	text-align: justify;
}
p.sec-qt-heading {
    font-size: 20px;
    color:var(--black);
    font-weight: 700;
	margin-bottom: unset;
}

.service-deli-icon .fa {
	font-size: 45px;
	padding-bottom: 30px;
	color: #fff;
}

.sec-dichvu h4 {
	color: #fff;
	text-align: left;
	text-transform: none;
	font-size: 29px;
}

.sec-dichvu .nav-vertical>li+li {
	border-top: none;
}

.service-deli-bot .col {
	padding: 0 15px;
}

.sec-dichvu .nav-vertical+.tab-panels {
	margin-top: 0 !important;
	border-left: none;
	padding: 0 30px;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.sec-dichvu .nav>li>a {
	font-size: 30px;
	color: #fff;
}

.sec-dichvu .nav>li>a:hover,
.sec-dichvu .nav>li.active>a {
	color: var(--yellow);
}

.sec-dichvu .panel {
	transition: opacity .3s ease-in-out .3s;
}

.sec-dichvu .nav>li>a span {
	display: inline-block;
	position: relative;
	font-size: 25px;
}

.sec-dichvu .nav>li>a span::after {
	content: "\f061";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: transparent;
	position: absolute;
	right: -25px;
	transition: right 0.3s ease, color 0.3s ease;
}

.sec-dichvu .nav>li>a:hover span::after,
.sec-dichvu .nav>li.active>a span::after {
	color: var(--yellow);
	right: -50px;
}

.sec-dichvu .tab-panels::before {
	height: 40%;
	content: "";
	display: block;
	border: 2px solid #fff;
	width: 2px;
	position: absolute;
	transform: translateX(-35px);
}

.sec-dichvu .tab-panels::after {
	height: 40%;
	content: "";
	display: block;
	border: 2px solid #fff;
	width: 2px;
	position: absolute;
	transform: translateX(-35px);
	bottom: 0;
}

.service-deli-title {
	color: #fff;
	position: absolute;
	bottom: 0;
	transform: rotate(90deg) translateX(-40px) translateY(25px);
	width: 100px;
}

.service-pack-img {
	padding-top: 20px;
	margin: auto;
}

.service-pack-content {
	padding-bottom: 30px;
}

.sec-service-loadbar .col-inner,
.sec-service-right .col-inner {
	padding: 0 50px;
}

.intro-bar-icon .fa {
	font-size: 45px;
	padding-bottom: 30px;
	color: #fff;
}

.intro-bar-right .col-inner {
	padding: 0 50px;
}

.intro-bar-title {
	color: #fff;
	position: absolute;
	bottom: 0;
	transform: rotate(90deg) translateX(-40px) translateY(25px);
	width: 100px;
}

.plane-loading-bar-container {
	position: relative;
	height: 300px;
	width: 50px;
	background-color: var(--yellow);
	z-index: 9999;
	margin: auto;
}

.plane-loading-bar {
	height: 100%;
	width: 50px;
	background-color: #8b8b8b;
	transition: height 0.3s ease;
}

.ship-loading-bar-container {
	position: relative;
	height: 300px;
	width: 50px;
	background-color: var(--yellow);
	z-index: 9999;
	margin: auto;
}

.ship-loading-bar {
	height: 100%;
	width: 50px;
	background-color: #8b8b8b;
	transition: height 0.3s ease;
}

.truck-loading-bar-container {
	position: relative;
	height: 300px;
	width: 50px;
	background-color: var(--yellow);
	z-index: 9999;
	margin: auto;
}

.truck-loading-bar {
	height: 100%;
	width: 50px;
	background-color: #8b8b8b;	
	transition: height 0.3s ease;
}

.warehouse-loading-bar-container {
	position: relative;
	height: 300px;
	width: 50px;	
	background-color: var(--yellow);
	z-index: 9999;
	margin: auto;
}

.warehouse-loading-bar {
	height: 100%;
	width: 50px;
	background-color: #8b8b8b;
	transition: height 0.3s ease;
}

.headset-loading-bar-container {
	position: relative;
	height: 300px;
	width: 50px;
	background-color: var(--yellow);
	z-index: 9999;
	margin: auto;
}

.headset-loading-bar {
	height: 100%;
	width: 50px;
	background-color: #8b8b8b;
	transition: height 0.3s ease;
}

.intro-bar .plane-loading-bar,
.intro-bar .ship-loading-bar,
.intro-bar .truck-loading-bar,
.intro-bar .warehouse-loading-bar,
.intro-bar .headset-loading-bar{
	background-color: #3c414c;
}
.section-loiich h2,
.section-service h2{
	font-size: 29px;
}
.section-loiich h3{
	color: var(--black);
	font-size: 20px;
	font-weight: 700;
}
.section-loiich .row .col .box{
	border: 1px solid #dedede;
	padding: unset;
	height: 450px;
	border-radius: 10px;
}
.section-loiich .box p{
	text-align: justify;
}
.section-loiich .box-text{
	padding: 0 15px;
}
.section-loiich .box .box-image img{
	border-radius: 30px;
	padding: 10px;
}

@media screen and (max-width: 425px) {

	/* Section Dichvu Trang chủ */
	.sec-service-loadbar .col-inner,
	.sec-service-right .col-inner {
		padding: 0;
	}

	.sec-dichvu .tab-panels::before {
		display: none;
	}

	.sec-dichvu .tab-panels::after {
		display: none;
	}

	.sec-dichvu .nav-vertical+.tab-panels {
		padding: 0 15px;
	}

	.sec-dichvu ul {
		padding-bottom: 20px;
	}
}


@media screen and (min-width: 550px) and (max-width: 1020px){
    .section-quytrinh .medium-6 {
        max-width: 100%;
        flex-basis: 100%;
    }
}



/* Reponsive trang chủ */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.notice-banner h1{
		font-size: 38px !important;
	}
	.container-upweight h2 br{
		display: none;
	}
	.section2-gioithieu .intro-bar-left{
		max-width: 40%;
		flex-basis: 40%;
	}
	.section2-gioithieu .intro-bar-right{
		max-width: 60%;
		flex-basis: 60%;
	}
	.section-service h2{
		text-align: center;
	}
	.section-loiich .col-last{
		max-width: 100%;
		flex-basis: 100%;
	}
	.section-loiich .col-last h3{
		text-align: center;
	}
	.section-loiich .col-last p{
		text-align: center;
	}
}
@media only screen and (max-width: 767px){
	.container-upweight input{
		width: 100%;
	}
	.sec-service-loadbar .col-inner, 
	.sec-service-right .col-inner{
		padding: unset !important;
	}
	
	.sec-quytrinh-item > .col > .col-inner{
		padding: unset !important;
	}
	
	.sec-quytrinh-img{
		padding: 10px 0;
	}
	
	.sec-quytrinh-content{
		padding: 0 10px;
	}
	.section-service h2{
		text-align: center;
	}
	.section-quytrinh .icon-box{
		padding: 15px;
		height: 250px;
		display: flex;
		align-items: center;
	}
	.section-quytrinh .icon-box p{
		text-align: left;
	}
}

/* Trang giới thiệu */
.section-gt .icon{
	text-transform: capitalize !important;
    transition: all .2s linear;
}
.section-gt .icon:hover{
	transform: rotate(360deg);
}
.section2-gioithieu p{
	text-align: justify;
}
.section2-gioithieu h2,
.section4-gioithieu h2{
	font-size: 29px;
}
.section4-gioithieu h2{
	padding-bottom: 20px;
}
.section3-gioithieu .number{
	font-size: 60px;
	font-weight: 600;
	margin-bottom: unset;
}
.section3-gioithieu .content{
	background-color: var(--blue);
	color: var(--white);
	padding: 10px 0;
}
@media only screen and (max-width: 767px){
	.section2-gioithieu .intro-bar-right .intro-bar{
/* 		margin-left: auto; */
		margin-right: auto;
	}
	.section2-gioithieu .intro-bar-right .col-inner{
		padding: unset;
	}
	.section4-gioithieu h2{
		padding-bottom: unset;
	}
}


/* Tin tức */
.blog-archive .widget a:hover{
	color: var(--blue);
}
.blog-single .entry-title{
	font-size: 36px !important;
}
@media only screen and (max-width: 767px){
	.blog-archive .page-numbers{
		padding-bottom: 30px;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
	.blog-archive .page-numbers{
		padding-bottom: 30px;
	}
}

/* Trang dịch vụ */
.section1-dv .box-text button{
	border-radius: 10px;
}
.section2-dv h2{
	font-size: 29px;
}
.section2-dv .divider{
	display: block;
}
.blog-single .entry-category,
.blog-single .blog-share{
	display: none;
}
.blog-single .widget a:hover{
	color: var(--blue);
}
.blog-single p a,
.blog-single ul li a{
	color: var(--blue);
}
.blog-single #recent-posts-2 li a{
	color: #000;
}


/* Trang giá vận chuyển */
.section-banggia .styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 16px;
    text-align: left;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.section-banggia p{
	text-align: justify;
}
@media only screen and (max-width: 767px) {
	.section-banggia .styled-table{
		overflow-x: auto;
        display: block;
        padding: 0 10px;
	}	
}

.section-banggia .styled-table thead tr {
    background-color: var(--blue);
    color: #ffffff;
    text-align: left;
    font-weight: bold;
}

.section-banggia .styled-table th,
.section-banggia .styled-table td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
}

.section-banggia .section-banggia .styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.section-banggia .styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.section-banggia .styled-table tbody tr:last-of-type {
    border-bottom: 2px solid var(--blue);
}

.section-banggia .styled-table tbody tr:hover {
    background-color: #f1f1f1;
}

.section-banggia .styled-table tbody tr td:first-child {
    font-weight: bold;
}


/* Trang yêu cầu báo giá */
.request h2{
	font-size: 29px;
}

/* Trang liên hệ */
.contact-content p a{
	color: #000;
}
.contact-content{
	padding-top: 70px;
}

.contact-left-top{
	padding-bottom: 20px;
}

.contact-left-top h2{
	font-size: 42px;
}

.contact-left-bottom{
	padding-bottom: 20px;
}

.contact-left-bottom .social-icons .is-outline {
    color: #0000ff;
}


.contact-right textarea, input[type='text'], input[type='email']{
	height: 3.507em !important;
}

.contact-right input[type='submit']{
	height: 2.75em;
	font-size: 18px;
}

.contact-right button.btn-submit-form {
    width: 100%;
}

/* Trang bảng giá */
.section-banggia p a{
	color: var(--blue);
}
.section-banggia ul li a{
	color: #000;
}
@media only screen and (max-width: 767px){
	.section-banggia .img{
		width: 100% !important;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1023px){
	.section-banggia .img{
		width: 100% !important;
	}
}