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

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

@font-face {
    font-family: 'MMC';
    src: url('fonts/MMC-Regular.eot');
    src: url('fonts/MMC-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/MMC-Regular.woff2') format('woff2'),
         url('fonts/MMC-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap; 
}
@font-face {
    font-family: 'MMC';
    src: url('fonts/MMC-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MMC';
    src: url('fonts/MMC-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
body, p, span, div, li, a {font-family: 'MMC', 'Noto Sans', sans-serif;letter-spacing: normal;}
h1, h2, h3, h4, h5, h6,
.uppercase, .is-large, .lead {font-family: 'MMC', 'Noto Sans', sans-serif;font-weight: 700;letter-spacing: normal;}
.button, button, input[type="submit"] {font-weight: 500;}
p {margin-bottom: 10px;}
th, td {padding: 10px !important;text-transform: none;letter-spacing: normal;}
td {width: fit-content !important;border-color: inherit;}
td:first-child, th:first-child {padding-left: 7px;}
.banner h1, .banner h2, .banner h3, .banner h4, .banner h5, .banner h6 {font-weight: 700;letter-spacing: normal;}
.button span {line-height: unset;}
.button.is-link:hover {opacity: 1 !important;}
a.button.white {margin: 0;}
a.button.white span {color: #000;font-weight: 600;}
ul.ux-relay__pagination.page-numbers.nav-pagination.links {display: flex;justify-content: center;align-items: center;}
ul.ux-relay__pagination.page-numbers.nav-pagination.links>li>a>i {top: 5px;}
body.archive.tax-product_cat #main {background: #f4f4f4;}
.ms-badge {position: relative;backdrop-filter: blur(12px);background-color: rgb(230 0 18 / 0.2);border: 1px solid rgb(230 0 18 / 0.3);border-radius: 99px;display: inline-flex;padding: 5px 20px 7px;padding-left: 30px;margin-bottom: 20px;align-items: center;}
.ms-badge:before {content: '';position: absolute;left: 12px;top: 15px;display: block;width: 8px;height: 8px;border-radius: 50%;background: #e60012;box-shadow: 0 0 0 4px rgba(217, 15, 22, .12);animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}
.ms-badge p {margin: 0;}
@keyframes pulse {
    50% {opacity: .5;}
}
.ms-title-hero {margin-bottom: 20px;}
.ms-title-hero h2 {font-size: 52px;line-height: 1.2;}
/*--- Style cho cụm giá ---*/
.price-prefix {flex-basis: 100%;font-size: 13px;font-weight: 500;color: #444;text-transform: uppercase;}
.woocommerce-Price-amount.amount {flex-basis: 100%;font-size: 24px;font-weight: 700;color: #ed0000;line-height: normal;}
/*--- Style cho khám phá chi tiết ---*/
.button.custom-explore-btn {border-radius: 5px;color: #fff;font-weight: 500;text-transform: none;padding: 5px 10px 7px;height: 38px;font-size: 14px;display: flex;justify-content: center;background: #000;transition: all 0.3s ease;margin: 0;flex: 1;flex-basis: 25%;order: 5;align-items: center;text-transform: capitalize;}
.custom-explore-btn:hover {background-color: #ed0000;}
.product-small.box {padding: 15px 20px 0;border-radius: 12px;background: #fff;box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}
.product-small.box:hover {transform: translateY(-10px);box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);}
.product-small.box .box-text {display: flex;flex-wrap: wrap;align-items: flex-end;}
.product-small.box .box-text .title-wrapper {order: 1;}
.box-image img {border-radius: 12px;}
a.woocommerce-LoopProduct-link.woocommerce-loop-product__link {text-transform: uppercase;font-size: 24px;color: #000;font-weight: 700;}
.product-small.box .box-text .price-wrapper {order: 4;flex: 1;flex-basis: 25%;}
.price-wrapper span.price {display: flex;flex-wrap: wrap;}
.product-small.box .box-excerpt {font-weight: 400;font-size: 14px;line-height: normal;color: #444;order: 2;margin-top: 10px;margin-bottom: 10px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
h1.product-title.product_title {text-transform: uppercase;font-size: 32px;}
.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .flickity-viewport {height: 380px !important;}
.flickity-slider>div:not(.col) {height: 380px;}
.product-gallery-slider img {object-fit: contain;height: 100%;border-radius: 7px;}
.product-thumbnails.thumbnails.slider>.flickity-viewport {height: 90px !important;}
.product-thumbnails.thumbnails.slider>.flickity-viewport>.flickity-slider>.col {padding: 0 5px;}
.product-thumbnails.thumbnails.slider>.flickity-viewport>.flickity-slider>.col>a {height: 90px;border-color: #ed0000;border-radius: 7px;}
.product-thumbnails.thumbnails.slider>.flickity-viewport>.flickity-slider>.col>a img {height: 100%;object-fit: cover;transform: translateY(0);border-radius: 7px;}
.cat-label.tag-label {background: 0;color: #ed0000;font-size: 12px;padding: 0;font-weight: 500;margin: 0;}
.ms-blog .cat-label.tag-label {position: absolute;top: -45px;background: #ed0000;color: #fff;opacity: 1;border-radius: 4px;padding: 5px 10px 7px;font-weight: 600;left: 10px;box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);}
.has-hover:hover .cat-label.tag-label {background: 0;}
.post-meta:before {content: "\f017";font-family: 'FontAwesome';margin-right: 5px;font-size: 11px;}
.row.row-flash {background: #cf0010;padding: 40px 30px;border-radius: 15px;}
.flash-box {display: flex;align-items: center;}
.flash-tag-wrap ul {margin-bottom: 10px;list-style: none;display: flex;column-gap: 15px;}
.flash-tag-wrap ul li {margin: 0;line-height: normal;}
.flash-tag-wrap ul li.flash-tag {background: #FFC107;color: #000;padding: 0px 15px 3px;border-radius: 3px;font-weight: 500;}
ul.flash-list {margin-bottom: 0;list-style: none;display: flex;gap: 15px;}
ul.flash-list li {margin: 0;}
ul.flash-list li i {color:#FFC107;}
h2.flash-title {font-size: 36px;margin-bottom: 10px;}
.flash-icon-wrap {height: 64px;width: 64px;background: #d83340;display: flex;align-items: center;justify-content: center;border-radius: 50%;}
.flash-icon-wrap i {font-size: 30px;animation: bounce 1s infinite;}
@keyframes bounce {
0%, 100% {transform: translateY(-25%);animation-timing-function: cubic-bezier(0.8, 0, 1, 1);}
50% {transform: none;animation-timing-function: cubic-bezier(0, 0, 0.2, 1);}
}
/* 1.CSS Grid cho Gallery */
.custom-showroom-gallery {display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, 220px);gap: 15px;}
.custom-showroom-gallery::before, 
.custom-showroom-gallery::after {display: none;}
.custom-showroom-gallery > .col {width: 100%;max-width: 100%;padding: 0;margin: 0;height: 100%;}
.custom-showroom-gallery .col-inner,
.custom-showroom-gallery .col-inner a {display: block;height: 100%;position: relative;border-radius: 12px;overflow: hidden;}
.custom-showroom-gallery img {width: 100%;height: 100%;object-fit: cover;border-radius: 12px;}
.custom-showroom-gallery > .col:nth-child(1) {grid-column: span 2;grid-row: span 2;}
.custom-showroom-gallery > .col:nth-child(n+6) {display: none;}
.custom-showroom-gallery > .col:nth-child(1) .col-inner::before {content: "KHÔNG GIAN";position: absolute;bottom: 60px; left: 20px;background: #e50000; color: white;padding: 4px 10px; font-size: 11px; font-weight: bold;border-radius: 4px; z-index: 2;pointer-events: none;}
.custom-showroom-gallery > .col:nth-child(1) .col-inner::after {content: "Showroom Chuẩn 3S";position: absolute;bottom: 20px; left: 20px;color: white; font-size: 26px; font-weight: 800;z-index: 2; pointer-events: none;text-shadow: 1px 1px 3px rgba(0,0,0,0.6);}
.custom-showroom-gallery > .col:nth-child(5) .col-inner::before {
    content: "\f302";
    font-family: "Font Awesome 5 Free", "FontAwesome";
    font-weight: 900;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    padding-bottom: 30px;
    pointer-events: none;
    z-index: 1;
}
.custom-showroom-gallery > .col:nth-child(5):hover .col-inner::before {background:#ff0000;transition: all 0.3s ease;}
.custom-showroom-gallery > .col:nth-child(5) .col-inner {text-align: center;display: flex;justify-content: center;align-items: flex-end;border: 2px solid #ff0000;}
.custom-showroom-gallery > .col:nth-child(5) .col-inner::after {content: "Xem thêm Hình Ảnh";position: absolute;bottom: 45px;width: 35%;height: fit-content;color: #fff;font-size: 18px;font-weight: 700;pointer-events: none;z-index: 2;}
.custom-showroom-gallery > .col:not(:nth-child(5)) a::before {
    content: "\f065";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: #ffffff;
    font-size: 32px;
    opacity: 0;
    z-index: 10;
    transition: all 0.3s ease;
    pointer-events: none;
}
.custom-showroom-gallery > .col:not(:nth-child(5)) .col-inner:hover a::before {opacity: 1;transform: translate(-50%, -50%) scale(1);}
/* Báo giá Form */
.custom-registration-form {background: #ffffff;padding: 40px 50px;border-radius: 20px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);max-width: 850px;margin: 0 auto;}
.custom-registration-form .text-center {text-align: center;}
/* Header form */
.custom-registration-form .form-badge {color: #e51a22;font-weight: 700;font-size: 14px;text-transform: uppercase;letter-spacing: 1px;margin-bottom: 15px;}
.custom-registration-form .form-title {font-size: 34px;font-weight: 800;color: #111;margin-bottom: 15px;line-height: 1.3;}
.custom-registration-form .form-desc {color: #666;font-size: 16px;line-height: 1.6;margin-bottom: 35px;max-width: 90%;margin-left: auto;margin-right: auto;}
/* Layout Grid cho Input */
.custom-registration-form .form-row {display: grid;gap: 20px;margin-bottom: 20px;}
.custom-registration-form .form-row.col-2 {grid-template-columns: 1fr 1fr;}
.custom-registration-form .form-row.col-3 {grid-template-columns: 1fr 1fr 1fr;}
/* Style cho nhập liệu (Input & Select) */
.custom-registration-form .wpcf7-form-control-wrap input,
.custom-registration-form .wpcf7-form-control-wrap select {
    width: 100%;
    background-color: #f7f8f9 !important;
    border: 1px solid #f7f8f9 !important;
    padding: 0 20px;
    height: 55px;
    border-radius: 12px !important;
    font-size: 15px;
    color: #444;
    box-shadow: none !important;
    outline: none !important;
    transition: all 0.3s ease;
    margin-bottom: 0;
}
.custom-registration-form .wpcf7-form-control-wrap input:focus,
.custom-registration-form .wpcf7-form-control-wrap select:focus {background-color: #fff !important;border: 1px solid #e51a22 !important;}
.ms-form-dang-ky .wpcf7-response-output {text-align: center;color: #fff;}
/* Submit */
.custom-registration-form .custom-submit-btn {
    background-color: #e60012;
    color: #ffffff;
    width: 100%;
    border: none;
    padding: 10px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 12px;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: 10px;
    margin-bottom: 20px;
    box-shadow: 0 8px 25px rgba(230, 0, 18, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.custom-registration-form .custom-submit-btn:hover {background-color: #cc0010 !important;transform: translateY(-2px);box-shadow: 0 10px 30px rgba(230, 0, 18, 0.4);}
.custom-registration-form .custom-submit-btn i {font-size: 16px;}
.custom-registration-form .form-footer {color: #383838;font-size: 12px;font-weight: 400;}
.custom-registration-form .form-footer i {margin-right: 5px;}
/* --- TRANG Chủ BADGE "DÒNG XE" --- */
.car-type-badge {position: absolute;top: 20px;left: 15px;background-color: #e60012;color: #ffffff;padding: 5px 20px;font-size: 16px;font-weight: bold;text-transform: uppercase;border-radius: 4px;z-index: 9;letter-spacing: 0.5px;}
.car-features-list {margin-top: 25px;margin-bottom: 25px;display: grid;gap: 20px;grid-template-columns: repeat(2, minmax(0, 1fr));}
.feature-item {display: flex;align-items: center;}
.feature-item .f-icon {width: 45px;height: 45px;min-width: 45px;background-color: #fff1f1;color: #e3000f;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 18px;margin-right: 15px;}
.feature-item .f-text {display: flex;flex-direction: column;}
.feature-item .f-title {font-weight: 700;color: #222222;font-size: 15px;margin-bottom: 2px;}
.feature-item .f-desc {color: #777777;font-size: 14px;}
.product-info.product-summary .price-wrapper {background-color: #f7f8fa;padding: 8px 20px 15px;border-radius: 12px;margin-bottom: 20px;border: 1px solid #eee;}
.product-info.product-summary .price-wrapper p.price {margin: 0;}
.product-summary .woocommerce-Price-currencySymbol {font-size: 24px;vertical-align: baseline;}
.product-info.product-summary form.cart {display: none;}
.product-info .price-prefix {font-size: 20px;margin-right: 10px;}
.product-info .woocommerce-Price-amount.amount {font-size: 32px;}
.custom-badge-dong-xe {background-color: #e50000;color: #ffffff;font-size: 12px;font-weight: 700;text-transform: uppercase;padding: 4px 10px;border-radius: 4px;display: inline-block;margin-top: -10px;}
.custom-car-specs-box {background-color: #f8f9fa;border-radius: 6px;padding: 10px 10px;display: flex;justify-content: space-between;align-items: center;width: 100%;margin-bottom: 15px;margin-top: 10px;order: 2;}
.custom-car-specs-box .spec-item {font-size: 12px;color: #555555;display: flex;align-items: center;gap: 3px;font-weight: 400;}
.custom-car-specs-box .spec-item i {color: #888888;font-size: 14px;}
/* --- FORM TRANG LIÊN HỆ --- */
.form-inner-box {background: #ffffff;padding: 30px 40px;border-radius: 16px;box-shadow: 0 10px 40px rgba(0,0,0,0.06);}
.contact-main-title {font-size: 32px;font-weight: 700;margin-bottom: 10px;text-transform: uppercase;}
.contact-col-title {font-size: 24px;font-weight: 700;}
/* Cột Contact Form 7 */
.custom-contact-form .form-row {display: flex;margin-left: -10px;margin-right: -10px;flex-wrap: wrap;}
.custom-contact-form .form-col {padding: 0 10px;width: 50%;}
.custom-contact-form .full-width {margin: 0 auto;}
.custom-contact-form .full-width .form-col {width: 100%;padding: 0;}
.custom-contact-form label {display: block;font-size: 14px;font-weight: 600;color: #333;margin-bottom: 8px;}
.custom-contact-form .form-submit-wrap {margin-top: 10px;}
.custom-contact-form input,.custom-contact-form select, .custom-contact-form textarea {width: 100%;height:45px;background-color: #fff;border: 1px solid #e2e8f0;border-radius: 8px;padding: 0 15px;font-size: 14px;color: #333;box-shadow: none;transition: all 0.3s ease;}
.custom-contact-form textarea {padding-top: 12px;min-height: 90px;}
.custom-submit-btn {width: 100%;background-color: #e60012;color: #ffffff;font-size: 16px;font-weight: 700;text-transform: uppercase;padding: 10px 15px;border-radius: 8px;border: none;display: flex;align-items: center;justify-content: center;gap: 10px;cursor: pointer;transition: background 0.3s ease;}
.custom-submit-btn i {font-size: 16px;}
.custom-submit-btn:hover {background-color: #c90010;}
/* Cột thông tin */
ul.custom-contact-list {margin-bottom: 30px;list-style: none;}
ul.custom-contact-list li {display: flex;align-items: flex-start;margin-bottom: 20px;margin-left: 0;gap: 15px;}
ul.custom-contact-list li i {font-size: 20px;color: #e60012;margin-top: 5px;}
.info-wrap h4 {line-height: 1;}
.info-wrap p {line-height: 1.4;margin-bottom: 0;}
/* Footer */
.ms-ct-footer p {display: grid;align-items: baseline;grid-auto-flow: column;justify-content: start;gap: 5px;}
.flex-row.form-flat.ms-ct-form input {margin-bottom: 0;border-radius: 5px 0 0 5px;}
.flex-row.form-flat.ms-ct-form .flex-col {padding-right: 0;}
.flex-row.form-flat.ms-ct-form .flex-col button {border: 0;margin: 0;padding: 0;width: 100%;background: #ed0000;border-radius: 0 5px 5px 0;}
/* Tab Phiên Bản Xe */
.product-footer .woocommerce-tabs .wc-tabs.product-tabs li.active a {font-size: 20px;font-weight: 600;color: #000000;border-right: 3px solid #e60012;}
.product-footer .woocommerce-tabs .wc-tabs.product-tabs li a {font-size: 20px;font-weight: 600;}
.custom-car-versions-wrapper {margin: 40px 0;background: #fdfdfd;border-top: 1px solid #eee;}
.car-tabs-header {margin-bottom: 30px;padding-top: 20px;}
.car-tab-nav {list-style: none;padding: 0;margin: 0;display: flex;gap: 30px;border-bottom: 2px solid #f0f0f0;}
.car-tab-item {font-weight: 600;font-size: 16px;color: #999;padding: 10px 15px;cursor: pointer;text-transform: uppercase;transition: all 0.3s ease;position: relative;margin-bottom: -2px;}
.car-tab-item:hover {color: #333;}
.car-tab-item.active {color: #000;border: 2px solid #cc0000;border-bottom-color: #fdfdfd;}
/* Nội dung Tab */
.car-tab-pane {display: none;animation: fadeIn 0.5s ease-in-out;}
.car-tab-pane.active {display: block;}
/* Cột trái - Thông tin */
.car-info-box {padding: 20px;overflow: auto;max-height: 650px;}
.car-info-box .car-title {font-size: 4em;font-weight: 800;margin-bottom: 15px;line-height: 1.1;color: #111;}
.car-info-box .car-desc {font-size: 16px;color: #555;margin-bottom: 20px;line-height: 1.6;}
.car-info-box .car-price {font-size: 20px;font-weight: bold;margin-bottom: 25px;}
.car-info-box .car-price span {color: #eb0000;font-size: 28px;}
.car-features ul {list-style-type: disc;padding-left: 20px;}
.car-features li {margin-bottom: 10px;color: #444;}
/* Cột phải - Visual */
.car-visual-box {text-align: center;background: #f8f8f8;padding: 40px 20px;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.car-main-image img {max-width: 100%;height: auto;transition: opacity 0.3s ease;}
/* Nút chọn màu */
.car-color-pickers {display: flex;justify-content: center;gap: 15px;margin-bottom: 30px;margin-top: 15px;}
.color-swatch {width: 40px;height: 40px;border-radius: 4px;cursor: pointer;border: 2px solid #ddd;box-shadow: 0 2px 5px rgba(0,0,0,0.1);transition: all 0.2s ease;}
.color-swatch:hover {transform: scale(1.1);}
.color-swatch.active-color {border: 2px solid #333;transform: scale(1.1);outline: 2px solid transparent;outline-offset: 2px;box-shadow: 0 0 0 2px rgba(0,0,0,0.2);}
.car-note p {font-size: 11px;}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.button span {font-size: 18px;line-height: 40px;}
	h5.post-title {font-size: 20px;}
	.ms-title-hero h2 {font-size: 32px;}
    .ms-flash-pro {padding: 50px 15px;}
    .row.row-flash {padding: 20px 15px;}
    .flash-tag-wrap ul {flex-wrap: wrap;justify-content: center;gap: 5px;}
    .flash-tag-wrap ul li.flash-tag {display: inline-block;padding: 5px 25px 8px;font-size: 14px;}
	h2.flash-title {text-align: center;}
    ul.flash-list {flex-wrap: wrap;justify-content: center;gap: 5px;margin-bottom: 15px;}
    .product-small.box {padding: 10px 10px 0;}
	.woocommerce-product-gallery .woocommerce-product-gallery__wrapper .flickity-viewport {height: 220px !important;}
    .flickity-slider>div:not(.col) {height: 220px;}
    .product-thumbnails.thumbnails.slider>.flickity-viewport {height: 45px !important;}
    .product-thumbnails.thumbnails.slider>.flickity-viewport>.flickity-slider>.col>a {height: 45px;}	
	.car-type-badge {font-size: 12px;}
    .custom-showroom-gallery {grid-template-columns: repeat(2, 1fr);grid-template-rows: auto;}
    .custom-showroom-gallery > .col:nth-child(1) {grid-row: span 1;height: 250px;}
    .custom-showroom-gallery > .col:nth-child(n+2):nth-child(-n+5) {height: 150px;}
	.custom-showroom-gallery > .col:nth-child(5) .col-inner::after {width: 50%;font-size: 14px;bottom: 30px;line-height: normal;}
	.custom-registration-form {padding: 30px 20px;}
    .custom-registration-form .form-row.col-2,
    .custom-registration-form .form-row.col-3 {grid-template-columns: 1fr;gap: 15px;}
    .custom-registration-form .form-title {font-size: 24px;}
    .custom-registration-form .form-desc {font-size: 14px;max-width: 100%;}
	
}