@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&display=swap');

body {
    font-family: 'Kanit', sans-serif;
    color: #444444; /* Tailwind's gray-800 */
    background: linear-gradient(to right, #207a3e, #537a20);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5) !important; /* เงาที่เด่นชัด */
    position: relative;
    z-index: 10;
}

header nav ul li a {
    color: #478f5f; /* Green theme color */
    font-weight: bold; /* Make the text bold */
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
    text-decoration: none; /* ป้องกันการแสดงเส้นขีดล่าง */
    padding-bottom: 5px; /* เพิ่มระยะห่างด้านล่าง */
    font-size: 25px !important;
}

/* 1. เอาลูกศรสีดำออกจากเมนู Dropdown */
header nav ul li a.dropdown-toggle::after {
    display: none !important; /* ซ่อน pseudo-element ::after ที่สร้างลูกศร */
}

/* 2. ป้องกันไม่ให้พื้นหลังของเมนูหลักขยายเป็นสีขาวเมื่อโฮเวอร์ แต่ไม่ใช้กับ dropdown-toggle */
header nav ul li a:not(.dropdown-toggle):hover {
    background-color: transparent !important; /* กำหนดพื้นหลังให้โปร่งใสเมื่อโฮเวอร์ */
    transform: none !important; /* ลบการเพิ่มขนาดเมื่อโฮเวอร์ */
}

/* 3. ป้องกันไม่ให้พื้นหลังของเมนูย่อยขยายเป็นสีขาวเมื่อโฮเวอร์ */
header nav ul li .dropdown-menu a:hover {
    background-color: transparent !important; /* กำหนดพื้นหลังของเมนูย่อยให้โปร่งใสเมื่อโฮเวอร์ */
}

/* 4. กำหนดสีพื้นหลังของเมนู Dropdown เป็นสีขาว */
header nav ul li .dropdown-menu {
    background-color: #ffffff !important; /* ให้พื้นหลังของเมนู dropdown เป็นสีขาว */
}

/* 5. รักษาสไตล์การเพิ่มเส้นใต้และการเพิ่มขนาดเมื่อโฮเวอร์สำหรับลิงก์ที่ไม่ใช่ Dropdown */
header nav ul li a:not(.dropdown-toggle)::after {
    content: '';
    position: absolute;
    width: 0%; /* เริ่มต้นที่ 0% */
    height: 2px;
    bottom: 0; /* วางเส้นที่ด้านล่าง */
    left: 0;
    background-color: #207a3e; /* Green theme color */
    transition: width 0.3s ease; /* เพิ่มการเปลี่ยนแปลงที่ width */
}

header nav ul li a:not(.dropdown-toggle):hover {
    color: #478f5f !important; /* Slightly darker green for hover effect */
    transform: none !important; /* Ensure no scaling */
}

header nav ul li a:not(.dropdown-toggle):hover::after {
    width: 100%; /* เมื่อ hover เส้นจะขยายเต็ม */
}

/* 6. เพิ่มการขยายตัวของตัวอักษรสำหรับ dropdown-toggle เมื่อโฮเวอร์ */
header nav ul li a.dropdown-toggle:hover {
    transform: scale(1.05) !important; /* ขยายตัวอักษรเล็กน้อยเมื่อโฮเวอร์ */
    color: #478f5f !important; /* ปรับสีให้เข้มขึ้นเมื่อโฮเวอร์ */
}

/* 7. ลบขีดเส้นใต้และเพิ่มการขยายตัวเฉพาะสำหรับลิงก์ในเมนู dropdown */
header nav ul li .dropdown-menu a.dropdown-item {
    text-decoration: none !important; /* ป้องกันการขีดเส้นใต้ */
    background-color: transparent !important; /* ให้พื้นหลังโปร่งใส */
    transition: transform 0.3s ease, color 0.3s ease; /* เพิ่มการเปลี่ยนแปลงสำหรับการขยายตัวและสี */
}

header nav ul li .dropdown-menu a.dropdown-item::after {
    display: none !important; /* ซ่อน pseudo-element ::after ถ้ามี */
}

/* เพิ่มการขยายตัวของตัวอักษรและเปลี่ยนสีเมื่อโฮเวอร์ */
header nav ul li .dropdown-menu a.dropdown-item:hover {
    transform: scale(1.05) !important; /* ขยายตัวอักษรเล็กน้อยเมื่อโฮเวอร์ */
    color: #478f5f !important; /* เปลี่ยนสีให้เข้มขึ้นเมื่อโฮเวอร์ */
    text-decoration: none !important; /* ป้องกันไม่ให้มีขีดเส้นใต้ */
    background-color: transparent !important; /* ให้พื้นหลังยังคงโปร่งใส */
}

/* รักษาสไตล์เพิ่มเติมที่คุณมี */
main .content {
    background-color: #ffffff;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-wrapper {
    position: relative;
}

.text-overlay {
    position: absolute;
    bottom: -20px; /* ปรับให้อยู่ต่ำลง */
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 100%; /* จำกัดความกว้างของพื้นที่ข้อความ */
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #207a3e; /* สีเขียวตามธีม */
}

.text-with-background {
    font-size: 70px;
    font-weight: bold;
    background: url('images/text-bg-3.jpg') no-repeat center center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: cover;
    text-align: center;
    text-shadow: 5px 5px 4px rgba(0, 0, 0, 0.5); /* เพิ่มเงา */
}

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

/* สไตล์สำหรับลิงก์ 'อ่านต่อ' */
.read-more {
    color: #ffa600; /* สีส้มตามธีม */
    font-weight: bold;
    text-decoration: none;
    position: relative; /* จำเป็นสำหรับ 'stretched-link' */
    z-index: 1; /* ทำให้ลิงก์อยู่เหนือองค์ประกอบอื่น */
}

.read-more:hover {
    text-decoration: underline;
}

/* สไตล์สำหรับการ์ดที่คลิกได้ */
.news-card {
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เมื่อ hover */
}

.news-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเมื่อ hover */
}

