/*
Theme Name:     Christian Theme
Template:       frontier
Version:        1.0
*/
/* css header */

/* Phong cách cơ bản cho header */
.site-header {
    background-color: white;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}

.tao-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-left {
    display: flex;
    flex-direction: column;
}

.site-title a {
 font-size: 1.1rem;
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    color: #0059a7;
}

.site-tagline {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}

.header-right {
    display: flex;
    align-items: center;
    position: relative;
}

.main-navigation {
    display: flex;
    flex-wrap: wrap;
}

.nav-main {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-main li {
    margin: 0 15px;
}

.nav-main li a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease;
}

/* Hiệu ứng khi hover */
.nav-main li a:hover {
    color: #0073aa;
}

.nav-main li a:hover::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #0073aa;
    bottom: -2px;
    left: 0;
    transform: scaleX(1);
    transition: transform 0.3s ease;
}

.nav-main li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #0073aa;
    bottom: -2px;
    left: 0;
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

/* Phong cách cho link đang hoạt động */
.nav-main li.current-menu-item a,
.nav-main li.current-menu-item a:hover {
    color: #0073aa;
}

.nav-main li.current-menu-item a::after {
    transform: scaleX(1);
}

/* Nút toggle cho menu trên thiết bị di động */
.drop-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

/* Hiển thị nút toggle trên màn hình nhỏ */
@media (max-width: 768px) {
    .main-navigation {
        width: 200px;
    }

    .nav-main {
        flex-direction: column;
        display: none;
        width: 100%;
        text-align: left;
        position: absolute;
        right: 0;
        top: 40px; /* Điều chỉnh dựa trên chiều cao của header */
        background-color: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1000;
    }

    .drop-toggle {
        display: block;
		float: right;
    }

    .nav-main.active {
        display: flex;
    }

    .nav-main li {
        margin: 0;
        padding: 10px 20px;
        border-bottom: 1px solid #ccc;
    }

    .nav-main li a {
        font-size: 1rem;
        padding: 10px 0;
        display: block;
    }

    .nav-main li:last-child {
        border-bottom: none;
    }
}

@media (max-width: 480px) {
  
.tao-menu {
    display: inline-block;
}
.drop-toggle {
        display: block;
        float: left;
    }
.header-left {
    display: block;
}

.header-right {
    display: block;
}
.main-navigation {
    display: block;
}
}
/* css chung */
#main {
    background-color: #fff !important;
}
#container {
    box-shadow: 0 0 1px #000;
}
span.luot-xem {
    margin-left: 10px;
}
.luot-xem:before {
	font-family: FontAwesome;
	content: "\f06d";
	margin-right: 3px;
}

a:hover {
	color: #0059a7;
	font-weight: 600;
}
h2.post-title a:hover, .grid-8-bai-viet p.title-bai-viet a:hover, .featured-posts h3:hover {
	color: #0059a7;
}
.sidebar a {
    font-size: 1rem;
    color: #333;
}
.wp-caption .wp-caption-text, .gallery-caption {
    text-align: center;
}
.breadcrumb {
    margin-bottom: 10px;
}
.trang-mau-tu-tao li {list-style: square;
font-size: 1rem;
}
/* Your modification goes here */
body, h1, h2, h3, h4, h5, h6, a, p, ul, li, table, input, textarea {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.entry-title a {
    color: #0059a7;
}
/* css feature grid */
.featured-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 5px;
    margin: 0;
}
/* css feature post */
.featured-posts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 5px;
    align-items: stretch; /* Đảm bảo các cột có chiều cao bằng nhau */
}

.featured-post-item {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.featured-post-large {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.featured-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
	object-fit: cover;
}

.featured-post-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgb(129 126 126 / 50%);
    color: #fff;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
}

