@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
    font-family: "Montserrat", sans-serif;
    line-height: 1.5;            
    font-size: 16px;       
    font-weight: 400;          
}
#header {
    height: 116px;
}
#top-header{
    background: #5FB450;
    color: #cecece;
    font-size: 0.875rem;
    padding: 7px 0px;
    border-bottom: 1px solid #c5c5c5;
}
#top-header .container{
    color: #fff;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: #fff;
    text-transform: initial;
    z-index: 2;

}
.dropdown-content .dropdown-item{
    font-size: 0.875rem;
    font-weight: 500;
    color: #5c5b5b;
}

.dropdown:hover .dropdown-content {
    display: block;
}
#home-nav.navbar{
    padding: 0;
}
.cart{
    position: relative;
}

.carousel-caption{
    position: absolute;
    right: 39%;
    bottom: 36%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}
.carousel-caption h1{
    font-weight: 900;
    color: #e2524a;
}
.carousel-indicators li.active{
    width: 50px;
    background-color: #e2524a;
}
.carousel-indicators li{
    width: 50px;
    background-color: #282828;
}
#home-slide{
    margin-bottom: 30px ;
}
#commit-freeship-support .box{
    background: #f4f4f4;
    padding: 13px 0px 20px 0px;
    
 
}
#commit-freeship-support .box .box-text{
    font-size: 1rem;
    font-weight: 600;
}
#commit-freeship-support .box .box-icon{
    font-size: 2rem;
    color: #888787;
}
#commit-freeship-support{
    margin-bottom: 160px;

}
.box  .box-body{
    padding: 20px 0px 50px 0px;
}
.box  .box-body .product-info{
    padding-top: 10px;
    font-size: 1rem;
    color: #514545;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
.box .box-body .product-info .rate-and-comment{
    color: #ffa500;
}
.box .box-body .product-info .rate-and-comment .comment{
    color: #767e86;
}
.box .box-body .product-info a.product-name:hover{
    color: #e2524a;
}
.box .box-head h2{
    font-weight: bold;
    color: #343434;
    font-size: 1.875rem;
}
#category {
    margin-bottom: 30px;
}
#category .shoe {
    display: flex;
    justify-content: center;
    align-items: center;
   
}
 #category .read-more {
    display: inline-block;
}
#category .read-more .see-more{
    background-color: #000;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #fff;
    font-size: 0.875rem;
    border-radius: 30px;
}
.box.selling-product .box-body{
    padding-bottom: 20px;
}


.box.lastest-blog .card .card-body{
    padding: 0rem 1.5rem 2rem 1.5rem;
}
.box.lastest-blog .card .card-body .fashion{
    font-size: 0.75rem;
    color: #282828;
    
}
.box.lastest-blog .card .card-body .date{
    font-size: 0.875rem;
    color: #6c757d;

    
}
.box.lastest-blog .card .card-body h5.card-title{
    font-size: 1rem;
    margin-bottom: 0px;
}
.box.lastest-blog .card .card-body p.card-text{
    font-size: 0.875rem;
}
.box.lastest-blog .box-body{
    padding-bottom: 48px;
}
#show-more{
    margin-bottom: 64px;
}

#footer {
    background-color: #202122; /* Màu nền nếu hình ảnh không tải được */
    background-image: url('../images/backgroundfooter.jpg'); /* Đường dẫn đến hình ảnh */
    background-size: cover; /* Làm cho hình ảnh phủ kín khu vực footer */
    background-position: center; /* Căn giữa hình ảnh */
    background-repeat: no-repeat; /* Không lặp lại hình ảnh */
    color: #ffffff; /* Màu chữ trắng */
    padding-top: 30px;
    padding-bottom: 72px;
}
#footer .box{
    padding: 0px 20px 0px 20px;
}
#footer .box .box-body{
    padding: 10px 0px 10px 0px;
}
#footer .box .box-head h6{
    color: #e2524a;
    margin-bottom: 0px;
}
#footer .box .box-body ul li a{
    font-size: 0.875rem;
}
#footer .box .box-body ul li a{
    font-size: 0.875rem;
}
#footer .box .box-body ul li .phone{
    font-size: 0.875rem;
}
#copyright{
    padding: 11px 0px;
    background-color:#124be8 !important;
}
#copyright .text-copyright{
    margin-bottom: 0px;
    font-size: 0.875rem;
}
.box .box-head h2{
    font-size: 1.125rem !important;
  }
  .box .box-head p{
    font-size: 0.875rem  !important;
  }