/* --------------c-cider-------------------- */
.drink-section {
    display: flex;
    flex-direction: row; /* จัดเรียงแนวนอนในหน้าจอใหญ่ */
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
}

.drink-image {
    width: 1100px;
    position: relative;
    z-index: 2; /* ทำให้รูปภาพอยู่เหนือข้อความพื้นหลัง */
}

.text-box-with-image {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 3;
}

.shape-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.text-inside {
    position: relative;
    z-index: 2;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
}

/* การจัดตำแหน่งของกล่องข้อความในหน้าจอใหญ่ */
.text-top-left {
    top: 15%;
    left: 20%;
}

.text-middle-left {
    bottom: 35%;
    left: 5%;
}

.text-bottom-left {
    bottom: 5%;
    left: 10%;
}

.text-top-right {
    top: 15%;
    right: 20%;
}

.text-middle-right {
    bottom: 35%;
    right: 9%;
}

.text-bottom-right {
    bottom: 5%;
    right: 12%;
}

/* ปรับสำหรับหน้าจอขนาดเล็ก */
@media (max-width: 768px) {
    .drink-section {
        flex-direction: column; /* จัดเรียงเนื้อหาจากบนลงล่างในหน้าจอเล็ก */
        height: auto;
    }

    .drink-image {
        width: 100%; /* ให้รูปภาพเต็มหน้าจอ */
        margin-bottom: 20px;
    }

    .text-box-with-image {
        position: static; /* ยกเลิกการจัดตำแหน่งแบบ absolute */
        width: 100%; /* ให้กล่องเต็มหน้าจอ */
        height: auto;
        margin-bottom: 20px;
    }

    .shape-image {
        width: 100px; /* ปรับขนาดรูปภาพให้เล็กลงในมือถือ */
        height: 100px;
    }

    .text-inside {
        font-size: 14px; /* ปรับขนาดข้อความให้เล็กลงในหน้าจอมือถือ */
    }
}

