/* =========================================================
   HK BEER – GLOBAL STYLE (style.css)  (v3 — Mobile menu hard-fix)
   By: HTML + CSS + Javascript 🔨🤖🔧
   ========================================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700;900&display=swap');

/* Reset / Base */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#0b0b0f; --panel:#141419; --stroke:rgba(255,255,255,.08);
  --txt:#e8ecff; --muted:#b7bfd7; --gold:#ffd26a; --gold2:#ff9a3d;
  --brand:#ff6b35; --brand-d:#e65c23;
  --safe-top:max(env(safe-area-inset-top,0px),constant(safe-area-inset-top,0px));
  --safe-right:max(env(safe-area-inset-right,0px),constant(safe-area-inset-right,0px));
  --safe-bottom:max(env(safe-area-inset-bottom,0px),constant(safe-area-inset-bottom,0px));
}
body{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}

/* Utilities */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.text-center{text-align:center}
.hidden{display:none !important}
.section{padding:40px 0}
.section-sm{padding:24px 0}
.grid{display:grid;gap:16px}
@media (min-width:768px){ .grid.cols-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .grid.cols-3{grid-template-columns:repeat(3,1fr)} }

/* ================= HEADER / NAV ================= */
.site-header{
  position:sticky;top:0;z-index:10050;background:#1a1a1d;
  border-bottom:1px solid rgba(255,255,255,.12);backdrop-filter:saturate(1.1) blur(6px)
}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:18px;
  padding:10px 16px;justify-content:space-between}
.brand{
  font-size:17px;font-weight:900;white-space:nowrap;
  background:linear-gradient(90deg,#FFD700,#FFA500,#FFD700);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-size:200% auto;animation:brandShine 3s linear infinite
}
@keyframes brandShine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Desktop inline menu */
@media (min-width:992px){
  .primary-menu{display:flex;gap:18px;margin-left:auto}
  .primary-menu a{font-size:14.5px;font-weight:700;color:#fff;opacity:.92;transition:.2s}
  .primary-menu a:hover{opacity:1;color:var(--brand);transform:translateY(-1px)}
}

/* Hamburger (base) */
.hamb{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;background:#1a1a22;border:1px solid #2a2a38;border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer}
.hamb .bar{display:block;width:24px;height:3px;background:#000;border-radius:2px}

/* ===== MOBILE (<=991.98px) ===== */
@media (max-width:991.98px){

  /* 1) Ẩn mọi UL menu ngang khác để khỏi đè (có theme dùng .nav hoặc nav) */
  .site-header .nav > ul:not(#mobile-menu),
  .site-header nav > ul:not(#mobile-menu){ display:none !important; }

  /* 2) Nút hamburger luôn cố định góc phải (chặn CSS cũ đẩy sang trái) */
  #hamb{
    display:flex !important; position:fixed !important;
    right:calc(12px + var(--safe-right,0px)) !important; left:auto !important;
    top:calc(10px + var(--safe-top,0px)) !important;
    z-index:2147483647 !important; touch-action:manipulation;
  }

  /* 3) Popover menu bám mép phải, có scroll, layer rất cao */
  #mobile-menu{
    display:none !important; position:fixed !important;
    right:calc(12px + var(--safe-right,0px)) !important; left:auto !important;
    top:calc(60px + var(--safe-top,0px)) !important;
    min-width:220px; max-width:92vw;
    background:#101018; border:1px solid #2a2a3a; border-radius:14px;
    box-shadow:0 16px 44px rgba(0,0,0,.55); padding:10px;
    z-index:2147483600 !important;
    max-height:calc(100dvh - 80px - var(--safe-top,0px) - var(--safe-bottom,0px));
    overflow:auto !important; -webkit-overflow-scrolling:touch;
  }
  #mobile-menu.open{ display:block !important; }

  /* 4) Dẹp sạch float/grid/inline-block cũ; mỗi mục 1 dòng */
  #mobile-menu, #mobile-menu *{ list-style:none !important; }
  #mobile-menu li, #mobile-menu li *{ float:none !important; }
  #mobile-menu li{
    display:block !important; width:auto !important;
    margin:0 !important; padding:0 !important; clear:both !important;
  }
  #mobile-menu a{
    display:flex !important; align-items:center; gap:10px;
    padding:12px 12px; border-radius:10px;
    color:#fff !important; font-weight:800;
    text-transform:uppercase; white-space:normal !important;
  }
  #mobile-menu a:hover{ background:#161624; }

  /* chiều cao header tối thiểu để nút không che chữ */
  .nav{min-height:60px}
}

/* Desktop: ẩn hamburger */
@media (min-width:992px){ #hamb{display:none !important} }

/* Khi menu mở: khóa scroll nền */
html.menu-open, body.menu-open{ overflow:hidden !important }