/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.19.3
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
/* CSS cho Mega Menu - Giữ viền và hiệu ứng khi di chuột vào menu chính */
.mega-menu-item > a {
    border: 2px solid green; /* Viền cho mục menu chính */
    border-radius: 30px; /* Bo góc cho mục menu chính */
    padding: 10px 20px; /* Khoảng cách nội dung so với viền */
    background-color: white; /* Màu nền cho mục menu chính */
    color: black; /* Màu chữ cho mục menu chính */
    text-decoration: none; /* Loại bỏ gạch chân */
}

/* CSS khi di chuột vào menu chính */
.mega-menu-item:hover > a {
    background-color: white; /* Màu nền khi di chuột vào mục menu chính */
    border: 2px solid green; /* Viền khi di chuột vào mục menu chính */
    border-radius: 30px; /* Bo góc khi di chuột vào mục menu chính */
    color: black; /* Màu chữ khi di chuột vào mục menu chính */
}

/* CSS cho các mục con trong Mega Menu */
.mega-sub-menu {
    border: 2px solid green; /* Viền cho submenu */
    border-radius: 30px; /* Bo góc cho submenu */
    margin-top: 5px; /* Khoảng cách giữa menu chính và submenu */
    background-color: white; /* Màu nền cho submenu */
    padding: 10px 20px; /* Khoảng cách nội dung submenu so với viền */
}

/* CSS cho các mục con trong submenu để giữ viền và hiệu ứng */
.mega-sub-menu a {
    border-radius: 30px; /* Bo góc cho các mục con */
    padding: 10px 20px; /* Đồng bộ khoảng cách */
    background-color: white; /* Đồng bộ màu nền */
    color: black; /* Đồng bộ màu chữ */
    text-decoration: none; /* Loại bỏ gạch chân */
}

/* CSS để giữ viền khi di chuột vào các mục con */
.mega-sub-menu a:hover {
    background-color: white; /* Màu nền khi di chuột vào mục con */
    border: 2px solid green; /* Viền khi di chuột vào mục con */
    border-radius: 30px; /* Bo góc khi di chuột vào mục con */
    color: black; /* Màu chữ khi di chuột vào mục con */
}
.search-container {
    display: flex;
    align-items: center;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    max-width: 400px;
    margin: 20px auto; /* Để căn giữa thanh tìm kiếm */
}

.search-container input {
    border: none;
    padding: 10px 15px;
    flex: 1;
    outline: none;
    font-size: 16px;
    border-radius: 25px 0 0 25px;
}

.search-container button {
    background-color: #FFC107;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    outline: none;
    border-radius: 0 25px 25px 0;
    font-size: 16px;
    color: white;
    display: flex;
    align-items: center;
}

.search-icon {
    margin-right: 8px;
}

.search-container input::placeholder {
    color: #bbb;
}