body { margin:0; padding: 0; }
body::after {
	background: url(images/002.jpg) fixed left center no-repeat;
	background-size: 100% auto;
  content: "";
  opacity: 1.0;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;   
}
@media screen and (max-width: 667px) and (orientation:portrait) {
    body::after { background-size: auto 100%; }
}

.body { max-width: 960px; margin: 0 auto; text-align: center; }
.head {
	background: rgba(255,255,255,0.5) url(images/food_head.jpg) left top no-repeat;
	background-size: 100% auto;
	height: 200px;
	position: relative;
	margin: 10px 10px;
	border: solid 1px #ffffff;
	box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
	border-radius: 10px;
}
.head .company {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}
.head h1 {
	display: inline-block;
	margin: 0 auto -7px;
	padding: 5px 15px;
	font: normal 24px tahoma;
	background-color: #ff6600;
	border: solid 3px #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 7px 3px rgba(255,255,255,0.75);
	white-space: nowrap;
}
.head h1 a { color: #fff; text-decoration: none; }
.head h1:hover { background: #990000; }
.head h3 {
	display: block;
	margin: 0 -10px -1px -10px;
	padding: 10px;
	font: normal 14px tahoma;
	color: #fff;
	background: #3377ff;
	border: solid 3px #fff;
	border-radius: 10px;
}
.lang {
	background: green;
	text-decoration: none;
	font: normal 14px tahoma;
	padding: 2px 10px;
	border: solid 3px #fff;
	color: #fff;
	text-transform: uppercase;
	position: absolute; right: -8px; top: -8px;
	border-radius: 10px;
}
.qr { position: absolute; right: 5px; top: 30px; }
.qr img { width: 40px; }
.fb { position: absolute; top: 80px; right: 8px; border-radius: 4px; padding: 2px; background: #fff; }
.fb:hover { box-shadow: 0px 0px 3px 1px #fff; }

@media screen and (max-width: 600px) {
    .head { background-size: auto 100%; }
}



/* ============ search ============== */
.search {
	display: inline-block;
	position: absolute; left: 0; top:0; 
	margin: 10px;
	padding: 5px;
	background: #fff;
	border-radius: 7px;
}
.search img { height: 16px; vertical-align: middle; padding: 3px; }
.search a:hover { opacity: 0.8; }

@media screen and (max-width: 500px) {
    .search { padding: 1px 5px; }
}

input[type=search] {
	border: solid 1px #fff;
	padding: 3px 3px 3px 20px;
	width: 0;
	cursor: pointer;
	background: url(images/searchicon.png) 5px 3px no-repeat;
	background-size: 16px 16px;
	border-radius: 5px;
	
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	outline: none;

	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
}
input[type=search]:hover,
input[type=search]:focus {
	width: 130px;
	border-color: #66CC75;
	padding-left: 25px;
	
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}



/* ============ food detail ============== */
.cat_title {
	display: inline-block;
	margin: 10px auto 10px;
	padding: 5px 15px;
	font: normal 24px tahoma;
	color: #fff;
	background-color: #ff6600;
	white-space: nowrap; 
	border: solid 3px #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 3px #000;
}
.food_wrap {
	margin: 10px auto 30px;
	padding: 10px;
	background: rgba(255,255,255,0.5);
}
.food1 {
	margin-bottom: 10px;
	position: relative;
	overflow: auto;
}
.food1 a {
	width: 225px;
	display: inline-block;
	margin: 5px 2px;
	position: relative; overflow: auto;
	cursor: pointer;
	text-align: center;
}
.food1 a img{ width: 100%; }
.food1 a b { 
	position: absolute; bottom: 0; left: 0; right: 0;
	background-color: #990000;
	color: #fff;

	padding: 8px 5px;
	font: bold 13px tahoma;
}
.food1 a i { 
	position: absolute; top: 0; right: 0;
	font: bold 13px tahoma;
	background-color: #fff; color: #990000;
	padding: 2px 7px;
	border: solid 1px #990000;
	white-space: nowrap;
}
@media screen and (max-width: 500px) {
    .food_wrap { padding: 10px 0px; }
    .food1 { padding: 0px; }
    .food1 a { width: 47%; padding-bottom: 20px; }
}


/* ============ food cat ============== */
.cat { padding: 5px; background: none; }
.cat a { height: 175px; overflow: hidden; }
.cat a b { padding: 8px; font-size: 15px; }

@media screen and (max-width: 500px) {
    .cat a { width: 45%; height: 140px; }
    .cat a b { min-height: 35px; }
}


/* ============ food detail - no image ============== */
.food2 {
	display: inline-block;
	margin: 10px 4px;
	padding: 10px;
	background: #fff;
	1border-radius: 10px;
	list-style: none;
	min-width: 240px;
}
.food2 li {
	border-bottom: solid 1px #ddd;
	font: bold 13px tahoma;
	padding: 3px 0px;
	overflow: auto;
	text-align: left;
}
.food2 li a b {
	display: inline-block;
	margin: 2px 40px 2px 0;
	padding-left: 20px;
	background: url(images/bullets.gif) 5px 6px no-repeat;
	cursor: pointer;
}
.food2 li a:hover { color: orange; }
.food2 li i { color: #990000; float: right; margin-left: -30px; font-style: normal; }



/* ============ pick-list ============== */
#pick-list {
	margin: 5px 40px 10px 5px;
	background: #fff;
	padding: 8px 10px;
	border-radius: 10px;
	z-index: 10;
	font: bold 13px tahoma;
	text-align: left;

	display: inline-block;
	visibility: hidden;
}
#pick-list b { color: #990000; }


/* ============ confirm-list ============== */
.food3 {
	background: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	display: inline-block;

	vertical-align: top;
	z-index: 10;
	margin: 40px auto;
	font: normal 13px tahoma;
}
.food3 h2 {
	margin: 0 auto; color: #990000;
}
.food4 { margin: 0; padding: 10px 0; list-style: none; text-align: left; }
.food4 li {
	border-bottom: solid 1px #ddd;
	font: bold 13px tahoma;
	padding: 3px 0px;
	overflow: auto;
}
.food4 b { color: #990000; }
.food4 i { display: inline-block; vertical-align: top; font-style: normal; }
.food4 i:nth-child(1) { margin-right: 80px; }
.food4 i:nth-child(2) { float: right; margin-left: -80px; }
.food4 i a , #pick-list a { 
	box-shadow: 0px 1px 0px 0px rgb(245, 151, 142) inset;
	border-radius: 6px;
	border: 1px solid rgb(208, 39, 24);
	display: inline-block;
	cursor: pointer;
	color: rgb(255, 255, 255);
	font: bold 15px arial;
	padding: 3px 12px;
	margin: 2px;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgb(129, 14, 5);
	background: rgb(242, 69, 55) linear-gradient(to bottom, rgb(242, 69, 55) 5%, rgb(198, 45, 31) 100%) repeat scroll 0% 0%;
}
.food4 i a:hover , #pick-list a:hover{
	text-decoration: none; 
	background: rgb(242, 69, 55) linear-gradient(to bottom, rgb(198, 45, 31) 5%, rgb(242, 69, 55) 100%) repeat scroll 0% 0%;
}

#confirm { overflow-y: auto; }
#confirm p {
	font: bold 14px tahoma;
	margin: 5px auto 15px;
}
#confirm p b {
	font: bold 16px tahoma;
	color: #990000;
}
#confirm .btn { margin-top: 20px; }



/* ============ Swipe ============== */
.noscroll {
	overflow: hidden;
}
.overlay {
	position: fixed;
	overflow-y: scroll;
	left: 0; top: 0; right: 0; bottom: 0;

	opacity: 0;
	text-align: center;
	background: rgba(0, 0, 0, 0.8);
	z-index: 9;
}
.swipe {
	overflow: hidden;	/* ใช้ hidden ดีแล้ว ใช้ padding รองรับ overflow แทน */
	visibility: hidden;
	position: relative;
	display: block;

	padding: 50px 0;
	margin-bottom: 50px;
}
.swipe-wrap {
	1overflow: hidden;	/* ปิด hidden เพื่อรองรับ overflow */
	position: relative;
}
.swipe-wrap > div {
	float: left;
	position: relative;
	1overflow: hidden;	/* ปิด hidden เพื่อรองรับ overflow */
	display: inline-block;
	1height: 340px;
	text-align: center;
	z-index: 1;
}
.swipe-wrap div a {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	1height: 340px;
	margin: 0 3px;
}
.swipe-wrap div span {		/* กรอบกว้าง 100% */
	position: absolute; top: -50px; left:0; right: 0;
}
.swipe-wrap div span b {	/* caption */
	display: inline-block;
	color: #fff;
	padding: 10px;
	min-width: 200px;

	background-color: #6699cc;
	border: solid 3px #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 7px 1px rgba(0,0,0,0.75);
}
.swipe-wrap div i {		/* กรอบกว้าง 100% */
	position: absolute;
	bottom: 0; left:0; right: 0;
	padding: 10px;
	background: rgba(255,255,255,0.7);
	font-style: normal;
	color: #444444;
}
.swipe-wrap div a img {
	max-width: 100%; 
	max-height: 340px;
}
.close {
	display: inline-block; float: right;
	padding-right: 10px; margin-left: -40px;

	z-index: 10;
	color: white; font-size: 30px; 
	text-decoration: none;
	cursor: pointer;
}
.close:active { transform: translateY(2px); }


/* ============ Swipe Button ============== */
.online_order {
	position: absolute; bottom: 0; left:0; width:100%;
}
.btn {
	display: inline-block;
	margin: 0 2px; padding: 0.8em 0;
	width: 120px; 
	color: #eee;
	background-color: #27AAE1;
	box-shadow: inset 0 -0.1em 0 0 rgba(0, 0, 0, 0.2), inset 0 1.15em 0 0 rgba(255, 255, 255, 0.1);
	border-radius: 3px;
	cursor: pointer;
}
.btn:active {
	transform: translateY(2px);
	box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);
}
.swipe_nav {
	position: absolute; left: 20%; top: 45%;
	opacity: 0; z-index: 1;
	transition: all 0.3s ease;
	cursor: pointer;
}
.next { left: 74%; }
.swipe_nav:active { transform: translateY(2px); }
.swipe:hover .swipe_nav { opacity: 1; }

