/*
Theme Name: BICTweb.vn
Description: This is a child theme for BICTweb.vn
Author: UX Themes
Template: flatsome
Version: 3.0
*/


.badge absolute top post-date badge-circle{ display: none !important; }

.badge.post-date {
    display: none !important;
}

.from_the_blog_excerpt{
    display: none !important;
}


/*
.col.post-item img.wp-post-image {
    object-fit: fill !important;
}
.col.post-item h5.post-title.is-large {
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;
}

*/


.post-item .col-inner::before, .post-item .col-inner::after{
    content:"";
    width: 0;
    height: 2px;
    z-index:1;
    position: absolute;
    transition: all 0.2s linear;
    background: #E21B21;
    box-shadow:
    transition:400ms ease all;
    transition-delay: 0.3s;
    }
    .post-item .col-inner .box::before, .post-item .col-inner .box::after{
    content:"";
    width:2px;
    height:0;
    z-index:1;
    position: absolute;
    transition: all 0.2s linear;
    background: rgb(45, 47, 139);
    transition:400ms ease all;
    transition-delay: 0s;
    }
    .post-item .col-inner:hover::before, .post-item .col-inner:hover::after{
    width: 100% ;
    }
    .post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{
    height: 100%;
    }
    .post-item .col-inner::before{
    right: 0;
    top: 0;
    }
    .post-item .col-inner::after{
    left: 0;
    bottom: 0;
    }
    .post-item .col-inner .box::before{
    left: 0;
    top: 0;
    }
    .post-item .col-inner .box::after{
    right: 0;
    bottom: 0;
    }
    .post-item .col-inner:hover::before, .post-item .col-inner:hover::after{
    transition-delay: 0s;
    }
    .post-item .col-inner:hover .box::before, .post-item .col-inner:hover .box::after{
    transition-delay: 0.3s;
    }

    #shop-sidebar{
        box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
        padding: 10px;
        border-radius: 10px
    }
    
    #product-sidebar{
        box-shadow: rgb(60 64 67 / 10%) 0px 1px 2px 0px, rgb(60 64 67 / 15%) 0px 2px 6px 2px;
        padding: 10px;
        border-radius: 10px
    }
    .product-small .box-image:hover::before{
        -webkit-animation:shine .75s;animation:shine .75s
        }
        @-webkit-keyframes shine{
        100%{left:125%}
        }
        @keyframes shine{
        100%{left:125%}
        }
        .product-small .box-image::before{
        position:absolute;
        top:0;
        left:-75%;
        z-index:2;
        display:block;
        content:'';
        width:50%;
        height:100%;
        background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
        background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
        -webkit-transform:skewX(-25deg);transform:skewX(-25deg)
        }

        body.archive .woocommerce-ordering,
body.search .woocommerce-ordering {
    display: none !important;
}

/* === CODFE HEADING STYLE #1 === */
/* ======================================================= */

/* ======================================================= */
/* TẠO ĐƯỜNG GẠCH CHÂN MÀU ĐỎ DƯỚI H2 TRONG .my-css (Đã tinh chỉnh) */
/* ======================================================= */

/* Căn giữa tiêu đề H2, đổi màu chữ và tạo khoảng trống */
.my-css h2 {
    text-align: center;
    position: relative; 
    color: rgb(45, 47, 139) !important; /* THAY ĐỔI MÀU CHỮ TẠI ĐÂY */
    padding-bottom: 25px; 
    margin-bottom: 30px; 
}

/* 1. Tạo đường gạch ngang màu XÁM NHẠT (nền) bằng thuộc tính ::before */
.my-css h2::before {
    content: "";
    display: block;
    
    /* Thiết lập kích thước và màu sắc cho đường nền xám (dài hơn đường đỏ) */
    width: 100px; 
    height: 1px; 
    background-color: #e0e0e0; 
    
    /* Căn giữa và định vị */
    position: absolute;
    bottom: 0; 
    left: 50%;
    transform: translateX(-50%);
}

/* 2. Tạo gạch ngang màu ĐỎ (chính) bằng thuộc tính ::after */
.my-css h2::after {
    content: "";
    display: block;
    
    /* Thiết lập kích thước và màu sắc cho gạch ngang đỏ (ngắn hơn) */
    width: 30px; 
    height: 4px; 
    background-color: #E21B21; /* Màu đỏ */
    
    /* Căn giữa và định vị, nằm trên đường xám */
    position: absolute;
    bottom: -1.5px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: 1; 
}