.featured-post-overlay h3 {
    font-size: 1.2rem;
    margin: 0;
	color: #fff;
	font-weight: 600;
}
.featured-posts a.category {
    color: #ddd;
	font-size: 0.9rem;
}
.featured-post-overlay .post-date {
    color: #ddd;
    font-size: 0.9rem;
}
.featured-posts span.luot-xem {
    margin-left: 10px;
    color: #ddd;
    font-size: 0.9rem;
}
/* Responsive styles */
@media (max-width: 1200px) {
    .featured-posts-grid {
        grid-template-columns: 1fr;
    }
	
    .featured-post-large {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
		height: 400px; /* Chiều cao lớn hơn */
    }

    .featured-post-small {
        grid-column: 1 / 2;
        grid-row: auto;
		height: 200px; /* Chiều cao nhỏ hơn */
    }
}

@media (max-width: 768px) {
    .featured-posts-grid {
        display: flex;
        flex-direction: column;
    }

    .featured-post-item {
        margin-bottom: 20px;
    }
	.featured-post-large {
        height: 300px; /* Chiều cao lớn hơn */
    }

    .featured-post-small {
        height: 150px; /* Chiều cao nhỏ hơn */
    }
}

@media (max-width: 480px) {
    .featured-post-overlay p {
        font-size: 16px;
		
    }

    .featured-post-overlay .post-date {
        font-size: 12px;
    }
	.featured-post-large {
        height: 200px; /* Chiều cao lớn hơn */
    }

    .featured-post-small {
        height: 100px; /* Chiều cao nhỏ hơn */
    }
}
#sidebar-home a {
    font-size: 1rem;
}
/* css giống vnews */
.category-title a, .block-title span, .widget-title, h1.category-title {
    display: inline-block;
    padding: 0 0 0 15px;
    position: relative;
    color: #0059a7;
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-bottom: 20px;
    margin-top: 3px;
    font-weight: 700;
}
.category-title a::before, .widget-title::before, h1.category-title::before {
    width: 3px;
    height: 12px;
    position: absolute;
    top: -3px;
    content: "";
    background: #0059a7;
    left: 0;
}
.category-title a::after, .widget-title::after, h1.category-title::after {
    width: 12px;
    height: 3px;
    position: absolute;
    top: -3px;
    content: "";
    background: #0059a7;
    left: 0;
}
.frontier-widget {
    background-color: #FFF;
    margin: 0 0 10px;
    padding: 8px;
    border: none;
    box-shadow: none;
    word-wrap: break-word;
}
.widget-title {
    background-color: #fff;
    text-shadow: none;
}
/* css bài viết chuyên mục bảo hiểm */

#chuyen-muc {
    width: 75%;	
	float: left;
}
#sidebar-home {
    width: 25%;
	display: inline-block;
    float: right;
    padding: 5px;
}
@media screen and (max-width: 960px) {
    #chuyen-muc, #sidebar-home {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 960px) {
    #chuyen-muc, #sidebar-home  {
        display: block;
    }
}
h2.category-title {
    margin-top: 15px;
}
.bai-viet-chuyen-muc {
    display: flex;
    flex-wrap: wrap;
}

/* css bài viết chuyên mục trang chủ */
.grid-8-bai-viet {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Khoảng cách giữa các bài viết */
}
.grid-8-bai-viet a:hover {
	color: #0059a7;
}
.grid-item {
    flex: 1 1 calc(25% - 10px); /* Chia mỗi bài viết thành 1/3 chiều rộng container, trừ khoảng cách giữa các bài viết */
    box-sizing: border-box; /* Đảm bảo padding và border được tính trong kích thước tổng */
    display: flex;
    flex-direction: column;
    align-items: center; /* Căn giữa các phần tử con */
}

.grid-item img {
    max-width: 100%; /* Đảm bảo ảnh không vượt quá chiều rộng của container */
    height: auto; /* Đảm bảo tỷ lệ khung hình của ảnh */
    transition: transform 0.3s ease; /* Hiệu ứng mượt khi zoom */
	object-fit: cover;
}

.grid-8-bai-viet .post-info {
    text-align: center; /* Căn giữa văn bản */
    margin-top: 10px; /* Khoảng cách trên cho phần thông tin bài viết */
}

