/** Shopify CDN: Minification failed

Line 2115:0 Unexpected "<"
Line 2164:0 Unexpected "<"
Line 2242:0 Unexpected "<"
Line 2399:0 Unexpected "}"
Line 2413:0 Unexpected "<"
Line 3021:0 Unexpected "<"
Line 3173:0 Unexpected "<"
Line 3301:3 Unexpected "<"
Line 3385:1 Unexpected "<"
Line 4873:0 Unexpected "<"

**/


/* ซ่อนออกจากการ์ด Product หน้าแรก เพราะแนวคิดเปลี่ยน หน้าแรกทำ marktering อย่างเดียว */

.marketing-hide{
    display:none!important;
}
#tourOperatorSection{
  display:none!important;
}

#packageSelectorSection{
    display:none!important;
}
#reviewPreviewSection{
    display:none!important;
}
/* จบโค้ดที่ซ่อน ด้านบน */



.hero-title{
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:800;
    line-height:1.1;
    margin-bottom:16px;
}

.hero-hook{
    font-size:clamp(1.2rem,2.2vw,1.6rem);
    font-weight:700;
    color:#2563eb;
    line-height:1.5;
    margin-bottom:10px;
}
.hero-subtitle{
    font-size:1.1rem;
    color:#666;
    line-height:1.7;
    max-width:700px;
}

.site-notice{
    background:#fff8e1;
    border:1px solid #ffe082;
    color:#7a5b00;
    padding:14px 18px;
    border-radius:10px;
    margin-bottom:24px;
    text-align:left;
    font-size:14px;
    line-height:1.6;
}

.site-notice strong{
    display:block;
    font-size:16px;
    margin-bottom:6px;
}

.site-notice p{
    margin:0;
}

.company-license{
    margin-top:18px;
    font-size:13px;
    color:#666;
    line-height:1.6;
}

.company-license{
    margin-top:18px;
    font-size:13px;
    color:#777;
    line-height:1.6;
}

.home-booking-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
    text-decoration:none;
}

.booking-title{
    font-size:18px;
    font-weight:700;
    color:#fff;
    line-height:1.2;
}

.booking-subtitle{
    font-size:13px;
    font-weight:500;
    color:rgba(255,255,255,.88);
    line-height:1.2;
}

.booking-hint{
    margin-top:10px;
    text-align:center;
    font-size:13px;
    font-weight:500;
    color:#6b7280;
    letter-spacing:.2px;
}

.booking-hint::before{
    content:"✓ ";
    color:#16a34a;
    font-weight:700;
}


.annual-visitors{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:center;
    margin-top:10px;
    margin-bottom:18px;

    font-size:13px;
    font-weight:600;
    color:#4b5563;
}

.annual-visitors-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:24px;
    height:24px;

    border-radius:50%;
    background:#eef6ff;
}
.best-for-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;

    margin:14px 0 18px;
}

.best-for-label{
    font-size:13px;
    font-weight:700;
    color:#374151;
}

.best-for-tag{

    display:inline-flex;
    align-items:center;

    padding:5px 12px;

    border-radius:999px;

    background:#eef7ff;
    color:#2563eb;

    font-size:12px;
    font-weight:700;
}
.featured-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
   
   flex-wrap:wrap;

}

.product-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
z-index:999;
    padding:6px 12px;

    border-radius:999px;


    background:#ff6a00;
    color:#fff;

    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}
.featured-image-wrap{
    position:relative;
}



.in-fbapp #mustDoDesc,
.in-lineapp #mustDoDesc{
    font-size:14px;
}
.in-fbapp .owner-text p,
.in-lineapp .owner-text p{
    font-size:12px;
}

.in-fbapp .owner-text h3,
.in-lineapp .owner-text h3{
    font-size:20px;
}

.leaflet-popup-content{
    margin:14px !important;
}
.leaflet-popup-content div[style*="font-weight:700"]{
      color:#4b5563!important;
      font-size:14px!important;
}
.leaflet-popup-content hr{
    border:none;
    border-top:1px solid #ececec;
    margin:18px 0;
}

.leaflet-popup-content img{
    display:block;
    width:45%!important;
  height:80px!important;
    border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.12);
    transition:.25s;
        object-position: top!important;
}

.leaflet-popup-content img:hover{
    transform:scale(1.03);
}

.leaflet-popup-content button{
    background:none !important;
    border:none !important;
    padding:0;
    color:#2563eb;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.leaflet-popup-content button:hover{
    color:#1d4ed8;
    text-decoration:underline;
}

.leaflet-popup-content div[style*="font-weight:700"]{
    font-size:17px;
    line-height:1.35;
    color:#222;
    margin-bottom:12px !important;
}

.leaflet-popup-content-wrapper{
    border-radius:18px;
    box-shadow:0 12px 40px rgba(0,0,0,.18);
}

.leaflet-popup-tip{
    box-shadow:0 6px 20px rgba(0,0,0,.15);
}


.partner-mini{

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-top:14px;

    padding:10px 14px;

    border:1px solid #D1FAE5;
    border-radius:12px;

    background:#F8FFFA;

}

.partner-mini-logo{

    width:34px;
    height:34px;

    border-radius:8px;

    object-fit:cover;

    flex-shrink:0;

}

.partner-mini-text{

    flex:1;

    line-height:1.2;

}

.partner-mini-label{

    display:block;

    font-size:11px;

    color:#6B7280;

}

.partner-mini-name{

    display:block;

    font-size:14px;

    font-weight:700;

    color:#111827;

}

.partner-mini-badge{

    display:flex;

    align-items:center;

    gap:4px;

    font-size:12px;

    font-weight:600;

    color:#15803D;

    white-space:nowrap;

}





.featured-card-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.video-wrap{
    position: relative;
}

.video-sound-btn{
    position: absolute;
    top: 3%;
    left: 10px;

    z-index: 999999;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;

    background: rgba(0,0,0,.65);

    color: #fff;
    font-size: 20px;

    cursor: pointer;
}

.heading-city{
    font-size: 28px!important;
    font-weight: 700;
    color: #2563eb;
        text-decoration: underline;
}


.hero-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:10px 18px;
    margin-top:15px;
    font-size:15px;
    font-weight:600;
}

.hero-benefits span{
    display:flex;
    align-items:center;
    gap:6px;
    color:#333;
}


.featured-swiper{
    width:100%;
    height:100%;
    overflow:hidden;
}

.featured-swiper .swiper-wrapper{
    display:flex;
}

.featured-swiper .swiper-slide{
    flex-shrink:0;
    width:100%;
}

.featured-card-image{
    width:100%;
    display:block;
    object-fit:cover;
}

.featured-swiper .swiper-pagination{
    bottom:12px !important;
}
.featured-swiper .swiper-button-next,
.featured-swiper .swiper-button-prev{
    color:#fff;
    width:36px;
    height:36px;
    background:rgba(0,0,0,.35);
    border-radius:50%;
}

.featured-swiper .swiper-button-next::after,
.featured-swiper .swiper-button-prev::after{
    font-size:16px;
    font-weight:bold;
}

.swiper-slide{
    position: relative;
}

.image-caption{
    position:absolute;
    top:5%;
    right: 16px;

    padding:8px 14px;

    color:#fff;
    font-size:15px;
    font-weight:600;

    background:rgba(0,0,0,.45);
    border-radius:20px;

    z-index:20;
}



/* กล่องทั้งหมด */
.contact-float{
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
}
.contact-overlay{
    position: fixed;
    inset: 0;

   background: transparent;

    opacity: 0;
    visibility: hidden;

    transition: .25s;

    z-index: 9998;
}

.contact-overlay.show{
    opacity: 1;
    visibility: visible;
}


/* เมนู */
.contact-menu{
    position: absolute;
    right: 0;
    bottom: 70px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: .25s;
}

/* เปิดเมนู */
.contact-menu.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ปุ่มแต่ละอัน */
.contact-float-btn{
    display: flex;
    align-items: center;
    justify-content: center;

   width: 150px;
    height: 52px;

    border-radius: 20px;
    background: white;

    color: #2c2c2c;

    text-decoration: none;
    font-weight: 600;
border: 1px solid rgba(0,0,0,.06);
box-shadow:
    0 8px 20px rgba(0,0,0,.15),
    0 20px 40px rgba(0,0,0,.12);

    transition: .2s;
}

.contact-float-btn img{
    width: 26px;
    height: 26px;
}

.contact-float-btn:hover{
    transform: scale(1.08);
}

/* ปุ่มหลัก */
.contact-toggle{
    width: 50px;
    height: 50px;

    border: none;
    border-radius: 50%;

    background: #25D366;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 6px 20px rgba(0,0,0,.25);

    cursor: pointer;
}

.contact-toggle img{
    width: 32px;
    height: 32px;
}

.whatsapp-float{
    position:fixed;
    right:20px;
    bottom:10%;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 8px 25px rgba(0,0,0,.25);
    z-index:999;
    transition:.25s;
}
/* Mobile */
@media (max-width: 768px){
    .whatsapp-float{
        bottom: 5px;
            right:5px;
    }
}
.whatsapp-float img{
    width:32px;
    height:32px;
}

/* ซ่อน */
.whatsapp-float.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(15px);
}


.buttonintro {
  transition: opacity 120ms ease;
}

