/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/*************** ADD CUSTOM CSS HERE.   ***************/
body {
	max-width: 100%;
	overflow: hidden;
    font-family: "Inter", sans-serif;
}
#footer p {margin-bottom:5px;}
#footer ul {list-style:none; margin-bottom:0; margin-left:0;}
#footer li {margin-left:0; margin-bottom:5px;}
.header-bottom-nav > li > a {text-transform:uppercase;}
.page-title-bar .title {display:none;}
.page-title-bar {padding-top:10px; padding-bottom:10px;}
form {margin-bottom:0;}
.wpcf7-spinner {display:none;}
.header-main .nav > li > a {font-weight:500; text-transform: uppercase;}
.header:not(.transparent) .header-nav-main.nav > li.active > a {font-weight:600;}
h2, h3, h4 { line-height: inherit; }
.box-badge .box-text {bottom:0;}
.box-blog-post .is-divider {display:none}
.absolute-footer {display:none;}
.spgt-vol {min-width:20%;}
.ourcore-col .col-inner {border-top-right-radius:20px; border-bottom-right-radius:20px;}
.breadcrumb_last {font-weight:600; color:#351C57;}
.menu-cons .ux-menu-link {
    display: block;
}
.menu-cons .ux-menu-link__link {
    border:1px solid #ddd; 
    margin-bottom:15px; 
    padding:10px;
    display: inline-flex;
}
.menu-cons .ux-menu-link__link:hover {
    background:#351C57; 
    color:#fff !important;
}
.page-title-bar {background:#f5f5f5}

.blog-wrapper .from_the_blog_excerpt {display:none;}
.category-news .foot-section1 {display:none}
.page-wrapper {padding-top:0}
.shop-container .products .box-vertical .box-image {min-width:578px !important;}
.product-small.box .box-image img {height:273px;}
.product-small .box-excerpt {
    font-size:20px; 
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.price-wrapper {display:none;}
.product-title {font-size:30px;}
.product-title a {color:#351C57}
.product-small.box {padding:8px; margin-bottom:20px; box-shadow:0 3px 6px -4px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}
.product-section-title {text-align:center; margin-top:20px; text-transform:capitalize; font-size:40px;}
.product-info .product-title {font-size: 60px;}
.woocommerce-breadcrumb {display:none;}
.product-short-description {font-size:20px;}
.wc-tabs {display:none;}
.tab-panels {padding-top:0}
.tab-panels {font-size:20px;}
.related-products-wrapper .box-image {width:40%;}
.next-prev-thumbs {display:none}
.sidett-col2 .blog-tc .box-blog-post {border:none;}
.sidett-col2 .blog-tc .box-image {top:175px}
.post-sidebar {padding-left:10px !important; padding-right:10px !important;}
::placeholder {color:#000;}
input[type=submit] {background:#fff !important; color:#351C57; border:2px solid; padding:5px 40px;}
.lienhe-section {position:fixed; z-index:9999; top:25%; right: 25px; }
.lienhe-section a { display: block; margin-bottom: 10px; }
.button.is-outline, input[type=button].is-outline, input[type=reset].is-outline, input[type=submit].is-outline {
    border: 1px solid !important;
    font-weight: 500;
    margin-bottom: 0;
}
@media only screen and (min-width: 1024px) {
    .widget ul.menu > li {
        position: relative;
    }
    .widget ul > li.has-child:hover >.sub-menu{
        display:block !important;
    }
    .widget ul.menu ul.sub-menu {
        display: none !important;
        position: absolute;
        width: 100%; 
        left:99%;
        top: 0;
        z-index: 999;
        border: 1px solid #e1e1e1 !important;
        background: #fff;
        margin: 0;
        padding: 0;
    }
    .widget .toggle{
        transform: rotate(-90deg);
        margin-right: 10px;
    }
    .widget ul.menu>li li {
        padding: 2px 0;
        border-bottom: 1px solid #e1e1e1;
    }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .blog-archive .post-sidebar.col {
        padding: 0 15px !important;
    }

}
/* */
body.nav-dropdown-has-border .nav-dropdown {
    border: none;
    padding: 0;
}
body.nav-dropdown-has-border .nav-dropdown a {
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 0;
}
.post_comments  {
    display: none;
}

/* Sidebar */

/* */

/* */
.product-small.box ins *,
.product-small.box .price > .amount * {
    color: red;
    font-size: 16px;
}
.product-small.box del * {
    color: #333;
}

.product-small.box .box-image img {
    height: 273px;
    object-fit: cover;
}
/* */
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1)
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}
.pulse {
    transition: all 150ms linear 0s;
    animation-name: pulse;
    -webkit-animation-name: pulse;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

blockquote {

    font-size: 110%;
    color:#666;

    margin: 0 auto;
    border-left:0px;
    margin-left: 20px;
    padding-bottom: 50px;
}
blockquote h1 {
    font-size: 3rem;
}
blockquote p {
    font-style: italic;
    margin-bottom: 0;
}
blockquote p::before,
blockquote p::after {
    content: "“";
    font-family: Georgia;
    font-size: 6rem;
    margin: -3rem 0 0 -4rem;
    position: absolute;
    opacity: 0.5;
    color:var(--primary-color);
}
blockquote p::after {
    content: "”";
    margin: -2rem -3rem 0 0;
}
blockquote cite {
    font-size: 1.5rem;
}

/*.flag-col .col-inner {
    background-color: rgb(245, 245, 245);
    padding: 40px 20px;
    border: 1px solid rgb(221, 221, 221);
}*/

h1, h2, h3, h4 {
    line-height: inherit !important;
}

p {
    margin-bottom: 10px;
}
.footer-wrapper p {
    margin-bottom: 5px;
}

.col.post-item {
    padding-bottom: 0;
}
.col.post-item .col-inner {
    padding-bottom: 20px;
}
.col.post-item:hover .col-inner {
    background-color: var(--primary-color);
}
/* Biến thẻ cha thành flexbox và xếp dọc */
.col.post-item .box.box-text-bottom {
    display: flex;
    flex-direction: column;
    padding: 5px 20px;
    border-top:1px solid #ddd;
}

/* Đưa chữ lên trên và ép chiếm 100% chiều rộng */
.col.post-item .box.box-text-bottom .box-text {
    order: 1;
    width: 100%;
    flex: 0 0 auto;
}
.col.post-item .box.box-text-bottom .box-text .box-text-inner {
    display: flex;
    flex-direction: column;
}

/* Đưa tiêu đề lên trên cùng */
.col.post-item .box.box-text-bottom .box-text .post-title {
    order: 2;
    font-size: 32px;
    font-weight: 300;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.col.post-item:hover .box.box-text-bottom .box-text .post-title {
    color: #fff;
}

/* Đưa meta (ngày tháng, tác giả...) xuống dưới tiêu đề */
.col.post-item .box.box-text-bottom .box-text .post-meta {
    order: 1;
    font-size: 16px;
    margin: 5px 0px 15px;
    color: #2D2D2D;
}
.col.post-item:hover .box.box-text-bottom .box-text .post-meta {
    color: #fff;
}

/* Đưa ảnh xuống dưới và sửa lỗi padding-top */
.col.post-item .box.box-text-bottom .box-image {
    order: 2;
    width: 100%;
    flex: 0 0 auto; /* Đảm bảo không bị flexbox bóp méo hoặc làm xẹp */
    overflow: hidden;
}
/* 2. Cài đặt thời gian chuyển động cho ảnh (giúp Zoom Out mượt mà khi bỏ chuột ra) */
.col.post-item .box.box-text-bottom .box-image img {
    transition: transform 0.5s ease-in-out; /* 0.5s là thời gian hiệu ứng, bạn có thể tăng giảm tùy ý */
    transform: scale(1); /* Kích thước mặc định */
}

/* 3. Hiệu ứng Zoom In khi hover chuột vào Box */
.col.post-item .box.box-text-bottom:hover .box-image img {
    transform: scale(1.1); /* Phóng to lên 110%. Nếu muốn to hơn bạn đổi thành 1.15 hoặc 1.2 */
}
.col-box .box-badge .box-text {
    bottom: 0;
    height: 100%;
    display: flex;
    align-items: end;
}
.col-box .box-badge.box-custom-overlay:hover .box-text {
    background: rgb(53, 28, 87) !important;
    cursor: pointer;
}
.col-hover:hover > .col-inner {
    background-color: var(--primary-color) !important;
}
.col-hover > .col-inner:hover * {
    color: #fff !important;
}
.col-hover > .col-inner .bg.bg-loaded {
    transition: transform 0.5s ease-in-out !important; /* Thời gian hiệu ứng 0.5 giây */
    transform: scale(1); /* Kích thước gốc */
}

/* 3. Hiệu ứng Zoom In ảnh nền khi hover vào cột */
.col-hover:hover > .col-inner .bg.bg-loaded {
    transform: scale(1.1); /* Phóng to lên 110%. Có thể đổi thành 1.05 hoặc 1.2 tùy ý */
}
.txt-hidden {
    visibility: hidden;
    height: 0;
    transition: all .2s;
}
.col-box .box-badge:hover .box-text .txt-hidden {
    height: 60px;
    visibility: visible;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.yoast-breadcrumb-wrapper p {
    margin-bottom: 0;
    text-transform: uppercase;
}
.entry-content {
    font-size: 20px;
}

.z-index {
    position: relative;
    z-index: 2;
}

.add-to-cart-button .button {
    text-transform: none;
    font-size: 16px !important;
}
.shop-page-title {
    display: none;
}
.product-small.box:hover {
    background-color: var(--primary-color) !important;
}
.product-small.box:hover * {
    color: #fff;
}
.product-small.box .product-title {
    font-size: 36px;
}
.product-gallery-slider img {
    height: 510px;
    object-fit: cover;
}
.product-thumbnails.thumbnails img {
    height: 115px;
    object-fit: cover;
}
.woocommerce-tabs .tabs {
    display: none;
}

.product-small.box-vertical .box-text {
    padding-left: 40px;
}

/* Bao bọc nội dung để giới hạn chiều cao */
.woocommerce-Tabs-panel--description .content-read-more {
    position: relative;
    overflow: hidden;
    max-height: 400px; /* Chiều cao mặc định khi thu gọn (tùy chỉnh số này) */
    transition: max-height 0.5s ease-in-out;
}

/* Lớp phủ mờ màu trắng ở dưới cùng khi nội dung bị thu gọn */
.woocommerce-Tabs-panel--description .content-read-more::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120px; /* Chiều cao của lớp mờ */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Khi mở rộng: Xóa giới hạn chiều cao và ẩn lớp mờ */
.woocommerce-Tabs-panel--description .content-read-more.is-expanded {
    max-height: 5000px; /* Một số lớn để chứa hết bài viết dài */
}
.woocommerce-Tabs-panel--description .content-read-more.is-expanded::after {
    opacity: 0;
}

/* CSS cho nút Xem thêm / Thu gọn */
.btn-read-more-wrap {
    text-align: center;
    margin-top: 10px;
}
.btn-read-more-wrap a {
    display: inline-block;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
    cursor: pointer;
}
.btn-read-more-wrap a:hover {
    color: #000;
}
.btn-read-more-wrap a i {
    display: block;
    font-style: normal;
    font-size: 12px;
    line-height: 1;
    margin-top: 5px;
    transition: transform 0.3s;
}

/* Xoay mũi tên khi mở rộng */
.btn-read-more-wrap.is-expanded a i {
    transform: rotate(180deg);
}

.archive .page-wrapper {
    padding-top: 0;
}
h1.entry-title {
    font-size: 50px;
    color: #2D2D2D;
    line-height: 60px;
    font-weight: 600;
}
textarea.wpcf7-form-control,
input.wpcf7-form-control {
    margin-bottom: 0;
}
input.wpcf7-form-control.wpcf7-submit {
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: 180px;
    height: 38px;
}
input.wpcf7-form-control.wpcf7-submit:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.product-section-title {
    text-transform: none;
}

.term-description {
    text-align: center;
    background-color: var(--primary-color);
    border-radius: 10px;
    padding: 30px 50px;
    color: #fff;
    margin-bottom: 40px;
}
.term-description * {
    color: #fff;
}
.term-description h2 {
    font-size: 32px;
    font-weight: bold;
}
.term-description p {
    font-size: 20px;
}
.product-category .box a {
    display: table;
}

@media (min-width: 850px) {
    .is-parent-category .product-small.col:nth-child(even) .box-vertical {
        display: flex;
        flex-direction: row-reverse;
    }
    .is-parent-category .product-small.col:nth-child(even) .box-vertical {
        order: 2;
    }
    .is-parent-category .product-small.col:nth-child(even) .box-vertical {
        order: 1;
    }
	.row-5col {
        position: relative;
    }
    .row-5col:before {
        content: '';
        display: block;
        width: 80%;
        height: 1px;
        background-color: var(--primary-color);
        top: 31px;
        right: 0;
        left: 0;
        margin: auto;
        position: absolute;
        z-index: 1;
    }
    .row-5col > .col {
        flex-basis: 20%;
        max-width: 20%;
		z-index: 2;
    }
    .row-5col .icon-box-center {
        position: relative;
        z-index: 2;
    }
    .row-5col .icon-box-center .icon {
        background-color: #fff;
    }
}

@media (max-width: 480px) {
    .col.post-item .box.box-text-bottom .box-text .post-title {
        font-size: 25px;
    }
    .product-gallery-slider img {
        height: 390px;
    }
    .product-thumbnails.thumbnails img {
        height: 80px;
    }
    .product-small.box-vertical .box-text {
        padding: 15px;
    }
    h1.entry-title {
        font-size: 36px;
        line-height: 40px;
    }

    .term-description {
        padding: 20px;
    }
    .term-description h2 {
        font-size: 28px;
    }
    .term-description p {
        font-size: 16px;
    }
	.row-5col .col .icon-box-center {
		display: flex;
    	flex-flow: row wrap;
		align-items: center;
	}
	.row-5col .col .icon-box-center .icon-box-img {
		flex: 0 0 auto;
		margin-bottom: 0;
    	max-width: 200px;
	}
	.row-5col .col .icon-box-center .icon-box-text {
		flex: 1 1 0px;
		padding-left: 1em;
		text-align: left;
	}
	.row-5col .col:nth-child(odd) .icon-box-center .icon-box-img {
		flex: 0 0 auto;
    	margin-bottom: 0;
    	max-width: 200px;
	}
	.row-5col .col:nth-child(odd) .icon-box-center .icon-box-text {
		order: -1;
		flex: 1 1 0px;
		text-align: right;
		padding-right: 1em;
	}
	.lienhe-section {
		right: 5px;
	}
}
/* */
.count-up:after {
    content: "+";
}
/* */
.menu-cons .ux-menu-link a {
    font-size: 20px;
    padding: 5px 11px;
    min-height: initial;
}
.menu-cons .ux-menu-link.active a {
    background: #351C57;
    color: #fff;
    border-color: #351C57;
}