/* CSS พื้นฐานสำหรับโหมดสว่าง */
body {
    font-family: 'Sriracha', cursive;
    background-color: #c9e7e0; /* พื้นหลังโหมดสว่าง */
    color: #1b1a1a; /* สีข้อความโหมดสว่าง */
    transition: background-color 0.3s ease, color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสีพื้นหลังและสีข้อความ */
    padding-top: 90px; /* เว้นระยะด้านบนเพื่อไม่ให้เนื้อหาชนกับเมนู */
    padding-left: 10px; /* เพิ่มระยะห่างด้านซ้าย */
    padding-right: 10px; /* เพิ่มระยะห่างด้านขวา */
}

/* โหมดมืด */
body.dark-mode {
    background-color: #1b1a1a; /* พื้นหลังโหมดมืด */
    color: #d4d0d0; /* สีข้อความโหมดมืด */
}

/* สไตล์สำหรับพื้นหลังของหน้า */
.background-image {
    background-image: url('https://cdn.pixabay.com/photo/2024/06/05/19/45/mountains-8811206_1280.jpg');
    background-size: cover; /* ทำให้ภาพเต็มพื้นที่ */
    background-position: center; /* จัดภาพให้อยู่ตรงกลาง */
    width: 100%;
    height: 100vh; /* ใช้ความสูงเต็มหน้าจอ */
    display: flex; /* ใช้ Flexbox จัดเรียงเนื้อหา */
    justify-content: center; /* จัดเนื้อหาให้อยู่กลางในแนวนอน */
    align-items: center; /* จัดเนื้อหาให้อยู่กลางในแนวตั้ง */
}

/* สไตล์สำหรับหัวข้อ */
h1 {
    font-size: 2.25rem; /* กำหนดขนาดฟอนต์ใหญ่สำหรับหัวข้อ */
    padding-top: 15px; /* เว้นระยะด้านบนเพื่อไม่ให้เนื้อหาชนกับเมนู */
    margin-bottom: 20px; /* เว้นระยะด้านล่าง */
    text-align: center; /* จัดข้อความให้อยู่กลาง */
}

/* สไตล์สำหรับข้อความเบื้องต้น */
.intro-text {
    max-width: 80%; /* จำกัดความกว้าง */
    margin: 0 auto; /* จัดให้อยู่กลาง */
    text-align: center; /* จัดข้อความให้อยู่กลาง */
    font-size: 1.125rem; /* ขนาดฟอนต์ */
    line-height: 1.6; /* ระยะห่างระหว่างบรรทัด */
    transition: color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสีข้อความ */
}

.mytool-sticky-logo {
        position: fixed;
        bottom: 20px;
        left: 15px;
        width: 150px; 
        background-color: #069179;
        height: auto;
        z-index: 1000;
        cursor: pointer;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 10px; 
}

    .mytool-sticky-logo:hover {
        opacity: 0.8; 
    }

    /* โหมดมืด */
body.dark-mode .mytool-sticky-logo {
    background-color: #222121; /* พื้นหลังโหมดมืด */
}

/* ปุ่มสลับโหมด */
.toggle-mode {
    position: fixed; /* ติดปุ่มที่ตำแหน่งเดิมเมื่อเลื่อน */
    top: 20px; /* ตำแหน่งด้านบน */
    right: 20px; /* ตำแหน่งด้านขวา */
    background-color: #008F7A; /* สีพื้นหลังของปุ่ม */
    color: white; /* สีข้อความ */
    border: none; /* ไม่มีกรอบ */
    padding: 10px 15px; /* ระยะห่างภายในปุ่ม */
    border-radius: 8px; /* มุมโค้ง */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นมือ */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
    transition: background-color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสีพื้นหลัง */
}

.toggle-mode:hover {
    background-color: #006F5A; /* เปลี่ยนสีปุ่มเมื่อวางเมาส์ */
}

/* Container สำหรับการ์ด */
.collection-01-container {
    width: 100%; /* ใช้ความกว้างเต็ม */
    max-width: 1500px; /* กำหนดความกว้างสูงสุด */
    margin: 20px auto; /* จัดให้อยู่กลางและเว้นระยะด้านบนล่าง */
}

/* ส่วนของการค้นหาและหมวดหมู่ */
.collection-01__search-box {
    width: 100%; /* ใช้ความกว้างเต็ม */
    max-width: 1200px; /* จำกัดความกว้างสูงสุด */
    display: flex; /* ใช้ Flexbox จัดเรียงกล่อง */
    justify-content: space-between; /* จัดกล่องให้อยู่ห่างกัน */
    align-items: center; /* จัดให้อยู่กลางในแนวตั้ง */
    gap: 15px; /* ระยะห่างระหว่างกล่อง */
    padding: 12px; /* ระยะห่างภายใน */
    border: 1px solid #a4c9c4; /* กรอบของกล่อง */
    border-radius: 10px; /* มุมโค้ง */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
    margin: 20px auto; /* จัดให้อยู่กลางและเว้นระยะด้านบนล่าง */
}

