/* Mobile nav clean slate — body.dchd-menu-open trigger */
@media (max-width: 768px) {
    /* Nav 1 (chứa hamburger) — luôn show */
    .main-navigation.mobile-menu-control-wrapper {
        flex: 0 0 auto !important;
        position: static !important;
        background: transparent !important;
    }
    .main-navigation.mobile-menu-control-wrapper .menu-toggle {
        display: block !important;
        background: transparent !important;
        border: 1px solid #e0d8cc !important;
        border-radius: 4px !important;
        padding: .5rem .75rem !important;
        cursor: pointer;
    }

    /* Nav 2 (chứa menu items) — DEFAULT ẩn hoàn toàn */
    nav.main-navigation.sub-menu-right,
    nav#site-navigation {
        display: none !important;
    }

    /* Nav 2 — hiện khi body có class .dchd-menu-open */
    body.dchd-menu-open nav.main-navigation.sub-menu-right,
    body.dchd-menu-open nav#site-navigation {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #fff !important;
        z-index: 9999 !important;
        box-shadow: 0 6px 16px rgba(0,0,0,.15) !important;
        padding: 0 !important;
    }

    /* Ẩn button menu-toggle duplicate trong nav 2 */
    body.dchd-menu-open nav#site-navigation .menu-toggle {
        display: none !important;
    }

    /* Menu items vertical */
    body.dchd-menu-open #primary-menu,
    body.dchd-menu-open .main-nav {
        display: block !important;
        width: 100% !important;
    }
    body.dchd-menu-open #primary-menu > ul,
    body.dchd-menu-open .main-nav > ul {
        display: block !important;
        width: 100% !important;
        padding: .5rem 0 !important;
        margin: 0 !important;
        background: #fff !important;
    }
    body.dchd-menu-open #primary-menu > ul li,
    body.dchd-menu-open .main-nav > ul li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background: transparent !important;
        border-bottom: 1px solid #f0ebe3 !important;
        float: none !important;
    }
    body.dchd-menu-open #primary-menu > ul li:last-child,
    body.dchd-menu-open .main-nav > ul li:last-child {
        border-bottom: none !important;
    }
    body.dchd-menu-open #primary-menu > ul li a,
    body.dchd-menu-open .main-nav > ul li a {
        display: block !important;
        width: 100% !important;
        color: #2B2520 !important;
        background: transparent !important;
        padding: .9rem 1rem !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        text-align: center !important;
    }
    body.dchd-menu-open #primary-menu > ul li a:hover,
    body.dchd-menu-open #primary-menu > ul li.current-menu-item a,
    body.dchd-menu-open .main-nav > ul li a:hover,
    body.dchd-menu-open .main-nav > ul li.current-menu-item a {
        color: #B8956A !important;
        background: #FAF6EF !important;
    }
}