@import url('https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');



/* Button colors */
/* เพิ่มชื่ออีก ถ้าต้องการเปลี่ยนสี*/
:root {
    --colorShadeA: #fff; /* สี Font*/
    --colorShadeB: #96B0EA; /* สี ขอบ ชั้น 1*/ /* สี ขอบ ชั้น 2*/ /* สี BG ชั้น 3*/ 
    --colorShadeC: #566089; /* สี BG ชั้น 2*/
    --colorShadeD: #7b9de6; /* สีตอน Hover*/
    --colorShadeE: #5c79c8; /* สี BG ชั้น 1*/

    --colorShadeF: #ffcf33;


    --colorTextHover: rgb(255, 255, 255); /* สีข้อความสว่าง */
}

body {
    margin: 0;
    font-family: "Kodchasan", serif;
    height: 95vh; /* Full height */
    width: 100%; /* Full width */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center; /* Center the content vertically */
    align-items: center; /* Center the content horizontally */
    gap: 30px; /* Increase space between the logo and buttons */
    position: relative; /* Make body the relative parent for absolute children */
}

.logo img {
    max-width: 800px; /* Set the max width for the logo */
    height: auto; /* Ensure the logo scales proportionally */
}

/* Central content styling */
.content {
    text-align: center; /* Center the text */
}

/*Fonts*/
h1 {
    font-weight: 700; /* Bold */
}
h2 {
    font-weight: 600; /* Semi-bold */
}
h3 {
    font-weight: 400;
}
h4 {
    font-weight: 300;
    font-size: 25px;
    margin: 5px; 
}
.highlight {
    font-weight: 200; /* Extra-light */
}

/* Buttons */
.setting-page .button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeC); /* สี BG ชั้น 2*/
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--colorShadeB)/* สี ขอบ ชั้น 2*/, 0 0.5em 0 0 var(--colorShadeB); /* สี BG ชั้น 3*/
    transform: translate3d(0, 0.5em, -0.5em);
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

.setting-page .button:hover {
    background: var(--colorShadeD);
    transform: translate(0, 0.25em);
    color: var(--colorTextHover);
}

.setting-page .button:hover::before {
    transform: translate3d(0, 0em, -0.5em);
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.2em 0 0 var(--colorShadeB);
}

.setting-page .button:focus {
    outline: 3px solid var(--colorFocus);
}

.setting-page .button:active {
    transform: translate(0, 0.5em);
    box-shadow: none;
}

/* Menu page */
.menu-page .button {
    position: relative; /* ปุ่มในหน้า Menu ไม่ใช้ absolute */
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.8rem;
    color: var(--colorShadeA); /* สี Font*/
    font-weight: 400;
    padding: 1em 2em;
    border: 2px solid var(--colorShadeB); /* สี ขอบ ชั้น 1*/
    border-radius: 1em;
    background: var(--colorShadeE); /* สี BG ชั้น 1*/
    transform-style: preserve-3d;
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
    width: auto;
    max-width: 300px;
    margin: 5px 0; 

}

.menu-page .button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeC); /* สี BG ชั้น 2*/
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--colorShadeB)/* สี ขอบ ชั้น 2*/, 0 0.5em 0 0 var(--colorShadeB); /* สี BG ชั้น 3*/
    transform: translate3d(0, 0.5em, -0.5em);
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

.menu-page .button:hover {
    background: var(--colorShadeD);
    transform: translate(0, 0.25em);
    color: var(--colorTextHover);
}

.menu-page .button:hover::before {
    transform: translate3d(0, 0em, -0.5em);
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.2em 0 0 var(--colorShadeB);
}

.menu-page .button:focus {
    outline: 3px solid var(--colorFocus);
}

.menu-page .button:active {
    transform: translate(0, 0.5em);
    box-shadow: none;
}

/* Start game page (Map) */
.map-page .button .visitRoomButton { /*หน้า select ยังเปลี่ยนตัวปุ่มให้เหมือนตัวอื่น ๆ ไม่ได้*/
    color: var(--colorShadeA); /* สี Font*/
    border: 2px solid var(--colorShadeB); /* สี ขอบ ชั้น 1*/
    background: var(--colorShadeE); /* สี BG ชั้น 1*/
}