#home-nav .navbar-brand{
    padding: 5px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#main-menu li.menu-item{
    position: relative;
}
#main-menu li.menu-item a{
    display: block;
    padding: 24px 15px;
    text-decoration: none;
    color: #2962ff;
    font-size: 18px;
    line-height: 19px;
    font-weight: 600;
    transition: all 0.25s ease-in-out;
    text-transform: capitalize !important;
}
#main-menu li.menu-item.has-child>a::after{
    font-family: "Font Awesome 6 Free";
    content: '\f078';
    font-weight: 600;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 13px;
    padding: 23px 0px;
}
/* //of sub-menu */
#main-menu .sub-menu>li.menu-item.has-child>a::after{
    font-family: "Font Awesome 6 Free";
    content: '\f105';
    font-weight: 600;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 13px;
    padding: 11px 10px;
}
/* end of sub-menu  */
#main-menu li.menu-item:hover>a,
#main-menu ul.sub-menu li:hover>a{
    color: #2962ff;
}
/* #main-menu ul.sub-menu{
    border: 1px solid #ccc;
} */
#main-menu ul.sub-menu a{
    color: #383838 ;
    padding: 10px 30px;
    font-size: 14px;
    border-bottom: 1px solid #e6e6e6;
    left: 0px;
    font-weight: 500;
}
/* level 3  */
#main-menu ul.sub-menu ul.sub-menu {
    position: absolute;
    left: 199px;
    top: 3px;
}
#main-menu>li>a{
    position: relative;
}
#main-menu>li>a::before{
    content: "";
    height: 3px;
    width: 0px;
    background: #2962ff;
    position: absolute;
    bottom: 0;
    left: 0px;
    transition: 0.25s cubic-bezier(0.075, 0.82, 0.165, 1);
    border-radius: 10px;
}
#main-menu>li:hover>a::before{
   width: 100%;
}
/* end level 3  */
#main-menu ul.sub-menu a:hover{
    border-bottom: 1px solid #efefef;
}
#main-menu ul.sub-menu li:last-child a{
    border-bottom: none;
}
#main-menu ul.sub-menu{
    position: absolute;
    z-index: 2;
    background-color: #fff;
    list-style: none;
    padding: 0;
    width: 200px;
    padding: 14px 0px;
    display: none;
}
#main-menu  li:hover>ul.sub-menu{
    display: block;
    border-radius: 10px;
}
nav#home-nav .wp-search-cart{
    padding: 24px 0px;
}
nav#home-nav  .wp-search-cart input.search-form{
    padding: 6px 50px 6px 10px;
    outline: none;
    border-radius: 50px;
    border: none;
    font-size: 14px;
    border: 1px solid #ccc;
}
nav#home-nav  .wp-search-cart input.search-form::placeholder{
    font-size: 14px;
    color: #363636;
    font-weight: 500;
}
nav#home-nav  .wp-search-cart form{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}
nav#home-nav  .wp-search-cart button.search{
    position: absolute;
    right: 0px;
    /* border-radius: 20px; */
    border-radius: 0px 20px 20px 0px;
    border: none;
    padding: 6px 12px;
    outline: none;
    background-color: #fff;
    font-size: 14px;
    color: #000;
    border: 1px solid #ccc;
    
}
.cart:hover{
    color: #067bbe;
}
.cart{
    display: block;
    margin-left: 10px;
    font-size: 24px;
    padding: 5px;
    color: #33A2E1;
    text-decoration: none;
}

.num-product-cart{
    position: absolute;
    background-color: #FF4C58;
    top: 0px;
    right: -3px;
    /* padding: 1px 7px; */
    width: 20px;
    height: 19px;
    text-align: center;
    border-radius: 50%;
    font-size:12px ;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
nav#home-nav ul#main-menu{
    display: none ;
}
nav#home-nav .wp-search-cart{
    display: none;
}

.navbar-toggle {
    color: #2961FE;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 30px;
    cursor: pointer;
    transition: all 0.4s ease-in-out;
 
}
.bg-red{
    background:hsla(0, 0%, 93%, 0.95);
}
#bottom-header{
    background-color: white;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 173"><path fill="none" stroke="%23000000" stroke-width="0.3" stroke-opacity="0.6" d="M50,1 L100,1 L125,43 L100,85 L50,85 L25,43 Z M150,1 L200,1 L225,43 L200,85 L150,85 L125,43 Z M0,43 L25,43 M175,43 L200,43 M50,85 L50,129 L100,129 L125,171 L100,213 L50,213 L25,171 Z M150,85 L150,129 L200,129 L225,171 L200,213 L150,213 L125,171 Z"/></svg>');
    background-size: 100px 100px; /* Điều chỉnh kích thước lặp */
    background-repeat: repeat; /* Lặp lại họa tiết */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px 0;
    z-index: 4000;
    box-shadow: 0px 12px 20px rgba(10, 10, 10, 0.3);
    transition: box-shadow 0.4s ease-in-out;
    text-align: center;
    font-weight: bold;
}
.wp-responsive{
    position: absolute;
    top: 116px;
    z-index: 20;
     background-image: linear-gradient(to right, #0b59d6, #1f64db, #1663c2, #2872e2);
    width: 100%;
    left: 0px;
    display: none;
  }
ul#menu-responsive{
    padding: 15px 0px;
}
ul#menu-responsive li.menu-item {
    position: relative;
    text-align: left;
}
ul#menu-responsive li.menu-item a{
    padding: 10px 30px 10px 30px;
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.25s ease-in-out;
}
ul#menu-responsive li.menu-item:hover>a{
    /* color: #33A2E1; */
}
ul#menu-responsive ul.sub-menu{
    list-style: none;
    padding: 10px 0px;
 background-image: linear-gradient(to right, #0b59d6, #1f64db, #1663c2, #2872e2);
}
.responsive-menu-toggle.fa-solid.fa-angle-down{
    color: #fff;
}
ul#menu-responsive ul.sub-menu li a{
    list-style: none;
    padding: 10px 40px;
    transition: all 0.1s ease-in-out;
 
}
ul#menu-responsive ul.sub-menu li:hover>a {
    background: #0948be;
    color: #fff;
}
ul#menu-responsive ul.sub-menu ul.sub-menu{
    background-color: rgba(195, 195, 195, 0.8);
}
ul#menu-responsive ul.sub-menu ul.sub-menu li:hover>a {
    background: none;
    color: #33A2E1;
  
}

