html  { margin:0 auto; min-width:360px; max-width:768px; }
body  { margin:0; padding:0; font-family:Roboto,Helvetica,sans-serif; font-size:16px; background-color:#E6E6E6; color:#000000; position:relative; overflow:auto; }
body {  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; max-width:768px;  }
.page { background-color:#FFFFFF; height:100%; width: 100%; box-sizing:border-box; margin-top:0px; opacity: 0.1; position:relative; }
.page.active { -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; opacity: 1; }
.page * { outline:aqua solid 0px }

body.hotel { position:relative; overflow:auto; }
body.listing { position:relative; overflow:auto; }
.hotel .page { height:auto; padding-top:10px; }
.listing .page { height:auto; padding-top:10px; }
.hotel header { margin-top: 25px; }
.listing header { margin-top: 25px; }

.navhead { width: 100%; max-width:768px; height: 25px; margin: 0; padding: 4px; position: fixed; top: 0; font-size: 13px; color: #0080FF; cursor: pointer;
		   box-sizing: border-box; background-color: #FFFFFF; border-bottom: 1px #B6B4B6 solid; white-space: nowrap; overflow: hidden; z-index: 150; }
.navhead a { text-decoration:none; color:#0E86FD; }
 

.page > h2 { margin:10px; padding:0; font-size:14px; text-align:center;  }
.footer { display:block; background-color:#E6E6E6; font-size:14px; text-align:center; margin:20px auto 0 auto; }

#menu { width:40px; height:40px; cursor:pointer }

.sfont { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
.scrolling { overflow:auto; -webkit-overflow-scrolling: touch; overflow-x:hidden;  }
.selectdisable {  -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.selectenable  {  -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
pre.debug   { font-size:10px; overflow:auto; white-space: pre-wrap; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }

.advert { max-width:360px; max-height:0; margin:0 auto; position:fixed; bottom:40px; left:0; right:0; border:1px silver solid; box-sizing:borderbox; overflow:hidden; z-index:110; transition: max-height 1s ease-out; display:none;}
.advert.active { display:block; max-height:60px; }
.notice { margin:0; padding:0; text-align:center; font-weight:bold; color:black; font-size:16px; margin-top:10px; }
searchbox { display:block; width:95%; margin:10px auto; }


header { height:40px; width:100%; max-width:768px; background-color:#E6E6E6; position:relative; z-index:100; display:block; top:0; font-size:18px; xbox-shadow:0 0 12px rgba(0,0,0,0.3);   }
footer { height:50px; width:100%; max-width:768px; background-color:#E6E6E6; position:fixed; z-index:100; display:block; bottom:0; font-size:12px; color:#0080FF; padding:0 10px; }
header * { vertical-align:top }
footer * { vertical-align:top }

header > span, 
header h1 { font-size:28px; color:black; margin:0 0 0 10px; display:inline; font-weight:normal; }
header login      { position:absolute; top:5px; right:5px; font-size:16px; cursor:pointer }
header login span,ip { margin-right:10px; display:inline-block; font-size:13px; color:green; vertical-align:middle }
footer > span { position:absolute; right:60px; bottom:0; font-size:11px; color:gray }
footer .info { display:inline-block; width:calc(100% - 116px); overflow:hidden; white-space:nowrap }
footer  info { font-size:12px; color:#0080FF }

header svg-icon[data-svg=thaistay] svg { height:32px; display:inline-block; cursor:pointer; vertical-align:top; margin:4px;  }
header svg-icon[data-svg=reload]       { width:20px;  display:inline-block; cursor:pointer; padding:5px; fill:#808080; float:right; }
lg-modal { font-size:15px; background-color:#C0C0C0;  font-weight:bolder; float:right; margin:8px; height:20px;  }
fx-modal { float:right; margin:8px;  }
fx-modal input { cursor: pointer; height: 24px; width: 60px; padding: 5px 8px; font-size: 14px; font-weight:bold; 
    background-color: #C0C0C0; border: 0px solid #4D90FE; border-radius: 9px; box-sizing: border-box; 
	background-size: 5px 5px, 5px 5px, 15px 15px; background-position: calc(100% - 9px) 9px, calc(100% - 4px) 9px, calc(100% - 2px) 4px; 	}
.keyboard header > span  { color:#FF8040; }
lg-modal * { padding:0 5px; }
xcc-modal input { min-width:65px; width:65px; background-size: 6px 6px, 6px 6px, 18px 18px; background-position: calc(100% - 10px) 11px, calc(100% - 4px) 11px, calc(100% - 2px) 4px;; }
xcc-modal + span { position:absolute; bottom:-2px; left:0; font-size:10px; color:#808080; }



svg-icon[data-svg=menu]   { width:40px; display:inline-block; cursor:pointer; }
svg-icon label { display:inline-block; font-size:10px; color:#808080; min-width:40px; text-align:center; margin-left:-8px; }
svg-icon[data-svg=search] { width:25px; display:inline-block; cursor:pointer; stroke:#808080; fill:#808080; padding:5px; padding-right:20px;  }
svg-icon[data-svg=reload] { width:20px; display:inline-block; cursor:pointer; padding:5px; fill:#808080 }
svg-icon[data-svg=goback]    { width:30px; display:inline-block; cursor:pointer; padding:5px; }
svg-icon[data-svg=info] { width:14px; height:14px; display:inline-block; cursor:pointer; padding:3px  }

svg-icon[data-svg=A2HS]   { width:25px; display:inline-block; cursor:pointer; display:none;  }
svg-icon[data-svg=A2HS] path  { fill:#FFFFFF }
.ios svg-icon[data-svg=A2HS] path  { fill:none }
.beforeinstall { width:320px; height:50px; margin:0 auto; position:fixed; bottom:0px; left:0; right:0; border:2px #C0C0C0 solid; background-color:#0080FF; color:white; overflow:hidden;
				 padding:3px 10px; font-size:14px; border-radius:10px; box-sizing: border-box;  z-index:120; transition: opacity 1.5s linear; opacity:0; display:none;}
.beforeinstall svg-icon { position:absolute; top:8px;right:8px; }
.ios .beforeinstall { bottom:0px; height:63px; font-size:14px;}
.ios .beforeinstall svg-icon { position:absolute; top:8px;right:8px; }
.ios arrow { position: fixed; bottom:0; left: 0; right: 0; width: 0; height: 0; display:inline-block; z-index:120; margin:0 auto;
			 border-top: 63px solid #0080FF; border-left: 20px solid transparent; border-right: 20px solid transparent; transition: opacity 1.5s linear; opacity:0; display:none; }
.beforeinstall.show { opacity:1;}
arrow.show          { opacity:1;}
.beforeinstall.active { opacity:1;}
arrow.active          { opacity:1;}
.iframeR24bg { -webkit-overflow-scrolling: none;}

.grecaptcha-badge { bottom: 44px!important }
.secR    { background-image:url('api/img/isecR.gif'); background-repeat:no-repeat; background-position:right top; }    
.bgOK    { background-image:url("data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMEEwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIi8+PC9zdmc+");
           background-repeat:no-repeat; background-position:right center; background-size:16px 16px; }    


/* @font-face { font-family: lucida;   src: url('https://cdn.thaistay.com/lucida_c.ttf'); } */
/* @font-face { font-family: aerokids; src: url('https://cdn.thaistay.com/AEROKIDS.TTF'); } */
/* index */
.destination { list-style:none; padding:0; margin:0; text-align:center; }
.destination { display:table; font-size:12px; margin-bottom:30px}
.destination li { display:inline-block; position:relative; margin:10px 5px; text-align:left; max-width:110px;}
.destination img { width:110px; height:110px; display:inline-block; object-fit:cover; cursor:pointer;  }
.destination span { display:block; width:100%; position:relative;   }
.destination span * { display:block; white-space:nowrap; overflow:hidden  }
.destination a { text-decoration:none; color:black; }


/* listing */
.listing .page h1  { font-weight:bold; margin:0; padding:0;font-size:16px; text-align:center; color:#4A80FF;  }

.listing .item { position:relative; margin:0; padding:10px 5px; border-bottom:1px #C0C0C0 solid; }
.listing .item h3 { margin:0; margin-bottom:5px;padding:0;font-size:15px; font-weight:bold; white-space: nowrap; overflow: hidden; display:block; }
.listing .item img { width:90px; height:60px;  }
.listing .item stars{  display:inline-block; position:absolute; top: 10px; right:10px; background: url('https://cdn.thaistay.com/img/star5.gif') no-repeat; height:16px; width:0px; background-size:80px 16px; }
.listing .item price{ white-space: nowrap; position: absolute; bottom:55px; right:10px; font-size:18px; color:green}
.listing .item info { display:inline-block; vertical-align:top; width:185px; height:60px; font-size:12px; overflow:hidden;  position:relative; }
.listing .item info * { white-space:nowrap; }
.listing .item .fus { text-shadow:0 0 8px #000000; color:rgba(255,255,255,0); filter:DXImageTransform.Microsoft.Blur(pixelradius=2); zoom:1; pause-before:3s; }
.listing .item info a { text-decoration:none; color:#0080FF; }

.listing .item dist { position:absolute; left:0; bottom:0; }
.listing .item xmltext { display:none }
.listing .item > div { font-size:12px; color:#FF4000; margin-bottom:10px; }
.listing .item > div span { font-size:13px; background-color:green; color:white; padding:1px 3px; }

.listing .item .btn { position:absolute; right:10px; bottom:15px; font-weight:normal; font-family:Prompt; }
.listing .item .btn { display: inline-block; font-size: 16px; width: 65px; border: 1px solid #eaeaea; padding:3px; color: white; cursor: pointer; text-align:center; text-decoration:none; }
.listing .item .btn:hover, .item .btn:active { border: 1px solid #f58427; background: #f58427; }
.listing .item .bgc { background: #f58427; box-shadow: 2px 2px 2px #666666; border-radius: 3px; 
				      background-image: -webkit-linear-gradient(top, #f58427, #f5ae7e);
				      background-image: -moz-linear-gradient(top, #f58427, #f5ae7e);
				      background-image: -ms-linear-gradient(top, #f58427, #f5ae7e);
				      background-image: -o-linear-gradient(top, #f58427, #f5ae7e);
 				      background-image: linear-gradient(to bottom, #f58427, #f5ae7e); }

.listing .pages     { text-align:center; font-size:14px; color:blue; margin:20px auto; line-height:30px; }
.listing .pages .pp { text-decoration:underline;  }
.listing .pages b   { margin:0 5px; cursor:pointer; }











form .notice { font-size:14px; color:red; display:inline-block; margin-left:60px; }
form input.verify { background-color:#FFC0C0!important; }

#modal {position:absolute; z-index:990; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.7);}
#modal > span {position:absolute; z-index:999; display:block; border-width:0; width:90vw; height:90vh; max-width:620px; text-align:center; top:0; left:0; }
#modal > spanxx {left:50%; top:50%; transform:translate(-50%, -50%);}
#modal img    { width:auto; height:auto; max-width:100%; max-height:100%; background-color:black}
#modal canvas { width:auto; height:auto; max-width:100%; max-height:100%; background-color:black}
#modal div    { max-width:100%; max-height:100%; border:2px red solid; box-sizing:border-box; position:absolute;  }

switch10 { position: relative; width: 70px; display : inline-block; font-size: 14px; height:30px; line-height:26px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; }
switch10 input { display: none; }
switch10 label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #999999; border-radius: 20px; }
switch10 span { display: block; width: 200%; margin-left: -100%; transition: margin 0.3s ease-in 0s; }
switch10 span:before,
switch10 span:after { display: block; float: left; width: 50%; padding: 0; 
				      color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box; }
switch10 span:before { content: "ON";  padding-left : 8px; background-color: #008000; color: #FFFFFF; }
switch10 span:after  { content: "OFF"; padding-right: 8px; background-color: #EEEEEE; color: #999999; text-align: right; }
switch10 b { display: block; width: 14px; margin: 6px; background: #FFFFFF; position: absolute; top: 0; bottom: 0;
		     border: 2px solid #999999; border-radius: 20px; transition: all 0.3s ease-in 0s; }
switch10 input:checked + label span { margin-left: 0;}
switch10 input:checked + label b    { right: 0px; }