/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Kẻ viền xám chỉ nằm trong khung nội dung (1200px) */
.inside-header {
    border-bottom: 1px solid #eeeeee;
    /* Màu xám */
}

/* Chỉnh màu nền và khoảng cách cho right sidebar widget*/
.custom-product-sidebar,
.inside-right-sidebar {
    background: #d3d3d3;
    padding: 6px;
    max-width: 336px !important;
}

/* Chỉnh màu cho nút OK search form*/
.wp-block-search__button:hover {
    background-color: #008a57 !important;
    /* Thay mã màu bạn thích vào đây */
    color: #ffffff !important;
    /* Màu chữ khi hover */
    opacity: 0.9;
    /* Làm mờ nhẹ 1 chút để tạo hiệu ứng (tùy chọn) */
}

.wp-block-search__button {
    border-radius: 6px;
}

/* Ẩn Right Sidebar trên Mobile (màn hình nhỏ hơn 768px) */
@media (max-width: 768px) {
    #right-sidebar {
        display: none !important;
    }
}

/* Code css chỉnh nút bấm loại cân ở trang chủ*/
/* 1. Ép toàn bộ khối nằm ngang và TẠO KHOẢNG CÁCH (GAP) */
.wc-block-product-categories.is-dropdown {
    max-width: 300px;
    /* Độ dài tổng thể */
    width: 100%;
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    display: none;
    /* TẠO KHOẢNG CÁCH: Thay đổi 10px to/nhỏ tùy ý bạn */
}

/* 2. Đảm bảo hộp chứa select tự động giãn ra lấp đầy chỗ trống */
.wc-block-product-categories__dropdown {
    flex-grow: 1;
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Chỉnh ô Select (Bo tròn đều 4 góc, có viền đầy đủ) */
.wc-block-product-categories.is-dropdown select {
    width: 100% !important;
    border: 1px solid #1e73be !important;
    border-radius: 5px !important;
    /* Bo tròn đều 4 góc */
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 15px !important;
    outline: none !important;
    font-size: 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    background-color: #f9f9f9 !important;
}

/* 4. Chỉnh Nút bấm (Bo tròn đều 4 góc) */
.wc-block-product-categories.is-dropdown .wc-block-product-categories__button {
    background-color: #1e73be !important;
    color: #ffffff !important;
    border: 1px solid #1e73be !important;
    border-radius: 5px !important;
    /* Bo tròn đều 4 góc */
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* 5. Hiệu ứng rê chuột vào nút */
.wc-block-product-categories.is-dropdown .wc-block-product-categories__button:hover {
    background-color: #155a96 !important;
    border-color: #155a96 !important;
}

/* Kết thúc Code css chỉnh nút bấm loại cân ở trang chủ*/

/* Bắt đầu tùy chỉnh breadscrumb*/
/* Bỏ gạch chân và đổi màu link "Trang chủ", "Danh mục" trong Breadcrumb */
.woocommerce-breadcrumb a {
    text-decoration: none !important;
    /* Lệnh xóa gạch chân */
    color: #1e73be !important;
    /* Đổi màu chữ (thay mã màu bằng màu web bạn) */
    font-weight: 500;
    /* In đậm nhẹ chữ lên một chút cho đẹp */
    transition: all 0.3s ease;
}

/* Đổi màu khi khách hàng rê chuột vào link */
.woocommerce-breadcrumb a:hover {
    color: #ff6600 !important;
    /* Ví dụ: đổi sang màu cam khi hover */
}

/* Tùy chỉnh dấu ngăn cách và chữ của sản phẩm hiện tại (không phải link) */
.woocommerce-breadcrumb {
    color: #000000 !important;
    /* Màu xám cho chữ thường */
    font-size: 14px !important;
    /* Chỉnh lại kích thước chữ cho vừa mắt */
    margin-bottom: 20px;
    /* Tạo khoảng cách với phần nội dung bên dưới */
    font-weight: 400;
}

/* Kết thúc tùy chỉnh Breadscrumb*/

/* Tạo css khung viền cho ô sản phẩm*/
/* =========================================================
   1. KHUNG VIỀN LỚN BAO QUANH TOÀN BỘ KHU VỰC SẢN PHẨM
========================================================= */
.woocommerce ul.products,
ul.products,
.wc-block-grid,
ul.wc-block-grid__products,
.wp-block-woocommerce-product-collection {
    border: 1px solid #ebebeb !important;
    border-radius: 8px !important;
    padding: 10px !important;
    background-color: #ffffff !important;
    margin-bottom: 30px !important;
}

/* =========================================================
   2. KHUNG VIỀN NHỎ CHO TỪNG Ô SẢN PHẨM BÊN TRONG
========================================================= */
.woocommerce ul.products li.product,
ul.products li.product,
li.wc-block-grid__product,
.wp-block-woocommerce-product-collection li {
    border: 1px solid #dcdcdc !important;
    border-radius: 5px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;
    background-color: #ffffff !important;
}

/* Hiệu ứng: Khi rê chuột vào từng ô sản phẩm, viền sẽ đổi màu */
.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
li.wc-block-grid__product:hover,
.wp-block-woocommerce-product-collection li:hover {
    border-color: #1e73be !important;
}

/* Chỉnh lại ảnh bên trong cho đỡ sát viền */
.woocommerce ul.products li.product img,
ul.products li.product img,
.wc-block-grid__product-image img,
.wp-block-woocommerce-product-collection img {
    margin-bottom: 10px !important;
    border-radius: 4px !important;
}

/* Kết thúc tạo khung viền*/

/* Xóa khoảng cách ở trang SHOP*/
/* Gỡ bỏ khoảng đệm mặc định của theme ở trang Shop và Danh mục */
body.archive.woocommerce .site-main,
body.archive.woocommerce .inside-article {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    /* Xóa luôn khoảng trắng thừa ở trên nếu có */
    margin-top: 30px !important;
    margin-right: 15px !important;
    margin-left: 5px !important;
}

/* =========================================================
   7. GIỚI HẠN TÊN SẢN PHẨM 2 DÒNG + THÊM DẤU 3 CHẤM (ĐÃ SỬA LỖI)
========================================================= */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wp-block-woocommerce-product-collection .wc-block-components-product-name,
.wp-block-woocommerce-product-collection .wp-block-post-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    /* Số dòng muốn hiển thị */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
    /* Đảm bảo cắt chữ đúng chỗ, không làm mất dấu 3 chấm */
    white-space: normal !important;

    /* Ép chiều cao linh hoạt để các ô sản phẩm vẫn bằng nhau */
    line-height: 1.4 !important;
    min-height: 2.8em !important;
    /* Tối thiểu bằng 2 dòng (1.4 x 2) */
    max-height: 2.8em !important;
    /* Tối đa không vượt quá 2 dòng */
    margin-bottom: 10px !important;
}

/* Đảm bảo link (thẻ a) bên trong tiêu đề không phá vỡ cấu trúc */
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title a,
.wp-block-woocommerce-product-collection .wp-block-post-title a {
    display: inline !important;
}

/* =========================================================
   8. NHÃN TÙY CHỈNH CHO SẢN PHẨM (MÀU SẮC ĐỘNG)
========================================================= */
.wp-block-woocommerce-product-image a,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
}