.buttonintro:active {
  transform: scale(0.96);
  opacity: 0.7;
}


  /*        CSS fix in facebook browser app                    */
.in-fbapp .floating-home .brand-title,
.in-fbapp .floating-home .brand-subtitle {
  font-size: 0.8em;
}
.in-fbapp {
  font-size: 80%;
    font-size: 0.8em;
}
.in-fbapp .pagination button,
.in-fbapp .pagination span {
  font-size: 0.7em;
}
.in-fbapp h1,
.in-fbapp h2,
.in-fbapp h3,
.in-fbapp p,
.in-fbapp button,
.in-fbapp span {
  font-size: 0.88em;
}
.in-fbapp #pageInfo {
  font-size: 0.8em;
}
.in-fbapp .hero-overlay h1 {
  font-size: 1.6em;
}

.in-fbapp .hero-overlay p {
  font-size: 0.9em;
}

.in-fbapp .service-hero h2 {
  font-size: 1.3em;
}

.in-fbapp .service-hero p {
  font-size: 0.9em;
}


.in-fbapp .view-map-btn {
  font-size: 0.8em;
}
.in-fbapp .cta-btn  {
  font-size: 0.9em;
}



  /*        CSS fix in Line app                    */
.in-lineapp .floating-home .brand-title,
.in-lineapp .floating-home .brand-subtitle {
  font-size: 0.8em;
}
.in-lineapp {
  font-size: 80%;
    font-size: 0.8em;
}
.in-lineapp .pagination button,
.in-lineapp .pagination span {
  font-size: 0.7em;
}
.in-lineapp h1,
.in-lineapp h2,
.in-lineapp h3,
.in-lineapp p,
.in-lineapp button,
.in-lineapp span {
  font-size: 0.88em;
}
.in-lineapp #pageInfo {
  font-size: 0.8em;
}
.in-lineapp .hero-overlay h1 {
  font-size: 1.6em;
}

.in-lineapp .hero-overlay p {
  font-size: 0.9em;
}

.in-lineapp .service-hero h2 {
  font-size: 1.3em;
}

.in-lineapp .service-hero p {
  font-size: 0.9em;
}


.in-lineapp .view-map-btn {
  font-size: 0.8em;
}
.in-lineapp .cta-btn  {
  font-size: 0.9em;
}


  .my-location-btn {
  position: absolute;
  right: 16px;
  bottom: 180px; /* ใต้ zoom */
  width: 44px;
  height: 44px;

  border-radius: 50%;
  border: none;

  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);

  font-size: 18px;
  cursor: pointer;
  z-index: 9999;
}

/* ขยับปุ่ม zoom + - ในคอมให้ตำแหน่งสูงขึ้น    */

/* desktop */
@media (min-width: 1024px) {

  .my-location-btn  {
    position: absolute;
    bottom: 170px !important;
  }

  .city-reset-btn {
    position: absolute;
    bottom: 225px !important;
  }

  .leaflet-control-zoom {
    margin-top: -100px !important;
  }

}
  .close-menu-btn {

  position: absolute;
  top: 14px;
  right: 14px;

  width: 38px;
  height: 38px;

  border: none;
  border-radius: 999px;

  background: #f3f4f6;

  font-size: 18px;
  font-weight: 700;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);

  transition: 0.2s;
}

.close-menu-btn:hover {
  background: #e5e7eb;
}
  
.leaflet-top.leaflet-right {
  top: 40%;
  transform: translateY(-50%);
  margin-top: 0;
}
.city-btn {
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.city-menu {
  display: none;

  margin-top: 10px;
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.18);

     z-index:999999;
  position: fixed;

  left: 16px;
  right: 16px;
  width: auto;

  max-height: 70vh;
  overflow-y: auto;

  padding: 8px;
  box-sizing: border-box;

  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 6px;
}
@media (min-width: 992px){

  .city-menu{
    left: 50%;
    right: auto;

    transform: translateX(-50%);

    width: 1000px;
    max-width: 90vw;

    grid-template-columns: repeat(4,1fr);
  }

}

.city-menu div {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 600;
}

.city-menu div:hover {
  background: #f3f4f6;
}




.city-selector button {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background: #2563eb;
  color: white;
  font-weight: 600;
  cursor: pointer;
  display: block;

}


.city-selector {
  position: absolute;
  top: 75px;
  left: 16px;

   z-index: 995000;

}

.city-selector select {
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  font-weight: 600;
}
/* =========================
   RESET
========================= */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  font-family: Arial, sans-serif;
  background: #fff;
  scroll-behavior: smooth;
}

/* =========================
   MAP FULLSCREEN
========================= */

body.map-fullscreen {
  width: 100%;
  min-height: 100%;

    margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  overflow-x: hidden;
  background: #fff;
} 
/* =========================
   HIDE SHOPIFY HEADER
========================= 

header,
.top-header,
.site-header,
.navbar,
.elementor-location-header,
.elementor-sticky,
.elementor-nav-menu,
.ast-header-break-point,
.ast-primary-header-bar,
#shopify-section-header,
.shopify-section-group-header-group,
.header-wrapper,
.header,
announcement-bar {

  display: none !important;
}
*/
/* =========================
   HIDE HEADER
========================= 

header,
.top-header,
.site-header,
.navbar,
.elementor-location-header,
.elementor-sticky,
.elementor-nav-menu,
.ast-primary-header-bar,
#shopify-section-header {
  display: none !important;
}
*/
/* =========================
   MAP HERO
========================= */

.map-hero{
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;

    z-index: 99999;

    background: white;

   transform:translateX(-100%);
    transition: transform .35s ease;

    overflow: hidden;
}

.map-hero.open{
    transform: translateY(0);
}

/* desktop */
@media (min-width:1024px){
    .map-hero{
        height:100dvh;
    }
}
#map {
  position: absolute;
  inset: 0;  

  width: 100%;
  height: 100%;
  z-index: 1;
}



@media (max-width:768px){

html{
    scroll-behavior:smooth;
    scroll-snap-type:y mandatory;
}

body{
    scroll-snap-type:y mandatory;
}

/*

.section-intro,
.map-hero,
#cards-section{
    scroll-snap-align:start;
    scroll-snap-stop:always;
}
*/
}
/* =========================
   HOME BRAND
========================= */

.floating-home {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100001;
  text-align: center;
  text-decoration: none;
}

.brand-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FFFFFF;
}

.brand-subtitle {
  margin-top: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #F5F7FA;
  opacity: 0.95;
}

/* =========================
   BOTTOM UI
========================= */

.bottom-ui{
    position:fixed;
    left:0;
    right:0;
    bottom:80px;

    z-index:1000;
}
.bottom-ui2{
    pointer-events: none;
    position:fixed;
    left:0;
    right:0;
    bottom:70px;

    z-index:1000;

    display: flex;
    flex-wrap: nowrap;
    gap: 10px;

   overflow: visible;
   

    padding: 0 16px;

    -webkit-overflow-scrolling: touch; /* iPhone เลื่อนลื่น */
    scroll-behavior: smooth;
}
.bottom-ui2 button,
.bottom-ui2 a,
.bottom-ui2 input,
.bottom-ui2 .explore-scroll,
.bottom-ui2 .city-selector{
    pointer-events: auto;
}
.explore-scroll{
    display:flex;
       align-items:flex-start;   /* เพิ่มบรรทัดนี้ */
    gap:10px;
    overflow-x:auto;
    padding:10px 16px; /* เผื่อพื้นที่ให้เงา */
}
.nearby-btn{
    position:absolute;
    left:20px;
}

.toggle-btn{
    position:absolute;
    right:20px;
}


.menu-content {

  display: none;

  position: fixed;

  left: 50%;
  bottom: 110px;

  transform: translateX(-50%);

  width: min(92vw, 760px);

  max-height: 70vh;

  overflow-y: auto;

  padding: 20px;

  border-radius: 28px;

  background: rgba(255,255,255,0.96);

  box-shadow: 0 20px 60px rgba(0,0,0,0.22);

  z-index: 100002;

  backdrop-filter: blur(18px);

  -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {

  .menu-content {

    width: 92vw;

    bottom: 90px;

    padding: 18px;

    border-radius: 24px;
  }

}

.menu-content::after {
  content: "";
  position: sticky;
  bottom: 0;
  height: 50px;
  width: 100%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255,255,255,0.96), transparent);
}
.scroll-btn {
  order: 3; /* 👈 บังคับให้ไปล่างสุด */
}
/* BUTTONS */

.toggle-btn {
  background: rgba(255,255,255,0.92);
  padding: 7px 11px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.16);
   cursor: pointer;
  display: flex;  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;  width:80px;       /* หรือค่าที่ต้องการ */
    min-height:70px;
    gap : 5px;
    border-radius : 15px;
}

.scroll-btn {
  margin-top: 10px;
  background: rgba(255,255,255,0.92);
  padding: 12px 20px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

}.scrollup-btn {
  margin-top: 10px;
  background: rgba(255,255,255,0.92);
  padding: 12px 20px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;

}
.icon3 {
  font-size: 16px;
  line-height: 1;
}

.text3 {
  font-size: 12px;
  font-weight: 600;
}
/* MENU */



.filter-btn {
  width: 100%;
  padding: 12px;
  margin-top: 8px;
  border-radius: 14px;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  font-weight: 600;
}