.responsive-menu-toggle{
    position: absolute;
    color: #fff;
    right: 20px;
    top: 0px;
    padding: 13px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
.responsive-menu-toggle.open{
    transform: rotate(180deg);
   
}
.wp-responsive-cart-search .search-responsive{
    margin: 0px 10px;
    padding: 15px;
    color: #33A2E1;
    position: relative;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.4s ease-in-out;
    border-radius: 10px;
}
.wp-responsive-cart-search input.search-form-responsive{
    position: absolute;
    bottom: -21px;
    right: 71px;
    z-index: 30;
    padding: 4px 15px;
    outline: none;
    border: 3px solid rgb(204, 204, 204);
}
.wp-responsive-cart-search .search-responsive:hover {
    /* background:hsla(0, 0%, 83%, 0.95);
    color: #067bbe;
    border-radius: 10px; */
}
.wp-responsive-cart-search-navbar_toggle{
    display: flex;
  }
.display-none{
    display: none;
}
.display-block{
    display: block;
}
.bg-gray{
    background:hsla(0, 0%, 83%, 0.95);
    border-radius: 10px;
}
.owl-carousel  .owl-nav button.owl-prev{
    /* background: #33A2E1; */
    border: 1px solid #33A2E1;
}
.owl-carousel  .owl-nav button.owl-prev:hover,
.owl-carousel  .owl-nav button.owl-next:hover{
    background: #1f99df;
}
.owl-carousel  .owl-nav button.owl-prev:hover span,
.owl-carousel  .owl-nav button.owl-next:hover span{
    color: #fff;
}
.owl-carousel  .owl-nav button.owl-next,
.owl-carousel  .owl-nav button.owl-prev{
    outline: none;
}
.owl-carousel  .owl-nav button.owl-prev span{
padding: 5px 14px !important;
font-size: 20px;
font-weight: bold;
display: block;
color:#33A2E1;

}
.owl-carousel  .owl-nav button.owl-next{
    border: 1px solid #33A2E1;
}
.owl-theme .owl-nav [class*=owl-] {
    border-radius: 12px;
}

.owl-dots span{
    width: 15px !important;
    height: 15px !important;
}
.owl-carousel  .owl-nav button.owl-next span{
    padding: 5px 14px !important;
    font-size: 20px;
    font-weight: bold;
    display: block;
    color:#33A2E1;
    }
 .show-more .see-more{
    transition: all 0.25s ease-in-out;
    }
.show-more .see-more:hover{
    background: #4d9141;
    color: #fff !important;
}
#top-header{
    display: none;
}
.box .box-body .product-item .product-info .product-name{
    color: #514545;
    font-weight: 600;
    text-transform: capitalize;
}
/* user header  */
.user{
    display: flex;
    align-items: center;
    justify-content: center;
   
}
.user i {
    padding-right: 5px;
}
.user .wp-login-register{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #33A2E1;
    color: #fff;
    padding: 0px 12px 0px 12px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: bold;
    height: 35px;
}
.user .wp-login-register a{
    color: #fff;
    text-decoration: none;
}
.user .wp-login-register a:hover{
    text-decoration: underline;
}
.user .space{
    padding: 0px 3px 0px 3px;
    display: inline-block;
}
.owl-carousel .owl-item .product-thumb{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}
.owl-carousel.category-home,
.owl-carousel.sale{
    margin-bottom: 15px;
}

.owl-carousel .owl-item img.category-home {
    border-radius: 50%;
    width: 70px;  /* Ảnh sẽ chiếm 50% chiều rộng của phần tử chứa */
    height: 65px; /* Giữ tỷ lệ ảnh ban đầu */
}
.owl-carousel.category-home .owl-dots,
.owl-carousel.category-home .owl-nav {
    display: none !important;
}

/* category-home  */
#selling-product.category-home{
    margin-bottom: 0px;
}
/* .product-name {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.5 !important;
    max-height: 3em !important;
    font-size: 18px;
  } */
  .product-name {
    white-space: nowrap;              
    overflow: hidden;                
    text-overflow: ellipsis;
  }
  
