/*
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  ***************/

}
.home div#page-breadcrumbs {
    display: none;
    }
.woocommerce-breadcrumb {
    text-transform: none; 
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
}

.woocommerce-breadcrumb::first-letter {
    text-transform: uppercase; /* Viết hoa chữ cái đầu */
}
.header-vertical-menu__opener{
    height: 35px;
    border-radius: 5px;
    background-color: #ffff;
}
.icon-menu{
    color: #159748;
}
.header-vertical-menu__title{
    color: #159748;
}
.icon-angle-down{
    color: #159748;

}
.header-vertical-menu{
    margin-right: 15px !important;
}
.blog-wrapper{
    padding-top: 0px;
}
.archive-page-header .page-title {
    text-align: left;

}

.product-tabs { display: none;}
.woocommerce-tabs {
padding-top: 0px !important;
}
.product-main{
    padding-bottom: 0px !important;
}
.single_add_to_cart_button{
    border-radius: 5px;
}
.custom-container {
    border: 1px solid #e5e7eb; /* tương đương tw-border */
    padding: 16px; /* tương đương tw-p-4 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* tương đương tw-shadow */
    border-radius: 8px; /* tương đương tw-rounded */
    margin-bottom: 20px; /* tương đương tw-mb-5 */
  }
  
  .custom-heading {
    margin-bottom: 8px; /* tương đương tw-mb-2 */
    font-size: 1rem; /* tương đương tw-text-base */
    text-transform: uppercase; /* tương đương tw-uppercase */
    color: #000000; /* tương đương tw-text-black */
  }
  
  .custom-divider {
    height: 4px; /* tương đương tw-h-1 */
    margin-bottom: 16px; /* tương đương tw-mb-4 */
    background-color: #159748; /* tương đương tw-bg-red-500 */
    opacity: 1; /* tương đương tw-opacity-100 */
    border: none; /* tương đương tw-border-none */
    width: 40px; /* tương đương tw-w-10 */
  }
  
  .custom-list {
    font-size: 0.875rem; /* tương đương tw-text-sm */
    padding-left: 16px; /* tương đương tw-px-4 */
    list-style: disc; /* tương đương tw-list-disc */
  }
  
  .custom-list li {
    margin-bottom: 8px;
  }
.span.widget-title {
    font-size: 1em;
    font-weight: 700 !important;
}
.is-divider{
    height: 4px; /* tương đương tw-h-1 */
    margin-bottom: 16px; /* tương đương tw-mb-4 */
    background-color: #159748; /* tương đương tw-bg-red-500 */
    opacity: 1; /* tương đương tw-opacity-100 */
    border: none; /* tương đương tw-border-none */
    width: 40px !important; /* tương đương tw-w-10 */
}


.woocommerce-tabs .tab-panels {border: 1px solid #e5e7eb;
    padding: 10px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 5px;
}
.term-description{
    padding: 10px 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 5px;
}

.wp-block-search__input{
width: 30px !important;
}
.wp-block-search__button {
    padding: 0 16px !important; /* Ghi đè padding hiện tại */
  }
  .post-sidebar>.widget-area {
    /* border: 1px solid rgb(244, 244, 244); */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    border-radius: 4px;
    padding: 10px 20px;
}
.da-media-body {
    background-color: #FFFF;
    border-radius: 5px;
    padding: 0px 10px;
    transition: border 0.3s ease; /* Thêm hiệu ứng chuyển đổi cho viền */
}

.da-media-body:hover {
    border: 2px solid #dd3333; /* Thêm viền màu #dd3333 khi hover */
}

.nav-da-media-body .col{
    padding-bottom: 0px;
}

.nav-box-image {
    background-color: rgb(233, 233, 233);
    padding: 0px 10px;
    position: relative; /* Đảm bảo phần tử có thể chứa hiệu ứng */
    overflow: hidden; /* Ẩn phần ngoài viền */
    border: 2px dashed #159748; /* Viền dày 2px, kiểu đứt, màu #159748 */
}

/* Tạo hiệu ứng viền chạy từ trái qua phải khi hover */
.nav-box-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: #dd3333; /* Màu viền */
    transition: left 0.5s ease; /* Hiệu ứng chuyển động */
}

/* Khi hover vào phần tử .box-image */
.nav-box-image:hover::before {
    left: 0; /* Đưa viền chạy từ trái qua phải */
}

/* Thay đổi màu sắc của h3 khi hover */
.nav-box-image:hover h3 {
    color: #fff; /* Đổi màu chữ thành đen khi hover */
}
.section-title-normal {
    border-bottom: 2px solid #dd3333;
}
.text-homepage-gt{
    text-align: justify;
}
.is-divider {
   background-color: #159748 !important;
}
.category-page-row .sidebar-inner .flatsome_recent_posts{
    border: 1px solid #e5e7eb;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.widget_recently_viewed_products{
    border: 1px solid #e5e7eb;
    padding: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.searchform{
    border: 1px solid #dd3333;
}
.absolute-footer{
    display: none;
}
.footer-flex {
    display: flex;
    justify-content: space-between; /* Khoảng cách giữa các phần tử */
}

/* CSS cho mobile */
@media (max-width: 768px) { /* Màn hình nhỏ hơn hoặc bằng 768px */
    .footer-flex {
        flex-direction: column; /* Chuyển sang dạng cột */
        align-items: center; /* Căn giữa các phần tử trong cột */
    }
    .footer-flex > * {
        margin-bottom: 10px; /* Tạo khoảng cách giữa các phần tử */
    }
}
.footer-one .col{
    padding:  0px 0px;
}
.footer-column{
    padding-bottom: 0px;
}
.icon-angle-down{
    color: #ffff;
}

.product-short-description{
    border: 1px solid #dee2e6 !important;
    border-radius: 5px;
    padding: 5px 5px;
    margin-bottom: 15px;
    background-color: #f6f6f6;
}