.filter-btn:hover {
  background: #e5e7eb;
}

/* =========================
   CARDS SECTION
========================= */

#cards-section {
  position: relative;
  z-index: 5;
  background: #f8fafc;
  padding: 10px 10px 120px;
}






.card-top {
width : 100%;
}
.card-subtitle {
  margin-top: 8px;
  color: #666;  margin: 0;
  line-height: 1.2;
  
}
.card-subtitle .text {
  display: -webkit-box;
 
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4em;
}




.card-info-row{   width: 100%;
}

.card-price {
      text-align:right;
  font-size: 20px;
  font-weight: 700;
}

/* DISTANCE */

.distance-text {
  margin-top: 16px;
  color: #2563eb;
  font-weight: 400;
}

/* CTA (NEW) */

.cta-btn {

  margin-top: 12px;
  width: 100%;
  padding: 12px 14px;

  border: none;
  border-radius: 14px;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: white;

  font-weight: 700;
  font-size: 14px;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);

  transition: all 0.2s ease;
}

/* BACK BUTTON (FIXED - missing before) */

.back-to-map-btn {

  top: 10px;
  z-index: 20;
  display: block;
  margin: 0 auto 20px;
  padding: 14px 20px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.92);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 35px rgba(0,0,0,0.12);
}

/* MOBILE */

@media (max-width: 768px) {
  .brand-title { font-size: 20px; }

}


.explore-title {
  font-size: 22px;
  font-weight: 700;
  color: #111;
}

.explore-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: rgba(0,0,0,0.5);
}
.explore-grid {

  display: flex;
  flex-wrap: wrap;
 justify-content: center;
  gap: 10px;

  margin-top: 18px;
}


.vibe-title {
  margin-top: 24px;
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

.vibe-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.vibe-pill {

}
.explore-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    width:80px;
  height:90px;   /* เพิ่มตรงนี้ */
    background:none;
    border:none;
    padding:0;
    margin:0;

    box-shadow:none;

    appearance:none;
    -webkit-appearance:none;

    cursor:pointer;
}


.icon-circle{
    width:48px;
    height:48px;
    flex-shrink:0;      /* ⭐ เพิ่มบรรทัดนี้ */
    border-radius:50%;
    background:#F5F7FB;
    font-size:18px;

    display:flex;
    justify-content:center;
    align-items:center;

    transition:.25s;
}
.icon-circle i{
    color:#596273;
}

.explore-card.active .icon-circle{
    background:#596273;
}

.explore-card.active .icon-circle i{
    color:#fff;
}

.explore-label{
    margin-top:10px;
    font-size:14px;
    font-weight:400;
    color:#444;
    text-align:center;
}
.icon-circle:hover{
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}


.explore-card:hover{
    transform:none;
    box-shadow:none;
}
.explore-card.active .icon-circle{
    background:#3772FF;
}

.explore-card.active .icon-circle i{
    color:#fff;
}
.explore-card:hover .icon-circle{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}






.menu-overlay {
  position: fixed;
  inset: 0;

  z-index: 9500;

  display: none;

  background: transparent;

  pointer-events: auto;
}
/* DESKTOP PANEL */

@media (min-width: 1024px) {

  .menu-content {

    width: 720px;

    padding: 28px;

    border-radius: 32px;

  }
}
@media (min-width: 1024px) {

  .explore-grid {
    justify-content: center;
    gap: 12px;
  }

  .explore-card {
    padding: 8px 14px;
    border-radius: 999px;
  }

  .explore-card .emoji {
    font-size: 16px;
  }

  .explore-card .label {
    font-size: 13px;
  }
}

  .vibe-grid {
 display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  }

  .vibe-pill {

    font-size: 14px;

    padding: 12px 18px;
  }

  .explore-title {

    font-size: 32px;
  }

  .explore-subtitle {

    font-size: 15px;
  }




.leaflet-popup-content {
  margin: 6px !important;
  padding: 0 !important;
}

.leaflet-popup-content-wrapper {
  padding: 3px 5px !important;
  border-radius: 12px !important;
}

.leaflet-popup-tip {
  background: white;
}

.user-direction {
  position: relative;
}

.direction-wrapper {
  width: 30px;
  height: 30px;
  position: relative;
}

.direction-arrow {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #2563eb;
  transition: none;
}

.direction-dot {
  width: 10px;
  height: 10px;
  background: #2563eb;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}


.you-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pin {
  font-size: 22px;
  transform: translateY(-2px);
}

.label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  background: white;
  padding: 4px 8px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  white-space: nowrap;
}

/* วง pulse รอบตำแหน่ง */
.pulse {
 /* position: absolute;
  width: 14px;
  height: 14px;
  background: #2563eb;
  border-radius: 50%;
animation: pulse 1.5s ease-out 0s 1;
  animation-fill-mode: forwards;
  top: 23px;*/
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}


.province-icon {

  flex-shrink: 0;

  width: 14px;
  height: 14px;
}


.nearby-btn {
  border: none;  flex-direction: column;
  cursor: pointer;
  border-radius: 999px;
  text-align: center;
  padding: 6px 9px;
  backdrop-filter: blur(10px);
  gap: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: #111;
  color: white;
  box-shadow: 0 10px 35px rgba(0,0,0,0.18);
}


.nearby-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nearby-icon svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.nearby-radius {
  display: none;
}
.nearby-radius {
  display: none; /* 👈 default hidden */
  flex-direction: row;
  gap: 8px;
  margin-top: 10px;
}

.nearby-radius button {
  border: none;
  padding: 8px 12px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.nearby-radius button.active {
  background: #111;
  color: white;
}

.nearby-panel {
  display: none;

  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);

  width: min(92vw, 500px);

  padding: 20px;
  border-radius: 28px;

  background: rgba(255,255,255,0.96);
  box-shadow: 0 20px 60px rgba(0,0,0,0.22);

  z-index: 100002;
  backdrop-filter: blur(18px);
}

.nearby-radius-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.nearby-radius-grid button {
  border: none;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f3f4f6;
  font-weight: 700;
  cursor: pointer;
}

.nearby-radius-grid button.active {
  background: #111;
  color: white;
}

.nearby-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.km-prefix,
.km-value {
  display: inline-block;
}.nearby-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.explore-icon {
  width: 18px;
  height: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
}

.explore-icon svg {
  display: block;
}
button,
a  {

  -webkit-tap-highlight-color: transparent;

  outline: none;

  user-select: none;
}
button:focus,
button:active,
a:focus,
a:active {
  outline: none;
  box-shadow: none;
}

.vibe-pill {

  border: none;

  padding: 10px 14px;

  border-radius: 999px;

  background: #f3f4f6;

  font-weight: 700;

  cursor: pointer;

  transition: 0.2s;
}

.vibe-pill.active {

  background: #111;

  color: white;

  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.type-badge {

  position: absolute;

    top: 12px;
    left: 12px;

    z-index: 2;

  align-items: center;
  gap: 6px;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 2px;
  font-weight: 700;

  margin-top: 8px;

  background: #f3f4f6;
  color: #111;

  width: fit-content;
}

.province-pill {

  display: inline-flex;
  align-items: center;

  margin-top: 8px;
 

  padding: 6px 10px;

  border-radius: 999px;

  background: #eff6ff;

  color: #1d4ed8;


}
.province-pill {
    position: absolute;
    right: 11px;
    top: 12px;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);

    color: white;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;

    z-index: 2;
}

.vibe-tag {
  margin-top: 8px;

  display: inline-block;

  font-size: 12px;
  font-weight: 600;

  padding: 6px 10px;
  border-radius: 999px;

  background: #111;
  color: #fff;

  opacity: 0.85;
}

.card-tags-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}.type-badge,
.vibe-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
}.type-badge {
  font-size: 11px;
}

.vibe-tag {
  font-size: 11px;
  opacity: 0.85;
}

.active-filter-bar {

  top: 0;
  z-index: 50;

  margin-bottom: 14px;
  padding: 10px 14px;

  border-radius: 14px;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);

  font-size: 12px;
  font-weight: 600;
  color: #111;

  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}


.gps-title {
  font-weight: 700;
  font-size: 13px;
}

.gps-sub {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.6;
}

.bread-panel {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);

background: rgba(28, 30, 34, 0.78);
backdrop-filter: blur(12px);

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: 14px 16px;
  border-radius: 16px;

  min-width: 260px;
  max-width: 90vw;

  color: #fff; /* 🔥 สำคัญ */

  opacity: 0;
  pointer-events: none;

  transition: 0.2s ease;

  z-index: 99999;
}

.bread-panel.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.bread-panel.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.bread-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#breadText {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
  line-height: 1.4;
}

.bread-close {
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  color: rgba(255,255,255,0.6);
}

/* Overlay code */

.nearby-radius-box {
  position: relative;
}

.nearby-radius-box::after {
  content: " Please Enable GPS to use distance filter";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(6px); /* 👈 ทำให้เห็นของข้างหลังนุ่มๆ */
  opacity: 0;
  pointer-events: none;
}

.nearby-radius-box.locked::after {
  opacity: 1;
  pointer-events: all;
}

/* end overlay code */



.gps-status {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(17,17,17,0.05);
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
}