.nhan-custom-san-pham {
    position: absolute !important;
    bottom: 5px !important;
    left: 0 !important;
    color: #ffffff !important;
    /* Chữ luôn là màu trắng */
    font-size: 12px !important;
    padding: 2px 5px !important;
    z-index: 99 !important;
    border-radius: 0 5px 5px 0 !important;
    pointer-events: none !important;
    /* Đã xóa dòng background-color ở đây */
}

/* =========================================================
   9. THANH THÔNG BÁO CHẠY NGANG (TRANG CHI TIẾT SẢN PHẨM)
========================================================= */
/* Khung bọc ngoài cùng */
.khung-slide-cam-ket {
    display: flex;
    background-color: #f1f2f4;
    /* Nền xám nhạt giống mẫu */
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Khung xanh lá chứa icon đứng yên */
.icon-cam-ket {
    background-color: #129d10;
    /* Màu xanh lá chuẩn mẫu */
    color: #ffffff;
    padding: 10px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Giúp ô xanh lá đè lên che phần chữ trôi qua */
    position: relative;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
    /* Đổ bóng nhẹ phân tách với chữ */
}

/* Phần khung ẩn chứa chữ */
.noi-dung-chay-wrap {
    flex: 1;
    overflow: hidden;
    /* Cắt bỏ phần chữ trôi ra ngoài mép */
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Hiệu ứng Animation chạy chữ */
.noi-dung-chay {
    display: inline-block;
    white-space: nowrap;
    animation: chuChayNgang 20s linear infinite;
    /* 20s cho 1 vòng lặp, thay đổi số 20 để chỉnh tốc độ nhanh/chậm */
}

/* Tính năng cực xịn: Dừng lại khi khách rê chuột vào để đọc */
.noi-dung-chay-wrap:hover .noi-dung-chay {
    animation-play-state: paused;
}

/* Định dạng chữ và dấu chấm */
.cam-ket-item {
    color: #3f5163;
    /* Màu chữ xanh xám đậm giống mẫu */
    font-weight: bold;
    font-size: 15px;
}

.cham-cach {
    color: #cccccc;
    /* Dấu chấm xám nhạt chia cách các dòng */
    margin: 0 20px;
    font-size: 20px;
    vertical-align: middle;
}

/* Keyframe điều khiển bộ máy chạy mượt mà */
@keyframes chuChayNgang {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* =========================================================
   END 9. THANH THÔNG BÁO CHẠY NGANG (TRANG CHI TIẾT SẢN PHẨM)
========================================================= */

/* =========================================================
   10. CHIA BỐ CỤC TRANG CHI TIẾT SẢN PHẨM MỚI
========================================================= */
/* Biến toàn bộ khu vực sản phẩm thành Lưới linh hoạt (Flexbox) */
.woocommerce div.product {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
}

/* 1. Phần Tên sản phẩm, Giá (Nằm góc trên phải) */
.woocommerce div.product div.summary {
    width: 48% !important;
    order: 2;
}

/* 2. Phần Ảnh sản phẩm (Nằm góc trên trái) */
.woocommerce div.product div.images {
    width: 48% !important;
    order: 1;
}

/* 3. Phần Tab Mô tả / Đánh giá (Nằm dưới bên trái) */
.woocommerce div.product .woocommerce-tabs {
    width: 68% !important;
    /* Chiếm 68% chiều rộng */
    order: 3;
    margin-top: 50px !important;
}

/* 4. Phần Sidebar Liên hệ, Bảo hành (Nằm dưới bên phải) */
.woocommerce div.product .custom-product-sidebar {
    width: 28% !important;
    /* Chiếm 28% chiều rộng */
    align-self: flex-start !important;
    order: 4;
    margin-top: 100px !important;
}

/* 5. Khối Sản phẩm liên quan (Nằm dưới cùng, chiếm 100% tràn ngang) */
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products {
    width: 100% !important;
    order: 5;
    margin-top: 40px !important;
}

/* Gỡ bỏ các dòng ngắt khối mặc định của WooCommerce */
.woocommerce div.product .clear {
    display: none !important;
}

/* =========================================================
   MOBILE RESPONSIVE: Trên điện thoại xếp dọc thành 1 cột
========================================================= */
@media (max-width: 768px) {

    .woocommerce div.product div.images,
    .woocommerce div.product div.summary,
    .woocommerce div.product .woocommerce-tabs,
    .woocommerce div.product .custom-product-sidebar {
        width: 100% !important;
        margin-top: 20px !important;
    }

    /* Đổi thứ tự trên điện thoại: Ảnh -> Giá -> Mô tả -> Sidebar */
    .woocommerce div.product div.summary {
        order: 2;
    }

    .woocommerce div.product .woocommerce-tabs {
        order: 3;
    }

    .woocommerce div.product .custom-product-sidebar {
        order: 4;
    }
}

/* =========================================================
   END 10. CHIA BỐ CỤC TRANG CHI TIẾT SẢN PHẨM MỚI
========================================================= */

/* =========================================================
   13. TẮT KÍNH LÚP VÀ TẮT ZOOM ẢNH KHI HOVER
========================================================= */
/* 1. Ẩn nút kính lúp ở góc trên bên phải */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* 2. Ép bức ảnh phóng to (Zoom) tàng hình nếu hệ thống tự chạy */
.woocommerce div.product div.images .woocommerce-product-gallery__image img.zoomImg {
    display: none !important;
}

/* 3. Đổi con trỏ chuột hình dấu cộng (zoom) về lại mũi tên bình thường */
.woocommerce div.product div.images .woocommerce-product-gallery__image a {
    cursor: default !important;
    pointer-events: none !important;
    /* Thêm dòng này để tắt luôn click mở ảnh to */
}

/* =========================================================
   14. CHỈNH TIÊU ĐỀ SẢN PHẨM VÀ KHOẢNG CÁCH GIÁ
========================================================= */
/* Thu nhỏ tiêu đề và tạo khoảng cách bên dưới */
.woocommerce div.product .product_title {
    font-size: 20px !important;
    /* Kích thước chữ (Bạn có thể tăng giảm số 24 này) */
    font-weight: 600 !important;
    /* Độ in đậm vừa phải, không bị thô */
    line-height: 1.4 !important;
    margin-bottom: 45px !important;
    /* Đẩy đoạn giá tiền phía dưới cách ra 20px */
    clear: none !important;
}

/* Trang trí lại phần Giá tiền cho nổi bật và ngay ngắn */
.woocommerce div.product p.price {
    font-size: 24px !important;
    /* Cỡ chữ của giá tiền */
    color: #ed1c24 !important;
    /* Đảm bảo giá luôn có màu đỏ chót */
    font-weight: bold !important;
}

/* =========================================================
   16. THÊM KHOẢNG CÁCH CHO THANH BREADCRUMB
========================================================= */
.woocommerce .woocommerce-breadcrumb {
    margin-top: 20px !important;
    /* Đẩy cách xa thanh cam kết màu xanh ở phía trên */
    margin-bottom: 30px !important;
    /* Đẩy cách xa hình ảnh và tên sản phẩm ở phía dưới */
    font-size: 14px !important;
    /* Tiện thể chỉnh luôn cỡ chữ cho dễ nhìn nếu bạn cần */
}

/*  17 Chỉnh sửa css cho sidebar PRODUCT
/* Xóa padding mặc định của khối Group bên trong Sidebar sản phẩm */
.custom-product-sidebar .wp-block-group__inner-container {
    padding: 0 !important;
    margin: 0 !important;
}

/* Đảm bảo các widget bên trong không bị dính sát vào nhau */
.custom-product-sidebar .widget,
.custom-product-sidebar .wp-block-group {
    margin-bottom: 20px !important;
}

/* END 17  */
/*18 Chỉnh sửa nút giỏ hàng và nút menu*/
.gp-icon.shopping-bag,
.gp-icon.pro-menu-bars {
    font-size: 20px;
}

.gp-icon.pro-menu-bars {
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    padding: 10px;
}

@media (max-width: 768px) {
    .site-content {
        margin-top: 0px !important;
    }

    .gp-icon.shopping-bag,
    .gp-icon.pro-menu-bars {
        font-size: 20px;
    }

    .gp-icon.icon-menu-bars {
        border: 1px solid #e0e0e0 !important;
        border-radius: 6px !important;
        padding: 10px;
    }

    .menu-toggle {
        padding: 0px !important;
    }
}

/* END 18 */

/* 19 Khoảng cách Header và Content Site */
.site-content {
    margin-top: 30px;
}

/* END 19 */

/* =========================================================
    20 GIAO DIỆN TAB WOOCOMMERCE DẠNG NÚT BẤM
========================================================= */

/* 1. Khung bọc ngoài: Biến dải tab thành một khối liền mạch */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    max-width: 300px !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-bottom: none !important;
    /* Viền bao quanh khung */
    border-radius: 6px !important;
    /* Bo góc nhẹ cho hiện đại */
    overflow: hidden !important;
    /* Cắt bỏ phần thừa ở góc */
    background: #ffffff !important;
}

/* 2. Các nút Tab bên trong: Chia đều 2 bên */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
    /* Tự động chia đều chiều rộng (50/50) */
    text-align: center !important;
    list-style: none !important;
}

/* Thêm vách ngăn giữa 2 tab */
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(:last-child) {
    border-right: 1px solid #e0e0e0 !important;
}

/* 3. Chữ bên trong Tab (Trạng thái tĩnh) */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block !important;
    padding: 12px 15px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    /* Chữ in đậm */
    color: #2b80dd !important;
    /* Màu xanh biển mặc định */
    text-transform: none !important;
    transition: all 0.3s ease !important;
    /* Hiệu ứng chuyển màu mượt mà */
    border: none !important;
}

