/*
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.   ***************/
/* Ép cố định chiều cao của khung chứa ảnh sản phẩm */
.products .product-small .box-image {
    height: 250px !important; /* Bạn có thể tăng giảm số 250px này cho vừa mắt */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff; /* Tạo nền trắng cho khoảng trống nếu ảnh bị hụt */
}

/* Xử lý ảnh bên trong không bị méo, tự động co giãn vừa khung */
.products .product-small .box-image img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important; 
}
/* Ép cố định chiều cao khung chứa ảnh sản phẩm trên toàn trang */
.product-small .box-image {
    height: 250px !important; /* Bạn có thể tăng giảm số này cho vừa vặn */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #fff !important;
}

/* Cấu hình ảnh bên trong co giãn theo khung */
.product-small .box-image a img {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
}

/* Đồng bộ luôn chiều cao của phần chữ tiêu đề sản phẩm trên toàn trang */
.product-small .title-wrapper {
    min-height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* --- KHUNG VIỀN CÔNG NGHỆ CHO KHỐI MÔ TẢ --- */
.product-short-description {
    background: #fdfdfd !important;
    border: 1px dashed #0056b3 !important; /* Viền đứt màu xanh công nghệ nhẹ nhàng */
    border-left: 4px solid #0056b3 !important; /* Thanh màu xanh đậm nhấn bên trái cực chất */
    border-radius: 6px !important;
    padding: 20px 20px 20px 35px !important; /* Đẩy khoảng cách chữ rộng rãi để chèn icon */
    margin: 20px 0 !important;
    position: relative !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important;
}

/* --- ĐỊNH DẠNG TEXT VÀ TẠO ĐƯỜNG KẺ GIỮA CÁC DÒNG --- */
.product-short-description p {
    font-size: 15px !important;
    color: #333333 !important;
    line-height: 2.3 !important; /* Tăng khoảng cách dòng để giao diện thoáng, sang trọng */
    margin: 0 !important;
    text-align: justify !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    /* Dùng dải màu gradient tuyến tính để giả lập đường kẻ dưới cho mỗi dòng text <br> */
    background: linear-gradient(to bottom, transparent 95%, rgba(0, 0, 0, 0.05) 95%) !important;
    background-size: 100% 2.3em !important; /* Khớp chính xác với line-height */
}

/* --- ĐỊNH DẠNG TIÊU ĐỀ VÀ GIÁ TIỀN (THEO HTML THỰC TẾ) --- */
.product-title-container h1.product-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
}

/* Khu vực hiển thị giá tiền */
.product-price-container .price-wrapper .price-on-sale {
    display: flex !important;
    flex-direction: row-reverse !important; /* Đảo giá khuyến mãi ra trước */
    justify-content: flex-end !important;
    align-items: baseline !important;
    gap: 15px !important;
    margin-bottom: 5px !important;
}

/* Cấu hình giá mới (Màu đỏ, cỡ lớn) */
.product-price-container .price-wrapper .price-on-sale ins {
    text-decoration: none !important;
}
.product-price-container .price-wrapper .price-on-sale ins .woocommerce-Price-amount {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #e50914 !important;
}

/* Cấu hình giá gốc cũ (Màu xám, nhỏ) */
.product-price-container .price-wrapper .price-on-sale del .woocommerce-Price-amount {
    font-size: 16px !important;
    color: #999999 !important;
    font-weight: 500 !important;
}
/* --- NÂNG CẤP KHUNG CARD SẢN PHẨM SANG TRỌNG --- */
.product-small.box {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    /* Đổ bóng mịn diện rộng để tạo chiều sâu nổi bật */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important; 
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    padding: 15px !important; /* Tạo khoảng cách thở giữa ảnh và viền */
}

/* Hiệu ứng nhấc bổng lên và đổi màu viền tinh tế khi hover */
.product-small.box:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 15px 35px rgba(0, 86, 179, 0.12) !important;
    border-color: rgba(0, 86, 179, 0.3) !important;
}

/* --- TỐI ƯU KHU VỰC HÌNH ẢNH --- */
.product-small .box-image {
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fafafa !important; /* Tạo nền xám nhẹ phía sau sản phẩm tách nền */
}

