/*
	Theme Name: Xe lăn bánh
	Theme URI: https://webthanhha.com/
	Description: Cập nhật tin tức ô tô, đánh giá chuyên sâu; tư vấn chọn xe theo ngân sách. So sánh, bảng giá, ưu đãi xe cũ mới 2026 tại Việt Nam.
	Version: 1.0
	Author: Đinh Thủy
	Author URI: https://webthanhha.com/
	Text Domain: webth
*/
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{
	--main: #ca1d1e;
	--secd: #013579;
}
*{
	margin: 0; padding: 0;
	border: 0; outline: 0;
	box-sizing: border-box;
}
img{
	max-width: 100%;
	height: auto;
	overflow: hidden;
	object-fit: cover;
	transition: all 0.3s linear;
}
a, h1, h2, h3, h4, h5, h6{
	text-decoration: none;
	transition: all 0.3s linear;
}
img:hover, a:hover, h1:hover, h2:hover, h3:hover, h4:hover, h5:hover{
	transition: all 0.3s linear;
}
body{
	font-size: 0.9rem;
	font-family: "Roboto", sans-serif;
	font-optical-sizing: auto;
}
.expand{
	width: 100%;
}
/*=============== Header Top ===============*/
.header-top{
	padding: 10px 0;
	background: #f3f3f3;
}
.header-top .row .col:nth-child(2){
	text-align: right;
}
.header-top .row .col:nth-child(2) a:first-child{
	padding-right: 20px;
	border-right: 1px solid #cacaca;
}
.header-top .row .col a{
	color: gray;
	padding-left: 10px;
	display: inline-block;
}
/*=============== Header Main ===============*/
.header-main .search-mobile,
.header-main .btn-menu, .header-main .btn-search{
	display: none;
}
.header-main .row{
	align-items: center;
}
.header-main .logo img{
	width: 235px;
	padding: 10px 0;
	display: inline-block;
}
.header-main form.search-form{
    display: flex;
}
.header-main form.search-form input{
    width: calc(100% - 40px);
    height: 40px;
    padding: 0 10px;
    border-radius: 3px 0 0 3px;
	border: 1px solid var(--main);
}
.header-main form.search-form button{
    width: 40px;
    height: 40px;
    font-size: 18px;
	color: #fff;
    background: var(--main);
    border-radius: 0 3px 3px 0;
}
.header-main .icon-box-hotline{
    display: flex;
    align-items: center;
	flex-direction: row;
    justify-content: flex-end;
}
.header-main .icon-box-hotline .text-telephone{
    margin-left: 15px;
}
.header-main .icon-box-hotline .text-telephone p{
	margin-bottom: 0;
}
.header-main .icon-box-hotline .text-telephone .hotline-ads{
    font-size: 18px;
	font-weight: 700;
	color: var(--main);
}
.header-main .icon-box-hotline .text-telephone .hotline-ads a{
	color: var(--secd);
}
.header-main .icon-box-hotline .text-telephone .hotline-ads a:hover{
	color: #152535;
}
/*=============== Header Bottom ===============*/
.header-bottom{
	position: relative;
	background: var(--main);
}
.header-bottom .navbar{
	margin: 0;
	padding: 0;
	justify-content: flex-start;
}
.header-bottom .navbar li{
	list-style: none;
}
.header-bottom .navbar a{
	color: #fff;
	font-weight: 500;
	padding: 15px 20px;
	display: inline-block;
	text-transform: uppercase;
}
.header-bottom .navbar a:hover,
.header-bottom .current-menu-item a{
	background: #a72129;
}

/*=============== Header Mobile ===============*/
@media (max-width: 991px){
	.header-main .logo img{
		width: 185px;
		padding: 5px;
	}
	.header-top .row .col,
	.header-main .row .col{
		text-align: center;
	}
	.header-top .row .col:last-child,
	.header-main .row .col:not(:first-child){
		display: none;
	}
	.header-main{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		box-shadow: 1px 3px 5px #cacaca;
	}
	.header-main .overlay-search, .header-main .overlay-menu{
		position: fixed;
		top: 0; bottom: 0;
		left: 0; right: 0;
		z-index: 1;
		display: none;
		background: rgba(0,0,0,0.1);
	}
	.header-main .overlay-search.active, .header-main .overlay-menu.active{
		display: block;
	}
	.header-main .btn-menu, .header-main .btn-search{
		color: #666;
		font-size: 22px;
		display: block;
		padding: 20px;
		cursor: pointer;
		position: relative;
		z-index: 2;
	}
	.header-main .search-mobile{
		position: absolute;
		top:100%; 
		left: 10px;
		right: 10px;
		z-index: 2;
		display: block;
		margin: 0 20px;
		border-radius: 3px;
		background: #fff;
		transform: scaleY(0);
		transform-origin: top;
	}
	.header-main .search-mobile.active{
		transform: scaleY(1);
	}
	.header-bottom .navbar{
		flex-wrap: nowrap;
		flex-direction: column;
		position: absolute;
		top: 0;
		left: -250px;
		z-index: 2;
		padding: 0;
		width: 250px;
		opacity: 0;
		transition: 0.2s;
		height: calc(100vh - 100px);
		background: var(--main);
	}
	.header-bottom .navbar.active{
		left: 0;
		opacity: 1;
		transition: 0.2s;
	}
	.header-bottom .navbar li{
		width: 100%;
	}
	.header-bottom .navbar a{
		display: block;
		padding: 12px;
		font-size: 1rem;
        font-weight: 400;
		text-transform: unset;
	}
	.sidebar{
		display: none;
	}
}

