/* MyHouse247 shared navigation — Vietnamese + English — v20.13 */

/* Hide the mobile call action when no hotline is configured. */
.bds-mobile-call[href="tel:"],
.bds-mobile-call[href="tel:+"]{
  display:none!important;
}

@media (min-width:769px){
  .bds-site-header,
  .bds-site-header .container,
  .bds-header-inner,
  .bds-header-right,
  .bds-main-menu,
  .bds-main-menu>.dropdown{
    overflow:visible!important;
  }

  .bds-main-menu>.dropdown>li.has-submenu{
    position:relative!important;
  }

  /*
   * Previous CSS placed the submenu 8px below its parent while a later rule
   * applied overflow:auto. That clipped the pseudo-element intended to bridge
   * the gap, so hover was lost before the pointer reached the submenu.
   */
  .bds-main-menu .submenu{
    display:none!important;
    top:calc(100% - 1px)!important;
    left:0!important;
    margin:0!important;
    padding:10px 8px 8px!important;
    min-width:250px!important;
    max-width:min(92vw,380px)!important;
    max-height:min(72vh,640px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    z-index:5000!important;
    pointer-events:auto!important;
    transform-origin:top left;
  }

  /* No external hover bridge is needed because the dropdown now overlaps. */
  .bds-main-menu .submenu:before{
    content:none!important;
    display:none!important;
  }

  .bds-main-menu .has-submenu:hover>.submenu,
  .bds-main-menu .has-submenu:focus-within>.submenu,
  .bds-main-menu .has-submenu.is-submenu-open>.submenu{
    display:block!important;
    animation:mh247SubmenuIn .13s ease-out both;
  }

  .bds-main-menu .has-submenu.is-submenu-align-right>.submenu{
    left:auto!important;
    right:0!important;
    transform-origin:top right;
  }

  .bds-main-menu .has-submenu>a{
    position:relative!important;
  }

  .bds-main-menu .has-submenu>a:after{
    transition:transform .16s ease,color .16s ease;
    transform:translateY(-50%) rotate(0deg)!important;
  }

  .bds-main-menu .has-submenu:hover>a:after,
  .bds-main-menu .has-submenu:focus-within>a:after,
  .bds-main-menu .has-submenu.is-submenu-open>a:after{
    color:var(--bds-blue)!important;
    transform:translateY(-50%) rotate(180deg)!important;
  }

  .bds-main-menu .has-submenu.is-submenu-open>a,
  .bds-main-menu .has-submenu:hover>a,
  .bds-main-menu .has-submenu:focus-within>a{
    background:#eef6ff!important;
    color:var(--bds-blue)!important;
  }

  .bds-main-menu .submenu li,
  .bds-main-menu .submenu a{
    width:100%!important;
  }

  .bds-main-menu .submenu a{
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    padding:10px 12px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.35!important;
  }
}

@keyframes mh247SubmenuIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .bds-main-menu .submenu,
  .bds-main-menu .has-submenu>a:after{
    animation:none!important;
    transition:none!important;
  }
}

/* Mobile keeps the established full submenu layout and removes desktop state. */
@media (max-width:768px){
  .bds-main-menu .has-submenu.is-submenu-open>.submenu{
    display:block!important;
  }
  .bds-main-menu .has-submenu>a[aria-expanded="true"]:after{
    transform:translateY(-50%) rotate(180deg)!important;
  }
}