html { font-size:16px }
body,h1,h2,h3,h4 { margin:0; font-family:'Sarabun',sans-serif; font-weight:400; font-size:1em }
strong { font-weight:500 } img { border:0; display:block }
a:link,a:visited { text-decoration:none; color:#FF3300 }
a:hover,a:active { text-decoration:underline; color:#FF3300 }
* { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box }
::selection { background:#FF7518; color:White } .cont { margin:0 auto; display:block }
.fw5 { font-weight:500 } .fw6 { font-weight:600 } .f-i { font-style:italic } .fen { font-family:'Prompt',sans-serif }
@media screen and (max-width:727px) { body { font-size:0.875em } .cont { width:100% } }
@media screen and (min-width:728px) { body { font-size:1em } .cont { width:728px } }

.all-sports { margin:25px 5px; text-align:center }
.all-sports ul { list-style-type:none; margin:0; padding:0; overflow:hidden }
.all-sports li { display:inline-block; margin:0 auto 5px }
.all-sports li a { display:inline-block; background-color:White; color:OrangeRed; border:1px solid #FF7518; border-radius:5px; padding:8px 12px; font-weight:500; text-align:center; text-decoration:none; transition:0.3s }
.all-sports li a.home { background-color:SeaShell } .all-sports li a.active,.all-sports li a:hover { background-color:Coral; color:White }
@media (min-width:728px) { .all-sports { margin:30px auto 25px; text-align:left } .all-sports li { font-size:0.9375em } }

.title { display:block; margin:5px; padding:15px 0; text-align:center; background-color:#343434; color:White; border-radius:5px; text-decoration:none }
@media (min-width:728px) { .title { margin:5px 0; padding:15px 14px; text-align:left } }

/* ----- */

.ad-margin { margin:5px 5px 0 }
.ad-blank { margin:0 auto; padding:15px 10px; font-size:0.9375rem; background-color:Tomato; color:White; text-align:center; text-decoration:none; display:block; border-radius:5px }
.ad-top img { margin:5px auto; width:100%; max-width:728px; height:auto }
.ad-cont img { margin:20px auto; width:100%; max-width:728px; height:auto }
.ad-day img { margin:20px auto 0; width:100%; max-width:728px; height:auto }
.ad-bottom img { margin:40px auto 0; width:100%; max-width:728px; height:auto }
.note-desc { margin:20px 5px 10px; padding:0; color:#101010 } .note-desc.main { line-height:2; text-align:center } .note-desc.info,.note-desc.snooker { padding:0 14px; line-height:2; text-align:center }
.gap-comp { margin:0 5px; display:inline-block; line-height:0; color:White }
.gap-rd { margin:0 5px; display:inline-block; line-height:0 }
.gap-left { margin-left:5px; display:inline-block; line-height:0 }
.gap-right { margin-right:5px; display:inline-block; line-height:0 }
.gap-space { margin:0 4px; display:inline-block; line-height:0 }
.gap-list { margin-right:5px; display:inline-block; line-height:0 }
@media (min-width:728px) { .ad-margin { margin:5px 0 0 } .ad-blank { padding:25px 10px; font-size:1.0625em }
.note-desc { margin:20px 0 10px } .note-desc.info,.note-desc.snooker { font-size:0.9375rem; text-align:left } }

.cont-banner { margin:0 auto; display:block } .column-margin { margin:0 5px } .column-banner { overflow:hidden }
@media (max-width:1470px) { .cont-banner { width:100% } }
@media (min-width:1471px) { .cont-banner { width:1471px } }

.column-t1,.column-t2 { width:100%; margin:5px auto } .column-b1,.column-b2,.column-b2n { width:100%; margin:0 auto 5px }
.column-t1 img,.column-t2 img,.column-b1 img,.column-b2 img,.column-b2n img { width:100%; max-width:728px; height:auto; margin:0 auto }
.column-banner::after { content:""; clear:both; display:table }
.column-ad { margin:0 auto; width:100%; max-width:728px; padding:18px 10px; font-size:1rem; background-color:Tomato; color:White; text-align:center; text-decoration:none; display:block }
@media (min-width:1471px) { .column-margin { margin:0 } .column-t1,.column-t2,.column-b1,.column-b2,.column-b2n { width:50%; float:left }
.column-t1 img,.column-b1 img { margin:0 2.5px 0 auto } .column-t2 img,.column-b2 img,.column-b2n img { margin:0 auto 0 2.5px } .column-ad { width:728px; height:120px; padding:45px; font-size:1.125em } }
@media (max-width:1470px) { .column-b2n { display:none } }

.ad-text { margin:10px auto 30px }
.ad-text-1 { margin:10px; padding:0; color:#FF4500 } .ad-text-1 a:link,.ad-text-1 a:visited { color:#FF4500; text-decoration:none } .ad-text-1 a:hover,.ad-text-1 a:active { text-decoration:underline } /* border-bottom:1px dotted */
.ad-text-2 { margin:10px; padding:0; color:#FF4500 } .ad-text-2 a:link,.ad-text-2 a:visited { color:#FF4500; text-decoration:none } .ad-text-2 a:hover,.ad-text-2 a:active { text-decoration:underline }
@media (min-width:728px) { .ad-text-1 { margin:10px 0; font-size:0.9375rem } .ad-text-2 { margin:10px 0; font-size:0.9375rem } }

.ad-col { overflow:hidden }
.ad-col1,.ad-col2 { width:50%; float:left }
.ad-col1 img { width:90%; margin:10px 2.5px 10px auto }
.ad-col2 img { width:90%; margin:10px auto 10px 2.5px }
.ad-col::after { content:""; clear:both; display:table }
@media screen and (min-width:728px) {
.ad-col1 img { width:100%; max-width:300px; height:auto; margin:20px 10px 10px auto }
.ad-col2 img { width:100%; max-width:300px; height:auto; margin:20px auto 10px 10px } }

/* ----- */

.comp-atp { margin:5px 5px 20px; padding:10px; background-color:#EFF9FD; border:1px solid #D0D0D0; border-radius:5px; line-height:2; font-size:0.9375rem; text-align:center }
@media (min-width:728px) { .comp-atp { padding:10px 14px; margin:5px 0 20px; font-size:1rem; text-align:left } }

.comp-wta { margin:5px 5px 20px; padding:10px; background-color:#FDF2F6; border:1px solid #D0D0D0; border-radius:5px; line-height:2; font-size:0.9375rem; text-align:center }
@media (min-width:728px) { .comp-wta { padding:10px 14px; margin:5px 0 20px; font-size:1rem; text-align:left } }

.comp-live { margin:5px 5px 20px; padding:10px; background-color:#FFFFF0; border:1px solid #D0D0D0; border-radius:5px; line-height:2; font-size:0.9375rem; text-align:center } .comp-live.list { margin:5px 5px 10px }
@media (min-width:728px) { .comp-live { padding:10px 14px; margin:5px 0 20px; text-align:left } .comp-live.list { margin:5px 0 10px } }

.comp-info { margin:5px 5px 10px; padding:8px 10px; background-color:#FFFFF0; border:1px solid #D0D0D0; border-radius:5px; font-size:0.8125rem; text-align:center; line-height:2; opacity:1; transition:opacity 0.3s }
.comp-x { margin-left:10px; color:DarkGray; float:right; font-size:2.5em; line-height:0.5; cursor:pointer; transition:0.3s } .comp-x:hover { color:Black } .comp-info.left { text-align:left }
@media (min-width:728px) { .comp-info { padding:8px 14px; margin:5px 0 10px; font-size:0.9375em; text-align:left } }

/* ----- */

html,body { height:100% } .footer { position:sticky; top:100vh }
.bottom { width:100%; margin:0; text-align:center } .bottom p { margin:40px auto 10px; padding:15px 30px; line-height:2; border:1px dashed Silver; color:#343434; border-radius:10px; display:inline-block }
.power,.copy { font-family:'Prompt',sans-serif } .power { color:OrangeRed }

#myTop { display:none; position:fixed; z-index:99; bottom:60px; right:20px; padding:18px 16px; color:White; font-family:'Prompt',sans-serif; cursor:pointer; border-radius:50%; background-color:#FF5F15 }
#myTop:hover { background-color:#FF4500 }
@media (min-width:728px) { #myTop { right:100px } }

/* ----- */

::-webkit-scrollbar { width:15px }
::-webkit-scrollbar-track { background:#DCDCDC }
::-webkit-scrollbar-thumb { background:OrangeRed; border-radius:5px }
::-webkit-scrollbar-thumb:hover { background:OrangeRed }