/*
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.   ***************/
.mx-auto{
    margin-left: auto;
    margin-right: auto;
}

.mt-1{
    margin-top: 1em;
}

.mb-0{
    margin-bottom: 0 !important;
}

.mb-1{
    margin-bottom: 1em !important;
}

.mb-2{
    margin-bottom: .2em !important;
}

.mb-5{
    margin-bottom: .5em !important;
}

.mt-5{
    margin-top: .5em !important;
}

.pb-0{
    padding-bottom: 0 !important;
}

.pb-1{
    padding-bottom: 1em !important;
}

.pb-2{
    padding-bottom: .2em !important;
}

.pb-5{
    padding-bottom: .5em !important;
}

.br-20 img{
    border-radius: 20px;
}

.no-list{
    list-style: none;
}

.no-list li{
    margin-left: 0 !important;
}

p.justify{
    text-align: justify;
}

.image-32{
    max-width: 32px;
}

.image-32 img{
    width: 32px;
}

.space-between{
    justify-content: space-between;
}

.normal{
    font-weight: normal;
}

.dark .nav-vertical li li.menu-item-has-children>a, .dark .nav-vertical-fly-out>li>a, .dark .nav-vertical>li>ul li a, .dark .nav>li.html, .dark .nav>li>a, .nav-dark .is-outline, .nav-dark .nav>li>a, .nav-dark .nav>li>button, .nav-dropdown.dark .nav-column>li>a, .nav-dropdown.dark>li>a{
    color: hsla(0, 0%, 100%, 1);
}

/* Header */
#masthead .flex-col:has( .header-search-form){
    width: 50%;
}

#masthead .header-search-form .search-field{
    border-radius: 3px;
    border: none;
    background-color: #E8E8E8;
    height: 3em;
}

#wide-nav{
    box-shadow: 0px 4px 5px 0px #00000024;
}

/* Footer */
.absolute-footer{
    display: none;
}

.flickity-button-icon{
    background-color: #fff;
    box-shadow: 0px 4px 5px 0px #00000033;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px !important;
}


.flickity-prev-next-button.previous{
    left: 0;
}

.flickity-prev-next-button.next{
    right: 0;
}

.gallery-slider{
    /*padding-bottom: 30px;*/
}

.flickity-page-dots{
    bottom: -30px;
}

.flickity-page-dots .dot{
    border: 1px solid var(--primary-color);
}

.flickity-page-dots .dot.is-selected{
    background-color: var(--primary-color);
}

.row-slider .post-item{
    padding-bottom: 0;
}

.partner-slide{
    margin-left: -200px;
    width: calc(100% + 400px);
    max-width: unset !important;
}

.partner-slide .gallery-col{
    padding-bottom: 0;
}

.partner-slide .gallery-col .gallery-box{
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 3px 5px 0px #00000033;
}

.partner-slide .gallery-col .gallery-box .box-image{
    padding: 20px 0;
}

.partner-slide .slick-slide:not(.slick-current){
    transform: scale(.85);
}

.wpcf7-spinner{
    display: none;
}

.category-menu {
    display: flex;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0 0;
    font-weight: 500;
    flex-wrap: wrap;
    justify-content: center;
}

.category-menu li a {
    text-decoration: none;
    background: transparent;
    padding: 7px 10px;
    border: 1px solid var(--primary-color);
    list-style: none;
    margin: 0 5px;
    border-radius: 4px;
    color: var(--primary-color);
    transition: all .3s;
}

.category-menu li.active a, .category-menu li a:hover{
    background: var(--primary-color);
    color: #fff;
}

.post-sidebar .widget.widget_text{
    box-shadow: 0px 3px 5px 0px #00000033;
    border-radius: 8px;
    padding: 20px;
}

/* Sidebar Filter adjustments */
.sidebar-filter {
    padding: 20px;
    background-color: #f8f8f8; /* Nhẹ hơn một chút */
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sidebar-filter h3 {
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    color: #333;
}

.checkbox-group label.checkbox-container {
    display: block; /* Mỗi checkbox trên một dòng mới */
    position: relative;
    padding-left: 30px; /* Khoảng trống cho checkbox tùy chỉnh */
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 16px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-weight: normal;
}

/* Ẩn checkbox mặc định của trình duyệt */
.checkbox-group label.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Tạo dấu tích tùy chỉnh */
.checkbox-group label.checkbox-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 3px;
}

