/*
Theme Name: ThienPhat
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* CUSTOM CSS */
.xem-them-button {
    color: #2b568d; 
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 16px;
    position: relative;
    padding: 0 12px;
}

.xem-them-button::before,
.xem-them-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px; 
    background-color: #0066CC;
}

.xem-them-button::before {
    left: 0;
}

.xem-them-button::after {
    right: 0;
}

.product-small .product-title a{
	text-transform:uppercase;
	font-size:18px !important;
	color:#000 !important;
	font-weight:700 !important;
	text-align:left;
	display: -webkit-box !important;
  -webkit-line-clamp: 1; /* Giới hạn 1 dòng */
  -webkit-box-orient: vertical;
  	overflow: hidden;
  	text-overflow: ellipsis;
}

.box-text{
	padding:15px !important;
}

.box-excerpt.is-small {
  	display: -webkit-box;
  -webkit-line-clamp: 2; /* Giới hạn 2 dòng */
  -webkit-box-orient: vertical;
  	overflow: hidden;
  	text-overflow: ellipsis;
	font-size:12px;
}

.product-images {
	max-height:500px;
	img{
		max-height:500px;
		object-fit: contain;
	}
}
.box-image img{
	object-fit: contain !important;
}
/*===========================================*/

.wn-slider-main h3 {
    font-size: 30px;
}

@keyframes slideYY1 {
      0% {
        transform: translateY(100%);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
@keyframes slideYY {
      0% {
        transform: translateY(-100%);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
@keyframes slideXX {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
.wp-btn-xemchitiet{
	animation: slideXX 1.5s ease-in-out forwards;
}
.wp_text{
	  animation: slideYY1 1.5s ease-in-out forwards;
}
.wp-textwelcome{
  animation: slideYY 1.5s ease-in-out forwards;
}
.wn-title{
	border-left: 5px solid #e5322d !important;
	animation: slideXX 1.5s ease-in-out forwards;
	padding-left: 20px !important;
}

.wp-textbox{
	border-bottom: 5px solid #e5322d;
}
 .banner .wp-btn-xemchitiet {
    margin-bottom: -3.0em;
    margin-top: -1.5em;
}
.nav-dropdown-default li {
	background-image:none !important;
}

  .cat-filter-wrap { margin-bottom: 20px; display: flex; flex-wrap: wrap; }
        .cat-filter-wrap button {
         
			margin-right:0px !important;
            background: #f5f5f5;
            cursor: pointer;
            font-size: 14px;
            text-transform: none;
            width: 205px;
            height: 50px;
            text-align: center;
            font-weight: 600;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transition: background-color 0.2s ease, border 0.2s ease;
            border: none;
        }
        .cat-filter-wrap button.active {
            background-color: #e6f0fb;
            border-bottom: 2px solid #007aff;
            font-weight: bold;
        }
        .products-wrap {
            display: flex;
            flex-wrap: nowrap;
            gap: 20px;
        }
        .product-item {
            width: 23%;
            border: 1px solid #eee;
            padding: 10px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

.product-title{
	    /* text-transform: uppercase; */
    font-size: 15px !important;
    color: #000 !important;
    font-weight: 700 !important;
    text-align: left;
     display: -webkit-box !important; 
     -webkit-line-clamp: 1; 
     -webkit-box-orient: vertical; 
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 5px;
}
.line{
	background-color:#3A3A3A;
}
.text-color-main{
	color:#2c578e;
}

.line{
	margin:0px !important;
}

.backgroud .section-bg.bg-loaded {
    background-image: url(https://thienphat2tech.vn/wp-content/uploads/2025/08/bgline1.jpg);
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.wp-textbox{
		border-bottom: none;
	}
	
	.xem-them-button{
		display:none !important;
	}
	.backgroud .section-bg.bg-loaded {
    background-image: none !important;
	}
}


@media (max-width: 768px) {
  .cat-filter-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .cat-btn {
    min-width: max-content;
  }
	.backgroud .section-bg.bg-loaded {
    background-image: none !important;
	}
}