.grid-8-bai-viet .post-info p.title-bai-viet a {
    font-weight: 600; /* In đậm tiêu đề */
    margin: 0; /* Bỏ khoảng cách trên và dưới tiêu đề */
	font-size: 1.1rem;
}

.grid-8-bai-viet .post-info a {
    text-decoration: none; /* Bỏ gạch chân dưới liên kết */
    color: inherit; /* Màu chữ kế thừa */
}
.grid-8-bai-viet .category-name a.category, .grid-8-bai-viet .post-date {
color: #888;
font-size: 0.9rem;
}

/* Media Query cho màn hình nhỏ hơn */
@media (max-width: 768px) {
        .grid-item {
        flex: 1 1 calc(50% - 20px); /* Chia mỗi bài viết thành 1/2 chiều rộng container, trừ khoảng cách giữa các bài viết */
    }
}
/* css bài viết */
h1.entry-title a {
    font-size: 1.9rem;
	line-height: 1.2;
	padding-bottom: 10px;
	color: #0059a7;
    font-weight: 700;
}
.entry-content h3 {
    font-size: 1.6rem;
	line-height: 1.2;
	padding-bottom: 15px;
}
.entry-content h4 {
    font-size: 1.3rem;
	line-height: 1.2;
	padding-bottom: 15px;
}

.entry-content h5 {
    font-size: 1.1rem;
	line-height: 1.2;
	padding-bottom: 15px;
}
.single-sub {
    font-size: 1em;
    font-style: italic;
    position: relative;
    padding-left: 15px;
    border-left: 2px solid #333;
    margin-bottom: 15px;
    font-weight: 600;
	margin-top: 15px;
}
.single-view .entry-content {
    font-size: 1rem;
}
.entry-content p {
    font-size: 1.025rem;
}

/* css next, pre cuối bài viết */
.post-nav {
    display: block !important;
    background-color: #FFF;
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #555;
    box-shadow: 0 0 2px #333;
}
.post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.link-prev,
.link-next {
    display: flex;
    flex-direction: column;
}

.entry-meta {
    font-size: 12px;
    color: #888;
}

.prev,
.next {
    font-size: 14px;
    color: #555;
    text-decoration: none;
}
a.prev, a.next {
	color: #222;
	font-weight: 500;
}
.prev:hover,
.next:hover {
    text-decoration: underline;
}
.link-prev a, .link-next a {
padding: 0;	
border: none;
box-shadow: none; 
}
/* css page */
.page p, .page h2, .page h3, .page h4 {
    margin-bottom: 10px;
}
p {
    font-size: 1rem;
}
/* css category */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (max-width: 768px) {
   .posts-grid {
    display: block;
}
}

#load-more, #load-more-top-bai-viet {
border: 1px solid #ddd;
    height: 50px;
    line-height: 50px;
    position: relative;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    min-width: 300px;
	margin-top: 20px;
}

#load-more:hover, #load-more-top-bai-viet:hover {
    background-color: #fff;
	color:#0059a7;
}
h2.post-title a {
    font-size: 1.25rem;
    font-weight: 600;
}
.bai-viet-chuyen-muc a {
    color: inherit;
}
.bai-viet-chuyen-muc h2.post-title {
    margin-bottom: 8px;
}
.bai-viet-chuyen-muc .tom-tat-bai-viet {
    font-size: 1rem;
    margin-top: 10px;
}
/* css top bài viết xem nhiều */
.no-sidebars h1 {
    text-align: center;
}
.top-posts-grid {
   display: grid;
    grid-template-columns: repeat(4, 1fr); /* Creates 3 equal-width columns */
    gap: 10px; /* Adjust the gap between columns as needed */
    padding: 0;
	margin-top: 10px;
}

.top-post, .post {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    transition: box-shadow 0.3s ease;
}

.top-post:hover, .post:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.top-post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 5px;
	object-fit: cover; /* Cắt ảnh nếu cần thiết */
}

