/*
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.   ***************/
/* ==========================================================================
   1. PHÁ VỠ CẤU TRÚC LƯỚI (GRID) TRÊN TRANG PRODUCT CATALOG (SHOP/CATEGORY)
   ========================================================================== */

/* Ép container chứa sản phẩm hiển thị dạng khối dọc thay vì lưới ô vuông */
.archive.woocommerce .products.row,
.archive.woocommerce .products.grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Ép tất cả các cột sản phẩm mở rộng 100% chiều ngang */
.archive.woocommerce .products .col {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    padding: 0 !important;
    float: none !important;
}

/* Khung bao ngoài tạo khoảng cách hàng cho trang Catalog */
.catalog-coupon-item-wrapper {
    width: 100%;
    margin-bottom: 20px;
}

/* Container tổng bao ngoài danh sách đối với Shortcode [ux_coupon_list] */
.custom-coupon-container {
    border-radius: 14px;
    max-width: 1200px;
    margin: auto;
}


/* ==========================================================================
   2. CẤU TRÚC VÀ ĐỊNH DẠNG KHUNG LOGO HÌNH VUÔNG (DESKTOP)
   ========================================================================== */

/* Khung viền toàn bộ hàng */
.coupon-item-row {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px !important;
    padding: 15px 15px !important; 
    min-height: 150px;             
    display: flex;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.coupon-item-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

/* Cột 1: Khối chứa Logo và Discount Text */
.coupon-col-left {
    display: flex;
    align-items: center;
    width: 30%;
    border-right: 1px solid #edf2f7; 
    padding-right: 25px;
}

/* ==========================================================================
   CẬP NHẬT ÉP LOGO/ẢNH SẢN PHẨM HIỂN THỊ THÀNH HÌNH VUÔNG TUYỆT ĐỐI
   ========================================================================== */

/* 1. Khung chứa cấu hình vuông cứng, chống bóp méo */
.coupon-logo-wrapper {
    width: 120px !important;        /* Chiều rộng khung vuông */
    height: 120px !important;       /* Chiều cao khung vuông */
    margin-right: 25px !important;  
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e2e8f0 !important; /* Viền mỏng màu xám nhạt tinh tế */
    background: #ffffff !important;
    overflow: hidden !important;          /* Ẩn các phần ảnh thừa ra ngoài khung vuông */
    flex-shrink: 0 !important;            /* Ép không cho khung vuông bị co lại khi màn hình nhỏ */
    box-sizing: border-box !important;
}

/* 2. Ép ảnh sản phẩm lấp đầy hoàn toàn ô vuông không để lại khoảng trống */
.coupon-logo-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    
    /* THAY ĐỔI QUAN TRỌNG: 
       Đổi từ "contain" sang "cover" để ảnh tự phóng to và phủ kín ô vuông 90x90, 
       loại bỏ hoàn toàn cảm giác hình chữ nhật do ảnh gốc 300x213 gây ra.
    */
    object-fit: cover !important; 
    
    position: static !important;
    transform: none !important;
}

.coupon-logo-link {
    display: inline-block;
    transition: opacity 0.2s ease;
}
.coupon-logo-link:hover {
    opacity: 0.8;
}

/* Số phần trăm giảm giá */
.coupon-discount-value {
    font-size: 30px !important;    
    font-weight: 800 !important;   
    color: #1a202c;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    flex: 1;
}

/* Cột 2: Tiêu đề sản phẩm gốc và Thương hiệu phụ */
.coupon-col-middle {
    width: 50%;
    padding-left: 35px;
    padding-right: 20px;
}