.product-small .box-image img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.product-small.box:hover .box-image img {
    transform: scale(1.05) !important; /* Zoom nhẹ hình ảnh cực mượt */
}

/* --- TINH CHỈNH NHÃN GIẢM GIÁ (BADGE SALE) --- */
.product-small .badge-inner.on-sale {
    background-color: #e50914 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(229, 9, 20, 0.3) !important;
    top: 15px !important;
    left: 15px !important;
}

/* --- PHẦN CHỮ NỘI DUNG (TEXT BOX) --- */
.product-small .box-text {
    padding: 15px 5px 5px 5px !important;
    text-align: center !important;
}

/* Tên sản phẩm đậm nét công nghệ, giới hạn vừa vặn 2 dòng */
.product-small .product-title a,
.product-small .title-wrapper p.name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    line-height: 1.4 !important;
    height: 44px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    text-decoration: none !important;
}

.product-small.box:hover .product-title a {
    color: #0056b3 !important; /* Đổi sang xanh công nghệ khi di chuột vào */
}

/* --- BỐ CỤC LẠI KHU VỰC GIÁ (PRICE) --- */
.product-small .price-wrapper {
    margin-top: 5px !important;
}

.product-small .price-wrapper .price {
	display: inline-grid;
    flex-direction: row-reverse !important; /* Ưu tiên đảo giá mới ra trước */
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Cấu hình giá đã giảm (Màu đỏ, nổi bật) */
.product-small .price ins {
    text-decoration: none !important;
}

.product-small .price ins .woocommerce-Price-amount {
    font-size: 18px !important;
    font-weight: bold !important;
    color: #e50914 !important;
}

/* Cấu hình giá cũ (Màu xám, nhỏ hơn, gạch ngang) */
.product-small .price del .woocommerce-Price-amount {
    font-size: 14px !important;
    color: #999999 !important;
    font-weight: 500 !important;
}
/* --- TỐI ƯU KHUNG CHỨA SẢN PHẨM --- */
.related-products .product-small.box, 
.related.products .product-small.box {
    background: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #eeeeee !important;
}

/* Hover bay lên nhẹ */
.related-products .product-small.box:hover,
.related.products .product-small.box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
    border-color: #0056b3 !important;
}

/* --- TỐI ƯU HÌNH ẢNH --- */
.related-products .box-image,
.related.products .box-image {
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
}

.related-products .box-image img,
.related.products .box-image img {
    transition: transform 0.5s ease !important;
}

.related-products .product-small.box:hover .box-image img,
.related.products .product-small.box:hover .box-image img {
    transform: scale(1.06) !important;
}

/* --- LÀM LẠI NHÃN GIẢM GIÁ (BADGE SALE) --- */
.related-products .badge-inner.on-sale,
.related.products .badge-inner.on-sale,
.product-small .badge-inner.on-sale {
    background-color: #e50914 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(229, 9, 20, 0.4) !important;
}

/* --- CANH CHỈNH PHẦN NỘI DUNG --- */
.related-products .box-text,
.related.products .box-text {
    padding: 15px 12px !important;
}

/* Tên sản phẩm giới hạn 2 dòng */
.related-products .product-title a,
.related.products .product-title a,
.related-products .title-wrapper p.name,
.related.products .title-wrapper p.name {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    line-height: 1.4 !important;
}

/* --- KHU VỰC GIÁ --- */
.related-products .price-wrapper .price,
.related.products .price-wrapper .price {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.related-products .price ins .woocommerce-Price-amount,
.related.products .price ins .woocommerce-Price-amount {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #e50914 !important;
}

.related-products .price del .woocommerce-Price-amount,
.related.products .price del .woocommerce-Price-amount {
    font-size: 13px !important;
    color: #999999 !important;
}

.review-heading-wrapper {
    position: relative;
    text-align: center;
    padding: 40px 0;
    width: 100%;
    overflow: hidden;
}

/* Cấu hình chữ REVIEWS chìm phía sau */
.heading-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 90px; /* Tăng giảm kích thước chữ nền tại đây */
    font-weight: 800;
    letter-spacing: 4px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 86, 179, 0.2); /* Tạo viền xanh rỗng nét mảnh */
    z-index: 1;
    user-select: none;
    white-space: nowrap;
}

