/* ==========================================================================
   [1] BREADCRUMBS & HERO BANNER
   ========================================================================== */
.breadcrumbs-bar { 
    padding: 5px 5%; 
    background-color: #89e8d7; 
    font-size: 12px; 
}

.breadcrumbs-bar a { 
    color: #d4af37;
    foight: bold;nt-we  
}

.breadcrumbs span { 
    color: #999; 
    margin: 0 5px; 
}

    /* ส่วนหัวข้อหลัก */

       .section-title { 
        font-size: 28px; /* ปรับลดขนาดตัวอักษรลงเล็กน้อยให้เข้ากับพื้นที่ที่แคบลง */
        font-weight: bold; 
        /* 🎯 ลดระยะห่างด้านล่างของหัวข้อหลักจากเดิม 25px เหลือเพียง 12px ดึงตัวกล่องราคาขึ้นมาชิด */
        margin-bottom: 12px; 
        color: #1100bb; 
        line-height: 1.2;
    }
    

.main-hero h1 {  /* 自分たちだけの旅  */
  font-size: 33px; 
  font-weight: bold; 
  font-family: sans-serif;
  background: linear-gradient(to right, #e62143, #a920ad, #1136af, #1badd4, #37b73e, #ccdb1b, #eb581e);
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  filter: 
    drop-shadow(2px 0px 0px #000000) 
    drop-shadow(1px 0px 0px #000000) 
    drop-shadow(0px 2px 0px #000000) 
    drop-shadow(0px -2px 0px #000000)
    drop-shadow(1.5px 1.5px 0px #000000)
    drop-shadow(-1.5px 1.5px 0px #000000)
    drop-shadow(1.5px -1.5px 0px #000000)
    drop-shadow(-1.5px -1.5px 0px #000000);
}

.main-hero h2 {  /* 何処へ行くのも可能 */
        font-size: 30px; 
        font-weight: bold; 
        background: linear-gradient(to bottom, #11aa44, #ffff00); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
        filter: 
    drop-shadow(1px 0px 0px #ff0000) 
    drop-shadow(-1px 0px 0px #ff0000) 
    drop-shadow(0px 1px 0px #ff0000) 
    drop-shadow(0px -1px 0px #ff0000) 
    drop-shadow(2px 2px 0px #000000);
}

.main-hero h3 { /* 1人-9人まで乗り車 */
    font-size: 17px; 
    margin: 0 auto 10px; 
}

.main-hero h4 { /* 自分の気まま */
/*         font-family: 'sans-serif; */
         font-size: clamp(30px, 4vm, 20px); 
         color: #fff; /* สีขาว */
         text-shadow: 2px 2px 4px #635d5a;">
}

.main-hero h5 { /* 他の客様に */
    font-size: 15px; 
 /*   max-width: 800px; */
    color: #fca903; /* สีส้ม */
    margin: 0 auto 10px;
}

.main-hero p { 
    font-size: 12px; 
/*    max-width: 800px; */
    margin: 0 auto 10px; 
}

.cta-btn { 
    display: inline-block; 
    background: #03fc35; 
    color: var(--secondary-color); 
    padding: 15px 30px; 
    font-weight: bold; 
    border-radius: 5px; 
    transition: 0.3s; 
}

.cta-btn:hover { 
    background: #fff; 
    color: var(#1b3280); 
}
    /* 🎯 ปรับปุ่มให้เว้นระยะห่างจากข้อความด้านบนแบบพอดีๆ */
    .line-btn { 
        display: inline-block; 
        margin-top: 15px; /* 🎯 ลดช่องว่างด้านบนปุ่มลงเหลือ 15px ดึงปุ่มขยับขึ้นมาพอดีๆ */
        background-color: #06C755; 
        color: #fff; 
        padding: 10px 30px; /* ลด Padding ในปุ่มลงเล็กน้อยเพื่อให้กระชับ */
        border-radius: 25px; 
        text-decoration: none; 
        font-weight: bold;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
        transition: transform 0.2s, background-color 0.2s;
    }

        /* เพิ่มเอฟเฟกต์เวลาเอาเมาส์ไปชี้ */
    .line-btn:hover {
        background-color: #05b34c;
        transform: scale(1.03); /* ขยายใหญ่ขึ้นเล็กน้อยเวลาเมาส์ชี้ */
    }

/* ==========================================================================
   [2] PRICING SECTION (กล่องการ์ดราคาทั่วไป)
   ========================================================================== */

.pricing-section { 
    background: #bcf7ec;
    padding: 10px 5%; 
    text-align: center; 
}

/* 安心の込々料金プラン */
.pricing-section h2 {
    font-size: clamp(20px, 4vw, 30px); /* แก้ไขไวยากรณ์ผิดพลาดจากโค้ดเดิม */
    font-weight: bold; 
    letter-spacing: 1px;
    background: linear-gradient(to bottom, #1100bb 0%, #6699ff 50%, #ffffff 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    filter: 
      drop-shadow(1.5px 0px 0px #1100bb) 
      drop-shadow(-1.5px 0px 0px #1100bb) 
      drop-shadow(0px 1.5px 0px #1100bb) 
      drop-shadow(0px -1.5px 0px #1100bb)
      drop-shadow(3px 0px 0px #ffff77) 
      drop-shadow(-3px 0px 0px #ffff77) 
      drop-shadow(0px 3px 0px #ffff77) 
      drop-shadow(0px -3px 0px #ffff77)
      drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
} 

.pricing-section h3 {
    font-size: 15px;
    color: black; 
    text-shadow: 1px 1px 2px black, 0 0 2px green, 0 0 5px red;

}
.pricing-section p {
    font-size: 15px;
    color: orange; 
    text-shadow: 1px 1px 2px black, 0 0 2px green, 0 0 5px red;
}

.pricing-section h3 {
style="color: red; 
text-shadow: 1px 1px 2px black, 0 0 2px green, 0 0 5px red;    
}

.pricing-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 15px; 
    margin-top: 10px; 
    }

    .price-card { 
        background: #fff; 
        border-radius: 12px; 
        /* 🎯 ลด Padding ภายในกล่องการ์ดราคาลง (บน-ล่าง 18px ซ้าย-ขวา 25px) เพื่อให้ตัวกล่องเตี้ยลง */
        padding: 15px;
        max-width: 340px; 
        text-align: center; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    }

    .price-card p {
        font-size: 13px;
        margin-bottom: 12px; /* ลดช่องว่างก่อนถึงปุ่มจอง */
    }

.price-card h3 { 
    font-size: 20px; 
    font-weight: bold; 
    color: #ffffff; 
    letter-spacing: 3px;
    filter: 
      drop-shadow(2px 0px 0px #000000) 
      drop-shadow(-1px 0px 0px #000000) 
      drop-shadow(0px 2px 0px #000000) 
      drop-shadow(0px -2px 0px #000000)
      drop-shadow(2px 2px 1px #000000);
    }

.price-card .price { 
    font-family: Arial Black;
    font-size: 28px; 
    color: #e44d26; 
    font-weight: bold; 
    margin-bottom: 8px; 
    }

.price-card ul { 
    list-style: none; 
    text-align: left; 
    font-size: 14px; 
    }

.price-card ul li::before { 
    content: "✓ "; 
    color: green; font-weight: bold; 
    }

/* ==========================================================================
   [3] TOUR TABLE SECTION (ตารางรายละเอียดทัวร์)
   ========================================================================== */
.tour-section { 
        /* 🎯 กำหนดช่องไฟด้านบน 10px เพื่อผลักให้ห่างจากกล่องข้อความ pricing-section ด้านบน */
        margin-top: 10px;         
        padding: 10px 5%; /* จัดการ Padding ภายในกล่องให้สมดุล */
        background-color: var(--light-bg, #f9f9f9);
     }

.tour-section h2 { /* バンコク発日帰貸切 */
    text-align: center;
    font-size: 30px; 
    font-weight: bold; 
    background: linear-gradient(to bottom, #11aa44, #ffff00); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
    filter: 
    drop-shadow(1px 0px 0px #ff0000) 
    drop-shadow(-1px 0px 0px #ff0000) 
    drop-shadow(0px 1px 0px #ff0000) 
    drop-shadow(0px -1px 0px #ff0000) 
    drop-shadow(2px 2px 0px #000000); 
    }

.tour-section p { /* 自由にカスタムも可能 */
        text-align:center; 
        font-size: 20px;
    /*    font-weight: bold; */
        font-family: sans-serif;
        margin-bottom:20px;
}
.table-responsive { 
    overflow-x: auto; 
    }

table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0;
    border: 2px solid #1b3280; 
    border-radius: 8px; 
    background: #fff; 
    min-width: 700px; 
    }

td { 
    border: 1px solid #ddd; 
    padding: 10px; 
    text-align: left; 
    }

th { 
    background: var(--secondary-color);
    text-align: center;
    color: #fff; 
    }

.tour-img { 
    width: 120px; 
    height: auto; 
    border-radius: 4px; 
    display: block; 
    }
/* ราคาในตารางทัวร์ */
.price-col { 
    font-family: "Arial Black";
    font-size: 25px;
    font-weight: bold; 
    color: #e44d26;
    text-align: center; 
    white-space: nowrap; 
    }

/* ==========================================================================
   RESPONSIVE FOR MOBILE (ควบคุมระยะชิดบนหน้าจอมือถือ)
   ========================================================================== */
    @media (
        max-width: 380px) {
        .main-hero {
            padding: 18px 15px !important; /* 🎯 บีบระยะขอบบนมือถือให้บางลงกระชับหน้าจอ */
        }

        .main-hero h1 { 
            font-size: 18px !important; 
            margin-bottom: 6px !important;
        }

        .main-hero p {
            font-size: 13px !important;
        }

        .line-btn {
            margin-top: 12px !important; /* 🎯 ระยะห่างปุ่มบนมือถือขยับขึ้นมาชนชิดพอดีๆ */
            width: 85%; 
            padding: 8px 20px !important;
            font-size: 13px;
        }
    
        .pricing-section { 
            padding: 15px 15px !important; /* บีบขอบบน-ล่างบนมือถือให้บางลงอีก */
        }

        .section-title { 
            font-size: 20px !important; 
            margin-bottom: 10px !important;
        } 

        .pricing-grid { 
            flex-direction: column; 
            align-items: center; 
            gap: 10px !important; /* จัดให้กล่องราคาบนมือถือต่อกันสนิทขึ้น */
        }

        .price-card { 
            width: 100% !important; 
            padding: 15px !important; /* ลดความบวมของกล่องราคาบนมือถือ */
        }

        .tour-section {
            /* 🎯 ล็อกระยะห่าง 10px ให้คงที่เสมอกันแม้เปิดบนหน้าจอมือถือ */
            margin-top: 10px !important; 
            padding: 20px 15px !important;
        }

        .tour-section h2 {
            font-size: 18px !important;
            margin-bottom: 12px !important;
        }
    }