.container {
	display: grid;
/*	height: 100%;*/
	gap: 0px;
	grid-template-columns: 126px 250px auto 300px;
	grid-template-rows: 40px 0px auto auto auto auto;
	grid-template-areas:
		"nav nav nav nav"
		"mob mob mob mob"
		"ad1 head head ad2"
		"ad1 side sec ad2"
		"ad1 ad3 sec ad2"
		"foot foot foot foot";
}

@media only screen and (max-width: 600px) {
	.container {
	display: grid;
	gap: 0px;
/*	height: 100%;*/
	grid-template-columns: 1fr;
	grid-template-rows: 40px auto auto auto 0px 0px 0px 0px;
	grid-template-areas:
		"mob"
		"head"
		"sec"
		"foot"
		"nav"
		"ad1"
		"ad2"
		"ad3"
		;
	}

	.mob {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		background: #333;
		color: white;
		padding: 0 15px;
		grid-area: mob;
	}
	.mobleft a {
		text-decoration: none;
		color: white;
		padding: 0;
		display: flex;
		align-items: center;
		height: 100%;
	}
	.mobright {
		display: flex;
		align-items: center;
		gap: 15px;
	}
	.mobright button {
		background: none;
		border: none;
		color: white;
		font-size: 22px;
		cursor: pointer;
	}
	.mob a{
		text-decoration: none;
		color: white;
	} 

	.nav, .sidemenu {
		display: none;
		max-height: 0;
		overflow: hidden;
	}

	.ad1, .ad2, .ad3 {
		display: none;
		max-height: 0;
		overflow: hidden;
	}

}

@media only screen and (min-width: 600px) and (max-width: 985px) {
	.container {
		display: grid;
/*		height: 100%;*/
		gap: 0px;
		grid-template-columns: 250px auto;
		grid-template-rows: 40px auto auto auto auto;
		grid-template-areas:
			"nav nav"
			"head head"
			"side sec"
			"ad3 sec"
			"foot foot";
	}
	.mob, .ad1, .ad2 {
		display: none;
		max-height: 0;
		overflow: hidden;
	}

}

/* ---------hide mob on wide screen------ */
@media only screen and (min-width: 985px) {
	.mob {
		display: none;
		max-height: 0;
		overflow: hidden;
	}
}

/* ---------wide screen---------- */
.nav {
	display: flex;
	justify-content: space-between;
	align-items: stretch; /* สำคัญ: ให้ลูกสูงเท่า nav */
/*	margin:0;
	padding:0;
	text-align:left;*/
	height:40px;
	background: #333;
	grid-area: nav;
	color:#fff;
}

.nav a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 12px;
	color: white;
	text-decoration: none;
}

.nav a:hover {
	background: black;
	color: orange;
}

.nav .left, .nav .right {
	display: flex;
	align-items: stretch; /* ให้ลูกในกล่องนี้สูงเต็ม nav */
}

.header {
	background: #bbeecc;
	margin: 0;
	padding: 0;
	grid-area: head;
}

.sidemenu {
	background: grey;
	grid-area: side;
}

.section {
	margin: 0;
	padding: 0;
	background: none;
	color: #000;
/*	min-height: 60vh;*/
	grid-area: sec;
	width: 100%;
	overflow: hidden;
}

.section table {
  max-width: 100%;  /* ไม่ให้ตารางกว้างเกิน container */
  table-layout: fixed; /* บังคับให้คอลัมน์อยู่ในขอบเขต */
}

.section > p {
  margin: 0.6em 10px;
}

.section > div {
  margin: 0 10px;
}

.section > ol,
.section > ul {
  margin: 0.6em 10px;
  padding-left: 30px;
/*  margin-left: 10px;
  margin-right: 10px;*/
}

.section ol li,
.section ul li {
  margin: 0.5em 0;
}

.section a,
.section a:visited {
	color: blue;
	text-decoration: none;
}

/*------pagination------*/
.section a.btn {
	border:1px solid blue;
	padding:5px 10px;
	border-radius:10px;
	margin-right:10px;
}
.section a.btn:link, .section a.btn:visited{
		text-decoration: none;
		color: blue;
}
.section a.btn:hover, .section a.btn:active{
		color: #fff;
		background-color: #036;
}
/*------pagination------*/

.footer {
	margin: 0;
	padding: 0;
	text-align: center;
	background: rgb(0, 34, 98);
	color: yellow;
	grid-area: foot;
}

.ad1 {
	margin: 0;
	background: #C0C0C0;
	grid-area: ad1;
}

.ad2 {
	margin: 0;
	background: #333;
	grid-area: ad2;
}

.ad3 {
	margin: 0;
	background: grey;
	grid-area: ad3;
}