/*
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.16.2
Requires at least:    5.0.0
Requires PHP:         5.6.20
WC requires at least: 4.4.0
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.
***************/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #ffffff, #f1f8ff);
  font-family: Arial, sans-serif;
  color: #333;
}

h2 {
  text-align: center;
  padding: 40px 20px 20px;
  font-size: 2em;
  color: orange !important;
  margin: 0;
}




<style>
/* ===== Submenu cơ bản ===== */
.header-nav .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 220px;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 9999;
}

.header-nav .sub-menu li {
    position: relative;
    display: block;
    border-bottom: 1px solid #f0f0f0;
}

.header-nav .sub-menu li a {
    display: block;
    padding: 10px 15px;
    color: #333 !important;
    text-decoration: none;
    white-space: nowrap;
}

.header-nav .sub-menu li a:hover {
    background: #f5f5f5;
    color: #e67e22 !important;
}

/* Submenu cấp 2 xổ sang phải */
.header-nav .sub-menu .sub-menu {
    top: 0;
    left: 100%;
    margin-left: 1px;
    border: 1px solid #ddd;
    background: #fff;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Tắt click mặc định của link cha
    document.querySelectorAll('.header-nav .menu-item-has-children > a').forEach(function(el) {
        el.addEventListener('click', function(e) {
            e.preventDefault();
            let submenu = this.nextElementSibling;

            // Nếu submenu đang mở thì đóng
            if (submenu.style.display === 'block') {
                submenu.style.display = 'none';
            } else {
                // Đóng các submenu khác cùng cấp
                let siblings = this.parentElement.parentElement.querySelectorAll('.sub-menu');
                siblings.forEach(function(sm) {
                    if (sm !== submenu) sm.style.display = 'none';
                });
                // Mở submenu hiện tại
                submenu.style.display = 'block';
            }
        });
    });
});
</script>