.map-page .button {
    position: relative;
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.8rem;
    color: var(--colorShadeA);
    font-weight: 400;
    padding: 1em 2em;
    border: 2px solid var(--colorShadeB);
    border-radius: 1em;
    background: var(--colorShadeE);
    transform-style: preserve-3d;
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
    width: auto;
    max-width: 300px;
    margin: 5px 0; 
}

.map-page .button-left {
    position: absolute; /* ปุ่มในหน้า Map ใช้ absolute */
    bottom: 30px;
    left: 20px;
}

.map-page .button-right {
    position: absolute; /* ปุ่มในหน้า Map ใช้ absolute */
    bottom: 30px;
    right: 20px;
}

.map-page .button-upleft {
    position: absolute;
    top: 20px;          /* ระยะจากด้านบน */
    left: 20px;         /* ระยะจากด้านซ้าย */
}

.map-page .button-upright {
    position: absolute; /* ปุ่มในหน้า Map ใช้ absolute */
    top: 20px;
    right: 20px;
}

.map-page .button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeC); /* สี BG ชั้น 2*/
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--colorShadeB)/* สี ขอบ ชั้น 2*/, 0 0.5em 0 0 var(--colorShadeB); /* สี BG ชั้น 3*/
    transform: translate3d(0, 0.5em, -0.5em);
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

.map-page .button:hover {
    background: var(--colorShadeD);
    transform: translate(0, 0.25em);
    color: var(--colorTextHover);
}

.map-page .button:hover::before {
    transform: translate3d(0, 0em, -0.5em);
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.2em 0 0 var(--colorShadeB);
}

.map-page .button:focus {
    outline: 3px solid var(--colorFocus);
}

.map-page .button:active {
    transform: translate(0, 0.5em);
    box-shadow: none;
}

/* About us page */
.aboutus-page .button {
    position: absolute; /* ปุ่มในหน้า Map ใช้ absolute */
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--colorShadeA);
    font-weight: 400;
    padding: 1em 2em;
    border: 2px solid var(--colorShadeB);
    border-radius: 1em;
    background: var(--colorShadeE);
    transform-style: preserve-3d;
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
    width: auto;
    max-width: 300px;
    margin: 5px 0; 
}

.aboutus-page .button-left {
    width: auto;
    height: 30px;
    bottom: 30px;
    left: 20px;
}

.aboutus-page .button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeC); /* สี BG ชั้น 2*/
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--colorShadeB)/* สี ขอบ ชั้น 2*/, 0 0.5em 0 0 var(--colorShadeB); /* สี BG ชั้น 3*/
    transform: translate3d(0, 0.5em, -0.5em);
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

.aboutus-page .button:hover {
    background: var(--colorShadeD);
    transform: translate(0, 0.25em);
    color: var(--colorTextHover);
}

.aboutus-page .button:hover::before {
    transform: translate3d(0, 0em, -0.5em);
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.2em 0 0 var(--colorShadeB);
}

.aboutus-page .button:focus {
    outline: 3px solid var(--colorFocus);
}

.aboutus-page .button:active {
    transform: translate(0, 0.5em);
    box-shadow: none;
}

/* Setting page */
.setting-page .content {
    display: flex;
    flex-direction: column;
    text-align: center;
    height: 90vh; /* หรือใช้ 100vh ตามต้องการ */
    justify-content: space-between; /* กระจายเนื้อหา */
    margin-bottom: 0; 
}

/* ปุ่ม Reset อยู่ใน Container */
.reset-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* ดันปุ่มไปล่าง */
    margin-bottom: 20px; /* เพิ่มช่องว่างจากขอบล่าง */
}

.setting-page .button {
    position: absolute; /* ปุ่มในหน้า Map ใช้ absolute */
    display: inline-block;
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--colorShadeA);
    font-weight: 400;
    padding: 1em 2em;
    border: 2px solid var(--colorShadeB);
    border-radius: 1em;
    background: var(--colorShadeE);
    transform-style: preserve-3d;
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
    width: auto;
    max-width: 300px;
    margin: 5px 0; 
}

.setting-page .button-left {
    width: auto;
    height: 30px;
    bottom: 30px;
    left: 20px;
}