/* 4. Trạng thái Tab đang chọn (Active) */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: #6a8dce !important;
    /* Màu nền xanh lam y */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #ffffff !important;
    /* Chữ đổi sang màu trắng */
}

/* 5. Hiệu ứng Hover (Khi di chuột vào tab chưa chọn) */
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active):hover {
    background-color: #f0f7ff !important;
    /* Nền xanh dương cực nhạt */
}

/* 6. Dọn dẹp các đường gạch chân/hiệu ứng thừa của theme mặc định */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

/* END 20 */

/* =========================================================
   21 THÊM ĐƯỜNG KẺ NGANG: HIỆU ỨNG TAB ÔM TRỌN NỘI DUNG
========================================================= */

/* 1. Chỉnh lại cụm Tab: Bỏ viền dưới, bỏ bo góc dưới để nối liền */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: none !important;
    /* Xóa viền dưới để mở không gian */
    border-bottom-left-radius: 0 !important;
    /* Làm vuông góc dưới bên trái */
    border-bottom-right-radius: 0 !important;
    /* Làm vuông góc dưới bên phải */
    margin-bottom: -1px !important;
    /* Kéo cụm tab lún xuống 1px để đè lên viền */
    position: relative !important;
    /* Đặt định vị để nổi lên trên */
    z-index: 10 !important;
    /* Ưu tiên hiển thị đè lên khung nội dung */
}