.coupon-item-title {
    font-size: 22px !important;    
    font-weight: 700 !important;   
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.coupon-item-title a {
    color: #2d3748 !important;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.coupon-item-title a:hover {
    color: #2e59ca !important; 
}

.coupon-item-vendor {
    font-size: 13px !important;
    color: #4a5568;
    text-decoration: underline;
    font-weight: 500;
}

/* Cột cuối cùng: Chứa nút bấm ngoại sàn */
.coupon-col-right {
    width: 20%;
    text-align: right;
}

/* Thiết kế nút bấm "View Detail" */
.coupon-action-btn {
    background-color: #2e59ca !important;
    color: #ffffff !important;
    padding: 14px 35px !important; 
    font-size: 14px !important;
    font-weight: 600;
    border-radius: 6px !important; 
    text-transform: none;
    display: inline-block;
    transition: background-color 0.2s ease;
    border: none;
    text-decoration: none;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.coupon-action-btn:hover {
    background-color: #1e429f !important;
    color: #ffffff !important;
}


/* ==========================================================================
   3. TỐI ƯU RESPONSIVE CHO MÀN HÌNH NHỎ VÀ DI ĐỘNG (MOBILE)
   ========================================================================== */

/* Cho màn hình iPad / Máy tính bảng nhỏ */
@media (max-width: 991px) {
    .coupon-item-title {
        font-size: 19px !important;
    }
    .coupon-logo-wrapper {
        width: 80px !important;   /* Giảm nhẹ size vuông trên máy tính bảng */
        height: 80px !important;
        margin-right: 15px !important;
    }
    .coupon-discount-value {
        font-size: 24px !important;
    }
}

/* Cho màn hình điện thoại di động (Mobile) */
@media (max-width: 768px) {
    .coupon-item-row {
        flex-direction: column;
        text-align: center;
        padding: 10px 10px !important; 
        min-height: auto;
    }
    
    .coupon-col-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #edf2f7; 
        padding-right: 0;
        padding-bottom: 20px;
        flex-direction: column;
        gap: 12px;
    }
    
    .coupon-logo-wrapper {
        margin-right: 0 !important;
        width: 90px !important;   /* Giữ nguyên hình vuông cân đối ở giữa màn hình mobile */
        height: 90px !important;
    }

    .coupon-col-middle {
        width: 100%;
        padding: 20px 0 !important;
    }
    
    .coupon-item-title {
        font-size: 18px !important; 
    }

    .coupon-col-right {
        width: 100%;
        text-align: center;
    }
    
    .coupon-action-btn {
        width: 100%;       
        display: block;
    }
}

/* ==========================================================================
   CSS TÙY BIẾN CHO TRANG CHI TIẾT SẢN PHẨM (SINGLE PRODUCT DETAIL)
   ========================================================================== */

/* 1. Định dạng chữ hiển thị mã giảm giá (Thay thế vị trí giá gốc) */
.single-product-coupon-discount {
    font-size: 28px !important;    /* Kích thước chữ lớn nổi bật */
    font-weight: 700 !important;   /* Độ đậm cao */
    color: #1a202c !important;     /* Màu tối sang trọng giống chữ mẫu */
    margin-top: 10px !important;
    margin-bottom: 20px !important;
    line-height: 1.2;
    text-transform: uppercase;     /* Tự động viết hoa chữ OFF/SAVE */
}

/* 2. Khung chứa nút Get this Deal mới */
.single-product-deal-btn-wrapper {
    margin-top: 25px;
    margin-bottom: 25px;
    display: block;
    width: 100%;
}

/* 3. Thiết kế nút "Get this Deal" bản to, dày dặn và có đổ bóng hiện đại */
.single-product-get-deal-btn {
    background-color: #00c6a5 !important; /* Đồng bộ màu xanh thương hiệu với trang danh sách */
    color: #000000 !important;
    padding: 15px 45px !important;        /* Tăng độ dày của nút bấm */
    font-size: 18px !important;           /* Chữ to rõ ràng */
    font-weight: 600 !important;
    border-radius: 6px !important;        /* Bo góc khối vuông vắn */
    display: inline-block !important;
    text-transform: none !important;      /* Giữ nguyên định dạng chữ viết thường/hoa */
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(46, 89, 202, 0.2); /* Tạo hiệu ứng nổi nhẹ đổ bóng */
    text-align: center;
}

/* Hiệu ứng khi rà chuột (Hover) vào nút */
.single-product-get-deal-btn:hover {
    background-color: #06ad91 !important; /* Đổi màu xanh đậm hơn khi hover */
    color: #ffffff !important;
    transform: translateY(-1px);          /* Nhấc nhẹ nút lên */
    box-shadow: 0 6px 18px rgba(46, 89, 202, 0.32);
}

/* Tối ưu hiển thị nút bấm tràn màn hình trên điện thoại di động */
@media (max-width: 768px) {
    .single-product-get-deal-btn {
        display: block !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   CSS ĐỊNH DẠNG GIAO DIỆN PHẲNG XẾP CHỒNG CHO DESCRIPTION & REVIEWS
   ========================================================================== */

/* Khung chứa tiêu đề: Tạo đường line xám nhạt full-width chạy dài */
.custom-stacked-heading {
    border-bottom: 1px solid #e2e8f0 !important; /* Đường kẻ ngang full-width màu xám */
    margin-top: 40px !important;                 /* Khoảng cách phía trên khối */
    margin-bottom: 25px !important;              /* Khoảng cách từ tiêu đề xuống nội dung */
    text-align: left !important;
}

/* Chữ tiêu đề bên trong: Tạo đường kẻ xanh đậm bám theo độ dài chữ */
.custom-stacked-heading span {
    font-size: 16px !important;                  /* Cỡ chữ chuẩn giao diện mẫu */
    font-weight: 700 !important;                  /* Độ đậm chữ */
    color: #2d3748 !important;                    /* Màu chữ xám tối sang trọng */
    display: inline-block !important;
    padding-bottom: 10px !important;             /* Khoảng cách từ chữ xuống đường kẻ */
    border-bottom: 2px solid #2e59ca !important;  /* Đường kẻ xanh đậm dưới chân chữ */
    margin-bottom: -1px !important;              /* Ép đường kẻ xanh đè khít lên đường kẻ xám */
    text-transform: none !important;              /* Giữ nguyên chữ hoa/thường (Ví dụ: Description) */
    letter-spacing: 0.2px;
}

/* Ẩn tiêu đề "Reviews" mặc định của WooCommerce để tránh bị trùng lặp 2 chữ */
.stacked-reviews-section h2.woocommerce-Reviews-title {
    display: none !important;
}

/* Khoảng cách thông thoáng cho phần nội dung phía dưới */
.stacked-content-body {
    padding: 5px 0;
}

/* ==========================================================================
   GIỮ NGUYÊN KHU KHUNG VIỀN BOX ĐÁNH GIÁ PHÍA DƯỚI
   ========================================================================== */
.stacked-reviews-section #review_form_wrapper {
    border: 2px solid #e0ebf9 !important; 
    background-color: #edf1f8 !important;  
    padding: 35px !important;              
    border-radius: 8px !important;          
    margin-top: 20px !important;
}

.stacked-reviews-section .comment-reply-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2d3748 !important;
    margin-bottom: 20px !important;
    display: block;
}

.stacked-reviews-section #submit {
    background-color: #3b5898 !important; 
    color: #ffffff !important;
    padding: 10px 30px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    border: none !important;
}