.setting-page .reset-button {
    font-size: 1.5rem;
    background: var(--colorShadeE);
    color: var(--colorShadeA);
    border: 2px solid var(--colorShadeA);
    max-width: 300px;
}

.setting-page .button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeC); /* สี BG ชั้น 2*/
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--colorShadeB)/* สี ขอบ ชั้น 2*/, 0 0.5em 0 0 var(--colorShadeB); /* สี BG ชั้น 3*/
    transform: translate3d(0, 0.5em, -0.5em);
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

.setting-page .button:hover {
    background: var(--colorShadeD);
    transform: translate(0, 0.25em);
    color: var(--colorTextHover);
}

.setting-page .button:hover::before {
    transform: translate3d(0, 0em, -0.5em);
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.2em 0 0 var(--colorShadeB);
}

.setting-page .button:focus {
    outline: 3px solid var(--colorFocus);
}

.setting-page .button:active {
    transform: translate(0, 0.5em);
    box-shadow: none;
}

.setting-item {
    margin: 10px 0;
    display: flex; /* ใช้ Flexbox */
    align-items: center; /* จัดให้อยู่ตรงกลางแนวตั้ง */
    justify-content: space-between; /* กระจายพื้นที่ระหว่างหัวข้อกับตัวควบคุม */
}

.setting-item h2 {
    margin: 0;
    flex-shrink: 0; /* ป้องกันข้อความถูกบีบ */
    text-align: left; /* ชิดซ้าย (default) */
    margin-right: 200px;
}

.setting-item .control-group {
    display: flex; /* ใช้ Flexbox สำหรับ Toggle และ Label */
    align-items: center; /* จัดให้อยู่ตรงกลางแนวตั้ง */
    gap: 30px; /* เว้นระยะระหว่าง toggle และ label */
}

.setting-item label, 
.setting-item input[type="range"] {
    margin: 0;
    flex-grow: 1; /* ให้คอนโทรลขยายเต็มพื้นที่ */
}

.setting-item input[type="range"] {
    margin-left: auto; /* ดัน Range Slider ให้ชิดขวา */
    flex-grow: 1; /* ให้ Range Slider ปรับความกว้างตามพื้นที่ */
    max-width: 200px; /* จำกัดขนาดสูงสุดเพื่อความสมดุล */
}

/* Game play page */
/* จัด layout ปุ่มแบบ Grid 4 อัน*/
.gameplay-page .button-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 คอลัมน์ */
    gap: 40px; /* ระยะห่างระหว่างปุ่ม */
    justify-content: center; /* จัดปุ่มอยู่กึ่งกลาง */
    align-items: center; /* จัดปุ่มในแนวตั้ง */
    width: auto;
    max-width: 90%;
    margin: 20px auto;
}

.gameplay-page .button {
    display: flex; /* ใช้ flex สำหรับจัดวางรูปและข้อความ */
    align-items: center; /* จัดไอคอนกับข้อความให้อยู่ตรงกลางแนวตั้ง */
    justify-content: center; /* จัดให้อยู่ตรงกลางแนวนอน */
    cursor: pointer;
    outline: none;
    border: 0;
    vertical-align: middle;
    text-decoration: none;
    font-size: 1.8rem;
    color: var(--colorShadeA);
    font-weight: 400;
    padding: 1em 3em; /* ลด padding ด้านข้างเพื่อเว้นที่สำหรับรูป */
    border: 2px solid var(--colorShadeB);
    border-radius: 1em;
    background: var(--colorShadeE);
    transform-style: preserve-3d;
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
    width: 350px;
    height: 50px;
    text-align: center;
    word-wrap: normal;
    white-space: normal;
    gap: 10px; /* ระยะห่างระหว่างไอคอนและข้อความ */
}

.gameplay-page .button img.button-element {
    width: 80px; /* ขนาดของไอคอน */
    height: auto;
    border-radius: 5px; /* มุมมน */
}

.gameplay-page .button-upleft {
    position: absolute;
    padding: 0.5em 0em;
    width: 170px;
    height: 30px;
    top: 20px;
    left: 20px;
}

