/*==========================================================
  NAV MODERN — ใช้แทน meanmenu ทั้งหมด
  Breakpoint เดิมของเว็บ: max-width:1199px = โหมดมือถือ/hamburger
==========================================================*/
.navbar-area{ background:var(--whiteColor); position:relative; z-index:901;padding-top:15px; }
.nav-inner{ padding:14px 0; }
.nav-inner .logo img{ width:250px; height:auto; display:block; }

/* ---------- desktop menu (>=1200px) ---------- */
.main-nav-modern{ }
.main-nav-modern .nav-list{
  display:flex;
  align-items:center;
  list-style:none;
  margin:0; padding:0;
}
.main-nav-modern .nav-item{ position:relative; padding:15px 0; }
.main-nav-modern .nav-item > a{
  display:block;
  color:var(--blackColor);
  font-size:15px;
  font-weight:600;
  font-family:var(--fontFamily2);
  margin-left:14px;
  margin-right:14px;
  text-decoration:none;
  transition:0.3s;
}
.main-nav-modern .nav-item > a:hover,
.main-nav-modern .nav-item > a.active{ color:var(--mainColor); }
.main-nav-modern .nav-item .fa-angle-down{ font-size:12px; margin-left:0px; transition:transform .3s; }

.main-nav-modern .dropdown-menu{
  display:block; /* กัน bootstrap.min.css เซ็ต .dropdown-menu{display:none} ทับ ทำให้ hover แล้วไม่โชว์ */
  list-style:none;
  margin:0; padding:10px 0;
  position:absolute;
  left:0; top:100%;
  width:300px;
  background:var(--whiteColor);
  border:none;
  border-radius:0;
  box-shadow:0px 0px 15px 0px rgba(0,0,0,0.1);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .3s ease;
  z-index:99;
}
.main-nav-modern .nav-item:hover > .dropdown-menu,
.main-nav-modern .nav-item.open > .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.main-nav-modern .dropdown-menu li a{
  display:block;
  padding:7px 20px;
  color:var(--blackColor);
  font-size:15px;
  text-decoration:none;
  transition:0.2s;
}
.main-nav-modern .dropdown-menu li a:hover{
  color:var(--mainColor);
  padding-left:20px;
}

/* hamburger button — ซ่อนบน desktop */
.hamburger{
  display:none;
  width:32px; height:24px;
  border:none; background:transparent;
  padding:0; cursor:pointer;
  position:relative;
  z-index:1100;
}
.hamburger span{
  display:block;
  width:100%; height:3px;
  background:var(--blackColor);
  border-radius:3px;
  position:absolute; left:0;
  transition:transform .3s ease, opacity .3s ease, background .3s ease;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:10px; }
.hamburger span:nth-child(3){ top:20px; }
.hamburger.active span{ background:var(--blackColor); }
.hamburger.active span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }

.nav-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  z-index:900;
  opacity:0;
  transition:opacity .3s ease;
}
.nav-overlay.active{ display:block; opacity:1; }

/* ---------- mobile menu (<=1199px) ---------- */
@media only screen and (max-width:1199px){
  .nav-inner .logo img{ width:190px; }

  .hamburger{ display:block; }

  .main-nav-modern{
    position:fixed;
    top:0; right:0;
    width:300px;
    max-width:82vw;
    height:100vh;
    background:var(--whiteColor);
    box-shadow:-4px 0 20px rgba(0,0,0,.15);
    transform:translateX(100%);
    transition:transform .35s ease;
    z-index:1000;
    overflow-y:auto;
    padding:80px 0 30px;
  }
  .main-nav-modern.active{ transform:translateX(0); }

  .main-nav-modern .nav-list{ display:block; }
  .main-nav-modern .nav-item{ padding:0; border-bottom:1px solid #eef1f6; }
  .main-nav-modern .nav-item > a{
    margin:0;
    padding:14px 24px;
    font-size:15px;
  }
  .main-nav-modern .nav-item.has-dropdown > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .main-nav-modern .dropdown-menu{
    position:static;
    width:100%;
    opacity:1; visibility:visible; transform:none;
    box-shadow:none;
    display:none;
    background:#f9faff;
    padding:0;
  }
  .main-nav-modern .nav-item.open > .dropdown-menu{ display:block; }
  .main-nav-modern .dropdown-menu li a{ padding:12px 40px; font-size:14px; }

  .main-nav-modern .nav-item.has-dropdown .fa-angle-down{
    transition:transform .3s ease;
  }
  .main-nav-modern .nav-item.open.has-dropdown .fa-angle-down{
    transform:rotate(180deg);
  }

  body.nav-open{ overflow:hidden; }
}