/*
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.   ***************/

/* --- CSS cho Bố cục Danh mục Thương hiệu --- */

.brands-directory-container {
   
    max-width: 1200px; /* Giới hạn chiều rộng tối đa */
    margin: 20px auto; /* Căn giữa */
    padding: 0 15px; /* Khoảng cách hai bên */
}

.brand-list-group {
    margin-bottom: 30px; /* Khoảng cách dưới mỗi nhóm chữ cái */
}

.brand-list-group h3 {
    font-size: 2.2em; /* Kích thước chữ cho tiêu đề A, B, ... */
    font-weight: bold; /* Chữ đậm */
    margin-top: 25px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee; /* Đường kẻ dưới tiêu đề */
    padding-bottom: 10px;
   
}

.brand-list {
    list-style: none; /* Xóa dấu chấm đầu dòng */
    margin: 0;
    padding: 0;
    display: grid; /* Sử dụng CSS Grid để tạo cột */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Tự động tạo cột */
    gap: 10px 20px; /* Khoảng cách giữa các hàng và cột */
}

.brand-list li {
    padding: 3px 0;
}

.brand-list li a {
    text-decoration: none; /* Xóa gạch chân */
   
    font-size: 1em;
    transition: color 0.2s ease;
}

.brand-list li a:hover {
    color: #0073aa; /* Màu chữ khi di chuột qua */
}

