/* General Resets & Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
   }

body {
    font-family: 'Prompt', sans-serif; /* Font หลัก */
    line-height: 1.85;
    color: #333;
    background-color: #f8f8f8; /* พื้นหลังสีอ่อน */
    }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
   }

a {
    text-decoration: none;
    color: inherit;
    }

h1, h2, h3 {
     font-family: 'Sarabun', sans-serif; /* Font สำหรับหัวข้อ */
     margin-bottom: 20px;
     color: #0B4F6C; /* สีฟ้าเข้มสำหรับหัวข้อหลัก */
    }

h2 {
    font-size: 2.2em;
    text-align: center;
    margin-bottom: 40px;
    }

.section-padding {
     padding: 10px 0 60px 0;
    }


/* Header */
.main-header {
    background-color: #0B4F6C; /* Deep Ocean Blue */
    color: #fff;
    padding: 15px 0;
    width: 100%;
    position: sticky; 
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  
   }

.header-content {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    flex-wrap: nowrap;
   }

/* Header */
.menu-toggle {
     visibility: visible;
     opacity: 1;
     z-index: 9999;
     appearance: none;
     -webkit-appearance: none;
     border: 0;
     background: transparent;
     padding: 8px;
     width: 44px;
     height: 44px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: #fff;
     border-radius: 6px;
     line-height: 1;
    }

.header {
     display: flex;
     align-items: center;/* สำคัญมาก */
    }

/* ให้ header-actions อยู่ข้างหน้า (desktop) */
.header-actions {
     z-index: 2000;
    }

/* .header-actions .menu-toggle */
@media (min-width: 1025px) {
    .menu-toggle {
        display: none !important; /* ซ่อนเฉพาะตอนหน้าจอใหญ่กว่า 1025px */
    }
}

.nav-menu {
     display: flex;
     align-items: center;/* ← ตัวนี้แก้อาการในรูป */
     gap: 24px;
    }

.nav-menu ul {
     display: flex;
     align-items: center;
     gap: 24px;
     list-style: none;
     margin: 0;
     padding: 0;
    }

.nav-menu a {
     display: flex;
     align-items: center;
     height: 100%;
    }


.main-nav {
     flex-grow: 1; /* สำคัญ: ให้เมนูใช้พื้นที่ว่างตรงกลางทั้งหมด */
     text-align: right; /* จัดเมนูทั้งหมดไปทางขวาของพื้นที่ตัวเอง */
    }

.main-nav ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-wrap: nowrap; 
     justify-content: flex-end; /* จัดรายการเมนูไปทางขวา (เมื่อ .main-nav มี flex-grow) */
    }

.main-nav a {
     text-decoration: none;
     color: #FFFFFF;
     font-size: 16px;
     font-weight: 400;
     padding: 10px 18px; 
     transition: background-color 0.3s, color 0.3s;
     border-radius: 4px;
     margin: 2px;
    }

.main-nav a:hover,
.main-nav a.active {
     background-color: #387C62; /* Forest Green */
     color: #fff;
    }

.main-nav a.active {
     background-color: #387C62;
     color: #fff;
     font-weight: 600;
    }

.search-icon {
     color: #FFFFFF;
     font-size: 20px;
     padding: 10px;
     transition: color 0.3s;
    }

/* logo */
.logo a {
     display: flex;
     align-items: center;
     gap: 8px;
    }

.logo-icon {
     height: 32px;
     width: auto;
     display: block;
    }

.logo-text {
     line-height: 1;
    }

.logo {
     font-size: 28px;
     font-weight: 700;
     display: flex;
     align-items: center;
     color: #ddd;
    }

/* สไตล์สำหรับส่วนสไลด์พื้นหลัง */
.slideshow-container {
     position: absolute;
     inset: 0;
     z-index: 0;
    }

.hero-section {
     position: relative;
     z-index: 1;
   }

.slideshow-container .slide {
     width: 100%;
     height: 100%;
     object-fit: cover; /* ทำให้รูปภาพเต็มพื้นที่โดยไม่ผิดสัดส่วน */
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0; /* ซ่อนรูปภาพทั้งหมดไว้ก่อน */
     transition: opacity 1.5s ease-in-out; /* เพิ่ม Animation เวลาเปลี่ยนรูป */
    }

.slideshow-container .slide.active {
     opacity: 1; /* แสดงเฉพาะรูปภาพที่มี class active */
    }

/* Hero Section */
.hero-section {
     height: 550px;
     position: relative;
     color: white;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
    }


.hero-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,0.4);
     z-index: 1;
    }


.hero-section .container {
     position: relative; /* ให้เนื้อหาอยู่บน overlay */
     z-index: 2;
    }

.hero-section h1 {
     font-size: 3.5em;
     margin-bottom: 30px;
     text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
     color: white; /* หัวข้อ Hero เป็นสีขาว */
    }

.hero-search-bar {
     display: flex;
     justify-content: center;
     margin-bottom: 40px;
     width: 100%;
     max-width: 600px;
    }

.hero-search-bar input {
     width: 70%;
     padding: 12px 20px;
     border: none;
     border-radius: 5px 0 0 5px;
     font-size: 1.1em;
    }

.hero-search-bar button {
     width: 30%;
     background-color: #F7A31C; /* Sunset Orange (Accent) */
     color: white;
     border: none;
     padding: 12px 20px;
     border-radius: 0 5px 5px 0;
     cursor: pointer;
     font-size: 1.1em;
     transition: background-color 0.3s;
    }