/* 2. Tạo đường xám kéo dài bằng viền trên của khung nội dung */
.woocommerce div.product .woocommerce-tabs .panel {
    border-top: 1px solid #e0e0e0 !important;
    /* Đây chính là dải màu xám bạn vẽ */
    padding-top: 25px !important;
    /* Tạo khoảng thở cho chữ bên trong */
    margin-top: 0 !important;
    /* Khớp nối mượt mà với cụm tab */
    position: relative !important;
    z-index: 1 !important;
    /* Nằm dưới cụm nút tab */
}

/* END 21 */

/* =========================================================
   22 ÉP 2 NÚT TAB TRANG CHI TIẾT SẢN PHẨM LUÔN NẰM NGANG TRÊN MOBILE
========================================================= */
@media (max-width: 768px) {

    /* 1. Khung chứa: Ép nằm ngang, không cho rớt dòng */
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        display: flex !important;
        flex-direction: row !important;
        /* Bắt buộc dàn hàng ngang */
        flex-wrap: nowrap !important;
        /* Tuyệt đối không rớt dòng */
        max-width: 100% !important;
        /* Dàn hết chiều ngang màn hình đt */
    }

    /* 2. Nút bấm: Mỗi nút chiếm đúng 50% diện tích */
    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        width: 50% !important;
        flex: 1 !important;
        /* Chia đều tỷ lệ */
    }

    /* 3. Chữ bên trong: Thu nhỏ lại một chút để không bị kẹt */
    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 10px 5px !important;
        /* Giảm khoảng cách thừa */
        font-size: 14px !important;
        /* Chữ nhỏ hơn xíu cho vừa vặn */
        white-space: nowrap !important;
        /* Ép chữ trên 1 dòng */
    }
}

/* END 22 */