.product-sale .box-body .product-price .price-new,
.product-best-selling .box-body .product-price .price-new,
.box-body.product .product-price .price-new{
    font-weight: bold;
    margin-right: 5px;
    font-size: 15px;
    color: #f3283d;
}
.box-body.product .product-price .price-old{
    font-size: 12px;
}
.box-body.product .product-price .price-new{
    font-size: 15px;
}
.product-sale .box-body .product-price .price-old,
.product-best-selling .box-body .product-price .price-old,
.box-body.product .product-price .price-old{
    font-weight: 400;
    text-decoration: line-through;
    color: #8d8d8d;
    font-size: 12px ;
}
.sale-badge {
    position: absolute; 
    top: 10px;     
    left: 10px;                  
    background-color: red;     
    color: white;               
    font-size: 14px;      
    padding: 5px 10px;     
    font-weight: bold;    
    text-transform: uppercase;  
    border-radius: 5px;        
    z-index: 10;          
}

.product-top {
    position: relative;            
}
/* see more  */
.wp-button-see-more{
    display: flex;
    justify-content: center;
    align-self: center;
    margin-top: 20px;
}
.see-more-btn {
    background-color: #fff;
    border: 1px solid #33A2E1;
    padding: 8px 20px; /* Khoảng cách bên trong */
    border-radius: 5px; /* Bo góc */
    font-size: 16px; /* Kích thước chữ */
    cursor: pointer; /* Thay đổi con trỏ khi rê chuột vào */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu khi hover */
    outline: none;
    color: #33A2E1;
    font-weight: 500;
  }
  
  .see-more-btn:hover {
    background-color: #33A2E1;; /* Màu nền khi hover */
    color: #fff;
  }
  .see-more-btn:focus{
    outline: none;
  }
  /* container-bg-green  */
  .container-bg-green{
   background:#2962ff ;
    display: flex;
    justify-content: center;
    border-radius: 20px;
  }
  .container-bg-green h2,
  .container-bg-green p{
    color: #fff;
  }
  .container-bg-green h2{
    text-transform: uppercase;
    font-size: 20px;
  }
  p.responsive-text-time{
    font-size: 14px;
  }
  .container-bg-green p{
    text-transform: capitalize;
    font-size: 14px;
  }
  .col-md-6.bg-grain{
    display: none;
  }
  .wp-text{
    padding: 30px 15px 30px 15px;
  }
  /* //screen destop  */

/* effect  */
.product-item:not(.container.category-home .product-item) {
    position: relative; /* Đảm bảo phần tử có thể di chuyển */
    transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out; /* Thêm thời gian dài hơn và hiệu ứng mượt mà */
}

.product-item:hover:not(.container.category-home .product-item) {
    transform: translateY(-10px); /* Nhích lên 10px khi hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Tạo bóng xung quanh sản phẩm */
}


/* end effect  */
  /* card  */
  #card h2.title-card {
    margin-bottom: 30px;
    color: #af9b29;
}

#card .row {
    margin-bottom: 20px;
}

#card .row .card a {
    text-decoration: none;
    color: #af9b29;
}

#card .row .card a:hover {
    color: #9c8a24;
}

.card:not(.wp-cart .card) {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.card:hover:not(.wp-cart .card) {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.card-title:not(.wp-cart .card-title) {
    margin-bottom: 20px;
    transition: transform 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
}

.card:hover .card-title:not(.wp-cart .card:hover .card-title) {
    transform: translateY(-5px);
}

#card .card-body h5 {
    margin-bottom: 0px;
}

#card .card-body {
    padding: 1.5rem !important;
}
#footer .container h5 {
    padding-left: 20px;
    padding-bottom: 20px;
}
#footer .box .box-head h6 {
    color: #2962ff;
    margin-bottom: 0px;
}
#footer .box .box-body ul li a {
    font-size: 1rem;
}
#footer .box .box-body ul li .phone {
    font-size: 1rem;
}
/* //hot icon  */
.hot-product-title {
    display: inline-block; /* Để áp dụng hiệu ứng cho cả text và icon */
    color: #343434; /* Màu chữ */
  }
  
  .icon {
    font-size: 20px; /* Kích thước icon */
    color: #FF4500; /* Màu đỏ cam nổi bật */
    margin-left: 10px; /* Khoảng cách giữa icon và text */
  }
  
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0); /* Vị trí ban đầu */
    }
    50% {
      transform: translateY(-5px); /* Nhảy lên */
    }
  }
/* img new product  */
.icon-new-product{
    width: 30px;
    height: 30px;
    margin-left: 8px;
}
.box .box-head h2.new-product-title-mid{
    display: flex;
    align-items: center;
    justify-content: center;
}
/* //float icon  */
.floating-icons {
    position: fixed;
    right: 20px; /* Căn từ bên phải */
    bottom: 24px; /* Căn từ dưới màn hình */
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
}

/* Định dạng cho mỗi icon */
.social-icon {
    width: 46px; /* Giữ khung chứa lớn hơn */
    height: 46px; /* Giữ khung chứa lớn hơn */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    position: relative; /* Để hiệu ứng sóng hoạt động */
    overflow: hidden; /* Giới hạn phần sóng ra ngoài icon */
    border-radius: 50%; /* Bo tròn icon */
    background-color: #fff; /* Nền trắng (tuỳ chọn) */
    animation: rippleEffect 3s ease-in-out infinite; /* Hiệu ứng sóng cho tất cả icon */
}