/*=============== Main ===============*/
h2.heading{
	color: var(--main);
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid #ececec;
}
h2.heading a{
	color: #686868;
	font-size: 14px;
}
h2.heading a:hover{
	color: var(--secd);
}
/*=============== Tab xe home ===============*/
.tabs-xe-home .tab-xe-list{
	padding-left: 0;
}
.tabs-xe-home .tab-xe-list li{
	width: 135px;
	display: inline-block;
}
.tabs-xe-home .tab-xe-list li a{
	display: block;
	text-align:  center;
	cursor: pointer;
	padding: 10px;
	background: #ececec;
	border-radius: 4px 4px 0 0;
	text-transform: uppercase;
}
.tabs-xe-home .tab-xe-list li.active a{
	color: #fff;
	background: #01b7f2;
}
.tabs-xe-home .tab-xe-content{
	display: none;
}
.tabs-xe-home .tab-xe-content.active{
	display: block;
}









/*=============== Hãng xe Item ===============*/
.hangxe-item{
    border-radius: 3px;
	border: 1px solid #ececec;
}
.hangxe-item:hover{
	transition: all 0.3s linear;
    box-shadow: 1px 1px 3px #ececec;
}
.hangxe-item h4{
	color: #333;
	font-size: 14px;
    border-top: 1px solid #f7f8f9;
}
.hangxe-item:hover h4{
    color: var(--secd);
}
.hangxe-item h4 em{
	font-weight: 400;
	color: var(--main);
}
.hangxe-item p{
	top: 0;
    left: 0;
    right: 0;
	z-index: 2;
    font-size: 9px;
    padding: 5px 0;
    color: #fcfcfc;
	border-radius: 3px 3px 0 0;
    background: rgba(255, 0, 0, 0.5);
}
/*=============== Đánh giá xe Item ===============*/
.danhgia-item{
    background: #fefefe;
    border-radius: 4px;
    border: 1px solid #ececec;
}
.danhgia-item img{
    min-height: 205px;
}
.danhgia-item img:hover{
	opacity: 0.8;
}
.danhgia-item h4, 
.danhgia-item p{
	height: 65px;
    overflow: hidden;
	padding: 0 5px;
    margin-bottom: 10px;
}
.danhgia-item h4{
	color: #333;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 20px;
}
.danhgia-item h4:hover{
    color: var(--secd);
}
.danhgia-item p{
    color: #353535;
	font-size: 14px;
}

/*=============== Showroom Item ===============*/
.showroom-item{
    background: #fcfcfc;
    border-radius: 4px;
    border: 1px solid #ececec;
}
.showroom-item img{
    min-height: 205px;
}
.showroom-item img:hover{
	opacity: 0.8;
}
.showroom-item h4{
	color: #333;
    font-size: .95rem;
    font-weight: 400;
    line-height: 1.4;
	height: 55px;
    overflow: hidden;
	padding: 10px 5px;
}
.showroom-item h4:hover{
    color: var(--secd);
}

/*=============== Tin Tức Item ===============*/
.tintuc-item{
    background: #fefefe;
    border-radius: 4px;
    border: 1px solid #ececec;
}
.tintuc-item img{
    min-height: 205px;
}
.tintuc-item img:hover{
	opacity: 0.8;
}
.tintuc-item h4, 
.tintuc-item p{
	height: 65px;
    overflow: hidden;
	padding: 0 5px;
    margin-bottom: 10px;
}
.tintuc-item h4{
	color: #333;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 20px;
}
.tintuc-item h4:hover{
    color: var(--secd);
}
.tintuc-item p{
    color: #353535;
	font-size: 14px;
}