.hero-search-bar button:hover {
     background-color: #E68A00;
    }

.hero-categories {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 20px;
    }

.hero-category-item {
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.4);
     color: white;
     padding: 15px 25px;
     border-radius: 8px;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 8px;
     transition: background-color 0.3s, transform 0.3s;
    }

.hero-category-item i {
     font-size: 2em;
    }

.hero-category-item:hover {
     background-color: rgba(255, 255, 255, 0.4);
     transform: translateY(-5px);
    }

.post-hero-container {
    max-width: 1200px;
    margin: 0 auto;
}


.post-hero-image-wrap {
    max-width: 1200px;
    margin: 0 auto 10px;
    padding: 0 10px;
}

.post-hero-cover {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
    display: block;
}


/* Dream Destination */
.dream-destination-slider-section {
     background-color: #0B4F6C; /* Deep Ocean Blue */
     padding: 80px 0;
     color: white;
    }

.dream-destination-slider-section .dream-title {
     color: white; /* หัวข้อเป็นสีขาว */
     margin-bottom: 10px;
    }

.dream-destination-slider-section .dream-subtitle {
     font-size: 1.1em;
     margin-bottom: 40px;
     text-align: center;
    }

.slider-container {
     position: relative;
     max-width: 1000px; /* ความกว้างสูงสุดของ Slider */
     margin: 0 auto;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }

.slider-wrapper {
     display: flex;
     transition: transform 0.5s ease-in-out; /* ทำให้การเลื่อนสมูท */
    }

.dream-slide {
     min-width: 100%; /* แต่ละสไลด์จะกว้างเท่ากับ container */
     position: relative;
     display: flex; /* ทำให้เนื้อหา overlay อยู่ตรงกลาง */
     justify-content: center;
     align-items: center;
    }

.dream-img {
     width: 100%;
     height: 500px; /* กำหนดความสูงของรูปภาพ */
     object-fit: cover;
     display: block;
    }

.dream-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.4); /* Overlay สีดำโปร่งใส */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 20px;
     text-align: center;
     color: white;
    }

.dream-overlay h3 {
     color: white;
     font-size: 2em;
     margin-bottom: 15px;
    }

.dream-overlay p {
     color: #E0F2F7; /* Light Aqua */
     font-size: 1.1em;
     margin-bottom: 25px;
     max-width: 600px;
    }


.btn-primary {
    display: inline-block;
     background-color: #F7A31C; /* Sunset Orange (Accent) */
     color: white;
     padding: 12px 35px;
     border-radius: 5px;
     font-weight: 600;
     text-transform: uppercase;
     transition: background-color 0.3s;
    }

.btn-primary:hover {
    background-color: #E68A00;
    }

/* Slider Controls (ปุ่มซ้าย-ขวา) */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    font-size: 1.5em;
    z-index: 10;
    border-radius: 5px;
    transition: background-color 0.3s;
   }

.slider-control:hover {
    background-color: rgba(0, 0, 0, 0.8);
   }

.prev-btn {
     left: 10px;
    }

.next-btn {
     right: 10px;
    }

/* Slider Dots (จุดบอกตำแหน่งสไลด์) */
.slider-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.dot.active,
.dot:hover {
    background-color: white;
    transform: scale(1.2);
}


/* Categories */
.categories-highlight h2 {
     color: #0B4F6C;
    }

.category-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
    }

.category-card {
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     text-align: center;
     transition: transform 0.3s ease;
    }

.category-card:hover {
     transform: translateY(-10px);
    }

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

.card-title {
     padding: 15px;
     font-size: 1.2em;
     font-weight: 600;
     color: #387C62; /* Forest Green */
    }

/* Featured Posts Section */
.featured-posts h2 {
     color: #0B4F6C;
    }

.post-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     font-family: "Prompt", sans-serif;
    }

.post-card {
     background-color: white;
     border-radius: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     transition: transform 0.3s ease;
    }

.post-card:hover {
     transform: translateY(-10px);
    }

.post-img {
     width: 100%;
     height: 220px;
     object-fit: cover;
    }

.post-info {
     padding: 20px;
    }

.post-info h3 {
     font-size: 1.4em;
     margin-bottom: 10px;
     color: #0B4F6C;
    }

.post-category {
     font-size: 0.9em;
     color: #666;
     margin-bottom: 15px;
    }


/* Videos Section */
.travel-videos h2 {
     color: #0B4F6C;
    }

.video-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 30px;
    }

.video-item {
     background-color: #fff;
     border-radius: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     padding-bottom: 15px;
     text-align: center;
    }

.video-item iframe {
     width: 100%;
     height: 250px; /* กำหนดความสูงของวิดีโอ */
     border: none;
    }

.video-item p {
     margin-top: 15px;
     font-weight: 600;
     color: #387C62;
    }

/* --- FEATURED GEAR SECTION --- */
.featured-gear {
     background-color: #FFFFFF; /* พื้นหลังสีขาว */
     padding: 60px 0;
    }

.featured-gear h2 {
     font-size: 28px;
     margin-bottom: 5px;
    }

.gear-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* แบ่งเป็น 4 คอลัมน์บนเดสก์ท็อป */
     gap: 30px;
     margin: 40px 0;
    }

