/* Theme Name: DTL Child Description: This is a child theme for Flatsome Theme Author: UX Themes Template: flatsome Version: 3.0 */ /*************** ADD CUSTOM CSS HERE. ***************/ /* --- CSS CHO KHUNG BAO NGOÀI (CHIA CỘT & BẰNG NHAU) --- */ #main { padding-bottom: 70px; } /* ======================================================== THÊM ĐƯỜNG KẺ NGANG PHÂN CÁCH ẢNH VÀ CHỮ SẢN PHẨM ======================================================== */ .product-small .box-text { border-top: 1px solid #e31837 !important; /* Vạch 1 đường viền đỏ mỏng (bằng màu viền ngoài) */ padding-top: 15px !important; /* Đẩy tiêu đề sản phẩm cách xa đường kẻ một chút cho thoáng */ background-color: #ffffff !important; /* Đảm bảo nền phần chữ luôn trắng tinh */ } /* ======================================================== GIAO DIỆN KHUNG GIÁ SẢN PHẨM (TỐI ƯU HÓA CLEAN CODE) ======================================================== */ /* 1. KHUNG BỌC NGOÀI (Dashed Box & Flexbox Setup) */ .product-price-container .price-wrapper .price.product-page-price { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; /* Căn thẳng chân chữ */ border: 1px dashed #ccc !important; border-radius: 8px !important; padding: 15px 20px !important; background-color: #fdfdfd !important; margin-bottom: 25px !important; width: 100% !important; box-sizing: border-box !important; } /* Ẩn text cho người khiếm thị để không vỡ khung */ .product-price-container .price-wrapper .price.product-page-price .screen-reader-text { display: none !important; } /* 2. TIÊU ĐỀ TRÊN CÙNG (Tự động đổi chữ theo Khuyến mãi/Không khuyến mãi) */ .product-price-container .price-wrapper .price.product-page-price::before { content: "Giá khuyến mãi:"; /* Mặc định cho SP có giảm giá */ display: block !important; width: 100% !important; font-size: 16px !important; color: #333 !important; margin-bottom: 12px !important; font-weight: 500 !important; order: 1 !important; } .product-price-container .price-wrapper .price.product-page-price:not(:has(del))::before { content: "Giá bán:" !important; /* Tự đổi chữ nếu SP KHÔNG giảm giá */ } /* 3. MỨC GIÁ CHÍNH (Áp dụng cho Giá Khuyến Mãi HOẶC Giá Bán thường) */ .product-price-container .price-wrapper .price.product-page-price ins, .product-price-container .price-wrapper .price.product-page-price ins .amount, .product-price-container .price-wrapper .price.product-page-price ins bdi, .product-price-container .price-wrapper .price.product-page-price:not(:has(del)) > span.woocommerce-Price-amount, .product-price-container .price-wrapper .price.product-page-price:not(:has(del)) > span.amount, .product-price-container .price-wrapper .price.product-page-price:not(:has(del)) bdi { order: 2 !important; /* Luôn nằm dưới tiêu đề, bên trái */ color: #e31837 !important; /* Đỏ Honda */ font-size: 34px !important; /* Phóng to hết cỡ */ font-weight: 800 !important; line-height: 1 !important; background: transparent !important; text-decoration: none !important; display: inline-block !important; padding: 0 !important; } /* 4. GIÁ GỐC (Bị gạch bỏ, đẩy sang lề phải) */ .product-price-container .price-wrapper .price.product-page-price del { order: 3 !important; margin-left: auto !important; /* Đẩy văng sang góc phải */ color: #e31837 !important; font-size: 20px !important; font-weight: 500 !important; opacity: 0.8 !important; /* Mờ nhẹ */ display: inline-block !important; text-decoration: line-through !important; } /* 5. KÝ HIỆU TIỀN TỆ (Chữ "đ") */ /* Chữ Đ của giá chính (To, Đỏ, Gạch chân) */ .product-price-container .price-wrapper .price.product-page-price ins span.woocommerce-Price-currencySymbol, .product-price-container .price-wrapper .price.product-page-price:not(:has(del)) span.woocommerce-Price-currencySymbol { color: #e31837 !important; font-size: 24px !important; text-decoration: underline !important; vertical-align: top !important; /* Treo lên góc trên */ } /* Chữ Đ của giá gốc (Nhỏ, Gạch chân) */ .product-price-container .price-wrapper .price.product-page-price del span.woocommerce-Price-currencySymbol { font-size: 0.8em !important; text-decoration: underline !important; } /* ======================================================== 6. RESPONSIVE DÀNH CHO ĐIỆN THOẠI (MOBILE) ======================================================== */ @media (max-width: 767px) { /* Thu hẹp lề của Khung giá */ .product-price-container .price-wrapper .price.product-page-price { padding: 12px 15px !important; } /* Thu nhỏ chữ Giá Chính */ .product-price-container .price-wrapper .price.product-page-price ins, .product-price-container .price-wrapper .price.product-page-price ins .amount, .product-price-container .price-wrapper .price.product-page-price ins bdi, .product-price-container .price-wrapper .price.product-page-price:not(:has(del)) > span.amount, .product-price-container .price-wrapper .price.product-page-price:not(:has(del)) bdi { font-size: 26px !important; } /* Thu nhỏ chữ Đ của Giá chính */ .product-price-container .price-wrapper .price.product-page-price ins span.woocommerce-Price-currencySymbol, .product-price-container .price-wrapper .price.product-page-price:not(:has(del)) span.woocommerce-Price-currencySymbol { font-size: 20px !important; } /* Thu nhỏ Giá Gốc bị gạch */ .product-price-container .price-wrapper .price.product-page-price del { font-size: 18px !important; } } /* ======================================================== HỘP ƯU ĐÃI THANH TOÁN (PAYMENT OFFERS BOX) ======================================================== */ /* Khung bọc ngoài cùng */ .custom-payment-offers { background-color: #f4f8fe; /* Nền xanh pastel cực nhạt */ border: 1px solid #b6d4fe; /* Viền xanh biển nhạt */ border-radius: 12px; /* Bo góc mềm mại */ padding: 20px; margin-bottom: 25px; font-family: inherit; } /* Tiêu đề hộp */ .custom-payment-offers .offer-header { display: flex; align-items: center; margin-bottom: 15px; } .custom-payment-offers .offer-header svg { margin-right: 10px; /* Khoảng cách icon quà và chữ */ } .custom-payment-offers .offer-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: #111; line-height: 1; } /* Danh sách ưu đãi */ .custom-payment-offers .offer-list { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex; flex-direction: column; gap: 12px; /* Khoảng cách đều giữa các dòng */ } /* Từng dòng ưu đãi */ .custom-payment-offers .offer-list li { display: flex; align-items: flex-start; /* Nếu chữ dài rớt dòng, icon vẫn ở trên cùng */ margin: 0 !important; padding: 0 !important; color: #222; font-size: 14.5px; line-height: 1.5; } /* Icon Tích Xanh có dấu chấm (Sử dụng SVG Base64 siêu nhẹ) */ .custom-payment-offers .icon-check-dot { display: inline-block; width: 20px; height: 20px; min-width: 20px; /* Chống bị ép móp icon khi chữ quá dài */ margin-right: 10px; margin-top: 1px; /* Căn chỉnh cho icon nằm ngang hàng với dòng chữ đầu tiên */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='15' cy='5' r='2.5' fill='%2338b560'/%3E%3Cpath d='M4 10.5L8 14.5L16 6' stroke='%2338b560' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* ======================================================== ĐÓNG KHUNG KHU VỰC TAB MÔ TẢ / ĐÁNH GIÁ SẢN PHẨM ======================================================== */ /* 1. Tạo viền, nền và đổ bóng cho khối Mô tả trên Desktop */ .woocommerce-tabs { border: 1px solid #ececec !important; /* Viền xám nhạt đồng bộ với Sidebar */ background-color: #ffffff !important; /* Nền trắng tinh */ padding: 30px 40px 20px 40px !important; /* Tạo khoảng trống rộng rãi bên trong (Trên - Phải - Dưới - Trái) */ border-radius: 8px !important; /* Bo góc nhẹ cho hiện đại và mềm mại */ margin-bottom: 40px !important; /* Cách xa phần Sản phẩm tương tự ở phía dưới */ box-shadow: 0 5px 15px rgba(0,0,0,0.02) !important; /* Đổ bóng cực nhẹ giúp khối nổi lên, có chiều sâu */ } /* 2. Căn chỉnh lại đường kẻ gạch dưới chữ MÔ TẢ cho gọn gàng */ .woocommerce-tabs .nav-line-bottom { margin-bottom: 25px !important; /* Đẩy nội dung cách xa Menu Tab một chút */ border-bottom-color: #f1f1f1 !important; /* Làm mờ đường kẻ ngang kéo dài */ } /* 3. Tối ưu hóa kích thước hộp trên màn hình Điện thoại (Mobile) */ @media (max-width: 767px) { .woocommerce-tabs { padding: 15px 15px 10px 15px !important; /* Thu hẹp lề để tiết kiệm diện tích màn hình nhỏ */ margin-top: 25px !important; border-radius: 6px !important; } /* Ẩn bớt các đường viền thừa nếu Flatsome chuyển tab thành dạng Accordion trên Mobile */ .woocommerce-tabs .accordion-inner { padding: 15px 0 0 0 !important; border: none !important; } } /* ======================================================== ĐỒNG BỘ GIAO DIỆN SIDEBAR SẢN PHẨM GIỐNG TRANG TIN TỨC ======================================================== */ /* 1. Tạo viền đóng khung (Boxed) bao quanh các khối Widget */ #shop-sidebar .widget { border: 1px solid #ececec !important; /* Viền xám nhạt giống trang tin tức */ padding: 20px 25px 10px 25px !important; /* Căn chỉnh khoảng cách chữ so với viền */ margin-bottom: 30px !important; background-color: #fff !important; } /* 2. Định dạng Tiêu đề (BROWSE, RECENTLY VIEWED...) */ #shop-sidebar .widget-title { color: #b20000 !important; /* Đổi thành màu Đỏ đậm */ font-size: 16px !important; font-weight: 700 !important; /* In đậm */ text-transform: uppercase !important; /* Viết hoa toàn bộ */ display: block !important; letter-spacing: 0.5px; } /* 3. Chỉnh lại vạch kẻ ngang nhỏ gọn dưới tiêu đề */ #shop-sidebar .is-divider.small { height: 3px !important; width: 30px !important; background-color: #ececec !important; margin-top: 8px !important; margin-bottom: 15px !important; } /* 4. Định dạng các dòng Danh mục / Sản phẩm bên trong */ #shop-sidebar ul li { border-bottom: 1px solid #f1f1f1 !important; /* Dòng kẻ phân cách mờ */ margin: 0 !important; } /* Xóa dòng kẻ của mục cuối cùng để không bị sát đáy viền */ #shop-sidebar ul li:last-child { border-bottom: none !important; } /* 5. Hiệu ứng đổi màu chữ khi di chuột (Hover) & Danh mục đang xem */ #shop-sidebar ul li a { color: #333 !important; transition: all 0.3s ease; } #shop-sidebar ul li a:hover, #shop-sidebar ul li.current-cat > a, /* Danh mục đang được chọn */ #shop-sidebar ul li.active > a { color: #b20000 !important; /* Đổi sang đỏ khi hover */ font-weight: bold; } /* ======================================================== FIX LỖI HIỂN THỊ SẢN PHẨM VỪA XEM (DÙNG ĐỊNH VỊ TUYỆT ĐỐI) ======================================================== */ /* 1. Thiết lập không gian cho thẻ li: Thụt lề trái 85px để chừa chỗ cho Ảnh */ #shop-sidebar ul.product_list_widget li { position: relative !important; padding: 15px 0 15px 85px !important; /* Thụt lề trái 85px */ display: block !important; min-height: 95px !important; /* Đảm bảo khung đủ cao để chứa ảnh */ } /* 2. Ép bức ảnh: Treo lơ lửng và ghim chặt vào góc trái */ #shop-sidebar ul.product_list_widget li a img { position: absolute !important; top: 15px !important; /* Căn bằng với mép trên của chữ */ left: 0 !important; /* Ghim sát lề trái */ width: 70px !important; /* Chiều rộng ảnh */ height: 70px !important; /* Chiều cao ảnh */ object-fit: cover !important; /* Chống méo ảnh */ border-radius: 6px !important; /* Bo góc */ border: 1px solid #eee !important; box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; margin: 0 !important; float: none !important; /* Khử mọi lệnh float nếu có */ } /* 3. Chỉnh lại chữ: Tên sản phẩm */ #shop-sidebar ul.product_list_widget li a { display: block !important; text-decoration: none !important; } #shop-sidebar ul.product_list_widget li a .product-title { display: block !important; font-size: 14px !important; line-height: 1.4 !important; color: #333 !important; font-weight: 500 !important; margin-bottom: 5px !important; } /* 4. Chỉnh lại chữ: Giá sản phẩm */ #shop-sidebar ul.product_list_widget li .amount { display: block !important; font-size: 15px !important; font-weight: 800 !important; color: #b20000 !important; /* Chữ màu đỏ */ } /* 5. Hiệu ứng khi di chuột */ #shop-sidebar ul.product_list_widget li a:hover .product-title { color: #b20000 !important; } /* ======================================================== GIẢI PHÁP TỐI THƯỢNG: ÉP BỐ CỤC 2 CỘT BẰNG ĐÍCH DANH ID ======================================================== */ /* 1. Thiết lập Flexbox chứa các phần tử */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; } /* 2. Reset mặc định cho TẤT CẢ các trường: Chuyển thành dạng khối (block) */ .woocommerce-checkout .form-row { float: none !important; clear: none !important; margin: 0 0 15px 0 !important; padding: 0 !important; display: block !important; } /* Ép Tiêu đề (Label) nằm gọn gàng bên trên Ô nhập liệu */ .woocommerce-checkout .form-row label { display: block !important; width: 100% !important; font-weight: 700 !important; color: #333 !important; font-size: 14px !important; margin-bottom: 8px !important; } /* 3. ÉP BỐ CỤC 2 CỘT (48.5% LÀ CHIỀU RỘNG, 3% LÀ KHOẢNG TRỐNG Ở GIỮA) */ /* Cột Trái */ #billing_last_name_field, /* Họ và tên */ #billing_state_field /* Tỉnh / Thành phố */ { width: 48.5% !important; } /* Cột Phải */ #billing_phone_field, /* Số điện thoại */ #billing_city_field /* Phường / Xã / Quận / Huyện */ { width: 48.5% !important; } /* 4. ÉP BỐ CỤC 1 CỘT (100% CHIỀU RỘNG) CHO CÁC TRƯỜNG DÀI */ #billing_address_1_field, /* Địa chỉ cụ thể */ #order_comments_field, /* Ghi chú đơn hàng */ .woocommerce-additional-fields { width: 100% !important; } /* 5. FIX CHIỀU CAO VÀ THẨM MỸ CHO Ô NHẬP & DROP DOWN SELECT2 */ .woocommerce-checkout .form-row .woocommerce-input-wrapper { display: block !important; width: 100% !important; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .select2-container, .woocommerce-checkout .select2-container .select2-selection--single { width: 100% !important; max-width: 100% !important; height: 45px !important; /* Chiều cao đồng bộ dễ nhìn */ border: 1px solid #d1d1d1 !important; border-radius: 5px !important; padding: 0 15px !important; background-color: #fff !important; box-sizing: border-box !important; box-shadow: none !important; } .woocommerce-checkout .form-row textarea { height: 100px !important; /* Ghi chú cao hơn */ padding: 15px !important; } /* Fix lỗi lệch chữ của riêng plugin Vietnam Checkout */ .woocommerce-checkout .select2-container { padding: 0 !important; } .woocommerce-checkout .select2-container .select2-selection--single { display: flex !important; align-items: center !important; padding: 0 !important; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal !important; padding-left: 15px !important; color: #444 !important; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px !important; right: 5px !important; } /* ======================================================== FIX LỖI KHUNG TRẮNG KÉO DÀI KHI CHỌN TỈNH/THÀNH (SELECT2) ======================================================== */ /* 1. Bắt cái khung chứa danh sách xổ xuống không được dài 100% màn hình nữa */ span.select2-container.select2-container--default.select2-container--open { width: max-content !important; /* Rộng vừa đủ ôm khít chữ bên trong */ min-width: 300px !important; /* Độ rộng tối thiểu cho đẹp */ max-width: 450px !important; /* Khóa lại, không cho dài quá giới hạn này */ z-index: 999999 !important; /* Ép nổi lên trên cùng, không bị cột bên phải đè lên */ } /* 2. Trang trí lại cho cái hộp xổ xuống đẹp và sang trọng hơn */ .select2-dropdown { width: 100% !important; border: 1px solid #ddd !important; border-radius: 5px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important; /* Đổ bóng đậm để tách biệt với nền */ background-color: #fff !important; } /* 3. Fix lỗi thanh tìm kiếm bên trong hộp bị tràn viền */ .select2-search--dropdown .select2-search__field { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; border: 1px solid #ccc !important; border-radius: 4px !important; height: 38px !important; /* Cho ô tìm kiếm to ra chút dễ gõ */ } /* 4. (Tùy chọn) Đổi màu chữ nền khi di chuột vào Tỉnh/Thành cho giống màu chủ đạo */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #e31837 !important; /* Đổi thành màu Đỏ (#e31837) hoặc màu Xanh tùy ý bạn */ color: white !important; } /* ======================================================== 6. BỐ CỤC ĐIỆN THOẠI (ÉP VỀ 1 CỘT CHO DỄ BẤM) ======================================================== */ @media (max-width: 768px) { #billing_last_name_field, #billing_phone_field, #billing_state_field, #billing_city_field { width: 100% !important; } } /* CSS CHO GIỎ HÀNG Ở THANH SIDEBAR */ .item-cart-sider .cart-icon-wrapper { position: relative; display: inline-block; width: 100%; /* Căn giữa icon */ text-align: center; } .item-cart-sider .cart-icon-wrapper img { margin: 0 auto; /* Đảm bảo icon nằm giữa */ } /* Chấm đỏ hiển thị số lượng (Badge) */ .item-cart-sider .custom-cart-count { position: absolute; top: -5px; /* Chỉnh vị trí bong bóng lên trên */ right: 5px; /* Chỉnh vị trí bong bóng sang phải */ background-color: #e31837; /* Màu đỏ nổi bật */ color: #fff !important; font-size: 11px; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; z-index: 10; box-shadow: 0 2px 4px rgba(0,0,0,0.2); } /* Ẩn bong bóng nếu giỏ hàng trống (Tùy chọn, nếu muốn luôn hiện số 0 thì xóa dòng này) */ .item-cart-sider .custom-cart-count:empty, .item-cart-sider .custom-cart-count:contains("0") { display: none; } /* ======================================================== CUSTOM GIAO DIỆN SẢN PHẨM FLATSOME - THEO MẪU ======================================================== */ /* 1. Khung sản phẩm (Box) */ .product-small .col-inner { border: 1px solid #cc0000 !important; /* Màu viền xanh lá */ border-radius: 12px; /* Độ bo góc */ overflow: hidden; /* Quan trọng: để ảnh không bị tràn ra ngoài góc bo */ background-color: #fff; padding-bottom: 15px; /* Tạo khoảng trống ở dưới cùng */ transition: all 0.3s ease; } /* Thêm hiệu ứng shadow nhẹ khi hover vào sản phẩm (tùy chọn, cho đẹp hơn) */ .product-small .col-inner:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.1); } /* 2. Tiêu đề sản phẩm */ .product-small .box-text { padding: 10px 15px 0 !important; } .product-small .product-title { font-weight: 700; font-size: 15px; /* Điều chỉnh cỡ chữ tiêu đề */ color: #333; margin-bottom: 5px; } /* 3. Giá sản phẩm (Đã FIX) */ .product-small .price span.amount, .product-small .price ins span.amount, .product-small .price > span.woocommerce-Price-amount { font-size: 20px !important; font-weight: 800 !important; color: #1f8a42 !important; /* Ép buộc màu xanh lá */ } .product-small .price span.woocommerce-Price-currencySymbol { text-decoration: underline; } /* 4. Nút XEM NHANH (Quick view) */ .product-small .quick-view { background-color: #cc0000 !important; /* Nền xanh */ color: #fff !important; /* Chữ trắng */ font-weight: bold; text-transform: uppercase; } .product-small .quick-view:hover { background-color: #cc0000 !important; /* Màu xanh đậm hơn khi hover */ } /* 5. Nút THÊM VÀO GIỎ HÀNG (Đã FIX dứt điểm Icon và Kích thước) */ .product-small .add-to-cart-button { margin-top: 15px; /* Tạo khoảng cách với giá tiền */ padding: 0 10px; } .product-small .add_to_cart_button { display: flex !important; align-items: center; justify-content: center; width: 100%; border: 1.5px solid #cc0000 !important; border-radius: 50px !important; background-color: #fff !important; color: #2b3950 !important; font-weight: 700; font-size: 12px !important; /* Ép cỡ chữ nhỏ lại một chút để nút bớt thô */ padding: 8px 45px 8px 10px !important; /* Căn chỉnh lại khoảng trống */ position: relative; text-transform: uppercase; transition: all 0.3s; line-height: 1.5 !important; } .product-small .add_to_cart_button i { display: none !important; /* Ẩn các icon thừa mặc định */ } /* TẠO HÌNH TRÒN VÀ ICON GIỎ HÀNG BẰNG SVG (Đảm bảo 100% hiển thị) */ .product-small .add_to_cart_button::after { content: ""; /* Xóa text content */ position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background-color: #7cb342; width: 30px; /* Độ to của hình tròn xanh */ height: 30px; border-radius: 50%; /* Code vẽ Icon giỏ hàng màu trắng siêu nhẹ */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E"); background-size: 16px; /* Kích thước icon bên trong hình tròn */ background-position: center; background-repeat: no-repeat; } .product-small .add_to_cart_button:hover { background-color: #cc0000 !important; color: #fff !important; } /* ======================================================== TỐI ƯU HÓA NÚT THÊM VÀO GIỎ HÀNG RIÊNG CHO ĐIỆN THOẠI ======================================================== */ @media (max-width: 767px) { /* 1. Thu gọn lề 2 bên của nút so với thẻ sản phẩm */ .product-small .add-to-cart-button { padding: 0 5px !important; margin-top: 10px !important; } /* 2. Cấu hình lại Kích thước, Chữ và Khoảng trống của Nút */ .product-small .add_to_cart_button { font-size: 9px !important; /* Cỡ chữ nhỏ hơn cho mobile */ line-height: 1.1 !important; /* Ép 2 dòng chữ sát lại nhau */ padding: 5px 32px 5px 10px !important; /* Giảm độ dày trên/dưới, thu hẹp khoảng cách với icon */ min-height: 34px !important; /* Chốt chiều cao tối thiểu để nút luôn tròn trịa */ letter-spacing: -0.2px !important; /* Ép các chữ cái gần lại nhau 1 chút xíu */ } /* 3. Thu nhỏ nhẹ Vòng tròn và Icon giỏ hàng cho cân đối */ .product-small .add_to_cart_button::after { width: 25px !important; height: 25px !important; right: 3px !important; background-size: 14px !important; /* Kích thước icon SVG bên trong */ } } /* ======================================================== CSS ZALO & HOTLINE (ĐÃ ĐƯỢC CHUYÊN GIA TỐI ƯU & FIX LỖI) ======================================================== */ /* 1. Khung bọc ngoài cùng (Ghim chặt góc trái dưới) */ .ft-chatbox-skin1 { position: fixed !important; z-index: 99999 !important; /* Đẩy lên lớp cao nhất, không bị che */ left: 20px !important; /* Cố định lề trái 20px */ bottom: 70px !important; /* Cố định lề dưới 40px */ width: 45px !important; } /* 2. Các nút con bên trong */ .ft-chatbox-skin1 a { display: block !important; position: relative !important; margin-bottom: 15px !important; /* Khoảng cách giữa 2 nút */ text-decoration: none !important; } /* 3. Định dạng Icon và SVG */ .ft-chatbox-skin1 svg { width: 45px; height: 45px; margin: auto; border-radius: 100%; opacity: 1; } .ft-chatbox-skin1 i, .ft-chatbox-skin1 a:hover span { border-radius: 50px; } .ft-cco svg { background: #A71216 !important; /* Màu nền đỏ bạn chọn */ } /* 4. Hiệu ứng Rung (Animation) */ .ft-chatbox-skin1 i { display: block; line-height: 0; animation: logoskin1 1.2s infinite; /* Tối ưu lại thời gian nhịp rung */ transform: translate3d(0, 0, 0) scale(0.9); border-radius: 50%; } .ft-chatbox-skin1 i:hover { animation: logo3 1000ms infinite; } /* Màu đổ bóng khi rung (Ripple effect) */ .ft-chatbox-skin1 .ft-cpho i { box-shadow: 0 0 0 0px #4CAF50; } .ft-chatbox-skin1 .ft-csms i { box-shadow: 0 0 0 0px #e56100; } .ft-chatbox-skin1 .ft-cmes i { box-shadow: 0 0 0 0px #0082FF; } .ft-chatbox-skin1 .ft-ctel i { box-shadow: 0 0 0 0px #29A9EB; } .ft-chatbox-skin1 .ft-czal i { box-shadow: 0 0 0 0px #0068FF; } /* 5. Khung Text ("Nhắn tin Zalo", "Hotline...") */ /* Mặc định trên Mobile: Ẩn Text */ .ft-chatbox-skin1 a span { display: none !important; } /* Trên Desktop: Hiển thị text gọn gàng bên cạnh */ @media (min-width: 768px) { .ft-chatbox-skin1 a span { display: flex !important; align-items: center; position: absolute; z-index: -1; /* Nằm dưới icon để không bị đè */ top: 50%; transform: translateY(-50%); /* Căn giữa chính xác theo chiều dọc */ left: 20px; /* Thụt lùi vào trong icon */ padding: 0 15px 0 35px; /* Tạo khoảng trống tránh icon */ height: 34px; font-size: 14px; border-radius: 30px; color: #fff; background: rgba(17, 17, 17, 0.85); /* Đen trong suốt */ white-space: nowrap; /* Không cho rớt dòng */ transition: all 0.3s ease; } /* Hover đổi màu nền text */ .ft-chatbox-skin1 a:hover span { background: #A71216; /* Đổi sang màu đỏ khi di chuột */ color: #fff; } } /* 6. Keyframes Animations (Đã sửa lỗi cú pháp) */ @keyframes logoskin1 { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(0,0,0,0.2); } 100% { transform: scale(1); box-shadow: 0 0 0 12px rgba(0,0,0,0); } } @keyframes logo3 { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.1); } } .widget-title span { font-weight: 700 !important; color: #a71216; } /* 1. Khung chứa (Giữ nguyên) */ .khung-sao-bang { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 0; } /* 2. Thân sao băng (Phần đuôi) */ .vet-sang { position: absolute; display: block; width: 2px; /* Độ mảnh của đuôi */ height: 180px; /* Đuôi dài hơn chút cho đẹp */ /* QUAN TRỌNG: Màu trắng ở dưới (đầu), trong suốt ở trên (đuôi) */ background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); opacity: 0; filter: drop-shadow(0 0 6px rgba(255,255,255,0.8)); /* Tạo hào quang xung quanh đuôi */ animation: roi-xuong linear infinite; } /* 3. Đầu sao băng (Đốm sáng tròn) */ .vet-sang::after { content: ''; position: absolute; bottom: 0; /* Nằm ở dưới cùng của vệt sáng */ left: 50%; transform: translateX(-50%); width: 4px; /* Đầu to hơn đuôi 1 chút */ height: 4px; background: #fff; border-radius: 50%; /* Bo tròn */ /* Tạo hiệu ứng phát sáng mạnh cho đầu */ box-shadow: 0 0 10px 2px rgba(255, 255, 255, 1), 0 0 20px 4px rgba(255, 255, 255, 0.5); } /* 4. Chuyển động (Giữ nguyên logic nhưng tinh chỉnh lại) */ @keyframes roi-xuong { 0% { top: -200px; opacity: 0; } 10% { opacity: 1; } 100% { top: 110%; /* Rơi quá màn hình */ opacity: 0; } } /* 5. Vị trí ngẫu nhiên (Giữ nguyên hoặc chỉnh tốc độ nhanh hơn chút cho giống sao băng) */ .vet-sang:nth-child(1) { left: 10%; animation-duration: 2.5s; animation-delay: 0s; } .vet-sang:nth-child(2) { left: 30%; animation-duration: 4s; animation-delay: 1.5s; height: 120px; } .vet-sang:nth-child(3) { left: 50%; animation-duration: 3s; animation-delay: 0.5s; } .vet-sang:nth-child(4) { left: 70%; animation-duration: 2s; animation-delay: 2.5s; } .vet-sang:nth-child(5) { left: 90%; animation-duration: 3.5s; animation-delay: 1s; height: 200px; } /* CSS đơn giản cho bảng */ .tech-specs-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; color: #333; } .tech-specs-table th, .tech-specs-table td { border: 1px solid #ddd; padding: 10px; text-align: left; } /* ĐỊNH DẠNG HÀNG TIÊU ĐỀ CHÍNH (Danh mục, RS, L, G) */ .tech-specs-table thead th { background-color: #cc0100; /* Màu đỏ theo yêu cầu */ color: #ffffff; /* Chữ trắng */ font-size: 20px; font-weight: bold; text-align: center; text-transform: uppercase; position: sticky; top: 0; z-index: 10; } /* Cột đầu tiên (Danh mục) */ .tech-specs-table td:first-child { font-weight: 600; width: 30%; background-color: #fafafa; } /* Các cột thông số */ .tech-specs-table td:not(:first-child) { text-align: center; } /* ĐỊNH DẠNG TIÊU ĐỀ NHÓM (Động cơ, Ngoại thất...) */ .section-header { background-color: #cc0100 !important; /* Màu đỏ theo yêu cầu */ color: #ffffff; /* Chữ trắng */ font-weight: bold; text-transform: uppercase; padding: 12px 10px; text-align: left !important; /* Luôn căn trái cho tiêu đề nhóm */ } /* Hover hiệu ứng cho dễ nhìn */ .tech-specs-table tbody tr:hover { background-color: #f1f1f1; } /* Responsive cho mobile */ @media (max-width: 600px) { .tech-specs-table { font-size: 12px; } .tech-specs-table td, .tech-specs-table th { padding: 5px; } } .ctft-ct p { margin-bottom: 2px; font-size: 15px; } .ctft-ct a { font-weight: 600; font-size: 15px; color: #e4091d } html, body { font-family: 'Roboto', sans-serif; font-weight: 400; } p, li, span, div { font-weight: 400; } /* Giữ heading đậm */ h1, h2, h3, h4, h5, h6, strong, b { font-weight: 700; } .home-sec-6 .from_the_blog_comments { display: none } .home-blog { margin-top: 30px; } .home-blog .box-text { border-top: 3px solid #a71216; padding-top: 30px; padding-left: 10px; } .home-blog .box-text .box-text-inner { display: flex; flex-wrap: wrap } .home-blog .cat-label { font-size: 12px; color: #fff; background: linear-gradient(90deg, #a71216, #ec1a30); padding: 5px 20px; border-radius: 50px; width: max-content; position: absolute; top: -16px; opacity: 1 } .home-blog .is-divider { display: none } .home-blog .box-text .box-text-inner .post-title { order: 2; font-size: 18px; color: #1F8438; overflow: hidden; text-overflow: ellipsis; line-height: 22px; -webkit-line-clamp: 2; height: 44px; display: -webkit-box; -webkit-box-orient: vertical; margin: 10px 0 15px; } .home-blog .box-text .box-text-inner .post-title:hover{ color: #2d2d2d } .home-blog .box-text .box-text-inner .post-meta { order: 1; font-weight: 500; font-size: 13px } .home-blog .box-text .box-text-inner .button { order: 4; margin-left: auto; color: #308E47; text-transform: initial; font-size: 16px; font-weight: 600; } .home-blog .box-text .box-text-inner .button:after { content: '\f061'; font-family: 'Font Awesome 5 Free'; font-weight: 600; font-size: 12px; } .home-blog .box-text .box-text-inner .button:hover{ color: #2d2d2d } .home-blog .box-text .box-text-inner .from_the_blog_excerpt { order: 3 } .home-blog .box-text .box-text-inner .post-meta:before { content: '\f017'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-right: 5px } .home-blog.row-box-shadow-1 .col-inner { box-shadow: 0 5px 16px 0 rgb(2 55 102 / 9%); -webkit-box-shadow: 0 5px 16px 0 rgb(2 55 102 / 9%); border-radius: 10px; } .home-blog.row-box-shadow-1 .col-inner .box { border-radius: 10px; } .home-blog.row-box-shadow-1 .col-inner .box-image { border-radius: 10px 10px 0 0; } @media screen and (max-width: 1400px) and (min-width: 1300px){ .home-sec-6 .flickity-prev-next-button.previous{ right: 40%; } .home-sec-6 .flickity-prev-next-button.next { top: -10%; right: 30%; } } @media screen and (max-width: 1300px) and (min-width: 1100px){ .home-sec-6 .flickity-prev-next-button.previous{ right: 22%; } .home-sec-6 .flickity-prev-next-button.next { top: -10%; right: 10%; } } @media only screen and (min-width:1100px) { .home-sec-6 .align-bottom .button{ position: relative; transition: .5s } .home-sec-6 .align-bottom .button:hover{ color: white } .home-sec-6 .align-bottom .button:before{ content:''; position: absolute; width: 0%; height: 100%; top: 0; left: -15px; background-color: #1F8438; z-index: -1; transition: .5s } .home-sec-6 .align-bottom .button:hover:before{ width: 115%; } } @media only screen and (max-width:1500px) { .home-sec-6 .tabbed-content { width: calc(100% + ((100% - 1300px) / 2)); left: calc((100% - 1220px) / 2); position: relative; } .home-sec-6 .flickity-prev-next-button.next { right: 39% } .home-sec-6 .flickity-prev-next-button.previous { right: 50% } } @media only screen and (max-width:1400px) { .home-sec-6 .tabbed-content { width: calc(100% + ((100% - 1100px) / 2)); left: calc((100% - 1220px) / 2); position: relative; } .home-sec-6 .blog-right { max-width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; } } @media only screen and (max-width: 480px) { .home-sec-6 .tabbed-content { width: auto; left: auto } .home-sec-6 .blog-right { max-width: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100% } .home-sec-6 .tab, .du-an-sec-2 .tab { margin: 0 0 5px 0 } .home-sec-6 .flickity-prev-next-button.next, .home-sec-6 .flickity-prev-next-button.previous { top: 35% } .home-sec-6 .tab-mb .box-text-inner h5{ font-size: 16px; font-weight: 600; } .home-sec-6 .tab-mb .box-text-inner{ flex-direction: column-reverse; align-items: inherit } .home-sec-6 .tab-mb .box-text-inner .cat-label{ font-size: 14px; text-transform: capitalize; margin-top: 10px } .home-sec-6 .nav::-webkit-scrollbar { height: 2px; margin-top: 10px } .home-sec-6 .nav::-webkit-scrollbar-thumb { background: rgba(102, 102, 102, .1); border-radius: 20px; } .home-sec-6 .nav::-webkit-scrollbar-track { background: rgba(221,221,221, .1); border-radius: 20px; } .du-an-sec-2 .tabbed-content>ul, .home-sec-6 .nav{ flex-wrap: nowrap; overflow: auto; justify-content: left } .du-an-sec-2 .tabbed-content>ul li, .home-sec-6 .nav li{ width: max-content; margin-right: 10px } .du-an-sec-2 .tabbed-content>ul li a, .home-sec-6 .nav li a{ width: max-content } } .home-sec-7 .flickity-prev-next-button { width: 40px !important; height: 30px !important; color: #fff !important; background: #D6D6D6 !important; border: none; border-radius: 5px !important; min-height: 30px; display: flex; justify-content: center; align-items: center; } .home-sec-7 .flickity-prev-next-button:hover { background: rgb(31 132 56 / 100%) !important; } .home-sec-7 .flickity-prev-next-button { opacity: 1; } .home-sec-7{ padding-top: 60px !important } .home-sec-7 .bg { background: linear-gradient(to bottom, #fffcf4 0%, #fff 100%); } .home-sec-7 .slider-wrapper .slider { height: auto } .home-sec-7 .flickity-prev-next-button.next, .home-sec-7 .flickity-prev-next-button.previous{ bottom: -5%; } .home-sec-7 .flickity-prev-next-button.next{ left: 56% } .home-sec-7 .flickity-prev-next-button.previous{ left: 35% } .home-sec-7 .slider-wrapper { margin-top: 30px; } .row-kh>.col>.col-inner { padding: 20px; background: #fff; border-radius: 5px; border: 2px solid #f5f5f5; } .row-kh h3{ color: #61C63F; margin:0 } .row-kh .row p{ color: #6d6d6d } .home-sec-7 .slider-wrapper .slider { height: 288px } .home-sec-7 .slider-wrapper .img-inner { border-radius: 50px } .home-sec-7 .flickity-prev-next-button.previous { top: auto; bottom: -15%; left: 38%; } .home-sec-7 .flickity-prev-next-button.next { top: auto; bottom: -15%; left: 52%; } .tknd-sec-3 { padding: 150px 0 60px 0 !important; margin-top: -130px } .tknd-sec-4 { padding-top: 70px !important; padding-bottom: 50px !important } .tknd-sec-4 .ht-sec-2 .accordion { padding: 0; /background: transparent; box-shadow: none; -webkit-box-shadow: none; border-radius: 0; } .tknd-sec-4 .ht-sec-2 .accordion .active .toggle { background: transparent } .tknd-sec-4 .ht-sec-2 .accordion .active .toggle i { color: #29D090; } .tknd-sec-4 .ht-sec-2 .accordion .accordion-item { border: none; box-shadow: 0 5px 62px 0 rgb(2 55 102 / 9%); -webkit-box-shadow: 0 5px 62px 0 rgb(2 55 102 / 9%); } .tknd-sec-4 .accordion-title span { font-size: 16px; font-weight:600 } .tknd-sec-4 .accordion-inner p { font-size: 15px; margin-bottom: 10px } .tknd-sec-4 .accordion-inner p i { margin-right: 5px; font-size: 14px } .honda-car-img { position: absolute; bottom: -130px; /* Điều chỉnh vị trí */ transform: translateX(-50%); z-index: 10; animation: hondaCarMove 5s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3)) !important; } @keyframes hondaCarMove { 0%, 100% { transform: translateX(0px); } 50% { transform: translateX(-50px); } } .sider-contact { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: hsla(0,0%,97%,.5); border-radius: .8rem 0 0 .8rem; position: fixed; right: 0; top: 50%; transform: translateY(-50%) scale(1.25); transform-origin: right; transition: all .5s ease; z-index: 999; } .sider-contact.hide { transform: translate(100%,-50%); } .right-nav { align-items: center; display: flex; flex-flow: column; font-size: .9rem; line-height: .9rem; } .right-nav .btn-tit { transform: scale(.8); } /* Thay thế li bằng .item */ .right-nav .item { height: 3.6rem; position: relative; width: 4.0rem; margin-bottom: 0; } .right-nav .item:first-child { background: #a2452a; border-radius: .8rem 0 0 0; } .right-nav .item:first-child > a { border-radius: .8rem 0 0 0; color: #fff; } .right-nav .item:last-child { border-radius: 0 0 0 .8rem; overflow: hidden; } .right-nav .item > a { align-items: center; color: #1f1a17; display: flex; flex-flow: column; height: 100%; justify-content: center; text-decoration: none; transition: all .3s ease; width: 100%; } .right-nav .item > a:hover { background: #a2452a; color: #fff !important; } .right-nav .item:hover .iconfont { filter: brightness(1.1); transform: scale(1.1); } .right-nav .item:hover .right_hide { opacity: 1; transform: translate(-100%, -50%); visibility: visible; } .right-nav .iconfont { display: block; font-size: 1.6rem; margin-bottom: .2rem; transition: all .3s ease; } .right-nav:hover .item:first-child { background: transparent; } .right-nav:hover .item:first-child > a { color: #1f1a17; } /* Tooltip */ .right_hide { background-color: #fff; border-radius: .5rem; box-shadow: 0 0 1rem -2px rgba(51,51,51,.15); color: #333; font-size: 0.7rem; left: -10px; line-height: 1.0rem; opacity: 0; padding: 1rem; position: absolute; top: 50%; transform: translate(-110%, -50%); transition: all .5s ease; visibility: hidden; white-space: nowrap; z-index: 1; } .right_hide:before { border-bottom: 6px solid transparent; border-left: 8px solid #fff; border-top: 6px solid transparent; content: ""; position: absolute; right: -8px; top: calc(50% - 4px); } .right_hide img { display: block; max-width: 10rem; } /* Responsive */ @media screen and (max-width: 810px) { .sider-contact { background-color: hsla(0,0%,100%,.6); border-radius: .8rem .8rem 0 0; bottom: 0; left: 0; top: auto; transform: translate(0); width: 100%; } .right-nav { flex-flow: row; } .right-nav .item { flex: 1; } .right-nav .item:last-child { border-radius: 0 .8rem 0 0; } } @media screen and (max-width: 600px) { .right_li_swt, .right_li_wechat { display: none; } .right-nav .item { height: 4.6rem; } .right-nav .item.right_li_wa { border-radius: .8rem 0 0 0; overflow: hidden; } } /* ======================================================== ẨN NÚT GIỎ HÀNG Ở THANH MENU DƯỚI CÙNG TRÊN ĐIỆN THOẠI ======================================================== */ @media (max-width: 767px) { /* Target chính xác vào class của nút giỏ hàng bạn đã tạo */ .sider-contact .right-nav .item-cart-sider { display: none !important; } }