/* เนื้อหาข่าว */
main.content {
    display: flex;
    justify-content: center; /* จัดแนวนอนให้ตรงกลาง */
    align-items: center;    /* จัดแนวตั้งให้ตรงกลาง (ถ้าจำเป็น) */
    padding: 50px 20px;     /* เพิ่มพื้นที่ว่างด้านบนและล่าง */
}

/* สไตล์สำหรับบทความข่าว */
.news-article {
    background-color: #ffffff; /* พื้นหลังสีขาว */
    padding: 30px;              /* ระยะห่างภายใน */
    border-radius: 10px;        /* มุมโค้งมน */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* เงากรอบ */
    max-width: 1200px;           /* ความกว้างสูงสุด */
    width: 100%;                /* ให้เต็มความกว้างภาชนะที่มี */
}

/* หัวข้อข่าว */
.news-title {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #207a3e;
    text-align: left;
}

/* วันที่ข่าว */
.news-date {
    font-size: 1.1em;
    color: #777777;
    text-align: left;
    margin-bottom: 20px;
}

/* รูปภาพข่าว */
.news-image {
    width: 100%;                 /* กำหนดความกว้างให้เต็มภาชนะที่อยู่ */
    max-width: 500px;            /* กำหนดความกว้างสูงสุด เพื่อไม่ให้ขยายใหญ่เกินไป */
    height: auto;                /* ปรับความสูงอัตโนมัติตามความกว้าง */
    border-radius: 10px;         /* มุมโค้งมน */
    margin: 0 auto 20px auto;    /* จัดให้อยู่ตรงกลางโดยใช้ margin auto */
    transition: transform 0.3s ease; /* เพิ่มการเปลี่ยนแปลงเมื่อ hover */
    display: block;              /* ทำให้รูปภาพเป็นบล็อกเพื่อให้ margin auto ทำงานได้ */
}

/* การปรับขนาดรูปภาพตามขนาดหน้าจอ */
@media (max-width: 1200px) {
    .news-image {
        max-width: 400px;        /* ลดความกว้างสูงสุดสำหรับหน้าจอขนาดกลาง */
    }
}

@media (max-width: 768px) {
    .news-image {
        max-width: 300px;        /* ลดความกว้างสูงสุดสำหรับหน้าจอขนาดเล็ก */
    }
    main.content {
        padding: 20px 10px; /* ลดพื้นที่ว่างสำหรับหน้าจอเล็ก */
    }

    .news-title {
        font-size: 1.5em;
    }

    .news-content {
        font-size: 1em;
    }
}

@media (max-width: 576px) {
    .news-image {
        max-width: 100%;          /* ให้รูปภาพเต็มความกว้างบนหน้าจอเล็ก */
    }
}

.news-image:hover {
    transform: scale(1.02);
}

/* เนื้อหาข่าว */
.news-content {
    font-size: 1.3em;
    line-height: 1.8;
    color: #555555;
}

.header-container {
    position: relative;
    height: 250px; /* กำหนดความสูงของส่วนหัว */
    overflow: hidden;
}

.header-container img {
    width: 100%; /* รูปภาพจะครอบคลุมความกว้างทั้งหมด */
    height: 100%; /* รูปภาพจะครอบคลุมความสูงทั้งหมด */
    object-fit: cover;
}

.header-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 50px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.news-gallery {
    margin-top: 20px;
    padding: 0 20px;
}

.gallery-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); /* คอลัมน์จะปรับขนาดตามพื้นที่หน้าจอ */
    gap: 15px; /* ระยะห่างระหว่างรูปภาพ */
}

.gallery-item {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้รูปภาพดูนูนขึ้น */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้ภาพครอบคลุม container โดยไม่บิดเบือน */
    transition: transform 0.3s ease; /* เพิ่มเอฟเฟกต์เวลาชี้ */
}

.gallery-item:hover img {
    transform: scale(1.05); /* ขยายภาพเมื่อชี้ */
}