/* =========================================================
   23 THIẾT KẾ UI NÚT "MUA NGAY" NỔI Ở GIỮA ĐÁY MÀN HÌNH
========================================================= */
.btn-mua-ngay-custom {
    position: fixed !important;
    bottom: 20px !important;
    /* Cách mép dưới màn hình 20px */
    left: 50% !important;
    /* Đẩy ra giữa... */
    transform: translateX(-50%) !important;
    /* ...và căn chỉnh tâm tuyệt đối */
    z-index: 99999 !important;
    /* Lớp ưu tiên cao nhất, luôn nổi trên cùng */
    background-color: #e32124 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 30px !important;
    padding: 6px 15px !important;
    /* Tăng độ dày một chút cho dễ bấm */
    font-size: 16px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90% !important;
    /* Trên mobile: Chiếm 90% màn hình */
    max-width: 150px !important;
    /* Trên máy tính: Rộng tối đa 400px */
    box-shadow: 0 4px 15px rgba(227, 33, 36, 0.4) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.btn-mua-ngay-custom svg {
    margin-right: 8px !important;
}

/* Hiệu ứng khi di chuột vào (Desktop) */
.btn-mua-ngay-custom:hover {
    background-color: #c91b1d !important;
    transform: translateX(-50%) translateY(-3px) !important;
    /* Giữ nguyên căn giữa, nảy lên 3px */
    box-shadow: 0 6px 18px rgba(227, 33, 36, 0.5) !important;
}

/* END 23 */

/* =========================================================
   24 GIAO DIỆN SẢN PHẨM VỪA XEM (CUSTOM)
========================================================= */

/* Xóa bỏ định dạng viền mặc định nếu có */
.cpt-widget-recently-viewed {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;

    /* Các dòng thêm mới để tạo khung trắng */
    background-color: #ffffff !important;
    padding: 20px !important;
    /* Bạn có thể tăng giảm tùy ý */
    border-radius: 8px !important;
    /* Bo góc giống hình của bạn */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    /* Đổ bóng nhẹ cho đẹp, không thích có thể xóa */
    margin-top: 30px;
}

.cpt-widget-recently-viewed ul.cpt-rv-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Chia bố cục Flexbox cho từng dòng sản phẩm */
.cpt-widget-recently-viewed li.cpt-rv-item {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 15px 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    gap: 15px !important;
}

/* Xóa gạch chân ở sản phẩm cuối cùng */
.cpt-widget-recently-viewed li.cpt-rv-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Cột trái: Chứa Tên và Giá */
.cpt-rv-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    /* Tạo khoảng cách chống đè chữ */
    min-width: 0 !important;
    /* Lệnh Flexbox cực kỳ quan trọng để chữ chịu lùi bước, không đẩy ảnh */
    word-break: break-word !important;
    /* Ép từ quá dài phải xuống dòng */
}

/* Tiêu đề sản phẩm */
.cpt-rv-info a.cpt-rv-title {
    font-size: 15px !important;
    color: #0066cc !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color 0.3s ease !important;
}

.cpt-rv-info a.cpt-rv-title:hover {
    color: #e32124 !important;
}

/* Khu vực Giá tiền (và các thẻ tag nhúng thêm) */
.cpt-rv-info .cpt-rv-price {
    font-weight: bold !important;
    color: #222 !important;
    font-size: 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px !important;
}

/* Định dạng cho cái Tag màu cam (nếu có) để không bị đè */
.cpt-rv-info .cpt-rv-price>* {
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Cột phải: Chứa Ảnh */
.cpt-rv-img {
    width: 70px !important;
    flex-shrink: 0 !important;
    /* Ép ảnh không bị méo/bóp nhỏ */
}

.cpt-rv-img img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Ép ảnh to hơn và chống bị thu nhỏ */
.cpt-widget-recently-viewed .cpt-rv-img {
    width: 80px !important;
    /* Tăng chiều rộng ảnh */
    min-width: 50px !important;
    max-width: 35% !important;
    /* Trên Tablet/Mobile, ảnh không bao giờ được chiếm quá 35% cột */
    /* Khóa cứng kích thước, không cho phép bị ép nhỏ */
    flex-shrink: 1 !important;
}

.cpt-widget-recently-viewed .cpt-rv-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Ép font chữ nhỏ lại, xóa gạch chân và in đậm mặc định của theme */
.cpt-widget-recently-viewed a.cpt-rv-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #0066cc !important;
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 5px !important;

    /* Cụm lệnh ma thuật để cắt chữ ở dòng thứ 2 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    /* Số dòng tối đa muốn hiển thị */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.cpt-widget-recently-viewed a.cpt-rv-title:hover {
    color: #e32124 !important;
}

.cpt-widget-recently-viewed .cpt-rv-price {
    font-weight: bold !important;
    color: #222 !important;
    font-size: 15px !important;
}

/* END 24 */
/* =========================================================
    25 TIÊU ĐỀ & VẠCH KẺ XANH (WIDGET SẢN PHẨM VỪA XEM)
========================================================= */
.cpt-widget-recently-viewed .cpt-rv-main-title {
    text-align: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    margin: 10px 0 20px 0 !important;
    color: #222 !important;
    text-transform: uppercase !important;
    /* Ép in hoa chữ */
    position: relative !important;
    /* Neo vị trí để vẽ vạch kẻ */
    padding-bottom: 12px !important;
    /* Khoảng cách từ chữ xuống vạch kẻ */
}

/* Kỹ thuật vẽ vạch kẻ xanh nằm giữa */
.cpt-widget-recently-viewed .cpt-rv-main-title::after {
    content: "" !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Cân bằng tuyệt đối ra giữa */
    width: 50px !important;
    /* Chiều dài của thanh ngang */
    height: 3px !important;
    /* Độ dày của thanh ngang */
    background-color: #0066cc !important;
    /* Màu xanh - bạn có thể đổi mã màu nếu cần */
}

/*END 25*/

/* =========================================================
   26 TÙY CHỈNH GALLERY ẢNH SẢN PHẨM: CO NHỎ VÀ BO TRÒN ẢNH CON
========================================================= */

/* 1. Căn giữa toàn bộ bộ ảnh thu nhỏ */
.woocommerce-product-gallery .flex-control-nav,
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    justify-content: center !important;
    /* Căn giữa */
    align-items: center !important;
    margin: 20px 0 0 0 !important;
    /* Khoảng cách từ ảnh chính xuống */
    padding: 0 !important;
    list-style: none !important;
    gap: 10px !important;
    /* Khoảng cách giữa các ảnh tròn */
}