/* Định dạng cho hình ảnh trong icon */
.social-icon img {
    border-radius: 50%; /* Bo tròn ảnh */
    width: 30px; /* Thu nhỏ icon xuống còn 40px */
    height: 30px; /* Thu nhỏ icon xuống còn 40px */
    object-fit: cover; /* Đảm bảo ảnh luôn bao phủ toàn bộ icon */
    animation: shake 1s ease-in-out infinite; /* Lắc nhanh hơn */
}
.social-icon#viber-icon img{
    width: 35px; 
    height: 35px;
}

/* Hiệu ứng rung tại chỗ (rung nhẹ hoặc xoay) */
@keyframes shake {
    0% {
        transform: rotate(0deg); /* Không xoay */
    }
    30% {
        transform: rotate(15deg); /* Xoay mạnh sang phải */
    }
    50% {
        transform: rotate(-15deg); /* Xoay mạnh sang trái */
    }
    70% {
        transform: rotate(15deg); /* Xoay mạnh sang phải */
    }
    90% {
        transform: rotate(0deg); /* Quay về vị trí ban đầu */
    }
    100% {
        transform: rotate(0deg); /* Dừng lại hoàn toàn trước khi bắt đầu lại */
    }
}

/* Hiệu ứng sóng loang màu (mở rộng hơn) */
@keyframes rippleEffect {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.6); /* Màu xanh dương cho icon đầu tiên */
    }
    50% {
        box-shadow: 0 0 30px 20px rgba(0, 123, 255, 0.3); /* Sóng lan tỏa mạnh và rộng hơn */
    }
    100% {
        box-shadow: 0 0 50px 40px rgba(0, 123, 255, 0); /* Sóng phai dần với độ rộng lớn hơn */
    }
}

/* Đặt delay riêng biệt cho mỗi icon */
#phone-icon {
    animation-delay: 0s; /* Sóng loang bắt đầu sau 1 giây */
    animation-name: rippleEffectPhone; /* Chỉ sử dụng hiệu ứng sóng màu Zalo */
}

#zalo-icon {
    animation-delay: 1s; /* Sóng loang ngay lập tức */
    animation-name: rippleEffectZalos; /* Chỉ sử dụng hiệu ứng sóng màu Facebook */
}

#facebook-icon {
    animation-delay: 2s; /* Sóng loang bắt đầu sau 1.5 giây */
    animation-name: rippleEffectFacebook; /* Chỉ sử dụng hiệu ứng sóng màu WhatsApp */
}

#location-icon {
    animation-delay: 2.5s; /* Sóng loang bắt đầu sau 2 giây */
    animation-name: rippleEffectLocation; /* Chỉ sử dụng hiệu ứng sóng màu Zalo */
}

#viber-icon {
    animation-delay: 1.5s; /* Sóng loang bắt đầu sau 2.5 giây */
    animation-name: rippleEffectViber; /* Chỉ sử dụng hiệu ứng sóng màu Zalo */
}


/* Định nghĩa hiệu ứng sóng cho các icon khác nhau */
@keyframes rippleEffectPhone {
    0% {
        box-shadow: 0 0 0 0 #F2762E /* Màu sóng Zalo */
    }
    50% {
        box-shadow: 0 0 50px 20px rgb(203, 47, 89, 0.2);
    }
    100% {
        box-shadow: 0 0 60px 40px rgba(0, 136, 255, 0.1);
    }
}
@keyframes rippleEffectZalos {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 88, 217, 0.8); /* Màu sóng ban đầu (xanh dương đậm) */
    }
    50% {
        box-shadow: 0 0 30px 20px rgba(59, 89, 152, 0.3);
    }
    100% {
        box-shadow: 0 0 50px 40px rgba(59, 89, 152, 0);
    }
}

@keyframes rippleEffectFacebook {
    0% {
        box-shadow: 0 0 0 0 rgba(28, 117, 239, 0.8);
    }
    50% {
        box-shadow: 0 0 30px 20px rgba(28, 111, 226, 0.3);
    }
    100% {
        box-shadow: 0 0 50px 40px rgba(37, 211, 102, 0);
    }
}

@keyframes rippleEffectLocation {
    0% {
        box-shadow: 0 0 0 0 rgb(29, 158, 95,0.8) /* Màu sóng Zalo */
    }
    50% {
        box-shadow: 0 0 50px 20px rgb(203, 47, 89, 0.2);
    }
    100% {
        box-shadow: 0 0 60px 40px rgba(0, 136, 255, 0.1);
    }
}
@keyframes rippleEffectViber {
    0% {
        box-shadow: 0 0 0 0 #2294EF /* Màu sóng Zalo */
    }
    50% {
        box-shadow: 0 0 50px 20px rgba(164, 28, 64, 0.2);
    }
    100% {
        box-shadow: 0 0 60px 40px rgba(0, 136, 255, 0.1);
    }
}

/* Hiệu ứng khi hover (di chuột qua) */
.social-icon:hover img {
    transform: scale(1.1); /* Phóng to icon khi hover */
}
#zalo-icon{
    background-color: #0058D9;
}
#location-icon{
    background-color: #1D9E5F;
}
#facebook-icon{
background-color: #1C75EF;
}
#phone-icon{
    background-color: #F2762E;
}
#viber-icon{
    background-color: #2294EF;
}
/* button prev and next .owl-carousel  */
.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span{
    display: none;
}

