/* =========================================================
   DogThailand Pet Friendly Shared Menu CSS
   Source: pet-friendly-thailand.html menu styles
   Use with: /pet-friendly-menu.html + /pet-friendly-menu.js
   ========================================================= */

.w1180 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
.nav-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 18px 20px;
}

.main-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font-family:'Noto Sans Thai', system-ui, Tahoma, sans-serif;
  flex-wrap: wrap;
}

.main-menu a{
  text-decoration:none !important;
  color:#222;
}

.main-menu a:hover{
  text-decoration:none !important;
  color:#EE0819;
}
#um {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}
.menu-item {
  position: relative;
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  padding: 0;
  line-height: 44px;
}
.menu-item:hover .dropdown.level-1 {
  display: block;
}
.dropdown {
  display: none;
  position: absolute;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  white-space: nowrap;
  padding: 6px 0;
  z-index: 999;
  min-height: 100%;
}
.dropdown.level-1 {
  top: 100%;
  left: 0;
  width: 220px;
}
.dropdown.level-2 {
  top: 0;
  left: 100%;
}
.dropdown.level-3 {
  top: 0;
  left: calc(100% + 1px);
}
.dropdown.level-2,
.dropdown.level-3 {
  width: 220px;
}
.dropdown-item {
  position: relative;
  padding: 6px 16px;
  line-height: 1.4;
  font-size: 15px;
  font-weight: 400;
  transition: background 0.2s;
}
.dropdown-item:hover {
  background: #f0f0f0;
}
.dropdown-item:hover > .dropdown {
  display: block;
}
.dropdown.level-3 a {
  display: block;
  padding: 6px 16px;
  font-size: 15px;
  line-height: 1.4;
  color: #333;
  text-decoration: none;
}
.dropdown.level-3 a:hover {
  background: #f0f0f0;
  color: #000;
}
.menu-item .arrow {
  display: inline-block;
  margin-left: 4px;
  transform: rotate(45deg) translateY(-1px);
  vertical-align: middle !important;
  transition: transform 0.3s ease;
  border: solid #333;
  border-width: 0 1.5px 1.5px 0;
  padding: 3px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.menu-item:hover {
  color: #EE0819;
}
.menu-item:hover .arrow {
  transform: rotate(-135deg);
  border-color: #EE0819;
}
.region-item {
  position: relative;
  padding-right: 30px;
  font-size: 15px;
  margin-bottom: 2px;
}
.arrow-right {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 6px;
  height: 6px;
  border: solid #333;
  border-width: 0 2px 2px 0;
  display: inline-block;
}
.region-item:hover > .arrow-right,
.region-item.active > .arrow-right {
  border-color: #d11b1b;
}
.menu-item.no-arrow a:hover {
  color: red;
}
	/* แก้ความห่างเมนูหมาพักได้ทั่วไทย */
.menu-main-stay{
  margin-left:16px;
}
	/* แก้ความห่างเมนูบทความสัตว์เลี้ยง */	
	.menu-main-box{
  margin-left:-20px;
}
	
/* ซ่อนบนมือถือ */
@media screen and (max-width:768px){
  .nav-wrapper{
    display:none !important;
  }
}

@media screen and (max-width: 768px){

  .dt-mobile-topbar{
    display:grid;
    grid-template-columns:42px 1fr 42px;
    align-items:center;
    height:52px;
    padding:0 12px;
    background:#fff;
    border-bottom:1px solid #eee;
    position:relative;
    z-index:1001;
    box-sizing:border-box;
  }

  .dt-menu-toggle{
    position:static;
    width:48px;
    height:48px;
    border:0;
    background:transparent;
    font-size:38px;
    line-height:1;
    color:#333;
    cursor:pointer;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    justify-self:start;
  }

  .dt-mobile-logo{
    text-align:center;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }

  .dt-mobile-logo a{
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
  }

  .dt-mobile-logo img{
    display:block;
    margin:0;
    max-height:28px;
    width:auto;
  }

  .dt-mobile-topbar::after{
    content:"";
    display:block;
    width:42px;
    height:42px;
    justify-self:end;
  }

  .dt-mobile-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:all .25s ease;
    z-index:1098;
  }

  .dt-mobile-overlay.active{
    opacity:1;
    visibility:visible;
  }

  .dt-mobile-drawer{
    position:fixed;
    top:0;
    left:0;
    width:82%;
    max-width:340px;
    height:100%;
    background:#fff;
    box-shadow:4px 0 18px rgba(0,0,0,.16);
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:1099;
    overflow-y:auto;
  }

  .dt-mobile-drawer.active{
    transform:translateX(0);
  }

  .dt-mobile-drawer-head{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 18px;
    border-bottom:1px solid #eee;
  }

  .dt-mobile-close{
    border:0;
    background:none;
    font-size:42px;
    line-height:1;
    color:#333;
    cursor:pointer;
    padding:0;
  }

  .dt-mobile-title{
    font-size:18px;
    font-weight:700;
    padding:14px 18px 6px;
    color:#444;
  }

  .dt-mobile-menu-list{
    padding:8px 0;
  }

  .dt-mobile-menu-link{
    display:block;
    padding:12px 14px;
    text-decoration:none;
    font-size:16px;
    font-weight:500;
    color:#333 !important;
    border-bottom:1px solid #ededed;
    transition:background .15s ease;
  }

  .dt-mobile-menu-link:active{
    background:#f2f2f2;
  }
}

/* ✅ ซ่อนบน PC */
@media screen and (min-width: 769px){
  .dt-mobile-topbar,
  .dt-mobile-overlay,
  .dt-mobile-drawer{
    display:none !important;
  }
}

.dt-mobile-menu-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  border:0;
  background:#fff;
  border-bottom:1px solid #ededed;
font-family:'Noto Sans Thai', system-ui, Tahoma, sans-serif;
  font-size:16px;
  font-weight:600;
  color:#333;
  text-align:left;
  cursor:pointer;
}

.dt-mobile-menu-toggle:active{
  background:#f2f2f2;
}

.dt-mobile-arrow{
  font-size:14px;
  color:#666;
  transition:transform .2s ease;
}

.dt-mobile-menu-toggle.active .dt-mobile-arrow{
  transform:rotate(180deg);
}

.dt-mobile-submenu{
  display:none;
  background:#fafafa;
  border-bottom:1px solid #ededed;
}

.dt-mobile-submenu-link{
  display:block;
  padding:10px 18px 10px 32px;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  color:#333 !important;
  border-top:1px solid #f1f1f1;
}

.dt-mobile-submenu-link:active{
  background:#f2f2f2;
}

.menu-scroll {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 12px 12px;
  background: #ffffff;
  border-radius: 12px;
  margin: 12px 12px 4px 12px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.scroll-menu-item {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #222;
  font-size: 14px;
  width: 60px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.scroll-menu-item img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #edf7fc;
  padding: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.scroll-menu-item span {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 14px;
  color: #222;
  font-weight: 500;
  line-height: 1.3;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}

.scroll-menu-item:hover span,
.scroll-menu-item:active span {
  color: #ff4081;
}

@media screen and (min-width: 769px){
  .menu-scroll{
    display:none !important;
  }
}
	.menu-scroll img{
  max-width:none;
}
	
	.menu-scroll span{
  margin-top:6px;
  text-align:center;
  line-height:1.2;

  display:-webkit-box;
  -webkit-line-clamp:2;   /* จำกัด 2 บรรทัด */
  -webkit-box-orient:vertical;
  overflow:hidden;

  font-size:13px;
}