.top-post-info {
    padding: 10px 0;
}

.top-post-info h2 {
    font-size: 1rem;
    margin: 0;
	color: #333;
    font-weight: 600;
}
.top-post-info h2:hover {
	color: #0059a7;
}

/* Responsive design for medium screens */
@media (max-width: 1200px) {
    .top-posts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

/* Responsive design for small screens */
@media (max-width: 768px) {
    .top-posts-grid {
        grid-template-columns: 1fr; /* 1 column on small screens */
    }
}
/* css bai viet lien quan */
span.title-lien-quan, span.title-bai-viet-tag {
    font-size: 1.3rem;
    font-weight: 600;
}
.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cột trên màn hình lớn */
    gap: 10px; /* Khoảng cách giữa các bài viết */
	margin-top: 15px;
	margin-bottom: 10px;
}

.related-post-item {
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #fff;
	border-radius: 5px;
}
.related-post-item:hover {
    transform: translateY(-1px); /* Di chuyển lên trên một chút khi hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Thêm bóng để tạo hiệu ứng nổi bật */
}
.related-post-item .thumbnail {
    position: relative;
    width: 100%;
    padding-top: 75%; /* Tỉ lệ của ảnh: 3:4 (75%) */
    overflow: hidden;
    margin-bottom: 10px;
}

.related-post-item img {
 width: 100%;
 object-fit: cover;
 border-radius: 8px;
}

.related-post-item .title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.related-post-item .post-meta {
    font-size: 0.95;
    color: #777;
}

.related-post-item .post-meta .category {
    color: #0073aa;
    text-decoration: none;
}

.related-post-item .post-meta .category:hover {
    text-decoration: underline;
}

/* Responsive: 2 cột cho màn hình nhỏ hơn */
@media (max-width: 768px) {
    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cột trên màn hình nhỏ */
		margin-top: 15px;
		margin-bottom: 10px;
    }
}

/* Responsive: 1 cột cho màn hình rất nhỏ */
@media (max-width: 480px) {
    .related-posts-grid {
        grid-template-columns: 1fr; /* 1 cột trên màn hình rất nhỏ */
		margin-top: 15px;
		margin-bottom: 10px;
    }
}
/* css back to top */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    width: 40px;
    height: 40px;
    background-color: #0059a7;
    color: white;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1000;
    transition: opacity 0.3s, visibility 0.3s;
}

#back-to-top.show {
    display: block;
}

@media only screen and (max-width: 600px) {
    #back-to-top {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        bottom: 10px;
        right: 10px;
    }
}
/* css mục lục bài viết */
 .table-of-content ol > li {
    list-style-type: none;
}
span.table-of-content-title {
    font-weight: 600;
	font-size: 1rem;
}
 .table-of-content {
  background: #0059a7;
	color: #fff;
  border: 1px solid #ddd; /* Đường viền mỏng */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng */
  z-index: 1000; /* Đảm bảo hiển thị trên các phần tử khác */
}
.table-of-content-header {
    border-bottom: 1px solid #fff;
    padding: 5px 10px;
}
.table-of-content #toc-list{
max-height: calc(30vh - 30px); /* Chiều cao tối đa khi mở */
    overflow-y: auto; /* Cho phép cuộn dọc khi cần */
}
          .table-of-content .muc-luc {
            font-weight: bold;
          }
          .table-of-content #toc-list {
            list-style: none;
            padding-left: 0;
          }
          .table-of-content li {
            margin-bottom: 5px;
          }
          .table-of-content li a {
		  color: #fff;
            text-decoration: none;
			font-size: 0.95rem;
          }
          .table-of-content li a:hover {
            text-decoration: underline;
          }
          /* Lùi sang phải cho các cấp nhỏ hơn */
          .table-of-content li.level-3 {
            margin-left: 20px;
          }
          .table-of-content li.level-4 {
            margin-left: 40px;
          }
          .table-of-content li.level-5 {
            margin-left: 60px;
          }
          .table-of-content li.level-6 {
            margin-left: 80px;
          }

