/* ══════════════════════════════════════════════
   VFoods — Shared Global Navigation (used by every page)
   Self-contained + namespaced (.vn-*) so it renders
   identically regardless of each page's own theme.
   ══════════════════════════════════════════════ */
/* hide any legacy per-page nav instantly (no flash before nav.js swaps it) */
#g-nav, #navbar, .site-header, #nav-mobile { display:none !important; }

/* ฟอนต์เมนู = ฟอนต์กลางของเว็บ (ประกาศที่ fonts.css) */
.vn, .vn *, .vn-mobile, .vn-mobile * {
  font-family:'DB HelvethaicaMon X','FC Vision Rounded','Sarabun',sans-serif !important;
}

.vn {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:0 48px; height:88px; box-sizing:border-box;
  background:#E45F06;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--vf-font,'Sarabun',sans-serif);
  transition:background .3s, box-shadow .3s;
}
.vn.scrolled { box-shadow:0 2px 24px rgba(0,0,0,.22); }

.vn-brand { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.vn-logo { height:52px; width:auto; display:block; }

.vn-links { display:flex; gap:5px; align-items:center; flex-wrap:nowrap; }
.vn-links > a, .vn-parent {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 17px; border-radius:11px;
  font-family:var(--vf-font,'Sarabun',sans-serif); font-size:.94rem; font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; white-space:nowrap;
  color:rgba(255,255,255,.92); text-decoration:none; cursor:pointer;
  transition:background .25s, color .25s;
}
.vn-links > a:hover, .vn-links > a.vn-active,
.vn-parent:hover, .vn-parent.vn-active { background:rgba(255,255,255,.18); color:#fff; }

.vn-item { position:relative; height:88px; display:flex; align-items:center; }
.vn-caret { font-size:.55rem; opacity:.75; transition:transform .3s ease; }
.vn-item:hover .vn-caret { transform:rotate(180deg); }

.vn-dd {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(12px);
  background:#D05E00; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16); border-radius:16px;
  padding:10px; margin-top:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  display:grid; grid-template-columns:1fr; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .26s ease, transform .26s cubic-bezier(.23,1,.32,1);
  z-index:901;
}
.vn-dd:not(.vn-mega):not(.vn-mega3) { min-width:220px; }
.vn-dd.vn-mega  { grid-template-columns:1fr 1fr; min-width:440px; }
.vn-dd.vn-mega3 { grid-template-columns:1fr 1fr 1fr; min-width:420px; }
.vn-dd::before { content:''; position:absolute; top:-14px; left:0; right:0; height:16px; }
.vn-item:hover .vn-dd {
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.vn-dd a {
  display:flex; align-items:center; gap:9px;
  padding:11px 16px; border-radius:11px;
  font-family:var(--vf-font,'Sarabun',sans-serif); font-size:.95rem; font-weight:500;
  text-transform:none; letter-spacing:0; text-decoration:none;
  color:rgba(255,255,255,.9); white-space:nowrap;
  transition:background .18s, color .18s, transform .18s;
}
.vn-dd a:hover { background:rgba(255,255,255,.16); color:#fff; transform:translateX(3px); }

.vn-search {
  display:flex; align-items:center; gap:4px; flex-shrink:0;
  background:#fff; border-radius:50px; padding:5px 6px 5px 16px;
  box-shadow:0 3px 14px rgba(0,0,0,.14);
}
.vn-search input {
  border:none; outline:none; background:transparent;
  font-family:var(--vf-font,'Sarabun',sans-serif); font-size:.9rem; color:#3a1800; width:150px;
}
.vn-search input::placeholder { color:rgba(58,24,0,.45); }
.vn-search button {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border:none; border-radius:50%;
  background:#F07800; color:#fff; cursor:pointer; flex-shrink:0;
  transition:background .2s, transform .2s;
}
.vn-search button:hover { background:#D05E00; transform:scale(1.06); }

.vn-burger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; background:none; border:none; }
.vn-burger span { display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .3s; }
.vn-burger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.vn-burger.open span:nth-child(2) { opacity:0; }
.vn-burger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

.vn-mobile { display:none; }

@media(max-width:1080px) {
  .vn-links > a, .vn-parent { font-size:.84rem; padding:10px 12px; }
  .vn-search input { width:110px; }
  .vn { padding:0 24px; gap:14px; }
}
@media(max-width:900px) {
  .vn { padding:0 20px; height:74px; }
  .vn-item { height:74px; }
  .vn-links, .vn-search { display:none; }
  .vn-burger { display:flex; }
  .vn-mobile {
    display:block; position:fixed; top:74px; left:0; right:0; z-index:899;
    background:#D05E00; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.15);
    max-height:0; overflow:hidden; transition:max-height .4s ease;
  }
  .vn-mobile.open { max-height:70vh; overflow-y:auto; }
  .vn-mobile a {
    display:block; padding:14px 24px;
    font-family:var(--vf-font,'Sarabun',sans-serif); font-size:.9rem; font-weight:600; text-transform:uppercase;
    letter-spacing:.03em; color:rgba(255,255,255,.9); text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.1);
    transition:background .2s;
  }
  .vn-mobile a:hover, .vn-mobile a.vn-active { background:rgba(255,255,255,.12); color:#fff; }
  .vn-mobile a.vn-sub { padding-left:40px; font-weight:500; text-transform:none; letter-spacing:.01em; opacity:.9; }
  .vn-mobile a.vn-sub::before { content:'↳ '; opacity:.6; }
}