.gear-card {
     display: block;
     text-decoration: none;
     color: #333;
     border: 1px solid #EEEEEE;
     border-radius: 8px;
     overflow: hidden;
     transition: box-shadow 0.3s, transform 0.3s;
     background-color: #FFFFFF;
    }

.gear-card:hover {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     transform: translateY(-5px);
    }

.gear-img {
     width: 100%;
     height: 180px; /* กำหนดความสูงรูปภาพ */
     object-fit: cover;
    }

.gear-info {
     padding: 15px;
     text-align: left;
    }

.gear-info h4 {
     font-size: 17px;
     font-weight: 700;
     margin-bottom: 5px;
     color: #2F667F; /* สีน้ำเงิน/เขียวเข้มของแบรนด์ */
    }

.gear-category {
     font-size: 13px;
     color: #999;
    }

/* --- Responsive สำหรับ Featured Gear --- */
@media (max-width: 1200px) {
    .gear-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 คอลัมน์บนแท็บเล็ต */
    }
}

/* Newsletter CTA Section */
.newsletter-cta {
    background-color: #E0F2F7; /* Light Blue for contrast */
    color: #0B4F6C;
    padding: 80px 0;
    text-align: center;
}

.newsletter-cta h2 {
    font-size: 2.5em;
    color: #0B4F6C;
}

.newsletter-cta p {
    font-size: 1.1em;
    margin-bottom: 30px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.newsletter-form input {
    flex-grow: 1;
    padding: 15px 20px;
    border: none;
    font-size: 1.1em;
}

.newsletter-form button {
    background-color: #F7A31C; /* Accent Color */
    color: white;
    padding: 15px 30px;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: 600;
    transition: background-color 0.3s;
}

.newsletter-form button:hover {
    background-color: #E68A00;
}

/* Social & Categories Section (แทนที่ Newsletter CTA) */
.social-and-categories-section {
    background-color: #E0F2F7; /* Light Blue for contrast */
    padding: 80px 0;
    color: #0B4F6C;
}

.social-and-categories-section h2 {
    color: #0B4F6C;
    text-align: left;
    margin-bottom: 20px;
    font-size: 2em;
}

.social-and-categories-section p {
    text-align: left;
    margin-bottom: 30px;
}

.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 คอลัมน์ขนาดเท่ากัน */
    gap: 60px; /* ระยะห่างระหว่าง 2 คอลัมน์หลัก */
    align-items: flex-start; /* จัดให้เนื้อหาเริ่มจากด้านบน */
}

/* Instagram Feed Widget */
.instagram-feed-widget {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.btn-follow-instagram {
    display: inline-block;
    background-color: #E1306C; /* Instagram Pink */
    color: white;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    margin-bottom: 30px;
    transition: background-color 0.3s;
}

.btn-follow-instagram:hover {
    background-color: #C1235A;
}

.instagram-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* รูป Instagram 3 คอลัมน์ */
    gap: 10px;
}

.insta-img {
    width: 100%;
    height: 100px; /* กำหนดความสูงให้เท่ากัน */
    object-fit: cover;
    border-radius: 5px;
    transition: transform 0.3s ease;
}

.insta-img:hover {
    transform: scale(1.05);
}

/* Featured Categories Widget */
.featured-categories-widget {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.category-grid-small {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* หมวดหมู่ 2 คอลัมน์ */
    gap: 20px;
}

.category-card-small {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #f8f8f8;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, transform 0.3s;
}

.category-card-small:hover {
    background-color: #eaf7fc; /* Light hover background */
    transform: translateY(-5px);
}

.card-img-small {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
}

/* Contact Page Specific Styles */
.contact-page-container {
    padding-top: 50px;
    padding-bottom: 80px;
}

.contact-header {
    text-align: center;
    margin-bottom: 50px;
}

.contact-header h1 {
    font-size: 3em;
    color: #0B4F6C; /* Deep Ocean Blue */
}

.contact-header p {
    font-size: 1.1em;
    color: #666;
}

.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* Form กว้างกว่า Info */
    gap: 50px;
    align-items: flex-start;
}

