/*
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.   ***************/
/* Container chính */
.custom-news-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Mỗi hàng bài viết */
.news-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Mỗi bài viết */
.custom-news-item {
    width: calc(33.3333% - 10px);
    /* 33.3333% để có 3 bài viết trên mỗi dòng */
    margin-right: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    /* Hiển thị nội dung theo chiều dọc */
}

/* Hình ảnh */
.news-thumbnail {
    flex: 1;
    /* Hình ảnh chiếm toàn bộ chiều cao của phần tử cha */
    overflow: hidden;
    /* Ẩn phần ngoài chiều cao của hình ảnh */
}

.news-thumbnail img {
    width: 100%;
    height: 100%;
    /* Đảm bảo hình ảnh chiếm đủ chiều cao của phần tử */
    object-fit: cover;
    /* Chỉnh kích thước hình ảnh để nó vừa đủ vào phần tử cha */
}

/* Tiêu đề bài viết */
.news-content {
    flex: 1;
    /* Phần còn lại của phần tử cha cho tiêu đề, ngày, và tóm tắt */
    display: flex;
    flex-direction: column;
    /* Hiển thị nội dung theo chiều dọc */
    padding: 10px;
    /* Thêm khoảng cách xung quanh nội dung */
}

.news-title {
    font-size: 16px;
    margin-bottom: 5px;
}

/* Ngày tạo bài viết */
.news-date {
    font-style: italic;
    color: #888;
    margin-bottom: 5px;
}

/* Tóm tắt bài viết */
.news-excerpt {
    flex: 1;
    /* Phần còn lại của phần tử cha cho tóm tắt */
    font-size: small;
    color: #777;
    opacity: 0.6;
}

/* Paging container */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto
}

/* Paging links */
.pagination a {
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
}

/* Active paging link */
.pagination a.current {
    background-color: #0073e6;
    color: #fff;
    border-color: #0073e6;
}

.contact-about {
    background-color: #F9F9F9;

}

.contact-about-padding {
    padding: 0 1rem;
}

.back-to-top{
	margin-bottom: 5rem;
    margin-right: 1rem !important;
}

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
	.imgCertificate{
		display: none;
	}
	.titlePage{
		margin-top: 10px;
		margin-bottom: 0px;
	}
	.row-small>.flickity-viewport>.flickity-slider>.col{
		padding: 0 !important;
	}
}