/*=============== Sidebar ===============*/
.sidebar h3{
	font-size: 1.2rem;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
	background: var(--bs-orange);
}
.menu-hang-xe{
    border-radius: 4px;
	border: 1px solid #ececec;
}
.menu-hang-xe .hang-xe-item{
}
.menu-hang-xe .hang-xe-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}
.menu-hang-xe .hang-xe-title{
    flex: 1;
    color: #333;
	font-size: 0.95rem;
	font-weight: 500;
    display: block;
	padding: 10px;
	text-transform: uppercase;
}
.menu-hang-xe .hang-xe-title:hover{
    color: var(--secd);
	background: #f1f2f3;
}
.menu-hang-xe .hang-xe-toggle{
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 22px;
    user-select: none;
}
.menu-hang-xe .icon-minus{
    display: none;
}
.menu-hang-xe .hang-xe-content{
    display: none;
	background: #fcfcfc;
}
.menu-hang-xe .menu-xe{
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu-hang-xe .menu-xe-item{
	padding: 0 10px;
}
.menu-hang-xe .menu-xe-item:hover{
	background: var(--bs-light);
}
.menu-hang-xe .menu-xe-item a{
    color: var(--secd);
	font-weight: 400;
    display: block;
    padding: 7px 10px;
    border-bottom: 1px solid #ececec;
}
.menu-hang-xe .menu-xe-item a:hover{
    color: var(--bs-blue);
}
.menu-hang-xe .hang-xe-item.active .icon-plus{
    display: none;
}
.menu-hang-xe .hang-xe-item.active .icon-minus{
    display: block;
}
.menu-hang-xe .hang-xe-item.no-car .hang-xe-title{
    color: #555;
}

/*=============== News Item Sidebar ===============*/
.news-item-sidebar{
	display: flex;
	gap: 10px;
	border-bottom: 1px solid #ececec;
}
.news-item-sidebar>a{
	width: 80px;
}
.news-item-sidebar .meta{
    padding: 5px 0;
	width: calc(100% - 90px);
}
.news-item-sidebar .meta h4{
	font-size: 13px;
	font-weight: 400;
	line-height: 1.1;
}
.news-item-sidebar .meta h4 a{
	color: #333;
	font-size; 0.9rem;
}
.news-item-sidebar span.posted-on{
	padding: 0;
	font-size: 12px;
}


/*=============== Footer Top ===============*/
.footer-top{
	background: var(--main);
}
.footer-top img{
	width: 200px;
}
.footer-top .navbar{
	height: 100%;
	padding-left: 0;
    list-style: none;
}
.footer-top .navbar a{
	color: #fff;
	font-weight: 600;
}

/*=============== Footer Main ===============*/
.footer-main{
	background: #333;
}
.footer-main h5{
	color: #fff;
	font-size: 15px;
	margin-top: 2rem;
	margin-left: 1rem;
	margin-bottom: 1.5rem;
}
.footer-main li{
	margin-bottom: 0.5rem;
}
.footer-main li::marker{
	color: #fff;
}
.footer-main p, .footer-main a{
	color: #fff;
	font-size: 13px;
}
.footer-main .bg-dark p:last-child{
	color: var(--main);
}
.footer-main ul li a:hover{
	letter-spacing: 1px;
}

.footer-main .social{
	padding-left: 2rem;;
}
.footer-main .social a{
    width: 30px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    text-align: center;
	display: inline-block;
    margin-right: 1rem;
    border-radius: 50%;
    border: 1px solid #fff;
}
.footer-main .social a:nth-child(1):hover{
    background: green;
}
.footer-main .social a:nth-child(2):hover{
    background: blue;
}
.footer-main .social a:nth-child(3):hover{
    background: red;
}
.footer-bottom strong{
	font-size: 13px;
}
.footer-bottom a{
	color: var(--bs-secondary);
}

/*==================== PAGE TEMPLATE ====================*/

/*=============== Breadcrumb ===============*/
.breadcrumbs{
	padding: 12px 0;
	background: #ececec;;
}

/*=============== Archive Xe ===============*/

/*=============== Taxonomy Xe ===============*/
 .car-search-icon-group{
	z-index: 5;
}
#car-search-spinner,
#car-search-clear{
	display: none;
}
#car-search-clear{
	cursor: pointer;
}
#car-list-container{
	transition: opacity 0.25s ease-in-out;
}
.xe-item{
	overflow: hidden;
	background: #fcfcfc;
    border-radius: 5px;
    border: 1px solid #ececec;
	transition: 0.3s;
}
.xe-item:hover{
	transition: 0.3s;
	box-shadow: 1px 3px 6px rgba(0,0,0,0.1);
}
.xe-item a:first-child{
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
}
.xe-item a:before{
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		to right, 
		rgba(255, 255, 255, 0) 0%, 
		rgba(255, 255, 255, 0.3) 100%
	);
	transform: skewX(-25deg);
	transition: none;
}
.xe-item a:hover:before{
	animation: shine 0.5s ease-in-out;
}
@keyframes shine{
	100%{
		left: 125%;
	}
}
.xe-item img{
	width: 100%;
    background: #fff;
	display: block;
}
.xe-item h4 a{
	color: #333;
	font-size: 1rem;
	height: 40px; 
	overflow: hidden;
}
.xe-item:hover h4 a{
    color: var(--secd);
}
.xe-item .xe-item-price{
	font-size: 14px;
    font-weight: 400;
}
.xe-item .xe-item-price span{
    color: var(--main);
	font-size: 1rem;
    font-weight: 500;
}
.xe-item .xe-item-meta{
	display: flex;
    justify-content: space-between;
	gap: 1px;
	background: #ececec;
    border-top: 1px solid #f7f8f9;
}
.xe-item .xe-item-meta p{
	flex: 1;
	font-size: 12px;
	background: #fff;
	margin-bottom: 0;
	padding: 10px 5px;
}
/*
.xe-item .xe-item-meta p:nth-child(1){
	width: 25%;
}
.xe-item .xe-item-meta p:nth-child(2){
	width: 35%;
}
.xe-item .xe-item-meta p:nth-child(3){
	width: calc(40% - 2px);
} */
.xe-item .xe-item-meta p span{
	display: block;
	color: #151515;
	font-size: 15px;
}

