:root {
    --bg-white: #FFFFFF;
    --bg-subtle: #F5F5F7; 
    --text-main: #1D1D1F; 
    --text-muted: #86868B; 
    --accent: #0071E3; 
    --border-color: #D2D2D7;
    --font-sans: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
    
    --shadow-apple: 0 4px 24px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { 
    font-family: var(--font-sans); 
    color: var(--text-main); 
    background: var(--bg-white); 
    line-height: 1.47059;
    letter-spacing: -0.022em; 
    -webkit-font-smoothing: antialiased; 
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }
.overflow-hidden { overflow: hidden; }

/* Utilities */
.container { max-width: 1040px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
.max-w-md { max-width: 760px; margin: 0 auto; }
.section-padding { padding: 96px 0; }
.bg-subtle { background-color: var(--bg-subtle); }
.mt-4 { margin-top: 24px; }
.center { text-align: center; }

/* Typography */
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 20px; font-weight: 800; line-height: 1.1; color: #FFF; }
h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; line-height: 1.1; }
p { color: var(--text-muted); font-size: 1.125rem; }

/* Animated Text Gradient */
.animated-gradient {
    background: linear-gradient(100deg, #FFFFFF 0%, #A5B4FC 50%, #FFFFFF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shine 4s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* Navbar */
.navbar { 
    position: fixed; top: 0; width: 100%; 
    background: rgba(255, 255, 255, 0.72); 
    backdrop-filter: saturate(180%) blur(20px); 
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.08); 
    z-index: 100; 
}
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 60px; max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; }
.logo-img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; }
.nav-menu { display: none; gap: 32px; }
.nav-link { font-size: 0.85rem; font-weight: 400; color: var(--text-main); opacity: 0.8; transition: opacity 0.2s; }
.nav-link:hover { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: flex; color: var(--text-main); padding: 4px; }
@media(min-width: 768px) { .nav-menu { display: flex; } .menu-toggle { display: none; } }

/* ================= PREMIUM LOGIN BUTTON ================= */
.nav-login-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 20px; background: rgba(0, 113, 227, 0.08); 
    color: var(--accent); border-radius: 99px; font-size: 0.9rem; font-weight: 600;
    position: relative; overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    border: 1px solid rgba(0, 113, 227, 0.15);
}
.nav-login-btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-20deg); transition: left 0s;
}
.nav-login-btn:hover {
    background: var(--accent); color: var(--bg-white);
    transform: scale(1.05); box-shadow: 0 6px 16px rgba(0, 113, 227, 0.3); 
    border-color: var(--accent);
}
.nav-login-btn:hover::before { left: 200%; transition: left 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); }
.login-arrow { width: 16px; height: 16px; transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); }
.nav-login-btn:hover .login-arrow { transform: translateX(4px); }
@media(max-width: 500px) { .nav-login-btn { display: none; } }

/* ================= HERO & COUNTDOWN ================= */
.hero { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.video-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.video-background video { width: 100%; height: 100%; object-fit: cover; }
.video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 2; }
.hero-content { z-index: 3; display: flex; flex-direction: column; align-items: center; padding-top: 60px; }
.hero-desc { color: rgba(255,255,255,0.85); max-width: 600px; margin: 0 auto; }