/* Điều chỉnh bố cục trên thiết bị di động */
@media (max-width: 768px) {
    .brand-list {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px 15px;
    }

    .brand-list-group h3 {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .brand-list {
        grid-template-columns: 1fr 1fr; /* 2 cột trên điện thoại */
        gap: 5px 10px;
    }
    .brand-list-group h3 {
        font-size: 1.5em;
    }
}

@font-face {
    font-family: 'Ebrima';
    src: url('https://auto4k.com/fonts/EBRIMA.woff2') format('woff2'),
         url('https://auto4k.com/fonts/EBRIMA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Ebrima', sans-serif !important;
}


.box_wallpapers > .post-item > .col-inner > .box-blog-post{
	    background: hsl(231deg 8% 15% / 60%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
 
    flex-direction: column;
    border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}


#post-list > div >.post-item > .col-inner > .box-blog-post >.box-text {
	    background: hsl(231deg 8% 15% / 60%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
 
    flex-direction: column;
    border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.is-divider{display:none;}
a.plain{
	font-size: 0.9rem;
    font-weight: normal;
}
a.plain:hover{
	color:#90ff00;
}

#main{background-color: rgb(45, 49, 55);}
#content{
	    width: 80%;
    margin: 0 auto;
	background-color: rgb(45, 49, 55);
}
.searchform{
	white-space: nowrap;
    border-radius: 50px;
    border: 5px solid #2a2d31;
    box-shadow: none;
    transition: all 0.2s ease;
}
.header-nav{
	    align-items: center;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    flex-wrap: nowrap;
}
#menu-item-24{
	min-width:160px;
}
#menu-item-24 a.nav-top-link{padding: 6px 0;
    position: relative;
    font-size: 15px;
    transition: all 200ms linear;
    width: 150px;
    letter-spacing: 1px;
    display: -ms-inline-flexbox;
    display: inline-flex;
	font-weight: normal;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    text-align: center;
    cursor: pointer;
    color: #ffffff;
    border-radius: 50px;
    border: 5px solid #2a2d31;
    /* height: 32px; */
    user-select: none;}

.box-text.text-center.dark{
	color: #d8d8d8;
    
    padding: 8px;
   
}

h6.entry-category.is-xsmall a{
	    font-size: 14px;
    padding: 7px 15px;
    background-color: #24272d;
    line-height: 3em;
    transition: all 0.3s ease;
    margin-left: 2px;
    white-space: nowrap;
    border-radius: 4px;
	color:white;
	box-shadow: 0 2px 2px 0 #1b1b1b;
}
h6.entry-category.is-xsmall a:hover{
	color:90ff00 !important;
}

span.tags-title{
	    left: 0;
    top: 0;
    position: absolute;
    color: #bababa;
    font-family: Roboto;
    background: #2d3137;
    padding: 0px 20px 0px 20px;
    border-radius: 2px;
    box-shadow: 0px 5px 10px #25272a;
    font-size: 18px;
}

/* Tùy chỉnh chung cho tất cả các thẻ tag */
.tags-list a {
    text-decoration: none; /* Bỏ gạch chân link */
    font-size: 14px;
    font-weight: bold;
    color: #555;
    background-color: #f8f9fa; /* Màu nền nhẹ */
    border: 1px solid #e9ecef;
    border-radius: 20px; /* Bo tròn góc */
    padding: 6px 15px; /* Khoảng đệm bên trong */
    margin: 0 8px 8px 0; /* Khoảng cách giữa các tag */
    display: inline-block; /* Giúp các thuộc tính trên hoạt động tốt */
    transition: all 0.3s ease-in-out; /* Hiệu ứng chuyển đổi mượt mà */
}

/* Hiệu ứng khi di chuột qua */
.tags-list a:hover {
    background-color: #007bff; /* Màu nền khi hover */
    color: #fff; /* Màu chữ khi hover */
    border-color: #007bff;
    transform: translateY(-2px); /* Hiệu ứng dịch lên một chút */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Thêm bóng đổ nhẹ */
}


.tags-list a:hover{
	transform: scale(1.16);
	color:90ff00;
}

.stuck .header-main .nav > li > a{line-height:0px !important;}

/* Custom CSS for Flatsome Breadcrumbs */

/* Định dạng tổng thể cho Breadcrumbs */
.flatsome-breadcrumbs {
   font-size: 24px;
    font-family: Roboto, sans-serif;
    margin: 5px 0 12px 0;
    border-left: 4px solid #90ff00;
    padding-left: 6px;
    display: block;
}

/* Định dạng danh sách Breadcrumbs */
.main_breadcrumbs {
    list-style: none; /* Xóa dấu chấm mặc định */
    margin: 0;
    padding: 0;
    display: flex; /* Sắp xếp các mục trên cùng một hàng */
    align-items: center;
	
}

/* Định dạng cho từng mục (li) */
.main_breadcrumbs li {
    display: inline;
    padding-right: 5px; /* Khoảng cách sau mỗi mục */
	    margin-left: 0.3em !important;
	margin-bottom: 0;
}
.main_breadcrumbs a{
	color:white;
}
/* Thêm dấu phân cách giữa các mục */
.main_breadcrumbs li:not(:last-child)::after {
    content: "/"; /* Dấu phân cách, bạn có thể thay bằng ">" */
    padding-left: 5px; /* Khoảng cách trước dấu phân cách */
    color: #ccc;
}

/* Định dạng cho các liên kết */
.breadcrumbs-link {
    color: white;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* Hiệu ứng khi di chuột qua liên kết */
.breadcrumbs-link:hover {
/*     color: #000; */
}

/* Định dạng cho mục cuối cùng (tên bài viết hiện tại) */
.breadcrumbs li:last-child {
   font-weight: normal;
    color: #90ff00;
}

.related-posts-section{
	    padding: 10px;
    clear: left;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0 0 5px #1c1c1c;
    background-color: rgba(36, 39, 45, 0.49019607843137253);
    border: 1px #3c3c4a solid;
}
.related-posts-section h2{ font-weight: normal; padding-bottom:10px; font-size:1.3em}
.related-posts-section h5{ font-size:0.9em}
.related-posts-section h2:before {
    content: "\f302";
    font-family: "Font Awesome 5 Free";
    margin-right: 8px;
    color: #90ff00;
}

.post-tags a{
	display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    margin: 2px 0;
    background-color: #2b2e35;
    transition: all 0.2s ease;
    border: 1px #373c44 solid;
}
.post-tags a:hover {
    background-color: #24272d;
    color: #fff;
	text-decoration: none;}
.from_the_blog_excerpt {display:none !important;}


/* Container for the gallery */
.custom-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* Individual gallery item card */
.gallery-item {
    background: #1a1a1a;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.gallery-image {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 2px solid #333;
}

.gallery-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Custom CSS for Flatsome-style gallery cards */

.gallery-item-flatsome {
        background: hsl(231deg 8% 15% / 60%);
  
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
	border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.gallery-image-flatsome {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-content-flatsome {
    padding: 15px;
	    text-align: center;
    /* Sử dụng Flexbox để căn giữa */
    **display: flex;**
    **justify-content: center;**
    **align-items: center;**
}

/* Download button */
.download-button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #e50914; /* Red color for a bold look */
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.download-button:hover {
    background-color: #b80711;
}

/* Container for resolution options */
.download-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    color: #aaa;
    font-size: 14px;
}

.download-options a {
    color: #aaa;
    text-decoration: none;
    padding: 5px;
    border: 1px solid #444;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.download-options a:hover {
    color: #fff;
    border-color: #e50914;
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}