/* breadcum */
.wp-nav{
    margin-top: 10px;
    background: #f7f7f7;
    margin-bottom: 20px;
}
#breadcrumb-nav{
   padding: 20px 15px 20px 15px;
}
#breadcrumb-nav ol{
    margin-bottom: 0px !important;
}
.breadcrumb {
    background-color: transparent;  /* Không có nền */
    padding: 0;  /* Loại bỏ padding nếu không cần */
  }

  .breadcrumb-item {
    color: #dfdfdf;  /* Thay đổi màu chữ của các breadcrumb item */
  }
  .breadcrumb-item:hover a{
    color: #2962ff;
  }
  .breadcrumb-item  a,
  .breadcrumb-item  span{
    text-decoration: none;
    color: #2962ff;
    font-weight: 500;
  }

  .breadcrumb-item.active {
    color: #6c757d;  /* Màu chữ cho phần tử active (trang hiện tại) */
  }
  #google-map {
    position: relative;
    width: 100%;
    height: 100%;
}

#google-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    height: 500px;
    margin-bottom: 40px;
}
/* //news  */
.wp-news .box-body .row .col-md-4{
    margin-bottom: 25px;
}
#pagination-post{
    display: flex;
    justify-content: end;
}
.card-text:not(.wp-cart .cart-body .space-price .cart-text) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* product  */
.box .box-body.product {
    padding: 20px 0px 0px 0px;
}
.wp-main-product{
    border-left: 1px solid #eaeaea;
    margin-bottom: 20px;
}
.section-detail .box-radio input{
margin-right: 10px;
}
.section-detail .box-radio{
    padding: 5px 0px 5px 0px;
    display: flex;
    align-items: center;
}
.section-detail .box-radio label{
    margin: 0;
}
 /* Tùy chỉnh radio button */
 input[type="radio"] {
    width: 25px; /* Điều chỉnh kích thước radio button */
    height: 25px;
    border-radius: 50%; /* Làm tròn radio button */
    appearance: none; /* Loại bỏ kiểu mặc định */
    background-color: #fff; /* Màu nền */
    border: 1px solid #ccc; /* Màu viền */
    outline: none; /* Xóa đường viền khi focus */
    cursor: pointer; /* Thay đổi con trỏ khi di chuột vào */
    transition: all 0.3s ease; /* Thêm hiệu ứng khi thay đổi trạng thái */
}

/* Hiệu ứng hover */
input[type="radio"]:hover {
    border-color: #33A2E1; /* Màu viền khi hover */
}

/* Tạo hiệu ứng khi radio button được chọn */
input[type="radio"]:checked {
    background-color: #33A2E1; /* Màu nền khi chọn */
    border-color: #33A2E1; /* Màu viền khi chọn */
}

input[type="radio"]:checked::after {
    content: ''; /* Tạo điểm chọn bên trong */
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff; /* Màu điểm chọn */
    margin: 5px auto;
}

/* Thêm khoảng cách giữa radio button và text */
label {
    font-size: 16px;
    margin-left: 10px;
    cursor: pointer; /* Thêm con trỏ khi di chuột vào label */
}
.container.wp-news {
    /* Thêm box-shadow */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);  /* Tăng độ đậm và độ mờ */
    padding-top: 15px;
}
.wp-filter-price-type-destop{
    display: none;
}
.section-head{
    display: flex;
    justify-content: space-between;
   margin-bottom: 20px;
}
.filter-wp{display: none;}
/* wp-responsive-filter */
.wp-responsive-filter{
    display: flex;
    margin-bottom: 20px;
}
.wp-responsive-filter .wp-sort{
    flex-basis: 70%;
}
.wp-responsive-filter .wp-sort .form-inline select{
    width: 70%;
}
.wp-responsive-filter .wp-open-filter-btn{
    flex-basis: 30%;
    display: flex;
    justify-content: flex-end;
}
.select-small {
    font-size: 13px;
    padding: 5px 8px;
    height: 33px;
    width: auto; /* Tự động điều chỉnh chiều rộng */
}
.section-head h3.new-product-title-mid.responsive {
    font-size: 1.2rem !important;
}
#close-filter-btn{
    background-color: #5FB450 !important;
    border: none;
}
/* button cart  */
.buy-now:hover{
    background-color: #33A2E1;
    color: #fff;
}
.add-to-cart:hover{
    background-color: #5FB450;
    color: #fff;
}
.add-to-cart,
.buy-now{
    font-size: 14px;
    margin-bottom: 20px;
    border: 1px solid #5FB450;
    color: #5FB450;;
    transition: all 0.3s ease-in-out; /* Hiệu ứng chuyển động */
}
.buy-now{
    border: 1px solid #33A2E1;
    color: #33A2E1;
    margin-bottom: 12px;
}
/* slider detail product */
#wp-slider {  
    max-width: 600px;  
    position: relative; /* Cần thiết để định vị các nút */  
}  
.show-picture {  
    position: relative; /* Để đặt nút điều hướng ở vị trí chính xác */  
}  
.show-picture img {  
    width: 100%;  
    border-radius: 10px;  
}  
.list-thumb {  
    margin-top: 10px;  
    display: flex; /* Dùng flexbox để căn chỉnh hình thu nhỏ */  
    justify-content: center; /* Căn giữa các hình thu nhỏ */  
    list-style: none;
    padding: 0px;
}  
.thumb-item {  
    margin: 0 5px; /* Thêm khoảng cách giữa các hình thu nhỏ */  
}  
.thumb-item img {  
    width: 100%;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: opacity 0.2s; /* Hiệu ứng chuyển tiếp */  
    opacity: 0.7;
}  
/* Styles for active thumbnail */  
.thumb-item.active img {  
border: 2px solid #007bff; /* Viền xanh cho hình thumbnail đang active */  
 opacity: 1;
}  
/* Styles for navigation buttons */  
.slider-nav div{  
    position: absolute;  
    top: 50%;  
    transform: translateY(-50%);  
    background-color: rgba(255, 255, 255, 0.8);  
    border: none;  
    border-radius: 50%;  
    padding: 15px;  
    cursor: pointer;  
    z-index: 10; /* Đặt lên trên các hình ảnh */  
}  
.slider-nav .prev-btn {  
    left: 10px; /* Vị trí nút "Previous" */  
}  
.slider-nav .next-btn {  
    right: 10px; /* Vị trí nút "Next" */  
}  
/* minus and plus  */
#num-order-wp{ margin-bottom: 25px;}
/* Container của toàn bộ phần tử */
#num-order-wp {
    display: flex;
    align-items: center;  /* Căn chỉnh các phần tử theo chiều dọc */
    gap: 6px;  /* Khoảng cách giữa các phần tử */
    border-radius: 5px;  /* Bo góc cho container */
    padding: 5px 10px 5px 0px;  /* Padding cho container */
}