/* 2. Tạo hình dạng tròn và kích thước nhỏ cho từng mục ảnh thu nhỏ */
.woocommerce-product-gallery .flex-control-nav li,
.woocommerce-product-gallery .flex-control-thumbs li {
    width: 30px !important;
    /* Cỡ đường kính - bạn có thể tăng giảm một chút (vd: 25px đến 35px) */
    height: 30px !important;
    margin: 0 !important;
    /* Xóa margin mặc định */
    border-radius: 50% !important;
    /* Bo tròn tuyệt đối */
    border: 1px solid #ddd !important;
    /* Viền mặc định xám nhạt */
    overflow: hidden !important;
    /* Cắt ảnh tràn viền tròn */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    /* Hiệu ứng mượt mà khi di chuột */
    box-sizing: border-box !important;
}

/* 3. Tùy chỉnh ảnh bên trong mục tròn */
.woocommerce-product-gallery .flex-control-nav li img,
.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Đảm bảo ảnh lấp đầy và không bị méo */
    border-radius: 50% !important;
    /* Bo tròn ảnh bên trong */
    display: block !important;
    margin: 0 !important;
}

/* 4. Thêm viền màu vàng cam cho ảnh đang được chọn (active) */
.woocommerce-product-gallery .flex-control-nav li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img.active {
    border-color: #f7b203 !important;
    /* Màu vàng cam - bạn có thể đổi mã màu nếu cần */
    border-width: 2px !important;
    /* Viền dày hơn một chút */
    box-shadow: 0 0 5px rgba(247, 178, 3, 0.3) !important;
    /* Đổ bóng nhẹ cho đẹp */
}

/* Ghi đè một số CSS của theme có thể can thiệp */
.woocommerce-product-gallery .flex-control-thumbs li.active img,
.woocommerce-product-gallery .flex-control-nav li.flex-active img {
    border-color: #f7b203 !important;
    border-width: 2px !important;
}

/* =========================================================
   TÙY CHỈNH GALLERY ẢNH SẢN PHẨM: TO HƠN, GIÃN CÁCH, CANH GIỮA
========================================================= */

/* 1. Khung chứa toàn bộ ảnh con: Ép canh giữa tuyệt đối và giãn cách */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    /* TĂNG KHOẢNG CÁCH: Bạn có thể chỉnh lên 25px hoặc 30px nếu muốn rộng hơn nữa */
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
}

/* 2. Từng ô ảnh con: Xóa float mặc định, tăng kích thước */
.woocommerce-product-gallery .flex-control-thumbs li {
    width: 65px !important;
    /* TĂNG KÍCH THƯỚC: Ảnh to ra trông thấy */
    height: 65px !important;
    float: none !important;
    /* Vô hiệu hóa lệnh dồn trái mặc định của Woo */
    margin: 0 !important;
    border: none !important;
    /* Xóa viền ngoài cùng để không bị lỗi 2 vòng tròn */
    list-style: none !important;
}

/* 3. Hình ảnh bên trong: Lấp đầy, bo tròn, canh giữa tuyệt đối */
.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;

    /* MẸO NHỎ: Đổi 'cover' thành 'contain' nếu cái cân bị lẹm viền nhé */
    object-fit: cover !important;

    border-radius: 50% !important;
    border: 2px solid #e5e5e5 !important;
    /* Viền xám mặc định */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    opacity: 1 !important;
    /* Chống bị mờ ảnh khi không click */
}

/* 4. Viền vàng cam khi ảnh được chọn (Active) hoặc di chuột qua */
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border-color: #f7b203 !important;
    /* Màu cam */
    box-shadow: 0 0 8px rgba(247, 178, 3, 0.4) !important;
    /* Hiệu ứng tỏa sáng nhẹ */
}

/* 3. Hình ảnh bên trong: Mặc định sẽ bị LÀM MỜ */
.woocommerce-product-gallery .flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 2px solid #e5e5e5 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.4s ease !important;
    /* Hiệu ứng chuyển đổi mượt mà hơn */
    cursor: pointer !important;

    /* MA THUẬT LÀM MỜ Ở ĐÂY */
    opacity: 0.4 !important;
    /* Làm mờ đi 60%, chỉ giữ lại 40% độ rõ */
    filter: grayscale(30%) !important;
    /* Thêm chút đen trắng nhẹ để ảnh chìm xuống, trông sang hơn */
}

