/*
Theme Name: remdepgiare 01 08 25
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  ***************/


}


/*
 * ====================================================
 * TỐI ƯU GỐC & HIỆU SUẤT CAO (CHUNG)
 * ====================================================
 */

:root {
    --transition-speed-slow: 0.38s;
    --transition-speed-fast: 0.2s;
    --timing-fn-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
    --underline-color: dodgerblue;
}

body {
    /* Tối ưu hiển thị font */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base Transition for common elements */
a, button, .btn, .card, .post-box, .widget {
    transition: all var(--transition-speed-slow) var(--timing-fn-smooth);
}

/* Kích hoạt GPU khi hover để tăng hiệu suất */
.card:hover, .post-box:hover, .widget:hover, .btn:hover {
    will-change: transform, box-shadow;
}

/* Biện pháp chống xung đột/nháy sáng */
.no-transition, .no-transition *, img, svg, a:has(img) * {
    transition: none !important;
    will-change: auto; 
    transform: none; 
}
/* font chữ của phần tiêu đề trong mô tả ngắn sản phâm*/

/* ---------------------------------------------------- */
/* FIX: Đặt lại cỡ chữ cho Tiêu đề H trong mô tả ngắn sản phẩm */
/* ---------------------------------------------------- */

/* Loại trừ tiêu đề H bên trong các khối sản phẩm (post-box, product-small) */
.post-box h1, .post-box h2, .post-box h3, 
.post-box h4, .post-box h5, .post-box h6,
.product-small h1, .product-small h2, .product-small h3,
.product-small h4, .product-small h5, .product-small h6 {
    /* Đặt cỡ chữ về cỡ chữ thừa kế (giống body) */
    font-size: inherit !important; 
    
    /* Đảm bảo chiều cao dòng không quá lớn */
    line-height: 1.4 !important; 
    
    /* Tùy chọn: Đặt lại độ đậm nếu cần */
    font-weight: normal !important; 
	}

/* 2. Ghi đè cho các thẻ in đậm trong mô tả ngắn sản phẩm */
.post-box b, .post-box strong, .post-box span.has-text-weight-bold,
.product-small b, .product-small strong, .product-small span.has-text-weight-bold {
    font-weight: normal !important; /* Chuyển về chữ thường (không in đậm) */
}

/* ---------------------------------------------------- */
/* TIÊU ĐỀ H (NỀN XÁM NHẠT & ÁNH SÁNG HOVER) */
/* ---------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    /* Base style */
    display: inline-block;
    background: rgba(150, 150, 150, 0.1);
    padding: 2px 5px;
    border: none;
    position: relative;
    overflow: hidden; 
    cursor: pointer;
    z-index: 1;
    transition: all 0.4s ease-out; 
}

/* ÁNH SÁNG VÀ HOVER CHỈ ÁP DỤNG CHO DESKTOP (>= 768px) */
@media (min-width: 768px) {
    /* Hiệu ứng ánh sáng ::before */
    h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
        content: '';
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.6); 
        z-index: 2;
        /* Điều chỉnh: Đẩy ra ngoài nhiều hơn để đảm bảo không bị mờ ban đầu */
        transform: translateX(-120%) skewX(-20deg); 
        transition: transform 0.4s var(--timing-fn-smooth);
    }

    h1:hover::before, h2:hover::before, h3:hover::before, h4:hover::before, h5:hover::before, h6:hover::before {
        /* Điều chỉnh: Đảm bảo chạy hết ra ngoài */
        transform: translateX(220%) skewX(-20deg); 
    }
    
    h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
        transform: translateY(-1px) translateZ(0); 
    }
}

/* ---------------------------------------------------- */
/* HIỆU ỨNG LINK: GẠCH CHÂN & ÁNH SÁNG (ĐÃ FIX BUG) */
/* ---------------------------------------------------- */

/* Link Base */
a:not(:has(img)) {
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    padding-bottom: 5px; 
    color: #333;
    transition: color 0.3s ease; 
}

/* Gạch chân ::after */
a:not(:has(img))::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--underline-color);
    height: 2px;
    width: 0;
    transition: width 0.3s ease-in-out;
}

a:not(:has(img)):hover::after {
    width: 100%;
}
a:not(:has(img)):hover {
    color: #007bff;
}

/* HIỆU ỨNG ÁNH SÁNG TRÊN LINK CHỈ ÁP DỤNG CHO DESKTOP (ĐÃ FIX) */
@media (min-width: 768px) {
    a:not(:has(img))::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 50%; 
        height: 100%;
        
        /* CẬP NHẬT: Gradient sáng lóa */
        background: linear-gradient(
            90deg, 
            rgba(255, 255, 255, 0) 0%, 
            rgba(255, 255, 255, 1) 50%, 
            rgba(255, 255, 255, 0) 100%
        );
        z-index: 3;
        
        /* FIX QUAN TRỌNG: Đẩy vệt sáng ra xa hơn để không bị mờ ở trạng thái ban đầu */
        transform: translateX(-250%) skewX(-20deg); 
        transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); 
        
        pointer-events: none;
    }
    a:not(:has(img)):hover::before {
        /* Đảm bảo nó chạy hết từ ngoài vào và ra ngoài */
        transform: translateX(350%) skewX(-20deg); 
    }
}

/* Loại trừ hiệu ứng cho Banner Slider */
div.banner-slider a, 
div.banner-slider a::before,
div.banner-slider a::after {
    content: none !important;
    position: initial !important; 
    overflow: visible !important;
    text-decoration: none !important;
    z-index: auto !important;
    padding: 0 !important;
    transition: none !important;
    transform: none !important;
}


