/* Base Light Mode */
body { font-family:Sarabun, sans-serif; background:#fff; color:#000; margin:0; padding:0; transition:0.3s; }
.dark body { background:#0d0d0d; color:#e4e4e4; }

.header { text-align:center; padding:16px; display:flex; justify-content:center; gap:20px; align-items:center; }
.logo { width:120px; border-radius:8px; }

.toggle-btn { font-size:20px; background:#fff; border:1px solid #ccc; border-radius:50%; width:44px; height:44px; cursor:pointer; }
.dark .toggle-btn { background:#222; color:#fff; border-color:#555; }

/* Hero Carousel */
.hero-carousel { overflow:hidden; position:relative; }
.carousel-track { display:flex; animation:slide 15s infinite; }
.carousel-track img { width:100%; object-fit:cover; border-radius:12px; }

/* Animation */
@keyframes slide {
  0%{transform:translateX(0);}
  33%{transform:translateX(-100%);}
  66%{transform:translateX(-200%);}
  100%{transform:translateX(0);}
}

/* Promo Cards */
.promo-slider { display:grid; gap:16px; padding:16px; }
.promo-card { background:#000; color:#fff; border-radius:14px; padding:10px; text-align:center; box-shadow:0 4px 10px rgba(0,0,0,0.3); transition:0.3s; }
.dark .promo-card { background:#1a1a1a; box-shadow:0 4px 12px rgba(255,255,255,0.08); }

.promo-card img { width:100%; border-radius:14px; }

.promo-btn { display:block; background:#fff; color:#000; padding:10px; margin-top:8px; border-radius:12px; text-decoration:none; animation:pulse 2s infinite; }
.dark .promo-btn { background:#e4e4e4; color:#000; }

/* Pulse Button */
@keyframes pulse {
  0%{box-shadow:0 0 5px #fff;}
  50%{box-shadow:0 0 15px #fff;}
  100%{box-shadow:0 0 5px #fff;}
}

/* Partners */
.partners { padding:16px; }
.scroll-row { display:flex; overflow-x:auto; gap:12px; scroll-snap-type:x mandatory; }
.partner img { width:100px; border-radius:14px; scroll-snap-align:center; background:rgba(0,0,0,0.5); }
.dark .partner img { background:rgba(255,255,255,0.15); }

/* Article */
.article { padding:16px; font-size:15px; }

/* Contact */
.contact { text-align:center; padding:20px; }
.contact img { width:60px; }

/* Footer */
footer { background:#000; color:#fff; text-align:center; padding:10px; font-size:14px; }
.dark footer { background:#111; }