@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary: #000000;
  --secondary: #333333;
  --dark: #666666;
  --light: #cccccc;
  --border: #999999;
  --color-text: #444444;
  --color-heading: #111111;
}

body {
	font-family: "Noto Sans", sans-serif;
	font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size:1.1em;
	line-height:1.5em;
}

h2 { font-size:1.2em; }
h3 { font-size:1.15em; }
h4 { font-size:1.1em; }
h5 { font-size:1.05em; }
h6 { font-size:1.025em; }

h1,h2,h3,h4,h5,h6 { line-height:1.4em; }

em {
	font-style:italic;
}

.page-title {
	font-size:1.5em;
	line-height:1.4em;
}

.website-copyright {
	display:none;
}

.header-top, .header {
	background:#e4e4e4;
}
.site-logo img {
	max-height:60px;
}
.mobile-menu span,
.mobile-menu span:nth-child(2) {
	background-color:#000;
}

.container {
	padding:0 25px;
}

.messages--status {
	background: #eeeeee;
  padding: 10px 20px;
  font-size: 0.7em;
  margin: 0 0 2em 0;
  font-style: italic;
}


.block-pub-date .views-field-created {
	font-size:0.7em;
}


.image-container {
    position: relative;
    display: inline-block;
    width:100%;
}

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
}

article img {
	width:100%;
	height:auto;
}

article table th {
	border:1px solid #ccc;
	background:#efefef;
}
article table td {
	border:1px solid #ccc;
}

ul, ol {
  margin: 0;
  padding: 0 0 1.25rem 2.5rem;
}

.node-taxonomy-container {
	font-size:0.6em;
}
.taxonomy-term {
	margin:0 0.5em 1em 0;
}
.taxonomy-term a {
	padding: 6px 10px;
  border: none;
  border-right:1px solid #999;
  border-bottom:1px solid #999;
	border-bottom-right-radius:5px;
}
li.taxonomy-term:not(:last-child) {
	margin-right:0.5em;
}

.feed-icon {
	display:none;
}

.scrolltop {
	bottom:60px;
}



/* homepage */

.page-homepage.grid-view.top-update {
	display:flex;
	flex-direction:column;
	gap:20px 40px;
	margin-bottom:40px;
}
.page-homepage.grid-view.top-update .views-row {
	flex:1;
}
.page-homepage.grid-view.top-update .views-row img {
	width:100%;
	height:auto;
	margin:0;
	border-radius:10px;
}
.page-homepage.grid-view.top-update .views-row .top-update-title h2 {
	font-size:1.2em;
	line-height:1.2em;
}
.page-homepage.grid-view.top-update .views-row .top-update-tag a {
	color:#999;
}
.page-homepage.grid-view.top-update .views-row .top-update-created {
	font-size:0.8em;
}



.page-homepage .item-list {
	display:flex;
	flex-direction:column;
	border-bottom:1px solid #ccc;
	border-bottom-right-radius:10px;
	margin:0 0 50px 0;
}
.page-homepage .item-list h3 {
	font-weight:400;
	font-size:0.8em;
}
.page-homepage .item-list ul {
	font-weight:700;
	font-size:1em;
	list-style:none;
	padding:0;
	width:100%;
}
.page-homepage .item-list ul li {
	padding:15px 10px 15px 0;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	border-bottom-right-radius:10px;
}
.page-homepage .item-list ul li:last-child {
	border-bottom:none;
}


.page-term {
  display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 20px;
}
.page-term .views-row {
	padding:1em 0 0 1em;
	border-left:1px solid #ccc;
	border-top:1px solid #999;
	border-top-left-radius:10px;
}
.page-term .views-field-title h3 {
	font-size:1em;
}
.page-term .views-field-created {
	font-size:0.7em;
}



.page-tag-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0 10px;
}
.page-tag-list header,
.page-tag-list .contextual,
.page-tag-list .pager {
	grid-column: span 2;
}
.page-tag-list .views-row {
	font-size:0.7em;
}



.node_search-results {
  display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 20px;
}
.node_search-results li h3 {
	font-size:1em;
	padding:0 0 10px 0;
}
.node_search-results li p {
	font-size:0.7em;
	line-height:1.4em;
}


.component-block-title {
	font-size:1.1em;
	font-weight:700;
}