.gps-mini-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;

  color: #666;
}

.gps-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: red;
}

/* state = ready */
.gps-state.gps-on .gps-dot {
  background: #00c853;
}

/* optional: loading */
.gps-state.gps-loading .gps-dot {
  background: #facc15;
}

/*  END CSS START HTML    */

.special-box {
  display: flex;
    justify-content: center;
  gap: 10px;
  padding: 12px;
  margin-bottom: 14px;
width:100%;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(10px);

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
</style>


<style>
  .hero-section {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 20px;
}

.hero-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  color: white;
}

.hero-overlay h1 {
  font-size: 28px;
  margin: 0 0 8px;
}

.hero-overlay p {
  margin: 0;
  opacity: 0.9;
  line-height: 1.4;
}
/*     ปุ่ม + - Zoom สร้างจาก SCRIPT ไม่ใช่ ็html ปรับระยะจากอันนี้           */
@media (max-width: 768px) {

.leaflet-control-zoom {
  margin-bottom: 120px;
  margin-right: 16px;
}

}

</style>




<style>
.hotel-meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:10px;
}

.hotel-chain{
  display:flex;
  align-items:center;
  gap:8px;  min-width:0;
}

.hotel-chain-logo{
  width:24px;
  height:24px;
  border-radius:50%;
}

.hotel-chain-name{
  font-size:0.95rem;
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#1f2937;
  line-height:1;
}

.hotel-tier{
  background:#f5ead8;
  color:#8c6a2f;
  padding:6px 14px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
}

.hotel-rating{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}

.stars{
  color:#f5a623;
  font-size:18px;
}

.rating-score{
  font-weight:700;
  color:#333;
}

.rating-text{
  color:#777;
  font-size:14px;
}

.hotel-price{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:12px;
  color:#444;
}

.price-icon{
  font-weight:700;
  color:#2e7d32;
}
</style>

<style>
/* WHY BOX */
.card-why {
   width:100%;
    padding:10px 20px;
    border-top:1px solid #eee;
  border-radius: 12px;

  margin-bottom: 12px;
  width : 100%;   cursor: pointer;
}

.card-why .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
}


/* meta-card */
.meta-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.meta-card-item {
 font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
min-width: 0; /* สำคัญมาก */
  text-align: center;
}

.meta-card-item .label {
  font-size: 11px;
  color: #888;
  margin-bottom: 4px;
}

.meta-card-item .value {
  font-size: 13px;
  font-weight: 500;
  margin-top: 10px;
    margin-bottom: 2px;
     display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

  overflow: hidden;
  line-height: 1.4em;
  max-height: 2.8em;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/*     ปิด tab hightlight ทั้งการ์ด
.card-main,
.place-card {
  -webkit-tap-highlight-color: transparent;  } */

.card-main,
.place-card {
  -webkit-tap-highlight-color: transparent;
}
.card-main {
  cursor: pointer;
}
.card-main:active {

  filter: none;
  transform: none;
}
.view-map-btn:active,
.btn-meta-card:active {
  transform: scale(0.97);
  opacity: 0.85;
}



/*      overide ตอนเปิด Model ให้แสดงเนื้อหาแบบไม่ตัด       */
.place-modal .card-subtitle .text {
  display: block;
  overflow: visible;
    white-space: pre-line; /* 👈 สำคัญ */

}
/*      overide ตอนเปิด Model เปลี่ยนเนื้อหาเป็น 1 คอลัม       */
.modal-mode .meta-card {
  grid-template-columns: 1fr;
}
/* CARD เท่านั้น */
.place-card .value {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4em;
}
.meta-card-item .value {
  white-space: normal !important;
}
/* MODAL = ต้องโชว์เต็ม */
.place-modal .value {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  overflow: visible;
  white-space: pre-line;
}



.view-map-btn {
  cursor: pointer;  transition: all 0.2s ease;
}

.view-map-btn {
    display: inline-block;  margin-top: 14px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
    background: #111;
  color: #fff;
}
.btn-meta-card {
    display: inline-block;  margin-top: 14px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.btn-meta-card.primary {
  
  background: #2563eb;
  color: white;
}

.btn-meta-card.outline {
  background: white;
  border: 1px solid #ddd;
    display: flex;
  justify-content: center;  /* 👈 กึ่งกลางแนวนอน */
  align-items: center;      /* 👈 กึ่งกลางแนวตั้ง */

  text-align: center;
}
}

.icon-meta-card-btn {
  background: transparent;
  border: 1px solid #eee;
  padding: 8px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
}




</style>
<style>
.coming-soon-card{
  cursor: not-allowed;
  opacity: 0.85;
}

.coming-soon-badge{
  margin-top: 10px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #fff3cd;
  color: #856404;
}
.service-shortcuts-section{
  padding: 28px 16px 32px;
  background: #f7f7f5;
}

.service-hero{
  margin-bottom: 22px;
}

.service-hero h2{
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 10px;
  font-weight: 800;
  color: #111;
}

.service-hero p{
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.5;
  margin-top: 30px;
  margin-bottom: 30px;
}

.service-shortcuts-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* คอมพิวเตอร์ */
@media (min-width: 1024px) {
  .service-shortcuts-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}
.service-shortcut-card{
  background: white;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  transition: transform 0.2s ease;
}

.service-shortcut-card:active{
  transform: scale(0.98);
}

.service-shortcut-image{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ececec;
}

.service-shortcut-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.service-shortcut-content{
  padding: 14px;
}

.service-shortcut-content h3{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}

.service-shortcut-content p{
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #666;
}

.place-card{
    transition:
        transform .35s ease,
        opacity .35s ease,
        box-shadow .35s ease;
}
.places-grid{
    transition: .35s ease;
}
/* =========================
   LIST VIEW (Agoda)
========================= */

.places-grid.view-list{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

@media (min-width:1024px){
    .places-grid.view-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* =========================
   GRID VIEW
========================= */

.places-grid.view-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

@media (min-width:1024px){
    .places-grid.view-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
    }
}

/* =========================
   CARD VIEW
========================= */

.places-grid.view-card{
    display:grid;
    grid-template-columns:1fr;
    gap:30px;
}


@media (min-width:1024px){

    .places-grid.view-card{
        width:95%;

        margin:0 auto;
        grid-template-columns:repeat(3,1fr);
    }

}


.place-card{
  overflow:hidden;
  border-radius:20px;
  background:#fff;
}

.card-content{
  padding:10px 12px 14px;
}

.card-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:6px;
  gap:8px;
}

.card-price{
  font-size:13px;
  font-weight:700;
}



.place-card {
  display: flex;
  flex-direction: column;
      width: 100%;
  position: relative;
  background: white;
  border-radius: 28px;
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0,0,0,0.08);
}



.place-card h3{
  font-size:16px;
  line-height:1.3;
  font-weight:700;
  margin:0;
}
.card-image-wrapper {
  width: 100%;

  overflow: hidden;
  position: relative;
  flex-shrink: 0; /* สำคัญมาก */
        position: relative;

  aspect-ratio: 1 / 1;   /* << ตัวคุมสัดส่วน ภาพในการ์ด final+++ */

  border-radius: 20px;   /* ถ้าต้องการโค้งตาม card */
  background: #eee;

}


.place-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
}



/* รูปเต็มกรอบ */
.card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

    aspect-ratio:1/1.15;
}



/*    ซ่อน  .distance-text .view-map-btn vibe-tag,
 
@media (max-width: 768px) {
.type-badge,.cta-btn,
  .province-pill

   {
    display: none !important;
  } }
   */
  
.gps-onmapscreen-wrapper {
 position: absolute;
  bottom: 5px;
  left: 10px;

  display: flex;
  flex-direction: column;
  gap: 8px;

  z-index: 999;
}

.env-badge {
 
  top: 10px;
  left: 10px;
  z-index: 9999;

  font-size: 11px;
  padding: 4px 8px;
  border-radius: 8px;

  background: rgba(0,0,0,0.6);
  color: white;

  backdrop-filter: blur(6px);
  opacity: 1.0;
}



/*    bubble code */


.system-bubble {
  position: absolute;
  top: 25%; /* ใต้ dropdown */
  left: 12px;

  background: rgba(0,0,0,0.75);
  color: white;

  padding: 8px 12px;
  border-radius: 12px;

  font-size: 12px;
  font-weight: 500;

  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(-5px);

  pointer-events: none;
  z-index: 99999;

}
.system-bubble.show {
  opacity: 1;
  transform: translateY(0);
}

/*  Search card   ค้นหา  */
.card-search-wrap{

  width: 80%;
    display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;   /* 👈 จัดกึ่งกลาง */
  top: 0;
  z-index: 20;
  padding: 12px 16px;
  background: #fff;
}

#cardSearchInput{
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid #ddd;
  border-radius: 16px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: 0.2s;
}

#cardSearchInput:focus{
  border-color: #111;
}

.results-count{
  margin-bottom:14px;
  text-align: center;
  font-size:18px;
  color:#666;
margin-top : 10px;
margin-bottom : 10px;
  font-weight:500;
}
.results-count1{
  margin-bottom:14px;
  text-align: center;
  font-size:13px;
  color:#666;
margin-top : 0px;
margin-bottom : 0px;
  font-weight:500;
}