/* 4. Khi ảnh ĐƯỢC CHỌN (Active) hoặc di chuột qua: Sáng rõ lên và có viền cam */
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs li img:hover {
    opacity: 1 !important;
    /* Sáng rõ 100% */
    filter: grayscale(0%) !important;
    /* Xóa lớp đen trắng */
    border-color: #f7b203 !important;
    /* Viền cam */
    box-shadow: 0 0 8px rgba(247, 178, 3, 0.5) !important;
}

/* =========================================================
   FIX TRIỆT ĐỂ LỖI THANH DỌC (SUB-PIXEL BLEED) TRÊN ẢNH ĐẦU TIÊN
========================================================= */

/* 1. Xóa sạch mọi viền, bóng đổ của slide có thể gây ra nét thừa */
.woocommerce-product-gallery__wrapper li.woocommerce-product-gallery__image {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* 2. TUYỆT CHIÊU: Dán 1 dải băng màu trắng rộng 2px ở mép trái để che phần ảnh bị lộ */
.woocommerce-product-gallery .flex-viewport {
    position: relative !important;
}

.woocommerce-product-gallery .flex-viewport::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 2px !important;
    /* Độ rộng dải băng để che lỗi (có thể tăng lên 3px nếu vẫn thấy) */
    height: 100% !important;
    background-color: #ffffff !important;
    /* Màu nền trắng trùng với nền web */
    z-index: 99 !important;
    /* Ép nó nằm đè lên trên ảnh */
}

/* Dọn dẹp viền bên phải (đề phòng mép phải cũng bị lỗi tương tự) */
.woocommerce-product-gallery .flex-viewport::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 2px !important;
    height: 100% !important;
    background-color: #ffffff !important;
    z-index: 99 !important;
}

/*END 26*/
/* =========================================================
   27 GIÁ VÀ ĐÁNH GIÁ: NẰM NGANG & CĂN THẲNG HÀNG TUYỆT ĐỐI
========================================================= */

/* 1. Hộp chứa tổng: Dàn 2 bên và ép thẳng trục giữa */
.cpt-price-rating-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    /* Giá bên trái, Sao bên phải */
    align-items: center !important;
    /* Mấu chốt để thẳng hàng dọc */
    width: 100% !important;
    margin-bottom: 20px !important;
    clear: both !important;
}

