body { 
    font-family: "Kanit", "Sarabun", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    line-height: 1.6; /* เพิ่มระยะห่างบรรทัดให้อ่านง่ายขึ้น */
    color: #333;      /* สีตัวอักษรเทาเข้ม (อ่านสบายตากว่าสีดำสนิท #000) */ 
    overflow-y: auto !important; /* ให้ Scroll แนวตั้งได้ */
    overflow-x: hidden; /* ปิด Scroll แนวนอนกันภาพล้น */
    height: auto !important; /* ยกเลิกการบังคับสูงเต็มจอ */
    padding: 0; 
    margin: 0;
}
/* --- Dark Mode Styles --- */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

/* ปรับสี Header และ Footer */
body.dark-mode .header {
    background-color: #1f1f1f;
    border-bottom: 1px solid #333;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

body.dark-mode .footer {
    background-color: #1f1f1f;
}

/* ปรับสีปุ่มต่างๆ */
body.dark-mode button {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #444;
}

body.dark-mode button:hover {
    background-color: #3d3d3d;
}

body.dark-mode button.circal-btn {
    /*background-color: #2d2d2d;*/
    color: #ffffff;
    /*border-color: #444;*/
}

body.dark-mode button.circal-btn:hover {
    background-color: #3d3d3d;
}

/* ปรับสีกล่อง ViewerBox */
body.dark-mode .ViewerBox {
    background-color: #1f1b1b;
    border-color: #333;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ปรับสี Popup เริ่มต้น */
body.dark-mode #start-popup .box {
    background-color: #2d2d2d;
    color: #ffffff;
}

/* ปรับสีเมนูในมือถือ */
body.dark-mode .mobile-menu {
    background-color: #1f1f1f;
}

/* ปรับสี Link (ถ้ามี) */
.menu-bar a {
    text-decoration: none; /* ลบขีดเส้นใต้ */
    color: #333; /* สีตัวอักษร */
    padding: 8px 16px; /* ขนาดปุ่มตามเดิม */
    display: inline-block;
    border-radius: 4px;
    border: 1px solid transparent; /* หรือตาม class nonBorder */
    transition: background-color 0.3s;
}

.menu-bar a:hover {
    background-color: #e2e6ea;
}

/* Dark mode สำหรับลิงก์ */
body.dark-mode .menu-bar a {
    color: #ffffff;
}
body.dark-mode .menu-bar a:hover {
    background-color: #3d3d3d;
}

.menu-bar a.active {
    background-color: #c71027; /* สีแดงเลือดหมู (ธีม MFU) */
    color: #ffffff !important; /* ตัวหนังสือสีขาว */
    font-weight: 500;
    border-color: #c71027;
}

/* สำหรับ Dark Mode */
body.dark-mode .menu-bar a.active {
    background-color: #c71027; /* สีแดงสว่างขึ้นให้เห็นชัดในพื้นหลังดำ */
    color: #ffffff !important;
    border-color: #cf2d1e;
}

body.dark-mode #unity-canvas {
    background: #231F20; /* หรือสีที่คุณต้องการใน Dark mode */
}

#unity-container {
    position: relative !important; /* ยกเลิก Absolute */
    width: 100%;
    max-width: 960px; /* จำกัดความกว้างไม่ให้เกินขนาดเกม */
    margin: 20px auto 60px auto; /* เว้นระยะ: บน 20px / ล่าง 60px (ดัน Footer ออกไป) */
    clear: both; /* สั่งเคลียร์พื้นที่ ไม่ให้ใครมาลอยทับ */
    display: block;
}
#unity-container.unity-desktop { left: auto; top: auto; transform: none; width: 100%; height: 100%;}
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #ffffff; display: block; 
    margin: 0 auto; width: 100%; height: 100%}
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative; width: 100%; height: 40px; overflow: hidden; margin-bottom: auto;}
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

h1,
h2{
    margin-block: 12px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f8f9fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    flex-wrap: wrap;
}

.head-logo img {
    height: 60px;
    width: auto;
    display: block;
}

.menu-bar {
    display: flex;
    gap: 10px;
}

.header-mid {
    justify-content: center;
}

.header-right {
    justify-content: flex-end;
    width: auto;
    min-width: 140px;
}

button {
    padding: 8px 16px;
    border: 1px solid #dddddd;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
    border-radius: 4px;
    
}

button:hover {
    background-color: #e2e6ea;
}

