:root{ --header:220px; --ticker:60px; }
*{box-sizing:border-box}
html,body{height:100%}
body{overflow:auto;font-family:Inter,system-ui,Segoe UI,Roboto,'TH Sarabun New',sans-serif;background:#f7fafc;color:#111827;margin:0}
/* display-only: no page scroll */
body.display-page{overflow:hidden}
.panel{background:#ffffff;border-radius:14px;padding:14px;margin:12px;border:1px solid #e5e7eb;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.badge{padding:6px 12px;border-radius:999px;background:#edf2f7;color:#1f2937;display:inline-block;border:1px solid #e2e8f0}
.big{font-size:98px;font-weight:900;letter-spacing:6px;text-align:center;margin:0;color:#0f172a}
.counter-right{font-size:98px;font-weight:900;letter-spacing:6px;text-align:center;color:#2563eb}
.top-grid{display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:center; margin:0 12px 8px 12px}
.lower-grid{display:grid; grid-template-columns: 2fr 1.4fr; gap:12px; align-items:stretch; margin:0 12px 12px 12px; height:calc(100vh - var(--header) - var(--ticker))}
.section{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:10px; display:flex; flex-direction:column}
.section.scrollable{overflow:hidden}
.media3-fixed{display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; width:100%; height:100%}
.media3-fixed .slot{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.media3-fixed img, .media3-fixed video{width:100%;height:100%;object-fit:cover}
.table-two-col{display:grid; grid-template-columns: 1fr 1fr; gap:12px; height:100%}
.table-card{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px; padding:0; display:flex; flex-direction:column}
.table-card h4{margin:0; padding:10px; background:#f8fafc; border-bottom:2px solid #e2e8f0; font-size:20px; text-align:center}
.table-onecol{width:100%; margin:0; border-collapse:collapse; table-layout:fixed}
.table-onecol th, .table-onecol td{ text-align:center; vertical-align:middle; border:1px solid #e5e7eb; padding:14px; font-size:40px; font-weight:900 }
.ticker{position:fixed;left:0;right:0;bottom:0;height:var(--ticker);background:#ffffff;border-top:1px solid #e5e7eb;padding:10px 14px;color:#111827}
.ticker marquee{ font-size:28px; font-weight:700; line-height:40px }
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#16a34a;color:#fff;padding:8px 12px;border-radius:10px;z-index:9999;box-shadow:0 6px 18px rgba(0,0,0,.25);display:none}