/* 2. Thẻ Giá: Xóa bỏ các khoảng trống tàng hình */
.cpt-price-rating-wrapper p.price {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* 3. Khối Đánh giá (chứa Sao và Chữ): Xóa khoảng trống và dàn ngang nội bộ */
.cpt-price-rating-wrapper .woocommerce-product-rating {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/* 4. Dải Sao: Khử lệnh float và margin mặc định cực đoan của WooCommerce */
.cpt-price-rating-wrapper .star-rating {
    margin: 0 8px 0 0 !important;
    /* Chỉ giữ 8px lề phải để cách chữ số */
    float: none !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
    /* Cố định cỡ sao để không bị lệch */
}

/* 5. Text "(1 customer review)": Căn giữa cùng dòng với Sao */
.cpt-price-rating-wrapper .woocommerce-review-link {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
}

/*END 27*/

/* =========================================================
   28 ẨN CHỮ "CUSTOMER REVIEW", CHỈ GIỮ LẠI SỐ (VD: "(1)")
========================================================= */

/* 1. Ép toàn bộ chữ tiếng Anh và ngoặc cũ tàng hình (kích thước = 0) */
.cpt-price-rating-wrapper .woocommerce-review-link {
    font-size: 0 !important;
    text-decoration: none !important;
}

/* 2. Đánh thức con số hiện lại với kích thước chuẩn */
.cpt-price-rating-wrapper .woocommerce-review-link .count {
    font-size: 14px !important;
    /* Cỡ chữ của số */
    color: #0066cc !important;
    /* Màu chữ xanh cho nổi bật */
    font-weight: 500 !important;
}

/* 3. Tự động vẽ lại 2 dấu ngoặc ôm lấy con số */
.cpt-price-rating-wrapper .woocommerce-review-link .count::before {
    content: "(" !important;
}

.cpt-price-rating-wrapper .woocommerce-review-link .count::after {
    content: ")" !important;
}

/*END 28*/

/* =========================================================
   29 ẨN FORM VIẾT ĐÁNH GIÁ & TIÊU ĐỀ TIẾNG ANH
========================================================= */

/* 1. Ẩn tiêu đề "1 review for..." */
.woocommerce-Reviews-title {
    display: none !important;
}

/* 2. Ẩn toàn bộ khu vực Form nhập đánh giá */
#review_form_wrapper {
    display: none !important;
}

/*END 29 */

/* =========================================================
   30 THU NHỎ TIÊU ĐỀ VÀ KHUNG SẢN PHẨM TƯƠNG TỰ
========================================================= */

/* 1. Thu nhỏ chữ "Sản phẩm tương tự" */
.related.products>h2 {
    font-size: 21px !important;
    /* Giảm kích thước chữ xuống (bạn có thể chỉnh 16px, 18px tùy ý) */
    font-weight: 600 !important;
    margin-bottom: 15px !important;
    color: #333 !important;
}

/* 2. Thu hẹp chiều rộng của toàn bộ khung chứa (ép nó gọn vào giữa) */
.related.products {
    max-width: 800px !important;
    /* Kích thước chiều ngang tối đa (càng nhỏ khung càng hẹp) */
}

/* 3. Ép chiều cao của từng thẻ sản phẩm ngắn lại */
.woocommerce ul.products li.product {
    padding-bottom: 10px !important;
    /* Giảm khoảng trống bên dưới thẻ */
}

/* Thu nhỏ nhẹ tên sản phẩm bên trong để cân đối với khung nhỏ */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

/*END 30*/
/* =========================================================
   31 THIẾT KẾ FOOTER 3 CỘT
========================================================= */

/* 1. Hộp chứa tổng: Dàn ngang và tạo khoảng cách */
.footer-contentx {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    max-width: 1200px !important;
    /* Độ rộng của footer */
    margin: 0 auto !important;
    /* Căn giữa màn hình */
    text-align: left !important;
    padding: 50px 0 !important;
}

/* 2. Kích thước từng cột (Chiếm 30% để chia làm 3) */
.footer-columnx {
    width: 30% !important;
    margin-bottom: 20px !important;
}

/* 3. Tiêu đề các cột */
.footer-columnx h4 {
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
    color: #0056b3 !important;
    text-align: center;
}

/* 4. Định dạng chữ và khoảng cách các dòng */
.footer-columnx p {
    font-size: 14px !important;
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}

/* 5. Cột Chính sách: Xóa dấu chấm đầu dòng và làm đẹp link */
.footer-columnx ul {
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.footer-columnx ul li {
    margin-bottom: 10px !important;
}

.footer-columnx ul li a {
    font-size: 14px !important;
    text-decoration: none !important;
}

.footer-columnx ul li a:hover {
    color: #0066cc !important;
    /* Đổi màu xanh khi di chuột vào link */
}

/* 6. GIAO DIỆN ĐIỆN THOẠI: Tự động gom thành 1 cột xếp dọc */
@media (max-width: 768px) {
    .footer-contentx {
        flex-direction: column !important;
    }

    .footer-columnx {
        width: 100% !important;
        text-align: center !important;
        /* Trên điện thoại căn giữa cho đẹp */
    }

    .bct-logo {
        align-items: center !important;
    }
}

/* 1. Ép các thẻ bọc ngoài bung rộng đủ 1200px và xóa padding/margin thừa */
.site-footer .site-info,
.site-footer .inside-site-info,
.site-footer .copyright-bar {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    /* Căn giữa màn hình */
    padding: 0px !important;
    /* Xóa các vùng đệm đang bóp nghẹt nội dung */
    box-sizing: border-box;
}

/* 2. Dàn 3 cột nằm ngang và kéo giãn khoảng cách */
.footer-contentx {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 90%;
    gap: 60px;
    /* Khoảng cách giữa 3 cột. Bạn có thể tăng lên 80px nếu muốn rộng hơn nữa */
    padding: 50px 15px;
    /* Thêm chút không gian trên dưới cho thoáng, 15px 2 bên để chống dính lề màn hình */
    box-sizing: border-box;
}

/* 3. Đảm bảo 3 cột chia đều không gian của 1200px */
.footer-columnx {
    flex: 1;
    /* Mỗi cột chiếm tỷ lệ 1 phần bằng nhau */
}

/* 4. Sửa lỗi hiển thị cột Chứng nhận */
/* Trong HTML của bạn có thuộc tính flex-direction và gap nhưng lại thiếu display: flex nên nó không hoạt động. Đoạn này sẽ sửa lỗi đó. */
.bct-logo {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    /* Nếu muốn logo nằm giữa cột thì đổi thành center */
    gap: 15px;
}

/* 5. Responsive: Xếp thành hàng dọc khi xem trên điện thoại */
@media (max-width: 768px) {
    .footer-contentx {
        flex-direction: column;
        gap: 30px;
    }
}

/*END 31*/
/*32 CSS FOR OFF CANVAS MENU */
/* Thụt lề cho menu con cấp 1 (ví dụ: Sản phẩm -> Mức cân) */
#generate-slideout-menu .slideout-menu .sub-menu {
    padding-left: 20px !important;
    /* Dùng padding-left để đẩy nội dung sang phải. Điều chỉnh số 20px tùy ý */
}

/* Thụt lề sâu hơn cho menu con cấp 2 (ví dụ: Mức cân -> 5kg, 10kg) */
#generate-slideout-menu .slideout-menu .sub-menu .sub-menu {
    padding-left: 20px !important;
}

/* Tùy chọn: Chỉnh sửa lại mũi tên dropdown cho thẳng hàng nếu bị lệch */
#generate-slideout-menu .slideout-menu .dropdown-menu-toggle {
    float: right;
    /* Đẩy mũi tên sang hẳn bên phải để gọn gàng hơn */
    padding: 0 15px;
    /* Tạo khoảng trống quanh mũi tên cho dễ bấm */
}

/* Tùy chọn: Thay đổi màu nền của menu con để phân biệt rõ hơn với menu cha */
#generate-slideout-menu .slideout-menu .sub-menu {
    background-color: rgba(255, 255, 255, 0.05);
    /* Lớp phủ trắng mờ trên nền đen */
}

/*END 32*/