/*
Theme Name: Flatsome Child thư viện avatar
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 4.0
*/



/* 1. Đảm bảo header không quá rộng và có nền rõ ràng */
.header-inner {
    max-width: 1200px; /* Giới hạn chiều rộng tối đa */
    margin: 0 auto;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Đường kẻ mờ dưới chân header */
    background-color: #ffffff; /* Nền trắng sạch */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Thêm bóng mờ nhẹ */
}

/* 2. Thiết lập lại font chữ và kích cỡ cho các mục menu */
.header-nav-main > li > a {
    font-family: 'Arial', sans-serif; /* Thay đổi font chữ nếu cần */
    font-weight: 600; /* In đậm hơn một chút */
    font-size: 14px;
    color: #333333; /* Màu chữ menu đậm */
    padding: 10px 15px; /* Tăng khoảng cách đệm */
    transition: all 0.3s ease; /* Thêm hiệu ứng chuyển đổi mượt mà */
}

/* 3. Hiệu ứng khi di chuột (Hover) */
.header-nav-main > li > a:hover,
.header-nav-main > li.current-menu-item > a {
    color: #007bff; /* Màu sắc thương hiệu đẹp, ví dụ: Xanh dương */
    /* background-color: rgba(0, 123, 255, 0.05);  Thêm nền nhẹ nếu thích */
}

/* 4. Loại bỏ đường viền/gạch chân mặc định (nếu có) */
.nav-uppercase > li > a {
    text-decoration: none !important;
}

/* 5. Icon tìm kiếm */
.header-search-dropdown a.is-small {
    color: #555555;
    padding: 10px 15px;
}
.header-search-dropdown a.is-small:hover {
    color: #007bff;
}

/* 1. Định dạng chung cho container dropdown */
.nav-dropdown-default {
    background-color: #ffffff;
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Bóng đổ mạnh hơn */
    border-radius: 4px; /* Bo tròn góc */
    padding: 5px 0;
    min-width: 200px; /* Chiều rộng tối thiểu */
}

/* 2. Định dạng các mục menu con */
.nav-dropdown-default li a {
    padding: 10px 20px;
    font-size: 14px;
    color: #555555; /* Màu chữ hơi nhạt */
    display: block;
    white-space: nowrap; /* Đảm bảo không bị xuống dòng */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 3. Hiệu ứng khi di chuột lên menu con */
.nav-dropdown-default li a:hover {
    background-color: #f7f7f7; /* Nền xám nhạt */
    color: #007bff; /* Màu chữ thương hiệu */
}

/* 1. Chỉnh sửa icon menu mobile */
.mobile-nav .nav-icon a {
    color: #007bff; /* Icon màu thương hiệu */
    font-size: 20px;
}

/* 2. Nếu muốn logo to hơn trên mobile */
@media (max-width: 850px) {
    #logo img {
        max-height: 40px !important; /* Giới hạn chiều cao logo trên mobile */
        width: auto !important;
    }
}

/* Gạch chân động: Thêm gạch dưới từ trái qua phải khi hover */
.header-nav-main > li > a {
    position: relative;
}

.header-nav-main > li > a:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #007bff; /* Màu gạch chân */
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
}

.header-nav-main > li > a:hover:after {
    visibility: visible;
    transform: scaleX(1);
}