/* ==========================================================================
   [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; 
}


.main-hero h1 {  /* 自分たちだけの  */
        font-size: 24px; /* ปรับลดขนาดตัวอักษรลงเล็กน้อยเพื่อให้ดูสมดุลกับพื้นที่ */
        font-weight: bold;
        margin-top: 8px;
        margin-bottom: 8px; /* 🎯 ลดระยะห่างด้านล่างของหัวข้อหลักให้กระชับเข้าหาคำอธิบาย */
        line-height: 1.3;
}

.main-hero p { 
    font-size: 18px; 
    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(--secondary-color); 
}
    /* 🎯 ปรับปุ่มให้เว้นระยะห่างจากข้อความด้านบนแบบพอดีๆ */
    .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(25px, 4vw, 40px); /* แก้ไขไวยากรณ์ผิดพลาดจากโค้ดเดิม */
    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 {
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); 
}

.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; 
}

/* ==========================================================================
   [4] FOOTER
   ========================================================================== */
footer { 
    background: var(--secondary-color); 
    color: #888; 
    text-align: center; 
    padding: 20px; 
    font-size: 14px; 
}