/* Các phần tử nút trừ và cộng */
#minus, #plus {
    width: 40px;  /* Kích thước rộng cho các nút */
    height: 40px;  /* Kích thước cao cho các nút */
    display: flex;
    align-items: center;
    justify-content: center;  /* Căn giữa nội dung bên trong */
    background-color: #fff;  /* Màu nền trắng cho các nút */
    border: 1px solid #ccc;  /* Viền xám nhạt */
    border-radius: 5px;  /* Bo góc cho các nút */
    color: #333;  /* Màu chữ đen */
    font-size: 16px;  /* Kích thước chữ */
    cursor: pointer;  /* Hiển thị con trỏ pointer khi hover */
    transition: all 0.3s ease;  /* Hiệu ứng chuyển tiếp mượt mà */
}

#minus:hover, #plus:hover {
    background-color: #33A2E1;  /* Màu nền khi hover */
    color: #fff;  /* Màu chữ khi hover */
    border-color: #33A2E1;  /* Đổi màu viền khi hover */
}

/* Trường nhập số */
#num-order {
    width: 50px;  /* Kích thước rộng của input */
    height: 40px;  /* Kích thước cao của input */
    text-align: center;  /* Căn giữa chữ trong ô nhập */
    border: 1px solid #ccc;  /* Viền xám nhạt */
    border-radius: 5px;  /* Bo góc cho input */
    font-size: 16px;  /* Kích thước chữ */
    color: #333;  /* Màu chữ đen */
    outline: none;  /* Bỏ viền khi focus */
    background-color: #fff;  /* Màu nền trắng */
}

#num-order:focus {
    border-color: #007bff;  /* Đổi màu viền khi ô nhập được chọn */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);  /* Tạo bóng mờ xung quanh khi focus */
}

/* end minus and plus  */

/* product - detail  */
.wp-detail-product .product-title{
    margin-bottom: 20px;
    color: #555;
}
.wp-detail-product  .product-desc{
    font-weight: 500;
    text-align: justify;
    line-height: 1.7;
}
.wp-detail-product  .num-product{
    margin-bottom: 20px;
    font-weight: 500;
}
.wp-detail-product  .num-product .title{
    color: #33A2E1;
    
}
.wp-detail-product  .num-product .status{
    padding: 5px 8px 5px 8px !important;
}
.wp-detail-product  .wp-price{
    margin-bottom: 20px;
 
}
.wp-detail-product  .wp-price .price-new{
    color: #f3283d;
    font-size: 24px;
    font-weight: 700;
    margin-right: 10px;
}
.wp-detail-product  .wp-price .price-old{
    color: #b3b3b3;
    font-size: 18px;
    font-weight: 400;
    text-decoration: line-through;  /* Gạch ngang chữ */
}
.wp-button-add-cart-and-buy-now{
    display: flex;
}
.wp-button-add-cart-and-buy-now #add-cart,
.wp-button-add-cart-and-buy-now #buy-now{
    padding: 10px 30px 10px 30px;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    transition: all 0.25s ease-in-out;
  
}
/* Nút "Add to Cart" */
.wp-button-add-cart-and-buy-now #add-cart {
    background-color: #5FB450; 
    margin-right: 20px;
    transition: all 0.3s ease; 
}
.wp-button-add-cart-and-buy-now #add-cart:hover {
    background-color: #4b9b3e;  
    box-shadow: 0 4px 10px rgba(95, 180, 80, 0.3);  
}