.city-reset-btn {
   position: absolute;
  right: 16px;
  bottom: 250px; /* ใต้ zoom */
  width: 44px;
  height: 44px;

  border-radius: 50%;
  border: none;

  background: white;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);

  font-size: 18px;
  cursor: pointer;
  z-index: 9999;
}



.toast {
  position: fixed;
  bottom: 465px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #222;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  opacity: 0;
  transition: 0.3s;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

/* CARD SEARCH */
.card-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  padding: 10px 12px;
  border-radius: 12px;

}

/* MAP SEARCH */
.map-search-wrap {
  position: absolute;
 /* bottom: 85px; */
background: rgba(255,255,255,0.5);
  /*left: 170px ;*/
  z-index: 89999;
  display: flex;
  align-items: center;
  gap: 10px;
   width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
}
/* 👇 ใช้ style เดียวกับ card */
#mapSearchInput{
  width: 100%;
  background: rgba(255,255,255,0.5);
  height: 52px;
  padding: 0 18px;
  border: 1px solid #ddd;
  border-radius: 16px;
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
  transition: 0.2s;
}

#mapSearchInput:focus{
  border-color: #111;
}

/*   CSS CARDMODAL               */
.place-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);

  z-index: 200000;
 pointer-events: none;   /* 👈 สำคัญมาก */
    /* สำคัญ: ทำให้ยังเห็น background */
  background: rgba(0, 0, 0, 0.25);

  backdrop-filter: blur(4px);
}

.place-modal-content {
  width: 100%;
  max-width: 1000px;
  height: 92vh;

  margin: 20px auto;
  background: white;
  border-radius: 16px;
z-index: 200000;
  display: flex;
  flex-direction: column;

  overflow: hidden; /* สำคัญ */
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
/* Animation ตอนเปิดการ์ด */


.place-modal {
  opacity: 0;
  transition: opacity 120ms ease;
}
/* ซ่อน meta ก่อนเปิด modal และแสดงหลังเปิด */
.place-card .meta-card {
  display: none;
}
.place-modal .meta-card {
  display: block;   /* หรือ block ก็ได้ */
}
/* แสดง meta ก่อนเปิด modal และไม่แสดงหลังเปิด */

.place-card .meta2{
 }
.place-modal .meta2{
  display: none; }

.place-modal-content {
  transform: translateY(10px) scale(0.98);
  transition: transform 150ms ease;
}

.place-modal.show {
  display: block;  opacity: 1;
    pointer-events: auto;   /* 👈 เปิดให้คลิกได้ */
}


.place-modal.show .place-modal-content {
  transform: translateY(0) scale(1);
}
.value--meta {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4em;
}

.text--subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 4; /* subtitle = 4 บรรทัด */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4em;
}

.modal-header {
  position: sticky;
  top: 0;

  background: white;
  padding: 12px 16px;

  display: flex;
  justify-content: flex-end;

  z-index: 10;
  border-bottom: 1px solid #eee;
}
.modal-body {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
}
.modal-bottom-bar {
  position: sticky;
  bottom: 0;

  margin-left: auto;  /* 👈 ดันไปขวา */
  background: white;
  width : 100px ;
  border-radius: 12px;
  border-top: 1px solid #eee;   
  display: block;
}

.close-bottom-btn {
  width: 100%;
  padding: 14px;
  font-size: 15px;
  font-weight: 600;

  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6); /* 👈 โปร่ง */
  backdrop-filter: blur(10px);
  color: #111;



  border: 1px solid #e5e5e5;

  cursor: pointer;
}

.activity-badge {
  display: inline-flex;
  align-items: center;
  padding: 10px;
  margin: 4px 6px 0 0;
  border-radius: 999px;
  background: #f3f4f6;

  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
#modalActivities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  margin:20px 0;
}
</style>

<style> 


.meta2 {
  display: flex;
 
  gap: 8px;  justify-items: center;  /* 👈 ทำให้ item อยู่กลางช่อง */
    align-items: center;padding-bottom: 7px;
}
.action-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.6;
  padding-left: 2px; /* กันติดขอบเกิน */
}
  /* ACTIONS */
.actions-meta-card {
  display: flex;
  flex-direction: column;
  gap: 10px;    flex-wrap:wrap;
}
.actions-meta-card {
  position: relative;
  z-index: 5;
}
.place-modal .actions-meta-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;
  padding: 0;

  border-radius: 50%;

  font-size: 16px;
  font-weight: 600;

  text-decoration: none;
  white-space: nowrap;

  box-sizing: border-box;
}
.card-action--icon {
  width: 52px;
  height: 52px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  cursor: pointer;
}
.card-action--icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.card-action img {
  height: 18px;
  width: auto;
  display: block;
}
.card-action--map {
  background: #111;
  color: #fff;
}

.card-action--more {
  background: #00b96b;
  color: #fff;
}

.card-action--klook {
  background: #ff5a00;
  color: #fff;
}

.card-action--agoda {
  background: #fff;
  color: #5A2D82;
  border: 1px solid #5A2D82;
}

.card-action--trip {
  background: #1677ff;
  color: #fff;
}

.klook-btn {
  display: flex;
    max-width: 100%;
  flex-shrink: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ff5a00;
  color: white;
  padding: 14px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
}

.klook-btn img {
  height: 22px;
} 

.trip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
    max-width: 100%;
  flex-shrink: 1;
  background: #1677ff; /* Trip blue */
  color: #ffffff;

  padding: 14px 18px;
  border-radius: 999px;

  text-decoration: none;
  font-weight: 600;
  font-family: inherit;

  transition: 0.2s ease;
  max-width: 100%;
  box-sizing: border-box;
}

.trip-btn img {
  height: 22px;
  width: auto;
}

.trip-btn:hover {
  background: #0f5fd6;
  transform: translateY(-1px);
}
</style>



<style>


  
  #modalTitle {
  text-align: center;
}
  
  
  .place-modal-2-0{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
}

.modal-image-2-0{
  position:relative;
}

.modal-image-2-0 img{
  width:100%;
  height:260px;
  object-fit:cover;
}

.badge-2-0{
  position:absolute;
  top:15px;
  left:15px;
  background:#fff;
  padding:8px 14px;
  border-radius:999px;
  font-weight:700;
}

.close-btn-2-0{
  position:absolute;
  right:15px;
  top:15px;
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:white;
}

.modal-content-2-0{
  padding:20px;
}

.modal-content-2-0 h2{
  font-size:28px;
  line-height:1.2;
  margin-bottom:8px;
}

.location-2-0{
  color:#777;
  margin-bottom:15px;
}

.short-desc-2-0{
  color:#555;
  line-height:1.6;
}

.highlights-2-0{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0;
}

.highlights-2-0 div{
  background:#f8f8f8;
  padding:10px;
  border-radius:12px;
}

.price-box-2-0{
  background:#f0fff7;
  border:1px solid #d8f5e5;
  border-radius:18px;
  padding:20px;
  margin-bottom:15px;
}

.price-label-2-0{
  color:#777;
}

.price-2-0{
  font-size:42px;
  font-weight:800;
  color:#00a86b;
}

.save-2-0{
  color:#00a86b;
  font-weight:600;
}

.teaser-box-2-0{
  background:#f7f7f7;
  border-radius:16px;
  padding:16px;
  margin-bottom:20px;
}

.teaser-box-2-0 div{
  margin-bottom:10px;
}

.cta-btn-2-0{
  display:block;
  width:100%;
  text-align:center;
  background:#00a86b;
  color:white;
  text-decoration:none;
  padding:18px;
  border-radius:16px;
  font-size:18px;
  font-weight:700;
}  </style>



<style>  
.city-item--hero{
  grid-column: 1 / -1;
  text-align:center;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:20px;
  margin-bottom:8px;
}

.city-item--hero .city-name{
  justify-content:center;
}

.city-item--hero .city-tag{
  text-align:center;
}
.city-close{
  position:absolute;
  top:12px;
  right:12px;

  width:36px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#f3f4f6;

  cursor:pointer;

  font-size:18px;
  font-weight:700;
}

.city-close:hover{
  background:#e5e7eb;
}
.city-rank{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  color:#2563eb;
  background:#dbeafe;
  padding:2px 8px;
  border-radius:999px;
  margin-bottom:4px;  
  line-height:1;
}  

.city-item{
  padding:14px 16px;
  cursor:pointer;
  border-radius:12px;
  transition:all .2s ease;  min-width:0;
}

.city-item:hover{
  background:#f8fafc;
}

.city-name{
    display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  font-weight:700;
  color:#111827;
  line-height:1.2;   overflow-wrap:break-word;
}

.city-tag{
  font-size:14px;
  color:#64748b;
  margin-top:3px;
  line-height:1.2;  overflow-wrap:break-word;
}
 </style>


 
<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}



/* แผนที่ */
#map {
  width: 100%;
  height: 100vh;
  background: #ddd; /* placeholder */
}

.peak-bottom {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease;
    z-index : 50000;
    display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 20px 40px;

}

.peak-bottom.show {
  opacity: 1;
  transform: translateY(0);
}

.hidden {
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
}

/* card กลางจอ */

.peak-overlay {

}
.section-intro{
    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px 20px;
    box-sizing:border-box;
}

.section-intro {
  position: relative;
  width: 100%;
}

