/* Public header, navigation, and mega-menu layout. */
.site-header{position:relative;z-index:10}
.topbar{background:var(--bm-green-deep);color:#fff;font-size:.84rem;line-height:32px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:32px}
.topbar a{color:#fff;text-decoration:none}
.topbar-login{opacity:.95}
.main-navbar{min-height:75px;padding-block:0;background:#fff;border-bottom:1px solid #f1efe9}
.brand-lockup{display:flex;align-items:center;gap:.55rem;line-height:1;text-decoration:none;margin-right:1rem}
.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1.05}
.brand-name{font-size:30px;font-weight:800;color:var(--bm-red);text-transform:uppercase;letter-spacing:-.01em}
.brand-tagline{font-size:10px;font-weight:700;color:var(--bm-green-logo);text-transform:uppercase;white-space:nowrap}
.main-navbar .nav-link{font-size:.94rem;font-weight:600;color:#1d2e28;padding:.5rem .25rem;white-space:nowrap}
.main-navbar .nav-link:hover{color:var(--bm-red)}
.nav-actions{white-space:nowrap}
.btn-brand{background:var(--bm-red-bg);border-color:var(--bm-red-bg);color:#fff;font-weight:700;border-radius:.35rem;padding:.72rem 1.3rem;box-shadow:0 8px 18px rgba(202,21,48,.12)}
.btn-brand:hover{background:var(--bm-red-dark);border-color:var(--bm-red-dark);color:#fff}
.btn-outline-green{border-color:var(--bm-green-bg);color:var(--bm-green);font-weight:700;border-radius:.35rem;padding:.72rem 1.3rem}
.btn-outline-green:hover{background:var(--bm-green-bg);color:#fff}
.nav-search{color:var(--bm-green);font-size:1.3rem;text-decoration:none}
@media(max-width:1199.98px){
.main-navbar .nav-link{font-size:.88rem}
.main-navbar .navbar-nav{gap:.6rem!important}
}
@media(max-width:991.98px){
.topbar-inner{padding-inline:1rem}
.topbar-hours{display:none}
.main-navbar{padding-block:8px}
.nav-actions{margin-top:1rem}
}
@media(max-width:575.98px){
.topbar{font-size:.75rem}
.topbar-inner{justify-content:center}
.topbar-login{display:none}
.main-navbar .nav-link{font-size:.86rem}
.brand-name{font-size:22px}
.brand-tagline{font-size:8px}
}
/* Full header and Bootstrap-powered mega menu. */
.main-navbar{position:relative}
.main-navbar>.container,.main-navbar>.container-fluid{position:relative}
.mega-dropdown{position:static}
.mega-menu{top:100%;left:0;width:100%;margin-top:0;background:#fff;border-color:#e7e3dc;border-radius:0 0 8px 8px;box-shadow:0 14px 30px rgba(26,48,40,.16);transform:none;z-index:1050;overflow:hidden}
.mega-menu:after{content:"";position:absolute;right:0;bottom:0;width:250px;height:215px;background:var(--bm-green-bg);opacity:.075;pointer-events:none;z-index:0;-webkit-mask:url('/assets/images/header/mega-bg.svg') right bottom/contain no-repeat;mask:url('/assets/images/header/mega-bg.svg') right bottom/contain no-repeat}
.mega-menu-inner{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-inline:auto;padding:1.35rem 1.15rem 1.55rem;position:relative;z-index:1}
.mega-catalog-link{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:.35rem;margin:0 .85rem .9rem;padding:0 0 .7rem;border-bottom:1px solid #eeeae4;color:var(--bm-red);font-size:.92rem;font-weight:800;text-decoration:none}.mega-catalog-link:hover{color:var(--bm-green)}
.mega-column{padding:0 .85rem;border-right:1px solid #eeeae4;min-width:0}
.mega-column:first-child{padding-left:.45rem}.mega-column:last-child{border-right:0;padding-right:.45rem}
/* min-height keeps the columns aligned when a heading wraps onto a second line. */
.mega-column h2{display:flex;align-items:flex-start;min-height:2.75rem;font-size:.82rem;line-height:1.3;text-transform:uppercase;margin:0 0 .5rem;font-weight:800;color:#1e2d27}
.mega-column h2 a{color:inherit;text-decoration:none;font-size:inherit;line-height:inherit}.mega-column h2 a:hover{color:var(--bm-red)}
.mega-column>a{display:flex;align-items:flex-start;min-height:3.75rem;padding:.55rem 0;border-top:1px solid #eeeae4;color:#7a7f7b;text-decoration:none;font-size:.86rem;line-height:1.3}.mega-column>a:hover{color:var(--bm-red)}
@media(min-width:1200px){.main-navbar .header-nav{margin-left:auto!important;margin-right:auto!important;flex-wrap:nowrap}.mega-menu{top:calc(100% - 1.2rem)}}
@media(max-width:1199.98px){.mega-dropdown{position:relative}.mega-menu{position:static;left:0;width:100%;transform:none}.mega-menu:after{display:none}.mega-menu-inner{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1rem}.mega-column:nth-of-type(3){border-right:0}.mega-column:nth-of-type(n+4){padding-top:1rem;border-top:1px solid #eeeae4}.mega-catalog-link{justify-content:flex-start;margin-inline:.6rem}}
@media(max-width:575.98px){.mega-menu{position:static;width:100%;box-shadow:none;border-radius:0;transform:none}.mega-menu-inner{grid-template-columns:1fr 1fr;padding:.75rem .2rem}.mega-catalog-link{margin:0 .6rem .2rem;padding-bottom:.65rem;font-size:.9rem}.mega-column,.mega-column:first-child,.mega-column:last-child{padding:.4rem .6rem;border-right:0}.mega-column h2{font-size:.74rem}.mega-column>a{font-size:.78rem;padding:.42rem 0}}
@media(max-width:1199.98px){
.navbar-collapse.show,.navbar-collapse.collapsing{
width:calc(100% + var(--bs-gutter-x));
margin-left:calc(var(--bs-gutter-x) / -2);
margin-right:calc(var(--bs-gutter-x) / -2);
padding:0 calc(var(--bs-gutter-x) / 2) .75rem;
background:#e1e5e3;
border-bottom:1px solid #b7c3be;
max-height:calc(100vh - 117px);
max-height:calc(100dvh - 117px);
overflow-y:auto;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.mega-menu,.mega-menu.show{background-color:#e1e5e3!important;opacity:1}
.mega-menu-inner{background:#e1e5e3}
}
/* Use the supplied Bảo Minh logo asset and crop only its transparent padding. */
.brand-logo,.footer-logo{display:block;position:relative;overflow:hidden;flex:0 0 50px;width:50px;height:58px}
.brand-logo img,.footer-logo img{position:absolute;display:block;width:99px;height:99px;max-width:none;left:-24px;top:-21px}
.footer-logo img{filter:brightness(0) invert(1)}
.site-header{position:sticky;top:0;z-index:1030;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow-anchor:none}
@media(min-width:1200px){.mega-menu{top:100%}}
@media(min-width:1200px){
.main-navbar>.container,.main-navbar>.container-fluid{height:100%;min-height:75px}
}
@media(max-width:1199.98px){
.main-navbar>.container,.main-navbar>.container-fluid{min-height:58px}
}
/* Mobile browsers can recalculate a sticky navbar while the page scrolls.
Keep the mobile header in a fixed, deterministic shell instead. */
@media(max-width:1199.98px){
.site-header{position:fixed;top:0;right:0;left:0;width:100%;height:117px}
.main-navbar{height:85px;min-height:85px}
.site-header ~ main{padding-top:117px}
}
/* Simple category dropdown (Kiến thức); the product menu uses .mega-menu instead. */
.nav-dropdown{border:1px solid #e7e3dc;border-radius:0 0 8px 8px;box-shadow:0 14px 30px rgba(26,48,40,.16);padding:.4rem 0;min-width:230px}
.nav-dropdown .dropdown-item{font-size:.88rem;padding:.5rem 1.1rem;color:#1d2e28}
.nav-dropdown .dropdown-item:hover{background:#f6f8f7;color:var(--bm-red)}
/* Hover menus, the way Bootstrap's own docs suggest: CSS shows the menu while
the is hovered. The menu is a child of that , so moving into it keeps
the hover alive — no timers, no JS state, nothing to fall out of sync. */
@media(min-width:1200px){
.main-navbar>.container,.main-navbar>.container-fluid,.main-navbar .navbar-collapse,.main-navbar .header-nav{align-items:stretch}
.main-navbar .header-nav>.nav-item{display:flex;align-items:center}
.brand-lockup,.nav-actions{align-self:center}
.hover-dropdown>.dropdown-menu{top:100%;left:0;margin-top:0}
.hover-dropdown:hover>.dropdown-menu{display:block}
}
/* Desktop: the drop-down layer spans the navbar, but the visible panel is
.mega-menu-inner — which carries Bootstrap's own .container class, so it
follows the framework's container widths and lines up with its columns. */
@media(min-width:1200px){
.mega-menu{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
.mega-menu:after{display:none}
.mega-menu-panel{background:#fff;border:1px solid #e7e3dc;border-top:0;border-radius:0 0 8px 8px;box-shadow:0 14px 30px rgba(26,48,40,.16);overflow:hidden}
.mega-menu-inner:after{content:"";position:absolute;right:0;bottom:0;z-index:-1;width:250px;height:215px;background:var(--bm-green-bg);opacity:.075;pointer-events:none;-webkit-mask:url('/assets/images/header/mega-bg.svg') right bottom/contain no-repeat;mask:url('/assets/images/header/mega-bg.svg') right bottom/contain no-repeat}
}