.block-related-content {
	padding:50px 0;
}
.block-related-content .views-row {
	font-size: 0.9em;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-top-left-radius: 10px;
  padding: 10px 15px;
  margin: 10px 0;
}


.sidebar .block {
	background-color:#eee;
}
.block-latest-post .views-row {
	font-size: 0.9em;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
  border-top-left-radius: 10px;
  padding: 10px 15px;
  margin: 10px 0;
}

/* letest-post on term page */

#block-thex-views-block-content-recent-block-1-2 {
	padding:50px 0;
}


.footer {
	padding: 0 0 100px 0;
}

.page-tags-all .item-list ol {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(300,25px);
  font-size:0.8em;
}





/* comments */

#comments {
	background:#eee;
	padding:20px;
}
.comment-form-wrap {
	margin:0;
}
#edit-comment-body-0-format-help {
	display:none;
}
#block-thex-commenddummy {
	background:#eee;
	padding:0 20px;
}
#block-thex-warningbeforecomment {
	background:#eee;
	padding:20px;
}
.login-button-for-comment {
	position: relative;
  cursor: pointer;
  border: 0;
  padding: 8px 10px;
  line-height: 1.6;
  -webkit-appearance: button;
  background:#aaa;
  display:inline-block;
}
.login-button-for-comment:hover {
	background:#ccc;
}


.comment-header {
	padding:0 0 1rem 0;
}
.comment-meta {
	padding:0;
	font-size:0.8rem;
}
.comment-title {
	display:none;
}



tr th {
	border:1px solid #ccc;
	background:#ccc;
}
tr td {
	border:1px solid #ccc;
}






@media screen and (min-width:768px) {
	
	.page-homepage.grid-view.top-update {
		flex-direction:row;
	}
	.page-homepage.grid-view.top-update .views-row .top-update-title h2 {
		font-size:1.5em;
		line-height:1.2em;
	}


	.page-homepage .item-list {
		flex-direction:row;
	}
	.page-homepage .item-list h3 {
		padding:20px 0 0 0;
		min-width:160px;
	}
	
	.page-homepage .item-list ul li {
		padding:15px 10px 15px 0;
	}

	/* .page-homepage, */

	.page-term {
	  grid-template-columns: repeat(2,minmax(0,1fr));
	}

	/*
	.page-homepage header,
	.page-homepage .contextual,
	.page-homepage .pager, */

	.page-term header,
	.page-term .contextual,
	.page-term .pager {
		grid-column: span 2;
	}

	.scrolltop {
		bottom:10px;
	}

	.page-tag-list {
	  grid-template-columns: repeat(4,minmax(0,1fr));
	}
	.page-tag-list header,
	.page-tag-list .contextual,
	.page-tag-list .pager {
		grid-column: span 4;
	}

	.page-tags-all .item-list ol {
	  display: grid;
	  grid-auto-flow: column;
	  grid-template-rows: repeat(100,25px);
	  font-size:0.8em;
	}

	.list-thailand-region {
	  display: grid;
	  grid-template-columns: repeat(2,minmax(0,1fr));
	  gap: 20px;
	}

	.node_search-results {
	  grid-template-columns: repeat(2,minmax(0,1fr));
	}

}

@media screen and (min-width:992px) {

	.page-homepage.grid-view.top-update .views-row .top-update-title h2 {
		font-size:2em;
		line-height:1.2em;
	}

	.page-homepage,
	.page-term {
	  grid-template-columns: repeat(4,minmax(0,1fr));
	}

	.page-homepage header,
	.page-term header,
	.page-homepage .contextual,
	.page-term .contextual,
	.page-homepage .pager,
	.page-term .pager {
		grid-column: span 4;
	}

	.page-tag-list {
	  grid-template-columns: repeat(5,minmax(0,1fr));
	}
	.page-tag-list header,
	.page-tag-list .contextual,
	.page-tag-list .pager {
		grid-column: span 5;
	}


	.list-thailand-region {
	  display: grid;
	  grid-template-columns: repeat(3,minmax(0,1fr));
	  gap: 20px;
	}

	.node_search-results {
	  grid-template-columns: repeat(4,minmax(0,1fr));
	}

	.block-latest-post .views-row {
		font-size: 0.7em;
	  line-height:1.4em;
	}

}