/* Contact Form Styles */
.contact-form-widget,
.contact-info-widget {
    background-color: white;
    padding: 35px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.main-form h3 {
    color: #387C62; /* Forest Green */
    margin-bottom: 25px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Sarabun', sans-serif;
    font-size: 1em;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #F7A31C; /* Sunset Orange on focus */
    outline: none;
}

.btn-submit {
    background-color: #387C62; /* Forest Green */
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-submit:hover {
    background-color: #0B4F6C; /* Deep Ocean Blue on hover */
}

/* Search Results Page Specific Styles */
.search-results-header h1 {
    /* ใช้สไตล์เดียวกับ category.html h1 */
}

/* Inline Search Form inside Results Header */
.search-form-inline {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    max-width: 500px;
}

.search-form-inline input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    font-family: 'Sarabun', sans-serif;
}

.btn-search-inline {
    background-color: #F7A31C; /* Sunset Orange */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-search-inline:hover {
    background-color: #0B4F6C; /* Deep Ocean Blue */
}

/* 404 Page Specific Styles */
.body-404 {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f7f7f7;
    margin: 0;
    text-align: center;
}

.not-found-container {
    max-width: 600px;
    padding: 40px;
    background-color: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.error-icon {
    font-size: 4em;
    color: #F7A31C; /* Sunset Orange */
    margin-bottom: 20px;
}

.not-found-container h1 {
    font-size: 6em;
    color: #0B4F6C; /* Deep Ocean Blue */
    margin: 0;
    line-height: 1em;
}

.not-found-container h2 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 20px;
}

.not-found-container p {
    color: #666;
    margin-bottom: 30px;
}

.error-actions {
    margin-bottom: 30px;
}

.btn-404 {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    margin: 5px;
    transition: opacity 0.3s;
}

.btn-404.primary {
    background-color: #387C62; /* Forest Green */
    color: white;
}

.btn-404.secondary {
    background-color: #E0F2F7;
    color: #0B4F6C;
    border: 1px solid #0B4F6C;
}

.search-form-404 {
    display: flex;
    justify-content: center;
    gap: 5px;
    max-width: 400px;
    margin: 10px auto;
}

.search-form-404 input {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px;
    flex-grow: 1;
    font-family: 'Sarabun', sans-serif;
}

.search-form-404 button {
    background-color: #F7A31C;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
}

/* Category Page Layout (ใช้ Layout 2 คอลัมน์ คล้าย Post Detail) */
.category-layout {
    display: grid;
    grid-template-columns: 3fr 1fr; /* รายการบทความ 3 ส่วน, Sidebar 1 ส่วน */
    gap: 40px;
    padding-top: 20px;
}

/* Category Header */
.category-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #E0F2F7;
}

.category-header h1 {
    font-size: 2.5em;
    color: #0B4F6C;
    margin-bottom: 10px;
}

.category-description {
    color: #666;
    font-size: 1.1em;
}

/* Post List Item Style (แบบ List) */
.post-list-item {
    display: flex;
    gap: 25px;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #ccc;
    align-items: flex-start;
}

.list-item-image {
    width: 250px; /* กำหนดขนาดภาพ */
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.post-list-item:hover .list-item-image {
    transform: scale(1.02);
}

.list-item-content {
    flex-grow: 1;
}

.list-item-content h2 {
    font-size: 1.6em;
    margin-top: 0;
    margin-bottom: 10px;
}

.list-item-content h2 a {
    color: #387C62; /* Forest Green */
    transition: color 0.3s;
}

.list-item-content h2 a:hover {
    color: #F7A31C; /* Sunset Orange */
}

.post-meta-list {
    font-size: 0.9em;
    color: #999;
    margin-bottom: 15px;
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #F7A31C; /* Sunset Orange */
    border-bottom: 2px solid #F7A31C;
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 12px;
    margin-top: 14px;
    border-radius: 5px;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(247, 163, 28, 0.35);
    transition: 
     background-color 0.3s ease,
     transform 0.2s ease,
     box-shadow 0.3s ease;

    }

.btn-read-more:hover {
    color: #0B4F6C;
    border-bottom-color: #0B4F6C;
}


/* Sidebar Styles (ใช้ร่วมกับ Post Detail ได้) */
.category-sidebar {
    /* ใช้ Sidebar styles ร่วมกับ post-detail */
}

.filter-widget {
    background-color: #E0F2F7;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.filter-widget h3 {
    color: #0B4F6C;
    margin-bottom: 15px;
}

.filter-dropdown {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Sarabun', sans-serif;
}

.ad-space {
     text-align: center;
     background-color: #eee;
     padding: 50px 20px;
     border-radius: 8px;
     color: #666;
     font-style: italic;
    }


/* Pagination Style */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #0B4F6C;
    background: #fff;
    border: 1px solid #ddd;
    transition: all 0.25s ease;
}

/* เลขหน้า */
.pagination .page-link:hover,
.pagination .page-link.active {
    background: #0B4F6C;
    color: #fff;
    border-color: #0B4F6C;
}

/* ก่อนหน้า / ถัดไป */
.pagination .prev-page,
.pagination .next-page {
    font-weight: 600;
}


/* About Page Specific Styles */
.about-page-container {
    padding-top: 50px;
    padding-bottom: 80px;
}

.about-hero {
    text-align: center;
    margin-bottom: 60px;
}

.about-hero h1 {
    font-size: 3.5em;
    color: #0B4F6C;
}

.about-hero p {
    font-size: 1.2em;
    color: #387C62;
    font-weight: 600;
}

.section-divider {
    border: none;
    border-top: 3px solid #E0F2F7;
    margin: 60px 0;
}

/* Story Section (Two Columns) */
.story-section {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 40px;
}

.story-content {
    flex: 1;
}

.story-section h2 {
    font-size: 2.2em;
    color: #F7A31C; /* Sunset Orange */
    margin-bottom: 20px;
}

.story-section p {
    line-height: 1.8;
    margin-bottom: 20px;
}