/* กล่องค้นหา */
.collection-01__search-input {
    font-family: 'Sriracha', cursive; /* กำหนดฟอนต์ */
    flex: 3; /* กล่องค้นหาใช้พื้นที่มากกว่ากล่องหมวดหมู่ */
    padding: 10px; /* ระยะห่างภายใน */
    border-radius: 10px; /* มุมโค้ง */
    border: 1px solid #0a705a; /* กรอบ */
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนกรอบและเงา */
}

/* เมื่อกล่องค้นหาได้รับโฟกัส */
.collection-01__search-input:focus {
    outline: none; /* ไม่มีเส้นขอบ */
    border-color: #00bcd4; /* เปลี่ยนกรอบเป็นสีฟ้า */
    box-shadow: 0 0 6px rgba(0, 188, 212, 0.3); /* เพิ่มเงาสีฟ้า */
    transform: scale(1.01); /* ขยายเล็กน้อย */
}

/* กล่องหมวดหมู่ */
.category-filter {
    font-family: 'Sriracha', cursive; /* กำหนดฟอนต์ */
    flex: 1; /* กล่องหมวดหมู่ใช้พื้นที่น้อยกว่ากล่องค้นหา */
    padding: 10px; /* ระยะห่างภายใน */
    border-radius: 10px; /* มุมโค้ง */
    border: 1px solid #ddd; /* กรอบ */
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนกรอบและเงา */
}

/* เมื่อกล่องหมวดหมู่ถูกโฟกัสหรือถูกเลือก */
.category-filter:hover,
.category-filter:focus {
    border-color: #8bc34a; /* เปลี่ยนกรอบเป็นสีเขียว */
    box-shadow: 0 0 6px rgba(139, 195, 74, 0.3); /* เพิ่มเงาสีเขียว */
    transform: scale(1.01); /* ขยายเล็กน้อย */
}

/* การ์ดรายการเครื่องมือ */
.collection-01__items {
    display: grid; /* จัดการ์ดเป็นกริด */
    gap: 20px; /* ระยะห่างระหว่างการ์ด */
    grid-template-columns: repeat(5, 1fr); /* แสดงการ์ดเป็นแถวละ 5 ใบ */
    list-style: none; /* ไม่มีเครื่องหมายจุด */
    justify-content: center; /* จัดให้อยู่กลาง */
    padding: 0 20px; /* ระยะห่างด้านข้าง */
    margin: 20px auto; /* จัดให้อยู่กลางและเว้นระยะด้านบนล่าง */
    max-width: 100%; /* ใช้ความกว้างเต็ม */
}

/* การ์ดแต่ละใบ */
.collection-01__item {
    list-style: none; /* ไม่มีเครื่องหมายจุด */
    background-color: #fff; /* พื้นหลังการ์ด */
    padding: 20px; /* ระยะห่างภายใน */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
    border-radius: 15px; /* มุมโค้ง */
    transition: transform 0.3s ease, background-color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสีพื้นหลังและการเคลื่อนไหว */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นมือ */
}

/* การ์ดที่มีการ hover */
.collection-01__item:hover {
    transform: translateY(-5px); /* ขยับขึ้นเล็กน้อย */
    background-color: #ebf5f1; /* เปลี่ยนสีพื้นหลัง */
}

/* โหมดมืดสำหรับการ์ด */
body.dark-mode .collection-01__item {
    background-color: #333; /* พื้นหลังการ์ดโหมดมืด */
    box-shadow: 0 4px 8px #fff(255, 255, 255, 0.1); /* เพิ่มเงาสีขาว */
}

body.dark-mode .collection-01__item:hover {
    background-color: #444; /* เปลี่ยนสีพื้นหลังเมื่อ hover */
}

/* หัวข้อของการ์ด */
.collection-01__title {
    font-size: 1.125rem; /* ขนาดฟอนต์ของหัวข้อ */
    font-weight: bold; /* ทำให้หนา */
    margin: 5px 0; /* ระยะห่างด้านบนและล่าง */
    display: flex; /* จัดเป็น flexbox */
    align-items: center; /* จัดให้อยู่กลางในแนวตั้ง */
    color: #333; /* สีข้อความ */
    transition: color 0.3s ease, text-shadow 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
}

/* โหมดมืดสำหรับหัวข้อของการ์ด */
body.dark-mode .collection-01__title {
    color: #ffffff; /* เปลี่ยนสีข้อความ */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.1); /* เพิ่มเงาสีขาว */
}

/* ข้อความของการ์ด */
.collection-01__text {
    font-size: 0.875rem; /* ขนาดฟอนต์ของข้อความ */
    color: #808080; /* สีข้อความ */
    margin: 0; /* ไม่มีระยะห่าง */
    transition: color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
}

/* โหมดมืดสำหรับข้อความของการ์ด */
body.dark-mode .collection-01__text {
    color: #e4dede; /* เปลี่ยนสีข้อความ */
}

/* รูปภาพในการ์ด */
.collection-01__thumbnail {
    height: auto; /* ขนาดความสูงอัตโนมัติ */
    width: 100%; /* ใช้ความกว้างเต็ม */
    border-radius: 10px; /* มุมโค้ง */
    margin-bottom: 10px; /* เว้นระยะด้านล่าง */
    display: block; /* แสดงเป็น block */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
}