.countdown-section { padding: 40px 0 80px; margin-top: -20px; }
.countdown-banner { display: flex; flex-direction: column; gap: 32px; background: var(--bg-white); padding: 40px; border-radius: 32px; box-shadow: var(--shadow-hover); border: 1px solid var(--border-color); }
@media(min-width: 768px) { .countdown-banner { flex-direction: row; align-items: center; justify-content: space-between; padding: 48px 64px; } }
.countdown-info h2 { margin-bottom: 0; font-size: 1.8rem; }
.badge { display: inline-block; padding: 4px 12px; background: rgba(0, 113, 227, 0.1); color: var(--accent); border-radius: 999px; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.countdown-mini { display: flex; align-items: center; gap: 16px; justify-content: center; }
.time-box { display: flex; flex-direction: column; align-items: center; }
.time-box span { font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; }
.time-box small { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-top: 8px; color: var(--text-muted); }
.colon { font-size: 1.5rem; font-weight: 700; opacity: 0.3; margin-top: -16px; }

/* ================= MILESTONES ================= */
.pathway-container { margin-top: 64px; position: relative; padding: 20px 0; }
.pathway-track { display: flex; justify-content: space-between; position: relative; }
.pathway-line-bg { position: absolute; top: 11px; left: 0; width: 100%; height: 4px; background: var(--border-color); z-index: 1; border-radius: 2px; }
.pathway-step { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; width: 25%; transition: transform 0.3s; }
.step-dot { width: 26px; height: 26px; background: var(--bg-white); border: 4px solid var(--border-color); border-radius: 50%; margin-bottom: 20px; transition: all 0.3s ease; }
.pathway-step.active .step-dot { border-color: var(--accent); box-shadow: 0 0 0 6px rgba(0, 113, 227, 0.2); }
.pathway-step:hover { transform: translateY(-4px); }
.pathway-step:hover .step-dot { border-color: var(--accent); }
.step-content { opacity: 0.8; transition: opacity 0.3s; }
.pathway-step.active .step-content, .pathway-step:hover .step-content { opacity: 1; }
.step-content h3 { font-size: 1.1rem; margin-bottom: 4px; color: var(--text-main); }
.step-content .date { font-weight: 600; color: var(--accent); font-size: 0.9rem; margin-bottom: 4px; }
.step-content .desc { font-size: 0.85rem; color: var(--text-muted); }
@media(max-width: 768px) { .pathway-container { overflow-x: auto; padding-bottom: 24px; scroll-snap-type: x mandatory; } .pathway-track { width: 800px; } .pathway-step { scroll-snap-align: center; } }

/* ================= COMPETITIONS ================= */
.five-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 56px; }
.bento-card.clean { width: 100%; background: var(--bg-white); padding: 40px 32px; border-radius: 24px; display: flex; flex-direction: column; text-align: center; border: 1px solid var(--border-color); transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s; }
@media(min-width: 768px) { .bento-card.clean { width: calc(33.333% - 16px); } }
.bento-card.interactive { display: block; color: inherit; }
.bento-card.interactive:hover { transform: translateY(-8px); box-shadow: var(--shadow-apple); border-color: rgba(0,113,227,0.3); }
.bento-card.clean h3 { font-size: 1.5rem; margin-bottom: 12px; }
.read-more { margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--accent); font-size: 0.95rem; opacity: 0; transition: opacity 0.3s, transform 0.3s; display: block; transform: translateY(10px); }
.bento-card.interactive:hover .read-more { opacity: 1; transform: translateY(0); }

/* ================= SCHEDULE ================= */
.sticky-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media(min-width: 992px) { .sticky-layout { grid-template-columns: 320px 1fr; gap: 80px; align-items: start; } .sticky-sidebar { position: sticky; top: 120px; } }
.tabs { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
@media(max-width: 991px) { .tabs { flex-direction: row; } }
.tab-btn { text-align: left; padding: 16px 24px; border-radius: 16px; font-weight: 600; font-size: 1.1rem; color: var(--text-muted); background: transparent; transition: all 0.3s ease; }
@media(max-width: 991px) { .tab-btn { text-align: center; flex: 1; } }
.tab-btn.active { background: var(--text-main); color: var(--bg-white); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: smoothFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes smoothFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.schedule-list { display: flex; flex-direction: column; gap: 24px; }
.schedule-item { background: var(--bg-white); border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--border-color); transition: transform 0.3s; }
@media(min-width: 600px) { .schedule-item { flex-direction: row; align-items: flex-start; gap: 32px; } }
.schedule-item:hover { transform: scale(1.01); box-shadow: var(--shadow-apple); }
.schedule-item.highlight { background: var(--text-main); color: var(--bg-white); border-color: var(--text-main); }
.schedule-item.highlight p, .schedule-item.highlight .location, .schedule-item.highlight .time { color: rgba(255,255,255,0.8); }
.time { font-weight: 700; font-size: 1.2rem; white-space: nowrap; min-width: 130px; letter-spacing: -0.02em; }
.details h4 { font-size: 1.25rem; margin-bottom: 8px; }
.location { font-size: 0.95rem; font-weight: 500; }

/* ================= FAQ ACCORDION (Apple Style) ================= */
.accordion { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.accordion-item { border: 1px solid var(--border-color); border-radius: 24px; background: var(--bg-white); overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s; }
.accordion-item:hover { box-shadow: var(--shadow-apple); border-color: rgba(0,113,227,0.3); }
.accordion-header { width: 100%; text-align: left; padding: 28px 32px; font-size: 1.15rem; font-weight: 600; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; transition: background 0.3s; }
.accordion-header:hover { background: rgba(0, 0, 0, 0.02); }
/* ไอคอน + / - */
.accordion-icon { width: 20px; height: 20px; position: relative; }
.accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; background: var(--accent); transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.4s; border-radius: 2px; }
.accordion-icon::before { top: 9px; left: 0; width: 20px; height: 2px; } /* แนวนอน */
.accordion-icon::after { top: 0; left: 9px; width: 2px; height: 20px; } /* แนวตั้ง */
/* เมื่อถูกเปิด (Active) ตัวตั้งจะหายไป ตัวนอนจะหมุน 180 องศา */
.accordion-item.active .accordion-icon::after { transform: rotate(90deg) scale(0); opacity: 0; }
.accordion-item.active .accordion-icon::before { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); }
.accordion-content p { padding: 0 32px 32px; font-size: 1.05rem; color: var(--text-muted); }