.gameplay-page .button-right {
    position: absolute;
    padding: 0.5em 0em;
    width: 52px;
    height: 50px;
    top: 20px;
    right: 20px; /* ย้ายไปฝั่งขวา */
}

.gameplay-page .button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeC); /* สี BG ชั้น 2*/
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--colorShadeB)/* สี ขอบ ชั้น 2*/, 0 0.5em 0 0 var(--colorShadeB); /* สี BG ชั้น 3*/
    transform: translate3d(0, 0.5em, -0.5em);
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

.gameplay-page .button:hover {
    background: var(--colorShadeD);
    transform: translate(0, 0.25em);
    color: var(--colorTextHover);
}

.gameplay-page .button:hover::before {
    transform: translate3d(0, 0em, -0.5em);
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.2em 0 0 var(--colorShadeB);
}

.gameplay-page .button:focus {
    outline: 3px solid var(--colorFocus);
}

.gameplay-page .button:active {
    transform: translate(0, 0.5em);
    box-shadow: none;
}

.gameplay-page .button.correct {
    background-color: #4CAF50; /* สีเขียว */
    transition: background-color 0.3s ease;
}

.gameplay-page .button.incorrect {
    background-color: #F44336; /* สีแดง */
    transition: background-color 0.3s ease;
}

.gameplay-page .button:disabled {
    background-color: #ccc; /* สีปุ่มที่ถูกปิด */
    color: #666; /* สีข้อความที่ดูจางลง */
    pointer-events: none; 
    opacity: 0.6;
}

@media (max-width: 600px) {
    .button {
        font-size: 1.2rem;
        padding: 0.8em 1.5em;
    }
}
/* --------------------------- */


/* จัด layout สำหรับ gameplay เลือกหลาย choices */
.gameplay-page .button-grid-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* ปรับความยืดหยุ่น */
    gap: 25px; /* ระยะห่างระหว่างปุ่ม */
    justify-content: center; /* จัดกึ่งกลางแนวนอน */
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    width: 100%;
    max-width: 1200px; /* ขยายขนาดตามที่ต้องการ */
    margin: 0 auto;
}

.gameplay-page .button-choices {
    height: 70px;
    width: 100%; /* ใช้เต็มความกว้างของคอลัมน์ */
    max-width: 700px; /* กำหนดขนาดสูงสุด */
    padding: 1em;
    box-sizing: border-box;

    /* สไตล์พื้นฐาน */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--colorShadeB);
    border-radius: 1em;
    background: var(--colorShadeE);
    color: var(--colorShadeA);
    font-size: 1.3rem;
    text-align: center;
    transform-style: preserve-3d;
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

/* ปุ่มยืนยันคำตอบ */
.gameplay-page .button-submit-answer {
    position: fixed;
    bottom: 10px;
    right: 10px; /* เปลี่ยนจาก left เป็น right และกำหนดระยะห่างจากขอบขวา */
    width: 180px;
    height: 55px;
    background-color: #28a745;
    border: none;
    border-radius: 10px;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;

        /* จัดให้อยู่ตรงกลาง */
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
}

/* เพิ่มเอฟเฟกต์เมื่อ hover */
.gameplay-page .button-submit-answer:hover {
    background-color: rgb(45, 124, 63);
}

.button-choices::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--colorShadeC);
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.5em 0 0 var(--colorShadeB);
    transform: translate3d(0, 0.5em, -0.5em);
    transition: all 175ms cubic-bezier(0, 0, 1, 1);
}

.button-choices:hover {
    background: var(--colorShadeD);
    transform: translate(0, 0.25em);
    color: var(--colorTextHover);
}

.button-choices:hover::before {
    transform: translate3d(0, 0em, -0.5em);
    box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.2em 0 0 var(--colorShadeB);
}

.button-choices:focus {
    outline: 3px solid var(--colorFocus);
}

.button-choices:active {
    transform: translate(0, 0.5em);
    box-shadow: none;
}

/* สไตล์สำหรับปุ่มที่ถูกเลือก */
.button-choices.selected {
    background: var(--colorShadeF); /* สีพื้นหลังใหม่เมื่อเลือก */
    border: 2px solid var(--colorShadeA);
    transform: translate(0, 0.25em); /* ปรับความสูง */
    color: var(--colorTextHover); /* เปลี่ยนสีข้อความ */
}

