/* ธีม vcon ทั้งชุด (theme-vcon.css/tailwind-vcon.css) ไม่มี box-sizing:border-box ตั้งต้นให้เลยสักที่ ทำให้ปุ่มแบบ .btn-block (width:100%) ที่มี padding แนวนอนด้วย (เช่น .btn-lg padding:0 34px) บวม/ล้นออกนอกกรอบพ่อแม่จริง (100% + padding รวมเป็นความกว้างจริง) เจอบั๊กนี้ซ้ำหลายหน้าแล้ว แก้ที่ต้นตอทีเดียวตรงนี้ */ *, *::before, *::after { box-sizing: border-box; } /* เลื่อนหน้าแบบลื่นด้วย CSS ล้วน (native) แทน Lenis (ไลบรารี JS ที่ต้องจำลองการเลื่อนทุกเฟรม หนักกว่ามาก) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ล็อกสกอลล์พื้นหลังตอนเปิดเมนูมือถือ/modal กันแถบเลื่อน 2 อันซ้อนกัน */ html.no-scroll, html.no-scroll body { overflow: hidden; } /* ตัวหนังสือชื่อเว็บขนาดยักษ์ที่ footer (.footer-big) ต้นฉบับสูงได้ถึง 260px ใหญ่เกินไป ลดลง */ .footer-big { font-size: clamp(40px, 9vw, 130px); } /* .success-check ของธีม vcon เอง (theme-vcon.css) มี stroke-dasharray/dashoffset ที่ทำให้วงกลม/ เครื่องหมายถูกซ่อนตัวเองสนิทไว้ตั้งแต่ต้น (เตรียมไว้สำหรับ "วาด" เข้ามาทีหลัง) แต่ไม่มี keyframe หรือตัวสั่งเล่นแอนิเมชันอยู่เลยในทั้งธีม ใช้กับหน้าไหนต้องเพิ่มเองแบบนี้ (ใส่คลาส .is-in ตอน render หรือ JS เพิ่มทีหลังก็ได้ ไม่ต้องรอ DOMContentLoaded เพราะ SVG อยู่นิ่งอยู่แล้วตั้งแต่โหลดหน้า) */ @keyframes success-check-draw { to { stroke-dashoffset: 0; } } .success-check.is-in circle { animation: success-check-draw 0.6s ease forwards; } .success-check.is-in path { animation: success-check-draw 0.4s ease 0.6s forwards; } /* ไอคอนวงกลมสำหรับสถานะต่างๆ (ลิงก์หมดอายุ/ไม่พบข้อมูล ฯลฯ) ขนาด/แสงเรืองเท่า .success-check (110px) เพื่อให้หน้า state ต่างๆ (สำเร็จ/ผิดพลาด) มีน้ำหนักภาพเท่ากัน ใช้แทนไอคอนเล็กๆ แปะข้าง heading */ .state-icon { width: 110px; height: 110px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 42px; animation: state-icon-in 0.4s cubic-bezier(.16, 1, .3, 1); } @keyframes state-icon-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } .state-icon--danger { background: rgba(255, 45, 45, 0.08); border: 3px solid #ff2d2d; color: #ff2d2d; filter: drop-shadow(0 0 10px rgba(255, 45, 45, 0.5)); } /* ป๊อปอัพกลางจอแบบ vcon-native ใช้ร่วมกันได้ทุกหน้า (เดิมทำไว้เฉพาะ booking2-vcon.css ย้ายมาไว้ตรงนี้ด้วยเพื่อให้หน้าอื่นๆ เช่น forgot_password.php เรียกใช้ได้โดยไม่ต้อง โหลด stylesheet ของระบบจองที่ไม่เกี่ยวข้อง) */ .overlay { position: fixed; inset: 0; z-index: 1055; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; } /* เดิมไม่มี backdrop-filter เลย พื้นหลังของหน้า (โลโก้/หัวข้อ/การ์ดเดิม) เลยยังคมชัดทะลุออกมา ทับกับกล่องป๊อปอัพจนดูเหมือนการ์ดซ้อนกันสองชั้นสับสน (ตามภาพที่ผู้ใช้ส่งมา) ใช้ค่าเดียวกับ .modal__bg ของ vcon เอง (ธีมต้นฉบับ) ให้สม่ำเสมอกันทั้งเว็บ */ .overlay.is-open { display: flex; animation: overlay-fade-in 0.25s ease; } @keyframes overlay-fade-in { from { opacity: 0; } to { opacity: 1; } } .overlay__box { max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; animation: overlay-box-in 0.35s var(--ease, cubic-bezier(.16,1,.3,1)); } @keyframes overlay-box-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: none; } } .overlay__close { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%; background: var(--coal-2, #151519); border: 1px solid var(--line, rgba(255, 255, 255, 0.15)); color: var(--text, #f6f1ea); display: grid; place-items: center; cursor: pointer; font-size: 18px; line-height: 1; } .overlay__close:hover { background: rgba(255, 90, 31, 0.15); border-color: var(--fire, #ff5a1f); } /* กันเมนูบนสุด (fixed, สูงตาม --header-h) บังหัวข้อเซคชันตอนกดลิงก์เมนูแล้วเลื่อนลงมา (เดิมพึ่ง Lenis's offset:-80 ชดเชยให้ ตอนนี้ตัด Lenis ออกแล้วต้องใช้ scroll-margin-top แทน) (#contact ย้ายออกจากหน้าแรกไปอยู่หน้า /contact เดี่ยวแล้ว ไม่มี section นี้ในหน้าแรกอีกต่อไป) */ #home, #events, #artists, #news, #gallery, #how { scroll-margin-top: var(--header-h, 76px); } /* การ์ดอีเวนต์ใน carousel (Swiper) กระพริบ/ขยายใหญ่ก่อนแล้วค่อยหดเล็กลงตอนโหลดหน้าแรก — เพราะก่อน Swiper JS (defer) จะ init เสร็จ .swiper-slide ยังไม่มีความกว้างที่ถูกต้อง (คำนวณจาก slidesPerView แบบ responsive ด้วย JS ล้วน ไม่มี CSS fallback) เลยเรนเดอร์เต็มความกว้างคอนเทนเนอร์ ก่อนชั่วขณะ ซ่อนไว้ด้วย opacity จนกว่า Swiper จะเติม class .swiper-initialized ให้ (มาตรฐานของ Swiper เอง) แล้วค่อย fade เข้า — พื้นที่ layout ไม่เปลี่ยน ไม่กระทบ CLS เพิ่ม มีแต่ลดปัญหาเดิม */ .carousel .swiper:not(.swiper-initialized) .swiper-wrapper { opacity: 0; } .carousel .swiper.swiper-initialized .swiper-wrapper { opacity: 1; transition: opacity 0.25s ease; } /* ปุ่มดูรหัสผ่าน (ไอคอนตา) ใน .field — ต้นฉบับ vcon เองก็ไม่ได้สไตล์ปุ่มนี้ไว้เลย เลยโผล่มาเป็นปุ่ม