/* V278 - Real responsive public menu + Be Vietnam Pro applied last */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root{--v278-menu-font:"Be Vietnam Pro","Segoe UI",Roboto,Arial,sans-serif}
body:not(.admin-layout) .v117-nav,
body:not(.admin-layout) .v117-nav-link,
body:not(.admin-layout) .v117-nav-link span,
body:not(.admin-layout) .v117-dropdown a,
body:not(.admin-layout) .v117-mobile-menu{
  font-family:var(--v278-menu-font)!important;
}

/* Desktop/tablet landscape: stable horizontal menu */
@media (min-width:981px){
  body:not(.admin-layout) .v117-nav-wrap{display:block!important;height:48px!important;overflow:visible!important}
  body:not(.admin-layout) .v117-navrow{height:48px!important;display:flex!important;align-items:stretch!important}
  body:not(.admin-layout) .v117-nav{display:flex!important;position:static!important;transform:none!important;opacity:1!important;visibility:visible!important;padding:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
  body:not(.admin-layout) .v117-nav-link{
    min-width:0!important;height:48px!important;padding:0 16px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    font-size:13px!important;font-weight:600!important;line-height:1.2!important;
    letter-spacing:-.015em!important;text-transform:uppercase!important;white-space:nowrap!important;
  }
  body:not(.admin-layout) .v117-nav-link.is-home,
  body:not(.admin-layout) .v117-nav-link:hover{font-weight:700!important}
  body:not(.admin-layout) .v117-mobile-menu{display:none!important}
}
@media (min-width:981px) and (max-width:1280px){
  body:not(.admin-layout) .v117-nav-link{font-size:12px!important;padding-left:10px!important;padding-right:10px!important}
}

/* TRUE responsive menu breakpoint: one breakpoint for CSS + JS */
@media (max-width:980px){
  html.v278-menu-lock,html.v278-menu-lock body{overflow:hidden!important;overscroll-behavior:none}
  body:not(.admin-layout) .v117-header{position:relative!important;z-index:1000!important}

  body:not(.admin-layout) .v117-mainrow{
    width:100%!important;max-width:none!important;height:68px!important;min-height:68px!important;
    padding:0 12px!important;margin:0!important;box-sizing:border-box!important;
    display:grid!important;grid-template-columns:minmax(96px,1fr) 44px 44px!important;
    align-items:center!important;gap:8px!important;
  }
  body:not(.admin-layout) .v117-logo{min-width:0!important;overflow:hidden!important}
  body:not(.admin-layout) .v117-logo img{width:auto!important;max-width:132px!important;max-height:48px!important;object-fit:contain!important;object-position:left center!important}

  /* hide desktop action cluster so the mobile header cannot overflow */
  body:not(.admin-layout) .v246-head-actions{display:none!important}

  body:not(.admin-layout) .v117-search{
    display:flex!important;grid-column:2!important;justify-self:end!important;
    width:42px!important;min-width:42px!important;height:42px!important;border:0!important;
    border-radius:11px!important;background:#f1f7f4!important;box-shadow:none!important;overflow:hidden!important;
  }
  body:not(.admin-layout) .v117-search input{display:none!important}
  body:not(.admin-layout) .v117-search button{
    width:42px!important;height:42px!important;padding:0!important;border-radius:11px!important;
    background:#eef7f2!important;color:#08733f!important;display:grid!important;place-items:center!important;
  }
  body:not(.admin-layout) .v117-search button span{display:none!important}
  body:not(.admin-layout) .v117-search button svg{width:20px!important;height:20px!important}

  body:not(.admin-layout) .v117-mobile-menu{
    display:flex!important;grid-column:3!important;align-items:center!important;justify-content:center!important;
    width:44px!important;height:44px!important;margin:0!important;padding:0!important;border:0!important;
    border-radius:11px!important;background:#08733f!important;color:#fff!important;
    box-shadow:0 4px 12px rgba(8,115,63,.20)!important;cursor:pointer!important;
  }
  body:not(.admin-layout) .v117-mobile-menu svg{width:24px!important;height:24px!important}

  /* nav wrapper becomes a fixed layer; closed by default */
  body:not(.admin-layout) .v117-nav-wrap{
    display:block!important;position:fixed!important;inset:0!important;z-index:1200!important;
    height:auto!important;background:transparent!important;pointer-events:none!important;
    visibility:hidden!important;opacity:0!important;transition:opacity .22s ease,visibility .22s ease!important;
  }
  body:not(.admin-layout) .v117-header.v26-open .v117-nav-wrap{
    visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  }
  body:not(.admin-layout) .v117-navrow{
    display:block!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0!important;
  }
  body:not(.admin-layout) .v117-nav{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    position:absolute!important;top:0!important;right:0!important;left:auto!important;bottom:0!important;
    width:min(88vw,380px)!important;height:100%!important;max-height:none!important;
    padding:82px 14px 24px!important;box-sizing:border-box!important;
    background:#fff!important;box-shadow:-18px 0 45px rgba(13,47,36,.18)!important;
    overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    transform:translateX(105%)!important;transition:transform .24s ease!important;
  }
  body:not(.admin-layout) .v117-header.v26-open .v117-nav{transform:translateX(0)!important}

  body:not(.admin-layout) .v117-nav::before{
    content:"DANH MỤC";position:absolute;left:20px;right:20px;top:24px;height:38px;
    display:flex;align-items:center;padding-bottom:10px;border-bottom:1px solid #e9efec;
    color:#173d31;font-family:var(--v278-menu-font);font-size:15px;font-weight:800;letter-spacing:.02em;
  }

  body:not(.admin-layout) .v117-nav-link,
  body:not(.admin-layout) .v212-nav-root>.v117-nav-link{
    flex:0 0 auto!important;width:100%!important;min-height:52px!important;height:auto!important;
    margin:0!important;padding:14px 12px!important;box-sizing:border-box!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;
    border:0!important;border-bottom:1px solid #edf2ef!important;border-radius:0!important;
    background:#fff!important;color:#183c31!important;
    font-family:var(--v278-menu-font)!important;font-size:14px!important;font-weight:600!important;
    line-height:1.4!important;letter-spacing:-.01em!important;text-transform:none!important;white-space:normal!important;
    text-align:left!important;text-decoration:none!important;
  }
  body:not(.admin-layout) .v117-nav-link span{font:inherit!important;color:inherit!important}
  body:not(.admin-layout) .v117-nav-link svg{width:19px!important;height:19px!important;flex:0 0 19px!important;color:#08733f!important}
  body:not(.admin-layout) .v117-nav-link.is-home{background:#f0f8f4!important;color:#08733f!important;font-weight:700!important;border-radius:9px!important;margin-bottom:4px!important}
  body:not(.admin-layout) .v117-nav-link:active{background:#eef7f2!important}

  body:not(.admin-layout) .v117-dropdown{position:static!important;display:none!important;min-width:0!important;width:100%!important;margin:0!important;padding:4px 0 8px 14px!important;border:0!important;box-shadow:none!important;background:#f8fbf9!important}
  body:not(.admin-layout) .v117-nav-node.v26-open-node>.v117-dropdown{display:block!important}
  body:not(.admin-layout) .v117-dropdown a{
    min-height:44px!important;padding:11px 12px!important;border-bottom:1px solid #edf2ef!important;
    font-family:var(--v278-menu-font)!important;font-size:13px!important;font-weight:500!important;line-height:1.45!important;color:#38534a!important;
  }

  /* overlay injected by JS */
  body:not(.admin-layout) .v278-menu-backdrop{
    position:absolute;inset:0;background:rgba(7,26,20,.42);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);
  }
  body:not(.admin-layout) .v278-menu-close{
    position:absolute;right:14px;top:18px;z-index:3;width:42px;height:42px;border:0;border-radius:11px;
    background:#f1f6f3;color:#173d31;font:700 22px/1 var(--v278-menu-font);display:grid;place-items:center;cursor:pointer;
  }
}

@media (max-width:480px){
  body:not(.admin-layout) .v117-mainrow{padding-left:10px!important;padding-right:10px!important;gap:7px!important}
  body:not(.admin-layout) .v117-logo img{max-width:116px!important}
  body:not(.admin-layout) .v117-nav{width:min(92vw,360px)!important;padding-left:12px!important;padding-right:12px!important}
  body:not(.admin-layout) .v117-nav-link,
  body:not(.admin-layout) .v212-nav-root>.v117-nav-link{font-size:13.5px!important;min-height:50px!important;padding:13px 10px!important}
}

@media (prefers-reduced-motion:reduce){
  body:not(.admin-layout) .v117-nav-wrap,
  body:not(.admin-layout) .v117-nav{transition:none!important}
}