.button-choices.selected::before {
    transform: translate3d(0, 0em, -0.5em); /* เลียนแบบ hover */
    box-shadow: 0 0 0 2px var(--colorShadeA), 0 0.2em 0 0 var(--colorShadeA);
}

/* สีสำหรับปุ่มตอบถูก */
.button-choices.correct {
    background-color: #4CAF50 !important; /* สีเขียว */
    transition: background-color 0.3s ease;
}

/* สีสำหรับปุ่มตอบผิด */
.button-choices.incorrect {
    background-color: #F44336 !important; /* สีแดง */
    transition: background-color 0.3s ease;
}

/* --------------------------- */
.sortable-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    background-color: #96B0EA;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.sortable-item {
    padding: 10px;
    background-color: #4F67BF;
    color: white;
    border-radius: 5px;
    cursor: grab;
    text-align: center;
    font-size: 1.15rem;
}

.sortable-item:hover{
    background-color: #ffcf33;
    color: black;
    font-weight: 800;
    transform: translate(0, 0.1em);
}

.sortable-item.dragging {
    opacity: 0.5;
}

.sortable-item.correct {
    background-color: #4CAF50; /* สีเขียว */
    transition: background-color 0.3s ease;
}

.sortable-item.incorrect {
    background-color: #F44336; /* สีแดง */
    transition: background-color 0.3s ease;
}

/* --------------------------- */

.image-container {
    display: flex;
    justify-content: center; /* จัดให้อยู่ตรงกลางแนวนอน */
    text-align: center;
    margin: 15px 0;
    width: 100%; 
    height: 350px; /* ความสูงของ container */
    position: relative;
    overflow: hidden; /* ซ่อนส่วนที่เกิน */
}

.gif-container {
    width: 100%; 
    height: auto;
    border-radius: 10px;
    display: block; 
    object-fit: contain; /* ให้ภาพหรือ GIF อยู่ใน container โดยไม่ถูกครอบ */
}

.gif-container img.show {
    display: block; /* แสดง GIF เมื่อเพิ่ม class "show" */
}

.wrong-image {
    width: 100%; 
    height: auto;
    border-radius: 10px; 
}

.wrong-answer {
    width: 100%; 
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.wrong-answer .button {
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* VDO สอดแทรกหลังตอบคำถาม */
.fullscreen-video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fullscreen-video {
    width: 90%;
    max-width: 1200px;
    max-height: 80%;
    object-fit: contain;
    margin-bottom: 10px;
}

.next-button.hidden {
    display: none;
}

.next-button {
    display: block;
}

.center{
    text-align: center;
}

/* สำหรับซ่อนเนื้อหา */
.hidden { 
    display: none; 
} 

/* ล็อกด่าน */
.locked {
    pointer-events: none; 
    opacity: 0.5; 
    cursor: not-allowed; 
}

/* ปลดล็อกด่าน */
.unlocked {
    opacity: 1; 
    cursor: pointer;
}

.swal2-confirm {
    font-family: 'Kodchasan', sans-serif !important;
    font-size: 18px !important;
}

/* Increase popup size */
.large-popup {
    width: 85vw !important;  /* Use 85% of viewport width */
    max-width: 1300px !important; /* Increase max-width */
    padding: 20px !important; /* Add padding for spacing */
}

/* Make the image scale properly */
#tutorial-image {
    display: block;
    width: 100% !important;
    max-width: 800px !important; /* Allow bigger image */
    height: auto !important;
    margin: 15px auto;
}

.custom-close-button {
    font-size: 40px !important; /* ✅ ปรับขนาดใหญ่ขึ้น */
    color: rgb(213, 213, 213) !important; /* 🔴 เปลี่ยนสีเป็นแดง */
    top: 10px !important; /* 🔼 ปรับตำแหน่ง */
    right: 15px !important; /* 🔽 ปรับตำแหน่ง */
    transition: transform 0.2s ease-in-out;
}

.custom-close-button:hover {
    transform: scale(1.3); /* 🎯 ขยายขนาดเมื่อ hover */
    color: rgb(222, 0, 0) !important; /* 🔴 เปลี่ยนสีเมื่อ hover */
}