/* CSS cho mục lục trên thiết bị di động */
@media (max-width: 1224px) {
  .table-of-content {
    position: fixed; /* Đặt mục lục cố định để không di chuyển khi cuộn trang */
    bottom: 0; /* Đặt mục lục ở chân trang */
    left: 0; /* Đặt mục lục sát bên trái màn hình */
    width: 100%; /* Chiều rộng toàn bộ màn hình */
    max-height: 0; /* Chiều cao tối đa ban đầu là 0 để ẩn mục lục */
    overflow-y: hidden; /* Ẩn cuộn dọc khi chưa mở */
    background: #0059a7;
	color: #fff;
    border: none; /* Loại bỏ đường viền */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng lên phía trên */
    padding: 0; /* Xóa padding khi ẩn */
    transition: max-height 0.3s ease, padding 0.3s ease; /* Hiệu ứng chuyển tiếp cho việc mở và thu hẹp */
    z-index: 1000; /* Đảm bảo hiển thị trên các phần tử khác */
    box-sizing: border-box; /* Bao gồm padding và border trong kích thước tổng thể */
  }

  .table-of-content.open {
    max-height: calc(70vh - 70px); /* Chiều cao tối đa khi mở */
    overflow-y: auto; /* Cho phép cuộn dọc khi cần */
    padding: 8px; /* Padding khi mở */
    border: 1px solid #ddd; /* Đặt viền khi mở */
  }

  .table-of-content-button {
    position: fixed; /* Đặt vị trí cố định để không di chuyển khi cuộn trang */
    bottom: 10px; /* Khoảng cách từ dưới cùng */
    left: 10px; /* Khoảng cách từ bên trái */
    width: 50px; /* Chiều rộng của nút */
    height: 50px; /* Chiều cao của nút */
    background-color: #007bff; /* Màu nền của nút */
    color: #fff; /* Màu chữ của nút */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Bo góc tròn */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Đổ bóng */
    cursor: pointer;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    z-index: 1001; /* Đảm bảo nút nằm trên mục lục */
    transition: background-color 0.3s ease; /* Hiệu ứng chuyển màu nền khi nhấp */
  }

  .table-of-content-button.open {
    background-color: #ff5722; /* Màu nền khi mục lục đang mở */
  }

  .table-of-content-close {
    position: absolute; /* Đặt nút tắt ở góc trên cùng bên phải */
    top: 10px; /* Khoảng cách từ trên cùng */
    right: 10px; /* Khoảng cách từ bên phải */
    font-size: 2em; /* Kích thước chữ lớn để dễ nhấp vào */
    cursor: pointer;
    color: #007bff; /* Màu chữ của nút tắt */
  }
}
/* css top post trang chu */
span.tieu-de-home {
    font-weight: 600;
    font-size: 1rem;
	color: #303030;
}
.nhieu-nguoi-doc span.category-name, .nhieu-nguoi-doc span.luot-xem {
    font-size: 14px;
    color: #888;
}
/* css footer */
.footer {
    background-color: #000;
    color: #fff;
    padding: 5px 0;
    text-align: center;
}

.thong-tin-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
}

.thong-tin-footer .column {
    flex: 1;
    margin: 10px;
    min-width: 250px; /* Ensures columns don't get too narrow on larger screens */
	text-align: left;
}

.thong-tin-footer .social-icons a {
    margin: 0 5px;
    color: #fff;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .thong-tin-footer {
        flex-direction: column;
        align-items: left;
    }

    .thong-tin-footer .column {
        margin: 10px 0;
        text-align: left;
    }

    .thong-tin-footer .social-icons a {
        display: inline-block;
        margin: 5px;
    }
}

.footer .column h4 {
    color: #2499ff;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 8px;
}
.footer p {
    color: #8d8c8c;
    font-size: 1rem;
	margin-bottom: 5px;
}
.footer .social-icons a {
    color: #fff;
    margin: 0 10px;
}
.fab, fas, .fa-brands {
    font-size: 1rem;
}
.footer .contact-info, .footer .social-icons {
    text-align: left;
}