/* Cấu hình dòng chữ tiêu đề chính phía trước */
.heading-main-text {
    position: relative;
    font-size: 32px; /* Tăng giảm kích thước tiêu đề chính tại đây */
    font-weight: 700;
    color: #000000;
    margin: 0;
    z-index: 2;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* Màu xanh đậm đặc trưng cho chữ SSEHOME */
.brand-blue {
    color: #0056b3;
}

/* Tối ưu hiển thị trên giao diện điện thoại */
@media (max-width: 767px) {
    .heading-bg-text {
        font-size: 55px;
    }
    .heading-main-text {
        font-size: 22px;
    }
}

.image-box-wrapper {
    position: relative;
    padding: 20px;
}

.image-bg-border {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 85%;
    height: 85%;
    border: 3px solid #0056b3;
    border-radius: 4px;
    z-index: 1;
}

.image-bg-block {
    position: absolute;
    top: 10%;
    left: 0;
    width: 30px;
    height: 75%;
    background-color: #0056b3;
    border-radius: 4px;
    z-index: 1;
    opacity: 0.9;
}

.image-main-content {
    position: relative;
    z-index: 2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
}

.image-main-content img {
    display: block;
    width: 100%;
    height: auto;
}

/* --- TỔNG THỂ KHU VỰC FOOTER NỀN KHÓA THÔNG MINH --- */
#footer.footer-wrapper {
    background-color: #1a1d20 !important;
    /* Vân kim loại titan kết hợp vi mạch điện tử chìm công nghệ */
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cpath d='M20 20h40v20H20zm100 20h20v60h-20zm-40 80h60v20h-60zm-40 40h20v20H40z' fill='%232a2f35' fill-opacity='0.15'/%3E%3Cpath d='M0 100h200M100 0v200M50 0v200M150 0v200M0 50h200M0 150h200' stroke='%2325292f' stroke-width='1' stroke-opacity='0.2'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%236c7a89' fill-opacity='0.2'/%3E%3Ccircle cx='120' cy='40' r='3' fill='%236c7a89' fill-opacity='0.2'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M30 0l30 17.32v34.64L30 69.28 0 51.96V17.32zm0 104l30-17.32v-34.64L30 34.72 0 52.04v34.64z' fill='none' stroke='%232c3238' stroke-width='1' stroke-opacity='0.3'/%3E%3C/svg%3E"),
        linear-gradient(rgba(27, 30, 34, 0.96), rgba(21, 23, 26, 0.98)) !important;
    color: #a0a7b0 !important;
    font-family: 'Inter', sans-serif;
    position: relative;
    border-top: 2px solid #2d3339;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}

/* Khối nội dung footer chính */
.footer-widgets.footer-2 {
    padding: 60px 0 40px 0 !important;
    background: transparent !important;
}

/* ĐỊNH DẠNG TEXT & TIÊU ĐỀ */
.footer-2 .widget-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 15px !important;
}

/* Ẩn đường gạch mặc định lỗi thời của Flatsome */
.footer-2 .is-divider.small {
    display: none !important;
}


/* --- THANH BẢN QUYỀN PHÍA DƯỚI (Absolute Footer) --- */
.absolute-footer {
    background-color: transparent !important;
    border-top: 1px solid #282c32 !important;
    padding: 20px 0 !important;
}

.absolute-footer .copyright-footer {
    color: #626970 !important;
    font-size: 13px;
    width: 100%;
    text-align: center;
}

.absolute-footer .copyright-footer a {
    color: #626970 !important;
    font-weight: 500;
    text-decoration: none;
}
.absolute-footer .copyright-footer a:hover {
    color: #ffffff !important;
}

/* Tạo ngôi sao công nghệ phát sáng góc phải thanh bản quyền */
.absolute-footer .container {
    position: relative;
}
.absolute-footer .container::after {
    content: "✦";
    position: absolute;
    right: 15px;
    top: 2px;
    color: #4e555d;
    font-size: 14px;
}

/* Điều chỉnh lại độ co giãn cho layout 3 cột trên mobile của Flatsome */
@media (max-width: 767px) {
    #footer.footer-wrapper {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    .absolute-footer .container::after {
        display: none !important;
    }
}

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


}