*{margin:0;padding:0;box-sizing:border-box}.container{max-width:1320px;margin:0 auto;text-align:center}header{height:800px;background:url(/assets/header%20home-s30I7D4t.webp);background-repeat:no-repeat;background-size:cover}nav .nav-wrapper{position:relative;height:200px;display:flex;justify-content:space-between}nav .nav-wrapper .logo img{width:150px;height:auto}nav .nav-wrapper .menu{display:flex;margin:20px}.insideup{text-align:center}.calendar .ปฏิทินกิจกรรม{text-align:center;color:#000;font-size:50px;margin:50px;font-family:Noto Sans Thai,sans-serif;text-shadow:2px 2px 5px rgb(88,86,86)}.calendar .select{text-align:center;margin:50px}.calendar #month{background-color:#f9f5e3;color:#2c1e0f;border-style:solid;border-width:2px;border-radius:30px;padding:15px 70px;font-size:1rem;font-family:Sarabun,sans-serif;box-shadow:2px 2px 5px #0003;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:.2s ease}table.calendar{margin:0 auto;width:80%;border-collapse:collapse;background-color:#fcf7e8;box-shadow:0 0 20px #0003;border:2px solid #4a3b24;border-radius:20px;overflow:hidden;font-family:Noto Sans Thai,sans-serif}table.calendar th,table.calendar td{border:1px solid #a58b65;width:14.28%;vertical-align:top;height:100px;padding:10px;position:relative;background:#fff9}table.calendar th{background-color:#574d45;color:#fffdf4;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-bottom:3px solid #4a3b24}.event{display:block;margin-top:8px;background-color:#c7b28c;padding:2px 6px;border-left:5px solid #4a3b24;font-size:.85em;color:#2b2b2b}.fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;object-fit:cover;z-index:-1}html,body{height:100%}table.calendar{table-layout:fixed}.event-button{background:none;font-family:Sarabun,sans-serif;color:#865732;cursor:pointer;padding:2px 4px;font-size:.95em;display:block;text-align:left;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:4px;transition:background-color .3s ease}.event-button:hover,.event-button:focus{background-color:#e3f2fd;outline:none}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:999;font-family:Sarabun,sans-serif}.modal{background:#fff;padding:20px;border-radius:10px;max-width:400px;width:90%;box-shadow:0 2px 10px #0000004d}.นโยบาย .หัวข้อนโยบาย{text-align:center;color:#000;font-size:50px;margin:50px;font-family:Noto Sans Thai,sans-serif;text-shadow:2px 2px 5px rgb(88,86,86)}.headcomment{text-align:center;color:#000;font-size:40px;margin:50px;font-family:Noto Sans Thai,sans-serif;text-shadow:2px 2px 5px rgb(88,86,86)}.แชร์ความคิดเห็น .comment-form{background-color:#fdf7e3;border:2px solid #a58b65;border-radius:12px;padding:20px;width:80%;margin:30px auto;box-shadow:4px 4px 12px #0003;font-family:Kanit,Mitr,sans-serif}.แชร์ความคิดเห็น .comment-form select,.แชร์ความคิดเห็น .comment-form textarea{width:100%;padding:12px;margin-bottom:15px;border:1px solid #c0a97f;border-radius:8px;background-color:#fffdf5;font-family:Kanit,Mitr,sans-serif;font-size:1em;box-shadow:inset 1px 1px 3px #0000001a;transition:border-color .3s ease;resize:vertical;box-sizing:border-box}.แชร์ความคิดเห็น .comment-form select:focus,.แชร์ความคิดเห็น .comment-form textarea:focus{border-color:#7d6752;outline:none}.แชร์ความคิดเห็น .comment-form button{background-color:#a58b65;color:#fffdf4;padding:10px 24px;border:none;border-radius:8px;cursor:pointer;font-family:Kanit,Mitr,sans-serif;font-size:1em;box-shadow:2px 2px 6px #00000026;transition:background-color .3s ease,transform .2s ease}.แชร์ความคิดเห็น .comment-form button:hover{background-color:#8c734e;transform:translateY(-2px)}.notification{text-align:center;background-color:#f0f8ff;color:#0a3d62;padding:15px 25px;margin:20px auto;max-width:500px;border-left:5px solid #3498db;border-radius:8px;box-shadow:0 4px 10px #0000001a;font-weight:500;font-size:1rem;animation:fadeIn .5s ease-in-out;font-family:Sarabun,sans-serif}.carousel{display:flex;overflow-x:auto;gap:10px;padding:10px}.card{width:200px;height:130px;object-fit:cover;border-radius:8px;box-shadow:0 2px 5px #0003}.nav-btn{background:none;border:none;font-size:2rem;cursor:pointer;margin:10px}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;font-family:Sarabun,sans-serif;z-index:9999}.modal-content{background:#fff;padding:20px;border-radius:10px;max-width:400px}.member{width:100%;height:auto;overflow:hidden;position:relative;justify-content:center;align-items:center}.containerimg{width:100%;max-width:900px;aspect-ratio:3 / 2;overflow:hidden;border:2px solid #7c7878;border-radius:5%;position:relative;margin:20px auto;display:flex;justify-content:center;align-items:center;background-color:#f0f0f0}.frame-img{display:flex;width:700%}.frame-img img{width:100%;flex-shrink:0}.my-image{width:100%;aspect-ratio:2 / 1;object-fit:contain}.containerimg:hover .frame-img{cursor:grab}.arrow{position:absolute;top:50%;transform:translateY(-50%);font-size:2rem;background:#fff9;border:none;cursor:pointer;z-index:10;padding:5px 10px;border-radius:10px}.arrow.left{left:10px}.arrow.right{right:10px}.footer{background-color:#2c2c2c;color:#fff;padding:40px 20px 20px;font-size:14px;font-family:Sarabun,sans-serif}.footer-container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;max-width:1200px;margin:auto}.footer-section{flex:1 1 250px;min-width:200px}.footer-section h4{font-size:16px;margin-bottom:10px;color:#fff}.footer-section p,.footer-section li,.footer-section a{color:#ccc;text-decoration:none;margin-bottom:6px;display:block}.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #444;color:#aaa}table.calendar{font-size:1rem}table.calendar th,table.calendar td{height:80px;padding:8px}.event{font-size:.85em;padding:2px 6px;margin-top:6px}.logo img{width:200px;max-width:100%;height:auto}@media (max-width: 1024px){table.calendar{font-size:.9rem}table.calendar th,table.calendar td{height:70px;padding:6px}.event{font-size:.8em;padding:2px 5px;margin-top:5px}.logo img{width:170px}}@media (max-width: 768px){table.calendar{font-size:.8rem}table.calendar th,table.calendar td{height:60px;padding:5px}.event{font-size:.75em;padding:1px 4px;margin-top:4px}.logo img{width:150px}}@media (max-width: 525px){table.calendar{font-size:.65rem}table.calendar th,table.calendar td{height:50px;padding:4px}.event{font-size:.7em;padding:1px 3px;margin-top:3px}.logo img{width:130px}}@media (max-width: 400px){table.calendar{font-size:.55rem}table.calendar th,table.calendar td{height:40px;padding:3px}.event{font-size:.65em;padding:1px 2px;margin-top:2px}.logo img{width:110px}}@media (max-width: 320px){table.calendar{font-size:.45rem}table.calendar th,table.calendar td{height:35px;padding:2px}.event{font-size:.6em;padding:1px 2px;margin-top:1px}.logo img{width:100px}}.carousel-container{position:relative;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px}.carousel{display:flex;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding:10px 0;width:100%;scrollbar-width:thin}.carousel::-webkit-scrollbar{height:8px}.carousel::-webkit-scrollbar-thumb{background:#aaa;border-radius:4px}.card{flex:0 0 auto;width:250px;height:300px;object-fit:cover;scroll-snap-align:start;border-radius:8px;transition:transform .3s ease}.card:hover{transform:scale(1.05)}.nav-btn{background-color:#333;color:#fff;border:none;font-size:2rem;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #0003;cursor:pointer;transition:background-color .2s,transform .2s;z-index:10;-webkit-user-select:none;user-select:none}.nav-btn:hover{background-color:#555;transform:scale(1.1)}.nav-btn:disabled{opacity:.3;cursor:default;transform:none}#prevBtn{position:absolute;left:10px;top:50%;transform:translateY(-50%)}#nextBtn{position:absolute;right:10px;top:50%;transform:translateY(-50%)}@media (max-width: 768px){.nav-btn{display:none}}.admin-page{max-width:600px;margin:40px auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f9f9f9;border-radius:12px;box-shadow:0 4px 12px #0000001a}.admin-page h1{text-align:center;color:#2c3e50;margin-bottom:20px}.admin-page .form label{display:block;font-weight:600;margin-bottom:6px;color:#34495e}.admin-page .form input[type=text],.admin-page .form input[type=date],.admin-page .form input[type=file]{width:100%;padding:8px 10px;margin-bottom:15px;border:1px solid #ccc;border-radius:6px;font-size:15px;box-sizing:border-box}.admin-page .form button{width:100%;padding:10px;background-color:#2980b9;color:#fff;border:none;border-radius:6px;font-weight:700;cursor:pointer;transition:background-color .2s ease}.admin-page .form button:hover{background-color:#1f6391}.admin-page h2{color:#2c3e50;margin-top:40px;margin-bottom:20px}.admin-page ul{padding:0;margin:0}.admin-page li{list-style:none;background-color:#fff;padding:15px;margin-bottom:12px;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 2px 6px #0000000d}.admin-page li strong{color:#34495e;display:block;font-size:1.05rem;margin-bottom:5px}.admin-page li em{color:#555;font-style:italic;display:block;margin-bottom:10px}.admin-page li img{max-width:100%;border-radius:6px;margin:10px 0}.admin-page li a{display:inline-block;color:#2980b9;font-weight:700;text-decoration:none;margin-top:8px}.admin-page li a:hover{text-decoration:underline}.admin-page li button{background-color:#e74c3c;color:#fff;padding:8px 12px;border:none;border-radius:6px;font-weight:700;cursor:pointer;transition:background-color .2s ease;margin-top:10px}.admin-page li button:hover{background-color:#c0392b}.login-container{max-width:360px;margin:100px auto;padding:30px;border:1px solid #ddd;border-radius:12px;box-shadow:0 8px 16px #0000000d;background-color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.login-container h2{text-align:center;margin-bottom:24px;font-size:24px;color:#333}.login-container input{width:100%;padding:10px 12px;margin-bottom:16px;border:1px solid #ccc;border-radius:8px;font-size:16px;box-sizing:border-box}.login-container button{width:100%;padding:10px 12px;background-color:#4a90e2;color:#fff;font-size:16px;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease-in-out}.login-container button:hover{background-color:#357ab7}.login-container p{color:red;margin-top:10px;text-align:center}