/* Khi hover, thêm màu nền xám nhẹ */
.checkbox-group label.checkbox-container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* Khi checkbox được chọn, thay đổi màu nền */
.checkbox-group label.checkbox-container input:checked ~ .checkmark {
    background-color: var(--primary-color); 
    border-color: var(--primary-color); 
}

/* Tạo dấu tích (check icon) khi được chọn */
.checkbox-group label.checkbox-container .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Hiển thị dấu tích khi được chọn */
.checkbox-group label.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}

/* Định dạng dấu tích */
.checkbox-group label.checkbox-container .checkmark:after {
    left: 7px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Nút "Xem thêm" */
#load-more-hoi-vien {
    margin-top: 30px;
    width: auto; /* Để nút không bị giãn toàn chiều ngang */
    padding: 5px 25px;
}

/* Loading indicator */
#loading-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #555;
    font-size: 1.1em;
}

/* Flatsome loading spin */
.loading-spin {
    border: 4px solid rgba(0, 0, 0, .1);
    border-left-color: #0073aa; /* Màu sắc của vòng quay */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1.2s linear infinite;
}

/* Custom CSS cho Shortcode Tin Tức Liên Quan */
.related-news-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.related-news-item {
    padding: 15px 0; /* Khoảng cách trên dưới cho mỗi item */
    border-bottom: 1px solid #eee; /* Đường gạch phân cách giữa các item */
}

.related-news-item:last-child {
    border-bottom: none; /* Không có đường gạch ở item cuối cùng */
    padding-bottom: 0;
}

.related-news-item a {
    display: flex; /* Sử dụng flexbox để ảnh và text nằm ngang hàng */
    align-items: center; /* Căn giữa theo chiều dọc */
    text-decoration: none;
    color: inherit; /* Kế thừa màu chữ */
    transition: all 0.2s ease-in-out;
}

.related-news-item a:hover {
    background-color: #f9f9f9; /* Màu nền nhẹ khi hover */
    transform: translateY(-2px); /* Hiệu ứng nhấc nhẹ lên khi hover */
    border-radius: 4px;
    padding: 5px 0; /* Tăng padding khi hover để hiệu ứng đẹp hơn */
    margin: -5px 0; /* Bù lại padding để không ảnh hưởng layout tổng thể */
}

.related-news-thumbnail {
    flex-shrink: 0; /* Ngăn thumbnail bị co lại */
    width: 60px; /* Chiều rộng cố định cho thumbnail */
    height: 60px; /* Chiều cao cố định cho thumbnail */
    overflow: hidden;
    border-radius: 4px; /* Bo góc nhẹ cho ảnh */
    margin-right: 15px; /* Khoảng cách giữa ảnh và nội dung */
}

.related-news-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh bao phủ toàn bộ khung */
    display: block;
}

.related-news-content {
    flex-grow: 1; /* Cho phép nội dung mở rộng */
}

.related-news-item-title {
    font-size: 1.1em; /* Kích thước tiêu đề bài viết */
    font-weight: 500;
    color: #333; /* Màu chữ tiêu đề */
    margin: 0;
    line-height: 1.4;
}

.related-news-item a:hover .related-news-item-title {
    color: #0073aa; /* Màu chữ khi hover (màu Flatsome primary) */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .related-news-box {
        padding: 20px 15px;
    }

    .related-news-thumbnail {
        width: 50px;
        height: 50px;
        margin-right: 10px;
    }
    .related-news-item-title {
        font-size: 1em;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hoi-vien-box{
    border: 1px solid #C4C4C4;
    padding: 20px 10px;
    border-radius: 8px;
    transition: all .3s;
    text-align: center;
}

.hoi-vien-box:hover{
    box-shadow: 0px 3px 5px 0px #00000033;
}

.popup-hoi-vien{
    background-color: #EFEFEF;
    box-shadow: 0px 4px 8px -2px #00000040;
    border-radius: 8px;
}

.popup-hoi-vien .img{
    background-color: #fff;
}

.popup-hoi-vien .title{
    font-weight: 600;
}

.popup-hoi-vien i{
    color: var(--primary-color);
    width: 20px;
}

@media (min-width: 1024px){
	.top-section .right-col .post-title{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.top-section .right-col .from_the_blog_excerpt{
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
}

@media (min-width: 800px){
    .header-wrapper.stuck #masthead{
        display: none;
    }
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .partner-slide{
        margin-left: 0;
        width: 100%;
        max-width: 100% !important;
    }

}