/*=============== Filter Xe ===============*/
.post-type-archive-xe .car-filter-wrapper{
	background: #fdfeff;
    border-bottom: 1px solid #f1f2f3;
	/* box-shadow: 1px 2px 3px #f1f2f3; */
}
.post-type-archive-xe #car-filter-form{
    display: flex;
    gap: 10px;
	align-items: center;
    flex-wrap: wrap;
    background: #fcfcfc;
    border-radius: 8px;
    border: 1px dashed #cecece;
}
.post-type-archive-xe .filter-item-full{
    flex: 1 1 100%;
}
.post-type-archive-xe .filter-item-full input{
    width: 100%;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #cecece;
}
.post-type-archive-xe .filter-item{
    flex: 1;
    min-width: 150px;
}
.post-type-archive-xe .filter-item select{
    width: 100%;
    padding: 8px;
    color: #353535;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #cecece;
}
.post-type-archive-xe .load-more-wrapper{
    text-align: center;
    margin: 30px;
}
.post-type-archive-xe #load-more-btn{
    display: none;
    padding: 10px 25px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
}
.post-type-archive-xe .no-cars-found{
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 0;
    color: #888;
}
/*
.post-type-archive-xe .xe-item-meta p:nth-child(2){
	width: 33%;
}
.post-type-archive-xe .xe-item-meta p:nth-child(3){
    width: calc(42% - 2px);
}
.post-type-archive-xe .xe-item-meta p{
	height: 85px;
    font-size: 13px;
}
.post-type-archive-xe .xe-item-meta p span{
    font-size: 14px;
} */

/*=============== Filter Showroom ===============*/
.filter-showroom-form{
	padding: 20px;
	border-radius: 8px;
	background: #f7f8f9;
	border: 1px solid #e9ecef;
}
.filter-showroom-form label{
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}
/* Custom Select Box */
.custom-select-box{
	position: relative;
}
.filter-input{
	width: 100%;
	font-size: 14px;
	padding: 10px 12px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #cecece;
}
.filter-input:focus{
	border-color: #013579;
}
.custom-dropdown{
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	padding: 0;
	display: none;
	max-height: 220px;
	overflow-y: auto;
	list-style: none;
	background: #fff;
	border: 1px solid #ced4da;
	border-top: none;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.custom-dropdown li{
	font-size: 14px;
	cursor: pointer;
	padding: 8px 20px;
	transition: 0.3s;
	text-transform: uppercase;
}
#province-dropdown.custom-dropdown li{
	text-transform: none;
}
.custom-dropdown li:hover{
	color: #013579;
	background: #f1f2f3;
}
.showroom-item p.ten-tinh{
	color: #fff;
	font-size: 1rem;
	margin: 0;
}
.showroom-item p.ten-tinh a{
	color: #fff;
	font-size: 0.9rem;
    font-style: italic;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--bs-blue);
}
.showroom-item p.ten-tinh a:hover{
	opacity: 0.8;
}

/*=============== Contact Page ===============*/
.lh-content h4{
	color: var(--main)
}
.lh-content h5 span{
	font-size: 0.9rem;
	color: var(--secd);
}
.lh-content input.wpcf7-form-control,
.lh-content textarea.wpcf7-form-control{
	width: 100%;
    display: block;
    padding: 10pX;
    border-radius: 3px;
	border: 1px solid #cecece;
}
.lh-content textarea.wpcf7-form-control{
	height: 135px;
	overflow-y: auto;
}
.lh-content input.wpcf7-form-control.wpcf7-submit{
	color: #fff;
	background: var(--secd);
}

.car-app-container .selected-car-card #ez-toc-container{
	display: none !important;
}

/*=============== Search Result & Pagination ===============*/
.search-results h5{
	color: var(--secd);
}
.search-results h5 span{
	color: var(--main);
}
.pagination{
	justify-content: center;
}
.pagination .page-item .page-numbers{
	margin: 5px;
	color: #fff;
	min-width: 29px;
	text-align: center;
	display: inline-block;
	padding: 8px 15px;
	border-radius: 2px;
    background: var(--secd);
}
.pagination .page-item .page-numbers:hover,
.pagination .page-item .page-numbers.current{
    background: var(--main);
}
.title-page{
	font-size: 2rem;
}
/*=============== Category ===============*/



