body { background:linear-gradient(180deg,#000 0px, #018 400px,var(--bg) 1000px); background-repeat:no-repeat; background-size:100% auto; }
.mainbox { box-sizing:content-box; max-width:1100px; }

h1 { margin:0; padding:15px 0 10px 0; text-align:center; font-size:28pt; color:#FFF; font-weight:bold; }
h1 i { display: inline-block; padding:5px 10px; border-radius:15px; background: linear-gradient(180deg, #FFA, #FF7); font-size:14pt; line-height:20px; font-style:normal; color: #553; }
h2 { margin:0; padding:15px 0 0 0; text-align:center; font-size:20pt; }

.spmsg { box-sizing:border-box; width:96%; max-width:960px; margin:15px auto 0px auto; padding:15px; border-radius:20px; border:1px solid #03256e; background-color:#031845; text-align:center; font-size:14pt; color:#79b1cd; }
.spmsg a { color:#223d66; }
.spmsg a:hover { color:#1b5cbc; }

#lotbox { box-sizing:border-box; width:100%; min-height:400px; margin:0; padding:0; border-radius:0 0 40px 40px;  text-align:center; line-height:1.2; }
#lotbox .xpart1 { display:inline-block; box-sizing:border-box; width:60%; max-width:600px; margin:20px 0 15px 0; vertical-align:top; }
#lotbox .xpart2 { display:inline-block; box-sizing:border-box; width:36%; max-width:350px; margin:20px 0 0 1.6%; vertical-align:top; }
#lotbox .xbox1 { display:inline-block; box-sizing:border-box; margin:0 1%; padding:3px; border-radius:20px; box-shadow:0 0 7px rgba(0,0,0,0.5); background-color:#FFF; vertical-align:top; }
#lotbox .xbox1.xs1 { width:52%; }
#lotbox .xbox1.xb2 { width:42%; margin-left:2%; }
#lotbox .xbox1 .xlabel { padding:9px 0; border-radius:18px 18px 4px 4px; background:linear-gradient(165deg, #f22, #c00); color:#FFF; font-size:16pt; line-height:24px; font-weight:bold; }
#lotbox .xbox1 .xres { padding:10px 0 0 0; font-size:32pt; font-weight:bold; color:#D00; }
#lotbox .xbox1 .xres i { font-size:20pt; font-style:normal; }
#lotbox .xprize { padding:5px 0 5px 0; font-size:11pt; color:#666; }
#lotbox .xbox2 { display:inline-block; box-sizing:border-box; width:48%; margin:20px 1% 0 1%; padding:3px; border-radius:20px; box-shadow:0 0 7px rgba(0,0,0,0.5); background-color:#FFF; vertical-align:top; }
#lotbox .xbox2 .xlabel { padding:7px 0; border-radius:18px 18px 4px 4px; background-color:#e3effd; font-size:16pt; line-height:24px; font-weight:bold; color:#333; }
#lotbox .xbox2 .xres { display:inline-block; box-sizing:border-box; width:48%; max-width:100px; margin:10px 0 0 0; border-left:1px solid #aaa; font-size:24pt; line-height:28px; font-weight:bold; color:#444; }
#lotbox .xbox2 .xres:first-of-type { border-left:none; }
#lotbox .xbox2 .xres i { font-size:16pt; font-style:normal; color:#777; }

.splotm { box-sizing:border-box; width:98%; max-width:960px; margin:20px auto 0 auto; padding:3px; border-radius:20px; box-shadow:0 0 7px rgba(0,0,0,0.3); background-color:#FFF; color:#444; }
.splotm .xlabel { margin:0 0 10px 0; padding:7px 0; border-radius:18px 18px 4px 4px; background-color:#e3effd; font-size:16pt; line-height:24px; font-weight:bold; }
.splotm .xres { font-size:13pt; }
.splotm .xres b { display:inline-block; box-sizing:border-box; width:9.8%; min-width:84px; padding:10px 3px; }
.splotm .xres i { font-size:16pt; font-style:normal; color:#777; }
.splotm .xres.xbig { font-size:18pt; }
.splotm .xres.xbig b { width:19%; min-width:110px; padding:10px 3px; }
.splotm .xprize { padding:3px 0 10px 0; text-align:center; font-size:11pt; color:#666; }

#morebox { display:block; margin:20px 0 0 0; }
#morebt { display:block; margin:0 0.75%; padding:10px; border-radius:12px; border-width:1px; border-style:solid; border-color:#EEE #666 #666 #EEE; background:linear-gradient(0deg,rgba(255,255,255,0.5),rgba(255,255,255,0.75)); text-align:center; font-size:14pt; color:#445; cursor:pointer; }
#morebt:hover { background:linear-gradient(0deg,rgba(255,255,255,0.65),rgba(255,255,255,0.9)); }

#cform { display:block; box-sizing:border-box; width:100%; margin:0; padding:2px 2px 25px 2px; border-radius:20px; border:1px solid rgba(255,255,255,0.8); background-color:rgba(255,255,255,0.5); }
#cform h2 { margin:0 0 10px 0; padding:5px; border-radius:18px 18px 4px 4px; background:linear-gradient(165deg,#0178f6,#053cd4); text-align:center; font-size:18pt; line-height:30px; color:#fff; }
#cform input { box-sizing:border-box; width:90%; height:45px; margin:15px 0 0 0; border-radius:12px; vertical-align:middle; text-align:center; font-size:14pt; }
#cform input[name="num"] { height:50px; padding:4px 4px 4px 34px; border-width:1px; border-style:solid; border-color:#666 #FFF #FFF #666; outline:none; background-repeat:no-repeat; background-position:8px 10px; background-size:28px 28px; background-color:#FFF; font-size:22pt; font-weight:bold; color:#346; }
#cform input[name="num"].empty { font-size:13pt; font-weight:normal; color:#999; }
#cform input[type="submit"] { border:none; border-width:1px; border-style:solid; border-color:#BCB #242 #242 #BCB; background:linear-gradient(to bottom, #4a4, #181); font-size:18pt; color:#FFF; cursor:pointer; }
#cform input[type="submit"]:hover { background:linear-gradient(to bottom, #282, #070); }
#cform .xswitch { box-sizing:border-box; width:96%; height:46px; margin:10px 2% 0 2%; padding:3px 3px 3px 0; border-radius:23px; background-color:#c4dcf7; white-space:nowrap; }
#cform .xswitch .xbt { display:inline-block; box-sizing:border-box; width:calc(50% - 3px); height:40px; margin:0 0 0 3px; padding:10px 0; border-radius:20px; font-size:14pt; line-height:20px; color:#5e6c81; cursor:pointer; }
#cform .xswitch #datecurbt { width:calc(45% - 3px); }
#cform .xswitch #dateselbt { width:calc(55% - 3px); }
#cform .xswitch .xbt:hover { background-color:#acc9e8; color:#505968; }
#cform .xswitch .xbt.active { background-color:#2974e6; color:#FFF; }

.sppad { padding:0 2%; user-select:none; }
.sppad .xdisplaybox { display:block; box-sizing:border-box; width:96%; height:60px; margin:10px 2% 4px 2%; border-radius:8px; border-width:1px; border-style:solid; border-color:#666 #ddd #ddd #666; background-color:#FFF; white-space:nowrap; }
.sppad .xdisplaybox > * { display:inline-block; box-sizing:border-box; height:58px; vertical-align:top; }
.sppad  .xdisplay { width:calc(100% - 50px); padding:10px 0 10px 10px; border-radius:7px; background-color:#fff; font-size:28pt; line-height:38px; font-weight:bold; color:#346; }
.sppad  .xdisplay:empty { font-size:14pt; color:#747e90; }
.sppad  .xdisplay:empty::before { content:"กด 6 หลักที่ต้องการตรวจ"; }
.sppad  .xrmbt { width:50px; padding:9px 5px; }
.sppad  .xnbt { display:inline-block; box-sizing:border-box; width:31%; height:50px; margin:5px 0.5% 0 0.5%; padding:10px 0; border-radius:10px; border-width:1px; border-style:solid; border-color:#FFF #456 #456 #FFF; background:linear-gradient(180deg,#ffffff,#ced9ea); font-size:20pt; line-height:30px; font-weight:bold; color:#346; cursor:pointer; }
.sppad .xnbt:hover { background:linear-gradient(180deg,#d1e0f5,#a8b9d1); color:#1b2335; }
.sppad .xnbt:active { border-color:#456 #FFF #FFF #456; }
.sppad .xchkbt { display:inline-block; box-sizing:border-box; width:63%; height:50px; margin:5px 0.5% 0 0.5%; padding:10px 0; border-radius:10px; border-width:1px; border-style:solid; border-color:#FFF #456 #456 #FFF; background:linear-gradient(to bottom, #4a4, #181); font-size:20pt; line-height:30px; font-weight:bold; color:#fff; cursor:pointer; }
.sppad .xchkbt:hover { background:linear-gradient(to bottom, #282, #070); color:#FFF; }
.sppad .xchkbt:active { border-color:#456 #FFF #FFF #456; }

.spdatesel { z-index:5; position:fixed; left:0; top:0; box-sizing:border-box; width:100%; height:100%; padding:20px calc(50% - 400px); overflow-x:hidden; overflow-y:auto; background-color:rgba(0,0,0,0.75); backdrop-filter:blur(8px); text-align:left; font-size:12pt; line-height:1.1; color:#FFF; }
.spdatesel .xclosebt { float:right; box-sizing:border-box; width:50px; height:50px; padding:2px 0; text-align:center; font-size:40px; line-height:40px; color:#BBB; cursor:pointer; }
.spdatesel .xclosebt:hover { background-color:#000; color:#DDD; }
.spdatesel .xhead { padding:10px 3px; font-size:18pt; font-weight:bold; }
.spdatesel .xyear { padding:10px 3px; font-size:24pt; }
.spdatesel .xbt { display:inline-block; box-sizing:border-box; width:calc(24.2% - 3px); max-width:130px; margin:3px 0 0 3px; padding:15px 0; border-radius:4px; background-color:#9cb7d6; text-align:center; color:#14233a; cursor:pointer; }
.spdatesel .xbt:hover { background-color:#8ec0f9; color:#13438b; }
.spdatesel .xbt.active { background-color:#2974e6; color:#FFF; }

.spboxes { max-width:1000px; margin:0 auto; text-align:center; }
.spbox { display:inline-block; box-sizing:border-box; width:31%; margin:20px 1% 0 1%; padding:3px 15px 10px 15px; border-radius:20px; box-shadow:0 0 10px rgba(0,0,0,0.4); background-color:#FFF; vertical-align:top; text-align:left; color:#444; }
.spbox h3 { margin:0 -12px 5px -12px; padding:2px 5px; border-radius:18px 18px 4px 4px; background:linear-gradient(180deg,#e5f0fc,#c0d8f3); font-size:14pt; font-weight:bold; line-height:32px; color:#222; }
.spbox h3 img  { width:30px; height:30px; margin:0 0 0 5px; vertical-align:top; }
.spbox .xlink { display:block; padding:7px 10px 6px 35px; border-bottom:1px solid #ddd; background-repeat:no-repeat; background-position:5px 3px; background-size:24px 24px; font-size:12pt; color:#444; }
.spbox .xlink:last-child { border-bottom:none; }
.spbox .xlink:hover { background-color:#e5f0fc; color:#00428e; }
.spbox .xlink.xdup ,
.spbox .xlink.xless { padding-top:9px; padding-bottom:9px; background-position:5px 7px; }
.spbox.green h3 { background:linear-gradient(180deg,#e7fce5,#b4ebaf); }
.spbox.green .xlink:hover { background-color:#e7fce5; color:#085b00; }
.spbox.orange h3 { background:linear-gradient(180deg,#ffe7d5,#f9cfbf); }
.spbox.orange .xlink:hover { background-color:#ffc6b4; color:#8b2000; }
@media (min-width:600px) {
	.spbox.x2 { width:47%; }
}

.sppaperlink { display:block; box-sizing:border-box; width:80%; margin:0 auto; padding:5px; text-align:center; font-size:11pt; color:#444; }
.sppaperlink img { max-width:100%; max-height:180px; aspect-ratio:7/10; box-shadow:0 0 10px rgba(0,0,0,0.5); }
.sppaperlink:hover { color:#8b2001; }
.sppaperlink:hover img { box-shadow:0 0 15px #8b2000; }

.spnextmsg { margin:20px 0 30px 0; font-size:14pt; color:var(--text); }

.spcd { margin:10px 0; text-align:center; font-size:14pt; color:var(--textblue); }
.spcd a { color:var(--textblue); }
.spcd .xg { display:inline-block; box-sizing:border-box; width:30%; max-width:100px; padding:15px 0 0 0; vertical-align:top; }
.spcd .xn { display:inline-block; box-sizing:border-box; width:45%; max-width:40px; padding:5px 0; border-radius:7px; border:1px solid var(--bg2); background-color:var(--text); vertical-align:top; font-size:24pt; color:var(--bg); }
.spcd .xu { display:inline-block; box-sizing:border-box; width:100%; color:var(--text); }

.sptitle { margin:15px 0 15px 0; text-align:center; font-size:14pt; }
.sptitle2 { margin:15px 0 30px 0; text-align:center; font-size:14pt; }

.spclip { padding:20px 0 0 0; text-align:center; }
.spclip .xtitle { padding:0 0 5px 0; font-size:14pt; }
.spclip .xtitle a { color:var(--text); }
.spclip .xtitle b { color:var(--textgreen); }
.spclip iframe { width:100%; max-width:640px; height:360px; }

.spres2 { padding:10px; text-align:center; }
.spres2 .spclip { display:inline-block; box-sizing:border-box; width:100%; max-width:660px; padding:10px; vertical-align:top; text-align:center; }
.spres2 .ximg { display:inline-block; box-sizing:border-box; width:100%; max-width:300px; padding:24px 10px 10px 40px; vertical-align:top; }
.spres2 .ximg img { width:100%; aspect-ratio:800/1200; }

#showform { margin:0; padding:10px 0; text-align:center; }
#showform .xlabel { display:inline-block; box-sizing:border-box; padding:0 7px 0 0; vertical-align:middle; font-size:14pt; }
#showform input ,
#showform select { box-sizing:border-box; height:40px; margin-top:8px; vertical-align:middle; font-size:14pt; }
#showform select[name=date] { width:calc(100% - 160px); max-width:200px; }
#showform input[type=submit] { font-weight:bold; }

.spwins { padding:20px 0 0 0; text-align:center; }
.spwins .xtitle { font-size:18pt; color:var(--textred); }
.spwins .xcount { display:inline-block; box-sizing:border-box; width:100%; max-width:640px; margin:5px 0; padding:5px 10px; border-radius:16px; background-color:var(--bgred); font-size:14pt; line-height:22px; color:var(--text); }
.spwins .xnote { font-size:13pt; color:var(--text3); }

.spdn { margin:15px 0 0 0; padding:15px 5px; background-color:var(--primary); text-align:center; font-size:16pt; font-family:prompt,sans-serif; font-weight:bold; color:var(--primarytext); }
.spdn .x1 { font-size:24pt; }
.spdn .x2 { padding:5px 0 10px 0; }
.spdn .xqrimg { width:250px; height:250px; }

.spshbar { margin:30px 0 0 0; text-align:center; }
.spshbar .xlabel { display:inline-block; padding:0 7px 0 0; vertical-align:middle; font-size:12pt; color:#98aecf; }
.spshbar .xbt { display:inline-block; width:28px; height:28px; padding:5px 8px; border-radius:5px; vertical-align:middle; cursor:pointer; }
.spshbar .xbt:hover { background-color:#000; }

.spht { box-sizing:border-box; width:100%; max-width:1300px; margin:0 auto; padding:30px 0 18px 0; text-align:center; font-size:14pt; }
.spht h3 { margin:0; padding:0 0 5px 0; font-size:18pt; }
.spht .xlink { position:relative; display:inline-block; box-sizing:border-box; width:33%; padding:18px 15px; vertical-align:top; text-align:left; color:var(--text); }
.spht .xlink:hover { color:var(--linkactive); }
.spht .ximg { width:100%; aspect-ratio:16/9; margin:0 0 2px 0; border-style:none; }
.spht .xicon { height:10px; border-style:none; }
.spht .xlabel { position:absolute; right:14px; top:17px; width:50px; height:50px; border-style:none; }
.spht .xtitle { display:inline-block; width:100%; padding:4px 0 0 0; }

.spfbcm { padding:10px; }
.spfbcm .xtitle { font-size:18pt; color:var(--textblue); }
.spfbcm .xbody { max-width:800px; margin:10px auto 0 auto; }

.spappbar { position:fixed; display:block; left:0; bottom:0; box-sizing:border-box; width:100%; height:46px; overflow:hidden; background-color:var(--bg2); text-align:center; }
.spappbar .xicon { width:36px; height:36px; margin:5px 0 0 0; border:none; vertical-align:top; }
.spappbar .xtext { display:inline-block; margin:9px 0 0 5px; vertical-align:top; font-size:16pt; color:var(--textblue); }
.spappbar .xbt { display:inline-block; margin:8px 0 0 10%; padding:5px 10px; border-radius:5px; border:1px solid var(--text3); background-color:var(--bgblue); vertical-align:top; font-size:12pt; color:var(--text); }
.spappbar .xclosebt { float:right; display:block; width:36px; height:36px; text-align:center; font-size:20px; line-height:30px; color:var(--text3); }

.spprint { display:inline-block; margin:0 15px 12px 15px; padding:2px 6px; vertical-align:middle; border-radius:4px; border:1px solid #d4d4d4; background-color:#eee; color:#666; white-space:nowrap; }
.spprint:hover { border-color:#bbb; color:#000; }

#tophtbox { padding:20px; text-align:center; }

#sidesticky { position:absolute; right:4px; top:100px; width:300px; height:600px; background-color:var(--bg2); }
@media(max-width:1200px) { #sidesticky { display:none; } }



@media (max-width:1000px) {
	#lotbox .xpart1 { width:98%; }
	#lotbox .xpart2 { width:96%; margin-left:0; }
	#cform { box-shadow:0 0 7px rgba(0,0,0,0.5); }
	.spshbar { margin-top:20px; }
	.spres2 .ximg { max-width:380px; padding:20px 10px 10px 10px; vertical-align:top; }
}
@media(max-width:900px){
	#showform { padding-left:10px; }
	.spbox { width:calc(50% - 20px); }
}
@media (max-width:800px) {
	.spdatesel { padding:20px 1%; }
	.spht .xlink { width:50%; }
}
@media (max-width:600px) {
	h1 { background:linear-gradient(180deg, transparent 0%, rgba(1,23,134,0.8) 25%, rgba(1,23,134,0.8) 70%, transparent 100%); font-size:25pt; }
	h1 i { font-size:16pt; }
	#lotbox { border-radius:0 0 30px 30px; }
	.spbox { width:calc(100% - 40px); margin:15px 0; max-width:400px; }
}
@media (max-width:500px) {
	h1 { font-size:23pt; }
	h2 { font-size:20pt; }
	.spclip iframe { max-width:420px; height:236px; }
	#showform .xlabel { width:90px; text-align:right; }
	.spdn .x1 { font-size:22pt; }
	.spht .xlink { width:100%; }
}
@media (max-width:399px) {
	#lotbox .xbox1 .xlabel { font-size:15pt; }
	#lotbox .xbox1 .xres { font-size:28pt; }
	#lotbox .xprize { font-size:10pt; }
	#lotbox .xbox2 .xres { font-size:20pt; }
	.splotm .xres { font-size:12pt; }
	.splotm .xres b { min-width:78px; }
	.splotm .xres.xbig { font-size:16pt; }
	.splotm .xres.xbig b { min-width:100px; }
}