/*
Theme Name: AN CÁCH LÃNG Energy
Theme URI: https://example.com/
Author: AN CÁCH LÃNG Energy
Description: Theme WordPress doanh nghiệp năng lượng tái tạo, lấy cảm hứng từ bố cục website doanh nghiệp EPC hiện đại. Tương thích Elementor Pro và plugin AN CÁCH LÃNG Core.
Version: 4.4.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: angelong-energy
Tags: custom-logo, custom-menu, featured-images, full-width-template, translation-ready, business, energy
*/

/* =========================================================
   FIX MENU MOBILE - AN CACH LANG
========================================================= */

/* =========================================================
   MOBILE MENU FINAL FIX
   AN CACH LANG ENERGY
   PHẢI ĐẶT Ở CUỐI CÙNG CỦA STYLE.CSS
========================================================= */

@media screen and (max-width: 991px) {

    /* =====================================================
       CHỐNG TRÀN NGANG TOÀN TRANG
    ===================================================== */

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        overflow-x: hidden !important;
    }


    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }


    /* =====================================================
       KHUNG HEADER / MENU MOBILE
    ===================================================== */

    header,
    .site-header {
        max-width: 100% !important;

        overflow-x: hidden !important;
    }


    header .main-navigation,
    header #site-navigation,

    .site-header .main-navigation,
    .site-header #site-navigation,

    .main-navigation,
    #site-navigation,

    .mobile-menu,
    .mobile-navigation,
    .mobile-nav,

    .primary-navigation,
    .primary-menu-container {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;

        overflow-x: hidden !important;
        overflow-y: visible !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       UL MENU CHÍNH
       BẮT BUỘC XẾP DỌC
    ===================================================== */

    header nav ul.menu,
    header .main-navigation ul.menu,
    .site-header nav ul.menu,

    header nav ul.nav-menu,
    header .main-navigation ul.nav-menu,
    .site-header nav ul.nav-menu,

    .main-navigation ul,
    .main-navigation .menu,
    .main-navigation .nav-menu,

    #site-navigation ul,
    #site-navigation .menu,
    #site-navigation .nav-menu,

    .mobile-menu ul,
    .mobile-navigation ul,
    .mobile-nav ul,

    .primary-navigation ul,
    .primary-navigation .menu,
    .primary-navigation .nav-menu,

    .primary-menu-container ul {
        display: flex !important;

        flex-direction: column !important;
        flex-wrap: nowrap !important;

        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;

        float: none !important;

        white-space: normal !important;

        overflow: visible !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       MỖI MỤC MENU CHÍNH = 1 DÒNG
    ===================================================== */

    header nav ul.menu > li,
    header .main-navigation ul.menu > li,
    .site-header nav ul.menu > li,

    header nav ul.nav-menu > li,
    header .main-navigation ul.nav-menu > li,
    .site-header nav ul.nav-menu > li,

    .main-navigation .menu > li,
    .main-navigation .nav-menu > li,

    #site-navigation .menu > li,
    #site-navigation .nav-menu > li,

    .mobile-menu li,
    .mobile-navigation li,
    .mobile-nav li,

    .primary-navigation li,
    .primary-menu-container li {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        white-space: normal !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LINK MENU CHÍNH
    ===================================================== */

    header nav ul.menu > li > a,
    header .main-navigation ul.menu > li > a,
    .site-header nav ul.menu > li > a,

    header nav ul.nav-menu > li > a,
    header .main-navigation ul.nav-menu > li > a,
    .site-header nav ul.nav-menu > li > a,

    .main-navigation .menu > li > a,
    .main-navigation .nav-menu > li > a,

    #site-navigation .menu > li > a,
    #site-navigation .nav-menu > li > a,

    .mobile-menu li > a,
    .mobile-navigation li > a,
    .mobile-nav li > a,

    .primary-navigation li > a,
    .primary-menu-container li > a {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 52px !important;
        height: auto !important;

        margin: 0 !important;

        padding:
            14px
            20px !important;

        color: #061c31 !important;

        background: transparent !important;

        font-size: 17px !important;
        font-weight: 700 !important;

        line-height: 1.35 !important;

        text-align: left !important;

        white-space: normal !important;

        word-break: normal !important;

        overflow-wrap: anywhere !important;

        border: 0 !important;

        border-bottom:
            1px solid #e3e8ec !important;

        border-radius: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       XÓA MỌI KIỂU CĂN NGANG CỦA DESKTOP
    ===================================================== */

    header nav ul.menu,
    header nav ul.nav-menu,
    .main-navigation ul.menu,
    .main-navigation ul.nav-menu,
    #site-navigation ul.menu,
    #site-navigation ul.nav-menu {
        justify-content: flex-start !important;

        text-align: left !important;
    }


    /* =====================================================
       MENU CON
       Ví dụ mục "Công cụ"
    ===================================================== */

    header nav ul.menu > li > ul.sub-menu,
    header .main-navigation ul.menu > li > ul.sub-menu,
    .site-header nav ul.menu > li > ul.sub-menu,

    header nav ul.nav-menu > li > ul.sub-menu,
    header .main-navigation ul.nav-menu > li > ul.sub-menu,

    .main-navigation ul.sub-menu,
    #site-navigation ul.sub-menu,

    .mobile-menu ul.sub-menu,
    .mobile-navigation ul.sub-menu,
    .mobile-nav ul.sub-menu,

    .primary-navigation ul.sub-menu,
    .primary-menu-container ul.sub-menu {
        position: static !important;

        display: block !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        transform: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;

        padding:
            0
            0
            0
            16px !important;

        list-style: none !important;

        background: #f8fafb !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        overflow: visible !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LI MENU CON
    ===================================================== */

    header nav ul.sub-menu > li,
    header .main-navigation ul.sub-menu > li,
    .site-header nav ul.sub-menu > li,

    .main-navigation ul.sub-menu > li,
    #site-navigation ul.sub-menu > li,

    .mobile-menu ul.sub-menu > li,
    .mobile-navigation ul.sub-menu > li,
    .mobile-nav ul.sub-menu > li,

    .primary-navigation ul.sub-menu > li {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        float: none !important;

        white-space: normal !important;

        border: 0 !important;

        transform: none !important;
    }


    /* =====================================================
       LINK MENU CON
    ===================================================== */

    header nav ul.sub-menu > li > a,
    header .main-navigation ul.sub-menu > li > a,
    .site-header nav ul.sub-menu > li > a,

    .main-navigation ul.sub-menu > li > a,
    #site-navigation ul.sub-menu > li > a,

    .mobile-menu ul.sub-menu > li > a,
    .mobile-navigation ul.sub-menu > li > a,
    .mobile-nav ul.sub-menu > li > a,

    .primary-navigation ul.sub-menu > li > a {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-start !important;

        width: 100% !important;
        max-width: 100% !important;

        min-height: 46px !important;

        margin: 0 !important;

        padding:
            11px
            20px
            11px
            28px !important;

        color: #061c31 !important;

        background: transparent !important;

        font-size: 15px !important;
        font-weight: 600 !important;

        line-height: 1.4 !important;

        text-align: left !important;

        text-decoration: none !important;

        white-space: normal !important;

        word-break: normal !important;
        overflow-wrap: anywhere !important;

        border-bottom:
            1px solid #edf0f2 !important;

        border-radius: 0 !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       XÓA VÙNG HOVER DESKTOP
    ===================================================== */

    header nav ul.menu > li > ul.sub-menu::before,
    header .main-navigation ul.menu > li > ul.sub-menu::before,
    .site-header nav ul.menu > li > ul.sub-menu::before,

    header nav ul.nav-menu > li > ul.sub-menu::before,
    header .main-navigation ul.nav-menu > li > ul.sub-menu::before {
        display: none !important;

        content: none !important;

        width: 0 !important;
        height: 0 !important;
    }


    /* =====================================================
       MŨI TÊN MENU CÓ MENU CON
    ===================================================== */

    header nav ul.menu > li.menu-item-has-children > a::after,
    header .main-navigation ul.menu > li.menu-item-has-children > a::after,
    .site-header nav ul.menu > li.menu-item-has-children > a::after,

    header nav ul.nav-menu > li.menu-item-has-children > a::after,
    .main-navigation li.menu-item-has-children > a::after,
    #site-navigation li.menu-item-has-children > a::after {
        content: "▾" !important;

        display: inline-block !important;

        margin-left: auto !important;

        padding-left: 10px !important;

        font-size: 12px !important;

        line-height: 1 !important;

        flex-shrink: 0 !important;
    }


    /* =====================================================
       TRÁNH ẢNH / PHẦN TỬ KHÁC LÀM TRÀN MOBILE
    ===================================================== */

    img,
    video,
    iframe {
        max-width: 100%;
    }

}