/* ==========================================================================
   THAY THẾ: SỬA TRIỆT ĐỂ LỖI ẨN MŨI TÊN & SỬA CHỮ BỊ DÍNH NHAU
   ========================================================================== */

/* Khung bao quanh: Cho phép các vật thể bên trong hiển thị tràn ra ngoài rộng rãi */
.product-coupon-code-wrapper {
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
}

/* 1. Bong bóng chỉ dẫn: ÉP BẮT BUỘC LỘ MŨI TÊN */
.coupon-info-bubble {
    position: relative !important;
    background: #f1f5f9 !important;      
    border: 1px solid #94a3b8 !important;  /* Đường viền xám đậm rõ nét */
    padding: 6px 14px !important;
    border-radius: 6px !important;        
    display: block !important;             
    width: max-content !important;         
    font-weight: 600 !important;           
    color: #334155 !important;            
    margin-bottom: 15px !important;        
    text-align: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02) !important;

    /* DÒNG LỆNH QUAN TRỌNG: Vô hiệu hóa tính năng ẩn viền của theme để hiển thị mũi tên */
    overflow: visible !important; 
}

/* KHỐI MŨI TÊN NGOÀI (Tạo đường viền màu xám #94a3b8 bao quanh mũi tên) */
.coupon-info-bubble::before {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;                /* Nằm sát dưới đáy hộp chữ */
    left: 30px !important;               /* Căn vị trí lệch trái thẳng hàng icon tag */
    width: 0 !important;
    height: 0 !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-top: 7px solid #94a3b8 !important; /* Đổ màu viền cho mũi tên */
    display: block !important;
}

/* KHỐI MŨI TÊN TRONG (Đổ màu ruột xám nhạt #f1f5f9 đè lên để che khoảng hở) */
.coupon-info-bubble::after {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;                /* Nằm sát dưới đáy hộp chữ */
    left: 31px !important;               /* Dịch 1px để nằm lọt lòng chuẩn xác */
    width: 0 !important;
    height: 0 !important;
    border-left: 6px solid transparent !important;
    border-right: 6px solid transparent !important;
    border-top: 6px solid #f1f5f9 !important; /* Đổ màu ruột trùng nền hộp chữ */
    display: block !important;
}

/* 2. Khung viên thuốc chứa mã code (Sửa khoảng cách) */
.coupon-pill-box {
    background: #2c3e4f !important;       
    color: #ffffff !important;
    border-radius: 50px !important;       
    padding: 10px 24px !important;
    display: inline-flex !important;      
    align-items: center !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15) !important;
    margin-top: 2px !important;
    
    /* TẠO KHOẢNG CÁCH: Ngăn các phần tử text/icon bên trong không va dính vào nhau */
    gap: 12px !important; 
}

/* Icon nhãn tag phía trước mã */
.coupon-icon-ticket {
    color: #00e676 !important;            
    display: flex !important;
    align-items: center !important;
}

/* Chữ mã giảm giá (BMSM7) */
.coupon-code-text {
    color: #00e676 !important;            
    font-weight: 700 !important;          
    font-size: 20px !important;
    letter-spacing: 0.8px !important;
}

/* Nút hành động Copy ở bên phải (Làm rõ đường gạch ngăn cách dọc) */
.coupon-copy-action {
    font-weight: 600 !important;
    border-left: 1px solid #475569 !important; /* Thanh kẻ đứng phân tách rõ ràng giữa Code và chữ Copy */
    padding-left: 14px !important;
    margin-left: 2px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   XÓA BỎ CHỮ REVIEWS MẶC ĐỊNH BỊ TRÙNG LẶP Ở BÊN DƯỚI
   ========================================================================== */
.stacked-reviews-section #comments > h2,
.stacked-reviews-section #comments > h3,
.stacked-reviews-section .woocommerce-Reviews-title,
#reviews #comments h2,
#reviews #comments h3 {
    display: none !important;
}

/* ==========================================================================
   ẨN HOÀN TOÀN BỘ ĐẾM KẾT QUẢ VÀ BỘ LỌC SẮP XẾP SẢN PHẨM (CATALOG)
   ========================================================================== */
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering {
    display: none !important;
}

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

}