/* Cinema theme — base reset + typography */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    background: var(--cinema-bg);
    color: var(--cinema-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Sukhumvit Set", "IBM Plex Sans Thai", Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--cinema-accent); }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

#wrap { min-height: 100vh; }

/* Hide legacy SEO blocks */
#mainseo, #secondseo { display: none !important; }

/* Hide legacy sidebars + their wrapper margins on home */
body.home-cinema #content { display: block !important; padding: 0 !important; margin: 0 !important; }
body.home-cinema .sidebar-left,
body.home-cinema .sidebar-right,
body.home-cinema .content-left,
body.home-cinema .content-right,
body.home-cinema #sidebar-left,
body.home-cinema #sidebar-right { display: none !important; }

/* Override the legacy notice/ad container colors so f1 banner blends */
body.home-cinema .notice { background: transparent; padding: 0; }
body.home-cinema .notice-r1, body.home-cinema .notice-f1 { background: transparent; }

.cinema-container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--section-px); }

/* Buttons */
.cn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 999px; border: 1px solid var(--cinema-border); background: rgba(255,255,255,0.06); color: var(--cinema-text); font-weight: 500; transition: background 200ms ease, transform 200ms ease, border-color 200ms ease; }
.cn-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); transform: translateY(-1px); color: var(--cinema-text); }
.cn-btn-primary { background: var(--cinema-accent); border-color: var(--cinema-accent); }
.cn-btn-primary:hover { background: var(--cinema-accent-hover); border-color: var(--cinema-accent-hover); color: #fff; }
.cn-btn-circle { width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }

/* Section header (used by carousel + spotlight + coming-soon) */
.cn-section { padding: 28px 0; }
.cn-section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--section-px); margin-bottom: 14px; }
.cn-section-title { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; color: var(--cinema-text); margin: 0; }
.cn-section-title small { display: block; font-size: 11px; color: var(--cinema-text-muted); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 2px; }
.cn-section-arrows { display: flex; gap: 6px; }
.cn-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--cinema-border); background: rgba(255,255,255,0.04); color: var(--cinema-text); display: inline-flex; align-items: center; justify-content: center; transition: all 200ms ease; }
.cn-arrow:hover:not(:disabled) { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.cn-arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* Carousel rail */
.cn-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 8px var(--section-px) 8px var(--section-px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cn-rail::-webkit-scrollbar { display: none; }
.cn-rail > * { scroll-snap-align: start; flex: 0 0 calc((100% - 14px * 5) / 6); min-width: 0; }
@media (max-width: 1280px) { .cn-rail > * { flex: 0 0 calc((100% - 14px * 4) / 5); } }
@media (max-width: 1024px) { .cn-rail > * { flex: 0 0 calc((100% - 14px * 3) / 4); } }
@media (max-width: 768px)  { .cn-rail > * { flex: 0 0 calc((100% - 10px * 2) / 3); } .cn-rail { gap: 10px; } }
@media (max-width: 540px)  { .cn-rail > * { flex: 0 0 calc((100% - 10px) / 2); } }
@media (max-width: 540px)  { .cn-section-arrows { display: none; } }