/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
/* Thu gọn hộp menu con, xóa khoảng trắng thừa */
.menu-item-design-default > .nav-dropdown {
    width: auto !important;
    padding: 0px 0px !important; /* Giảm khoảng trống của viền hộp (Trên-Dưới 10px, Trái-Phải 15px) */
    white-space: nowrap !important; /* Đảm bảo chữ không bị rớt xuống dòng */
}

/* Chỉnh lại khoảng cách các dòng chữ bên trong cho cân đối */
.nav-dropdown > li > a {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
/* GAC PRODUCT */
/* 1. ẨN NÚT THÊM VÀO GIỎ & SỐ LƯỢNG MẶC ĐỊNH */
.single-product .quantity, 
.single-product .single_add_to_cart_button {
    display: none !important;
}

/* 2. CĂN CHỈNH LẠI BỐ CỤC BẢNG BIẾN THỂ */
form.variations_form,
form.variations_form table.variations {
    width: 100% !important; 
    display: block !important;
}
table.variations tbody, 
table.variations tr, 
table.variations th, 
table.variations td {
    display: block !important; 
    width: 100% !important; /* Ép giãn tối đa 100% cột */
    border: none !important;
    padding: 0 !important;
}

/* --- PHẦN 1: STYLE CHO PHIÊN BẢN (HÀNG 1) --- */
table.variations tr:nth-child(1) th {
    display: none !important; /* Ẩn chữ "Phiên bản" */
}
table.variations tr:nth-child(1) td {
    margin-bottom: 25px !important; /* Khoảng cách xuống phần Chọn Màu */
}
table.variations tr:nth-child(1) ul.variable-items-wrapper {
    display: flex !important;
    gap: 30px !important;
    margin: 0 !important;
    flex-wrap: wrap !important; /* Tự động rớt dòng nếu có nhiều xe */
    width: 100% !important;
    border-bottom: 2px solid #333333 !important; /* ĐƯỜNG KẺ XÁM CHẠY DÀI 100% */
}
table.variations tr:nth-child(1) li.variable-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #888888 !important; /* Màu xám mờ khi chưa chọn */
    padding: 0 0 10px 0 !important; /* Khoảng cách từ chữ xuống đường kẻ */
    border-radius: 0 !important;
    margin-bottom: -2px !important; /* QUAN TRỌNG: Kéo viền đỏ đè khít lên viền xám */
}
table.variations tr:nth-child(1) li.variable-item span.variable-item-span {
    background: transparent !important;
    color: inherit !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    white-space: nowrap !important;
}
/* Trạng thái được chọn (Gạch chân đỏ) */
table.variations tr:nth-child(1) li.variable-item.selected {
    color: #ffffff !important;
    border-bottom: 2px solid #e31837 !important; /* Viền đỏ GAC nổi lên trên */
}

/* --- PHẦN 2: STYLE CHO MÀU SẮC (HÀNG 2) --- */
/* Đổi chữ "Màu sắc" thành "CHỌN MÀU SẮC" */
table.variations tr:nth-child(2) th.label label {
    font-size: 0 !important; 
}
table.variations tr:nth-child(2) th.label label::after {
    content: "CHỌN MÀU SẮC";
    font-size: 16px !important;
    font-weight: bold !important;
    color: #fff !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 12px !important;
}