button.circal-btn {
    /* 1. กำหนดขนาดให้เป็นสี่เหลี่ยมจัตุรัส (สำคัญมาก) */
    width: 40px; 
    height: 40px;

    /* 2. ทำขอบมน 50% หรือ 100% จะได้วงกลม */
    border-radius: 50%;
    
    /* 3. จัดตัวอักษรให้อยู่กึ่งกลางเป๊ะๆ */
    display: flex;
    justify-content: center; /* กลางแนวนอน */
    align-items: center;     /* กลางแนวตั้ง */
    
    /* 4. ตกแต่งอื่นๆ */
    border: 1px solid #dddddd;
    background-color: white;
    padding: 0; /* เอา padding ออกเพื่อให้ขนาดไม่เพี้ยน */
    cursor: pointer;
}

/* เพิ่ม Effect ตอนเอาเมาส์ชี้ */
button.circal-btn:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
}

.nonBorder
{
    border: 0px 
}
.nobBG
{
    background-color: rgba(255, 255, 255, 0);
}

/* ซ่อนปุ่ม Hamburger ในหน้าจอคอมพิวเตอร์ */
.hamburger {
    display: none; 
    font-size: 30px;
    cursor: pointer;
    padding: 5px;
}

.text-center{
    text-align: center;
}
.page-container{
    margin-block: 48px;
}
.container{
    margin-inline: 10%;
}

.ShowViewer {
    display: flex;
    align-items: center;

    justify-content: center; /* สั่งให้ลูกๆ (ViewerBox) มาอยู่ตรงกลาง */
    flex-wrap: wrap;         /* ถ้าหน้าจอเล็ก ให้ปัดลงบรรทัดใหม่ได้ (ไม่ล้นจอ) */

    margin-inline: 10%;
}

.ViewerBox {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    align-items: center;
    margin: 12px;
    margin-inline: max(12px, auto);
    padding: 8px 8px;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    width: 240px;

}

.Virtual-Tour {
    align-items: center;
}

/* --- CSS สำหรับมือถือ (หน้าจอเล็กกว่า 860px) --- */
@media screen and (max-width: 860px) {
    
    .header {
        flex-wrap: wrap; /* อนุญาตให้ตัดบรรทัด */
    }

    /* แสดงปุ่ม Hamburger */
    .hamburger {
        display: block;
        margin-left: auto; /* ดันไปขวาสุด */
    }

    /* ซ่อนเมนู (Mid และ Right) ในตอนแรก */
    .mobile-menu {
        display: none;
        width: 100%;   /* ขยายเต็มความกว้าง */
        text-align: center;
        margin-top: 10px;
        /*border-top: 1px solid #eee;*/
        padding-top: 10px;
    }

    /* จัดปุ่มข้างในให้เป็นแนวตั้ง */
    .mobile-menu .menu-bar {
        flex-direction: column; /* เรียงปุ่มลงมาเป็นแนวตั้ง */
        width: 100%;
        gap: 10px;
    }

    .mobile-menu button {
        width: 100%; /* ปุ่มกว้างเต็มจอ กดง่าย */
        padding: 12px;
    }

    .mobile-menu button.circal-btn {
        width: 100%;
        height: 40px;
        padding: 12px;
        border: 0px solid rgba(255, 255, 255, 0);
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0);
    }

    .mobile-menu button.circal-btn:hover {
        background-color: #e2e6ea;
    }

    /* --- สถานะเมื่อเปิดเมนู (Class .open) --- */
    .header.open .mobile-menu {
        display: flex;     /* แสดงเมนูเมื่อมี Class open */
        flex-direction: column;
        animation: slideDown 0.3s ease-out; /* (Optional) ใส่ Animation ให้ลื่น */
    }

    .header-right {
        margin: 0%;
        width: 100%;
    }

    .ShowViewer {
        display: block;
        padding-inline: auto;
    }

    .ViewerBox {
        width: auto;
    }
}

.col {
    display: block;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #c71027;
    box-shadow: 0 2px -4px rgba(0,0,0,0.1);
    color:#ffffff;
}

.footer-logo img {
    height: 165px;
    width: auto;
    display: block;
}

.center-page{
    margin: auto;
}

/* Animation ตอนเปิด */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* สำหรับ popup*/
#start-popup {
  /* เปลี่ยนจาก fixed เป็น absolute */
  position: absolute; 
  
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  
  /* พื้นหลังสีดำจางๆ */
  background: rgba(0,0,0,0.8); 
  
  /* จัดกล่องขาวให้อยู่ตรงกลาง */
  display: flex; 
  justify-content: center;
  align-items: center;
  
  /* ให้มันลอยอยู่เหนือสิ่งอื่นในเกม */
  z-index: 10; 
}

#start-popup .box {
  background: white; 
  padding: 40px; 
  border-radius: 10px; 
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  
  /* ป้องกันไม่ให้กล่องใหญ่เกินขนาดเกม */
  max-width: 80%;
}