/* ============================================================================
   MOBILE MENU V2 — Thirsty Fox (prefix: menuv2)
   Overlay menu khi MỞ. Đóng thì giữ header live (Elementor).
   Theo Figma node 1342:1526 (base 430px). Đơn vị vw theo 430.
   ============================================================================ */

.menuv2,
.menuv2 *,
.menuv2 *::before,
.menuv2 *::after { box-sizing: border-box; }

.menuv2 {
  --mv2-blue: #003aae;
  --mv2-sans: "DM Sans", system-ui, sans-serif;
  --mv2-serif: "Playfair Display", Georgia, serif;

  position: fixed;
  left: 0; right: 0; top: 0;
  /* iOS Safari: dùng dvh (trừ URL bar động) -> bar KHÔNG nhảy. fallback vh. */
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(50px);
  /* trạng thái ĐÓNG: ẩn + fade */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
  overflow: hidden;             /* chỉ .menuv2__panel cuộn, không cuộn cả overlay */
}
/* trạng thái MỞ */
.menuv2.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .35s ease, transform .35s ease;
  z-index: 999999;
}

/* ---- header bar (logo + X): item flex CỐ ĐỊNH, KHÔNG cuộn -> iOS ko nhảy ---- */
.menuv2__bar {
  position: relative; z-index: 2;
  flex: 0 0 auto;                 /* không co, luôn ở trên cùng overlay */
  display: flex; align-items: center; justify-content: space-between;
  height: 21.6vw;                 /* 123/430 */
  padding: 0 6.65vw;              /* ~20px */
  background: #0b0b0d;
  border-radius: 0 0 5.1vw 5.1vw; /* 22px */
}
.menuv2__logo { display: flex; align-items: center; text-decoration: none; }
.menuv2__logo-img { height: 7.7vw; width: auto; display: block; }   /* logo 182x34 (cả text) */
.menuv2__close {
  width: 9.3vw; height: 9.3vw;    /* ~40px tap target */
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; padding: 0;
}
.menuv2__close svg { width: 5.6vw; height: 5.6vw; }

/* ---- panel (glass): CUỘN nội bộ (iOS + Android đều ok) ---- */
.menuv2__panel {
  position: relative;
  flex: 1 1 auto;               /* co + giãn trong overlay 100dvh */
  min-height: 0;                /* cho phép overflow trong flex */
  overflow-y: auto;             /* chỉ panel cuộn, bar đứng yên */
  -webkit-overflow-scrolling: touch;
  padding: 14.2vw 7vw 9vw;      /* lề 30px(7vw); top ~61px(14.2vw) cho menu */
  /* glass theo Figma: bg trắng 20% + blur 50px */
  background: rgba(255,255,255,0.20);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  margin-top: -14px;
}

/* ---- menu links: DM Sans Light 50px, đen, line-height 1.6 ---- */
.menuv2__nav { display: flex; flex-direction: column; }
.menuv2__nav a {
  font-family: var(--mv2-sans);
  font-weight: 300;
  font-size: 11.63vw;            /* 50/430 */
  line-height: 1.6;
  letter-spacing: -0.47vw;       /* -2px */
  color: #000;
  text-decoration: none;
  transition: color .25s ease;
}
.menuv2__nav a:hover { color: var(--mv2-blue); }

/* ---- line ---- */
.menuv2__line {
  border: 0; height: 1px; background: rgba(0,0,0,.55);
  margin: 13vw 0 7vw;
}

/* ---- footer block: Figma "Let's Talk!" trái (x12), contact phải (x199≈39%) ---- */
.menuv2__footer {
  display: grid;
  grid-template-columns: 46% 1fr;
  align-items: end;
  margin-top: 17vw;
}

/* "Let's Talk!" — Playfair 60px #003aae, xoay dọc */
.menuv2__talk {
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  width: 16vw;
  margin-left: -5px;
}
.menuv2__talk span {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: var(--mv2-serif);
  font-weight: 400;
  font-size: 14.06vw;            /* 60/430 */
  letter-spacing: -0.56vw;
  color: var(--mv2-blue);
  line-height: 1;
}

.menuv2__contact { font-family: var(--mv2-sans); }

/* social */
.menuv2__social { display: flex; gap: 6vw; margin-bottom: 4vw; }
.menuv2__social a { display: inline-grid; place-items: center; }
.menuv2__social img,
.menuv2__social svg { width: 7vw; height: 7vw; display: block; }

/* email/phone — DM Sans Bold 16px #003aae, email gạch chân */
.menuv2__email {
  display: block;
  font-weight: 700;
  font-size: 3.72vw;            /* 16/430 */
  line-height: 1.4;
  letter-spacing: -0.15vw;
  color: var(--mv2-blue);
  text-decoration: none;
  margin-bottom: 3.5vw;
}
.menuv2__email::first-line { text-decoration: underline; }

/* địa chỉ — DM Sans Light 16px đen */
.menuv2__addr {
  font-weight: 300;
  font-size: 3.72vw;
  line-height: 1.2;
  letter-spacing: -0.15vw;
  color: #000;
  margin: 0 0 3.5vw;
  text-decoration: none;
  display: block;
}
.menuv2__addr--link { text-decoration: underline; }

/* copyright — DM Sans Light 10px */
.menuv2__copy {
  font-weight: 300;
  font-size: 2.33vw;           /* 10/430 */
  line-height: 1.3;
  letter-spacing: -0.09vw;
  color: #000;
  margin: 4vw 0 0;
}

/* ============================================================ */
/* LIVE: ẩn dropdown menu MẶC ĐỊNH của Elementor (chỉ giữ nút    */
/* hamburger). Hamburger click -> mở menuv2 (xem JS).           */
/* Nút .elementor-menu-toggle VẪN HIỆN; chỉ ẩn panel xổ xuống.  */
/* ============================================================ */
.elementor-nav-menu--dropdown,
nav.elementor-nav-menu--dropdown,
.elementor-menu-toggle + .elementor-nav-menu__container,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
  display: none !important;
}

/* ---- nút mở demo (CHỈ trang HTML demo; live KHÔNG có nút này) ---- */
.menuv2-demo-open {
  position: fixed; top: 16px; right: 16px; z-index: 10;
  padding: 10px 16px; border: 0; border-radius: 999px;
  background: #0b0b0d; color: #fff; font: 600 14px/1 system-ui; cursor: pointer;
}

/* ============================================================ */
/* CHẶN BẬT TRÊN DESKTOP: menuv2 chỉ dùng ở mobile (nơi có       */
/* hamburger). Từ >=1024px ép ẩn hẳn (kể cả khi lỡ .is-open).   */
/* (Đổi 1024px nếu breakpoint hamburger của bạn khác.)          */
/* ============================================================ */
@media (min-width: 1024px) {
  .menuv2, .menuv2.is-open {
    display: none !important;
  }
}