/*=============== Single Xe ===============*/
.single-xe-banner{
	background: #f7f8f9;
}
.single-xe-banner .title-page{
	font-size: 1.75rem;
}
.single-xe-banner .single-xe-price{
	color: var(--secd);
}
.single-xe-banner .single-xe-price span{
	color: #333;
	font-size: 1rem;
	font-weight: 400;
}
.single-xe-banner .single-xe-meta{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.single-xe-banner .single-xe-meta p{
	width: 33.3%;
	color: var(--secd);
	padding: 5px;
	margin-bottom: 0;
	background: #fff;
	border: 1px dashed #ececec;
}
.single-xe-banner .single-xe-meta p span{
	color: #333;
    font-size: .95rem;
    font-weight: 500;
	display: block;
}
.single-xe-banner .single-xe-desc{
    font-size: .95rem;
}
.single-xe-banner .single-xe-support .btn{
	padding: 6px 5px;
}
.single .post-content{
	font-size: 1rem;
}
.single .post-content.xe-content li{
	margin-bottom: 6px;
}
.single .post-content.xe-content table{
	width: 100%;
	margin: 20px 0;
}
.single .post-content.xe-content thead td,
.single .post-content.xe-content thead th{
	font-weight: 600;
	text-align: center;
	border: 1px solid #cecece;
}
.single .post-content.xe-content table td{
	padding: 8px 12px;
	border: 1px solid #cecece;
}
/*=============== Product Gallery ===============*/

/* Container tổng của Gallery */
.single-xe-gallery{
    padding: 15px 5px;
    border-radius: 8px;
    position: relative;
	background: #fcfcfc;
}
/* Khung hiển thị ảnh to */
.single-xe-gallery .owl-gallery{
	position: relative;
	margin-bottom: 12px;
	border-radius: 4px;
	overflow: hidden;
}
.single-xe-gallery .owl-gallery .slide-item{
	cursor: pointer;
}
/* Icon Zoom cố định vị trí góc trên bên phải */
.single-xe-gallery .gallery-zoom-icon{
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 4;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	transition: transform 0.2s ease, background 0.2s ease;
}
.single-xe-gallery .gallery-zoom-icon:hover{
	transform: scale(1.1);
	background: #fff;
}
.single-xe-gallery .gallery-zoom-icon svg{
	width: 18px;
	height: 18px;
	fill: #333;
}
/* Nút Prev/Next cho ảnh to */
.single-xe-gallery .owl-gallery .owl-nav button{
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	color: #333 !important;
	font-size: 20px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	transform: translateY(-50%);
	box-shadow: 0 2px 5px rgba(0,0,0,0.15);
	background: rgba(255, 255, 255, 0.8) !important;
}
.single-xe-gallery .owl-gallery .owl-nav button:hover{
	background: #ececec !important;
}
.single-xe-gallery .owl-gallery .owl-nav button.owl-prev{ left: -5px; }
.single-xe-gallery .owl-gallery .owl-nav button.owl-next{ right: -5px; }
.single-xe-gallery .owl-gallery .owl-nav{ opacity: 0; }
.single-xe-gallery .owl-gallery.owl-carousel.owl-theme.owl-loaded.owl-drag:hover .owl-nav{opacity: 1;}
/* Hàng Thumbnails tự sinh phía dưới */
.single-xe-gallery .gallery-thumbnails-slider{
	position: relative;
	padding: 0 25px; /* Dành khoảng trống cho nút điều hướng hàng dưới */
}
.single-xe-gallery .gallery-thumbnails-slider .thumb-item{
	padding: 0 4px;
	cursor: pointer;
}
.single-xe-gallery .gallery-thumbnails-slider .thumb-box{
	opacity: 0.5;
	height: 75px;
	display: flex;
    justify-content: center;
    align-items: center;
	overflow: hidden;
	border-radius: 4px;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}
.single-xe-gallery .gallery-thumbnails-slider .owl-item.synced .thumb-box{
	opacity: 1;
	border-color: var(--main);
}
/* Nút điều hướng Trái/Phải cho hàng ảnh nhỏ */
.single-xe-gallery .gallery-thumbnails-slider .owl-nav button{
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;
    color: #333 !important;
    margin: 0 !important;
    font-size: 16px !important;
    border-radius: 40px !important;
    background: rgba(0, 0, 0, 0.05) !important;
}
.single-xe-gallery .gallery-thumbnails-slider .owl-nav button.owl-prev{ left: 0px; }
.single-xe-gallery .gallery-thumbnails-slider .owl-nav button.owl-next{ right: 0px; }

/*=============== Open Modal ===============*/
.single-xe-modal .modal{
	z-index: 10;
	background: rgba(0, 0, 0, 0.5);
}
.single-xe-modal .modal .modal-content{
	margin: 2rem auto;
	padding: 16px 20px;
}
.single-xe-modal .modal h3{
	color: var(--secd);
	font-size: 1.5rem;
}
.single-xe-modal .modal .btn-close{
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 1rem;
	cursor: pointer;
	color: var(--secd);
}
.single-xe-modal .modal .form-group{
	margin-bottom: 1rem;
}
.single-xe-modal .modal label{
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 6px;
}
.single-xe-modal .modal input, .modal select{
	width: 100%;
	color: #666;
	font-size: 14px;
	padding: 8px 10px;
	border-radius: 4px;
	border: 1px solid #ccc;
}
.single-xe-modal .modal input:focus, .modal select:focus{
	box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.15);
}
.single-xe-modal .modal .note-text{
	font-size: 12px;
	font-weight: 500;
	color: #013579;
	margin-top: 12px;
}

