:root{--scale:1;--heading:'Kanit',sans-serif;--font:'Noto Sans Thai',sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#07121e;color:#fff;font-family:var(--font)}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:underline;text-underline-offset:3px}a:focus-visible{outline:3px solid #ffe680;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.broadcast-viewport{width:100%;height:100%;position:relative;overflow:hidden}.broadcast-canvas{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;overflow:hidden;background:#123979}.blue-header{height:100px;padding:18px 35px;display:flex;align-items:center;justify-content:space-between;gap:30px;background:linear-gradient(90deg,#0b2162,#1369ae,#092b75);border-bottom:5px solid #8ddfff;box-shadow:0 7px 18px #0003}.blue-brand{font:600 45px/1 var(--heading);letter-spacing:1px;display:flex;align-items:center;gap:8px;text-shadow:0 2px 3px #0008}.blue-brand b{color:#a8e9ff;font-weight:600}.blue-brand>span{font:400 25px var(--heading);margin-left:22px;padding-left:22px;border-left:1px solid #8cbce786;letter-spacing:0}.board-period{font:500 32px var(--heading);color:#fff}.live-badge{display:flex;align-items:center;gap:10px;font:600 30px var(--heading);background:#cc1026;padding:8px 15px;border:2px solid #ffd8d8;border-radius:8px;box-shadow:0 2px 6px #0004}.live-badge i{width:13px;height:13px;border-radius:50%;background:white;animation:pulse 2s ease-in-out infinite}.live-badge>span{font:400 15px var(--font);margin-left:3px}.broadcast-clock{position:absolute;left:34px;right:34px;top:119px;height:63px;display:flex;align-items:center;gap:21px;padding:0 18px;background:#061c53bd;border:1px solid #73afe970;border-radius:9px}.broadcast-clock #clock{font:500 39px/1 var(--heading);font-variant-numeric:tabular-nums;letter-spacing:2px;order:2}.broadcast-clock #date{font:400 24px var(--heading);margin-left:auto;order:1}.feed-status{display:flex;align-items:center;gap:9px;font-size:18px;color:#9efbd0}.feed-status:before{content:'';width:9px;height:9px;flex-shrink:0;border-radius:50%;background:currentColor}.feed-status.loading,.feed-status.checking{color:#ffe894}.feed-status.error{color:#ffc0c7}.feed-status.demo{color:#ffe188;font-weight:700}.broadcast-slots{position:absolute;left:34px;right:34px;top:199px;bottom:140px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:18px 16px}.broadcast-card{background:#fff;border:3px solid #a7cdeb;border-radius:11px;overflow:hidden;position:relative;color:#103067;box-shadow:0 7px 13px #020e3555;min-width:0}.market-heading{display:flex;align-items:center;justify-content:center;gap:10px;height:63px;padding:0 12px;background:linear-gradient(125deg,#287ebb,#183978 52%,#116aad);background-image:repeating-linear-gradient(135deg,#ffffff06 0,#ffffff06 2px,transparent 2px,transparent 9px),linear-gradient(125deg,#287ebb,#183978 52%,#116aad);border-bottom:3px solid #6daedb;color:#fff}.market-heading h2{font:500 25px/1.2 var(--heading);text-align:center;overflow-wrap:anywhere;text-shadow:0 2px 2px #0004}.flag{width:38px;height:28px;object-fit:cover;border-radius:3px;flex-shrink:0;border:1px solid #ffffff8f}.flag-placeholder{display:grid;place-items:center;border-color:#b9d0df;color:#a8bdd5;font-size:17px}.draw-meta{display:flex;align-items:center;justify-content:center;gap:10px;font-size:15px;line-height:1.4;padding:15px 10px 10px;color:#52657c;white-space:nowrap}.draw-meta>time{font-weight:700;color:#174980}.draw-meta>i{height:12px;width:1px;background:#c9d6df}.draw-status{font-size:17px;line-height:1.5;padding:3px 16px;border-radius:30px;display:table;margin:2px auto 0;background:#e9eff5;color:#506986}.broadcast-card.done .draw-status{background:#e3f4ed;color:#17714f}.broadcast-card.previous .draw-status{background:#fff0d2;color:#79540c}.broadcast-card.awaiting .draw-status{background:#fff1d2;color:#8a5700}.result-values{display:grid;grid-template-columns:1.35fr 1fr;gap:11px;margin:15px 16px 0}.result-prize strong{display:block;text-align:center;font:600 82px/1.12 var(--heading);letter-spacing:3px;font-variant-numeric:tabular-nums;color:#eb273b;text-shadow:0 2px 0 #cf1b2710}.result-prize:last-child strong{color:#139d4e}.result-prize>span{display:block;text-align:center;font:500 25px var(--heading);color:#32475e;margin-top:9px}.broadcast-card:not(.done):not(.previous) .result-prize strong{color:#94a6ba;letter-spacing:3px}.card-note{text-align:center;font-size:13px;color:#52657c;position:absolute;bottom:10px;left:10px;right:10px;line-height:1.3}.broadcast-card.empty{opacity:.85}.broadcast-card.empty .draw-status{background:#eef2f5}.broadcast-footer{position:absolute;left:0;right:0;bottom:0;height:119px;background:linear-gradient(90deg,#061742,#074ca3,#102753);border-top:4px solid #79c9f2;padding:0 33px}.announcement-window{height:64px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid #afcde34a;position:relative}.announcement{white-space:nowrap;font:500 31px var(--heading);width:max-content;min-width:100%;animation:marquee 26s linear infinite;padding-left:100%;color:#fff9d8;line-height:1.4}.broadcast-meta{height:47px;display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:15px;color:#d6e5f7;white-space:nowrap}.broadcast-meta #sources{display:flex;gap:10px;align-items:center;min-width:0;overflow:hidden}.broadcast-meta #sources a{overflow:hidden;text-overflow:ellipsis}.broadcast-meta #freshness{font-size:14px}.broadcast-meta #feed-note{font-size:14px}.broadcast-card.changed .result-values{animation:result-flash .7s ease-out}
html[data-style=gold] body{background:#260806}html[data-style=gold] .broadcast-canvas{background:#faf8f5 url(broadcast-cgm-template.png) center/100% 100% no-repeat}html[data-style=gold] .blue-header{display:none}html[data-style=gold] .broadcast-clock{left:auto;right:41px;top:105px;width:402px;height:104px;display:flex;flex-direction:column;justify-content:center;gap:0;background:none;border:0;padding:0;border-radius:0}html[data-style=gold] .broadcast-clock #clock{order:1;font-size:48px;line-height:1.12;text-shadow:0 2px 4px #7f0000;letter-spacing:3px}html[data-style=gold] .broadcast-clock #date{order:2;font-size:16px;line-height:1.3;margin-left:0;color:#fff1c3}html[data-style=gold] .feed-status{font-size:15px;order:0;line-height:1.3;margin-bottom:3px;text-shadow:0 1px 2px #690000}html[data-style=gold] .feed-status:before{width:6px;height:6px}html[data-style=gold] .feed-status.demo{font-size:16px;color:#fff6a9}html[data-style=gold] .broadcast-slots{display:block;left:0;right:0;top:0;bottom:0;pointer-events:none}html[data-style=gold] .broadcast-card{position:absolute;background:none;border:0;border-radius:0;box-shadow:none;width:422px;height:126px;color:#122e53;overflow:hidden;top:calc(233px + var(--row) * 140.8px);left:calc(49px + var(--col) * 468px)}html[data-style=gold] .market-heading{background:none;border:0;height:38px;padding:0 5px;gap:8px;color:#173350}html[data-style=gold] .market-heading h2{font-size:25px;line-height:1.25;text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}html[data-style=gold] .flag{width:31px;height:22px;border:1px solid #9c93696b;border-radius:2px}html[data-style=gold] .draw-meta{padding:0;height:24px;font-size:12px;gap:8px;line-height:1.2;color:#465a69}html[data-style=gold] .draw-meta>time{color:#573d16}html[data-style=gold] .draw-status{margin:0;position:absolute;top:44px;right:9px;padding:0;background:none!important;font-size:11px;border-radius:0;color:#5c451d;line-height:1.25;max-width:99px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}html[data-style=gold] .draw-meta{padding-right:85px}html[data-style=gold] .result-values{position:absolute;left:0;right:0;top:69px;margin:0;grid-template-columns:1fr 1fr;gap:12px}html[data-style=gold] .result-prize strong,html[data-style=gold] .result-prize:last-child strong{color:#fff9dc;font-size:50px;line-height:1.1;letter-spacing:5px;text-shadow:0 2px 4px #0007}html[data-style=gold] .broadcast-card:not(.done):not(.previous) .result-prize strong{color:#e9dbaa;font-size:42px;letter-spacing:4px;line-height:1.3}html[data-style=gold] .result-prize>span{display:none}html[data-style=gold] .card-note{display:none}html[data-style=gold] .broadcast-card.empty{opacity:.6}html[data-style=gold] .broadcast-footer{left:80px;right:81px;bottom:51px;height:88px;background:none;border:0;padding:0 19px;color:#fff5d4}html[data-style=gold] .announcement-window{height:52px;border-bottom:1px solid #ffdca641}html[data-style=gold] .announcement{font-size:28px;color:#fff5cb;line-height:1.3}html[data-style=gold] .broadcast-meta{height:30px;font-size:13px;color:#ffe7b0;gap:12px}html[data-style=gold] .broadcast-meta #freshness,html[data-style=gold] .broadcast-meta #feed-note{font-size:13px}html[data-style=gold] .broadcast-meta #sources{gap:8px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes pulse{50%{opacity:.4}}@keyframes result-flash{0%{opacity:.4}100%{opacity:1}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.announcement{padding-left:0;min-width:0;white-space:normal;text-align:center;width:100%;font-size:26px;line-height:1.2}.announcement-window{justify-content:center}html[data-style=gold] .announcement{font-size:23px}}
/* Blue TV frame follows the reference's edge-to-edge two-row broadcast board. */
html[data-style=blue] .blue-header{display:none}html[data-style=blue] .broadcast-canvas{background:linear-gradient(#e3f8ff,#95cbea)}html[data-style=blue] .broadcast-slots{left:5px;right:5px;top:5px;bottom:101px;gap:7px;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}html[data-style=blue] .broadcast-card{border:3px solid #d7f4ff;border-radius:0;box-shadow:none;background:linear-gradient(#fff 0,#fff 78%,#b0dff1 78%,#a5d9ec 100%)}html[data-style=blue] .market-heading{height:80px;border-bottom:3px solid #cfedff;background-image:repeating-linear-gradient(45deg,#8acafb28 0,#8acafb28 3px,transparent 3px,transparent 9px),linear-gradient(90deg,#122975,#2359a4,#102978)}html[data-style=blue] .market-heading h2{font-size:31px}html[data-style=blue] .flag{width:46px;height:34px}html[data-style=blue] .draw-meta{height:43px;padding:0;font-size:15px;background:#e5f5fc;border-bottom:2px solid #cee5f0;gap:7px}html[data-style=blue] .draw-meta>time{font-size:17px}html[data-style=blue] .draw-status{font-size:20px;margin-top:18px;padding:5px 15px}html[data-style=blue] .result-values{margin:36px 15px 0;gap:9px}html[data-style=blue] .result-prize strong{font-size:100px;line-height:1.15;letter-spacing:1px}html[data-style=blue] .result-prize>span{position:absolute;bottom:0;height:68px;margin:0;display:flex;align-items:center;justify-content:center;font-size:31px;background:linear-gradient(#79bcec,#4897d4);border:2px solid #d8f0fe;color:#fff;text-shadow:0 2px 2px #274b95;left:0;width:57.45%}html[data-style=blue] .result-prize:last-child>span{left:57.45%;width:42.55%}html[data-style=blue] .card-note{bottom:83px;left:15px;right:15px;font-size:16px;line-height:1.3}html[data-style=blue] .broadcast-footer{height:98px;border:0;background:#b8dced;color:#1b2c38;padding-left:397px;padding-right:17px}html[data-style=blue] .announcement-window{height:51px;border-bottom:1px solid #80aec488}html[data-style=blue] .announcement{color:#132b3a;font-size:28px}html[data-style=blue] .broadcast-meta{height:45px;color:#183348;font-size:15px;gap:14px}html[data-style=blue] .broadcast-meta #freshness,html[data-style=blue] .broadcast-meta #feed-note{font-size:13px}html[data-style=blue] .broadcast-clock{top:auto;bottom:0;left:4px;right:auto;width:278px;height:93px;padding:5px 9px;border:2px solid #dcf5ff;background:#344658;border-radius:0;display:flex;flex-direction:column;justify-content:center;gap:5px;z-index:2}html[data-style=blue] .broadcast-clock #clock{font-size:40px;letter-spacing:2px;order:1}html[data-style=blue] .broadcast-clock #date{display:none}html[data-style=blue] .feed-status{font-size:12px;order:0;line-height:1.2;gap:6px}html[data-style=blue] .feed-status:before{width:6px;height:6px}.footer-live{display:none}html[data-style=blue] .footer-live{position:absolute;left:290px;top:19px;display:flex;align-items:center;gap:7px;font:500 23px var(--heading);color:#fff;background:#e63027;padding:7px 10px;border-radius:7px;border:2px solid #ffb88d;box-shadow:0 1px 3px #6a3d2250}html[data-style=blue] .footer-live i{height:8px;width:8px;border-radius:50%;background:currentColor;animation:pulse 2s ease-in-out infinite}
html[data-style=blue] .broadcast-card:not(.done):not(.previous) .result-prize strong{font-size:74px;line-height:1.55;letter-spacing:0}
@media(prefers-reduced-motion:reduce){html[data-style=blue] .announcement,html[data-style=gold] .announcement{font-size:20px;line-height:1.2}}
html[data-style=gold] .broadcast-meta #sources{font-size:16px}
html[data-style=gold] .broadcast-footer{left:116px;right:116px;padding-left:15px;padding-right:15px}
html[data-style=blue] .flag{width:47px;height:47px;border-radius:50%;border:2px solid #fff0ba;box-shadow:0 0 0 3px #acbed84d,0 2px 5px #001d5f80}