.section-intro .peak-card {
  position: relative;
  width: 100%;
  height: auto;

  background: white;
  border-radius: 20px;


}

/* bottom card (อยู่ใน flow จริง) */
.peak-bottom .peak-card {
  position: relative;   /* 🔥 สำคัญที่สุด */
  top: auto;
  height: auto;
  width: 100%;
  z-index: 200000;
}
.peak-card {   box-sizing: border-box;}
/* ปุ่ม */
.peak-card button {
  margin-top: auto;
  padding: 10px 16px;
  border: none;
  border-radius: 10px;
  background: #2b6cff;
  color: white;
  cursor: pointer;
  font-weight:600;

}
.intro-total{
  font-size:16px;
  margin:12px 0 20px;
  color:#666;
}

.intro-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  width:100%;
  margin-bottom:20px;
}

.stat-card{
  background:#f8f9fb;
  border-radius:12px;
  padding:12px;
  text-align:center;  cursor: pointer;
}

.stat-icon{
  font-size:22px;
  margin-bottom:4px;
}

.stat-number{
  font-size:20px;
  font-weight:700;
}

.stat-label{
  font-size:12px;
  color:#666;
}

.intro-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.buttonintro-exploremap {
  padding: 14px 20px;
  border-radius: 14px;

  min-width: 240px;

  font-size: 15px;
  font-weight: 600;

  border: none;
  cursor: pointer;

  text-decoration: none;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: all 0.25s ease;

  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: white;

  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
}
.buttonintro-exploremap:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
}

#currentCityName {
  text-align: center;
}


#pageNumbers{
  display:flex;
  gap:8px;
}

.page-btn{
  border:none;
  background:#f1f5f9;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
}

.page-btn.active{
  background:#111;
  color:white;
}


/*    PAGINATION CSS  */
.pagination1 {

  /*position: sticky;*/
  overflow-x:auto;
  white-space:nowrap;
  bottom: 18px;

  z-index: 100;

  display: flex;
    justify-content: flex-start;
  align-items: center;

  gap: 12px;

  margin: 30px auto 30px;

  padding: 10px 14px;

  border-radius: 999px;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(14px);

  box-shadow: 0 10px 35px rgba(0,0,0,0.16);
}

.pagination1 button {

  border: none;

width:36px;
height:36px;
font-size:14px;

  border-radius: 50%;

  background:#f3f4f6;
  color:#555;

  font-weight:600;

  cursor: pointer;

}
.pagination2 {

  /*position: sticky;*/
  overflow-x:auto;
  white-space:nowrap;
  bottom: 18px;

  z-index: 100;

  display: flex;
   justify-content:center;
  align-items: center;

  gap: 12px;

  margin: 10px auto 10px;

  padding: 10px 14px;

  border-radius: 999px;

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(14px);

  box-shadow: 0 10px 35px rgba(0,0,0,0.16);
}

.pagination2 button {

  border: none;

width:36px;
height:36px;
font-size:14px;

  border-radius: 50%;

  background: #111;
  color: white;

  font-weight:600;

  cursor: pointer;


}
#pageInfo {

  min-width: 72px;

  text-align: center;

  font-weight: 700;

  font-size: 14px;
}.pagination1{
  scrollbar-width:none;
}.pagination2{
  scrollbar-width:none;
}
.pagination1::-webkit-scrollbar{
  display:none;
}.pagination2::-webkit-scrollbar{
  display:none;
}

/* ========================================
   MUST STAY SECTION
======================================== */

.featured-experiences{
  padding:10px;
}

/* ========================================
   HEADER
======================================== */

.featured-header{
  text-align:center;

}

.muststay-badge{
  display:inline-block;

  padding:8px 18px;
  margin-bottom:16px;

  border:1px solid rgba(255,215,0,.3);
  border-radius:999px;

  color:#c9a86a;

  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.featured-header h2{

  font-size:18px;
  font-weight:700;
  line-height:1.1;

  margin-bottom:12px;
}

.featured-header p{
  max-width:700px;
  margin:auto;

  color:#777;

  font-size:18px;
  line-height:1.7;
  margin-top:30px;
  margin-bottom:30px;
}



/* ========================================
   CARD
======================================== */

.featured-card{
    position:relative;

    width:100%;

    background:#fff;
    border-radius:20px;

    overflow:hidden;

    box-shadow:0 4px 16px rgba(0,0,0,.08);
}
.featured-image-wrap{
    position:relative;    overflow:visible;
    width:50%;
    flex-shrink:0;
}

.swagtrip-wave{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:70px;

    background:white;

    border-radius:100% 100% 0 0;
}

.swagtrip-logo{

    position:absolute;

    left:20px;
    bottom:18px;

    font-size:20px;
    font-weight:700;

    z-index:3;
}
.swagtrip-brand-layer{

    position:absolute;

    left:0;
    right:0;
    bottom:-36px;

    height:90px;

    z-index:20;

    pointer-events:none;
}
.swagtrip-road{

    position:absolute;

    left:0;
    right:0;

    bottom:18px;

    height:2px;

    background:#D8D8D8;

    opacity:.5;

    z-index:25;
}
.swagtrip-wave{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;
}
.swagtrip-logo{

  

    left:-67px;

    bottom:5px;

    z-index:30;
}

.swagtrip-logo img{
  width:45%;

}
.swagtrip-van{

    position:absolute;

    right:4px;

    bottom:4px;

    width:39%;

    z-index:30;
}


.featured-card-body{
    padding:14px;

    display:flex;
    flex-direction:column;
}

.featured-card h3{
  margin:5px 0;

  color:#1d1d1d;


  font-size:23px;
  font-weight:700;

  line-height:1.15;
  letter-spacing:-0.5px;
}

.featured-card p{
  color:#555;
z-index:30;
  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1;
}

/* ========================================
   IMAGE
======================================== */

.featured-card-image{
  width:100%;
  height:210px;

  object-fit:cover;

  transition:.4s;
}



/* ========================================
   LOCATION + TIER
======================================== */

.featured-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
flex-wrap:wrap;
  gap:12px;

}

.featured-location{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
        padding:0 12px;   /* บนล่าง 0, ซ้ายขวา 12px */
    color:#374151;
    font-size:13px;
    font-weight:600;
}

.featured-province{
    display:flex;
    align-items:center;
    gap:6px;
}

.featured-card-id{
    font-size:12px;
    font-weight:700;
    color:#6b7280;
    letter-spacing:.05em;
}
.province-icon{
  flex-shrink:0;
}

.hotel-tier-must{
  display:inline-block;

  padding:8px 14px;

  border-radius:999px;

  background:#f8f4ec;
  color:#b8924f;

  white-space:nowrap;

  font-family:"Inter",sans-serif;
  font-size:14px;
  font-weight:600;
}

/* ========================================
   RANK BADGE
======================================== */

.rank-badge{
    position:static;

    display:inline-flex;
    align-items:center;
    gap:10px;
z-index : 30;
    width:auto;

    padding:8px 14px;

    background:#F8F9FB;

    border-radius:999px;

    color:#374151;


}
.rank-crown{
    color:#F5B301;
    font-size:16px;
    margin:0;
}

.rank-badge span{
    font-size:15px;
    font-weight:700;
}

.rank-badge small{
    margin:0;

    font-size:11px;
    font-weight:600;

    color:#6B7280;

    letter-spacing:.5px;
}

/* ========================================
   FOOTER
======================================== */

.featured-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
    flex-wrap:wrap;


  border-top:1px solid #eee;
}

/* ========================================
   RANK TEXT
======================================== */

.rank-footer{
  display:flex;
  align-items:center;
  gap:10px;
    width:100%;
  color:#222;

  font-family:"Inter",sans-serif;
  font-size:16px;
  font-weight:700;
}

.rank-text{
  color:#222;
  font-size:18px;
}

.laurel-icon{
  width:20px;
  height:20px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:#c9a86a;
}

.laurel-icon svg{
  width:100%;
  height:100%;
}

.laurel-right{
  transform:scaleX(-1);
}

/* ========================================
   BUTTON
======================================== */

.featured-btn{
  background:#111;
  color:#fff;

  padding:10px 20px;
  width:100%;
  border-radius:14px;

  text-decoration:none;

  font-family:"Inter",sans-serif;
  font-size:14px;
  font-weight: 600;

  transition:.3s;
}

.featured-btn:hover{
  transform:translateY(-2px);

  box-shadow:0 10px 25px rgba(201,168,106,.25);
}





.explore-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}
.explore-card-peak{
    display:flex;
    flex-direction:column;

    background:#fff;

    border-radius:24px;
    overflow:hidden;

    border:1px solid #ddd;

    box-shadow:
      0 8px 24px rgba(0,0,0,.08);
}

.explore-card-peak img{
    width:100%;
    height:180px;
    object-fit:cover;
    display:block;
}

.overlay-peak{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:15px;
}

.card-number{
    font-size:48px;
    font-weight:400;
    line-height:1;
}

.card-peak-meta2 h3{
    margin:10px 0;
}

.overlay-peak button{
    margin-top:auto;
}

.card-number{
    font-size:40px;
    font-weight:400;    padding: 0 10px;
}
.card-peak-meta2{
   padding: 0 10px;
}
.overlay button{
    width:max-content;
    margin-top:12px;    padding: 0 10px;
}
.section-badge{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

    color:#777;
    margin-top:20px;
    margin-bottom:20px;
}