/*=============== Hiển thị kết quả Modal ===============*/
.single-xe-modal .modal .summary-box{
	padding: 12px 20px;
	border-radius: 8px;
	background: #f7f8f9;
}
.single-xe-modal .modal .summary-box .summary-cost{
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding: 9px 0;
	border-bottom: 1px dashed #ececec;
}
.single-xe-modal .modal .summary-box .summary-cost.end-cost{
	border-bottom: 0;
}
.single-xe-modal .modal .summary-box .summary-cost span:last-child{
	color: #013579;
	font-weight: 500;
}
.single-xe-modal .modal .summary-box .summary-cost.highlight{
	margin-top: 10px;
	padding-top: 12px;
	border-top: 2px solid #0d6efd;
}
.single-xe-modal .modal .summary-box .summary-cost.highlight span{
	font-size: 15px;
	font-weight: 600;
	color: #ca1d1e;
}

/*=============== Modal So sánh xe ===============*/
/* KHUNG CHÍNH */
.ccp-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.ccp-card{
	padding: 12px;
	border-radius: 6px;
	text-align: center;
	border: 1px solid #e2e8f0;
}
/* CỘT THÔNG TỈNH BAN ĐẦU (HEADER CARD) */
.ccp-card-info{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #f8fafc;
}
.ccp-card-info h3{
	margin: 0 0 5px 0;
	font-size: 18px;
}
.ccp-card-info p{
	margin: 0;
	font-size: 12px;
	color: #64748b;
}
/* DROPDOWN & ẢNH XE */
.ccp-card img{
	width: 100%;
	height: 130px;
	object-fit: cover;
	border-radius: 4px;
}
.ccp-card select{
	margin-bottom: 6px;
}
.ccp-card select:disabled{
	cursor: no-drop;
    background: #f7f8f9;
}
.ccp-card select option:disabled{
	color: #999;
    background: #f1f2f3;
}
/* TIÊU ĐỀ XE & GIÁ XE */
.ccp-title{
	font-weight: bold;
	margin: 8px 0 4px;
	font-size: 14px;
	min-height: 40px;
}
.ccp-title a{
	color: #0f172a;
	text-decoration: none;
}
.ccp-title a:hover{
	color: #2563eb;
	text-decoration: underline;
}
.ccp-price{
	color: #dc2626;
	font-weight: bold;
	font-size: 14px;
}
.ccp-empty-text{
	color: #94a3b8;
	margin: 40px 0;
	font-style: italic;
	font-size: 13px;
}
/* BẢNG SO SÁNH CHIA ĐỀU 4 CỘT (25% MỖI CỘT) */
.modal-sosanh table{
	margin-top: 20px;
	border-collapse: collapse;
	width: 100%;
	table-layout: fixed;
}
.modal-sosanh table th, .modal-sosanh table td{
	border: 1px solid #e2e8f0;
	padding: 10px;
	text-align: center;
	font-size: 13.5px;
	width: 25%;
	word-wrap: break-word;
}
.modal-sosanh table td.lbl{
	color: #334455;
	font-weight: 500;
	text-align: left;
	background: #fff;
}
/* HEADER CÁC TIÊU ĐỀ MỤC SO SÁNH */
.modal-sosanh .ccp-section-header{
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	background: #013579;
	text-transform: uppercase;
}
.modal-sosanh .ccp-section-header td{
	padding: 15px;
}
/* RESPONSIVE: Tablet & Mobile chỉ hiện 2 xe (Ẩn cột 3) */
@media (max-width: 991px){
    .ccp-grid{
		grid-template-columns: repeat(3, 1fr);
	}
    .ccp-col-3{
		display: none !important;
	}
    .modal-sosanh table th, .modal-sosanh table td{
		width: 33.33%;
	}
}