/* ---------------------------------------------------- */
/* HIỆU ỨNG THẺ (LIFT EFFECT) */
/* ---------------------------------------------------- */
.card, .post-box, .widget {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    transform: translateZ(0); 
}

/* HIỆU ỨNG LIFT CHỈ ÁP DỤNG CHO DESKTOP */
@media (min-width: 768px) {
    .card:hover, .post-box:hover, .widget:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.1);
    }
}

/* ---------------------------------------------------- */
/* HIỆU ỨNG NÚT CHUNG (SHINE & LIFT) */
/* ---------------------------------------------------- */
.button, a.button, .wp-block-button__link, input[type="submit"] {
    /* Style và GPU base */
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform var(--transition-speed-fast) cubic-bezier(0.4, 0, 0.2, 1), box-shadow var(--transition-speed-fast) cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0); 
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* Ánh sáng nút ::before (Chỉ kích hoạt trên Desktop) */
@media (min-width: 768px) {
    .button::before, a.button::before, .wp-block-button__link::before, input[type="submit"]::before {
        content: '';
        position: absolute;
        top: 0;
        width: 50%;
        height: 100%;
        /* Sử dụng gradient để ánh sáng lóa */
        background: linear-gradient(
            90deg, 
            rgba(255, 255, 255, 0) 0%, 
            rgba(255, 255, 255, 1) 50%, 
            rgba(255, 255, 255, 0) 100%
        );
        opacity: 0;
        z-index: 2;
        /* FIX: Đẩy ra xa hơn */
        transform: translateX(-150%) skewX(-20deg); 
        transition: transform 0.5s var(--timing-fn-smooth), opacity 0.3s ease;
    }

    /* HOVER/FOCUS (Desktop) */
    .button:hover, .button:focus, a.button:hover, a.button:focus, 
    .wp-block-button__link:hover, .wp-block-button__link:focus, 
    input[type="submit"]:hover, input[type="submit"]:focus {
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        transform: scale(1.02); 
    }

    .button:hover::before, .button:focus::before, a.button:hover::before, a.button:focus::before,
    .wp-block-button__link:hover::before, .wp-block-button__link:focus::before,
    input[type="submit"]:hover::before, input[type="submit"]:focus::before {
        /* FIX: Đảm bảo chạy hết ra ngoài */
        transform: translateX(300%) skewX(-20deg);
        opacity: 1;
    }
}

/* ---------------------------------------------------- */
/* HIỆU ỨNG NÚT 3D (NEUMORPHISM) */
/* ---------------------------------------------------- */
.btn-3d {
    /* FIX: Thay đổi màu không hợp lệ thành màu trắng giả định */
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 12px 25px;
    cursor: pointer;
    box-shadow: 
        5px 5px 10px rgba(174, 174, 192, 0.4), 
        -5px -5px 10px rgba(255, 255, 255, 1);
    transform: translateZ(0); 
}

.btn-3d:active {
    /* Active vẫn giữ trên Mobile để mô phỏng nhấn */
    transform: scale(0.98); 
    box-shadow: 
        inset 2px 2px 5px rgba(174, 174, 192, 0.6),
        inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}

@media (min-width: 768px) {
    .btn-3d:hover {
        transform: translateY(-2px);
        box-shadow: 
            7px 7px 14px rgba(174, 174, 192, 0.6),
            -7px -7px 14px rgba(255, 255, 255, 1);
    }
}

/* ghi đè hiệu ứng nút cho phân trang*/
/* ---------------------------------------------------- */
/* FIX: Xung đột CSS Pagination (Phân Trang) */
/* ---------------------------------------------------- */

/* Ghi đè hiệu ứng Link chung và Nút chung cho các liên kết phân trang */
/* Thay thế .page-numbers bằng class chính xác của phần tử phân trang nếu cần */
.page-numbers a, .page-numbers span, 
.pagination a, .pagination span {
    /* 1. Loại bỏ các quy tắc link/nút xung đột */
    position: initial !important; 
    overflow: visible !important;
    text-decoration: none !important;
    padding: 0 !important;
    z-index: auto !important;
    transform: none !important;

    /* 2. Đảm bảo màu chữ hiển thị rõ */
    color: #333333 !important; /* Đặt lại màu chữ tối để không bị ẩn trên nền sáng */
    background-color: transparent !important; /* Đảm bảo nút không áp dụng nền của .button */
}

/* Loại bỏ các pseudo-element (gạch chân/ánh sáng) khỏi phân trang */
.page-numbers a::before, .page-numbers a::after, 
.pagination a::before, .pagination a::after {
    content: none !important;
    position: initial !important;
    transition: none !important;
    transform: none !important;
}

/* ---------------------------------------------------- */
/* HIỆU ỨNG KHÁC VÀ WP FIX */
/* ---------------------------------------------------- */

/* Kính Mờ (Frosted Glass) - Áp dụng chung */
.fixed-header, .sticky-nav {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Phóng to Chữ khi Hover (Chỉ Desktop) */
@media (min-width: 768px) {
    h2 a:hover, h3 a:hover, p a:hover {
        transform: scale(1.02);
        display: inline-block;
        text-decoration: none;
    }
}

/* Đường Viền Ảo cho Input khi Focus */
.input-focus:focus {
    outline: none;
    box-shadow: 0 0 0 3px #007bff;
}

/* WP MENU FIX */
.main-navigation li.menu-item-has-children, 
.main-navigation li:has(.sub-menu) {
    overflow: visible; 
}

.main-navigation .sub-menu li a {
    display: block !important; 
    width: 100% !important;
    min-width: 250px;
    overflow: hidden;
    padding: 8px 15px;
    z-index: 4;
}