.footer .menu-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 0 0 0;
}

.footer .bottom-nav li a {
    color: #8d8c8c;
    margin: 0 15px;
}

.footer .bottom-nav {
    font-size: 1rem;
	float: right;
	display:block;
}
.footer .copyright {
    float: left;
	display:block;
}
.footer .menu-bottom p {
    padding-left: 20px;
}
.footer .bottom-nav li {
    display: inline-block;
}

@media (max-width: 1000px) {
   .footer .bottom-nav {
	float: none;
}
.footer .copyright {
    float: none;
}
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
/* Chèn biểu tượng trước địa chỉ */
.dia-chi::before {
    content: "\f041"; /* Mã Unicode của biểu tượng Font Awesome */
    font-family: 'Font Awesome 5 Free'; /* Tên font của Font Awesome */
    font-weight: 900; /* Đảm bảo biểu tượng được hiển thị đúng cách */
    margin-right: 8px; /* Khoảng cách giữa biểu tượng và văn bản */
}

/* Chèn biểu tượng trước điện thoại */
.dien-thoai::before {
    content: "\f095"; /* Mã Unicode của biểu tượng Font Awesome */
    font-family: 'Font Awesome 5 Free'; /* Tên font của Font Awesome */
    font-weight: 900; /* Đảm bảo biểu tượng được hiển thị đúng cách */
    margin-right: 8px; /* Khoảng cách giữa biểu tượng và văn bản */
}

/* Chèn biểu tượng trước email */
.email::before {
    content: "\f0e0"; /* Mã Unicode của biểu tượng Font Awesome */
    font-family: 'Font Awesome 5 Free'; /* Tên font của Font Awesome */
    font-weight: 900; /* Đảm bảo biểu tượng được hiển thị đúng cách */
    margin-right: 8px; /* Khoảng cách giữa biểu tượng và văn bản */
}
.post-thumbnail img {
  width: 100%;
  height: auto; /* hoặc chiều cao phù hợp với thiết kế, ví dụ 220px */
  object-fit: cover; /* đảm bảo không méo ảnh, chỉ crop cho đủ khung */
  border-radius: 8px; /* bo góc nhẹ nếu cần */
}
#bai-viet img {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.qa-archive__body {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 cột bằng nhau */
  gap: 40px; /* Khoảng cách giữa các cột và hàng */
  align-items: start;
}

.qa-group {
  background: #f9f9f9;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.qa-group__header {
  margin-bottom: 12px;
}

.qa-group__title {
  font-size: 1.2em;
  color: #333;
}

.qa-list {
  list-style: disc inside;
  padding-left: 0;
  margin: 0;
}

.qa-list__item {
  margin-bottom: 8px;
}

.qa-list__link {
  color: #0059a7;
  text-decoration: none;
}

.qa-group__more {
  margin-top: 12px;
}

.qa-group__viewall {
  font-weight: bold;
  color: #444;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .qa-archive__body {
    grid-template-columns: 1fr; /* Chuyển về 1 cột */
  }
}
.top-news-ticker {
  display: flex;
  align-items: center;
  font-size: 15px;
  height: 24px;
  overflow: hidden;
  white-space: nowrap;
}

.ticker-title {
  padding: 0 15px;
  font-weight: bold;
  flex-shrink: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.ticker-wrapper {
  position: relative;
  flex-grow: 1;
  height: 100%;
  overflow: hidden;
}

.ticker-items {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-scroll 360s linear infinite;
  padding-left: 100%; /* giúp dòng đầu sát chữ "Latest Questions:" */
}

.ticker-item {
  display: inline-block;
  padding: 0 30px;
}

.ticker-item a {
  text-decoration: none;
}

.ticker-item a:hover {
  text-decoration: underline;
  color: #ffdd57;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}