/*=============== Modal Tính giá lăn bánh ===============*/
.modal-lanbanh .modal-content{
	max-width: 600px;
	background: #fff;
	position: relative;
	border-radius: 12px;
	border: 1px solid #ececec;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.modal-lanbanh .calc-header{
	border-bottom: 2px solid #f0f0f0;
}
.modal-lanbanh .calc-header p{
	font-size: 15px;
	color: #666;
}
.modal-lanbanh .calc-header span{
	color: #ca1d1e;
	font-weight: bold;
}
.modal-lanbanh .form-group{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-bottom: 12px;
}
.modal-lanbanh .form-group label{
	width: 200px;
}
/* Toggle Button Cá nhân / Doanh nghiệp */
.modal-lanbanh .btn-toggle-group{
	width: 100%;
	display: flex;
	gap: 10px;
}
.modal-lanbanh .btn-toggle-group input[type="radio"]{
	display: none;
}
.modal-lanbanh .btn-toggle-group label{
	flex: 1;
	color: #555;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	padding: 8px 0;
	border-radius: 6px;
	background: #f5f5f5;
	border: 1px solid #ccc;
	transition: all 0.2s;
}
.modal-lanbanh .btn-toggle-group input[type="radio"]:checked + label{
	color: #fff;
	background: #0d6efd;
	border-color: #0d6efd;
}
.modal-lanbanh .form-group label.checkbox-label{
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
}
.modal-lanbanh label.checkbox-label input{
	width: 18px;
	height: 18px;
	cursor: pointer;
}
.modal-lanbanh #bhvc-lanbanh{
	display: none;
}
.modal-lanbanh .summary-box{
	padding: 10px 20px;
}
.modal-lanbanh .summary-box .summary-cost{
	padding: 6px 0;
}

/*=============== Modal Thông số kỹ thuật ===============*/
.modal-tskt .modal-content{
    max-width: 600px;
    background: #fff;
    position: relative;
    border-radius: 12px;
    border: 1px solid #ececec;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.modal-tskt .car-header-card{
    display: flex;
    gap: 10px;
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #ececec;
}
.modal-tskt .car-featured-image,
.modal-tskt .car-meta-info{
    flex: 1;
}
.modal-tskt .car-featured-image img{
    width: 100%;
    border-radius: 6px;
}
.modal-tskt .car-short-description{
    font-size: 14px;
    color: #555;
}
.modal-tskt .single-car-spec-table{
    background: #fff;
    margin-bottom: 25px;
}
.modal-tskt .single-car-spec-table th{
    color: #fff;
    padding: 10px;
	font-size: 1rem;
    text-align: left;
    background: #013579;
}
.modal-tskt .single-car-spec-table td{
    padding: 10px;
    border: 1px solid #ececec;
}
.modal-tskt .single-car-spec-table td.spec-label{
    color: #444;
    width: 40%;
    padding: 10px;
    font-weight: 500;
    background: #fcfcfc;
    border: 1px solid #ececec;
}
@media (max-width: 768px){
    .modal-tskt .car-header-card{
        flex-direction: column;
    }
    .modal-tskt .car-featured-image{
        max-width: 100%;
    }
}
/*=============== Modal Tính trả góp ===============*/
.modal-tragop .form-box{
    padding: 20px;
    border-radius: 8px;
    background: #f7f8f9;
}
.modal-tragop .form-group:last-child{
	margin-bottom: 0;
}
.modal-tragop .form-group small{
	color: #0066cc;
}

.modal-tragop .row-2{
    margin: 20px 0;
	padding: 15px 0;
	border-radius: 8px;
    background: #f0f5ff;
}
.modal-tragop .row-2 .col span{
	display: block;
	text-align: center;
    margin: 10px 0;
}
.modal-tragop .row-2 .col span:last-child{
	color: #013579;
    font-size: 1rem;
    font-weight: 500;
}
.modal-tragop .row-3 table th,
.modal-tragop .row-3 table td{
	text-align: center;
}

/*=============== Xe liên quan ===============*/
.single-xe .box-sidebar.mt-5{
	margin-top: 0 !important;
}
.box-xe.box-xe-lq{
	background: #fff;
}
.box-xe-lq:hover img, .box-xe-lq:hover h4{
	transform: scale(1);
}
.box-xe.box-xe-lq p span{
	color: var(--secd);
}

/*=============== Single Showroom ===============*/
.single-showroom .title-box{
	display: flex;
	align-items: center;
	gap: 1rem;
}
.single-showroom .title-box img{
	width: 70px;
}

.single-showroom .sidebar h3{
	font-size: 1rem;
}
.sidebar .item-showroom p{
	font-size: 0.9rem;
}
.sidebar .box-xe{
	background: #fff;
}
.sidebar .box-xe:hover img,
.single-showroom .sidebar .box-xe:hover h4{
	transform: scale(1);
}
.single-showroom .border{
	border-radius: 20px;
}
.single-showroom .box-left img{
	max-height: 305px;
	border-radius: 1rem;
}

.single-showroom .box-right .info-box{
	font-size: 1rem;
	background: #f1f2f3;
	border-radius: 1rem;
}
.single-showroom .box-right .info-box .showroom-box p{
	margin-bottom: 10px;
}
.single-showroom .box-right .user-box{
	display: flex;
	gap: 15px;
	align-items: center;
}
.single-showroom .box-right .user-box img{
	width: 65px;
	height: 65px;
	border-radius: 50%;
}
.single-showroom .box-right .user-box .name{
	width: calc(100% - 215px);
}
.single-showroom .box-right .user-box .name p{
	margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
}
.single-showroom .box-right .user-box .name em{
	font-size: 0.9rem;
}

