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

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


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
.product-small .box {
    border-radius: 15px; 
    overflow: hidden;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); 
    transition: all 0.3s ease; 
}

.product-small .box-image img {
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.product-small .box:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
    transform: translateY(-5px); 
}

.product-small .box-text {
    background: white; 
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 10px; 
}
.product-small .box-text .product-title {
    white-space: nowrap; /* Không cho phép xuống dòng */
    overflow: hidden; /* Ẩn phần văn bản vượt quá giới hạn */
    text-overflow: ellipsis; /* Thêm dấu '...' vào cuối văn bản khi quá dài */
    display: block; /* Đảm bảo rằng tiêu đề chiếm toàn bộ chiều rộng */
}



.products-detail-boxx {
    padding: unset;
    border: 1px solid rgb(26, 126, 251) !important;
    border-radius: 5px 5px 0 0;
}
.products-detail-boxx .header-title {
    background-color: rgb(26, 126, 251);
    padding: 10px;
    border-radius: 5px 5px 0 0;
    border-bottom: 2px;
    text-align: center;
    margin-bottom: 10px;
}
.products-detail-boxx .header-title h4 {
    font-size: 14px;
    line-height: 25px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.products-detail-boxx .for-mobile {
    padding: 10px;
}
#thong_tin_chi_tiet {
    max-width: 100%;
    margin: 0 auto;
}

/* Tiêu đề Thông tin chi tiết */
#thong_tin_chi_tiet h2 {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background-color: #007bff;
    padding: 10px;
    border-radius: 10px 10px 0 0; /* Bo góc 2 góc trên */
    margin: 0; /* Loại bỏ khoảng cách dưới tiêu đề */
    text-align: center;
}

/* Kết quả hiển thị dưới dạng grid */
.ket-qua {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Tự động điều chỉnh số cột */
    margin-top: 0; /* Loại bỏ khoảng cách giữa tiêu đề và các cột */
}

/* Thiết kế cột */
.ket-qua .column {
    background-color: #fff;
    border-radius: 0 0 10px 10px; /* Bo góc 2 góc dưới */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ket-qua .column:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.ket-qua p {
    margin-bottom: 10px;
	color: #333; 
    font-size: 16px;
}

/* Responsive: Khi màn hình nhỏ hơn 768px */
@media screen and (max-width: 768px) {
    .ket-qua {
        grid-template-columns: 1fr; /* Mỗi cột chiếm toàn bộ chiều rộng */
    }
}

.ket-qua p .tong-tien {
    font-size: 16px;
    color: #333; 
    font-weight: normal; 
}

.ket-qua p .tong-tien .red {
    color: red;
    font-weight: bold;
}
.content-box-bao-gia {
            border: 4px solid rgb(26, 126, 251); /* Viền màu xanh */
            border-radius: 10px; /* Bo góc cho viền */
            padding: 40px 20px 20px 20px; /* Tạo khoảng cách bên trong hộp */
            position: relative; /* Đặt vị trí tương đối để tiêu đề có thể định vị tuyệt đối */
            margin-top: 30px; /* Tạo khoảng cách để tiêu đề không bị tràn ra ngoài */
        }
.title-bao-gia {
            position: absolute;
            top: -20px; /* Đẩy tiêu đề lên phía trên viền */
            left: 50%; /* Canh giữa theo chiều ngang */
            transform: translateX(-50%); /* Điều chỉnh lại vị trí để canh giữa */
            background-color: rgb(26, 126, 251);
            color: white; /* Màu chữ trắng */
            padding: 5px 15px; /* Thêm khoảng đệm xung quanh tiêu đề */
            border-radius: 10px; /* Bo góc cho nền tiêu đề */
            font-size: 20px;
            font-weight: bold;
        }
.content-box-bao-gia-khach-le {
    border: 0.4vw solid #de0985;
    border-radius: 1vw;
    padding: 4vw 2vw 2vw 2vw;
    position: relative;
    margin-top: 3vw;
}

.title-bao-gia-khach-le {
            position: absolute;
            top: -20px; /* Đẩy tiêu đề lên phía trên viền */
            left: 50%; /* Canh giữa theo chiều ngang */
            transform: translateX(-50%); /* Điều chỉnh lại vị trí để canh giữa */
            background-color: #de0985;
            color: white; /* Màu chữ trắng */
            padding: 5px 15px; /* Thêm khoảng đệm xung quanh tiêu đề */
            border-radius: 10px; /* Bo góc cho nền tiêu đề */
            font-size: 20px;
            font-weight: bold;
        }
.ff_submit_btn_wrapper_custom {
    display: none;
}
.ff-btn-submit.ff-btn-md {
    display: none !important;
}
input[readonly].loading {
    opacity: 0.5;
    background-color: #f0f0f0;
}
		.banner-form-sign {
            overflow: hidden;
            max-width: 960px;
            margin: 0 auto;
            padding: 1.6rem;
        }

        .banner-form-body {
            background: #fff;
            overflow: hidden;
            border-radius: 0rem 0rem 0.8rem 0.8rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .banner-form-head {
            padding: 1.2rem;
            background: #2a00ff;
            color: #fff;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            border-radius: 0.8rem 0.8rem 0 0;
        }

        .banner-form-list {
            padding: 0.8rem;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #ddd; /* Gạch ngăn cách giữa các phần */
        }

        .banner-form-item {
            width: 30%;
        }

        .banner-form-item:not(:last-child) {
            border-right: 1px solid #ddd; /* Gạch ngăn cách giữa các mục */
        }

        .banner-form-item-inner {
            gap: 0.4rem;
            padding: 0.8rem;
        }

        .banner-form-item-inner .icon {
            width: 1.8rem;
        }

        .banner-form-item-inner .txt {
            font-size: 1.2rem;
        }

        .banner-form-bot {
            padding: 1.2rem;
            background: #f9f9f9;
            border-top: 1px solid #ddd;
            font-size: 1.2rem;
            border-radius: 0 0 0.8rem 0.8rem;
        }
.custom-section {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    margin: 20px auto;
}