@media screen and (max-width: 800px) {
    .swipe_nav { display: none; }
}


/* ============ Order Status ============== */
.status {
	display: none;
	background: #fff;
	border-radius: 10px;
	padding: 10px; margin: 10px 10px 0 10px;
	border: solid 1px red;
	font: normal 13px tahoma;
	text-align: left;
}
.status h2 { font: bold 14px tahoma; color: #990000; margin-top: 0; }
.status b { font-weight: bold; color: #990000; }
.status i { font-weight: bold; font-style: normal; color: green; }
.status ul { margin: 0; padding: 0; list-style: none; }
.status li {
	border-bottom: solid 1px #ddd;
	padding: 10px 0px;
}

.info {
	display: inline-block;
	margin: 10px;
	padding: 10px 20px;
	background: rgba(255,255,255,1);
	box-shadow: 1px 1px 3px #999;
	font: bold 13px tahoma;
	border: dotted 3px #999;
	text-align: left;
	vertical-align: top;
}
.info h2{ margin: 0; color: #990000; white-space: nowrap; }

.map {
	max-width: 85%;
	background:#FFF;
	margin: 30px auto;
	display: inline-block;
	padding: 10px;
	background: #fff;
	overflow: auto;
	position: relative;
	border-radius: 10px;
}
.map img { max-width: 100%; }

.foot {
	color: #fff;
	background-color: #3377ff;
	display: block;
	padding: 12px 10px;
	font: normal 14px tahoma;
	margin-top: 30px;
	border: solid 3px #fff;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
}
.foot a { color: yellow; text-decoration: none; }