.section-badge .dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#f5b400;
}

.section-title{
    text-align:center;

    font-size:30px;
    font-weight:800;
    line-height:1.2;

    margin:0;
    color:#222;
}

.section-title span{
    color:#3b82f6;
}
.explore-all-card{

    display:flex;
    align-items:center;

    gap:15px;

    padding:18px;

    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #4f8dfd,
        #2f66e8
    );

    color:white;

    cursor:pointer;

    box-shadow:
    0 8px 20px rgba(79,141,253,.35);

    margin-top:20px;   margin-bottom:60px;
}

.explore-all-left{

    font-size:52px;

    flex-shrink:0;
}

.explore-all-content{
    flex:1;
}

.explore-all-title{

    font-size:28px;
    font-weight:700;

    margin-bottom:6px;
}

.explore-all-desc{

    font-size:15px;
    line-height:1.5;

    opacity:.95;
}

.explore-all-arrow{

    width:44px;
    height:44px;

    border-radius:50%;

    background:white;

    color:#2f66e8;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;
    font-weight:700;

    flex-shrink:0;
}

.brand-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  text-decoration:none;
}

#loading-screen{
  position:fixed;
  inset:0;

  background:white;

  z-index:999999;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.loader{
  width:50px;
  height:50px;

  border:4px solid #eee;
  border-top:4px solid #f5b400;

  border-radius:50%;

  animation:spin 1s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

.loading-text{
  margin-top:15px;
  font-weight:600;
}

.city-picker-box{
  display:flex;
  align-items:center;
  gap:14px;

  background:#f1f5fb;

  border-radius:999px;

  padding:9px 12px;

  cursor:pointer;
  margin-bottom : 20px;
}

.city-picker-icon svg{
  width:28px;
  height:28px;
}

.city-picker-text{
  font-size:22px;
  font-weight:500;
}

.travel-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;

    justify-content:center;
   width:fit-content;
    margin:0 auto;

    padding:14px 28px;

    border:1px solid #e8edf8;
    border-radius:999px;

    background:#fff;

    color:#2f6fff;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom: 30px;
}.parent{
    display:flex;
    justify-content:center;
}

.badge-icon{
    width:18px;
    height:18px;
}

.swg-province-selector{
  display:flex;
  justify-content:center;
  margin-top : 40px;
  margin-bottom : 40px;
}

.swg-province-trigger{
  display:flex;
  align-items:center;
  gap:10px;

  padding:14px 22px;

  border:none;
  border-radius:999px;

  background:#f5f7ff;
  color:#4f7cff;

  font-size:24px;
  font-weight:700;

  cursor:pointer;
}

.swg-province-pin{
  width:18px;
  height:18px;
}

.swg-province-chevron{
  width:16px;
  height:16px;
}

.travel-divider{

  border-top:1px solid #ececec;

  text-align:center;

  margin:60px 0 40px;
}
.travel-divider0{

  border-top:1px solid #ececec;

  text-align:center;

  margin:20px 0 10px;
}
.travel-divider-label{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:0 12px;


  transform:translateY(-80%);
}

.travel-divider-gold{

  min-width:20px;

  height:1px;

  background:#c9a45c;

  display:block;
}

.travel-divider-text{

  color:#c9a45c;

  white-space:nowrap;

   font-size:14px;

  font-weight:400;
}

.travel-divider2{

  border-top:1px solid #ececec;

  text-align:center;

  margin:14px 0 -15px;
}

.travel-divider2-label{

  display:inline-flex;

  align-items:center;

  gap:12px;

  padding:0 12px;



  transform:translateY(-80%);
}

.travel-divider2-gold{

  min-width:20px;

  height:1px;

  background:#c9a45c;

  display:block;
}

.travel-divider2-text{

  color:#c9a45c;

  white-space:nowrap;

  font-size:14px;

  font-weight:400;
}
@media (min-width: 1024px){

  .travel-divider2-gold{

    min-width:180px;

  }
 .travel-divider-gold{

    min-width:180px;
  }
}

.search-panel{
    width:90%;
    max-width:900px;

    margin:0px auto 12px;   /* เว้นจากข้อความด้านบน */

    background:#fff;

    border-radius:36px;   /* จาก 28 → 36 */

    padding:18px;         /* จาก 22 → 30 */

    box-shadow:0 20px 50px rgba(0,0,0,.15); /* เงานุ่มขึ้น */
}

/* Mobile */
@media (max-width: 768px){
    .search-panel{
        width: 100%;
        box-sizing: border-box;
    }
}

.search-row{

    display:flex;
    gap:20px;
    margin-bottom:18px;

}

.search-box{

    flex:1;

    display:flex;
    align-items:center;

    border:1px solid #e9e9e9;
    border-radius:22px;

    padding:20px 22px;

    min-height:82px;

    background:#fff;

    transition:.2s;
}
.search-box:hover{
    border-color:#3b82f6;
    box-shadow:0 6px 18px rgba(59,130,246,.12);
}
.icon{

    font-size:26px;
    margin-right:18px;

}

.content{

    flex:1;

}

.content label{

    display:block;

    font-size:15px;
    font-weight:700;

    color:#222;

    margin-bottom:6px;

}

.content select{

    width:100%;

    border:none;
    outline:none;

    font-size:18px;

    color:#666;

    background:transparent;

    cursor:pointer;

}

.search-btn{

    width:100%;
    height:68px;

    border:none;

    border-radius:22px;

    background:#2F6FED;

    color:#fff;

    font-size:24px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    box-shadow:0 10px 25px rgba(47,111,237,.25);

}

.search-btn:hover{

    background:#1e5fe5;

    transform:translateY(-2px);

}

.search-box {
cursor:pointer;
}
/* ===========================
   Mobile
=========================== */

@media (max-width:768px){

.search-panel{
 margin-top:20px;
    padding:18px;

}

.search-row{
    display:flex;
    gap:20px;
    align-items:stretch;
    margin-bottom:20px;
}
@media (max-width:768px){

    .search-row{
        flex-direction:column;
        gap:16px;
    }

}

.search-box{

    width:100%;
    min-height:70px;

    padding:8px 9px;

    box-sizing:border-box;

}

.icon{

    font-size:22px;
    margin-right:14px;

}

.content{

    min-width:0;

}

.content label{

    font-size:14px;
    margin-bottom:4px;

}

.city-picker-text,
.category-picker,
#selectedCategory{

    font-size:18px;

}

.arrow{

    font-size:14px;

}

.search-btn{

    width:100%;
    height:60px;

    font-size:22px;

    margin-top:6px;

}

}


.bottom-nav{
    position:fixed;
    bottom:16px;
    left:50%;
    transform:translateX(-50%);
    width:calc(100% - 32px);
    max-width:500px;

    display:flex;
    justify-content:space-around;
    align-items:center;

    background:#111827;
    border-radius:20px;
    padding:10px 0;

    box-shadow:0 10px 30px rgba(0,0,0,.2);
    z-index:9999;
}

.nav-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;

    color:#9CA3AF;
    text-decoration:none;
    font-size:12px;
    font-weight:600;

    transition:.25s;
}

.nav-item svg{
    width:24px;
    height:24px;
}

.nav-item.active{
    color:#3B82F6;
}

.nav-item:hover{
    color:#fff;
}



.selected-city{
    color:#2563EB;   /* หรือสีที่คุณต้องการ */
    font-weight:700;
}

.city-btn-map{
    position:absolute;
    top:80px;
    left:16px;

    z-index:100000;

    padding:12px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.95);

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    cursor:pointer;

    font-weight:600;
}



.open-map-btn{
    position:fixed;
    left:50%;
    bottom:10%;
    transform:translateX(-50%);

    z-index:100000;

    padding:7px 13px;

    border:none;
    border-radius:999px;

    background:#111;
    color:white;
  cursor: pointer;   /* เมาส์เป็นรูปมือ */
    font-weight:700;
}
/* Mobile */
@media (max-width: 768px){
    .open-map-btn{
        bottom: 5px;
    }
}
#closeMapBtn{

    position:absolute;

    top:20px;
    right:20px;

    z-index:100000;

    width:44px;
    height:44px;

    border:none;

    border-radius:50%;

    background:white;
}