/* โลโก้ในหัวข้อการ์ด */
.collection-01__logo {
    width: 30px; /* ความกว้าง */
    height: 30px; /* ความสูง */
    border-radius: 50%; /* มุมโค้งเต็ม */
    margin-right: 10px; /* เว้นระยะด้านขวา */
}

/* ลิงก์ในการ์ด */
.collection-01__item a {
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    color: inherit; /* ใช้สีตามองค์ประกอบหลัก */
    display: block; /* แสดงเป็น block */
}

.collection-01__item a:hover {
    text-decoration: none; /* ไม่มีขีดเส้นใต้ */
    color: #006400; /* เปลี่ยนสีเมื่อ hover */
}

/* ปุ่มกลับไปด้านบน */
.back-to-top {
    position: fixed; /* ติดปุ่มที่ตำแหน่งเดิมเมื่อเลื่อน */
    bottom: 20px; /* ตำแหน่งด้านล่าง */
    right: 20px; /* ตำแหน่งด้านขวา */
    display: none; /* ซ่อนเริ่มต้น */
    background-color: #008F7A; /* สีพื้นหลัง */
    color: white; /* สีข้อความ */
    border: none; /* ไม่มีกรอบ */
    border-radius: 50%; /* มุมโค้งเต็ม */
    width: 50px; /* ความกว้าง */
    height: 50px; /* ความสูง */
    text-align: center; /* จัดให้อยู่กลาง */
    cursor: pointer; /* เปลี่ยนเคอร์เซอร์เป็นมือ */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
    font-size: 18px; /* ขนาดฟอนต์ */
    z-index: 1000; /* ให้อยู่ด้านหน้าสุด */
    transition: background-color 0.3s ease; /* เพิ่มเอฟเฟกต์การเปลี่ยนสี */
}

.back-to-top:hover {
    background-color: #006F5A; /* เปลี่ยนสีเมื่อ hover */
}

/* โหมดมืดสำหรับ ปุ่มกลับไปด้านบน */
body.dark-mode .back-to-top {
    background-color: #c9ece7; /* พื้นหลังการ์ดโหมดมืด */
}

/* การตอบสนองสำหรับหน้าจอขนาดกลาง */
@media (max-width: 1200px) {
    .collection-01__items {
        grid-template-columns: repeat(3, 1fr); /* แสดงการ์ดแถวละ 3 ใบ */
    }
}

/* การตอบสนองสำหรับหน้าจอขนาดเล็ก */
@media (max-width: 768px) {
    .collection-01__items {
        grid-template-columns: repeat(2, 1fr); /* แสดงการ์ดแถวละ 2 ใบ */
    }

    .collection-01__search-box {
        flex-direction: column; /* จัดเรียงกล่องในแนวตั้ง */
        padding: 10px; /* ปรับระยะห่างภายใน */
        width: 100%; /* ขยายให้เต็มความกว้าง */
    }
}

/* การตอบสนองสำหรับหน้าจอขนาดเล็กมาก */
@media (max-width: 500px) {
    .collection-01__items {
        grid-template-columns: 1fr; /* แสดงการ์ดแถวละ 1 ใบ */
    }

    .collection-01__item {
        padding: 15px; /* ปรับระยะห่างภายใน */
    }
}

/*submit-tool */
.form-container {
    width: 50%;
    margin: 40px auto;
    padding: 20px;
    color: rgb(22, 19, 19);
    font-family: 'Sriracha', cursive;
}

.form-heading {
    text-align: center;
    margin-bottom: 20px;
}

.submit-tool-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 5px;
}

input, textarea {
    padding: 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    font-size: 1rem;
    color: #333;
}

input::placeholder, textarea::placeholder {
    color: #aaa;
}

.submit-button {
    font-family: 'Sriracha', cursive;
    background-color: #ff5733;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #e74c3c;
    transform: scale(1.005); /* ขยายเล็กน้อยเมื่อ hover */
}


.success-message {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #4CAF50;
    color: white;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    animation: fadeInOut 3s forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    10% {
        opacity: 1;
        transform: translateY(0);
    }
    90% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.policy-container {
    width: 70%;
    margin: 40px auto;
    padding: 30px; /* เพิ่ม padding เพื่อเพิ่มระยะห่าง */
    background-color: #f5f5f5; /* สีพื้นหลังจางๆ */
    color: #333;
    border-radius: 10px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    font-family: 'Sriracha', cursive;
}


.policy-heading {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
}

.policy-content {
    line-height: 1.8;
    font-size: 1.1rem;
    padding-left: 100px; /* เพิ่ม padding ซ้าย */
    padding-right: 100px; /* เพิ่ม padding ขวา */
}


.collection-01__screenshot {
  margin: 10px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.collection-01__screenshot img {
  width: 100%;
  height: auto;
  display: block;
}

.category-btn {
  border: none;
  border-radius: 12px;
  padding: 6px 14px;
  margin: 3px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.category-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.category-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
}