/* ================= MEDIA (Marquee) ================= */
.marquee-wrapper { width: 100%; overflow: hidden; margin-top: 48px; padding-bottom: 24px; }
.marquee-track { display: flex; gap: 24px; width: max-content; animation: scroll-marquee 30s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
@keyframes scroll-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 12px)); } }
.marquee-item { width: 300px; height: 220px; border-radius: 20px; overflow: hidden; flex-shrink: 0; }
@media(min-width: 768px) { .marquee-item { width: 400px; height: 300px; } }
.marquee-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.marquee-item:hover img { transform: scale(1.05); }

/* ================= FOOTER ================= */
.footer { border-top: 1px solid var(--border-color); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; }
@media(min-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-bottom { border-top: 1px solid var(--border-color); padding-top: 24px; font-size: 0.85rem; color: var(--text-muted); }

/* Reveal Animations */
.apple-reveal { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
.apple-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.delay-1 { transition-delay: 0.1s; }
/* ================= LOCATION & MAP ================= */
.map-content { 
    width: 100%; 
    height: 100%; 
    min-height: 400px; 
}
.map-bento {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-apple);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), box-shadow 0.4s;
    background: var(--bg-subtle);
}
.map-bento:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
    border-color: rgba(0, 113, 227, 0.3);
}

/* ทำให้ปุ่ม Secondary (สีขาวขอบเทา) ดูคลีนขึ้นเมื่ออยู่ในส่วนนี้ */
.location .btn-secondary {
    display: inline-flex;
    justify-content: center;
    width: 100%;
}
@media(min-width: 768px) { 
    .location .btn-secondary { width: auto; } 
}
/* ================= RESPONSIVE LOGIN BUTTON ================= */
/* ซ่อนปุ่มเข้าสู่ระบบแบบมือถือเอาไว้ก่อนเมื่ออยู่บนจอคอม */
.nav-mobile-login {
    display: none;
    margin-top: 16px;
    width: 100%;
}

/* เมื่อหน้าจอเล็กกว่า 768px (มือถือและแท็บเล็ต) */
@media(max-width: 767px) {
    /* 1. ซ่อนปุ่ม Login ที่อยู่ข้างๆ แฮมเบอร์เกอร์ (เพื่อไม่ให้เบียดโลโก้) */
    .nav-login-btn { 
        display: none; 
    }
    
    /* 2. แสดงปุ่ม Login ด้านล่างสุดของเมนูที่กางออกมา */
    .nav-mobile-login { 
        display: flex; 
    }
}
/* ================= IMAGE BACKGROUND (แทนที่ Video) ================= */
.image-background { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
}
.image-background .bg-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    object-position: center; 
}

/* ================= COUNTDOWN & DRIVE BUTTON ================= */
.countdown-action-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px; /* ระยะห่างระหว่างเวลานับถอยหลังกับปุ่ม */
}

.btn-drive {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-white);
    color: var(--accent);
    border: 1px solid var(--border-color);
    border-radius: 999px; /* ทรงปุ่มแคปซูล */
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: var(--shadow-apple);
}

.btn-drive:hover {
    transform: translateY(-4px); /* เอฟเฟกต์ปุ่มเด้งขึ้นเมื่อชี้เมาส์ */
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
}

.drive-icon {
    width: 20px;
    height: 20px;
}
/* ควบคุมขนาด QR Code ในส่วน Footer */
.footer-contact .qr-logo {
    width: 120px; /* ปรับขนาดความกว้างที่ต้องการ (เช่น 100px, 120px หรือ 150px) */
    height: auto; /* ให้ความสูงแปรผันตามสัดส่วนที่ถูกต้อง */
    border-radius: 8px; /* เพิ่มความโค้งมนให้ขอบรูปเล็กน้อยเพื่อความสวยงาม (จะใส่หรือไม่ใส่ก็ได้) */
    margin-top: 12px; /* เพิ่มระยะห่างจากข้อความ "ติดต่อสอบถาม" ด้านบน */
    border: 1px solid var(--border-color); /* เพิ่มเส้นขอบสีอ่อนๆ รอบ QR Code */
}