.view-toggle{
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

.viewToggleBtn{
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

</style>


<style>

/* ===================================
   GRID VIEW (Klook)
=================================== */

.view-grid .card-image-wrapper{

    aspect-ratio:1/1;

}

.view-grid .card-content{

    padding:12px;

}

.view-grid h3{

    font-size:16px;

}

.view-list .card-content{
    display:flex;
    flex-direction:column;
    flex:1;
}
/* ===================================
   LIST VIEW (Agoda)
=================================== */

.view-list .card-main{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.view-list .card-image-wrapper{
    width:42%;
    flex-shrink:0;
}

.view-list .card-content{
    flex:1;
    min-width:0;   /* สำคัญมาก */
}
.view-list .actions-meta-card{
    display:flex;
    flex-direction:row;
    gap:8px;
    margin-top:12px;
}
.view-card .actions-meta-card{
    display:flex;
    flex-direction:row;
    gap:8px;
    margin-top:12px;
}

.view-list .meta2{

    display:flex;
    flex-wrap:wrap;
    gap:8px;

}
.view-list .card-image-wrapper{
    aspect-ratio:auto;
    height:auto;
    align-self:stretch;
}


/* ===================================
   CARD VIEW (Feed)
=================================== */

.view-card .card-main{

    display:block;

}

.view-card .card-image-wrapper{

    aspect-ratio:1/1;

}

.view-card .card-content{

    padding:18px;

}
  .view-grid .place-card{

}

.view-grid .card-image-wrapper{

}

.view-grid .card-content{

}

.view-card .place-card{

}

.view-card .card-image-wrapper{

}

.view-card .card-content{

}



.view-toggle{

    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin:20px 0;

}

.viewBtn{

    border:none;
    padding:10px 18px;
    border-radius:999px;
    background:#eee;
    cursor:pointer;
    font-weight:600;
    transition:.25s;

}

.viewBtn:hover{

    background:#ddd;

}

.viewBtn.active{

    background:#111;
    color:white;

}


.operator-note{
    margin-top:12px;
    font-size:14px;
    line-height:1.6;
    color:#666;
}




.featured-why{
    width:100%;
  /*  padding:10px 20px; */
    border-top:1px solid #eee;
}
/* ========================================
   Default = List View
======================================== */

.featured-grid.view-list .featured-card{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
}




.featured-grid.view-list .featured-why{
    flex:0 0 100%;
    width:100%;
    padding:20px 20px 5px 20px;
    border-top:1px solid #eee;
}

.featured-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    padding-bottom:10px;
}

.featured-grid::-webkit-scrollbar{
    height:8px;
}

/* Must Stay : List View */

.featured-grid.view-list .featured-card.featured-stay{
    flex-direction:row-reverse;
}


.featured-grid.view-list{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}

@media (min-width:992px){
    .featured-grid.view-list{
        grid-template-columns:repeat(2,1fr)!important;
    }
}

/* ========================================
   Mobile
======================================== */

@media (max-width:768px){

    .featured-experiences{
        padding-left:0;
        padding-right:0;
    }

    .featured-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

}




.featured-grid.view-list{
    display:grid;
    grid-template-columns:1fr;
}

.featured-grid.view-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
}

@media(min-width:1024px){
    .featured-grid.view-grid{
        grid-template-columns:repeat(4,1fr);
    }
}

.featured-grid.view-card{
    display:grid;
    grid-template-columns:1fr;
}

@media (min-width:1024px){

    .featured-grid.view-card{
        width:100%;
      
        margin:0 auto;
    }

}
/* LIST VIEW */

.featured-grid.view-list .featured-image-wrap{
    flex:0 0 50%;
    max-width:50%;
}
.featured-grid.view-list .featured-card-body{
    flex:0 0 50%;
    max-width:50%;

    display:flex;
    flex-direction:column;
}
.featured-grid.view-list .featured-image-wrap{
    width:100%;
    aspect-ratio:3/4;
}

/* Desktop */

.featured-grid.view-list .featured-location{
    flex: 0 0 100%;
    width: 100%;
    margin-bottom:12px;
}
.featured-grid.view-list .featured-card-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Mobile */
@media(max-width:768px){

.featured-grid.view-list .featured-card{
    display:flex;
    flex-wrap:wrap;
}

.featured-grid.view-list .featured-location{
    flex: 0 0 100%;
    width: 100%;
    margin-bottom:12px;
}

.featured-grid.view-list .featured-image-wrap{
    flex:0 0 50%;
    max-width:50%;
}

.featured-grid.view-list .featured-card-body{
    flex:0 0 50%;
    max-width:50%;
}

}
/* GRID VIEW */
.featured-grid.view-grid .featured-card{
    display:block;
}

.featured-grid.view-grid .featured-image-wrap{
    width:100%;
    aspect-ratio:3/4;
}

.featured-grid.view-grid .featured-card-image{
    width:100%;
    height:100%;
    object-fit:cover;
}
/* CARD VIEW */
.featured-grid.view-card .featured-card{
    display:block;
}

.featured-grid.view-card .featured-image-wrap{
    width:100%;
    aspect-ratio:3/4;
}

.featured-grid.view-card .featured-card-image{
    width:100%;
    height:100%;
    object-fit:cover;
}

.featured-grid.view-grid .featured-card{
    display:block;
}


@media (min-width:1024px){

    .featured-grid.view-card{
        width:95%;
      
        margin:0 auto;

        grid-template-columns:repeat(3,1fr);
        gap:24px;
    }

}




.hide-dev{
    display:none !important;
}
.circle-marker{

    width:20px;
    height:20px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    color:white;

    font-size:11px;
    font-weight:700;

    border:2px solid white;

    box-shadow:0 1px 4px rgba(0,0,0,.35);
}

#section1panel{

    position:relative;



    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    padding-top:20px;
    padding-bottom:40px;


    background-image:url("/cdn/shop/files/Attraction_intro.jpg?v=1782252263");
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

}
#section1panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.15);
    z-index:0;
}
#section1panel > *{
    position:relative;
    z-index:1;
}
.hero-content{

    text-align:center;

    padding-top:80px;

    color:white;

}

/* Desktop */
.explore-tabs{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:20px 12px;
}

/* Mobile */
@media (max-width:768px){

    .explore-tabs{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:16px 8px;
    }

    .explore-tab{
        min-width:0;
    }

    .tab-text{
        width:100%;
        text-align:center;
        overflow-wrap:break-word;
        word-break:break-word;
    }

}
.explore-tab{

    background:none;

    border:none;
      width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    cursor:pointer;

    padding:0;

    box-shadow:none;

    transition:.25s;

}

.explore-tab.active .tab-icon{

    background:#2F6FED;

    color:white;

}

.explore-tab.active .tab-text{

    color:#2F6FED;

    font-weight:700;

}
.tab-icon{
font-size:16px;
    width:72px;

    height:72px;

    border-radius:50%;

    background:#E9EDF7;

    color:#5B6C88;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}
.tab-text{

    margin-top:8px;

    font-size:16px;

    font-weight:600;

    color:#555;

}

/* Facebook Browser */
.in-fbapp .tab-text{
    font-size:12px;
}

/* LINE Browser */
.in-lineapp .tab-text{
    font-size:12px;
}


.branding-logo{
    width:180px;
    height:auto;
    display:block;
    margin:0 auto;
}



.featured-review-preview{

    padding: 10px 20px;

    border-top:1px solid #eee;

    background:#fff;
    width : 100%;
}

.review-summary{

    font-size:15px;
    font-weight:700;

    margin-bottom:14px;
}

.review-summary span{

    color:#777;
    font-weight:500;
}

.review-item{

    padding:12px 0;

    border-bottom:1px solid #f2f2f2;

    color:#444;

    line-height:1.6;

    font-size:14px;
}

.review-btn{

    margin-top:16px;

    width:100%;

    height:46px;

    border:none;

    border-radius:12px;

    background:#f7f7f7;

    font-weight:700;

    cursor:pointer;

    transition:.25s;
}

.review-btn:hover{

    background:#ececec;
}

.action-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:12px;
}

.package-selector{
    display:flex;
    gap:8px;
    margin:14px 0;
}

.package-card{
    flex:1;
    border:1px solid #e5e5e5;
    border-radius:14px;
    background:#fff;
    padding:10px 6px;
    text-align:center;
    cursor:pointer;
    transition:.2s;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.package-time{
    display:block;
    margin-top:2px;
    margin-bottom:6px;
    font-size:11px;
    color:#888;
    line-height:1.2;
}

.package-card:hover{
    border-color:#ff5b00;
}

.package-card.active{
    border:2px solid #ff5b00;
    background:#fff7f2;
}

.package-name{
    display:block;
    font-size:13px;
    font-weight:600;
    color:#444;
}

.package-price{
    display:block;
    margin-top:6px;
    font-size:18px;
    font-weight:700;
    color:#ff5b00;
}

.availability-btn{

    width:100%;
        font-size:16px;
    max-width:420px;
margin:10px auto 0;
    margin-top:10px;
    text-align:center;
    background:#ff5b00;
    color:#fff;
    padding:12px;
    border-radius:14px;
    font-weight:700;
    text-decoration:none;
      border: none;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
        cursor:pointer;
}
.availability-btn{
    transition: transform .2s ease, box-shadow .2s ease;
}

.availability-btn:hover{
    transform: translateY(-2px);
  
}

.availability-btn:active{
    transform: translateY(0);
   
}
.details-link{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    margin-top:12px;
    color:#666;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.details-link:hover{
    color:#ff5b00;
}
.quick-links{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px 18px;
    flex-wrap:wrap;
    margin-top:12px;
    font-size:13px;
}

.quick-link{

    background:none;
    border:none;
    padding:0;

    color:#666;

    cursor:pointer;

    font-size:13px;

    white-space:nowrap;

    transition:.2s;

    font-family:inherit;

}

.quick-link:hover{

    color:#ff5b00;

}.section-header-center{

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    padding-top:20px;

}

.section-number{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#ff5b00;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    font-weight:700;

    margin-bottom:16px;

}

.section-header-center h2{

    margin:0;
    line-height:1.1;

}

.section-header-center p{

    margin-top:10px;
    color:#666;

}