html {
scroll-behavior: smooth;
overflow: auto
}
body {
background: #fff;
font-family: 'Inter',' Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
overflow-x: hidden;
font-weight: 500;
}
body:has(#so_sanh_xe_detail){
overflow: unset
}
body.home {
background: #fff
}
a {
color: #2070E8
}
a:hover,
a:focus,
a:active {
text-decoration: none;
}
h3, .h3 {
font-size: 16px;
}
h4,
h5 {
font-size: 16px
}
.hidden-md{
display: none
}
.logo {
display: block;
}
.logo img, .logo-showroom img{
width: auto;
height: 52px;
}
.logo-showroom img{
border-radius: 6px
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
margin: 0;
padding: 0;
line-height: 1.3;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
}
input[type='checkbox'],
input[type='radio'] {
clear: none;
cursor: pointer;
display: inline-block;
line-height: 0;
height: 22px;
margin: -3px 4px 0 0;
outline: 0;
padding: 0 !important;
text-align: center;
vertical-align: middle;
width: 22px;
min-width: 22px;
-webkit-appearance: none;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #707070;
border-radius: 3px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.22);
box-shadow: none
}
input[type='checkbox']:checked:before {
content: '\f00c';
margin: 0 0 0 0;
font-size: 16px;
color: #2070E8;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
}
input[type='radio'] {
border-radius: 50%;
padding: 4px !important
}
input[type='radio']:checked:before {
content: '\f111';
text-indent: -9999px;
border-radius: 50px;
font-size: 12px;
width: 12px;
height: 12px;
margin: 0;
line-height: 12px;
background-color: #2070E8;
}
.header {
padding: 25px 0;
background: #2070E8;
}
.active_header .header-top{
margin-bottom: 0px !important;
}
.home .header{
background: none;
position: absolute;
top: 40px;
left: 0;
right: 0;
}
.active_header{
position: fixed !important;
top: 0px !important;
left: 0px;
width: 100%;
z-index: 1000;
padding: 5px 0px;
background: #2070E8 !important;
}
.nv-info,
.nv-info.success {
border: none !important;
border: none !important;
text-align: center;
background: none !important
}
.nv-info.success {
margin-bottom: 0 !important
}
.mrg-t-10 {
margin-top: 10px
}
.header-bg {
position: relative;
padding-top: 40px;
padding-bottom: 70px;
margin-bottom: 40px
}
.header-bg:after {
content: '';
background: url('../images/bg-header.webp');
background-repeat: no-repeat;
width: 100%;
background-size: 100% 100%;
bottom: 0;
display: inline-block;
position: absolute;
top: 0;
z-index: -1
}
.home .header-bg{
padding-top: 150px;
padding-bottom: 70px
}
.home .header-bg:after {
bottom: 0;
height: auto
}
[class*=" col-"],
[class^=col-] {
padding-left: 10px;
padding-right: 10px;
}
.row {
margin-left: -10px;
margin-right: -10px;
}
.d-flex-center {
display: flex;
align-items: center;
}
.main-menu {
padding: 0;
margin: 0;
text-align: center;
}
.main-menu li {
display: inline-block;
margin-right: 25px;
text-align: left;
position: relative;
padding: 20px 0
}
.main-menu li:last-child {
margin-right: 0;
}
.main-menu li a {
color: #fff;
font-size: 16px;
}
.main-menu > li > a {
text-transform: uppercase;
font-weight: 600;
}
.main-menu .sub-menu{
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: #FFF;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
width: 250px;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);
display: none;
z-index: 123;
}
.main-menu>li:hover .sub-menu{
display: block
}
.main-menu .sub-menu a{
font-size: 16px;
color: #1D1D1D;
display: block;
position: relative;
padding: 10px;
border-radius: 0
}
.main-menu .sub-menu a .fa{
position: absolute;
right: 10px;
top: 10px;
}
.main-menu .sub-menu a:hover{
background: #E7F2FD;
color: #135EAC;
}
.main-menu .sub-menu li{
position: relative;
display: block;
padding: 0;
margin-right: 0;
width: 100%;
float: left;
}
.main-menu .mega .sub-menu{
width: 800px;
}
.main-menu .mega .sub-menu li{
width: CALC(200px - 5px);
}
.main-menu .sub-menu>li:first-child>a,.main-menu .sub-menu-2>li:first-child>a{
border-radius: 6px 6px 0 0
}
.main-menu .sub-menu>li:last-child>a, .main-menu .sub-menu-2>li:last-child>a{
border-radius: 0 0 6px 6px
}
.main-menu .sub-menu-2{
border-radius: 6px;
border: 1px solid rgba(0, 0, 0, 0.05);
background: #FFF;
position: absolute;
top: 0;
left: CALC(100% - 0px);
padding: 0;
margin: 0;
width: 250px;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);
display: none;
z-index: 100;
}
.main-menu .sub-menu li:hover>.sub-menu-2{
display: block
}
.main-menu .sub-menu-2 a{
border-radius: 0
}
.login-css {
background: #fff;
padding: 12px 16px;
border-radius: 4px;
color: #0380E6;
font-size: 16px;
font-weight: 600;
border: none
}
.login-css{
margin-left: 10px
}
.dropdown-menu.signed {
right: 0;
left: auto;
white-space: nowrap;
padding: 20px;
}
.home .header-top {
position: relative;
z-index: 999;
}
.header .header-top {
position: relative;
z-index: 1001;
}
.main-menu .sub-menu,
.main-menu .sub-menu-2 {
z-index: 1001;
}
.box_avata{
height: 190px;
margin-bottom: 40px;
position: relative
}
.header-bg .img-bnn {
width: 670px;
height: auto;
}
.box_duoi_avata{
margin-top: -10px;
}
.pdd-lr-40 {
padding-left: 40px;
padding-right: 40px
}
.mrg-lr--40 {
margin-left: -40px;
margin-right: -40px
}
.suggest-link {
padding: 0;
margin: 0;
margin-top: 30px;
}
.suggest-link li {
display: inline-block;
margin-right: 30px;
}
.suggest-link li:last-child {
margin-right: 0
}
.suggest-link li a {
color: #FFF;
font-size: 16px;
font-weight: 500;
padding-bottom: 8px;
border-bottom: 2px solid #D9D9D9;
}
footer {
background: #111;
padding: 40px 0 50px 0;
color: #fff;
line-height: 24px;
}
footer a {
color: #fff
}
.footer-bottom {
border-top: 1px solid #fff;
font-size: 12px;
padding-top: 30px;
margin-top: 30px;
}
footer .logo {
margin-bottom: 12px;
padding-bottom: 12px;
position: relative
}
footer .logo:after {
content: '';
width: 70px;
height: 3px;
background: #fff;
display: inline-block;
left: 0;
bottom: 0;
}
.block-heading-footer {
color: #FFF;
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 16px
}
.menu-footer {
padding: 0;
margin: 0;
}
.menu-footer li {
margin-bottom: 12px
}
.menu-footer li:last-child {
margin-bottom: 0
}
.info-footer {
padding: 0;
margin: 0
}
.info-footer li {
margin-bottom: 12px;
display: flex
}
.info-footer img {
width: 20px;
height: 20px;
margin-right: 8px
}
.info-footer li a {
display: flex
}
.block-heading {
color: #0F1A2A;
font-size: 24px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 24px
}
.block-box {
margin-bottom: 80px
}
.bnn-owl a {
border-radius: 4px;
background: #fff;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
display: block;
padding: 40px 30px
}
.bnn-owl .img {
position: relative;
padding-top: 35%;
}
.bnn-owl img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
object-fit: contain
}
.owl-stage-outer {
margin: -10px;
padding: 10px;
}
.owl-nav {
position: absolute;
top: 40%;
left: 0;
right: 0
}
.owl-nav.disabled{
display: none
}
.owl-nav img {
width: 28px;
height: 28px
}
.owl-prev.disabled, .owl-next.disabled{
opacity: 0
}
.owl-next,
.owl-prev {
width: 48px;
height: 48px;
display: inline-block;
border-radius: 50%;
line-height: 48px;
text-align: center;
background: #fff;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
position: absolute
}
.owl-next {
right: 0;
}
.owl-prev {
left: 0
}
.bnn-owl .owl-next {
right: -75px;
}
.bnn-owl .owl-prev {
left: -75px;
}
.img-21-9 {
position: relative;
display: block;
padding-top: 39.85%;
overflow: hidden
}
.img-16-9 {
position: relative;
display: block;
padding-top: 60.65%;
overflow: hidden
}
.img-square {
position: relative;
display: block;
padding-top: 100%;
overflow: hidden
}
.img-4-3 {
position: relative;
display: block;
padding-top: 65%;
overflow: hidden
}
.img-21-9 img,
.img-16-9 img,
.img-square img,
.img-4-3 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover
}
.news-hot-large .img-4-3 {
border-radius: 4px;
overflow: hidden
}
.news-hot-large .img-4-3 .title {
color: #FFF;
font-size: 24px;
font-weight: 700;
position: absolute;
left: 20px;
right: 20px;
bottom: 15px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
padding-left: 14px
}
.news-hot-large .img-4-3 h3:before {
content: '';
width: 3px;
top: 6px;
background: #fff;
display: inline-block;
position: absolute;
left: 0;
bottom: 6px;
}
.news-hot-mn {
margin-bottom: 20px
}
.news-hot-mn {
display: block;
position: relative;
border-radius: 4px;
overflow: hidden
}
.news-hot-mn .img{
display: block;
padding-top: 75%;
}
.news-hot-mn .img img {
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
object-fit: cover
}
.news-hot-mn .img .title {
color: #FFF;
font-size: 18px;
font-weight: 700;
position: absolute;
left: 20px;
right: 20px;
bottom: 15px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
padding-left: 11px
}
.news-hot-large .img-4-3 .title:before {
content: '';
width: 3px;
height: 49px;
background: #fff;
display: inline-block;
position: absolute;
left: 0;
bottom: 7px;
}
.news-hot-mn .img .title:before {
content: '';
width: 3px;
top: 4px;
background: #fff;
display: inline-block;
position: absolute;
left: 0;
bottom: 5px;
}
.filter-box {
padding: 20px;
border: 2px solid #fff;
background: #ffffff42;
color: #fff;
}
.filter-box h3 {
font-size: 32px;
margin-bottom: 20px
}
.select-xe {
width: 100%;
background: none;
border-radius: 4px;
border: 2px solid #FFF;
font-size: 18px;
font-weight: 700;
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none
}
.select-xe.active {
color: #2070E8;
background: #fff
}
.select-xe.active svg {
fill: #2070E8;
}
.select-xe svg {
width: 24px;
height: 24px;
margin-right: 8px
}
.filter-box select {
background: none;
padding: 14px 16px;
width: 100%;
border: none
}
.group-select {
margin-top: 20px;
border-radius: 4px;
border: 2px solid #FFF;
}
.group-select select {
border-bottom: 2px solid #fff
}
.group-select select:last-child {
border-bottom: none
}
.box-shadow {
border-radius: 4px;
background: #FFF;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
}
.pdd-30 {
padding: 30px
}
.heading-simple {
color: #0F1A2A;
font-size: 22px;
font-weight: 600;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
align-items: center
}
.heading-simple h2,
.heading-simple h3 {
margin-bottom: 0;
font-size: 24px;
}
.heading-simple h2>a {
color: #0F1A2A;
font-size: 24px;
font-weight: 700;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
align-items: center
}
.heading-simple span {
color: #2070E8;
margin-left: 5px
}
.heading-simple:has(span){
justify-content: normal
}
.heading-simple .link-s {
color: #2070E8;
font-size: 16px;
font-weight: 500;
}
.heading-simple .link-s .fa {
margin-left: 5px
}
.nav-simple {
display: flex;
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 20px;
white-space: nowrap;
overflow-x: auto;
padding-bottom: 4px;
}
.nav-simple>li {
float: none;
}
.nav-simple>li>a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 35px;
color: #111827;
background: #f5f7fb;
border: 1px solid transparent;
border-radius: 999px;
margin-right: 0;
padding: 7px 18px;
line-height: 1.2;
}
.nav-simple>li.active>a,
.nav-simple>li.active>a:hover,
.nav-simple>li.active>a:focus,
.nav-simple>li>a:hover,
.nav-simple>li>a:focus {
color: #111827;
background: #f5f7fb;
border: 1px solid #111827;
text-decoration: none;
}
.product-grid {
border-radius: 4px;
overflow: hidden;
background: #FFF;
margin-bottom: 20px;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
}
.product-grid h3 {
color: #333;
font-size: 16px;
font-weight: 700;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
margin-bottom: 12px
}
.product-grid a{
color: #333
}
.product-grid .info {
padding: 20px
}
.product-grid .btn-outline {
margin-top: 20px
}
.product-grid .status {
color: #828282;
font-size: 14px;
margin-top: 20px
}
.mrg-t-30 {
margin-top: 30px
}
.link-b {
color: #2070E8;
font-size: 16px;
margin-top: 0px;
margin-bottom: 20px;
display: inline-block;
font-weight: 400;
}
.link-b .fa {
margin-left: 5px
}
.btn-outline,
.btn-outline-light {
padding: 0 16px;
line-height: 45px;
height: 45px;
color: #fff !important;
border: 1px solid #2070E8;
font-weight: 600;
border-radius: 4px;
transition: .25s;
text-align: center;
cursor: pointer;
white-space: nowrap;
justify-content: center;
align-items: center;
display: inline-flex;
background: #2070E8;
}
.btn-outline-light {
border: 1px solid #E3E3E3;
font-weight: 400;
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.btn-outline-light:hover {
border: 1px solid #2070E8;
}
.btn-outline svg {
fill: #2070E8;
margin-right: 8px
}
.btn-outline img{
width: 20px;
height: 20px;
margin-right: 8px
}
.btn-outline:hover svg, .btn-outline:focus svg, .btn-outline:active:focus svg, .btn-outline:active:hover svg {
fill: #fff;
}
.btn-plus:before {
content: '';
width: 24px;
height: 24px;
margin-right: 5px;
background: url(../images/plus.svg) no-repeat;
background-size: 100% 100%;
display: inline-block
}
.btn-outline:hover {
color: #fff !important;
transition: .25s;
background: #2070E8;
}
.btn-outline-white {
padding: 12px 16px;
color: #fff !important;
border: 1px solid #fff;
font-size: 16px;
font-weight: 600;
border-radius: 4px;
transition: .25s;
text-align: center;
background: none
}
.btn-outline-white:hover {
color: #fff !important;
transition: .25s;
background: #103874;
}
.btn-primary {
padding: 0 16px;
height: 45px;
line-height: 45px;
color: #fff;
border: 1px solid #2070E8;
font-weight: 600;
border-radius: 4px;
transition: .25s;
text-align: center;
justify-content: center;
display: inline-flex;
align-items: center;
background: #2070E8;
}
.btn-primary svg {
fill: #fff;
margin-right: 10px
}
.btn-primary:hover, .btn-primary:focus,.btn-primary:active:focus,.btn-primary:active:hover {
color: #2070E8;
transition: .25s;
background: #fff;
}
.btn-primary:hover svg, .btn-primary:focus svg,.btn-primary:active:focus svg,.btn-primary:active:hover svg{
fill: #2070E8
}
.btn-block {
display: block
}
.brand-grid {
display: block;
color: #333;
margin-bottom: 10px;
border-radius: 4px;
padding: 10px 0px;
text-align: center;
background: #fff;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}
.brand-grid .img, .brand-grid-2 .img {
width: 100%;
height: 65px;
display: inline-block;
margin-bottom: 8px;
position: relative
}
.brand-grid .img img, .brand-grid-2 .img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain
}
.brand-grid h3, .brand-grid-2 h3 {
font-size: 16px;
font-weight: 500;
}
.brand-grid-2{
text-align: center
}
.product-owl .owl-next {
right: -35px;
transition: .25s;
opacity: 1
}
.product-owl .owl-prev {
left: -35px;
transition: .25s;
opacity: 1
}
.product-owl .owl-prev.disabled,
.product-owl .owl-next.disabled {
opacity: 0
}
.brand-car-text {
color: #2C3545;
font-size: 16px;
font-weight: 400;
margin-bottom: 16px;
display: inline-block
}
.compare-product-box {
border-radius: 4px;
overflow: hidden;
background: #FFF;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
}
.compare-product {
display: flex;
gap: 0px;
}
.compare-product .vs {
position: absolute;
top: 25%;
width: 40px;
height: 40px;
display: inline-block;
border-radius: 50%;
font-size: 14px;
border: 2px solid #fff;
color: #fff;
background: #333;
text-align: center;
line-height: 40px;
text-transform: uppercase;
z-index: 9;
}
.compare-product .sp1 .vs {
left: auto;
right: -20px
}
.compare-product .sp3 .vs {
left: -20px;
right: auto
}
.compare-product .sp1,
.compare-product .sp2,
.compare-product .sp3 {
width: 100%;
position: relative;
}
.compare-product .info {
margin-top: 13px
}
.compare-product .sp1 .info {
padding-left: 20px
}
.compare-product .sp1 .info {
padding-right: 20px
}
.compare-product .img-4-3 {
height: 190px;
padding-top: 0;
}
.compare-product .sp2 .img-4-3,
.compare-product .sp3 .img-4-3 {
border-left: 1px solid #ddd
}
.pdd-lr-20 {
padding: 20px
}
.compare-product .info div {
margin-bottom: 10px
}
.compare-product .info div:last-child {
margin-bottom: 0
}
.compare-product .info h3 {
font-weight: 400;
font-size: 16px
}
.compare-product .info .code {
font-size: 18px;
font-weight: 700
}
.show-room {
border-radius: 4px;
display: flex;
align-items: center;
overflow: hidden;
background: #FFF;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
}
.show-room .info {
padding: 20px;
flex: 1
}
.show-room h3 {
color: #333;
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.show-room .address {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 44px
}
.show-room .info-t {
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px dashed #ddd
}
.show-room .info-b {
display: flex;
gap: 10px;
justify-content: space-between
}
.show-room .info-b .btn {
width: 50%;
}
.show-room .img {
position: relative;
width: 213px;
height: 213px;
flex-basis: 213px;
}
.show-room .img img {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
object-fit: cover
}
.product-detail h1 {
color: #FFF;
font-size:26px;
font-weight: 700;
margin-bottom: 10px
}
.detail-mn {
display: flex;
align-items: center;
justify-content: space-between;
color: #fff;
border-bottom: 1px solid rgba(250, 250, 250, 0.40);
margin-bottom: 24px
}
.detail-mn .price {
margin-bottom: 7px
}
.detail-mn .mn ul {
padding: 0;
margin: 0;
margin-bottom: 10px
}
.detail-mn .mn a {
color: #fff;
padding-bottom: 5px
}
.detail-mn .mn li {
display: inline-block;
margin-right: 42px;
}
.detail-mn .mn li a.active {
border-bottom: 3px solid #fff
}
.detail-mn .mn li:last-child {
margin-right: 0
}
.box-simple {
border-radius: 6px;
background: #FFF;
position: relative;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);
}
.box-simple hr {
margin-top: 20px;
margin-bottom: 20px
}
.box-simple h3 {
color: #333;
font-size: 16px;
font-weight: 500;
margin-bottom: 0px
}
.box-simple h3 .unit-price {
color: #828282;
font-size: 14px;
font-weight: 400;
}
.box-simple h3 span {
color: #2070E8
}
.select-label {
border-radius: 4px;
padding: 0px 10px;
border: 1px solid rgba(0, 0, 0, 0.11);
height: 61px;
}
.select-label label {
color: #828282;
font-size: 13px;
font-weight: 400;
margin-bottom: 0px;
margin-top: 5px;
}
.select-label .selectric {
border: none;
color: #333;
font-size: 16px;
font-weight: 400;
margin-left: -10px;
margin-right: -10px;
background: none
}
.select-label .selectric .label {
border: none;
color: #333;
font-size: 15px;
font-weight: 400;
background: none;
text-align: left;
padding: 0 10px;
margin: 0;
}
.product-detail .select-label .selectric {
margin-left: -10px;
margin-right: -10px;
}
.product-detail .selectric-items{
margin-left: -10px;
margin-right: -10px
}
.mrg-b-10 {
margin-bottom: 10px
}
.mrg-b-12 {
margin-bottom: 12px
}
.mrg-t-15{
margin-top: 15px
}
.mrg-t-20{
margin-top: 20px
}
.flex-balance {
justify-content: space-between;
align-items: center;
}
.flex-balance h3{
margin-bottom: 0
}
.left-right {
padding: 0;
margin: 0
}
.left-right li {
display: flex;
margin-bottom: 16px;
justify-content: space-between
}
.box-calculator .title {
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(0, 0, 0, 0.11);
padding: 0;
}
.box-calculator .title li {
color: #828282;
color: #fff;
font-weight: 500;
text-align: center;
font-size: 16px;
width: 50%;
}
.box-calculator .title li a {
color: #828282;
padding: 12px 20px;
display: block;
}
.box-calculator .title li.active {
background: #1F4F97;
}
.box-calculator .title li.active a {
color: #fff
}
.form-control {
padding: 12px 16px;
font-size: 16px;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.11);
}
.form-control-2 {
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.11);
background: #fff;
padding: 15px;
position: relative
}
.form-control-2 input {
text-align: right;
border: none;
width: 100%;
padding-right: 45px;
}
.form-control-2 span {
right: 15px;
top: 17px;
position: absolute;
}
.showroom-list {
padding: 0;
margin: 0;
margin-right: -18px;
padding-right: 20px;
overflow-y: auto
}
.pagination{
text-align: center;
}
.pagination li{
padding-bottom: 0px !important;
}
.showroom-list li {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.showroom-list li:last-child{
border-bottom: none
}
.showroom-list .contact {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px
}
.showroom-list .contact img {
width: 24px;
height: 24px;
margin-right: 5px
}
.showroom-list .contact a {
display: inline-block;
font-weight: 700;
}
.showroom-list h3 {
color: #333;
font-size: 18px;
font-weight: 600;
margin-bottom: 8px
}
.mrg-b-15 {
margin-bottom: 15px !important
}
.mrg-b-20 {
margin-bottom: 20px !important
}
.mrg-b-30 {
margin-bottom: 30px !important
}
.mrg-b-40 {
margin-bottom: 40px !important
}
.w-100 {
width: 100%
}
::-webkit-scrollbar {
width: 5px;
height: 5px
}
::-webkit-scrollbar-track {
background: #E0E0E0;
}
::-webkit-scrollbar-thumb {
background: #2070E8;
border-radius: 5px
}
::-webkit-scrollbar-thumb:hover {
background: #2070E8;
border-radius: 5px
}
.slider-product {
margin-bottom: 20px
}
.main-image-product {
border-radius: 6px;
overflow: hidden;
margin-bottom: 16px
}
.image-gallery .img-4-3 {
border-radius: 6px;
cursor: pointer
}
.image-gallery .last-gallery {
position: relative;
}
.image-gallery .last-gallery:after {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
display: inline-block;
background: rgba(0, 0, 0, 0.40);
position: absolute
}
.image-gallery .last-gallery .num {
color: #FFF;
font-size: 24px;
position: absolute;
z-index: 3;
top: 50%;
text-align: center;
left: 50%;
transform: translate(-50%, -50%)
}
.table-banggia {
border-radius: 4px;
background: #F2F4F8;
white-space: nowrap;
margin-bottom: 0
}
.table-banggia thead {
font-weight: 600;
}
.table-banggia td {
border: 1px solid rgba(0, 0, 0, 0.04);
padding: 15px !important
}
.table-responsive::-webkit-scrollbar-track {
background: #fff;
}
.table-responsive::-webkit-scrollbar-thumb {
background: #BDBDBD;
border-radius: 5px
}
.table-responsive::-webkit-scrollbar {
width: 3px;
height: 5px
}
.contact-mn {
border-radius: 4px;
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(0, 0, 0, 0.11);
padding: 15px;
}
.br-b-2n {
margin-bottom: 20px
}
.br-b-3n {
margin-bottom: 20px
}
.br-b-3n:nth-last-child(2),
.br-b-3n:nth-last-child(3),
.br-b-3n:last-child {
margin-bottom: 0
}
.contact-mn .info h3 {
text-transform: uppercase;
margin-bottom: 5px;
font-size: 16px;
font-weight: 700;
line-height: 27px;
}
.contact-mn .info li {
font-size: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
color: #2070E8;
margin-bottom: 5px;
}
.contact-mn .info li:last-child {
margin-bottom: 0
}
.contact-mn .info li:before {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: #BDBDBD;
display: inline-block;
margin-right: 5px;
top: -3px;
position: relative;
}
.contact-mn .info ul {
padding: 0;
margin: 0;
}
.contact-mn .info {
width: 60%
}
.contact-mn .ct {
flex: 1
}
.contact-mn .ct a{
width: 100%
}
.description-detail h3 {
font-size: 18px;
font-weight: 700;
}
.description-detail img {
width: 100%;
height: auto;
border-radius: 6px;
margin: 10px 0
}
.xem-them {
padding: 8px 24px;
border-radius: 999px;
background: #2070E8;
color: #fff;
border: none;
display: inline-flex;
align-items: center
}
.info-hang-xe h2{
line-height: 3;
}
.xem-them svg {
fill: #fff;
margin-right: 4px
}
.xem-them.active,
.xem-them:hover {
background: #2070E8;
color: #fff;
}
.xem-them.active svg,
.xem-them:hover svg {
fill: #fff;
}
.xem-them.active svg {
rotate: 180deg
}
.product-grid-2 {
border-radius: 4px;
overflow: hidden;
background: #FFF;
box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.15);
margin-bottom: 20px
}
.product-grid-2 h3 {
font-size: 16px;
font-weight: 500;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 42px
}
.product-grid-2 .price {
color: #2070E8;
font-size: 16px;
font-weight: 700;
margin-top: 12px;
margin-bottom: 12px;
}
.product-grid-2 .info {
color: #828282;
padding: 12px;
}
.product-grid-2 .info img {
width: 20px;
height: 20px;
margin-right: 8px
}
.product-grid-2 .info .location {
display: flex;
align-items: center;
height: 45px;
margin-bottom: 12px;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.product-grid-2 .info .info-b ul {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #EDEDED;
flex-wrap: wrap;
}
.product-grid-2 .info .info-b ul>li {
width: 50%;
display: flex;
align-items: center;
font-size: 14px;
margin-bottom: 12px
}
.product-grid-2 .info .info-b ul li:last-child,
.product-grid-2 .info .info-b ul li:nth-child(4n-1) {
margin-bottom: 0
}
.d-flex-two {
display: flex;
gap: 10px
}
.d-flex-two>a, .d-flex-two>button, .d-flex-two>div, .d-flex-two>* {
width: 50%
}
.time-product {
padding-left: 0;
padding-top: 15px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
display: flex;
gap: 5px;
flex-wrap: wrap;
justify-content: space-between
}
.time-product li {
padding: 8px 24px;
border-radius: 99px;
cursor: pointer;
background: #fff;
border: 1px solid #E0E0E0;
transition: .25s
}
.time-product li.active {
color: #2070E8;
transition: .25s;
border-color: #2070E8
}
.time-product li:hover {
color: #fff;
transition: .25s;
border-color: #2070E8;
background: #2070E8
}
.thong-so {
display: flex;
align-items: center;
gap: 20px;
padding-bottom: 24px;
margin-bottom: 24px;
border-bottom: 1px solid #E1DDDD;
}
.thong-so .type,
.thong-so .trim {
display: flex;
gap: 5px;
align-items: center
}
.thong-so .selectric {
border: none
}
.thong-so .selectric .label {
margin: 0;
padding: 0;
margin-right: 20px;
height: auto;
font-weight: 400;
color: #2070E8;
line-height: normal;
}
.thong-so .selectric .button:after {
content: '\f107';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
color: #2070E8;
font-size: 14px
}
.thong-so .selectric .button {
width: 25px !important;
height: auto;
top: 4px;
right: 5px;
}
.selectric .button:after {
content: '\f107';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border: none;
color: #333;
font-size: 15px
}
.selectric .button {
width: 25px !important;
height: auto;
top: 8px;
right: 0px;
}
.thong-so-chi-tiet {
margin-bottom: 0;
padding-left: 20px;
padding-right: -20px
}
.thong-so-chi-tiet li {
margin-bottom: 24px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.thong-so-chi-tiet li:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.thong-so-chi-tiet li span {
float: right;
font-weight: 700
}
.mrg-lr--20 {
margin-left: -20px;
margin-right: -20px
}
.thong-so-chi-tiet:last-child:before {
content: '';
width: 2px;
height: 100%;
background: #E1DDDD;
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 5px
}
.total-rating {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
align-items: center
}
.total-rating svg {
width: 19px;
height: 19px;
}
.total-rating span {
color: #EA9B01
}
.total-rating .star {
font-size: 0
}
.alert-info {
background-color: #F4F9FF;
border-color: #F4F9FF;
color: #333;
}
.danh-gia-ct .alert {
margin-bottom: 0
}
.uu-diem ul,
.nhuoc-diem ul {
padding: 0;
margin: 0;
}
.uu-diem li,
.nhuoc-diem li {
padding-left: 30px;
position: relative;
margin-bottom: 16px;
}
.uu-diem li:last-child,
.nhuoc-diem li:last-child {
margin-bottom: 0
}
.uu-diem li:before,
.nhuoc-diem li:before {
content: '';
width: 20px;
height: 20px;
background-size: contain;
display: inline-block;
position: absolute;
top: 0;
left: 0
}
.uu-diem li:before {
background: url(../images/check_blue.svg) no-repeat;
}
.nhuoc-diem li:before {
background: url(../images/close_red.svg) no-repeat;
}
.selectric .label {
font-weight: 400;
margin-right: 30px;
padding: 0
}
.thumb-video {
border-radius: 6px;
cursor: pointer;
overflow: hidden;
position: relative
}
.thumb-video .play {
width: 60px;
height: 60px;
display: inline-block;
background: url(../images/play.svg) no-repeat;
background-size: contain;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
}
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2
}
.quest-answer h3 {
color: #333;
font-size: 16px;
font-weight: 400;
margin-bottom: 0
}
.quest-answer h3 a {
color: #333
}
.quest-answer a:before {
rotate: 0deg;
content: '\f105';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition: .25s;
font-size: 18px;
margin-right: 5px;
color: #2070E8;
rotate: 90deg;
}
.quest-answer a.collapsed:before {
rotate: 0deg;
}
.quest-answer .panel {
margin-top: 0 !important;
border-radius: 0 !important;
padding: 15px 0;
border-bottom: none;
border-top: 1px solid rgba(0, 0, 0, 0.07);
box-shadow: none
}
.quest-answer .answer {
margin-top: 10px;
padding-left: 15px
}
.quest-answer .panel-group {
margin-bottom: 0
}
.product-grid-3 {
margin-bottom: 20px;
border-radius: 4px;
background: #FFF;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
}
.product-grid-3 h3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
font-size: 16px;
}
.product-grid-3 h3 a {
color: #333
}
.product-grid-3 .info {
padding: 20px
}
.news-grid {
border-radius: 4px;
background: #FFF;
overflow: hidden;
margin-bottom: 20px;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
}
.news-grid h3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 16px;
height: 40px
}
.news-grid h3 a {
color: #333
}
.news-grid .info {
padding: 20px
}
.news-grid .info .des {
margin-top: 8px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#mua_ban_xe.box-simple,
#tin_tuc_xe.block-box {
background: #fff;
border: 1px solid #e4e9f2;
border-radius: 8px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
margin-top: 24px;
overflow: hidden;
padding: 18px;
}
#mua_ban_xe .heading-simple,
#tin_tuc_xe .heading-simple {
align-items: center;
border-bottom: 1px solid #edf1f6;
display: flex !important;
font-size: 24px;
font-weight: 700;
justify-content: space-between;
line-height: 1.25;
margin: 0 0 16px;
padding-bottom: 12px;
}
#mua_ban_xe .xem_them_hang_xe {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 400;
margin-left: auto;
}
#mua_ban_xe .product-owl-mua-ban-xe {
padding-bottom: 6px;
}
#mua_ban_xe .product-owl-mua-ban-xe .owl-stage {
display: flex;
}
#mua_ban_xe .product-owl-mua-ban-xe .owl-item {
display: flex;
}
.product-detail .car-item img {
width: 130px;
height: 92px;
}
#mua_ban_xe .product-grid-2 {
border: 1px solid #e5eaf2;
border-radius: 8px;
box-shadow: none;
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
}
#mua_ban_xe .product-grid-2 .img-4-3 {
background: #f3f6fa;
padding-top: 68%;
}
#mua_ban_xe .product-grid-2 .info {
display: flex;
flex: 1;
flex-direction: column;
padding: 10px;
}
#mua_ban_xe .product-grid-2 h3 {
color: #095df2;
font-size: 15px;
font-weight: 700;
height: auto;
line-height: 1.35;
margin: 0 0 8px;
min-height: 40px;
}
#mua_ban_xe .product-grid-2 .tt {
color: #1f2937;
display: -webkit-box;
font-size: 13px;
line-height: 1.45;
min-height: 56px;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
#mua_ban_xe .product-grid-2 .price {
color: #e60000;
font-size: 18px;
margin: 10px 0;
}
#mua_ban_xe .product-grid-2 .info .location {
color: #4b5563;
font-size: 13px;
height: 38px;
line-height: 1.35;
margin-bottom: 10px;
}
#mua_ban_xe .product-grid-2 .info .info-b ul {
gap: 6px;
margin-bottom: 12px;
padding-bottom: 10px;
}
#mua_ban_xe .product-grid-2 .info .info-b ul>li {
color: #4b5563;
font-size: 13px;
margin-bottom: 0;
width: calc(50% - 3px);
}
#mua_ban_xe .d-flex-two {
margin-top: auto;
}
#mua_ban_xe .d-flex-two .btn,
#mua_ban_xe .d-flex-two .btn-outline {
align-items: center;
display: inline-flex;
height: 36px;
justify-content: center;
line-height: 1.2;
padding: 0 10px;
}
#tin_tuc_xe #tin_lienquan {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-left: 0;
margin-right: 0;
}
#tin_tuc_xe #tin_lienquan::before,
#tin_tuc_xe #tin_lienquan::after {
display: none;
}
#tin_tuc_xe #tin_lienquan>[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
width: auto;
}
#tin_tuc_xe .news-grid {
border: 1px solid #e5eaf2;
border-radius: 8px;
box-shadow: none;
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
}
#tin_tuc_xe .news-grid .img-16-9 {
background: #f3f6fa;
padding-top: 56.25%;
}
#tin_tuc_xe .news-grid .info {
padding: 12px;
}
#tin_tuc_xe .news-grid h3 {
font-size: 15px;
font-weight: 700;
height: auto;
line-height: 1.35;
margin: 0;
min-height: 40px;
}
#tin_tuc_xe .news-grid .info .des {
color: #4b5563;
font-size: 13px;
line-height: 1.45;
margin-top: 8px;
}
#tin_tuc_xe .text-center {
margin-top: 18px;
}
@media (max-width: 767px) {
#mua_ban_xe.box-simple,
#tin_tuc_xe.block-box {
padding: 14px;
}
#mua_ban_xe .heading-simple,
#tin_tuc_xe .heading-simple {
align-items: flex-start;
flex-direction: column;
font-size: 21px;
gap: 6px;
}
#mua_ban_xe .xem_them_hang_xe {
margin-left: 0;
}
#tin_tuc_xe #tin_lienquan {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) and (max-width: 991px) {
#tin_tuc_xe #tin_lienquan {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.anchor-bar {
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
z-index: -1;
}
.anchor-bar.active {
z-index: 1001;
}
.anchor-bar .d-flex-center {
min-height: 42px;
}
.anchor-bar .detail-mn {
flex: 1;
justify-content: flex-end;
overflow: hidden;
}
.anchor-bar .detail-mn .mn-bar {
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.anchor-bar .detail-mn .mn-bar ul {
align-items: center;
display: flex;
gap: 18px;
margin: 0;
}
.anchor-bar .detail-mn .mn-bar li {
margin-right: 0;
}
.anchor-bar .detail-mn .mn-bar a {
color: #111827;
display: inline-flex;
font-size: 15px;
font-weight: 500;
padding: 7px 0 8px;
}
.anchor-bar .detail-mn .mn-bar li a.active {
border-color: #e60000;
color: #0b5ff0;
}
#mua_ban_xe.box-simple {
background: #f5f6f8 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
left: 50%;
margin: 28px 0 28px -50vw !important;
overflow: visible !important;
padding: 36px max(24px, calc((100vw - 1170px) / 2)) 62px !important;
position: relative;
width: 100vw;
}
#mua_ban_xe .heading-simple {
border-bottom: 0 !important;
color: #002c6c;
display: block !important;
font-family: Georgia, "Times New Roman", serif;
font-size: 26px !important;
font-weight: 700;
line-height: 1.25;
margin: 0 0 26px !important;
padding-bottom: 0 !important;
}
#mua_ban_xe .xem_them_hang_xe {
bottom: 24px;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin: 0;
position: absolute;
right: max(24px, calc((100vw - 1170px) / 2));
text-align: right;
}
#mua_ban_xe .xem_them_hang_xe span {
display: none;
}
#mua_ban_xe .xem_them_hang_xe a {
color: #1268ff;
}
#mua_ban_xe .xem_them_hang_xe a:after {
content: " \2192";
}
#mua_ban_xe .product-owl-mua-ban-xe {
padding-bottom: 0 !important;
}
@media (min-width: 1200px) {
#mua_ban_xe .product-owl-mua-ban-xe {
	/* Extend the listing grid to the outer product-detail column edges. */
	margin-left: -25px;
	margin-right: -25px;
}
}
#mua_ban_xe .product-owl-mua-ban-xe .owl-stage {
display: flex;
}
#mua_ban_xe .product-owl-mua-ban-xe .owl-item {
display: flex;
}
#mua_ban_xe .product-grid-2 {
background: #fff;
border: 1px solid #dfe5ee !important;
border-radius: 5px !important;
box-shadow: 0 2px 7px rgba(15, 23, 42, 0.15) !important;
display: flex;
flex-direction: column;
height: 100%;
margin: 0 !important;
overflow: hidden;
}
#mua_ban_xe .product-grid-2 .img-4-3 {
background: #edf1f5;
padding-top: 75% !important;
}
#mua_ban_xe .product-grid-2 .info {
display: flex;
flex: 1;
flex-direction: column;
padding: 16px 16px 15px !important;
}
#mua_ban_xe .product-grid-2 h3 {
color: #164ecf;
font-size: 16px !important;
font-weight: 500;
line-height: 1.42;
margin: 0 0 10px !important;
min-height: 46px;
}
#mua_ban_xe .product-grid-2 .price {
color: #e60000;
font-size: 20px !important;
font-weight: 700;
line-height: 1.2;
margin: 0 0 12px !important;
order: 2;
}
#mua_ban_xe .product-grid-2 .tt {
color: #24364d;
display: -webkit-box;
font-size: 14px !important;
line-height: 1.55;
margin-bottom: 12px;
min-height: 65px;
order: 3;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
#mua_ban_xe .product-grid-2 .tt {
display: block;
min-height: 0;
overflow: visible;
margin-bottom: 12px;
-webkit-line-clamp: none;
}
#mua_ban_xe .product-grid-2 .tt .tt-meta {
display: -webkit-box;
color: #24364d;
font-size: 14px;
line-height: 1.5;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
min-height: 42px;
}
#mua_ban_xe .product-grid-2 .tt .tt-desc {
display: -webkit-box;
margin-top: 4px;
color: #51607a;
font-size: 13px;
line-height: 1.5;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
min-height: 78px;
}
#mua_ban_xe .product-grid-2 .info-b {
order: 4;
}
#mua_ban_xe .product-grid-2 .info .location {
color: #008577;
display: block;
font-size: 14px !important;
font-weight: 500;
height: auto !important;
line-height: 1.35;
margin-bottom: 12px !important;
min-height: 22px;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
}
#mua_ban_xe .product-grid-2 .info .location:before {
color: #008577;
content: "\f041";
font-family: FontAwesome;
margin-right: 5px;
}
#mua_ban_xe .product-grid-2 .info .info-b ul {
border-top: 1px solid #edf1f6;
border-bottom: 0 !important;
display: flex;
flex-wrap: nowrap;
gap: 10px;
justify-content: flex-start;
margin: 0 0 16px !important;
overflow: hidden;
padding: 10px 0 0 !important;
white-space: nowrap;
}
#mua_ban_xe .product-grid-2 .info .info-b ul>li {
color: #0f172a;
display: inline-flex;
flex: 0 0 auto;
font-size: 14px !important;
line-height: 1.25;
margin: 0 !important;
width: auto !important;
}
#mua_ban_xe .d-flex-two {
gap: 10px;
margin-top: auto;
order: 5;
}
#mua_ban_xe .d-flex-two .btn,
#mua_ban_xe .d-flex-two .btn-outline {
border-radius: 4px !important;
font-size: 14px;
font-weight: 700;
height: 37px;
}
@media (max-width: 991px) {
#mua_ban_xe.box-simple {
padding: 28px 18px 58px !important;
}
#mua_ban_xe .heading-simple {
font-size: 23px !important;
}
#mua_ban_xe .xem_them_hang_xe {
bottom: 18px;
font-size: 15px;
right: 18px;
}
}
.anchor-bar .an_ten_khi_keo_xuong {
color: #111827;
font-size: 17px;
margin: 0 24px 0 0;
white-space: nowrap;
}
#showroom {
scroll-margin-top: 130px;
}
.danh-sach {
background: #fff !important;
border: 1px solid #e5eaf2 !important;
border-radius: 10px !important;
box-shadow: 0 16px 38px rgba(15, 23, 42, 0.14) !important;
margin-bottom: 20px;
overflow: hidden;
padding: 0 !important;
}
.head-danh-sach {
align-items: center;
background: #fff !important;
border-bottom: 1px solid #edf1f6 !important;
color: #111827;
display: flex;
font-size: 16px !important;
letter-spacing: 0;
line-height: 1.2;
padding: 13px 16px !important;
}
.head-danh-sach .fa {
color: #2563eb;
margin-right: 9px;
}
.head-danh-sach .toc-arrow {
color: #2563eb;
}
.js-toc {
background: #fff;
margin-bottom: 0 !important;
max-height: 520px !important;
overflow-y: auto;
padding: 10px 12px 14px;
scrollbar-color: #2563eb #eef2ff;
scrollbar-width: thin;
}
.js-toc::-webkit-scrollbar {
width: 8px;
}
.js-toc::-webkit-scrollbar-thumb {
background: #2563eb;
border-radius: 999px;
}
.js-toc::-webkit-scrollbar-track {
background: #eef2ff;
border-radius: 999px;
}
.danh-sach ol.toc-list {
list-style-position: outside;
margin: 0 !important;
padding-left: 20px !important;
}
.danh-sach .toc-list-item {
color: #475569;
margin: 3px 0;
}
.danh-sach ol.toc-list a {
background: transparent !important;
border-radius: 6px;
color: #111827 !important;
display: block;
font-size: 15px;
line-height: 1.35;
padding: 7px 9px !important;
text-decoration: none;
}
.danh-sach ol.toc-list a:hover {
background: #f3f7ff !important;
color: #0b5ff0 !important;
}
.danh-sach ol.toc-list .is-active-link {
background: #eef5ff !important;
box-shadow: inset 3px 0 0 #2563eb;
color: #0b5ff0 !important;
font-weight: 700;
}
.danh-sach ol.toc-list>li>a {
font-weight: 700;
}
.danh-sach ol.toc-list>li>ol.toc-list>li>a {
font-size: 14px;
font-weight: 500;
}
.is-position-fixed {
top: 100px;
z-index: 1000;
}
.is-position-fixed .js-toc {
height: auto !important;
visibility: visible !important;
width: 430px !important;
}
.btn-danh-sach-close {
color: #64748b;
right: 8px !important;
top: 12px !important;
}
.btn-danh-sach-show {
background: #fff !important;
border: 1px solid #e5eaf2 !important;
border-radius: 10px !important;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.15);
color: #2563eb;
}
.xem-them-blue {
padding: 8px 24px;
border-radius: 999px;
background: #2070E8;
border: none;
color: #fff;
display: inline-flex;
align-items: center;
transition: .25s;
border: 1px solid #2070E8
}
.xem-them-blue svg {
fill: #fff;
margin-right: 4px;
}
.xem-them-blue:hover,
.xem-them-blue:focus,
.xem-them-blue:active {
background: #fff;
color: #2070E8;
}
.xem-them-blue:hover svg,
.xem-them-blue:focus svg,
.xem-them-blue:active svg {
fill: #2070E8;
}
.anchor-bar {
position: fixed;
left: 0;
right: 0;
width: 100%;
transform: translateY(-100%);
background: #fff;
transition: transform .3s ease-in-out;
top: 69px;
z-index: -9999;
border-bottom: 1px solid #e6e6e6;
padding: 10px 0
}
.anchor-bar.active {
transform: translateY(0);
z-index: 9;
transition: transform .3s ease-in-out;
}
.anchor-bar .detail-mn .mn-bar a {
color: #333;
border-bottom: 3px solid transparent;
padding-bottom: 5px
}
.mn-bar ul {
padding: 0
}
.anchor-bar .detail-mn {
margin-bottom: 0
}
.anchor-bar .detail-mn .mn-bar li {
display: inline-block;
margin-right: 24px;
}
.anchor-bar .detail-mn .mn-bar li:last-child {
margin-right: 0
}
.anchor-bar .detail-mn .mn-bar li a.active {
border-color: #2070E8;
}
.anchor-bar h2 {
font-size: 20px
}
.d-flex-spacebetween {
display: flex;
justify-content: space-between
}
.modal-custom {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
overflow-y: auto
}
.modal-custom-bg {
background: rgba(0, 0, 0, 0.90);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
overflow-y: auto;
display: inline-block;
z-index: 5
}
.detail-modal-custom-header h3 {
color: #FFF;
font-size: 32px;
font-weight: 700;
}
.detail-modal-custom {
position: relative;
z-index: 12
}
.detail-modal-custom-header {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
z-index: 30;
border-bottom: 1px solid rgba(250, 250, 250, 0.40);
padding: 20px 0;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 9999;
background: #000
}
.detail-modal-custom-header .nav-pills>li>a {
color: #fff
}
.detail-modal-custom-header .nav-pills>li.active>a,
.detail-modal-custom-header .nav-pills>li.active>a:hover,
.detail-modal-custom-header .nav-pills>li.active>a:focus {
color: #fff;
border-radius: 4px;
background-color: #2070E8;
}
.detail-modal-custom-header .nav>li>a:hover,
.detail-modal-custom-header .nav>li>a:focus {
text-decoration: none;
color: #2070E8;
background-color: none;
}
.detail-modal-custom-header .nav-pills {
margin-right: 30px
}
.detail-modal-custom-header .heading-simple{
color: #fff
}
.nav-pills>li {
float: none;
margin-right: 5px;
display: inline-block
}
.nav-pills>li:last-child {
margin-right: 0
}
.detail-modal-custom-body {
margin-top: 25px;
position: relative;
z-index: 30;
margin-bottom: 50px;
border-radius: 6px;
box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);
}
.detail-modal-chi-tiet {
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.detail-modal-chi-tiet .bodyhtml {
padding: 40px;
margin: 0 auto;
text-align: justify
}
.detail-modal-chi-tiet .bodyhtml h2 {
font-family: Inter;
font-size: 24px;
font-weight: 700;
margin-bottom: 15px
}
.detail-modal-chi-tiet .bodyhtml img {
margin: 20px 0;
border-radius: 4px;
width: 75%;
height: auto
}
.open-modal-custom {
overflow: hidden
}
.table {
margin-bottom: 0;
border-radius: 6px;
overflow: hidden;
border: none
}
table thead {
background: #2070E8;
font-size: 16px;
font-weight: 600;
color: #fff
}
table thead span {
display: block;
font-size: 14px;
font-weight: 400
}
table .colspan {
background: #2070E8;
color: #fff
}
.table>tbody>tr>td,
.table>thead>tr>th {
padding: 15px;
vertical-align: middle;
}
.table>thead>tr>th {
border-bottom: none
}
.table>tbody>tr>td {
border: none
}
.table>tbody>tr:nth-child(odd) {
background: #EDF6F9;
}
.table>tbody>tr:nth-child(even) {
background: #fff;
}
.icon_danh_muc_search {
height: 20px;
margin-right: 5px;
}
.w-150 {
width: 150px
}
.w-200 {
width: 200px
}
.w-250 {
width: 250px
}
.nav-tabs-modal {
padding: 0;
margin-bottom: 44px
}
.nav-tabs-modal>li>a {
color: #fff;
padding-bottom: 10px;
border-bottom: 3px solid transparent
}
.nav-tabs-modal>li.active>a,
.nav-tabs-modal>li.active>a:hover,
.nav-tabs-modal>li.active>a:focus {
color: #fff;
border-bottom: 3px solid #fff
}
.nav-tabs-modal>li {
display: inline-block;
margin-right: 42px;
}
.nav-tabs-modal>li:last-child {
margin-right: 0
}
.slick-garelly-main,
.slick-video-main {
margin-bottom: 20px
}
.slick-garelly-main .item,
.slick-video-main .item {
border-radius: 6px;
overflow: hidden
}
.slick-garelly-thumb {
margin-right: -22px;
}
.slick-garelly-thumb .item,
.slick-video-thumb .item {
margin-right: 20px;
border-radius: 6px;
overflow: hidden
}
.slick-garelly-main-box .slick-prev,
.slick-garelly-main-box .slick-next,
.slick-video-main-box .slick-prev,
.slick-video-main-box .slick-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 3px 0px 0px 3px;
background: rgba(0, 0, 0, 0.60);
color: #fff;
font-size: 20px;
width: 30px;
height: 70px;
line-height: 70px;
text-align: center;
cursor: pointer
}
.slick-garelly-main-box .slick-prev,.slick-video-main-box .slick-prev{
border-radius: 0 3px 3px 0
}
.slick-garelly-main-box,
.slick-video-main-box {
position: relative
}
.slick-garelly-main-box .slick-prev,
.slick-video-main-box .slick-prev {
left: 0
}
.slick-garelly-main-box .slick-next,
.slick-video-main-box .slick-next {
right: 0
}
.slick-garelly-thumb .item,
.slick-video-thumb .item {
border: 3px solid transparent
}
.slick-garelly-thumb .item.slick-current,
.slick-video-thumb .item.slick-current {
border: 3px solid #2070E8
}
.slick-video-main .play {
width: 150px;
height: 150px
}
.slick-video-thumb .play {
width: 40px;
height: 40px
}
.slick-disabled {
opacity: 0
}
.modal_detail_xe .container,
.modal_detail_xe .container_modal_con {
width: 100%;
max-width: none;
}
.modal_detail_xe .container {
padding-left: 48px;
padding-right: 48px;
}
.modal_detail_xe .detail-modal-custom-body {
margin-top: 18px;
margin-bottom: 28px;
box-shadow: none;
}
.modal_detail_xe .nav-tabs-modal {
display: flex;
gap: 34px;
margin-bottom: 18px;
overflow-x: auto;
overflow-y: hidden;
}
.modal_detail_xe .nav-tabs-modal>li {
flex: 0 0 auto;
margin-right: 0;
}
.modal_detail_xe .nav-tabs-modal>li>a {
display: block;
white-space: nowrap;
font-size: 16px;
font-weight: 600;
}
.modal_detail_xe .slick-garelly-main,
.modal_detail_xe .slick-video-main {
margin-bottom: 14px;
}
.modal_detail_xe .slick-garelly-main .item,
.modal_detail_xe .slick-video-main .item {
border-radius: 0;
}
.modal_detail_xe .row_phan_hai {
position: relative;
margin: 0;
}
.modal_detail_xe .row_phan_hai:before,
.modal_detail_xe .row_phan_hai:after {
display: none;
}
.modal_detail_xe .row_phan_hai>.col-md-16,
.modal_detail_xe .row_phan_hai>.col-md-6 {
float: none;
width: 100%;
padding: 0;
}
.modal_detail_xe .slick-garelly-main-box .img-16-9 {
height: calc(100vh - 230px);
min-height: 420px;
max-height: 760px;
padding-top: 0;
background: #fff;
}
.modal_detail_xe .slick-garelly-main-box .img-16-9 img {
object-fit: contain;
background: #fff;
}
.modal_detail_xe .des-moda-detail {
position: absolute;
top: 14px;
right: 18px;
z-index: 2;
max-width: 320px;
padding: 8px 12px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.58);
color: #fff;
line-height: 1.5;
}
.modal_detail_xe .counter-info {
margin-bottom: 0;
font-size: 16px;
}
.modal_detail_xe .slick-garelly-thumb,
.modal_detail_xe .slick-video-thumb {
margin-right: 0;
}
.modal_detail_xe .slick-garelly-thumb .item,
.modal_detail_xe .slick-video-thumb .item {
margin-right: 16px;
border-radius: 4px;
}
.modal_detail_xe .slick-garelly-thumb .img-16-9,
.modal_detail_xe .slick-video-thumb .img-16-9 {
height: 118px;
padding-top: 0;
background: #fff;
}
.modal_detail_xe .slick-garelly-thumb .img-16-9 img,
.modal_detail_xe .slick-video-thumb .img-16-9 img {
object-fit: contain;
background: #fff;
}
.modal_detail_xe .slick-video-main iframe {
height: calc(100vh - 230px);
min-height: 420px;
}
.modal_detail_xe .container_modal_con,
.modal_detail_xe .detail-modal-custom-header .container {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.modal_detail_xe .row_phan_hai {
display: flex;
align-items: stretch;
gap: 22px;
}
.modal_detail_xe .row_phan_hai>.col-md-16 {
flex: 1 1 auto;
min-width: 0;
}
.modal_detail_xe .row_phan_hai>.col-md-6 {
flex: 0 0 300px;
max-width: 300px;
}
.modal_detail_xe .slick-garelly-main-box .img-16-9 {
height: calc(100vh - 270px);
min-height: 380px;
max-height: 620px;
}
.modal_detail_xe .des-moda-detail {
position: static;
max-width: none;
height: 100%;
padding: 8px 0 0;
background: transparent;
}
.close-modal-custom {
background: none;
padding: 0;
transition: .25s;
border: none
}
.close-modal-custom svg {
fill: #fff
}
.close-modal-custom:hover {
color: #2070E8;
transition: .25s;
}
.close-modal-custom:hover svg {
fill: red
}
.form-search-box {
width: 1030px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
margin-bottom: 80px
}
.form-search {
border-radius: 8px;
background: #FFF;
padding: 20px 20px 20px 50px;
box-shadow: none;
border: none;
width: 100%;
overflow: hidden;
display: flex;
gap: 10px;
position: relative
}
.form-search-trong {
border-radius: 8px;
background: #FFF;
padding: 20px 20px 0px 0px;
box-shadow: none;
width: 100%;
overflow: hidden;
display: flex;
gap: 10px;
position: relative;
}
.form-search-trong input {
width: 100%;
border: 1px solid rgba(0, 0, 0, 0.11);
padding: 15px;
border-radius: 10px;
}
.form-search input {
width: 100%;
border: none;
border-right: 1px solid rgba(0, 0, 0, 0.11);
}
.form-search:before {
content: '';
width: 24px;
height: 24px;
background: url(../images/search.svg) no-repeat;
display: inline-block;
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
button.filter {
color: #4F4F4F;
background: #fff;
border: none;
color: #4F4F4F;
background: #fff;
border: none;
display: flex;
align-items: center;
}
button.filter:before {
content: '';
width: 24px;
height: 24px;
display: inline-block;
background: url(../images/filter.svg) no-repeat;
background-size: cover;
margin-right: 8px
}
.search-suggest {
margin-top: 30px;
margin: 0;
padding: 0;
margin-top: 20px
}
.search-suggest li {
display: inline-block;
margin-right: 30px
}
.search-suggest li:last-child {
margin-right: 0
}
.search-suggest li a {
color: #fff
}
.show-rm {
max-height: 150px;
overflow: hidden;
-webkit-transition: max-height .25s;
-moz-transition: max-height .25s;
-ms-transition: max-height .25s;
-o-transition: max-height .25s;
transition: max-height .25s;
position: relative;
overflow: visible
}
.show-rm.notshow{
overflow: hidden
}
.show-rm.active {
max-height: max-content;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
}
.show-rm.notshow:after {
content: '';
width: 100%;
height: 20px;
background: #ffffffbd;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.info-hang-xe .info img{
width: 80%;
height: auto
}
.close-modal {
position: absolute;
top: -40px;
right: -40px;
background: none;
border: none;
}
.modal {
background: rgb(0 0 0 / 50%);
}
.modal-dialog{
margin: 60px auto
}
.modal-dialog.large {
margin: 60px auto;
width: 1320px
}
.modal-body {
padding: 30px;
max-height: 80vh;
overflow-y: auto;
position: relative;
}
.flex-col {
display: flex;
flex-wrap: wrap;
margin-left: -7px;
margin-right: -7px
}
.colu-10 {
padding-left: 7px;
padding-right: 7px;
flex: 0 0 10%;
}
.colu-6 {
padding-left: 7px;
padding-right: 7px;
flex: 0 0 16.6666666667%;
}
.bang_so_sanh_xe .colu-5 {
padding: 15px;
}
.colu-5 {
padding-left: 7px;
padding-right: 7px;
width: 20%
}
.colu-4 {
padding-left: 7px;
padding-right: 7px;
width: 25%
}
.colu-3 {
padding-left: 7px;
padding-right: 7px;
width: 33.33333333%;
}
.colu-2 {
padding-left: 7px;
padding-right: 7px;
width: 50%;
}
#filter .input-box,
#modal-brand .input-box {
border-radius: 4px;
text-align: center;
background: #F8F7F7;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
padding: 7px;
width: 100%;
border: 2px solid transparent;
cursor: pointer;
min-height: 50px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 0px
}
#filter .input-box .img,
#modal-brand .input-box .img {
height: 36px;
margin: 0 auto;
position: relative;
width: 65px;
margin-bottom: 5px
}
#filter .input-box h3,
#modal-brand .input-box h3 {
font-size: 14px;
font-weight: 400
}
#filter .hang-xe .input-box h3{
font-size: 12px;
font-weight: 400
}
#filter .input-box .img img,
#modal-brand .input-box .img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
#filter .input-box.active,
#modal-brand .input-box.active {
border: 2px solid #2070E8;
}
#filter .input-box-p[type=checkbox]:checked+label,
#modal-brand .input-box-p[type=checkbox]:checked+label {
border: 2px solid #2070E8;
}
#filter input,
#modal-brand input {
height: 50px;
border-radius: 4px;
padding: 0 20px;
width: 100%;
border: 1px solid #E0E0E0;
margin-bottom: 15px;
}
#filter .block-box,
#modal-brand .block-box {
margin-bottom: 30px
}
#filter .modal-body .btn-primary,
#modal-brand .modal-body .btn-primary {
margin: 0 auto;
height: 50px;
padding: 0 80px
}
#filter .colu-10{
margin-bottom: 14px
}
hr {
display: inline-block;
width: 100%;
}
.bg-xe-tai {
border-radius: 4px;
text-align: center;
background: #F8F7F7;
box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
padding: 10px;
width: 100%;
border: 2px solid transparent;
cursor: pointer;
min-height: 70px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 14px
}
.bg-xe-tai .img {
height: 40px;
margin: 0 auto;
position: relative;
width: 73px;
margin-bottom: 5px
}
.bg-xe-tai h3 {
font-size: 14px;
font-weight: 400;
margin-top: 5px
}
.bg-xe-tai .img img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.border-right-none {
border-right: none !important
}
.login-box-bg {
background: url(../images/bg-login.png) no-repeat;
background-size: cover;
min-height: 100vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background-position: center center;
padding: 60px 0
}
.login-box .box-simple {
width: 380px;
margin-bottom: 0
}
.login-box .des {
color: #7F85A2;
font-size: 16px;
font-weight: 400;
margin-bottom: 40px;
background: none;
border: none;
padding: 0;
}
.form-control {
padding: 0 15px;
border-radius: 8px;
height: 45px;
box-shadow: none;
border: 1px solid #aaa;
}
.form-group {
margin-bottom: 20px;
position: relative
}
.form-group label {
font-weight: 400;
margin-bottom: 10px
}
input[type="password"] {
padding-right: 40px;
}
.show-password {
background: none;
border: none;
width: 18px;
height: 18px;
background: url(../images/eye.svg) no-repeat;
background-size: cover;
display: inline-block;
position: absolute;
cursor: pointer;
top: 16px;
right: 15px
}
.show-password.dis-pass {
background: none;
border: none;
width: 18px;
height: 18px;
background: url(../images/eye-slash.svg) no-repeat;
background-size: cover;
display: inline-block;
position: absolute;
cursor: pointer;
top: 16px;
right: 15px
}
.show-password:hover,
.show-password.dis-pass:hover {
filter: invert(27%) sepia(100%) saturate(1846%) hue-rotate(207deg) brightness(98%) contrast(85%);
}
.form-group:has(label) .show-password {
top: 43px;
}
.login-box-tinbanxe {
width: 720px;
}
.login-box-tinbanxe .des {
margin-bottom: 40px
}
.tab-on-off {
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(0, 0, 0, 0.11);
padding: 0;
}
.tab-on-off {
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid rgba(0, 0, 0, 0.11);
padding: 0;
}
.tab-on-off li {
font-weight: 500;
text-align: center;
font-size: 16px;
width: 50%;
padding: 12px 20px;
}
.tab-on-off li a {
display: block;
padding: 12px 20px;
}
.tab-on-off li.active {
background: #2070E8;
}
.tab-on-off li.active a {
color: #fff;
}
.text-primary {
color: #2070E8
}
.login-box-tinbanxe .text-primary {
font-weight: 700
}
.close-black {
width: 16px;
height: 16px;
display: inline-block;
background: url(../images/close_black.svg) no-repeat;
background-size: cover;
}
.login-box .close-black,
.login-box-tinbanxe .close-black {
position: absolute;
top: 20px;
right: 20px
}
.heading-simple-mn{
margin-bottom: 15px;
font-weight: 700;
font-size: 16px;
}
.heading-simple-2 {
color: #333;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.des-sub-title {
color: #4F4F4F;
font-size: 16px;
font-weight: 400;
margin-bottom: 40px
}
.tab-title-style-3 {
padding: 0;
display: flex;
justify-content: space-between;
margin-bottom: 30px
}
.tab-title-style-3 li a {
color: #E0E0E0;
font-size: 16px;
font-weight: 700;
display: block;
padding-bottom: 5px;
border-bottom: 6px solid #E0E0E0;
text-transform: uppercase;
}
.tab-title-style-3 li.active a,
.tab-title-style-3 li.active-custom a {
color: #2070E8;
border-bottom-color: #2070E8
}
.form-dang-tin .tab-content {
border-radius: 6px;
background: #FFF;
padding: 10px
}
.form-dang-tin .tab-content label {
color: #333;
font-size: 16px;
font-weight: 400;
margin-bottom: 8px
}
.uphinh {
min-height: 300px;
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border-radius: 10px;
margin-bottom: 30px;
border: 1px dashed rgba(0, 0, 0, 0.11);
}
.uphinh .input-uphinh {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.alert-uphinh .img .svg {
width: 48px;
height: 48px;
display: inline-block;
background: url(../images/upload.svg) no-repeat;
background-size: cover
}
.alert-uphinh .img {
width: 78px;
height: 78px;
padding: 16px;
text-align: center;
background-color: #F5FAFF;
border-radius: 50%;
margin: 0 auto;
margin-bottom: 16px
}
.alert-uphinh {
text-align: center;
width: 274px;
position: relative
}
.alert-uphinh h4 {
color: #505050;
font-size: 16px;
font-weight: 400;
margin-bottom: 8px
}
.alert-uphinh h5 {
color: #8B96A5;
text-align: center;
font-size: 14px;
font-weight: 400;
}
.upload-list {
width: 100%
}
.upload-list #image {
display: flex;
flex-wrap: wrap;
margin-right: -10px;
margin-left: -10px;
}
.upload-list .image-col {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
padding-right: 10px;
padding-left: 10px;
}
#mediaUpload {
margin-top: 20px;
text-align: center;
justify-content: center;
align-items: center;
display: flex;
width: 100%;
}
.owl-dots {
text-align: center;
margin-top: 20px
}
.owl-dot {
width: 10px;
height: 10px;
background: #ddd;
border-radius: 50%;
margin: 0 5px;
display: inline-block
}
.owl-dot.active {
background: #2070E8
}
#nv-block-login {
display: inline-block
}
.pos-sticky {
position: -webkit-sticky;
position: sticky;
top: 0
}
label {
color: #333;
font-size: 16px;
font-weight: 400;
margin-bottom: 8px;
}
.has-car {
border-radius: 8px;
border: 1px solid #E3E3E3;
padding: 15px;
position: relative
}
.has-car h3 {
color: #333;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;
width: calc(100% - 15px);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.has-car .btn-outline-light {
color: #333 !important;
}
.has-car .img-4-3 {
border-radius: 8px;
transition: .25s;
}
.close-b {
position: absolute;
top: 15px;
right: 15px;
width: 16px;
height: 16px;
border: none;
display: inline-block;
background: url(../images/close_black.svg) no-repeat;
background-size: 100% 100%:
}
.btn-them-xe {
border-radius: 8px;
border: 1px solid #E3E3E3;
background: #fff;
font-weight: 400;
min-height: 45px;
height: 100%;
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.btn-them-xe:hover {
background: #f5f5f5;
border: 1px solid #2070E8;
}
.anchor-link {
padding: 0;
margin: 0;
display: flex;
white-space: nowrap;
overflow-x: auto;
justify-content: space-between;
border-bottom: 1px solid #E3E3E3;
}
.anchor-link li {
display: inline-block
}
.anchor-link li a {
padding-bottom: 15px;
color: #333;
display: block;
font-size: 14px;
border-bottom: 3px solid transparent
}
.anchor-link a.active {
border-bottom: 3px solid #2070E8;
color: #2070E8
}
.four-col td,
.four-col th {
width: 20%
}
.ss-sticky {
box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.08);
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
position: fixed;
width: 100%;
}
.head-ss {
color: #fff;
background: #27AE60;
padding: 15px;
font-weight: 700;
font-size: 16px;
}
.colspan-ss {
background: #2070E8;
color: #fff;
padding: 15px 30px 15px 15px;
position: relative;
cursor: pointer
}
.td-ss .colu-3, .td-ss .colu-4{
padding: 15px;
display: flex;
align-items: center
}
.panel-collapse .td-ss:nth-child(even) {
background: #EDF6F9;
}
.colspan-ss:after {
content: '\f068';
color: #fff;
position: absolute;
top: 15px;
right: 15px;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.colspan-ss.collapsed:after {
content: '\f067';
}
.sticky-ss-box.sticky .has-car .img-4-3 {
height: 0;
padding-top: 0;
}
.sticky-ss-box.sticky .has-car .mrg-b-20{
margin-bottom: 0 !important;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.sticky-ss-box.sticky {
top: 69px;
position: -webkit-sticky;
position: sticky;
left: 0;
right: 0;
z-index: 999;
padding: 10px 0;
background: #fff;
}
.sticky-ss-box.sticky:after{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -2000px;
right: -2000px;
box-shadow: 0px 0px 48px rgb(0 0 0 / 18%);
display: inline-block;
height: 100%;
z-index: -1;
}
.sticky-ss-box.sticky .container-c {
width: 1220px;
margin: 0 auto;
}
.news-grid-2 {
margin-bottom: 30px
}
.news-grid-2 h3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin: 17px 0;
font-size: 18px;
height: 47px
}
.news-grid-2 .des {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
height: 46px;
margin-bottom: 15px
}
.news-grid-2 .img-16-9 {
border-radius: 4px;
}
.news-grid-2 .link {
color: #2070E8;
font-size: 14px;
text-transform: uppercase
}
.news-grid-2 .link .fa {
margin-left: 5px
}
.bg-gray {
background: #fff;
padding: 20px 0
}
.mrg-t--40 {
margin-top: -40px
}
body:has(.detail-news) {
background: #F2F4F8
}
body:has(.detail-news) .breadcrumbs-wrap {
position: relative;
top: 0;
left: 0
}
body:has(.detail-news) .breadcrumbs li:after,
.show-subs-breadcrumbs:after {
color: #333
}
body:has(.detail-news) .breadcrumbs-wrap a {
color: #333
}
.detail-news .hometext {
font-weight: 400
}
.img-full {
width: 100%;
height: auto
}
.btn {
height: 45px;
display: inline-flex;
align-items: center;
padding: 0 16px;
}
h1.title {
font-size: 24px;
color: #0F1A2A;
}
.product-list-mn {
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.product-list-mn h3 {
font-size: 16px;
font-weight: 500;
margin-bottom: 5px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.product-list-mn .price {
color: #2070E8;
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
}
.product-list-mn .info {
color: #828282;
font-size: 14px
}
.product-list-mn .info img {
width: 20px;
height: 20px;
margin-right: 8px
}
.product-list-mn .info .location {
display: flex;
align-items: center;
margin-bottom: 5px;
word-wrap: break-word;
white-space: normal;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.product-list-mn .info .info-b ul {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
margin-bottom: 0;
flex-wrap: wrap;
}
.product-list-mn .info .info-b ul>li {
width: 50%;
display: flex;
align-items: center;
font-size: 14px;
margin-bottom: 5px
}
.product-list-mn .info .info-b ul li:last-child,
.product-list-mn .info .info-b ul li:nth-child(4n-1) {
margin-bottom: 0
}
.product-list-mn .info-box {
display: flex;
gap: 15px;
align-items: center;
}
.product-list-mn .info-box .img {
flex-basis: 100px;
border-radius: 4px;
overflow: hidden
}
.product-list-mn .info-box .info {
flex: 1
}
.detail-ss-xe h1{
font-size: 24px;
margin-top: 15px;
margin-bottom: 8px
}
.detail-ss-xe h2{
font-size: 20px;
margin-top: 15px;
margin-bottom: 8px
}
.detail-ss-xe h3{
font-size: 18px;
margin-top: 15px;
margin-bottom: 8px
}
.detail-ss-xe .hometext{
margin-bottom: 20px
}
.detail-ss-xe-html img{
margin: 20px 0;
border-radius: 10px
}
.detail-ss-xe{
line-height: 1.7
}
.black{
background: #333
}
.mobile-menu-bg {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: none;
}
.mobile-menu-wrap {
width: 280px;
position: fixed;
top: 0;
left: 0;
width: 280px;
height: 100%;
background: #fff;
z-index: 9999;
visibility: hidden;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
.mobile-menu-wrap.animate {
transition: all 0.35s ease;
}
.mobile-menu-wrap .logo {
text-align: center;
padding: 0 10px;
}
.mobile-menu-wrap .logo img {
height: 35px;
width: auto;
}
.mobile-menu-wrap .menu {
background-color: #fff;
min-height: 100vh;
overflow: auto;
}
.mobile-menu-wrap .mfooter {
background-color: #fff;
height: 30px;
padding: 10px;
text-align: center;
color: #777;
}
.mobile-menu-toggle-btn {
cursor: pointer;
background: none;
text-align: center;
font-size: 30px;
display: none;
z-index: 999;
color:#fff;
}
.mobile-menu-toggle-btn .fa{
font-size: 22px;
}
.mobile-menu-toggle-btn:hover {
background: none;
}
@media (max-width: 767.98px) {
.mobile-menu-toggle-btn {
display: inline-block;
}
.open-menu .mobile-menu-bg {
display: block;
}
.open-menu .mobile-menu-wrap {
visibility: visible;
transform: translateX(0px);
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
}
}
.header-top .dropdown{
display: inline-block
}
.d-flex-right{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
}
.btn-simple{
height: 45px;
line-height: 45px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.11);
background: #FFF;
padding: 0 12px;
cursor: pointer;
white-space: nowrap
}
.btn-simple img{
width: 20px;
height: 20px;
margin-right: 8px
}
.filter-box-tinxe{
margin-bottom: 22px
}
.filter-box-tinxe.row{
position: -webkit-sticky;
position: sticky;
top: 76px;
z-index: 990;
margin-right: 0;
margin-left: 0;
padding: 14px;
background: #fff;
border: 1px solid #e3e8ef;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(15, 26, 42, 0.06);
display: flex;
align-items: stretch;
gap: 10px;
}
.filter-box-tinxe.row:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -14px;
height: 14px;
pointer-events: none;
background: linear-gradient(180deg, rgba(244, 246, 248, 0.85), rgba(244, 246, 248, 0));
}
.filter-box-tinxe.row.is-sticky {
position: fixed;
top: 76px;
left: var(--sticky-filter-left, 0px);
width: var(--sticky-filter-width, auto);
z-index: 1000;
margin-bottom: 0;
}
.filter-box-tinxe-placeholder {
display: none;
}
.filter-box-tinxe-placeholder.active {
display: block;
}
.filter-box-tinxe [class^=col-]{
padding-left: 0;
padding-right: 0
}
.filter-box-tinxe .form-control{
height: 48px;
padding: 0 14px;
border: 1px solid #cfd7e3;
border-radius: 6px;
color: #14213d;
font-size: 15px;
box-shadow: none;
background-color: #fff;
}
.filter-box-tinxe .btn-simple{
width: 100%;
height: 48px;
border-color: #d7dee8;
border-radius: 6px;
color: #14213d;
font-weight: 600;
justify-content: center;
background: #f8fafc;
}
.filter-box-tinxe .btn-simple:hover,
.filter-box-tinxe .form-control:focus{
border-color: #2070e8;
box-shadow: 0 0 0 3px rgba(32, 112, 232, 0.12);
}
.filter-box-tinxe .select2-container{
width: 100% !important;
}
.filter-box-tinxe .select2-container--default .select2-selection--single{
height: 48px !important;
border: 1px solid #cfd7e3;
border-radius: 6px;
background: #fff;
}
.filter-box-tinxe .select2-container--default .select2-selection--single .select2-selection__rendered{
height: 48px;
padding-left: 14px;
padding-right: 32px;
color: #14213d;
font-size: 15px;
line-height: 48px !important;
}
.filter-box-tinxe .select2-container--default .select2-selection--single .select2-selection__placeholder{
color: #7c8797;
}
.filter-box-tinxe .select2-container--default .select2-selection--single .select2-selection__arrow{
height: 48px;
top: 0;
right: 8px;
}
.filter-box-tinxe .select2-container--default.select2-container--open .select2-selection--single,
.filter-box-tinxe .select2-container--default.select2-container--focus .select2-selection--single{
border-color: #2070e8;
box-shadow: 0 0 0 3px rgba(32, 112, 232, 0.12);
}
@media (max-width: 991px){
.filter-box-tinxe.row{
display: block;
padding: 12px;
}
.filter-box-tinxe [class^=col-]{
margin-bottom: 10px;
}
.filter-box-tinxe [class^=col-]:last-child{
margin-bottom: 0;
}
}
.brand-grid-2-owl .owl-next, .brand-grid-2-owl .owl-prev{
width: 38px;
height: 38px;
line-height: 38px;
font-size: 14px
}
.brand-grid-2-owl .owl-next{
right: -40px
}
.brand-grid-2-owl .owl-prev{
left: -40px
}
.select2-container--default .select2-selection--single, .select2-container--bootstrap .select2-selection--single {
height: 45px !important;
padding-top: 0;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
height: 45px;
line-height: 45px !important
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 26px;
position: absolute;
top: 10px;
right: 1px;
width: 20px;
}
.t-x-list{
display: flex;
background: #fff;
padding: 20px;
border-radius: 6px;
margin-bottom: 20px
}
.t-x-list:last-child{
margin-bottom: 0
}
.t-x-list .img{
flex-basis: 200px
}
.t-x-list .info{
flex: 1
}
.t-x-list .img-4-3{
border-radius: 6px;
margin-right: 25px
}
.t-x-list h3{
font-size: 18px;
font-weight: 700;
margin-bottom: 0;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
flex: 1
}
.t-x-list .price{
font-size: 16px;
width: 130px;
flex-basis: 130px;
text-align: right;
font-weight: 600
}
.title{
font-size: 24px;
font-style: normal;
font-weight: 700;
}
.info-1{
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.11);
color: #828282
}
.info-1 img{
width: 20px;
height: 20px;
margin-right: 8px
}
.info-2{
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: space-between
}
.info-2 .avatar{
width: 48px;
height: 48px;
border-radius: 50%;
margin-right: 12px
}
.info-2 li{
display: flex;
align-items: center;
font-weight: 600
}
.info-2 .checked{
margin-left: 8px;
margin-right: 0
}
.color-primary{
color: #2070E8
}
.info-2 img{
width: 20px;
height: 20px;
margin-right: 8px
}
.uu-tien{
display: inline-block;
padding: 6px 10px;
font-size: 14px;
color: #2070E8;
border: 1px solid #2070E8;
border-radius: 8px;
margin-right: 8px;
font-weight: 600;
white-space: nowrap;
background: #fff;
z-index: 100;
}
.tt{
flex: 1;
display: flex;
align-items: center
}
.tinxe-list-head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.tinxe-list-head .title{
margin: 0;
color: #000;
font-size: 22px;
line-height: 1.2;
font-family: Georgia, "Times New Roman", serif;
}
.tinxe-list-head .orderby{
width: 150px;
height: 56px;
border: 1px solid #aaa;
border-radius: 10px;
color: #333;
font-size: 20px;
box-shadow: none;
}
.t-x-list{
gap: 30px;
padding: 30px 26px 36px 26px;
margin-bottom: 36px;
border-radius: 0;
box-shadow: none;
}
.t-x-list .img{
flex: 0 0 220px;
max-width: 220px;
}
.t-x-list .img-4-3{
padding-top: 75%;
margin-right: 0;
border-radius: 6px;
overflow: hidden;
}
.t-x-list .tinxe-main{
display: grid;
grid-template-columns: minmax(0, 1fr) 92px;
gap: 20px;
align-items: start;
}
.t-x-list .tinxe-body{
min-width: 0;
}
.t-x-list .tinxe-body .tt{
display: block;
color: #111;
font-size: 22px;
line-height: 1.45;
}
.t-x-list h3{
margin: 0 0 4px 0;
font-size: 18px;
line-height: 1.25;
font-family: Georgia, "Times New Roman", serif;
-webkit-line-clamp: 2;
}
.t-x-list h3 a{
color: #1266f1;
}
.t-x-list .price{
width: auto;
flex-basis: auto;
color: #f00;
font-size: 20px;
line-height: 1.3;
font-weight: 700;
text-align: right;
white-space: nowrap;
}
.t-x-list .info-1{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 24px 0 24px;
padding: 0;
border-bottom: 0;
color: #777;
font-size: 22px;
line-height: 1.25;
}
.t-x-list .info-1 li,
.t-x-list .info-2 li{
min-width: 0;
list-style: none;
}
.t-x-list .info-2{
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 48px;
gap: 22px;
align-items: center;
}
.t-x-list .info-2 li{
font-size: 22px;
line-height: 1.25;
}
.t-x-list .info-2 a,
.t-x-list .info-2 .color-primary{
color: #1266f1;
font-weight: 700;
}
.t-x-list .info-2 .avatar{
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 50%;
margin-right: 20px;
object-fit: cover;
}
.t-x-list .info-2 img:not(.avatar):not(.checked){
width: 24px;
height: 24px;
margin-right: 12px;
}
#list_tin_dang{
border: 1px solid #dfe4ec;
border-radius: 12px;
overflow: hidden;
background: #fff;
}
#list_tin_dang > .t-x-list{
display: flex;
gap: 24px;
margin: 0;
padding: 10px 16px 22px 8px;
min-height: 226px;
border-bottom: 1px solid #dfe4ec;
border-radius: 0;
box-shadow: none;
background: #fff;
}
#list_tin_dang > .t-x-list:nth-of-type(even){
background: #fffdeb;
}
#list_tin_dang > .t-x-list:last-of-type{
border-bottom: 0;
}
#list_tin_dang > .t-x-list .img{
flex: 0 0 188px;
max-width: 188px;
margin-top: 0;
}
#list_tin_dang > .t-x-list .img-4-3{
width: 188px;
height: 187px;
padding-top: 0;
margin: 0;
border-radius: 0;
background: #f0f2f5;
}
#list_tin_dang > .t-x-list .info{
position: relative;
flex: 1;
min-width: 0;
padding: 0 238px 0 0;
}
#list_tin_dang > .t-x-list .tinxe-main{
display: block;
}
#list_tin_dang > .t-x-list .tinxe-body .tt{
display: block;
color: #17233a;
font-size: 14px;
line-height: 1.45;
font-weight: 400;
overflow: hidden;
overflow-wrap: anywhere;
}
#list_tin_dang > .t-x-list .tinxe-body .tt .tt-meta{
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
#list_tin_dang > .t-x-list .tinxe-body .tt .tt-desc{
display: -webkit-box;
margin-top: 2px;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
#list_tin_dang > .t-x-list h3{
margin: 0 0 10px 0;
color: #064fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#list_tin_dang > .t-x-list h3 a{
display: block;
color: #064fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#list_tin_dang > .t-x-list .price{
position: absolute;
top: 0;
right: 0;
width: 228px;
color: #f00000;
font-family: Roboto, Arial, Helvetica, sans-serif;
font-size: 22px;
line-height: 1.25;
font-weight: 800;
text-align: right;
white-space: nowrap;
}
#list_tin_dang > .t-x-list .info-1{
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: nowrap;
gap: 4px 0;
margin: 14px 0 0;
padding: 0;
border: 0;
color: #06101f;
font-size: 15px;
line-height: 1.3;
font-weight: 700;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
}
#list_tin_dang > .t-x-list .info-1 li{
flex: 0 1 auto;
min-width: 0;
width: auto;
margin: 0;
list-style: none;
white-space: nowrap;
}
#list_tin_dang > .t-x-list .info-1 li:not(:last-child)::after{
content: "·";
margin: 0 8px;
color: #06101f;
}
#list_tin_dang > .t-x-list .info-1 li:last-child{
margin-left: 0;
color: #06101f;
}
#list_tin_dang > .t-x-list .info-1 img{
width: 18px;
height: 18px;
margin-right: 6px;
vertical-align: -3px;
}
#list_tin_dang > .t-x-list .info-2{
position: absolute;
top: 36px;
right: 0;
display: block;
width: 228px;
margin: 0;
padding: 0;
text-align: right;
}
#list_tin_dang > .t-x-list .info-2 li{
display: block;
margin: 0 0 9px;
color: #26364f;
font-size: 14px;
line-height: 1.35;
font-weight: 400;
list-style: none;
}
#list_tin_dang > .t-x-list .info-2 li:first-child a{
color: #064fff;
font-size: 14px;
font-weight: 500;
}
#list_tin_dang > .t-x-list .info-2 .avatar{
display: none;
}
#list_tin_dang > .t-x-list .info-2 .checked{
width: 14px;
height: 14px;
margin: 0 0 0 4px;
}
#list_tin_dang > .t-x-list .info-2 li.color-primary{
color: #26364f;
font-weight: 400;
}
#list_tin_dang > .t-x-list .info-2 li.color-primary img{
display: none;
}
#list_tin_dang > .t-x-list .info-2 li:last-child{
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: 0;
color: #f00000;
font-size: 17px;
font-weight: 700;
}
#list_tin_dang > .t-x-list .info-2 li:last-child img{
display: inline-block;
width: 22px;
height: 22px;
margin-right: 0;
vertical-align: middle;
}
#list_tin_dang > .t-x-list .info-1 li:not(:last-child)::after{
content: none;
margin: 0;
}
#list_tin_dang > .t-x-list .info-1 li + li::before{
content: "\00a0\00b7\00a0";
color: #06101f;
}
#list_tin_dang > .t-x-list .info-2 .list-phone-link{
color: #f00000;
font-weight: 700;
}
#list_tin_dang > .t-x-list .tinxe-location-footer{
display: flex;
position: absolute;
right: 0;
bottom: 0;
width: 228px;
align-items: center;
justify-content: flex-end;
gap: 6px;
color: #064fff;
font-size: 16px;
line-height: 1.25;
font-weight: 700;
text-align: right;
white-space: nowrap;
}
#list_tin_dang > .t-x-list .tinxe-location-footer img{
width: 18px;
height: 18px;
flex: 0 0 auto;
}
@media (min-width: 768px) {
#list_tin_dang > .t-x-list .info-1 {
position: absolute;
left: 0;
right: 238px;
bottom: 0;
margin: 0;
}
#list_tin_dang > .t-x-list .info{
padding-bottom: 26px;
}
}
#noi_dung_tin_dang{ font-size:15px; line-height:1.65; color:#2b3648; }
#noi_dung_tin_dang h2{ font-size:20px; line-height:1.35; font-weight:700; color:#0f2a52; margin:26px 0 12px; padding-bottom:6px; border-bottom:2px solid #eef1f6; }
#noi_dung_tin_dang h3{ font-size:17px; line-height:1.4; font-weight:600; color:#17233a; margin:18px 0 6px; }
#noi_dung_tin_dang p{ margin:0 0 12px; }
#noi_dung_tin_dang ul{ margin:0 0 14px; padding-left:22px; }
#noi_dung_tin_dang ul li{ margin-bottom:6px; }
#noi_dung_tin_dang table{ width:100%; border-collapse:collapse; margin:6px 0 10px; font-size:14.5px; }
#noi_dung_tin_dang th,#noi_dung_tin_dang td{ border:1px solid #e2e7ef; padding:9px 12px; text-align:left; vertical-align:top; }
#noi_dung_tin_dang thead th{ background:#f3f6fb; color:#0f2a52; font-weight:700; }
#noi_dung_tin_dang tbody tr:nth-child(even){ background:#fafbfd; }
#noi_dung_tin_dang .tbx-bang-gia em{ display:block; margin-top:6px; color:#6b7892; font-size:13px; }
#noi_dung_tin_dang figure{ margin:14px auto; text-align:center; }
#noi_dung_tin_dang figure img{ max-width:100%; height:auto; border-radius:8px; }
#noi_dung_tin_dang figcaption{ margin-top:6px; color:#6b7892; font-size:13px; font-style:italic; }
#noi_dung_tin_dang .tbx-faq h3{ margin:16px 0 0; padding:10px 14px; background:#f3f6fb; border-left:4px solid #0f6fff; border-radius:0 6px 6px 0; font-size:16px; font-weight:700; color:#14233d; }
#noi_dung_tin_dang .tbx-faq p{ margin:8px 0 14px; padding:0 2px; }
#gia_xe_lien_quan .product-list-mn .info-box{
align-items: flex-start;
gap: 16px;
}
#gia_xe_lien_quan .product-list-mn .info-box .img{
flex: 0 0 112px;
width: 112px;
}
#gia_xe_lien_quan .product-list-mn .img-4-3{
width: 112px;
height: 84px;
padding-top: 0;
}
#gia_xe_lien_quan .product-list-mn .img-4-3 img{
width: 100%;
height: 100%;
object-fit: cover;
}
#gia_xe_lien_quan .product-list-mn .info-box .info{
flex: 1;
min-width: 0;
}
#gia_xe_lien_quan .product-list-mn h3{
margin: 0 0 8px;
color: #06101f;
font-size: 16px;
line-height: 1.35;
font-weight: 500;
overflow: visible;
display: block;
-webkit-line-clamp: unset;
}
#gia_xe_lien_quan .product-list-mn .price{
color: #064fff;
font-size: 15px;
line-height: 1.35;
font-weight: 700;
white-space: normal;
}
@media (max-width: 767px){
#list_tin_dang{
border-radius: 0;
border-left: 0;
border-right: 0;
}
#list_tin_dang > .t-x-list{
display: block;
min-height: 0;
padding: 14px;
}
#list_tin_dang > .t-x-list .img{
max-width: none;
margin-bottom: 10px;
}
#list_tin_dang > .t-x-list .img-4-3{
width: 100%;
height: auto;
padding-top: 65%;
border-radius: 6px;
}
#list_tin_dang > .t-x-list .info{
padding: 0;
}
#list_tin_dang > .t-x-list .tinxe-body .tt{
font-size: 15px;
}
#list_tin_dang > .t-x-list h3{
font-size: 18px;
}
#list_tin_dang > .t-x-list .price,
#list_tin_dang > .t-x-list .info-2,
#list_tin_dang > .t-x-list .tinxe-location-footer{
position: static;
width: auto;
text-align: left;
}
#list_tin_dang > .t-x-list .price{
margin: 8px 0;
font-size: 22px;
}
#list_tin_dang > .t-x-list .info-1{
display: block;
font-size: 15px;
}
#list_tin_dang > .t-x-list .info-1 li{
display: inline;
white-space: normal;
}
#list_tin_dang > .t-x-list .info-1 li:last-child{
margin-left: 0;
display: block;
margin-top: 6px;
}
#list_tin_dang > .t-x-list .info-2{
margin-top: 10px;
}
#list_tin_dang > .t-x-list .tinxe-location-footer{
justify-content: flex-start;
margin-top: 8px;
}
}
.filter-price{
padding: 0;
margin: 0
}
.filter-price li{
padding: 20px 0;
font-weight: 700;
border-top: 1px solid rgba(0, 0, 0, 0.07);
display: flex;
align-items: center;
justify-content: space-between
}
.filter-price li:last-child{
padding-bottom: 0
}
.filter-price input[type=checkbox]{
margin-right: 0
}
.news-list{
padding: 20px 0;
display: flex;
align-items: center;
border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.news-list .img{
flex-basis: 100px;
margin-right: 18px;
border-radius: 4px;
overflow: hidden
}
.news-list h3{
font-size: 16px;
font-weight: 500;
flex: 1
}
.news-list h3 a{
color: #333
}
#tin_xe_lien_quan .heading-simple {
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
color: #0F1A2A;
display: block;
font-size: 22px;
font-weight: 700;
line-height: 1.3;
margin: 0;
padding-bottom: 16px;
}
.news-list:last-child{
padding-bottom: 0
}
.news-list .content{
flex: 1
}
.title-h1{
color: #FFF;
margin-top: 60px;
font-size: 32px;
margin-bottom: 24px;
font-weight: 700;
}
.search-showroom .form-control{
border: 1px solid transparent
}
.search-showroom .btn-outline{
border: none;
border-radius: 8px;
}
.search-showroom{
margin-bottom: 100px
}
.showroom-list-2{
display: flex;
padding: 20px 0;
border-top: 1px solid rgba(0, 0, 0, 0.07);
align-items: center
}
.showroom-list-2:last-child{
padding-bottom: 0
}
.showroom-list-2 .img{
flex-basis: 100px;
margin-right: 18px;
}
.showroom-list-2 .info{
flex: 1
}
.showroom-list-2 h3{
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
.showroom-list-2 .des{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
.showroom-grid{
margin-bottom: 20px;
border-radius: 4px;
overflow: hidden;
background: #FFF;
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.19);
}
.showroom-grid .info{
padding: 20px
}
.showroom-grid h3{
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.showroom-grid .des{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-bottom: 24px;
padding-bottom: 24px;
height: 64px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.11);
}
.showroom-grid .info-b {
display: flex;
justify-content: space-between;
}
.d-flex{
display: flex
}
.full-100{
width: 100%
}
.modal-brand{
background: none;
border: none
}
.price{
color: red;
font-size: 14px;
}
.bang_so_sanh_xe .td-ss:nth-child(even) {
background: #EDF6F9;
}
.item_bai_dang > label{
min-width: 130px;
line-height: 40px;
}
.item_bai_dang{
display: flex;
}
.red{
color: red;
}
select.input-sm{
height: 45px;
}
.noi_dung_dang{
border: solid 1px #dcdcdc;
border-radius: 10px;
padding: 15px;
margin-bottom: 40px;
box-shadow: 0px 4px 8px -2px #ccc;
}
.noi_dung_dang h2{
text-transform: uppercase;
font-size: 16px;
color: #2070E8;
text-decoration: underline;
text-underline-offset: 8px;
margin-bottom: 20px;
}
.bnn-detail-showroom{
background-color: #fff;
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0px 0px 8px 8px;
border: 1px solid #ddd;
position: relative;
margin-bottom: 140px
}
.info-detail-showroom{
display: flex;
padding: 30px;
position: absolute;
width: 100%;
left: 0;
right: 0;
bottom: -130px;
}
.avt-showroom-box{
text-align: center;
flex-basis: 200px;
margin-right: 30px;
}
.avt-showroom-box h3{
margin-top: 12px;
color: #333;
font-size: 20px;
font-weight: 700;
margin-bottom: 8px
}
.avt-showroom{
background: #ddd;
width: 200px;
height: 200px;
border-radius: 16px;
border: 6px solid #FFF;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
overflow: hidden;
position: relative
}
.avt-showroom img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover
}
.info-detail-showroom .info-box{
flex: 1;
border-radius: 8px;
background: #FFF;
overflow: hidden;
display: flex;
flex-direction: column;
}
.info-detail-showroom .info{
display: flex
}
.info-detail-showroom .info .contact{
padding: 30px;
flex: 1;
}
.info-detail-showroom .info .contact h2{
color: #333;
font-size: 24px;
font-weight: 700;
margin-bottom: 16px
}
.info-detail-showroom .info .contact .addr{
margin-bottom: 15px;
position: relative;
padding-left: 28px
}
.info-detail-showroom .info .contact .addr:before{
content: '';
width: 20px;
height: 20px;
display: inline-block;
background: url(../images/map-blue.svg) no-repeat;
background-size: cover;
position: absolute;
top: -1px;
left: 0;
margin-right: 8px
}
.info-detail-showroom .info .contact .openhours{
padding-left: 28px;
position: relative
}
.info-detail-showroom .info .contact .openhours ul{
padding: 0;
margin: 0
}
.info-detail-showroom .info .contact .openhours:before{
content: '';
width: 20px;
height: 20px;
display: inline-block;
background: url(../images/clock-circle.svg) no-repeat;
background-size: cover;
position: absolute;
top: -1px;
left: 0;
margin-right: 8px
}
.info-detail-showroom .info .hotline{
flex-basis: 250px;
padding: 30px;
}
.info-detail-showroom .info-box .info-bottom{
text-align: center;
background: #2070E8;
display: flex;
flex: 1;
align-items: center;
padding: 10px 0
}
.info-detail-showroom .info-box .info-bottom a{
color: #fff;
display: flex;
align-items: center;
position: relative;
justify-content: center
}
.info-detail-showroom .info-box .info-bottom .nhan-bao-gia:before{
content: '';
width: 32px;
height: 32px;
margin-right: 8px;
background: url('../images/gift.svg') no-repeat;
background-size: cover;
display: inline-block
}
.info-detail-showroom .info-box .info-bottom .dk-trai-nghiem:before{
content: '';
width: 32px;
height: 32px;
margin-right: 8px;
background: url('../images/test.svg') no-repeat;
background-size: cover;
display: inline-block
}
.info-detail-showroom .info-box .info-bottom .mua-tra-gop:before{
content: '';
width: 32px;
height: 32px;
margin-right: 8px;
background: url('../images/give-money.svg') no-repeat;
background-size: cover;
display: inline-block
}
.info-detail-showroom .info-box .info-bottom .l-r{
position: relative
}
.info-detail-showroom .info-box .info-bottom .l-r:before, .info-detail-showroom .info-box .info-bottom .l-r:after{
content:'';
background: #fff;
width: 1px;
height: 15px;
display: inline-block;
position: absolute;
top: 10px
}
.info-detail-showroom .info-box .info-bottom .l-r:before{
left: 0
}
.info-detail-showroom .info-box .info-bottom .l-r:after{
right: 0
}
.box-pdd-25{
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.11);
padding: 25px
}
.info-user{
text-align: center
}
.info-user label{
font-size: 14px;
color: #828282;
display: block;
margin-bottom: 12px
}
.info-user-dt{
text-align: center
}
.info-user-dt img{
width: 40px;
height: 40px;
margin-bottom: 12px
}
.info-user-dt h3{
color: #2070E8;
font-size: 16px;
font-weight: 600;
}
.csud{
padding-top: 20px;
margin-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.07);
display: flex;
align-items: center
}
.csud img{
width: 24px;
height: 24px;
margin-right: 15px;
}
.gmap-showroom{
border-radius: 6px;
border: 2px solid #FFF;
overflow: hidden
}
.gmap-showroom iframe{
width: 100%;
height: 450px;
}
.info-user-fixed{
position: fixed;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1000;
}
.info-user-fixed button{
background: none;
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
line-height: 40px;
padding: 0;
margin-bottom: 8px;
background: linear-gradient(90deg, #00C0FF 0%, #5558FF 100%);
display: flex;
align-items: center;
justify-content: center;
}
.info-user-fixed button:last-child{
margin-bottom: 0
}
.modal-showrom-dk{
width: 800px
}
.tab-showroom-dk{
padding: 0;
margin: 0;
text-align: center;
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
justify-content: space-between;
margin-bottom: 30px
}
.tab-showroom-dk li a{
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid #E9E9EC;
padding: 8px 25px;
white-space: nowrap;
}
.tab-showroom-dk li a svg{
fill: #1E1F20;
width: 32px;
height: 32px;
margin-right: 8px
}
.tab-showroom-dk li.active a, .tab-showroom-dk li:hover a, .tab-showroom-dk li.active:hover a, .tab-showroom-dk li.active:focus a{
color: #fff;
background: #2070E8;
border-color: #2070E8
}
.tab-showroom-dk li.active a svg, .tab-showroom-dk li:hover a svg, .tab-showroom-dk li.active:hover a svg, .tab-showroom-dk li.active:focus a svg{
fill: white
}
.footer-showroom h3{
color: #FFF;
font-size: 18px;
font-weight: 700;
margin-bottom: 15px
}
.footer-showroom ul{
padding: 0;
margin: 0
}
.footer-showroom ul li{
margin-bottom: 12px;
position: relative;
padding-left: 28px
}
.footer-showroom ul li:last-child{
margin-bottom: 0
}
.footer-showroom ul li svg{
width: 20px;
height: 20px;
margin-right: 8px;
position: absolute;
top: 2px;
left: 0
}
.footer-showroom .logo-footer{
color: #FFF;
font-size: 24px;
font-weight: 700;
}
.footer-showroom .logo-footer img{
margin-bottom: 15px;
display: block
}
.footer-showroom .logo-footer img{
width: auto;
max-width: 100%;
height: 70px;
margin-bottom: 10px
}
.footer-showroom{
padding-bottom: 0;
}
.footer-showroom .block-box{
margin-bottom: 30px
}
.relative{
position: relative;
top: 0
}
.color-black, .color-black a{
color: #333 !important
}
.title-page{
color: #333;
font-size: 18px;
font-weight: 700;
}
.info-detail-t{
display: flex;
align-items: center
}
.info-detail-t img{
width: 40px;
height: 40px;
flex-basis: 40px;
margin-right: 16px;
}
.info-detail-t .info{
flex: 1
}
.info-detail-t label{
display: block;
color: #828282;
font-size: 14px;
font-weight: 400;
margin-bottom: 4px
}
.border-l{
border-left: 1px solid rgba(0, 0, 0, 0.11);
padding-left: 25px
}
.btn-report{
display: flex;
padding: 8px 24px;
justify-content: center;
align-items: center;
gap: 4px;
border-radius: 999px;
border: 1px solid #F00;
color: #F00;
background: none
}
.btn-report svg{
width: 24px;
height: 24px;
}
.btn-report:hover, .btn-report:active, .btn-report:focus, .btn-report:active:hover{
color: #fff;
background: #F00
}
.btn-report:hover svg, .btn-report:active svg, .btn-report:focus svg, .btn-report:active:hover svg{
fill: #fff
}
.des-report{
text-align: center;
color: #7F85A2;
}
textarea.form-control{
padding: 15px
}
.form-report textarea{
resize: vertical;
height: 180px
}
.detail-tinxe-info .avt{
border-radius: 50%;
width: 80px;
height: 80px;
position: absolute;
border: 6px solid #FFF;
overflow: hidden;
left: 24px;
bottom: -40px;
background: #fff;
box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: roboto;
}
.detail-tinxe-info .avt img{
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover
}
.detail-tinxe-info .add{
position: relative;
padding-left: 28px;
}
.detail-tinxe-info .add:before{
content:'';
width: 20px;
height: 20px;
background: url(../images/map-black.svg) no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0
}
.info-hang-xe{
display: block
}
.info-hang-xe .img{
width: 200px;
height: 200px;
border-radius: 6px;
background: #FFF;
position: relative;
margin-right: 20px;
margin-bottom: 20px;
padding: 10px;
float: left
}
.info-hang-xe .img img{
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover
}
.info-hang-xe .info{
flex: 1
}
.mrg-b-0{
margin-bottom: 0
}
.input-vnd{
position: absolute;
top: 12px;
right: 15px;
padding-left: 10px;
color: #7F85A2;
}
.input-vnd:before{
width: 1px;
height: 13px;
content: '';
background: #7F85A2;
display: inline-block;
position: absolute;
top: 3px;
left: 0;
}
.pdd-r-70{
padding-right: 70px
}
#check-report{
display: flex;
align-items: center;
gap: 10px;
}
#check-report .input-box-p[type=checkbox]:checked+label{
background: #2070E8;
color: #fff;
font-size: 14px;
font-weight: 400;
}
#check-report .input-box{
border-radius: 999px;
border: 1px solid #E9E9EC;
padding: 8px 16px;
font-size: 14px;
font-weight: 400;
cursor: pointer;
white-space: nowrap;
}
.modal-content{
max-width: 80vw;
margin: auto;
max-height: 80vh;
}
.modal-content svg{
fill: #fff
}
.detail-mn .price{
color: #fff;
}
.sidebar{
padding: 20px;
background: #2070E8;
height: 100vh;
}
.topbar{
padding: 20px;
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #E6E6E6;
margin: 0 -20px 20px -20px;
}
.full-height{
height: 100vh;
}
.topbar .avt{
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
overflow: hidden
}
.topbar .avt img{
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
position: absolute
}
.topbar h2{
color: #404040;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
.pdd-0{
padding: 0
}
.ul-sidebar{
padding: 0;
margin: 0;
margin-top: 20px
}
.ul-sidebar a{
color: #fff;
padding: 10px 16px;
display: flex;
align-items: center;
border-radius: 8px
}
.ul-sidebar .icon{
width: 20px;
height: 20px;
margin-right: 8px
}
.ul-sidebar li{
margin-bottom: 8px
}
.ul-sidebar li.active a, .ul-sidebar a:hover, .ul-sidebar a:focus{
background: rgba(255, 255, 255, 0.20);
}
.trang-ca-nhan .box-right{
padding-right: 30px;
max-height: 100vh;
min-height: 100vh;
}
.content-trang-ca-nhan{
overflow-y: auto;
height: calc(100vh - 110px);
overflow-x: hidden
}
.trang-ca-nhan .box{
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.11);
overflow: hidden;
padding: 16px;
margin-bottom: 20px;
position: relative
}
.trang-ca-nhan .box .bg-img{
position: absolute;
right: 5px;
overflow: hidden;
bottom: 5px;
width: 80px;
height: 65px;
}
.trang-ca-nhan .box .bg-img img{
z-index: 1;
position: absolute;
height: 48px;
width: 48px;
bottom: 0;
right: 5px;
}
.trang-ca-nhan .box .bg-img:before{
content: '';
width: 100px;
height: 100px;
display: inline-block;
background: #F7F8FA;
border-radius: 50%;
position: absolute;
right: -30px;
bottom: -40px;
z-index: 0;
}
.trang-ca-nhan .box h4{
margin-bottom: 16px;
font-weight: 400
}
.trang-ca-nhan .number{
font-size: 26px;
font-weight: 600;
margin-right: 75px
}
.trang-ca-nhan .box-no-border{
margin: 10px 0
}
.trang-ca-nhan h3{
color: #404040;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px
}
.trang-ca-nhan h4{
color: #404040;
font-size: 16px;
font-weight: 700;
margin-bottom: 8px
}
.trang-ca-nhan h5{
color: #404040;
font-size: 16px;
font-weight: 700;
margin-bottom: 10px
}
.info-ck{
text-align: center
}
.info-ck .title{
font-size: 20px;
font-weight: 400
}
.info-ck .des{
color: #646464
}
.info-ck .qr{
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
border-radius: 5px;
border: 1px solid #ddd;
max-width: 100%;
max-width: 200px;
}
.so_tien_first{
margin-bottom: 30px;
}
.span_icon_copy i{
font-size: 20px;
color: #ccc;
cursor: pointer;
}
.thong_bao_sai_ma_giam_gia{
color: #2070E8;
}
.info-ck .money{
color: #404040;
font-size: 20px;
font-weight: 700;
}
.info-ck-2 ul{
padding: 0;
margin: 0
}
.info-ck-2 ul li{
margin-bottom: 8px
}
.info-ck-2 .alert{
text-align: center;
color: #fff;
border-radius: 8px;
padding: 10px;
background: #2070E8;
margin-bottom: 0;
margin-top: 20px;
}
.overflow-hidden{
overflow: hidden
}
.trang-ca-nhan .tab{
justify-content: unset;
gap: 48px
}
.trang-ca-nhan .tab>li>a{
color: #8B96A5;
font-size: 16px;
font-weight: 600;
}
.trang-ca-nhan .tab>li.active>a{
border-bottom: 3px solid #2070E8;
color: #2070E8;
}
.trang-ca-nhan .tab>li>a>span{
margin-right: 8px
}
.trang-ca-nhan .tab-content{
padding: 20px 0
}
.alert-blue, .alert-red, .alert-green, .alert-gray{
border-radius: 4px;
display: flex;
padding: 3px 4px;
justify-content: center;
align-items: center;
display: inline-block;
}
.alert-blue{
color: #00A3FF;
background: #DAE8FF;
}
.alert-red{
color: #FE0000;
background: #FFD1D1;
}
.alert-green{
background: #BDFFAC;
color: #29C003;
}
.alert-gray{
color: #8C8C8C;
background: #F2F3F4;
}
.tt-list{
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, 0.11);
padding: 10px;
margin-bottom: 20px
}
.tt-list:last-child{
margin-bottom: 0
}
.tt-list .info{
display: flex
}
.tt-list .info-f ul{
padding: 0;
margin: 0
}
.tt-list .info-f li{
margin-bottom: 10px
}
.tt-list .info-f li:last-child{
margin-bottom: 0
}
.tt-list h3{
font-size: 16px;
font-weight: 700;
}
.tt-list .image{
flex-basis: 155px;
margin-right: 20px;
border-radius: 4px;
overflow: hidden
}
.tt-list .price{
color: #2070E8;
font-size: 20px;
font-weight: 700;
margin: 5px 0;
}
.tt-list .btn-outline-light{
color: #000 !important;
font-weight: 700 !important;
margin-bottom: 10px
}
.tt-list .btn-outline-light:last-child{
margin-bottom: 0
}
.gap-10{
gap: 10px
}
#noi_dung_tin_dang{
line-height: 1.8
}
#noi_dung_tin_dang img{
max-width: 100%;
height: auto;
}
.user-info{
display: flex;
align-items: center;
}
.user-info .img{
flex-basis: 140px;
margin-right: 20px;
cursor: pointer
}
.user-info .img-square{
margin-bottom: 5px;
border: 1px solid #ddd;
border-radius: 5px
}
.user-info .img h5{
padding: 5px;
border-radius: 5px;
background: #2070E8;
color: #fff;
font-weight: 400;
font-size: 12px;
text-align: center;
margin-bottom: 0
}
.user-info .user-info-if{
flex: 1
}
.user-info .user-info-if ul{
padding: 0;
margin: 0
}
.user-info .user-info-if ul li{
margin-bottom: 10px
}
.user-info .user-info-if ul li:last-child{
margin-bottom: 0
}
.user-info .user-info-if ul a{
display: flex;
align-items: center
}
.user-info .user-info-if ul .fa{
font-size: 20px;
color: #2070E8;
margin-right: 8px
}
.input-group-addon{
padding: 0;
border: none;
background: none
}
.hien_noi_dung_them{
padding: 20px;
background: #D4E6FF;
border-radius: 5px;
margin-bottom: 10px;
display: none;
}
.box_lay_noi_dung_hang{
display: flex;
}
.box_img_hang_xe img{
height: 80px;
width: 80px;
object-fit: contain;
}
.box_img_hang_xe{
padding: 10px;
}
.noi_dung_thong_tin_them_hang_xe h2{
margin-bottom: 10px;
}
.header_first{
background: #F4F4F4;
}
.header_first_box{
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 8px;
font-size: 14px;
height: 40px;
display: flex;
}
.header_first_box > div{
flex: 4;
}
.header_first_box > div.box_tai_khoan{
text-align: right;
flex: 1;
}
.box_con_tai_khoan{
white-space: nowrap;
cursor: pointer;
}
.dropdown_tai_khoan{
right: 0px;
padding: 0px 0px 10px 0px;
min-width: 300px;
left: unset;
border-radius: 0px;
}
.bnn-owl .owl-prev img{
top: 10px;
left: 8px;
}
.bnn-owl .owl-next img{
top: 10px;
left: 10px;
}
.dropdown_tai_khoan_trong_menu{
right: 0px;
padding: 0px;
min-width: 250px;
left: unset;
border-radius: 0px;
}
.item_dropdown{
background: #dcdcdc;
padding: 5px 10px;
font-weight: 600;
}
.item_dropdown_con{
background: #fff;
padding: 5px 10px;
font-weight: 500;
}
.box_user_no_login img{
height: 40px;
margin-right: 10px;
}
.box_user_no_login{
padding: 10px;
}
.box_user_no_login a{
margin: 10px;
}
.item_dropdown_con span{
display: inline-block;
background: #fff;
border: solid 1px #2070E8;
height: 30px;
width: 30px;
border-radius: 100%;
line-height: 30px;
text-align: center;
margin-right: 5px;
}
.item_dropdown_con i{
color: #2070E8;
}
.dropdown-menu{
font-size: 14px
}
.pdd-t-0{
padding-top: 0
}
.tab-style-10{
text-align: center;
padding: 0;
margin: 0;
display: flex;
gap: 10px;
align-items: center;
justify-content: center
}
.tab-style-10 li{
background: #eee;
border-radius: 10px 10px 0 0;
display: inline-block
}
.tab-style-10 li>a{
padding: 10px 30px;
font-size: 18px;
color: #333;
font-weight: 700;
overflow: hidden;
display: block;
}
.tab-style-10 li.active a{
background: #fff;
color: #2070E8
}
.tab-style-10 li>a>span{
display: block;
font-size: 12px;
margin-top: 5px;
color: #999;
font-weight: 400
}
.trang-ca-nhan .tab-content-style-10{
padding: 40px 30px;
background: #fff
}
#info_detail .header-bg{
margin-bottom: 0;
position: absolute;
height: 300px;
width: 100%;
}
#info_detail .header-bg::after{
z-index: 0
}
.product-detail{
margin-top: 60px
}
.color-red{
color: red
}
.box-goi-tin{
border-radius: 10px;
background: #FFF;
position: relative;
padding: 24px 15px;
margin-bottom: 20px;
box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);
}
.box-goi-tin .title{
display: flex;
margin-bottom: 30px;
align-items: center;
font-size: 20px;
}
.box-goi-tin .title img{
width: 50px;
height: 50px;
margin-right: 10px;
}
.box-goi-tin .bd-2{
padding: 0;
margin: 0;
}
.box-goi-tin .bd-2 li{
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between
}
.box-goi-tin .bd-2 li .fa{
font-size: 25px;
color: #2070E8
}
.box-goi-tin .price{
font-size: 18px;
}
.box-goi-tin .price-old{
font-size: 12px;
text-decoration: line-through
}
.d-flex-center-center{
display: flex;
align-items: center;
justify-content: center
}
.box-goi-tin .badge-sale{
position: absolute;
top: 15px;
right: -10px;
background: url(../images/23percent.svg) no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 12px;
height: 30px;
width: 126px;
line-height: 30px;
text-align: right;
text-transform: uppercase;
font-weight: 700;
}
.tab-style-11{
box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);
border-radius: 20px;
background: #fff;
padding: 0;
margin: 0;
display: inline-flex;
margin-bottom: 20px
}
.tab-style-11>li>a{
display: inline-block;
border-radius: 20px;
padding: 10px 40px;
}
.tab-style-11>li>a{
background: #fff;
color: #333
}
.tab-style-11>li.active>a{
background: #2070E8;
color: #fff
}
.box-goi-tin.hot-hot{
background: #2070E8;
color: #fff !important;
}
.box-goi-tin.hot-hot h3{
color: #fff
}
.box-goi-tin.hot-hot .price{
color: #fff
}
.box-goi-tin.hot-hot .btn-primary{
background: #fff;
color: #2070E8
}
.tab-content-style-10 .tab-style-11{display:none !important}
.tab-content-style-10 .grid-thang{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
align-items:flex-start;
}
.tab-content-style-10 .grid-thang>.col-thang{
display:block !important;
opacity:1 !important;
visibility:visible !important;
flex:1 1 0;
min-width:280px;
max-width:33.333%;
}
.tab-content-style-10 .grid-thang>.col-thang.fade{opacity:1 !important}
.tab-content-style-10 .grid-thang>.col-thang .title-thang{
text-align:center;
font-size:20px;
font-weight:700;
color:#2070E8;
margin-bottom:15px;
padding:8px 0;
border-bottom:2px solid #2070E8;
}
.tab-content-style-10 .grid-thang>.col-thang .row.d-flex-center-center{
display:block;
margin:0;
}
.tab-content-style-10 .grid-thang>.col-thang .col-md-8{
width:100%;
float:none;
padding:0;
}
@media (max-width: 991px){
.tab-content-style-10 .grid-thang>.col-thang{max-width:100%;flex:1 1 100%}
}
footer .bnn{
display: flex;
gap: 10px;
align-items: center;
}
footer .bnn img{
height: auto
}
.no_row{
margin-left: 0px !important;
margin-right: 0px !important;
}
.flex_rieng{
display: flex;
}
.flex_rieng label{
flex: 1;
line-height: 40px;
}
.flex_rieng select{
flex: 3;
}
.flex_rieng input{
flex: 3;
}
.flex_rieng textarea{
flex: 3;
}
.flex_rieng .select2-container{
flex: 3;
}
.form-dang-tin .noi_dung_bai_dang > .row {
display: flex;
align-items: flex-start;
gap: 26px;
margin-left: 0;
margin-right: 0;
}
.form-dang-tin .noi_dung_bai_dang > .row > [class*="col-"] {
float: none;
flex: 1 1 0;
width: auto;
padding-left: 0;
padding-right: 0;
}
.form-dang-tin .noi_dung_dang {
height: auto;
margin-bottom: 24px;
padding: 24px 28px;
}
.form-dang-tin .noi_dung_dang h2 {
margin-top: 0;
margin-bottom: 22px;
line-height: 1.35;
}
.form-dang-tin .flex_rieng {
display: grid;
grid-template-columns: 135px minmax(0, 1fr);
align-items: center;
column-gap: 24px;
}
.form-dang-tin .flex_rieng label {
flex: none;
line-height: 1.35;
margin-bottom: 0;
padding-top: 0;
}
.form-dang-tin .flex_rieng .form-control,
.form-dang-tin .flex_rieng .select2-container,
.form-dang-tin .dang-tin-field {
width: 100% !important;
min-width: 0;
}
.form-dang-tin .flex_rieng input.form-control,
.form-dang-tin .flex_rieng select.form-control {
height: 50px;
border-radius: 5px;
}
.form-dang-tin .flex_rieng textarea.form-control {
min-height: 124px;
border-radius: 5px;
resize: vertical;
}
.form-dang-tin .select2-container--default .select2-selection--single,
.form-dang-tin .select2-container--bootstrap .select2-selection--single {
height: 50px !important;
min-height: 50px;
padding: 0;
border-radius: 5px;
}
.form-dang-tin .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-dang-tin .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
height: 50px;
line-height: 50px !important;
padding-left: 12px;
padding-right: 34px;
}
.form-dang-tin .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-dang-tin .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
height: 50px;
top: 0;
right: 6px;
}
.form-dang-tin .select2-container--default .select2-selection--single .select2-selection__arrow b {
margin-top: -3px;
}
.form-dang-tin .dang-tin-field br {
display: none;
}
.form-dang-tin .uphinh {
min-height: 0;
padding: 24px;
margin: 8px 0 0;
border-radius: 8px;
}
.form-dang-tin .upload-list #image {
margin-left: 0;
margin-right: 0;
gap: 16px;
align-items: stretch;
}
.form-dang-tin .upload-list .image-col {
flex: 0 0 calc(25% - 12px);
max-width: calc(25% - 12px);
padding-left: 0;
padding-right: 0;
}
.form-dang-tin #mediaUpload {
flex: 1 0 100%;
max-width: 100%;
box-sizing: border-box;
min-height: 320px;
margin-top: 0;
border-radius: 8px;
cursor: pointer;
}
.form-dang-tin .alert-uphinh {
width: 100%;
max-width: 420px;
min-width: 0;
font-family: inherit;
}
.form-dang-tin #mediaUpload .input-uphinh input[type="file"] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
}
.form-dang-tin .alert-uphinh h4,
.form-dang-tin .alert-uphinh h5 {
font-family: inherit;
line-height: 1.45;
overflow-wrap: normal;
word-break: normal;
}
.form-dang-tin .alert-uphinh h4 {
font-size: 15px;
}
.form-dang-tin .alert-uphinh h5 {
max-width: 360px;
margin: 0 auto;
font-size: 13px;
}
@media (max-width: 991px) {
.form-dang-tin .noi_dung_bai_dang > .row {
display: block;
}
.form-dang-tin .noi_dung_bai_dang > .row > [class*="col-"] {
width: 100%;
}
}
@media (max-width: 575px) {
.form-dang-tin .noi_dung_dang {
padding: 18px 14px;
}
.form-dang-tin .flex_rieng {
grid-template-columns: 1fr;
row-gap: 8px;
}
.form-dang-tin .flex_rieng input.form-control,
.form-dang-tin .flex_rieng select.form-control {
height: 48px;
}
.form-dang-tin .select2-container--default .select2-selection--single,
.form-dang-tin .select2-container--bootstrap .select2-selection--single,
.form-dang-tin .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-dang-tin .select2-container--bootstrap .select2-selection--single .select2-selection__rendered,
.form-dang-tin .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-dang-tin .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
height: 48px;
line-height: 48px !important;
}
.form-dang-tin .uphinh {
padding: 16px;
}
.form-dang-tin #mediaUpload {
min-height: 240px;
}
.form-dang-tin .upload-list .image-col {
flex-basis: calc(50% - 8px);
max-width: calc(50% - 8px);
}
}
.btn-user{
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
color: #2070E8;
background: #fff;
}
.drop-right{
left: auto;
right: 0
}
.metismenu .sidebar{
position: relative
}
.header-menu{
background: #2070E8;
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between
}
.header-menu .dropdown{
flex-basis: 30px;
}
.pagination>li {
display: inline-block;
margin: 5px;
}
.scroller{
overflow: hidden
}
.description-detail, .bodyhtml{
line-height: 1.7
}
.description-detail h2, .bodyhtml h2{
font-size: 20px
}
.xem_them_hang_xe{
float: right;
color: #2070E8;
font-size: 16px;
font-weight: 500;
}
.slide_showroom_block .owl-stage {
left: -70px;
}
.over-hidden{
overflow: hidden
}
.bold{
font-weight: 700;
}
.color-black{
color: #333
}
.tab-style-20{
margin-bottom: 20px
}
.tab-style-20>li>a{
color: #2070E8
}
.tab-style-20>li.active>a, .tab-style-20>li.active>a:hover, .tab-style-20>li.active>a:focus, .tab-style-20>li>a:hover, .tab-style-20>li>a:focus {
color: #fff;
background: #2070E8;
border-radius: 20px
}
.select2-container .select2-selection--single .select2-selection__rendered {
padding-left: 15px;
}
#hien_thi_hang_xe_lon{
padding: 10px;
}
.t-x-list-m{
margin-bottom: 30px;
background: #fff;
padding: 10px
}
.t-x-list-m .tt{
float: left;
display: flex;
width: calc(100% - 126px);
}
.t-x-list-m .price{
float: right;
font-weight: 700
}
.t-x-list-m .info{
display: flex
}
.t-x-list-m .info .img{
position: relative;
flex-basis: 120px;
margin-right: 15px;
}
.t-x-list-m .info .info-1{
flex: 1;
border-bottom: none;
flex-wrap: wrap;
margin-bottom: 0;
padding-bottom: 0
}
.t-x-list-m .info .info-1 li{
width: 50%;
margin-bottom: 5px
}
.t-x-list-m .info-2{
justify-content: left
}
.t-x-list-m .info-2 .avatar{
width: 25px;
height: 25px
}
.t-x-list-m .info-3 img{
width: 22px;
height: 22px
}
.t-x-list-m .uu-tien{
position: absolute;
top: 3px;
left: 3px;
font-size: 9px;
padding: 2px;
border-radius: 2px;
}
.bao_boc_dang_nhap .btn-block{
width: unset;
}
.form-detail{
padding-top: 20px;
}
.bao_boc_dang_ky{
padding-top: 20px;
}
#modal_dang_ky .modal-dialog{
max-width: 700px;
}
#nang_cao_dang_ky_btn{
cursor: pointer;
}
.pdd-lr-20>a{
line-height: 25px;
height: unset;
padding: 5px 10px;
}
.the_dau{
margin-right: 10px;
}
#hien_thi_hang_xe_nho{
padding: 10px;
}
.hang_xe_truoc_dong_xe{
min-width: 90px;
text-align: center;
padding: 0px;
}
.hang_xe_truoc_dong_xe img{
width: auto;
height: 70px;
object-fit: contain;
}
.hang_xe_truoc_dong_xe > div{
white-space: nowrap;
}
.hang_xe_truoc_dong_xe a{
text-align: center !important;
}
.des-moda-detail{
color: #fff
}
.counter-info{
margin-bottom: 10px;
font-weight: 700
}
.tac-gia .img{
width: 130px;
height: 130px;
overflow: hidden;
border-radius: 50%;
position: relative;
margin: 0 auto;
margin-bottom: 16px
}
.tac-gia .img img{
height: 100%;
width: 100%;
object-fit: cover;
}
.tac-gia .name{
color: #0f1a2a;
font-size: 30px;
font-weight: 700;
margin-bottom: 12px;
}
.tac-gia .description{
text-align: left;
margin-bottom: 16px;
}
.gt-ttx h3{
font-size: 30px;
margin-bottom: 16px;
}
.border-radius-10{
border-radius: 10px
}
.mrg-b-16{
margin-bottom: 16px;
}
.gt-ttx .price{
font-size: 20px;
margin-bottom: 16px;
font-weight: 700
}
.gt-ttx .by{
font-weight: 700
}
.gt-ttx-box{
display: flex;
border-bottom: 1px solid #e6e6e6;
padding-bottom: 24px;
margin-bottom: 24px;
align-items: center
}
.gt-ttx-box:last-child{
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0
}
.ngung_san_xuat{
z-index: 1000;
display: block;
position: absolute;
right: 20px;
bottom: 20px;
background: #000000ab;
color: #fff;
padding: 7px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}
.ngung_san_xuat_nho{
z-index: 1000;
display: block;
position: absolute;
right: 10px;
bottom: 10px;
background: #000000ab;
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}
.xe_tham_khao{
z-index: 1000;
display: block;
position: absolute;
left: 20px;
bottom: 20px;
background: #14532dcc;
color: #fff;
padding: 7px 15px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}
.xe_tham_khao_nho{
z-index: 1000;
display: block;
position: absolute;
left: 10px;
bottom: 10px;
background: #14532dcc;
color: #fff;
padding: 5px 12px;
border-radius: 20px;
font-size: 13px;
font-weight: 600;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}
.has-car .color-white{
color:#fff !important;
}
.xem_tat_ca_xe_phan_khuc{
margin-bottom: 10px;
}
.phan_tram_5{
width: 20% !important;
}
.wrap_an_bot{
padding: 10px 0px;
}
.box-specifi>a {
display: block;
overflow: hidden;
background: #f2f4f7;
padding: 15px 10px;
color: #000;
line-height: 20px;
font-weight: 600;
position: relative;
border-radius: 8px;
}
.box-specifi {
display: block;
overflow: hidden;
margin: 0 0 10px;
}
.box-specifi .text-specifi.active {
display: block;
}
.box-specifi .text-specifi {
padding-left: 0px;
overflow: hidden;
}
.text-specifi li {
display: block;
overflow: hidden;
padding: 10px;
border-bottom: 1px solid #eaecf0;
}
.text-specifi li aside:first-child {
float: left;
width: 60%;
max-width: 60%;
margin-right: 30px;
}
.text-specifi li aside strong {
display: block;
overflow: hidden;
line-height: 20px;
font-weight: 600;
color: #344054;
}
.text-specifi li aside:last-child {
display: block;
overflow: hidden;
}
.text-specifi li aside span {
display: block;
overflow: hidden;
line-height: 20px;
color: #344054;
font-weight: 400;
}
.tooltip-text {
visibility: hidden;
background-color: #2070E8;
color: #fff;
text-align: center;
padding: 8px 12px;
border-radius: 6px;
position: absolute;
right: 0;
top: -15px;
width: max-content;
min-width: 150px;
max-width: 100%;
white-space: nowrap;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
opacity: 0;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
font-size: 14px;
transform: translateY(5px);
z-index: 1000;
}
.tooltip-container.show .tooltip-text {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.tooltip-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 20px;
border-width: 6px;
border-style: solid;
border-color: transparent transparent #2070E8 transparent;
}
.saboxplugin-wrap .saboxplugin-gravatar {
float: left;
padding: 0 20px 20px 0px;
}
.saboxplugin-wrap .saboxplugin-gravatar img {
max-width: 100px;
height: auto;
border-radius: 0;
}
.saboxplugin-wrap .saboxplugin-authorname {
font-size: 18px;
line-height: 25px;
}
.saboxplugin-wrap .saboxplugin-authorname {
font-size: 18px;
line-height: 1;
margin: 20px 0 0 20px;
display: block;
}
.saboxplugin-wrap .saboxplugin-authorname a {
text-decoration: none;
}
.author-check p {
padding-bottom: 0;
margin-bottom: 0;
}
.saboxplugin-wrap .author-check svg {
width: 16px;
}
.saboxplugin-wrap .author-check {
display: flex;
align-items: center;
gap: 6px;
margin-top: 5px;
margin-bottom: 10px;
color: #32C732;
}
.btn_dang_tin_mobile{
padding: 10px 14px;
color: #fff !important;
border: 1px solid #fff;
font-size: 14px;
font-weight: 600;
border-radius: 9px;
transition: .25s;
text-align: center;
background: #2070E8;
}
.check_mui_ten i{
float: right;
}
.car-action-buttons {
display: flex;
gap: 12px;
font-family: sans-serif;
margin-bottom: 20px;
}
.btn-car-outline,
.btn-car-solid {
display: flex;
align-items: center;
padding: 10px 16px;
border-radius: 8px;
font-size: 14px;
cursor: pointer;
border: none;
transition: 0.2s;
}
.btn-car-outline {
border: 1px solid #ddd;
background-color: #fff;
color: #1a5df1;
}
.btn-car-outline:hover {
background-color: #f5f5f5;
}
.btn-car-solid {
background-color: #4a7cff;
color: #fff;
}
.btn-car-icon {
width: 20px;
height: 20px;
margin-right: 8px;
}
.white-icon {
filter: brightness(0) invert(1);
}
.btn-tab {
background-color: white;
color: black;
border: 1px solid #ccc;
}
.btn-tab.active {
background-color: #3366ff;
color: white;
}
.btn-tab.active img {
filter: brightness(0) invert(1);
}
.brand-box {
border-radius: 6px;
background: #FFF;
position: relative;
padding: 24px;
margin-bottom: 20px;
box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.06);
}
.brand-box h2 {
font-size: 24px;
margin-bottom: 12px;
}
.brand-grid-hang-xe {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.brand-item {
text-align: center;
font-size: 14px;
border: 1px solid #e0e0e0;
padding: 12px 0;
border-radius: 6px;
background-color: #fff;
aspect-ratio: 1 / 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.brand-item:hover {
box-shadow: 0 0 6px rgba(0,0,0,0.1);
cursor: pointer;
}
.brand-item img {
width: 40px;
height: 40px;
object-fit: contain;
margin-bottom: 6px;
}
.qa-box {
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: sans-serif;
}
.qa-box h2 {
font-size: 20px;
margin-bottom: 16px;
}
.qa-item {
border-bottom: 1px solid #eee;
}
.qa-question {
display: flex;
justify-content: space-between;
cursor: pointer;
padding: 5px 0;
align-items: center;
}
.qa-meta {
font-size: 13px;
color: #666;
margin-bottom: 4px;
}
.qa-toggle {
font-size: 24px;
transition: transform 0.3s ease;
}
.qa-item.active .qa-toggle {
transform: rotate(45deg);
}
.qa-answer {
display: none;
padding: 0 0 12px 0;
font-size: 16px;
color: #333;
}
.qa-item.active .qa-answer {
display: block;
}
.pros-cons-container {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.pros, .cons {
flex: 1 1 300px;
}
.pros h3 {
color: #198754;
font-size: 18px;
margin-bottom: 10px;
}
.cons h3 {
color: #ffc107;
font-size: 18px;
margin-bottom: 10px;
}
.pros ul, .cons ul {
list-style: none;
padding: 0;
margin: 0;
}
.pros ul li {
position: relative;
padding-left: 24px;
margin-bottom: 8px;
color: #198754;
}
.pros ul li::before {
content: "\2714";
color: #198754;
font-family: Arial, "Segoe UI Symbol", sans-serif;
font-weight: 700;
position: absolute;
left: 0;
top: 0;
}
.cons ul li {
position: relative;
padding-left: 24px;
margin-bottom: 8px;
color: #d63384;
}
.cons ul li::before {
content: "\274C";
color: #d63384;
font-family: Arial, "Segoe UI Symbol", sans-serif;
font-weight: 700;
position: absolute;
left: 0;
top: 0;
}
.rating-box {
font-family: sans-serif;
}
.rating-title {
font-weight: 600;
color: #333;
margin-bottom: 30px;
border-bottom: 3px solid #3b3fbf;
display: block;
padding-bottom: 4px;
}
.rating-score {
margin-top: 8px;
display: flex;
align-items: center;
gap: 5px;
}
.rating-score .score {
color: #3b3fbf;
font-size: 30px;
font-weight: bold;
}
.rating-score .max-score {
color: #333;
font-size: 16px;
display: contents;
align-content: end;
}
.rating-score .stars {
color: gold;
font-size: 16px;
}
.rating-list {
display: flex;
flex-direction: column;
gap: 12px;
font-family: sans-serif;
max-width: 600px;
}
.rating-item {
display: flex;
align-items: center;
gap: 12px;
}
.rating-item .label {
flex: 1;
font-size: 14px;
color: #333;
text-align: left;
padding-left: 0px;
}
.rating-item .bar {
flex: 2;
background: #e6e9ef;
height: 8px;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.rating-item .fill {
background: #f1c40f;
height: 100%;
border-radius: 4px 0 0 4px;
transition: width 0.4s;
}
.rating-item .score {
font-size: 14px;
font-weight: bold;
color: #3b3fbf;
width: 32px;
text-align: right;
}
h3.ten_dong_xe{
padding: 10px;
text-align: center;
}
.btn_bo_cong{
border-radius: 30px;
padding-left: 15px;
padding-right: 15px;
}
.photo-grid {
width: 100%;
display: flex;
flex-direction: column;
gap: 10px;
border-radius: 8px;
overflow: hidden;
font-family: sans-serif;
}
.small-photos {
display: flex;
gap: 10px;
}
.small-photo {
flex: 1;
}
.video-card {
width: 100%;
border-radius: 8px;
overflow: hidden;
font-family: sans-serif;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
background: #fff;
}
.duration {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 12px;
padding: 2px 5px;
border-radius: 4px;
}
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 48px;
opacity: 0.8;
}
.video-info {
padding: 12px;
}
.video-title {
font-size: 16px;
font-weight: bold;
margin: 0 0 8px;
color: #222;
}
.video-meta {
font-size: 12px;
color: #666;
margin: 0;
}
.video-wrapper {
position: relative;
width: 100%;
padding-top: 75%;
overflow: hidden;
border-radius: 8px 8px 0px 0px;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.product_right .table>tbody>tr>td, .table>thead>tr>th{
padding: 10px;
}
.danh_gia_tong_the{
display: flex;
align-items: center;
}
.danh_gia_tong_the label{
font-size: 15px;
}
.select-xe img{
filter: brightness(0) invert(1);
}
.select-xe.active img{
filter: invert(34%) sepia(85%) saturate(2987%) hue-rotate(205deg) brightness(95%) contrast(95%);
}
.keyword_blk {
float: left;
padding-bottom: 12px;
width: 100%;
}
.keyword_blk ul {
margin: 0px 0px 10px 0px;
padding: 0;
width: 100%;
}
.keyword_blk li {
height: 32px;
list-style: disc;
margin: 0 10px 0 28px;
padding: 5px;
color: #777;
float: left;
width: 16%;
font-size: 14px;
}
.keyword_blk li a {
color: #333;
font-size: 15px;
}
.border_top_hang_xe{
border-top: 1px solid;
margin: 10px;
color: red;
}
.suggest-box {
overflow: hidden;
margin-bottom: 10px;
}
.yellow-box>h3, .yellow-box>h2 {
margin: 0;
padding-top: 5px;
height: 31px;
padding-left: 20px;
color: #c83d14;
font-size: 15px;
background: #fef1ac;
border: 1px solid #ffb64b;
border-radius: 3px 3px 0 0;
}
.suggest-box>h3 {
height: auto;
padding-bottom: 3px;
}
.y-box-content {
}
#fmodel_list {
float: left;
width: 100%;
}
#fmodel_list ul {
margin: 0;
float: left;
padding: 10px 0;
}
#fmodel_list li {
float: left;
width: 85px;
padding: 4px 2px 2px 23px;
min-height: 30px;
line-height: 16px;
}
#fmodel_list a, #fmodel_list a h3 {
line-height: 16px;
font-size: 16px;
}
#fmodel_list li .active, #fmodel_list li .active h3 {
color: #c83d14;
font-weight: bold;
}
#header.active_header {
z-index: 2000;
}
.active_header .main-menu .sub-menu,
.active_header .main-menu .sub-menu-2 {
z-index: 2001;
}
.anchor-bar {
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
z-index: -1;
}
.anchor-bar.active {
transform: translateY(0);
z-index: 1001;
}
.anchor-bar .detail-mn {
flex: 1;
justify-content: flex-end;
overflow: hidden;
}
.anchor-bar .detail-mn .mn-bar {
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
.anchor-bar .detail-mn .mn-bar ul {
align-items: center;
display: flex;
gap: 26px;
margin: 0;
}
.anchor-bar .detail-mn .mn-bar li {
margin-right: 0;
}
.anchor-bar .detail-mn .mn-bar a {
color: #111827;
display: inline-flex;
font-size: 16px;
font-weight: 500;
padding: 8px 0 9px;
}
.anchor-bar .detail-mn .mn-bar li a.active {
border-color: #e60000;
color: #0b5ff0;
}
.danh-sach.is-position-fixed,
.is-position-fixed.danh-sach {
border-radius: 12px !important;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
top: 156px !important;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 1000 !important;
}
.is-position-fixed .js-toc {
max-height: calc(100vh - 178px) !important;
}
.btn-danh-sach-show {
align-items: center;
background: #fff !important;
border: 2px solid #333 !important;
border-radius: 8px !important;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12) !important;
color: #334155 !important;
font-size: 24px !important;
font-weight: 700;
height: 50px;
justify-content: center;
line-height: 1;
min-width: 0;
opacity: 1;
padding: 0 !important;
right: max(12px, calc((100vw - 1170px) / 2 - 130px)) !important;
transform: translateX(0);
transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
top: 156px !important;
width: 50px;
z-index: 1002 !important;
}
.btn-danh-sach-show:hover {
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18) !important;
opacity: 1 !important;
transform: translateY(-1px);
}
.btn-danh-sach-show span {
display: none;
}
.btn-danh-sach-show .fa {
margin-right: 0;
}
.head-danh-sach {
background: #fff;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
z-index: 2;
}
@media (max-width: 767px) {
.danh-sach.is-position-fixed,
.is-position-fixed.danh-sach,
.btn-danh-sach-show {
top: 128px !important;
}
.btn-danh-sach-show {
height: 46px;
right: 12px !important;
width: 46px;
}
.btn-danh-sach-show span {
display: none;
}
}
.phankhuc-detail-page {
color: #0f172a;
}
.phankhuc-detail-page .box-simple,
.phankhuc-detail-page .box-simple-unset,
.phankhuc-detail-page .block-box {
border: 1px solid #e5eaf2;
border-radius: 8px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.phankhuc-detail-page .box-simple-unset,
.phankhuc-detail-page .block-box {
background: #fff;
margin-bottom: 24px;
padding: 22px;
}
.phankhuc-hero {
background: #fff;
margin-bottom: 24px;
overflow: hidden;
padding: 0 !important;
}
.phankhuc-hero .info-hang-xe {
align-items: stretch;
display: grid;
gap: 0;
grid-template-columns: 240px minmax(0, 1fr);
}
.phankhuc-hero .info-hang-xe .img {
background: #f4f7fb;
border-right: 1px solid #e5eaf2;
display: flex;
min-height: 220px;
padding: 28px;
}
.phankhuc-hero .img-square {
aspect-ratio: 1;
background: #fff;
border-radius: 8px;
box-shadow: inset 0 0 0 1px #e5eaf2;
margin: auto;
max-width: 160px;
overflow: hidden;
width: 100%;
}
.phankhuc-hero .img-square img {
height: 100%;
object-fit: contain;
padding: 18px;
width: 100%;
}
.phankhuc-hero .info {
padding: 28px 30px 24px;
}
.phankhuc-hero h1 {
color: #002c6c;
font-family: Georgia, "Times New Roman", serif;
font-size: 34px;
font-weight: 700;
line-height: 1.18;
margin: 0 0 14px;
}
.phankhuc-hero .bodyhtml {
color: #334155;
font-size: 16px;
line-height: 1.72;
}
.phankhuc-hero .bodyhtml img {
border-radius: 8px;
height: auto;
max-width: 100%;
}
.phankhuc-hero .bodyhtml table {
display: block;
max-width: 100%;
overflow-x: auto;
}
.phankhuc-hero .xem-them {
border-radius: 999px;
margin-top: 10px;
padding: 9px 18px;
}
.phankhuc-detail-page .heading-simple {
align-items: center;
border-bottom: 1px solid #edf1f6;
color: #0f172a;
display: flex;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: 800;
line-height: 1.25;
margin: 0 0 18px;
padding: 0 0 14px;
}
.phankhuc-detail-page .heading-simple:before {
background: #2070e8;
border-radius: 999px;
content: "";
display: inline-block;
height: 24px;
margin-right: 10px;
width: 4px;
}
.phankhuc-price-grid,
.phankhuc-listing-grid {
display: flex;
flex-wrap: wrap;
}
.phankhuc-price-col,
.phankhuc-listing-col {
display: flex;
margin-bottom: 18px;
}
.phankhuc-detail-page .product-grid,
.phankhuc-detail-page .product-grid-2,
.phankhuc-detail-page .news-grid {
background: #fff;
border: 1px solid #dfe6ef;
border-radius: 8px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
width: 100%;
}
.phankhuc-detail-page .product-grid:hover,
.phankhuc-detail-page .product-grid-2:hover,
.phankhuc-detail-page .news-grid:hover {
border-color: #b8c7dd;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
transform: translateY(-1px);
}
.phankhuc-detail-page .product-grid .img-4-3,
.phankhuc-detail-page .product-grid-2 .img-4-3 {
background: #eef2f7;
padding-top: 68% !important;
}
.phankhuc-detail-page .product-grid .img-4-3 img,
.phankhuc-detail-page .product-grid-2 .img-4-3 img,
.phankhuc-detail-page .news-grid .img-16-9 img {
height: 100%;
object-fit: cover;
width: 100%;
}
.phankhuc-detail-page .product-grid .info,
.phankhuc-detail-page .product-grid-2 .info,
.phankhuc-detail-page .news-grid .info {
display: flex;
flex: 1;
flex-direction: column;
padding: 14px;
}
.phankhuc-detail-page .product-grid h3,
.phankhuc-detail-page .product-grid-2 h3,
.phankhuc-detail-page .news-grid h3 {
color: #164ecf;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
margin: 0 0 10px;
}
.phankhuc-detail-page .product-grid h3 a,
.phankhuc-detail-page .product-grid-2 h3 a,
.phankhuc-detail-page .news-grid h3 a {
color: inherit;
}
.phankhuc-detail-page .product-grid .price,
.phankhuc-detail-page .product-grid-2 .price {
color: #e60000;
font-size: 19px;
font-weight: 800;
line-height: 1.25;
margin: 2px 0 12px;
}
.phankhuc-detail-page .product-grid .btn-outline,
.phankhuc-detail-page .product-grid-2 .btn-outline,
.phankhuc-detail-page .product-grid-2 .btn-primary {
border-radius: 6px;
font-weight: 700;
min-height: 40px;
}
.phankhuc-detail-page .product-grid .btn-outline {
margin-top: auto;
}
.phankhuc-detail-page .product-grid-2 .info-b {
color: #475569;
font-size: 13px;
margin-top: auto;
}
.phankhuc-detail-page .product-grid-2 .info .location {
color: #008577;
font-weight: 700;
line-height: 1.35;
margin-bottom: 10px;
}
.phankhuc-detail-page .product-grid-2 .info .info-b ul {
border-top: 1px solid #edf1f6;
display: flex;
flex-wrap: wrap;
gap: 7px 10px;
margin: 10px 0 12px;
padding-top: 10px;
}
.phankhuc-detail-page .product-grid-2 .info .info-b ul > li {
background: #f7f9fc;
border-radius: 999px;
color: #334155;
display: inline-flex;
font-size: 12px;
font-weight: 700;
margin: 0;
padding: 5px 9px;
width: auto;
}
.phankhuc-detail-page .product-grid-2 .info .info-b ul > li img,
.phankhuc-detail-page .product-grid-2 .info .location img {
display: none;
}
.phankhuc-detail-page .product-grid-2 .d-flex-two {
gap: 10px;
}
.phankhuc-showroom-card {
border-radius: 8px !important;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
padding: 18px !important;
}
.phankhuc-showroom-card .flex-balance {
align-items: flex-start;
gap: 12px;
}
.phankhuc-showroom-card h3 {
color: #0f172a;
font-size: 22px;
font-weight: 800;
margin: 0;
}
.phankhuc-showroom-card .select2-container {
min-width: 150px;
}
.phankhuc-showroom-card .alert-info {
background: #eef5ff;
border: 1px solid #d8e6ff;
border-radius: 8px;
color: #174a9c;
padding: 10px 12px;
}
.phankhuc-showroom-card .showroom-list {
max-height: 430px;
overflow: auto;
padding-right: 4px;
}
.phankhuc-showroom-card .showroom-list li {
border-bottom: 1px solid #edf1f6;
margin-bottom: 14px;
padding-bottom: 14px;
}
.phankhuc-news-section #tin_lienquan {
display: grid;
gap: 18px;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
}
.phankhuc-news-section #tin_lienquan > [class*="col-"] {
float: none;
padding: 0;
width: auto;
}
.phankhuc-news-section .news-grid .img-16-9 {
background: #eef2f7;
padding-top: 56.25%;
}
.phankhuc-news-section .news-grid .info .des {
color: #475569;
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 991px) {
.phankhuc-hero .info-hang-xe {
grid-template-columns: 1fr;
}
.phankhuc-hero .info-hang-xe .img {
border-right: 0;
border-bottom: 1px solid #e5eaf2;
min-height: 170px;
}
.phankhuc-news-section #tin_lienquan {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.phankhuc-detail-page .box-simple-unset,
.phankhuc-detail-page .block-box {
padding: 16px;
}
.phankhuc-hero h1 {
font-size: 28px;
}
.phankhuc-price-col,
.phankhuc-listing-col {
width: 100%;
}
.phankhuc-news-section #tin_lienquan {
grid-template-columns: 1fr;
}
}
.loaixe-listing-section .loaixe-listing-grid {
display: flex;
flex-wrap: wrap;
}
.loaixe-listing-section .loaixe-listing-col {
display: flex;
margin-bottom: 24px;
}
.loaixe-listing-section .product-grid-2 {
background: #fff;
border: 0;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
width: 100%;
}
.loaixe-listing-section .product-grid-2:hover {
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
}
.loaixe-listing-section .product-grid-2 .img-4-3 {
background: #e9eef4;
display: block;
padding-top: 75% !important;
}
.loaixe-listing-section .product-grid-2 .img-4-3 img {
height: 100%;
object-fit: cover;
width: 100%;
}
.loaixe-listing-section .product-grid-2 .info {
color: #24364d;
display: flex;
flex: 1;
flex-direction: column;
padding: 18px 18px 16px;
}
.loaixe-listing-section .product-grid-2 h3 {
color: #075ff0;
display: -webkit-box;
font-family: Georgia, "Times New Roman", serif;
font-size: 17px;
font-weight: 500;
line-height: 1.35;
margin: 0 0 22px;
min-height: 46px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.loaixe-listing-section .product-grid-2 h3 a {
color: inherit;
}
.loaixe-listing-section .product-grid-2 .price {
color: #e60000;
font-size: 23px;
font-weight: 800;
line-height: 1.2;
margin: 0 0 14px;
}
.loaixe-listing-section .loaixe-card-desc {
color: #25364d;
display: -webkit-box;
font-size: 15px;
line-height: 1.45;
margin: 0 0 24px;
min-height: 65px;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.loaixe-listing-section .product-grid-2 .info-b {
margin-top: auto;
}
.loaixe-listing-section .product-grid-2 .location {
color: #008577;
display: block;
font-size: 15px;
font-weight: 500;
height: auto !important;
line-height: 1.35;
margin-bottom: 18px;
}
.loaixe-listing-section .product-grid-2 .location:before {
color: #008577;
content: "\f041";
font-family: FontAwesome;
margin-right: 8px;
}
.loaixe-listing-section .loaixe-card-specs {
align-items: center;
border-top: 1px solid #e5eaf2;
display: flex !important;
flex-wrap: nowrap;
gap: 0;
justify-content: space-between;
margin: 0 0 18px !important;
padding: 12px 0 0 !important;
}
.loaixe-listing-section .loaixe-card-specs > li {
background: transparent !important;
color: #111827;
display: block !important;
flex: 1 1 0;
font-size: 13px;
font-weight: 500;
line-height: 1.25;
margin: 0 !important;
min-width: 0;
overflow: hidden;
padding: 0 4px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: auto !important;
}
.loaixe-listing-section .loaixe-card-specs > li:first-child {
padding-left: 0;
text-align: left;
}
.loaixe-listing-section .loaixe-card-specs > li:last-child {
padding-right: 0;
text-align: right;
}
.loaixe-listing-section .product-grid-2 .d-flex-two {
display: flex;
gap: 12px;
margin-top: 0;
}
.loaixe-listing-section .product-grid-2 .btn-primary,
.loaixe-listing-section .product-grid-2 .btn-outline {
align-items: center;
background: #1f6fea;
border: 1px solid #1f6fea;
border-radius: 5px;
color: #fff;
display: inline-flex;
flex: 1 1 0;
font-size: 15px;
font-weight: 700;
justify-content: center;
min-height: 44px;
padding: 0 10px;
text-align: center;
}
.loaixe-listing-section .product-grid-2 .btn-outline:hover,
.loaixe-listing-section .product-grid-2 .btn-primary:hover {
background: #155ec9;
border-color: #155ec9;
color: #fff;
}
@media (max-width: 767px) {
.loaixe-listing-section .loaixe-listing-col {
width: 100%;
}
.loaixe-listing-section .product-grid-2 .info {
padding: 16px;
}
.loaixe-listing-section .product-grid-2 h3 {
font-size: 17px;
margin-bottom: 16px;
min-height: 0;
}
.loaixe-listing-section .product-grid-2 .price {
font-size: 22px;
}
.loaixe-listing-section .loaixe-card-desc,
.loaixe-listing-section .product-grid-2 .location {
font-size: 15px;
}
.loaixe-listing-section .loaixe-card-specs > li {
font-size: 12px;
padding: 0 3px;
}
}
.form-dang-tin .flex_rieng input.form-control:not([type="checkbox"]):not([type="radio"]),
.form-dang-tin .flex_rieng select.form-control,
.form-dang-tin .dang-tin-field input.form-control {
height: 50px !important;
min-height: 50px !important;
border-radius: 5px !important;
line-height: 50px !important;
}
.form-dang-tin .flex_rieng textarea.form-control {
border-radius: 5px !important;
}
.form-dang-tin .select2-container--default .select2-selection--single,
.form-dang-tin .select2-container--bootstrap .select2-selection--single {
height: 50px !important;
min-height: 50px !important;
padding: 0 !important;
border-radius: 5px !important;
}
.form-dang-tin .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-dang-tin .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
height: 50px !important;
line-height: 50px !important;
padding-left: 12px !important;
padding-right: 34px !important;
}
.form-dang-tin .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-dang-tin .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
height: 50px !important;
top: 0 !important;
right: 6px !important;
}
.description-detail img,
.thong_tin_day_du img {
max-width: 100%;
height: auto;
}
img[src=""] {
display: none !important;
}