.story-image {
    width: 40%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Mission Section (Grid) */
.mission-section h2 {
    font-size: 2.5em;
    color: #0B4F6C;
    margin-bottom: 40px;
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.mission-card {
    padding: 30px;
    background-color: #f4faff;
    border-radius: 10px;
    border-bottom: 4px solid #387C62;
}

.icon-large {
    font-size: 3em;
    color: #387C62;
    margin-bottom: 15px;
}

.mission-card h3 {
    color: #0B4F6C;
    margin-bottom: 10px;
}

/* Team/Profile Section */
.team-section h2 {
    font-size: 2.5em;
    color: #0B4F6C;
    margin-bottom: 40px;
}

.team-profile {
    max-width: 500px;
    margin: 0 auto;
    padding: 40px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.profile-avatar {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #E0F2F7;
    margin-bottom: 15px;
}

.profile-role {
    font-style: italic;
    color: #666;
    margin-bottom: 15px;
}

.profile-social {
    margin-top: 15px;
}

.social-icon-small {
    font-size: 1.5em;
    color: #0B4F6C;
    margin: 0 10px;
    transition: color 0.3s;
}

.social-icon-small:hover {
    color: #F7A31C;
}


/* ================================================= */
/* 1. CATEGORY HERO (ส่วนหัวของหน้าหมวดหมู่) */
/* ================================================= */

.category-hero {
     background-color: #F0F5F8; /* สีพื้นหลังอ่อนๆ */
     padding: 40px 0;
     text-align: center;
     border-bottom: 2px solid #E0E0E0;
    }

.category-hero .breadcrumb {
     font-size: 14px;
     color: #666;
     margin-bottom: 10px;
    }

.category-hero .breadcrumb a {
     color: #2F667F; /* สีลิงก์แบรนด์ */
     text-decoration: none;
    }

.category-hero .breadcrumb span {
     font-weight: 600;
     color: #333;
    }

.category-hero h1 {
     font-size: 36px;
     color: #004D66;
     margin-bottom: 15px;
     font-weight: 700;
    }

.category-hero h1 i {
     margin-right: 10px;
     color: #387C62; /* สีไอคอน */
    }

/* ใช้กับ list/category ทั่วไป */
.category-description {
     color: #666;
     font-size: 1.1em;
    }

/* ใช้เฉพาะ hero */
.category-hero .category-description {
     font-size: 17px;
     color: #555;
     max-width: 800px;
     margin: 0 auto;
    }


/* ================================================= */
/* 2. MAIN CONTENT GRID (บทความหลักและ Sidebar) */
/* ================================================= */

.category-content-main {
     padding-top: 50px;
     padding-bottom: 50px;
    }

.main-content-grid {
     display: grid;
    /* แบ่ง 3 คอลัมน์: บทความ 2 ส่วน (fr), Sidebar 1 ส่วน (fr) */
     grid-template-columns: 2fr 1fr; 
     gap: 40px;
     align-items: start;
    }

/* --- A. Article List Column --- */
.article-list-column {
    /* ใช้พื้นที่ 2/3 ของหน้าจอ */
    }

.post-card-large {
     display: flex;
     margin-bottom: 40px;
     border: 1px solid #EAEAEA;
     border-radius: 8px;
     overflow: hidden;
     background-color: #FFFFFF;
     transition: box-shadow 0.3s;
     padding: 20px 10px;
    }

.post-card-large:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.post-img-large {
     width: 250px; /* กำหนดขนาดภาพ */
     height: 150px;
     object-fit: cover;
     border-radius: 8px;
     transition: transform 0.3s ease;
     flex-shrink: 0;
    }

.post-info-large {
     width: 60%; /* ข้อมูลใช้ 60% ของพื้นที่ */
     padding: 0 20px;
    }

.category-tag {
     display: inline-block;
     background-color: #387C62; 
     color: #FFFFFF;
     font-size: 12px;
     font-weight: 600;
     padding: 4px 10px;
     border-radius: 5px;
     margin-bottom: 10px;
     text-transform: uppercase;
    }

.post-info-large h2 {
     font-size: 24px;
     line-height: 1.3;
     color: #333;
     margin-bottom: 10px;
    }

.post-info-large p {
     font-size: 16px;
     color: #555;
     margin-bottom: 20px;
    }

/* --- B. Sidebar Column --- */
.sidebar-column {
    /* ใช้พื้นที่ 1/3 ของหน้าจอ */
    }

.widget {
     background-color: #FFFFFF;
     padding: 20px;
     margin-bottom: 30px;
     border: 1px solid #EAEAEA;
     border-radius: 8px;
    }

.widget h3 {
     font-size: 20px;
     color: #333;
     border-bottom: 2px solid #EAEAEA;
     padding-bottom: 10px;
     margin-bottom: 20px;
    }

/* Search Form */
.sidebar-search-form {
     display: flex;
   }

.sidebar-search-form input {
     flex-grow: 1;
     padding: 10px;
     border: 1px solid #CCCCCC;
     border-right: none;
     border-radius: 5px 0 0 5px;
    }

.sidebar-search-form button {
     background-color: #2F667F;
     color: #FFFFFF;
     border: none;
     padding: 10px 15px;
     border-radius: 0 5px 5px 0;
     cursor: pointer;
    }

/* Popular Posts List */
.popular-posts-list {
     list-style: none;
     padding: 0;
    }

.popular-posts-list li {
     padding: 8px 0;
     border-bottom: 1px dotted #EAEAEA;
    }

.popular-posts-list li a {
     color: #555;
     text-decoration: none;
     font-size: 15px;
    }

.ad-space p {
     color: #AAA;
     font-style: italic;
     margin-bottom: 10px;
    }

.ad-img {
     width: 100%;
     height: auto;
     max-width: 300px; 
    }

/* ================================================= */
/* 2. RESPONSIVE FOR CATEGORY PAGE */
/* ================================================= */

/* Layout สำหรับหน้าบทความ (Post Detail) */
.post-layout {
     display: grid;
     grid-template-columns: 3fr 1fr; /* คอลัมน์หลัก 3 ส่วน, Sidebar 1 ส่วน */
     gap: 40px;
     padding-top: 20px;
     align-items: start;
   }

.post-page-container {
     background-color: #F8F8F8; /* พื้นหลังสีเทาอ่อนสำหรับคอนเทนเนอร์ใหญ่ */
}   

.post-main-content {
     background-color: #FFFFFF;
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    }

.post-main-content p {
     font-size: 18px;
     line-height: 1.85;
     color: #333;
     margin-bottom: 1.4em;
    }

.post-main-content h2 {
     font-size: 26px;
     margin: 2.2em 0 0.8em;
    }

.post-main-content h3 {
     font-size: 22px;
     margin: 2em 0 0.6em;
   }

.post-gallery {
     margin: 2.5rem 0;
    }

.post-gallery img {
     width: 100%;
     height: auto;
     border-radius: 14px;
     margin-bottom: 1.3rem;
    }

.post-gallery figcaption {
     font-size: 14px;
     color: #666;
     text-align: center;
    }

/* ================================================= */
/* 3. POST HEADER & META */
/* ================================================= */
.breadcrumbs {
     font-size: 14px;
     color: #888;
     margin-bottom: 15px;
    }

.breadcrumbs a {
    color: #2F667F;
    text-decoration: none;
}
.breadcrumbs span {
     color: #333;
     font-weight: 600;
    }

.post-hero h1 {
     font-family: 'Prompt', sans-serif;
     font-size: 44px;
     line-height: 1.2;
     color: #004D66;
     margin-bottom: 20px;
     font-weight: 700;
    }

.post-main-content h1 {
     font-size: 2.5em;
     color: #0B4F6C;
     margin-bottom: 20px;
    }

.post-meta span {
     margin-right: 15px;
    }

.post-meta i {
     margin-right: 5px;
     color: #387C62;
    }

.post-hero-image {
     width: 100%;
     height: auto;
     max-height: 480px;
     object-fit: cover;
     border-radius: 8px;
     margin-bottom: 40px;
    }

.post-meta {
     font-size: 14px;
     color: #888;
    }

/* list */
.post-meta--list {
     margin-bottom: 15px;
    }

/* detail */
.post-meta--detail {
     margin-bottom: 30px;
     padding-bottom: 15px;
     border-bottom: 1px dashed #E0E0E0;
    }

/* ================================================= */
/* 4. POST BODY CONTENT (เนื้อหา) */
/* ================================================= */
.post-body h2 {
     font-size: 28px;
     color: #2F667F;
     margin-top: 35px;
     margin-bottom: 15px;
     border-left: 4px solid #FFA500; 
     padding-left: 15px;
    }

.post-body p {
     font-family: 'Sarabun', sans-serif;
     font-size: 18px;
     line-height: 1.75;
     color: #333;
     margin-bottom: 25px;
    }

.post-inline-image {
     max-width: 100%;
     height: auto;
     margin: 20px 0;
     border-radius: 6px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }

.post-body ul, .post-body ol {
     margin: 15px 0 25px 25px;
     font-family: 'Sarabun', sans-serif;
     font-size: 17px;
     line-height: 1.7;
     color: #444;
   }

/* ================================================= */
/* 5. SHARE BUTTONS */
/* ================================================= */

.post-share {
     margin-top: 40px;
     padding-top: 25px;
     border-top: 1px dashed #E0E0E0;
    }

.post-share p {
     font-size: 16px;
     font-weight: 600;
     color: #333;
     margin-bottom: 10px;
    }

.social-share-buttons {
     display: flex;
     gap: 15px;
    }

.share-btn {
     display: inline-flex;
     align-items: center;
     padding: 10px 18px;
     border-radius: 5px;
     color: #FFFFFF;
     font-size: 15px;
     font-weight: 600;
     text-decoration: none;
     transition: opacity 0.3s, transform 0.1s;
    }

.share-btn i {
     margin-right: 8px;
    }

.share-btn.facebook { background-color: #3b5998; }
.share-btn.twitter { background-color: #1da1f2; }
.share-btn.line { background-color: #00c300; }

.share-btn.x-twitter {
     background-color: #000000; /* สีพื้นหลังสีดำ */
     color: #ffffff;
     padding: 8px 15px;
     border-radius: 5px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: opacity 0.3s;
    }

.share-btn.x-twitter:hover {
     opacity: 0.8;
    }

/* ส่วนเรื่องที่เกี่ยวข้อง - ปรับชื่อไม่ให้ซ้ำ */
.rel-section {
     padding: 30px 0;
     margin-top: 40px;
    }

.rel-header {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 20px;
     color: #333;
     text-align: left;
    }

.rel-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ */
     gap: 20px;
    }

.rel-box a {
     text-decoration: none;
     display: block;
    }

.rel-img {
     width: 100%;
     aspect-ratio: 16 / 9; /* คุมขนาดรูปให้เท่ากันทุกรูป */
     overflow: hidden;
     border-radius: 4px;
     margin-bottom: 10px;
    }

.rel-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.3s;
    }

.rel-box:hover img {
     transform: scale(1.05); /* เวลาเมาส์ชี้จะซูมรูปนิดหน่อย */
    }

.rel-text {
     font-size: 16px;
     line-height: 1.4;
     color: #333;
     margin: 0;
     font-family: 'Sarabun', sans-serif;
    }

/* ================================================= */
/* 6. SIDEBAR WIDGETS */
/* ================================================= */
.post-sidebar .sidebar-widget {
     background-color: #FFFFFF;
     padding: 20px;
     margin-bottom: 30px;
     border-radius: 8px;
     box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    }

.post-sidebar .sidebar-widget h3 {
     font-size: 20px;
     color: #004D66;
     border-bottom: 2px solid #E0E0E0;
     padding-bottom: 10px;
     margin-bottom: 15px;
    }

/* Author Box */
.author-box {
     background: #fdfdfd;
     border: 1px solid #eee;
     padding: 25px;
     border-radius: 12px;
     text-align: center; /* หรือเลื่อนไปทางซ้ายตามใจชอบ */
    }

.author-avatar {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     object-fit: cover;
     margin-bottom: 15px;
     border: 3px solid #ffcc00; /* ใส่สีประจำเว็บรอบรูป */
    }

.author-name {
     font-family: 'Prompt', sans-serif;
     font-weight: 600;
     font-size: 1.2rem;
     margin-bottom: 5px;
    }

.author-bio {
     font-size: 0.95rem;
     line-height: 1.6;
     color: #555;
     margin-bottom: 15px;
    }

.btn-read-more-about {
     color: #ffcc00;
     text-decoration: none;
     font-weight: 600;
     font-size: 0.9rem;
    }

/* Popular Posts Widget */
.popular-post-item {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     margin-bottom: 20px;
     transition: 0.3s;
    }

.popular-post-item:hover .post-title {
     color: #ffcc00; /* เปลี่ยนสีข้อความเมื่อเอาเมาส์วาง */
    }

.thumb-img {
     width: 100px;
     height: 90px;
     object-fit: cover;
     border-radius: 8px; /* ทำมุมโค้งมนให้น่ารัก */
     flex-shrink: 0; /* ป้องกันรูปภาพถูกบีบ */
    }

.post-title {
     font-size: 0.95rem;
     color: #333;
     line-height: 1.4;
     font-weight: 500;
    }

/* เลือกไปที่ ul ในส่วนของ popular-posts */
.popular-posts ul {
     list-style: none; /* คำสั่งนำจุด Bullet ออก */
     padding: 0;      /* นำระยะห่างด้านซ้ายออกเพื่อให้รูปชิดขอบ */
     margin: 0;
   }

.sidebar-adsense {
     margin: 20px 0;
    }

.sidebar-adsense ins {
     max-width: 100%;
     height: auto;
     display: block;
   }

.agoda-side{
     border:1px solid #eee;
     background:#fff7f0;
     padding:16px;
     border-radius:12px;
     margin-bottom:24px;
   }

.agoda-side-title{
     font-weight:700;
     font-size:1.1rem;
     margin-bottom:10px;
   }

.agoda-side p{
     font-size:0.9rem;
     color:#555;
     margin-bottom:12px;
    }

.agoda-side-btn{
     display:block;
     text-align:center;
     background:#e12d2d;
     color:#fff;
     padding:10px;
     border-radius:8px;
     text-decoration:none;
     font-weight:600;
    }

.agoda-side-btn:hover{
     background:#c82323;
    }

/* จัดการกล่องรวม */
.affiliate-ad {
     display: flex;
     flex-direction: column;
     gap: 15px;
   }

/* จัดวางรูปซ้าย ข้อความขวา */
.affiliate-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-bottom: 12px;
     border-bottom: 1px dashed #eee; /* เส้นคั่นบางๆ */
    }

.affiliate-item:last-child {
     border-bottom: none;
    }

/* ป้องกันรูปโดนกินขอบ */
.ad-image-small {
     width: 70px;
     height: 70px;
     object-fit: cover; /* รูปไม่เบี้ยวแน่นอน */
     border-radius: 8px;
     flex-shrink: 0;
   }

.ad-info p {
     font-size: 0.9rem;
     margin: 0 0 5px 0;
     line-height: 1.3;
    }

/* ปรับปุ่มให้ขนาดเล็กลงเข้ากับ Sidebar */
.btn-affiliate-small {
     display: inline-block;
     background-color: #f1c40f; /* สีเหลืองทานตะวัน */
     color: #333;
     padding: 4px 10px;
     border-radius: 15px;
     text-decoration: none;
     font-size: 0.75rem;
     font-weight: bold;
    }

.season-list {
    list-style-type: disc;
    padding-left: 20px; /* สำคัญมาก */
   }

.season-list li {
     margin-bottom: 1rem;
   }



/* Footer */
.main-footer {
     background-color: #387C62; /* Forest Green */
     color: white;
     padding: 40px 0;
     text-align: center;
    }

.footer-links a {
     color: white;
     margin: 0 15px;
     font-size: 0.95em;
     transition: text-decoration 0.3s;
    }

.footer-links a:hover {
     text-decoration: underline;
    }

.social-links {
     margin: 20px 0;
     font-size: 1.5em;
    }

.social-links a {
     color: white;
     margin: 0 10px;
     transition: color 0.3s;
    }

.social-links a:hover {
     color: #F7A31C; /* Highlight social icons on hover */
    }

.main-footer p {
     font-size: 0.9em;
     opacity: 0.8;
    }



/* ================================================= */
/* tablet.css: Styles for Max-width: 992px (Tablet Portrait and smaller) */
/* ================================================= */
/* Responsive tablet*/
@media (max-width: 992px) {

.header-content {
     justify-content: space-between;
     align-items: flex-start; /* เพื่อให้โลโก้และปุ่มอยู่ด้านบน */
     padding: 0 10px; /* ลด Padding ด้านข้างเล็กน้อย */
   }

.main-nav {
    position: static;
    transform: none;
    opacity: 1;
    background: none;
   }

/* 2. ลดขนาด Font และ Padding ในเมนูย่อยลง */
.main-nav a {
     font-size: 15px; /* ลดขนาด Font เล็กน้อย */
     padding: 8px 12px; /* ลด Padding เพื่อลดความกว้างรวม */
     margin: 1px;
   }
    
.menu-toggle {
     display: none !important; /* ต้องซ่อนปุ่ม Hamburger ในโหมด Tablet นี้ */
    }
    
.search-icon {
     font-size: 18px; /* ลดขนาดไอคอนค้นหาลง */
    }

/* 4. จัดการปัญหาสุดท้าย: ถ้าเมนูยังซ้อนกัน ให้เมนูเป็นแบบ Scrollable */
.main-nav ul {
     flex-wrap: nowrap;
    /* ถ้าเมนูยาวเกินไป: ทำให้สามารถเลื่อนเมนูในแนวนอนได้ (ไม่แนะนำถ้าไม่จำเป็น) */
    /* overflow-x: auto; */
    }


/* 2. LAYOUTS (เปลี่ยนจาก 2/3 คอลัมน์ เป็น 1 คอลัมน์) */
.main-content-grid, 
.category-layout, 
.post-layout,
.contact-grid {
     grid-template-columns: 1fr; /* 1 คอลัมน์ */
     gap: 30px;
   }

/* 3. ABOUT PAGE LAYOUTS */
.two-column-grid,
.story-section {
     grid-template-columns: 1fr;
     display: flex;
     flex-direction: column;
     text-align: center;
    }

.story-image {
     width: 100%;
    }

.mission-grid {
     grid-template-columns: 1fr; /* Mission card เป็น 1 คอลัมน์ */
    }

/* 4. FOOTER */
.footer-grid {
    grid-template-columns: 1fr 1fr; /* 2 คอลัมน์บนแท็บเล็ต */
    }

.footer-col:nth-child(4) { /* ย้ายคอลัมน์ที่ 4 (Contact/Newsletter) มาขึ้นบรรทัดใหม่ */
     grid-column: 1 / span 2;
    }

/* 5. POST DETAIL */
.related-post-grid {
     grid-template-columns: repeat(2, 1fr); /* แสดง 2 คอลัมน์บนแท็บเล็ต */
    }
}



/* ================================================= */
/* MOBILE: Styles for Max-width 768px */
/* ================================================= */
@media (max-width: 768px) {

  :root {
    --header-height: 56px;
  }

  body.nav-open {
    overflow: hidden;
  }

  /* ================= Header ================= */
  .header-content {
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
  }

  .logo-icon {
    width: 36px;
    height: auto;
  }

  /* Touch targets */
  .menu-toggle,
  .search-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 8px;
    font-size: 22px;
    cursor: pointer;
    color: #fff;
    z-index: 3000;
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 3000;
  }

  /* ================= Mobile Nav ================= */
  .main-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    background-color: #0B4F6C;
    transform: translateY(-110%);
    transition: transform 300ms ease, opacity 200ms;
    opacity: 0;
    z-index: 1500;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top);
    display: block;
  }

  .main-nav.active {
    transform: translateY(0);
    opacity: 1;
  }

  .main-nav::before {
    content: "";
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: rgba(0,0,0,0.35);
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms;
    z-index: 1490;
  }

  .main-nav.active::before {
    opacity: 1;
  }

  .main-nav ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-nav li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .main-nav a {
    display: block;
    width: 100%;
    padding: 16px 20px;
    color: #fff;
    text-decoration: none;
  }

  .menu-toggle[aria-expanded="true"] {
    color: #ffd;
  }

  .menu-toggle i {
    font-size: 22px;
    color: inherit;
  }

  /* ================= Layout ================= */
  .gear-grid,
  .video-grid,
  .category-grid-small,
  .footer-grid,
  .related-post-grid,
  .rel-container {
    grid-template-columns: 1fr;
  }

  .post-card-large {
    flex-direction: column;
  }

  .post-img-large {
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

  .post-info-large {
    width: 100%;
  }

  .post-list-item,
  .list-item-image {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .list-item-image {
    width: 100%;
    height: auto;
  }

  /* ================= Typography ================= */
  .hero-section h1 {
    font-size: 2.5em;
  }

  .post-hero h1 {
    font-size: 32px;
  }

  .hero-categories {
    flex-wrap: wrap;
  }

  /* ================= Share ================= */
  .social-share-buttons {
    flex-direction: column;
    align-items: center;
  }

  .share-btn {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }

  /* ================= Misc ================= */
  .agoda-side {
    position: sticky;
    top: 90px;
  }
}


@media (min-width: 769px) and (max-width: 992px) {
  .menu-toggle {
    display: none !important;
  }
}