/* Nút "Buy Now" */
.wp-button-add-cart-and-buy-now #buy-now {
    background-color: #33A2E1; 
    margin-right: 0px;
    transition: all 0.3s ease; 
}
.wp-button-add-cart-and-buy-now #buy-now:hover {
    background-color: #28739d; 
    box-shadow: 0 4px 10px rgba(51, 162, 225, 0.3); 
}
.container.wp-detail-product .row.detail-product{
    margin-bottom: 20px;
}
/* cart */
.wp-cart .card-body h5.card-title a{
    font-size: 16px;
    color: #545353 ;
}
.wp-cart .card-body h5.card-title a:hover{
    text-decoration: none;
    color: #33A2E1 ;
}
.wp-cart .row .font-weight{
    font-weight: 600;
    
}
.btn.btn-success.delete{
    background: #5FB450 !important;
    border: 1px solid #5FB450;
}
.color-price-red{
    color: #f3283d;
}
/* checkout  */
.place-order-wp{
    display: flex;
    justify-content: flex-end;
    margin-right: 10px;
}
.wp-checkout{
    margin-bottom: 100px;
}
#customer-info-wp{
    padding-right: 5px;
}
#order-review-wp{
    padding-left: 5px;
}
#order-review-wp h2.section-title,
#customer-info-wp h2.section-title{
    text-transform: uppercase;
    font-size: 20px;
}
#customer-info-wp label,
#order-review-wp label{
    margin-bottom: 10px;
    margin-left: 0px;
}
#customer-info-wp label{
    font-size: 14px;
}

.wp-checkout #customer-info-wp .section-head,
.wp-checkout #order-review-wp .section-head{
    border-bottom: 1px solid #e8e8e8;
   
}
.wp-checkout #customer-info-wp .section-head h2,
.wp-checkout #order-review-wp .section-head h2{
    border-bottom: 2px solid #f3283d;
    padding: 15px 0px;
    margin: 0px;
}
.shop-table {
    border: none !important; /* Removes border from the table */
    border-collapse: collapse; /* Ensures the table cells are not spaced */
}

.shop-table th, .shop-table td {
    border: none !important; /* Removes border from the table cells */
}
.shop-table tbody{
    border-bottom: 1px solid #e8e8e8 ;
}
#payment-checkout-wp ul#payment_methods li{
    margin-bottom: 10px;
}
#payment-checkout-wp ul#payment_methods li input[type="radio"]{
    margin-right: 10px;
    width: 20px;
    height: 20px;
}
#payment-checkout-wp ul#payment_methods li label{
    font-size: 14px;
    margin-bottom: 0px ;
}
#payment-checkout-wp ul#payment_methods li{
    display: flex;
    align-items: center;
}
.wp-checkout #order-review-wp .section-detail{
    font-size: 14px !important;
}
#payment-checkout-wp ul#payment_methods li input[type="radio"]:checked::after {
   width: 8px;
   height: 8px;
}
#customer-info-wp input::placeholder{
    font-size: 14px;
  }
  #customer-info-wp select.form-control{
    font-size: 14px;
  }
 /* responsive login register  */
  .wp-login-register.responsive{
    padding-left: 30px;
    margin-bottom: 10px;
}
.wp-login-register.responsive a{
    color: #157ce3;
}

/* wp-button-add-buy in index.html  */
.wp-button-add-buy-index{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.wp-button-add-buy-index a.add-cart{
    border: 1px solid #5FB450;
    color: #5FB450;
    margin-right: 10px;
}
.wp-button-add-buy-index a.add-cart:hover{
    background-color: #59c745;
    color: #fff;
}
.wp-button-add-buy-index a.buy-now{
    border: 1px solid #33A2E1;
    color: #33A2E1;
    margin: 0px;
}
.wp-button-add-buy-index a.buy-now:hover{
    background-color: #33A2E1;
    color: #fff;
}
.wp-button-add-buy-index a.add-cart,
.wp-button-add-buy-index a.buy-now{
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 15px;
    vertical-align: middle;
    font-size: 14px;
    border-radius: 6px;
    font-weight: 500;
    width: 100%;
    margin-bottom: 10px;
}
.container.product-sale .product-info,
.container.product-best-selling .product-info,
.container.product-new .product-info{
    padding-bottom: 20px;
}


#category .row {
    display: flex;
    align-items: center;
}


#category .row .bg-grain img {
    width: 100%; /* Đảm bảo hình ảnh không vượt quá khung */
    height: auto;
    object-fit: cover; /* Đảm bảo ảnh cân đối */
    border-radius: 20px;
}
#tech-slider{
    margin-bottom: 10px !important;
}
/* chat box  */
  .kommunicate-custom-iframe {
    right: 1px !important;
}
body .mck-sidebox-launcher {
    height: 50px !important;
    width: 50px !important;
}
body .km-chat-icon-sidebox {
    height: 52px !important;
    width: 52px !important;
}
h5.card-title a.title{
text-decoration: none;
color: #333;
}