/* Thiết kế Nút dạng Viên thuốc */
table.variations tr:nth-child(2) ul.variable-items-wrapper {
    display: flex !important;
    gap: 15px !important;
}
table.variations tr:nth-child(2) li.variable-item {
    background-color: #2a2a2a !important; /* Nền xám đen */
    border: 1px solid #444 !important;
    border-radius: 30px !important;
    padding: 8px 20px 8px 15px !important;
    width: auto !important; 		height: auto !important;
    box-shadow: none !important;
}
table.variations tr:nth-child(2) li.variable-item span.variable-item-span {
    background: transparent !important;
    color: #fff !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Vẽ chấm màu: Giả định Nút 1 là Trắng, Nút 2 là Đen (theo đúng Bước 1 bạn đã sắp xếp) */
table.variations tr:nth-child(2) li.variable-item:nth-child(1) span.variable-item-span::before {
    content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    background-color: #fff; /* Màu trắng */
}
table.variations tr:nth-child(2) li.variable-item:nth-child(2) span.variable-item-span::before {
    content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    background-color: #000; border: 1px solid #666; /* Màu đen */
}

table.variations tr:nth-child(2) li.variable-item:nth-child(3) span.variable-item-span::before {
    content: ''; display: inline-block; width: 18px; height: 18px; border-radius: 50%;
    background-color: #34665d;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Trạng thái được chọn của Màu sắc (Viền đỏ) */
table.variations tr:nth-child(2) li.variable-item.selected {
    border-color: #666 !important;
    background-color: #333 !important;
}
table.variations tr:nth-child(2) li.variable-item.selected span.variable-item-span::before {
    border: 1px solid #e31837 !important;
    box-shadow: 0 0 0 2px #333 inset !important; /* Tạo viền hở */
}
/* --- 1. ẨN TÊN MÀU BỊ DƯ VÀ ẨN CHỮ "XÓA" --- */
table.variations th.label span,
table.variations th.label .wvs-selected-variation-name {
    display: none !important; /* Xóa chữ ": Trắng pha lê" */
}
a.reset_variations {
    display: none !important; /* Giấu chữ "XÓA" mặc định */
}

/* --- 2. LÀM ĐẸP PHẦN GIÁ TIỀN--- */
.woocommerce-variation-price {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.woocommerce-variation-price .price {
    font-size: 22px !important;
    font-weight: bold !important;
    color: #fff !important;
}
/* Thêm chữ "Giá bán: " vào trước số tiền */
.woocommerce-variation-price .price::before {
    content: "Giá bán: ";
    font-size: 22px !important;
    font-weight: bold !important;
}

/* --- ẨN TOÀN BỘ CÁC CÔNG CỤ CHỈNH SỬA ẢNH TRONG GALLERY --- */
.product-gallery .image-tools {
    display: none !important;
}
.product-gallery .wishlist-icon {
    display: none !important;
}
/* =========================================
   DI CHUYỂN KHỐI CHỌN MÀU XUỐNG DƯỚI HÌNH XE
   ========================================= */

/* 1. Thiết lập điểm neo và ép 2 cột cao bằng nhau */
.gac-hero-row {
    position: relative !important;
    padding-bottom: 0 !important; /* Xóa khoảng trống thừa ở đáy Row */
    align-items: stretch !important; /* Lệnh then chốt: Ép cột xe cao bằng cột thông tin */
}

/* 2. Đẩy hình chiếc xe rớt xuống sát đáy cột phải */
.gac-hero-row > .col:last-child {
    padding-bottom: 0 !important; /* Xóa padding mặc định của cột */
}
.gac-hero-row > .col:last-child > .col-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Ép hình xe rớt xuống dưới cùng */
    padding-bottom: 50px !important; /* Chừa đúng 50px dưới gầm xe cho dàn nút màu */
}

/* 3. DỌN SẠCH MỌI RÀO CẢN TỪ NGOÀI VÀO TRONG */
.gac-hero-row > .col,
.gac-hero-row .col-inner,
.gac-hero-row .add-to-cart-container,
.gac-hero-row form.variations_form,
.gac-hero-row table.variations,
.gac-hero-row table.variations tbody {
    position: static !important; 
    transform: none !important;
}

/* 4. Nhấc khối Màu sắc bay sang khoảng trống 50px dưới gầm xe */
.gac-hero-row table.variations tr:nth-child(2) {
    position: absolute !important;
    bottom: 10px !important; /* Căn chỉnh nằm gọn trong khoảng 50px vừa tạo */
    right: 0 !important;
    width: 50% !important; 
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-left: none !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99 !important; 
}

/* 5. Ẩn chữ "CHỌN MÀU SẮC" */
.gac-hero-row table.variations tr:nth-child(2) th.label {
    display: none !important;
}

/* 6. Căn chỉnh lề cho khối Giá bên trái */
.gac-hero-row .single_variation_wrap {
    margin-top: 10px !important;
}

/* =========================================
   STYLE CHO KHỐI THÔNG SỐ ĐỘNG CƠ (CHI TIẾT XE)
   ========================================= */
.gac-engine-specs-wrap {
    display: flex !important;
    justify-content: space-between !important; /* Dàn đều nội dung sang 2 bên */
    gap: 20px !important; /* Khoảng cách an toàn tối thiểu giữa 2 cột */
    width: 100% !important; /* Ép toàn bộ khối kéo dài 100% chiều ngang */
    padding-left: 0 !important;
    border-left: none !important;
}

.gac-engine-specs-wrap .spec-col {
    flex: 1 !important; /* Lệnh then chốt: Ép mỗi cột tự động giãn rộng ra chiếm đúng 50% diện tích */
    display: flex;
    flex-direction: column;
    gap: 8px; 
}

/* Các đoạn CSS về chữ bên dưới vẫn giữ nguyên */
.gac-engine-specs-wrap .spec-value {
    font-size: 18px !important; 
    font-weight: bold !important;
    color: #ffffff !important;
    line-height: 1.2;
}

.gac-engine-specs-wrap .spec-label {
    color: #aaaaaa !important; 
    font-size: 15px !important;
    line-height: 1.5;
    font-weight: normal !important;
}

/* --- TẮT ĐƯỜNG KẺ ĐỨT PHÍA TRÊN GIÁ BÁN MẶC ĐỊNH CỦA FLATSOME --- */
.product-info .single_variation_wrap,
.woocommerce-variation-price,
.woocommerce-variation,
.variations_button {
    border-top: none !important; 
    border-bottom: none !important;
}
/* --- 2. TẠO ĐƯỜNG VIỀN ĐỎ NỐI LIỀN MÀU SẮC & GIÁ BÁN --- */
table.variations {
    margin-bottom: 0 !important; 
}

/* Ép toàn bộ DÒNG chứa Màu sắc thành 1 khối để kẻ viền
table.variations tr:nth-child(2) {
    display: block !important; 
    border-left: 3px solid #e31837 !important; 
    padding-left: 15px !important;
    padding-top: 5px !important;
}

table.variations tr:nth-child(2) td {
    border-left: none !important; 
    padding-left: 0 !important;
} */

/* Kẻ viền cho KHỐI chứa Giá bán và ép nối sát lên trên */
.single_variation_wrap {
    display: block !important;
    border-left: 3px solid #e31837 !important; /* Đỏ GAC */
    padding-left: 15px !important;
    padding-bottom: 0px !important;
    margin-top: 0 !important;
}
/* Bỏ viền thừa ở ô con của giá */
.woocommerce-variation-price {
    border-left: none !important; 
    padding-left: 0 !important;
    padding-top: 15px !important;
    margin-top: 0 !important;
}
.woocommerce-variation-add-to-cart::after {
    content: "*Đã bao gồm VAT"; 
    display: block !important;
    font-size: 13px !important;
    color: #888 !important;
    font-style: italic !important;
    margin-top: 0px !important;
		margin-bottom: 0px !important;
    font-weight: normal !important;
}
/* Ẩn toàn bộ ảnh nhỏ trong album sản phẩm */
.product-gallery-slider + .thumbnails {
    display: none !important;
}
.product-thumbnails {
    display: none !important;
}

/* Tùy chỉnh độ rộng và khoảng cách cho Focus Slider */
.custom-exterior-slider .flickity-slider > div {
    width: 60% !important; 
    padding: 0 !important; 
}

/* Hiệu ứng hover gạch chân cho menu */
.menu-gach-chan {
    margin-bottom: 0px !important;
    position: relative;
    overflow: hidden !important;
}

.menu-gach-chan::after {
    content: '';
    position: absolute;
    bottom: 5px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: red; 
    transition: all 0.3s ease-in-out;
}

.menu-gach-chan:hover::after {
    width: 80%; 
}

/* trang sản phẩm */
/* =========================================
   GIAO DIỆN LƯỚI SẢN PHẨM TRANG "MẪU XE"
   ========================================= */

/* 1. Tạo hộp xám đen bo góc và ép chiều cao bằng nhau */
.product-small .box {
    display: flex !important;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(153, 153, 153, 0) 100%) !important;
    border-radius: 8px;
    padding: 20px 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    height: 100%; 
}

/* 2. Phá vỡ cấu trúc khối mặc định để linh hoạt sắp xếp */
.product-small .box-text {
    display: contents !important; 
}

/* 3. Ẩn chữ "CHƯA PHÂN LOẠI" triệt để */
.product-small .category,
.product-small .category-classes {
    display: none !important;
}
/* 1. Ẩn nút "XEM NHANH" và icon Trái tim (Wishlist) */
.product-small .quick-view,
.product-small .wishlist-icon {
    display: none !important;
}
/* 4. SẮP XẾP THỨ TỰ TỪ TRÊN XUỐNG DƯỚI (1 -> 5) */

/* (1) Tiêu đề xe */
.product-small .title-wrapper { 
    order: 1; 
    text-align: center; 
    margin-bottom: 5px;
    margin-top: 10px;
}
.product-small .title-wrapper a {
    color: #ffffff !important; 
    font-size: 1.2em;
    font-weight: bold;
}

/* (2) Hình ảnh xe */
.product-small .box-image { 
    order: 2; 
    margin-bottom: 15px;
}

/* (3) Khối 3 Thông số: Ép nằm ngang và chia đều 3 cột */
.car-specs-grid { 
    order: 3; 
    display: flex !important; 
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 10px 0 30px 0;
    padding: 0;
    border: none !important;
}

/* (4) Giá bán*/
.product-small .price-wrapper { 
    order: 4; 
    text-align: center; 
    margin-bottom: 15px;
    margin-top: auto; 
}
.product-small .price-wrapper .amount {
    color: #ffffff !important; 
    font-size: 1.3em;
    font-weight: bold;
}

/* (5) Nút Khám phá */
.btn-kham-pha-wrap { 
    order: 5 !important; 
    width: fit-content !important;
    margin: 0 auto;
}

/* =========================================
   ĐỊNH DẠNG CHI TIẾT ICON & NÚT BẤM
   ========================================= */

/* Thu nhỏ Icon và chữ thông số */
.car-specs-grid .spec-item {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.car-specs-grid .spec-item img {
    width: 50px !important; /* KHÓA KÍCH THƯỚC ICON CHUẨN */
    height: auto !important;
    opacity: 0.6;
}

.car-specs-grid .spec-item span {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #cccccc !important;
    line-height: 1.3;
}

/* Thiết kế Nút Khám Phá */
.btn-kham-pha-wrap .button {
    width: 100%;
    background-color: #cc0000 !important; /* Đỏ đặc trưng */
    color: white !important;
    border-radius: 4px;
    margin-bottom: 0;
    font-weight: bold;
    text-transform: uppercase;
}
.btn-kham-pha-wrap .button:hover {
    background-color: #aa0000 !important;
}

/* 1. Phá vỡ khung tỷ lệ cố định mặc định của Flatsome */
.product-small .box-image .image-cover {
    padding-top: 0 !important; /* Xóa khoảng đệm tạo tỷ lệ */
    height: auto !important;
    position: relative !important;
}

/* 2. Ép ảnh hiển thị trọn vẹn 100% không mất góc */
.product-small .box-image img {
    position: relative !important; /* Trả về định vị gốc */
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* Lệnh quan trọng nhất: Thu nhỏ ảnh vừa khít khung, không cắt xén */
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
}

/* 3. Tắt hiệu ứng hover phóng to ảnh gây lệch khung (tùy chọn) */
.product-small .box-image:hover img {
    transform: none !important;
}

/* =========================================
   GIAO DIỆN RIÊNG CHO MEGA MENU XE
   ========================================= */

/* 1. Xóa nền gradient, bo góc và box-shadow của hộp sản phẩm */
.gac-mega-menu .product-small .box {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}

/* 2. Ẩn các thành phần thừa: Khối thông số, Giá, Nút Khám phá */
.gac-mega-menu .car-specs-grid,
.gac-mega-menu .btn-kham-pha-wrap,
.gac-mega-menu .price-wrapper {
    display: none !important;
}

.gac-mega-menu .product-small .title-wrapper {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.gac-mega-menu .product-small .title-wrapper a {
    font-size: 14px !important; 
    color: #fff !important; 
    font-weight: bold;
    text-transform: uppercase;
}


.gac-mega-menu .product-small .box-image {
    margin-bottom: 5px !important;
}
.gac-mega-menu .product-small .title-wrapper a {
    color: #000000 !important; 
}
.gac-mega-menu.products.row,
.gac-mega-menu .products.row {
    justify-content: center !important;
}
.gac-mega-menu .product-small .box-image img {
    transition: transform 0.4s ease-in-out !important; 
}

.gac-mega-menu .product-small .box:hover .box-image img {
    transform: scale(1.08) !important; 
}

.page-title.is-large.uppercase {
    font-size: 0 !important; 
}

/* Hiện lại thẻ span  */
.page-title.is-large.uppercase span {
    font-size: 22px !important;
    display: block;
}
/* --- HIỆN CHỮ TABS TRONG MEGA MENU BỊ LỖI TRẮNG --- */
.nav-dropdown .tabbed-content ul.nav > li > a,
.nav-dropdown .tabbed-content ul.nav > li > a > span {
    padding-left: 10px !important; /* Tạo khoảng cách bên trái cho chữ */
    color: #333333 !important; 
    font-weight: bold !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    opacity: 1 !important; /* Xóa độ mờ của dark mode */
}

/* 2. Đổi thành màu đỏ chuẩn GAC khi đang chọn hoặc rê chuột */
.nav-dropdown .tabbed-content ul.nav > li.active > a,
.nav-dropdown .tabbed-content ul.nav > li.active > a > span,
.nav-dropdown .tabbed-content ul.nav > li > a:hover,
.nav-dropdown .tabbed-content ul.nav > li > a:hover > span {
    color: #cc0000 !important; 
    background-color: transparent !important;
}


/* =========================================
   GIAO DIỆN RIÊNG CHO đổi ngôn ngữ (GTranslate)
   ========================================= */

/* Tắt nền trắng mặc định của khối bọc Flatsome */
/* 1. Ẩn chữ ngôn ngữ, làm nền trong suốt để hòa vào header màu đen */
.gtranslate_wrapper .gt_switcher .gt_selected a {
    background: transparent !important;
    border: none !important;
    font-size: 0 !important; /* Ẩn chữ ngôn ngữ mặc định */
    width: auto !important; /* Ép khung ôm sát nội dung (cờ) */
    padding: 5px !important; /* Thu gọn khoảng đệm xung quanh cờ cho đẹp */
    display: flex !important; /* Căn giữa cờ và mũi tên */
    align-items: center !important;
}
/* Ép tất cả các khối bọc bên ngoài thu gọn ôm sát vào lá cờ */
.gtranslate_wrapper,
.gtranslate_wrapper .gt_switcher,
.gtranslate_wrapper .gt_switcher .gt_selected {
    width: max-content !important; 
    min-width: unset !important;
    max-width: fit-content !important;
}

/* Đảm bảo nó hiển thị canh phải đúng vị trí trên Mobile nếu bị lệch */
li.html_topbar_left .gtranslate_wrapper {
    margin-left: auto !important; 
}

/* 1. Thiết lập điểm neo cho hộp xổ xuống */
.gtranslate_wrapper .gt_switcher {
    position: relative !important;
    overflow: visible !important;
}

/* 2. Ép hộp xổ xuống tách rời khỏi header, rớt thẳng xuống dưới */
.gtranslate_wrapper .gt_switcher .gt_option {
    position: absolute !important; 
    top: 100% !important; 
    right: 0 !important; 
    left: auto !important;
    background-color: #ffffff !important;
    border: 1px solid #eeeeee !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    border-radius: 4px;
    min-width: 120px !important; /* Chiều rộng tối thiểu của hộp */
    width: max-content !important; /* Khung tự động giãn ngang cho vừa chữ */
    height: auto !important; /* Chiều cao tự động theo nội dung */
    margin-top: 10px !important; /* Khoảng cách từ lá cờ xuống hộp */
    z-index: 99999 !important;
}

/* 3. Chỉnh lại các dòng chữ bên trong hộp xổ xuống */
.gtranslate_wrapper .gt_switcher .gt_option a {
    display: flex !important; /* Căn cờ và chữ trên 1 hàng ngang */
    align-items: center !important;
    padding: 10px 15px !important;
    color: #333333 !important; /* Chữ màu tối */
    font-size: 14px !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* Ép chữ không bao giờ bị rớt xuống dòng */
    background: #ffffff !important; /* Đảm bảo nền màu trắng */
}

/* 4. Tạo khoảng cách giữa lá cờ và chữ bên trong hộp */
.gtranslate_wrapper .gt_switcher .gt_option a img {
    margin-right: 10px !important;
}

/* 5. Đổi màu nền khi di chuột vào từng ngôn ngữ */
.gtranslate_wrapper .gt_switcher .gt_option a:hover {
    background-color: #f7f7f7 !important;
    color: #cc0000 !important; /* Đổi sang màu đỏ khi hover */
}
/* tắt mũi tên điều hướng */
.gtranslate_wrapper .gt_switcher .gt_selected a:after {
    display: none !important;
}

/* responsive sản phẩm */
@media (max-width: 549px) {
    .products.row > .col {
        max-width: 100% !important;
        flex-basis: 100% !important;
        padding-bottom: 15px !important;
    }
}

/* =========================================
   TÙY CHỈNH GIAO DIỆN FORM LIÊN HỆ (CONTACT FORM 7)
   ========================================= */

/* 1. Bo góc và làm đẹp các ô nhập liệu (Text, Phone, Select, Textarea) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    border-radius: 8px !important;
    border: 1px solid #e2e2e2 !important;
    padding: 12px 18px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    font-size: 15px !important;
    color: #333333 !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

.wpcf7-form select{
    height: auto !important;
}

/* Đổi màu viền sang đỏ khi khách hàng click chuột vào ô nhập liệu */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: #cc0000 !important;
    box-shadow: 0 0 5px rgba(204,0,0,0.1) !important;
}

/* 2. Điều chỉnh lại khoảng cách giữa các khối cho thoáng hơn */
.wpcf7-form p {
    margin-bottom: 20px !important;
}

/* 3. Thiết kế Nút "GỬI" (Màu đỏ, bo góc, có bóng đổ sáng) */
.wpcf7-form input[type="submit"] {
    background-color: #cc0000 !important; /* Màu đỏ đậm chuẩn GAC */
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    letter-spacing: 1px;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    border: none !important;
    /* Hiệu ứng bóng đổ màu đỏ nhạt bên dưới giống hình mẫu */
    box-shadow: 0 10px 20px -5px rgba(204, 0, 0, 0.4) !important; 
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

/* Hiệu ứng mượt mà khi rê chuột vào nút "GỬI" */
.wpcf7-form input[type="submit"]:hover {
    background-color: #aa0000 !important;
    box-shadow: 0 12px 20px -5px rgba(204, 0, 0, 0.6) !important;
    transform: translateY(-2px) !important; /* Nút nảy nhẹ lên */
}

.wpcf7 form {
    margin-bottom: 0 !important;
}
/* Xóa lề của khung thông báo thành công/lỗi ẩn */
.wpcf7 form .wpcf7-response-output {
    margin-bottom: 0 !important;
}
.wpcf7-spinner{
    position: relative;
    top: -62px;
    left: 90px;
}
html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
    overflow-y: auto !important;
}
html.pum-open.pum-open-overlay.pum-open-scrollable body>:not([aria-modal=true]),
html.pum-open body,
html.pum-open {
    padding-right: 0 !important;
}

.sticky-menu {
    position: -webkit-sticky; /* Cho Safari */
    position: sticky;
    top: 89px;
    z-index: 99;
}

/* 1. Ẩn toàn bộ hộp chứa công cụ (cả wishlist và zoom) */
div.product-images .image-tools,
div.woocommerce-product-gallery .image-tools {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. Đề phòng Flatsome sinh ra icon độc lập bên ngoài image-tools */
.product-images a.zoom-button,
.product-images .wishlist-icon,
.woocommerce-product-gallery a.zoom-button,
.woocommerce-product-gallery .wishlist-icon {
    display: none !important;
}

/* 1. Ẩn hoàn toàn các thẻ p trống hoặc khoảng trắng thừa */
.custom-product-page > p,
.custom-product-page > p:empty,
.custom-product-page > p.has-block {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Ép Slider không được có khoảng cách đẩy menu bên dưới */
.custom-product-page .slider-wrapper {
    margin-bottom: 0 !important;
}

body span.scroll-to {
    display: block !important;
    position: relative !important;
    top: -70px !important; /* Đẩy mốc neo lên đúng bằng chiều cao của Menu dính thứ 2 */
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Điều chỉnh lại cho màn hình điện thoại (nếu Menu mỏng hơn) */
@media (max-width: 849px) {
    body span.scroll-to {
        top: -60px !important; 
    }
}

/* --- TÙY CHỈNH SLIDER FOCUS CHO TRANG CHI TIẾT --- */

/* --- TÙY CHỈNH KÍCH THƯỚC VÀ HIỆU ỨNG SLIDER FOCUS --- */

/* 1. Giới hạn chiều rộng của từng ảnh để không bị tràn 100% */
.gac-custom-focus-slider .flickity-slider > div {
    width: 60% !important; /* CHÚ Ý: Bạn có thể tăng giảm 50% - 70% tùy mắt thẩm mỹ để ảnh to/nhỏ theo ý muốn */
    padding: 0 15px 50px 15px !important;/* Khoảng cách giữa các ảnh */
    margin: 0 -4% !important; /* Kéo ảnh sát nhau hơn, tránh bị quá thưa khi đã giới hạn width */
    transition: all 0.4s ease;
}

/* 2. Thu nhỏ và làm mờ 2 ảnh ở bên cạnh */
.gac-custom-focus-slider .flickity-slider > div:not(.is-selected) {
    opacity: 0.4 !important; /* Độ mờ */
    transform: scale(0.85); /* Thu nhỏ ảnh 2 bên xuống 85% so với ảnh gốc */
}

/* 3. Đảm bảo ảnh ở giữa (đang active) rõ nét và to nhất */
.gac-custom-focus-slider .flickity-slider > div.is-selected {
    opacity: 1 !important;
    transform: scale(1);
    z-index: 10;
}

/* 4. Định dạng chữ chú thích (Caption) */
/* 1. MỞ KHÓA "OVERFLOW" CHO TẤT CẢ CÁC LỚP BỌC TỪ NGOÀI VÀO TRONG */
.gac-custom-focus-slider .flickity-slider > div,
.gac-custom-focus-slider .img,
.gac-custom-focus-slider .img-inner {
    overflow: visible !important; 
    border-radius: 12px !important; 
}

/* Đề phòng Flatsome áp dụng trực tiếp lên thẻ img */
.gac-custom-focus-slider .flickity-slider > div img {
    border-radius: 12px !important;
}

/* 2. CỐ ĐỊNH CHỮ NẰM DƯỚI ẢNH, ĐỔI MÀU ĐEN */
.gac-custom-focus-slider .img-inner .caption {
    position: absolute !important;
    bottom: -35px !important; 
    left: 0 !important;
    width: 100% !important;
    text-align: center !important;
    color: #000000 !important; 
    font-size: 14px !important;
    background: transparent !important;
    transform: none !important; 
    text-shadow: none !important;
    padding: 0 !important;
    display: block !important;
    z-index: 999 !important; /* Ép chữ luôn nổi lên trên cùng */
}

/* 3. HIỆU ỨNG: CHỈ HIỆN CHỮ ẢNH GIỮA, XÓA SẠCH CHỮ TRÔI NỔI 2 BÊN */
.gac-custom-focus-slider .flickity-slider > div:not(.is-selected) .caption {
    opacity: 0 !important;
    visibility: hidden !important; /* Giấu hẳn chữ của ảnh không được chọn */
    transition: opacity 0.3s ease;
}

.gac-custom-focus-slider .flickity-slider > div.is-selected .caption {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. ĐẨY DẤU CHẤM (BULLETS) XUỐNG ĐỂ KHÔNG ĐÈ LÊN CHỮ */
.gac-custom-focus-slider .flickity-page-dots {
    bottom: 0px !important; 
}

/* 5. TẠO KHOẢNG TRỐNG DƯỚI SLIDER */
.gac-custom-focus-slider {
    margin-bottom: 60px !important; 
}

.title-popup {
    font-size: 22px; 
}
.mobile-sticky-contact {
    display: none;
}

/* responsive menu */
/* ===================================================
TÙY CHỈNH MENU LIÊN HỆ STICKY bên phải
=================================================== */
@media screen and (min-width: 769px) {
    .mobile-sticky-contact {
        display: flex;
        flex-direction: column; /* Xếp các nút theo chiều dọc */
        position: fixed;
        right: 5px; /* Bám sát mép phải màn hình */
        top: 75%; /* Canh giữa theo chiều dọc */
        transform: translateY(-50%); /* Kéo thanh menu lên một nửa để ngay đúng tâm */
        background-color: #ffffff;
        z-index: 999999;
        padding: 10px 5px; /* Khoảng cách viền trên dưới 15px, trái phải 8px */
        border-radius: 12px; /* Bo tròn góc trên trái và dưới trái */
        box-shadow: -3px 0 15px rgba(0,0,0,0.08); /* Đổ bóng nhẹ sang bên trái */
        gap: 15px; /* Tạo khoảng cách đều giữa các nút */
    }

    .mobile-sticky-contact .contact-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none !important;
        color: #222 !important;
        transition: transform 0.3s ease; /* Thêm hiệu ứng chuyển động mượt */
    }

    /* Hiệu ứng phóng to nhẹ khi di chuột vào nút trên máy tính */
    .mobile-sticky-contact .contact-item:hover {
        transform: scale(1.08); 
    }

    .mobile-sticky-contact .contact-item img {
        width: 32px; /* Kích thước icon trên máy tính */
        height: 32px;
        object-fit: contain;
        margin-bottom: 5px;
    }

    .mobile-sticky-contact .contact-item span {
        font-size: 11px;
        font-family: Arial, sans-serif;
        font-weight: 500;
        text-align: center;
        white-space: nowrap;
    }
    /* ===================================================
   HIỆU ỨNG RUNG CHO ICON ĐIỆN THOẠI
=================================================== */

    /* 1. Định nghĩa keyframes rung (xoay nhẹ qua lại) */
    @keyframes phoneShakeEffect {
        0%, 100% {
            transform: rotate(0deg); /* Về vị trí gốc */
        }
        15% {
            transform: rotate(-15deg); /* Xoay trái mạnh */
        }
        30% {
            transform: rotate(10deg); /* Xoay phải */
        }
        45% {
            transform: rotate(-10deg); /* Xoay trái nhẹ hơn */
        }
        60% {
            transform: rotate(5deg); /* Xoay phải nhẹ hơn */
        }
        75% {
            transform: rotate(-3deg); /* Xoay trái rất nhẹ */
        }
        90% {
            transform: rotate(1deg); /* Xoay phải rất nhẹ */
        }
    }

    /* 2. Áp dụng animation cho icon trong thẻ <a> có class 'phone-shake' */
    .contact-item.phone-shake img {
        display: inline-block !important; /* Đảm bảo transform hoạt động */
        animation-name: phoneShakeEffect;
        animation-duration: 0.8s; /* Độ dài 1 chu kỳ rung (giảm số này để rung nhanh hơn) */
        animation-iteration-count: infinite; /* Rung liên tục không bao giờ dừng */
        animation-timing-function: ease-in-out; /* Chuyển động mượt mà */
        transform-origin: center center; /* Rung từ tâm của icon */
    }
}

/* Chỉ áp dụng cho màn hình điện thoại (dưới 850px) */
@media (max-width: 849px) {
    .mobile-sticky-contact {
        /* ===================================================
        TÙY CHỈNH MENU LIÊN HỆ STICKY DƯỚI ĐÁY CHO MOBILE
        =================================================== */
        display: flex !important; /* Ép hiển thị trên mobile */
        justify-content: space-around; /* Chia đều khoảng cách 4 cột */
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        z-index: 999999; /* Đảm bảo thanh này luôn nằm trên cùng mọi phần tử khác */
        box-shadow: 0 -3px 10px rgba(0,0,0,0.08); /* Tạo bóng đổ nhẹ lên trên */
        padding: 8px 0 6px 0;
        border-top: 1px solid #f1f1f1;
    }

    /* Thiết lập từng khung chứa icon + chữ */
    .mobile-sticky-contact .contact-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none !important;
        color: #222 !important;
        flex: 1; /* Cho 4 nút có chiều rộng bằng nhau */
    }

    /* Thiết lập kích thước Icon */
    .mobile-sticky-contact .contact-item img {
        width: 34px; /* Bạn có thể tăng/giảm số này để icon to/nhỏ */
        height: 34px;
        object-fit: contain;
        margin-bottom: 4px; /* Khoảng cách giữa icon và chữ */
    }

    /* Thiết lập chữ bên dưới icon */
    .mobile-sticky-contact .contact-item span {
        font-size: 11px;
        font-family: Arial, sans-serif;
        line-height: 1.2;
        white-space: nowrap; /* Ngăn chữ bị rớt dòng */
    }

    /* Quan trọng: Tạo khoảng trống ở đáy thẻ body để trang web không bị thanh này che lấp nội dung */
    body {
        padding-bottom: 60px !important; 
    }

    .title-popup {
        font-size: 20px;
    }
    .gac-hero-row {
        padding-bottom: 70px !important; 
    }
    .gac-hero-row > .col:last-child > .col-inner {
        padding-bottom: 0 !important;
        justify-content: flex-start !important;
    }
    
    /* 2. Nhấc bổng khối Màu sắc và ép bám sát đáy (nằm dưới bức ảnh xe) */
    .gac-hero-row table.variations tr:nth-child(2) {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 3. Canh giữa khu vực chứa nút màu */
    .gac-hero-row table.variations tr:nth-child(2) td {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    /* 4. Dàn hàng ngang các nút, cho phép rớt dòng mượt mà nếu màn hình quá hẹp */
    .gac-hero-row table.variations tr:nth-child(2) ul.variable-items-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important; /* Quan trọng: Cho phép rớt dòng */
        justify-content: center !important;
        gap: 10px !important;
    }

    /* 5. Ép dòng chữ bên trong nút giãn thẳng ngang, không bị bóp vỡ thành 2-3 dòng */
    .gac-hero-row table.variations tr:nth-child(2) li.variable-item span.variable-item-span {
        white-space: nowrap !important;
        font-size: 11px !important; /* Thu nhỏ chữ một chút xíu cho thanh lịch */
    }
    .sticky-menu {
        top: 120px; /* Điều chỉnh lại khoảng cách trên điện thoại */
    }
    .menu-gach-chan{
        font-size: 12px !important;
    }
    /* Thùng chứa chính dàn hàng ngang */
    .custom-mobile-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px; /* Khoảng cách giữa hotline và nút */
        justify-content: flex-end;
    }

    /* Tùy chỉnh Hotline */
    .m-hotline {
        color: #fff !important;
        font-weight: bold;
        font-size: 10px; /* Thu nhỏ để vừa 1 dòng */
        white-space: nowrap; /* Không cho phép xuống dòng */
        display: flex;
        align-items: center;
        gap: 3px;
    }

    /* Tùy chỉnh Nút Đăng Ký */
    .m-btn-red {
        background-color: #d10000; /* Màu đỏ của GAC */
        color: #fff !important;
        font-size: 9px; /* Cực kỳ quan trọng để không bị nhảy hàng */
        font-weight: bold;
        padding: 4px 8px;
        border-radius: 2px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* Thu nhỏ logo để nhường chỗ cho cụm bên phải */
    .header-main .logo img {
        max-height: 25px !important;
    }
    
    /* Ép toàn bộ Header Main chia làm 3 phần cân đối */
    .header-main .flex-row {
        display: flex !important;
        justify-content: space-between !important;
        width: 100%;
    }
    /*ACF slider */
    .res-slider .flickity-viewport {
        height: 150vw !important; /* Chiều cao tương đương 1.5 lần chiều rộng màn hình */
        min-height: 500px;
    }

    .res-slider img {
        height: 100% !important;
        object-fit: contain; /* Hoặc 'cover' nếu bạn muốn ảnh tràn viền */
        background-color: #000; /* Nền đen nếu ảnh không phủ kín */
    }

    /* giao diện slide banner nội thất, ngoại thất */
    /* 1. Ép khung ảnh bung rộng 100%, xóa bỏ phần margin âm kéo sát ảnh */
    .gac-custom-focus-slider .flickity-slider > div {
        width: 100% !important; 
        margin: 0 !important; 
        padding: 0 5px 50px 5px !important; /* Tạo một chút khoảng hở nhẹ giữa các slide khi dùng tay vuốt */
    }

    /* 2. Tắt hiệu ứng thu nhỏ và làm mờ của 2 ảnh 2 bên */
    .gac-custom-focus-slider .flickity-slider > div:not(.is-selected) {
        opacity: 1 !important; 
        transform: scale(1) !important; 
    }
    
    /* 3. Chỉnh lại chữ caption cho cân đối trên Mobile (tùy chọn) */
    .gac-custom-focus-slider .img-inner .caption {
        font-size: 13px;
        margin-top: 10px;
    }

    /* banner text trang chu */
    .banner-text-trangchu {
        margin-bottom: -30px !important;
    }
}