/* สร้างความ responsive ให้แกลเลอรีที่ขนาดหน้าจอเล็ก */
@media (max-width: 600px) {
    .gallery-container {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* ปรับให้รูปภาพเล็กลงเมื่อหน้าจอเล็ก */
    }
}

/* สไตล์ของ footer */
.footer {
    background-color: #111827;
    color: #ffffff;
    padding: 40px 20px;
}

/* ใช้ Flexbox จัดการคอลัมน์ */
.footer-content {
    display: flex;
    flex-wrap: wrap; /* เพิ่ม flex-wrap เพื่อให้สามารถขึ้นบรรทัดใหม่ได้ */
    justify-content: space-between;
    align-items: flex-start; /* เปลี่ยนเป็น flex-start เพื่อให้เนื้อหาอยู่ด้านบน */
    gap: 20px; /* เพิ่มระยะห่างระหว่างคอลัมน์ */
}

/* คอลัมน์ซ้าย: โลโก้และชื่อบริษัท */
.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 1 300px; /* ปรับ flex-basis เป็น 300px */
}

/* โลโก้ทั้งสามแสดงในบรรทัดเดียวกัน */
.footer-logos {
    display: flex;
    flex-wrap: wrap; /* เพิ่ม flex-wrap */
    gap: 10px;
    margin-bottom: 10px;
}

.footer-logos img {
    max-width: 150px;
    height: auto;
}

.footer-left p {
    margin: 5px 0;
    line-height: 1.5;
    font-size: 18px; 
}

.footer-left a {
    color: #ffffff;
    text-decoration: none; 
}

/* จัดการ Flexbox ระหว่างคอลัมน์ 2 และ 3 */
.footer-links {
    display: flex;
    flex-wrap: wrap; /* เพิ่ม flex-wrap */
    justify-content: flex-start;
    flex: 1 1 300px; /* ปรับ flex-basis เป็น 300px */
    gap: 40px; /* ลดระยะห่างระหว่างคอลัมน์ */
}

/* สไตล์ของเมนูการนำทาง */
.footer-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.footer-nav li {
    margin-bottom: 10px;
}

.footer-nav a {
    font-size: 18px; /* ลดขนาดตัวอักษรลงเล็กน้อย */
    color: #ffffff;
    text-decoration: none;
}

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

/* Responsive สำหรับหน้าจอขนาดกลาง */
@media (max-width: 992px) {
    .footer-links {
        gap: 20px;
    }
}

/* Responsive สำหรับหน้าจอขนาดเล็ก */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer-left, .footer-links {
        flex: 1 1 100%; /* ให้แต่ละส่วนใช้พื้นที่เต็มความกว้าง */
        text-align: center;
    }

    .footer-logos {
        justify-content: center;
    }

    .footer-links {
        justify-content: center;
    }

    .footer-nav a {
        font-size: 16px;
    }
}

/* Responsive สำหรับหน้าจอขนาดเล็กมาก */
@media (max-width: 480px) {
    .footer-logos img {
        max-width: 120px;
    }

    .footer-left p {
        font-size: 16px;
    }

    .footer-nav a {
        font-size: 14px;
    }
}

/* Custom CSS for Multi-level Dropdown and Hover */
.dropdown-menu .dropdown-submenu {
    position: relative;
}

.dropdown-menu .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
}

/* Show the dropdown menu on hover for large screens */
@media (min-width: 992px) {
    /* Show first-level dropdown on hover */
    .nav-item.dropdown:hover > .dropdown-menu {
        display: block;
    }

    /* Show submenu on hover */
    .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }

    /* Optional: Add a small delay for smoother hover effect */
    .nav-item.dropdown > .dropdown-menu,
    .dropdown-menu .dropdown-submenu > .dropdown-menu {
        transition: all 0.3s ease;
        display: none;
    }

    .nav-item.dropdown:hover > .dropdown-menu,
    .dropdown-menu .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

.text-green{
    color: #207a3e;
}