.single-showroom .box-right .user-box .phone{
	margin-bottom: 0;
}
.single-showroom .box-right .user-box .phone a{
	width: 150px;
    color: #fff;
    text-align: center;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 20px;
    background: var(--bs-blue);
}
.single-showroom .box-right .showroom-box li{
	font-size: 0.9rem;
	margin-left: 3rem;
}
.single-showroom .box-right .showroom-box li span{
	font-size: 1rem;
	font-weight: 500;
	display: inline-block;
	margin-left: 10px;
}
.single-showroom .box-right .showroom-box .fa{
	margin-right: 10px;
}
.single-showroom  .xe-item-showroom h4 a{
	font-size: 0.95rem;
	color: var(--secd);
}
.single-showroom  .xe-item-showroom p{
	font-size: 0.9rem;
    color: #0b5ed7;
}

/*=============== Single Post ===============*/
.posted-on{
    display: block;
	padding: 10px;
	color: #898989;
	font-size: 13px;
}
.posted-on span{
    display: inline-block;
	padding: 0 10px;
}


/*=============== Contact Home ===============*/
.main-contact.item{
	width: 55px;
	height: 55px;
	background: #fff;
	border-radius: 100%;
	border: 5px solid #fff;
	backface-visibility: hidden;
	animation: play 2s ease infinite;
}
.main-contact.item img{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 135px;
	border-radius: 100%;
}
@keyframes play{
	0%{
		transform: scale(1);
	}
	15%{
		box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.4);
	}
	25%{
		box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.4), 0 0 0 15px rgba(0, 0, 0, 0.2);
	}
	25%{
		box-shadow: 0 0 0 12px rgba(0, 0, 0, 0.4), 0 0 0 25px rgba(0, 0, 0, 0.2);
	}
}
.item-contact .item, .main-contact.item{
	position: fixed;
	right: 10px;
	bottom: 60px;
	z-index: 5;
	cursor: pointer;
	border-radius: 50%;
	transition: all 120ms ease-in-out;
}
.item-contact .item{
	right: 18px;
	bottom: 68px;
	font-size: 1.5em;
	will-change: bottom;
}
.item-contact .item img{
	width: 40px;
	height: 40px;
}
.item-contact.show .item:nth-child(1){
	bottom: 210px;
}
.item-contact.show .item:nth-child(2){
	bottom: 165px;
}
.item-contact.show .item:nth-child(3){
	bottom: 120px;
}
.item-contact .item:before{
	content: attr(data-tooltip);
	position: absolute;
	top: 50%;
	right: 50px;
	z-index: -1;
	transform: translateY(-50%);
	color: #333;
	font-size: 14px;
	white-space: nowrap;
	display: inline-block;
	padding: 6px 20px;
	opacity: 0;
	visibility: hidden;
	border-radius: 15px;
	background-color: #FFD057;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	transition: opacity 120ms cubic-bezier(0.4, 0, 1, 1);
}
.item-contact.show .item:before{
	opacity: 1;
	visibility: visible;
}

/*=============== To Top ===============*/
.go-top{
	position: fixed;
    right: 15px;
    bottom: 10px;
    font-size: 20px;
    padding: 3px 12px;
    display: none;
    cursor: pointer;
    background: #cecece;
    border-radius: 50%;
}
.go-top:hover{
	transform: scale(1.1);
	transition: all .4s linear;
}

.wp-caption.alignnone{
	width: 100% !important;
}
.wp-caption.alignnone .wp-caption-text{
	text-align: center;
	font-style: italic;
    margin-top: 6px;
}


@media (max-width: 991px){
	.footer-top .navbar{
		display: none;
	}
	.modal-sosanh table th, .modal-sosanh table td:last-child{
		display: none;
	}
	
}

@media (max-width: 767px){
	.danhgia-item img,
	.showroom-item img,
	.tintuc-item img,
	.xe-item img{
		width: 100%;
		height: auto;
	}
	.single-xe-banner .single-xe-meta p{
		width: 50%;
	}
	.single-xe-banner .single-xe-desc{
		font-size: .9rem;
	}
	.single-showroom .title-box,
	.single-showroom .box-right .user-box{
		flex-wrap: wrap;
	}
	.single-showroom .box-right .user-box .name{
		width: calc(100% - 85px);
	}
	.single-showroom .box-right .user-box .phone{
		width: 100%;
		text-align: center;
	}
	.single-showroom .box-right .info-box{
		font-size: 0.9rem;
	}
}
@media (max-width: 450px){
	.single-xe-banner .single-xe-support .btn{
		font-size: 14px;
	}
	.single-xe-modal .modal .modal-content{
		padding: 16px 10px;
	}
	.single .post-content.xe-content table{
		max-width: 100%;
	}
}